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