/* ============================================================
   navigation.css – ltb.luftsport-sh.de
   Mobile-first | Contao 5.7
   Enthält: mmenu, Meta-Nav, Breadcrumb, Desktop-Navigation
   ============================================================ */


/* ===========================================================
   1. MMENU (Mobile-Menü – alle Größen)
   =========================================================== */

#naviMobile:not(.mm-menu) { display: none; }

.mm-page { background: none; }

.nicht-im-mmenu-anzeigen { display: none; }

/* mmenu-Icon */
#naviMiniMobile {
    z-index: 200;
}

#naviMiniMobile > a > span {
    margin-left: 1rem;
    padding: 1rem;
    color: #fff;
}

.fa-bg {
    background: #014B96;
    padding: 0 20px;
}


/* ===========================================================
   2. META-NAVIGATION (alle Größen)
   =========================================================== */

.mod_customnav ul li {
    margin-bottom: 1rem;
    padding: 0;
    text-decoration: none;
}

.mod_customnav ul li a:link,
.mod_customnav ul li a:visited {
    font-size: 1rem;
    color: #4d4d4b;
    justify-content: flex-end;
}


/* ===========================================================
   3. BREADCRUMB (alle Größen)
   =========================================================== */

.bc-leiste {
    padding: .5rem 1rem 0; /* Mobile: weniger Padding */
    background-color: #ededed;
    margin: 0;
    border-top: 1px solid rgba(174, 0, 0, .3);
    opacity: 0.7;
}

.mod_breadcrumb.bc-leiste ul { display: flex; }

.mod_breadcrumb.bc-leiste ul li {
    padding-right: 1rem;
    font-size: .7rem;
    text-decoration: none;
    color: #333;
}

.mod_breadcrumb.bc-leiste ul li a {
    font-size: .7rem;
    text-decoration: none;
    color: #004b96;
}

.mod_breadcrumb li::after {
    margin-left: .5rem;
    content: '»';
}

.mod_breadcrumb li.active::after {
    content: '';
}

/* Breadcrumb: etwas mehr Luft ab Tablet */
@media (min-width: 769px) {
    .bc-leiste {
        padding: .5rem 2rem 0 3rem;
    }
}


/* ===========================================================
   4. DESKTOP-NAVIGATION  (≥ 1200px)
   =========================================================== */

@media (min-width: 1200px) {

    /* Hauptnavigation */
    #nav {
        overflow: visible;
        padding: .5rem 2rem 0;
    }

    #nav ul {
        margin-bottom: 0;
        display: flex;
      /*  justify-content: space-between;*/
      gap:1rem;
    }

    /* 1. Ebene – Links und List-Items */
    #nav > ul > li > a,
    #nav > ul > li {
        color: #59A5D1;
        text-transform: uppercase;
        font-size: 1rem;
    }

    #nav ul.level_1 > li a,
    #nav ul.level_1 > li a:active {
        display: block;
        padding: .5rem .5rem .5rem 0;
    }

    #nav > ul > li { padding: 0; }

    #nav > ul > li.active {
        margin-top: .5rem;
        padding: 0;
    }

    #nav > ul > li.forward {
        margin-top: .5rem;
        color: #59A5D1;
    }

    #nav > ul > li a:hover { transition: 0.2s ease-out; }

    /* 2. Ebene – Submenu-Link-Farbe */
    li.submenu ul.level_2 li a { color: #59A5D1; }

    /* 2. Ebene – Submenu ausklappen */
    #nav ul.level_2 {
        display: flex;
        flex-direction: column;
        width: 15rem;
        max-height: 0;
        position: absolute;
        overflow: hidden;
        margin-top: 0;
        margin-right: 16px;
        background-color: #fff;
        border: 1px solid rgba(89, 165, 209, .6);
        z-index: 1001;
        opacity: 0;
        transition: opacity .9s ease-in-out;
    }

    #nav > ul > li:hover > ul {
        max-height: 160%;
        position: absolute;
        opacity: 1;
        transition-delay: 0s;
        z-index: 1002;
    }

    /* 2. Ebene – Items */
    #nav .level_2 > li { padding: 0; }

    #nav ul.level_2 > li a,
    #nav ul.level_2 > li a:focus {
        display: block;
        padding: 1rem 2rem 1rem .5rem;
        font-size: 1rem;
    }

    #nav .level_2 > li a:hover { color: #398BBC; }

    #nav > ul > li > ul li a:hover::after {
        padding-left: .5rem;
        color: #05466C;
        content: '»';
    }

    /* 2. Ebene – Aktiver Menüpunkt */
    #nav > ul > li.submenu.trail > ul > li.active {
        padding: 1rem 1rem 1rem .5rem;
        background-color: #fff;
        font-size: 1rem;
        color: #004b96;
    }

    /* 2. Ebene – Abstände bei aktiver/trail-Elternebene */
    nav#nav.mod_navigation ul.level_1 li.active.submenu ul.level_2 {
        margin-top: 8px;
    }

    nav#nav.mod_navigation.block ul.level_1 li.forward.trail.submenu ul.level_2 {
        margin-top: .5rem;
    }
}