/* --- Hero, Art=Produktseite --------------------------------------------
   Randflaeche in Orange 50 fuellt den rechten Seitenrand, das Foto greift
   96 px hinein und laeuft 50 px unter die Sektionskante. Die Randflaeche
   traegt weder Radius noch Schatten, das Foto beides (DESIGN.md 8).

   Getragen hat am Ende eine Layout-Entscheidung: das Bild laeuft rechts aus
   der Seite. Kein Schmuck auf dem Hero-Bild, kein Ausschnitt, keine
   Eckmarke (DESIGN.md 8, zweimal versucht und verworfen).

   Masse aus Figma 103:65, nicht geschaetzt. Einige liegen ausserhalb der
   Spacing-Skala (32, 80, 180, 520, 696) — das ist in DESIGN.md 12 als offener
   Punkt vermerkt und hier bewusst literal, statt einen Token zu erfinden. */

.epi-hero {
    position: relative;
    isolation: isolate;
    background-color: transparent;
    /* Unten 56 statt 80: der Kopf soll die erste Sektion nicht aus dem
       ersten Bildschirm schieben (Designer-Review 29.10.2026). */
    padding-block: var(--wp--preset--spacing--lg) 56px;
}

/* Der Seitenrahmen endet bei 1920 px, die Hero-Grundflaeche nicht. Das eigene
   Pseudo-Element haelt Creme bis an beiden Viewportkanten, auch wenn die Seite
   auf einem breiteren Bildschirm bereits zentriert stillsteht. */
.epi-hero::after {
    content: "";
    position: absolute;
    inset-block: 0;
    left: 50%;
    width: 100vw;
    translate: -50% 0;
    z-index: -1;
    background-color: var(--color-primary-light);
}

.epi-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.epi-hero__text {
    display: flex;
    flex-direction: column;
    align-items: start;
}

/* Textrhythmus: Eyebrow und H1 gehoeren zusammen (12), H1 zu Lead 20,
   zum Button 24 (Regeln unten bei den Fassungen). Abstaende als Rand statt
   Flexgasse, weil sie sich je Paar unterscheiden. */
.epi-hero__text > * {
    margin: 0;
}


/* Eine H1-Regel fuer alle Unterseiten-Heros (mit und ohne Bild, Index,
   Beitrag): Groesse aus typography.scale.h1 (28 bis 40 px), Breite bis 24ch,
   also rund die 520-px-Textspalte, damit kurze Saetze in hoechstens drei
   Zeilen stehen. Balanciert, ohne automatische Silbentrennung; nur ein Wort
   breiter als die Spalte darf notfalls umbrechen. */
.epi-hero h1 {
    max-width: 24ch;
    text-wrap: balance;
    hyphens: manual;
    overflow-wrap: break-word;
}

/* Bildplatz, nicht Bild: solange kein lizenziertes Motiv vorliegt, steht hier
   die Motivbeschreibung. Radius 16 statt 5, weil sich 5 px an einer grossen
   Bildflaeche als rechter Winkel liest (DESIGN.md 8, seit 2026-09-03). */
.epi-hero__media {
    margin: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--standard-box-shadow);
    overflow: hidden;
    background-color: var(--color-secondary-20);
    min-height: 320px;
    display: grid;
    place-items: center;
}

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

.epi-hero__media figcaption {
    padding: var(--wp--preset--spacing--md);
    text-align: center;
    color: var(--color-secondary);
}

/* Drei Fassungen, das Bild haengt immer an der H1:
   - ab 1100 px: Text links (520), Bild rechts ab der H1-Oberkante bis 50 px
     unter die Hero-Kante, rechts bis 96 px in die Randflaeche. Die Hoehe
     kommt aus dem Text, begrenzt auf Format 1,15 bis 1,6 (min/max-height,
     object-fit: cover). Greift die Obergrenze, wird der Ueberstand kleiner:
     dann ist der Text zu lang (tools/check-hero-format.mjs warnt).
   - 782 bis 1099 px: Bild 4:3 an der H1-Oberkante, ohne Ueberstand.
   - bis 781 px: alles untereinander, Bild unter dem Button in 16:9.
   Die Kopplung an die H1 traegt ein Raster mit Subgrid: Eyebrow, H1, Lead
   und Button liegen in eigenen Zeilen, das Bild beginnt in der H1-Zeile.
   Eine zweizeilige Eyebrow schiebt H1 und Bild gemeinsam nach unten.
   Abstaende im Text sitzen deshalb unten am Element (margin-block-end),
   damit die H1-Zeile genau an der H1 beginnt. */

.epi-hero__text > :not(:last-child) {
    margin-block-end: 20px;
}

.epi-hero__text > .epi-eyebrow:not(:last-child) {
    margin-block-end: 12px;
}

.epi-hero__text > :has(+ .wp-block-buttons) {
    margin-block-end: 24px;
}

@media screen and (min-width: 782px) {
    .epi-hero__inner {
        display: block;
        position: static;
    }

    .epi-hero__text {
        position: relative;
        z-index: 1;
        width: 46%;
    }

    /* Breadcrumb und Seiteneinstieg bilden zusammen eine kompakte
       Orientierungseinheit; 20 px ist der regulaere Inhaltsabstand. */
    .epi-hero__breadcrumb {
        grid-column: 1 / -1;
        margin-block-end: var(--wp--preset--spacing--md);
    }

    /* Vom rechten Rand der Inhaltsspalte bis zur Seitenkante. */
    .epi-hero::before {
        content: "";
        position: absolute;
        inset-block: 0;
        left: min(
            calc(50% + var(--content-size) / 2),
            calc(100% - 2 * var(--epi-gutter))
        );
        /* Ueber 1920 px steht .epi-page still. Der negative Wert verlaengert
           nur die Sandflaeche vom Seitenrahmen bis zur Viewportkante. */
        right: min(0px, calc((var(--wide-size) - 100vw) / 2));
        background-color: var(--color-primary-50);
    }

    /* Zeilen: Pfad, Eyebrow, H1, Lead, Button, Rest. Die letzte Zeile (1fr)
       nimmt auf, was das Bild ueber den Text hinaus braucht, damit sich die
       Textzeilen nicht spreizen. */
    .epi-hero__inner:has(> .epi-hero__media) {
        display: grid;
        grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
        grid-template-rows: auto auto auto auto auto 1fr;
        row-gap: 0;
        column-gap: var(--epi-col-gap);
    }

    .epi-hero__inner:has(> .epi-hero__media) > .epi-hero__text {
        grid-column: 1;
        grid-row: 2 / -1;
        display: grid;
        grid-template-rows: subgrid;
        width: auto;
    }

    .epi-hero__inner:has(> .epi-hero__media) > .epi-hero__text > .epi-eyebrow {
        grid-row: 1;
    }

    .epi-hero__inner:has(> .epi-hero__media) > .epi-hero__text > h1 {
        grid-row: 2;
    }

    .epi-hero__inner:has(> .epi-hero__media) > .epi-hero__text > .epi-lead {
        grid-row: 3;
    }

    .epi-hero__inner:has(> .epi-hero__media) > .epi-hero__text > .wp-block-buttons {
        grid-row: 4;
    }

    .epi-hero__media {
        grid-column: 2;
        grid-row: 3 / -1;
        align-self: start;
        position: relative;
        z-index: 2;
        min-height: 0;
        aspect-ratio: 4 / 3;
    }
}

@media screen and (min-width: 1100px) {
    /* Fuer die cqw-Werte unten: Breite des Heros, nicht des Viewports
       (ohne Scrollleiste, ab 1920 px still wie .epi-page). */
    .epi-hero:has(.epi-hero__media) {
        container-type: inline-size;
    }

    /* Textspalte 520 (unter 1200 + Rand hoechstens 47 % des Inhalts),
       Gasse 80: ab 1200 + Rand beginnt das Bild genau auf der Seitenmitte
       (Figma 103:65). Die Masse stehen als Variablen, weil die Hoehengrenzen
       des Bildes daraus rechnen. */
    .epi-hero__inner:has(> .epi-hero__media) {
        --hero-inhalt: min(100cqw - 2 * var(--epi-gutter), var(--content-size));
        --hero-textspalte: min(520px, var(--hero-inhalt) * 0.47);
        --hero-bild-ueberstand: clamp(0px, 50cqw - var(--content-size) / 2 - var(--epi-gutter), 96px);
        --hero-bild-breite: calc(var(--hero-inhalt) - var(--hero-textspalte) - 80px + var(--hero-bild-ueberstand));
        grid-template-columns: minmax(0, var(--hero-textspalte)) minmax(0, 1fr);
        column-gap: 80px;
    }

    /* Unten 56 (Innenabstand) + 50 Ueberstand. Rechts bis 96 px ueber die
       Inhaltskante, aber nie naeher als der Seitenrand an die Bildkante.
       --hero-bild-breite ist die Bildbreite (Inhalt minus Textspalte und
       Gasse, plus Ueberstand rechts); daraus folgen die Hoehengrenzen fuer
       Format 1,6 (min) bis 1,15 (max), bei 1440 px 425 bis 591 px.
       contain: size, damit das Foto mit seinem eigenen Seitenverhaeltnis die
       Hero-Hoehe nicht mitbestimmt; die Hoehe kommt aus dem Text. */
    .epi-hero__media {
        contain: size;
        align-self: stretch;
        aspect-ratio: auto;
        margin-block-end: calc(-56px - 50px);
        margin-inline-end: calc(-1 * var(--hero-bild-ueberstand));
        min-height: calc(var(--hero-bild-breite) / 1.6);
        max-height: calc(var(--hero-bild-breite) / 1.15);
    }

    /* Die Folgesektion traegt den Ueberstand: 96 + 50 (DESIGN.md 8,
       in Figma padding-top 146 statt 96). Ohne Bild und unter 1100 px
       gibt es keinen Ueberstand. */
    .epi-hero:has(.epi-hero__media) + .epi-section {
        padding-block-start: calc(var(--section-spacing) + 50px);
    }
}

@media screen and (min-width: 1200px) {
    .epi-hero__text {
        width: 520px;
    }
}

/* Mobil verdichtet: der Kopf soll mit Lead und Button in den ersten
   Bildschirm passen. Innenabstand 16/40, Lead 17 px, eine 20-px-Gasse
   zwischen Pfad, Text und Bild; das Bild 16:9 unter dem Button. */
@media screen and (max-width: 781px) {
    .epi-hero {
        padding-block: 16px var(--wp--preset--spacing--lg);
    }

    .epi-hero__inner {
        gap: var(--wp--preset--spacing--md);
    }

    .epi-hero .epi-lead {
        font-size: 1.0625rem;
    }

    .epi-hero__media {
        aspect-ratio: 16 / 9;
        min-height: 0;
    }
}