/* ============================================================================
   NAVIGATION.CSS - Responsive Navigation (inkl. Superfish)
   FTS Husum - Contao 5.3
   Mobile-First mit MMMenu (Mobile) und Superfish (Desktop)
   ============================================================================ */

/* ==========================================================================
   MOBILE NAVIGATION (0-991px)
   ========================================================================== */

/* Hide Desktop Navigation on Mobile & Tablets */
#naviDesktop {
    display: none;
}

/* Mobile Menu (MMMenu) */
#naviMobile:not(.mm-menu) {
    display: none;
}

#naviMiniMobile {
    display: block;
}

/* Hide elements not shown in mobile menu */
.nicht-im-mmenu-anzeigen {
    display: none;
}

/* Willkommen Section - Hidden on Mobile */
#willkommen {
    display: none;
}


/* ==========================================================================
   DESKTOP NAVIGATION BASE (992px+)
   ========================================================================== */

@media (min-width: 992px) {
    /* Show Desktop Navigation */
    #naviDesktop {
        display: block;
    }
    
    /* Hide Mobile Elements */
    #naviMobile {
        display: none;
    }
    
    #naviMiniMobile {
        display: none;
    }
    
    /* Navigation Container */
    .mod_navigation {
        overflow: visible;
        margin-top: 0;
        background-color: #fff;
    }
    
    /* Superfish Menu Styles */
    .sf-menu a {
        padding: 0.5rem !important;
        text-decoration: none;
        color: #333;
    }
    
    /* Level 1 - Main Menu Items */
    #naviDesktop.mod_navigation.block ul.level_1.sf-menu li {
        text-align: center;
        white-space: nowrap;
        transition: background 0.2s;
    }
    
    ul.level_1.sf-menu li.submenu a.submenu,
    ul.level_1 li a,
    li.active,
    li.forward {
        white-space: nowrap;
        color: #fff;
        font-weight: 600;
    }
    
    ul.level_1.sf-menu li.trail,
    ul.level_1.sf-menu li.submenu.trail a.submenu,
    ul.level_1.sf-menu li.active {
        text-decoration: underline;
    }
    
    ul.level_1 li.active.last,
    ul.level_1 li.active.first {
        padding-top: 8px;
    }
    
    /* Special Menu Item - Klasse 5 */
    #naviDesktop > ul > li.active.klasse5 {
        margin-top: 0.5rem;
    }
    
    #naviDesktop > ul > li.green.sibling > a {
        border: 1px solid #333;
        background-color: #7AB735;
        color: #fff;
    }
    
    /* Level 2 - Submenu Styles */
    ul.level_1.sf-menu li ul.level_2 li a,
    ul.level_1.sf-menu li.submenu ul.level_2 li.submenu a.submenu {
        color: #333;
        font-weight: inherit;
    }
    
    ul.level_2 li {
        border-bottom: 1px solid #eee;
        color: #333;
        padding-bottom: 2px;
    }
    
    ul.level_2 li a {
        font-size: 0.9rem;
    }
    
    ul.level_2 li.active span.active,
    span.forward {
        line-height: 2rem;
    }
    
    /* Submenu Arrow Indicator */
    .sf-menu > li > ul > li.submenu > a::after {
        font-weight: bold;
        color: #949494;
        position: relative;
        float: right;
        content: '';
        margin-left: 10px;
        margin-top: 5px;
        border-left: 5px solid #333;
        border-right: 5px solid transparent;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
    }
    
    /* Level 2 Submenu Container */
    #naviDesktop ul.level_2 {
        padding: 1em 0.6em;
        background: linear-gradient(#fff, #f2f2f2) repeat scroll 0 0;
        border: 1px solid #c9c9c9;
        border-radius: 0 0 3px 3px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 -2px #5B7EC0 inset;
        left: 0;
        margin: -1px 0 0;
        min-width: 100%;
    }
    
    /* Level 3 Submenu Container */
    #naviDesktop ul.level_3 {
        margin: -1px 0 0 100px;
        padding: 1em 0.6em;
        background: linear-gradient(#fff, #f2f2f2) repeat scroll 0 0;
        border: 1px solid #c9c9c9;
        border-radius: 0 0 3px 3px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 -2px #5B7EC0 inset;
        display: none;
        left: 0;
        min-width: 100%;
        position: absolute;
        top: 100%;
        z-index: 15;
    }
    
    /* Safari-specific Background Fix */
    .safari ul.level_2,
    .safari ul.level_3,
    .safari ul.level_4 {
        background-color: #fff;
    }
    
    /* ==========================================================================
       NAVIGATION LAYOUT & SEARCH (992px+)
       ========================================================================== */
    
    .mod_navigation {
        margin-top: 2rem;
    }
    
    /* Flexbox Layout for Navigation & Search */
    #navi-suche-container {
        margin-top: 1rem;
    }
    
    #navi-suche-container nav#naviDesktop.mod_navigation {
        flex: 6;
    }
    
    #naviDesktop.mod_navigation.block ul.level_1 {
        display: flex;
        gap: 1rem;
        justify-content: space-between;
    }
    
    #naviDesktop.mod_navigation.block ul.level_1.sf-menu li {
        flex: 1;
    }
    
    /* Sticky Navigation */
    .start #navi-suche-container.sticky {
        width: 100%;
    }
    
    .start #willkommen.sticky {
        margin-top: 60px;
    }
    
    /* Search Field */
    #suchform input#ctrl_14 {
        width: 100% !important;
        text-align: center;
    }
    
    #ctrl_15 {
        display: none;
    }
    
    #suchform div.formbody div.widget.widget-text.textfeld label.textfeld {
        display: none !important;
    }
    
    #suchform > div > div.widget.widget-text.textfeld,
    #suchform input.submit {
        margin-top: 0 !important;
    }
}

/* ==========================================================================
   DESKTOP NAVIGATION (1200px+)
   ========================================================================== */

@media (min-width: 1200px) {
    /* Sticky Navigation */
    #naviDesktop.sticky {
        position: fixed !important;
        top: 0;
        z-index: 99;
        width: 80%;
        margin-top: 0;
        background-color: #fff;
    }
    
    .mod_navigation {
        overflow: visible;
        margin-top: 0.5rem;
        margin-bottom: 1rem;
        background-color: #fff;
    }
    
    /* Show Willkommen Section */
    #willkommen {
        display: block;
    }
    
    #willkommen h2 {
        padding: 0;
        font-size: 1.5rem;
    }
}

/* ==========================================================================
   FLYER THEME SPECIFIC NAVIGATION
   ========================================================================== */

.flyer #navi-suche-container {
    /* Specific styling if needed */
}

/* ==========================================================================
   TABLET LANDSCAPE SPECIFIC (992px - 1199px)
   ========================================================================== */

@media (min-width: 992px) and (max-width: 1199px) {
    #naviDesktop.sticky {
        position: fixed !important;
        top: 0 !important;
        z-index: 99;
        width: 85%;
        background-color: #fff;
        margin-top: 0;
    }
    
    #willkommen h2 {
        padding: 0;
        font-size: 1.5rem;
    }
}