/* ==========================================================================
   Schulschach NRW – Design-System-Layer (Glas, Typografie, Dark/Light)
   Wird NACH style.css geladen:
     <link rel="stylesheet" href="<?= e(url('/assets/css/style.css')) ?>">
     <link rel="stylesheet" href="<?= e(url('/assets/css/theme.css')) ?>">
   Ziel: Tokens zentral, keine Komponentenregel doppelt je Modus.
   Standardmodus: DUNKEL. Hell über <html data-theme="light">.
   §1–§12 stammen aus dem Entwurf „Schulschach-Statistik modernisieren“ (Statistik,
   Kopf, Fuß, Heroes). §13–§22 übertragen das Schema auf die übrigen öffentlichen
   Seiten. Neue Komponenten bitte mit den Tokens aus §2–§4/§13 färben, nicht mit
   Hex-Werten – sonst sind sie in einem der beiden Modi unlesbar.
   admin-layout.php bindet diese Datei bewusst nicht ein.
   ========================================================================== */

/* 1 ------------------------------------------------------------------ Fonts */
/* Self-hosted, damit kein Google-Request nötig ist (DSGVO).
   Datei: public/assets/fonts/manrope-variable.woff2 (wght 200–800, Google-Fonts-Subset
   „latin“, Lizenz OFL.txt daneben). Fehlende Zeichen übernimmt die Ersatzschrift. */
@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope-variable.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

/* 2 ----------------------------------------------------------- Basis-Tokens */
:root {
    /* Marke bleibt unverändert – die Werte stammen aus style.css */
    --brand-900: #310811;
    --brand-800: #a10f1f;
    --brand-700: #d5071b;
    --brand-600: #ed1830;
    --brand-lime: #ddff5c;
    --brand-mint: #1bd88f;

    --font-sans: "Manrope", "Segoe UI Variable", system-ui, sans-serif;
    --font-display: var(--font-sans);
    /* System-Monospace für Beschriftungen, Achsen und Kfz-Kürzel (keine Webfont). */
    --font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    /* Schriftgewichte: Fließtext 400–500, Überschriften/Kennzahlen 600–700 */
    --weight-body: 450;
    --weight-strong: 600;
    --weight-heading: 700;

    --radius-sm: 14px;
    --radius-md: 22px;
    --radius-lg: 28px;
    --radius-pill: 999px;

    --glass-blur: 18px;
    --glass-blur-strong: 20px;

    --chart-fill-alpha: 0.7;
    --transition: 210ms cubic-bezier(.2,.8,.2,1);
}

/* 3 ------------------------------------------- Modus-Tokens: DUNKEL (Default) */
:root {
    color-scheme: dark;

    --bg-base: #14070a;
    --bg-gradient:
        radial-gradient(620px 620px at 100% -8%, rgba(237,24,48,.35), rgba(237,24,48,0) 70%),
        radial-gradient(560px 560px at -10% 42%, rgba(221,255,92,.16), rgba(221,255,92,0) 70%),
        radial-gradient(620px 620px at 85% 88%, rgba(27,216,143,.16), rgba(27,216,143,0) 70%),
        linear-gradient(155deg, #14070a 0%, #2a0a12 40%, #3d0d16 70%, #160709 100%);

    --glass-bg: rgba(20, 20, 25, 0.60);
    --glass-bg-strong: rgba(20, 20, 25, 0.70);
    --glass-border: rgba(255, 255, 255, 0.10);
    --glass-edge: linear-gradient(120deg, rgba(237,24,48,.22), rgba(255,255,255,0) 60%);
    --glass-shadow: 0 24px 60px rgba(0, 0, 0, .35);

    --text: #ffffff;
    --text-body: #ded3d5;   /* 10,9:1 auf --glass-bg über dunklem Grund */
    --text-muted: #c7b3b7;  /* 8,3:1  – Beschriftungen, Einheiten */
    --accent: var(--brand-lime);
    --accent-ink: #14070a;  /* Text auf Akzentflächen */
    --hairline: rgba(255, 255, 255, 0.12);
    --row-bg: rgba(255, 255, 255, 0.05);
    --row-bg-hover: rgba(255, 255, 255, 0.12);

    --chart-stroke: var(--brand-600);
    --chart-fill: rgba(237, 24, 48, var(--chart-fill-alpha));
    --chart-fill-soft: rgba(237, 24, 48, .32);
    --chart-alt-stroke: var(--brand-lime);
    --chart-alt-fill: rgba(221, 255, 92, .5);

    /* Statistik-Grafiken (§8c). Kartenrampe deckend, damit der Label-Kontrast
       (mind. 4,5:1, tests/statistics/map-label-contrast-test.php) berechenbar bleibt. */
    --stat-grid: rgba(255, 255, 255, .07);
    --stat-axis: rgba(255, 255, 255, .22);
    --stat-bar: rgba(221, 255, 92, .62);
    --stat-area: rgba(221, 255, 92, .10);
    --stat-tip-border: rgba(255, 255, 255, .16);
    --map-b0: #2f3720;
    --map-b1: #5a5d2c;
    --map-b2: #7c8839;
    --map-b3: #a7bc48;
    --map-b4: #ddff5c;
    --map-none: #241a1e;
    --map-stroke: #14070a;
    --map-ink-b0: #ffffff;
    --map-ink-b1: #ffffff;
    --map-ink-b2: #14070a;
    --map-ink-b3: #14070a;
    --map-ink-b4: #14070a;
    --map-ink-none: #c7b3b7;
}

/* 4 ------------------------------------------------- Modus-Tokens: HELL */
[data-theme="light"] {
    color-scheme: light;

    --bg-base: #fbf7f4;
    --bg-gradient:
        radial-gradient(620px 620px at -8% -12%, rgba(213,7,27,.22), rgba(213,7,27,0) 70%),
        radial-gradient(520px 520px at 108% 34%, rgba(27,216,143,.18), rgba(27,216,143,0) 70%),
        radial-gradient(700px 700px at 22% 86%, rgba(221,255,92,.28), rgba(221,255,92,0) 70%),
        linear-gradient(150deg, #fbf7f4 0%, #f3ecef 45%, #efe6e9 100%);

    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-bg-strong: rgba(255, 255, 255, 0.82);
    --glass-border: rgba(255, 255, 255, 0.70);
    --glass-edge: linear-gradient(120deg, rgba(213,7,27,.10), rgba(255,255,255,0) 55%);
    --glass-shadow: 0 24px 60px rgba(50, 10, 18, .10);

    --text: #1b1719;
    --text-body: #4a4245;   /* 8,0:1 auf Glas */
    --text-muted: #6c6264;  /* 5,3:1 */
    --accent: var(--brand-800);
    --accent-ink: #ffffff;
    --hairline: rgba(27, 23, 25, 0.12);
    --row-bg: rgba(255, 255, 255, 0.50);
    --row-bg-hover: rgba(255, 255, 255, 0.85);

    --chart-stroke: var(--brand-800);
    --chart-fill: rgba(213, 7, 27, var(--chart-fill-alpha));
    --chart-fill-soft: rgba(161, 15, 31, .55);
    --chart-alt-stroke: var(--brand-800);
    --chart-alt-fill: rgba(213, 7, 27, .7);

    --stat-grid: rgba(27, 23, 25, .08);
    --stat-axis: rgba(27, 23, 25, .22);
    --stat-bar: rgba(161, 15, 31, .55);
    --stat-area: rgba(161, 15, 31, .09);
    --stat-tip-border: rgba(27, 23, 25, .14);
    --map-b0: #f6e2e4;
    --map-b1: #ecbcc1;
    --map-b2: #dd8b93;
    --map-b3: #bd3f4d;
    --map-b4: #a10f1f;
    --map-none: #f1eaec;
    --map-stroke: #ffffff;
    --map-ink-b0: #1b1719;
    --map-ink-b1: #1b1719;
    --map-ink-b2: #1b1719;
    --map-ink-b3: #ffffff;
    --map-ink-b4: #ffffff;
    --map-ink-none: #6c6264;
}

/* Ohne gespeicherte Wahl folgt die Seite dem System – Dunkel bleibt Default,
   Hell greift nur, wenn das System ausdrücklich Hell meldet und der Nutzer
   nichts anderes gewählt hat (theme.js setzt dann data-theme). */

/* 5 ---------------------------------------------------------------- Basis */
body {
    background: var(--bg-base);
    background-image: var(--bg-gradient);
    background-attachment: fixed;
    color: var(--text-body);
    font-family: var(--font-sans);
    font-weight: var(--weight-body);
}

h1, h2, h3 {
    color: var(--text);
    font-family: var(--font-display);
    font-weight: var(--weight-heading);
    letter-spacing: -.03em;
}

h1 { letter-spacing: -.04em; line-height: .96; }

a { color: var(--accent); }
a:hover { color: var(--text); }
/* Überschriften-Links (Turnierkarten, Berichte) bleiben in Überschriftenfarbe. */
h1 a, h2 a, h3 a { color: inherit; }

/* Die flächigen Sektionshintergründe aus style.css weichen dem Verlauf –
   die Glaskarten übernehmen die Flächenwirkung. */
.section,
.section--cream,
.section--dark { background: transparent; }

/* 6 ------------------------------------------------------- Glas-Grundform */
.glass,
.stat-panel,
.stat-table-wrap,
.content-card,
.stat-tile,
.stat-rival-callout,
.stat-roster-card,
.stat-history-list li,
.stat-school-index__item {
    position: relative;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow: var(--glass-shadow);
    color: var(--text-body);
    overflow: hidden;
}

/* Dezenter Farbverlauf an der Kante – liegt über der Fläche, nicht über Text. */
.glass::before,
.stat-panel::before,
.content-card::before {
    position: absolute;
    inset: 0;
    background: var(--glass-edge);
    content: "";
    pointer-events: none;
}
.glass > *,
.stat-panel > *,
.content-card > * { position: relative; }

.stat-panel { padding: 32px 34px; margin-bottom: 24px; }
.stat-table-wrap { border-radius: var(--radius-md); }
.stat-tile,
.stat-rival-callout { border-radius: var(--radius-md); padding: 22px 26px; }
.stat-history-list li,
.stat-school-index__item { border-radius: var(--radius-sm); }

/* 7 ------------------------------------------------------ Hero & Kennzahlen */
.page-hero,
.page-hero--results,
.page-hero--calendar,
.page-hero--detail { background: transparent; color: var(--text); }

.page-hero__inner > div:first-child {
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 40px;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur-strong));
    -webkit-backdrop-filter: blur(var(--glass-blur-strong));
    box-shadow: var(--glass-shadow);
}

.page-hero__inner > p,
.page-hero__inner > div > p { color: var(--text-body); }

.eyebrow,
.eyebrow--light {
    display: inline-flex;
    align-items: center;
    margin-bottom: 16px;
    padding: 6px 12px;
    border: 1px solid color-mix(in oklch, var(--accent) 35%, transparent);
    border-radius: var(--radius-pill);
    background: color-mix(in oklch, var(--accent) 12%, transparent);
    color: var(--accent);
    font-size: .7rem;
    font-weight: var(--weight-strong);
    letter-spacing: .12em;
}
.eyebrow::before { display: none; }

.kennzahlen { display: grid; grid-template-rows: repeat(3, 1fr); grid-template-columns: 1fr; gap: 14px; max-width: none; margin-top: 0; }

.kennzahl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
    gap: 20px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 22px 26px;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
}

/* Kennzahlen dominieren: groß, 700, tabellarische Ziffern. */
.kennzahl strong {
    color: var(--text);
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 3.4vw, 3.4rem);
    font-weight: var(--weight-heading);
    letter-spacing: -.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.kennzahl span {
    color: var(--text-muted);
    font-size: .7rem;
    font-weight: var(--weight-strong);
    letter-spacing: .12em;
}
.stat-tile strong {
    color: var(--text);
    font-size: 2.6rem;
    font-weight: var(--weight-heading);
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
}
.stat-tile span { color: var(--text-muted); font-weight: var(--weight-strong); }

/* 8 --------------------------------------------------------- Balkendiagramm */
.stat-bar-chart {
    height: 260px;
    gap: 14px;
    padding: 0;
    border-bottom: 1px solid var(--hairline);
}
.stat-bar-chart__col { gap: 8px; min-width: 30px; }

/* Füllung transparent, Kante in Vollfarbe – Hover hebt den Balken an. */
.stat-bar-chart__bar {
    border: 1px solid var(--chart-stroke);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    background: linear-gradient(180deg, var(--chart-fill), var(--chart-fill-soft));
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.stat-bar-chart__col:hover .stat-bar-chart__bar {
    background: linear-gradient(180deg, var(--chart-stroke), var(--chart-fill));
    transform: translateY(-4px);
    box-shadow: 0 12px 24px color-mix(in oklch, var(--chart-stroke) 35%, transparent);
}
.stat-bar-chart__bar--secondary {
    border-color: var(--chart-alt-stroke);
    background: var(--chart-alt-fill);
}
.stat-bar-chart__value {
    color: var(--text);
    font-size: 1rem;
    font-weight: var(--weight-heading);
    font-variant-numeric: tabular-nums;
}
.stat-bar-chart__label { color: var(--text-muted); font-size: .8rem; font-weight: var(--weight-strong); }
.stat-bar-chart__legend { color: var(--text-muted); font-weight: var(--weight-strong); }
.stat-bar-chart__swatch--primary { background: var(--chart-fill); border: 1px solid var(--chart-stroke); }
.stat-bar-chart__swatch--secondary { background: var(--chart-alt-fill); border: 1px solid var(--chart-alt-stroke); }

/* 8b ----------------------------------------- Statistik-Übersicht (Karten) */
/* /statistik und /statistik/landesfinale/{jahr}: Glas-Karten im Raster,
   Überschriften in der Karte, kompakte Zeilenlisten statt Tabellenoptik. */
.stat-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 24px 0 0;
}
.stat-hero__actions .button { min-height: 40px; padding: 6px 18px; font-size: .85rem; }
.kennzahl span small {
    display: block;
    margin-top: 6px;
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: var(--weight-body);
    letter-spacing: 0;
    text-transform: none;
}

/* Kennzahl-Kacheln so hoch wie die Hero-Karte, enger Anschluss an die Karten darunter. */
.stat-hero .page-hero__inner { align-items: stretch; min-height: 0; padding-block: 28px 20px; }
.stat-hero .kennzahlen { align-content: stretch; }
.stat-dash { padding-top: 0; }
.stat-dash__grid {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    align-items: start;
    gap: 20px;
}
.stat-dash__grid > .stat-panel { margin-bottom: 0; }
.stat-trend,
.stat-regions,
.stat-players,
.stat-dash__wide { grid-column: 1 / -1; }

.stat-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}
.stat-card__head h2 {
    margin: 0;
    font-size: clamp(1.45rem, 2.4vw, 2rem);
    line-height: 1.1;
}
.stat-card__eyebrow {
    display: block;
    margin-bottom: 8px;
    color: var(--accent);
    font-size: .68rem;
    font-weight: var(--weight-strong);
    letter-spacing: .14em;
    text-transform: uppercase;
}
.stat-card__lead { margin: 8px 0 0; color: var(--text-muted); font-size: .9rem; }
.stat-card__aside { align-self: flex-end; margin: 0; color: var(--text-muted); font-size: .8rem; text-align: right; }
.stat-card__aside .text-link { margin-top: 4px; font-size: .85rem; }
.stat-card__empty { margin: 0; color: var(--text-muted); }
.stat-card abbr[title],
.stat-panel abbr[title] { text-decoration: none; }

/* Teilnehmerzahlen: jeder Balken führt zur Jahresseite. */
.stat-trend__growth { margin: 0; text-align: right; }
.stat-trend__growth strong {
    display: block;
    color: var(--text);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: var(--weight-heading);
    letter-spacing: -.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.stat-trend__growth span { color: var(--text-muted); font-size: .75rem; }

.stat-trend__chart {
    height: 250px;
    margin: 0;
    padding: 0;
    gap: clamp(6px, 1.4vw, 16px);
    border-bottom: 0;
    list-style: none;
}
.stat-bar-chart__item { flex: 1 1 0; min-width: 30px; height: 100%; }
.stat-trend__chart .stat-bar-chart__col {
    align-items: stretch;
    min-width: 0;
    height: 100%;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
}
.stat-trend__chart .stat-bar-chart__value,
.stat-trend__chart .stat-bar-chart__label { text-align: center; }
.stat-trend__chart .stat-bar-chart__bar-stack { width: 100%; max-width: none; }
.stat-trend__chart .stat-bar-chart__bar { border-radius: 8px 8px 0 0; }
.stat-trend__chart .stat-bar-chart__col:focus-visible .stat-bar-chart__bar,
.stat-trend__chart .stat-bar-chart__col:hover .stat-bar-chart__bar {
    background: linear-gradient(180deg, var(--chart-stroke), var(--chart-fill));
    transform: translateY(-4px);
}
.stat-trend__chart .stat-bar-chart__col:hover .stat-bar-chart__label,
.stat-trend__chart .stat-bar-chart__col:focus-visible .stat-bar-chart__label { color: var(--text); }

/* Mädchenanteil: Balken mit Bezugsgröße 30 % (siehe Template). */
.stat-girls__rows { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.stat-girls__row {
    display: grid;
    grid-template-columns: 2.8rem minmax(0, 1fr) 3.8rem;
    align-items: center;
    gap: 12px;
}
.stat-girls__year {
    color: var(--text-muted);
    font-size: .82rem;
    font-weight: var(--weight-strong);
    font-variant-numeric: tabular-nums;
}
.stat-girls__track {
    height: 12px;
    border-radius: var(--radius-pill);
    background: var(--row-bg);
    overflow: hidden;
}
.stat-girls__fill {
    display: block;
    height: 100%;
    border: 1px solid var(--chart-alt-stroke);
    border-radius: var(--radius-pill);
    background: var(--chart-alt-fill);
}
.stat-girls__value {
    color: var(--text);
    font-size: .92rem;
    font-weight: var(--weight-heading);
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Ewige Tabellen: Zeilen als flache Streifen. */
.stat-ranking .stat-wk-tabs { margin-bottom: 14px; }
.stat-ranking .stat-wk-tabs .button { min-height: 32px; padding: 4px 14px; font-size: .78rem; }
.stat-rank-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
    font-variant-numeric: tabular-nums;
}
.stat-rank-table th {
    padding: 4px 14px 0;
    color: var(--text-muted);
    font-size: .66rem;
    font-weight: var(--weight-strong);
    letter-spacing: .1em;
    text-align: left;
    text-transform: uppercase;
}
.stat-rank-table td {
    padding: 10px 14px;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    background: var(--row-bg);
    transition: background var(--transition);
}
.stat-rank-table td:first-child { border-left: 1px solid var(--hairline); border-radius: 12px 0 0 12px; }
.stat-rank-table td:last-child { border-right: 1px solid var(--hairline); border-radius: 0 12px 12px 0; }
.stat-rank-table tbody tr:hover td { background: var(--row-bg-hover); }
.stat-rank-table th:nth-child(3),
.stat-rank-table td:nth-child(3) { text-align: center; }
.stat-rank-table th:last-child,
.stat-rank-table td:last-child { text-align: right; white-space: nowrap; }
.stat-rank-table__rank { width: 2.6rem; color: var(--accent); font-weight: var(--weight-heading); }
.stat-table-scroll { overflow-x: auto; }
.stat-rank-table__school a,
.stat-rank-table__school strong {
    display: block;
    color: var(--text);
    font-weight: var(--weight-strong);
    line-height: 1.3;
    text-decoration: none;
}
.stat-rank-table__school a:hover { color: var(--accent); }
.stat-rank-table__school span { display: block; margin-top: 2px; color: var(--text-muted); font-size: .74rem; }
.stat-rank-table__count { width: 4.5rem; color: var(--text); font-weight: var(--weight-heading); }
.stat-rank-table__medals { width: 6rem; color: var(--text-body); font-weight: var(--weight-strong); }

/* Regionen: zweispaltige Rangliste. */
.stat-regions__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.stat-regions__item {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    background: var(--row-bg);
    color: var(--text);
    text-decoration: none;
    transition: background var(--transition), border-color var(--transition);
}
.stat-regions__item:hover { border-color: color-mix(in oklch, var(--accent) 45%, transparent); background: var(--row-bg-hover); color: var(--text); }
.stat-regions__rank { color: var(--accent); font-weight: var(--weight-heading); font-variant-numeric: tabular-nums; }
.stat-regions__name { overflow: hidden; font-weight: var(--weight-strong); text-overflow: ellipsis; white-space: nowrap; }
.stat-regions__figures {
    display: flex;
    gap: 14px;
    color: var(--text-muted);
    font-size: .74rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.stat-regions__figures strong { color: var(--text); font-size: .95rem; font-weight: var(--weight-heading); }

.stat-players .stat-card__head { align-items: center; margin-bottom: 0; }

/* 8c ------------------------------------- Statistik-Grafiken (Entwurf 2026-09-14) */
/* /statistik nach den Design-Entwürfen „Statistikseite“: Hero mit gestuften
   Kennzahlen, SVG-Zeitreihen, Kreiskarte mit Kfz-Labels, Rekord-Kacheln,
   ewige Tabelle mit Sparklines, Small Multiples. Alle Maße stehen als
   SVG-Attribute im Markup (CSP), Farben nur über die Tokens --stat-* und
   --map-* aus §3/§4. Kontrast der Kartenlabels prüft
   tests/statistics/map-label-contrast-test.php. */
.stat-mono {
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 400;
    letter-spacing: .08em;
    color: var(--text-muted);
}
.stat-lead__eyebrow,
.stat-kpi__range,
.stat-records__head .stat-mono,
.stat-multiples__head .stat-mono,
.stat-map__legend > .stat-mono,
.stat-sources { text-transform: uppercase; }

.stat-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 15px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
    color: var(--text-body);
    font-size: .84rem;
    font-weight: var(--weight-strong);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.stat-pill--accent { border-color: transparent; background: var(--accent); color: var(--accent-ink); font-weight: var(--weight-heading); }

/* Hero: Titel links, Kennzahlen rechts in gestufter Hierarchie. */
.stat-lead { padding-block: 28px 0; color: var(--text); }
.stat-lead__panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: start;
    gap: clamp(28px, 4vw, 56px);
    padding: clamp(24px, 5vw, 64px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    background: var(--glass-bg-strong);
    backdrop-filter: blur(var(--glass-blur-strong));
    -webkit-backdrop-filter: blur(var(--glass-blur-strong));
    box-shadow: var(--glass-shadow);
}
.stat-lead__eyebrow { display: block; margin-bottom: 16px; }
.stat-lead h1 {
    margin: 0;
    color: var(--text);
    font-size: clamp(1.9rem, 4.2vw, 3.25rem);
    font-weight: var(--weight-heading);
    letter-spacing: -.025em;
    line-height: 1.04;
    text-wrap: pretty;
}
.stat-lead__pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; }
.stat-lead__kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.stat-kpi {
    padding: 22px 24px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: var(--glass-bg);
    color: var(--text-body);
}
.stat-kpi__value {
    display: block;
    color: var(--text);
    font-size: clamp(1.6rem, 2.6vw, 2.15rem);
    font-weight: var(--weight-heading);
    letter-spacing: -.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.stat-kpi__label { display: block; margin-top: 8px; font-size: .86rem; font-weight: 500; line-height: 1.35; }
.stat-kpi--lead {
    display: flex;
    grid-column: span 2;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding: 28px 30px;
    border-color: transparent;
    border-radius: var(--radius-lg);
    background: var(--accent);
    color: var(--accent-ink);
}
.stat-kpi--lead .stat-kpi__value { color: var(--accent-ink); font-size: clamp(2.6rem, 5vw, 4rem); letter-spacing: -.03em; }
.stat-kpi--lead .stat-kpi__label { font-size: .95rem; font-weight: var(--weight-strong); }
.stat-kpi--lead .stat-kpi__range { padding-bottom: 6px; color: var(--accent-ink); white-space: nowrap; }
.stat-kpi--row { display: flex; grid-column: span 2; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; }
.stat-kpi--row .stat-kpi__label { margin: 0; }
.stat-kpi__row-value { display: flex; align-items: baseline; gap: 12px; }
.stat-kpi--row .stat-kpi__value { font-size: 1.75rem; }

.stat-page { padding-top: 24px; }
.stat-page__stack { display: grid; gap: 24px; }
.stat-page__stack .stat-panel { margin-bottom: 0; padding: 26px; }
.stat-page h2 { margin: 0; color: var(--text); font-size: clamp(1.1rem, 1.6vw, 1.2rem); font-weight: var(--weight-heading); letter-spacing: -.01em; line-height: 1.2; }

/* Zeitreihen nebeneinander, stapeln ohne eigenen Breakpoint. */
.stat-series-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px; }
.stat-series__head,
.stat-records__head,
.stat-multiples__head,
.stat-ranking__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 16px;
    margin-bottom: 18px;
}
.stat-chart { position: relative; }
.stat-chart__svg,
.stat-map__svg { display: block; width: 100%; height: auto; overflow: visible; }
.stat-chart__grid { stroke: var(--stat-grid); stroke-width: 1; }
.stat-chart__axis { stroke: var(--stat-axis); stroke-width: 1; }
.stat-chart__tick,
.stat-chart__year,
.stat-chart__gap-label { fill: var(--text-muted); font-family: var(--font-mono); font-size: 11.5px; }
.stat-chart__gap-label { font-size: 11px; letter-spacing: .06em; }
.stat-chart__gap { opacity: .6; }
.stat-chart__gap-edge { stroke: var(--stat-axis); stroke-width: 1; stroke-dasharray: 3 4; }
.stat-hatch__line { stroke: var(--stat-axis); stroke-width: 1; }
.stat-hatch__ground { fill: var(--map-none); }
.stat-chart__bar { fill: var(--stat-bar); }
.stat-chart__bar--current { fill: var(--accent); }
.stat-chart__area { fill: var(--stat-area); }
.stat-chart__line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.stat-chart__dot { fill: var(--accent); stroke: var(--surface-solid); stroke-width: 2; }
.stat-chart__value { fill: var(--text); font-size: 12.5px; font-weight: var(--weight-strong); font-variant-numeric: tabular-nums; }
.stat-chart__hit rect { fill: transparent; cursor: pointer; }
.stat-chart__hit:focus { outline: none; }
.stat-chart__hit:hover rect,
.stat-chart__hit:focus-visible rect { fill: var(--row-bg); }
.stat-chart__hit:focus-visible rect { stroke: var(--accent); stroke-width: 2; }

.stat-tip {
    position: absolute;
    z-index: 6;
    min-width: 108px;
    max-width: 250px;
    padding: 9px 13px;
    border: 1px solid var(--stat-tip-border);
    border-radius: var(--radius-sm);
    background: var(--surface-solid);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
    color: var(--text);
    pointer-events: none;
    transform: translate(-50%, calc(-100% - 10px));
}
.stat-tip--start { transform: translate(0, calc(-100% - 10px)); }
.stat-tip--end { transform: translate(-100%, calc(-100% - 10px)); }
.stat-tip__title { display: block; color: var(--text-muted); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; }
.stat-tip__value { display: block; margin-top: 2px; font-size: .98rem; font-weight: var(--weight-heading); line-height: 1.25; }
.stat-tip__delta { display: block; margin-top: 1px; font-size: .76rem; font-weight: 500; }
.stat-tip__delta:empty { display: none; }

/* Kreiskarte: Flächen ab 640 px, Kachel-Kartogramm darunter. */
.stat-map { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.stat-map__card { display: grid; align-content: start; gap: 14px; }
.stat-map__stage { position: relative; width: 100%; max-width: 560px; margin-inline: auto; }
.stat-map__svg--tiles { display: none; max-width: 420px; margin-inline: auto; }
.stat-map__area path,
.stat-map__tile rect { fill: var(--map-b0); stroke: var(--map-stroke); stroke-width: 1; stroke-linejoin: round; transition: filter var(--transition); }
.stat-map__area--b1 path, .stat-map__area--b1 rect { fill: var(--map-b1); }
.stat-map__area--b2 path, .stat-map__area--b2 rect { fill: var(--map-b2); }
.stat-map__area--b3 path, .stat-map__area--b3 rect { fill: var(--map-b3); }
.stat-map__area--b4 path, .stat-map__area--b4 rect { fill: var(--map-b4); }
.stat-map__area--none path,
.stat-map__area--none rect { fill: url(#stat-map-hatch); }
.stat-map__swatch--b0 { background: var(--map-b0); }
.stat-map__swatch--b1 { background: var(--map-b1); }
.stat-map__swatch--b2 { background: var(--map-b2); }
.stat-map__swatch--b3 { background: var(--map-b3); }
.stat-map__swatch--b4 { background: var(--map-b4); }
.stat-map__swatch--none { border: 1px solid var(--stat-axis); background: repeating-linear-gradient(45deg, var(--stat-axis) 0 1px, var(--map-none) 1px 5px); }
.stat-map__area { cursor: pointer; }
.stat-map__area:focus { outline: none; }
.stat-map__area:hover path,
.stat-map__area:hover rect,
.stat-map__area.is-active path,
.stat-map__area.is-active rect { filter: brightness(1.18); }
.stat-map__area:focus-visible path,
.stat-map__area:focus-visible rect,
.stat-map__area.is-active path,
.stat-map__area.is-active rect { stroke: var(--text); stroke-width: 2; }
/* Kfz-Kürzel: sichtbar, aber dezent – Monospace, normales Gewicht, keine
   Umrandung, Farbe folgt dem Untergrund, blockiert keinen Hover/Klick. */
.stat-map__label {
    fill: var(--map-ink-b0);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .06em;
    pointer-events: none;
    user-select: none;
}
.stat-map__label--b1 { fill: var(--map-ink-b1); }
.stat-map__label--b2 { fill: var(--map-ink-b2); }
.stat-map__label--b3 { fill: var(--map-ink-b3); }
.stat-map__label--b4 { fill: var(--map-ink-b4); }
.stat-map__label--none { fill: var(--map-ink-none); }
.stat-map__leader { stroke: var(--text-muted); stroke-width: .7; pointer-events: none; }
.stat-map__anchor { fill: var(--text-muted); pointer-events: none; }
.stat-map__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.stat-map__scale { display: flex; margin: 0; padding: 0; list-style: none; }
.stat-map__scale li { display: grid; justify-items: center; gap: 5px; }
.stat-map__swatch { display: inline-block; flex: none; width: 14px; height: 14px; border-radius: 4px; }
.stat-map__scale .stat-map__swatch { width: 52px; height: 10px; border-radius: 0; }
.stat-map__none { display: inline-flex; align-items: center; gap: 7px; }
.stat-map__none .stat-map__swatch { width: 18px; height: 10px; border-radius: 0; }

.stat-map__list-card { display: flex; flex-direction: column; min-height: 0; }
.stat-map__list { margin: 16px 0 0; padding: 0 6px 0 0; list-style: none; }
.stat-map__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-bottom: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    color: var(--text);
    text-decoration: none;
    transition: background var(--transition);
}
.stat-map__row:hover,
.stat-map__row:focus-visible,
.stat-map__row.is-active { background: var(--row-bg-hover); color: var(--text); }
.stat-map__rank { flex: none; width: 24px; text-align: right; }
.stat-map__name { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: .88rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.stat-map__figures { flex: none; width: 76px; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }

@media (min-width: 1100px) {
    .stat-map { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
    .stat-map__list-card { position: relative; }
    .stat-map__list { position: absolute; inset: 64px 20px 20px 26px; overflow-y: auto; margin: 0; }
}

/* Rekord-Kacheln: Zahl oben, Satz darunter, Text wird nie gekürzt. */
.stat-records__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: stretch; gap: 16px; margin: 0; padding: 0; list-style: none; }
.stat-record {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 172px;
    padding: 24px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: var(--row-bg);
}
.stat-record__value { color: var(--accent); font-size: 2.5rem; font-weight: var(--weight-heading); letter-spacing: -.025em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-record__text { color: var(--text-body); font-size: .92rem; line-height: 1.45; text-wrap: pretty; }

/* Ewige Tabelle mit Verlauf. */
.stat-ranking__head .stat-wk-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.stat-ranking__head .stat-wk-tabs .button { min-height: 32px; padding: 4px 14px; font-size: .78rem; }
.stat-rank-table__gold { color: var(--accent); }
.stat-rank-table--sparks th:nth-child(3),
.stat-rank-table--sparks td:nth-child(3) { text-align: right; }
.stat-rank-table--sparks th:nth-child(4),
.stat-rank-table--sparks td:nth-child(4) { text-align: right; white-space: nowrap; }
.stat-rank-table--sparks .stat-rank-table__medals { font-family: var(--font-mono); }
.stat-rank-table__spark { width: 76px; }
.stat-spark { display: block; width: 60px; height: 16px; margin-left: auto; }
.stat-spark__bar { fill: var(--stat-axis); }
.stat-spark__bar--on { fill: var(--accent); }

/* Small Multiples: sechs Panels, gemeinsame Skala. */
.stat-multiples__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.stat-multiple { display: grid; align-content: start; padding: 14px 12px 10px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); }
.stat-multiple__title { color: var(--text); font-size: .86rem; font-weight: var(--weight-strong); }
.stat-multiple__sub { margin-top: 3px; font-size: .66rem; }
.stat-multiple__svg { display: block; width: 100%; height: auto; margin-top: 10px; }

.stat-sources { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 4px 4px 0; color: var(--text-muted); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; line-height: 1.5; }
.stat-sources .text-link { font-family: var(--font-sans); letter-spacing: 0; text-transform: none; }
.stat-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
    .stat-chart__bar { animation: stat-grow 520ms cubic-bezier(.2,.8,.2,1) both; transform-box: fill-box; transform-origin: bottom; }
    .stat-chart__line { stroke-dasharray: 1; animation: stat-draw 600ms cubic-bezier(.2,.8,.2,1) both; }
    .stat-map__area path { animation: stat-fade 420ms cubic-bezier(.2,.8,.2,1) both; }
}
@keyframes stat-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes stat-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes stat-fade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 1100px) {
    .stat-lead__panel { grid-template-columns: minmax(0, 1fr); }
    .stat-multiples__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
    .stat-lead { padding-top: 16px; }
    .stat-lead__panel { gap: 18px; padding: 24px 16px 20px; }
    .stat-lead__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .stat-kpi { padding: 12px 10px; border-radius: var(--radius-sm); }
    .stat-kpi--lead { grid-column: 1 / -1; padding: 20px; border-radius: var(--radius-md); }
    .stat-kpi--row { flex-direction: column-reverse; align-items: flex-start; justify-content: flex-end; grid-column: auto; gap: 0; padding: 12px 10px; }
    .stat-kpi__value,
    .stat-kpi--row .stat-kpi__value { font-size: 1.35rem; }
    .stat-kpi--lead .stat-kpi__value { font-size: 2.75rem; }
    .stat-kpi__label,
    .stat-kpi--row .stat-kpi__label { margin-top: 4px; font-size: .72rem; }
    .stat-kpi__more,
    .stat-kpi__range { display: none; }
    .stat-page__stack .stat-panel { padding: 20px 14px; }
    /* SVG-Text skaliert mit der Grafik: auf schmalen Bildschirmen größer
       setzen und jedes zweite Jahr ausblenden. */
    .stat-chart__tick,
    .stat-chart__year,
    .stat-chart__gap-label { font-size: 20px; }
    .stat-chart__value { font-size: 22px; }
    .stat-chart__year--minor { display: none; }
    .stat-map__svg--areas { display: none; }
    .stat-map__svg--tiles { display: block; }
    .stat-map__stage .stat-tip { position: static; margin-top: 12px; transform: none; }
    .stat-multiples__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat-rank-table__spark,
    .stat-rank-table--sparks th:last-child { display: none; }
}

/* ------------------------------------------ Jahresseite /statistik/landesfinale */
.stat-season-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; }
.stat-season-nav .button { min-height: 40px; padding: 6px 18px; font-size: .85rem; }

.stat-wk-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.stat-wk-jump a {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid color-mix(in oklch, var(--text) 22%, transparent);
    border-radius: var(--radius-pill);
    background: var(--row-bg);
    color: var(--text-body);
    font-size: .82rem;
    font-weight: var(--weight-strong);
    text-decoration: none;
}
.stat-wk-jump a:hover { background: var(--row-bg-hover); color: var(--text); }
.stat-wk-jump small { color: var(--text-muted); font-size: .74rem; font-variant-numeric: tabular-nums; }

.stat-compare { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.stat-compare th,
.stat-compare td { padding: 11px 12px; border-bottom: 1px solid var(--hairline); text-align: right; white-space: nowrap; }
.stat-compare thead th {
    padding-top: 0;
    color: var(--text-muted);
    font-size: .66rem;
    font-weight: var(--weight-strong);
    letter-spacing: .1em;
    text-transform: uppercase;
}
.stat-compare th:first-child,
.stat-compare td:first-child { padding-left: 0; text-align: left; }
.stat-compare tbody tr:last-child > * { border-bottom: 0; }
.stat-compare tbody th a { color: var(--text); font-weight: var(--weight-strong); text-decoration: none; }
.stat-compare tbody th a:hover { color: var(--accent); }
.stat-compare tbody th small { display: block; color: var(--text-muted); font-size: .72rem; font-weight: var(--weight-body); }
.stat-compare__bar { width: 34%; min-width: 9rem; }
.stat-compare__bar span { display: block; height: 10px; border-radius: var(--radius-pill); background: var(--row-bg); overflow: hidden; }
.stat-compare__bar span span { height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--chart-fill-soft), var(--chart-stroke)); }
.stat-compare__winner { max-width: 16rem; overflow: hidden; color: var(--text-body); text-align: left !important; text-overflow: ellipsis; }

.stat-wk { scroll-margin-top: 24px; }
.stat-wk__facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 0 26px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--hairline);
}
.stat-wk__facts div { display: flex; flex-direction: column-reverse; gap: 6px; padding: 0 clamp(12px, 2.4vw, 26px); }
.stat-wk__facts div:first-child { padding-left: 0; }
.stat-wk__facts div + div { border-left: 1px solid var(--hairline); }
.stat-wk__facts dt { color: var(--text-muted); font-size: .76rem; font-weight: var(--weight-strong); }
.stat-wk__facts dd {
    margin: 0;
    color: var(--text);
    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
    font-weight: var(--weight-heading);
    letter-spacing: -.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.stat-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.stat-podium li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--hairline);
    border-radius: 14px;
    background: var(--row-bg);
}
.stat-podium__place {
    display: grid;
    width: 2.2rem;
    height: 2.2rem;
    place-items: center;
    border-radius: 50%;
    background: var(--row-bg-hover);
    color: var(--text);
    font-weight: var(--weight-heading);
    font-variant-numeric: tabular-nums;
}
.stat-podium li.is-first .stat-podium__place { background: var(--brand-lime); color: #14070a; }
.stat-podium strong { display: block; color: var(--text); font-weight: var(--weight-strong); line-height: 1.3; }
.stat-podium strong a { color: inherit; text-decoration: none; }
.stat-podium strong a:hover { color: var(--accent); }
.stat-podium small { display: block; margin-top: 3px; color: var(--text-muted); font-size: .76rem; }

.stat-wk__details { margin-top: 22px; }
.stat-wk__details > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 2px;
    border-radius: var(--radius-pill);
    color: var(--accent);
    cursor: pointer;
    font-size: .88rem;
    font-weight: var(--weight-strong);
    list-style: none;
}
.stat-wk__details > summary::-webkit-details-marker { display: none; }
.stat-wk__details > summary:hover { color: var(--text); }
.stat-wk__details > summary span[aria-hidden] { display: inline-block; transition: transform var(--transition); }
.stat-wk__details[open] > summary span[aria-hidden] { transform: rotate(180deg); }
.stat-wk__details .stat-rank-table { margin-top: 6px; }
.stat-rank-table__muted td { opacity: .72; }
.stat-rank-table--standings th:last-child,
.stat-rank-table--standings td:last-child { text-align: left; white-space: normal; }
.stat-rank-table--standings .stat-rank-table__rank { width: 4.5rem; }

@media (max-width: 900px) {
    .stat-dash__grid { grid-template-columns: minmax(0, 1fr); }
    .stat-podium { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
    .stat-card__head { flex-wrap: wrap; }
    .stat-trend__growth { text-align: left; }
    .stat-trend__chart { height: 200px; }
    .stat-trend__chart .stat-bar-chart__value { font-size: .66rem; }
    .stat-trend__chart .stat-bar-chart__label { font-size: .66rem; }
    .stat-regions__list { grid-template-columns: minmax(0, 1fr); }
    .stat-rank-table th,
    .stat-rank-table td { padding-inline: 10px; }
    .stat-rank-table__medals { width: auto; }
    .stat-wk__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
    .stat-wk__facts div:nth-child(odd) { padding-left: 0; border-left: 0; }
    .stat-compare__bar { display: none; }
}

/* ----------------------------------------- Ergebnisse (/ergebnisse …) */
/* Archiv-Kacheln je Wettkampfklasse und die internen Ergebnislisten. */
.result-season__links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 18px; margin: 0; font-size: .85rem; }
.result-season__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.result-tile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    height: 100%;
    padding: 16px 18px;
    border: 1px solid var(--hairline);
    border-radius: 14px;
    background: var(--row-bg);
    color: var(--text);
    text-decoration: none;
    transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.result-tile:hover { border-color: color-mix(in oklch, var(--accent) 50%, transparent); background: var(--row-bg-hover); color: var(--text); transform: translateY(-2px); }
.result-tile__text { display: grid; gap: 2px; min-width: 0; }
.result-tile strong { font-size: 1.02rem; font-weight: var(--weight-heading); }
.result-tile small { color: var(--text-muted); font-size: .76rem; }
.result-tile__meta { margin-top: 6px; color: var(--text-body); font-size: .78rem; font-weight: var(--weight-strong); font-variant-numeric: tabular-nums; }
.result-tile__arrow {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: var(--weight-heading);
}
.result-season__sources { margin: 16px 0 0; color: var(--text-muted); font-size: .8rem; }
.result-season__sources a { color: var(--text-body); }
.result-season__sources a:hover { color: var(--accent); }

/* Kopf der Ergebnisseite: Wettkampfklassen desselben Jahres. */
.result-categories { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 22px 24px; border: 1px solid var(--glass-border); border-radius: var(--radius-lg); background: var(--glass-bg); }
.result-categories ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.result-categories a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    background: var(--row-bg);
    color: var(--text-body);
    font-size: .86rem;
    font-weight: var(--weight-strong);
    text-decoration: none;
}
.result-categories a small { color: var(--text-muted); font-size: .74rem; font-variant-numeric: tabular-nums; }
.result-categories a:hover { background: var(--row-bg-hover); color: var(--text); }
.result-categories a[aria-current="page"] { border-color: transparent; background: var(--accent); color: var(--accent-ink); }
.result-categories a[aria-current="page"] small { color: inherit; opacity: .75; }

.result-tabs {
    display: flex;
    gap: 6px;
    margin: 0 0 16px;
    padding: 6px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
    background: var(--glass-bg-strong);
    overflow-x: auto;
    scroll-margin-top: 16px;
    scrollbar-width: thin;
}
.result-tabs a {
    flex: 0 0 auto;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    color: var(--text-body);
    font-size: .86rem;
    font-weight: var(--weight-strong);
    text-decoration: none;
    white-space: nowrap;
}
.result-tabs a:hover { background: var(--row-bg-hover); color: var(--text); }
.result-tabs a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }

.result-panel { margin-bottom: 0; }
.result-rounds { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 18px; }
.result-rounds .button { min-height: 32px; padding: 4px 14px; font-size: .8rem; }
.result-note { margin: 16px 0 0; color: var(--text-muted); font-size: .8rem; line-height: 1.55; }

.result-table { width: 100%; border-collapse: collapse; font-size: .88rem; font-variant-numeric: tabular-nums; }
.result-table th,
.result-table td { padding: 9px 10px; border-bottom: 1px solid var(--hairline); text-align: center; white-space: nowrap; }
.result-table thead th {
    color: var(--text-muted);
    font-size: .66rem;
    font-weight: var(--weight-strong);
    letter-spacing: .08em;
    text-transform: uppercase;
}
.result-table thead th.is-official { color: var(--accent); }
.result-table tbody tr { transition: background var(--transition); }
.result-table tbody tr:hover { background: var(--row-bg); }
.result-table tbody tr:last-child > * { border-bottom: 0; }
.result-table abbr[title] { text-decoration: none; }
.result-table__rank { width: 3.2rem; color: var(--accent); font-weight: var(--weight-heading); }
.result-table__team { min-width: 12rem; text-align: left !important; white-space: normal !important; }
.result-table__team a,
.result-table__team strong { display: block; color: var(--text); font-weight: var(--weight-strong); line-height: 1.3; text-decoration: none; }
.result-table__team a:hover { color: var(--accent); }
.result-table__team span { display: block; margin-top: 2px; color: var(--text-muted); font-size: .74rem; }
.result-table__score { color: var(--text); font-weight: var(--weight-heading); }
.result-table__score.is-official { color: var(--accent); }
.result-table__note { color: var(--text-muted); font-style: italic; text-align: left !important; }
.result-table__sub { display: block; color: var(--text-muted); font-size: .68rem; font-weight: var(--weight-body); }
.result-table tr.is-muted td { opacity: .7; }
.result-table tr.is-podium .result-table__rank { color: var(--text); }
.result-table tr.is-podium:first-child .result-table__rank { color: var(--accent); }
.result-flag { margin-left: 3px; color: var(--accent); font-weight: var(--weight-heading); cursor: help; }

.result-pairings__score { font-size: .98rem; font-weight: var(--weight-heading); color: var(--text); white-space: nowrap; }
.result-pairings td.result-table__team:nth-child(4) { text-align: right !important; }
.result-pairings td.result-table__team:nth-child(4) a,
.result-pairings td.result-table__team:nth-child(4) strong { text-align: right; }

/* Fortschrittstabelle: farbige Ergebnisse je Runde, Text trägt die Information. */
.result-progress__cell { min-width: 3.6rem; padding: 6px 4px !important; }
.result-progress__cell span { display: block; line-height: 1.2; }
.result-progress__opp { color: var(--text-muted); font-size: .72rem; }
.result-progress__opp small { margin-left: 2px; font-size: .64rem; }
.result-progress__pts { color: var(--text); font-weight: var(--weight-heading); }
.result-progress__cell.is-win { background: color-mix(in oklch, var(--brand-mint) 16%, transparent); }
.result-progress__cell.is-draw { background: var(--row-bg-hover); }
.result-progress__cell.is-loss { background: color-mix(in oklch, var(--brand-600) 16%, transparent); }
.result-progress__cell.is-bye { background: var(--row-bg); }

.result-lineups { display: grid; gap: 14px; }
.result-lineup { padding: 14px 16px 6px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--row-bg); }
.result-lineup h3 { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 6px; font-size: 1rem; letter-spacing: 0; }
.result-lineup__rank { min-width: 2rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.result-lineup h3 .result-table__team { min-width: 0; }
.result-lineup__table th,
.result-lineup__table td { padding: 6px 8px; }
.result-lineup__result { min-width: 1.8rem; color: var(--text); font-weight: var(--weight-strong); }
.result-match__head { justify-content: space-between; }
.result-match__head .result-table__team { flex: 1 1 0; }
.result-match__away.result-table__team,
.result-match__away a,
.result-match__away strong,
.result-match__away span { text-align: right !important; }
.result-boards td.result-table__team:last-child,
.result-boards th.result-table__team:last-child { text-align: right !important; }

/* Mannschaftsseite: Kennzahlen der Turnierbilanz über Aufstellung und Kämpfen. */
.result-team__meta { margin: 6px 0 0; color: var(--text-muted); font-size: .85rem; }
.result-team__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 10px; margin: -6px 0 22px; }
.result-team__facts div { padding: 12px 14px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--row-bg); }
.result-team__facts dt { color: var(--text-muted); font-size: .68rem; font-weight: var(--weight-strong); letter-spacing: .08em; }
.result-team__facts dt abbr[title] { text-decoration: none; }
.result-team__facts dd { margin: 4px 0 0; color: var(--text); font-size: 1.35rem; font-weight: var(--weight-heading); font-variant-numeric: tabular-nums; }
.result-team__facts .is-official dd { color: var(--accent); }
.result-team__title { margin: 26px 0 10px; font-size: 1.05rem; letter-spacing: 0; }
.result-team__facts + .result-team__title { margin-top: 0; }

@media (max-width: 900px) {
    .result-season__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .result-categories { padding: 18px; }
}
@media (max-width: 620px) {
    .result-season__grid { grid-template-columns: minmax(0, 1fr); }
    .result-season__links { justify-content: flex-start; }
    .result-table th,
    .result-table td { padding: 8px 6px; }
    .result-table__team { min-width: 9rem; }
    .result-tabs { border-radius: 16px; }
}

/* Balkenbreiten in 1-%-Schritten (stat_width_class(), CSP: keine Inline-Styles). */
.stat-w-0 { width: 0%; }
.stat-w-1 { width: 1%; }
.stat-w-2 { width: 2%; }
.stat-w-3 { width: 3%; }
.stat-w-4 { width: 4%; }
.stat-w-5 { width: 5%; }
.stat-w-6 { width: 6%; }
.stat-w-7 { width: 7%; }
.stat-w-8 { width: 8%; }
.stat-w-9 { width: 9%; }
.stat-w-10 { width: 10%; }
.stat-w-11 { width: 11%; }
.stat-w-12 { width: 12%; }
.stat-w-13 { width: 13%; }
.stat-w-14 { width: 14%; }
.stat-w-15 { width: 15%; }
.stat-w-16 { width: 16%; }
.stat-w-17 { width: 17%; }
.stat-w-18 { width: 18%; }
.stat-w-19 { width: 19%; }
.stat-w-20 { width: 20%; }
.stat-w-21 { width: 21%; }
.stat-w-22 { width: 22%; }
.stat-w-23 { width: 23%; }
.stat-w-24 { width: 24%; }
.stat-w-25 { width: 25%; }
.stat-w-26 { width: 26%; }
.stat-w-27 { width: 27%; }
.stat-w-28 { width: 28%; }
.stat-w-29 { width: 29%; }
.stat-w-30 { width: 30%; }
.stat-w-31 { width: 31%; }
.stat-w-32 { width: 32%; }
.stat-w-33 { width: 33%; }
.stat-w-34 { width: 34%; }
.stat-w-35 { width: 35%; }
.stat-w-36 { width: 36%; }
.stat-w-37 { width: 37%; }
.stat-w-38 { width: 38%; }
.stat-w-39 { width: 39%; }
.stat-w-40 { width: 40%; }
.stat-w-41 { width: 41%; }
.stat-w-42 { width: 42%; }
.stat-w-43 { width: 43%; }
.stat-w-44 { width: 44%; }
.stat-w-45 { width: 45%; }
.stat-w-46 { width: 46%; }
.stat-w-47 { width: 47%; }
.stat-w-48 { width: 48%; }
.stat-w-49 { width: 49%; }
.stat-w-50 { width: 50%; }
.stat-w-51 { width: 51%; }
.stat-w-52 { width: 52%; }
.stat-w-53 { width: 53%; }
.stat-w-54 { width: 54%; }
.stat-w-55 { width: 55%; }
.stat-w-56 { width: 56%; }
.stat-w-57 { width: 57%; }
.stat-w-58 { width: 58%; }
.stat-w-59 { width: 59%; }
.stat-w-60 { width: 60%; }
.stat-w-61 { width: 61%; }
.stat-w-62 { width: 62%; }
.stat-w-63 { width: 63%; }
.stat-w-64 { width: 64%; }
.stat-w-65 { width: 65%; }
.stat-w-66 { width: 66%; }
.stat-w-67 { width: 67%; }
.stat-w-68 { width: 68%; }
.stat-w-69 { width: 69%; }
.stat-w-70 { width: 70%; }
.stat-w-71 { width: 71%; }
.stat-w-72 { width: 72%; }
.stat-w-73 { width: 73%; }
.stat-w-74 { width: 74%; }
.stat-w-75 { width: 75%; }
.stat-w-76 { width: 76%; }
.stat-w-77 { width: 77%; }
.stat-w-78 { width: 78%; }
.stat-w-79 { width: 79%; }
.stat-w-80 { width: 80%; }
.stat-w-81 { width: 81%; }
.stat-w-82 { width: 82%; }
.stat-w-83 { width: 83%; }
.stat-w-84 { width: 84%; }
.stat-w-85 { width: 85%; }
.stat-w-86 { width: 86%; }
.stat-w-87 { width: 87%; }
.stat-w-88 { width: 88%; }
.stat-w-89 { width: 89%; }
.stat-w-90 { width: 90%; }
.stat-w-91 { width: 91%; }
.stat-w-92 { width: 92%; }
.stat-w-93 { width: 93%; }
.stat-w-94 { width: 94%; }
.stat-w-95 { width: 95%; }
.stat-w-96 { width: 96%; }
.stat-w-97 { width: 97%; }
.stat-w-98 { width: 98%; }
.stat-w-99 { width: 99%; }
.stat-w-100 { width: 100%; }

/* 9 -------------------------------------------------------------- Tabellen */
.stat-table { color: var(--text-body); }
.stat-table th {
    color: var(--text-muted);
    font-size: .68rem;
    font-weight: var(--weight-strong);
    letter-spacing: .1em;
}
.stat-table th,
.stat-table td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--hairline);
}
.stat-table td { font-variant-numeric: tabular-nums; }
.stat-table tbody tr { transition: background var(--transition); }
.stat-table tbody tr:hover { background: var(--row-bg-hover); }
.stat-table td a { color: var(--text); font-weight: var(--weight-strong); }
.stat-table td a:hover { color: var(--accent); }
.stat-table__rank { color: var(--accent); font-weight: var(--weight-heading); }

/* 10 ------------------------------------------------- Buttons, Tabs, Links */
.stat-wk-tabs .button,
.button {
    border-radius: var(--radius-pill);
    font-weight: var(--weight-strong);
}
.button--primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.button--primary:hover { background: var(--accent); filter: brightness(1.08); }
.button--outline {
    border-color: var(--glass-border);
    background: var(--row-bg);
    color: var(--text-body);
}
.button--outline:hover { background: var(--row-bg-hover); color: var(--text); }
.button--highlight { background: var(--brand-lime); color: #14070a; }
.text-link { color: var(--accent); font-weight: var(--weight-strong); }
.muted, .stat-panel__note, .stat-history-list span { color: var(--text-muted); }

/* 11 ---------------------------------------------- Kopfzeile und Fußzeile */
.site-header {
    position: sticky;
    top: 0;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-bottom: 1px solid var(--glass-border);
    color: var(--text);
}
.site-header__main { min-height: 76px; }
.site-header__nav-shell { border-top: 1px solid var(--glass-border); }
.main-nav__link { color: var(--text-body); border-bottom: 0; border-radius: var(--radius-pill); font-weight: var(--weight-strong); }
.main-nav__link:hover { background: var(--row-bg-hover); color: var(--text); }
.main-nav__link.is-active { background: var(--accent); color: var(--accent-ink); }
.main-nav__link::after { display: none; }
.nav-dropdown__panel {
    border-top: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: var(--glass-bg-strong);
    backdrop-filter: blur(var(--glass-blur));
    color: var(--text-body);
}
.nav-dropdown__panel a { color: var(--text-body); }
.nav-dropdown__panel a:hover { background: var(--row-bg-hover); color: var(--text); }
.brand__text span { color: var(--text-muted); }

.partner-section { background: transparent; border-top: 1px solid var(--hairline); }
.partner-logo { border: 1px solid var(--glass-border); border-radius: var(--radius-md); background: var(--glass-bg); color: var(--text-body); }
.site-footer { background: var(--glass-bg-strong); backdrop-filter: blur(var(--glass-blur)); border-top: 1px solid var(--glass-border); color: var(--text-body); }
.site-footer h2 { color: var(--accent); }
.site-footer a:hover { color: var(--text); }

/* 12 --------------------------------------------------------- Themenschalter */
.theme-toggle {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
    padding: 0 14px;
    background: var(--row-bg);
    color: var(--text-body);
    cursor: pointer;
    font-size: .78rem;
    font-weight: var(--weight-strong);
    transition: background var(--transition), color var(--transition);
}
.theme-toggle:hover { background: var(--row-bg-hover); color: var(--text); }
.theme-toggle__icon { font-size: .95rem; line-height: 1; }
[data-theme="light"] .theme-toggle__label-dark,
.theme-toggle__label-light { display: none; }
[data-theme="light"] .theme-toggle__label-light { display: inline; }

/* 13 ------------------------------------ Portal-Tokens und Alt-Tokens */
/* style.css färbt viele Komponenten über „hell gedachte“ Variablen
   (--color-ink als Text, --color-cream als Fläche …). Im Dunkelmodus werden
   sie hier umgelegt, im Hellmodus gelten wieder die Originalwerte.
   --color-white und --color-forest-900 bleiben unangetastet: beide dienen
   zugleich als Fläche UND als Schrift und werden gezielt in §14–§19 ersetzt. */
:root {
    --surface-sunken: rgba(255, 255, 255, 0.045);
    --surface-solid: #211015;
    --field-bg: rgba(255, 255, 255, 0.06);
    --field-text: var(--text);
    --field-border: #8f8386;   /* 4,6:1 gegen die Glasfläche, WCAG 1.4.11 */
    --focus-halo: #14070a;

    --color-ink: #ffffff;
    --color-muted: var(--text-muted);
    --color-line: var(--hairline);
    --color-cream: var(--row-bg);
    --color-paper: var(--row-bg);
    --color-error: #ff8a95;
    --color-field-border: var(--field-border);
    --shadow-card: var(--glass-shadow);
}

[data-theme="light"] {
    --surface-sunken: rgba(49, 8, 17, 0.035);
    --surface-solid: #ffffff;
    --field-bg: #ffffff;
    --field-text: #292425;
    --field-border: #82897f;
    --focus-halo: #310811;

    --color-ink: #292425;
    --color-muted: #6c6264;
    --color-line: #dfd5d6;
    --color-cream: #f2f3ef;
    --color-paper: #fffefd;
    --color-error: #b30d1c;
    --color-field-border: #82897f;
    --shadow-card: 0 22px 65px rgba(36, 5, 11, .12);
}

/* Dunkle Markenflächen mit eigener heller Schrift bleiben in BEIDEN Modi dunkel.
   Die Tokens werden dort lokal auf die Dunkelwerte gesetzt, damit Links,
   Buttons und Beschriftungen im Inneren auch im Hellmodus lesbar bleiben. */
.action-card,
.form-sidebar,
.guestbook-form-card,
.guide-note,
.sponsor-cta,
.page-hero--photo,
.team-card__heading,
.player-card__heading,
.public-registration-table thead {
    color-scheme: dark;
    --text: #ffffff;
    --text-body: #ded3d5;
    --text-muted: #c7b3b7;
    --accent: var(--brand-lime);
    --accent-ink: #14070a;
    --hairline: rgba(255, 255, 255, 0.12);
    --row-bg: rgba(255, 255, 255, 0.05);
    --row-bg-hover: rgba(255, 255, 255, 0.12);
    --glass-bg: rgba(20, 20, 25, 0.60);
    --glass-bg-strong: rgba(20, 20, 25, 0.70);
    --glass-border: rgba(255, 255, 255, 0.10);
    --focus-halo: #14070a;
    --color-ink: #ffffff;
    --color-muted: #c7b3b7;
    --color-error: #ff8a95;
}

/* Viele Listeneinträge: Glasfarbe ja, Weichzeichner nein. Hunderte
   backdrop-filter-Flächen über einem fixierten Hintergrund ruckeln beim
   Scrollen; hinter den Karten liegt ohnehin nur ein weicher Verlauf. */
.stat-history-list li,
.stat-school-index__item,
.stat-table-wrap,
.stat-roster-card,
.stat-tile {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Tabelle im Panel: keine zweite Glasfläche in der ersten. */
.stat-panel .stat-table-wrap {
    border-color: var(--hairline);
    background: transparent;
    box-shadow: none;
}
.stat-panel > .stat-table-wrap:first-child { margin-top: 0; }
.stat-panel .stat-wk-tabs { margin-bottom: 22px; }
.stat-rival-callout--favorite { border-left: 4px solid var(--chart-alt-stroke); }
.stat-rival-callout--nemesis { border-left: 4px solid var(--brand-600); }
.stat-school-index__search label { color: var(--text-muted); }

/* 14 ------------------------------------------------------------ Flächen */
/* Karten mit neutralem Rundum-Rahmen: Fläche, Rahmen und Schrift. */
.stats-strip,
.quick-card,
.tournament-card,
.news-card,
.news-list-card,
.open-tournament-teaser,
.news-filter-panel,
.region-archive__item,
.form-card,
.draft-panel,
.team-card,
.player-card,
.external-event-card,
.calendar-source-grid a,
.result-year-card,
.result-link-grid a,
.guestbook-card,
.guestbook-empty,
.stat-toggle-hint,
.public-registration-count,
.public-registration-empty,
.scope-tabs a {
    border-color: var(--glass-border);
    background: var(--glass-bg);
    color: var(--text-body);
}

/* Karten mit farbiger Akzentkante: nur Fläche und Schrift, die Kante bleibt. */
.intro-panel,
.filter-panel,
.region-info-card,
.registration-form,
.editorial-note,
.resource-callout,
.article-source,
.success-card,
.error-card,
.sponsor-pitch {
    background: var(--glass-bg);
    color: var(--text-body);
}
.editorial-note,
.resource-callout {
    border-color: var(--glass-border);
    border-left-color: var(--brand-600);
}

.empty-state {
    border-color: color-mix(in oklch, var(--text-muted) 55%, transparent);
    background: var(--glass-bg);
    color: var(--text-body);
}

.quick-grid { border-color: var(--glass-border); }
.quick-card { border-color: var(--hairline); }
.stats-strip__grid > *,
.stats-strip__grid > *:first-child { border-color: var(--hairline); }
.stats-strip__grid a strong { color: #100608; }

.cockpit-nav {
    border-bottom-color: var(--glass-border);
    background: var(--glass-bg-strong);
    box-shadow: none;
}
.cockpit-nav a { color: var(--text-body); }
.cockpit-nav a:hover,
.cockpit-nav a:focus-visible { background: var(--row-bg-hover); color: var(--text); }

.scope-tabs a:hover,
.scope-tabs a.is-active {
    border-color: transparent;
    background: var(--accent);
    color: var(--accent-ink);
}

.calendar-source-grid a:hover,
.result-link-grid a:hover {
    border-color: var(--accent);
    background: var(--row-bg-hover);
    color: var(--text);
}
.calendar-source-grid a:hover p { color: var(--text-muted); }

.guestbook-card__mark { color: color-mix(in oklch, var(--text) 7%, transparent); }

/* Trennlinien, die in style.css als feste Hellwerte stehen. */
.tournament-card__footer,
.team-card__options,
.team-card__contact,
.player-rating-tools,
.rating-results,
.player-rating-fields,
.school-manual-fields,
.external-event-card__actions,
.result-year-card__meta,
.guestbook-card footer,
.news-list-card__date,
.public-registration-group,
.public-registration-table-wrap,
.public-registration-table tbody tr + tr,
.public-registration-group[open] summary {
    border-color: var(--hairline);
}

/* 15 --------------------------------------------------- Vertiefte Flächen */
.player-rating-tools,
.player-rating-fields,
.school-manual-fields,
.rating-results,
.result-link-grid,
.result-year-card > header,
.result-year-card > footer,
.external-event-card__actions,
.form-consent,
.confirmation-code,
.error-details pre,
.public-registration-group summary,
.stat-roster-card > header,
.stat-history-list__teams li,
.school-selected {
    background: var(--surface-sunken);
    color: var(--text-body);
}

.rating-result {
    border-color: var(--glass-border);
    background: var(--glass-bg);
    color: var(--text-body);
}
.rating-result.is-highlighted,
.public-registration-group summary:hover,
.public-registration-table tbody tr:hover { background: var(--row-bg-hover); }

.school-selected,
.confirmation-code { border-color: var(--accent); }

/* 16 ----------------------------------------------------------- Formulare */
.form-field input,
.form-field select,
.form-field textarea,
.stat-school-index__search input {
    border: 1px solid var(--field-border);
    background: var(--field-bg);
    color: var(--field-text);
}
.form-field input::placeholder,
.form-field textarea::placeholder,
.stat-school-index__search input::placeholder { color: var(--text-muted); opacity: 1; }
.form-field select option { background: var(--surface-solid); color: var(--field-text); }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 6px var(--focus-halo);
}
/* Gegenring des globalen Doppel-Fokusrings aus style.css: im Dunkelmodus
   dunkel wie der Grund, im Hellmodus unverändert #310811. */
:focus-visible { box-shadow: 0 0 0 7px var(--focus-halo); }

.form-field--error input,
.form-field--error select,
.form-field--error textarea {
    border-color: var(--color-error);
    background: color-mix(in oklch, var(--color-error) 10%, var(--field-bg));
}
.player-rating-fields input[readonly] { background: var(--surface-sunken); color: var(--text-muted); }

.form-field label,
.form-section > legend,
.withdrawal-form legend,
.team-card__checkbox,
.team-card__contact-summary,
.category-legend strong { color: var(--text); }

.form-consent input,
.team-card__checkbox input { accent-color: var(--accent); }

/* Gästebuch: Eingabefelder bleiben auf der dunklen Karte bewusst weiß. */
.guestbook-form .form-field input,
.guestbook-form .form-field textarea { color: #292425; }
.guestbook-form .form-field input::placeholder,
.guestbook-form .form-field textarea::placeholder { color: #6c6264; }

.rating-lookup-button { border-color: var(--accent); color: var(--accent); }
.rating-lookup-button:hover { background: var(--accent); color: var(--accent-ink); }

/* 17 ------------------------------------------------------------- Schrift */
.prose p,
.prose li,
.article-body p,
.guestbook-card > p,
.region-menu__district a,
.page-hero__inner > p,
.detail-hero p,
.detail-hero__facts,
.article-hero p,
.site-footer a {
    color: var(--text-body);
}

.brand,
.brand--footer .brand__text strong,
.section--dark,
.section-heading--light h2,
.page-hero h1,
.article-hero h1,
.detail-hero__facts strong,
.stats-strip__grid strong,
.region-menu__district h3,
.region-info-card > strong,
.region-contact-list strong,
.process-list strong,
.facts-grid dd,
.player-rating-tools strong,
.news-list-card__date time,
.public-registration-group summary strong,
.public-registration-table td:nth-child(2),
.stat-history-list strong,
.stat-rival-callout strong,
.stat-school-index__item strong,
.stat-school-index__item a,
.confirmation-code strong,
.tournament-kind,
.meisterschaften-quicklinks .content-card strong,
.open-tournament-teaser strong,
.text-link--light,
.site-view-counter strong {
    color: var(--text);
}
.stats-strip__grid a strong { color: #100608; }

/* Links, Kicker und Kennziffern in Bordeaux: auf dunklem Grund nur ~4:1 –
   dort Limette, im Hellmodus das dunklere Bordeaux (7,2:1). */
.prose a:not(.button),
.section-heading__note,
.section-heading--light .section-heading__note,
.tournament-card__footer a:not(.button),
.tournament-card h3 a:hover,
.news-card__meta span,
.news-card a:not(.button),
.pin-badge,
.open-tournament-teaser__date,
.results-heading > a,
.empty-state > span,
.facts-grid dt,
.process-list li > span,
.region-menu__topline > a,
.form-consent a:not(.button),
.rating-source-note a:not(.button),
.school-not-found-toggle,
.guestbook-card footer strong,
.guestbook-empty > span,
.team-card__contact-summary::before,
.error-card__code,
.public-registration-count,
.public-registration-table td:last-child strong,
.news-list-card a:not(.button),
.form-help-links a:not(.button),
.external-event-card__actions > a:not(.button),
.calendar-source-grid span,
.calendar-source-grid small,
.result-year-card__meta strong,
.result-year-card > footer a:not(.button),
.article-source a:not(.button),
.region-archive__links a:not(.button),
.breadcrumb a,
.article-hero__inner > a,
.article-hero__meta span {
    color: var(--accent);
}
.public-registration-table td:last-child strong { background: color-mix(in oklch, var(--accent) 14%, transparent); }
/* Kachel-Links stehen teils in .prose (Turnier-Downloads) – dort keine Linkfarbe. */
.result-link-grid a,
.calendar-source-grid a { color: var(--text-body); }
.page-hero__inner > div:first-child h1 + p { margin-top: 18px; }

.breadcrumb,
.detail-status-row > span:last-child,
.verified-note,
.article-hero__meta { color: var(--text-muted); }

.text-link--light:hover { color: var(--accent); }
.site-footer__bottom { border-top-color: var(--hairline); }
.site-view-counter { border-color: var(--glass-border); color: var(--text-muted); }
.partner-logo--niggemann { color: var(--text); }

/* 18 ------------------------------------------------ Status, Hinweise, Chips */
/* Im Hellmodus bleiben die abgestimmten Originalfarben aus style.css.
   Im Dunkelmodus: eingefärbte, transparente Fläche mit heller Schrift. */
:root:not([data-theme="light"]) .status { background: rgba(255, 255, 255, .1); color: #e6dcde; }
:root:not([data-theme="light"]) .status--anmeldung-offen { background: var(--brand-lime); color: #100608; }
:root:not([data-theme="light"]) .status--termin-bestaetigt { background: rgba(27, 216, 143, .18); color: #8ff0c6; }
:root:not([data-theme="light"]) .status--vormerken { background: rgba(240, 180, 60, .18); color: #ffd58a; }
:root:not([data-theme="light"]) .status--planung { background: rgba(150, 160, 230, .18); color: #cdd2ff; }
:root:not([data-theme="light"]) .status--abgeschlossen { background: rgba(255, 255, 255, .1); color: #d8d0d2; }
:root:not([data-theme="light"]) .status--meldeschluss { background: rgba(237, 24, 48, .22); color: #ffb3bb; }
:root:not([data-theme="light"]) .status--extern { background: rgba(90, 170, 220, .18); color: #a9d8f2; }

:root:not([data-theme="light"]) .alert--error,
:root:not([data-theme="light"]) .error-summary { background: rgba(237, 24, 48, .16); color: #ffb3bb; }
:root:not([data-theme="light"]) .error-summary a { color: #ffb3bb; }
:root:not([data-theme="light"]) .alert--info { background: rgba(90, 170, 220, .14); color: #a9d8f2; }
:root:not([data-theme="light"]) .alert--warning { background: rgba(240, 180, 60, .14); color: #ffd58a; }
:root:not([data-theme="light"]) .alert--success { background: rgba(27, 216, 143, .14); color: #8ff0c6; }
:root:not([data-theme="light"]) .alert span { color: var(--text-body); }
:root:not([data-theme="light"]) .draft-resume { background: rgba(90, 170, 220, .14); }
:root:not([data-theme="light"]) .draft-resume p { color: var(--text-body); }

:root:not([data-theme="light"]) .tournament-kind { background: rgba(255, 255, 255, .1); }
:root:not([data-theme="light"]) .tournament-kind--cup { background: rgba(240, 180, 60, .18); color: #ffd58a; }
:root:not([data-theme="light"]) .tournament-kind--privat { background: rgba(90, 170, 220, .18); color: #a9d8f2; }
:root:not([data-theme="light"]) .tournament-kind--sonstig { background: rgba(27, 216, 143, .18); color: #8ff0c6; }

:root:not([data-theme="light"]) .region-archive__badge { background: rgba(255, 255, 255, .1); color: var(--text); }
:root:not([data-theme="light"]) .region-archive__item--extern .region-archive__badge { background: rgba(90, 170, 220, .18); color: #a9d8f2; }
:root:not([data-theme="light"]) .region-archive__item--bericht .region-archive__badge { background: rgba(240, 180, 60, .18); color: #ffd58a; }

:root:not([data-theme="light"]) .external-calendar-notice { border-color: rgba(27, 216, 143, .3); background: rgba(27, 216, 143, .1); }
:root:not([data-theme="light"]) .external-calendar-notice p { color: var(--text-body); }
:root:not([data-theme="light"]) .external-event-card__meta span { background: rgba(255, 255, 255, .08); color: var(--text-body); }
:root:not([data-theme="light"]) .article-source > span { color: #8ff0c6; }

:root:not([data-theme="light"]) .player-count-badge { background: rgba(237, 24, 48, .18); color: #ffb3bb; }
:root:not([data-theme="light"]) .player-remove-button { border-color: rgba(255, 138, 149, .45); background: rgba(237, 24, 48, .14); color: #ffb3bb; }
:root:not([data-theme="light"]) .player-remove-button:hover { border-color: #ff8a95; background: rgba(237, 24, 48, .28); }
:root:not([data-theme="light"]) .team-card__contact-summary:focus-visible { outline-color: var(--brand-lime); }
:root:not([data-theme="light"]) .error-summary:focus { outline-color: var(--brand-lime); }

/* 19 --------------------------------------------------------------- Heroes */
/* Artikelkopf wie .page-hero: Verlauf statt Farbfläche,
   Inhalt als Glaskarte. Foto-Heroes behalten ihr dunkles Scrim (Insel, §13). */
.article-hero { background: transparent; color: var(--text); }
.page-hero::after,
.article-hero::after { display: none; }
.page-hero--photo::before { display: block; }

.article-hero__inner,
.page-hero--detail:not(.page-hero--photo) .detail-hero > div:first-child {
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: clamp(26px, 4vw, 40px);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur-strong));
    -webkit-backdrop-filter: blur(var(--glass-blur-strong));
    box-shadow: var(--glass-shadow);
}
.article-hero__inner { margin-block: clamp(28px, 5vw, 56px); }

.button--outline-light {
    border-color: color-mix(in oklch, var(--text) 45%, transparent);
    color: var(--text);
}
.button--outline-light:hover { border-color: var(--text); }

/* In der Turnierseite stehen die Kennzahlen unter dem Titel – dort
   nebeneinander statt der gestapelten Statistik-Variante aus §7. */
.detail-hero .kennzahlen {
    grid-template-rows: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 620px;
    margin-top: 24px;
}
.detail-hero .kennzahl { flex-direction: column-reverse; align-items: flex-start; gap: 6px; padding: 16px 18px; }
.detail-hero .kennzahl strong { font-size: clamp(1.7rem, 2.6vw, 2.2rem); }

/* 20 ------------------------------------------- Kopfzeile auf Mobilgeräten */
/* --glass-border ist im Hellmodus weiß – für Schaltflächen ohne Füllung zu schwach. */
.theme-toggle,
.button--outline { border-color: color-mix(in oklch, var(--text) 22%, transparent); }
.site-header__cta .theme-toggle { min-height: 40px; }

@media (max-width: 840px) {
    /* Wie in style.css: mobil klebt der Kopf nicht, sonst frisst er Platz. */
    .site-header { position: relative; }
    .menu-toggle { border-color: var(--glass-border); color: var(--text); }
    .main-nav {
        border-bottom: 1px solid var(--glass-border);
        background: var(--surface-solid);
    }
    .main-nav__link {
        border-radius: 0;
        border-bottom: 1px solid var(--hairline);
        color: var(--text-body);
    }
    .main-nav__link:hover,
    .main-nav__link.is-active {
        border-bottom-color: var(--hairline);
        background: transparent;
        color: var(--accent);
    }
    .nav-dropdown__panel {
        border: 0;
        border-radius: 0;
        background: var(--row-bg);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        color: var(--text-body);
    }
    .nav-dropdown__panel a { color: var(--text-body); }
    .nav-dropdown__panel a:hover { background: var(--row-bg-hover); color: var(--accent); }
}

/* 20a ------------------------ Schulfinder und Ansprechpartner (Kreis-Einstieg) */
.region-finder { display: grid; gap: 14px; }
.region-finder > * { max-width: 780px; }
.region-finder__card { padding: clamp(22px, 4vw, 34px); }
.region-finder__card h2 { margin-bottom: 0; }
.region-finder__hint { margin: 0; color: var(--text-muted); font-size: .9rem; }
.school-finder { display: grid; gap: 14px; margin-top: 16px; }
.school-finder .button { justify-self: start; }
.school-finder .form-field { margin: 0; }
.region-contact-card {
    margin-top: 26px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: clamp(20px, 3vw, 28px);
    background: var(--glass-bg);
}
.region-contact-card--lead { margin-top: 0; border-left: 4px solid var(--accent); }
.region-contact-card__lead { margin: 0 0 18px; color: var(--text); }
.region-contact-card h3 { margin: 0 0 14px; font-size: 1.25rem; }
.region-contact-card .region-contact-list { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.region-contact-card p { color: var(--text-body); }
.region-contact-card__organizers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin: 22px 0 0;
    border-top: 1px solid var(--hairline);
    padding-top: 18px;
    font-size: .86rem;
}
@media (min-width: 841px) {
    .meisterschaften-quicklinks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Brotkrümel (partials/breadcrumb.php): geordnete Liste statt loser Spans. */
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; list-style: none; }
.breadcrumb li { display: inline-flex; gap: 8px; min-width: 0; }
.breadcrumb li + li::before { color: var(--text-muted); content: "/"; }
.breadcrumb [aria-current="page"] { overflow-wrap: anywhere; color: var(--text-body); }
.breadcrumb--page { margin: 22px 0 0; }

/* 20b ------------------------- Kopfzeile in einer Zeile (Kreis-Einstieg B/C) */
/* Logo | Navigation | Themenschalter | „Mannschaft anmelden“. Hauptpunkte sind
   Links; das Untermenü öffnet über den Pfeil-Button (Klick/Tastatur) und am
   Desktop zusätzlich per Hover. Bis 1279px klappt die Navigation hinter den
   Menü-Button (siehe COLLAPSED_NAV_QUERY in navigation.js). */
html { scroll-padding-top: 100px; }
.site-header__main { gap: 18px; min-height: 76px; }
.site-header .main-nav {
    flex: 1 1 auto;
    min-height: 76px;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
.site-header .main-nav__link {
    min-height: 40px;
    padding: 0 13px;
    font-size: .84rem;
    white-space: nowrap;
}
.site-header .main-nav__link:hover { transform: none; }
.nav-dropdown {
    position: relative;
    align-items: center;
    border-radius: var(--radius-pill);
}
.nav-dropdown .nav-dropdown__link { padding-right: 4px; }
.nav-dropdown__toggle {
    display: inline-flex;
    width: 30px;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-pill);
    padding: 0;
    background: transparent;
    color: var(--text-body);
    cursor: pointer;
    font: inherit;
    font-size: .95rem;
    line-height: 1;
}
.nav-dropdown__toggle:hover { background: var(--row-bg-hover); color: var(--text); }
.nav-dropdown__chevron {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--transition);
}
.nav-dropdown.is-open .nav-dropdown__chevron { transform: translateY(2px) rotate(225deg); }
/* Aktiver Bereich: Link und Pfeil bilden gemeinsam eine Pille. */
.nav-dropdown.is-active { background: var(--accent); }
.nav-dropdown.is-active .main-nav__link,
.nav-dropdown.is-active .nav-dropdown__toggle { background: transparent; color: var(--accent-ink); }
/* Im Kopf mit backdrop-filter greift ein zweiter Blur nicht – daher deckend. */
.nav-dropdown__panel { top: 100%; left: 0; background: var(--surface-solid); box-shadow: var(--glass-shadow); }
@media (hover: hover) and (min-width: 1181px) {
    .nav-dropdown:hover .nav-dropdown__panel { display: block; }
}
.site-header__register-short { display: none; }

@media (max-width: 1279px) {
    html { scroll-padding-top: 90px; }
    .menu-toggle {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        border: 1px solid var(--glass-border);
        border-radius: var(--radius-sm);
        padding: 9px 12px;
        background: transparent;
        color: var(--text);
        cursor: pointer;
        font-size: .8rem;
        font-weight: 800;
    }
    .menu-toggle__bars, .menu-toggle__bars::before, .menu-toggle__bars::after { display: block; width: 18px; height: 2px; background: currentColor; content: ""; }
    .menu-toggle__bars { position: relative; }
    .menu-toggle__bars::before { position: absolute; top: -6px; }
    .menu-toggle__bars::after { position: absolute; top: 6px; }
    /* P11: Der Themenschalter bleibt neben dem Menü-Knopf sichtbar. */
    .site-header__cta { display: flex; }
    .site-header .main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        display: none;
        width: 100%;
        max-height: calc(100vh - 90px);
        overflow-y: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        border-bottom: 1px solid var(--glass-border);
        padding: 10px 14px 24px;
        background: var(--surface-solid);
    }
    .site-header .main-nav.is-open { display: flex; }
    .site-header .main-nav__link {
        min-height: 52px;
        justify-content: flex-start;
        border: 0;
        border-bottom: 1px solid var(--hairline);
        border-radius: 0;
        padding: 0 9px;
        color: var(--text-body);
    }
    .site-header .main-nav__link:hover,
    .site-header .main-nav__link.is-active,
    .nav-dropdown.is-active .main-nav__link { background: transparent; color: var(--accent); }
    .nav-dropdown { display: grid; grid-template-columns: minmax(0, 1fr) 52px; position: static; border-radius: 0; }
    .nav-dropdown.is-active { background: transparent; }
    .nav-dropdown .nav-dropdown__link { padding-right: 9px; }
    .nav-dropdown__toggle,
    .nav-dropdown.is-active .nav-dropdown__toggle {
        width: 52px;
        min-height: 52px;
        border-bottom: 1px solid var(--hairline);
        border-radius: 0;
        color: var(--text-body);
    }
    .nav-dropdown__panel {
        position: static;
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
        border: 0;
        border-radius: 0;
        padding: 4px 9px 12px;
        background: var(--row-bg);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        color: var(--text-body);
    }
    .nav-dropdown__panel a { color: var(--text-body); }
    .nav-dropdown__panel a:hover { background: var(--row-bg-hover); color: var(--accent); }
}
@media (max-width: 620px) {
    .site-header__main { gap: 10px; }
    .site-header__right { gap: 8px; }
    .site-header__register-long { display: none; }
    .site-header__register-short { display: inline; }
    .site-header__cta .button { padding: 0 12px; }
    /* P11: schmal nur das Symbol, die Beschriftung trägt aria-label. */
    .site-header__cta .theme-toggle { width: 40px; justify-content: center; padding: 0; }
    .site-header__cta .theme-toggle__label-dark,
    .site-header__cta .theme-toggle__label-light { display: none; }
}

/* 21 ---------------------------------------------------------- Rücksichten */
@media (prefers-reduced-transparency: reduce) {
    .glass, .stat-panel, .stat-table-wrap, .content-card, .kennzahl,
    .site-header, .site-footer, .nav-dropdown__panel, .page-hero__inner > div:first-child,
    .article-hero__inner, .detail-hero > div:first-child,
    .stat-tile, .stat-rival-callout, .stat-roster-card, .stat-history-list li, .stat-school-index__item,
    .stat-lead__panel, .stat-kpi,
    .stats-strip, .quick-card, .tournament-card, .news-card, .news-list-card,
    .open-tournament-teaser, .news-filter-panel, .region-archive__item, .form-card, .draft-panel,
    .team-card, .player-card, .external-event-card, .calendar-source-grid a, .result-year-card,
    .result-link-grid a, .guestbook-card, .guestbook-empty, .stat-toggle-hint, .scope-tabs a,
    .intro-panel, .filter-panel, .region-info-card, .registration-form,
    .editorial-note, .resource-callout, .article-source, .success-card, .error-card, .sponsor-pitch,
    .empty-state, .cockpit-nav, .partner-logo, .rating-result {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--surface-solid);
    }
    .stat-panel .stat-table-wrap { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .stat-bar-chart__bar, .stat-table tbody tr, .button, .theme-toggle, .stat-rank-table td, .stat-regions__item, .stat-wk__details > summary span, .result-tile, .result-table tbody tr { transition: none; }
    .stat-bar-chart__col:hover .stat-bar-chart__bar { transform: none; }
    .stat-map__area path, .stat-map__tile rect, .stat-map__row { transition: none; }
}
/* Der Fokusring aus style.css bleibt (Limette); der Gegenring folgt --focus-halo (§16). */

/* 21b ------------------------------------------- Turnierkalender (Stufe 1) */
/* Dreizeilige Filterleiste: Suchfeld, Turnierart-Chips mit Trefferzahl,
   "Weitere Filter" + aktive Filter. Nur Tokens, daher hell und dunkel. */
.calendar-filter {
    position: relative;
    display: grid;
    gap: 16px;
    margin-top: -64px;
    margin-bottom: 40px;
    border: 1px solid var(--glass-border);
    border-top: 5px solid var(--accent);
    border-radius: var(--radius-md);
    padding: 22px 25px;
    background: var(--glass-bg-strong, var(--glass-bg));
    box-shadow: var(--glass-shadow);
    color: var(--text-body);
}
.calendar-filter__search { position: relative; }
.calendar-filter__input {
    width: 100%;
    min-height: 54px;
    border: 1px solid var(--field-border);
    border-radius: var(--radius-pill);
    padding: 0 22px;
    background: var(--field-bg);
    color: var(--field-text);
    font-size: 1rem;
}
.calendar-filter__suggestions {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    display: grid;
    gap: 4px;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 6px;
    background: var(--surface-solid);
    box-shadow: var(--glass-shadow);
}
.calendar-filter__suggestion {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    background: transparent;
    color: var(--text-body);
    text-align: left;
    cursor: pointer;
}
.calendar-filter__suggestion span { color: var(--text-muted); font-size: .78rem; }
.calendar-filter__suggestion:hover,
.calendar-filter__suggestion.is-highlighted { border-color: var(--accent); background: var(--row-bg-hover); }

.calendar-filter__arts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; border: 0; padding: 0; }
.calendar-chip { position: relative; display: inline-flex; }
.calendar-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.calendar-chip__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill) 0 0 var(--radius-pill);
    border-right: 0;
    padding: 8px 6px 8px 15px;
    background: var(--glass-bg);
    color: var(--text-body);
    font-size: .85rem;
    font-weight: var(--weight-strong, 700);
}
.calendar-chip__count {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--glass-border);
    border-left: 0;
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
    padding: 8px 15px 8px 6px;
    background: var(--glass-bg);
    color: var(--text-muted);
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
}
.calendar-chip input:checked ~ .calendar-chip__label,
.calendar-chip input:checked ~ .calendar-chip__count { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.calendar-chip input:disabled ~ .calendar-chip__label,
.calendar-chip input:disabled ~ .calendar-chip__count { opacity: .45; cursor: not-allowed; }
.calendar-chip input:focus-visible ~ .calendar-chip__label { outline: 3px solid var(--brand-lime); outline-offset: 2px; }

.calendar-filter__bottom { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 18px; }
.calendar-filter__more { flex: 1 1 320px; }
.calendar-filter__more > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; color: var(--text); font-weight: var(--weight-strong, 700); list-style: none; }
.calendar-filter__more > summary::-webkit-details-marker { display: none; }
.calendar-filter__more > summary::after { content: "⌄"; transition: transform var(--transition); }
.calendar-filter__more[open] > summary::after { transform: rotate(180deg); }
.calendar-filter__extra { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: end; gap: 12px 16px; margin-top: 12px; }
.calendar-filter__check { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--text-body); }
.calendar-filter__active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.calendar-active-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-pill);
    padding: 5px 12px;
    color: var(--text);
    font-size: .8rem;
    text-decoration: none;
}
.calendar-active-chip:hover { background: var(--row-bg-hover); }
.calendar-active-reset { color: var(--text-muted); font-size: .8rem; font-weight: var(--weight-strong, 700); }
.calendar-filter.is-live [data-calendar-submit] { display: none; }
[data-calendar-results][aria-busy="true"] { opacity: .6; transition: opacity var(--transition); }

.calendar-card__art {
    border-radius: var(--radius-pill);
    padding: 3px 10px;
    background: var(--surface-sunken);
    color: var(--text);
    text-transform: none;
}
.calendar-card__source { color: var(--text-muted); font-size: .75rem; }

@media (max-width: 760px) {
    .calendar-filter { margin-top: -40px; padding: 18px; }
    .calendar-filter__bottom { flex-direction: column; }
}

/* 21c ---------------------------------------- Startseite (Handoff 2026-09-14) */
/* Aufmacher, Landesfinale-Band, Kreis-Sektion mit Schulsuche und Karte,
   Wettbewerbsweg und Galerie (Handoff-Startseite.md, Artboards 2a–2g).
   Kreiskarte: Flächenfarbe = Mannschaften (je mehr, desto dunkler), ohne
   Mannschaft weiß (beide Modi) ohne Schraffur, Limettenpunkt = Termin steht. Stufen
   und Punkt sind in beiden Modi gleich. Kontraste prüft
   tests/home/home-contrast-test.php. */
:root {
    --home-act-s1: #f59aa5;
    --home-act-s2: #d8505f;
    --home-act-s3: #b12b3a;
    --home-act-s4: #87222e;
    --home-act-s5: #5a1b22;
    --home-act-empty: #ffffff;
    --home-map-border: #8f8386;
    --home-dot: #ddff5c;
    --home-dot-ink: #14070a;
    --home-line: rgba(255, 255, 255, .14);
    --home-pill-open-bg: #3a2a17;
    --home-pill-open-ink: #ffd58a;
    --home-mark-bg: rgba(221, 255, 92, .30);
    --home-mark-ink: #ffffff;
}
[data-theme="light"] {
    --home-map-border: #d9cdd0;
    --home-line: rgba(27, 23, 25, .14);
    --home-pill-open-bg: #f7e3b8;
    --home-pill-open-ink: #6b4200;
    --home-mark-bg: rgba(221, 255, 92, .75);
    --home-mark-ink: #1b1719;
}

/* Aufmacher (2a): Text | Foto 16:10, mobil Foto zuerst 4:3 (2e). */
.home-lead { padding-block: clamp(22px, 4vw, 44px) 0; }
.home-lead__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(24px, 3.5vw, 36px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: clamp(20px, 3.4vw, 34px);
    background: var(--glass-bg);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(var(--glass-blur-strong));
    -webkit-backdrop-filter: blur(var(--glass-blur-strong));
}
.home-lead__grid--text-only { grid-template-columns: minmax(0, 1fr); }
.home-lead__text { display: grid; justify-items: start; gap: 18px; }
.home-lead__text h1 {
    margin: 0;
    font-size: clamp(2.2rem, 3.4vw, 3.2rem);
    letter-spacing: -.03em;
    line-height: 1.05;
    text-wrap: balance;
}
.home-lead__intro { max-width: 30em; margin: 0; color: var(--text-body); font-size: 1.05rem; text-wrap: pretty; }
.home-lead__photo { overflow: hidden; aspect-ratio: 16 / 10; margin: 0; border-radius: var(--radius-md); }
.home-lead__photo picture,
.home-lead__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Band (2a): eine Zeile, das ganze Band ist der Link. */
.home-band-wrap { margin-top: 18px; }
.home-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    border: 1px solid var(--home-line);
    border-radius: 18px;
    padding: 16px 22px;
    background: var(--row-bg);
    color: var(--text-body);
    text-decoration: none;
    transition: border-color var(--transition);
}
.home-band:hover { border-color: color-mix(in oklch, var(--accent) 55%, transparent); color: var(--text-body); }
.home-band__title { color: var(--text); font-size: 1.02rem; font-weight: var(--weight-heading); text-wrap: balance; }
.home-band__subline { color: var(--text-muted); font-size: .9rem; }
.home-band__link { margin-left: auto; color: var(--accent); font-size: .88rem; font-weight: var(--weight-strong); }

.home-pill {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    align-self: start;
    border-radius: var(--radius-pill);
    padding: 4px 11px;
    font-size: .72rem;
    font-weight: var(--weight-strong);
    line-height: 1.4;
}
.home-band .home-pill { align-self: center; }
.home-pill--open { background: var(--home-pill-open-bg); color: var(--home-pill-open-ink); }
.home-pill--date { background: var(--accent); color: var(--accent-ink); }
.home-pill--live { background: var(--brand-700); color: #ffffff; letter-spacing: .06em; }

/* Kreis-Sektion (2a): Suche, Hinweis, Legende | Karte. */
.home-kreise { padding-block: clamp(40px, 5vw, 64px); }
.home-kreise > .container > h2 {
    margin: 0 0 24px;
    font-size: clamp(1.7rem, 2.3vw, 2.3rem);
    letter-spacing: -.025em;
    line-height: 1.1;
    text-wrap: balance;
}
.home-kreise__grid {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    align-items: start;
    gap: 34px;
}
.home-kreise__side { display: grid; align-content: start; gap: 22px; }
.home-kreise__map-hint,
.home-kreise__list-link { margin: 0; color: var(--text-body); font-size: .95rem; text-wrap: pretty; }

.home-search {
    border: 1px solid var(--home-line);
    border-radius: var(--radius-md);
    padding: 22px;
    background: var(--row-bg);
}
.school-finder--home { gap: 12px; margin-top: 0; }
.school-finder--home .form-field label { margin-bottom: 0; color: var(--text); font-size: .95rem; font-weight: var(--weight-strong); text-wrap: pretty; }
.school-finder__hint { display: block; margin: 4px 0 10px; color: var(--text-muted); font-size: .8rem; }
.school-finder--home .form-field input { min-height: 54px; border-radius: var(--radius-pill); padding: 0 22px; font-size: 1rem; }
.school-finder--home .button { min-height: 48px; padding-inline: 26px; }

.school-search__dropdown {
    overflow: hidden;
    margin-top: 8px;
    border: 1px solid var(--home-line);
    border-radius: 20px;
    background: var(--surface-solid);
    box-shadow: var(--glass-shadow);
}
.school-search__head {
    border-bottom: 1px solid var(--hairline);
    padding: 10px 22px;
    color: var(--text-muted);
    font-size: .76rem;
    font-weight: var(--weight-strong);
}
.school-search__dropdown .school-search__results { gap: 0; max-height: 344px; overflow-y: auto; }
.school-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px 16px;
    width: 100%;
    min-height: 56px;
    border: 0;
    border-top: 1px solid var(--hairline);
    padding: 8px 22px;
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.school-option:first-child { border-top: 0; }
.school-option:hover,
.school-option.is-highlighted { background: color-mix(in oklch, var(--accent) 10%, transparent); }
.school-option__name { color: var(--text); font-size: .98rem; font-weight: var(--weight-strong); }
.school-option__meta { flex: 0 0 auto; color: var(--text-muted); font-size: .85rem; text-align: right; }
.school-option mark { border-radius: 4px; padding: 0 3px; background: var(--home-mark-bg); color: var(--home-mark-ink); }
.school-search__panel { display: grid; gap: 14px; padding: 18px 22px; }
.school-search__panel-title { color: var(--text); font-size: .95rem; }
.school-search__panel-text { margin: 0; color: var(--text-muted); font-size: .88rem; text-wrap: pretty; }
.school-search__ways { display: flex; flex-wrap: wrap; gap: 10px; }
.school-search__way {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    border: 1px solid var(--home-line);
    border-radius: var(--radius-pill);
    padding: 0 20px;
    color: var(--text-body);
    font-size: .92rem;
    font-weight: var(--weight-strong);
    text-decoration: none;
}
.school-search__way--primary { border-color: color-mix(in oklch, var(--accent) 50%, transparent); color: var(--accent); }
.school-search__way:hover { border-color: currentColor; }

.school-finder--home .school-selected {
    min-height: 54px;
    border: 1px solid var(--home-line);
    border-radius: 27px;
    padding: 7px 12px 7px 8px;
    background: var(--row-bg);
}
.school-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    min-height: 38px;
    border-radius: var(--radius-pill);
    padding: 0 6px 0 16px;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: .95rem;
    font-weight: var(--weight-heading);
}
.school-chip__name { overflow-wrap: anywhere; }
/* style.css färbt alle spans in .school-selected grau – der Chip selbst ist ein span. */
.school-finder--home .school-selected .school-chip { color: var(--accent-ink); font-size: .95rem; }
.school-finder--home .school-selected .school-chip span { color: inherit; font-size: inherit; }
.school-chip__remove {
    display: inline-flex;
    flex: 0 0 26px;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: var(--radius-pill);
    padding: 0;
    background: color-mix(in oklch, var(--accent-ink) 16%, transparent);
    color: inherit;
    font: inherit;
    line-height: 1;
    cursor: pointer;
}
.school-chip__remove:hover { background: color-mix(in oklch, var(--accent-ink) 28%, transparent); }

/* Suchergebnis (2d) */
.home-answer { display: grid; gap: 16px; }
.home-answer__school { margin: 0; color: var(--text-muted); font-size: .85rem; }
.home-answer__school a { font-weight: var(--weight-strong); text-decoration: none; }
.home-answer__card {
    display: grid;
    gap: 14px;
    border: 1px solid var(--home-line);
    border-radius: var(--radius-md);
    padding: 26px;
    background: var(--row-bg);
}
.home-answer__card--termin {
    border-color: color-mix(in oklch, var(--accent) 35%, transparent);
    background: color-mix(in oklch, var(--accent) 10%, transparent);
}
.home-answer__kicker { color: var(--accent); font-size: .72rem; font-weight: var(--weight-heading); letter-spacing: .12em; text-transform: uppercase; }
.home-answer__card h3 { margin: 0; font-size: 1.9rem; letter-spacing: -.025em; line-height: 1.1; text-wrap: balance; }
.home-answer__details {
    display: grid;
    gap: 8px;
    border-block: 1px solid var(--home-line);
    padding-block: 16px;
}
.home-answer__label { color: var(--text-muted); font-size: .8rem; font-weight: var(--weight-strong); }
.home-answer__term { color: var(--text); font-size: 1.25rem; }
.home-answer__facts,
.home-answer__text { margin: 0; color: var(--text-body); font-size: .9rem; }
.home-answer__contacts { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.home-answer__contacts li { display: flex; flex-wrap: wrap; gap: 2px 10px; color: var(--text-body); font-size: .92rem; }
.home-answer__contacts strong { color: var(--text); }
.home-answer__role { flex-basis: 100%; color: var(--text-muted); font-size: .78rem; }
.home-answer__button { justify-self: start; min-height: 48px; }
.home-answer__extra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid var(--home-line);
    border-radius: 18px;
    padding: 16px 20px;
    background: var(--row-bg);
    text-decoration: none;
}
.home-answer__extra-text { display: grid; gap: 2px; }
.home-answer__extra-text strong { color: var(--text); font-size: .95rem; }
.home-answer__extra-text span { color: var(--text-muted); font-size: .82rem; }
.home-answer__extra-arrow { color: var(--accent); font-size: 1.1rem; font-weight: var(--weight-heading); }
.home-answer__extra:hover { border-color: color-mix(in oklch, var(--accent) 55%, transparent); }

/* Legende */
.home-legend {
    display: grid;
    gap: 12px;
    border: 1px solid var(--home-line);
    border-radius: var(--radius-md);
    padding: 20px;
    background: color-mix(in oklch, var(--row-bg) 60%, transparent);
}
.home-legend p { margin: 0; }
.home-legend__title { color: var(--text); font-size: .86rem; font-weight: var(--weight-heading); }
.home-legend__scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.home-legend__scale li { display: grid; gap: 6px; color: var(--text-muted); font-size: .72rem; font-weight: var(--weight-strong); }
.home-legend__swatch { display: inline-block; flex: 0 0 auto; width: 16px; height: 16px; border-radius: 4px; }
.home-legend__scale .home-legend__swatch { width: 100%; border-radius: 0; }
.home-legend__scale li:first-child .home-legend__swatch { border-radius: 4px 0 0 4px; }
.home-legend__scale li:last-child .home-legend__swatch { border-radius: 0 4px 4px 0; }
.home-legend__swatch--s0 { border: 1px solid var(--home-map-border); background: var(--home-act-empty); }
.home-legend__swatch--s1 { background: var(--home-act-s1); }
.home-legend__swatch--s2 { background: var(--home-act-s2); }
.home-legend__swatch--s3 { background: var(--home-act-s3); }
.home-legend__swatch--s4 { background: var(--home-act-s4); }
.home-legend__swatch--s5 { background: var(--home-act-s5); }
.home-legend__none,
.home-legend__term { display: flex; align-items: center; gap: 10px; color: var(--text-body); font-size: .82rem; font-weight: var(--weight-strong); }
.home-legend__term { border-top: 1px solid var(--home-line); padding-top: 12px; }
.home-legend__dot-mark {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border: 2px solid var(--home-dot-ink);
    border-radius: var(--radius-pill);
    background: var(--home-dot);
}

/* Karte: Fläche = Mannschaften (je mehr, desto dunkler), Punkt = Termin steht. */
.home-map { position: relative; margin: 0; }
.home-map__svg { display: block; width: 100%; height: auto; overflow: visible; }
.home-map__area path,
path.home-map__area {
    fill: var(--home-act-empty);
    stroke: var(--home-map-border);
    stroke-width: .9;
    stroke-linejoin: round;
    transition: fill 160ms ease, stroke 160ms ease, opacity 160ms ease;
}
.home-map__area--s1 path, path.home-map__area--s1 { fill: var(--home-act-s1); }
.home-map__area--s2 path, path.home-map__area--s2 { fill: var(--home-act-s2); }
.home-map__area--s3 path, path.home-map__area--s3 { fill: var(--home-act-s3); }
.home-map__area--s4 path, path.home-map__area--s4 { fill: var(--home-act-s4); }
.home-map__area--s5 path, path.home-map__area--s5 { fill: var(--home-act-s5); }
a.home-map__area { cursor: pointer; }
a.home-map__area:focus { outline: none; }
a.home-map__area:hover path,
a.home-map__area.is-active path { fill: var(--home-dot); stroke: var(--home-dot-ink); stroke-width: 1.6; }
a.home-map__area:focus-visible path { stroke: var(--text); stroke-width: 2.4; }
.home-map__markers { pointer-events: none; }
.home-map__dot { fill: var(--home-dot); stroke: var(--home-dot-ink); stroke-width: 1.25; }
/* Bezirksseite: Nachbarbezirke treten zurück, bleiben aber anklickbar. */
.home-map--focus .home-map__area--dimmed path { opacity: .35; }
.home-map--focus .home-map__dot--dimmed { opacity: .35; }
.home-map__info {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    border: 1px solid var(--home-line);
    border-radius: 18px;
    padding: 12px 16px;
    background: var(--glass-bg-strong);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    pointer-events: none;
}
.home-map__info strong { color: var(--text); font-size: 1rem; }
.home-map__info span { color: var(--text-body); font-size: .85rem; }
.home-map__info .home-map__info-cta { margin-left: auto; color: var(--accent); font-size: .78rem; font-weight: var(--weight-strong); }
.home-map__caption { display: none; margin: 10px 0 0; color: var(--text-muted); font-size: .78rem; text-wrap: pretty; }

/* Bezirks-Akkordeons: nur mobil (2e). */
.home-districts { display: none; gap: 8px; margin-top: 26px; }
.home-districts__title { margin: 0 0 2px; color: var(--text-muted); font-size: .78rem; font-weight: var(--weight-heading); letter-spacing: .1em; text-transform: uppercase; }
.home-district { overflow: hidden; border: 1px solid var(--home-line); border-radius: 16px; background: var(--row-bg); }
.home-district[open] { border-color: color-mix(in oklch, var(--accent) 28%, transparent); background: color-mix(in oklch, var(--accent) 8%, transparent); }
.home-district__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 8px 16px;
    cursor: pointer;
    list-style: none;
}
.home-district__summary::-webkit-details-marker { display: none; }
.home-district__summary::after { color: var(--accent); content: "▾"; font-size: .9rem; }
.home-district[open] > .home-district__summary::after { content: "▴"; }
.home-district__name { margin-right: auto; color: var(--text); font-size: 1rem; font-weight: var(--weight-heading); }
.home-district__count { color: var(--text-muted); font-size: .8rem; }
.home-district__list { margin: 0; padding: 0; list-style: none; background: color-mix(in oklch, var(--bg-base) 50%, transparent); }
.home-district__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    border-top: 1px solid var(--hairline);
    padding: 8px 16px;
    color: var(--text);
    font-size: .95rem;
    font-weight: var(--weight-strong);
    text-decoration: none;
}
.home-district__row:hover { color: var(--accent); }
.home-badge { flex: 0 0 auto; border-radius: var(--radius-pill); font-size: .74rem; font-weight: var(--weight-heading); }
.home-badge--date { padding: 3px 9px; background: var(--home-dot); color: var(--home-dot-ink); }
.home-badge--open { color: var(--text-muted); font-weight: var(--weight-strong); }

/* Wettbewerbsweg (2a): drei aufsteigende Stufen. */
.home-pathway,
.home-gallery { padding-block: clamp(32px, 4vw, 52px); }
.home-pathway > .container > h2 { margin: 0; font-size: clamp(1.6rem, 2.2vw, 2.2rem); letter-spacing: -.025em; line-height: 1.1; text-wrap: balance; }
.home-pathway__steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 18px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}
.home-pathway__step {
    display: grid;
    align-content: end;
    gap: 8px;
    min-width: 0;
    border: 1px solid var(--home-line);
    border-radius: var(--radius-md);
    padding: 22px;
    background: var(--row-bg);
    color: var(--text-body);
    font-size: .9rem;
}
.home-pathway__step--1 { min-height: 150px; }
.home-pathway__step--2 { min-height: 200px; border-color: color-mix(in oklch, var(--accent) 28%, transparent); background: color-mix(in oklch, var(--accent) 10%, transparent); }
.home-pathway__step--3 { min-height: 250px; border-color: color-mix(in oklch, var(--accent) 55%, transparent); background: color-mix(in oklch, var(--accent) 20%, transparent); }
.home-pathway__step strong { min-width: 0; overflow-wrap: break-word; color: var(--text); font-size: 1.12rem; hyphens: manual; text-wrap: balance; }
.home-pathway__number { color: var(--accent); font-size: .8rem; font-weight: var(--weight-heading); letter-spacing: .1em; text-transform: uppercase; }
.home-pathway__note,
.home-pathway__extra { margin: 18px 0 0; color: var(--text-muted); font-size: .9rem; text-wrap: pretty; }
.home-pathway__extra { margin-top: 8px; font-size: .86rem; }

/* Galerie (2a „full“, Fallback 2g „lite“) */
.home-gallery__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; }
.home-gallery__head h2 { margin: 0; font-size: clamp(1.6rem, 2.2vw, 2.2rem); letter-spacing: -.025em; line-height: 1.1; text-wrap: balance; }
.home-gallery__grid { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.home-gallery__grid--full { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 150px; }
.home-gallery__grid--lite { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-auto-rows: 162px; }
.home-gallery__item { overflow: hidden; min-height: 0; border-radius: 16px; }
.home-gallery__item--lead { border-radius: 20px; }
.home-gallery__grid--full .home-gallery__item--lead { grid-column: span 2; grid-row: span 2; }
.home-gallery__grid--lite .home-gallery__item--lead { grid-row: span 2; }
.home-gallery__item picture,
.home-gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-gallery__note { margin: 14px 0 0; color: var(--text-muted); font-size: .85rem; text-wrap: pretty; }

/* Kreis & Stadt: /kreise und Bezirksseiten /kreise/bezirk/{slug} */
.district-directory { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); align-items: start; gap: 18px; }
.district-card,
.district-layout__list { overflow: hidden; border: 1px solid var(--home-line); border-radius: var(--radius-md); background: var(--row-bg); }
.district-card__title,
.district-layout__title { margin: 0; padding: 16px 16px 2px; font-size: 1.15rem; letter-spacing: -.02em; text-wrap: balance; }
.district-layout__title { padding-bottom: 12px; }
.district-card__title a { color: var(--text); text-decoration: none; }
.district-card__title a:hover { color: var(--accent); }
.district-card__count { margin: 0 16px 12px; color: var(--text-muted); font-size: .82rem; }
.district-list { margin: 0; padding: 0; list-style: none; }
.district-list__name { display: grid; gap: 1px; }
.district-list__name small { color: var(--text-muted); font-size: .74rem; font-weight: var(--weight-body); }
.district-layout__back { margin: 0; border-top: 1px solid var(--hairline); padding: 14px 16px; }
.district-switch ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.district-switch__chip {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    border: 1px solid var(--home-line);
    border-radius: var(--radius-pill);
    padding: 0 16px;
    color: var(--text-body);
    font-size: .9rem;
    font-weight: var(--weight-strong);
    text-decoration: none;
}
.district-switch__chip:hover { border-color: var(--accent); color: var(--text); }
.district-switch__chip.is-current { border-color: transparent; background: var(--accent); color: var(--accent-ink); }
.district-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: 32px; }
.district-layout--list-only { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
.district-layout__map { display: grid; gap: 16px; }

@media (max-width: 960px) {
    .home-kreise__grid { grid-template-columns: minmax(0, 1fr); }
    .district-layout { grid-template-columns: minmax(0, 1fr); }
    .home-kreise__map { max-width: 640px; }
    .home-gallery__grid--full { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Mobil 375 px (2e): Foto → H1 → Satz → Karte als Bild → Suche → Bezirke. */
@media (max-width: 720px) {
    .home-lead__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; border: 0; padding: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
    .home-lead__photo { order: -1; aspect-ratio: 4 / 3; border-radius: 18px; }
    .home-lead__text { gap: 14px; }
    .home-lead__text h1 { font-size: 1.85rem; line-height: 1.08; }
    .home-lead__intro { font-size: .95rem; }
    .home-lead__intro-prefix { display: none; }
    .home-band { padding: 14px 16px; }
    .home-band__link { margin-left: 0; }
    .home-kreise { padding-top: 26px; }
    .home-kreise > .container { border-top: 1px solid var(--home-line); padding-top: 22px; }
    .home-kreise__grid { gap: 24px; }
    .home-kreise__map { order: -1; max-width: none; }
    .home-map__svg { pointer-events: none; }
    .home-map__info { display: none; }
    .home-map__caption { display: block; }
    .home-kreise__map-hint,
    .home-legend,
    .home-kreise__list-link { display: none; }
    .home-search { border: 0; padding: 0; background: none; }
    .school-finder--home .button { justify-content: center; width: 100%; }
    .school-option { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 10px 18px; }
    .school-option__meta { text-align: left; }
    .home-districts { display: grid; }
    .home-pathway__steps { grid-template-columns: minmax(0, 1fr); }
    .home-pathway__step--1, .home-pathway__step--2, .home-pathway__step--3 { min-height: 0; }
    .home-gallery__grid--full,
    .home-gallery__grid--lite { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 130px; }
    .home-gallery__grid--full .home-gallery__item--lead,
    .home-gallery__grid--lite .home-gallery__item--lead { grid-column: span 2; grid-row: span 2; }
}

@media (prefers-reduced-motion: reduce) {
    .home-map__area path, path.home-map__area, .home-band { transition: none; }
}

/* 22 ---------------------------------------------------------------- Druck */
/* theme.css wird nach style.css geladen und würde dessen Druckregeln
   überschreiben – daher hier ausdrücklich hell, ohne Glas und Verlauf. */
@media print {
    :root,
    :root[data-theme] {
        color-scheme: light;
        --bg-base: #ffffff;
        --bg-gradient: none;
        --glass-bg: #ffffff;
        --glass-bg-strong: #ffffff;
        --glass-border: #999999;
        --glass-shadow: none;
        --glass-edge: none;
        --text: #000000;
        --text-body: #1b1719;
        --text-muted: #4a4245;
        --accent: #a10f1f;
        --accent-ink: #ffffff;
        --hairline: #cccccc;
        --row-bg: transparent;
        --row-bg-hover: transparent;
        --surface-sunken: #f4f4f4;
        --surface-solid: #ffffff;
        --field-bg: #ffffff;
        --field-text: #000000;
        --color-ink: #000000;
        --color-muted: #4a4245;
        --color-line: #cccccc;
        --color-cream: #ffffff;
        --color-paper: #ffffff;
        --color-error: #b30d1c;
    }
    body { background: #ffffff; color: #000000; }
    *, *::before, *::after {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
    }
    .theme-toggle { display: none !important; }
}

/* 22 ------------------------------------- Startseite nach Entwurf D (P06) */
/* Karte: Blender-Bild (hell/dunkel) + SVG-Ebene in Bildkoordinaten
   (templates/partials/home-hero-map.php, App\Support\Home\HeroMap).
   Dunkel ist Standard, daher zeigt ohne data-theme="light" das dunkle Bild. */
.home-hero { padding: clamp(28px, 5vw, 64px) 0 clamp(12px, 3vw, 32px); }
.home-hero__grid { display: grid; gap: clamp(20px, 3vw, 40px); align-items: center; }
@media (min-width: 1000px) {
    .home-hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .home-hero__grid--no-map { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
}
.home-hero h1 { font-size: clamp(2.3rem, 5.2vw, 4.4rem); line-height: 1; letter-spacing: -.035em; font-weight: 800; margin: 0 0 16px; hyphens: manual; }
.home-hero__accent { color: var(--brand-600); }
[data-theme="light"] .home-hero__accent { color: var(--brand-700); }
.home-hero__intro { color: var(--text-body); font-size: clamp(1rem, 1.6vw, 1.15rem); margin: 0 0 22px; max-width: 34em; }
.home-hero__search { background: var(--glass-bg-strong); border: 1px solid var(--glass-border); border-radius: 18px; padding: clamp(16px, 2.4vw, 24px); box-shadow: var(--glass-shadow); }
.home-hero__hint { margin: 12px 0 0; font-size: .85rem; color: var(--text-muted); }

.hero-map { position: relative; margin: 0; }
.hero-map__overlay { display: block; width: 100%; height: auto; overflow: visible; }
/* Das Bild ist auf die Kreisflächen zugeschnitten (clipPath im SVG); die Tiefe
   kommt vom weichen Schatten der ganzen Landesfläche. */
.hero-map__land { filter: drop-shadow(0 18px 22px rgba(60, 20, 30, .16)); }
[data-theme="dark"] .hero-map__land,
:root:not([data-theme]) .hero-map__land { filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .5)); }
.hero-map__bild--light { display: none; }
[data-theme="light"] .hero-map__bild--light { display: inline; }
[data-theme="light"] .hero-map__bild--dark { display: none; }
.hero-map__area path { fill: transparent; stroke: none; transition: fill var(--transition); }
.hero-map__area--hot path { fill: #cc0000; fill-opacity: .88; stroke: #8f0000; stroke-width: 2; }
[data-theme="dark"] .hero-map__area--hot path,
:root:not([data-theme]) .hero-map__area--hot path { fill: #e00000; fill-opacity: .9; }
/* P13: ein Rotton je Turnier (HeroMap::TONES), alle dunkel genug für weiße Kennzeichen. */
.hero-map__area--ton-2 path { fill: #e2532a; stroke: #9c2c0c; }
.hero-map__area--ton-3 path { fill: #8f1230; stroke: #5d0a1e; }
.hero-map__area--ton-4 path { fill: #d13a5e; stroke: #8f1a41; }
.hero-map__area--ton-5 path { fill: #b23a2a; stroke: #76241a; }
[data-theme="dark"] .hero-map__area--ton-2 path,
:root:not([data-theme]) .hero-map__area--ton-2 path { fill: #f0623a; }
[data-theme="dark"] .hero-map__area--ton-3 path,
:root:not([data-theme]) .hero-map__area--ton-3 path { fill: #a5173a; }
[data-theme="dark"] .hero-map__area--ton-4 path,
:root:not([data-theme]) .hero-map__area--ton-4 path { fill: #e04c70; }
[data-theme="dark"] .hero-map__area--ton-5 path,
:root:not([data-theme]) .hero-map__area--ton-5 path { fill: #c5483a; }
/* P13: Kfz-Kennzeichen als Beschriftung; Schrift in Bildeinheiten, Stufe nach Kreisfläche. */
.hero-map__plate {
    pointer-events: none;
    text-anchor: middle;
    dominant-baseline: central;
    font: 800 44px var(--font-sans);
    letter-spacing: .02em;
    fill: #f1ecee;
    stroke: rgba(0, 0, 0, .55);
    stroke-width: 6px;
    paint-order: stroke;
    stroke-linejoin: round;
}
.hero-map__plate--m { font-size: 34px; stroke-width: 5px; }
.hero-map__plate--s { font-size: 26px; stroke-width: 4px; }
[data-theme="light"] .hero-map__plate { fill: #3d3437; stroke: rgba(255, 255, 255, .8); }
.hero-map__plate--hot,
[data-theme="light"] .hero-map__plate--hot { fill: #ffffff; stroke: rgba(70, 0, 10, .6); }
@media (max-width: 620px) {
    /* Am Handy ist die Karte zu klein für alle Kennzeichen: nur die großen Kreise, dafür größer. */
    .hero-map__plate { font-size: 62px; stroke-width: 8px; }
    .hero-map__plate--m, .hero-map__plate--s { display: none; }
}
a.hero-map__area:hover path, a.hero-map__area:focus-visible path { fill: var(--brand-600); fill-opacity: .55; }
a.hero-map__area--hot:hover path, a.hero-map__area--hot:focus-visible path { fill-opacity: 1; }
a.hero-map__area:focus-visible { outline: none; }
a.hero-map__area:focus-visible path { stroke: var(--text); stroke-width: 6; }
.hero-map__label { pointer-events: none; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .18)); }
.hero-map__label rect { fill: #ffffff; }
.hero-map__label-date { fill: #cc0000; font: 800 34px var(--font-sans); letter-spacing: .02em; }
.hero-map__label-name { fill: #1a1414; font: 800 44px var(--font-sans); }
.hero-map__caption { text-align: right; font-size: .72rem; color: var(--text-muted); margin-top: 4px; }

/* Termine + Landesfinale + Einstiege: Handy = Finale, Termine, Einstiege. */
.home-overview__grid { display: grid; gap: clamp(16px, 2.4vw, 28px); grid-template-areas: "final" "terms" "paths"; }
.home-final { grid-area: final; }
.home-terms { grid-area: terms; }
.home-paths { grid-area: paths; }
@media (min-width: 1000px) {
    .home-overview__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-areas: "terms final" "terms paths"; align-items: start; }
}
.home-final { background: #1a1414; color: #ffffff; border: 1px solid var(--glass-border); border-radius: 20px; padding: 22px 24px; display: grid; gap: 6px; }
.home-final__eyebrow { margin: 0 0 4px; }
.home-final__title { color: #ffffff; font-size: 1.35rem; line-height: 1.15; margin: 0; }
.home-final__place { color: #d9cdcf; margin: 0; }
.home-final__count { margin: 8px 0 0; color: #d9cdcf; }
.home-final__count strong { display: inline-block; font-size: 2.2rem; line-height: 1; color: #ffffff; background: #cc0000; border-radius: 12px; padding: 8px 12px; margin-right: 6px; }
.home-final__link { color: #ffffff; font-weight: 800; margin-top: 8px; text-decoration: none; }
.home-final__link:hover, .home-final__link:focus-visible { text-decoration: underline; }

.home-terms__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.home-terms__head h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -.02em; }
.home-terms__month { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin: 18px 0 0; padding-bottom: 6px; border-bottom: 1px solid var(--hairline); }
.home-terms__list { list-style: none; margin: 0; padding: 0; }
.home-term { display: grid; grid-template-columns: 3.2em minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.home-term__day { font-weight: 800; font-size: 1.45rem; color: var(--text); }
.home-term__body { display: grid; gap: 2px; }
.home-term__title { font-weight: 700; color: var(--text); text-decoration: none; }
a.home-term__title:hover, a.home-term__title:focus-visible { text-decoration: underline; }
.home-term__meta { font-size: .85rem; color: var(--text-muted); }
.home-term__action { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--text); color: var(--text); font-weight: 700; font-size: .85rem; text-decoration: none; white-space: nowrap; }
.home-term__action--primary { background: #cc0000; border-color: #cc0000; color: #ffffff; }
.home-term__action:hover, .home-term__action:focus-visible { text-decoration: underline; }
@media (min-width: 640px) {
    .home-term { grid-template-columns: 3.2em minmax(0, 1fr) auto; }
    .home-term__action { grid-column: 3; justify-self: end; }
}
.home-terms__note, .home-terms__empty { font-size: .8rem; color: var(--text-muted); margin: 12px 0 0; }

.home-paths { display: grid; gap: 12px; }
.home-path { display: grid; gap: 4px; padding: 16px 20px; border-radius: 18px; background: var(--glass-bg-strong); border: 1px solid var(--glass-border); color: var(--text); text-decoration: none; }
.home-path__eyebrow { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: var(--brand-600); }
[data-theme="light"] .home-path__eyebrow { color: var(--brand-800); }
.home-path strong { font-size: 1.1rem; }
.home-path:hover strong, .home-path:focus-visible strong { text-decoration: underline; }

.home-news__grid { display: grid; gap: 20px; }
@media (min-width: 800px) { .home-news__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.home-news__item { border-top: 3px solid var(--text); padding-top: 12px; }
.home-news__meta { font-size: .78rem; color: var(--text-muted); margin: 0 0 6px; }
.home-news__item h3 { font-size: 1.15rem; margin: 0 0 6px; }
.home-news__item h3 a { color: var(--text); text-decoration: none; }
.home-news__item h3 a:hover, .home-news__item h3 a:focus-visible { text-decoration: underline; }
.home-news__item p { color: var(--text-body); font-size: .92rem; margin: 0; }
/* Durchgehender Seitenhintergrund ohne Kante zwischen Karte und Terminen; keine Silbentrennung in Überschriften (P02 Q3). */
.home-overview, .home-news { background: transparent; }
.home-overview { padding-block: clamp(8px, 2vw, 24px) clamp(32px, 4vw, 56px); }
.home-news { padding-top: clamp(16px, 3vw, 40px); }
.home-final__title, .home-term__title, .home-news__item h3, .home-path strong { hyphens: manual; text-wrap: balance; }

/* 23 --------------------------- Turnierseite am Turniertag (P06, P02-E1) */
.detail-day { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 14px 0 18px; padding: 14px 16px; border-radius: 16px; background: rgba(204, 0, 0, .14); border: 1px solid rgba(204, 0, 0, .45); }
.detail-day__label { flex-basis: 100%; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.detail-day__label span { color: #ff3b3b; }
.detail-day__primary { font-size: 1.05rem; padding-inline: 22px; }

/* 24 ------------------------------------------ Fragen zum Landesfinale (P06) */
.faq h2 { margin-top: 1.6em; }
.faq h2:first-child { margin-top: 0; }
.faq h2, .faq h3 { hyphens: manual; text-wrap: balance; }

/* 25 ------------------------- Sponsorenseite Landesfinale (/partner-werden, P09) */
/* Vorlage: Zweig ux-writing-audit. Gestaltung nach Sport- und Eventsponsoring:
   große Kennzahlen, kurze Blöcke, viel Weißraum. Karten gibt es nur in EINEM
   Abschnitt („Was Partnerschaften möglich machen“), damit die Seite mobil
   nicht zur Kartenkette wird. Farben ausschließlich über die
   vorhandenen Tokens. Die drei Zustände unterscheiden sich in Form UND
   Beschriftung, nie allein über Farbe. */

/* Abstand zwischen den Abschnitten; die Liste „Wer in der Halle ist“ */
.sponsor-stack { display: grid; gap: clamp(40px, 5.5vw, 72px); }
.sponsor-audience .checklist { display: grid; gap: 8px; margin: 0; padding-left: 1.15em; color: var(--text-body); }

/* Aufmacher */
.sponsor-hero { position: relative; padding-block: clamp(32px, 5vw, 64px); }
.sponsor-hero__inner { display: grid; justify-items: start; gap: 12px; }
.sponsor-hero__inner .eyebrow { margin: 0; }
.sponsor-hero__inner h1 { max-width: 20ch; margin: 0; font-size: clamp(2.3rem, 4.4vw, 3.6rem); letter-spacing: -.03em; line-height: 1.03; text-wrap: balance; }
.sponsor-hero__claim { max-width: 44rem; margin: 0; color: var(--text); font-size: clamp(1.15rem, 2.1vw, 1.5rem); font-weight: var(--weight-strong); line-height: 1.35; text-wrap: pretty; }
.sponsor-hero__intro { max-width: 42rem; margin: 0; color: var(--text-body); font-size: 1.02rem; text-wrap: pretty; }
.sponsor-hero__presented {
    margin: 4px 0 0;
    border-left: 3px solid var(--accent);
    padding-left: 12px;
    color: var(--text-body);
    font-size: .95rem;
}
.sponsor-hero__presented a { color: var(--text); font-weight: var(--weight-strong); }
.sponsor-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 10px 0 0; }
.sponsor-hero__actions .button { min-height: 48px; }

/* Kennzahlen: die drei Zahlen, die die Größenordnung zeigen */
.sponsor-figures { display: grid; gap: 14px; }
.sponsor-figures__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.sponsor-figure {
    display: grid;
    align-content: start;
    gap: 6px;
    border-top: 4px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 20px 22px 22px;
    background: var(--row-bg);
}
.sponsor-figure__value { color: var(--text); font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: var(--weight-heading); letter-spacing: -.035em; line-height: 1; }
.sponsor-figure__label { color: var(--text); font-size: 1rem; font-weight: var(--weight-strong); line-height: 1.3; text-wrap: pretty; }
.sponsor-figure__detail { color: var(--text-muted); font-size: .85rem; line-height: 1.4; }
.sponsor-figures__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; }

/* Textblöcke */
.sponsor-block { display: grid; gap: 14px; }
.sponsor-block > h2 { margin: 0; }
.sponsor-block__intro { max-width: 60ch; margin: 0; color: var(--text-body); font-size: 1.02rem; text-wrap: pretty; }
.sponsor-block__link { margin: 0; }

/* Was beim Landesfinale passiert: Zeilen, keine Karten */
.sponsor-facts { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.sponsor-facts li { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 4px 28px; border-top: 1px solid var(--hairline); padding: 14px 0; }
.sponsor-facts li:last-child { border-bottom: 1px solid var(--hairline); }
.sponsor-facts strong { color: var(--text); font-size: 1.02rem; line-height: 1.3; }
.sponsor-facts span { color: var(--text-body); line-height: 1.5; }

/* Die drei Zustände */
.sponsor-state__marker {
    display: inline-block;
    border-radius: var(--radius-pill);
    padding: 3px 12px;
    font-size: .74rem;
    font-weight: var(--weight-heading);
    letter-spacing: .06em;
    line-height: 1.5;
    text-transform: uppercase;
    white-space: nowrap;
}
.sponsor-state__marker--besteht { background: var(--accent); color: var(--accent-ink); }
.sponsor-state__marker--geplant { border: 1px solid var(--accent); background: transparent; color: var(--text); }
.sponsor-state__marker--moeglich { border: 1px dashed var(--accent); background: var(--row-bg); color: var(--text); }
.sponsor-states { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(18px, 2.5vw, 30px); }
.sponsor-state__title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 1.1rem; line-height: 1.3; }
.sponsor-state__list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.sponsor-state__list li { border-top: 1px solid var(--hairline); padding: 12px 0; color: var(--text-body); line-height: 1.5; }
.sponsor-state__list strong { display: block; color: var(--text); }

/* Was Partnerschaften möglich machen: der einzige Kartenabschnitt */
.sponsor-block--possible { gap: 10px; }
.sponsor-block--possible .sponsor-state__marker { justify-self: start; }
.sponsor-possible { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; margin: 6px 0 0; padding: 0; list-style: none; }
.sponsor-possible__item {
    display: grid;
    align-content: start;
    gap: 8px;
    border: 1px solid var(--home-line);
    border-radius: var(--radius-sm);
    padding: 20px 22px;
    background: var(--row-bg);
}
.sponsor-possible__item h3 { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.sponsor-possible__item p { margin: 0; color: var(--text-body); font-size: .93rem; line-height: 1.5; }

/* Nutzen für Partner */
.sponsor-presence { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 2px 32px; margin: 0; padding: 0; list-style: none; }
.sponsor-presence li { display: grid; gap: 3px; border-top: 1px solid var(--hairline); padding: 12px 0; }
.sponsor-presence strong { color: var(--text); }
.sponsor-presence span { color: var(--text-body); font-size: .95rem; line-height: 1.5; }
.sponsor-audience { margin-top: 10px; border-left: 3px solid var(--accent); padding: 4px 0 4px 18px; }
.sponsor-audience h3 { margin: 0 0 10px; font-size: 1.05rem; }

/* Formen der Zusammenarbeit */
.sponsor-roles { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.sponsor-role { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 4px 28px; border-top: 1px solid var(--hairline); padding: 14px 0; }
.sponsor-role:last-child { border-bottom: 1px solid var(--hairline); }
.sponsor-role__name { color: var(--text); font-size: 1.02rem; line-height: 1.3; }
.sponsor-role__hint { color: var(--text-muted); font-size: .78rem; font-weight: var(--weight-body); white-space: nowrap; }
.sponsor-role__text { color: var(--text-body); line-height: 1.5; }

/* Livestream */
.sponsor-stream {
    display: grid;
    gap: 14px;
    border: 1px solid var(--home-line);
    border-radius: var(--radius-md);
    padding: clamp(20px, 3vw, 28px);
    background: var(--row-bg);
}
.sponsor-stream h3 { margin: 0; font-size: 1.25rem; }
.sponsor-stream__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px 32px; }
.sponsor-stream h4 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 1rem; }
.sponsor-stream__list { display: grid; gap: 6px; margin: 0; padding-left: 1.15em; color: var(--text-body); }
.sponsor-stream__note { max-width: 70ch; margin: 0; color: var(--text-muted); font-size: .9rem; line-height: 1.55; }

/* Bestehende Partner, nach Rolle gruppiert */
.sponsor-partner-group { margin-top: 6px; }
.sponsor-partner-group__title { margin: 0 0 10px; color: var(--text-muted); font-size: .82rem; font-weight: var(--weight-heading); letter-spacing: .08em; text-transform: uppercase; }
.sponsor-partner-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.sponsor-partner-list li { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sponsor-partner-list a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    border: 1px solid var(--home-line);
    border-radius: var(--radius-pill);
    padding: 0 18px;
    background: var(--row-bg);
    color: var(--text);
    font-weight: var(--weight-strong);
    text-decoration: none;
}
.sponsor-partner-list a:hover { border-color: var(--accent); }
.sponsor-partner-list__scope { color: var(--text-muted); font-size: .85rem; }
.sponsor-partner-list__note { flex-basis: 100%; max-width: 46ch; color: var(--text-body); font-size: .88rem; line-height: 1.45; }

/* Abschluss: Kontakt und zweiter Aufruf */
.sponsor-contact {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 24px 36px;
    border-radius: var(--radius-md);
    padding: clamp(24px, 3.5vw, 38px);
    background: var(--brand-900);
    color: #eadfe1;
}
.sponsor-contact h2 { margin: 0 0 10px; color: #ffffff; font-size: clamp(1.5rem, 2.4vw, 2.1rem); letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
.sponsor-contact p { margin: 0; max-width: 46ch; }
.sponsor-contact a:not(.button) { color: var(--brand-lime); }
.sponsor-contact__person { display: grid; gap: 2px; margin-top: 18px !important; line-height: 1.6; }
.sponsor-contact__person strong { color: #ffffff; font-size: 1.05rem; }
.sponsor-contact__person span { color: #d8cbce; font-size: .9rem; }
.sponsor-contact__action { display: grid; align-content: start; justify-items: start; gap: 14px; }
.sponsor-contact__action .button { min-height: 48px; }
.sponsor-contact__donation { color: #d8cbce; font-size: .9rem; line-height: 1.55; }

@media (max-width: 860px) {
    .sponsor-facts li,
    .sponsor-role { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .sponsor-contact { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
    .sponsor-hero__actions { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
    .sponsor-hero__actions .button { width: 100%; }
    .sponsor-figure { padding: 16px 18px 18px; }
    .sponsor-figure__value { font-size: 2.3rem; }
    .sponsor-contact__action .button { width: 100%; }
}

/* P16: Anmeldebeginn an der Stelle des späteren Melde-Knopfs. Bewusst kein
   Knopf: gestrichelter Rahmen, nicht anklickbar. */
.registration-soon {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    border: 1px dashed color-mix(in oklch, var(--text) 45%, transparent);
    border-radius: 999px;
    padding: 6px 16px;
    color: var(--text);
    font-size: .9rem;
    font-weight: 700;
    white-space: nowrap;
}