/* .... NAVIGATION .... */

.main-navigation {
    background: var(--header-bg) !important;
}
nav.main-navigation .inside-navigation {
    padding: 0!important;
}
nav.main-navigation.is_stuck .inside-navigation {
    padding: 0 20px !important;
}
nav.main-navigation.is_stuck .navigation-branding {
    margin-left: 0;
}
@media (min-width:601px) {
    nav.main-navigation.is_stuck .inside-navigation {
        padding: 0 30px !important;
    }
}
@media (min-width:1001px) {
    nav.main-navigation.is_stuck .inside-navigation {
        padding: 0 40px !important;
    }
}
nav.main-navigation .inside-navigation #menu-hauptnavigation {
    background: transparent !important;
}

.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle, 
.main-navigation .menu-bar-items {
    color: #333;
    background: transparent !important;
}
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
    color: var(--cta-clr) !important;
    background: transparent;
    font-weight: 700;
}
/* mobil */
.gp-icon svg {
    fill: var(--primary-clr);
}
.main-navigation.mobile-menu-control-wrapper {
    background: none;
}
.main-navigation .menu-toggle {
    padding-right: 10px;
    padding-left: 10px;
    font-size: 30px;
    background: transparent;
    color: var(--primary-clr);
}
.main-navigation .menu-toggle svg {
    display: none;
}

@media (max-width: 1000px) {
    #site-navigation {
        flex-basis: 0 !important; /* wir wollen nur die mobile navi */
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 0px);
        background-color: var(--header-bg) !important;
    }
}

#megamenu {
        display: none;
}

@media (min-width: 1001px) {

    #menu-hauptnavigation li.megamenu > ul.sub-menu { 
        display: none !important; 
    }

    #sticky-navigation {
        border-bottom: 1px solid var(--header-bg);
        background: var(--header-bg);
    }
    .main-navigation .menu-toggle {
        font-size: 30px;
    } 
    .main-navigation.is_stuck .menu-toggle {
        font-size: 26px;
    }   

    /* ---------------------------------------
       MEGA MENU

       #megamenu wird von megamenu.js direkt an
       body gehängt (nicht innerhalb von nav),
       damit die Positionierung unabhängig vom
       Sticky-Zustand der Navigation ist.

       "top" wird NICHT hier fix gesetzt, sondern
       von megamenu.js dynamisch per JS anhand der
       aktuellen Nav-Position berechnet – dadurch
       funktioniert es identisch bei normaler und
       bei Sticky-Navigation.
       --------------------------------------- */

    #megamenu {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        z-index: 10010; /* über der Sticky-Nav (z-index 10000 von GP Premium) */
        background: var(--header-bg);
        margin-top: -1px;
    }

    #megamenu .sub-wrap {
        display: none;
        max-width: var(--container-max-width);
        margin: 0 auto;
        padding: 20px 40px 40px;
        background: var(--light-green);
    }
    #megamenu .sub-wrap.is-active {
        display: flex;
        flex-wrap: wrap;
        gap: 40px;
    }

    /* Spalte (mit oder ohne Überschrift) */
    #megamenu .megamenu-col {
        min-width: 180px;
        flex: 1 1 180px;
    }
    #megamenu .megamenu-col.megamenu-leaf-col {
        margin-top: 5px;
    }
    #megamenu .megamenu-col ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    #megamenu .megamenu-col a + ul {
        margin-top: -4px;
    }
    #megamenu .megamenu-col li {
        margin-bottom: 2px;
    }
    #megamenu .megamenu-col li:first-child {
        margin-top: 0px;
    }
    #megamenu ul li a {
        color: #555;
        font-size: 15px;
    }

    /* Überschrift-Link einer Spalte (eigener Menu-Link, gleichzeitig Titel) */
    #megamenu .megamenu-col-heading {
        display: block;
        line-height: 40px;
        font-size: 16px;
        color: var(--darker-primary-clr);
        font-weight: 600;
        text-decoration: none;
    }

    /* Spalte ohne Überschrift: einfache, gesammelte Links (Dr. Felix Cromme, Termine, Blog ...) */
    #megamenu .megamenu-leaf-col .megamenu-col-heading {
        line-height: 1.8;
    }

    #megamenu .megamenu-col li[class*="current-menu-"] > a {
        font-weight: 700 !important;
        color: var(--cta-clr) !important;
    }


    /* navigation stuck */
    .sticky-enabled .main-navigation.is_stuck {
        box-shadow: none;
        background: transparent;
    }
    .main-navigation.is_stuck .menu-bar-items {
        position: absolute;
        right: 40px;
        font-size: 25px;
        color: var(--darker-primary-clr);
    }
    .main-navigation.is_stuck .menu-bar-item a {
        line-height: 1em;
        padding: 15px;
    }
    .main-navigation.is_stuck .menu-bar-items .gp-icon {
        font-size: 25px;
    }

}