/* CSS Document */

* {        transition: background-color .5s; }
:root {
        --menu1        : #333333;
        --menu2        : #666666;
        --menu3        : #999999;
        --menu4        : #CCCCCC;
        --menucolor    : transparent;
        --menuhover    : red;
        --menuaktiv    : rgba(230,242,247,0.3);
        --menubreite   : 20vw;
        --menuhoehe    : 100%;
        --menu2pos     : -40px;
        --navcolor     : #333333;
        --fontsize     : 1.5vw;
        --fontsize     : clamp(16px, 1.5vw, 18px);
        --fontsizetoggle : 20px;
}
.aktiv {
        background-color: var(--menuaktiv);
        color: white;
}

#toggleaktiv {
        display: none;
        width: 0;
        height: 0;
        opacity: 0.5;
}


.hamtoggle { display: none; }
.toggle,
[id^=drop] {
        display: none;
}

/* Giving a background-color to the nav container. */
nav {
        margin:0;
        padding: 0;
        background-color: var(--navcolor);
        font: normal var(--fontsize) menuschrift, ARIAL;
}

.menu { width: 100%;
        height: var(--menuhoehe);
        background-color: var(--menucolor);
}

/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
        content:"";
        display:table;
        clear:both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {
        font-size: var(--fontsize);
        float: right;
        padding:0;
        margin:0;
        list-style: none;
        position: relative;
}

/* Positioning the navigation items inline */
nav ul li {
        height: 100%;
        margin: 0px;
        display:inline-block;
        float: left;
        background-color: var(--menu1);
}

/* Styling the links */
nav a {
        display:block;
        padding:9px 15px;
        color:#FFF;
        text-decoration:none;
        background-color: var(--menu);
}
.ohne_sub { padding: 10px 15px; }


nav ul li ul li:hover { background: red; }
/* label.toggle:hover { background: transparent; } */

/* Background color change on Hover */
nav a:hover {
        background-color: var(--menuhover);
        color: white;
}

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
        display: none;
        position: absolute;
        /* has to be the same number as the "line-height" of "nav a" */
        top: var(--menuhoehe);
        border-left: 0;
}

/* Display Dropdowns on Hover */
nav ul li:hover > ul {
        display:inherit;
}

/* Fisrt Tier Dropdown */
nav ul ul li {
        width: var(--menubreite);
        float:none;
        display:list-item;
        position: relative;
        background-color: var(--menu2);
/*        border-top: 1px solid white;
        border-bottom: 1px solid white;
        border-left: 0 solid white;
        border-right: 0 solid white;
*/
}

/* Second, Third and more Tiers
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/
nav ul ul ul li {
        position: relative;
        top: var(--menu2pos);
        /* has to be the same number as the "width" of "nav ul ul li" */
        left: var(--menubreite);
        background-color: var(--menu3);
}

nav ul ul ul ul li {
        left: var(--menubreite);
        background-color: var(--menu4);
}


/* Change ' +' in order to change the Dropdown symbol */
li > a:after { content:  ''; }
li > a:only-child:after { content: ''; }


/* Media Queries
--------------------------------------------- */

@media all and (max-width : 700px) {
        #toggleaktiv { display: block; }
        .sticky         { top: 0px; }

        nav {
                margin: 0;
                font: normal var(--fontsizetoggle) menuschrift, ARIAL;
        }
        nav ul {
                border-left: 0;
        }

        /* Hide the navigation menu by default */
        /* Also hide the  */
        .toggle + a,
        .menu {
                display: none;
        }

        /* Stylinf the toggle lable */
        .toggle, .hamtoggle {
                display: block;
                padding:9px 5px;
                color:#FFF;
                font-size: var(--fontsizetoggle);
                text-decoration:none;
                border:none;
        }

        .toggle:hover {
/*                background-color: #000000; */
        }

        /* Display Dropdown when clicked on Parent Lable */
        [id^=drop]:checked + ul {
                display: block;
        }

.toggle:hover,
[id^=drop] {
        background-color: var(--menuhover);
}
        /* Change menu item's width to 100% */
        nav ul li {
                display: block;
                width: 100%;
                font: normal var(--fontsizetoggle) menuschrift, ARIAL;
        }

        nav ul ul .toggle,
        nav ul ul a {
                padding: 0 40px;
        }

        nav ul ul ul a {
                padding: 0 80px;
        }

        nav a:hover,
         nav ul ul ul a {
/*                background-color: #000000; */
        }

        nav ul li ul li .toggle,
        nav ul ul a,
  nav ul ul ul a{
                padding:9px 5px;
                color:#FFF;
                font-size: var(--fontsizetoggle);
        }


        nav ul li ul li .toggle,
        nav ul ul a {
/*                background-color: #212121;  */
        }

        /* Hide Dropdowns by Default */
        nav ul ul {
                float: none;
                position:static;
                color: #ffffff;
                /* has to be the same number as the "line-height" of "nav a" */
        }

        /* Hide menus on hover */
        nav ul ul li:hover > ul,
        nav ul li:hover > ul {
                display: none;
        }

        /* Fisrt Tier Dropdown */
        nav ul ul li {
                display: block;
                width: 100%;
        }

        nav ul ul ul li {
                position: static;
                /* has to be the same number as the "width" of "nav ul ul li" */

        }

}

@media all and (max-width : 330px) {

        nav ul li {
                display:block;
                width: 94%;
        }

}