/* ============================================================================
   MEGA MENU TEXT FIX - VOLLSTÄNDIGE TITEL & RICHTIGE AUSRICHTUNG
   Behebt: Abgeschnittene Titel, Links-Verschiebung, versteckte Texte
   Datum: 2025-01-21
   ============================================================================ */

/* 1. CONTAINER BREITE - MEHR PLATZ FÜR LANGE TITEL */
.lqd-megamenu {
    /* Breitere Container für längere deutsche Texte */
    width: clamp(400px, 90vw, 1100px) !important;
    max-width: 1100px !important;
    min-width: 400px !important;
    
    /* Perfekte Zentrierung beibehalten */
    left: 50% !important;
    transform: translateX(-50%) translateY(-10px) scale(0.98) !important;
}

/* 2. SPALTEN-LAYOUT - FLEXIBLER FÜR LANGE TEXTE */
.lqd-megamenu-row {
    display: grid !important;
    /* Dynamische Spalten basierend auf Inhalt */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 0 !important;
}

.lqd-megamenu-col {
    /* Mehr Padding für bessere Lesbarkeit */
    padding: 2rem !important;
    border-right: 1px solid var(--mega-menu-border, rgba(255, 255, 255, 0.08)) !important;
    
    /* Wichtig: Overflow verhindern */
    min-width: 280px !important;
    max-width: none !important;
    overflow: visible !important;
}

.lqd-megamenu-col:last-child {
    border-right: none !important;
}

/* 3. LINK ITEMS - PLATZ FÜR VOLLSTÄNDIGE TITEL */
.lqd-megamenu-link-item {
    margin-bottom: 0.5rem !important;
    width: 100% !important;
}

.lqd-megamenu-link-item a {
    /* Normale Flex-Richtung - Icon links, Text rechts */
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    
    /* Großzügiges Padding */
    padding: 1rem !important;
    border-radius: 0.75rem !important;
    
    /* Kein Overflow */
    width: 100% !important;
    min-height: auto !important;
    overflow: visible !important;
    white-space: normal !important;
    
    /* Styling */
    text-decoration: none !important;
    color: var(--mega-menu-text-secondary, rgba(255, 255, 255, 0.8)) !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid transparent !important;
    transition: all 0.25s ease !important;
}

/* 4. ICON CONTAINER - KONSISTENTE GRÖSSE */
.lqd-megamenu-link-item a .size-16,
.lqd-megamenu-link-item a span:first-child {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 0.75rem !important;
}

/* 5. TEXT CONTAINER - VOLLSTÄNDIGER PLATZ */
.lqd-megamenu-link-item a span.flex.w-full,
.lqd-megamenu-link-item a span:last-child {
    flex: 1 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
    
    /* Kein Text-Overflow */
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
}

/* 6. TITEL - VOLLSTÄNDIGE ANZEIGE */
.lqd-megamenu-link-item a .text-lg,
.lqd-megamenu-link-item a .font-medium,
.lqd-megamenu-link-item a span[class*="text-lg"] {
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: var(--mega-menu-text-secondary, rgba(255, 255, 255, 0.8)) !important;
    
    /* Kein Truncation */
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
    
    margin: 0 !important;
    padding: 0 !important;
}

/* 7. BESCHREIBUNG */
.lqd-megamenu-link-item a .text-xs,
.lqd-megamenu-link-item a span[class*="text-xs"] {
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
    color: var(--mega-menu-text-muted, rgba(255, 255, 255, 0.6)) !important;
    
    /* Kein Truncation */
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
    
    margin: 0 !important;
    padding: 0 !important;
}

/* 8. HOVER STATES */
.lqd-megamenu-link-item a:hover {
    background: var(--mega-menu-hover-bg, rgba(255, 255, 255, 0.06)) !important;
    color: var(--mega-menu-text-primary, #ffffff) !important;
    transform: translateX(3px) !important;
    border-color: var(--mega-menu-hover-border, rgba(255, 255, 255, 0.15)) !important;
}

.lqd-megamenu-link-item a:hover .text-lg,
.lqd-megamenu-link-item a:hover .font-medium {
    color: var(--mega-menu-text-primary, #ffffff) !important;
}

.lqd-megamenu-link-item a:hover .text-xs {
    color: var(--mega-menu-text-secondary, rgba(255, 255, 255, 0.8)) !important;
}

/* 9. LABELS/HEADERS */
.lqd-megamenu-label h3 {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--mega-menu-text-primary, #ffffff) !important;
    margin: 0 0 1rem 0 !important;
    padding-bottom: 0.75rem !important;
    border-bottom: 2px solid var(--mega-menu-border, rgba(255, 255, 255, 0.08)) !important;
    
    /* Vollständige Anzeige */
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
    word-wrap: break-word !important;
}

.lqd-megamenu-label p {
    font-size: 0.875rem !important;
    color: var(--mega-menu-text-muted, rgba(255, 255, 255, 0.6)) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    
    /* Vollständige Anzeige */
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
    word-wrap: break-word !important;
}

/* 10. RESPONSIVE ANPASSUNGEN */
@media (max-width: 1200px) {
    .lqd-megamenu {
        width: clamp(350px, 95vw, 950px) !important;
        max-width: 950px !important;
    }
    
    .lqd-megamenu-row {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    }
    
    .lqd-megamenu-col {
        min-width: 250px !important;
        padding: 1.5rem !important;
    }
}

@media (max-width: 768px) {
    .lqd-megamenu {
        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;
    }
    
    .has-mega-menu:hover .lqd-megamenu,
    .has-mega-menu.is-hover .lqd-megamenu {
        transform: translateX(0) translateY(0) scale(1) !important;
    }
    
    .lqd-megamenu-row {
        grid-template-columns: 1fr !important;
    }
    
    .lqd-megamenu-col {
        min-width: auto !important;
        padding: 1.25rem !important;
        border-right: none !important;
        border-bottom: 1px solid var(--mega-menu-border, rgba(255, 255, 255, 0.08)) !important;
    }
    
    .lqd-megamenu-col:last-child {
        border-bottom: none !important;
    }
    
    .lqd-megamenu-link-item a {
        padding: 0.875rem !important;
        gap: 0.875rem !important;
    }
    
    .lqd-megamenu-link-item a .size-16,
    .lqd-megamenu-link-item a span:first-child {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
    }
}

@media (max-width: 480px) {
    .lqd-megamenu {
        left: 0.25rem !important;
        right: 0.25rem !important;
    }
    
    .lqd-megamenu-col {
        padding: 1rem !important;
    }
    
    .lqd-megamenu-link-item a {
        padding: 0.75rem !important;
        gap: 0.75rem !important;
    }
    
    .lqd-megamenu-link-item a .size-16,
    .lqd-megamenu-link-item a span:first-child {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
    }
}

/* 11. WICHTIGE OVERRIDE REGELN */
.lqd-megamenu *,
.lqd-megamenu-link-item *,
.lqd-megamenu-col * {
    text-overflow: unset !important;
    overflow: visible !important;
    white-space: normal !important;
    word-wrap: break-word !important;
}

/* Spezielle Behandlung für Tailwind Klassen die Truncation verursachen könnten */
.lqd-megamenu .truncate,
.lqd-megamenu .text-ellipsis,
.lqd-megamenu .overflow-hidden {
    text-overflow: unset !important;
    overflow: visible !important;
    white-space: normal !important;
}