/* ============================================================
   Block-Engine – Layout-Sicherheit (Schicht 2) + datengetriebene Spalten
   Wird nur geladen, wenn die Block-Engine aktiv ist (Kill-Switch).

   Phase 1 bewusst konservativ: nur Umbruch-/Media-Schutz, KEINE Typo-Overrides,
   damit die datengetriebene Sektion identisch zur hartkodierten Vorlage rendert
   (Parität). Fluide Schriftgrößen kommen pro neuem Block-Typ, nicht global.
   ============================================================ */

/* Strukturelle Garantie: Text kann nicht überlaufen, Medien nicht sprengen. */
.be-block :where(h1, h2, h3, h4, h5, h6, p, span, a, li, button,
                 td, th, label, figcaption, blockquote, dt, dd, div, strong, em, code) {
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    min-width: 0;
}

.be-block pre { white-space: pre-wrap; }

/* Sicherheitsnetz für Bilder OHNE eigene Regel (Fließtext, eingefügte Grafiken).
   Bewusst in :where(), also mit Spezifität 0 für den Bildteil: sonst schlägt dieses
   `height:auto` jede Komponentenregel, die ein Bild absichtlich einen Rahmen ausfüllen lässt.
   Genau das ist auf runs passiert: `.intro-section__photo img { height: 100% }` (home.css) und
   `.be-block img` haben dieselbe Spezifität, block-engine.css lädt später und hat gewonnen. Das
   Foto stand dadurch im 4:3-Rahmen mit seinem eigenen 3:2 und ließ unten einen dunklen Streifen
   offen, der auf fast schwarzem Grund wie ein Balken aussah. */
.be-block :where(img, svg) {
    max-width: 100%;
    height: auto;
}

/* Datengetriebene Spaltenzahl. Default 3 = bisheriges cta-grid-Layout (Parität).
   Nur am Desktop-Breakpoint; die mobilen/mittleren Stufen aus home.css bleiben. */
@media (min-width: 1024px) {
    .cta-grid__inner {
        grid-template-columns: repeat(var(--be-cols, 3), 1fr);
    }
}

/* Inline-SVG-Icons aus dem Hausset: übernehmen Größe (1em = font-size der Icon-Box) und
   Farbe (currentColor) genau wie die Fontello-Glyphen. */
.cta-card__icon .be-icon-svg {
    display: block;
    width: 1em;
    height: 1em;
}

/* ============================================================
   ZEITLEISTE (Sektionstyp `timeline`)
   ============================================================
   Steht meist dort, wo sonst die Fakten-Leiste sitzt: direkt unter dem Hero. Sie darf deshalb
   NICHT wie eine Kachelreihe aussehen — sonst wäre nichts gewonnen. Deshalb: eine durchgehende
   Linie, Punkte darauf, Zeiten darüber. Waagerecht am Desktop, senkrecht am Handy.

   Alle Farben kommen aus Tokens. Ein helles Event bekommt dieselbe Leiste in seiner Welt. */

.be-timeline {
    padding: clamp(2rem, 5vw, 3.25rem) 0;
    /* NICHT --surface-sunken: auf einem fast schwarzen Grund liegt die abgesetzte Fläche bei
       einem Kontrastverhältnis von 1,02:1 zum Seitenhintergrund — das Band existierte optisch
       gar nicht, sichtbar blieben nur Linie und Punkte. Eine leichte Einfärbung mit der
       Signalfarbe trägt (1,14:1) und bindet das Band zugleich an die Farbwelt des Events.
       Der Fallback greift, wo color-mix fehlt oder keine Signalfarbe gesetzt ist. */
    background: var(--surface-sunken, var(--color-surface, transparent));
    border-block: 1px solid color-mix(in srgb, var(--color-highlight, var(--color-primary)) 28%, transparent);
}
@supports (background: color-mix(in srgb, red 50%, blue)) {
    .be-timeline {
        background:
            linear-gradient(180deg,
                color-mix(in srgb, var(--color-highlight, var(--color-primary)) 12%, transparent) 0%,
                color-mix(in srgb, var(--color-highlight, var(--color-primary)) 6%,  transparent) 100%),
            var(--surface-page, var(--color-surface, transparent));
    }
}
.be-timeline__head { margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.be-timeline__kicker {
    display: block;
    font-size: var(--text-xs, .75rem);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-highlight, var(--color-primary));
    margin-bottom: .35rem;
}
.be-timeline__heading {
    font-family: var(--font-heading);
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    line-height: 1.15;
    margin: 0;
}

.be-timeline__track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: clamp(1rem, 3vw, 2rem);
    position: relative;
}
/* Die Linie liegt HINTER den Punkten und ist reine Dekoration — im Markup steht sie nicht,
   damit ein Screenreader sie nicht vorliest. */
.be-timeline__track::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 6px;
    height: 2px;
    background: linear-gradient(90deg,
        var(--color-highlight, var(--color-primary)) 0%,
        color-mix(in srgb, var(--color-highlight, var(--color-primary)) 25%, transparent) 100%);
}
.be-timeline__stop {
    position: relative;
    padding-top: 1.65rem;
    min-width: 0;
}
.be-timeline__dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--surface-page, var(--color-surface, #fff));
    border: 2px solid var(--color-highlight, var(--color-primary));
}
.be-timeline__time {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    line-height: 1;
    font-variant-numeric: tabular-nums;   /* Uhrzeiten stehen untereinander bündig */
    color: var(--color-text);
    margin-bottom: .3rem;
}
.be-timeline__label {
    display: block;
    font-weight: 700;
    font-size: var(--text-sm, .9375rem);
    color: var(--color-text);
}
.be-timeline__detail {
    display: block;
    font-size: var(--text-xs, .8125rem);
    color: var(--color-text-muted);
    margin-top: .15rem;
}
.be-timeline__note {
    margin: clamp(1rem, 3vw, 1.5rem) 0 0;
    font-size: var(--text-sm, .9375rem);
    color: var(--color-text-muted);
}

/* Am Handy kippt die Leiste in die Senkrechte: nebeneinander wären die Zeiten unlesbar klein. */
@media (max-width: 640px) {
    .be-timeline__track { grid-template-columns: 1fr; gap: 0; }
    .be-timeline__track::before {
        left: 6px; right: auto;
        top: 6px; bottom: 6px;
        width: 2px; height: auto;
        background: linear-gradient(180deg,
            var(--color-highlight, var(--color-primary)) 0%,
            color-mix(in srgb, var(--color-highlight, var(--color-primary)) 25%, transparent) 100%);
    }
    .be-timeline__stop { padding: 0 0 1.35rem 2rem; }
    .be-timeline__stop:last-child { padding-bottom: 0; }
    .be-timeline__dot { top: 4px; }
    .be-timeline__time { font-size: 1.5rem; }
}

/* ============================================================
   DURCHGEHENDE FLÄCHE (body.be-flat) — optional, per Branding
   ============================================================
   Hebt die abwechselnden Sektionsflächen auf: die Seite steht auf EINEM Grund, getrennt nur durch
   Haarlinien. Standardmäßig AUS. Hier bewusst als Angebot stehengelassen, nicht als Vorgabe.

   Die frühere Streckenachse (`route_spine`, 4.75.0) ist ersatzlos entfallen: Der senkrechte Strahl,
   der die Sektionen verband, wirkte störend — er zog eine zweite, konkurrierende Ordnung über die
   Seite, während die Zeitleiste ihre eigene schon mitbringt. */
body.be-flat .site-main > section.section--surface,
body.be-flat .site-main > section.section--white,
body.be-flat .site-main > section.strecken-section,
body.be-flat .site-main > section.counter-section,
body.be-flat .site-main > section.intro-section {
    background: transparent;
}
body.be-flat .site-main > section + section:not(.photo-band):not(.hero) {
    border-top: 1px solid var(--color-border);
}

/* ============================================================
   SEKTIONS-VARIANTEN — dieselben Inhalte, andere Aufteilung
   ============================================================
   Der Kern der Unterscheidung zwischen Schwestersites. Nicht Farbe, nicht Zierrat: die
   KOMPOSITION innerhalb der Sektion. Jede Variante ist eine Eigenschaft der Sektion, wird also
   pro Event gesetzt und ist im KI-Seitenbuilder sichtbar. Kein zweites Template, nirgends.

   Ohne Variante bleibt alles wie bisher — Parkleuchten und der Firmenlauf ändern sich nicht. */

/* --- Karten-Raster: LISTE ------------------------------------------------------------------
   Statt gleich großer Kacheln nebeneinander volle Breite untereinander, getrennt durch
   Haarlinien, mit laufender Nummer. Das ist der stärkste Bruch mit dem Kachel-Rhythmus, den
   alle anderen Event-Seiten teilen. */
.cta-grid--liste .cta-grid__inner {
    display: block;
    counter-reset: be-karte;
}
.cta-grid--liste .cta-card {
    counter-increment: be-karte;
    display: grid;
    /* Letzte Spalte fest: der Pfeil wandert beim Hover um 6 px nach rechts (components.css).
       Mit `auto` sitzt er bündig am Rand und läuft dabei aus der Karte heraus — genau das war
       zu sehen. Die Spalte ist breiter als das Zeichen, die Bewegung bleibt drin. */
    /* Vier Spalten für vier Elemente: Nummer, Titel, Text, Pfeil. Mit nur drei Spalten fällt
       das vierte Element in eine zweite Zeile — auf rcr stand die Überschrift dadurch UNTER
       ihrer eigenen Nummer statt daneben. Die Zuordnung steht unten explizit, damit sie nicht
       davon abhängt, ob eine Karte gerade ein Icon oder einen Text hat. */
    grid-template-columns: auto minmax(8rem, auto) 1fr 3.5rem;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    background: transparent;
    border: 0;
    border-top: 1px solid var(--color-border);
    border-radius: 0;
    padding: clamp(1.1rem, 2.6vw, 1.9rem) 0;
    min-height: 0;
}
.cta-grid--liste .cta-card:last-child { border-bottom: 1px solid var(--color-border); }
/* Rechts einrücken, damit der Pfeil nicht an der Containerkante klebt. */
.cta-grid--liste .cta-card { padding-right: clamp(.5rem, 2vw, 1.5rem); }
/* Die Nummer ersetzt das Icon-Feld: sie ordnet die Liste und ist zugleich das Zahlenmotiv,
   das dieses Event ohnehin trägt (Startzeiten, Distanzen). */
.cta-grid--liste .cta-card::before {
    /* ⚠️ `.cta-card::before` ist in components.css ABSOLUT positioniert UND 3 px hoch (die
       Oberkante der Kachel). Beides muss hier zurück: absolut positionierte Elemente sind keine
       Rasterelemente (die Nummer lag sonst über der Überschrift), und mit `height: 3px` sitzt
       die Ziffer in einem 3 px hohen Kasten — mittig ausgerichtet rutscht sie dadurch nach
       unten. Genau das war bei den Zeilen 03 und 04 zu sehen. */
    position: static;
    height: auto;
    /* Auch die Fläche muss weg: `.cta-card::before` ist im Grundzustand ein 3-px-Streifen in der
       Rahmenfarbe. Sichtbar wurde sie erst, als der Kasten seine Höhe vom Inhalt bekam — dann
       lag ein hellgrauer Block hinter den Ziffern. */
    background: none;
    content: counter(be-karte, decimal-leading-zero);
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    opacity: .55;
}
.cta-grid--liste .cta-card__icon { display: none; }
.cta-grid--liste .cta-card::before      { grid-column: 1; grid-row: 1; }
.cta-grid--liste .cta-card__title       { grid-column: 2; grid-row: 1; }
.cta-grid--liste .cta-card__text        { grid-column: 3; grid-row: 1; }
.cta-grid--liste .cta-card__arrow       { grid-column: 4; grid-row: 1; }
.cta-grid--liste .cta-card__title { margin: 0 0 .15rem; }
.cta-grid--liste .cta-card__text  { margin: 0; }
.cta-grid--liste .cta-card__arrow {
    margin-top: 0;          /* `margin-top: auto` stammt aus der Flex-Kachel und wirkt hier nur störend */
    justify-self: start;    /* linksbündig in der reservierten Spalte → Platz nach rechts */
    opacity: .6;
}
.cta-grid--liste .cta-card:hover .cta-card__arrow { opacity: 1; }
/* Der Akzent beim Überfahren: Nummer und Trennlinie werden zur Primärfarbe.
   ⚠️ Vorher kam er aus `.cta-card:hover::before { background: … }` — einer Regel für die
   3-px-Oberkante der KACHEL. In der Liste ist `::before` die Nummer, also wurde ein orangefarbener
   Block hinter die Ziffern gelegt; und bei Karten MIT Foto war er zusätzlich abgeschaltet. Die
   ersten beiden Zeilen hatten dadurch gar keinen Akzent, die anderen einen falschen. */
.cta-grid--liste .cta-card:hover::before,
.cta-grid--liste .cta-card--photo:hover::before {
    background: none;
    color: var(--color-primary);
    opacity: 1;
}
.cta-grid--liste .cta-card:hover { border-top-color: var(--color-primary); }
.cta-grid--liste .cta-card:hover + .cta-card { border-top-color: var(--color-primary); }
/* Eine Listenzeile hebt nicht ab — das Anheben stammt aus der Kachel-Optik. */
.cta-grid--liste .cta-card:hover { transform: none; box-shadow: none; }
/* Fotos tragen in der Liste nicht — sie würden 1:1 die Kachel-Optik zurückholen.
   ⚠️ Mit dem Foto muss auch die FARBE zurück: `.cta-card--photo` setzt Text auf Weiß, weil er
   sonst auf dem Bild steht. Ohne Bild stand er auf rcr weiß auf weißer Fläche — zwei von vier
   Zeilen waren unsichtbar, zu sehen war nur ihre Nummer. */
.cta-grid--liste .cta-card--photo { background-image: none; color: var(--color-text); }
.cta-grid--liste .cta-card--photo::before { background: none; }
.cta-grid--liste .cta-card--photo .cta-card__title,
.cta-grid--liste .cta-card--photo .cta-card__text,
.cta-grid--liste .cta-card--photo .cta-card__arrow { color: var(--color-text); }
.cta-grid--liste .cta-card--photo .cta-card__text { opacity: .78; }

/* --- Karten-Raster: FOKUS -----------------------------------------------------------------
   Erste Karte groß über zwei Spalten, der Rest daneben. Bricht die Gleichrangigkeit auf. */
@media (min-width: 900px) {
    .cta-grid--fokus .cta-grid__inner { grid-template-columns: 2fr 1fr; }
    .cta-grid--fokus .cta-card:first-child { grid-row: span 2; }
}

/* --- Text-Sektion: VERSETZT ----------------------------------------------------------------
   Statt 50/50 mittig ein schmaler Textblock gegen ein großes Foto, gegeneinander verschoben.
   Verändert das Maß der Seite spürbar, ohne ein Template anzufassen. */
@media (min-width: 900px) {
    /* 45/55 statt 50/50: spürbar anders, ohne dass die Textspalte gedrückt wirkt. Vorher
       standen hier 5fr/7fr plus ein großzügiger Textabstand — zusammen wirkte das wie 1:3. */
    .intro-section--versetzt .intro-section__grid {
        grid-template-columns: 5fr 6fr;
        align-items: start;
        gap: clamp(2rem, 5vw, 4rem);
    }
    /* Foto und Text beginnen auf DERSELBEN Oberkante. Der ursprüngliche Versatz (Foto bis zu
       2,5 rem hochgezogen, Text zusätzlich abgesetzt) summierte sich auf bis zu 4 rem Unterschied
       und las sich als Fehler, nicht als Gestaltung. Die Variante lebt vom Maß 45/55 und vom
       Bildformat, nicht von einer verschobenen Grundlinie. */
    .intro-section--versetzt .intro-section__text  { padding-top: 0; }
    .intro-section--versetzt .intro-section__photo {
        margin-top: 0;
        /* KEIN erzwungenes Hochformat: die Vorlagen sind Querformat (1500 × 1000). Ein
           aspect-ratio 3/4 auf dem Bild machte es höher als seinen Rahmen — der Rahmen hat
           overflow:hidden, also wurde oben und unten abgeschnitten. 4/3 liegt nah am Original. */
        aspect-ratio: 4 / 3;
    }
}

/* ============================================================
   HERO-AUFTEILUNG „mitte" (body.be-hero-mitte)
   ============================================================
   Die Schwestersites setzen den Hero-Inhalt als schmalen Block LINKS (max. 640 px), vertikal
   mittig. Diese Anlage erkennt man wieder, egal welche Farben darin stecken.

   Hier stattdessen alles auf der Mittelachse: Titel, Datum/Ort, Countdown und Knöpfe stehen
   symmetrisch übereinander. Ruhig, klar, und auf den ersten Blick eine andere Seite.

   Der erste Versuch („basis": Inhalt an der Unterkante, Titel links / Fakten rechts) ist wieder
   entfallen — die zweispaltige Grundlinie wirkte unruhig statt weit. Zentriert ist hier die
   ehrlichere Lösung: wenn eine Anordnung nicht trägt, hilft keine Feinjustierung daran.

   Reine CSS-Auflage: `templates/hero.php` bleibt unangetastet. Jedes Element bekommt seine
   Zentrierung EINZELN — die Kinder sind teils Flex-Container, für die `text-align` allein nichts
   tut. Genau daran sah die erste Fassung schief aus. */
body.be-hero-mitte .hero__content {
    display: flex;
    justify-content: center;
}
body.be-hero-mitte .hero__inner {
    max-width: 62ch;              /* Lesbare Zeilenlänge, nicht die volle Containerbreite */
    margin-inline: auto;
    text-align: center;
}
body.be-hero-mitte .hero__title {
    text-wrap: balance;           /* Umbrüche gleichmäßig statt einer einsamen letzten Zeile */
}
/* Flex-Kinder: text-align reicht nicht, sie brauchen ihre eigene Achse. */
body.be-hero-mitte .hero__meta,
body.be-hero-mitte .hero__actions {
    justify-content: center;
}
/* Der Countdown ist SELBST ein Flex-Container (.be-countdown in components.css). `margin-inline`
   am Wrapper bewirkt daran nichts — er nimmt ohnehin die volle Breite ein, und seine Ziffernblöcke
   bleiben links gepackt. Er braucht seine eigene Achse, genau wie hero__meta und hero__actions. */
body.be-hero-mitte .hero__countdown-wrapper .be-countdown {
    justify-content: center;
}
/* Das Kicker-Label ist inline-block; ohne diese Zeile klebt es links. */
body.be-hero-mitte .hero__eyebrow {
    display: inline-block;
}

/* Listen-Variante auf schmalen Geräten: drei Spalten (Nummer / Text / Pfeil) lassen auf einem
   390-px-Bildschirm zu wenig für den Text. Der Pfeil entfällt dort — er ist ohnehin nur ein
   Hinweis, die ganze Karte ist verlinkt —, und die Nummer rückt über den Text. */
@media (max-width: 560px) {
    .cta-grid--liste .cta-card {
        grid-template-columns: 1fr;
        gap: .35rem;
        padding-right: 0;
    }
    .cta-grid--liste .cta-card::before,
    .cta-grid--liste .cta-card__title,
    .cta-grid--liste .cta-card__text { grid-column: 1; grid-row: auto; }
    .cta-grid--liste .cta-card::before { font-size: 1.35rem; }
    .cta-grid--liste .cta-card__arrow { display: none; }
}

/* --- Foto-Band: MITTE ----------------------------------------------------------------------
   Textblock auf der Mittelachse statt links im Bild. Wie beim Hero gilt: jedes begrenzte Element
   braucht seine eigene Zentrierung — `text-align` allein reicht nicht, weil sowohl der Inhalts-
   block (max. 720 px) als auch der Fließtext (max. 560 px) eine eigene Breite haben und sonst
   links kleben. */
.photo-band--mitte .photo-band__content {
    margin-inline: auto;
    text-align: center;
}
.photo-band--mitte .photo-band__text {
    margin-inline: auto;
}

/* ============================================================
   HERO-AUFTEILUNG „platte" (body.be-hero-platte)
   ============================================================
   Für helle Events. Statt Text IM Foto steht das Foto als Band oben und der Inhalt darunter auf
   einer eigenen Fläche, die ins Bild ragt. Das ist der deutlichste Bruch mit der Anlage der
   Schwestersites, ohne eine einzige Zeile in templates/hero.php zu ändern: dort steht Text auf
   einem bildschirmfüllenden Foto, hier trägt eine Karte den Inhalt.

   Warum das gerade auf hellem Grund richtig ist: Schrift auf Foto braucht immer einen Schleier,
   und ein Schleier macht jedes Foto dunkler und flauer. Auf einer hellen Seite fällt genau das
   auf. Die Platte löst den Konflikt, statt ihn abzumildern. */
body.be-hero-platte .hero {
    /* Das Foto bleibt vollflächig wie bei den Schwestersites — es ist das stärkste Bild, das
       dieses Event hat (der Rhein mit beiden Ufern). Anders ist, was DARAUF steht: nicht Schrift
       im Bild, sondern eine eigene Fläche, die den Inhalt trägt. */
    min-height: clamp(620px, 86svh, 960px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
body.be-hero-platte .hero__media {
    position: absolute;
    inset: 0;
    height: auto;
}
body.be-hero-platte .hero__content {
    position: relative;
    z-index: 2;
    padding-top: calc(var(--header-height) + var(--space-8));
    padding-bottom: clamp(2rem, 5vw, 4rem);
}
body.be-hero-platte .hero__inner {
    /* Schmaler als die halbe Bühne: die Platte soll auf dem Foto liegen, nicht es ersetzen.
       Bei 940 px blieb rechts nur ein Streifen Bild übrig. */
    max-width: min(720px, 100%);
    background: var(--surface-raised);
    border-radius: var(--radius-2xl);
    padding: clamp(1.5rem, 4vw, 2.75rem);
    box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 24px 60px -30px rgba(0,0,0,.45);
    /* Die Kante nimmt das Rheinband des Logos auf: eine Farbfläche, die von der Marke kommt
       und nicht aus dem Farbkreis. */
    border-top: 4px solid var(--color-primary);
}

/* Die Titelgröße darf hier NICHT an der Bildschirmbreite hängen: die Platte ist auf 680 px
   begrenzt, der Titel wüchse aber mit dem Fenster weiter. Auf 1440 px stand „HALBMARATHON"
   deshalb über die Kante hinaus. Feste Obergrenze plus Notbremse für lange Wörter. */
body.be-hero-platte .hero__title {
    /* Gemessen: „HALBMARATHON" braucht rund 0,72 em je Zeichen, also 13 × 0,72 = 9,4 em.
       Bei 720 px Platte minus Innenabstand bleiben ~632 px, das erlaubt höchstens 3,8 rem.
       KEINE Silbentrennung: „HALBMARA-THON" in einer Schlagzeile ist schlimmer als eine
       Schriftgröße kleiner. */
    font-size: clamp(1.9rem, 4.2vw, 3.8rem);
    overflow-wrap: break-word;
    hyphens: manual;
}

/* Auf der Platte steht Text auf heller Fläche, nicht auf Foto. Alles, was im Bild-Hero weiß
   sein MUSS, wird hier auf die normalen Textfarben zurückgeholt. */
body.be-hero-platte .hero__title,
body.be-hero-platte .hero__meta,
body.be-hero-platte .hero__countdown-wrapper,
body.be-hero-platte .be-countdown,
/* Die Ziffern heißen `__value`, nicht `__num` — mein erster Anlauf färbte ein Element, das es
   nicht gibt, und der Countdown stand weiß auf Weiß da. */
body.be-hero-platte .be-countdown__value,
body.be-hero-platte .hero__slogan { color: var(--color-text); }
body.be-hero-platte .be-countdown__sep { color: var(--color-primary); }
/* Die Vorzeile ist ein gefülltes Feld in der Primärfarbe, kein Text auf Papier. Deshalb eine
   Schriftfarbe FÜR die Fläche: das abgedunkelte Orange für Papier ergab dort 1,85:1.
   Weiß auf dem Logo-Orange sind 3,05:1 — für diese kurze, fette Versalzeile in Ordnung
   (WCAG verlangt 3:1 ab 18,66 px fett), für Fließtext wäre es zu wenig. */
body.be-hero-platte .hero__eyebrow {
    color: #FFFFFF;
    font-weight: 900;
}
body.be-hero-platte .hero__meta-item,
body.be-hero-platte .be-countdown__label { color: var(--color-text-muted); }
body.be-hero-platte .hero__meta-sep { opacity: .35; }

/* Der helle Geist-Knopf hat auf weißer Fläche keinen Kontrast: dort ist der Umriss in Textfarbe
   richtig. */
body.be-hero-platte .hero .btn--white {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    border-color: transparent;
}
/* Der Knopf hatte gar keinen Hover: meine Regel oben ist spezifischer als `.btn--white:hover`
   und hat dessen Zustand mit überschrieben. Jetzt derselbe Wechsel wie beim Hauptknopf der
   Seite — dunkleres Orange, Beschriftung in Weiß. */
body.be-hero-platte .hero .btn--white:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #FFFFFF;
}
body.be-hero-platte .hero .btn--ghost:hover {
    background: var(--color-text);
    border-color: var(--color-text);
    color: var(--surface-raised);
}
body.be-hero-platte .hero .btn--ghost {
    color: var(--color-text);
    border-color: var(--color-text);
}
body.be-hero-platte .hero .btn--ghost:hover {
    background: var(--color-text);
    color: var(--surface-page);
}
/* Das Foto braucht keinen starken Schleier mehr, es trägt keinen Text. Ein Hauch bleibt, damit
   die Kante zur Platte nicht hart abreißt. */
body.be-hero-platte .hero__overlay {
    background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.10) 45%, rgba(0,0,0,.42) 100%);
}

@media (max-width: 700px) {
    body.be-hero-platte .hero__content { margin-top: -2rem; }
    body.be-hero-platte .hero__inner { padding: 1.25rem; }
}

/* ============================================================
   STÄDTE-DUELL (Sektionstyp `duell`)
   ============================================================
   Gebaut wie im Entwurf: eine WEISSE Karte auf dem leicht grauen Papier, beide Städte in
   normaler Textfarbe, dazwischen ein einzelnes schräges Band in der Primärfarbe.

   Die erste Fassung hatte die linke Seite orange und die rechte in der Zweitfarbe eingefärbt.
   Damit war der Farbwechsel wieder da, den wir gerade erst aus der Fakten-Leiste geworfen
   hatten — nur größer. Die Karte lebt vom Kontrast zum Grund, nicht von zwei Farbflächen.
   Das schräge Band allein trägt die Idee: zwei Ufer, dazwischen der Fluss. */
.be-duell__head { max-width: 62ch; margin-bottom: clamp(1.5rem, 3vw, 2.4rem); }
.be-duell__kicker {
    display: block; font-size: .78rem; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--color-primary-text); margin-bottom: .55rem;
}
.be-duell__heading {
    font-family: var(--font-heading); font-weight: 900; line-height: 1.05;
    font-size: clamp(1.7rem, 3.6vw, 2.6rem); margin: 0 0 .7rem; text-wrap: balance;
}
.be-duell__text { margin: 0; color: var(--color-text-muted); }

.be-duell__feld {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    background: var(--surface-raised);
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 14px 40px -28px rgba(0,0,0,.35);
}
.be-duell__label {
    grid-column: 1 / -1;
    padding: clamp(.9rem, 2vw, 1.2rem) clamp(1.1rem, 2.6vw, 1.6rem) 0;
    font-size: .7rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase;
    color: var(--color-primary-text);
}
.be-duell__seite {
    display: flex; flex-direction: column; gap: .25rem;
    padding: clamp(.9rem, 2.4vw, 1.4rem) clamp(1.1rem, 2.6vw, 1.6rem) clamp(1.1rem, 2.6vw, 1.5rem);
}
.be-duell__seite--rechts { text-align: right; }
.be-duell__name {
    font-family: var(--font-heading); font-weight: 900; text-transform: uppercase;
    font-size: clamp(1.05rem, 2.2vw, 1.6rem); line-height: 1.05; letter-spacing: -.01em;
    color: var(--color-text);
}
.be-duell__note {
    font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--color-text-muted);
}

/* Das eine farbige Element: ein Parallelogramm, das die beiden Seiten trennt und dabei die
   Diagonale des Logos aufnimmt. Höhe 100 % der Zeile, damit es die Karte durchschneidet. */
.be-duell__band {
    width: clamp(48px, 5vw, 72px);
    align-self: stretch;
    min-height: 64px;
    background: var(--color-primary);
    clip-path: polygon(38% 0, 100% 0, 62% 100%, 0 100%);
}
.be-duell__btn { margin-top: clamp(1rem, 2.4vw, 1.6rem); }

@media (max-width: 620px) {
    .be-duell__feld { grid-template-columns: 1fr; }
    .be-duell__seite--rechts { text-align: left; }
    .be-duell__band {
        width: auto; min-height: 0; height: 18px; align-self: auto;
        clip-path: polygon(0 0, 100% 0, 100% 38%, 0 100%);
    }
}