/*
 * components.css – Wiederverwendbare UI-Komponenten
 */

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.625rem 1.25rem;
    /* Knöpfe sprechen die Stimme der Marke, nicht die des Fließtexts.
       Bis 14.08.2026 standen sie in `--font-body` mit Gewicht 600. Neben einer Überschrift in
       der Displayschrift mit Gewicht 900 — etwa im Foto-Band — las sich der Aufruf dadurch wie
       eine Fußnote statt wie die Handlungsaufforderung. */
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
    white-space: nowrap;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.btn:hover   { transform: translateY(-1px); }
.btn:active  { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

/* Varianten */
.btn--primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    /* Nicht fest Weiß: auf hellen Primärfarben ist Weiß unlesbar (Logo-Orange des Rhein City Run
       kommt auf 3,05:1). Das Branding rechnet die lesbare Farbe aus, Vorgabe bleibt Weiß. */
    color: var(--color-text-on-primary);
}
.btn--primary:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    /* Nicht fest Weiss und auch nicht `--color-text-on-primary`: die Hover-Flaeche ist eine
       eigene Farbe und braucht eine eigene Rechnung. Weiss faellt auf park durch (3,66:1),
       die Schrift der Grundflaeche auf rcr (3,37:1) und runs (2,91:1). */
    color: var(--color-text-on-primary-dark, var(--color-white));
    box-shadow: var(--shadow-primary);
}

.btn--ghost {
    background: transparent;
    border-color: rgba(255,255,255,0.50);
    color: var(--color-white);
}
.btn--ghost:hover {
    background: rgba(255,255,255,0.10);
    border-color: var(--color-white);
    color: var(--color-white);
}

.btn--white {
    background: var(--color-white);
    border-color: var(--color-white);
    /* NICHT `--color-primary`: helle Markenfarben sind auf Weiss unlesbar (gemessen Tuerkis
       2,13:1 auf park, Logo-Orange 3,02:1 auf rcr). `--color-primary-text` waere hier ebenfalls
       falsch — die Rolle meint „lesbar auf der Seitenflaeche" und ist bei dunklen Events
       aufgehellt. Es braucht die auf WEISS gerechnete Variante. */
    /* Die DUNKLE Markenfarbe, nicht die auf Weiß gerechnete Primärvariante.
       `--color-primary-on-white` leitet sich aus der Primärfarbe ab; beim Mülheimer Firmenlauf
       ist die orange, und die abgedunkelte Fassung (#9F6500) ist ein schlammiges Braun. Es
       bestand die Kontrastprüfung und sah trotzdem aus wie ein deaktivierter Knopf.
       `--color-dark` ist bei jedem Event die Fläche, die weiße Schrift trägt — also zwingend
       dunkel genug für den umgekehrten Fall, und es IST eine Markenfarbe. */
    color: var(--color-dark, var(--color-primary-on-white, var(--color-primary)));
    font-weight: 800;
}
/* ⚠️ „Weiß mit 90 % Deckkraft" war als Hover praktisch unsichtbar — der Knopf wirkte tot
   (Dennis auf rcr, 15.08.2026). Stattdessen kippt er in die Markenfarbe; die Textfarbe ist
   die auf der Primärfläche GERECHNETE (auf hellen Primärfarben wie dem rcr-Orange wäre
   Weiß unlesbar), damit trägt der Wechsel auf jedem Event. */
.btn--white:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-on-primary, var(--color-white));
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.btn--outline {
    background: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.btn--outline:hover {
    background: var(--color-primary);
    /* Nicht fest Weiß: die Fläche ist die Primärfarbe, dort gilt dieselbe Rechnung wie beim
       Hauptknopf (Weiß auf dem Logo-Orange des Rhein City Run wäre 3,05:1). */
    color: var(--color-text-on-primary);
    box-shadow: var(--shadow-primary);
}

.btn--dark {
    background: var(--color-dark-3);
    border-color: var(--color-dark-3);
    color: var(--color-white);
}
/* Schriftfarbe MUSS hier stehen: `a:hover { color: … }` in main.css hat eine höhere
   Spezifität (0,1,1) als die Variantenklasse (0,1,0) und färbt sonst die Beschriftung
   in die Hover-Farbe der Marke — auf einer dunklen Fläche unlesbar. */
.btn--dark:hover { background: var(--color-dark-4); color: var(--color-white); }

.btn--accent {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-dark);
}
.btn--accent:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); color: var(--color-text-on-accent, var(--color-dark)); }

/* Größen */
.btn--sm  { padding: 0.375rem 0.875rem; font-size: var(--text-xs); }
.btn--lg  { padding: 0.875rem 1.75rem;  font-size: var(--text-base); border-radius: var(--radius-lg); }
.btn--xl  { padding: 1.125rem 2.25rem;  font-size: var(--text-lg);   border-radius: var(--radius-lg); }
.btn--full { width: 100%; }

/* Die grossen Knopf-Varianten stammen aus dem Desktop-Hero. Auf 360 px wirkt `btn--xl` mit
   18 px Schrift und 36 px Seitenabstand wuchtig und schiebt lange Beschriftungen
   („Anmeldung öffnet bald") an den Rand. Mobil eine Stufe zurueck. */
@media (max-width: 640px) {
    .btn--lg { padding: 0.75rem 1.25rem; font-size: var(--text-sm); }
    .btn--xl { padding: 0.875rem 1.5rem; font-size: var(--text-base); }
}

/* Deaktiviert */
.btn--disabled,
.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
}

/* ============================================================
   CARDS
   ============================================================ */
.cta-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-8);
    background: var(--surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    text-decoration: none;
    color: var(--color-text);
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-base);
    position: relative;
    overflow: hidden;
}
.cta-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-border);
    transition: background var(--transition-fast);
}
.cta-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-elevated);
    transform: translateY(-4px);
    color: var(--color-text);
}
.cta-card:hover::before { background: var(--color-primary); }

.cta-card--primary {
    background: var(--gradient-eon);
    border-color: transparent;
    color: var(--color-white);
}
.cta-card--primary::before { background: rgba(255,255,255,0.30); }
.cta-card--primary:hover {
    background: var(--gradient-eon);
    filter: brightness(1.08);
    color: var(--color-white);
}

.cta-card__icon  { font-size: 2rem; }
.cta-card__title {
    font-size: var(--text-2xl);
    font-family: var(--font-heading);
    font-weight: 800;
    color: inherit;
    text-transform: uppercase;
}
.cta-card__text  { font-size: var(--text-sm); color: inherit; opacity: 0.90; flex: 1; }
.cta-card__arrow { font-size: var(--text-xl); font-weight: 700; margin-top: auto; transition: transform var(--transition-fast); }
.cta-card:hover .cta-card__arrow { transform: translateX(6px); }

/* News Card */
.news-card {
    background: var(--surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow var(--transition-fast), transform var(--transition-base);
    display: flex;
    flex-direction: column;
}
.news-card:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); }
.news-card__body { padding: var(--space-6); flex: 1; display: flex; flex-direction: column; gap: var(--space-3); }
.news-card__date { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 500; }
.news-card__title { font-size: var(--text-xl); }
.news-card__title a { color: inherit; text-decoration: none; }
.news-card__title a:hover { color: var(--color-primary); }
.news-card__excerpt { font-size: var(--text-sm); color: var(--color-text-muted); flex: 1; }
.news-card__link { font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); text-decoration: none; margin-top: auto; }

/* ============================================================
   COUNTDOWN WIDGET
   ============================================================ */
.be-countdown {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1);
}

.be-countdown__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 52px;
}

.be-countdown__value {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 900;
    color: var(--color-white);
    line-height: 1;
    min-width: 2ch;
    text-align: center;
    letter-spacing: -0.02em;
}

.be-countdown__label {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 4px;
    text-align: center;
}

.be-countdown__sep {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 900;
    color: rgba(255, 255, 255, 0.35);
    line-height: 1;
    align-self: flex-start;
    padding-top: 0;
    margin: 0 -2px;
}

/* Style: hero (größer, breiter) */
.be-countdown--hero .be-countdown__value {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900;
}
.be-countdown--hero .be-countdown__unit {
    min-width: 72px;
}
.be-countdown--hero .be-countdown__sep {
    font-size: clamp(2rem, 5vw, 3.5rem);
}
.be-countdown--hero .be-countdown__label {
    font-size: 0.6rem;
}

/* Der Hero-Countdown ragte auf rcr bei 360 px zehn Pixel über den rechten Rand — gefunden vom
   Prüflauf, nicht mit dem Auge. Die Ursache ist eine Desktop-Zahl: `min-width: 72px` je Einheit
   ergibt allein 288 px, dazu drei Doppelpunkte und sechs Lücken. Bei 360 px Bildschirm und
   2 × 38 px Seitenrand stehen aber nur 284 px zur Verfügung.

   Die Mindestbreite entfällt hier deshalb — jede Einheit wird so breit wie ihr längstes Wort.
   Zusätzlich fällt die Sperrung weg: „Sekunden" sind acht Zeichen, bei 0,12em kostet das
   allein neun Pixel. Nachgemessen auf allen vier Sites bei 360 px, weil jede eine andere
   Schrift benutzt und die Breite genau daran hängt. */
@media (max-width: 640px) {
    .be-countdown--hero .be-countdown__unit {
        min-width: 0;
        flex: 0 1 auto;
    }
    .be-countdown--hero .be-countdown__label {
        letter-spacing: 0.02em;
        white-space: nowrap;
    }
}

/* Style: dark-section (akzentfarbe anders) */
.be-countdown--dark .be-countdown__value {
    color: var(--color-primary);
}
.be-countdown--dark .be-countdown__sep {
    color: rgba(255, 255, 255, 0.20);
}

/* Kompakt */
.be-countdown--compact .be-countdown__value { font-size: var(--text-2xl); }
.be-countdown--compact .be-countdown__unit  { min-width: 44px; }

/* Section: großes Countdown-Widget für Countdown-Sektion */
.be-countdown--section {
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: center;
}
.be-countdown--section .be-countdown__unit {
    min-width: 88px;
    background: rgba(255,255,255,0.08);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-3) var(--space-3);
}
.be-countdown--section .be-countdown__value {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 900;
    color: var(--color-white);
}
.be-countdown--section .be-countdown__label {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.50);
    margin-top: var(--space-2);
}
.be-countdown--section .be-countdown__sep {
    font-size: clamp(2rem, 4vw, 3rem);
    color: rgba(255,255,255,0.20);
    align-self: center;
    padding-bottom: var(--space-5);
}

/* ============================================================
   BADGES
   ============================================================ */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2em 0.6em;
    font-size: var(--text-xs);
    font-weight: 600;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    white-space: nowrap;
}
.badge--success { background: rgba(29, 158, 117, 0.15); color: #1D9E75; border: 1px solid rgba(29, 158, 117, 0.30); }
.badge--danger  { background: rgba(232, 50, 26, 0.15);  color: var(--color-primary); border: 1px solid rgba(232, 50, 26, 0.30); }
.badge--warning { background: rgba(245, 166, 35, 0.15); color: #D4861C; border: 1px solid rgba(245, 166, 35, 0.30); }
.badge--neutral { background: var(--tint-chip); color: var(--color-text-muted); border: 1px solid var(--color-border); }

/* ============================================================
   PREISANGABE
   ============================================================ */
.be-price { display: inline-flex; align-items: baseline; gap: var(--space-2); }
.be-price__amount { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 800; color: var(--color-text); }
.be-price__label  { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ============================================================
   TABELLEN
   ============================================================ */
.be-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}
.be-table th, .be-table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}
.be-table th {
    font-weight: 700;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
    background: var(--color-surface);
}
.be-table tbody tr:hover { background: var(--color-surface); }

/* ============================================================
   FORMULARELEMENTE
   ============================================================ */
.form-group   { display: flex; flex-direction: column; gap: var(--space-2); }
.form-label   { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.form-control {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    color: var(--color-text);
    transition: border-color var(--transition-fast);
    appearance: none;
}
.form-control:focus {
    outline: none;
    border-color: var(--color-primary);
}
.form-control::placeholder { color: var(--color-text-light); }

/* ============================================================
   SONSTIGE
   ============================================================ */

/* Post-Grid Fallback */
.post-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}
@media (min-width: 640px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }

.post-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.post-card__body { padding: var(--space-6); }
.post-card__title { font-size: var(--text-xl); margin-bottom: var(--space-3); }
.post-card__title a { color: inherit; text-decoration: none; }
.post-card__excerpt { margin-bottom: var(--space-4); }

/* Statistikwert */
.be-stat {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 800;
    color: var(--color-primary);
}

/* Section-Kicker + Titel (global – auf allen Seiten) */
.section__kicker {
    display: block;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-primary-text);
    margin-bottom: var(--space-2);
}
.section__title {
    margin: 0;
}

/* ============================================================
   SPONSOR-WALL (global – auch auf /sponsoren/, nicht nur Startseite)
   ============================================================ */
.sponsors-section {
    padding-block: var(--section-gap);
}

.sponsors-wall__tier {
    margin-bottom: var(--space-16);
}

.sponsors-wall__tier-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--color-text-muted);
    font-weight: 700;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

/* ---- Basis ---- */
/* Stufenbezeichnung ausblenden, wenn sie leer gepflegt ist. Bei Events mit nur einer Stufe
   wiederholt sie sonst die Sektionsüberschrift („Unsere Partner" / „Partner"). Der leere
   be_text-Span bleibt im Markup, damit die Stelle im Seitenbuilder editierbar bleibt. */
.sponsors-wall__tier-label:has(> .be-editable:empty) { display: none; }
.sponsors-wall__tier-label:empty { display: none; }

.sponsors-wall__grid {
    /* EINE Logik für alle drei Stufen. Vorher hatte jede ihre eigene: Titelpartner mit
       `max-height`, Hauptsponsoren mit fester Höhe und 5 pro Reihe, Partner mit anderer Höhe und
       4 pro Reihe — drei Regelsätze, die auseinanderliefen, sobald einer angefasst wurde.
       Jetzt unterscheiden sich die Stufen nur noch in zwei Werten: Zellenhöhe und Anzahl je Reihe. */
    --logo-h: 104px;
    --logo-pro-reihe: 4;
    /* Flexbox statt Raster, und zwar aus EINEM Grund: eine unvollständige Reihe muss mittig
       stehen. Ein Raster mit fester Spaltenzahl setzt drei Logos in die Spalten 1 bis 3 und
       lässt die vierte leer — der Block steht dann linksbündig unter einer zentrierten
       Überschrift. Das gilt für die letzte Reihe jeder Wand und für Events mit wenigen Partnern
       (Parkleuchten hat drei).

       Die Anzahl je Reihe steckt weiterhin in EINEM Wert: die Basisbreite rechnet sie aus. */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 10px;
}
.sponsors-wall__grid--titelpartner   { --logo-h: 132px; --logo-pro-reihe: 2; }
.sponsors-wall__grid--hauptsponsoren { --logo-h: 118px; --logo-pro-reihe: 4; }
.sponsors-wall__grid--partner        { --logo-h: 104px; --logo-pro-reihe: 4; }

.sponsors-wall__item {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Eigene Fläche für jedes Logo. Vorher entstand der Karteneindruck zufällig durch die WEISSEN
       Hintergründe der Logodateien — ein Logo mit transparentem Hintergrund stand als einziges
       ohne Fläche da. Bewusst fest WEISS: Logodateien sind für hellen Grund gebaut, auf einem
       dunklen Event verschwände ein transparentes Logo in einer dunklen Karte. */
    background: #FFFFFF;
    border-radius: var(--radius-md, 8px);
    padding: 12px 16px;
    /* Breite aus der Anzahl je Reihe, gedeckelt: sonst zieht eine Reihe mit wenigen Logos die
       Karten über die halbe Seite. */
    flex: 0 1 calc((100% - (var(--logo-pro-reihe) - 1) * 10px) / var(--logo-pro-reihe));
    max-width: 280px;
    min-width: 0;
}
.sponsors-wall__item a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.sponsors-wall__item img {
    width: 100%;
    height: var(--logo-h);
    object-fit: contain;
    opacity: 0.92;
    transition: transform var(--transition-base), opacity var(--transition-base);
}
.sponsors-wall__item:hover img { opacity: 1; transform: scale(1.04); }

@media (max-width: 1023px) {
    .sponsors-wall__grid { --logo-pro-reihe: 3; }
    .sponsors-wall__grid--titelpartner { --logo-pro-reihe: 2; }
}
@media (max-width: 599px) {
    .sponsors-wall__grid { --logo-pro-reihe: 2; --logo-h: 84px; }
    .sponsors-wall__grid--titelpartner { --logo-pro-reihe: 1; --logo-h: 110px; }
}

.sponsors-wall__no-sponsors {
    color: var(--color-text-muted);
    font-style: italic;
}

/* Flat-Wall (Homepage-Variante, ohne Tier-Labels) */
.sponsors-wall {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-8);
}

.sponsors-wall--titelpartner {
    gap: var(--space-12);
    margin-bottom: var(--space-10);
    padding-bottom: var(--space-10);
    border-bottom: 1px solid var(--color-border);
}

.sponsors-wall--partner {
    gap: var(--space-6);
}

.sponsor-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sponsor-logo img {
    max-height: 36px;
    max-width: 120px;
    width: auto;
    filter: grayscale(1);
    opacity: 0.50;
    transition: filter var(--transition-base), opacity var(--transition-base);
}

.sponsor-logo:hover img,
.sponsor-logo a:hover img {
    filter: grayscale(0);
    opacity: 1;
}

.sponsors-wall--titelpartner .sponsor-logo img {
    max-height: 56px;
    max-width: 180px;
    filter: none;
    opacity: 1;
}

.sponsor-logo__name {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 800;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

.sponsors-cta {
    text-align: center;
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border);
}

/* ============================================================
   VIDEO SECTION (Consent Gate)
   ============================================================ */
.video-section { text-align: center; }
.video-section__header { margin-bottom: var(--space-10); }
.video-section__title {
    font-size: var(--section-h2-xl);
    font-weight: 900;
    color: var(--color-white);
    margin-bottom: var(--space-3);
}
.video-section__sub { color: rgba(255,255,255,0.65); font-size: var(--text-lg); margin: 0; }
.video-section__wrap { max-width: 960px; margin-inline: auto; }

.video-gate {
    position: relative;
    aspect-ratio: 16 / 9;
    background-image: var(--poster);
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,0.55);
    cursor: pointer;
}
.video-gate::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    transition: background var(--transition-base);
}
.video-gate:hover::before { background: rgba(0,0,0,0.35); }
.video-gate__inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-5);
    z-index: 1;
}
.video-gate__btn {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--color-primary);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-on-primary);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    box-shadow: 0 8px 32px rgba(var(--color-primary-rgb),0.50);
}
.video-gate__btn:hover { transform: scale(1.08); box-shadow: 0 12px 40px rgba(var(--color-primary-rgb),0.65); }
.video-gate__play { display: flex; }
.video-gate__notice {
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.70);
    max-width: 36ch;
    text-align: center;
    margin: 0;
}
.video-gate__notice a { color: rgba(255,255,255,0.90); }
.video-gate iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* ============================================================
   SPONSOR PITCH
   ============================================================ */
.sponsor-pitch__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: center;
}
@media (max-width: 767px) { .sponsor-pitch__inner { grid-template-columns: 1fr; gap: var(--space-10); } }
.sponsor-pitch__text h2 {
    font-size: var(--section-h2-xl);
    font-weight: 900;
    margin-bottom: var(--space-4);
}
.sponsor-pitch__text p { color: var(--color-text-muted); margin-bottom: var(--space-4); }
.sponsor-pitch__text .btn { margin-top: var(--space-4); }
.sponsor-pitch__benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
}
.sponsor-pitch__benefit {
    background: var(--surface-raised);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-primary);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.sponsor-pitch__benefit-num {
    font-size: var(--text-3xl);
    font-weight: 900;
    color: var(--color-primary);
    line-height: 1;
}
.sponsor-pitch__benefit-label {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* ============================================================
   Laufstrecken (Kollektion `strecken`)
   Karten mit Distanz, Startzeit und Startgebühr. Die Sektion erscheint nur,
   wenn mindestens eine Strecke gepflegt ist (siehe templates/strecken-section.php).
   ============================================================ */
.strecken-section {
    padding: var(--space-16) 0;
}
.strecken-section__title {
    font-family: var(--font-heading);
    font-size: var(--section-h2-xl);
    line-height: var(--leading-tight);
    text-align: center;
    margin: 0 0 var(--space-3);
}
.strecken-section__intro {
    text-align: center;
    max-width: 46em;
    margin: 0 auto var(--space-10);
    color: var(--color-text-muted);
}
.strecken-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}
.strecke-card {
    position: relative;
    background: var(--surface-raised);
    border: 1px solid var(--color-border);
    border-top: 4px solid var(--color-primary);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.strecke-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.strecke-card__name {
    font-family: var(--font-heading);
    font-size: var(--section-h3);
    line-height: var(--leading-tight);
    margin: 0;
}
.strecke-card__distance {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
}
.strecke-card__meta {
    margin: var(--space-2) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.strecke-card__row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-1);
}
.strecke-card__row dt {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin: 0;
}
.strecke-card__row dd {
    font-weight: 700;
    margin: 0;
    text-align: right;
}
.strecke-card__note {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0;
}
/* Ausgebuchte Strecke bleibt lesbar, tritt aber sichtbar zurück. */
.strecke-card--full {
    border-top-color: var(--color-text-light);
}
.strecke-card--full .strecke-card__distance {
    color: var(--color-text-muted);
}
.strecke-card__badge {
    align-self: flex-start;
    margin-top: var(--space-2);
}

@media (min-width: 640px) {
    .strecken-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .strecken-grid { grid-template-columns: repeat(3, 1fr); }
    /* Bei genau vier Strecken sähen 3+1 unruhig aus — dann lieber zwei saubere Reihen. */
    .strecken-grid:has(> .strecke-card:nth-child(4):last-child) {
        grid-template-columns: repeat(2, 1fr);
        max-width: 46rem;
        margin-inline: auto;
    }
}

/* ============================================================
   Startpaket-Sektion (Kollektion `startpaket`)
   Die Leucht-Animation stammt aus der Live-Seite des Parkleuchten RUN; die Keyframes stehen
   hier statt in neon.css, damit die Sektion auch in einem hellen Event funktioniert.
   ============================================================ */
.startpaket-section { padding: var(--section-gap) 0; }
.startpaket__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-10);
    align-items: center;
}
.startpaket__art { display: flex; justify-content: center; }
.startpaket__svg { width: 100%; max-width: 480px; height: auto; }
.startpaket__title {
    font-family: var(--font-heading);
    font-size: var(--section-h2-xl);
    line-height: var(--leading-tight);
    margin: var(--space-2) 0 var(--space-6);
}
.startpaket__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.startpaket__list li {
    position: relative;
    padding-left: 2rem;
    font-size: var(--text-sm);
}
/* Häkchen als CSS statt als Icon-Font: bleibt scharf und braucht keine zusätzliche Datei. */
.startpaket__list li::before {
    content: "";
    position: absolute;
    left: 0.35rem;
    top: 0.5em;
    width: 0.5rem;
    height: 0.85rem;
    border: solid var(--color-accent);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.startpaket__extras {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

@media (min-width: 900px) {
    .startpaket__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-16); }
}

/* --- Animation (aus der Live-Seite übernommen) --- */
@keyframes be-sp-pulse-box { 0%, 100% { opacity: 1 } 50% { opacity: .62 } }
@keyframes be-sp-pulse-bow { 0%, 100% { opacity: 1 } 50% { opacity: .52 } }
@keyframes be-sp-sparkle   { 0%, 100% { opacity: 0; transform: scale(.4) } 50% { opacity: 1; transform: scale(1) } }
@keyframes be-sp-float     { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
.be-sp-pkg  { animation: be-sp-pulse-box 2.6s ease-in-out infinite }
.be-sp-bow  { animation: be-sp-pulse-bow 2.6s ease-in-out infinite .7s }
.be-sp-txt  { animation: be-sp-pulse-box 2.6s ease-in-out infinite .4s }
.be-sp-wrap { animation: be-sp-float 4s ease-in-out infinite }
.be-sp-sp1  { animation: be-sp-sparkle 2.1s ease-in-out infinite .1s;  transform-origin: 90px 75px }
.be-sp-sp2  { animation: be-sp-sparkle 2.1s ease-in-out infinite .9s;  transform-origin: 415px 60px }
.be-sp-sp3  { animation: be-sp-sparkle 2.1s ease-in-out infinite 1.5s; transform-origin: 55px 240px }
.be-sp-sp4  { animation: be-sp-sparkle 2.1s ease-in-out infinite .5s;  transform-origin: 438px 225px }
.be-sp-sp5  { animation: be-sp-sparkle 1.8s ease-in-out infinite 1.2s; transform-origin: 250px 42px }

@media (prefers-reduced-motion: reduce) {
    .be-sp-pkg, .be-sp-bow, .be-sp-txt, .be-sp-wrap,
    .be-sp-sp1, .be-sp-sp2, .be-sp-sp3, .be-sp-sp4, .be-sp-sp5 { animation: none }
}

/* ============================================================
   INLINE-SVG-ICONS IN DEN FESTEN VORLAGEN
   ============================================================
   `be_icon_tag()` gibt auf Nicht-E.ON-Events ein <svg> aus, wo vorher ein Schrift-Glyph stand.
   Es trägt dieselbe Klasse wie zuvor das <i> und übernimmt darüber Größe (1em) und Farbe
   (currentColor). Hier steht nur, was ein Glyph von Haus aus mitbringt und ein SVG nicht:
   die Grundlinie im Fließtext und der Schutz vor dem Zusammenschrumpfen im Flex-Container. */
.be-icon-svg {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    vertical-align: -0.14em;
}

/* ============================================================
   KENNZEICHNUNG KI-ERZEUGTER BILDER
   ------------------------------------------------------------
   Bewusst eine allgemeine Komponente und kein Sonderfall des Bilderwechsels: Sobald ein Kunde
   irgendwo ein KI-Bild einsetzt, gilt dieselbe Kennzeichnung. So muss die Gestaltungsfrage
   nicht bei jedem Projekt neu verhandelt werden.

   Positioniert wird IMMER am Container (`position: relative` am Elternelement), nie am Bild.
   Grund: `object-fit: cover` schneidet je nach Seitenverhältnis oben/unten oder links/rechts
   etwas weg. Ein am Bild ausgerichtetes Kennzeichen wandert dadurch aus dem sichtbaren Bereich —
   ausgerechnet auf schmalen Geräten, wo der Zuschnitt am stärksten ist.

   Unten LINKS, weil dort auf allen Anlagen des Themes nichts anderes steht: Der Rollhinweis
   sitzt mittig, die Aktionsknöpfe darüber, der Countdown links oben im Textblock.
   ============================================================ */
.be-ki-badge {
    position: absolute;
    left: var(--space-4);
    bottom: var(--space-4);
    z-index: 3;

    display: inline-block;
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-sm, 3px);

    /* Halbtransparentes Dunkel statt einer Themefarbe: Das Kennzeichen muss auf JEDEM Foto
       lesbar sein, auch auf einem hellen. Die Marke hat hier nichts zu suchen — es ist ein
       Hinweis, keine Gestaltung. */
    background: rgba(0, 0, 0, 0.55);
    /* Fällt der Filter aus, bleibt es bei der Fläche darüber — nur schärfer im Hintergrund. */
    backdrop-filter: blur(2px);

    color: #fff;
    font-family: var(--font-heading);
    /* Feste Untergrenze: Unter 11 px ist ein Pflichthinweis nicht mehr zumutbar zu lesen.
       Deshalb hier ausnahmsweise kein Stufenwert — die Stufen gehen mobil nach unten, dieser
       Hinweis darf das nicht mitmachen. */
    font-size: clamp(0.6875rem, 1.1vw, 0.8125rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: none;
    white-space: nowrap;
    pointer-events: none;
}

/* Im Bilderwechsel gehört das Kennzeichen zu SEINEM Bild: Es blendet mit derselben Animation
   und demselben Versatz ein und aus. Ein dauerhaft stehendes Kennzeichen würde echte Fotos im
   selben Wechsel fälschlich mit auszeichnen. */
.be-ki-badge--wechsel {
    opacity: 0;
    animation-duration: var(--hero-slider-dauer, 18s);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}
@media (prefers-reduced-motion: reduce) {
    /* Ohne Wechsel steht das erste Bild — also darf auch nur dessen Kennzeichen stehen. */
    .be-ki-badge--wechsel { animation: none; opacity: 0; }
    .be-ki-badge--wechsel.be-ki-badge--erstes { opacity: 1; }
}