/* CLAUDE: About-Sections CSS - Styles für Über-uns Seite */
/* CLAUDE: Enthält Hero-About, Trust-Stats, Story-Section, Values-Section */
/* CLAUDE: Anpassbar: Farben über CSS-Variablen, Abstände über spacing-vars */

/* ==========================================================================
   CLAUDE: Hero-About Section
   ========================================================================== */

/* CLAUDE: Hero-About Container - Vollbreite mit Overlay */
.lhi-hero-about {
    /* CLAUDE: Mindesthöhe für visuellen Impact */
    min-height: 600px;
    /* CLAUDE: Flexbox für vertikale Zentrierung */
    display: flex;
    align-items: center;
    justify-content: center;
    /* CLAUDE: Position für Gradient-Overlay */
    position: relative;
}

/* CLAUDE: Gradient-Overlay für bessere Bild-Sichtbarkeit */
/* CLAUDE: Ersetzt den einheitlichen dunklen Overlay durch einen Gradient */
.lhi-hero-about .wp-block-cover__background {
    /* CLAUDE: Gradient: Dunkel oben (für Text), transparent Mitte, leicht dunkel unten */
    background: linear-gradient(
        180deg,
        rgba(59, 42, 26, 0.85) 0%,
        rgba(59, 42, 26, 0.5) 35%,
        rgba(59, 42, 26, 0.3) 60%,
        rgba(59, 42, 26, 0.6) 100%
    ) !important;
    /* CLAUDE: Opacity wird über den Gradient gesteuert */
    opacity: 1 !important;
}

/* CLAUDE: Hero-About Inhalt zentrieren */
.lhi-hero-about .wp-block-cover__inner-container {
    /* CLAUDE: Maximale Breite für Lesbarkeit */
    max-width: 900px;
    /* CLAUDE: Zentrierung */
    margin: 0 auto;
    /* CLAUDE: Text zentriert */
    text-align: center;
    /* CLAUDE: Z-Index über Overlay */
    position: relative;
    z-index: 2;
}

/* CLAUDE: Hero-Bild besser sichtbar machen */
.lhi-hero-about .wp-block-cover__image-background {
    /* CLAUDE: Bild leicht aufhellen für bessere Sichtbarkeit */
    filter: brightness(1.1) contrast(1.05);
}

/* CLAUDE: Trust-Badges Container */
.lhi-trust-badges {
    /* CLAUDE: Flexbox mit Wrap für responsive Verhalten */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--wp--preset--spacing--sm, 1rem);
}

/* CLAUDE: Einzelne Trust-Badge - VERBESSERT für bessere Sichtbarkeit */
.lhi-trust-badge {
    /* CLAUDE: Halbtransparenter goldener Hintergrund für Sichtbarkeit */
    background-color: rgba(138, 107, 63, 0.25) !important;
    /* CLAUDE: Stärkere Border für Kontrast */
    border: 2px solid rgba(193, 154, 107, 0.8) !important;
    /* CLAUDE: Backdrop-Blur für Glasmorphismus-Effekt */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    /* CLAUDE: Transition für Hover-Effekt */
    transition: all 0.3s ease;
    /* CLAUDE: Leichter Schatten für Tiefe */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* CLAUDE: Trust-Badge Hover-Effekt - VERBESSERT */
.lhi-trust-badge:hover {
    /* CLAUDE: Leichte Vergrößerung bei Hover */
    transform: translateY(-2px);
    /* CLAUDE: Stärkerer Hintergrund bei Hover */
    background-color: rgba(138, 107, 63, 0.4) !important;
    /* CLAUDE: Hellere Border bei Hover */
    border-color: rgba(193, 154, 107, 1) !important;
    /* CLAUDE: Stärkerer Schatten bei Hover */
    box-shadow: 0 4px 15px rgba(138, 107, 63, 0.3);
}

/* CLAUDE: Trust-Badge Text besser lesbar */
.lhi-trust-badge p {
    /* CLAUDE: Text-Schatten für bessere Lesbarkeit */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   CLAUDE: Trust-Stats Section
   ========================================================================== */

/* CLAUDE: Trust-Stats Container */
.lhi-trust-stats {
    /* CLAUDE: Vollbreite */
    width: 100%;
}

/* CLAUDE: Einzelnes Stat-Item */
.lhi-stat-item {
    /* CLAUDE: Zentrierter Text */
    text-align: center;
    /* CLAUDE: Relative Positionierung für Pseudo-Elemente */
    position: relative;
}

/* CLAUDE: Stat-Nummer - große, prominente Zahl */
.lhi-stat-number {
    /* CLAUDE: Keine Margin - wird über Block-Styles gesteuert */
    margin: 0 !important;
    /* CLAUDE: Transition für mögliche Animationen */
    transition: transform 0.3s ease;
}

/* CLAUDE: Stat-Label unter der Zahl */
.lhi-stat-label {
    /* CLAUDE: Keine Margin - wird über Block-Styles gesteuert */
    margin: 0 !important;
    /* CLAUDE: Abstand zur Zahl */
    margin-top: 0.5rem !important;
}

/* CLAUDE: Trennlinie zwischen Stats (Desktop) */
.lhi-stat-item:not(:last-child)::after {
    /* CLAUDE: Vertikale Linie */
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 60%;
    width: 1px;
    background-color: rgba(138, 107, 63, 0.3);
}

/* CLAUDE: Responsive - Keine Trennlinien auf Tablet/Mobile */
@media (max-width: 781px) {
    .lhi-stat-item:not(:last-child)::after {
        display: none;
    }

    /* CLAUDE: 2x2 Grid auf Tablet */
    .lhi-trust-stats .wp-block-columns {
        flex-wrap: wrap;
    }

    .lhi-trust-stats .wp-block-column {
        flex-basis: 50% !important;
        margin-bottom: var(--wp--preset--spacing--md, 1.5rem);
    }
}

/* CLAUDE: Responsive - Einspaltiges Layout auf Mobile */
@media (max-width: 480px) {
    .lhi-trust-stats .wp-block-column {
        flex-basis: 100% !important;
    }

    /* CLAUDE: Kleinere Zahlen auf Mobile */
    .lhi-stat-number {
        font-size: 2.5rem !important;
    }
}

/* ==========================================================================
   CLAUDE: Story-Section
   ========================================================================== */

/* CLAUDE: Story-Section Container */
.lhi-story-section {
    /* CLAUDE: Vollbreite */
    width: 100%;
}

/* CLAUDE: Story-Values Box */
.lhi-story-values {
    /* CLAUDE: Schatten für Hervorhebung */
    box-shadow: 0 4px 20px rgba(59, 42, 26, 0.08);
    /* CLAUDE: Sticky auf Desktop für Scroll-Effekt */
    position: sticky;
    top: var(--wp--preset--spacing--lg, 2rem);
}

/* CLAUDE: Story-Values Liste */
.lhi-story-values ul {
    /* CLAUDE: Keine Standard-Bullets */
    list-style: none;
}

/* CLAUDE: Story-Values Listen-Items mit Custom Bullet */
.lhi-story-values li {
    /* CLAUDE: Position für Pseudo-Element */
    position: relative;
    padding-left: 1.5rem;
}

/* CLAUDE: Custom Bullet - Heritage Gold Punkt */
.lhi-story-values li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--wp--preset--color--heritage-gold, #8a6b3f);
}

/* CLAUDE: Responsive - Story-Values nicht sticky auf Mobile */
@media (max-width: 781px) {
    .lhi-story-values {
        position: static;
    }

    /* CLAUDE: Einspaltiges Layout */
    .lhi-story-section .wp-block-columns {
        flex-direction: column;
    }

    .lhi-story-section .wp-block-column {
        flex-basis: 100% !important;
    }
}

/* ==========================================================================
   CLAUDE: Values-Section (mit Anker-IDs)
   ========================================================================== */

/* CLAUDE: Values-Section Container */
.lhi-values-section {
    /* CLAUDE: Vollbreite */
    width: 100%;
}

/* CLAUDE: Value-Card */
.lhi-value-card {
    /* CLAUDE: Transition für Hover-Effekt */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* CLAUDE: Basis-Schatten */
    box-shadow: 0 2px 10px rgba(59, 42, 26, 0.05);
}

/* CLAUDE: Value-Card Hover */
.lhi-value-card:hover {
    /* CLAUDE: Leichte Anhebung bei Hover */
    transform: translateY(-4px);
    /* CLAUDE: Stärkerer Schatten bei Hover */
    box-shadow: 0 8px 30px rgba(59, 42, 26, 0.12);
}

/* CLAUDE: Value-Icon Container */
.lhi-value-icon {
    /* CLAUDE: Zentrierung */
    display: flex;
    justify-content: center;
    align-items: center;
    /* CLAUDE: Größe */
    width: 64px;
    height: 64px;
    /* CLAUDE: Zentrierung im Container */
    margin: 0 auto var(--wp--preset--spacing--sm, 1rem);
}

/* CLAUDE: Value-Icon SVG */
.lhi-value-icon svg {
    /* CLAUDE: Volle Größe */
    width: 100%;
    height: 100%;
    /* CLAUDE: Farbe erben */
    color: var(--wp--preset--color--heritage-gold, #8a6b3f);
}

/* CLAUDE: Scroll-Offset für Anker-Links */
#kompetenz,
#kundenorientierung {
    /* CLAUDE: Offset für sticky Header */
    scroll-margin-top: 100px;
}

/* ==========================================================================
   CLAUDE: Values-Section Typography Fixes
   CLAUDE: Problem 1: Lange Überschriften wie "Kundenorientierung" brechen um
   CLAUDE: Lösung: Responsive font-size + hyphens für kontrollierte Umbrüche
   ========================================================================== */

/* CLAUDE: Value-Card H3 - Verhindert unschöne Umbrüche */
.lhi-value-card h3.wp-block-heading {
    /* CLAUDE: Flexible Schriftgröße: 0.9rem auf kleinen, 1rem auf großen Screens */
    /* CLAUDE: Anpassbar: clamp(min, preferred, max) Werte ändern */
    font-size: clamp(0.8rem, 2vw, 1rem) !important;
    /* CLAUDE: Silbentrennung aktivieren für kontrollierte Umbrüche */
    /* CLAUDE: Benötigt lang="de" im HTML für korrekte Trennung */
    hyphens: auto;
    -webkit-hyphens: auto;
    /* CLAUDE: Wort-Umbruch erlauben wenn nötig */
    word-break: break-word;
    overflow-wrap: break-word;
}

/* CLAUDE: Auf größeren Screens (>900px) kein Umbruch nötig */
@media (min-width: 900px) {
    .lhi-value-card h3.wp-block-heading {
        /* CLAUDE: Kein Umbruch auf Desktop */
        white-space: nowrap;
        /* CLAUDE: Keine Silbentrennung auf Desktop */
        hyphens: none;
        -webkit-hyphens: none;
    }
}

/* ==========================================================================
   CLAUDE: Values-Section Liste - Linksbündiger Text
   CLAUDE: Problem 2: Text nach Bullet Points nicht linksbündig
   CLAUDE: Lösung: list-style-position: outside + passendes padding
   ========================================================================== */

/* CLAUDE: Value-Card Listen - Text linksbündig mit Bullets */
.lhi-value-card ul.wp-block-list {
    /* CLAUDE: Bullet außerhalb des Text-Flows platzieren */
    /* CLAUDE: Dadurch ist umgebrochener Text linksbündig */
    list-style-position: outside !important;
    /* CLAUDE: Padding für Bullet-Platz (1.25rem gibt genug Raum) */
    padding-left: 1.25rem !important;
    /* CLAUDE: Margin links für zusätzliche Einrückung */
    margin-left: 0.5rem;
}

/* CLAUDE: Value-Card Listen-Items */
.lhi-value-card ul.wp-block-list li {
    /* CLAUDE: Kein extra Padding links (wird von UL gesteuert) */
    padding-left: 0;
    /* CLAUDE: Text startet direkt nach Bullet */
    text-align: left;
}

/* CLAUDE: Responsive - Value-Cards auf Mobile */
@media (max-width: 781px) {
    .lhi-values-section .wp-block-columns {
        flex-direction: column;
        gap: var(--wp--preset--spacing--md, 1.5rem);
    }

    .lhi-value-card {
        /* CLAUDE: Kein Hover-Effekt auf Touch-Geräten */
        transform: none !important;
    }
}

/* ==========================================================================
   CLAUDE: Team-Extended Section
   ========================================================================== */

/* CLAUDE: Team-Extended Container */
.lhi-team-extended {
    /* CLAUDE: Vollbreite */
    width: 100%;
}

/* CLAUDE: Team-Card */
.lhi-team-card {
    /* CLAUDE: Overflow hidden für abgerundete Bilder */
    overflow: hidden;
    /* CLAUDE: Transition für Hover */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* CLAUDE: Basis-Schatten */
    box-shadow: 0 4px 20px rgba(59, 42, 26, 0.08);
}

/* CLAUDE: Team-Card Hover */
.lhi-team-card:hover {
    /* CLAUDE: Leichte Anhebung */
    transform: translateY(-4px);
    /* CLAUDE: Stärkerer Schatten */
    box-shadow: 0 12px 40px rgba(59, 42, 26, 0.15);
}

/* CLAUDE: Team-Photo */
.lhi-team-photo {
    /* CLAUDE: Keine Margin */
    margin: 0 !important;
}

/* CLAUDE: Team-Photo Image */
.lhi-team-photo img {
    /* CLAUDE: Volle Breite */
    width: 100%;
    /* CLAUDE: Feste Höhe für Konsistenz */
    height: 300px;
    /* CLAUDE: Bild-Ausschnitt */
    object-fit: cover;
    object-position: top center;
    /* CLAUDE: Transition für Zoom-Effekt */
    transition: transform 0.4s ease;
}

/* CLAUDE: Team-Photo Hover Zoom */
.lhi-team-card:hover .lhi-team-photo img {
    /* CLAUDE: Leichter Zoom bei Hover */
    transform: scale(1.05);
}

/* CLAUDE: Responsive - Team-Cards auf Mobile */
@media (max-width: 781px) {
    .lhi-team-extended .wp-block-columns {
        flex-direction: column;
        gap: var(--wp--preset--spacing--lg, 2rem);
    }

    .lhi-team-card {
        /* CLAUDE: Kein Hover-Transform auf Touch-Geräten */
        transform: none !important;
    }

    .lhi-team-photo img {
        /* CLAUDE: Größere Bilder auf Mobile */
        height: 350px;
    }
}

/* ==========================================================================
   CLAUDE: Utility Classes
   ========================================================================== */

/* CLAUDE: Smooth Scroll für Anker-Links */
html {
    scroll-behavior: smooth;
}

/* CLAUDE: Focus-Visible für Accessibility */
.lhi-trust-badge:focus-visible,
.lhi-value-card:focus-visible,
.lhi-team-card:focus-visible {
    outline: 2px solid var(--wp--preset--color--heritage-gold, #8a6b3f);
    outline-offset: 2px;
}

/* CLAUDE: Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
    .lhi-trust-badge,
    .lhi-value-card,
    .lhi-team-card,
    .lhi-team-photo img,
    .lhi-stat-number {
        transition: none !important;
        transform: none !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ==========================================================================
   CLAUDE: Hero-Split Section (NEU)
   CLAUDE: 50/50 Split-Layout - Text links, Bild rechts
   CLAUDE: Löst Problem von Text über Personen im Bild
   ========================================================================== */

/* CLAUDE: Hero-Split Container - Vollbreite mit Dark Umber Hintergrund */
/* CLAUDE: Redesign v2.0 - Eleganter Gradient-Übergang */
.lhi-hero-split {
    /* CLAUDE: Erhöhte Mindesthöhe für mehr visuellen Impact (650px statt 600px) */
    min-height: 650px;
    /* CLAUDE: Position für mögliche absolute Positionierungen */
    position: relative;
    /* CLAUDE: Overflow hidden für saubere Kanten */
    overflow: hidden;
}

/* CLAUDE: Columns Container - Kein Gap für nahtlosen Übergang */
.lhi-hero-split__columns {
    /* CLAUDE: Volle Höhe des Containers (angepasst auf 650px) */
    min-height: 650px;
}

/* CLAUDE: Columns müssen sich gleichmäßig strecken */
.lhi-hero-split__columns.wp-block-columns {
    /* CLAUDE: Keine Flex-Wrap auf Desktop */
    flex-wrap: nowrap;
}

/* ==========================================================================
   CLAUDE: Redesign v2.0 - Asymmetrisches Layout 55/45
   ========================================================================== */

/* CLAUDE: Content-Spalte bekommt mehr Platz (55% statt 50%) */
.lhi-hero-split .lhi-hero-split__content {
    /* CLAUDE: 55% für Text-Bereich - gibt mehr Breathing Room */
    flex-basis: 55% !important;
}

/* CLAUDE: Media-Spalte etwas schmaler (45% statt 50%) */
.lhi-hero-split .lhi-hero-split__media {
    /* CLAUDE: 45% für Bild-Bereich - Personen bleiben prominent */
    flex-basis: 45% !important;
}

/* CLAUDE: Content-Spalte (Text) - Links */
.lhi-hero-split__content {
    /* CLAUDE: Flexbox für vertikale Zentrierung */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* CLAUDE: Padding bereits über Inline-Styles definiert */
}

/* CLAUDE: Content-Inner - Begrenzte Breite für Lesbarkeit */
.lhi-hero-split__content-inner {
    /* CLAUDE: Maximale Breite für optimale Lesbarkeit */
    max-width: 500px;
}

/* CLAUDE: Media-Spalte (Bild) - Rechts */
.lhi-hero-split__media {
    /* CLAUDE: Kein Padding für randloses Bild */
    padding: 0 !important;
    /* CLAUDE: Overflow hidden für saubere Kanten */
    overflow: hidden;
    /* CLAUDE: Position für Bild-Positionierung und Gradient-Overlay */
    position: relative;
}

/* ==========================================================================
   CLAUDE: Redesign v2.0 - Gradient-Overlay für harmonischen Übergang
   CLAUDE: Löst das Problem des harten Schwarz/Braun-Kontrastes
   ========================================================================== */

/* CLAUDE: Gradient-Overlay von links (braun) nach rechts (transparent) */
.lhi-hero-split__media::before {
    /* CLAUDE: Pseudo-Element für Gradient */
    content: '';
    /* CLAUDE: Absolut positioniert über dem Bild */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* CLAUDE: Gradient: dark-umber → transparent für sanften Übergang */
    background: linear-gradient(
        90deg,
        var(--wp--preset--color--dark-umber, #3B2A1A) 0%,
        rgba(59, 42, 26, 0.7) 15%,
        rgba(59, 42, 26, 0.4) 35%,
        rgba(59, 42, 26, 0.1) 60%,
        transparent 100%
    );
    /* CLAUDE: Über dem Bild, aber unter dem Content */
    z-index: 2;
    /* CLAUDE: Keine Pointer-Events blockieren */
    pointer-events: none;
}

/* ==========================================================================
   CLAUDE: Redesign v2.0 - Goldene Akzentlinie unter Headline
   ========================================================================== */

/* CLAUDE: Goldene Unterstreichung für Premium-Gefühl */
.lhi-hero-split__content h1::after {
    /* CLAUDE: Pseudo-Element als Linie */
    content: '';
    /* CLAUDE: Block für neue Zeile */
    display: block;
    /* CLAUDE: Breite der Linie (80px für elegante Proportion) */
    width: 80px;
    /* CLAUDE: Höhe/Dicke der Linie */
    height: 3px;
    /* CLAUDE: Heritage Gold Farbe */
    background: var(--wp--preset--color--heritage-gold, #8a6b3f);
    /* CLAUDE: Abstand zur Headline */
    margin-top: 1rem;
    /* CLAUDE: Sanfte Animation bei Hover (optional) */
    transition: width 0.3s ease;
}

/* CLAUDE: Hover-Effekt für Akzentlinie (optional - subtile Interaktion) */
.lhi-hero-split__content:hover h1::after {
    /* CLAUDE: Linie wird etwas breiter bei Hover */
    width: 120px;
}

/* CLAUDE: Bild-Figure Container - NUR innerhalb von __media (Über-uns Seite) */
/* CLAUDE: WICHTIG: Nicht .lhi-hero-split__image allein verwenden! */
/* CLAUDE: Auf der Startseite ist __image die Spalte, nicht die Figure */
.lhi-hero-split__media .lhi-hero-split__image {
    /* CLAUDE: Keine Margins */
    margin: 0 !important;
    /* CLAUDE: Volle Höhe */
    height: 100%;
    /* CLAUDE: Absolute Positionierung für Füllung */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* CLAUDE: Bild selbst - Cover-Verhalten (nur in __media) */
.lhi-hero-split__media .lhi-hero-split__image img {
    /* CLAUDE: Volle Dimensionen */
    width: 100%;
    height: 100%;
    /* CLAUDE: Cover für proportionales Füllen */
    object-fit: cover;
    /* CLAUDE: Fokus auf oberen Bereich (Köpfe sichtbar) */
    object-position: center top;
    /* CLAUDE: Sanfte Animation bei Hover */
    transition: transform 0.6s ease;
}

/* CLAUDE: Bild-Hover Effekt - Leichter Zoom (nur in __media) */
.lhi-hero-split:hover .lhi-hero-split__media .lhi-hero-split__image img {
    /* CLAUDE: Subtiler Zoom für Interaktivität */
    transform: scale(1.03);
}

/* CLAUDE: Startseite Hero - __image ist hier die Spalte, nicht die Figure */
/* CLAUDE: Hier soll das PNG-Bild normal fließen, nicht absolut positioniert sein */
.lhi-hero-split__image.wp-block-column {
    /* CLAUDE: Normale Positionierung beibehalten */
    position: relative;
    /* CLAUDE: Flexbox für vertikale Zentrierung des Bildes */
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* CLAUDE: Startseite Hero - Das PNG-Bild selbst */
.lhi-hero-split__image.wp-block-column .lhi-hero-split__img {
    /* CLAUDE: Normale Margins */
    margin: 0;
}

.lhi-hero-split__image.wp-block-column .lhi-hero-split__img img {
    /* CLAUDE: Natürliche Größe, kein Cover */
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    /* CLAUDE: Kein object-fit für PNG mit Transparenz */
    object-fit: contain;
}

/* ==========================================================================
   CLAUDE: Redesign v2.0 - Größere, prominentere Trust-Badges
   ========================================================================== */

/* CLAUDE: Trust-Badges Container - NOWRAP auf Desktop für Nebeneinander-Darstellung */
.lhi-hero-split .lhi-trust-badges {
    /* CLAUDE: Verhindert Umbruch auf Desktop - alle 3 Badges nebeneinander */
    flex-wrap: nowrap !important;
    /* CLAUDE: Kleinerer Gap zwischen Badges für kompaktere Darstellung */
    gap: 0.5rem !important;
}

/* CLAUDE: Trust-Badges im Split-Hero - Anpassung für dunklen Hintergrund */
.lhi-hero-split .lhi-trust-badge {
    /* CLAUDE: Kompakteres Padding für besseres Nebeneinander (0.5rem 0.875rem) */
    padding: 0.5rem 0.875rem !important;
    /* CLAUDE: Flex-Shrink erlauben, damit Badges sich anpassen können */
    flex-shrink: 1;
    /* CLAUDE: Minimale Breite verhindern zu starkes Schrumpfen */
    min-width: 0;
    /* CLAUDE: Halbtransparenter Hintergrund - etwas stärker */
    background-color: rgba(138, 107, 63, 0.2) !important;
    /* CLAUDE: Goldene Border - etwas dicker (2px statt 1px) */
    border: 2px solid var(--wp--preset--color--heritage-gold, #8a6b3f) !important;
    /* CLAUDE: Backdrop-Blur für Glasmorphismus-Effekt */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    /* CLAUDE: Leichter Schatten für Tiefe */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    /* CLAUDE: Transition für Hover */
    transition: all 0.3s ease;
}

/* CLAUDE: Trust-Badge Text - kompakter für Nebeneinander */
.lhi-hero-split .lhi-trust-badge p {
    /* CLAUDE: Kompaktere Schrift (0.875rem) für besseres Nebeneinander */
    font-size: 0.875rem !important;
    /* CLAUDE: Etwas mehr Gewicht */
    font-weight: 600 !important;
    /* CLAUDE: Bessere Lesbarkeit mit Text-Shadow */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    /* CLAUDE: Flex für Icon + Text Alignment */
    display: flex;
    align-items: center;
    gap: 0.375rem;
    /* CLAUDE: Kein Umbruch im Text */
    white-space: nowrap;
}

/* CLAUDE: Trust-Badge Hover im Split-Hero */
.lhi-hero-split .lhi-trust-badge:hover {
    /* CLAUDE: Stärkerer Hintergrund */
    background-color: rgba(138, 107, 63, 0.35) !important;
    /* CLAUDE: Hellere Border */
    border-color: var(--wp--preset--color--heritage-gold-light, #C19A6B) !important;
    /* CLAUDE: Leichte Anhebung */
    transform: translateY(-3px);
    /* CLAUDE: Stärkerer Schatten */
    box-shadow: 0 6px 16px rgba(138, 107, 63, 0.25);
}

/* CLAUDE: SVG-Icons in Trust-Badges */
.lhi-hero-split .lhi-trust-badge svg {
    /* CLAUDE: Kompaktere Icon-Größe (16px statt 18px) */
    width: 16px;
    height: 16px;
    /* CLAUDE: Goldene Farbe */
    color: var(--wp--preset--color--heritage-gold, #8a6b3f);
    /* CLAUDE: Flex-Shrink verhindern */
    flex-shrink: 0;
}

/* ==========================================================================
   CLAUDE: Redesign v2.0 - Dual-CTA Buttons Styling
   ========================================================================== */

/* CLAUDE: Button Container - Besseres Spacing */
.lhi-hero-split .wp-block-buttons {
    /* CLAUDE: Gap zwischen Buttons */
    gap: var(--wp--preset--spacing--sm, 1rem);
}

/* CLAUDE: Primary Button im Split-Hero */
.lhi-hero-split .wp-block-button__link {
    /* CLAUDE: Transition für Hover */
    transition: all 0.3s ease;
}

/* CLAUDE: Primary Button Hover im Split-Hero */
.lhi-hero-split .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
    /* CLAUDE: Dunklerer Hintergrund */
    background-color: var(--wp--preset--color--chestnut, #7C4A21) !important;
    /* CLAUDE: Leichte Anhebung */
    transform: translateY(-2px);
    /* CLAUDE: Schatten für Tiefe */
    box-shadow: 0 6px 16px rgba(138, 107, 63, 0.4);
}

/* CLAUDE: Outline/Secondary Button im Split-Hero */
.lhi-hero-split .wp-block-button.is-style-outline .wp-block-button__link {
    /* CLAUDE: Transparenter Hintergrund */
    background-color: transparent !important;
    /* CLAUDE: Weiße Border */
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
}

/* CLAUDE: Outline Button Hover */
.lhi-hero-split .wp-block-button.is-style-outline .wp-block-button__link:hover {
    /* CLAUDE: Leicht gefüllter Hintergrund */
    background-color: rgba(255, 255, 255, 0.1) !important;
    /* CLAUDE: Hellere Border */
    border-color: #ffffff !important;
    /* CLAUDE: Leichte Anhebung */
    transform: translateY(-2px);
    /* CLAUDE: Subtiler Glow */
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
}

/* ==========================================================================
   CLAUDE: Hero-Split Responsive
   ========================================================================== */

/* CLAUDE: Tablet (768px - 1024px) - Proportionen anpassen */
@media (max-width: 1024px) {
    .lhi-hero-split {
        /* CLAUDE: Etwas geringere Höhe auf Tablet */
        min-height: 500px;
    }

    .lhi-hero-split__columns {
        min-height: 500px;
    }

    /* CLAUDE: Headline etwas kleiner */
    .lhi-hero-split__content h1 {
        font-size: clamp(1.75rem, 4vw, 2.5rem);
    }

    /* CLAUDE: Trust-Badges auf Tablet noch kompakter */
    .lhi-hero-split .lhi-trust-badge {
        /* CLAUDE: Noch kompakteres Padding auf Tablet */
        padding: 0.4rem 0.75rem !important;
    }

    /* CLAUDE: Trust-Badge Text auf Tablet */
    .lhi-hero-split .lhi-trust-badge p {
        /* CLAUDE: Kleinere Schrift auf Tablet */
        font-size: 0.8125rem !important;
    }

    /* CLAUDE: Kleinere Icons auf Tablet */
    .lhi-hero-split .lhi-trust-badge svg {
        width: 14px;
        height: 14px;
    }
}

/* CLAUDE: Mobile (<768px) - Gestapeltes Layout */
@media (max-width: 781px) {
    .lhi-hero-split {
        /* CLAUDE: Auto-Höhe auf Mobile */
        min-height: auto;
    }

    /* CLAUDE: Höhere Spezifität für WordPress-Überschreibung */
    .lhi-hero-split .lhi-hero-split__columns.wp-block-columns {
        /* CLAUDE: Stapeln - Bild zuerst (column-reverse) */
        flex-direction: column-reverse !important;
        min-height: auto;
        /* CLAUDE: Wrap erlauben */
        flex-wrap: wrap !important;
    }

    /* CLAUDE: Beide Spalten volle Breite */
    .lhi-hero-split__content,
    .lhi-hero-split__media {
        flex-basis: 100% !important;
        width: 100% !important;
    }

    /* CLAUDE: Content-Padding auf Mobile anpassen */
    .lhi-hero-split__content {
        padding: var(--wp--preset--spacing--lg, 2.5rem) var(--wp--preset--spacing--md, 1.5rem) !important;
        /* CLAUDE: Zentrierter Text auf Mobile */
        text-align: center;
    }

    /* CLAUDE: Content-Inner volle Breite auf Mobile */
    .lhi-hero-split__content-inner {
        max-width: 100%;
    }

    /* CLAUDE: Trust-Badges zentriert und dürfen umbrechen auf Mobile */
    .lhi-hero-split .lhi-trust-badges {
        justify-content: center;
        /* CLAUDE: Auf Mobile dürfen Badges umbrechen */
        flex-wrap: wrap !important;
        /* CLAUDE: Mehr Gap auf Mobile für bessere Lesbarkeit */
        gap: 0.5rem !important;
    }

    /* CLAUDE: Trust-Badges auf Mobile größer für Touch-Targets */
    .lhi-hero-split .lhi-trust-badge {
        /* CLAUDE: Größeres Padding für bessere Touchbarkeit */
        padding: 0.5rem 1rem !important;
    }

    /* CLAUDE: Trust-Badge Text auf Mobile */
    .lhi-hero-split .lhi-trust-badge p {
        /* CLAUDE: Lesbare Schrift auf Mobile */
        font-size: 0.875rem !important;
    }

    /* CLAUDE: Buttons zentriert */
    .lhi-hero-split .wp-block-buttons {
        justify-content: center;
    }

    /* CLAUDE: Media-Spalte - Feste Höhe auf Mobile */
    .lhi-hero-split__media {
        /* CLAUDE: Relative Position statt absolute Bild */
        position: relative;
        /* CLAUDE: Feste Höhe für Bild */
        height: 350px;
        min-height: 350px;
    }

    /* CLAUDE: Bild-Container auf Mobile */
    .lhi-hero-split__image {
        /* CLAUDE: Relative statt absolute auf Mobile */
        position: relative;
        height: 350px;
    }

    /* CLAUDE: Bild auf Mobile */
    .lhi-hero-split__image img {
        /* CLAUDE: Feste Höhe */
        height: 350px;
        /* CLAUDE: Object-Position anpassen für bessere Darstellung */
        object-position: center 20%;
    }
}

/* CLAUDE: Kleine Mobile (<480px) */
@media (max-width: 480px) {
    /* CLAUDE: Noch kompakteres Padding */
    .lhi-hero-split__content {
        padding: var(--wp--preset--spacing--md, 1.5rem) var(--wp--preset--spacing--sm, 1rem) !important;
    }

    /* CLAUDE: Kleineres Bild */
    .lhi-hero-split__media,
    .lhi-hero-split__image,
    .lhi-hero-split__image img {
        height: 300px;
        min-height: 300px;
    }

    /* CLAUDE: Trust-Badges in Stack auf sehr kleinen Screens */
    .lhi-hero-split .lhi-trust-badges {
        flex-direction: column;
        align-items: center;
    }
}

/* CLAUDE: Reduced Motion - Kein Hover-Zoom */
@media (prefers-reduced-motion: reduce) {
    .lhi-hero-split__image img,
    .lhi-hero-split .wp-block-button__link,
    .lhi-hero-split .lhi-trust-badge {
        transition: none !important;
        transform: none !important;
    }
}