/*
 * pages.css – Seitenspezifische Stile für Inhaltsseiten
 * (News-Artikel, Archive, Filter-Navigation, raceresult-Gate)
 */

/* ============================================================
   PAGE-HEADER
   ============================================================ */

.page-header {
    background: var(--color-dark-2);
    color: var(--color-text-white);
    padding-block: var(--space-16) var(--space-10);
    border-bottom: 1px solid var(--color-border-dark);
}

.page-header--news {
    padding-block: var(--space-12) var(--space-8);
}

/* News-Kategorie-Badges direkt im Artikel (kein Header-Kontext) */
.news-meta__cats--inline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    padding: 0;
    list-style: none;
}

/* Sidebar: Thumbnail + Text nebeneinander */
.news-sidebar__thumb {
    display: block;
    flex-shrink: 0;
    width: 72px;
    height: 54px;
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.news-sidebar__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.news-sidebar__item {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
}
.news-sidebar__item-content {
    flex: 1;
    min-width: 0;
}

/* Zurück-Link unter dem Artikel */
.news-article__back {
    margin-top: var(--space-6);
}

.page-header__title {
    font-size: var(--text-5xl);
    font-weight: 800;
    color: var(--color-white);
    margin-top: var(--space-4);
    max-width: 20ch;
}

.page-header__subtitle {
    font-size: var(--text-lg);
    color: rgba(255,255,255,0.55);
    margin-top: var(--space-2);
    max-width: 50ch;
}

/* News-spezifische Meta-Zeile im Header */
.news-meta {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.news-meta__date {
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.55);
    font-weight: 500;
}

.news-meta__cats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* ============================================================
   NEWS-ARTIKEL LAYOUT
   ============================================================ */

.news-article-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    padding-block: var(--section-gap);
    align-items: start;
}

@media (min-width: 1024px) {
    .news-article-layout {
        grid-template-columns: 1fr 280px;
    }
}

.news-article__hero {
    margin: 0 0 var(--space-8) 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.news-article__hero-img {
    width: 100%;
    height: auto;
    display: block;
}

.news-article__body {
    font-size: var(--text-base);
    line-height: var(--leading-loose);
}

/* Teilen-Leiste */
.news-article__share {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-10);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border);
}

.news-article__share-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-muted);
}

/* ============================================================
   NEWS SIDEBAR
   ============================================================ */

.news-sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--space-6));
}

.news-sidebar__title {
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--color-text-muted);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.news-sidebar__item {
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.news-sidebar__date {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-light);
    margin-bottom: var(--space-1);
}

.news-sidebar__item-title {
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: var(--leading-snug);
}

.news-sidebar__item-title a {
    color: var(--color-text);
    text-decoration: none;
}
.news-sidebar__item-title a:hover { color: var(--color-primary); }

.news-sidebar .btn {
    margin-top: var(--space-5);
}

/* ============================================================
   FILTER-NAVIGATION (Archiv-Seiten)
   ============================================================ */

.filter-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-10);
}

.filter-nav__item {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: 600;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-text-muted);
    text-decoration: none;
    transition:
        border-color var(--transition-fast),
        color var(--transition-fast),
        background var(--transition-fast);
}

.filter-nav__item:hover,
.filter-nav__item.is-active {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.06);
}

.filter-nav__item.is-active {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
}

/* ============================================================
   ARCHIV-PAGINATION
   ============================================================ */

.archive-pagination {
    margin-top: var(--space-12);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border);
}

.archive-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    justify-content: center;
}

.archive-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--space-3);
    font-size: var(--text-sm);
    font-weight: 600;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.archive-pagination .page-numbers:hover { border-color: var(--color-primary); color: var(--color-primary); }
.archive-pagination .page-numbers.current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-on-primary);
}

.archive-pagination .prev,
.archive-pagination .next {
    font-size: var(--text-sm);
    padding-inline: var(--space-5);
}

/* ============================================================
   NO RESULTS / EMPTY STATE
   ============================================================ */

.no-results {
    text-align: center;
    padding-block: var(--space-16);
}

.no-results__icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--gradient-eon);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    margin-bottom: var(--space-6);
    font-size: 2rem;
    color: var(--color-white);
}

.no-results h2 {
    font-size: var(--section-h2);
    margin-bottom: var(--space-4);
}

.no-results p {
    max-width: 40ch;
    margin-inline: auto;
    margin-bottom: var(--space-8);
    color: var(--color-text-muted);
}

/* ============================================================
   RACERESULT CONSENT-GATE
   ============================================================ */

.raceresult-gate {
    display: flex;
    flex-direction: column;
    position: relative;
}

.raceresult-gate__notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-12) var(--space-8);
    background: var(--color-surface);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-lg);
    gap: var(--space-4);
    flex: 1;
}

.raceresult-gate__icon { font-size: 2.5rem; }

.raceresult-gate__title {
    font-size: var(--text-xl);
    margin: 0;
}

.raceresult-gate__text {
    max-width: 45ch;
    color: var(--color-text-muted);
    margin: 0;
}

.raceresult-gate__text a { color: var(--color-primary); }

.raceresult-gate__remember {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    cursor: pointer;
}

.raceresult-gate__iframe {
    width: 100%;
    border: none;
    border-radius: var(--radius-lg);
}

/* Hinweis, wenn raceresult die Liste noch nicht freigegeben hat (statt des englischen Rohfehlers) */
.raceresult-gate__wartet {
    padding: var(--space-10) var(--space-6);
    text-align: center;
    color: var(--color-text-muted);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-lg);
    margin: 0;
}

/* ============================================================
   PAGE BANNER (Foto-Header für Unterseiten)
   ============================================================ */

.page-banner {
    background: var(--gradient-eon);
    color: var(--color-white);
    padding-block: calc(var(--header-height) + var(--space-10)) var(--space-12);
    position: relative;
    overflow: hidden;
    min-height: 300px;
    display: flex;
    align-items: flex-end;
}

.page-banner--photo {
    background-image: var(--banner-photo);
    background-size: cover;
    background-position: center 35%;
    min-height: 360px;
}

/* ⚠️ Der Markenschleier allein trägt die Schrift nicht: Er ist je Event ein bunter, teils
   lichter Verlauf, und auf bunten Fotos waren Titel, Untertitel und Breadcrumb schlecht
   lesbar (Dennis, 14.08.2026, alle DEVs). Deshalb liegen unter dem Schleier zwei neutrale
   RICHTUNGS-Scrims, verankert dort, wo der Text steht (unten links): einer von links, einer
   von unten. Mehrere Zwischenstufen statt einer harten Kante, sonst zeichnet sich der
   Verlauf im Foto ab. Neutralschwarz statt Markenfarbe — es geht um Kontrast, nicht um
   Stimmung; die liefert der Schleier darüber. */
.page-banner__overlay {
    position: absolute;
    inset: 0;
    background: var(--overlay-banner),
                linear-gradient(to right,
                    rgba(0,0,0,0.55) 0%,
                    rgba(0,0,0,0.35) 32%,
                    rgba(0,0,0,0.10) 62%,
                    rgba(0,0,0,0)    82%),
                linear-gradient(to top,
                    rgba(0,0,0,0.55) 0%,
                    rgba(0,0,0,0.22) 38%,
                    rgba(0,0,0,0)    68%);
}

/* ⚠️ Gegen HELLE LICHTPUNKTE reicht kein Scrim: Auf park stehen Breadcrumb und Kicker über
   buntem Bokeh — Abdunkeln macht aus einem hellen Punkt einen mittelhellen, der Kontrast im
   Detail bleibt. Deshalb zusätzlich ein MASKIERTER Weichzeichner über der Textzone unten
   links: Er nimmt dem Foto dort die harten Hell-dunkel-Kanten und dunkelt lokal nach, rechts
   bleibt das Motiv scharf. Die Maske läuft weich aus, damit keine Blur-Kante sichtbar wird.
   Browser ohne backdrop-filter ignorieren das — dann tragen Scrims + Schatten allein. */
.page-banner__overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Dosierung nach Sichtprobe mit Dennis (15.08.2026): blur 16 + brightness 0.72 war zu
       viel — das Foto soll unter dem Text noch erkennbar bleiben, nur beruhigt. */
    backdrop-filter: blur(8px) brightness(0.85) saturate(0.9);
    -webkit-backdrop-filter: blur(8px) brightness(0.85) saturate(0.9);
    -webkit-mask-image: radial-gradient(115% 135% at 15% 96%,
        #000 26%, rgba(0,0,0,0.5) 50%, transparent 72%);
    mask-image: radial-gradient(115% 135% at 15% 96%,
        #000 26%, rgba(0,0,0,0.5) 50%, transparent 72%);
    pointer-events: none;
}

/* Zweite Verteidigungslinie direkt an der Schrift: Ein weicher Schein fängt helle Bildstellen
   ab, die durch die Scrims noch durchkommen (z.B. Himmel oben links im Breadcrumb-Bereich). */
.page-banner__title {
    text-shadow: 0 2px 18px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.55);
}
.page-banner__kicker,
.page-banner__subtitle,
.page-banner .breadcrumb {
    text-shadow: 0 1px 8px rgba(0,0,0,0.50);
}

.page-banner__inner {
    position: relative;
    z-index: 1;
}

.page-banner .breadcrumb {
    margin-bottom: var(--space-4);
}

.page-banner .breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    list-style: none;
}

.page-banner .breadcrumb__item + .breadcrumb__item::before {
    content: '/';
    margin-right: var(--space-2);
    opacity: 0.5;
}

/* Deckkraft angehoben (0.70/0.50 → 0.88/0.72): Auf Fotos war die halbtransparente
   Breadcrumb der schwächste Text im Banner. Die Abstufung Link → aktuelle Seite bleibt. */
.page-banner .breadcrumb__item a {
    color: rgba(255,255,255,0.88);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 500;
}
.page-banner .breadcrumb__item a:hover { color: var(--color-white); }
.page-banner .breadcrumb__item.is-current {
    color: rgba(255,255,255,0.72);
    font-size: var(--text-sm);
}

.page-banner__kicker {
    display: block;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
    margin-bottom: var(--space-3);
}

.page-banner__title {
    font-size: var(--text-5xl);
    font-weight: 900;
    color: var(--color-white) !important;
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-3);
    max-width: 18ch;
}

.page-banner__subtitle {
    font-size: var(--text-lg);
    color: rgba(255,255,255,0.75) !important;
    margin: 0;
    max-width: 55ch;
}

/* ============================================================
   PAGE SECTION (Hauptinhalt-Bereich)
   ============================================================ */

.page-section {
    padding-block: var(--section-gap);
}

.page-prose {
    max-width: 72ch;
}

.page-cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-12);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border);
}

/* ============================================================
   INFO-GRID (Zeitplan, Strecke etc.)
   ============================================================ */

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-12);
    margin-bottom: var(--section-gap);
}

.info-grid--2col {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 768px) {
    .info-grid { grid-template-columns: 1fr; gap: var(--space-8); }
}

.info-block__title {
    font-size: var(--text-2xl);
    font-weight: 800;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-3);
    border-bottom: 3px solid var(--color-primary);
}

/* Zeitplan */
.schedule-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.schedule-item {
    display: grid;
    /* Feste 80 px reichten für „09:15", nicht für „ab 10:15" oder „07:30 – 09:30": der Text
       lief in die Beschriftung hinein (auf rcr sichtbar). `auto` mit Mindestbreite hält die
       Spalte bündig und lässt sie wachsen, wenn eine Zeitangabe länger ist. */
    grid-template-columns: minmax(80px, auto) 1fr;
    gap: var(--space-4);
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--color-border);
    align-items: center;
}

.schedule-item__time {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: var(--text-lg);
    color: var(--color-primary);
    white-space: nowrap;
}

.schedule-item__label {
    font-size: var(--text-base);
    color: var(--color-text);
}

.schedule-item--wave .schedule-item__label { font-weight: 700; }
.schedule-item--full { opacity: 0.50; }

/* Fact-Liste */
.fact-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.fact-item {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
}

.fact-item__icon {
    font-size: 1.5rem;
    color: var(--color-primary);
    flex-shrink: 0;
    width: 2rem;
    text-align: center;
    line-height: 1.4;
}

.fact-item strong { display: block; font-weight: 700; }
.fact-item span { font-size: var(--text-sm); color: var(--color-text-muted); }

/* Foto-Teaser 2er-Grid */
.info-photo-teaser {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--section-gap);
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

.info-photo-teaser img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
}

@media (max-width: 640px) {
    .info-photo-teaser { grid-template-columns: 1fr; }
    .info-photo-teaser img { height: 220px; }
}

/* After-Run Highlight */
.info-highlight {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: center;
    margin-bottom: var(--section-gap);
    padding: var(--space-10);
    background: var(--surface-sunken);
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

@media (max-width: 768px) {
    .info-highlight { grid-template-columns: 1fr; }
}

.info-highlight img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: var(--radius-xl);
}

/* Badges */
/* .badge → components.css (ein Besitzer, siehe Kommentar dort) */
.badge--warning { background: #FFF3CD; color: #856404; }
.badge--primary { background: var(--gradient-eon); color: white; }

/* ============================================================
   PREISKARTEN (Anmeldung)
   ============================================================ */

.anmeldung-intro { margin-bottom: var(--space-12); }

.price-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-5);
}

.price-card {
    background: var(--surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.price-card--highlight {
    background: var(--surface-sunken);
    border-color: var(--color-primary);
    border-top: 3px solid var(--color-primary);
}

.price-card__label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--color-text-muted);
}

.price-card__amount {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: 900;
    color: var(--color-primary);
    line-height: 1;
}

.price-card__note {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.price-card__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.price-card__list li {
    font-size: var(--text-sm);
    color: var(--color-text);
    padding-left: var(--space-5);
    position: relative;
}
.price-card__list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: 700;
}

/* Info-Banner (Warnung) */
.info-banner {
    display: flex;
    gap: var(--space-5);
    align-items: flex-start;
    padding: var(--space-6) var(--space-8);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-10);
}
.info-banner--warning {
    background: #FFF3CD;
    border: 1px solid #FFDA6A;
    color: #664D03;
}
.info-banner > i { font-size: 1.5rem; flex-shrink: 0; margin-top: 2px; }
.info-banner p { margin-top: var(--space-2); }

/* ============================================================
   RACERESULT SECTION
   ============================================================ */

.raceresult-section {
    margin-bottom: var(--section-gap);
}

.raceresult-section__title {
    font-size: var(--text-3xl);
    font-weight: 800;
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-4);
    border-bottom: 3px solid var(--color-primary);
}

/* Platzhalter (vor dem Event) */
.placeholder-block {
    text-align: center;
    padding-block: var(--space-20);
    max-width: 40ch;
    margin-inline: auto;
}

.placeholder-block__icon {
    font-size: 4rem;
    color: var(--color-primary);
    opacity: 0.35;
    display: block;
    margin-bottom: var(--space-6);
}

.placeholder-block h2 { margin-bottom: var(--space-4); }
.placeholder-block p  { margin-bottom: var(--space-8); color: var(--color-text-muted); }

/* ============================================================
   KONTAKT-SEITE
   ============================================================ */

/* ============================================================
   KONTAKT PAGE – ct-* Klassen
   ============================================================ */
.ct-layout {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: var(--space-16);
    align-items: start;
}
@media (max-width: 900px) {
    .ct-layout { grid-template-columns: 1fr; gap: var(--space-12); }
}

/* --- Info-Spalte ------------------------------------------ */
.ct-info__title {
    font-size: var(--text-2xl);
    font-weight: 900;
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-4);
    border-bottom: 3px solid var(--color-primary);
}

.ct-info-items {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: var(--space-8);
}
.ct-info-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5) 0;
    border-bottom: 1px solid var(--color-border);
}
.ct-info-item:first-child { padding-top: 0; }
.ct-info-item:last-child  { border-bottom: none; }

.ct-info-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.ct-info-item div { min-width: 0; }
.ct-info-item strong {
    display: block;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}
.ct-info-item address {
    font-style: normal;
    line-height: 1.7;
    font-size: var(--text-base);
}
.ct-info-item a {
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
}
.ct-info-item a:hover { color: var(--color-primary); }

.ct-social { margin-bottom: var(--space-8); }
.ct-social__label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}
.ct-social__links { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.ct-social-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}
.ct-social-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }

.ct-map {
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--color-border);
}
.ct-map iframe {
    display: block;
    width: 100%;
    height: 220px;
    border: none;
}
.ct-map__link {
    display: block;
    text-align: center;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-decoration: none;
    padding: var(--space-2) var(--space-4);
    background: var(--color-surface);
}
.ct-map__link:hover { color: var(--color-primary); }

/* --- Formular-Spalte -------------------------------------- */
.ct-form-card {
    background: var(--surface-raised);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-10) var(--space-8);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
}
.ct-form-card__title {
    font-size: var(--text-2xl);
    font-weight: 900;
    margin-bottom: var(--space-2);
}
.ct-form-card__lead {
    color: var(--color-text-muted);
    margin-bottom: var(--space-8);
}

.ct-form { display: flex; flex-direction: column; gap: var(--space-5); }

.ct-form__row--2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
}
@media (max-width: 580px) {
    .ct-form__row--2col { grid-template-columns: 1fr; }
}

.ct-form__field { display: flex; flex-direction: column; gap: var(--space-2); }
.ct-form__field label {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text);
}
.ct-form__field label abbr {
    text-decoration: none;
    color: var(--color-primary);
    margin-left: 2px;
}
.ct-form__field input[type="text"],
.ct-form__field input[type="email"],
.ct-form__field select,
.ct-form__field textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text);
    background: var(--surface-raised);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    appearance: none;
}
.ct-form__field input:focus,
.ct-form__field select:focus,
.ct-form__field textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.12);
}
.ct-form__field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    padding-right: var(--space-8);
    cursor: pointer;
}
.ct-form__field textarea { resize: vertical; min-height: 140px; line-height: var(--leading-loose); }

.ct-form__field--check { margin-top: var(--space-2); }
.ct-form__check-label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
}
.ct-form__check-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--color-primary);
    cursor: pointer;
}
.ct-form__check-label span {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-loose);
}
.ct-form__check-label span a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Datenschutz-Hinweis statt Pflicht-Checkbox: informiert an derselben Stelle, kostet aber
   keinen Klick. Bewusst dieselbe Anmutung wie die frühere Zustimmungszeile. */
.ct-form__privacy {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-loose);
    margin: var(--space-2) 0 0;
}
.ct-form__privacy a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ct-form__submit { margin-top: var(--space-2); align-self: flex-start; }

/* Success card */
.ct-success {
    background: var(--surface-raised);
    border: 1px solid var(--color-border);
    border-top: 3px solid #2D7D2D;
    border-radius: var(--radius-xl);
    padding: var(--space-12) var(--space-8);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
    text-align: center;
}
.ct-success__icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--surface-success);
    color: var(--color-success);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-6);
}
.ct-success__title { font-size: var(--text-2xl); font-weight: 900; margin-bottom: var(--space-4); }
.ct-success__text  { color: var(--color-text-muted); margin-bottom: var(--space-8); max-width: 38ch; margin-inline: auto; margin-bottom: var(--space-8); }

/* Error notice */
.ct-notice {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: var(--space-6);
}
.ct-notice--error {
    background: var(--surface-danger);
    border: 1px solid var(--border-danger);
    color: #b91c1c;
}

/* ============================================================
   FAQ – nativer <details>/<summary> Accordion
   ============================================================ */

/* 2-Spalten-Layout: Intro-Text links, Accordion rechts */
.faq-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-10);
    margin-top: var(--space-20);
}

@media (min-width: 900px) {
    .faq-section {
        grid-template-columns: 5fr 9fr;
        gap: var(--space-16);
        align-items: start;
    }
}

.faq-intro {
    padding-top: var(--space-2);
}

.faq-intro h2 {
    margin-bottom: var(--space-4);
}

.faq-intro p {
    color: var(--color-text-muted);
    font-size: var(--text-base);
    line-height: var(--leading-loose);
}

/* Accordion — identisch zur Live-Seite (beiger Hintergrund, weißer Spalt) */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 3px;          /* weißer Spalt als Trenner, kein Border */
    background: var(--surface-page);  /* Spalt-Farbe */
}

.faq-item {
    background: var(--surface-sunken);
    border: none;
    border-radius: 0;
    overflow: hidden;
}

.faq-item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding: 18px 22px;
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--color-text);
    cursor: pointer;
    list-style: none;
    user-select: none;
    background: var(--surface-sunken);
    transition: background var(--transition-fast);
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker              { display: none; }

/* Chevron, dreht sich bei open.
   Bewusst aus zwei Rändern gezeichnet statt als SVG-Data-URI: in einer Data-URI muss die Farbe
   fest einkodiert werden (vorher %23333, also Dunkelgrau). Auf einem dunklen Event war der Pfeil
   damit unsichtbar. Als CSS-Form erbt er currentColor und passt sich jeder Farbwelt an. */
.faq-item summary::after {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    margin-right: 4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    opacity: 0.75;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.faq-item[open] summary::after {
    transform: rotate(225deg) translate(-2px, -2px);
    opacity: 1;
}

.faq-item summary:hover {
    background: var(--tint-hover);
    color: var(--color-accent-text);
}

.faq-item[open] summary {
    /* kein Farbwechsel bei open — identisch zur Live-Seite */
    font-weight: 400;
    color: var(--color-text);
}

.faq-item__body {
    padding: 16px 22px 22px;
    background: var(--surface-sunken);
}

.faq-item__body p {
    font-size: var(--text-base);
    line-height: var(--leading-loose);
    color: var(--color-text);
    margin-bottom: var(--space-3);
}

.faq-item__body p:last-child { margin-bottom: 0; }

.faq-item__body ul {
    padding-left: var(--space-5);
    margin-top: var(--space-2);
    margin-bottom: var(--space-3);
}

.faq-item__body ul li {
    font-size: var(--text-base);
    color: var(--color-text);
    line-height: var(--leading-loose);
    margin-bottom: var(--space-1);
}

.faq-item__body strong {
    font-weight: 700;
    color: var(--color-text);
}

.faq-item__body a {
    color: var(--color-primary);
    text-decoration: underline;
}

/* ============================================================
   TEAM AREA PAGE
   ============================================================ */

/* Intro */
.team-area-intro {
    max-width: 72ch;
}
.team-area-intro__title {
    font-size: var(--section-h2-xl);
    font-weight: 900;
    color: var(--color-text);
    line-height: var(--leading-snug);
    margin-top: var(--space-2);
    margin-bottom: var(--space-6);
}

.team-area-lead {
    font-size: var(--text-lg);
    line-height: var(--leading-loose);
    color: var(--color-text);
    margin-bottom: var(--space-8);
}
.team-area-quicklinks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* Section Header (center variant) */
.section-header--center {
    text-align: center;
    margin-bottom: var(--space-10);
}
.section-header--center .section__title {
    font-size: var(--section-h2);
    font-weight: 900;
    margin-top: var(--space-2);
}
.section-header--center .section__subtitle {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-top: var(--space-3);
    max-width: 56ch;
    margin-inline: auto;
}

/* Package image */
.team-package__image {
    margin: calc(-1 * var(--space-8)) calc(-1 * var(--space-8)) 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    overflow: hidden;
    aspect-ratio: 4/3;
}
.team-package__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}
.team-package:hover .team-package__image img {
    transform: scale(1.04);
}

/* Package CTA below grid */
.team-package-cta {
    margin-top: var(--space-10);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}
.team-package-note {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Package Grid */
.team-package-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}
@media (max-width: 960px) {
    .team-package-grid { grid-template-columns: 1fr; max-width: 480px; }
}

.team-package {
    background: var(--surface-raised);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    position: relative;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.team-package:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-card);
}

.team-package--featured {
    border-color: var(--color-primary);
}
.team-package--featured::before {
    content: 'Beliebt';
    position: absolute;
    top: -2px;
    right: var(--space-6);
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    padding: 4px 14px;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.team-package__name {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--color-text);
    line-height: var(--leading-snug);
}
.team-package__subtitle {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}
.team-package__pricing {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}
.team-package__price {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 900;
    color: var(--color-primary);
}
.team-package__price-note {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.team-package__features {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex: 1;
}
.team-package__features li {
    font-size: var(--text-sm);
    color: var(--color-text);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}
.team-package__features li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
    flex-shrink: 0;
    margin-top: 0.6em;
}

.team-package-note {
    margin-top: var(--space-8);
    text-align: center;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Standort */
.team-area-standort {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: start;
}
@media (max-width: 860px) {
    .team-area-standort { grid-template-columns: 1fr; gap: var(--space-10); }
    .team-area-standort__map { order: -1; }
}
.team-area-standort h2 {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 900;
    margin-top: var(--space-2);
    margin-bottom: var(--space-6);
}
.team-area-standort p {
    margin-bottom: var(--space-4);
    font-size: var(--text-base);
    line-height: var(--leading-loose);
}
.team-area-standort__facts {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-block: var(--space-6);
    border-top: 1px solid var(--color-border);
}
.team-area-standort__facts li {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-sm);
}
.team-area-standort__facts strong {
    font-weight: 700;
    color: var(--color-text);
}
.team-area-standort__note {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}
.team-area-lageplan-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

/* Lageplan-Bild */
.team-area-standort__map {
    position: sticky;
    top: calc(var(--header-height) + var(--space-8));
}
.team-area-lageplan-img {
    width: 100%;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

/* Catering + Wertmarken */
.team-area-services {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
}
@media (max-width: 768px) {
    .team-area-services { grid-template-columns: 1fr; gap: var(--space-10); }
}
.team-area-service__wertmarken-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-4);
    aspect-ratio: 4/3;
}
.team-area-service__wertmarken-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-area-service__icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-4);
}
.team-area-service__title {
    font-family: var(--font-heading);
    font-size: var(--section-h3);
    font-weight: 800;
    margin-bottom: var(--space-4);
    color: var(--color-text);
}
.team-area-service p {
    font-size: var(--text-sm);
    line-height: var(--leading-loose);
    margin-bottom: var(--space-4);
}
.team-area-service__list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.team-area-service__list li {
    font-size: var(--text-sm);
    padding-left: var(--space-5);
    position: relative;
    line-height: var(--leading-normal);
}
.team-area-service__list li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 0.65em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
}

/* Warum */
.team-area-why {
    max-width: 72ch;
}
.team-area-why h2 {
    font-size: var(--section-h2);
    font-weight: 900;
    margin-top: var(--space-2);
    margin-bottom: var(--space-4);
}
.team-area-why p {
    font-size: var(--text-base);
    line-height: var(--leading-loose);
    margin-bottom: var(--space-6);
}
.team-area-why__list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.team-area-why__list li {
    font-size: var(--text-base);
    padding-left: var(--space-8);
    position: relative;
    line-height: var(--leading-normal);
}
.team-area-why__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
}

/* CTA */
.team-area-cta {
    max-width: 600px;
    margin-inline: auto;
    text-align: center;
}
.team-area-cta__title {
    font-size: var(--section-h2);
    font-weight: 900;
    color: var(--color-text);
    margin-bottom: var(--space-4);
}
.team-area-cta__text {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-loose);
    margin-bottom: var(--space-8);
}

/* ============================================================
   ANMELDUNG – COMING SOON
   ============================================================ */

/* Zentrierter Hero-Block */
.reg-coming-soon {
    max-width: 680px;
    margin-inline: auto;
    text-align: center;
}
.reg-coming-soon__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--gradient-eon);
    color: var(--color-white);
    margin-bottom: var(--space-6);
}
.reg-coming-soon__badge .icon-register,
.reg-coming-soon__badge .be-icon-svg {
    font-size: 2rem;
}
.reg-coming-soon__title {
    font-size: var(--section-h2-xl);
    font-weight: 900;
    margin-bottom: var(--space-5);
    line-height: 1.15;
}
.reg-coming-soon__lead {
    font-size: var(--text-lg);
    line-height: var(--leading-loose);
    color: var(--color-text-muted);
    margin-bottom: var(--space-8);
}
.reg-coming-soon__social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
}

.reg-social-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: var(--text-sm);
    text-decoration: none;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    color: var(--color-white);
}
.reg-social-btn:hover {
    opacity: 0.88;
    transform: translateY(-2px);
    /* Ohne diese Zeile greift `a:hover { color: … }` aus main.css (Spezifität 0,1,1 gegen 0,1,0)
       und färbt die Beschriftung in die Marken-Hover-Farbe — auf Instagram-Verlauf und
       Facebook-Blau war sie damit kaum noch zu lesen. */
    color: var(--color-white);
}

/* Auf farbigen Bändern brauchen die Knöpfe eine eigene Kante. Der Instagram-Verlauf beginnt in
   Orange (#f09433) und ging auf dem orangefarbenen Aufruf-Band optisch darin auf. */
.footer__newsletter .reg-social-btn,
.section--primary .reg-social-btn {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.92);
}
.footer__newsletter .reg-social-btn:hover,
.section--primary .reg-social-btn:hover {
    box-shadow: 0 0 0 2px #FFFFFF;
    opacity: 1;
}
.reg-social-btn--instagram {
    background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888);
}
.reg-social-btn--facebook {
    background: #1877f2;
}

/* Preview-Karten-Grid */
.reg-preview__header {
    text-align: center;
    margin-bottom: var(--space-10);
}
.reg-preview__header h2 {
    font-size: var(--section-h2);
    font-weight: 900;
    margin-top: var(--space-2);
}
.reg-preview__grid {
    display: grid;
    /* auto-fit statt starrer drei Spalten: mit gepflegtem mittlerem Preisbereich (price_mid,
       Anfrage #585) stehen hier VIER Karten — fest verdrahtet bräche die vierte allein um. */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-5);
    align-items: stretch;
}
@media (max-width: 900px) {
    .reg-preview__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 580px) {
    .reg-preview__grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
}

.reg-preview-card {
    background: var(--surface-raised);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    height: 100%;
}
.reg-preview-card--price {
    border-top: 3px solid var(--color-primary);
}
.reg-preview-card--late {
    border-top-color: var(--color-border);
}
.reg-preview-card--late .reg-preview-card__kicker {
    color: var(--color-text-muted);
}
.reg-preview-card__kicker {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--color-primary);
}
.reg-preview-card__price {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 900;
    color: var(--color-text);
    line-height: 1;
    margin-top: var(--space-1);
}
.reg-preview-card--late .reg-preview-card__price {
    color: var(--color-text-muted);
}
.reg-preview-card__unit {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}
.reg-preview-card__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}
.reg-preview-card__list li {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    padding-left: var(--space-5);
    position: relative;
    line-height: var(--leading-snug);
}
.reg-preview-card--price .reg-preview-card__list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: 800;
}

/* Facts-Liste im Info-Card */
.reg-preview-facts {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-3);
}
.reg-preview-fact {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.reg-preview-fact [class^="icon-"],
.reg-preview-fact .be-icon-svg {
    font-size: 1.25rem;
    color: var(--color-primary);
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}
.reg-preview-fact div {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.reg-preview-fact strong {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
}
.reg-preview-fact span {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Reminder CTA */
.reg-reminder {
    text-align: center;
    max-width: 560px;
    margin-inline: auto;
    padding-block: var(--space-6);
}
.reg-reminder h2 {
    font-size: var(--section-h2);
    font-weight: 900;
    margin-bottom: var(--space-5);
}
.reg-reminder p {
    font-size: var(--text-base);
    line-height: var(--leading-loose);
    color: var(--color-text-muted);
    margin-bottom: 0;
}
.reg-reminder__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
    margin-top: var(--space-10);
}

/* ============================================================
   CHARITY PAGE
   ============================================================ */

/* --- 3 Karten-Section (nach Banner) --- */
.charity-cards-section {
    padding-top: var(--space-16);
}
.charity-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}
@media (max-width: 768px) {
    .charity-cards { grid-template-columns: 1fr; max-width: 400px; margin-inline: auto; }
}

.charity-card {
    background: #eaf5fd;
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    text-align: center;
}
.charity-card--featured {
    background: #d0ecfb;
    box-shadow: var(--shadow-md);
}
.charity-card__img {
    width: 100%;
}
.charity-card__img img {
    width: 100%;
    height: auto;
    display: block;
    max-width: 280px;
    margin-inline: auto;
}

/* --- Text + Grafik-Section --- */
.charity-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-16);
    align-items: start;
}
@media (max-width: 900px) {
    .charity-content { grid-template-columns: 1fr; gap: var(--space-8); }
    .charity-content__graphic { order: -1; max-width: 320px; margin-inline: auto; }
}

.charity-content__text h2 {
    font-size: var(--section-h2-xl);
    font-weight: 900;
    margin-bottom: var(--space-5);
    line-height: 1.15;
}
.charity-content__text h3 {
    font-size: var(--section-h3);
    font-weight: 800;
    margin-top: var(--space-6);
    margin-bottom: var(--space-4);
}
.charity-content__text p {
    font-size: var(--text-base);
    line-height: var(--leading-loose);
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}
.charity-content__text .btn {
    margin-top: var(--space-4);
}
.charity-divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin-block: var(--space-8);
}

.charity-content__graphic img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- Vollbreites BSFK-Foto --- */
.charity-photo-section {
    padding-block: var(--section-gap);
}
.charity-photo-main {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}
.charity-photo-badge {
    display: block;
    margin-inline: auto;
    margin-top: var(--space-8);
    max-width: 220px;
    width: 100%;
    height: auto;
}

/* --- CTA einfach zentriert --- */
.charity-cta-simple {
    text-align: center;
}

/* --- Split: Foto | Inhalt --- */
.charity-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 520px;
}
@media (max-width: 768px) {
    .charity-split { grid-template-columns: 1fr; }
    .charity-split__photo { min-height: 280px; }
}
.charity-split__photo {
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
}
.charity-split__content {
    background: var(--surface-sunken);
    padding: var(--space-16);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-4);
}
@media (max-width: 1024px) {
    .charity-split__content { padding: var(--space-10); }
}
.charity-split__content .section__kicker {
    margin-bottom: 0;
}
.charity-split__content h2 {
    font-size: var(--section-h2);
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: var(--space-2);
}
.charity-split__content p {
    font-size: var(--text-base);
    line-height: var(--leading-loose);
    color: var(--color-text-muted);
}
.charity-split__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

/* ×2 Badge im Split */
.charity-sparkasse-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--gradient-eon);
    color: var(--color-white);
    box-shadow: 0 6px 24px rgba(var(--color-primary-rgb),0.30);
    margin-bottom: var(--space-2);
}
.charity-sparkasse-badge__multiplier {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 900;
    line-height: 1;
}
.charity-sparkasse-badge__label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    opacity: 0.90;
}

/* ============================================================
   STRECKE
   ============================================================ */
.route-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    justify-content: center;
}
.route-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    min-width: 100px;
    text-align: center;
}
.route-stat__icon { font-size: 1.75rem; color: var(--color-primary); }
.route-stat__value { font-size: var(--text-2xl); font-weight: 900; line-height: 1.1; }
.route-stat__label { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--tracking-wider); font-weight: 600; }

.route-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: start;
}
@media (max-width: 767px) { .route-layout { grid-template-columns: 1fr; gap: var(--space-10); } }

.route-layout__text h2 {
    font-size: var(--section-h2-xl);
    font-weight: 900;
    margin-bottom: var(--space-4);
}
.route-layout__text p { color: var(--color-text-muted); margin-bottom: var(--space-4); }

.route-waypoints { display: flex; flex-direction: column; margin-top: var(--space-8); }
.route-waypoint {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}
.route-waypoint div strong { display: block; font-weight: 700; }
.route-waypoint div span  { font-size: var(--text-sm); color: var(--color-text-muted); }
.route-waypoint__dot {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-border);
    border: 2px solid var(--color-white);
    box-shadow: 0 0 0 2px var(--color-border);
    margin-top: 4px;
}
.route-waypoint__dot--start  { background: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary); }
.route-waypoint__dot--finish { background: #22c55e; box-shadow: 0 0 0 2px #22c55e; }
.route-waypoint__line {
    width: 2px;
    height: 32px;
    background: var(--color-border);
    margin-left: 6px;
}

.route-map-frame {
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    box-shadow: var(--shadow-card);
}
.route-map-frame iframe { width: 100%; height: 100%; border: none; display: block; }
.route-map-link {
    display: inline-block;
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-decoration: none;
}
.route-map-link:hover { color: var(--color-primary); }

.route-photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.route-photos img { width: 100%; height: 280px; object-fit: cover; display: block; }
@media (max-width: 639px) {
    .route-photos { grid-template-columns: 1fr; }
    .route-photos img { height: 220px; }
}

/* ============================================================
   AFTER-RUN-PARTY
   ============================================================ */
.party-header { text-align: center; max-width: 640px; margin-inline: auto; margin-bottom: var(--space-12); }
.party-header h2 { font-size: var(--section-h2-xl); font-weight: 900; margin-bottom: var(--space-4); }
.party-header__lead { font-size: var(--text-lg); color: var(--color-text-muted); margin: 0; }

.party-highlights {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}
@media (min-width: 768px) { .party-highlights { grid-template-columns: repeat(4, 1fr); } }
.party-highlight {
    background: var(--surface-raised);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    text-align: center;
}
.party-highlight__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(var(--color-primary-rgb),0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    margin-bottom: var(--space-4);
    color: var(--color-primary);
}
.party-highlight h3 { font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-2); }
.party-highlight p  { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }

.party-photos {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: var(--space-4);
    border-radius: var(--radius-xl);
    overflow: hidden;
}
@media (max-width: 639px) { .party-photos { grid-template-columns: 1fr; } }
.party-photos__main img { width: 100%; height: 400px; object-fit: cover; display: block; }
.party-photos__side { display: flex; flex-direction: column; gap: var(--space-4); }
.party-photos__side img { width: 100%; flex: 1; object-fit: cover; display: block; border-radius: 0; min-height: 100px; }

/* ============================================================
   TEAM-CAPTAIN
   ============================================================ */
.captain-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: center;
}
@media (max-width: 767px) { .captain-intro { grid-template-columns: 1fr; gap: var(--space-8); } }
.captain-intro__text h2 { font-size: var(--section-h2-xl); font-weight: 900; margin-bottom: var(--space-4); }
.captain-intro__text p  { color: var(--color-text-muted); margin-bottom: var(--space-4); }
.captain-intro__photo img { width: 100%; border-radius: var(--radius-xl); display: block; }

.captain-timeline { display: flex; flex-direction: column; gap: 0; max-width: 720px; margin-inline: auto; }
.captain-step {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: var(--space-5);
    padding-bottom: var(--space-8);
    position: relative;
}
.captain-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 22px;
    top: 48px;
    bottom: 0;
    width: 2px;
    background: var(--color-border);
}
.captain-step__number {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gradient-eon);
    color: var(--color-white);
    font-size: var(--text-lg);
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.captain-step__content h3 { font-size: var(--section-h3); font-weight: 700; margin-bottom: var(--space-2); }
.captain-step__content p  { color: var(--color-text-muted); font-size: var(--text-base); margin-bottom: var(--space-2); }
.captain-step__when {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-primary);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
}

/* ============================================================
   FOTO-GALERIE (page-fotos.php)
   ============================================================ */
.gallery-page__credit {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-align: right;
    margin-bottom: var(--space-6);
}
.gallery-page__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}
@media (min-width: 640px)  { .gallery-page__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .gallery-page__grid { grid-template-columns: repeat(4, 1fr); } }

.gallery-page__item {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--color-border);
    border: none;
    padding: 0;
    cursor: pointer;
}
.gallery-page__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-slow);
}
.gallery-page__item:hover img { transform: scale(1.04); }
.gallery-page__zoom {
    position: absolute;
    bottom: var(--space-3);
    right: var(--space-3);
    width: 36px;
    height: 36px;
    background: rgba(0,0,0,0.55);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    opacity: 0;
    transition: opacity var(--transition-fast);
}
.gallery-page__item:hover .gallery-page__zoom { opacity: 1; }

/* Lightbox */
.gallery-lightbox {
    border: none;
    background: transparent;
    padding: 0;
    max-width: 100vw;
    max-height: 100vh;
    width: 100%;
    height: 100%;
}
.gallery-lightbox::backdrop { background: rgba(0,0,0,0.92); }
.gallery-lightbox__inner {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gallery-lightbox__media {
    max-width: min(90vw, 1200px);
    max-height: 85vh;
    display: flex;
    align-items: center;
}
.gallery-lightbox__img {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    display: block;
    border-radius: var(--radius-md);
}
.gallery-lightbox__close {
    position: fixed;
    top: var(--space-5);
    right: var(--space-5);
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.15);
    border: none;
    border-radius: 50%;
    color: var(--color-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast);
    z-index: 1;
}
.gallery-lightbox__close:hover { background: rgba(255,255,255,0.25); }
.gallery-lightbox__nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: rgba(255,255,255,0.12);
    border: none;
    border-radius: 50%;
    color: var(--color-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast);
}
.gallery-lightbox__nav:hover { background: rgba(255,255,255,0.25); }
.gallery-lightbox__prev { left: var(--space-5); }
.gallery-lightbox__next { right: var(--space-5); }
.gallery-lightbox__caption {
    position: fixed;
    bottom: var(--space-5);
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.65);
    text-align: center;
    max-width: 60ch;
    margin: 0;
}

/* ============================================================
   TEILNEHMERLISTE – TEASER
   ============================================================ */
.tl-stats-section { padding-block: var(--space-12); }
.tl-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
    text-align: center;
}
@media (max-width: 639px) {
    .tl-stats { grid-template-columns: 1fr; gap: var(--space-6); }
}
.tl-stat__num {
    display: block;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    color: var(--color-white);
    line-height: 1;
    margin-bottom: var(--space-2);
}
.tl-stat__label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
}

/* --- Locked list preview ----------------------------------- */
.tl-locked-wrap { max-width: 780px; margin-inline: auto; }

.tl-locked-header { text-align: center; margin-bottom: var(--space-10); }
.tl-locked-header__title {
    font-size: var(--section-h2);
    font-weight: 900;
    margin-bottom: var(--space-4);
}
.tl-locked-header__lead {
    color: var(--color-text-muted);
    max-width: 54ch;
    margin-inline: auto;
}

.tl-list-head {
    display: grid;
    /* Mittelspalte 72px war auf „Welle" bemessen — das neutrale „Startblock" (4.232.0) lief in
       die Nachbarspalte. Beide Raster (Kopf + Blur-Zeilen) müssen IDENTISCHE feste Spalten
       tragen, sonst fluchten die Zeilen nicht mehr unter den Beschriftungen — deshalb feste
       104px statt max-content. */
    grid-template-columns: 1fr 104px 104px;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-bottom: 2px solid var(--color-border);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.tl-list-head__wave { text-align: center; }
.tl-list-head__runners { text-align: right; }

.tl-list-preview {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.tl-list-row {
    display: grid;
    grid-template-columns: 1fr 104px 104px;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    background: var(--surface-raised);
}
.tl-list-row:last-child { border-bottom: none; }
.tl-list-row:nth-child(even) { background: var(--color-surface); }

.tl-list-row__left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}
.tl-list-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--av, var(--color-primary));
    color: var(--color-text-on-primary);
    font-size: var(--text-sm);
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tl-blur-bar {
    height: 13px;
    max-width: 100%;
    border-radius: 6px;
    background: var(--color-border);
    filter: blur(3px);
    user-select: none;
}
.tl-blur-pill {
    height: 24px;
    border-radius: 12px;
    background: var(--color-border);
    filter: blur(4px);
    user-select: none;
    justify-self: center;
    width: 44px;
}
.tl-blur-count {
    height: 13px;
    border-radius: 6px;
    background: var(--color-border);
    filter: blur(4px);
    user-select: none;
    justify-self: end;
    width: 48px;
}

/* --- Fade + lock card ------------------------------------- */
.tl-locked-overlay {
    position: relative;
    margin-top: -120px;
    padding-top: 60px;
    padding-bottom: var(--space-4);
    background: linear-gradient(to bottom, transparent 0%, var(--surface-raised) 38%);
    text-align: center;
}
.tl-locked-card {
    background: var(--surface-raised);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-primary);
    border-radius: var(--radius-xl);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
    padding: var(--space-10) var(--space-8);
    max-width: 480px;
    margin-inline: auto;
}
.tl-locked-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--gradient-eon);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-5);
}
.tl-locked-card__title {
    font-size: var(--text-xl);
    font-weight: 900;
    margin-bottom: var(--space-3);
}
.tl-locked-card__text {
    color: var(--color-text-muted);
    max-width: 36ch;
    margin-inline: auto;
    margin-bottom: var(--space-6);
}

/* --- Notify / Social CTA ---------------------------------- */
.tl-notify {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-8);
    align-items: center;
    max-width: 900px;
    margin-inline: auto;
}
@media (max-width: 767px) {
    .tl-notify {
        grid-template-columns: 1fr;
        text-align: center;
    }
}
.tl-notify__title {
    font-size: var(--section-h2);
    font-weight: 900;
    margin-bottom: var(--space-3);
}
.tl-notify__lead { color: var(--color-text-muted); }
.tl-notify__actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}
@media (max-width: 767px) {
    .tl-notify__actions { justify-content: center; }
}
.tl-social-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
}

/* ============================================================
   COUNTER / IMPACT SECTION
   ============================================================

   ⚠️ Die Kinder dieser Sektion hatten ihre Schriftfarbe fest als `#fff` bzw. als gedämpftes
   `rgba(255,255,255,…)` — die Sektion selbst liest brav `--color-text-on-primary`, aber jedes
   Kind hat sie überschrieben. Auf E.ON-Rot fiel das nie auf. Auf dem Mülheimer Orange stand die
   GRÖSSTE Zahl der Startseite („2.500+") damit bei 2,19:1, die Beschriftungen bei 1,53–1,90:1.

   Gedämpfte Varianten helfen hier nicht: Pflaume auf Orange trägt bei 100 % genau 5,19:1, bei
   88 % nur noch 4,44:1 und bei 72 % 3,42:1. Die Hierarchie kommt deshalb aus GRÖSSE und GEWICHT,
   nicht aus der Deckkraft — `opacity` bleibt nur dort, wo sie unkritisch ist.
   ============================================================ */
.counter-section {
    padding-block: clamp(4rem, 10vw, 7rem);
    text-align: center;
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
}

.counter-section__kicker {
    display: block;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-text-on-primary);
    opacity: 0.85;
    margin-bottom: var(--space-10);
}

.counter-main { margin-bottom: var(--space-12); }

.counter-main__num {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(5rem, 16vw, 11rem);
    font-weight: 900;
    line-height: 1;
    color: var(--color-text-on-primary);
    letter-spacing: -0.025em;
}

.counter-main__label {
    font-size: clamp(0.95rem, 2vw, 1.125rem);
    color: var(--color-text-on-primary);
    max-width: 44ch;
    margin: var(--space-6) auto 0;
    line-height: var(--leading-loose);
}

.counter-sub-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    padding-top: var(--space-10);
}

.counter-sub {
    text-align: center;
    padding: 0 clamp(var(--space-6), 4vw, var(--space-12));
}

.counter-sub__sep {
    width: 1px;
    height: 36px;
    background: color-mix(in srgb, var(--color-text-on-primary) 35%, transparent);
    flex-shrink: 0;
}

.counter-sub__num {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 900;
    line-height: 1;
    color: var(--color-text-on-primary);
    margin-bottom: var(--space-1);
}

.counter-sub__label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-on-primary);
    opacity: 0.85;
}

@media (max-width: 640px) {
    .counter-sub { padding: var(--space-5) var(--space-6); }
    .counter-sub__sep { display: none; }
}

/* ============================================================
   ERGEBNISSE PAGE – er-* Klassen
   ============================================================ */

/* Stats Strip */
.er-stats-section { padding-block: var(--space-12); }
.er-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
    text-align: center;
}
@media (max-width: 767px) { .er-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .er-stats { grid-template-columns: 1fr; gap: var(--space-5); } }

.er-stat__num {
    display: block;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 900;
    color: var(--color-white);
    line-height: 1;
    margin-bottom: var(--space-2);
}
.er-stat__label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

/* Locked preview wrapper */
.er-locked-wrap { max-width: 780px; margin-inline: auto; }

.er-locked-header { text-align: center; margin-bottom: var(--space-10); }
.er-locked-header__title { font-size: var(--section-h2); font-weight: 900; margin-bottom: var(--space-4); }
.er-locked-header__lead { color: var(--color-text-muted); max-width: 54ch; margin-inline: auto; }

/* Table head */
.er-list-head {
    display: grid;
    grid-template-columns: 52px 1fr 64px 100px;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 2px solid var(--color-border);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.er-list-head__pos  { text-align: center; }
.er-list-head__wave { text-align: center; }
.er-list-head__time { text-align: right; }

/* Results rows */
.er-list-preview {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
}
.er-list-row {
    display: grid;
    grid-template-columns: 52px 1fr 64px 100px;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    background: var(--surface-raised);
}
.er-list-row:last-child  { border-bottom: none; }
.er-list-row:nth-child(even) { background: var(--color-surface); }

/* Rank badge */
.er-list-rank {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    flex-shrink: 0;
}
.er-list-rank--gold   { background: #FFF3CD; border-color: #D4A017; color: #7A5C00; }
.er-list-rank--silver { background: #F0F0F0; border-color: #A0A0A0; color: #555; }
.er-list-rank--bronze { background: #FBE9D6; border-color: #C07830; color: #7A4010; }

/* Two-line runner info */
.er-list-row__info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.er-blur-company {
    height: 10px !important;
    opacity: 0.6;
}

/* Time blur */
.er-blur-time {
    width: 84px;
    height: 13px;
    border-radius: 6px;
    background: var(--color-border);
    filter: blur(4px);
    user-select: none;
    justify-self: end;
}

/* Fade + lock card */
.er-locked-overlay {
    position: relative;
    margin-top: -120px;
    padding-top: 60px;
    padding-bottom: var(--space-4);
    background: linear-gradient(to bottom, transparent 0%, var(--surface-raised) 38%);
    text-align: center;
}
.er-locked-card {
    background: var(--surface-raised);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-primary);
    border-radius: var(--radius-xl);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
    padding: var(--space-10) var(--space-8);
    max-width: 480px;
    margin-inline: auto;
}
.er-locked-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--gradient-eon);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-5);
}
.er-locked-card__title { font-size: var(--text-xl); font-weight: 900; margin-bottom: var(--space-3); }
.er-locked-card__text {
    color: var(--color-text-muted);
    max-width: 36ch;
    margin-inline: auto;
    margin-bottom: var(--space-6);
}

/* History CTA */
.er-history {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-8);
    align-items: center;
    max-width: 900px;
    margin-inline: auto;
}
@media (max-width: 767px) {
    .er-history { grid-template-columns: 1fr; text-align: center; }
    .er-history__actions { display: flex; justify-content: center; gap: var(--space-3); flex-wrap: wrap; }
}
.er-history__title { font-size: var(--section-h2); font-weight: 900; margin-bottom: var(--space-3); }
.er-history__lead  { color: var(--color-text-muted); }
.er-history__actions { display: flex; flex-direction: column; gap: var(--space-3); align-items: stretch; }

/* ============================================================
   ANWOHNER-INFOS
   ============================================================ */

/* Quick-Facts Strip */
.anw-facts-section { padding-block: var(--space-10); }
.anw-facts {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
}
.anw-fact {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-inline: clamp(var(--space-6), 4vw, var(--space-12));
    padding-block: var(--space-4);
}
.anw-fact__value {
    font-family: var(--font-heading);
    font-size: clamp(1.375rem, 2.5vw, 1.875rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.15;
    margin-bottom: var(--space-1);
}
.anw-fact__label {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
}
.anw-fact__sep {
    width: 1px;
    height: 48px;
    background: rgba(255, 255, 255, 0.20);
    flex-shrink: 0;
}
@media (max-width: 700px) {
    .anw-facts { gap: var(--space-2); }
    .anw-fact__sep { display: none; }
    .anw-fact { padding-inline: var(--space-4); flex: 1 1 calc(50% - var(--space-4)); }
}

/* Section Heading */
.anw-head {
    max-width: 68ch;
    margin-bottom: var(--space-12);
}
.anw-head__title {
    font-size: var(--section-h2-xl);
    font-weight: 900;
    margin-bottom: var(--space-4);
    line-height: 1.1;
}
.anw-head__lead {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    line-height: 1.65;
    max-width: 60ch;
}

/* Timeline */
.anw-timeline {
    display: flex;
    flex-direction: column;
    border-left: 2px solid var(--color-border);
    margin-left: var(--space-4);
    padding-left: 0;
}
.anw-timeline-item {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--space-8);
    padding-bottom: var(--space-10);
    position: relative;
}
.anw-timeline-item::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-primary);
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--color-primary);
}
.anw-timeline-item--end::before { background: #2D7D2D; box-shadow: 0 0 0 2px #2D7D2D; }
.anw-timeline-item--end { padding-bottom: 0; }

.anw-timeline-item__time {
    padding-left: var(--space-6);
    padding-top: 2px;
}
.anw-time-badge {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: .8125rem;
    font-weight: 800;
    letter-spacing: .02em;
    padding: .35em .75em;
    border-radius: var(--radius-md);
    white-space: nowrap;
    line-height: 1.3;
}
.anw-time-badge--warn { background: #FFF3CD; color: #7A5400; }
.anw-time-badge--red  { background: var(--color-primary); color: var(--color-text-on-primary); }
.anw-time-badge--ok   { background: var(--surface-success); color: var(--color-success); }

.anw-timeline-item__content { padding-bottom: 0; }
.anw-timeline-item__title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 800;
    margin-bottom: var(--space-2);
    color: var(--color-text);
}
.anw-timeline-item__text {
    font-size: .9375rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: var(--space-4);
}
.anw-timeline-item__text:last-child { margin-bottom: 0; }

.anw-street-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.anw-street-tag {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 700;
    padding: .25em .75em;
    color: var(--color-text);
}

@media (max-width: 700px) {
    .anw-timeline { margin-left: var(--space-2); }
    .anw-timeline-item { grid-template-columns: 1fr; gap: var(--space-3); }
    .anw-timeline-item__time { padding-left: var(--space-6); }
    .anw-timeline-item { padding-bottom: var(--space-8); }
}

/* Map Section */
.anw-map-section {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: clamp(var(--space-8), 5vw, var(--space-14));
    align-items: start;
}
@media (max-width: 900px) {
    .anw-map-section { grid-template-columns: 1fr; }
}
.anw-map-intro__title {
    font-size: var(--section-h2);
    font-weight: 900;
    margin-bottom: var(--space-4);
    line-height: 1.15;
}
.anw-map-intro__text {
    font-size: .9375rem;
    color: var(--color-text-muted);
    line-height: 1.65;
    margin-bottom: var(--space-6);
}
.anw-map-frame {
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
}
.anw-map-frame iframe {
    display: block;
    width: 100%;
    height: 380px;
    border: none;
}
@media (max-width: 900px) {
    .anw-map-frame iframe { height: 280px; }
}

/* Contact Section */
.anw-contact-head {
    margin-bottom: var(--space-10);
}
.anw-contact-head__title {
    font-size: var(--section-h2);
    font-weight: 900;
    margin-top: var(--space-2);
}
.anw-contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin-bottom: var(--space-10);
}
@media (max-width: 800px) {
    .anw-contact-grid { grid-template-columns: 1fr; }
}
.anw-contact-card {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-primary);
    padding: var(--space-6) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.anw-contact-card__icon {
    width: 44px;
    height: 44px;
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-3);
    flex-shrink: 0;
}
.anw-contact-card__label {
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}
.anw-contact-card__value {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text);
    text-decoration: none;
    font-style: normal;
    display: block;
}
a.anw-contact-card__value:hover { color: var(--color-primary); }
.anw-contact-card__value--addr { font-family: var(--font-body); font-weight: 400; font-size: .9375rem; color: var(--color-text-muted); }
.anw-contact-card__note {
    font-size: var(--text-sm);
    color: var(--color-text-light);
    margin-top: var(--space-1);
}
.anw-contact-cta {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* ============================================================
   FIRMENANGEBOTE
   ============================================================ */

.fo-intro {
    text-align: center;
    max-width: 60ch;
    margin-inline: auto;
}
.fo-intro__title {
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    font-weight: 900;
    margin-bottom: var(--space-4);
}
.fo-intro__lead {
    color: var(--color-text-muted);
    font-size: var(--text-base);
    line-height: 1.6;
}

.fo-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(var(--space-8), 5vw, var(--space-14));
    align-items: center;
}
.fo-card--reverse .fo-card__visual { order: -1; }
@media (max-width: 820px) {
    .fo-card,
    .fo-card--reverse { grid-template-columns: 1fr; }
    .fo-card--reverse .fo-card__visual { order: 0; }
    .fo-card__visual { order: -1; }
}

.fo-card__badge {
    display: inline-block;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}
.fo-card__title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 900;
    margin-bottom: var(--space-4);
}
.fo-card__lead {
    color: var(--color-text-muted);
    font-size: var(--text-base);
    line-height: 1.65;
    margin-bottom: var(--space-6);
}

.fo-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.fo-feature-list li {
    padding-left: var(--space-6);
    position: relative;
    color: var(--color-text-muted);
    line-height: 1.5;
}
.fo-feature-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .55em;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-primary);
}

.fo-card__contact {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.fo-card__contact-label {
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.fo-card__contact strong { font-size: var(--text-base); }
.fo-card__address {
    font-style: normal;
    font-size: .9375rem;
    color: var(--color-text-muted);
}
.fo-card__contact-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-3);
}

.fo-contact-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}
.fo-contact-link:hover { text-decoration: underline; }
.fo-contact-link svg { flex-shrink: 0; }

.fo-card__visual img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: var(--radius-xl);
}
@media (max-width: 820px) {
    .fo-card__visual img { height: 260px; }
}

/* Bild unter einer FAQ-Antwort (z. B. die Streckenkarte). Bewusst in der Breite begrenzt: es
   steht IM Antworttext, nicht als eigene Sektion. */
.faq-item__figure {
    margin: var(--space-5) 0 var(--space-2);
}
.faq-item__figure button {
    position: relative;
    display: block;
    background: #FFFFFF;
    border: 0;
    cursor: zoom-in;
    border-radius: var(--radius-md);
    padding: clamp(.5rem, 1.5vw, .9rem);
    max-width: 460px;
    width: 100%;
}
.faq-item__zoom {
    position: absolute;
    right: .55rem;
    bottom: .55rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #FFFFFF;
    opacity: 0;
    transition: opacity var(--transition-fast);
}
.faq-item__figure button:hover .faq-item__zoom,
.faq-item__figure button:focus-visible .faq-item__zoom { opacity: 1; }
.faq-item__figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm, 4px);
}

/* Freigestellte Grafik: keine weiße Karte, kein Innenabstand, keine Ecken. Auf dunklem
   Grund stünde sie darin wie ein Fremdkörper. Gegenstück zu .startpaket__art--frei.
   ⚠️ Der Zoom-Knopf bleibt: Er ist ein <button>, nur seine Fläche wird durchsichtig. */
.faq-item__figure--frei button {
    background: none;
    padding: 0;
    border-radius: 0;
}
.faq-item__figure--frei img {
    border-radius: 0;
}

/* ============================================================
   FOTOSEITE: BEREICHE ALS REITER
   Impressionen / Teamfotos / Video. Erscheinen erst ab zwei gefüllten Bereichen —
   Sites mit nur Impressionen sehen unverändert aus.
   ============================================================ */

.gallery-tabs__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-8);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-3);
}

.gallery-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    /* 44 px Mindesthöhe: die Reiter sind das Hauptbedienelement der Seite und müssen
       auf dem Handy sicher zu treffen sein (WCAG 2.5.8 verlangt 24, Apple empfiehlt 44). */
    min-height: 44px;
    padding: var(--space-2) var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full, 999px);
    background: transparent;
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.gallery-tabs__tab:hover {
    color: var(--color-text);
    border-color: var(--color-primary);
}

.gallery-tabs__tab.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    /* Nicht --color-white: auf hellen Marken-Farben wäre Weiß zu schwach. Das Token wird
       vom Branding aus dem gemessenen Kontrast bestimmt. */
    color: var(--color-text-on-primary);
}

.gallery-tabs__anzahl {
    font-size: var(--text-xs);
    font-weight: 700;
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
}

/* Umschalten trägt das CSS, nicht das Markup. Ohne Skript greift keine dieser beiden Regeln:
   dann steht die Reiterleiste (die ohne Skript nichts täte) nicht da, und alle Bereiche
   erscheinen untereinander. Die Klasse `js` setzt der Kopfbereich vor dem Rendern. */
.js .gallery-tabs__panel:not(.is-active) { display: none; }
.no-js .gallery-tabs__list { display: none; }

.gallery-tabs__panel:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
}

/* Videos im Reiter „Video" */
.gallery-videos {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
}
@media (min-width: 900px) {
    .gallery-videos { grid-template-columns: repeat(2, 1fr); }
}
.gallery-videos__item { margin: 0; }
.gallery-videos__caption {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    display: flex;
    gap: var(--space-3);
    align-items: baseline;
}
.gallery-videos__jahr { font-weight: 700; color: var(--color-primary); }

/* Eigener Abspieler (hochgeladenes Video, ohne Einwilligungs-Gate). Gleiche Bühne wie das
   Gate daneben, damit beide Wege im Reiter „Video" nicht unterschiedlich groß wirken. */
.be-video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--radius-lg);
    object-fit: contain;
}

/* ── Titelbild UNTER dem Beitrag (Einzelansicht einer Meldung) ────────────────
   In der Übersicht tragen die Karten kein Bild mehr (Vorgabe 13.08.2026); das Foto ist die
   Belohnung fürs Weiterlesen. Klick öffnet die vorhandene Großansicht. */
.news-article__bild {
    margin: var(--space-10) 0 0;
}
.news-article__bild-flaeche {
    display: block;
    position: relative;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: zoom-in;
    /* Die Fläche IST der Knopf — ohne eigene Mindesthöhe, weil das Bild sie vorgibt. */
}
.news-article__bild-flaeche img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform var(--transition-slow);
}
.news-article__bild-flaeche:hover img { transform: scale(1.02); }
.news-article__bild-flaeche:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}
/* Lupe als Hinweis, dass sich das Bild vergrößern lässt. Ohne sie sieht ein Foto wie ein Foto
   aus und niemand kommt auf die Idee zu klicken. */
.news-article__bild-lupe {
    position: absolute;
    right: var(--space-3);
    bottom: var(--space-3);
    /* 44 px: sicher zu treffen, auch wenn die ganze Fläche klickbar ist. */
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    backdrop-filter: blur(2px);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-fast);
}
.news-article__bild-flaeche:hover .news-article__bild-lupe,
.news-article__bild-flaeche:focus-visible .news-article__bild-lupe { opacity: 1; }
/* Auf Touch-Geräten gibt es kein Überfahren — dort dauerhaft zeigen. */
@media (hover: none) {
    .news-article__bild-lupe { opacity: 1; }
}
.news-article__bild-text {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}


/* Formularauswahl auf der Service-Seite.
   Eine Reihe aus Knöpfen; nur ein Formular darf je Seitenaufruf laden (Begründung in
   page-service.php: das raceresult-Widget hält seine Parameter in globalen Variablen). */
.sv-wahl {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
}