/* Block: Halbbild-Teaser (Bild + Textfläche)
   Zwei Varianten, umschaltbar über das ACF-Feld „Darstellung":
   - blue  (Standard): Fläche var(--color-dark), Schrift weiß, Button weiß mit blauer Schrift
   - light (2026-08-12): Fläche var(--color-dark) mit 15% Deckkraft, Schrift var(--color-dark),
     Button gefüllt var(--color-dark) mit weißer Schrift und 1px Rahmen
   Aufteilung, Abstände und Typografie sind in beiden Varianten identisch.

   Sollwerte (User, 2026-08-07; Aufteilung korrigiert 2026-08-25):
   Aufteilung   Bild 6/12, Farbfläche 6/12 – halbe/halbe ab Desktop.
                Bis 1.41.0 stand hier 5/7 (42 % / 58 %); der Entwurf der
                Wandverblender-Seite zeigt jedoch eine saubere Hälfte, und
                der User hat das am 2026-08-25 bestätigt.
                Darunter gestapelt: Bild oben, Farbfläche darunter
   Überschrift  Literata SemiBold (600) weiß · D 34px/normal · T/M 22px/26px
   Text         Poppins 400 weiß · 16px / 1.6
   Button       .btn-white (BG weiß, Schrift var(--color-dark)) – global in buttons.css, Poppins 400
   Innenabstand blaue Fläche 80px Desktop · 40px Tablet/Mobil

   Randlos, aber gedeckelt: Der Block nutzt bewusst KEIN .container-xl – bis
   2000px Fensterbreite läuft er von Kante zu Kante. Darüber greift
   --width-bleed-max (variables.css), sonst wächst die Lücke zwischen Bild und
   Text unbegrenzt: Der Text sitzt auf 550px gedeckelt mittig in seiner
   Spalte, und die wächst mit dem Fenster mit.
   `margin-inline` und nicht `margin`, weil oben/unten der Abstand aus
   section-spacing.css als margin steht – der darf nicht überschrieben werden.
   Keine clamp()-Größen – feste Stufen je Breakpoint. */

.block-split-teaser {
    background-color: var(--color-dark);
    max-width: var(--width-bleed-max);
    margin-inline: auto;
}

/* ── Bildseite ───────────────────────────────────────────── */
.split-teaser-media {
    height: 100%;
    aspect-ratio: 3 / 2;                       /* Mobile: festes Format */
}

.split-teaser-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Blaue Textfläche ────────────────────────────────────── */
.split-teaser-panel {
    padding: 40px 24px;
    height: 100%;
}

.split-teaser-headline {
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    color: var(--color-white);
    font-size: 22px;
    line-height: 26px;
    margin-top: 0;
    margin-bottom: var(--space-sm);            /* 16px */
}

.split-teaser-text {
    font-family: var(--font-body);
    font-weight: var(--fw-normal);
    font-size: var(--fs-copy-s);               /* 16px */
    line-height: 1.6;
    color: var(--color-white);
    margin-bottom: var(--space-md);            /* 32px */
}

/* Seit 2.9.0 ein <div> mit Absätzen (Editorfeld). Eine Leerzeile war vorher
   zwei <br> = eine Zeile Luft; der Absatzabstand entspricht genau dem. */
.split-teaser-text p {
    margin: 0 0 1.6em;
}

.split-teaser-text > :last-child {
    margin-bottom: 0;
}

.split-teaser-text strong,
.split-teaser-text b {
    font-weight: var(--fw-bold);
}

.split-teaser-btn {
    font-size: var(--fs-copy-xs);              /* 14px */
}

/* ── Variante „hell" (User-Vorgabe 2026-08-12) ───────────────
   Fläche var(--color-dark) mit 15% Deckkraft, Schrift var(--color-dark),
   Button gefüllt var(--color-dark) mit weißer Schrift und 1px Rahmen.
   Nur Farben – Aufteilung, Abstände und Typografie bleiben gleich. */
.block-split-teaser--light {
    /* --color-tint statt fester rgba(): Auf den Pool- und DE-RYCK-Seiten ist
       diese Fläche hellblau bzw. rosé.
       Der Vorgabewert ist seit 1.31.0 #EAECF0 – so steht es in JEDEM Entwurf
       (Vario Line, Trend Line, Mauersysteme, Beckenrandsteine gemessen).
       Vorher lief hier rgba(38, 56, 100, 0.15) = #DEE1E8, also eine Spur zu
       dunkel. */
    background-color: var(--color-tint);
}

.block-split-teaser--light .split-teaser-headline {
    color: var(--color-heading);
}

.block-split-teaser--light .split-teaser-text {
    color: var(--color-dark);
}

.block-split-teaser--light .split-teaser-btn {
    background-color: var(--color-cta);
    border: 1px solid var(--color-cta);
    color: var(--color-cta-text);
    font-weight: var(--fw-normal);
    padding: 10px 22px;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition), transform var(--transition);
}

/* Hover invertiert – siehe Kopf von buttons.css. */
.block-split-teaser--light .split-teaser-btn:hover,
.block-split-teaser--light .split-teaser-btn:focus {
    background-color: var(--color-cta-text);
    border-color: var(--color-cta);
    color: var(--color-cta);
    transform: translateY(-1px);
}

/* ── Desktop (≥1200px): Bild links, blaue Fläche rechts ──── */
@media (min-width: 1200px) {
    /* Das Bild darf die Sektionshöhe NICHT bestimmen – im Figma gibt der
       Textinhalt die Höhe vor und das Bild wird darauf beschnitten. Deshalb
       liegt es absolut in seiner Spalte und fällt aus dem Höhenfluss. */
    .split-teaser-col-media {
        position: relative;
    }

    .split-teaser-media {
        position: absolute;
        inset: 0;
        aspect-ratio: auto;
    }

    .split-teaser-panel {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 80px;
    }

    /* Inhalt sitzt als ~550px breite Spalte mittig in der blauen Fläche
       (im Figma links wie rechts ca. 230px Luft bei 1728px Fensterbreite). */
    .split-teaser-panel-inner {
        max-width: 550px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

    .split-teaser-headline {
        font-size: 34px;
        line-height: normal;
    }
}

/* ── Bild rechts (Feld „Bildposition") ───────────────────────
   Nur die Reihenfolge dreht sich; das Markup bleibt identisch. Auf Mobil
   und Tablet stehen Bild und Text ohnehin untereinander – dort bleibt das
   Bild oben, sonst stünde der Text vor dem Motiv, auf das er sich bezieht. */
@media (min-width: 1200px) {
    .block-split-teaser--reverse .split-teaser-col-media { order: 2; }
}

/* ── Musterreihe unter dem Text ──────────────────────────────
   Im Entwurf drei Freisteller mit Beschriftung darunter, linksbündig. */
.split-teaser-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: var(--space-md) 0 0;
    padding: 0;
    list-style: none;
}

.split-teaser-swatch {
    text-align: center;
}

.split-teaser-swatch-img {
    display: block;
    height: auto;
    margin: 0 auto 8px;
}

.split-teaser-swatch-label {
    display: block;
    font-family: var(--font-body);
    font-size: var(--fs-copy-xs);
    color: var(--color-dark);
}

/* ── Variante „ohne Fläche" (Wandverblender, 2026-08-20) ─────
   Im Entwurf steht der Text auf weißem Grund neben dem Bild – keine
   Farbfläche. Überschrift trägt die Akzentfarbe der Farbwelt (dort rot),
   Fließtext bleibt schwarz, Button ist der gefüllte Akzent-Button. */
.block-split-teaser--white {
    background-color: var(--color-white);
}

.block-split-teaser--white .split-teaser-headline {
    color: var(--color-heading);
}

.block-split-teaser--white .split-teaser-text {
    color: var(--color-text);
}

.block-split-teaser--white .split-teaser-btn {
    background-color: var(--color-cta);
    border: 1px solid var(--color-cta);
    color: var(--color-cta-text);
    font-weight: var(--fw-normal);
    padding: 10px 22px;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition), transform var(--transition);
}

/* Hover invertiert – siehe Kopf von buttons.css. */
.block-split-teaser--white .split-teaser-btn:hover,
.block-split-teaser--white .split-teaser-btn:focus {
    background-color: var(--color-cta-text);
    border-color: var(--color-cta);
    color: var(--color-cta);
    transform: translateY(-1px);
}

/* ══ Doppelelement „ohne Fläche" (seit 2.9.0) ══════════════════════════════
   Figma-Stand 2026-09-16, Werte vom User. Betrifft die weiße Variante – die
   steht auf /wandverblender/ als Bild-Text-Paar im Wechsel und kommt so auch
   auf /beckenrandsteine-terrassenplatten/.

   Problem vorher: Das Bild lag absolut in seiner Spalte und nahm die Höhe
   des Textes an. „Stein. Oder doch nicht?" war 868 hoch, „Manche Wände …"
   436 – zwei Bilder desselben Paares, doppelt so hoch wie das andere.

     Bild      Desktop 874 × 700 · Tablet 767 × 614 · Mobil 390 × 312
               (alle drei ≈ 5 : 4). Mindesthöhe, kein fester Wert: Langer
               Text darf das Element weiter wachsen lassen (User: „darf
               mitwachsen, soll nur nicht so mini sein").
     Abstand   Bild → Text 172 · Text → Fensterrand 130 (bei 1736).
               172 skaliert mit der Fensterbreite, 130 ist das Randmaß des
               Rasters (--grid-margin ab 1200). */
.split-teaser-detail {
    display: block;
    margin-top: var(--space-md);               /* 32px wie die Musterreihe */
}

/* In Originalgröße, höchstens so breit wie die Textspalte. Die Grafiken
   kommen fertig aus Figma (Steine 539 × 231, Farbkacheln 439 × 187,
   Poolformen 654 × 158) – die Poolformen sind breiter als die Spalte und
   werden verkleinert. */
/* ⚠️ Kein `width: auto`: WordPress gibt nachgeladenen Bildern mit
   sizes="auto" `contain-intrinsic-size: 3000px 1500px` – mit width:auto
   wurde die Grafik dadurch auf Spaltenbreite hochgezogen (539 → 566).
   Die Breite kommt aus dem width-Attribut. */
.split-teaser-detail-img {
    display: block;
    max-width: 100%;
    height: auto;
}

@media (max-width: 1199.98px) {
    .block-split-teaser--white .split-teaser-media {
        aspect-ratio: 874 / 700;
    }
}

@media (min-width: 1200px) {
    .block-split-teaser--white > .row {
        /* Spaltenbreite × 700/874. Die Spalte ist die halbe Fensterbreite,
           gedeckelt bei --width-bleed-max. */
        min-height: calc(min(100vw, var(--width-bleed-max)) / 2 * 700 / 874);
    }

    .block-split-teaser--white .split-teaser-panel {
        padding-left: min(172px, 9.908vw);     /* 172/1736 */
        padding-right: var(--grid-margin);
    }

    .block-split-teaser--white.block-split-teaser--reverse .split-teaser-panel {
        padding-left: var(--grid-margin);
        padding-right: min(172px, 9.908vw);
    }

    .block-split-teaser--white .split-teaser-panel-inner {
        max-width: none;
        margin: 0;
    }

    /* Die Grafik unter dem Text darf in die Lücke zum Bild hineinragen –
       so im Entwurf der Beckenrandsteine: Die Poolformen (654) sind breiter
       als die Textspalte (566 bei 1736) und stehen trotzdem in voller Größe
       da, 84px vor dem Bild. Höchstens die halbe Lücke kommt dazu.
       Nur bei „Bild rechts": Die Grafik wächst nach rechts, und nur dort
       liegt die Lücke – bei „Bild links" ginge es in den Außenrand. */
    .block-split-teaser--white.block-split-teaser--reverse .split-teaser-detail-img {
        max-width: calc(100% + min(172px, 9.908vw) / 2);
    }
}

/* Musterreihe in EINER Zeile (seit 2.9.0): Die Bilder werden schmaler statt
   umzubrechen. Vorher standen die drei Poolformen auf zwei Zeilen und die
   drei Steine sogar untereinander – im Entwurf je eine Reihe. */
.split-teaser-swatches {
    flex-wrap: nowrap;
}

.split-teaser-swatch {
    flex: 0 1 auto;
    min-width: 0;
}

.split-teaser-swatch-img {
    max-width: 100%;
}