/* FINALE MENU OVERRIDE - HÖCHSTE PRIORITÄT */

/* RESET FÜR UL ELEMENT */
ul.nav-menu {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

@media screen and (max-width: 768px) {
    /* Wenn Menü AKTIV ist - FORCIERE SICHTBARKEIT */
    .nav-menu.active,
    ul.nav-menu.active,
    #navMenu.active,
    ul#navMenu.active {
        /* KRITISCHE POSITIONIERUNG */
        position: fixed !important;
        top: 60px !important; /* Direkt unter der Navbar */
        left: 10px !important;
        right: 10px !important;
        bottom: auto !important;
        
        /* FORCIERE SICHTBARKEIT */
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        clip: auto !important;
        clip-path: none !important;
        
        /* Z-INDEX MAXIMUM */
        z-index: 2147483647 !important; /* Maximum möglicher z-index */
        
        /* AUSSEHEN */
        background: white !important;
        border-radius: 20px !important;
        padding: 20px !important;
        box-shadow: 0 10px 40px rgba(0,0,0,0.3) !important;
        
        /* SCROLLBAR */
        max-height: calc(100vh - 100px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        
        /* BREITE */
        width: calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;
        box-sizing: border-box !important;
    }
    
    /* Dark Mode Support */
    [data-theme="dark"] .nav-menu.active {
        background: #1c1c1e !important;
        color: white !important;
    }
    
    /* Stelle sicher dass der Toggle Button funktioniert */
    .nav-toggle {
        position: relative !important;
        z-index: 2147483647 !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }
    
    /* Entferne Overlay */
    body.menu-open::after {
        display: none !important;
    }
    
    /* Menu Items müssen sichtbar sein */
    .nav-menu.active li,
    .nav-menu.active .nav-link,
    .nav-menu.active .nav-dropdown {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Links im Menü */
    .nav-menu.active .nav-link {
        padding: 12px 16px !important;
        display: block !important;
        width: 100% !important;
        color: var(--text-primary) !important;
        text-decoration: none !important;
        border-radius: 8px !important;
    }
    
    .nav-menu.active .nav-link:hover {
        background: rgba(0, 122, 255, 0.1) !important;
    }
}