/* ======================================================================
   CLAUDE: layout.css - Grid, Content-Wrapper, Spacing
   ======================================================================

   CLAUDE: Zweck
   -------
   CLAUDE: Implementiert das randlose Full-Width-Layout
   CLAUDE: Stellt ein flexibles Grid-System, Container-Varianten und Utility-Klassen bereit
   CLAUDE: Nutzt CSS-Custom-Properties aus base.css für Konsistenz

   CLAUDE: Inhalt
   -------
   CLAUDE: 1) Full-Width Layout System
   CLAUDE: 2) Container-System (.container, .container-wide, .container-full)
   CLAUDE: 3) Grid-System (2-, 3-, 4-Spalten, responsive)
   CLAUDE: 4) Section-System (.section, .section-lg, .section-hero)
   CLAUDE: 5) Utility-Klassen für Spacing und Alignment
   CLAUDE: 6) Gutenberg Block Support
   CLAUDE: 7) Responsive Layout Modifiers

   CLAUDE: Breakpoints
   -----------
   CLAUDE: Mobile:  < 768px
   CLAUDE: Tablet:  768px - 1023px
   CLAUDE: Desktop: >= 1024px

   ====================================================================== */

/* ======================================================================
   CLAUDE: 1) FULL-WIDTH LAYOUT SYSTEM
   ====================================================================== */

/* CLAUDE: Body & Main - Basis für Full-Width-Layout */
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* CLAUDE: Main-Container - Wrapper für alle Inhalte */
#main-content,
.site-main {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* CLAUDE: Site-Wrapper - volle Breite für Full-Width-Blöcke */
.site-wrapper {
    width: 100%;
    margin: 0 auto;
}

/* ======================================================================
   CLAUDE: 2) CONTAINER-SYSTEM
   ====================================================================== */

/* CLAUDE: Standard-Container - für Fließtext (750px max) */
.container {
    max-width: var(--lhi-content-size);
    margin-left: auto;
    margin-right: auto;
    padding-inline: var(--lhi-container-padding);
    width: 100%;
}

/* CLAUDE: Wide-Container - für breitere Inhalte (1200px max) */
.container-wide {
    max-width: var(--lhi-content-wide);
    margin-left: auto;
    margin-right: auto;
    padding-inline: var(--lhi-container-padding);
    width: 100%;
}

/* CLAUDE: Full-Container - für maximale Breite (1440px max) */
.container-full,
.content-constrained {
    max-width: var(--lhi-content-full);
    margin-left: auto;
    margin-right: auto;
    padding-inline: var(--lhi-container-padding);
    width: 100%;
}

/* CLAUDE: No-Container - für echtes Full-Bleed (100vw) */
.container-none,
.content-full {
    max-width: none;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: 0;
    padding-right: 0;
}

/* ======================================================================
   CLAUDE: 3) GRID-SYSTEM
   ====================================================================== */

/* CLAUDE: .grid-2 - 2-Spalten-Grid */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--lhi-grid-gutter);
    width: 100%;
}

/* CLAUDE: .grid-3 - 3-Spalten-Grid */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--lhi-grid-gutter);
    width: 100%;
}

/* CLAUDE: .grid-4 - 4-Spalten-Grid */
.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--lhi-grid-gutter);
    width: 100%;
}

/* CLAUDE: Responsive Grid-Anpassungen */

/* CLAUDE: Tablet (768px - 1023px) */
@media (max-width: 1023px) {
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* CLAUDE: Mobile (<768px) */
@media (max-width: 767px) {
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
        gap: var(--lhi-space-md);
    }
}

/* ======================================================================
   CLAUDE: 4) SECTION-SYSTEM
   ====================================================================== */

/* CLAUDE: Standard-Section - Basis-Padding */
.section {
    padding-block: var(--lhi-space-xl);
    width: 100%;
}

/* CLAUDE: Large-Section - Größeres Padding für wichtige Sektionen */
.section-lg {
    padding-block: var(--lhi-space-2xl);
    width: 100%;
}

/* CLAUDE: Hero-Section - Maximales Padding für Hero-Bereiche */
.section-hero {
    padding-block: clamp(5rem, 10vw, 10rem);
    width: 100%;
}

/* CLAUDE: Tight-Section - Reduziertes Padding für kompakte Bereiche */
.section-tight {
    padding-block: var(--lhi-space-lg);
    width: 100%;
}

/* CLAUDE: No-Padding-Section - Kein Padding für Full-Bleed-Content */
.section-flush {
    padding: 0;
    width: 100%;
}

/* ======================================================================
   CLAUDE: 5) SPACING & ALIGNMENT UTILITIES
   ====================================================================== */

/* CLAUDE: Margin-Top Utilities */
.mt-0   { margin-top: 0; }
.mt-xs  { margin-top: var(--lhi-space-xs); }
.mt-sm  { margin-top: var(--lhi-space-sm); }
.mt-md  { margin-top: var(--lhi-space-md); }
.mt-lg  { margin-top: var(--lhi-space-lg); }
.mt-xl  { margin-top: var(--lhi-space-xl); }
.mt-2xl { margin-top: var(--lhi-space-2xl); }

/* CLAUDE: Margin-Bottom Utilities */
.mb-0   { margin-bottom: 0; }
.mb-xs  { margin-bottom: var(--lhi-space-xs); }
.mb-sm  { margin-bottom: var(--lhi-space-sm); }
.mb-md  { margin-bottom: var(--lhi-space-md); }
.mb-lg  { margin-bottom: var(--lhi-space-lg); }
.mb-xl  { margin-bottom: var(--lhi-space-xl); }
.mb-2xl { margin-bottom: var(--lhi-space-2xl); }

/* CLAUDE: Margin-Inline (horizontal) Utilities */
.mx-auto { margin-inline: auto; }
.mx-0    { margin-inline: 0; }

/* CLAUDE: Padding-Block (vertical) Utilities */
.py-0   { padding-block: 0; }
.py-xs  { padding-block: var(--lhi-space-xs); }
.py-sm  { padding-block: var(--lhi-space-sm); }
.py-md  { padding-block: var(--lhi-space-md); }
.py-lg  { padding-block: var(--lhi-space-lg); }
.py-xl  { padding-block: var(--lhi-space-xl); }
.py-2xl { padding-block: var(--lhi-space-2xl); }

/* CLAUDE: Padding-Inline (horizontal) Utilities */
.px-0   { padding-inline: 0; }
.px-xs  { padding-inline: var(--lhi-space-xs); }
.px-sm  { padding-inline: var(--lhi-space-sm); }
.px-md  { padding-inline: var(--lhi-space-md); }
.px-lg  { padding-inline: var(--lhi-space-lg); }
.px-xl  { padding-inline: var(--lhi-space-xl); }

/* CLAUDE: All-Sides Padding */
.p-0    { padding: 0; }
.p-xs   { padding: var(--lhi-space-xs); }
.p-sm   { padding: var(--lhi-space-sm); }
.p-md   { padding: var(--lhi-space-md); }
.p-lg   { padding: var(--lhi-space-lg); }
.p-xl   { padding: var(--lhi-space-xl); }

/* CLAUDE: Flexbox Utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }

/* CLAUDE: Gap Utilities */
.gap-xs  { gap: var(--lhi-space-xs); }
.gap-sm  { gap: var(--lhi-space-sm); }
.gap-md  { gap: var(--lhi-space-md); }
.gap-lg  { gap: var(--lhi-space-lg); }
.gap-xl  { gap: var(--lhi-space-xl); }

/* CLAUDE: Kombinierte Flex-Center Utility */
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* CLAUDE: Width Utilities */
.w-full  { width: 100%; }
.w-auto  { width: auto; }

/* CLAUDE: Max-Width Utilities */
.max-w-prose { max-width: var(--lhi-content-size); }
.max-w-wide  { max-width: var(--lhi-content-wide); }
.max-w-full  { max-width: var(--lhi-content-full); }
.max-w-none  { max-width: none; }

/* ======================================================================
   CLAUDE: 6) GUTENBERG BLOCK SUPPORT
   ====================================================================== */

/* CLAUDE: Site-Main Spacing */
.site-main {
    padding-block: var(--lhi-space-xl);
}

/* CLAUDE: Article für Pages */
.site-main article {
    max-width: var(--lhi-content-size);
    margin-left: auto;
    margin-right: auto;
    padding-inline: var(--lhi-container-padding);
}

/* CLAUDE: Wide-Align Blöcke */
.site-main .alignwide {
    max-width: var(--lhi-content-wide);
    margin-left: auto;
    margin-right: auto;
    width: calc(100% + 2 * var(--lhi-container-padding));
    margin-left: calc(-1 * var(--lhi-container-padding));
}

/* CLAUDE: Full-Align Blöcke */
.site-main .alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* CLAUDE: Gutenberg Block-Abstände */
/* CLAUDE: Nur für Blöcke die NICHT full-width sind */
.site-main .wp-block-group:not(.alignfull),
.site-main .wp-block-cover:not(.alignfull),
.site-main .wp-block-columns:not(.alignfull),
.site-main .wp-block-image:not(.alignfull) {
    margin-top: var(--lhi-space-lg);
    margin-bottom: var(--lhi-space-lg);
}

/* CLAUDE: Full-Width Blöcke - kein Margin für nahtlose Übergänge */
/* CLAUDE: Die Blöcke haben eigenes Padding für interne Abstände */
.site-main article .alignfull {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* CLAUDE: Erster Block ohne oberen Abstand */
.site-main article > *:first-child {
    margin-top: 0;
}

/* CLAUDE: Letzter Block ohne unteren Abstand */
.site-main article > *:last-child {
    margin-bottom: 0;
}

/* ======================================================================
   CLAUDE: FIX - NAHTLOSER ÜBERGANG ZUM FOOTER
   CLAUDE: Wenn der letzte Block alignfull ist, wird das untere site-main
   CLAUDE: Padding entfernt, damit der Block direkt an den Footer anschließt
   ====================================================================== */

/* CLAUDE: Letzter alignfull Block - negatives Margin gleicht site-main padding aus */
/* CLAUDE: Dadurch schließt der farbige CTA-Block direkt an den Footer an */
/* CLAUDE: Berechnung: negatives Margin = site-main padding-block-end */
.site-main > article > .alignfull:last-child {
    margin-bottom: calc(-1 * var(--lhi-space-xl)) !important;
}

/* CLAUDE: Responsive Anpassung für Mobile */
/* CLAUDE: Auf Mobile ist site-main padding-block kleiner (--lhi-space-lg) */
@media (max-width: 767px) {
    .site-main > article > .alignfull:last-child {
        margin-bottom: calc(-1 * var(--lhi-space-lg)) !important;
    }
}

/* CLAUDE: Columns Block - Responsive Grid */
.wp-block-columns {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lhi-grid-gutter);
}

.wp-block-column {
    flex: 1;
    min-width: 280px;
}

/* ======================================================================
   CLAUDE: COLUMNS VERTIKALE ZENTRIERUNG
   CLAUDE: Für Text-Bild-Kombinationen in Sections mit Hintergrund
   CLAUDE: Verhindert "hängenden" Text wenn Bild größer ist
   ====================================================================== */

/* CLAUDE: Columns in Sections mit Hintergrund - vertikal zentrieren */
/* CLAUDE: Gilt für alle Columns innerhalb von Group-Blocks mit Hintergrund */
/* CLAUDE: Zum Deaktivieren: Klasse 'are-vertically-aligned-top' im Editor setzen */
/* CLAUDE: !important nötig wegen WordPress inline-Styles die später laden */
.wp-block-group.has-background .wp-block-columns:not(.are-vertically-aligned-top):not(.are-vertically-aligned-bottom) {
    align-items: center !important;
}

/* CLAUDE: Spezifische Klasse für vertikale Zentrierung */
/* CLAUDE: Kann im Editor über "Vertikale Ausrichtung" gesetzt werden */
.wp-block-columns.is-vertically-aligned-center {
    align-items: center !important;
}

/* CLAUDE: Bilder in zentrierten Columns - max-height begrenzen */
/* CLAUDE: Verhindert übermäßig große Bilder die Layout sprengen */
.wp-block-group.has-background .wp-block-columns .wp-block-image img {
    max-height: 500px;
    width: auto;
    margin-left: auto;
    margin-right: auto;
}

/* CLAUDE: Group Block mit Hintergrund */
.wp-block-group.has-background {
    padding: var(--lhi-space-lg);
}

/* CLAUDE: Cover Block */
.wp-block-cover {
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* CLAUDE: Cover mit Hero-Style */
.wp-block-cover.is-style-lhi-hero {
    min-height: 60vh;
}

/* CLAUDE: Buttons Block */
.wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lhi-space-sm);
}

/* CLAUDE: Button Styles */
.wp-block-button__link {
    display: inline-block;
    padding: var(--lhi-btn-padding-y) var(--lhi-btn-padding-x);
    background-color: var(--lhi-color-gold);
    color: var(--lhi-color-text);
    border-radius: var(--lhi-radius-sm);
    font-family: var(--lhi-font-sans);
    font-weight: 600;
    text-decoration: none;
    transition: all var(--lhi-transition-fast);
}

.wp-block-button__link:hover,
.wp-block-button__link:focus {
    background-color: var(--lhi-color-secondary);
    color: var(--lhi-color-white);
    text-decoration: none;
}

/* CLAUDE: Button Outline Style */
.is-style-outline .wp-block-button__link {
    background-color: transparent;
    color: var(--lhi-color-text);
    border: 2px solid var(--lhi-color-text);
}

.is-style-outline .wp-block-button__link:hover,
.is-style-outline .wp-block-button__link:focus {
    background-color: var(--lhi-color-text);
    color: var(--lhi-color-white);
}

/* CLAUDE: Card Style für Group Block */
.is-style-card,
.wp-block-group.is-style-card {
    background-color: var(--lhi-color-white);
    border: 1px solid var(--lhi-color-border);
    border-radius: var(--lhi-radius-md);
    padding: var(--lhi-space-lg);
}

/* ======================================================================
   CLAUDE: 7) VISIBILITY UTILITIES
   ====================================================================== */

/* CLAUDE: Display Utilities */
.block        { display: block; }
.inline-block { display: inline-block; }
.inline       { display: inline; }
.hidden       { display: none; }

/* CLAUDE: Hide auf Mobile */
@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
}

/* CLAUDE: Hide auf Desktop */
@media (min-width: 1024px) {
    .hide-desktop {
        display: none !important;
    }
}

/* CLAUDE: Show only auf bestimmten Breakpoints */
.show-mobile  { display: none; }
.show-desktop { display: none; }

@media (max-width: 767px) {
    .show-mobile {
        display: block !important;
    }
}

@media (min-width: 1024px) {
    .show-desktop {
        display: block !important;
    }
}

/* ======================================================================
   CLAUDE: 8) RESPONSIVE ADJUSTMENTS
   ====================================================================== */

/* CLAUDE: Section Padding auf Mobile reduzieren */
@media (max-width: 767px) {
    .section,
    .section-lg,
    .section-hero {
        padding-block: clamp(2rem, 6vw, 4rem);
    }

    .section-tight {
        padding-block: var(--lhi-space-md);
    }

    /* CLAUDE: Site-Main weniger Padding */
    .site-main {
        padding-block: var(--lhi-space-lg);
    }

    /* CLAUDE: Wide-Align auf Mobile = volle Breite */
    .site-main .alignwide {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }

    /* ======================================================================
       CLAUDE: MOBILE PADDING FÜR ALIGNWIDE BLÖCKE (FIX 2026-01-16)
       CLAUDE: Problem: Text-Content geht bis zum Bildschirmrand ohne Abstand
       CLAUDE: Lösung: padding-inline für wp-block-group.alignwide hinzufügen
       CLAUDE: Gilt für alle Text-Gruppen, nicht für Bilder/Cover/Media
       ====================================================================== */

    /* CLAUDE: Alignwide Groups bekommen seitliches Padding auf Mobile */
    /* CLAUDE: --lhi-container-padding = clamp(1rem, 3vw, 2rem) ≈ 16px auf Mobile */
    /* CLAUDE: Stellt sicher dass Text nicht am Bildschirmrand klebt */
    .site-main .wp-block-group.alignwide {
        padding-inline: var(--lhi-container-padding);
    }

    /* CLAUDE: Innere Elemente in alignwide Groups - kein zusätzliches Margin */
    /* CLAUDE: Verhindert doppelte Abstände durch Parent-Padding */
    .site-main .wp-block-group.alignwide > * {
        margin-left: 0;
        margin-right: 0;
    }

    /* CLAUDE: Headlines in alignwide - Textumbruch-Optimierung */
    /* CLAUDE: hyphens: auto für automatische Silbentrennung (benötigt lang="de") */
    /* CLAUDE: word-break: break-word als Fallback für lange Wörter */
    .site-main .wp-block-group.alignwide h1,
    .site-main .wp-block-group.alignwide h2,
    .site-main .wp-block-group.alignwide h3 {
        hyphens: auto;
        -webkit-hyphens: auto;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* CLAUDE: Listen in alignwide - Padding-Left für Bullets/Checkmarks */
    /* CLAUDE: 1.5rem = 24px - genug Platz für Standard-Bullets oder Check-Icons */
    /* CLAUDE: !important überschreibt inline-Style (padding-left:0) aus Block Pattern */
    .site-main .wp-block-group.alignwide ul,
    .site-main .wp-block-group.alignwide ol {
        padding-left: 1.5rem !important;
    }

    /* CLAUDE: Columns untereinander auf Mobile */
    .wp-block-column {
        flex-basis: 100%;
    }
}

/* CLAUDE: Container auf sehr schmalen Displays (< 375px) */
@media (max-width: 374px) {
    .container,
    .container-wide,
    .container-full {
        padding-inline: 1rem;
    }
}

/* ======================================================================
   CLAUDE: 9) COVER BLOCK ACCESSIBILITY FIXES
   WCAG 2.1 AA konforme Textlesbarkeit sicherstellen
   ====================================================================== */

/* CLAUDE: Cover-Block Overlay sicherstellen */
/* CLAUDE: Das Overlay muss genug Kontrast für weiße Texte bieten */
.wp-block-cover {
    position: relative;
}

/* CLAUDE: Cover-Background Overlay stärken wenn nötig */
/* CLAUDE: 70% Opacity bei Dark Umber ergibt ~7:1 Kontrast für weiße Texte */
.wp-block-cover.has-dark-umber-background-color .wp-block-cover__background,
.wp-block-cover .wp-block-cover__background.has-dark-umber-background-color {
    opacity: 0.75 !important;
}

/* CLAUDE: Inner-Container über Overlay positionieren */
.wp-block-cover__inner-container {
    position: relative;
    z-index: 2;
}

/* CLAUDE: Text-Shadow für bessere Lesbarkeit auf Bildern */
/* CLAUDE: Fallback falls Overlay nicht korrekt rendert */
.wp-block-cover h1,
.wp-block-cover h2,
.wp-block-cover p {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* CLAUDE: Weiße Texte im Cover-Block garantieren */
.wp-block-cover .has-white-color {
    color: var(--lhi-color-white) !important;
}

/* CLAUDE: Marble White Texte im Cover-Block garantieren */
.wp-block-cover .has-marble-white-color {
    color: var(--lhi-color-bg) !important;
}

/* CLAUDE: Outline-Buttons im Cover-Block - Border sichtbar machen */
.wp-block-cover .is-style-outline .wp-block-button__link {
    border-color: var(--lhi-color-white) !important;
    color: var(--lhi-color-white) !important;
}

.wp-block-cover .is-style-outline .wp-block-button__link:hover,
.wp-block-cover .is-style-outline .wp-block-button__link:focus {
    background-color: var(--lhi-color-white) !important;
    color: var(--lhi-color-text) !important;
}

/* ======================================================================
   CLAUDE: 10) HERO-SPEZIFISCHE ANPASSUNGEN
   CLAUDE: Fixes für Hero-Bild-Darstellung und Abstände
   ====================================================================== */

/* CLAUDE: Full-Width Blöcke am Seitenanfang - negatives Margin für Header-Anschluss */
/* CLAUDE: Entfernt Padding/Margin für nahtlosen Header-Hero-Übergang */
/* CLAUDE: Berechnung: negatives Margin gleicht site-main padding-block aus */
/* CLAUDE: !important überschreibt die allgemeine .alignfull margin:0 Regel */
.site-main > article > .alignfull:first-child,
.site-main > .alignfull:first-child {
    margin-top: calc(-1 * var(--lhi-space-xl)) !important;
}

/* CLAUDE: Responsive Anpassung für Mobile */
/* CLAUDE: Auf Mobile ist site-main padding-block kleiner (--lhi-space-lg) */
@media (max-width: 767px) {
    .site-main > article > .alignfull:first-child,
    .site-main > .alignfull:first-child {
        margin-top: calc(-1 * var(--lhi-space-lg)) !important;
    }
}

/* CLAUDE: Cover-Block Bild-Positionierung - Standard für innere Seiten */
/* CLAUDE: object-position: center top priorisiert oberen Bildbereich (Köpfe) */
.wp-block-cover__image-background,
.wp-block-cover > img,
.wp-block-cover video {
    object-position: center top;
}

/* ======================================================================
   CLAUDE: HERO MIT VOLLSTÄNDIG SICHTBAREM BILD (RESPONSIVE)
   CLAUDE: Zeigt das gesamte Bild ohne Beschneidung
   CLAUDE: Verwendet größere Höhen für Hochformat-Bilder
   ====================================================================== */

/* CLAUDE: Hero-Cover am Seitenanfang - Vollbild-Modus */
/* CLAUDE: object-fit: contain zeigt das gesamte Bild */
/* CLAUDE: Hintergrundfarbe füllt leere Bereiche */
.site-main > article > .alignfull:first-child.wp-block-cover .wp-block-cover__image-background,
.site-main > article > .alignfull:first-child .wp-block-cover .wp-block-cover__image-background {
    object-fit: contain !important;
    object-position: center center !important;
}

/* CLAUDE: Hero-Container Hintergrund - füllt Bereiche neben dem Bild */
.site-main > article > .alignfull:first-child.wp-block-cover,
.site-main > article > .alignfull:first-child .wp-block-cover {
    background-color: var(--lhi-color-text) !important;
}

/* CLAUDE: Hero-Höhe responsive - groß genug für Hochformat-Bilder */
/* CLAUDE: Desktop: 80vh für großen visuellen Impact */
.site-main > article > .alignfull:first-child.wp-block-cover {
    min-height: 80vh !important;
    max-height: 900px !important;
    height: auto !important;
}

/* CLAUDE: Tablet - etwas kleiner aber immer noch prominent */
@media (max-width: 1023px) {
    .site-main > article > .alignfull:first-child.wp-block-cover {
        min-height: 70vh !important;
        max-height: 800px !important;
    }
}

/* CLAUDE: Mobile - Bild bekommt vollen Raum für Portrait-Darstellung */
@media (max-width: 767px) {
    .site-main > article > .alignfull:first-child.wp-block-cover {
        min-height: 85vh !important;
        max-height: none !important;
    }

    /* CLAUDE: Auf Mobile: Bild leicht nach oben verschieben für Köpfe */
    .site-main > article > .alignfull:first-child.wp-block-cover .wp-block-cover__image-background {
        object-position: center 30% !important;
    }
}

/* CLAUDE: Hero-Cover am Seitenanfang - reduzierter unterer Abstand */
/* CLAUDE: Überschreibt generischen wp-block-cover margin-bottom */
.site-main > article > .alignfull:first-child.wp-block-cover,
.site-main > article > .alignfull:first-child .wp-block-cover {
    margin-bottom: 0;
}

/* CLAUDE: Nachfolgender Block nach Full-Width Hero bekommt definierten Abstand */
/* CLAUDE: Stellt konsistenten visuellen Rhythmus sicher */
.site-main > article > .alignfull:first-child + * {
    margin-top: var(--lhi-space-xl);
}

/* CLAUDE: Responsive Abstand nach Hero auf Mobile */
@media (max-width: 767px) {
    .site-main > article > .alignfull:first-child + * {
        margin-top: var(--lhi-space-lg);
    }
}

/* ======================================================================
   CLAUDE: 11) HERO SPLIT LAYOUT
   CLAUDE: Text linksbündig (60%), Bild rechtsbündig (40%)
   CLAUDE: Desktop: Split-Layout, Mobile: Bild als Hintergrund
   ====================================================================== */

/* CLAUDE: Hero Split Container - kein oberer Abstand */
/* CLAUDE: margin-bottom: 0 entfernt den Abstand zur nachfolgenden Sektion */
.lhi-hero-split {
    margin-top: calc(-1 * var(--lhi-space-xl)) !important;
    margin-bottom: 0 !important;
    position: relative;
    overflow: hidden;
}

/* CLAUDE: Responsive Margin auf Mobile */
@media (max-width: 767px) {
    .lhi-hero-split {
        margin-top: calc(-1 * var(--lhi-space-lg)) !important;
    }
}

/* CLAUDE: Nachfolgendes Full-Width Element nach Hero-Split - kein oberer Abstand */
/* CLAUDE: Sorgt für nahtlosen Übergang zwischen Hero und nächster Sektion */
.lhi-hero-split + .alignfull,
.lhi-hero-split + .wp-block-group.alignfull {
    margin-top: 0 !important;
}

/* CLAUDE: Columns Container - CSS GRID für gleiche Höhen */
/* CLAUDE: grid-template-columns: 60% 40% entspricht dem gewünschten Verhältnis */
/* CLAUDE: Grid sorgt automatisch dafür, dass beide Spalten gleiche Höhe haben */
/* CLAUDE: Im Gegensatz zu Flexbox dehnt Grid beide Spalten auf die größte Höhe */
.lhi-hero-split__columns {
    min-height: 80vh;
    max-height: 900px;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: 60% 40%;
    align-items: stretch;
}

/* CLAUDE: Beide Spalten im Hero-Split - Grid-Items füllen automatisch die Höhe */
/* CLAUDE: min-height: 0 verhindert Content-Overflow-Probleme in Grid */
.lhi-hero-split__columns > .wp-block-column {
    min-height: 0;
}

/* CLAUDE: Content-Spalte - Gradient-Hintergrund von links */
/* CLAUDE: Text horizontal und vertikal zentriert im linken Bereich */
.lhi-hero-split__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 2;
    background: linear-gradient(
        90deg,
        var(--lhi-color-text) 0%,
        var(--lhi-color-text) 70%,
        rgba(59, 42, 26, 0.8) 100%
    ) !important;
}

/* CLAUDE: Innerer Content-Group zentriert */
.lhi-hero-split__content > .wp-block-group {
    width: 100%;
    max-width: 600px;
}

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

/* CLAUDE: Trust-Badges zentriert */
.lhi-hero-split__content .has-white-background-color {
    justify-content: center !important;
}

/* CLAUDE: Bild-Spalte - VOLLE HÖHE von oben bis unten */
/* CLAUDE: align-self: stretch + height: 100% garantiert volle Spalten-Höhe */
/* CLAUDE: min-height: inherit übernimmt die Höhe vom Columns-Container (80vh) */
/* CLAUDE: flex: 1 sorgt dafür, dass die Spalte den verfügbaren Platz füllt */
.lhi-hero-split__image {
    display: flex;
    align-items: stretch;
    align-self: stretch;
    padding: 0 !important;
    position: relative;
    height: 100% !important;
    min-height: inherit !important;
    flex: 1;
}

/* CLAUDE: Bild-Container (figure) - volle Höhe, keine Beschränkung */
/* CLAUDE: min-height: 100% garantiert Ausfüllen der Spalte */
/* CLAUDE: max-height: none entfernt jegliche Höhenbegrenzung */
.lhi-hero-split__img,
.lhi-hero-split .wp-block-image {
    margin: 0 !important;
    height: 100% !important;
    width: 100%;
    min-height: 100%;
    max-height: none !important;
}

/* CLAUDE: Bild selbst - COVER für volle Fläche von oben bis unten */
/* CLAUDE: object-fit: cover füllt den Container vollständig aus */
/* CLAUDE: object-position: left top = Bild beginnt am linken Rand der Spalte */
/* CLAUDE: Dadurch schliesst das Bild direkt an den Text an (nahtloser Uebergang) */
/* CLAUDE: Beschnitt passiert rechts und unten, nicht links (Personen bleiben sichtbar) */
/* CLAUDE: max-height: none überschreibt die allgemeine 500px-Regel (Zeile 365) */
.lhi-hero-split__img img,
.lhi-hero-split .wp-block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    object-position: left top !important;
    max-height: none !important;
}

/* CLAUDE: Gradient-Overlay auf dem Bild (von links kommend) */
.lhi-hero-split__image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100%;
    background: linear-gradient(
        90deg,
        var(--lhi-color-text) 0%,
        transparent 100%
    );
    z-index: 1;
    pointer-events: none;
}

/* ======================================================================
   CLAUDE: HERO SPLIT - TABLET (768px - 1023px)
   ====================================================================== */

@media (max-width: 1023px) {
    /* CLAUDE: Tablet - Grid-Verhältnis anpassen (55/45 statt 60/40) */
    /* CLAUDE: Mehr Platz für Text auf kleineren Bildschirmen */
    .lhi-hero-split__columns {
        min-height: 70vh;
        max-height: 800px;
        grid-template-columns: 55% 45% !important;
    }
}

/* ======================================================================
   CLAUDE: HERO SPLIT - MOBILE (< 768px)
   CLAUDE: OPTIMIERT: Vertikales Layout - Bild OBEN, Text UNTEN
   CLAUDE: Personen sind jetzt vollständig sichtbar!
   CLAUDE: Stand: 2026-01-15
   ====================================================================== */

@media (max-width: 767px) {
    /* CLAUDE: Columns als vertikaler Stack mit column-reverse */
    /* CLAUDE: column-reverse = Bild (zweites Element) erscheint OBEN */
    /* CLAUDE: Dadurch: Bild oben sichtbar, Text darunter */
    .lhi-hero-split__columns {
        display: flex !important;
        flex-direction: column-reverse !important;
        position: relative;
        min-height: auto !important;
        max-height: none !important;
        /* CLAUDE: WICHTIG: Gap auf 0 setzen um schwarzen Strich zu vermeiden */
        /* CLAUDE: Der Default-Gap von 16px erzeugt sonst einen sichtbaren Spalt */
        gap: 0 !important;
    }

    /* CLAUDE: Bild-Spalte - OBEN, feste Höhe, Personen sichtbar */
    /* CLAUDE: 45vh = ca. 45% der Viewport-Höhe */
    /* CLAUDE: min/max begrenzen für sehr kleine/große Screens */
    .lhi-hero-split__image,
    .lhi-hero-split__media {
        position: relative !important;
        width: 100% !important;
        height: 45vh !important;
        min-height: 280px !important;
        max-height: 400px !important;
        flex-basis: auto !important;
        order: 2; /* CLAUDE: Erscheint oben durch column-reverse */
    }

    /* CLAUDE: Bild-Container - volle Höhe der Spalte */
    .lhi-hero-split__img,
    .lhi-hero-split .wp-block-image {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        margin: 0 !important;
    }

    /* CLAUDE: Bild selbst - Cover mit Fokus auf oberen Bereich (Köpfe) */
    /* CLAUDE: object-position: center 25% = Köpfe im sichtbaren Bereich */
    .lhi-hero-split__img img,
    .lhi-hero-split .wp-block-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center 25% !important;
        max-height: none !important;
    }

    /* CLAUDE: Kein Gradient-Overlay auf dem Bild */
    .lhi-hero-split__image::before,
    .lhi-hero-split__media::before {
        display: none !important;
    }

    /* CLAUDE: Dezenter Schatten-Übergang zwischen Bild und Text */
    /* CLAUDE: Erzeugt sanften visuellen Übergang */
    .lhi-hero-split__image::after,
    .lhi-hero-split__media::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 40px;
        background: linear-gradient(
            to top,
            var(--lhi-color-text) 0%,
            transparent 100%
        );
        pointer-events: none;
        z-index: 2;
    }

    /* CLAUDE: Content-Spalte - UNTEN, solider Hintergrund */
    /* CLAUDE: Kein Gradient mehr = klare Lesbarkeit */
    .lhi-hero-split__content {
        position: relative !important;
        z-index: 2;
        width: 100% !important;
        flex-basis: auto !important;
        min-height: auto !important;
        background: var(--lhi-color-text) !important;
        padding: var(--lhi-space-lg) var(--lhi-space-md) !important;
        order: 1; /* CLAUDE: Erscheint unten durch column-reverse */
    }

    /* CLAUDE: Text zentriert auf Mobile für bessere Optik */
    .lhi-hero-split__content .wp-block-group {
        text-align: center;
        max-width: 100%;
    }

    /* CLAUDE: Headline - etwas kleiner auf Mobile */
    .lhi-hero-split__content h1 {
        font-size: clamp(1.5rem, 5vw, 2rem) !important;
        margin-bottom: var(--lhi-space-sm) !important;
    }

    /* CLAUDE: TEXT KÜRZEN - Nur ersten Absatz zeigen */
    /* CLAUDE: Ab dem 3. Paragraph (nach Headline + 1. Text) ausblenden */
    .lhi-hero-split__content p:nth-of-type(n+3) {
        display: none !important;
    }

    /* CLAUDE: Erster Absatz - kompakter */
    .lhi-hero-split__content p:first-of-type {
        font-size: 1rem !important;
        line-height: 1.5 !important;
        margin-bottom: var(--lhi-space-md) !important;
    }

    /* CLAUDE: BUTTONS - Vertikal gestapelt (Best Practice) */
    /* CLAUDE: Primärer Button unten = Daumenzone = bessere Erreichbarkeit */
    .lhi-hero-split__content .wp-block-buttons {
        flex-direction: column-reverse !important;
        align-items: center !important;
        width: 100% !important;
        gap: var(--lhi-space-sm) !important;
        margin-top: var(--lhi-space-md) !important;
    }

    /* CLAUDE: Buttons volle Breite für bessere Touch-Targets */
    /* CLAUDE: Min-Höhe 44px = Apple HIG Empfehlung */
    .lhi-hero-split__content .wp-block-button {
        width: 100% !important;
        max-width: 300px !important;
    }

    .lhi-hero-split__content .wp-block-button__link {
        width: 100% !important;
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* CLAUDE: Trust-Badges - kompakt horizontal */
    .lhi-hero-split__content .has-white-background-color {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: var(--lhi-space-xs) !important;
        padding: var(--lhi-space-sm) !important;
        margin-top: var(--lhi-space-md) !important;
        border-radius: var(--lhi-radius-md);
    }

    /* CLAUDE: Trust-Badge Text kleiner */
    .lhi-hero-split__content .has-white-background-color p {
        font-size: 0.8rem !important;
        display: inline !important;
    }

    /* CLAUDE: Trennpunkte zwischen Badges anzeigen */
    .lhi-hero-split__content .has-graphite-color {
        display: inline !important;
        font-size: 0.8rem !important;
    }

    /* CLAUDE: lhi-trust-badges Klasse - für Über-Uns Seite */
    .lhi-hero-split__content .lhi-trust-badges {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: var(--lhi-space-sm) !important;
    }

    .lhi-hero-split__content .lhi-trust-badge {
        font-size: 0.85rem !important;
    }
}

/* ======================================================================
   CLAUDE: HERO SPLIT - LIGHT VARIANTE (für Bewertungsseite)
   CLAUDE: Heller Hintergrund statt Dark Umber
   CLAUDE: Text in Dark Umber, kein Gradient-Overlay nötig
   ====================================================================== */

/* CLAUDE: Light-Variante Content-Spalte */
/* CLAUDE: Überschreibt den dunklen Gradient mit hellem Hintergrund */
.lhi-hero-split__content--light {
    background: var(--lhi-color-bg) !important;
    text-align: left !important;
}

/* CLAUDE: Innerer Content-Group linksbündig */
.lhi-hero-split__content--light > .wp-block-group {
    text-align: left;
}

/* CLAUDE: Buttons linksbündig in Light-Variante */
.lhi-hero-split__content--light .wp-block-buttons {
    justify-content: flex-start !important;
}

/* CLAUDE: Bewertungs-Hero spezifisch - Bild-Spalte */
/* CLAUDE: Kein Gradient-Overlay für helle Variante */
.lhi-hero-split--bewertung .lhi-hero-split__image::before {
    display: none;
}

/* CLAUDE: Bewertungs-Hero - Bild object-position */
/* CLAUDE: Zentriert das Bild besser für Bewertungskontext */
.lhi-hero-split--bewertung .lhi-hero-split__img img,
.lhi-hero-split--bewertung .wp-block-image img {
    object-position: center center !important;
}

/* CLAUDE: Tablet-Anpassungen für Light-Variante */
@media (max-width: 1023px) {
    .lhi-hero-split__content--light {
        background: var(--lhi-color-bg) !important;
    }
}

/* CLAUDE: Mobile-Anpassungen für Light-Variante */
@media (max-width: 767px) {
    /* CLAUDE: Light-Content bekommt semi-transparenten Overlay */
    .lhi-hero-split__content--light {
        background: rgba(245, 243, 239, 0.92) !important;
    }

    /* CLAUDE: Text linksbündig auf Mobile */
    .lhi-hero-split__content--light .wp-block-group {
        text-align: left;
    }
}

/* ======================================================================
   CLAUDE: 12) TRUST-BADGES BLOCK-STYLE
   CLAUDE: Automatische Trennzeichen via CSS ::after
   CLAUDE: Anwender muss nur Badge-Texte pflegen
   ====================================================================== */

/* CLAUDE: Trust-Badges Container - Flex-Layout */
/* CLAUDE: Wird via Block-Style 'lhi-trust-badges' angewendet */
.is-style-lhi-trust-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    align-items: center !important;
}

/* CLAUDE: Paragraphen in Trust-Badges - kein Margin */
.is-style-lhi-trust-badges > p {
    margin: 0 !important;
}

/* CLAUDE: Automatische Trennzeichen nach jedem Badge ausser letztem */
/* CLAUDE: Nutzt CSS ::after Pseudo-Element */
/* CLAUDE: Anwender sieht im Editor die Trennzeichen automatisch */
.is-style-lhi-trust-badges > p:not(:last-child)::after {
    content: ' \00B7 ';
    color: var(--lhi-color-graphite);
    margin: 0 0.5rem;
}

/* CLAUDE: Trust-Badges auf Mobile - untereinander stapeln */
@media (max-width: 767px) {
    .is-style-lhi-trust-badges {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: var(--lhi-space-xs) !important;
    }

    /* CLAUDE: Trennzeichen auf Mobile ausblenden */
    .is-style-lhi-trust-badges > p:not(:last-child)::after {
        display: none;
    }
}

/* ======================================================================
   CLAUDE: 13) USP-BOXEN RESPONSIVE FIX
   CLAUDE: Behebt Overflow-Probleme der USP-Spalten (STARK, FOKUSSIERT, ZIELSTREBIG)
   CLAUDE: Validiert mit Playwright-Tests für alle Viewports
   ====================================================================== */

/* CLAUDE: SCHRITT 1 - Flex-Wrap aktivieren für USP-Columns */
/* CLAUDE: Ermöglicht Spalten bei Platzmangel umzubrechen */
/* CLAUDE: !important überschreibt WordPress inline-Styles */
.has-porous-stone-background-color .wp-block-columns {
    flex-wrap: wrap !important;
}

/* CLAUDE: SCHRITT 2 - min-width entfernen für USP-Spalten */
/* CLAUDE: Das globale min-width: 280px (Zeile 339) verhindert Shrinking */
/* CLAUDE: Nur für USP-Section, nicht global ändern */
.has-porous-stone-background-color .wp-block-columns > .wp-block-column {
    min-width: 0 !important;
}

/* CLAUDE: DESKTOP (>= 1280px): 3 gleichbreite Spalten */
/* CLAUDE: 1280px ist Standard Desktop-Breakpoint */
/* CLAUDE: flex: 1 1 0 = gleiche Breite, können wachsen und schrumpfen */
@media (min-width: 1280px) {
    .has-porous-stone-background-color .wp-block-columns > .wp-block-column {
        flex: 1 1 0 !important;
    }
}

/* CLAUDE: TABLET/LAPTOP (768px - 1279px): 2+1 Layout */
/* CLAUDE: 2 Spalten nebeneinander, 3. zentriert darunter */
/* CLAUDE: Optisch ansprechender als gequetschte 3 Spalten */
@media (min-width: 768px) and (max-width: 1279px) {
    /* CLAUDE: Container zentriert für symmetrisches Layout */
    .has-porous-stone-background-color .wp-block-columns {
        justify-content: center !important;
    }

    /* CLAUDE: Spalten auf 50% minus Gap begrenzen */
    /* CLAUDE: max-width: 380px verhindert zu breite Boxen */
    .has-porous-stone-background-color .wp-block-columns > .wp-block-column {
        flex: 0 1 calc(50% - 1rem) !important;
        max-width: 380px !important;
    }

    /* CLAUDE: 3. Box auf neue Zeile mit Abstand */
    /* CLAUDE: margin-top: 1.5rem für visuellen Rhythmus */
    .has-porous-stone-background-color .wp-block-columns > .wp-block-column:nth-child(3) {
        flex-basis: calc(50% - 1rem) !important;
        margin-top: 1.5rem !important;
    }
}

/* CLAUDE: MOBILE (< 768px): 1 Spalte gestapelt */
@media (max-width: 767px) {
    /* CLAUDE: KRITISCHER FIX: alignwide innerhalb alignfull */
    /* CLAUDE: Überschreibt Zeile 499-504 die 100vw + negative Margins setzt */
    /* CLAUDE: Verhindert Overflow durch Parent-Padding */
    .alignfull .wp-block-columns.alignwide {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* CLAUDE: USP-Columns: Vertikal stapeln */
    /* CLAUDE: flex-direction: column für untereinander */
    /* CLAUDE: align-items: center für horizontale Zentrierung */
    .has-porous-stone-background-color .wp-block-columns {
        flex-direction: column !important;
        gap: 1.5rem !important;
        align-items: center !important;
    }

    /* CLAUDE: USP-Spalten: Volle Breite */
    /* CLAUDE: width: 100% füllt den verfügbaren Container */
    .has-porous-stone-background-color .wp-block-columns > .wp-block-column {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ======================================================================
   CLAUDE: 14) VIDEO SHOWCASE CONTAINER
   CLAUDE: Responsive 16:9 Video-Container für YouTube Embeds
   CLAUDE: Verwendet für das Video Showcase Pattern (Virtuelle Immobilienpräsentation)
   ====================================================================== */

/* CLAUDE: Video-Container - 16:9 Aspect Ratio via Padding-Hack */
/* CLAUDE: padding-bottom: 56.25% = 9/16 * 100 */
/* CLAUDE: Sichert festes Seitenverhältnis unabhängig von der Breite */
.lhi-video-container {
    /* CLAUDE: Position relativ für absolute Positionierung des iframes */
    position: relative;
    /* CLAUDE: Volle Breite des Parent-Containers */
    width: 100%;
    /* CLAUDE: 56.25% = 16:9 Aspect Ratio (9 / 16 = 0.5625) */
    padding-bottom: 56.25%;
    /* CLAUDE: Höhe 0 weil padding-bottom das Verhältnis steuert */
    height: 0;
    /* CLAUDE: Versteckt Überlauf wenn iframe größer */
    overflow: hidden;
    /* CLAUDE: Abgerundete Ecken für Premium-Look */
    border-radius: var(--lhi-radius-md);
    /* CLAUDE: Schatten für Tiefe und Hervorhebung */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    /* CLAUDE: Hintergrund während Video lädt */
    background-color: var(--lhi-color-text);
}

/* CLAUDE: iframe innerhalb des Video-Containers */
/* CLAUDE: Absolut positioniert um den Container vollständig zu füllen */
.lhi-video-container iframe {
    /* CLAUDE: Absolute Positionierung relativ zum Container */
    position: absolute;
    /* CLAUDE: Oben links ausrichten */
    top: 0;
    left: 0;
    /* CLAUDE: Volle Breite und Höhe des Containers */
    width: 100%;
    height: 100%;
    /* CLAUDE: Keinen Rahmen anzeigen */
    border: 0;
}

/* CLAUDE: Video-Section Wrapper - begrenzt die Breite des Videos */
/* CLAUDE: Zentriert das Video und gibt ihm eine maximale Breite */
.lhi-video-wrapper {
    /* CLAUDE: Maximale Breite für angenehme Betrachtung */
    max-width: 900px;
    /* CLAUDE: Zentriert horizontal */
    margin-left: auto;
    margin-right: auto;
    /* CLAUDE: Volle Breite bis max-width erreicht */
    width: 100%;
}

/* CLAUDE: Tablet (768px - 1023px) - Video nimmt mehr Breite ein */
@media (max-width: 1023px) {
    .lhi-video-wrapper {
        /* CLAUDE: Auf Tablet volle Container-Breite */
        max-width: 100%;
    }
}

/* CLAUDE: Mobile (< 768px) - Video volle Breite, kein Border-Radius */
@media (max-width: 767px) {
    .lhi-video-container {
        /* CLAUDE: Kein Border-Radius auf Mobile für Edge-to-Edge Look */
        border-radius: 0;
        /* CLAUDE: Negative Margins um Container-Padding auszugleichen */
        /* CLAUDE: Dadurch geht das Video bis zum Bildschirmrand */
        margin-left: calc(-1 * var(--lhi-container-padding));
        margin-right: calc(-1 * var(--lhi-container-padding));
        /* CLAUDE: Breite inklusive der negativen Margins */
        width: calc(100% + 2 * var(--lhi-container-padding));
    }
}

/* ======================================================================
   CLAUDE: 14b) VIDEO SHOWCASE HEADLINE - RESPONSIVE TYPOGRAPHY
   CLAUDE: Behebt Textabschneidung bei langen Wörtern wie "Immobilienpräsentation"
   CLAUDE: Getestet auf iPhone 12 (390px), iPhone SE (375px), etc.
   ====================================================================== */

/* CLAUDE: Video-Section Headline - Basis-Styles */
/* CLAUDE: hyphens: auto ermöglicht automatische Silbentrennung (mit lang="de") */
/* CLAUDE: word-break: break-word als Fallback wenn hyphens nicht unterstützt */
.lhi-video-headline {
    /* CLAUDE: Automatische Silbentrennung für deutsche Sprache */
    /* CLAUDE: Benötigt lang="de" im HTML (Standard in WordPress DE) */
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    /* CLAUDE: Fallback für Browser ohne hyphens-Support */
    word-break: break-word;
    overflow-wrap: break-word;
}

/* CLAUDE: Tablet (768px - 1023px) - leicht reduzierte Schriftgröße */
@media (max-width: 1023px) {
    .lhi-video-headline {
        /* CLAUDE: clamp() mit niedrigerem Maximum für Tablet */
        /* CLAUDE: 1.75rem min, 3.5vw fluid, 2rem max */
        font-size: clamp(1.75rem, 3.5vw, 2rem) !important;
    }
}

/* CLAUDE: Mobile (< 768px) - deutlich kleinere Schrift */
@media (max-width: 767px) {
    .lhi-video-headline {
        /* CLAUDE: 1.5rem min, 5vw fluid, 1.75rem max */
        /* CLAUDE: Bei 390px (iPhone 12): 5vw = 19.5px ≈ 1.22rem → 1.5rem greift */
        /* CLAUDE: 1.5rem = 24px → passt auf ca. 14 Zeichen pro Zeile */
        /* CLAUDE: "Immobilienpräsentation" (23 Zeichen) bricht in 2 Zeilen */
        font-size: clamp(1.5rem, 5vw, 1.75rem) !important;
        /* CLAUDE: Etwas mehr Zeilenhöhe für umbrochene Headlines */
        line-height: 1.3 !important;
    }
}

/* CLAUDE: Sehr kleine Screens (< 400px) - iPhone SE, kleine Android */
@media (max-width: 399px) {
    .lhi-video-headline {
        /* CLAUDE: 1.25rem min, 6vw fluid, 1.5rem max */
        /* CLAUDE: Bei 375px (iPhone SE): 6vw = 22.5px ≈ 1.4rem → 1.4rem */
        /* CLAUDE: Garantiert Lesbarkeit auch auf kleinstem Screen */
        font-size: clamp(1.25rem, 6vw, 1.5rem) !important;
    }
}

/* CLAUDE: Subline unter der Video-Headline - responsive Anpassung */
@media (max-width: 767px) {
    .lhi-video-subline {
        /* CLAUDE: Kleinere Schrift für bessere Proportionen */
        font-size: 1rem !important;
        /* CLAUDE: Reduzierter Abstand auf Mobile */
        margin-bottom: var(--lhi-space-md) !important;
    }
}

/* ======================================================================
   CLAUDE: 15) VERKAUFSSEITE ALIGNMENT FIXES
   CLAUDE: Zentriert 4-Spalten-Layouts, Statistiken und behebt Offset-Probleme
   CLAUDE: Identifiziert durch Playwright E2E Tests am 2025-12-16
   ====================================================================== */

/* CLAUDE: Inner-Container max-width für bessere Zentrierung */
/* CLAUDE: Begrenzt Content-Breite und zentriert automatisch */
/* CLAUDE: Gilt für alle Full-Width Sektionen */
.wp-block-group.alignfull > .wp-block-group__inner-container {
    /* CLAUDE: Maximale Breite entspricht --lhi-content-wide (1200px) */
    max-width: var(--lhi-content-wide);
    /* CLAUDE: margin-inline: auto zentriert den Container horizontal */
    margin-inline: auto;
    /* CLAUDE: Seitliches Padding für Abstand zum Rand */
    padding-inline: var(--lhi-container-padding);
}

/* CLAUDE: 4-Spalten-Layouts horizontal zentrieren */
/* CLAUDE: justify-content: center verteilt Spalten um die Mitte */
/* CLAUDE: Behebt den -352px Offset der Columns */
/* CLAUDE: Gilt für alignfull UND alignwide Columns */
.wp-block-group.alignfull .wp-block-columns,
.wp-block-columns.alignwide {
    /* CLAUDE: Zentriert die Flex-Items (Spalten) horizontal */
    justify-content: center !important;
}

/* CLAUDE: STATISTIK-SEKTION SPEZIFISCH (150+, Ø 12, 98%, 0 €) */
/* CLAUDE: Die Statistiken sind in einem .wp-block-group.alignwide */
/* CLAUDE: mit .wp-block-columns.alignwide (nicht alignfull!) */
.wp-block-group.alignwide .wp-block-columns.alignwide {
    /* CLAUDE: Columns horizontal zentrieren */
    justify-content: center !important;
}

/* CLAUDE: Statistik-Spalten Text zentrieren */
/* CLAUDE: Überschreibt text-align: start aus WordPress */
.wp-block-columns.alignwide > .wp-block-column {
    /* CLAUDE: Text in jeder Spalte zentrieren */
    text-align: center !important;
}

/* ======================================================================
   CLAUDE: ALIGNWIDE COLUMNS ZENTRIERUNG FIX
   CLAUDE: Behebt asymmetrische Margins bei .wp-block-columns.alignwide
   CLAUDE: innerhalb von .alignfull Sektionen
   CLAUDE: Problem: layout.css Zeile 287-293 setzt negative margin-left
   ====================================================================== */

/* CLAUDE: Columns.alignwide innerhalb alignfull - korrekte Zentrierung */
/* CLAUDE: Überschreibt die negative margin-left Regel */
/* CLAUDE: Margin: auto / auto statt -32px / 672px */
.wp-block-group.alignfull .wp-block-columns.alignwide {
    /* CLAUDE: Symmetrische Margins für echte Zentrierung */
    margin-left: auto !important;
    margin-right: auto !important;
    /* CLAUDE: Volle verfügbare Breite innerhalb des Containers */
    width: 100% !important;
    /* CLAUDE: Max-Width bleibt bei 1200px (--lhi-content-wide) */
    max-width: var(--lhi-content-wide) !important;
}

/* CLAUDE: Auch für Group.alignwide innerhalb alignfull */
.wp-block-group.alignfull .wp-block-group.alignwide {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: var(--lhi-content-wide) !important;
}

/* CLAUDE: Statistik-Sektion (150+, Ø 12, 98%, 0 €) */
/* CLAUDE: Text in den Spalten zentrieren */
/* CLAUDE: Betrifft Marble White Hintergrund-Sektionen */
.wp-block-group.alignfull.has-marble-white-background-color .wp-block-columns .wp-block-column {
    /* CLAUDE: Zentriert Text innerhalb jeder Spalte */
    text-align: center !important;
}

/* CLAUDE: Statistik-Zahlen (H2/H3 in Statistik-Spalten) */
/* CLAUDE: Stellt sicher dass große Zahlen zentriert sind */
.wp-block-group.alignfull.has-marble-white-background-color .wp-block-column h2,
.wp-block-group.alignfull.has-marble-white-background-color .wp-block-column h3 {
    /* CLAUDE: Text-Zentrierung für Headlines */
    text-align: center !important;
}

/* CLAUDE: Statistik-Beschreibungen (Paragraphen) */
/* CLAUDE: "Erfolgreich verkaufte Immobilien", "Wochen bis zum Verkauf", etc. */
.wp-block-group.alignfull.has-marble-white-background-color .wp-block-column p {
    /* CLAUDE: Text-Zentrierung für Beschreibungstexte */
    text-align: center !important;
}

/* CLAUDE: Referenzen-Sektion (Dark Umber Background) */
/* CLAUDE: "ERFOLGREICH VERMITTELT" Sektion mit Property-Cards */
.wp-block-group.alignfull.has-dark-umber-background-color .wp-block-columns .wp-block-column {
    /* CLAUDE: Zentriert Text in Property-Cards */
    text-align: center !important;
}

/* CLAUDE: Property-Card Headlines und Text */
.wp-block-group.alignfull.has-dark-umber-background-color .wp-block-column h3,
.wp-block-group.alignfull.has-dark-umber-background-color .wp-block-column p {
    /* CLAUDE: Konsistente Zentrierung */
    text-align: center !important;
}

/* CLAUDE: Porous Stone Background (USP-Sektion, falls vorhanden) */
/* CLAUDE: Gleiche Zentrierung wie andere Sektionen */
.wp-block-group.alignfull.has-porous-stone-background-color .wp-block-columns .wp-block-column {
    text-align: center !important;
}

/* ======================================================================
   CLAUDE: RESPONSIVE ANPASSUNGEN FÜR ALIGNMENT FIXES
   ====================================================================== */

/* CLAUDE: Tablet (768px - 1023px) */
@media (max-width: 1023px) {
    /* CLAUDE: Inner-Container volle Breite auf Tablet */
    .wp-block-group.alignfull > .wp-block-group__inner-container {
        max-width: 100%;
    }
}

/* CLAUDE: Mobile (< 768px) */
@media (max-width: 767px) {
    /* CLAUDE: Columns stapeln vertikal */
    /* CLAUDE: flex-direction: column für untereinander */
    .wp-block-group.alignfull .wp-block-columns {
        flex-direction: column !important;
        align-items: center !important;
    }

    /* CLAUDE: Einzelne Spalten volle Breite */
    .wp-block-group.alignfull .wp-block-columns > .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
        max-width: 400px !important;
    }

    /* CLAUDE: Text bleibt zentriert auf Mobile */
    .wp-block-group.alignfull .wp-block-column {
        text-align: center !important;
    }
}

/* ======================================================================
   CLAUDE: 15) BEWERTUNGS-HERO FIXES
   CLAUDE: Überschreibt die generischen Hero-Regeln für Bewertungsseite
   CLAUDE: Problem: object-fit: contain + brauner Hintergrund
   ====================================================================== */

/* CLAUDE: Bewertungs-Hero - Bild über volle Fläche (nicht contain) */
/* CLAUDE: Überschreibt Zeile 636-640 - GLEICHE Spezifizität + .lhi-hero-bewertung */
.site-main > article > .alignfull:first-child.wp-block-cover.lhi-hero-bewertung .wp-block-cover__image-background,
.site-main > article > .alignfull:first-child .wp-block-cover.lhi-hero-bewertung .wp-block-cover__image-background {
    object-fit: cover !important;
    object-position: center center !important;
}

/* CLAUDE: Kein brauner Hintergrund für Bewertungs-Hero */
/* CLAUDE: Überschreibt Zeile 642-646 - GLEICHE Spezifizität + .lhi-hero-bewertung */
.site-main > article > .alignfull:first-child.wp-block-cover.lhi-hero-bewertung,
.site-main > article > .alignfull:first-child .wp-block-cover.lhi-hero-bewertung {
    background-color: transparent !important;
}

/* CLAUDE: Bewertungs-Hero Höhe anpassen (nicht zu groß) */
.site-main > article > .alignfull:first-child.wp-block-cover.lhi-hero-bewertung {
    min-height: 550px !important;
    max-height: 700px !important;
}

@media (max-width: 767px) {
    .site-main > article > .alignfull:first-child.wp-block-cover.lhi-hero-bewertung {
        min-height: 500px !important;
        max-height: none !important;
    }
}

/* ======================================================================
   CLAUDE: 16) HERO-BADGES KOMPONENTE (Global)
   CLAUDE: Trust-Elemente im Hero-Bereich
   CLAUDE: Verwendet auf Vermietung, Bewertung, etc.
   ====================================================================== */

/* CLAUDE: Hero-Badges Container - Flex zentriert */
.lhi-hero-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* CLAUDE: Einzelnes Hero-Badge - Glasmorphismus-Effekt */
.lhi-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
}

/* CLAUDE: SVG-Icons in Hero-Badges */
.lhi-hero-badge svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* CLAUDE: Mobile - Badges vertikal stapeln */
@media (max-width: 768px) {
    .lhi-hero-badges {
        flex-direction: column;
        gap: 0.75rem;
    }

    .lhi-hero-badge {
        width: auto;
        max-width: 280px;
    }
}