/* ==========================================================================
   Kartbahn Lyss · Event-Seite — Komponenten & Layout
   Benötigt tokens.css (vorher laden). Mobile first. Doku: /DESIGN.md
   Inhalt:
   1 Reset/Basis  2 Layout  3 Header  4 Typo  5 Hero  6 Segmented
   7 Cards  8 Inset-Listen  9 Badges/Chips/Plate  10 Tabellen  11 Buttons
   12 Zeitplan  13 Stats/Progress  14 Charts  15 States  16 Utilities
   ========================================================================== */

/* 1 ─── Reset / Basis ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: calc(var(--header-h) + var(--safe-top) + 56px);
}
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;            /* nie Seiten-Horizontalscroll */
  touch-action: manipulation;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, table { margin: 0; }
ul[role="list"], ol[role="list"], .list { list-style: none; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
svg { overflow: visible; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
::selection { background: var(--accent-tint); color: var(--ink); }
[hidden] { display: none !important; }

.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: var(--z-overlay);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  background: var(--ink); color: var(--bg); font-weight: var(--fw-semibold);
}
.skip-link:focus { top: calc(var(--safe-top) + var(--space-2)); }

/* 2 ─── Layout ────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2 + var(--safe-left) + var(--safe-right));
  margin-inline: auto;
  padding-left: calc(var(--gutter) + var(--safe-left));
  padding-right: calc(var(--gutter) + var(--safe-right));
}
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2 + var(--safe-left) + var(--safe-right)); }
.main { padding-bottom: calc(var(--space-10) + var(--safe-bottom)); }
.section { margin-top: var(--space-7); }
.section + .section { margin-top: var(--space-8); }
.section__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.stack > * + * { margin-top: var(--stack, var(--space-4)); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster, var(--space-2)); }
.grid { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 3 ─── Sticky Header (Blur-Material wie iOS-Navigationsleiste) ───────── */
.app-header {
  position: sticky; top: 0; z-index: var(--z-header);
  padding-top: var(--safe-top);
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out);
}
.app-header.is-scrolled { border-bottom-color: var(--separator); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .app-header { background: var(--bg); }
}
/* Drei Spalten wie iOS: Zurück | Titel (zentriert) | Aktionen. Seitenspalten clippen,
   damit ein langer Zurück-Text nie in den Titel läuft. */
.app-header__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
  align-items: center; gap: var(--space-2);
  min-height: var(--header-h);
}
.app-header__lead { min-width: 0; display: flex; align-items: center; overflow: hidden; }
.app-header__title {
  min-width: 0; max-width: 50vw; text-align: center;
  font-size: var(--fs-body); font-weight: var(--fw-semibold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
}
.app-header.is-scrolled .app-header__title { opacity: 1; }
.app-header__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-1); min-width: 0; }
.brand { min-width: 0; }
.brand__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.brand {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--tap); color: var(--ink); text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand__mark {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  background: var(--brand-red); color: #fff;
  font-weight: var(--fw-heavy); font-style: italic; font-size: 15px; letter-spacing: -0.04em;
}
.brand__name { font-size: var(--fs-sub); font-weight: var(--fw-semibold); line-height: 1.1; }
.brand__sub { display: block; font-size: var(--fs-caption); font-weight: var(--fw-regular); color: var(--ink-2); }

.back-link {
  display: inline-flex; align-items: center; gap: 2px; max-width: 100%; min-width: var(--tap);
  min-height: var(--tap); margin-left: -6px; padding-right: var(--space-2);
  color: var(--accent); font-size: var(--fs-body);
}
.back-link:hover { text-decoration: none; opacity: .75; }
.back-link svg { width: 22px; height: 22px; flex: none; }
.back-link span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Schmal + Titel sichtbar: nur der Pfeil (wie iOS), Label bleibt als aria-label */
@media (max-width: 420px) {
  .app-header.is-scrolled .app-header__title:not(:empty) { max-width: 56vw; }
  .app-header.is-scrolled:has(.app-header__title:not(:empty)) .back-link span { display: none; }
}

/* Header-Zusatzzeile, z.B. Segmented Control unter Titel */
.subbar {
  position: sticky; z-index: calc(var(--z-header) - 1);
  top: calc(var(--header-h) + var(--safe-top));
  padding-block: var(--space-2);
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

/* 4 ─── Typografie ────────────────────────────────────────────────────── */
.large-title {
  font-size: var(--fs-large); font-weight: var(--fw-bold);
  line-height: var(--lh-tight); letter-spacing: var(--tracking-title);
  text-wrap: balance;
}
.title-1 { font-size: var(--fs-title1); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: var(--tracking-title); text-wrap: balance; }
.title-2 { font-size: var(--fs-title2); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: -0.01em; text-wrap: balance; }
.title-3 { font-size: var(--fs-title3); font-weight: var(--fw-semibold); line-height: var(--lh-snug); text-wrap: balance; }
.headline { font-size: var(--fs-body); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.body { font-size: var(--fs-body); }
.subhead { font-size: var(--fs-sub); }
.footnote { font-size: var(--fs-footnote); }
.caption { font-size: var(--fs-caption); }
.text-2 { color: var(--ink-2); }
.text-3 { color: var(--ink-3); }
.text-accent { color: var(--accent); }
.page-head { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.page-head__meta { margin-top: var(--space-1); color: var(--ink-2); font-size: var(--fs-sub); }

/* Race-Zahl: kursiv, heavy, tabellarisch — Echo der Logo-Wortmarke.
   Für Positionen, Live-Uhr, Bestzeit-Highlight. Sparsam einsetzen. */
.race-num {
  font-weight: var(--fw-heavy);
  font-style: italic;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}

/* 5 ─── Hero (Startseite / Event-Kopf) ────────────────────────────────── */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--hero-bg); color: var(--hero-ink);
  padding: var(--space-6) var(--space-5) var(--space-5);
  box-shadow: inset 0 0 0 1px var(--hero-edge, transparent);
}
.hero__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.hero__kicker { font-size: var(--fs-sub); font-weight: var(--fw-semibold); color: var(--hero-ink-2); }
.hero__title {
  margin-top: var(--space-6);
  font-size: var(--fs-display); font-weight: var(--fw-heavy); font-style: italic;
  line-height: 0.95; letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.hero__title em { font-style: inherit; color: var(--hero-glow, var(--brand-red)); } /* nur Jahreszahl/Zusatz */
.hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4);
  margin-top: var(--space-3); color: var(--hero-ink-2); font-size: var(--fs-sub);
}
.hero__meta strong { color: var(--hero-ink); font-weight: var(--fw-semibold); }
.hero__now {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-3);
  margin-top: var(--space-6); padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.hero__now-label { font-size: var(--fs-footnote); color: var(--hero-ink-2); }
.hero__now-title { margin-top: 2px; font-size: var(--fs-title3); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.hero__clock { font-size: 2.5rem; color: var(--hero-ink); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.hero .btn--secondary { background: rgba(255, 255, 255, 0.12); color: #fff; }
.hero .btn--secondary:hover { background: rgba(255, 255, 255, 0.2); }
.hero .btn--primary { background: var(--hero-glow, var(--brand-red)); color: #000; }
[data-event="kappelen-trophy"] .hero .btn--primary { background: #fff; color: var(--brand-navy); }

/* Tages-Streifen: jede Session als Segment, Jetzt-Marker = rote Linie.
   Signatur-Element: die echte Tagesstruktur auf einen Blick. */
.day-strip { margin-top: var(--space-5); }
.day-strip__track {
  position: relative; display: flex; gap: 2px; height: 10px;
}
.day-strip__seg {
  flex: var(--w, 1) 1 0; min-width: 2px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.22);
}
.day-strip__seg.is-past { background: rgba(255, 255, 255, 0.5); }
.day-strip__seg.is-live { background: var(--hero-glow, var(--brand-red)); }
.day-strip__seg.is-break { background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.day-strip__now {
  position: absolute; top: -5px; bottom: -5px; left: var(--now, 0%);
  width: 2px; margin-left: -1px; border-radius: 1px; background: #fff;
}
.day-strip__labels {
  display: flex; justify-content: space-between; margin-top: var(--space-2);
  font-size: var(--fs-caption); color: var(--hero-ink-2); font-variant-numeric: tabular-nums;
}

/* 6 ─── Segmented Control (iOS) ───────────────────────────────────────── */
.segmented {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 2px; padding: 2px;
  border-radius: calc(var(--radius-sm) + 1px);
  background: var(--surface-3);
}
.segmented__item {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 36px; padding: 0 var(--space-3);
  border: 0; border-radius: 7px; background: transparent;
  color: var(--ink); font-size: var(--fs-sub); font-weight: var(--fw-medium);
  white-space: nowrap; text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
/* Unsichtbare Tap-Fläche bis 44px */
.segmented__item::after { content: ""; position: absolute; inset: -4px 0; }
.segmented__item:hover { text-decoration: none; background: rgba(127, 127, 127, 0.12); }
.segmented__item[aria-selected="true"],
.segmented__item[aria-current="page"],
.segmented__item.is-active {
  background: var(--bg-elevated); font-weight: var(--fw-semibold);
  box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 0 0 0.5px rgba(0,0,0,.04);
}
:root[data-theme="dark"] .segmented__item[aria-selected="true"],
:root[data-theme="dark"] .segmented__item[aria-current="page"] { background: #636366; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .segmented__item[aria-selected="true"],
  :root:not([data-theme="light"]) .segmented__item[aria-current="page"],
  :root:not([data-theme="light"]) .segmented__item.is-active { background: #636366; }
}
:root[data-theme="dark"] .segmented__item.is-active { background: #636366; }

/* Scrollbare Filter-Chips (Kategorien) */
.filter-row {
  display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1); padding: 6px var(--gutter);
  scroll-padding-inline: var(--gutter);
  scroll-snap-type: x proximity; overscroll-behavior-x: contain;
}
/* Scroll-Hinweis rechts (nur wenn die Zeile überläuft; JS-frei über Masken-Verlauf) */
@supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) {
  .filter-row {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
}
.filter-row::-webkit-scrollbar { display: none; }
.filter-row > * { scroll-snap-align: start; flex: none; }

/* 7 ─── Cards ─────────────────────────────────────────────────────────── */
.card {
  background: var(--surface); border-radius: var(--radius-md);
  padding: var(--space-4);
  min-width: 0;
}
.card--flush { padding: 0; overflow: hidden; }
.card__header {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.card--flush > .card__header { padding: var(--space-4) var(--space-4) 0; }
.card__title { font-size: var(--fs-body); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.card__sub { margin-top: 2px; font-size: var(--fs-footnote); color: var(--ink-2); }
.card__footer { margin-top: var(--space-3); font-size: var(--fs-footnote); color: var(--ink-2); }
a.card, .card--link {
  display: block; color: inherit; text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast);
}
a.card:hover { text-decoration: none; background: var(--surface-pressed); }
a.card:active { transform: scale(0.985); }

/* Event-Card in der Liste der Startseite */
.event-card { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; }
.event-card__date {
  display: grid; place-items: center; align-content: center;
  width: 56px; height: 56px; border-radius: var(--radius-sm);
  background: var(--surface-2); line-height: 1;
}
.event-card__day { font-size: 1.375rem; font-weight: var(--fw-heavy); font-style: italic; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.event-card__mon { margin-top: 3px; font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--accent); }
.event-card--night .event-card__date { background: #050507; color: #fff; }
.event-card--night .event-card__mon { color: #ff4d5e; }
.event-card__title { font-size: var(--fs-body); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.event-card__sub { font-size: var(--fs-footnote); color: var(--ink-2); }

/* 8 ─── Inset-Grouped-Listen (iOS) ────────────────────────────────────── */
.list-group { margin-top: var(--space-6); }
.list-group:first-child { margin-top: 0; }
.list-group__header {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-2);
  font-size: var(--fs-footnote); color: var(--ink-2);
}
.list-group__header strong { color: var(--ink); font-size: var(--fs-title3); font-weight: var(--fw-bold); letter-spacing: -0.01em; }
.list-group__footer { padding: var(--space-2) var(--space-4) 0; font-size: var(--fs-footnote); color: var(--ink-2); }
.list {
  margin: 0; background: var(--surface); border-radius: var(--radius-md); overflow: hidden;
}
.row {
  position: relative;
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--row-h);
  padding: var(--space-2) var(--space-4);
  color: inherit; text-decoration: none;
  background: var(--surface);
}
/* Trenner beginnt an der Textkante (iOS) */
.row + .row::before,
.list > li + li > .row::before {
  content: ""; position: absolute; top: 0; right: 0;
  left: var(--row-inset, var(--space-4));
  height: 0.5px; background: var(--separator);
}
.row--lead-inset { --row-inset: 60px; }
a.row, button.row { width: 100%; border: 0; text-align: left; cursor: pointer; transition: background-color var(--dur-fast); }
a.row:hover, button.row:hover { text-decoration: none; background: var(--surface-pressed); }
a.row:active, button.row:active { background: var(--surface-3); }
a.row:focus-visible, button.row:focus-visible { outline-offset: -3px; border-radius: 0; }
.row__lead { flex: none; display: flex; align-items: center; justify-content: center; min-width: 32px; }
.row__main { flex: 1; min-width: 0; padding-block: var(--space-1); }
.row__title, .row__sub, .sched-item__title, .sched-item__sub, .card__title, .card__sub, .stat__label, .stat__sub, .bar-list__name { display: block; }
.row__title { font-size: var(--fs-body); line-height: var(--lh-snug); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__sub { margin-top: 1px; font-size: var(--fs-footnote); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__trail { flex: none; display: flex; align-items: center; gap: var(--space-2); color: var(--ink-2); font-size: var(--fs-sub); font-variant-numeric: tabular-nums; text-align: right; }
.row__value { color: var(--ink); font-variant-numeric: tabular-nums; }
.row__chev { flex: none; width: 8px; height: 14px; color: var(--ink-3); opacity: .7; }
.row.is-selected { background: var(--accent-tint); }
.row.is-dimmed .row__title, .row.is-dimmed .row__sub, .row.is-dimmed .row__trail { opacity: .55; }

/* Key-Value-Paare */
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-4); font-size: var(--fs-sub); }
.kv dt { color: var(--ink-2); }
.kv dd { text-align: right; font-variant-numeric: tabular-nums; }

/* 9 ─── Badges, Chips, Plate ──────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  height: 22px; padding: 0 8px; border-radius: var(--radius-pill);
  font-size: var(--fs-caption); font-weight: var(--fw-semibold); line-height: 1;
  white-space: nowrap; font-variant-numeric: tabular-nums;
  background: var(--upcoming-tint); color: var(--upcoming-ink);
}
.badge--live { background: var(--live); color: #fff; letter-spacing: 0.02em; }
:root[data-theme="dark"] .badge--live { color: #000; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .badge--live { color: #000; } }
.badge--final { background: var(--final-tint); color: var(--final-ink); }
.badge--upcoming { background: var(--upcoming-tint); color: var(--upcoming-ink); }
.badge--accent { background: var(--accent-tint); color: var(--accent-tint-ink); }
.badge--warn { background: var(--warn-tint); color: var(--warn-ink); }
.badge--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--control-border); color: var(--ink-2); }
.hero .badge--upcoming, .hero .badge--final { background: rgba(255,255,255,.14); color: #fff; }

/* Pulsierender Live-Punkt (auch einzeln nutzbar) */
.live-dot {
  position: relative; display: inline-block; flex: none;
  width: 7px; height: 7px; border-radius: 50%; background: currentColor;
}
.live-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: currentColor; animation: live-pulse 1.6s var(--ease-out) infinite;
}
.live-dot--red { color: var(--live); }
@keyframes live-pulse {
  0% { transform: scale(1); opacity: .7; }
  80%, 100% { transform: scale(2.8); opacity: 0; }
}

.chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: 32px; padding: 0 12px; border-radius: var(--radius-pill);
  border: 0; background: var(--surface); color: var(--ink);
  font-size: var(--fs-sub); font-weight: var(--fw-medium); white-space: nowrap; text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--separator);
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
button.chip, a.chip { position: relative; cursor: pointer; }
button.chip::after, a.chip::after { content: ""; position: absolute; inset: -6px 0; }
.chip:hover { text-decoration: none; background: var(--surface-pressed); }
.chip[aria-pressed="true"], .chip.is-active { background: var(--ink); color: var(--bg); box-shadow: none; }
.chip--sm { min-height: 24px; padding: 0 8px; font-size: var(--fs-caption); font-weight: var(--fw-semibold); box-shadow: none; }

/* Kategorie-Chips: .chip--cat-1 … --cat-6 bzw. .cat-1 … als Farbquelle */
.cat-1 { --cat: var(--cat-1); --cat-tint: var(--cat-1-tint); --cat-ink: var(--cat-1-ink); }
.cat-2 { --cat: var(--cat-2); --cat-tint: var(--cat-2-tint); --cat-ink: var(--cat-2-ink); }
.cat-3 { --cat: var(--cat-3); --cat-tint: var(--cat-3-tint); --cat-ink: var(--cat-3-ink); }
.cat-4 { --cat: var(--cat-4); --cat-tint: var(--cat-4-tint); --cat-ink: var(--cat-4-ink); }
.cat-5 { --cat: var(--cat-5); --cat-tint: var(--cat-5-tint); --cat-ink: var(--cat-5-ink); }
.cat-6 { --cat: var(--cat-6); --cat-tint: var(--cat-6-tint); --cat-ink: var(--cat-6-ink); }
.chip--cat { background: var(--cat-tint); color: var(--cat-ink); box-shadow: none; }
.chip--cat[aria-pressed="true"], .chip--cat.is-active { background: var(--cat); color: #fff; }
.dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cat, var(--ink-3)); }
.cat-bar { width: 4px; align-self: stretch; border-radius: 2px; background: var(--cat, var(--separator-strong)); flex: none; }

/* Kart-Startnummer als "Nummernschild" */
.plate {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: 34px; height: 26px; padding: 0 6px;
  border-radius: var(--radius-xs);
  background: var(--surface-2); color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--cat, var(--separator-strong));
  font-size: var(--fs-sub); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.plate--lg { min-width: 48px; height: 36px; font-size: var(--fs-title3); }

/* Position (Rang) */
.pos { display: inline-block; min-width: 1.6em; text-align: center; font-size: var(--fs-title3); }
.pos--1 { color: var(--gold-ink, var(--gold)); }
.pos--2 { color: var(--silver-ink, var(--silver)); }
.pos--3 { color: var(--bronze-ink, var(--bronze)); }

/* 10 ─── Tabellen ─────────────────────────────────────────────────────── */
.table-wrap {
  position: relative; max-width: 100%;
  overflow-x: auto; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--surface); border-radius: var(--radius-md);
}
.table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: var(--fs-sub); font-variant-numeric: tabular-nums;
}
.table th, .table td {
  padding: 0 var(--space-3); height: 48px; text-align: left; white-space: nowrap;
  background: var(--surface);
  border-bottom: 0.5px solid var(--separator);
}
.table tbody tr:last-child td { border-bottom: 0; }
.table thead th {
  position: sticky; top: 0; z-index: 2;
  height: 36px; font-size: var(--fs-footnote); font-weight: var(--fw-regular); color: var(--ink-2);
  border-bottom-color: var(--separator-strong);
}
.table th:first-child, .table td:first-child { padding-left: var(--space-4); }
.table th:last-child, .table td:last-child { padding-right: var(--space-4); }
.table .num { text-align: right; }
.table .col-tight { width: 1%; }
.table .col-name { min-width: 120px; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; font-weight: var(--fw-medium); }
.table .is-best { color: var(--accent); font-weight: var(--fw-semibold); }       /* schnellste Runde */
.table .is-pb { color: var(--final); font-weight: var(--fw-semibold); }           /* persönl. Bestzeit */
.table tbody tr.is-selected td { background: var(--accent-tint); }
.table tbody tr[data-href], .table tbody tr.is-link { cursor: pointer; }
.table tbody tr[data-href] > *, .table tbody tr.is-link > * { height: var(--tap); }
.table tbody tr[data-href]:hover td, .table tbody tr.is-link:hover td { background: var(--surface-pressed); }

/* Sticky erste Spalte(n): .table--sticky-first; zweite mit .sticky-2 */
.table--sticky-first th:first-child,
.table--sticky-first td:first-child { position: sticky; left: 0; z-index: 1; }
.table--sticky-first thead th:first-child { z-index: 3; }
.table--sticky-first .sticky-2 { position: sticky; left: var(--sticky-1-w, 52px); z-index: 1; }
.table--sticky-first thead .sticky-2 { z-index: 3; }
/* Schattenkante, wenn gescrollt (JS setzt .is-scrolled-x auf .table-wrap) */
.table--sticky-first td:first-child, .table--sticky-first th:first-child { background-clip: padding-box; }
.table-wrap.is-scrolled-x .sticky-edge { box-shadow: 6px 0 8px -6px rgba(0,0,0,.25); }
.table-wrap.is-scrolled-x .table--sticky-first:not(:has(.sticky-2)) td:first-child,
.table-wrap.is-scrolled-x .table--sticky-first:not(:has(.sticky-2)) th:first-child { box-shadow: 6px 0 8px -6px rgba(0,0,0,.25); }

/* 11 ─── Buttons ──────────────────────────────────────────────────────── */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap); padding: 0 var(--space-5);
  border: 0; border-radius: var(--radius-pill);
  font-size: var(--fs-body); font-weight: var(--fw-semibold); line-height: 1; white-space: nowrap;
  text-decoration: none; cursor: pointer; user-select: none;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.97); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--secondary { background: var(--surface-3); color: var(--ink); }
.btn--secondary:hover { background: var(--separator-strong); }
.btn--tinted { background: var(--accent-tint); color: var(--accent-tint-ink); }
.btn--plain { background: transparent; color: var(--accent); padding-inline: var(--space-2); }
.btn--plain:hover { background: var(--accent-tint); }
.btn--sm { min-height: 32px; padding: 0 var(--space-3); font-size: var(--fs-sub); }
.btn--sm::after { content: ""; position: absolute; inset: -6px 0; } /* Tap-Fläche 44px */
.btn--block { display: flex; width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }

.icon-btn {
  display: inline-grid; place-items: center; flex: none;
  width: var(--tap); height: var(--tap); padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--accent);
  transition: background-color var(--dur-fast);
}
.icon-btn:hover { background: var(--accent-tint); }
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn--filled { background: var(--surface-3); color: var(--ink); width: 32px; height: 32px; position: relative; }
.icon-btn--filled::after { content: ""; position: absolute; inset: -6px; }

/* 12 ─── Live-Zeitplan ────────────────────────────────────────────────── */
/* <ol class="sched list"> <li class="sched-item is-past|is-live|is-next"> … */
.sched { background: var(--surface); border-radius: var(--radius-md); overflow: hidden; padding: 0; margin: 0; list-style: none; }
.sched-item {
  position: relative;
  display: grid; grid-template-columns: 52px 4px minmax(0, 1fr) auto; gap: 0 var(--space-3);
  align-items: center; min-height: 60px; padding: var(--space-3) var(--space-4);
  scroll-margin-top: calc(var(--header-h) + var(--safe-top) + 64px);
}
.sched-item + .sched-item::before {
  content: ""; position: absolute; top: 0; right: 0; left: calc(52px + 4px + var(--space-4) + var(--space-3) * 2);
  height: 0.5px; background: var(--separator);
}
.sched-item__time { font-size: var(--fs-sub); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; line-height: 1.2; }
.sched-item__end { display: block; font-size: var(--fs-caption); font-weight: var(--fw-regular); color: var(--ink-3); }
.sched-item__main { min-width: 0; }
.sched-item__title { font-size: var(--fs-body); line-height: var(--lh-snug); }
.sched-item__sub { margin-top: 1px; font-size: var(--fs-footnote); color: var(--ink-2); }
.sched-item__trail { display: flex; align-items: center; gap: var(--space-2); }
a.sched-item { color: inherit; text-decoration: none; transition: background-color var(--dur-fast); }
a.sched-item:hover { background: var(--surface-pressed); text-decoration: none; }

.sched-item.is-past .sched-item__time,
.sched-item.is-past .sched-item__title,
.sched-item.is-past .sched-item__sub { color: var(--ink-3); }
.sched-item.is-past .cat-bar { opacity: .35; }
.sched-item.is-break .sched-item__title { color: var(--ink-2); font-style: italic; }

.sched-item.is-live { background: var(--live-tint); padding-bottom: calc(var(--space-3) + 10px); }
.sched-item.is-live .sched-item__title { font-weight: var(--fw-semibold); }
.sched-item.is-live .sched-item__time { color: var(--live-ink); }
.sched-item.is-live::after { /* Fortschrittsbalken unten */
  content: ""; position: absolute; left: 0; bottom: 0; height: 4px;
  width: var(--progress, 0%); background: var(--live);
  transition: width 1s linear;
}
.sched-item.is-next .sched-item__time { color: var(--accent); }

/* "Jetzt"-Marker zwischen zwei Items */
.now-marker {
  position: relative; display: flex; align-items: center; gap: var(--space-2);
  height: 24px; padding: 0 var(--space-4);
  color: var(--live); font-size: var(--fs-caption); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums;
}
.now-marker::after { content: ""; flex: 1; height: 2px; border-radius: 1px; background: var(--live); }

/* Hinweisleiste "Als nächstes in 12 min" */
.next-up {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--surface); font-size: var(--fs-sub);
}
.next-up__count { margin-left: auto; flex: none; white-space: nowrap; font-size: var(--fs-title2); color: var(--accent); }
.next-up > :not(.next-up__count) { min-width: 0; }

/* 13 ─── Stats / Progress ─────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
@media (min-width: 720px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { background: var(--surface); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); min-width: 0; }
.stat__label { font-size: var(--fs-footnote); color: var(--ink-2); }
.stat__value { margin-top: 2px; font-size: var(--fs-title1); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.15; }
.stat__unit { font-size: var(--fs-sub); font-weight: var(--fw-medium); color: var(--ink-2); margin-left: 2px; }
.stat__sub { margin-top: 2px; font-size: var(--fs-footnote); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.progress { height: 6px; border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; }
.progress__bar { height: 100%; width: var(--value, 0%); border-radius: inherit; background: var(--accent); transition: width var(--dur-slow) var(--ease-out); }

/* 14 ─── Charts (handgeschriebenes SVG) ───────────────────────────────── */
.chart { position: relative; min-width: 0; }
.chart__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.chart__svg { width: 100%; height: auto; font-family: var(--font-sans); touch-action: pan-y; }
.chart__grid line, line.chart__grid { stroke: var(--chart-grid); stroke-width: 1; shape-rendering: crispEdges; }
.chart__axis line, line.chart__axis, path.chart__axis { stroke: var(--chart-axis); stroke-width: 1; shape-rendering: crispEdges; }
.chart__tick, .chart__axis text { fill: var(--chart-tick); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart__label { fill: var(--ink-2); font-size: 12px; }
.chart__value { fill: var(--ink); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chart__line { fill: none; stroke: var(--cat, var(--accent)); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart__line--muted { stroke: var(--chart-muted); stroke-width: 1.5; }
.chart__line.is-dim { opacity: .18; }
.chart__area { fill: var(--cat, var(--accent)); opacity: .12; }
.chart__bar { fill: var(--cat, var(--accent)); }
.chart__bar--muted { fill: var(--chart-muted); }
.chart__dot { fill: var(--cat, var(--accent)); stroke: var(--surface); stroke-width: 2; }
.chart__ref { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.chart__crosshair { stroke: var(--ink-3); stroke-width: 1; }
.chart__hit { fill: transparent; cursor: crosshair; }
.chart__legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-size: var(--fs-footnote); color: var(--ink-2); }
.chart__legend-item { display: inline-flex; align-items: center; gap: 6px; }
.chart__legend-item::before { content: ""; width: 10px; height: 3px; border-radius: 2px; background: var(--cat, var(--accent)); }
.chart__tooltip {
  position: absolute; z-index: var(--z-tooltip); pointer-events: none;
  min-width: 96px; padding: 6px 10px; border-radius: var(--radius-sm);
  background: var(--bg-elevated); color: var(--ink); box-shadow: var(--shadow-3);
  font-size: var(--fs-footnote); line-height: 1.35; font-variant-numeric: tabular-nums;
  transform: translate(-50%, calc(-100% - 10px));
  white-space: nowrap;
}
.chart__tooltip strong { display: block; font-weight: var(--fw-semibold); }
.chart__empty { display: grid; place-items: center; min-height: 160px; color: var(--ink-3); font-size: var(--fs-sub); }

/* Balken-Ranking als HTML (Bestzeiten) */
.bar-list { display: grid; gap: var(--space-2); }
.bar-list__row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-3); }
.bar-list__track { grid-column: 2 / 3; height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.bar-list__fill { height: 100%; width: var(--value, 0%); border-radius: inherit; background: var(--cat, var(--accent)); }
.bar-list__name { font-size: var(--fs-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-list__value { font-size: var(--fs-sub); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; text-align: right; }

/* 15 ─── Empty / Loading / Error ──────────────────────────────────────── */
.empty {
  display: grid; justify-items: center; gap: var(--space-2);
  padding: var(--space-9) var(--space-5); text-align: center;
  background: var(--surface); border-radius: var(--radius-md);
}
.empty__icon { width: 40px; height: 40px; color: var(--ink-3); }
.empty__title { font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.empty__text { max-width: 32ch; font-size: var(--fs-sub); color: var(--ink-2); }
.empty .btn { margin-top: var(--space-2); }

.skeleton {
  display: block; border-radius: var(--radius-xs);
  background: var(--surface-3);
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}
.skeleton--text { height: 0.9em; width: var(--w, 70%); margin-block: 0.3em; }
.skeleton--title { height: 1.4em; width: var(--w, 50%); }
.skeleton--row { height: var(--row-h); border-radius: 0; }
.skeleton--block { height: var(--h, 160px); border-radius: var(--radius-md); }
@keyframes skeleton-pulse { 50% { opacity: .45; } }

.spinner {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  border: 2px solid var(--surface-3); border-top-color: var(--ink-2);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.notice {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--warn-tint); color: var(--warn-ink); font-size: var(--fs-sub);
}
.notice--error { background: var(--live-tint); color: var(--live-ink); }
.notice--info { background: var(--surface); color: var(--ink-2); }

.updated { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-footnote); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* Footer */
.site-footer { margin-top: var(--space-10); padding: var(--space-6) 0 calc(var(--space-6) + var(--safe-bottom)); color: var(--ink-3); font-size: var(--fs-footnote); }
.site-footer a { color: var(--ink-2); display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: 2px; }

/* 16 ─── Utilities ────────────────────────────────────────────────────── */
.tnum { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold { font-weight: var(--fw-bold); }
.flex { display: flex; align-items: center; gap: var(--space-2); }
.flex-1 { flex: 1; min-width: 0; }
.ml-auto { margin-left: auto; }
.mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); }
.visually-hidden, .sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.fade-in { animation: fade-in var(--dur-base) var(--ease-out) both; }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } }

/* Reduced Motion: Pulsieren/Skeleton/Fortschritt ohne Bewegung */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
  .live-dot::after { display: none; }
  .skeleton { animation: none; opacity: .7; }
}

/* Druck (Aushang/QR) */
@media print {
  .app-header, .subbar, .site-footer, .btn, .icon-btn { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .list, .table-wrap, .sched { background: #fff; box-shadow: none; }
}