/*
 * KATS GMBH - MOBILE MENU CLEAN FIX
 * Ursprüngliches Nav bleibt sichtbar, nur mobile-menu-nav wird eingeblendet
 * Keine doppelten Logos oder Close-Buttons mehr
 */

/* === Z-INDEX FIX - MAIN-NAV ÜBER MOBILE MENU === */

/* Main Navigation muss über dem Mobile Menu liegen */
.main-nav {
    z-index: var(--z-navigation-scrolled);
}

/* Nav Container auch sicherstellen */
.nav-container {
    z-index: var(--z-navigation-scrolled);
}

/* Logo und Mobile-Menu-Toggle müssen höchste Priorität haben */
.main-nav .logo,
.main-nav .mobile-menu-toggle {
    z-index: var(--z-navigation-elements);
}

/* === VERBESSERTE MOBILE MENU TOGGLE ANIMATION === */

/* Elegante Animation für mobile-menu-toggle spans */
.mobile-menu-toggle span {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform-origin: center !important;
}

/* Verbesserte X-Animation - Normal State */
.mobile-menu-toggle.active span {
    background: rgba(255, 255, 255, 0.9) !important;
}

.mobile-menu-toggle.active span:nth-child(1) {
    top: 50% !important;
    transform: translateY(-50%) rotate(45deg) !important;
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0 !important;
    transform: translateY(-50%) scale(0) !important;
}

.mobile-menu-toggle.active span:nth-child(3) {
    bottom: 50% !important;
    transform: translateY(50%) rotate(-45deg) !important;
}

/* Verbesserte X-Animation - Scrolled State */
.main-nav.scrolled .mobile-menu-toggle.active span {
    background: var(--gray-800) !important;
}

.main-nav.scrolled .mobile-menu-toggle.active span:nth-child(1) {
    top: 50% !important;
    transform: translateY(-50%) rotate(45deg) !important;
}

.main-nav.scrolled .mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0 !important;
    transform: translateY(-50%) scale(0) !important;
}

.main-nav.scrolled .mobile-menu-toggle.active span:nth-child(3) {
    bottom: 50% !important;
    transform: translateY(50%) rotate(-45deg) !important;
}

/* Close-Button gleicher Top-Abstand wie Logo */
.mobile-close-btn,
.mobile-menu-close {
    top: 1.5rem !important;
}

/* === URSPRÜNGLICHES NAV IMMER SICHTBAR LASSEN === */

/* Ursprüngliches Logo NICHT verstecken */
body.mobile-menu-open .nav-container .logo {
    opacity: 1;
    pointer-events: auto;
    transform: none;
    z-index: var(--z-navigation-elements);
}

/* Ursprünglichen Mobile-Menu-Toggle NICHT verstecken */
body.mobile-menu-open .nav-container .mobile-menu-toggle {
    opacity: 1;
    pointer-events: auto;
    transform: none;
    z-index: var(--z-navigation-elements);
}

/* Das gesamte nav-container sichtbar lassen */
body.mobile-menu-open .nav-container {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    z-index: var(--z-navigation-scrolled);
}

/* Das gesamte main-nav sichtbar lassen */
body.mobile-menu-open .main-nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    z-index: var(--z-navigation-scrolled);
}

/* === MOBILE MENU HEADER KOMPLETT VERSTECKEN === */

.mobile-menu-header {
    display: none !important;
}

/* === MOBILE MENU NAV ANPASSEN === */

/* Mobile Menu Navigation - mehr nach unten versetzt */
.mobile-menu-nav {
    margin-top: 0 !important;
    padding-top: 140px !important; /* Mehr Platz für das ursprüngliche Nav */
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

/* === DROPDOWN VERBESSERUNGEN === */

/* Dropdown-Toggle (hat-submenu) Design verbessern */
.mobile-menu-link.has-submenu {
    position: relative !important;
    transition: all 0.3s ease !important;
}

/* Chevron Icon Styling */
.mobile-menu-link.has-submenu i {
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
    font-size: 1rem !important;
    opacity: 0.7 !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Dropdown-Toggle Hover-States */
.mobile-menu-link.has-submenu:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.mobile-menu-link.has-submenu:hover i {
    opacity: 1 !important;
    color: var(--secondary) !important;
}

/* CSS für JavaScript-gesteuerte Dropdown States */

/* Dropdown geöffnet - temporärer visueller Zustand */
.mobile-menu-link.has-submenu[data-dropdown="open"] {
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    border-left: 3px solid var(--secondary) !important;
}

.mobile-menu-link.has-submenu[data-dropdown="open"] i {
    transform: rotate(180deg) !important;
    opacity: 1 !important;
    color: var(--secondary) !important;
}

/* Dropdown geschlossen - zurück zum normalen Zustand */
.mobile-menu-link.has-submenu[data-dropdown="closed"] i {
    transform: rotate(0deg) !important;
    opacity: 0.7 !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Submenu Container Verbesserungen */
.mobile-submenu {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
    margin: 0.5rem 0 !important;
    border-left: 2px solid rgba(255, 255, 255, 0.1) !important;
    transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
    overflow: hidden !important;
}

.mobile-submenu.active {
    border-left: 2px solid var(--secondary) !important;
    background: rgba(55, 182, 253, 0.08) !important;
}

/* Submenu Links Design */
.mobile-submenu-link {
    padding: 1rem 1.5rem !important;
    transition: all 0.3s ease !important;
    border-radius: 8px !important;
    margin: 0.25rem 0.5rem !important;
}

.mobile-submenu-link:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    transform: translateX(8px) !important;
    color: var(--secondary) !important;
}

/* === ALLE DOPPELTEN ELEMENTE ENTFERNEN === */

/* Alle doppelten Close-Buttons verstecken */
.mobile-menu-close,
.mobile-close-btn {
    display: none !important;
}

/* Mobile Menu Logo verstecken */
.mobile-menu-logo {
    display: none !important;
}

/* === MOBILE MENU CONTAINER ANPASSEN === */

.mobile-menu-container {
    padding-top: 0 !important;
}

/* === RESPONSIVE ANPASSUNGEN === */

@media (max-width: 768px) {
    .mobile-menu-nav {
        padding-top: 120px !important;
    }
}

@media (max-width: 480px) {
    .mobile-menu-nav {
        padding-top: 110px !important;
    }
}

/* Responsive Anpassungen für Close-Button Position */
@media (max-width: 768px) {
    .mobile-close-btn,
    .mobile-menu-close {
        top: 1.2rem !important;
    }
}

@media (max-width: 480px) {
    .mobile-close-btn,
    .mobile-menu-close {
        top: 1rem !important;
    }
}

/* === GLOBAL OVERFLOW PREVENTION === */

body.mobile-menu-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}

/* === JAVASCRIPT-KOMPATIBLE DROPDOWN FIXES === */

/* Überschreibe originale handleSubmenuToggle Logik */
.mobile-menu-link.has-submenu.submenu-animating i {
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

/* Verhindere dauerhaften active state auf Dropdown-Trigger */
.mobile-menu-link.has-submenu:not(:hover):not([data-dropdown="open"]) {
    background: transparent !important;
    border-left: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}