/* ============================================================
   navigation.css – jugend.luftsport-sh.de
   Mobile-first | Breakpoints wie seko / ltb.luftsport-sh.de:
     Mobile:            < 769px  (Basis, kein Query)
     Tablet (Portrait+Landscape): 769px – 1199px (Hamburger-Menü)
     Desktop:           >= 1200px (volle Navigation)

   Zusammengeführt aus: navigationen.css, naviControl-Mobile.css,
   naviControl-Tablet.css, naviControl-Tablet-Landscape.css,
   naviControl-Desktop.css, IPAD.css
   ============================================================ */

/* ===========================================================
   BASIS / MOBILE (< 769px)
   =========================================================== */

/* Versteckt #naviMobile bis mmenu die Klasse .mm-menu hinzufügt */
#naviMobile:not(.mm-menu) { display: none; }

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

#header {
    display: none;
}

#EigenerBereichSuche {
    background: none;
}

#EigenerBereichSuche #suche #desktopSuche{
    display:none;
}

.mod_navigation,
#nav {
    display: none;
}

#mobile-header-menu {
    display: flex;
    justify-content: space-between;
}

.mobile-logo-subtitle {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.mobile-logo-subtitle p {
    line-height: 1.2rem;
}

/* Suche (mobile) */
.widget-text.suche input {
    text-align: right;
    text-transform: uppercase;
    letter-spacing: .05rem;
    word-spacing: .1rem;
    background-color: var(--color-search-bg);
}

::-webkit-input-placeholder { color: #fff; }
:-moz-placeholder          { color: #fff; opacity: 1; }
::-moz-placeholder         { color: #fff; opacity: 1; }
:-ms-input-placeholder     { color: #fff; }


/* ===========================================================
   UNABHÄNGIG VON BREAKPOINT (gilt überall)
   =========================================================== */

#nav ul {
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
}

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

#nav > ul > li > a,
#nav > ul > li {
    font-family: var(--font-body);
    font-weight: normal;
    text-decoration: none;
    color: var(--color-nav);
    text-transform: uppercase;
}

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

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

#nav > ul > li.active {
    margin-top: .5rem;
    padding: 0;
    color: var(--color-nav);
    font-weight: 700;
}

#nav > ul > li.forward {
    margin-top: .5rem;
    color: var(--color-nav);
}

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

/* 2. Ebene - Untermenü */
#nav > ul > li > ul {
    width: 15rem;
    max-height: 0;
    left: auto;
    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;
    flex-direction: column;
}

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

#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;
    color: var(--color-nav);
}

#nav .level_2 > li a:hover {
    color: var(--color-nav-hover);
}

#nav > ul > li > ul li a:hover::after {
    padding-left: .5rem;
    color: var(--color-nav-arrow);
    content: '»';
}

#nav > ul > li.submenu.trail > ul > li.active {
    padding: 1rem 1rem 1rem .5rem;
    background-color: #fff;
    font-size: 1rem;
    color: var(--color-primary);
}

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;
}

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

#naviMiniMobile {
    z-index: 200;
}

.fa-bg {
    background: var(--color-nav-icon-bg);
    padding: 0 20px;
}

.termin.sibling.mm-listitem.mm-listitem_vertical a.mm-btn.mm-btn_next.mm-listitem__btn,
.kontakt.sibling.mm-listitem.mm-listitem_vertical a.mm-btn.mm-btn_next.mm-listitem__btn,
.termin.sibling.mm-listitem.mm-listitem_vertical a.mm-btn.mm-btn_next.mm-listitem__btn::after,
.kontakt.sibling.mm-listitem.mm-listitem_vertical a.mm-btn.mm-btn_next.mm-listitem__btn::after {
    display: none;
}

/* Meta-Navigation */
.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;
}

/* Breadcrumb */
.bc-leiste {
    padding: .5rem 1rem 0;
    background-color: var(--color-grey-light);
    margin: 0;
    border-top: 1px solid var(--color-nav);
    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: var(--color-primary);
}

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

.mod_breadcrumb li.active:after {
    margin-left: .5rem;
    content: "";
}


/* ===========================================================
   TABLET (769px – 1199px) – weiterhin Hamburger-Menü
   (deckt vorher getrennte Portrait-/Landscape-/iPad-Bereiche ab)
   =========================================================== */

@media (min-width: 769px) {
    #header,
    #nav,
    .mobile-logo {
        display: none;
    }

    #mobile-header-menu {
        padding-right: 1rem;
    }

    .mobile-logo-subtitle {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 0.8rem;
        padding-left: 1rem;
    }

    #wrapper {
        width: 100%;
        margin-top: 0;
    }

    #nav > ul > li > ul {
        width: 20vw;
    }

    .bc-leiste {
        padding: .5rem 2rem 0 3rem;
    }
}


/* ===========================================================
   DESKTOP (>= 1200px) – volle Navigation, Hamburger ausblenden
   =========================================================== */

@media (min-width: 1200px) {
    #header {
        display: flex;
        align-items: center;
    }

    .mod_navigation,
    #nav {
        display: block;
    }

    #mobile-header,
    #mobile-header-menu,
    .mobile-logo,
    .mobile-logo-subtitle,
    #naviMobile {
        display: none;
    }

    /* Suche (Desktop) */
    #desktopSuche {
        display: block;
    }

    #suche {
        display: block;
        text-align: right;
        width: 1060px;
        margin: 2rem auto 0;
    }

    #search > div > div:before {
        font-family: 'Font Awesome 5 free';
        font-weight: 900;
        content: '\f002';
        color: #fff;
        height: 30px;
        z-index: 1;
        text-align: center;
        line-height: 30px;
    }

    /* Stabiler Klassenselektor statt instabiler ID #ctrl_9 */
    .widget-text.suche input,
    #search input {
        border-radius: 0;
        font-size: .8rem;
        line-height: 1rem;
        color: #fff;
        text-transform: uppercase;
        word-spacing: .1rem;
        letter-spacing: .05rem;
        background-color: var(--color-search-bg);
        border: none;
        width: 15rem;
        padding: 0.6rem;
        outline: none;
        text-align: right;
    }

    .widget-text.suche input:focus,
    #search input:focus {
        width: 700px;
        background-color: var(--color-search-bg);
        padding: 10px 20px;
        transition: all .2s ease;
    }

    #search > div:nth-child(1) {
        display: flex;
        flex-direction: row-reverse;
    }

    ::-webkit-input-placeholder,
    :-moz-placeholder,
    ::-moz-placeholder,
    :-ms-input-placeholder {
        color: #fff !important;
    }
}