/* ==========================================================================
   MOBILE NAVIGATION MENU
   Hamburger Menu für mobile Geräte
   ========================================================================== */

/* Desktop: Hamburger verstecken */
.mobile-menu-toggle {
    display: none;
}

.mobile-menu-overlay {
    display: none;
}

/* Desktop: Navigation normal anzeigen (>768px) */
@media (min-width: 769px) {
    .nav-menu {
        display: flex !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        box-shadow: none !important;
        z-index: auto !important;
        overflow-y: visible !important;
        padding-top: 0 !important;
        right: auto !important;
    }

    .nav-list {
        flex-direction: row !important;
        padding: 0 !important;
    }

    .nav-item {
        width: auto !important;
        border-bottom: none !important;
    }
}

/* Mobile: Bis 900px (überschreibt responsive-fixes.css) */
@media (max-width: 900px) {

    /* Hamburger Button */
    .mobile-menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 44px;
        height: 44px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 8px;
        z-index: 1002;
        position: relative;
    }

    .mobile-menu-toggle:focus {
        outline: 2px solid #37ac50;
        outline-offset: 2px;
    }

    .hamburger-line {
        width: 28px;
        height: 3px;
        background: #37ac50;
        border-radius: 2px;
        transition: all 0.3s ease;
        transform-origin: center;
    }

    /* X Animation wenn offen */
    .mobile-menu-toggle.active .hamburger-line:nth-child(1) {
        transform: rotate(45deg) translateY(10px);
    }

    .mobile-menu-toggle.active .hamburger-line:nth-child(2) {
        opacity: 0;
        transform: translateX(-20px);
    }

    .mobile-menu-toggle.active .hamburger-line:nth-child(3) {
        transform: rotate(-45deg) translateY(-10px);
    }

    /* Desktop Navigation verstecken */
    .nav-menu,
    #nav-menu {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        left: auto !important;
        width: 300px !important;
        height: 100vh !important;
        background: white !important;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1) !important;
        transition: right 0.3s ease !important;
        transform: none !important;
        z-index: 1001 !important;
        overflow-y: auto !important;
        overflow-x: visible !important;
        padding-top: 80px !important;
        display: block !important;
        visibility: visible !important;
    }

    /* WICHTIG: Menu öffnen - beide Klassen für Kompatibilität */
    .nav-menu.active,
    .nav-menu.is-open,
    #nav-menu.active,
    #nav-menu.is-open {
        right: 0 !important;
        left: auto !important;
        transform: translateX(0) !important;
    }

    /* Overlay anzeigen */
    .mobile-menu-overlay {
        display: block !important;
    }

    /* Menu Liste vertikal */
    .nav-list {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        padding: 0 20px;
    }

    .nav-item {
        width: 100%;
        border-bottom: 1px solid #e5e7eb;
    }

    .nav-link {
        width: 100%;
        padding: 16px 12px !important;
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        font-size: 16px !important;
        min-height: 52px !important;
        color: #1a1a1a !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }

    /* Sicherstellen dass der Text im mobilen Menü sichtbar ist */
    .nav-link span {
        color: #1a1a1a !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        line-height: 1.3 !important;
        display: block !important;
        overflow: visible !important;
        text-overflow: clip !important;
        max-width: 100% !important;
    }

    .nav-link:hover,
    .nav-link:focus {
        color: #37ac50 !important;
        background: rgba(55, 172, 80, 0.08) !important;
    }

    .nav-link:hover span,
    .nav-link:focus span {
        color: #37ac50 !important;
    }

    /* Dropdown im Mobile Menü */
    .nav-dropdown-menu {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        background: #f0f4f8 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.3s ease !important;
    }

    .nav-dropdown-menu ul {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #f0f4f8 !important;
    }

    .nav-dropdown-menu li {
        background: #f0f4f8 !important;
        border-bottom: 1px solid #e0e5ea !important;
    }

    .nav-dropdown.active .nav-dropdown-menu {
        max-height: 500px !important;
        padding: 0 !important;
        background: #f0f4f8 !important;
    }

    .nav-dropdown-link,
    .nav-dropdown-menu a {
        display: block !important;
        padding: 14px 20px 14px 32px !important;
        font-size: 15px !important;
        min-height: 48px !important;
        color: #1a1a1a !important;
        background: #f0f4f8 !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
        border-left: 3px solid transparent !important;
    }

    .nav-dropdown-link:hover,
    .nav-dropdown-link:focus,
    .nav-dropdown-menu a:hover,
    .nav-dropdown-menu a:focus {
        background: #ffffff !important;
        color: #37ac50 !important;
        border-left-color: #37ac50 !important;
        padding-left: 36px !important;
    }

    /* Dropdown Link Span - Text sichtbar */
    .nav-dropdown-link span,
    .nav-dropdown-menu a span {
        color: inherit !important;
    }

    /* Dropdown Icon drehen */
    .nav-dropdown.active .dropdown-icon {
        transform: rotate(180deg);
    }

    /* Overlay */
    .mobile-menu-overlay {
        display: none !important;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .mobile-menu-overlay.active,
    .mobile-menu-overlay.is-open {
        display: block !important;
        opacity: 1 !important;
    }

    /* Header Layout anpassen */
    .nav-wrapper {
        justify-content: space-between;
        align-items: center;
    }

    /* Logo links, Hamburger rechts */
    .nav-brand {
        order: 1;
        max-width: 180px !important;
    }

    .nav-brand img {
        max-height: 50px !important;
        width: auto !important;
        height: auto !important;
    }

    .mobile-menu-toggle {
        order: 2;
    }

    .nav-menu {
        order: 3;
    }
}

/* Sehr kleine Geräte - Logo noch kleiner */
@media (max-width: 480px) {
    .nav-brand {
        max-width: 150px !important;
    }

    .nav-brand img {
        max-height: 40px !important;
    }
}

/* Sehr kleine Geräte */
@media (max-width: 375px) {
    .nav-menu {
        width: 100%;
    }

    .nav-link {
        font-size: 15px !important;
    }

    .nav-dropdown-link {
        font-size: 14px !important;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    @media (max-width: 900px) {
        .nav-menu {
            background: #1e293b !important;
        }

        .nav-item {
            border-bottom-color: #334155 !important;
        }

        .nav-link {
            color: #f1f5f9 !important;
        }

        /* Dropdown Menu - heller Hintergrund auch im Dark Mode */
        .nav-dropdown-menu,
        .nav-dropdown-menu ul,
        .nav-dropdown-menu li {
            background: #f0f4f8 !important;
        }

        /* Dropdown Links - dunkle Schrift auf hellem Hintergrund */
        .nav-dropdown-link,
        .nav-dropdown-menu a {
            background: #f0f4f8 !important;
            color: #1a1a1a !important;
        }

        .nav-dropdown-link:hover,
        .nav-dropdown-link:focus,
        .nav-dropdown-menu a:hover,
        .nav-dropdown-menu a:focus {
            background: #ffffff !important;
            color: #37ac50 !important;
        }

        .mobile-menu-overlay {
            background: rgba(0, 0, 0, 0.7) !important;
        }
    }
}

/* Smooth Scrolling wenn Menü offen */
body.menu-open {
    overflow: hidden;
}