/*
 * 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;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    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);
    color: 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);
    color: var(--color-primary);
    font-weight: 700;
}
.btn--white:hover {
    background: rgba(255, 255, 255, 0.90);
    border-color: rgba(255, 255, 255, 0.90);
    color: var(--color-primary-dark);
    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%; }

/* 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__image { aspect-ratio: 16/9; overflow: hidden; }
.news-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.news-card:hover .news-card__image img { transform: scale(1.04); }
.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;
}

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