/* CLAUDE: Marketing Excellence Section - Styles */
/* CLAUDE: Ersetzt alte 3D-Figuren durch modernes USP-Layout */
/* CLAUDE: Responsive, WCAG-konform, Performance-optimiert */

/* ========================================
   CLAUDE: MARKETING SECTION CONTAINER
   ======================================== */

/* CLAUDE: Haupt-Container der Vermarktungs-Sektion */
/* CLAUDE: Full-Width mit Chestnut-Hintergrund */
.lhi-marketing-section {
    /* CLAUDE: Relative Position für eventuelle Overlays */
    position: relative;
}

/* ========================================
   CLAUDE: HEADLINE & SUBHEADLINE
   ======================================== */

/* CLAUDE: Hauptüberschrift - Libre Baskerville, zentriert */
.lhi-marketing-headline {
    /* CLAUDE: Serif-Font für elegante Darstellung */
    font-family: var(--lhi-font-serif);
}

/* CLAUDE: Subheadline unter der Hauptüberschrift */
.lhi-marketing-subheadline {
    /* CLAUDE: Sans-Serif für bessere Lesbarkeit bei längeren Texten */
    font-family: var(--lhi-font-sans);
    /* CLAUDE: Maximale Breite für optimale Zeilenlänge */
    max-width: 700px;
    /* CLAUDE: Zentriert im Container */
    margin-left: auto;
    margin-right: auto;
}

/* ========================================
   CLAUDE: USP COLUMNS (3-Spalten Layout)
   ======================================== */

/* CLAUDE: Container für die 3 USP-Spalten */
/* CLAUDE: Spezifischer Selektor um WordPress is-layout-flex zu überschreiben */
.wp-block-columns.lhi-marketing-columns,
.wp-block-columns.lhi-marketing-columns.is-layout-flex,
.lhi-marketing-columns {
    /* CLAUDE: Margin-Top für Abstand zur Subheadline */
    margin-top: var(--lhi-space-lg);
    /* CLAUDE: Streckt alle Spalten auf gleiche Höhe - KRITISCH für gleiche Card-Höhen */
    align-items: stretch !important;
}

/* CLAUDE: Einzelne USP-Spalte */
/* CLAUDE: Spezifischer Selektor für WordPress wp-block-column */
.wp-block-column.lhi-marketing-usp,
.lhi-marketing-usp {
    /* CLAUDE: Flex-Basis für gleichmäßige Verteilung */
    flex: 1 1 300px;
    /* CLAUDE: Spalte als Flex-Container für volle Card-Höhe */
    display: flex !important;
    /* CLAUDE: Card füllt die gesamte Spalte */
    flex-direction: column;
    /* CLAUDE: Streckt Card auf volle Spaltenhöhe */
    align-self: stretch !important;
}

/* ========================================
   CLAUDE: USP CARDS
   ======================================== */

/* CLAUDE: Card-Container für einzelne USPs */
.lhi-marketing-card {
    /* CLAUDE: Volle Höhe für gleichmäßige Cards */
    height: 100%;
    /* CLAUDE: Flex-Grow damit Card die volle Spaltenhöhe nutzt */
    flex: 1;
    /* CLAUDE: Flex-Container für vertikale Anordnung des Inhalts */
    display: flex !important;
    flex-direction: column;
    /* CLAUDE: Sanfte Transition für Hover-Effekte */
    transition: transform var(--lhi-transition-fast), box-shadow var(--lhi-transition-fast);
    /* CLAUDE: Schatten für Card-Effekt */
    box-shadow: var(--lhi-shadow-md);
}

/* CLAUDE: Text-Bereich der Card wächst und füllt verfügbaren Platz */
.lhi-marketing-usp-text {
    /* CLAUDE: Flex-Grow für gleichmäßige Card-Höhen */
    flex-grow: 1;
    /* CLAUDE: Sans-Serif für Lesbarkeit */
    font-family: var(--lhi-font-sans);
    /* CLAUDE: Basis-Schriftgröße */
    font-size: var(--lhi-font-size-base);
}

/* CLAUDE: Hover-Effekt auf Cards */
.lhi-marketing-card:hover {
    /* CLAUDE: Leichte Anhebung */
    transform: translateY(-4px);
    /* CLAUDE: Verstärkter Schatten */
    box-shadow: var(--lhi-shadow-lg);
}

/* ========================================
   CLAUDE: ICONS
   ======================================== */

/* CLAUDE: Icon-Container in den USP-Cards */
.lhi-marketing-icon {
    /* CLAUDE: Flex für Zentrierung */
    display: flex;
    /* CLAUDE: Zentriert horizontal */
    justify-content: center;
    /* CLAUDE: Zentriert vertikal */
    align-items: center;
    /* CLAUDE: Höhe für gleichmäßige Darstellung */
    min-height: 60px;
}

/* CLAUDE: SVG-Icons innerhalb des Icon-Containers */
.lhi-marketing-icon svg {
    /* CLAUDE: Fixe Größe für Konsistenz */
    width: 48px;
    height: 48px;
    /* CLAUDE: Chestnut-Farbe für Icons */
    stroke: var(--lhi-color-secondary);
    /* CLAUDE: Transition für Hover */
    transition: stroke var(--lhi-transition-fast), transform var(--lhi-transition-fast);
}

/* CLAUDE: Icon-Hover wenn Card gehovered wird */
.lhi-marketing-card:hover .lhi-marketing-icon svg {
    /* CLAUDE: Heritage Gold auf Hover */
    stroke: var(--lhi-color-gold);
    /* CLAUDE: Leichte Skalierung */
    transform: scale(1.1);
}

/* ========================================
   CLAUDE: USP TITEL & TEXT
   ======================================== */

/* CLAUDE: USP-Überschrift */
.lhi-marketing-usp-title {
    /* CLAUDE: Sans-Serif für UI-Headlines */
    font-family: var(--lhi-font-sans);
}

/* CLAUDE: USP-Beschreibungstext - Styles werden oben bei .lhi-marketing-usp-text definiert */
/* CLAUDE: flex-grow: 1 sorgt für gleichmäßige Card-Höhen */

/* ========================================
   CLAUDE: TRUST BADGES
   CLAUDE: Responsive für alle Viewports optimiert
   CLAUDE: Überschreibt WordPress is-layout-flex Gaps
   ======================================== */

/* CLAUDE: Container für Trust-Badges - DESKTOP DEFAULT */
/* CLAUDE: Horizontal in einer Reihe, gleichmäßig verteilt */
.lhi-marketing-trust {
    /* CLAUDE: Flex statt WordPress-generiertes Layout */
    display: flex !important;
    /* CLAUDE: Horizontal ausrichten */
    flex-direction: row !important;
    /* CLAUDE: Umbruch erlauben bei Platzmangel */
    flex-wrap: wrap !important;
    /* CLAUDE: Zentriert horizontal */
    justify-content: center !important;
    /* CLAUDE: Vertikal zentrieren */
    align-items: center !important;
    /* CLAUDE: Kontrollierter Gap statt WP-default */
    gap: var(--lhi-space-lg, 2rem) !important;
}

/* CLAUDE: WordPress is-layout-flex Gap überschreiben */
.lhi-marketing-trust.is-layout-flex,
.lhi-marketing-trust.wp-block-group-is-layout-flex {
    /* CLAUDE: Gap explizit setzen, WP-Styles überschreiben */
    gap: var(--lhi-space-lg, 2rem) !important;
}

/* CLAUDE: Einzelner Trust-Badge */
.lhi-trust-badge {
    /* CLAUDE: Flex für interne Anordnung */
    display: flex !important;
    /* CLAUDE: Vertikal stapeln (Nummer über Label) */
    flex-direction: column !important;
    /* CLAUDE: Zentriert horizontal */
    align-items: center !important;
    /* CLAUDE: Minimale Breite für Lesbarkeit */
    min-width: 100px;
    /* CLAUDE: Maximale Breite begrenzen */
    max-width: 160px;
    /* CLAUDE: Padding für Clickable-Area */
    padding: var(--lhi-space-xs, 0.5rem) var(--lhi-space-sm, 1rem);
    /* CLAUDE: Zentrierter Text */
    text-align: center;
    /* CLAUDE: Interner Gap überschreiben */
    gap: 0.25rem !important;
}

/* CLAUDE: WordPress-generierte Flex-Gaps innerhalb Badge entfernen */
/* CLAUDE: Adressiert alle WP-generierten Flex-Klassen inkl. is-vertical */
.lhi-trust-badge.is-layout-flex,
.lhi-trust-badge.wp-block-group-is-layout-flex,
.lhi-trust-badge.is-vertical {
    gap: 0.25rem !important;
}

/* CLAUDE: Spezifischer Selektor für den Marketing-Trust Container */
/* CLAUDE: Überschreibt WordPress wp-container-* auto-generierte Styles */
.lhi-marketing-trust.wp-block-group[class*="wp-container-"] {
    gap: var(--lhi-space-lg, 2rem) !important;
}

/* CLAUDE: Entfernt übermäßige Margins von WP */
.lhi-marketing-trust .wp-block-group {
    margin: 0 !important;
}

/* CLAUDE: Entfernt leere Paragraphen-Margins die WP hinzufügt */
.lhi-marketing-trust p:empty {
    display: none !important;
}

/* CLAUDE: Inline p-Tags innerhalb Badges - kompakt */
.lhi-trust-badge p {
    margin: 0 !important;
}

/* CLAUDE: Trust-Badge Nummer (z.B. "98%") */
.lhi-trust-number {
    /* CLAUDE: Sans-Serif für Zahlen */
    font-family: var(--lhi-font-sans);
    /* CLAUDE: Kein Margin - Gap via Flex */
    margin: 0 !important;
    margin-bottom: 0.125rem !important;
}

/* CLAUDE: Trust-Badge Label (z.B. "des Angebotspreises") */
.lhi-trust-label {
    /* CLAUDE: Sans-Serif für Labels */
    font-family: var(--lhi-font-sans);
    /* CLAUDE: Kein Margin - Gap via Flex */
    margin: 0 !important;
}

/* CLAUDE: Separator zwischen Trust-Badges - DESKTOP */
/* CLAUDE: Linke/Rechte Border für mittleres Badge */
.lhi-marketing-trust > .lhi-trust-badge:not(:first-child):not(:last-child) {
    /* CLAUDE: Linker Border als Separator */
    border-left: 1px solid var(--lhi-color-border);
    /* CLAUDE: Rechter Border als Separator */
    border-right: 1px solid var(--lhi-color-border);
    /* CLAUDE: Padding für Border-Abstand */
    padding-left: var(--lhi-space-md, 1.5rem);
    padding-right: var(--lhi-space-md, 1.5rem);
}

/* ========================================
   CLAUDE: CTA BUTTON
   ======================================== */

/* CLAUDE: CTA-Button Container */
.lhi-marketing-cta .wp-block-button__link {
    /* CLAUDE: Transition für Hover */
    transition: background-color var(--lhi-transition-fast), transform var(--lhi-transition-fast);
}

/* CLAUDE: CTA-Button Hover */
.lhi-marketing-cta .wp-block-button__link:hover {
    /* CLAUDE: Dunkleres Gold auf Hover */
    background-color: var(--lhi-color-secondary) !important;
    /* CLAUDE: Leichte Anhebung */
    transform: translateY(-2px);
}

/* ========================================
   CLAUDE: RESPONSIVE STYLES
   ======================================== */

/* CLAUDE: Tablet-Breakpoint (< 1024px) */
@media (max-width: 1024px) {
    /* CLAUDE: Columns auf 2 Spalten reduzieren */
    .lhi-marketing-columns {
        flex-wrap: wrap;
    }

    /* CLAUDE: Erste zwei Spalten nebeneinander */
    .lhi-marketing-usp {
        flex: 1 1 45%;
    }

    /* CLAUDE: Dritte Spalte volle Breite */
    .lhi-marketing-usp:last-child {
        flex: 1 1 100%;
        max-width: 400px;
        margin: 0 auto;
    }
}

/* CLAUDE: Tablet-Breakpoint (768px - 1023px) */
/* CLAUDE: Trust-Badges bleiben horizontal, aber kompakter */
@media (min-width: 768px) and (max-width: 1023px) {
    .lhi-marketing-trust {
        /* CLAUDE: Kleinerer Gap auf Tablet */
        gap: var(--lhi-space-md, 1.5rem) !important;
    }

    .lhi-trust-badge {
        /* CLAUDE: Kompaktere Breite */
        min-width: 90px;
        max-width: 140px;
        /* CLAUDE: Kleineres Padding */
        padding: var(--lhi-space-xs, 0.5rem);
    }

    /* CLAUDE: Kompaktere Separator-Padding */
    .lhi-marketing-trust > .lhi-trust-badge:not(:first-child):not(:last-child) {
        padding-left: var(--lhi-space-sm, 1rem);
        padding-right: var(--lhi-space-sm, 1rem);
    }
}

/* CLAUDE: Mobile-Breakpoint (< 768px) */
@media (max-width: 767px) {
    /* CLAUDE: Alle Spalten untereinander */
    .lhi-marketing-columns {
        flex-direction: column;
    }

    /* CLAUDE: Volle Breite für alle USPs */
    .lhi-marketing-usp,
    .lhi-marketing-usp:last-child {
        flex: 1 1 100%;
        max-width: 100%;
    }

    /* CLAUDE: Trust-Badges HORIZONTAL bleiben auf Mobile */
    /* CLAUDE: Kompakte Darstellung nebeneinander */
    .lhi-marketing-trust {
        /* CLAUDE: Weiterhin horizontal */
        flex-direction: row !important;
        /* CLAUDE: Umbruch erlauben */
        flex-wrap: wrap !important;
        /* CLAUDE: Zentrieren */
        justify-content: center !important;
        /* CLAUDE: Kompakter Gap */
        gap: var(--lhi-space-sm, 1rem) !important;
    }

    /* CLAUDE: Badges kompakter auf Mobile */
    .lhi-trust-badge {
        /* CLAUDE: Kleinere Breite */
        min-width: 80px;
        max-width: 120px;
        /* CLAUDE: Minimales Padding */
        padding: var(--lhi-space-xs, 0.5rem) var(--lhi-space-xs, 0.5rem);
    }

    /* CLAUDE: Kleinere Typografie auf Mobile */
    .lhi-trust-number {
        font-size: 1.5rem !important;
    }

    .lhi-trust-label {
        font-size: 0.75rem !important;
    }

    /* CLAUDE: Separator entfernen auf Mobile - nur horizontaler Abstand */
    .lhi-marketing-trust > .lhi-trust-badge:not(:first-child):not(:last-child) {
        border-left: none;
        border-right: none;
        padding-left: var(--lhi-space-sm, 1rem);
        padding-right: var(--lhi-space-sm, 1rem);
    }

    /* CLAUDE: CTA-Button volle Breite */
    .lhi-marketing-cta {
        width: 100%;
    }

    .lhi-marketing-cta .wp-block-button__link {
        width: 100%;
        text-align: center;
    }
}

/* CLAUDE: Small Mobile-Breakpoint (< 480px) */
/* CLAUDE: Vertikal gestapelt, aber KOMPAKT */
@media (max-width: 479px) {
    /* CLAUDE: Reduziertes Padding */
    .lhi-marketing-section {
        padding-left: var(--lhi-space-sm) !important;
        padding-right: var(--lhi-space-sm) !important;
    }

    /* CLAUDE: Kleinere Headline */
    .lhi-marketing-headline {
        font-size: clamp(1.5rem, 6vw, 2rem) !important;
    }

    /* CLAUDE: Kleinere Subheadline */
    .lhi-marketing-subheadline {
        font-size: 1rem !important;
    }

    /* CLAUDE: Kompaktere Cards */
    .lhi-marketing-card {
        padding: var(--lhi-space-md) var(--lhi-space-sm) !important;
    }

    /* CLAUDE: Trust-Badges vertikal auf sehr kleinen Screens */
    .lhi-marketing-trust {
        /* CLAUDE: Vertikal stapeln */
        flex-direction: column !important;
        /* CLAUDE: Zentriert */
        align-items: center !important;
        /* CLAUDE: MINIMALER Gap - das ist der Key! */
        gap: var(--lhi-space-xs, 0.5rem) !important;
    }

    /* CLAUDE: Badges mit voller Breite */
    .lhi-trust-badge {
        /* CLAUDE: Volle Breite für konsistentes Layout */
        min-width: 100%;
        max-width: 100%;
        /* CLAUDE: Horizontal ausrichten */
        flex-direction: row !important;
        /* CLAUDE: Links ausrichten */
        justify-content: flex-start !important;
        /* CLAUDE: Gap zwischen Nummer und Label */
        gap: var(--lhi-space-sm, 1rem) !important;
        /* CLAUDE: Minimales Padding */
        padding: var(--lhi-space-xs, 0.5rem) 0;
        /* CLAUDE: Text links */
        text-align: left;
    }

    /* CLAUDE: Nummer und Label nebeneinander */
    .lhi-trust-number {
        /* CLAUDE: Feste Breite für Alignment */
        min-width: 60px;
        text-align: right !important;
    }

    .lhi-trust-label {
        /* CLAUDE: Flexibel */
        flex: 1;
        text-align: left !important;
    }

    /* CLAUDE: Subtile Trennlinie zwischen Badges */
    .lhi-marketing-trust > .lhi-trust-badge:not(:first-child) {
        border-top: 1px solid var(--lhi-color-border-light, rgba(0,0,0,0.08));
        padding-top: var(--lhi-space-xs, 0.5rem);
    }

    /* CLAUDE: Separator komplett entfernen */
    .lhi-marketing-trust > .lhi-trust-badge:not(:first-child):not(:last-child) {
        border-left: none;
        border-right: none;
        padding-left: 0;
        padding-right: 0;
    }
}

/* ========================================
   CLAUDE: PRINT STYLES
   ======================================== */

@media print {
    /* CLAUDE: Keine Hover-Effekte beim Drucken */
    .lhi-marketing-card:hover {
        transform: none;
        box-shadow: none;
    }

    /* CLAUDE: Hintergrundfarbe für Druck */
    .lhi-marketing-section {
        background-color: #f5f5f5 !important;
        color: #000 !important;
    }
}