/* ===========================================================================
   Bausteine der Inhaltsseiten (T-10)

   Grundsatz: die Geometrie steht hier, nicht im Markup. Die Patterns tragen
   Core-Blöcke mit Klassen, damit der Text im Editor bearbeitbar bleibt.
   Werte aus tokens.generated.css, keine freien Hexwerte.
   =========================================================================== */

/* --- Eyebrow -------------------------------------------------------------
   16 px, Quicksand Bold, Versalien, Laufweite 0.04em, Farbe text/accent
   (tokens typography.scale.eyebrow, Bauauftrag B6). Versalien ausschliesslich
   ueber text-transform, nie im Quelltext getippt: sonst liest ein Screenreader
   die Beschriftung teilweise buchstabenweise vor. */

.epi-eyebrow {
    margin: 0 0 var(--wp--preset--spacing--md);
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-accent-dark-wcag);
}

/* --- Lead --------------------------------------------------------------- */

.epi-lead {
    max-width: var(--prose-max-width);
    margin-block: var(--wp--preset--spacing--md) 0;
}

/* Intro-Absatz innerhalb eines .epi-stack (grid, Abstand ueber gap statt
   Margin) — nur die Lesebreite begrenzen, keine eigene Margin setzen, sonst
   verdoppelt sich der Abstand zur Ueberschrift. */
.epi-intro {
    max-width: var(--prose-max-width);
}

/* --- Halbsatz -----------------------------------------------------------
   Die zweite Haelfte der H2 traegt Lora kursiv in Türkis. Signaturmerkmal
   (DESIGN.md 1.1), im Markup ein <em> innerhalb der Überschrift.

   .epi-fenster__cta-text traegt dieselbe Stimme wie eine H2 (siehe Fenster-
   Abschnitt weiter unten) und bekommt den Halbsatz deshalb hier mit dazu,
   statt Kursiv/Farbe/Blockumbruch dort zu wiederholen. */

:is(h1, h2) .epi-halbsatz,
:is(h1, h2) em,
.epi-fenster__cta-text em {
    font-style: italic;
    color: var(--color-accent-dark-wcag);
}

/* Eigene Zeile: der Halbsatz ist die zweite Haelfte der Aussage, nicht ein
   kursives Wort im Satz. Ausserdem haelt der Umbruch die Ueberschrift der
   ersten Sektion von der ueberhaengenden Hero-Bildflaeche frei. */
h2 .epi-halbsatz,
h2 em,
.epi-fenster__cta-text em {
    display: block;
}

/* Die zweite Lage des Halbsatzes (DESIGN.md §1.1): steht die Kursive im Satz
   statt am Ende, hebt sie den Gegenstand hervor und laeuft in der Zeile mit.
   Der Blockumbruch entfaellt, er wuerde die Zeile in drei Teile zerlegen. */
h2 em.epi-hervorhebung {
    display: inline;
}

/* --- Themenpunkt mit Feldmarke -----------------------------------------
   Offenes Ankreuzfeld mit Haken, kein gefuellter Kreis. Der Haken gehoert
   zum Vorteil, nicht zu technischen Angaben (DESIGN.md 6 Themenpunkt).
   Icon dekorativ, die Aussage steht im Text (Bauauftrag N12). */

.epi-points {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    /* min-content wie bei .epi-point: sonst reserviert der Grid-Standard
       "auto" pro Punkt mehr Hoehe als dessen Inhalt braucht und reisst die
       Liste sichtbar auseinander. */
    grid-auto-rows: min-content;
    /* Deutlich groesser als der 6-px-Abstand zwischen Titel und Beschreibung
       (.epi-point__body): der Punkt selbst muss dichter wirken als der
       Zwischenraum zum naechsten Punkt, sonst zerfaellt die Gruppierung. */
    gap: var(--wp--preset--spacing--md);
}

.epi-point {
    display: grid;
    grid-template-columns: 24px 1fr;
    /* min-content statt des Grid-Standards "auto": ohne das reserviert die
       erste Zeile mehr Hoehe als Icon und Titel brauchen und reisst Titel
       und Beschreibung sichtbar auseinander. */
    grid-auto-rows: min-content;
    column-gap: 0.75rem;
    align-items: start;
}

/* Der Haken ist das ausgespielte Asset aus Figma (Knoten 101:175, "Icon
   Haken"): ein offener Kasten, dessen Strich oben rechts ueber die Ecke
   hinauslaeuft. Nicht nachgezeichnet — die handgezogene Ueberlaenge ist das
   Merkmal. Dekorativ (Bauauftrag N12), deshalb ein Pseudoelement: so steht
   im Markup nur Text und der Baustein bleibt im Editor bearbeitbar.
   Auf der ersten Zeile des Titels zentriert, nicht an deren Oberkante. */
.epi-point::before {
    content: "";
    grid-row: 1;
    grid-column: 1;
    inline-size: 24px;
    block-size: 24px;
    margin-block-start: calc((1.4 * 1.125em - 24px) / 2);
    background-image: url("../img/haken.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.epi-point__title {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    color: var(--color-text);
    font-family: var(--font-primary);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: var(--line-height-ui);
    /* Der Themenpunkt ist ein h3 (Editor-Semantik), nicht die Sektions-H3:
       Farbe, Versalien und Laufweite von h3 (global.css) gehoeren hier nicht
       her. Figma zeigt Gross-/Kleinschreibung in Textfarbe, Türkis traegt nur
       die Feldmarke (DESIGN.md 6 Ankreuzfeld). */
    text-transform: none;
    letter-spacing: normal;
}

/* Buendig unter dem Titel, nicht unter dem Icon (DESIGN.md 6 Icons). */
.epi-point__body {
    grid-column: 2;
    margin: 6px 0 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-secondary);
}

/* Ohne Marker: dasselbe Textpaar ohne Haken. Ein Haken behauptet Nutzen,
   eine Modul- oder Technikauskunft tut das nicht. */
.epi-points--plain .epi-point {
    grid-template-columns: 1fr;
}

.epi-points--plain .epi-point::before {
    content: none;
}

.epi-points--plain :is(.epi-point__title, .epi-point__body) {
    grid-column: 1;
}

/* .epi-points setzt einen eigenen (engeren) gap fuer die Haken-Liste. Steht
   zusaetzlich .epi-grid (Modul-Auskuenfte im Zwei-Spalten-Raster, 104:182),
   soll dessen groesserer Gitterabstand gelten, nicht der der Haken-Liste:
   ueber die doppelte Klasse gewinnt das unabhaengig von der Regelreihenfolge
   in den Stylesheets. */
.epi-points.epi-grid {
    gap: var(--epi-grid-gap);
}

/* --- 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;
    }
}

/* --- Hero ohne Bild -----------------------------------------------------
   Seiten ohne Motiv (Uebersichten, Rechtstexte): Pattern epi/hero-ohne-bild
   und Vorlage page-text. Derselbe Kopf wie mit Bild, nur ohne Foto: die
   Randflaeche in Orange 50 bleibt als einziges Detail am rechten
   Seitenrand. Die H1 folgt derselben Regel wie mit Bild. Werte in
   tokens.json components.hero.ohneBild. */

.epi-hero.epi-hero--ohne-bild .epi-hero__text {
    width: auto;
    max-width: 46rem;
}

/* core/post-excerpt (Vorlage page-text) setzt einen Wrapper um den Absatz. */
.epi-hero--ohne-bild .epi-lead > .wp-block-post-excerpt__excerpt {
    margin: 0;
}

/* Die Randflaeche (.epi-hero::before) wieder einschalten, die der allgemeine
   Fall ohne Bild oben abstellt. */
@media screen and (min-width: 782px) {
    .epi-hero.epi-hero--ohne-bild::before {
        content: "";
    }
}

/* Hero mit Index (Loesungen): oben ein Intro ueber die volle Breite (H1
   links, Lead rechts), darunter beide Einstiege (.epi-index) in zwei gleich
   breiten Spalten. Der Index ist der Inhalt; die Randflaeche entfaellt. */
.epi-hero.epi-hero--index::before {
    content: none;
}

.epi-hero--index {
    padding-block-end: var(--section-spacing);
}


/* Sprungzeile nur mobil, wo die Branchen sonst erst nach sechs Eintraegen
   kommen. Textlinks, keine Chips. */
.epi-index__sprung {
    font-size: 1rem;
    font-weight: 700;
}

/* Trefferflaeche 44 px hoch (DESIGN.md 7), ohne die Zeile aufzublaehen. */
.epi-index__sprung a {
    display: inline-block;
    padding-block: 0.75rem;
    margin-block: -0.75rem;
    font-weight: 700;
}

@media screen and (min-width: 782px) {
    .epi-index__sprung {
        display: none;
    }

    /* Zeilenabstaende im 8er-Raster explizit statt der 32-px-Gasse des
       Innencontainers: Pfad 32, Eyebrow 12, H1, dann 40 bis zum Index. */
    .epi-hero.epi-hero--index .epi-hero__inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 var(--epi-col-gap);
    }

    .epi-hero.epi-hero--index .epi-hero__breadcrumb {
        margin-block-end: 2rem;
    }

    .epi-hero.epi-hero--index .epi-hero__breadcrumb,
    .epi-hero--index .epi-index {
        grid-column: 1 / -1;
    }

    /* Mobil reicht die 32-px-Gasse des Innencontainers. */
    .epi-hero--index .epi-index {
        margin-block-start: var(--wp--preset--spacing--lg);
    }

    .epi-hero.epi-hero--index .epi-hero__text {
        display: contents;
    }

    .epi-hero--index .epi-eyebrow {
        grid-column: 1;
        margin-block-start: 0;
    }

    .epi-hero--index h1 {
        grid-column: 1;
    }

    /* Der Abstand zum Index steht am Index (40), nicht unter der H1. */
    .epi-hero--index .epi-hero__text > h1 {
        margin-block-end: 0;
    }

    /* Der Lead ist hoeher als die zweizeilige H1. An deren Grundlinie
       gehaengt, stuende er oben und unten unruhig ueber; so teilen Eyebrow
       und Lead eine Oberkante. */
    .epi-hero--index .epi-lead {
        grid-column: 2;
        grid-row: 2 / span 2;
        align-self: start;
        margin: 0;
    }
}

/* Querverweis (Produkte: Wahlen) unter dem Index, ueber die volle Breite. */
.epi-hero--index .epi-querverweis {
    grid-column: 1 / -1;
    margin-block-start: var(--wp--preset--spacing--xl);
}

/* Der Abstand zur Folgesektion liegt ganz im Hero; sonst addieren sich
   zwei Sektionsabstaende zu einem leeren Streifen vor dem Abschluss. */
.epi-hero.epi-hero--index + .epi-section {
    padding-block-start: 0;
}

/* --- Breadcrumb ---------------------------------------------------------
   Höchstens drei Stufen. Die letzte ist die aktuelle Seite: kein Link,
   `aria-current="page"`. Trenner `aria-hidden`, die Struktur tragen Liste
   und BreadcrumbList-Schema. Die 44-px-Regel greift hier nicht — Textlinks
   in einer Zeile sind von der Zielgroesse ausgenommen. Meta-Schrift und die
   kleine 8-px-Gasse halten die Navigation visuell beim Seitenkontext. */

.epi-breadcrumb {
    padding-block: 0;
}

.epi-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wp--preset--spacing--sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.epi-breadcrumb li {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-secondary);
}

/* min-height 24px erfuellt WCAG 2.2 AA 2.5.8 ohne auf die
   Abstandsausnahme angewiesen zu sein (docs/wcag.md). */
.epi-breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    font-size: 1rem;
    line-height: var(--line-height-body);
    color: var(--color-accent-dark-wcag);
    text-decoration: underline;
}

.epi-breadcrumb a:hover {
    color: var(--color-text);
}

.epi-breadcrumb [aria-current="page"] {
    color: var(--color-secondary);
}

.epi-breadcrumb__sep {
    color: var(--color-secondary);
}

/* Mobil nur „‹ Elternseite“ (inc/breadcrumb.php markiert die Stufe). Die
   anderen Stufen sind nur optisch ausgeblendet: Screenreader lesen den
   ganzen Pfad samt aktueller Seite, und ein ausgeblendeter Link erscheint
   wieder, sobald er den Tastaturfokus hat (WCAG 2.4.7). */
@media screen and (max-width: 781px) {
    .epi-breadcrumb li:not(.epi-breadcrumb__eltern):not(:focus-within) {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .epi-breadcrumb__eltern a::before {
        content: "‹";
        content: "‹" / "";
        display: inline-block;
        margin-inline-end: 0.25em;
        text-decoration: none;
    }
}

/* --- Bildunterschrift --------------------------------------------------
   Beim UI-Ausschnitt Pflicht, ausser im Hero (DESIGN.md 8). */

.epi-caption,
.epi-figure figcaption {
    margin-block-start: var(--wp--preset--spacing--md);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-secondary);
}

/* ===========================================================================
   Bausteine der Produktseiten, Teil 2 (T-10)

   Alle Masse stammen aus den Figma-Knoten der Montagen "Produktseite
   TeleForm" (103:2) und "Produktseite LiquidOffice" (417:1119). Die
   Knotennummer steht jeweils am Baustein, damit sich ein Wert nachschlagen
   laesst, statt ihn neu zu schaetzen.
   =========================================================================== */

/* --- Modul (104:182) -----------------------------------------------------
   Titel plus Absatz ohne Marker. Derselbe Satz wie der Themenpunkt, nur ohne
   Haken: ein Haken behauptet Nutzen, eine Modulauskunft tut das nicht. Die
   Klasse epi-points--plain traegt genau das. */

/* --- Prozess-Schritt (40:25) --------------------------------------------
   Nummer im Quadrat mit 2-px-Ecke, nicht im Kreis (Signaturmerkmal Feld).
   Keine Verbindungslinie: die Reihenfolge steht in der Nummer. */

.epi-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: epi-step;
}

/* Genau fuenf Schritte: eine Zeile statt 3 + 2, sonst wirkt der letzte
   Schritt wie ein Nachtrag. */
@media screen and (min-width: 1024px) {
    .epi-steps:has(> .epi-step:nth-child(5):last-child) {
        grid-template-columns: repeat(5, 1fr);
    }
}

.epi-step {
    display: grid;
    gap: var(--wp--preset--spacing--md);
    justify-items: start;
    /* Kuerzere Schritte werden auf Zeilenhoehe gestreckt; ohne start verteilt
       das Grid den Rest auf Nummer, Titel und Text, und die Titel springen. */
    align-content: start;
    counter-increment: epi-step;
}

/* Die Nummer kommt aus dem CSS-Zaehler: im Markup stehen damit nur
   Ueberschrift und Absatz, beide im Editor bearbeitbar. */
.epi-step::before {
    content: counter(epi-step);
    display: grid;
    place-items: center;
    inline-size: var(--touch-min);
    block-size: var(--touch-min);
    border: 2px solid var(--color-accent-dark-wcag);
    border-radius: 2px;
    font-family: var(--font-handlee);
    font-size: 1.75rem;
    line-height: 30px;
    color: var(--color-accent-dark-wcag);
}

.epi-step__title {
    margin: 0;
    font-family: var(--font-primary);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: var(--line-height-ui);
}

.epi-step__body {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
}

/* --- Anwendungsfall-Karte (23:5) ----------------------------------------
   Klickziel ist die ganze Karte, der sichtbare Verweis ist die Affordanz und
   nicht das einzige Ziel (Bauauftrag N27). Der Fokusring liegt deshalb
   aussen an der Karte, nicht um die Verweiszeile. */

.epi-card {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    background-color: var(--color-base);
    border: 1px solid var(--color-secondary-20);
    border-radius: var(--standard-border-radius);
    box-shadow: var(--standard-box-shadow);
    overflow: hidden;
}

.epi-card__media {
    --epi-card-media-size: 200px;
    margin: 0;
    block-size: var(--epi-card-media-size);
    background-color: var(--color-secondary-20);
    display: grid;
    place-items: center;
    overflow: hidden;
}

/* Feste Pixelhoehe statt Prozentwert: bei "sizes=auto" + "loading=lazy"
   berechnet der Browser eine Prozent-Blockgroesse vor dem Laden gegen das
   intrinsische Seitenverhaeltnis (Breite/Hoehe-Attribute) statt gegen die
   Grid-Flaeche, wenn "place-items" nicht auf stretch steht. Ergebnis: ein
   einzelnes Bild ragt ueber die 200 px hinaus, je nach Seitenverhaeltnis.
   Absicherung zugleich fuer WordPress-Cores ".wp-block-image img { height:
   auto }" (bei gleicher Spezifitaet ohne !important gewinnen koennte). */
.epi-card__media img {
    display: block;
    inline-size: 100% !important;
    block-size: var(--epi-card-media-size) !important;
    object-fit: cover;
}

/* Flex statt Grid, damit der Verweis am Ende sich per margin-top:auto an das
   Zeilenende schiebt (Korrektur 2026-09-15: mit Grid + align-content:start
   packt sich der durch die gleich hohe Grid-Zeile entstehende Leerraum
   ausserhalb aller Zeilen-Spuren, margin-top:auto haette dort nichts, wohin
   es wachsen kann — Nutzer-Befund, Verweis sass je nach Textlaenge auf
   unterschiedlicher Hoehe). Gilt fuer beide Karten, die .epi-card__body
   nutzen (Anwendungsfall-Karte auf Produktseiten, Referenz-Karte auf der
   Startseite) — bewusst hier an der Basis und nicht mehr je Karte einzeln,
   weil beide dieselbe Erwartung teilen: Verweis immer ganz unten, Karten in
   einer Zeile gleich hoch. */
.epi-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
}

.epi-card__body > * {
    margin: 0;
}

/* Nur der Verweis rutscht nach unten; eine Karte ohne Verweis endet mit
   ihrem Text, der direkt unter dem Titel stehen bleibt. */
.epi-card__body > :last-child:has(.epi-card__link) {
    margin-block-start: auto;
}

.epi-card__title {
    font-family: var(--font-primary);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.35;
}

/* Sichtbar wie der Secondary-Button (global.css), aber kein echtes <button>:
   die Karte selbst ist das Klickziel (Bauauftrag N27), der Verweis nur die
   Affordanz dafuer. Deshalb hier dieselben Werte statt der .secondary-Klasse,
   um die Doppelrolle "Button und Card-Link" nicht in einem Element zu mischen. */
.epi-card__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    inline-size: 100%;
    padding: var(--default-btn-padding);
    min-height: var(--touch-min);
    background-color: var(--color-base);
    border: 1px solid var(--color-accent-dark-wcag);
    border-radius: var(--standard-border-radius);
    font-weight: 700;
    text-decoration: none;
}

/* Die Flaeche des Verweises deckt die Karte ab. */
.epi-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.epi-card__link:focus-visible {
    outline: none;
}

.epi-card:has(.epi-card__link:focus-visible) {
    outline: 3px solid var(--color-accent-dark-wcag);
    outline-offset: 2px;
}

/* Textkarte ohne Bildbereich (Startseite Sektion 6, „Lösungsweg-Karte",
   Figma 506:435): dieselbe Klickflaeche und derselbe Fokusring wie .epi-card,
   aber ein einziger Innenbereich statt Bild+Body, und ein reiner Textverweis
   statt der Sekundaer-Button-Optik von .epi-card__link. */
.epi-card--text {
    grid-template-rows: none;
    gap: 0.75rem;
    padding: 1.5rem;
}

.epi-card--text > * {
    margin: 0;
}

/* Ohne Verweis muss nichts ans Kartenende: Titel und Text bleiben
   beieinander. Sonst verteilt die auf Zeilenhoehe gestreckte Karte ihren
   Rest auf alle Zeilen, und zwischen Titel und Text klafft eine Luecke
   (Befund 2026-09-29, Aufgaben-Kasten mit Karten ohne Verweis). Karten mit
   Verweis behalten ihr bisheriges Verhalten. */
.epi-card--text:not(:has(.epi-card__link)) {
    align-content: start;
}

/* Dekoratives Icon vor dem Kartentitel (Aufgaben-Kasten): kommt aus der
   Kartenklasse epi-icon--… (inc/karten-icons.php) und steht beim Ausgeben im
   h3, per aria-hidden von der Aussage getrennt und per
   display:block auf eine eigene Zeile ueber dem Titel gestellt — dieselbe
   Rolle wie der Haken bei .epi-point (dekorativ, Tuerkis, siehe DESIGN.md §6),
   nur als echtes <i>-Element statt CSS-Pseudoelement, weil hier sechs
   unterschiedliche Icons statt eines einzigen Assets gebraucht werden. */
.epi-card--text .epi-card__icon {
    display: block;
    margin-block-end: 0.75rem;
    color: var(--color-accent-dark-wcag);
    font-size: 1.5rem;
}

.epi-card--text .epi-card__title {
    color: var(--color-text);
    font-family: var(--font-secondary);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
}

/* Platzhalter fuer einen spaeteren Verweis (Karte ohne Zielseite). */
.epi-card--text > p:empty {
    display: none;
}

.epi-card__link--plain {
    display: inline;
    padding: 0;
    min-height: 0;
    background-color: transparent;
    border: 0;
    color: var(--color-accent-dark-wcag);
    font-weight: 700;
}

/* --- Index (Uebersichtsseiten) -------------------------------------------
   Zwei gleichrangige, gleich breite Spalten wie im Mega-Menue: links
   Anwendungsfaelle, rechts Branchen. Eintrag = Textkarte (.epi-card--text,
   epi-icon--…) mit Titel und Kurzzeile, damit Icon, Klickflaeche und
   Fokusring aus dem Bestand kommen. Verlinkte Zeilen tragen rechts einen
   Pfeil und hellen beim Hover auf; Zeilen ohne Ziel sind gedaempft.
   Raster: Icon 24 px + 16 px Gasse, Zeile 16 px oben und unten. */

.epi-index {
    display: grid;
    gap: var(--wp--preset--spacing--xl) var(--epi-col-gap);
}

.epi-index__spalte {
    display: flex;
    flex-direction: column;
    scroll-margin-block-start: calc(var(--header-height) + var(--wp--preset--spacing--md));
}

.epi-index__spalte > * {
    margin-block: 0;
}

.epi-index__spalte > h2 {
    margin: 0;
    padding-block-end: var(--wp--preset--spacing--sm);
    border-block-end: 2px solid var(--color-text);
    font-size: 1.5rem;
}

.epi-index .epi-card--text {
    display: block;
    isolation: isolate;
    padding: 0.75rem 0 0.75rem 2.5rem;
    background: none;
    border: 0;
    border-block-end: 1px solid var(--color-line);
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.epi-index .epi-card--text > * {
    margin: 0;
}

.epi-index .epi-card__icon {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.875rem;
    inline-size: 1.5rem;
    margin: 0;
    font-size: 1.25rem;
    text-align: center;
}

/* Rechts Platz fuer den Pfeil nur in der Titelzeile; die Kurzzeile darf
   bis an die Spaltenkante laufen und bleibt so meist einzeilig. */
.epi-index .epi-card__title {
    padding-inline-end: 2rem;
    font-size: 1.125rem;
    line-height: var(--line-height-ui);
}

.epi-index .epi-card__title a {
    color: inherit;
    font: inherit;
    text-decoration: none;
}

.epi-index .epi-card__title + p {
    margin-block-start: 0.125rem;
    color: var(--color-secondary);
    font-size: 0.9375rem;
    line-height: var(--line-height-ui);
}

/* Pfeil und Aufhellung nur, wo die Zeile ein Ziel hat. Die Aufhellung
   laeuft 12 px ueber die Spaltenkante, damit Icon und Text auf der Achse
   der Spaltenueberschrift bleiben. */
/* Pfeil als SVG-Maske (18 px, Strich 2 px): das Zeichen in Quicksand war
   zu duenn. Mittig auf der ersten Titelzeile (12 px Zeile + 25 px / 2). */
.epi-index .epi-card--text:has(.epi-card__link)::after {
    content: "";
    position: absolute;
    inset-inline-end: 0.25rem;
    inset-block-start: calc(0.75rem + 12.6px - 9px);
    inline-size: 18px;
    block-size: 18px;
    background-color: var(--color-accent-dark-wcag);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9h13M10 4l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9h13M10 4l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: translate var(--motion-state-duration) var(--motion-state-easing);
}

.epi-index .epi-card--text:has(.epi-card__link)::before {
    content: "";
    position: absolute;
    inset: 0 -0.75rem;
    z-index: -1;
    background-color: var(--color-base);
    border-radius: var(--standard-border-radius);
    opacity: 0;
    transition: opacity var(--motion-state-duration) var(--motion-state-easing);
}

.epi-index .epi-card--text:has(.epi-card__link):is(:hover, :focus-within)::before {
    opacity: 1;
}

/* Fokusring auf der Hover-Flaeche statt buendig an der Spaltenkante. */
.epi-index .epi-card:has(.epi-card__link:focus-visible) {
    outline: none;
}

.epi-index .epi-card--text:has(.epi-card__link:focus-visible)::before {
    outline: 3px solid var(--color-accent-dark-wcag);
    outline-offset: 2px;
}

.epi-index .epi-card--text:has(.epi-card__link):hover::after {
    translate: 0.25rem 0;
}

.epi-index .epi-card--text:has(.epi-card__link):hover .epi-card__title {
    color: var(--color-accent-dark-wcag);
}

@media (prefers-reduced-motion: reduce) {
    .epi-index .epi-card--text:has(.epi-card__link)::after {
        transition: none;
    }

    .epi-index .epi-card--text:has(.epi-card__link):hover::after {
        translate: none;
    }
}

/* Ohne Ziel: Titel und Icon in Grau 100 (5,1:1 auf Weiss, 4,8:1 auf Creme). */
/* Ohne Ziel: gedaempft, der Titel eine Stufe dunkler als die Kurzzeile
   (Grau 100 zu 40 Prozent Richtung Textfarbe, etwa #57564f, 6,9:1 auf
   Creme); Icon in Grau 100. */
.epi-index .epi-card--text:not(:has(a)) .epi-card__title {
    color: color-mix(in srgb, var(--color-secondary) 60%, var(--color-text));
}

.epi-index .epi-card--text:not(:has(a)) .epi-card__icon {
    color: var(--color-secondary);
}

/* Produktlogos (Index Produkte, epi-index--logos): Logo und Zusatz kommen
   wie im Mega-Menue aus dem Menueeintrag (inc/karten-icons.php) und tragen
   dessen Klassen (global.css). Ohne Icon-Spalte: Logos und der Titel von
   Eintraegen ohne Logo stehen auf der Achse der Spaltentitel. */
.epi-index--logos .epi-card--text {
    padding-inline-start: 0;
}

/* Logozeilen 16 statt 12 px Polster: die Wortmarken fuellen ihre Zeile
   bis an den Rand und kleben sonst an der Trennlinie. */
.epi-index--logos .epi-card--text:has(.mega_link_title--logo) {
    padding-block: 1rem;
}

.epi-index--logos .mega_link_title--logo {
    height: 1.75rem;
    margin-block-end: 0.25rem;
}

/* Pfeil mittig auf der 28-px-Logozeile statt auf der Titelzeile. */
.epi-index--logos .epi-card--text:has(.mega_link_title--logo)::after {
    inset-block-start: calc(1rem + 0.875rem - 9px);
}

/* Externes Ziel (Wahlen): ↗ statt →, wie im Menue. */
.epi-index .epi-card--text:has(.epi-card__link[target="_blank"])::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13 13 5M6 5h7v7'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13 13 5M6 5h7v7'/%3E%3C/svg%3E");
}

/* Einzelner Eintrag unter den Registern (Wahlen): gehoert in keine Liste,
   sieht aber aus wie ein Eintrag. Zweispaltig so breit wie eine
   Registerspalte, mit eigener Linie oben und Abstand, damit er nicht als
   weitere Zeile eines Registers gelesen wird. */
.epi-index__zusatz > .epi-card--text {
    border-block-start: 1px solid var(--color-line);
}

@media screen and (min-width: 769px) {
    .epi-index__zusatz {
        grid-column: 1;
        margin-block-start: var(--wp--preset--spacing--xl);
    }
}

/* Zweispaltig teilen sich beide Spalten die Zeilen (Subgrid), damit die
   Trennlinien auf einer Hoehe laufen, auch wenn links eine Kurzzeile
   umbricht. Die Spalte spannt 17 Zeilen (Titel + bis 16 Eintraege); leere
   Zeilen sind 0 px hoch. Die Liste ist ein div ohne Listensemantik, die
   Struktur tragen H2 und H3, display: contents nimmt also nichts weg. */
@media screen and (min-width: 769px) {
    .epi-index {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: auto;
        row-gap: 0;
    }

    .epi-index__spalte {
        display: grid;
        grid-row: 1 / span 17;
        grid-template-rows: subgrid;
    }

    .epi-index__liste {
        display: contents;
    }
}

/* --- Bento-Raster (epi/bento) ---------------------------------------------
   Vier Kacheln unterschiedlicher Groesse im Wechsel: oben gross–klein, unten
   klein–gross. Grosse Kacheln sind Bildkarten (.epi-card), Foto und Text
   nebeneinander, die zweite gespiegelt; kleine sind Textkarten mit Icon
   (.epi-card--text, epi-icon--…) auf Orange 50 statt Weiss, damit die zwei
   Groessen auch als zwei Arten lesbar sind (Abstufung, DESIGN.md 2.1).
   Unter 1024 px stehen die grossen Kacheln ueber die ganze Breite, die
   kleinen paarweise; mobil alles untereinander, Foto oben. */

.epi-bento {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--epi-grid-gap);
}

/* Titel wie die kleinen Kacheln (.epi-card--text), damit beide Groessen
   eine Stimme haben. */
.epi-bento__gross .epi-card__title {
    font-family: var(--font-secondary);
    font-size: 1.375rem;
    line-height: 1.3;
}

.epi-bento__klein {
    background-color: color-mix(in srgb, var(--color-primary-50) 45%, var(--color-base));
    border-color: color-mix(in srgb, var(--color-primary-50) 80%, var(--color-base));
    box-shadow: none;
}

@media screen and (min-width: 768px) {
    .epi-bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .epi-bento__gross {
        grid-column: 1 / -1;
        grid-template-rows: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Das Foto fuellt die Hoehe, die der Text vorgibt, und bestimmt sie nie
       selbst: absolut in seiner Flaeche, sonst zieht ein Hochformat die
       ganze Reihe in die Hoehe. */
    .epi-bento__gross .epi-card__media {
        position: relative;
        display: block;
        block-size: auto;
        min-block-size: 16rem;
    }

    .epi-bento__gross .epi-card__media img {
        position: absolute;
        inset: 0;
        block-size: 100% !important;
    }

    .epi-bento__gross:last-child .epi-card__media {
        order: 2;
    }

    .epi-bento__gross .epi-card__body {
        gap: 0.75rem;
        align-self: center;
        padding: var(--wp--preset--spacing--lg);
    }
}

@media screen and (min-width: 1024px) {
    .epi-bento {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .epi-bento__gross {
        grid-column: span 2;
    }
}

/* --- Aufgaben-Kasten / Raster-Kasten (508:2195, Startseite Sektion 6) -----
   Figma zeigt hier weiterhin 6 einzelne Schatten-Karten; ein gemeinsamer
   Kasten mit duennen Gitterlinien zwischen den Zellen ist eine bewusste
   Weiterentwicklung darueber hinaus. Design-Tokens components.rasterKasten.
   Kasten: radius.flaeche (16, "grosse einfassende Flaeche"), elevation.karte,
   bg/base — dieselben Werte, die vorher auf jeder Einzelkarte lagen, reine
   Wiederverwendung. Zellen bleiben „.epi-card .epi-card--text" fuer
   Klickflaeche/Fokusring (Bauauftrag N27) und verlieren ihre eigene
   Flaeche/ihren eigenen Rand nur innerhalb dieses Kastens (Scoped Override,
   kein Markup-Unterschied zu anderen Textkarten-Verwendungen). Trennlinien
   in border/trennlinie, wie components.trennlinie/spaltentrenner. */

.epi-aufgaben-box {
    background-color: var(--color-base);
    border: 1px solid var(--color-secondary-20);
    border-radius: var(--radius-lg);
    box-shadow: var(--standard-box-shadow);
    overflow: hidden;
}

/* Variante ohne eigene Titelzeile im Kasten (Nutzer-Befund 2026-09-15,
   digitale-belegerfassung): Der H2 sitzt hier als regulaerer Sektionstitel
   ueber dem Kasten statt als .epi-aufgaben-box__title darin. Der Kasten
   verliert deshalb seine eigene Flaeche/Rand/Schatten und fuegt sich in die
   Sektionsflaeche ein, die inneren Gitterlinien (.epi-aufgaben-box__grid)
   bleiben unveraendert bestehen. */
.epi-aufgaben-box.epi-aufgaben-box--plain {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

/* max-width:none haelt die Ueberschrift ausdruecklich breiter als die
   sonst uebliche 820px-Lesebreite (sections.css, ":is(h2, .epi-stack > h2)")
   — hier ist sie eine Kasten-Titelzeile, deren Trennlinie den Kasten in
   voller Breite unterstreichen muss, nicht ein Fliesstext-Titel. Der
   zwei zusaetzlichen Elternselektoren (".epi-section .epi-aufgaben-box")
   sind notwendig, nicht nur Stil: ".epi-section :is(h2, .epi-stack > h2)"
   hat Spezifitaet (0,2,1) — mit nur einer Elternklasse kommt dieser
   Selektor nur auf (0,2,0) und verliert trotzdem gegen die 820px-Regel; die
   Trennlinie brach dann rund 300px vor dem rechten Kastenrand ab. */
.epi-section .epi-aufgaben-box .epi-aufgaben-box__title {
    max-width: none;
    margin: 0;
    padding: var(--wp--preset--spacing--lg) 2rem var(--wp--preset--spacing--md);
    border-block-end: 1px solid var(--color-line);
}

/* Abweichung vom sitewide Halbsatz-Muster (h2 em, siehe oben): dort erzwingt
   display:block bewusst den Zeilenumbruch (Hero etc.), hier soll der Kasten
   niedriger bleiben — Nutzer-Entscheidung 2026-09-15, der Titel darf einzeilig
   bleiben, Farbe/Kursiv aus der Halbsatz-Regel gelten trotzdem weiter. */
.epi-aufgaben-box__title em {
    display: inline;
}

.epi-aufgaben-box__grid {
    gap: 0;
}

/* Gitterlinien als Pseudoelemente statt echter border, mit Luft an den
   Kreuzungen (Nutzer-Befund 2026-09-15: volle Linien, die sich an den
   Schnittpunkten beruehren, wirken wie ein hartes Plus-Raster). ::after ist
   die horizontale Linie (Kastenbreite minus Einzug links/rechts), ::before
   die vertikale (Zellhoehe minus Einzug oben/unten) — beide um denselben
   Betrag verkuerzt, damit an jeder Kreuzung eine kleine Luecke bleibt. */
.epi-aufgaben-box__grid > .epi-card {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 1.5rem;
}

.epi-aufgaben-box__grid > .epi-card::before,
.epi-aufgaben-box__grid > .epi-card::after {
    content: "";
    position: absolute;
    background-color: var(--color-line);
}

/* Vertikale Linie standardmaessig aus (mobil, einspaltig, keine Nachbarzelle
   zum Abtrennen) — dieselbe Basis/Ausnahme-Struktur wie zuvor bei den
   border-inline-end/-block-end-Deklarationen, nur je Bruchpunkt neu an :before
   statt an border gebunden. */
.epi-aufgaben-box__grid > .epi-card::before {
    content: none;
    inset-block: 1rem;
    inset-inline-end: 0;
    width: 1px;
}

.epi-aufgaben-box__grid > .epi-card::after {
    inset-inline: 1rem;
    inset-block-end: 0;
    height: 1px;
}

.epi-aufgaben-box__grid > .epi-card:last-child::after {
    content: none;
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .epi-aufgaben-box__grid > .epi-card::before {
        content: "";
    }

    .epi-aufgaben-box__grid > .epi-card:nth-child(2n)::before {
        content: none;
    }

    .epi-aufgaben-box__grid > .epi-card:nth-last-child(-n+2)::after {
        content: none;
    }
}

@media screen and (min-width: 1024px) {
    .epi-aufgaben-box__grid > .epi-card::before {
        content: "";
    }

    .epi-aufgaben-box__grid > .epi-card:nth-child(3n)::before {
        content: none;
    }

    .epi-aufgaben-box__grid > .epi-card:nth-last-child(-n+3)::after {
        content: none;
    }
}

/* Vier Zellen als 2x2 (TeleForm, 2026-10-26): mit .epi-grid--2 statt --3
   bleibt das Raster ab 768px zweispaltig, die Gitterlinien folgen 2n statt
   3n. Bis 1023px gelten die zweispaltigen Regeln oben unveraendert. */
@media screen and (min-width: 768px) {
    .epi-aufgaben-box__grid.epi-grid--2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 1024px) {
    .epi-aufgaben-box__grid.epi-grid--2 > .epi-card:nth-child(3n)::before {
        content: "";
    }

    .epi-aufgaben-box__grid.epi-grid--2 > .epi-card:nth-child(2n)::before {
        content: none;
    }

    .epi-aufgaben-box__grid.epi-grid--2 > .epi-card:nth-last-child(-n+3)::after {
        content: "";
    }

    .epi-aufgaben-box__grid.epi-grid--2 > .epi-card:nth-last-child(-n+2)::after {
        content: none;
    }
}

/* --- Referenz-Karte (520:5) ----------------------------------------------
   Startseite Sektion 7 „Aktuelle Anwenderberichte". Ist dieselbe Karte wie
   die Anwendungsfall-Karte auf den Produktseiten (echte .epi-card: Flaeche,
   Radius, Schatten, Medienzone .epi-card__media, Klickflaeche/Fokusring/
   Button ueber .epi-card__link) — keine eigene Komponente, nur um zwei
   Overlays auf dem Foto erweitert: Branche-Pille (Flaeche folgt dem
   echten Produkt des Anwenderberichts, Taxonomie "product", Korrektur
   2026-09-15 — vorher bedeutungslose Dekor-Rotation) und Kundenlogo-Badge.
   Verweis ganz unten/volle Kartenbreite/gleiche Kartenhoehe kommen seit
   demselben Datum von der Basisklasse (.epi-card__body, .epi-card__link),
   keine eigene Regel mehr hier. */

.epi-referenz-karte__foto {
    --epi-card-media-size: 220px;
    position: relative;
}

.epi-referenz-karte__branche {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 6px 14px;
    border-radius: 999px;
    color: var(--color-text);
    font-size: 0.875rem;
    font-weight: 700;
}

/* Logo-Badge unten mittig auf dem Foto, bündig mit der Fotokante (Korrektur
   2026-09-15, zweiter Anlauf: der erste Versuch — eckiges Badge, links oben —
   traf weder Form noch Position). Form und Rezeptur sind keine Neuerfindung,
   sondern aus der bestehenden Referenz-Karte im alten Blog-Loop uebernommen
   (blog.css, ".loop_client_logo"): sehr grosser Radius nur oben (fast ein
   Halbkreis), unten eckig — dadurch sitzt die Kante exakt auf der Fotokante,
   ohne in den Kartenkoerper hineinzuragen. Groesse dabei NICHT 1:1 uebernommen
   (Korrektur 2026-09-15, zweiter Befund): die alte 250x100px-Vorlage stammt
   aus einer 50%-Breite-Featured-Karte, wirkte auf unserer schmaleren
   Drittel-Grid-Karte (~400px) mit fast der halben Kartenbreite erdrueckend —
   hier stattdessen proportional auf die Kartenbreite verkleinert. Kind von
   .epi-referenz-karte__foto, bottom:0 reicht dafuer aus, keine negative
   Margin wie im alten Loop noetig (dort lag das Badge ausserhalb des Fotos in
   Flow-Position, hier ist es ohnehin absolut positioniert innerhalb des
   Fotos). */
.epi-referenz-karte__logo {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 168px;
    block-size: 68px;
    padding: 16px 18px 4px;
    border-radius: 80px 80px 0 0;
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* !important nicht Stil, sondern Zwang: das Logo-<img> ist jetzt ein
   Nachfahre von .epi-card__media (seit es in die Figure gewandert ist,
   Korrektur weiter oben), und ".epi-card__media img" erzwingt per !important
   block-size:var(--epi-card-media-size) (220px) — ohne eigenes !important
   hier haette diese Regel Vorrang und das Logo wuerde auf Fotohoehe
   gestreckt, weit ueber die kleine Badge-Flaeche hinaus (Nutzer-Befund
   2026-09-15: Logo lief oben und unten aus dem Kreis heraus). */
.epi-referenz-karte__logo img {
    inline-size: 100% !important;
    block-size: 100% !important;
    object-fit: contain;
}

.epi-referenz-karte .epi-card__title {
    font-family: var(--font-secondary);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
}

/* Verweis ganz unten und ueber volle Kartenbreite kommen jetzt von der
   Basisklasse (.epi-card__body, .epi-card__link) — dieselbe Erwartung wie
   bei der Anwendungsfall-Karte auf den Produktseiten, keine eigene Regel
   mehr noetig (Korrektur 2026-09-15, Nutzer-Befund: beide Karten nutzen
   dieselbe Klasse und sollten sich deshalb nicht unterschiedlich verhalten). */

/* --- Produktkarte (506:456) -----------------------------------------------
   Startseite Sektion 8 „Vier Produkte für unterschiedliche Aufgaben". Die
   Produktfarbe ist die einzige Fläche der Karte, nie Schriftfarbe (wie beim
   Hero, siehe Komponenten-Register) — deshalb eigene Klasse statt .epi-card
   (dessen weisse Grundflaeche hier nicht passt), aber mit demselben Link-
   und Fokusring-Mechanismus wie die uebrigen Karten. Figma zeigt hier flache,
   unrotierte Farbkarten; Rotation, waermerer Schatten (Design-Tokens
   elevation.papier) und die angedeutete umgeknickte Ecke (echte Haftnotiz
   statt Standard-Kartenschatten) sind eine bewusste Weiterentwicklung über
   Figma hinaus. Rotation folgt derselben Schraeglage-Regel wie das
   Kundenlogo-Band (DESIGN.md §6 Logo-Band: alternierend, hoechstens 2,5°) —
   ein gemeinsames „hingelegtes Papier"-Merkmal, kein eigener Wert je
   Komponente. Auf Hover/Fokus richtet sich die Karte gerade auf, damit
   Lesbarkeit und Fokusring nicht unter der Drehung leiden. */

.epi-produktkarte {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    /* 1.25 statt 1.5rem: bei vier Notizen passt „Lebensmittelindustrie“
       sonst nur getrennt in die Zeile. */
    padding: 1.25rem;
    border-radius: var(--standard-border-radius);
    box-shadow: 0 6px 14px 0 rgb(120 92 40 / 0.22), 0 1px 2px 0 rgb(120 92 40 / 0.18);
    overflow: clip;
    transition: rotate 0.15s ease, box-shadow 0.15s ease;
}

/* Haftnotizen liegen immer in einer Reihe nebeneinander, nie im Raster
   (Linus 28.10.2026). Das umgebende epi-grid wird dafuer zur Reihe. Unter
   1280 px laeuft sie waagerecht wie die Zeitleiste (bei 1024 waeren vier
   Notizen zu schmal fuer Woerter wie „Abweichungsmanagement“); die angeschnittene
   naechste Notiz zeigt, dass es weitergeht. Innenabstand und Gegenrand
   lassen Schatten und Drehung Luft. Spalten statt Flex: mit Flex
   wuerde die gestreckte Hoehe ueber das Seitenverhaeltnis die Breite
   treiben. */
.epi-grid:has(> .epi-produktkarte) {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: min(17.5rem, 78%);
    padding: 1rem 0.75rem 1.5rem;
    margin-inline: -0.75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0.75rem;
    scrollbar-width: thin;
    scrollbar-color: var(--color-secondary-20) transparent;
}

/* Quadratisch; mehr Text darf die Notiz nach unten verlaengern
   (aspect-ratio ist nur das Mindestmass, daher oben clip statt hidden).
   min-width: 0 haelt die Hoehe davon ab, die Spalte zu verbreitern;
   stretch macht Notizen einer Reihe gleich hoch. */
.epi-produktkarte {
    width: 100%;
    min-width: 0;
    align-self: stretch;
    aspect-ratio: 1;
    scroll-snap-align: start;
    /* Getrennt werden nur sehr lange Woerter („Verbesserungsmass-nahmen“),
       nicht schon „qualitaetsre-levanter“; Rest bricht notfalls um statt
       abgeschnitten zu werden (overflow: clip). */
    hyphens: auto;
    hyphenate-limit-chars: 20 9 9;
    overflow-wrap: break-word;
}

/* Ab 1280 px steht die Reihe ohne Scrollen. Jede Notiz ist so breit wie in
   der Viererreihe, egal wie viele es sind: drei Notizen werden nicht
   groesser, die Reihe endet frueher (linksbuendig wie Titel und Text der
   Sektion; im Ausblick mittig, siehe dort). */
@media screen and (min-width: 1280px) {
    .epi-grid:has(> .epi-produktkarte) {
        grid-auto-columns: calc((100% - 3 * var(--epi-grid-gap)) / 4);
        overflow: visible;
    }
}

.epi-produktkarte > * {
    margin: 0;
}

/* Angedeutete umgeknickte Ecke unten rechts (klassisches Post-it-Merkmal,
   das "Ablösen" vom Stapel). Reine CSS-Dreiecksform, keine Bild-Textur. */
.epi-produktkarte::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 22px 22px;
    border-color: transparent transparent rgb(0 0 0 / 0.16) transparent;
}

.epi-produktkarte:has(.epi-card__link:focus-visible) {
    outline: 3px solid var(--color-accent-dark-wcag);
    outline-offset: 2px;
}

.epi-produktkarte__title {
    color: var(--color-text);
    font-family: var(--font-secondary);
    /* 1.3125rem: „Lebensmittelindustrie“ passt bei vier Notizen ungetrennt */
    font-size: 1.3125rem;
    font-weight: 700;
    line-height: 1.3;
}

.epi-produktkarte--teleform { background-color: var(--color-product-teleform); }
.epi-produktkarte--liquidoffice { background-color: var(--color-product-liquidoffice); }
.epi-produktkarte--mfiles { background-color: var(--color-product-mfiles); }
.epi-produktkarte--mfiles-qms { background-color: var(--color-product-mfiles-qms); }

/* Schraeglage nach Position, nicht nach Produktfarbe: drei Karten derselben
   Farbe (z. B. drei TeleForm-Themen) laegen sonst alle gleich schief. */
.epi-produktkarte:nth-child(4n+1) { rotate: -2.5deg; }
.epi-produktkarte:nth-child(4n+2) { rotate: 2deg; }
.epi-produktkarte:nth-child(4n+3) { rotate: -1.5deg; }
.epi-produktkarte:nth-child(4n+4) { rotate: 2.5deg; }

/* Jede Notiz richtet sich beim Zeigen auf, auch ohne Link: die Bewegung
   gehoert zum Papiermotiv, nicht zur Klickbarkeit. Steht nach der
   Schraeglage, weil :hover sonst gegen :nth-child verliert. */
.epi-produktkarte:hover,
.epi-produktkarte:focus-within {
    rotate: 0deg;
    box-shadow: 0 10px 20px 0 rgb(120 92 40 / 0.28), 0 2px 4px 0 rgb(120 92 40 / 0.2);
}

/* --- Zitat mit Person (132:9) -------------------------------------------
   Immer mit Name, Funktion und Haus: ohne Absender ist es eine vage
   Zuschreibung. Das Portraet ist ein Graukasten, bis ein lizenziertes Motiv
   vorliegt, und traegt deshalb aria-hidden — der Name steht daneben
   (Bauauftrag N34). */

.epi-quote {
    display: grid;
    gap: 2rem;
    margin: 0;
    padding: 4rem;
}

.epi-quote__text {
    margin: 0;
    font-family: var(--font-quote);
    font-style: italic;
    font-size: 1.625rem;
    line-height: 1.5;
}

.epi-quote__person {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Das Portraet ist ein Graukasten, bis ein lizenziertes Motiv vorliegt. Als
   Pseudoelement ist es dekorativ und hinterlaesst kein leeres Element, das
   ein Screenreader ansagen koennte (Bauauftrag N34). */
.epi-quote__person::before {
    content: "";
    flex: none;
    inline-size: 48px;
    block-size: 48px;
    border-radius: 999px;
    background-color: var(--color-secondary-20);
}

.epi-quote__person > * {
    margin: 0;
}

/* Initialenkreis (inc/zitat-initialen.php) ersetzt den Graukasten. */
.epi-quote__person:has(.epi-quote__initialen)::before {
    content: none;
}

/* Zitat ohne Namen, nur Funktion und Organisation: kein Kreis. */
.epi-quote__person:not(:has(.epi-quote__name))::before {
    content: none;
}

.epi-quote__initialen {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 48px;
    block-size: 48px;
    border-radius: 999px;
    background-color: var(--color-primary-50);
    color: var(--color-text);
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
}

.epi-quote__name cite {
    font-style: normal;
}

.epi-quote__role {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-secondary);
}

/* Karte auf weisser Sektion: Creme mit hartem Rasterabbruch an der Kante. */
.epi-quote--card {
    background-color: var(--color-primary-light);
}

/* Zentriert und schmaler, wenn das Zitat flach auf der Sektion steht. */
.epi-quote--center {
    max-width: 880px;
    margin-inline: auto;
}

/* Auf schmalen Viewports frisst padding:4rem mehr als ein Drittel der
   Zeilenbreite. Was davon uebrig bleibt, reicht fuer ein langes Wort in
   1.625rem Lora nicht mehr — die Mindestbreite des Zitats weitet dann die
   Grid-Spur der ganzen Sektion und die Seite bekommt einen horizontalen
   Ueberlauf (Befund 2026-09-17 bei 375 px, Wort „Serviceplattform"). Enger
   gesetzt und eine Stufe kleiner; das Zitat bleibt damit die groesste Schrift
   seiner Sektion, ohne den Container zu sprengen. */
@media screen and (max-width: 767px) {
    .epi-quote {
        padding: 2rem;
    }

    /* Auch 1.25rem reicht nicht fuer jedes Kompositum („Übertragungsfehler",
       Befund 2026-09-28). `anywhere` senkt anders als `break-word` auch die
       Mindestbreite der Grid-Spur. Kein `hyphens: auto`, solange die Seite
       lang="en-US" ausliefert: der Browser trennt sonst nach englischen Regeln. */
    .epi-quote__text {
        font-size: 1.25rem;
        overflow-wrap: anywhere;
    }

    /* Portraet, Name und eine lange Funktion („Datenintegrationszentrum")
       passen nebeneinander nicht in 375 px; die Funktion rutscht darunter. */
    .epi-quote__person {
        flex-wrap: wrap;
    }
}

/* --- Trust-Signal (89:145) ----------------------------------------------
   Genau drei Signale. Die Haken sind dekorativ, die Aussage steht im Text. */

.epi-signals {
    display: grid;
    gap: 5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Untereinander genuegt die halbe Luft; die Zeile bleibt lesbar kurz. */
@media screen and (max-width: 1023px) {
    .epi-signals {
        gap: 2.5rem;
        max-width: 640px;
    }
}

@media screen and (min-width: 1024px) {
    .epi-signals {
        grid-template-columns: repeat(3, minmax(0, 320px));
    }
}

.epi-signal {
    display: grid;
    gap: 0.75rem;
    align-content: start;
    justify-items: start;
}

.epi-signal::before {
    content: "";
    inline-size: 28px;
    block-size: 28px;
    background-image: url("../img/haken.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.epi-signal__title {
    margin: 0;
    font-family: var(--font-primary);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.35;
}

.epi-signal__body {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
}

/* --- CTA-Banner (207:15) ------------------------------------------------
   Eine Frage, ein Satz, ein Button. Genau ein primaerer CTA je Ansicht. Die
   dunkle Ausfuehrung steht hoechstens einmal je Seite und nie auf einer
   cremefarbenen Sektion, sonst verliert der Abschluss seine Kante. */

.epi-cta {
    position: relative;
    display: grid;
    gap: var(--wp--preset--spacing--md);
    justify-items: center;
    text-align: center;
    padding-block: 4.5rem;
    padding-inline: var(--wp--preset--spacing--lg);
    border-radius: var(--radius-lg);
    background-color: var(--color-dark);
    color: var(--color-base);
}

/* Der Inhalt liegt ueber dem Kaestchenraster der eigenen Flaeche. */
.epi-cta > * {
    position: relative;
    margin: 0;
}

.epi-cta :is(h1, h2, h3) {
    max-width: 720px;
    color: var(--color-base);
}

.epi-cta p {
    max-width: 640px;
}

/* Mobil bleiben sonst nur 240 px fuer Frage und Satz. */
@media screen and (max-width: 767px) {
    .epi-cta {
        padding-block: 3rem;
        padding-inline: var(--wp--preset--spacing--md);
    }
}

/* Helle Ausfuehrung (93:161 "Flaeche=Hell", Pattern epi/cta-hell): fuer einen
   Handlungsaufruf mitten auf der Seite, etwa zum passenden Produkt, oder
   wenn die dunkle Zaesur nicht passt, z. B. nach einer cremefarbenen Sektion
   (DESIGN.md 2.8/2.4). Kaestchenraster
   ueber .epi-paper/.epi-paper--edge (sections.css) — beschnitten am Kastenrand
   (Design-Tokens signatur.kaestchenraster.kante: harte Kante an einer sichtbaren
   Flaeche). Keine eigene Breitenbegrenzung: die Flaeche ist exakt so breit wie
   .epi-container (layout.sektionsflaechen.schwebendeFlaeche), identisch zur
   dunklen Ausfuehrung auf den Produktseiten (.epi-cta ohne Modifier). */
.epi-cta--light {
    background-color: var(--color-primary-light);
    color: var(--color-text);
}

.epi-cta--light :is(h1, h2, h3) {
    color: var(--color-text);
}

/* --- Sprungnavigation (41:54) -------------------------------------------
   Klebende Leiste unter der Kopfzeile. Der aktuelle Abschnitt traegt
   aria-current und zusaetzlich zur Farbe eine 3-px-Unterkante: Farbe ist
   nie das einzige Merkmal. Ohne JavaScript vollstaendig benutzbar, weil es
   Anker sind (Bauauftrag F1, S21). */

.epi-jumpnav {
    position: sticky;
    top: var(--header-height, 80px);
    z-index: 900;
    /* Gleiches Muster wie .header_section: Blur ueber ::before, damit die
       Leiste selbst keine eigene Compositing-Gruppe aufspannt. */
    background-color: transparent;
    border-block: 1px solid var(--color-secondary-20);
}

.epi-jumpnav::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: -1;
    pointer-events: none;
}

.epi-jumpnav ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 2rem;
    margin: 0;
    padding-block: 1rem;
    padding-inline: 0;
    transition: padding-block 0.2s ease;
    list-style: none;
}

/* Schrumpft zusammen mit der Kopfzeile (megamenu.js, ab 50 px Scroll):
   das Klickziel selbst (.epi-jumpnav a, 44 px Mindesthoehe) bleibt
   unveraendert, nur der Luftraum darueber/darunter wird knapper. */
html.is-scrolled .epi-jumpnav ol {
    padding-block: 0.375rem;
}

.epi-jumpnav ol a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--touch-min);
    padding-inline: var(--wp--preset--spacing--sm);
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 700;
    line-height: var(--line-height-ui);
    color: var(--color-text);
    text-decoration: none;
    border-block-end: 3px solid transparent;
}

.epi-jumpnav ol a:hover {
    text-decoration: underline;
}

.epi-jumpnav [aria-current] {
    color: var(--color-accent-dark-wcag);
    border-block-end-color: var(--color-accent-dark-wcag);
}

/* Kompakte Form: sobald die Links umbrechen (jumpnav.js setzt .is-kompakt),
   schrumpft die Leiste auf eine Zeile wie bei Stripe oder Samsung: Seitenname,
   aktueller Abschnitt, Kontakt. Die Liste klappt als Glasflaeche darunter auf.
   Ohne Skript bleibt die Zeile verborgen und die Liste wie oben. */

.epi-jumpnav__leiste {
    display: none;
}

.epi-jumpnav.is-kompakt .epi-jumpnav__leiste {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--sm);
    min-block-size: 3.5rem;
}

.epi-jumpnav.is-kompakt ol {
    display: none;
}

/* Umschalter und Kontakt erben sonst die globale Button-Optik, mobil
   zusaetzlich volle Breite (global.css). */
.epi-jumpnav .epi-jumpnav__umschalter,
.epi-jumpnav .epi-jumpnav__umschalter:hover,
.epi-jumpnav .epi-jumpnav__umschalter:active {
    display: grid;
    grid-template-columns: minmax(0, auto) auto;
    align-content: center;
    column-gap: 0.625rem;
    flex: 0 1 auto;
    inline-size: auto;
    min-inline-size: 0;
    min-block-size: var(--touch-min);
    padding: 0;
    color: var(--color-text);
    text-align: start;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.epi-jumpnav__seite,
.epi-jumpnav__abschnitt {
    grid-column: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.epi-jumpnav__seite {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-secondary);
}

.epi-jumpnav__abschnitt {
    font-size: 1rem;
}

.epi-jumpnav__abschnitt:empty {
    display: none;
}

/* Vor dem ersten Abschnitt steht nur der Seitenname, dann in voller Groesse. */
.epi-jumpnav__umschalter:has(.epi-jumpnav__abschnitt:empty) .epi-jumpnav__seite {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
}

.epi-jumpnav__umschalter:has(.epi-jumpnav__abschnitt:empty)::after {
    grid-row: 1;
}

.epi-jumpnav__umschalter::after {
    content: "";
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    margin-block-start: -0.25rem;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--motion-state-duration) var(--motion-state-easing);
}

.epi-jumpnav__umschalter[aria-expanded="true"]::after {
    margin-block-start: 0.25rem;
    transform: rotate(-135deg);
}

.epi-jumpnav .epi-jumpnav__kontakt {
    display: inline-flex;
    flex: none;
    inline-size: auto;
    min-block-size: 2.75rem;
    padding-block: 0;
    padding-inline: 1rem;
    font-size: 1rem;
}

.epi-jumpnav.is-kompakt.is-offen ol {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-block-size: calc(100dvh - 8rem);
    overflow-y: auto;
    padding-block: 0 0.5rem;
    padding-inline: var(--epi-gutter);
    /* Deckend statt Glas: durchscheinender Text machte die Liste unruhig. */
    background-color: var(--color-base);
    border-block-end: 1px solid var(--color-secondary-20);
    box-shadow: var(--standard-box-shadow);
    transition: opacity 200ms var(--motion-state-easing), transform 200ms var(--motion-state-easing);
}

@starting-style {
    .epi-jumpnav.is-kompakt.is-offen ol {
        opacity: 0;
        transform: translateY(-0.5rem);
    }
}

/* Aufgeklappt eine ruhige Liste in der Ueberschriftenschrift, Haarlinien
   zwischen den Zeilen, jede Zeile in voller Breite tippbar. Den aktuellen
   Abschnitt tragen Tuerkis, Kursive und ein Punkt statt der Unterkante. */
.epi-jumpnav.is-kompakt.is-offen li + li {
    border-block-start: 1px solid var(--color-secondary-20);
}

.epi-jumpnav.is-kompakt.is-offen ol a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-block-size: 3.25rem;
    padding-inline: 0;
    font-family: var(--font-secondary);
    font-size: 1.25rem;
    font-weight: 400;
    border: 0;
}

.epi-jumpnav.is-kompakt.is-offen ol [aria-current] {
    font-style: italic;
}

.epi-jumpnav.is-kompakt.is-offen ol [aria-current]::after {
    content: "";
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    background-color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
    .epi-jumpnav.is-kompakt.is-offen ol {
        transition: none;
    }
}

/* Lesefortschritt als 2-px-Linie an der Unterkante, rein per CSS an den
   Seiten-Scroll gebunden. Browser ohne Scroll-Timeline zeigen keine Linie. */
@supports (animation-timeline: scroll()) {
    .epi-jumpnav.is-kompakt::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        inset-block-end: -1px;
        block-size: 2px;
        background-color: var(--color-accent-dark-wcag);
        transform: scaleX(0);
        transform-origin: left;
        pointer-events: none;
        animation: epi-lesefortschritt linear both;
        animation-timeline: scroll(root);
    }
}

@keyframes epi-lesefortschritt {
    to {
        transform: scaleX(1);
    }
}

/* --- FAQ-Akkordeon (39:68) ----------------------------------------------
   Kein eigener Block: WordPress fuehrt core/accordion seit 6.9. Der Kern
   liefert Umschalter, aria-expanded, aria-controls und hidden="until-found"
   ueber die Interactivity-API — der Antworttext bleibt damit auch zugeklappt
   im Markup und findbar, genau wie der Entwurf es verlangt. Hier steht nur
   die Erscheinung: Haarlinie je Zeile, Chevron statt Pluszeichen.
   Klassen und Aufbau sind die des Kerns (wp-includes/blocks/accordion*). */

.epi-faq {
    display: grid;
    gap: var(--wp--preset--spacing--sm);
}

.epi-faq .wp-block-accordion-item {
    border-block-end: 1px solid var(--color-secondary-20);
}

.epi-faq .wp-block-accordion-heading {
    margin: 0;
    font-size: inherit;
}

.epi-faq .wp-block-accordion-heading__toggle {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--md);
    inline-size: 100%;
    min-block-size: var(--touch-min);
    padding: 1rem 0;
    background: none;
    /* appearance:none zusaetzlich zu border:0: manche Browser (v.a. Safari)
       zeichnen bei einem echten <button>-Element einen nativen Fokus-„Glow"
       (weicher blauer Schein statt scharfem Outline), der unabhaengig vom
       outline-Reset in global.css besteht, solange die native Control-
       Erscheinung nicht abgeschaltet ist — genau der „komische enge klare
       Schatten in der blauen Linie" aus der Nutzer-Rueckmeldung. Der
       eigentliche, barrierefreie Fokusring kommt weiterhin ausschliesslich
       aus dem globalen :focus-visible-Token (tokens.generated.css). */
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-align: start;
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: var(--line-height-ui);
    color: var(--color-text);
    min-height: 0;
}

.epi-faq .wp-block-accordion-heading__toggle:hover {
    background: none;
    color: var(--color-accent-dark-wcag);
}

.epi-faq .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle {
    color: var(--color-accent-dark-wcag);
}

.epi-faq .wp-block-accordion-heading__toggle-title {
    flex: 1 1 auto;
}

/* Der Kern setzt ein Pluszeichen als Text. Der Entwurf zeigt ein Chevron in
   text/accent, keine Farbflaeche: Zeichen weg, Chevron als Maske, damit die
   Farbe aus dem Token kommt. Pfad ist das ausgespielte Asset (Knoten 39:65). */
.epi-faq .wp-block-accordion-heading__toggle-icon {
    flex: none;
    inline-size: 24px;
    block-size: 24px;
    font-size: 0;
    background-color: currentColor;
    -webkit-mask-image: url("../img/chevron.svg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url("../img/chevron.svg");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    color: var(--color-accent-dark-wcag);
    transition: rotate var(--motion-state-duration) var(--motion-state-easing);
}

.epi-faq .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon {
    rotate: 180deg;
}

.epi-faq .wp-block-accordion-panel {
    padding-block-end: 1rem;
}

.epi-faq .wp-block-accordion-panel > *:first-child {
    margin-block-start: 0;
}

@media (prefers-reduced-motion: reduce) {
    .epi-faq .wp-block-accordion-heading__toggle-icon {
        transition: none;
    }
}

/* --- Logoband (117:4) ---------------------------------------------------
   Aufgenommen wird nur, wer einen eigenen Anwenderbericht und eine Freigabe
   zur Logonutzung hat. Dateien liegen im Theme, nie aus dem Web geladen.
   Die Logos stehen in Lieferfarbe: Umfaerben zerstoert ausgesparte Formen
   (Figma-Notiz am Baustein). Kein Verweis am Logo — sieben Verweise auf
   dasselbe Ziel sind eine Tastaturfalle (Bauauftrag N33); der eine Button
   unter dem Band traegt den Weg. */

.epi-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin: 0;
    padding-block: var(--wp--preset--spacing--lg);
    padding-inline: 0;
    list-style: none;
}

.epi-logos img {
    display: block;
    block-size: 40px;
    inline-size: auto;
    max-inline-size: 160px;
    object-fit: contain;
}

/* --- UI-Ausschnitt (203:25) --------------------------------------------
   Zuschnitt einer echten Produktoberflaeche. Flaeche im Gegentakt zum Grund,
   Radius 16, Eckmarken, Bildunterschrift Pflicht. Das Bild wird eingepasst,
   nie gefuellt: ein Fuellen schneidet die oberste Zeile ab, und die traegt
   oft die Beschriftung, um die es geht. */

.epi-cutout {
    position: relative;
    display: grid;
    gap: var(--wp--preset--spacing--md);
    margin: 0;
    padding: var(--wp--preset--spacing--lg);
    border-radius: var(--radius-lg);
    background-color: var(--color-primary-light);
    box-shadow: 0 8px 16px rgb(0 0 0 / 0.1);
}

/* Gegentakt: auf cremefarbener Sektion traegt der Ausschnitt Weiss. */
.epi-section--subtle .epi-cutout {
    background-color: var(--color-base);
}

.epi-cutout__field {
    margin: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--color-secondary-20);
    background-color: var(--color-base);
}

.epi-cutout__field img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
}

/* Das Feld traegt das Seitenverhaeltnis des Zuschnitts, damit kein Rand
   stehen bleibt. Zwei Formate, keine freien Werte. */
.epi-cutout--wide .epi-cutout__field {
    aspect-ratio: 380 / 260;
}

.epi-cutout--strip .epi-cutout__field {
    aspect-ratio: 380 / 122;
}

.epi-cutout figcaption {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-secondary);
}

/* Steht die Bildunterschrift als eigener Absatz im Panel statt als figcaption
   im Bild (so bleibt sie im Editor bearbeitbar), setzt den Abstand das Gitter
   des Panels — wie bei .epi-cutout-stack__item. */
.epi-cutout > .epi-caption {
    margin-block-start: 0;
}

/* --- Bildplatz ---------------------------------------------------------
   Rahmen fuer ein Foto. Die Motive liefert das Marketing; bis dahin steht
   der Rahmen leer und nennt im Text, was hineingehoert. */

.epi-figure {
    display: grid;
    gap: var(--wp--preset--spacing--md);
    margin: 0;
}

.epi-figure__frame {
    margin: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--standard-box-shadow);
    background-color: var(--color-secondary-20);
    aspect-ratio: var(--epi-figure-ratio, 460 / 408);
}

.epi-figure__frame img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.epi-figure figcaption {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-secondary);
}

/* --- Referenzfall (102:204) ---------------------------------------------
   Je Fall genau eine Zahl. Laesst sie sich nicht belegen, entfaellt der Fall;
   der Beleg selbst steht im Content-Brief und nicht auf der Seite. Kein
   Superlativ, keine Wertung. */

.epi-cases {
    display: grid;
    gap: 3.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media screen and (min-width: 768px) {
    .epi-cases {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

.epi-case {
    display: grid;
    gap: var(--wp--preset--spacing--sm);
    align-content: start;
}

.epi-case__title {
    margin: 0;
    font-family: var(--font-primary);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: var(--line-height-ui);
}

.epi-case__number {
    margin: 0;
    font-family: var(--font-secondary);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-accent-dark-wcag);
}

.epi-case__context {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-secondary);
}

/* --- Foto plus Ausschnitt (235:38) --------------------------------------
   Der UI-Ausschnitt liegt ueber der linken unteren Ecke des Fotos. Kleine
   Ausfuehrung ohne Bildunterschrift: die Masse sind die der Instanz in Figma
   (253 x 187, Polster 22, Eckmarke 11/7/1). Unter 1024 stehen beide
   untereinander, weil ein ueberlappender Ausschnitt dort das Foto verdeckt.
   Ableitung des Builds, in der Quelle nicht vorhanden. */

.epi-mediastack {
    position: relative;
    display: grid;
    gap: var(--wp--preset--spacing--lg);
}

.epi-cutout--compact {
    inline-size: 253px;
    padding: 22px;
    gap: 0;
    border-radius: 9px;
    box-shadow: 0 4px 9px rgb(0 0 0 / 0.1);
    --epi-cornermark-leg: 11px;
    --epi-cornermark-inset: 7px;
    --epi-cornermark-weight: 1px;
}

.epi-cutout--compact .epi-cutout__field {
    aspect-ratio: 209 / 143;
}

@media screen and (min-width: 1024px) {
    .epi-mediastack {
        display: block;
    }

    .epi-mediastack .epi-cutout--compact {
        position: absolute;
        inset-inline-start: -70px;
        inset-block-end: 0;
    }
}

/* ===========================================================================
   Bausteine der Anwendungsfall-Seiten (T-12, Digitale Belegerfassung)

   Drei neue Bausteine, alle inhaltlich begruendet:
   - Merksatz: typografische Zaesur am Ende eines Prosa-Abschnitts
   - Vergleichstabelle: bisher nur in DESIGN.md 6 spezifiziert, nie gebaut
   - Ausschnitt in Originalgroesse: haelt "nie hochskalieren" (DESIGN.md 8)
     ohne je Zuschnitt eine eigene Formatvariante anzulegen
   =========================================================================== */

/* --- Merksatz ------------------------------------------------------------
   Ein Satz, der eine Abgrenzung zieht, am Ende eines Fliesstextabschnitts.
   Traegt sein Gewicht ueber Groesse und Zeilenlaenge, nicht ueber eine
   Flaeche, einen Rand oder eine zweite Farbe: eine Grenze, die man einrahmt,
   liest sich als Hinweiskasten und nicht mehr als Teil des Gedankengangs.

   Rezeptur bewusst identisch zu .epi-warum__statement (front-page.css): 1.5rem
   Quicksand 500, nicht Lora und nicht H2-Gewicht — sonst liest sich der Absatz
   wie eine zweite Ueberschrift. Der Baustein ist dessen verallgemeinerte Form;
   .epi-warum__statement bleibt vorerst bestehen, weil front-page.css nur auf
   der Startseite geladen wird (zusammenfuehren beim naechsten Anfassen). */

.epi-merksatz {
    margin: 0;
    /* Kuerzer als die 68ch der Lesebreite: der Satz soll auf zwei bis drei
       Zeilen brechen und dadurch als eigene Aussage stehen, nicht als
       weiterer Absatz mit groesserer Schrift. */
    max-width: 38ch;
    color: var(--color-text);
    font-family: var(--font-primary);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.4;
}

/* Mit Feldmarke, wenn der Merksatz nicht abgrenzt, sondern zusagt: dann
   traegt er den Haken des Hauses (DESIGN.md 1.1) und steht damit sichtbar
   ueber den Auskuenften daneben, die keinen bekommen (DESIGN.md 6
   Themenpunkt: der Haken behauptet Nutzen, eine Auskunft tut das nicht).
   Masse und Ausrichtung wie bei .epi-point, nur auf die groessere Zeilenhoehe
   des Merksatzes gerechnet. */
.epi-merksatz--haken {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: 0.75rem;
    align-items: start;
    /* 38ch gilt fuer den Satz, nicht fuer Marke plus Satz. */
    max-width: calc(38ch + 24px + 0.75rem);
}

.epi-merksatz--haken::before {
    content: "";
    inline-size: 24px;
    block-size: 24px;
    margin-block-start: calc((1.4 * 1.5rem - 24px) / 2);
    background-image: url("../img/haken.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* --- UI-Ausschnitt in Originalgroesse ------------------------------------
   Ergaenzt die festen Formate --wide und --strip. Statt das Feld auf ein
   Seitenverhaeltnis festzulegen, bestimmt der Zuschnitt selbst seine Groesse:
   damit ist "Anzeigebreite kleiner gleich Originalbreite" (DESIGN.md 8) ohne
   je Zuschnitt eine eigene Variante eingehalten. Unter der Originalbreite
   schrumpft er proportional mit, darueber waechst er nie. */

.epi-cutout--original {
    inline-size: fit-content;
    max-inline-size: 100%;
}

.epi-cutout--original .epi-cutout__field {
    aspect-ratio: auto;
    display: block;
}

.epi-cutout--original .epi-cutout__field img {
    inline-size: auto;
    block-size: auto;
    max-inline-size: 100%;
    object-fit: none;
}

/* --- Screenshot ohne Panel -----------------------------------------------
   Ein Bildschirmfoto, das seinen eigenen Fensterrahmen mitbringt, braucht
   keinen zweiten darum. .epi-cutout setzt einen Zuschnitt auf eine Cremeflaeche,
   weil ein herausgeloestes Feld sonst in der Luft haengt — ein ganzes Fenster
   haengt nicht, es steht. Radius und Schatten heben es von der Sektionsflaeche
   ab, mehr nicht.

   fit-content statt Breite 100 %: die Anzeigebreite bleibt hoechstens die
   Originalbreite des Bildes (DESIGN.md 8, nie hochskalieren), darunter
   schrumpft es proportional mit.

   Randlinie und Schatten kommen aus dem CSS, nicht aus dem Bild: das Bild
   wird verkleinert angezeigt, seine eingezeichnete Rundung schrumpft mit, und
   eine Linie im Bild braeche an der groesseren CSS-Ecke ab. Fensterrahmen-
   Werkzeug deshalb mit --radius 16 (= --radius-lg, liefert die innere Rundung
   um den Inhalt) --no-border --shadow none --margin 0 aufrufen. */

.epi-screenshot {
    margin: 0;
    inline-size: fit-content;
    max-inline-size: 100%;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--standard-box-shadow);
}

.epi-screenshot img {
    display: block;
    inline-size: auto;
    block-size: auto;
    max-inline-size: 100%;
}

/* --- Ausschnitt-Staffel --------------------------------------------------
   Zwei Zuschnitte derselben Sache untereinander statt eines einzelnen:
   "Wer zwei Dinge zeigen will, nimmt zwei Ausschnitte" (DESIGN.md 6
   Markierung). Der zweite ist nach rechts gerueckt, weil zwei linksbuendige
   Panels unterschiedlicher Breite wie ein misslungener Stapel aussehen; der
   Versatz macht aus zwei Belegen eine Folge. Unter 768 px stehen beide
   linksbuendig, dort ist die Spalte fuer einen Versatz zu schmal.

   Die Bildunterschrift steht hier unter dem Panel statt darin: das Panel ist
   in dieser Ausfuehrung nur so breit wie der Zuschnitt (fit-content), und ein
   zweizeiliger Unterschriftstext darin wuerde genau diese Breite wieder
   aufziehen. */

.epi-cutout-stack {
    display: grid;
    gap: var(--wp--preset--spacing--xl);
    justify-items: start;
}

.epi-cutout-stack__item {
    display: grid;
    gap: var(--wp--preset--spacing--md);
    justify-items: start;
}

.epi-cutout-stack__item > .epi-caption {
    /* Den Abstand setzt das Gitter, nicht die Unterschrift. */
    margin-block-start: 0;
    max-inline-size: 42ch;
}

@media screen and (min-width: 768px) {
    .epi-cutout-stack > :nth-child(even) {
        justify-self: end;
    }
}

/* --- Abrissbeleg ---------------------------------------------------------
   Wo die Erfassung aufhoert und ein anderes Verfahren anfaengt. Die Form sagt
   dasselbe wie der Text: was die Erfassung tut, steht auf dem Beleg; was
   danach kommt, steht darunter auf der Sektionsflaeche — ausserhalb des
   Papiers, an einer Abrisskante getrennt.

   Ersetzt am 2026-09-21 den Phasenkasten (zwei gleich gebaute Eintraege aus
   Versalien-Marke und Absatz auf einer weissen Karte). Zwei gleichwertige
   Bloecke waren die falsche Aussage: der zweite Teil ist die Abgrenzung, nicht
   das zweite Angebot. Und der Stapel aus Versalien-Marke plus Fliesstext ist
   die haeufigste Kartenform ueberhaupt, also genau die, die das Haus meidet.

   Genau zwei Teile, mehr traegt die Form nicht: es gibt eine Grenze, keine
   Phasenfolge. Ab drei Eintraegen ist es eine Aufzaehlung und gehoert zu
   .epi-points.

   Die Marke ist die Feldmarke aus DESIGN.md 6: offener Kasten, 2 px in
   accent-dark-wcag, Ecke 1 px, 24 px fuer dekorative Zeichen. Die Glyphe kommt
   wie die Schrittnummer bei .epi-step aus dem CSS statt aus dem Markup — damit
   ist sie automatisch dekorativ, und die Redaktion kann sie im gesperrten
   Pattern nicht verlieren. Der zweite Kasten ist gestrichelt: ein Feld, das
   ein anderes Verfahren ausfuellt. */

.epi-abriss {
    --epi-abriss-zahn: 7px;
    --epi-abriss-teilung: 20px;
    --epi-abriss-polster: 1.5rem;
    display: grid;
    gap: var(--wp--preset--spacing--md);
}

/* Gutenberg legt auf Gruppen im Flow-Layout einen eigenen Rand zwischen die
   Kinder. Der addierte sich hier auf den Grid-Abstand. */
.epi-abriss > * {
    margin-block: 0;
}

.epi-abriss__teil {
    display: grid;
    grid-template-columns: 24px 1fr;
    column-gap: 0.75rem;
    align-items: start;
}

.epi-abriss__teil::before {
    content: var(--epi-abriss-glyphe);
    display: grid;
    place-items: center;
    inline-size: 24px;
    block-size: 24px;
    border: 2px solid var(--color-accent-dark-wcag);
    border-radius: 1px;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.875rem;
    line-height: 1;
    color: var(--color-accent-dark-wcag);
    /* Auf der ersten Zeile des Titels zentriert, nicht an dessen Oberkante
       (DESIGN.md 6). Titel ist 1.125rem auf --line-height-ui. */
    margin-block-start: calc((1.125rem * var(--line-height-ui) - 24px) / 2);
}

/* Das Papier. Ecke 5 statt der 16 der Karte: ein Beleg ist eckiger als eine
   Flaeche, und die Unterkante traegt ohnehin keinen Radius mehr, sondern die
   Perforation. */
.epi-abriss__papier {
    --epi-abriss-glyphe: "\f570";
    padding: var(--epi-abriss-polster);
    border-start-start-radius: var(--standard-border-radius);
    border-start-end-radius: var(--standard-border-radius);
    background-color: var(--color-base);
    /* Abrisskante: Halbkreise aus der Unterkante gestanzt, die Sektionsfarbe
       kommt durch. Die Maske trifft das ganze Element, die Zaehne bleiben aber
       im unteren Polster — das muss deshalb groesser sein als der Zahn. */
    -webkit-mask-image: radial-gradient(circle var(--epi-abriss-zahn) at 50% 100%, transparent calc(var(--epi-abriss-zahn) - 0.5px), #000 var(--epi-abriss-zahn));
    -webkit-mask-size: var(--epi-abriss-teilung) 100%;
    -webkit-mask-repeat: repeat-x;
    mask-image: radial-gradient(circle var(--epi-abriss-zahn) at 50% 100%, transparent calc(var(--epi-abriss-zahn) - 0.5px), #000 var(--epi-abriss-zahn));
    mask-size: var(--epi-abriss-teilung) 100%;
    mask-repeat: repeat-x;
}

/* Ohne eigene Flaeche direkt auf der Sektion: gehoert nicht mehr zum Beleg.
   Seitlich auf dessen Polster eingerueckt, damit beide Titel auf einer
   Fluchtlinie stehen. */
.epi-abriss__danach {
    --epi-abriss-glyphe: "\e4bc";
    padding-inline: var(--epi-abriss-polster);
}

.epi-abriss__danach::before {
    border-style: dashed;
}

.epi-abriss__titel {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-family: var(--font-primary);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: var(--line-height-ui);
}

/* Buendig unter dem Titel, nicht unter der Marke (DESIGN.md 6). */
.epi-abriss__text {
    grid-column: 2;
    margin-block: var(--wp--preset--spacing--sm) 0;
    font-size: 1rem;
    line-height: 1.5;
}

/* --- Ausblick ------------------------------------------------------------
   Abschliessende Sektion mit Verweisen auf die Nachbarthemen. Titel mittig und
   die Karten schmaler als der Inhaltsbereich: die Sektion traegt den Ausgang
   der Seite, nicht ihr Anliegen, und nimmt sich dafuer sichtbar zurueck.

   Die Karten haben die Breite der Viererreihe (siehe Produktkarte), die
   kuerzere Reihe steht mittig unter dem mittigen Titel. */

/* Der Intro-Text steht mittig unter dem Titel, in der Lesebreite aus
   .epi-intro, damit lange Intros nicht ueber die ganze Breite laufen. */
.epi-ausblick > :is(h2, .epi-intro) {
    /* Schlaegt die 820-px-Begrenzung aus .epi-section nicht, sondern nutzt
       sie: 820 zentriert in 1200 ist genau der Satz aus dem Entwurf. */
    margin-inline: auto;
    text-align: center;
}

/* Die Reihe bleibt so breit wie der Inhaltsbereich, damit die Notizen die
   Breite der Viererreihe behalten; justify-content stellt die kuerzere
   Reihe mittig. */
.epi-ausblick > .epi-ausblick__karten {
    justify-content: center;
}

/* ===========================================================================
   Bausteine der Anwendungsfall-Seiten (T-12, Elektronische Formulare)
   =========================================================================== */

/* --- Zwei Wege (697:3269) ------------------------------------------------
   Zwei Wege, die in dasselbe Ergebnis laufen: Karten, Zusammenlauf und
   Ergebnisband sind EINE Grafik (SVG als Bild), nicht gebautes HTML/CSS.
   Regel: Darstellungen dieser Art werden als SVG gerendert und als Bild
   eingebunden. Erzeugt wird sie von tools/diagramme/zwei-wege.mjs aus
   tools/diagramme/zwei-wege.json, die Dateien liegen in design/diagramme/.
   Die Schrift ist zu Pfaden umgewandelt; der Text steht im Alt-Text des
   Bildes.

   Zwei Fassungen, weil ein Verkleinern der breiten Grafik den Text unlesbar
   machen würde: breit (zwei Karten nebeneinander, 460 px) und schmal (Karten
   untereinander, 340 px). Im Editor steht nur EIN Bildblock mit der breiten
   Fassung; die schmale ergänzt inc/zwei-wege.php als <source>. Die Spalte
   neben dem Fließtext ist höchstens 460 px breit und zwischen 1024 und
   1119 px Fensterbreite nur 346 bis 380 px: dort steht die schmale Fassung. */

.epi-wege__bild {
    margin: 0;
    /* Höchstens in der Größe, in der die Grafik gezeichnet ist: dort
       entspricht der Text im Bild der Schriftgröße der Seite (16 px). */
    max-inline-size: 460px;
}

.epi-wege__bild img {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

@media screen and (max-width: 767px), screen and (min-width: 1024px) and (max-width: 1119px) {
    .epi-wege__bild:has(source) {
        max-inline-size: 340px;
    }
}

/* --- Wegwahl (epi/wegwahl) ------------------------------------------------
   Zwei gleichrangige Wege an einer Illustration, die beide zeigt. Ohne Skript
   und im Editor: Bild, darunter die Wege als zwei Karten, darunter das
   gemeinsame Ergebnis. Mit assets/js/wegwahl.js (.is-aktiv) wird daraus eine
   Bühne: ein Umschalter liegt über dem Bild, die gewählte Bildhälfte rückt in
   den Blick, die andere wird unscharf (Tiefenschärfe), und die Angaben des
   Wegs liegen als Glasfläche über der unscharfen Hälfte.

   Glas: der Umschalter und das Ergebnis sind schwebendes UI-Chrome und
   folgen dem Rezept components.glasoptik. Die Angaben-Fläche ist bewusst
   durchlässiger, weil sie über der unscharfen Bildhälfte liegt und das Glas
   dort sichtbar werden soll (Nutzerwunsch, Abweichung von DESIGN.md 5). */

.epi-wegwahl {
    --epi-wegwahl-glas: rgba(255, 255, 255, 0.7);
    --epi-wegwahl-glasrand: rgba(255, 255, 255, 0.85);
    --epi-wegwahl-takt: 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
    display: grid;
    gap: var(--wp--preset--spacing--md);
}

.epi-wegwahl__bild {
    margin: 0;
}

.epi-wegwahl__bild img {
    display: block;
    inline-size: 100%;
    max-inline-size: 760px;
    block-size: auto;
    margin-inline: auto;
}

.epi-wegwahl__weg {
    padding: var(--wp--preset--spacing--lg);
    border-radius: var(--radius-lg);
    background: var(--color-base);
}

@media screen and (min-width: 768px) {
    .epi-wegwahl:not(.is-aktiv) {
        grid-template-columns: 1fr 1fr;
    }

    .epi-wegwahl:not(.is-aktiv) > :is(.epi-wegwahl__bild, .epi-wegwahl__ziel) {
        grid-column: 1 / -1;
    }
}

/* Angaben eines Wegs: Titel, Art, darunter Merkmalzeilen wie ein Datenblatt
   (Merkmal links, Ausprägung rechts, Haarlinie dazwischen). */
.epi-wegwahl__titel {
    margin: 0;
}

.epi-wegwahl__art {
    margin: 0.25rem 0 0;
    color: var(--color-secondary);
}

.epi-wegwahl__zeile {
    display: grid;
    grid-template-columns: 8rem 1fr;
    column-gap: var(--wp--preset--spacing--md);
    align-items: baseline;
    margin: 0;
    padding-block: 0.85rem;
    border-block-start: 1px solid var(--color-line);
    line-height: 1.45;
}

.epi-wegwahl__art + .epi-wegwahl__zeile {
    margin-block-start: var(--wp--preset--spacing--md);
}

.epi-wegwahl__zeile:last-child {
    padding-block-end: 0;
}

.epi-wegwahl__zeile strong {
    font-size: 1rem;
    font-weight: 700;
}

.epi-wegwahl__ziel {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    margin: 0;
}

.epi-wegwahl__ziel strong {
    color: var(--color-accent-dark-wcag);
}

/* Raster der Sektion: Bühne 2/3, Text 1/3 daneben. Im Markup steht der
   Text zuerst, damit er schmal über der Bühne steht. */
.epi-wegwahl-raster {
    display: grid;
    gap: var(--wp--preset--spacing--lg);
}

.epi-wegwahl-text {
    display: grid;
    align-content: start;
    gap: var(--wp--preset--spacing--md);
}

.epi-wegwahl-text p {
    margin: 0;
}

@media screen and (min-width: 1024px) {
    .epi-wegwahl-raster {
        grid-template-columns: 2fr 1fr;
        column-gap: var(--wp--preset--spacing--xl);
    }

    .epi-wegwahl-raster > .epi-wegwahl {
        grid-column: 1;
        grid-row: 1;
    }

    .epi-wegwahl-raster > .epi-wegwahl-text {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
    }
}

/* Bühne (mit Skript) */
.epi-wegwahl.is-aktiv {
    container-type: inline-size;
    position: relative;
    isolation: isolate;
    display: block;
    min-block-size: clamp(28rem, 38vw, 34rem);
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-base);
}

.is-aktiv > .epi-wegwahl__bild {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 4.5rem var(--wp--preset--spacing--lg);
}

.epi-wegwahl__kamera {
    position: relative;
    inline-size: min(64%, 720px);
    transition: transform var(--epi-wegwahl-takt);
}

.epi-wegwahl__kamera img {
    max-inline-size: none;
    margin: 0;
    transition: opacity 0.45s ease;
}

/* Zwei Kopien, je eine Bildhälfte mit weichem Übergang zur Mitte. In
   „Beide" steht das Original allein; bei einem Weg übernehmen die Hälften,
   und die nicht gewählte wird unscharf. */
.epi-wegwahl__haelfte {
    --epi-haelfte-luft: 4rem;
    position: absolute;
    inset: calc(-1 * var(--epi-haelfte-luft));
    padding: var(--epi-haelfte-luft);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s ease, filter var(--epi-wegwahl-takt);
}

.epi-wegwahl__haelfte img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
}

.epi-wegwahl__haelfte--links {
    -webkit-mask-image: linear-gradient(to right, #000 44%, transparent 56%);
    mask-image: linear-gradient(to right, #000 44%, transparent 56%);
}

.epi-wegwahl__haelfte--rechts {
    -webkit-mask-image: linear-gradient(to left, #000 44%, transparent 56%);
    mask-image: linear-gradient(to left, #000 44%, transparent 56%);
}

.is-aktiv:not([data-ansicht="beide"]) .epi-wegwahl__kamera > img:first-child {
    opacity: 0;
}

.is-aktiv:not([data-ansicht="beide"]) .epi-wegwahl__haelfte {
    opacity: 1;
}

[data-ansicht="links"] .epi-wegwahl__kamera {
    transform: translateX(-18%) scale(1.04);
}

[data-ansicht="rechts"] .epi-wegwahl__kamera {
    transform: translateX(18%) scale(1.04);
}

[data-ansicht="links"] .epi-wegwahl__haelfte--rechts,
[data-ansicht="rechts"] .epi-wegwahl__haelfte--links {
    filter: blur(14px) saturate(1.15);
}

/* Angaben als Glasfläche über der unscharfen Hälfte: Weg 1 (linke
   Bildhälfte) erscheint rechts, Weg 2 links. */
.is-aktiv > .epi-wegwahl__weg {
    position: absolute;
    z-index: 2;
    inset-block-start: 50%;
    inline-size: min(26rem, 46%);
    padding: 1.5rem 1.75rem 1.25rem;
    border: 1px solid var(--epi-wegwahl-glasrand);
    background: var(--epi-wegwahl-glas);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: var(--standard-box-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translate(var(--epi-weg-versatz), -50%);
    transition: opacity 0.35s ease, transform var(--epi-wegwahl-takt), visibility 0s linear 0.35s;
}

.is-aktiv > .epi-wegwahl__weg.is-links {
    --epi-weg-versatz: 1.5rem;
    inset-inline-end: 5%;
}

.is-aktiv > .epi-wegwahl__weg.is-rechts {
    --epi-weg-versatz: -1.5rem;
    inset-inline-start: 5%;
}

[data-ansicht="links"] > .epi-wegwahl__weg.is-links,
[data-ansicht="rechts"] > .epi-wegwahl__weg.is-rechts {
    --epi-weg-versatz: 0px;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.45s ease 0.15s, transform var(--epi-wegwahl-takt) 0.1s, visibility 0s;
}

/* In einer schmalen Bühne steht das Merkmal über der Ausprägung. */
@container (max-width: 56rem) {
    .epi-wegwahl__zeile {
        grid-template-columns: 1fr;
        row-gap: 0.1rem;
    }
}

/* Schieber: eine vertiefte Rinne mit drei gleich breiten Rasten, darin ein
   erhabener Knopf. Mittig über der Bühne, die Reihenfolge folgt dem Bild
   (Weg 1 links, Beide in der Mitte, Weg 2 rechts). Die Rinne ist schwebendes
   Chrome (components.glasoptik). */
.epi-wegwahl__schalter {
    position: absolute;
    z-index: 3;
    inset-block-start: var(--wp--preset--spacing--md);
    inset-inline-start: 50%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 0.5rem;
    min-inline-size: min(36rem, calc(100% - 2 * var(--wp--preset--spacing--md)));
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    background-color: rgba(229, 229, 226, 0.8);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.14);
    transform: translateX(-50%);
    touch-action: pan-y;
    user-select: none;
}

.epi-wegwahl__knopf {
    position: relative;
    z-index: 1;
    /* Die Raste füllt ihre Spalte; die globale Button-Regel setzt sonst
       fit-content, und der Knopf wäre nur so breit wie die Beschriftung. */
    inline-size: 100%;
    padding: 0.6rem 1.5rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--color-text);
    font: 700 1rem/1.2 var(--font-primary);
    white-space: nowrap;
    cursor: pointer;
}

/* Die globalen Button-Zustände (orange Fläche bei Hover und Aktiv) gelten
   hier nicht: orange ist allein der Knopf des Schiebers. */
.epi-wegwahl__knopf:is(:hover, :active) {
    border-color: transparent;
    background-color: transparent;
    box-shadow: none;
}

.epi-wegwahl__knopf:hover {
    color: var(--color-accent-dark-wcag);
}

.epi-wegwahl__knopf[aria-pressed="true"] {
    color: var(--color-text);
    cursor: grab;
}

.epi-wegwahl__schalter.is-ziehen .epi-wegwahl__knopf {
    cursor: grabbing;
}

.epi-wegwahl__knopf:focus-visible {
    outline: 3px solid var(--color-accent-dark-wcag);
    outline-offset: 2px;
}

/* Der eine orange Punkt der Sektion: der Knopf des Schiebers. Erhaben über
   der Rinne, mit Lichtkante oben. */
.epi-wegwahl__schieber {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: var(--epi-schieber-b, 0);
    block-size: var(--epi-schieber-h, 0);
    border-radius: 999px;
    background: var(--color-primary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 1px 2px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.14);
    transform: translate(var(--epi-schieber-x, 0), var(--epi-schieber-y, 0));
    transition: transform var(--epi-wegwahl-takt), inline-size var(--epi-wegwahl-takt);
}

.epi-wegwahl__schalter.is-ziehen .epi-wegwahl__schieber {
    transition-duration: 0.2s;
}

.is-aktiv > .epi-wegwahl__ziel {
    position: absolute;
    z-index: 2;
    inset-block-end: var(--wp--preset--spacing--md);
    inset-inline-start: 50%;
    padding: 0.6rem 1.25rem;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    white-space: nowrap;
    transform: translateX(-50%);
    transition: opacity 0.35s ease;
}

.is-aktiv:not([data-ansicht="beide"]) > .epi-wegwahl__ziel {
    opacity: 0;
    visibility: hidden;
}

/* Schmal: Umschalter über, Angaben unter dem Bild. Die Glasfläche greift
   von unten ins Bild, die Bildhälften bleiben scharf und unscharf. */
@media screen and (max-width: 767px) {
    .epi-wegwahl.is-aktiv {
        display: grid;
        gap: var(--wp--preset--spacing--md);
        min-block-size: 0;
        padding: 0.75rem;
    }

    .epi-wegwahl__schalter {
        position: relative;
        inset: auto;
        display: flex;
        column-gap: 0.25rem;
        min-inline-size: 0;
        transform: none;
    }

    .epi-wegwahl__knopf {
        flex: 1 1 auto;
        min-inline-size: 0;
        padding: 0.5rem 0.4rem;
        font-size: 0.875rem;
        line-height: 1.15;
        white-space: normal;
    }

    .is-aktiv > .epi-wegwahl__bild {
        position: static;
        padding: var(--wp--preset--spacing--sm) 0 0;
    }

    .epi-wegwahl__kamera {
        inline-size: 100%;
    }

    [data-ansicht="links"] .epi-wegwahl__kamera {
        transform: translateX(8%);
    }

    [data-ansicht="rechts"] .epi-wegwahl__kamera {
        transform: translateX(-8%);
    }

    .is-aktiv > .epi-wegwahl__weg,
    .is-aktiv > .epi-wegwahl__weg:is(.is-links, .is-rechts),
    .is-aktiv > .epi-wegwahl__ziel {
        position: relative;
        inset: auto;
        inline-size: auto;
        transform: none;
        white-space: normal;
    }

    .is-aktiv > .epi-wegwahl__weg {
        display: none;
        margin-block-start: -3.5rem;
        padding: 1.25rem 1.25rem 1rem;
    }

    [data-ansicht="links"] > .epi-wegwahl__weg.is-links,
    [data-ansicht="rechts"] > .epi-wegwahl__weg.is-rechts {
        display: block;
    }

    .is-aktiv:not([data-ansicht="beide"]) > .epi-wegwahl__ziel {
        display: none;
    }

    .epi-wegwahl__zeile {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .epi-wegwahl *,
    .epi-wegwahl.is-aktiv > * {
        transition: none !important;
    }
}

/* --- Aktenreiter (epi/aktenreiter) ----------------------------------------
   Drei Mappen wie in einem Karteikasten. Mappe und Reiter sind ein Stueck
   Manilakarton, der Reiter ist angeschraegt, und die hinteren Mappen ragen
   hinter der vorderen je eine Stufe hoeher heraus. Ein Klick holt eine
   Mappe nach vorn, die vorige rutscht direkt dahinter. Karton in Orange 50,
   nach hinten dunkler (Hintergrund und Abstufung, DESIGN.md 2.1). Radius 5:
   eine Mappe ist ein Blatt, keine grosse Flaeche (DESIGN.md 5).

   Grundzustand ohne Skript und im Editor: alle Mappen untereinander, jede
   mit ihrem Reiter. aktenreiter.js setzt .is-register, legt die Mappen in
   dieselbe Rasterzelle, macht die Reiter zu Buttons und schreibt jeder
   Mappe ihre Tiefe im Stapel (data-tiefe 0 bis 2). Der Inhalt steht so
   oder so vollstaendig im Markup (DESIGN.md 7). */

.epi-akten {
    --epi-akte-polster: 2.5rem;
    --epi-akte-luecke: 0.5rem;
    /* Alle Reiter gleich breit wie echte Registerreiter, hoechstens ein
       Drittel der Mappe. Die Prozente loesen erst am Reiter auf. */
    --epi-akte-reiter-breite: min(13rem, calc((100% - 2 * var(--epi-akte-luecke)) / 3));
    /* Um so viel ragt jede weiter hinten stehende Mappe hoeher heraus. */
    --epi-akte-stufe: 0.875rem;
    --epi-akte-kante: color-mix(in srgb, var(--color-primary-hover) 45%, var(--color-base));
    display: grid;
    row-gap: var(--wp--preset--spacing--lg);
    isolation: isolate;
}

/* Gutenberg setzt im Flow-Layout eigene Raender zwischen die Kinder. */
.epi-akten > *,
.epi-akte > *,
.epi-akte__mappe > * {
    margin-block: 0;
}

.epi-akte {
    --epi-akte-stelle: 0;
    --epi-akte-neigung: -1.5deg;
    --epi-akte-karton: color-mix(in srgb, var(--color-primary-50) 30%, var(--color-base));
    display: grid;
    justify-items: start;
}

.epi-akte:nth-child(2 of .epi-akte) {
    --epi-akte-stelle: 1;
    --epi-akte-neigung: 1deg;
}

.epi-akte:nth-child(3 of .epi-akte) {
    --epi-akte-stelle: 2;
    --epi-akte-neigung: -0.75deg;
}

/* Jeder Reiter hat seinen festen Platz auf der Oberkante, einer neben dem
   anderen, und bleibt dort, auch wenn seine Mappe vorn liegt: ein Reiter,
   der beim Klicken zur Seite wandert, verfehlt der naechste Klick. */
.epi-akte__reiter {
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    inline-size: var(--epi-akte-reiter-breite);
    margin-inline-start: calc(var(--epi-akte-stelle) * (var(--epi-akte-reiter-breite) + var(--epi-akte-luecke)));
    padding: 0.75rem 1.5rem 0.625rem;
    color: var(--color-text);
    font-family: var(--font-primary);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: var(--line-height-ui);
    text-align: center;
    text-transform: none;
    letter-spacing: normal;
    hyphens: auto;
    overflow-wrap: break-word;
}

/* Die Form des Reiters zeichnet ::before: ein Rechteck, das per
   Perspektive zum Trapez kippt, so bleiben Rand und Rundung erhalten. Es
   reicht einen Pixel in die Mappe und deckt deren Oberkante ab, Reiter und
   Mappe sind ein Zuschnitt. Oben ragt es etwas ueber, weil das Kippen die
   Form niedriger macht. */
.epi-akte__reiter::before {
    content: "";
    position: absolute;
    inset: -0.375rem 0 -1px;
    z-index: -1;
    background-color: var(--epi-akte-karton);
    border: 1px solid var(--epi-akte-kante);
    border-block-end: 0;
    border-radius: 0.5rem 0.5rem 0 0;
    transform: perspective(6.25rem) rotateX(13deg);
    transform-origin: bottom;
    transition: background-color var(--motion-state-duration) var(--motion-state-easing);
}

/* align-content: im Register ist jede Mappe so hoch wie die hoechste; der
   Inhalt einer kuerzeren bleibt oben, der Rest ist leerer Karton. */
.epi-akte__mappe {
    display: grid;
    gap: var(--wp--preset--spacing--lg);
    align-content: start;
    justify-self: stretch;
    padding: var(--epi-akte-polster);
    background-color: var(--epi-akte-karton);
    border: 1px solid var(--epi-akte-kante);
    border-radius: var(--standard-border-radius);
    transition: background-color var(--motion-state-duration) var(--motion-state-easing);
}

/* Der erste Reiter steht buendig links, dort bleibt die Ecke der Mappe
   rechtwinklig. Im Register gilt das fuer jede Mappe, weil der erste
   Reiter immer auf ihrer Ecke sitzt. */
.epi-akte:nth-child(1 of .epi-akte) > .epi-akte__mappe,
.epi-akten.is-register .epi-akte__mappe {
    border-start-start-radius: 0;
}

.epi-akte__bild {
    margin: 0;
}

/* Das Foto liegt wie ein Abzug in der Mappe: leicht schraeg und mit dem
   Papierschatten der Produktkarte (Schraeglage-Regel DESIGN.md 6, Token
   elevation.papier), je Mappe anders geneigt. Feste Hoehe wie bei
   .epi-card__media: Cores ".wp-block-image img { height: auto }" und ein
   Hochformat wuerden die Mappen sonst ungleich hoch machen. */
.epi-akte__bild img {
    display: block;
    inline-size: 100% !important;
    block-size: 12.5rem !important;
    object-fit: cover;
    border-radius: var(--standard-border-radius);
    box-shadow: 0 6px 14px 0 rgb(120 92 40 / 0.22), 0 1px 2px 0 rgb(120 92 40 / 0.18);
    rotate: var(--epi-akte-neigung);
}

.epi-akte__text {
    max-inline-size: var(--prose-max-width);
}

/* Register: alle Mappen in einer Rasterzelle. Das Subgrid gibt allen
   Reitern dieselbe Zeile und allen Mappen dieselbe Hoehe. Jede Mappe
   rueckt um ihre Tiefe im Stapel nach oben und nach hinten; von den
   hinteren bleiben Reiter und ein Streifen Oberkante sichtbar. Oben haelt
   die Sektion Platz fuer die zwei Stufen frei. */
.epi-akten.is-register {
    grid-template-rows: auto auto;
    row-gap: 0;
    padding-block-start: calc(2 * var(--epi-akte-stufe));
}

.epi-akten.is-register > .epi-akte {
    --epi-akte-tiefe: 0;
    grid-row: 1 / span 2;
    grid-column: 1;
    grid-template-rows: subgrid;
    z-index: calc(3 - var(--epi-akte-tiefe));
    translate: 0 calc(-1 * var(--epi-akte-tiefe) * var(--epi-akte-stufe));
    pointer-events: none;
    transition: translate 240ms var(--motion-state-easing);
}

.epi-akten.is-register > .epi-akte[data-tiefe="1"] {
    --epi-akte-tiefe: 1;
    --epi-akte-karton: color-mix(in srgb, var(--color-primary-50) 55%, var(--color-base));
}

.epi-akten.is-register > .epi-akte[data-tiefe="2"] {
    --epi-akte-tiefe: 2;
    --epi-akte-karton: color-mix(in srgb, var(--color-primary-50) 80%, var(--color-base));
}

/* Die Mappe selbst ist fuer den Zeiger durchlaessig, sonst faengt die
   vordere die Klicks auf die Reiter dahinter ab. */
.epi-akten.is-register .epi-akte__reiter,
.epi-akten.is-register .is-vorn > .epi-akte__mappe {
    pointer-events: auto;
}

.epi-akten.is-register .epi-akte__reiter {
    align-self: stretch;
    padding: 0;
}

/* Eine hintere Mappe hebt sich unter dem Zeiger ein Stueck aus dem Stapel. */
.epi-akten.is-register > .epi-akte:not(.is-vorn):has(> .epi-akte__reiter:hover) {
    translate: 0 calc(-1 * var(--epi-akte-tiefe) * var(--epi-akte-stufe) - 0.25rem);
}

/* Setzt die globale Button-Gestaltung (global.css) zurueck: der Reiter ist
   die Flaeche, der Button fuellt ihn nur als Klickziel. */
.epi-akten .epi-akte__knopf,
.epi-akten .epi-akte__knopf:is(:hover, :active) {
    display: block;
    box-sizing: border-box;
    inline-size: 100%;
    block-size: 100%;
    min-block-size: var(--touch-min);
    margin: 0;
    padding: 0.625rem 1.5rem;
    background: none;
    border: 0;
    border-radius: inherit;
    box-shadow: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: inherit;
    text-transform: inherit;
}

@media (prefers-reduced-motion: reduce) {
    .epi-akten.is-register > .epi-akte {
        transition: none;
    }
}

@media screen and (min-width: 768px) {
    .epi-akte__mappe {
        grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
        column-gap: var(--wp--preset--spacing--xl);
        align-items: center;
    }

    .epi-akte__bild img {
        block-size: 16rem !important;
    }
}

@media screen and (max-width: 767px) {
    .epi-akten {
        --epi-akte-polster: 1.25rem;
        --epi-akte-luecke: 0.25rem;
    }

    .epi-akte__reiter {
        padding: 0.625rem 0.5rem 0.5rem;
        font-size: 0.9375rem;
    }

    .epi-akten .epi-akte__knopf,
    .epi-akten .epi-akte__knopf:is(:hover, :active) {
        padding: 0.625rem 0.5rem;
    }
}

/* --- Ausbaustufen (epi/ausbaustufen) --------------------------------------
   Drei Stufen einer Einfuehrung als wachsende Flaeche auf dem
   Kaestchenraster. Links Titel und Satz je Stufe, rechts daneben ihre
   Flaeche: sie reicht in der Hoehe genau bis zum Ende ihres Textes und
   wird mit jeder Stufe um ein Drittel breiter. Alle Flaechen teilen die
   linke obere Ecke, jede schliesst die vorige ein, und wo sie sich decken,
   wird der Ton dichter. Die Form sagt, was der Text sagt: was dazukommt,
   legt sich um das Bestehende, statt es abzuloesen. Keine Nummern, die
   Reihenfolge steht in der Form (die Feldmarke Art=Nummer gehoert dem
   Ablauf, DESIGN.md 6).

   Die Flaeche gehoert als ::before und ::after zur Stufe. .epi-stufe steht
   als display: contents im Raster der .epi-stufen, dadurch sind Titel,
   Satz und Flaeche Zellen desselben Gitters, und die Flaeche kann ueber
   die Zeilen der vorigen Stufen hinaufreichen. Sie ist reine Zeichnung;
   die Aussage steht vollstaendig im Text.

   Breiten in ganzen Kaestchen (--grid-mesh), damit die rechten Kanten auf
   Rasterlinien fallen; das eine Pixel dazu legt den Rand auf die Linie
   statt daneben.

   Ton aus Orange 50, der CD-Farbe fuer Abstufungen in Grafiken (DESIGN.md
   2.1). Gesaettigtes Orange traegt nur der Umriss der aktuellen Stufe, der
   eine orange Punkt der Sektion (2.4). */

.epi-stufen {
    --epi-stufe-zellen: 4;
    --epi-stufe-luft: 1.5rem;
    --epi-stufe-ton: color-mix(in srgb, var(--color-primary-50) 50%, transparent);
    --epi-stufe-rand: color-mix(in srgb, var(--color-primary-hover) 50%, transparent);
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc(3 * var(--epi-stufe-zellen) * var(--grid-mesh) + 1px);
    grid-template-rows: repeat(6, auto);
    column-gap: var(--wp--preset--spacing--xl);
    isolation: isolate;
}

.epi-stufen > *,
.epi-stufe > * {
    margin-block: 0;
}

/* Kaestchenraster unter allen drei Flaechen, so gross wie die dritte. */
.epi-stufen::before {
    content: "";
    grid-column: 2;
    grid-row: 1 / -1;
    background-image:
        repeating-linear-gradient(to right, var(--color-secondary-20) 0 1px, transparent 1px var(--grid-mesh)),
        repeating-linear-gradient(to bottom, var(--color-secondary-20) 0 1px, transparent 1px var(--grid-mesh));
}

.epi-stufe {
    --epi-stufe-nr: 1;
    display: contents;
}

.epi-stufe:nth-child(2 of .epi-stufe) {
    --epi-stufe-nr: 2;
}

.epi-stufe:nth-child(3 of .epi-stufe) {
    --epi-stufe-nr: 3;
}

.epi-stufe__titel {
    grid-column: 1;
    padding-block-start: var(--epi-stufe-luft);
}

.epi-stufe__text {
    grid-column: 1;
    max-inline-size: var(--prose-max-width);
    padding-block: 0.5rem var(--epi-stufe-luft);
}

/* Jede Flaeche besteht aus zwei Teilen in derselben Rasterzelle: ::before
   ist der Umriss, ::after die Fuellung. Die Umrisse liegen ueber allen
   Fuellungen, damit keine Fuellung eine Kante verdeckt. */
.epi-stufe::before,
.epi-stufe::after {
    content: "";
    grid-column: 2;
    grid-row: 1 / 3;
    justify-self: start;
    box-sizing: border-box;
    inline-size: calc(var(--epi-stufe-nr) * var(--epi-stufe-zellen) * var(--grid-mesh) + 1px);
}

.epi-stufe::before {
    z-index: calc(7 - var(--epi-stufe-nr));
    border: 1px solid var(--epi-stufe-rand);
    transition:
        border-color var(--motion-state-duration) var(--motion-state-easing),
        box-shadow var(--motion-state-duration) var(--motion-state-easing);
}

/* 560 ms: eine Flaeche waechst sichtbar, bleibt aber unter der Grenze von
   600 ms fuer Sektionsauftritte (DESIGN.md 7). ausbaustufen.js liest die
   Dauer als Takt fuer die naechste Stufe. */
.epi-stufe::after {
    z-index: calc(4 - var(--epi-stufe-nr));
    background-color: var(--epi-stufe-ton);
    clip-path: inset(0);
    transition: clip-path 560ms var(--motion-entrance-easing);
}

.epi-stufe:nth-child(2 of .epi-stufe)::before,
.epi-stufe:nth-child(2 of .epi-stufe)::after {
    grid-row: 1 / 5;
}

.epi-stufe:nth-child(3 of .epi-stufe)::before,
.epi-stufe:nth-child(3 of .epi-stufe)::after {
    grid-row: 1 / 7;
}

/* Wachsen mit dem Lesen (ausbaustufen.js, auf Wunsch des Nutzers): eine
   Stufe ist erreicht, sobald ihr Titel die Lesezeile passiert hat, und
   unter dem Mauszeiger gilt die Stufe unter dem Zeiger. Die Fuellung
   waechst aus der gemeinsamen Ecke oben links, ueber clip-path statt ueber
   Breite und Hoehe. Noch nicht erreichte Stufen stehen als gestrichelter
   Umriss da und zeigen, was noch kommt. Abweichung von DESIGN.md 7: der
   Zustand folgt der Scrollposition in beide Richtungen, statt einmal
   aufzutreten. */
.epi-stufen.is-wachsend .epi-stufe:not(.is-erreicht)::before {
    border-style: dashed;
}

.epi-stufen.is-wachsend .epi-stufe:not(.is-erreicht)::after {
    clip-path: inset(0 100% 100% 0);
}

.epi-stufen.is-wachsend .epi-stufe.is-aktuell::before {
    border-color: var(--color-primary);
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

/* Erster Stand beim Laden ohne Uebergang, sonst schrumpft eine schon
   sichtbare Flaeche erst und waechst dann wieder. */
.epi-stufen.is-ruhig .epi-stufe::after {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .epi-stufe::after {
        transition: none;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .epi-stufen {
        --epi-stufe-zellen: 2;
    }
}

@media screen and (max-width: 767px) {
    .epi-stufen {
        --epi-stufe-zellen: 1;
        --epi-stufe-luft: 1.25rem;
        column-gap: 1rem;
    }

    .epi-stufe__titel {
        font-size: 1.375rem;
    }
}

/* --- Editoriale Liste (epi/editoriale-liste) --------------------------------
   Seit dem Pattern-Umbau ein allgemeiner Baustein, deshalb hier statt in
   front-page.css. Ursprung: Startseite, Sektion 4.
   Editoriale Liste ohne Karten oder Nummern: Titel (Lora Bold) fest 400 px
   links, Fliesstext rechts fuellt den Rest, getrennt durch .epi-divider
   (sections.css) vor und nach jeder Zeile. */

.epi-editorial-list {
    display: flex;
    flex-direction: column;
}

/* Kreuzungspunkt Label/Text-Spalte einmal definiert (400px Label + halber
   Spaltenabstand), von horizontaler und vertikaler Linie gemeinsam genutzt
   — sonst laufen beide Werte auseinander, sobald einer angepasst wird. */
.epi-editorial-list {
    --epi-editorial-cross: calc(400px + var(--wp--preset--spacing--xl) / 2);
}

/* Zweiter Anlauf (Korrektur 2026-09-15, Nutzer-Befund 1: der gleichmaessige
   1rem-Einzug auf beiden Seiten schob die Linie am linken Ende vom Text weg,
   der im Aufgaben-Kasten links immer buendig mit dem Zellen-Inhalt beginnt).
   Links deshalb kein Einzug mehr — die Linie beginnt exakt auf Hoehe des
   Label-Texts —, rechts bleibt der Einzug wie zuvor.
   Nutzer-Befund 2: die horizontale Linie lief ungebrochen durch die
   Kreuzung mit der vertikalen — im Aufgaben-Kasten hat KEINE der beiden
   Linien an einer Kreuzung Kontakt, nicht nur eine. Deshalb border ersetzt
   durch einen Farbverlauf mit einer 2rem breiten, um --epi-editorial-cross
   zentrierten Luecke (1rem Rueckzug auf jeder Seite, derselbe Betrag wie
   beim inset-block der Vertikalen unten). */
.epi-editorial-list .epi-divider {
    margin-inline: 0 1rem;
    border: 0;
    block-size: 1px;
    background-image: linear-gradient(
        to right,
        var(--color-line) 0 calc(var(--epi-editorial-cross) - 1rem),
        transparent calc(var(--epi-editorial-cross) - 1rem) calc(var(--epi-editorial-cross) + 1rem),
        var(--color-line) calc(var(--epi-editorial-cross) + 1rem) 100%
    );
}

.epi-editorial-row {
    position: relative;
    display: flex;
    gap: var(--wp--preset--spacing--xl);
    padding-block: 2.25rem;
}

/* Vertikale Trennlinie zwischen Label- und Textspalte (Nutzer-Befund
   2026-09-15: fehlte ganz) — mit demselben 1rem-Abstand zu den horizontalen
   Linien an Zeilenanfang/-ende wie im Aufgaben-Kasten, damit sie dort nicht
   aufeinandertreffen. Nur im Zweispalten-Layout: die 768px-Regel weiter unten
   stapelt Label ueber Text, dort gibt es keine Spalten mehr zu trennen. */
.epi-editorial-row::before {
    content: "";
    position: absolute;
    inset-block: 1rem;
    inset-inline-start: var(--epi-editorial-cross);
    width: 1px;
    background-color: var(--color-line);
}

.epi-editorial-row__label {
    flex: 0 0 400px;
    margin: 0;
    color: var(--color-text);
    font-family: var(--font-secondary);
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.3;
}

/* Fliesstextgroesse wie im uebrigen Inhalt; 16 px wirkten neben dem
   26-px-Label wie eine Fussnote. 65 Zeichen halten die Zeile lesbar. */
.epi-editorial-row__body {
    flex: 1 1 0;
    min-width: 0;
    max-width: 65ch;
    margin: 0;
    color: var(--color-text);
    font-size: 1.125rem;
    line-height: 1.65;
}

@media screen and (max-width: 768px) {
    /* Keine Kreuzung mehr zu umgehen, sobald Label und Text uebereinander
       stapeln — Luecke raus, Linie wieder durchgehend. */
    .epi-editorial-list .epi-divider {
        background-image: none;
        background-color: var(--color-line);
    }

    .epi-editorial-row {
        flex-direction: column;
        gap: 0.75rem;
        padding-block: 1.5rem;
    }

    .epi-editorial-row::before {
        content: none;
    }

    .epi-editorial-row__label {
        flex-basis: auto;
    }
}

/* --- Fenster (epi/fenster) ------------------------------------------------
   Ein Screenshot im Windows-11-Programmfenster, gebaut aus HTML/CSS statt ins
   Bild montiert. Die drei Chrome-Knoepfe geben einen CTA frei, der immer
   schon da ist: .epi-fenster__hinten liegt absolut (inset: 0) exakt unter dem
   Fenster. So bestimmt allein das in-flow-Fenster (.epi-fenster__buehne ist
   fit-content) die Groesse der Buehne — Minimieren/Schliessen aendern nur
   transform/opacity, nie Breite oder Hoehe, und die Seite springt nicht
   (Vertrag: kein Layout-Sprung).

   Fenster-eigene Werte (kein Aequivalent in tokens.generated.css) als lokale
   Custom Properties, alles andere kommt aus den Theme-Tokens. */

.epi-fenster {
    --fenster-chrome: #f3f3f3; /* Mica hell */
    --fenster-glyphe: #1b1b1b;
    --fenster-hover: rgb(0 0 0 / 0.06);
    --fenster-gedrueckt: rgb(0 0 0 / 0.1);
    --fenster-schliessen: #c42b1c;
    --fenster-schliessen-gedrueckt: #c83f31;
    --fenster-rahmen: 8px; /* Chrome-Flaeche um den Screenshot links/rechts/unten, mobil 6px */
}

.epi-fenster__buehne {
    position: relative;
    /* fit-content statt 100 %: die Buehne soll exakt so breit sein wie das
       Fenster, sonst deckt die absolut positionierte CTA-Flaeche dahinter
       eine falsche (zu breite) Flaeche ab. */
    inline-size: fit-content;
    max-inline-size: 100%;
}

/* --- Fenster-Chrome -------------------------------------------------------
   Gilt sowohl fuer das kleine Fenster in der Buehne als auch fuer
   .epi-fenster__fenster--vollbild im Dialog (beide tragen diese Klasse).
   transform-origin unten links, weil Minimieren Richtung Taskleisten-Tab
   unten links in der Buehne schrumpft (Vertrag). */

.epi-fenster__fenster {
    background-color: var(--fenster-chrome);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--standard-box-shadow);
    overflow: hidden;
    inline-size: fit-content;
    max-inline-size: 100%;
    transform-origin: bottom left;
    transform: scale(1);
    opacity: 1;
    visibility: visible;
    transition:
        transform var(--motion-entrance-duration) var(--motion-entrance-easing),
        opacity var(--motion-entrance-duration) var(--motion-entrance-easing),
        visibility 0s linear 0s;
}

/* Minimieren: Richtung Tab schrumpfen. Die visibility-Verzoegerung entfernt
   das Fenster erst nach der Animation aus dem Rendering/der Hit-Testing --
   der klassische Kniff fuer eine Transition ueber display/visibility hinweg,
   ganz ohne transition-behavior: allow-discrete. */
[data-zustand="minimiert"] .epi-fenster__fenster {
    transform: scale(0.08);
    opacity: 0;
    visibility: hidden;
    transition:
        transform var(--motion-entrance-duration) var(--motion-entrance-easing),
        opacity var(--motion-entrance-duration) var(--motion-entrance-easing),
        visibility 0s linear var(--motion-entrance-duration);
}

/* Schliessen: kurzes, kleines Ausblenden statt der Reise zum Tab -- es gibt
   ja keinen Tab, dahin muesste nichts schrumpfen. */
[data-zustand="geschlossen"] .epi-fenster__fenster {
    transform: scale(0.96);
    opacity: 0;
    visibility: hidden;
    transition:
        transform var(--motion-state-duration) var(--motion-state-easing),
        opacity var(--motion-state-duration) var(--motion-state-easing),
        visibility 0s linear var(--motion-state-duration);
}

.epi-fenster__leiste {
    display: flex;
    align-items: center;
    block-size: var(--touch-min);
    padding-inline-start: 16px;
}

.epi-fenster__titel {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
    font-size: 0.8125rem;
    color: var(--fenster-glyphe);
}

.epi-fenster__aktionen {
    display: flex;
    flex: none;
    margin-inline-start: auto;
}

/* Ohne diese Regel gewinnt das globale "button { display: inline-flex }"
   aus global.css gegen die UA-Regel "[hidden] { display: none }" -- Autoren-
   CSS schlaegt UA-CSS immer, unabhaengig von der Spezifitaet (derselbe
   Befund wie beim Vollbild-Dialog oben). Betrifft hier zwar ein <div>, nicht
   die Knoepfe selbst, aber ohne JS muss die ganze Leiste verborgen bleiben. */
.epi-fenster__aktionen[hidden] {
    display: none;
}

/* 46 x 44 px wie in Windows 11 (mobil 44 x 44, siehe Media Query unten). */
.epi-fenster__knopf {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 46px;
    block-size: 44px;
    padding: 0;
    border: none;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    color: var(--fenster-glyphe);
    cursor: pointer;
    transition:
        background-color var(--motion-state-duration) var(--motion-state-easing),
        color var(--motion-state-duration) var(--motion-state-easing);
}

.epi-fenster__knopf svg {
    inline-size: 10px;
    block-size: 10px;
}

/* Der globale Fokusring ist 3 px und liegt damit teils ausserhalb des
   Knopfs -- ohne negativen Offset schneidet das overflow: hidden des
   Fensters ihn ab (Vertrag). */
.epi-fenster__knopf:focus-visible {
    outline-offset: -3px;
}

.epi-fenster__knopf:hover {
    background-color: var(--fenster-hover);
}

/* box-shadow explizit erneut auf none: das globale "button:active { box-shadow:
   inset 0 2px 3px rgba(0,0,0,.25) }" aus global.css ist selbst ueber :active
   qualifiziert und schlaegt damit unsere unqualifizierte Basisregel oben --
   nur eine ebenso hoch spezifische :active-Regel gewinnt zuverlaessig. */
.epi-fenster__knopf:active {
    background-color: var(--fenster-gedrueckt);
    box-shadow: none;
}

.epi-fenster__knopf--schliessen:hover {
    background-color: var(--fenster-schliessen);
    color: var(--color-base);
}

.epi-fenster__knopf--schliessen:active {
    background-color: var(--fenster-schliessen-gedrueckt);
    color: var(--color-base);
    box-shadow: none;
}

/* Chrome-Flaeche links/rechts/unten um den Screenshot -- oben uebernimmt die
   Titelleiste diese Rolle bereits, deshalb kein Top-Padding. */
.epi-fenster__inhalt {
    padding: 0 var(--fenster-rahmen) var(--fenster-rahmen);
}

.epi-fenster__inhalt figure {
    margin: 0;
}

.epi-fenster__inhalt img {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
    /* Eigene, kleinere Rundung fuer den Screenshot selbst, plus eine
       1-px-Haarlinie: derselbe Grund wie bei .epi-screenshot -- eine im Bild
       eingezeichnete Kante bricht an der groesseren CSS-Ecke ab. */
    border-radius: calc(var(--radius-lg) - var(--fenster-rahmen));
    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.06);
}

/* --- CTA dahinter ----------------------------------------------------------
   Liegt immer schon da, exakt in der Flaeche des Fensters. Steht frei auf
   der Sektionsflaeche -- keine Karte, keine Kontur, kein Schatten, kein
   Eyebrow (DESIGN-Regel gegen den KI-Look): sobald das Fenster weg ist, soll
   auch keine zweite Flaeche an seiner Stelle uebrig bleiben. */

.epi-fenster__hinten {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--wp--preset--spacing--lg);
    text-align: center;
    transform: translateY(4px);
    opacity: 0;
    visibility: hidden;
    transition:
        transform var(--motion-entrance-duration) var(--motion-entrance-easing) 80ms,
        opacity var(--motion-entrance-duration) var(--motion-entrance-easing) 80ms,
        visibility 0s linear var(--motion-entrance-duration);
}

/* Kein interaktives Element -- der programmatische Fokus (tabindex="-1")
   dient nur dazu, dass Screenreader nach dem Minimieren/Schliessen hier
   weiterlesen. Der 3-px-Fokusring um die ganze Flaeche waere hier nur
   visuelles Rauschen ohne Bedienzweck; Tab und Knoepfe behalten ihren Ring. */
.epi-fenster__hinten:focus {
    outline: none;
}

[data-zustand="minimiert"] .epi-fenster__hinten,
[data-zustand="geschlossen"] .epi-fenster__hinten {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition:
        transform var(--motion-entrance-duration) var(--motion-entrance-easing) 80ms,
        opacity var(--motion-entrance-duration) var(--motion-entrance-easing) 80ms,
        visibility 0s linear 0s;
}

/* Traegt bewusst dieselbe Stimme wie eine H2 (font-family, Fettgrad,
   Zeilenhoehe) -- ein <em> darin bekommt ueber den erweiterten Selektor bei
   "Halbsatz" oben exakt deren Kursiv-Tuerkis-Blockdarstellung, ohne die Werte
   hier zu verdoppeln. Der Text ist redaktionell editierbar (role: content,
   render.php gibt ihn ueber wp_kses statt esc_html aus). */
.epi-fenster__cta-text {
    margin: 0;
    max-inline-size: 22ch;
    font-family: var(--font-secondary);
    /* Das Fenster ist hoechstens halb so breit wie die Aufnahme (gut 400 px);
       in H2-Groesse fuellte der Satz die Flaeche mit vier Zeilen. */
    font-size: clamp(1.25rem, 1.6vw, 1.5rem);
    font-weight: 700;
    line-height: var(--line-height-heading);
    color: var(--color-text);
    text-wrap: balance;
}

.epi-fenster__hinten .wp-block-buttons {
    margin-block-start: 1.5rem;
}

/* Schlichter Textlink, kein Button: global.css macht aus jedem <button> per
   Elementselektor eine gefuellte Flaeche (Hintergrund, Rahmen, Radius,
   min-height 44px, bei :hover/:active sogar Akzentfarbe + Inset-Schatten).
   Jede Eigenschaft, die hier nicht explizit auf "aus" steht, faellt sonst auf
   diese globale Button-Optik zurueck -- deshalb die vollstaendige Liste statt
   nur border/background/padding. */
.epi-fenster__wieder {
    display: inline-flex;
    align-items: center;
    margin-block-start: 1rem;
    /* Trefferflaeche >= 24 px (WCAG 2.5.8) ohne Button-Optik: min-height statt
       Padding, das die Textzeile optisch vergroessern wuerde. */
    min-height: 24px;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
    padding: 0;
    width: auto;
    font: inherit;
    font-size: 0.875rem;
    color: var(--color-accent-dark-wcag);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    cursor: pointer;
    transition: color var(--motion-state-duration) var(--motion-state-easing),
        text-decoration-thickness var(--motion-state-duration) var(--motion-state-easing);
}

/* Eigene :hover/:active/:focus-visible-Regeln noetig, nicht nur eine Basis-
   regel: "button:hover"/"button:active" in global.css sind selbst ueber eine
   Pseudoklasse qualifiziert und schlagen daher eine unqualifizierte
   .epi-fenster__wieder-Basisregel unabhaengig von deren Herkunft. */
.epi-fenster__wieder:hover,
.epi-fenster__wieder:active,
.epi-fenster__wieder:focus-visible {
    background: none;
    border-color: transparent;
    box-shadow: none;
}

.epi-fenster__wieder:hover,
.epi-fenster__wieder:active {
    color: var(--color-text);
    text-decoration-thickness: 2px;
}

/* Ohne diese Regel gewinnt das globale "button { display: inline-flex }" aus
   global.css gegen die UA-Regel "[hidden] { display: none }" (Autoren-CSS vor
   UA-CSS, unabhaengig von der Spezifitaet) -- derselbe Befund wie oben bei
   .epi-fenster__aktionen und beim Vollbild-Dialog. */
.epi-fenster__wieder[hidden] {
    display: none;
}

/* --- Taskleisten-Tab --------------------------------------------------------
   Erscheint nur im Zustand "minimiert", unten links in der Flaeche des
   Fensters (nicht am Seiten- oder Browserrand). Animiert von display: none
   herein, deshalb transition-behavior: allow-discrete + @starting-style --
   modernes Gegenstueck zum Verzoegerungs-Trick oben, hier gebraucht, weil der
   Tab keinen fadenden Elternknoten hat wie .epi-fenster__wieder ihn hat. */

.epi-fenster__tab {
    position: absolute;
    inset-block-end: 12px;
    inset-inline-start: 12px;
    max-inline-size: 70%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    block-size: 40px;
    padding-inline: 0.75rem;
    border: 1px solid var(--color-line);
    border-radius: 8px;
    background-color: var(--color-base);
    box-shadow: var(--standard-box-shadow);
    cursor: pointer;
    transition:
        opacity var(--motion-entrance-duration) var(--motion-entrance-easing),
        transform var(--motion-entrance-duration) var(--motion-entrance-easing),
        display var(--motion-entrance-duration) allow-discrete;
}

.epi-fenster__tab[hidden] {
    display: none;
}

@starting-style {
    .epi-fenster__tab:not([hidden]) {
        opacity: 0;
        transform: translateY(4px);
    }
}

/* Ohne diese Regel gewinnt das globale "button:hover"/"button:active" aus
   global.css (gelbe Akzentflaeche, Rahmenfarbe, bei :active ein Inset-
   Schatten) -- als Pseudoklassen-Regeln schlagen sie eine unqualifizierte
   .epi-fenster__tab-Basisregel unabhaengig von deren Herkunft. */
.epi-fenster__tab:hover,
.epi-fenster__tab:active,
.epi-fenster__tab:focus-visible {
    border-color: var(--color-line);
    background-color: var(--color-base);
    box-shadow: var(--standard-box-shadow);
}

.epi-fenster__tab:hover {
    transform: translateY(-2px);
}

.epi-fenster__tab-symbol {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.epi-fenster__tab-symbol svg {
    inline-size: 16px;
    block-size: 16px;
    color: var(--color-text);
}

/* Kurzer Akzentstrich unter dem Fenstersymbol, wie in der Windows-Taskleiste
   unter dem aktiven Eintrag. */
.epi-fenster__tab-symbol::after {
    content: "";
    inline-size: 16px;
    block-size: 3px;
    border-radius: 1px;
    background-color: var(--color-accent-dark-wcag);
}

.epi-fenster__tab-titel {
    min-inline-size: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.8125rem;
    color: var(--color-text);
}

/* --- Vollbild-Dialog ---------------------------------------------------- */

.epi-fenster__vollbild {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
}

/* Eigene Regel statt auf die UA-Regel "dialog:not([open]) { display: none }"
   zu vertrauen: Autoren-CSS schlaegt UA-CSS immer, unabhaengig von der
   Spezifitaet -- ohne dieses :not([open]) bliebe der Dialog dauerhaft im
   Fluss sichtbar (Befund 2026-09-28 im Test). */
.epi-fenster__vollbild:not([open]) {
    display: none;
}

/* Auf Sichtfenstergroesse statt auf den Inhalt: nur so trifft ein Klick
   neben dem Fenster tatsaechlich das <dialog>-Element selbst (Grundlage
   fuer "Klick auf Hintergrund = Verkleinern" in view.js). */
.epi-fenster__vollbild[open] {
    position: fixed;
    inset: 0;
    inline-size: 100vw;
    block-size: 100dvh;
    max-inline-size: none;
    max-block-size: none;
    display: grid;
    place-items: center;
}

/* Ein- und Ausblenden ueber die Klasse is-sichtbar aus view.js: close()
   laeuft erst nach der Animation, deshalb loest sich der Hintergrund auch
   beim Schliessen weich auf (@starting-style kann nur das Einblenden).
   Abdunklung und Unschaerfe laufen gemeinsam ueber ihre eigenen Werte
   (Farbe von transparent, Blur von 0 px) statt ueber opacity: eine
   Deckkraft-Blende ueber einem backdrop-filter springt am Ende sichtbar
   von "unscharf" auf "scharf". */
.epi-fenster__vollbild::backdrop {
    background-color: rgb(16 20 24 / 0);
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
    transition:
        background-color var(--motion-entrance-duration) var(--motion-entrance-easing),
        -webkit-backdrop-filter var(--motion-entrance-duration) var(--motion-entrance-easing),
        backdrop-filter var(--motion-entrance-duration) var(--motion-entrance-easing);
}

.epi-fenster__vollbild.is-sichtbar::backdrop {
    background-color: rgb(16 20 24 / 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* Die Bewegung macht view.js (Web Animations API, nur transform/opacity);
   die geerbten Minimieren-Transitions des kleinen Fensters duerfen hier
   nicht mitlaufen. Skaliert wird um die Mitte. */
.epi-fenster__fenster--vollbild {
    transition: none;
    transform-origin: center;
    display: flex;
    flex-direction: column;
    /* fit-content statt einer festen Breite: das Fenster soll genau so breit
       sein wie Screenshot + Rahmen (jede Bildgroesse), nur gedeckelt durch
       den Sichtfensterrand -- kein Wert dafuer im CSS hartcodiert. */
    inline-size: fit-content;
    max-inline-size: calc(100vw - 2rem);
    max-block-size: calc(100dvh - 2rem);
}

.epi-fenster__fenster--vollbild .epi-fenster__leiste {
    flex: none;
}

.epi-fenster__vollbild-inhalt {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow: auto;
    padding: 0 var(--fenster-rahmen) var(--fenster-rahmen);
}

.epi-fenster__vollbild-inhalt img {
    display: block;
    border-radius: calc(var(--radius-lg) - var(--fenster-rahmen));
    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.06);
}

@media screen and (max-width: 767px) {
    .epi-fenster {
        --fenster-rahmen: 6px;
    }

    .epi-fenster__knopf {
        inline-size: 44px;
    }

    .epi-fenster__hinten {
        padding: var(--wp--preset--spacing--md);
    }

    .epi-fenster__fenster--vollbild {
        max-inline-size: calc(100vw - 1.5rem);
        max-block-size: calc(100dvh - 1.5rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .epi-fenster__fenster,
    .epi-fenster__hinten,
    .epi-fenster__tab,
    .epi-fenster__knopf,
    .epi-fenster__vollbild::backdrop {
        transition: none;
    }

    /* FLIP-Wachstum/-Schrumpfen laeuft in view.js ueber die Web Animations
       API und prueft dort selbst prefers-reduced-motion -- hier nur die
       CSS-Transitions kappen. */
}

/* --- Themenpunkt als Verweis -----------------------------------------------
   Verlinkt ein Punkt-Titel seinen Anwendungsfall, bleibt er in Schrift und
   Farbe ein Titel. Der Verweis zeigt sich an der Unterstreichung, nicht allein
   an der Farbe (DESIGN.md 7). */
/* Auch der Titel eines Post-its kann der Verweis sein (.epi-produktkarte__title):
   Die Klickflaeche von .epi-card__link deckt die Karte, ein eigener Linktext
   entfaellt. */
.epi-point__title a,
.epi-produktkarte__title a {
    color: inherit;
    font: inherit;
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
    transition: color 150ms ease-out;
}

.epi-point__title a:hover,
.epi-point__title a:focus-visible,
.epi-produktkarte__title a:hover,
.epi-produktkarte__title a:focus-visible {
    color: var(--color-accent-dark-wcag);
}

/* --- Querverweis (epi/querverweis) ------------------------------------------
   Schmales Band vor dem Footer, das auf einen anderen Auftritt verweist. Die
   breite Schwester der Markenebene im Mega-Menü (global.css, mega_card_brand):
   Fläche in der Farbe des Ziels, Stimmkarten als Motiv, Pille wie die Buttons
   der Ziel-Website. Die Markenfarbe ist bewusst kein Token dieses Hauses, sie
   hängt am Modifier (--wahlen). Die Karten sind Pseudoelemente, damit sie im
   contentOnly-Pattern nicht gelöscht werden. Sie heben sich, wenn das Band
   Hover oder Fokus hat. */
.epi-querverweis {
    --qv-marke: var(--color-dark);
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "text beleg"
        "text link";
    column-gap: clamp(2rem, 6vw, 6rem);
    row-gap: 1rem;
    align-items: center;
    padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.5rem, 5vw, 3.5rem);
    border-radius: var(--radius-lg);
    background-color: var(--qv-marke);
    color: var(--color-base);
    /* clip statt hidden: schneidet die Karten ab, der Fokus der Pille liegt
       weit genug innen. */
    overflow: clip;
}

.epi-querverweis--wahlen {
    --qv-marke: var(--epi-marke-wahlen);
}

.epi-querverweis > *,
.epi-querverweis__text > *,
.epi-querverweis__beleg > * {
    position: relative;
    z-index: 1;
    margin-block: 0;
}

.epi-querverweis__text {
    grid-area: text;
    display: grid;
    gap: 0.75rem;
}

.epi-querverweis .epi-querverweis__titel {
    color: var(--color-base);
    font-family: var(--font-secondary);
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
}

.epi-querverweis__body {
    max-inline-size: 60ch;
    font-size: 1rem;
    line-height: 1.6;
}

.epi-querverweis__beleg {
    grid-area: beleg;
    align-self: end;
}

.epi-querverweis__zahl {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1;
}

.epi-querverweis__zahl strong {
    margin-inline-end: 0.35rem;
    font-family: var(--font-secondary);
    font-size: 3.5rem;
    font-variant-numeric: tabular-nums;
}

.epi-querverweis__zahltext {
    max-inline-size: 16rem;
    margin-block-start: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.4;
}

.epi-querverweis__link {
    grid-area: link;
    align-self: start;
}

/* Standard-Button in Groesse und Schrift, umgefaerbt und voll gerundet wie
   die Buttons der Ziel-Website. */
.epi-querverweis .wp-block-button__link,
.epi-querverweis .wp-block-button__link:is(:hover, :active, :focus-visible) {
    border-radius: 999px;
    border-color: var(--color-base);
    background-color: var(--color-base);
    color: var(--qv-marke);
}

.epi-querverweis .wp-block-button__link:hover {
    background-color: var(--color-primary-light);
    border-color: var(--color-primary-light);
}

.epi-querverweis .wp-block-button__link:focus-visible {
    outline-color: var(--color-base);
}

/* Externes Ziel: Pfeil als Icon (Quicksand hat keinen), der Hinweis fuer
   Screenreader steht als Alternativtext des generierten Inhalts. Gilt fuer
   jeden Button mit externem Ziel, nicht nur im Querverweis. */
.wp-block-button__link[target="_blank"]::after {
    content: "\f35d" / "(externe Website, öffnet in neuem Tab)";
    margin-inline-start: 0.5em;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.75em;
}

/* Stimmkarten, hochgehalten hinter dem Beleg */
.epi-querverweis::before,
.epi-querverweis::after,
.epi-querverweis__beleg::after {
    content: "";
    position: absolute;
    z-index: 0;
    border-radius: 6px;
    background-color: rgb(255 255 255 / 0.16);
    transform-origin: 50% 100%;
    rotate: var(--qv-neigung);
    transition: translate 500ms cubic-bezier(0.34, 1.56, 0.64, 1) var(--qv-versatz), rotate 500ms ease-out var(--qv-versatz);
}

.epi-querverweis::before {
    --qv-neigung: -14deg;
    --qv-versatz: 0ms;
    inline-size: 96px;
    block-size: 128px;
    inset-inline-end: 27%;
    inset-block-end: 22px;
}

.epi-querverweis::after {
    --qv-neigung: 9deg;
    --qv-versatz: 80ms;
    inline-size: 72px;
    block-size: 96px;
    inset-inline-end: 35%;
    inset-block-end: -24px;
    background-color: rgb(255 255 255 / 0.1);
}

.epi-querverweis__beleg::after {
    --qv-neigung: 22deg;
    --qv-versatz: 160ms;
    inline-size: 56px;
    block-size: 76px;
    inset-inline-end: -5.5rem;
    inset-block-start: -3rem;
    background-color: rgb(255 255 255 / 0.22);
}

.epi-querverweis:is(:hover, :focus-within)::before,
.epi-querverweis:is(:hover, :focus-within)::after,
.epi-querverweis:is(:hover, :focus-within) .epi-querverweis__beleg::after {
    translate: 0 -14px;
    rotate: calc(var(--qv-neigung) + 6deg);
}

/* Helle Fassung (--hell): fuer den Querverweis innerhalb einer Sektion,
   etwa unter der Produktuebersicht der Startseite, wo die volle Markenflaeche
   zu stark heraussticht. Rand und Button tragen die Markenfarbe, die Flaeche
   bleibt hell, die Stimmkarten in einem hellen Ton der Marke. */
.epi-querverweis--hell {
    border: 1px solid var(--qv-marke);
    background-color: color-mix(in srgb, var(--qv-marke) 4%, var(--color-base));
    color: var(--color-text);
}

.epi-querverweis--hell .epi-querverweis__titel {
    color: var(--color-text);
}

.epi-querverweis--hell .epi-querverweis__zahl strong {
    color: var(--qv-marke);
}

.epi-querverweis--hell .wp-block-button__link,
.epi-querverweis--hell .wp-block-button__link:is(:hover, :active, :focus-visible) {
    border-color: var(--qv-marke);
    background-color: var(--qv-marke);
    color: var(--color-base);
}

.epi-querverweis--hell .wp-block-button__link:hover {
    border-color: color-mix(in srgb, var(--qv-marke) 85%, black);
    background-color: color-mix(in srgb, var(--qv-marke) 85%, black);
}

.epi-querverweis--hell .wp-block-button__link:focus-visible {
    outline-color: var(--qv-marke);
}

.epi-querverweis--hell::before,
.epi-querverweis--hell::after,
.epi-querverweis--hell .epi-querverweis__beleg::after {
    background-color: color-mix(in srgb, var(--qv-marke) 12%, var(--color-base));
}

.epi-querverweis--hell::after {
    background-color: color-mix(in srgb, var(--qv-marke) 8%, var(--color-base));
}

/* In einer bestehenden Sektion unter einer Uebersicht: etwas Luft davor. */
.epi-stack > .epi-querverweis {
    margin-block-start: var(--wp--preset--spacing--lg);
}

@media (prefers-reduced-motion: reduce) {
    .epi-querverweis::before,
    .epi-querverweis::after,
    .epi-querverweis__beleg::after {
        transition: none;
    }

    .epi-querverweis:is(:hover, :focus-within)::before,
    .epi-querverweis:is(:hover, :focus-within)::after,
    .epi-querverweis:is(:hover, :focus-within) .epi-querverweis__beleg::after {
        translate: none;
        rotate: var(--qv-neigung);
    }
}

@media screen and (max-width: 768px) {
    .epi-querverweis {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "text"
            "beleg"
            "link";
        row-gap: 1.5rem;
    }

    .epi-querverweis::before {
        inset-inline-end: -24px;
        inset-block-end: 96px;
    }

    .epi-querverweis::after {
        inset-inline-end: 18%;
        inset-block-end: -40px;
    }

    .epi-querverweis__beleg::after {
        inset-inline-end: -3rem;
    }
}

/* --- Referenz-Paar -------------------------------------------------------
   Gibt es zu einem Produkt nur einen Anwenderbericht, stehen seine Karte und
   ein Zitat aus demselben Bericht nebeneinander (.epi-cols--even). Die Liste
   faellt dafuer auf eine Spalte, das Zitat schliesst buendig an die Karte an
   und stellt Name und Funktion untereinander. */
.epi-referenz-paar {
    align-items: stretch;
}

.epi-referenz-paar .epi-beitragsliste {
    grid-template-columns: 1fr;
}

.epi-referenz-paar .epi-quote {
    align-content: center;
    padding: 3rem;
}

.epi-referenz-paar .epi-quote__person {
    display: grid;
    grid-template-columns: 48px 1fr;
    column-gap: 1rem;
    row-gap: 0;
}

.epi-referenz-paar .epi-quote__person:not(:has(.epi-quote__name)) {
    display: block;
}

.epi-referenz-paar .epi-quote__person::before,
.epi-referenz-paar .epi-quote__initialen {
    grid-row: span 2;
    align-self: center;
}

@media (max-width: 767px) {
    .epi-referenz-paar .epi-quote {
        padding: 2rem;
    }
}

/* Paar-Spalten: die Karte braucht weniger Breite als das Zitat. */
@media screen and (min-width: 1024px) {
    .epi-referenz-paar.epi-cols--even {
        grid-template-columns: 5fr 7fr;
    }
}

/* --- Personen (epi/personen) ---------------------------------------------
   Gleichrangige Porträts „wie aufgeklebt“: weisser Abzug mit Papierschatten
   (tokens elevation.papier), alternierende Schraeglage im Bereich von
   components.papierSchraeglage (hoechstens 2,5 Grad), ein Klebestreifen in
   Orange 50. Jede zweite Spalte sitzt tiefer, damit keine starre Reihe
   entsteht. Name und Funktion stehen gerade darunter und bleiben gut lesbar.
   Die Fotos sind „geklebt“ und bewegen sich unter dem Zeiger nicht; mit
   der Maus lassen sie sich verschieben (siehe unten). Porträts kommen aus
   tools/portraet.sh. */

.epi-personen {
    row-gap: var(--wp--preset--spacing--lg);
    align-items: start;
}

@media screen and (max-width: 639px) {
    .epi-grid--4.epi-personen {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
    }
}

/* Versatz: zweite und vierte Spalte (mobil die rechte) sitzen tiefer. */
.epi-personen > .epi-person:nth-child(even) {
    margin-block-start: var(--wp--preset--spacing--xl);
}

/* Die ganze Karte ist der Abzug, wie ein Sofortbild: Foto oben, Name und
   Funktion im breiten weissen Rand darunter. So wandert der Name beim
   Verschieben mit und liegt nie lose ueber einem anderen Foto. */
.epi-person {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5rem 0.5rem 1rem;
    background-color: var(--color-base);
    border-radius: 2px;
    box-shadow: 0 6px 14px 0 rgb(120 92 40 / 0.22), 0 1px 2px 0 rgb(120 92 40 / 0.18);
    text-align: center;
    rotate: -2deg;
    transition: scale 0.15s ease, box-shadow 0.15s ease;
}

.epi-person > * {
    margin: 0;
}

.epi-person:nth-child(4n+2) { rotate: 1.5deg; }
.epi-person:nth-child(4n+3) { rotate: -1deg; }
.epi-person:nth-child(4n+4) { rotate: 2.5deg; }

.epi-person__bild {
    margin-block-end: 0.75rem;
}

/* Klebestreifen oben mittig, flach und halbtransparent. */
.epi-person::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset-block-start: -0.75rem;
    inset-inline-start: 50%;
    inline-size: 38%;
    block-size: 1.5rem;
    translate: -50% 0;
    rotate: -3deg;
    background-color: color-mix(in srgb, var(--color-primary-50) 80%, transparent);
    box-shadow: 0 1px 2px rgb(120 92 40 / 0.18);
}

.epi-person:nth-child(odd)::before {
    rotate: 2deg;
}

.epi-person__bild img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

/* Verschieben (assets/js/personen.js, nur mit Maus): das Skript setzt
   .ist-ziehbar und verschiebt die ganze Karte per translate. Beim Ziehen hebt
   sich der Abzug leicht an, beim Loslassen liegt er wieder flach. */
.ist-ziehbar .epi-person {
    position: relative;
    cursor: grab;
    user-select: none;
}

.ist-ziehbar .epi-person img {
    -webkit-user-drag: none;
    pointer-events: none;
}

.ist-ziehbar .epi-person.wird-gezogen {
    cursor: grabbing;
}

.epi-person.wird-gezogen {
    scale: 1.03;
    box-shadow: 0 10px 20px 0 rgb(120 92 40 / 0.28), 0 2px 4px 0 rgb(120 92 40 / 0.2);
}

@media (prefers-reduced-motion: reduce) {
    .epi-person {
        transition: none;
    }
}

.epi-person__name {
    color: var(--color-text);
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 700;
    line-height: var(--line-height-ui);
}

.epi-person__funktion {
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--color-secondary);
}

/* Unbekannte Funktion bleibt leer und nimmt keinen Platz ein. */
.epi-person__funktion:empty {
    display: none;
}

/* --- Zwei Bereiche (epi/zwei-bereiche) -------------------------------------
   Zwei gleichwertige Bereiche nebeneinander. Je Bereich ein grosses Foto,
   darauf liegt mittig ein weisses Blatt mit Name, Text, Produktlogos und
   Textlink (Papiermotiv, nicht gedreht). Die ganze Flaeche ist klickbar (der
   Link spannt sie auf). Hover und Fokus: Foto zoomt leicht, der Name bekommt
   einen gelben Textmarker. Bewusst ohne farbige Kanten, Pillen und Schraeglage.
   Mobil stehen die Bereiche untereinander. */

.epi-bereiche__kopf {
    display: grid;
    gap: var(--wp--preset--spacing--md);
}

.epi-bereiche__kopf > * {
    margin: 0;
}

.epi-bereiche {
    display: grid;
    gap: clamp(3rem, 5vw, 4.5rem);
    padding-block-start: var(--wp--preset--spacing--sm);
}

@media screen and (min-width: 900px) {
    .epi-bereiche {
        /* minmax(0, …): Ein langes Titelwort darf eine Spalte nicht verbreitern. */
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.epi-bereich {
    position: relative;
    display: flex;
    flex-direction: column;
}

.epi-bereich > * {
    margin: 0;
}

.epi-bereich .epi-bereich__bild {
    margin: 0;
    overflow: hidden;
    border-radius: 4px;
}

.epi-bereich__bild img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: scale 400ms var(--motion-entrance-easing);
}

.epi-bereich:is(:hover, :focus-within) .epi-bereich__bild img {
    scale: 1.04;
}

/* Das Blatt liegt auf der Unterkante des Fotos. */
.epi-bereich__blatt {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-block-start: clamp(-5rem, -6vw, -3rem);
    margin-inline: clamp(1rem, 3vw, 2.5rem); /* mittig, Foto steht beidseitig gleich ueber */
    padding: clamp(1.5rem, 3vw, 2.5rem);
    background-color: var(--color-base);
    border-radius: 2px;
    box-shadow: 0 10px 30px -12px rgb(120 92 40 / 0.28), 0 1px 2px 0 rgb(120 92 40 / 0.14);
    container-type: inline-size;
}

.epi-bereich__blatt > * {
    margin: 0;
}

.epi-bereich .epi-bereich__titel {
    color: var(--color-text);
    /* Ohne automatische Trennung: Die Groesse folgt der Blattbreite, damit
       „Informationsmanagement“ in jeder Spalte in eine Zeile passt und beide
       Bereiche gleich gross gesetzt sind. */
    font-size: clamp(1.125rem, 8cqi, 2.25rem);
    line-height: 1.15;
    text-wrap: balance;
    hyphens: manual;
    overflow-wrap: break-word;
}

/* Gelber Textmarker unter dem Namen bei Hover und Fokus. Als Unterstreichung
   umgesetzt, damit er jeder Zeile folgt (das H3 ist ein Flex-Element). */
.epi-bereich__titel {
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 0.3em;
    text-underline-offset: -0.12em;
    text-decoration-skip-ink: none;
    transition: text-decoration-color 250ms var(--motion-state-easing);
}

.epi-bereich:is(:hover, :focus-within) .epi-bereich__titel {
    text-decoration-color: var(--color-primary);
}

.epi-bereich__text {
    display: grid;
    gap: var(--wp--preset--spacing--sm);
}

.epi-bereich__text > * {
    margin: 0;
}

/* Produktlogos in Grau (DESIGN.md 6): die schwarzen Dateien auf gut 70 %.
   Gleiche Breite statt gleicher Hoehe gleicht die Wortmarken optisch aus. */
.epi-bereich__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.75rem;
    margin-block-start: auto !important;
    padding-block-start: 0.5rem;
}

.epi-bereich__logos figure {
    margin: 0;
}

.epi-bereich__logos img {
    display: block;
    inline-size: 112px;
    block-size: auto;
    max-block-size: 40px;
    object-fit: contain;
    opacity: 0.68;
}

.epi-bereich__link {
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--color-secondary-20);
}

.epi-bereich__link a {
    display: inline-block;
    color: var(--color-accent-dark-wcag);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
}

/* Der Link spannt den ganzen Bereich auf. */
.epi-bereich__link a::before {
    content: "";
    position: absolute;
    inset: 0;
}

.epi-bereich__link a::after {
    content: "→" / "";
    display: inline-block; /* traegt die Unterstreichung des Links nicht mit */
    margin-inline-start: 0.5em;
    transition: translate var(--motion-state-duration) var(--motion-state-easing);
}

/* \FE0E erzwingt das Textzeichen statt eines farbigen Emojis. */
.epi-bereich__link a[target="_blank"]::after {
    content: "↗\FE0E" / "(externe Website, öffnet in neuem Tab)";
}

.epi-bereich:hover .epi-bereich__link a {
    text-decoration-thickness: 2px;
}

.epi-bereich:hover .epi-bereich__link a::after {
    translate: 4px 0;
}

/* Fokus: Ring um den ganzen Bereich statt nur um den Linktext. */
.epi-bereich__link a:focus-visible {
    outline: none;
}

.epi-bereich:has(.epi-bereich__link a:focus-visible) {
    outline: 3px solid var(--color-accent-dark-wcag);
    outline-offset: 4px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .epi-bereich__bild img,
    .epi-bereich__titel,
    .epi-bereich__link a::after {
        transition: none;
    }
}

/* --- Text mit Kennzahlen (epi/text-kennzahlen) ------------------------------
   Eckdaten neben dem Fliesstext statt Haekchenliste. Gesetzt wie eine
   Marginalspalte: senkrechte Haarlinie als Achse, je Feld eine kleine
   Beschriftung, der Wert gross in Lora Tuerkis dunkel (Beleg,
   design/regeln/komponenten.md), darunter eine Zeile Erlaeuterung. Felder
   sind durch waagerechte Haarlinien getrennt wie Zeilen eines Formulars. */

.epi-text-kennzahlen__text {
    display: grid;
    gap: var(--wp--preset--spacing--md);
}

.epi-text-kennzahlen__text > * {
    margin: 0;
}

.epi-text-kennzahlen__text > h2 {
    margin-block-end: var(--wp--preset--spacing--sm);
}

.epi-kennzahlen {
    display: grid;
    border-inline-start: 1px solid var(--color-secondary-20);
}

.epi-kennzahl {
    display: grid;
    gap: 0.25rem;
    padding-block: 1.5rem;
    padding-inline-start: clamp(1.5rem, 3vw, 2.5rem);
}

.epi-kennzahl:first-child {
    padding-block-start: 0.25rem;
}

.epi-kennzahl:last-child {
    padding-block-end: 0.25rem;
}

.epi-kennzahl + .epi-kennzahl {
    border-block-start: 1px solid var(--color-secondary-20);
}

.epi-kennzahl > * {
    margin: 0;
}

.epi-kennzahl__label {
    color: var(--color-secondary);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.4;
}

/* Wert in Textfarbe mit gelbem Textmarker-Strich darunter (Linus 26.10.2026:
   „weniger Türkis, mehr Gelb“). Orange als Schrift wäre 1,8:1, daher Fläche. */
.epi-kennzahl__wert {
    justify-self: start;
    padding-inline: 0.15em;
    margin-inline-start: -0.15em !important;
    background-image: linear-gradient(transparent 62%, var(--color-primary) 62%, var(--color-primary) 86%, transparent 86%);
    color: var(--color-text);
    font-family: var(--font-secondary);
    font-size: clamp(2.5rem, 2rem + 1.4vw, 3.5rem);
    font-weight: 700;
    line-height: 1.05;
    font-variant-numeric: lining-nums;
}

.epi-kennzahl__text {
    max-inline-size: 34ch;
    font-size: 1rem;
    line-height: 1.5;
}

/* Mobil stehen die Kennzahlen unter dem Text, die Achse bleibt links. */
@media screen and (max-width: 1023px) {
    .epi-kennzahlen {
        margin-block-start: var(--wp--preset--spacing--sm);
    }
}

/* --- Zeitleiste (epi/zeitleiste) --------------------------------------------
   Die Geschichte als Prozess auf Papier: Auf dem Kaestchenraster laeuft eine
   gelbe Prozesslinie mit Pfeil quer ueber die Breite, die Stationen haengen
   abwechselnd darueber und darunter als aufgeklebte Karteikarten (gleicher
   Stil wie epi/personen: Papierschatten, Klebestreifen, leichte Schraeglage).
   Meilensteine (--meilenstein) sind gelbe Haftzettel, der Prolog (--prolog)
   ist eine lose, gestrichelte Notiz ohne Klebestreifen. Ein optionales Bild
   (Produktlogo oder Foto) steht unten auf der Karte. Mobil laeuft die Linie
   senkrecht links, die Karten stehen untereinander. Bis 16 Stationen. */

/* Registriert, damit der Auslauf am Rand weich uebergeblendet werden kann. */
@property --zl-auslauf-links {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

@property --zl-auslauf-rechts {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

.epi-zeitleiste {
    --zl-linie: var(--color-primary);
    position: relative;
    display: grid;
    gap: var(--wp--preset--spacing--lg);
    padding-inline-start: 2.5rem;
}

/* Prozesslinie, mobil senkrecht */
.epi-zeitleiste::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0.75rem;
    inline-size: 3px;
    background-color: var(--zl-linie);
}

/* Pfeilspitze am Ende der Linie */
.epi-zeitleiste::after {
    content: "";
    position: absolute;
    inset-block-end: -0.5rem;
    inset-inline-start: calc(0.75rem + 1.5px);
    translate: -50% 0;
    border-inline: 0.5rem solid transparent;
    border-block-start: 0.75rem solid var(--zl-linie);
}

.epi-zeitleiste__station {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 1.25rem 1.25rem 1.375rem;
    background-color: var(--color-base);
    border-radius: 2px;
    box-shadow: 0 6px 14px 0 rgb(120 92 40 / 0.18), 0 1px 2px 0 rgb(120 92 40 / 0.16);
    rotate: -1deg;
}

.epi-zeitleiste__station > * {
    margin: 0;
}

.epi-zeitleiste__station:nth-child(4n+2) { rotate: 1deg; }
.epi-zeitleiste__station:nth-child(4n+3) { rotate: -0.5deg; }
.epi-zeitleiste__station:nth-child(4n+4) { rotate: 1.5deg; }

/* Klebestreifen oben mittig, wie bei den Porträts */
.epi-zeitleiste__station::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset-block-start: -0.7rem;
    inset-inline-start: 50%;
    inline-size: 34%;
    block-size: 1.4rem;
    translate: -50% 0;
    rotate: -3deg;
    background-color: color-mix(in srgb, var(--color-primary-50) 80%, transparent);
    box-shadow: 0 1px 2px rgb(120 92 40 / 0.18);
}

.epi-zeitleiste__station:nth-child(odd)::before {
    rotate: 2deg;
}

/* Verbindung von der Karte zur Prozesslinie, mobil waagerecht */
.epi-zeitleiste__station::after {
    content: "";
    position: absolute;
    inset-block-start: 2.1rem;
    inset-inline-start: -1.75rem;
    inline-size: 1.75rem;
    block-size: 1px;
    background-color: var(--color-text);
}

/* Meilenstein: gelber Haftzettel, der Streifen hebt sich in Weiss ab */
.epi-zeitleiste__station--meilenstein {
    background-color: var(--color-primary-50);
}

.epi-zeitleiste__station--meilenstein::before {
    background-color: rgb(255 255 255 / 0.7);
}

/* Prolog: lose Notiz vor dem Start, ohne Klebestreifen */
.epi-zeitleiste__station--prolog {
    background-color: transparent;
    border: 1px dashed var(--color-secondary);
    box-shadow: none;
    rotate: 0deg;
}

.epi-zeitleiste__station--prolog::before {
    display: none;
}

.epi-zeitleiste__station--prolog::after {
    border-block-start: 1px dashed var(--color-secondary);
    background-color: transparent;
}

.epi-zeitleiste .epi-zeitleiste__jahr {
    padding-block-end: 0.5rem;
    border-block-end: 1px solid var(--color-secondary-20);
    color: var(--color-text);
    font-family: var(--font-secondary);
    font-size: clamp(2rem, 1.5rem + 1.2vw, 2.75rem);
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: lining-nums;
}

.epi-zeitleiste__station--meilenstein .epi-zeitleiste__jahr {
    border-block-end-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
}

.epi-zeitleiste__station--prolog .epi-zeitleiste__jahr {
    color: var(--color-secondary);
    font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem);
}

.epi-zeitleiste .epi-zeitleiste__titel {
    margin-block-start: 0.375rem;
    color: var(--color-text);
    font-family: var(--font-primary);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    text-wrap: balance;
}

.epi-zeitleiste__text {
    font-size: 0.9375rem;
    line-height: 1.5;
}

.epi-zeitleiste__text:empty {
    display: none;
}

/* Bild unten auf der Karte: Logos klein in Grau, Fotos als Abzug */
.epi-zeitleiste .epi-zeitleiste__bild {
    margin-block-start: auto;
    padding-block-start: 0.75rem;
}

.epi-zeitleiste__bild img {
    display: block;
    inline-size: auto;
    max-inline-size: 6.5rem;
    max-block-size: 1.375rem;
    opacity: 0.68;
}

.epi-zeitleiste__bild.is-style-foto img,
.epi-zeitleiste__bild--foto img {
    inline-size: 100%;
    max-inline-size: none;
    max-block-size: none;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    opacity: 1;
}

/* Ab Tablet: eine Reihe von links nach rechts. Die Prozesslinie laeuft oben
   ueber die ganze Spur, alle Karten haengen gleich hoch darunter. Mehr
   Stationen als Platz: die Spur scrollt waagerecht (Wischen, Trackpad,
   Pfeiltasten nach Fokus, Knoepfe aus assets/js/zeitleiste.js). Die
   angeschnittene naechste Karte zeigt, dass es weitergeht. */
@media screen and (min-width: 768px) {
    .epi-zeitleiste {
        grid-auto-flow: column;
        grid-auto-columns: calc((100% - 2 * var(--zl-abstand)) / 2.3);
        align-items: start;
        gap: var(--zl-abstand);
        --zl-abstand: 1.75rem;
        /* 0.75rem Luft fuer Schatten und Drehung, per Gegenrand buendig */
        padding: 3.5rem 0.75rem 1.5rem;
        margin-inline: -0.75rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0.75rem;
        scrollbar-width: thin;
        scrollbar-color: var(--color-secondary-20) transparent;
        /* Linie als Hintergrund, der mit der Spur mitscrollt */
        /* Die Linie selbst laeuft an ihren Enden aus, damit am Anfang und
           Ende der Spur keine harte Kante erscheint. */
        background-image: linear-gradient(to right, transparent, var(--zl-linie) 4rem, var(--zl-linie) calc(100% - 4rem), transparent);
        background-size: 100% 3px;
        background-position: 0 1.25rem;
        background-repeat: no-repeat;
        background-attachment: local;
        /* Weicher Auslauf statt harter Kante an der Seite, auf der es
           weitergeht (zeitleiste.js setzt .ist-am-anfang/.ist-am-ende). */
        --zl-rand: 2.5rem;
        --zl-auslauf-links: 0px;
        --zl-auslauf-rechts: var(--zl-rand);
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--zl-auslauf-links), #000 calc(100% - var(--zl-auslauf-rechts)), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 var(--zl-auslauf-links), #000 calc(100% - var(--zl-auslauf-rechts)), transparent 100%);
        /* Auslauf blendet weich ein und aus statt zu springen */
        transition: --zl-auslauf-links 300ms ease, --zl-auslauf-rechts 300ms ease;
    }

    .epi-zeitleiste:not(.ist-am-anfang) {
        --zl-auslauf-links: var(--zl-rand);
    }

    .epi-zeitleiste.ist-am-anfang {
        --zl-auslauf-links: 0px;
    }

    .epi-zeitleiste.ist-am-ende {
        --zl-auslauf-rechts: 0px;
    }

    .epi-zeitleiste::before,
    .epi-zeitleiste::after {
        display: none;
    }

    .epi-zeitleiste__station {
        scroll-snap-align: start;
    }

    /* Senkrechte Verbindung von der Linie zur Karte */
    .epi-zeitleiste__station::after {
        inset-block: auto 100%;
        inset-inline-start: 50%;
        inline-size: 1px;
        block-size: 1.25rem;
    }

    .epi-zeitleiste__station--prolog::after {
        border-block-start: 0;
        border-inline-start: 1px dashed var(--color-secondary);
    }

    .epi-zeitleiste:focus-visible {
        outline: 3px solid var(--color-accent-dark-wcag);
        outline-offset: 4px;
    }
}

@media screen and (min-width: 1024px) {
    .epi-zeitleiste {
        grid-auto-columns: calc((100% - 2 * var(--zl-abstand)) / 3.4);
    }
}

/* Breite Bildschirme: Die Spur darf ueber die Inhaltsbreite hinaus bis
   1600 px wachsen, mittig und mit mindestens 5rem Abstand zum Fensterrand
   (16 px Reserve fuer die Scrollleiste der Seite). */
@media screen and (min-width: 1300px) {
    .epi-zeitleiste {
        --zl-fenster: min(100vw - 2 * max(var(--epi-gutter), 5rem) - 16px, 1600px);
        --zl-inhalt: min(100vw - 2 * var(--epi-gutter), var(--content-size));
        /* Nie schmaler als der Inhalt; 0.75rem Luft fuer Schatten und Drehung */
        --zl-ueberstand: calc(max(0px, (var(--zl-fenster) - var(--zl-inhalt)) / 2) + 0.75rem);
        margin-inline: calc(-1 * var(--zl-ueberstand));
        /* Karten bleiben so breit wie bei Inhaltsbreite, nur die Ansicht
           waechst und zeigt mehr Stationen. */
        grid-auto-columns: 21rem;
        /* Die Karten beginnen und enden an der Inhaltskante, buendig mit der
           Ueberschrift. Der Auslauf liegt im Rand daneben, Karten an der
           Inhaltskante bleiben voll lesbar. */
        padding-inline: var(--zl-ueberstand);
        scroll-padding-inline: var(--zl-ueberstand);
        --zl-rand: max(1.5rem, var(--zl-ueberstand));
    }
}


/* Knoepfe zum Blaettern (nur wenn die Spur scrollt, setzt zeitleiste.js) */
.epi-zeitleiste-nav {
    display: none;
}

@media screen and (min-width: 768px) {
    .epi-zeitleiste-nav {
        position: absolute;
        inset-block-start: 0;
        inset-inline-end: var(--epi-gutter);
        display: flex;
        gap: 0.75rem;
    }

    /* Die Knoepfe stehen rechts neben der Sektionsueberschrift. */
    .epi-container:has(> .epi-zeitleiste) {
        position: relative;
    }

    .epi-zeitleiste-nav[hidden] {
        display: none;
    }

    .epi-zeitleiste-nav button {
        display: inline-grid;
        place-items: center;
        inline-size: 2.75rem;
        block-size: 2.75rem;
        padding: 0;
        border: 1px solid var(--color-text);
        border-radius: 50%;
        background-color: var(--color-base);
        color: var(--color-text);
        font-size: 1.25rem;
        line-height: 1;
    }

    .epi-zeitleiste-nav button:hover {
        background-color: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--color-text);
    }

    .epi-zeitleiste-nav button:disabled {
        opacity: 0.35;
        cursor: default;
        background-color: var(--color-base);
        border-color: var(--color-text);
    }
}

/* Gekoppelt an das Seitenscrollen (zeitleiste.js, ab 1024 px, ohne
   „Bewegung reduzieren“): Die Seite schiebt mit, Einrasten entfaellt, weil es
   gegen die Bewegung arbeiten wuerde. Von Hand scrollen bleibt moeglich. */
.epi-zeitleiste.ist-gekoppelt {
    scroll-snap-type: none;
}

/* Ziehen mit der Maus */
@media (pointer: fine) {
    .epi-zeitleiste.ist-gekoppelt,
    .epi-zeitleiste:not(.ist-gekoppelt) {
        cursor: grab;
    }
}

.epi-zeitleiste.wird-gezogen {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
}

/* Mehr Karo ueber und unter der Zeitleiste: groesserer Innenabstand, und
   das Raster laeuft senkrecht kuerzer aus (10 statt 16 Prozent). */
.epi-section.epi-paper--fade:has(.epi-zeitleiste) {
    padding-block: calc(var(--section-spacing) + 2.5rem);
}

.epi-paper--fade:has(.epi-zeitleiste)::before {
    -webkit-mask-image:
        linear-gradient(to right, transparent, black 10%, black 90%, transparent),
        linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
    mask-image:
        linear-gradient(to right, transparent, black 10%, black 90%, transparent),
        linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}

/* --- Bildangaben ----------------------------------------------------------
   KI-Kennzeichnung und Bildnachweis aus der Mediathek (inc/bildangaben.php).
   Steht immer sichtbar am Bild: als dezentes Etikett unten rechts auf dem
   Bild, bei einer Bildunterschrift als deren letzte Zeile. Kein Hover, kein
   Tooltip (Art. 50 Abs. 5 KI-Verordnung). Lange Nachweise brechen um, daher
   kleiner Radius statt Pille; die Breite ist begrenzt, damit das Etikett auf
   grossen Bildern eine Zeile bleibt und auf kleinen nicht ueber den Rand
   laeuft. So leise wie moeglich, es darf nicht vom Bild ablenken: kleine,
   normale Schrift, kaum Flaeche. Untergrenze ist die Lesbarkeit: 65 % Weiss
   ergibt auf Schwarz #A6A6A6, darauf #333 mit 5,2:1. */

/* Ohne Spezifitaet: eine Figure, die schon absolut sitzt (Hero), bleibt so. */
:where(:has(> .epi-bildangabe)) {
    position: relative;
}

.epi-bildangabe {
    position: absolute;
    inset-block-end: 6px;
    inset-inline-end: 6px;
    z-index: 1;
    display: block;
    max-inline-size: min(calc(100% - 12px), 28rem);
    padding: 1px 5px;
    border-radius: 3px;
    background-color: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--color-text);
    font-family: var(--font-primary);
    font-size: 0.625rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: start;
}

.epi-bildangabe__ki {
    white-space: nowrap;
}

.epi-bildangabe__symbol {
    inline-size: 1em;
    block-size: 1em;
    margin-inline-end: 2px;
    vertical-align: -0.15em;
    fill: currentColor;
}

.epi-bildangabe--unterschrift {
    position: static;
    max-inline-size: none;
    padding: 0;
    margin-block-start: var(--wp--preset--spacing--xs);
    border-radius: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: var(--color-secondary);
}

/* Karten: links oben sitzt die Pille (Branche, Thema), die Angabe bleibt in
   der rechten Haelfte. Referenz-Karte: unten mittig sitzt das Logo, die
   Angabe geht nach oben. */
.epi-card__media > .epi-bildangabe {
    max-inline-size: calc(55% - 6px);
}

.epi-referenz-karte__foto > .epi-bildangabe {
    inset-block: 6px auto;
}

.epi-ki-hinweis {
    margin-block: var(--wp--preset--spacing--lg);
    font-size: 0.875rem;
    color: var(--color-secondary);
}

/* --- Video (Einbettung, epi/videos) ---------------------------------------
   Eingebettete Videos (Vimeo, YouTube) immer 16:9 mit runder Ecke, auf allen
   Seiten und in Beitraegen. epi-video ist eine Kachel aus Video und Titel. */

.wp-block-embed.is-type-video .wp-block-embed__wrapper {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

/* Der Kern erzeugt das Seitenverhaeltnis ueber ein Pseudoelement mit
   Prozent-Padding. Die Regel oben macht das doppelt. */
.wp-block-embed.is-type-video .wp-block-embed__wrapper::before {
    content: none;
}

.wp-block-embed.is-type-video iframe {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    border: 0;
}

.epi-video {
    display: grid;
    gap: var(--wp--preset--spacing--sm);
    align-content: start;
}

.epi-video > .wp-block-embed {
    margin: 0;
}

.epi-video__title {
    margin: 0;
    font-family: var(--font-primary);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: var(--line-height-ui);
}

/* --- Kontakt (Seite Kontakt) --------------------------------------------
   Ab 1100 px folgt die Sektion dem Hero-Raster: links die Textspalte des
   Heros (bis 520 px, Gasse 80), rechts beginnt die Formular-Karte auf der
   Kante des Hero-Bilds und endet an der Inhaltskante (das Bild laeuft
   bewusst darueber hinaus, die Karte nicht). Im Markup steht das Formular
   zwischen Ueberschrift und Kontaktspalte und spannt zwei Zeilen: Die
   Rasterfolge ist zugleich Lese- und Tab-Folge. Darunter einspaltig,
   Formular vor Kontakt, weil das Formular die Hauptaufgabe ist. */

.epi-kontakt {
    row-gap: var(--wp--preset--spacing--xl);
}

@media screen and (min-width: 1100px) {
    /* auto 1fr: waechst die Karte, nimmt nur die zweite Zeile den Platz auf;
       Ueberschrift und Kontaktspalte links bleiben auf den Pixel stehen. */
    .epi-kontakt {
        grid-template-columns: minmax(0, min(520px, 47%)) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        column-gap: 80px;
    }

    .epi-kontakt > .epi-formular {
        grid-column: 2;
        grid-row: 1 / span 2;
        max-width: none;
        /* Gemeinsame Hoehe der Schritte (Modul, .ist-mehrstufig). */
        --schritt-hoehe: 31.5rem;
    }
}

.epi-kontaktspalte {
    display: grid;
    gap: var(--wp--preset--spacing--md);
    align-content: start;
    padding-block-start: var(--wp--preset--spacing--lg);
    border-block-start: 1px solid var(--color-line);
}

.epi-kontaktspalte > * {
    margin-block: 0;
}

.epi-section .epi-kontaktspalte h2 {
    font-size: 1.5rem;
}

.epi-kontaktspalte .epi-kontaktwege {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wp--preset--spacing--lg);
}

.epi-kontaktspalte .epi-kontaktweg__name {
    font-size: 1.125rem;
}

/* --- Kontaktwege (Seite Kontakt) ----------------------------------------
   Zwei gleichrangige Standorte als <address>. Icons nur fuer Ort, Telefon,
   E-Mail und Website (Font Awesome, im CSS, damit das Markup schlicht
   bleibt). Keine eingebettete Karte: sie braeuchte eine Einwilligung. */

.epi-kontaktwege {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: var(--wp--preset--spacing--lg);
}

.epi-kontaktweg {
    display: grid;
    gap: 0.625rem;
    align-content: start;
    font-style: normal;
}

.epi-kontaktweg p {
    margin: 0;
}

.epi-kontaktweg__name {
    margin-block-end: 0.25rem !important;
    font-family: var(--font-secondary);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: var(--line-height-heading);
}

.epi-kontaktweg__zeile {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    gap: 0.75rem;
    align-items: baseline;
    line-height: 1.5;
}

.epi-kontaktweg__zeile::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--color-accent-dark-wcag);
    text-align: center;
}

.epi-kontaktweg__zeile--ort::before { content: "\f3c5"; }
.epi-kontaktweg__zeile--telefon::before { content: "\f095"; }
.epi-kontaktweg__zeile--mail::before { content: "\f0e0"; }
.epi-kontaktweg__zeile--web::before { content: "\f0ac"; }
.epi-kontaktweg__zeile--support::before { content: "\f590"; }

/* Zwischenbezeichnung im Standort, etwa „Support“ mit eigener Nummer. */
.epi-kontaktweg .epi-kontaktweg__gruppe {
    margin-block-start: 0.5rem;
    font-weight: 700;
    line-height: var(--line-height-ui);
}

/* Klickziel mind. 44 px hoch fuer Telefon, E-Mail und Website. */
.epi-kontaktweg__zeile a {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-min);
    color: var(--color-accent-dark-wcag);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.epi-kontaktweg__zeile:has(a) {
    align-items: center;
}

.epi-kontaktweg__zeile a:hover {
    color: var(--color-text);
}

.epi-kontaktweg__extern {
    margin-inline-start: 0.375rem;
    font-weight: 600;
    text-decoration: none;
}