.special_link {
    display: block;
    margin: auto;
    padding: 0.01rem 0.05rem;
    font-family: sans-serif;
    font-size: 0.7rem;
    text-decoration: none;
    color: dimgray;
    position: relative;
    transition: all .3s cubic-bezier(.2, 0, 0, 1);
    z-index: 1;
    
        &:after{
        content: '';
        display: block;
        height: 0.02px;
        position: absolute;
        bottom: 0;
        right: 1.25rem;
        left: 1.25rem;
        background-color: #fafafa;
        transition: all .3s cubic-bezier(.2, 0, 0, 1);
        transform-origin: bottom center;
        z-index: -1;
    }

    &:hover {
        color: #2D2D2D;
        &:after{
    right: 100;
    left: 100;
    height: 100%;
    }
}
}





.button-7 {
    width:150px;
    background-color: #0095ff;
    border: 1px solid transparent;
    border-radius: 3px;
    box-shadow: rgba(255, 255, 255, .4) 0 1px 0 0 inset;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: -apple-system,system-ui,"Segoe UI","Liberation Sans",sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.15385;
    margin: 0;
    outline: none;
    padding: 8px .8em;
    position: relative;
    text-align: center;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: baseline;
    white-space: nowrap;
}

    .button-7:hover,
    .button-7:focus {
        background-color: #07c;
    }

    .button-7:focus {
        box-shadow: 0 0 0 4px rgba(0, 149, 255, .15);
    }

    .button-7:active {
        background-color: #0064bd;
        box-shadow: none;
    }




/* ------------------------------------------------------------- The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 150px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal_KG {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 20px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal_TY {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 150px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal_IB {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 150px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

}

.modal_Overview {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10000;
    padding: 0;
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

}

.rounded-box {
    width: 200px;
    height: 100px;
    background-color: #3498db;
    border-radius: 15px; /* Adjust the value for more or less rounded corners */
    padding: 20px;
    color: white;
    text-align: center;
    line-height: 60px; /* Vertically centers the text */
} 

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 650px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.modal_KG-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 450px;
}

.modal_TY-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 650px;
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}

.modal_Overview-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    max-width: calc(100% - 32px);
    max-height: calc(100% - 32px);
    overflow: auto;
    overscroll-behavior: contain;
    background-color: #fefefe;
    margin: 0;
    padding: 20px;
    border: 1px solid #888;
    width: 640px;
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}


/* The Close Button */
    .closex {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .closex:hover,
    .closex:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

.tiptext {
    background: #ccc;
    /*border: 1px #333 solid;*/
    /*padding: 5px;*/
    width: 100px;
}

.description {
    display: none;
    position: absolute;
    border: 1px solid #000;
    width: 400px;
    height: 400px;
    background: #ffffff;
}

.legende1 {
    border: 1px solid #000000;
    background-color: #FFCC99;
}

.legende2 {
    border: 1px solid #000000;
    background-color: #33CC33;
}

.legende3 {
    border: 1px solid #000000;
    background-color: #FFFFFF;
}

.legende4 {
    border: 1px solid #000000;
    background-color: #CCCCCC;
}

.legende8 {
    font-size: x-small;
    font-family: Arial, Helvetica, sans-serif;
}

.header-style2 {
    text-align: right;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
}

.header-style3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color:gray;
}

.header-style1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: medium;
}


.auto-style1 {
    text-align: left;
}

.auto-style2 {
    background-color: #FFFFFF;
}

.auto-style3 {
    text-align: left;
    border: 1px solid #808080;
    background: rgb(248,225,174);
    background: -moz-linear-gradient(180deg, rgba(248,225,174,1) 0%, rgba(255,242,215,1) 34%, rgba(255,239,203,1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(248,225,174,1) 0%, rgba(255,242,215,1) 34%, rgba(255,239,203,1) 100%);
    background: linear-gradient(180deg, rgba(248,225,174,1) 0%, rgba(255,242,215,1) 34%, rgba(255,239,203,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f8e1ae",endColorstr="#ffefcb",GradientType=1);
}

.auto-style4 {
    font-size: xx-small;
}

.error_msg {
    font-size: small;
    text-align: center;
    color:red;
}

.auto-style5 {
    padding: 25px 0;
    text-align: center;
    
}

.auto-style6 {
    font-size: small;
}

.auto-style7 {
    font-size: xx-small;
    text-align: center;
}

.borderBlack {
    border: 1px solid #000000;
}

.orderlist-style4 {
    text-align: left;
    background-color: #C0C0C0;
}
.orderlist-style5 {
    text-align: left;
    background-color: #EFEFEF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
}

.orderlist-style6 {
    text-align: left;
    background-color: #DDDDDD;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
}

.orderlist-style7 {
    text-align: left;
    color: #FF0000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
}

.loginBox {
    border: 1px solid #ccc;
    position: absolute;
    width: 600px;
    height: 300px;
    left: 50%;
    top: 15%;
    margin-left: -300px;
    margin-top: -200px;
}

.registerBox {
    border: 1px solid #ccc;
    position: absolute;
    width: 600px;
    height: 400px;
    left: 50%;
    top: 15%;
    margin-left: -300px;
    margin-top: -300px;
}

.centeredBox {
    position: absolute;
    width: 600px;
    height: 300px;
    left: 50%;
    top: 15%;
    margin-left: -300px;
    margin-top: -200px;
}

#myFakeElement {
    color: red;
}
body {
    background-color: #fff;
    background-position: center top;
    background-repeat: repeat;
    /* text-shadow: #FFFFFF 5px 5px 5px;*/
    -webkit-font-smoothing: antialiased;
    font-family: verdana, sans-serif;
    overflow-y: scroll; /* Show vertical scrollbar */
    margin: 0;
    padding: 0;
}
html, body {
    margin: 0;
    padding: 0;
}

a {
    cursor: pointer;
}

.debug_div {
    margin: 0;
    border: 1px solid black;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

@keyframes progress {
    0% {
        --percentage: 0;
    }

    100% {
        --percentage: var(--value);
    }
}

@property --percentage {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

[role="progressbar"] {
    --percentage: var(--value);
    --primary: #8F8681;
    --secondary: #E1DCD9;
    --size: 150px;
    animation: progress 2s 0.5s forwards;
    width: var(--size);
    aspect-ratio: 1;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
}

    [role="progressbar"]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: conic-gradient(var(--primary) calc(var(--percentage) * 1%), var(--secondary) 0);
        mask: radial-gradient(white 55%, transparent 0);
        mask-mode: alpha;
        -webkit-mask: radial-gradient(#0000 55%, #000 0);
        -webkit-mask-mode: alpha;
    }

    [role="progressbar"]::after {
        counter-reset: percentage var(--value);
        content: counter(percentage) '%';
        font-family: Helvetica, Arial, sans-serif;
        font-size: calc(var(--size) / 5);
        color: var(--primary);
    }


nav {
    float: left;
    font: bold 12px Arial, sans-serif;
    border: 0px solid #121314;
    border-top: 0px solid #2b2e30;
    overflow: hidden;
}

    nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

        nav ul li {
            float: left;
        }

            nav ul li a {
                float: left;
                color: rgba(0,0,0,0.4);
                padding: 6px 10px;
                text-decoration: none;
                background: #EEE;
                border-left: 0px solid rgba(255, 255, 255, 0.05);
                border-right: 1px solid rgba(0,0,0,0.2);
                border-bottom: 1px solid rgba(0,0,0,0.2);
                min-width: 130px;
                max-width: 130px;
                width: 130px;
                text-align: center;
            }

    nav li ul {
        background: #555;
        left: -999em;
        margin: 40px 0 0;
        position: absolute;
        width: 160px;
        min-width: 200px;
        z-index: 9999;
        border: 1px solid rgba(0, 0, 0, 0.5);
    }

        nav li ul a {
            background: none;
            border: 0 none;
            margin-right: 0;
            width: 120px;
            border-bottom: 1px solid transparent;
            border-top: 1px solid transparent;
        }
    /*2. Ebene anzeigen und stylen*/
    nav ul li a:hover,
    nav ul li:hover > a {
        background: #ccc ;
    }

    nav li ul a:hover,
    nav ul li li:hover > a {
        background: #ccc;
        border-bottom: 1px solid rgba(0,0,0,0.6);
        border-top: 1px solid #000;
    }
    /*3. Ebene anzeigen und stylen*/
    nav li:hover ul {
        left: auto;
    }

    nav li li ul {
        margin: -1px 0 0 160px;
        visibility: hidden;
    }

    nav li li:hover ul {
        visibility: visible;
    }

/* Add a black background color to the top navigation */
.topnav {
    /*background-color: #333;*/
    overflow: hidden;
}



        /* Change the color of links on hover */
        .topnav a:hover {
            background-color: #ddd;
            color: black;
        }


    /* Hide the link that should open and close the topnav on small screens */
    .topnav .icon {
        display: none;
    }


/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {
        display: none;
    }

    .topnav nav {
        display: none;
    }


    .topnav a.icon {
        float: right;
        display: block;
    }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
    .topnav.responsive {
        position: relative;
       
    }

        .topnav.responsive a.icon {
            position: absolute;
            right: 0;
            top: 0;
        }

        .topnav.responsive a {
            float: none;
            display: block;
            text-align: left;
        }
}


#page-footer a {
    color: #fff;
}

#page-footer a:hover {
        color: #fa5705;
}