/* ============================================================================
   MEGA MENU RESPONSIVE FIXES - MOBILE FRIENDLY
   Datum: 2025-06-27
   ============================================================================ */

/* 1. RESPONSIVE POSITIONIERUNG - DYNAMISCHE BREITE */
.lqd-megamenu {
    /* Mobile-First: Kleine Bildschirme */
    width: 95vw !important;
    max-width: 95vw !important;
    min-width: 300px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(-10px) scale(0.98) !important;
}

/* 2. TABLET UND KLEINE DESKTOP (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .lqd-megamenu {
        width: clamp(600px, 85vw, 750px) !important;
        max-width: 750px !important;
    }
}

/* 3. GROSSE BILDSCHIRME (über 1024px) */
@media (min-width: 1025px) {
    .lqd-megamenu {
        width: clamp(700px, 80vw, 900px) !important;
        max-width: 900px !important;
    }
}

/* 4. SPALTEN-LAYOUT - RESPONSIVE GRID */
.lqd-megamenu-row {
    display: grid !important;
    gap: 0 !important;
    /* Mobile: 1 Spalte */
    grid-template-columns: 1fr !important;
}

/* Tablet: 2 Spalten */
@media (min-width: 768px) {
    .lqd-megamenu-row {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Desktop: Auto-Fit basierend auf Inhalt */
@media (min-width: 1025px) {
    .lqd-megamenu-row {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    }
}

/* 5. SPALTEN-STYLING */
.lqd-megamenu-col {
    /* Responsive Padding */
    padding: 1rem !important;
    border-right: none !important;
    border-bottom: 1px solid var(--mega-menu-border, rgba(255, 255, 255, 0.08)) !important;
    min-width: 0 !important; /* Wichtig: Überschreibt lg:min-w-80 */
    flex: 1 !important;
}

/* Tablet und Desktop: Vertikale Trenner */
@media (min-width: 768px) {
    .lqd-megamenu-col {
        padding: 1.5rem !important;
        border-right: 1px solid var(--mega-menu-border, rgba(255, 255, 255, 0.08)) !important;
        border-bottom: none !important;
    }
    
    .lqd-megamenu-col:last-child {
        border-right: none !important;
    }
}

/* Desktop: Mehr Padding */
@media (min-width: 1025px) {
    .lqd-megamenu-col {
        padding: 1.75rem !important;
    }
}

/* 6. MOBILE SPEZIAL-BEHANDLUNG */
@media (max-width: 767px) {
    .lqd-megamenu {
        /* Vollbreite auf Mobile */
        position: fixed !important;
        top: 4rem !important;
        left: 0.5rem !important;
        right: 0.5rem !important;
        width: auto !important;
        max-width: none !important;
        min-width: auto !important;
        transform: translateX(0) translateY(-10px) scale(0.98) !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
    }
    
    /* Hover State für Mobile */
    .has-mega-menu:hover .lqd-megamenu,
    .has-mega-menu.is-hover .lqd-megamenu {
        transform: translateX(0) translateY(0) scale(1) !important;
    }
    
    .lqd-megamenu-col:last-child {
        border-bottom: none !important;
    }
    
    /* Kleinere Links auf Mobile */
    .lqd-megamenu-link-item a {
        padding: 0.75rem !important;
        gap: 0.75rem !important;
    }
}

/* 7. SEHR KLEINE BILDSCHIRME (unter 480px) */
@media (max-width: 479px) {
    .lqd-megamenu {
        left: 0.25rem !important;
        right: 0.25rem !important;
        border-radius: 0.75rem !important;
    }
    
    .lqd-megamenu-col {
        padding: 1rem !important;
    }
    
    .lqd-megamenu-link-item a {
        padding: 0.625rem !important;
        gap: 0.5rem !important;
        font-size: 0.875rem !important;
    }
}

/* 8. BESSERE CONTAINER-ANPASSUNG */
.site-header-nav .has-mega-menu {
    position: static !important;
}

@media (min-width: 992px) {
    .site-header-nav .has-mega-menu {
        position: relative !important;
    }
}

/* 9. SCROLLBAR STYLING FÜR MOBILE */
@media (max-width: 767px) {
    .lqd-megamenu::-webkit-scrollbar {
        width: 4px;
    }
    
    .lqd-megamenu::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 2px;
    }
    
    .lqd-megamenu::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.3);
        border-radius: 2px;
    }
    
    .lqd-megamenu::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.5);
    }
}

/* 10. PERFORMANCE OPTIMIERUNG */
.lqd-megamenu * {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
}