/* MENU BREAKOUT FIX - Menü muss aus Navbar ausbrechen */

/* Stelle sicher, dass Navbar immer fixed ist */
.navbar {
    position: fixed !important;
}

@media (max-width: 768px) {
    /* 1. Navbar darf Menü nicht verstecken */
    .navbar {
        position: fixed !important;
        overflow: visible !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        clip: auto !important;
        clip-path: none !important;
        contain: none !important;
    }
    
    .navbar .container {
        overflow: visible !important;
        height: auto !important;
        position: relative !important;
        clip: auto !important;
        clip-path: none !important;
    }
    
    /* 2. Menü muss wirklich als fixed positioniert sein */
    .nav-menu {
        /* Initial versteckt */
        position: fixed !important;
        visibility: hidden;
        opacity: 0;
    }
    
    /* 3. Wenn aktiv - Full Screen Overlay */
    .nav-menu.active,
    ul.nav-menu.active,
    #navMenu.active {
        /* ABSOLUTE POSITIONIERUNG relativ zum Viewport */
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        
        /* Zentriere das eigentliche Menü */
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        padding: 80px 20px 20px 20px !important;
        
        /* Sichtbarkeit */
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 99999999 !important;
        
        /* Aussehen */
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        
        /* Scrollbar wenn nötig */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        
        /* Keine Transformationen */
        transform: none !important;
        margin: 0 !important;
        
        /* Reset box model */
        box-sizing: border-box !important;
    }
    
    /* Dark mode */
    [data-theme="dark"] .nav-menu.active {
        background: rgba(28, 28, 30, 0.98) !important;
    }
    
    /* 4. Menu Items styling */
    .nav-menu.active li {
        list-style: none !important;
        margin: 5px 0 !important;
    }
    
    .nav-menu.active .nav-link {
        display: block !important;
        padding: 15px 20px !important;
        background: rgba(0, 122, 255, 0.05) !important;
        border-radius: 12px !important;
        color: #333 !important;
        text-decoration: none !important;
        font-size: 16px !important;
    }
    
    .nav-menu.active .nav-link:hover {
        background: rgba(0, 122, 255, 0.15) !important;
    }
    
    /* 5. Close button / Toggle muss über allem sein */
    .nav-toggle {
        position: relative !important;
        z-index: 999999999 !important;
    }
    
    .nav-toggle.active {
        position: fixed !important;
        top: 20px !important;
        right: 20px !important;
        z-index: 999999999 !important;
    }
    
    /* 6. Body scroll lock wenn Menü offen */
    body.menu-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
    }
}