/* Weser Theme – Block: Hero
   ==========================================================================
   HÖHEN: seit 1.43.0 aus dem Entwurf, nicht mehr aus der Fensterhöhe.

   Vorher stand hier überall `vh`. Damit hing die Hero-Höhe am Browserfenster:
   auf einem 1080er-Schirm 744px, auf einem 1440er über 1100px – der Entwurf
   sagt 644. Gemessen an den Figma-Exporten (`.figma-ref/Sprint 2/*.png`,
   Spaltenscan mit px.mjs) und vom User am 2026-08-25 bestätigt:

              Entwurf gesamt   − Kopfzeile   = Hero
     Desktop      756 px          112 px       644 px
     Tablet       756 px           72 px       684 px
     Mobil        653 px           72 px       581 px

   Der Tablet-Hero ist absichtlich HÖHER als der auf Desktop – die Kopfzeile
   ist dort 40px niedriger, der Rahmen aber gleich hoch.

   Es bleibt `min-height`, nicht `height`: Wird die Überschrift zwei- oder
   dreizeilig, wächst der Hero, statt den Text zu beschneiden. Wie der Entwurf
   das lösen will, ist offen → Rückfrage an den Kunden (siehe
   weserwaben-offene-punkte.md).
   ========================================================================== */
.block-hero {
    position: relative;
    /* Vorgabe = Unterseiten-Hero auf Mobil. Beide Layouts setzen darunter
       ihre eigenen Werte je Breakpoint. */
    min-height: 581px;
    display: flex;
    align-items: center;
    background-size: cover;
    /* Nur der Vorgabewert. Den tatsaechlichen Bildausschnitt setzt der
       eingebettete <style> aus weser_hero() je Breakpoint – er muss dort
       stehen, weil der Hero je Stufe ein anderes MOTIV zeigen kann und jedes
       seinen eigenen Punkt mitbringt. Ueber die ID gewinnt er diese Regel hier. */
    background-position: 50% 50%;
    background-repeat: no-repeat;
    color: var(--color-white);
    overflow: hidden;
}

/* Overlay – Kundenfeedback 01 vom 2026-09-09: „Headerbilder brauchen
   schwarzes Overlay -> Barrierefreiheit: weisse Schrift schwer lesbar".
   Werte vom User aus Figma: Startseite #000000 30 %, Unterseiten 50 %.

   ⚠️ Flaechig, NICHT als Verlauf. Vorher lag hier ein blauer Verlauf von
   links (0.78 -> transparent); rechts blieb das Bild praktisch unbedeckt,
   und genau dort stand auf der Startseite die Subline. */
.block-hero.has-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.30);
    z-index: 1;
}

.block-hero .hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 120px 0 80px;
}

.hero-content {
    max-width: 680px;
}

/* Kicker: Größe kommt aus .copy-xs */
.hero-kicker {
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.75);
    margin-bottom: 20px;
}

/* Headline: Größe/Gewicht/Line-Height aus H1 (typography.css) */
.hero-headline {
    color: var(--color-white);
    margin-bottom: 24px;
    text-shadow: 0 2px 20px rgba(0,0,0,0.25);
}

/* Subline: Größe/Line-Height aus .sl1 (typography.css) */
.hero-subline {
    color: rgba(255,255,255,0.90);
    max-width: 640px;
    margin-bottom: 40px;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.hero-btn {
    font-size: 0.9375rem;
    padding: 13px 28px;
}

/* Hero without image */
.block-hero.hero--no-image {
    background-color: var(--color-dark);
    min-height: 60vh;
}

/* Variant: Subpage – text bottom-left with green accent line */
.block-hero.hero-layout-subpage {
    min-height: 581px;                 /* Mobil, siehe Kopfkommentar */
    align-items: flex-end;
}

/* Mobil: Der Titel muss beim Laden sichtbar sein – Kundenfeedback 01,
   Mobil 21: „ewig lang ein Bild und der Titel kommt erst, wenn man runter
   scrollt". 581px sind der Figma-Wert (653 − 72 Kopfzeile), aber auf einem
   Telefon mit Browserleisten bleiben oft nur ~560px sichtbar. Deshalb höchstens
   so hoch wie der sichtbare Bereich unter der Kopfzeile. `svh` = kleinste
   sichtbare Höhe, also mit eingeblendeten Leisten; `vh` als Rückfall.
   Unten 60px bis zur Textkante (User 2026-09-16, vorher 72). */
@media (max-width: 767.98px) {
    .block-hero.hero-layout-subpage {
        min-height: min(581px, calc(100vh - var(--header-height)));
        min-height: min(581px, calc(100svh - var(--header-height)));
    }

    .block-hero.hero-layout-subpage .hero-inner {
        padding-bottom: 60px;
    }
}

@media (min-width: 768px) {
    .block-hero.hero-layout-subpage { min-height: 684px; }
}

/* Ab 1920 px wächst die Höhe mit der Breite (33,5 vw ≈ 644 px bei 1920),
   damit der Hero auf breiten Bildschirmen nicht zum „Briefschlitz“ wird
   (2560 px: vorher 4 : 1, jetzt 3 : 1). Obergrenze 900 px. Abgestimmt mit
   David am 2026-10-01 (Variante „Höhe wächst mit“ statt Maximalbreite). */
@media (min-width: 1200px) {
    .block-hero.hero-layout-subpage { min-height: clamp(644px, 33.5vw, 900px); }
}

.block-hero.hero-layout-subpage .hero-inner {
    padding: 60px 0 72px;
}

/* Unterseiten: #000000 50 %, flaechig (User-Wert aus Figma, 2026-09-09).
   Vorher ein Verlauf 0.60 -> 0.28 von unten. */
.block-hero.hero-layout-subpage.has-overlay::before {
    background: rgba(0, 0, 0, 0.50);
}

/* ── Klammer (Kundenvorlage 2026-09-18, Rahmen-Headline.svg) ─────────────
   Die Klammer ist fest gross und haengt an der ERSTEN Zeile der
   Ueberschrift: Zweizeilige Ueberschriften und Sublines laufen unten aus ihr
   heraus, statt sie zu strecken.

   Geometrie in SVG-Einheiten (= px auf Desktop), mal --ha-s:
     Klammer 130.5 × 192, unterer Schenkel endet bei x = 79.958
     Quadrat 24 × 24 bei x 55.958 / y 67.98 – rechte Kante = Schenkelende
     Text beginnt 18 rechts vom Schenkelende (aus der Vorlage abgeleitet)
     Unterkante Quadrat (y = 91.98) = Grundlinie der ersten Zeile

   --ha-s skaliert alles mit der H1 (Chris 2026-09-18, „mit der Schrift
   skalieren“): 64 → 1, 44 → 0.6875, 32 → 0.5. */
.hero-content--subpage {
    --ha-s: 0.5;
    --ha-einzug: calc((79.958px + 18px) * var(--ha-s));
    position: relative;
    padding-left: var(--ha-einzug);
    max-width: 1240px; /* Figma: Headline & Subline stehen einzeilig */
}

@media (min-width: 768px) {
    .hero-content--subpage { --ha-s: 0.6875; }
}

@media (min-width: 1200px) {
    .hero-content--subpage { --ha-s: 1; }
}

/* Text über der Klammer halten */
.hero-content--subpage > .hero-headline,
.hero-content--subpage > .hero-subline,
.hero-content--subpage > .hero-kicker,
.hero-content--subpage > .hero-buttons {
    position: relative;
    z-index: 1;
}

.hero-layout-subpage .hero-subline {
    max-width: none;
}

/* Sitzt in der <h1> (weser_hero_accent()). Deshalb meinen `lh` und `em` hier
   Zeilenhoehe und Schriftgroesse der Ueberschrift:

     Grundlinie der 1. Zeile = 0.5lh + 0.434em

   0.434 ist Literata Bold (gemessen an einer 1000-px-Probe, 2026-09-18):
   halbe Zeilenhoehe plus Abstand der Grundlinie von der Mitte. Geprueft
   gegen die Messung im Hero: 62.98 / 41.76 / 31.89 px. Die Oberkante der
   Klammer liegt 91.98 Einheiten darueber. */
.hero-accent {
    position: absolute;
    left: calc(-1 * var(--ha-einzug));
    /* Rueckfall ohne `lh`: Zeilenhoehe ≈ 1.1em → 0.55em + 0.434em */
    top: calc(0.984em - 91.98px * var(--ha-s));
    top: calc(0.5lh + 0.434em - 91.98px * var(--ha-s));
    width: calc(130.5px * var(--ha-s));
    height: calc(192px * var(--ha-s));
    color: var(--color-white);
    z-index: 0;
    pointer-events: none;
}

.hero-accent__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.hero-accent__square {
    position: absolute;
    left: calc(55.958px * var(--ha-s));
    top: calc(67.98px * var(--ha-s));
    width: calc(24px * var(--ha-s));
    height: calc(24px * var(--ha-s));
    background-color: var(--color-primary);
}

.hero-accent-line {
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 4px;
    background-color: var(--color-accent);
    border-radius: 2px;
}

.hero-layout-subpage .hero-headline {
    margin-bottom: 12px;
}

.hero-layout-subpage .hero-subline {
    margin-bottom: 0;
}

/* Desktop: 1.2 (≈ 50 px) wie in der Kundenvorlage vom 2026-09-18 –
   zweizeilige Sublines stehen dort eng. Vorher 70px (Figma 09.09.).
   DE RYCK hat eigene Werte weiter unten. */
@media (min-width: 1200px) {
    .hero-layout-subpage .hero-subline {
        line-height: 1.2;
    }
}

@media (max-width: 767px) {
    /* Lange Komposita („Pfeilerabdeckungen") liefen rechts aus dem Bild.
       hyphens:auto greift nur, wenn der Browser dt. Trennmuster hat – deshalb
       zusätzlich break-word als Sicherheitsnetz, damit nie überlaufen wird.
       Sauberer Trennpunkt: weiches Trennzeichen (&shy;) im ACF-Headline-Feld. */
    .hero-headline {
        hyphens: auto;
        overflow-wrap: break-word;
    }
    .block-hero .hero-inner {
        padding: 80px 0 60px;
    }
    .hero-buttons {
        flex-direction: column;
        align-items: flex-start;
    }
    .hero-btn {
        width: 100%;
        text-align: center;
    }
}

/* ==========================================================================
   STARTSEITE (Layout "default") – Sprint 3
   --------------------------------------------------------------------------
   Gemessen aus `.figma-ref/Sprint 3/Weserwaben_Startseite.png` (Desktop 1728):

   - Hero-Bild 112–1066  →  Höhe 955px (der Header nimmt die oberen 112px ein)
   - Textspalte beginnt bei x=130  = --grid-margin auf Desktop, keine Sonderregel
   - "Draußen"          Literata 700, Versalhöhe 101px → 138–140px
   - "Für dich gemacht." Poppins 400, Versalhöhe  58px →  ~83px, RECHTSBÜNDIG
                        auf x=711; danach 27px Luft, dann das grüne Quadrat
                        (gemessen 22px reine Farbe → 24px inkl. Kantenglättung,
                        gleiche Größe wie beim Unterseiten-Hero)
   - Subline            Poppins 400, Versalhöhe 22px → 32px, Zeilenabstand 52px
   - Button             var(--color-dark) mit grüner Schrift (btn-blue), Höhe ~40px,
                        Unterkante 950 → 116px Luft bis zum Bildende

   Tablet/Mobil sind ABGELEITET, nicht gemessen – für Sprint 3 lagen nur
   Desktop-Screenshots vor. Die Stufen folgen der Logik aus Sprint 1/2
   (Tablet nimmt den Mobil-Wert der Überschriftenskala). Sobald die T/M-
   Referenzen da sind, gehören genau diese Blöcke nachgemessen.
   ========================================================================== */

/* ---- Bilder-Slider -------------------------------------------------------
   Liegt unter dem Overlay (z-index 1) und unter dem Inhalt (z-index 2).
   Swiper-CSS wird erst beim Rendern des Blocks eingereiht und liegt damit
   HINTER dem Theme-CSS – überschreibende Regeln brauchen deshalb zwei
   Klassen, sonst gewinnt bei gleicher Spezifität die spätere Swiper-Regel. */
.block-hero .hero-swiper {
    position: absolute;
    inset: 0;
    z-index: 0;
    height: 100%;
}

.block-hero .hero-slide {
    height: 100%;
}

.block-hero .hero-slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* KEIN object-position hier. Die Slider-Bilder tragen die Klasse
       weser-focus; den Ausschnitt regelt zentral focus.css. Eine Regel an
       dieser Stelle haette zwei Klassen und damit hoehere Spezifitaet – sie
       wuerde die zentrale Loesung stillschweigend aushebeln. */
    display: block;
}

/* ---- Startseiten-Layout --------------------------------------------------
   Anders als bei den Unterseiten ist hier die FENSTERHÖHE gewollt: Der Hero
   soll zusammen mit der Kopfzeile beim Seitenaufruf genau den Schirm füllen
   (Entscheidung des Users, 2026-08-25).

   Das deckt sich mit dem Entwurf: Der zeigt 1067px inklusive Kopfzeile, also
   955px Hero – genau das, was `100svh - 112px` auf einem 1067px hohen Fenster
   ergibt. Tablet- und Mobil-Entwürfe liegen noch nicht vor; die Rechnung gilt
   dort genauso, nur mit der 72px-Kopfzeile.

   `svh` statt `vh`: Auf Mobilgeräten meint `vh` die Höhe OHNE eingeblendete
   Browserleisten – der Hero ragt dann beim Laden unter den Bildschirmrand.
   `svh` nimmt die kleine Fassung und sitzt sofort richtig. Ein `vh`-Wert steht
   als Rückfall darüber, für Browser ohne `svh`.

   `max()` mit 520px als Boden: Auf einem niedrigen Fenster (etwa 1366×768 mit
   Werkzeugleisten) blieben sonst keine 500px für Überschrift und Button. */
.block-hero.hero-layout-default {
    min-height: max(520px, calc(100vh - var(--header-height)));
    min-height: max(520px, calc(100svh - var(--header-height)));
    align-items: flex-end;
}

.block-hero.hero-layout-default .hero-inner {
    /* Luft unter dem Button bis zur Bildkante: Button-Unterkante 950,
       Bildkante 1067 → 117px. Der Inhalt hängt unten (align-items: flex-end),
       das Padding oben ist deshalb nur eine Reserve für schmale Fenster. */
    padding: 160px 0 117px;
}

.hero-layout-default .hero-content {
    /* Textkante 130 links, das grüne Quadrat endet bei 760 → 630px Spaltenbreite. */
    max-width: 630px;
}

.hero-layout-default .hero-headline {
    font-size: 140px;
    line-height: 1;
    margin-bottom: 0;
}

/* Die folgenden Abstände sind von UNTEN gerechnet, weil der Inhalt am
   unteren Bildrand hängt. Gemessene Sollkanten (Desktop):
   Versalie "Draußen" 396 · "Für dich" 574 · Subline 823 · Button 912–950. */

.hero-headline-secondary {
    font-family: var(--font-body);
    font-weight: var(--fw-normal);
    font-size: 83px;
    line-height: 83px;
    color: var(--color-white);
    text-align: right;
    /* 43px: So sitzt die Versalie von "Für dich" auf 574 und die von
       "Draußen" auf 396 – die 178px Abstand aus dem Entwurf. */
    margin: 43px 0 0;
    text-shadow: 0 2px 20px rgba(0,0,0,0.25);
}

.hero-headline-secondary__square {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-left: 27px;
    background: var(--color-primary);
    vertical-align: baseline;
}

/* line-height: normal – Kundenfeedback 01: „Manche Aussenraeume…" line-height
   ist falsch. Vom User am 2026-09-09 auf Figmas „Auto" gestellt (stand auf
   52px). Gilt auf allen drei Breakpoints. */
.hero-layout-default .hero-subline {
    font-size: 32px;
    line-height: normal;
    color: var(--color-white);
    max-width: none;
    /* Oben 78px bis zur Subline-Zeilenbox (Versalie landet damit auf 823),
       unten 5px bis zur Button-Oberkante auf 912. */
    margin: 78px 0 5px;
}

.hero-layout-default .hero-btn {
    /* Blau mit grüner Schrift – dieselbe Optik wie .btn-blue. */
    background: var(--color-dark);
    border-color: var(--color-dark);
    color: var(--color-primary);
    /* Buttonhöhe im Entwurf 39px (912–950). */
    padding: 8px 20px;
    font-size: 16px;
    line-height: 23px;
}

/* Hover invertiert – siehe Kopf von buttons.css. */
.hero-layout-default .hero-btn:hover,
.hero-layout-default .hero-btn:focus-visible {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-dark);
}

/* ---- Tablet (768–1199) – abgeleitet -------------------------------------- */
@media (max-width: 1199.98px) {
    .block-hero.hero-layout-default .hero-inner {
        padding: 100px 0 72px;
    }

    .hero-layout-default .hero-content {
        max-width: 420px;
    }

    .hero-layout-default .hero-headline {
        font-size: 88px;
    }

    .hero-headline-secondary {
        font-size: 52px;
        line-height: 52px;
        margin-top: 12px;
    }

    .hero-headline-secondary__square {
        width: 16px;
        height: 16px;
        margin-left: 18px;
    }

    .hero-layout-default .hero-subline {
        font-size: 22px;
        line-height: normal;
        margin: 36px 0 16px;
    }
}

/* ---- Mobil (<768) – abgeleitet ------------------------------------------- */
@media (max-width: 767.98px) {
    .block-hero.hero-layout-default .hero-inner {
        padding: 80px 0 48px;
    }

    .hero-layout-default .hero-content {
        max-width: 100%;
    }

    .hero-layout-default .hero-headline {
        font-size: 56px;
    }

    .hero-headline-secondary {
        font-size: 34px;
        line-height: 36px;
        margin-top: 8px;
    }

    .hero-headline-secondary__square {
        width: 12px;
        height: 12px;
        margin-left: 12px;
    }

    .hero-layout-default .hero-subline {
        font-size: 18px;
        line-height: normal;
        margin: 24px 0 16px;
    }
}

/* ══ DE RYCK: Hero wie auf allen Unterseiten (seit 2.15.0) ════════════════
   Bis 2.14.x stand hier eine Sonderform: kein Rahmen, nur ein rotes Quadrat
   vor der Überschrift, Überschrift 64 / Subline 42 auf allen Breiten (Figma
   16.09.). Kundenwunsch 18.09.: Klammer + Quadrat wie bei den anderen Heros,
   mit demselben Verhalten bei Umbrüchen. Mit Klammer passten 64 px mobil
   nicht mehr („Wandv/erblend/er“ bei 390 px) – deshalb auch die Schrift-
   größen wie überall (Chris 18.09.). Was DE RYCK unterscheidet, ist nur noch
   die Farbe: Quadrat rot über --color-primary (schemes.css). */

/* ══ Startseiten-Layout außerhalb der Startseite (seit 2.9.0) ═════════════
   /wandverblender/ trägt das Layout „Standard" – gedacht für die Startseite
   und dort bildschirmhoch (788–828px). User 2026-09-16: „viel zu groß, soll
   so sein wie bei den anderen Unterseiten". Außerhalb der Startseite gelten
   deshalb die Unterseiten-Höhen (Kopfkommentar dieser Datei); die Startseite
   bleibt unberührt. */
body:not(.is-front-page) .block-hero.hero-layout-default {
    min-height: min(581px, calc(100vh - var(--header-height)));
    min-height: min(581px, calc(100svh - var(--header-height)));
}

@media (min-width: 768px) {
    body:not(.is-front-page) .block-hero.hero-layout-default {
        min-height: 684px;
    }
}

@media (min-width: 1200px) {
    body:not(.is-front-page) .block-hero.hero-layout-default {
        min-height: clamp(644px, 33.5vw, 900px);   /* wie Unterseiten-Layout, s. o. */
    }
}

/* ── Scroll-Aufforderung (Kundenfeedback 2026-10-01) ─────────────────────
   Dieselbe „Maus“ wie im Shop-Hero (shop/assets/css/weserpool.css,
   `.icon-scroll`: 30 × 50, Rahmen 2 px, Punkt 8 px, 1,5 s), hier in Weiß.
   Unten mittig im Bild. 24 px Abstand statt 40 wie im Shop: Auf den
   Unterseiten endet der Text 72 px über der Bildkante – bei 40 px stieße die
   50 px hohe Maus bei breiten Überschriften an die letzte Textzeile.
   Wie im Shop erst ab 1100 px: Darunter steht der Text bis an die Kante und
   gescrollt wird ohnehin mit dem Daumen. */
.hero-scroll {
    display: none;
}

@media (min-width: 1100px) {
    .hero-scroll {
        display: block;
        position: absolute;
        left: 50%;
        bottom: 24px;
        z-index: 3;
        transform: translateX(-50%);
        padding: 0;
        background: none;
        border: 0;
        cursor: pointer;
    }
}

.hero-scroll-icon {
    position: relative;
    display: block;
    width: 30px;
    height: 50px;
    border: 2px solid var(--color-white);
    border-radius: 25px;
    /* Auf hellen Bildstellen ohne Abdunklung bliebe Weiß sonst kaum sichtbar. */
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.45));
}

.hero-scroll-icon::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    width: 8px;
    height: 8px;
    margin-left: -4px;
    border-radius: 4px;
    background: var(--color-white);
    animation: weser-hero-scroll 1.5s infinite;
}

@keyframes weser-hero-scroll {
    0%   { opacity: 1; }
    100% { opacity: 0; transform: translateY(26px); }
}

.hero-scroll:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 4px;
    border-radius: 25px;
}

@media (prefers-reduced-motion: reduce) {
    .hero-scroll-icon::before { animation: none; }
}