/* ==========================================================================
   Clean – letzte Schicht über tokens/app/schedule/results/night.
   Apple-artig schlicht: Systemschrift (SF Pro auf Apple-Geräten), echtes Schwarz,
   Ebenen nur über Helligkeit (#000 → #141414 → #232323), keine Linien, Schatten,
   Verläufe oder Glas. Weiss ist die Farbe der Bedienung (aktiv = invertiert),
   Kartbahn-Rot gehört dem Logo und dem, was jetzt gerade läuft.
   ========================================================================== */

:root,
:root[data-theme="dark"] {
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;

  --bg: #000000;
  --surface: #000000;
  --raised: #141414;          /* Karte */
  --raised-2: #232323;        /* darin, Steuerelemente */
  --bg-elevated: #1c1c1c;     /* Tooltip, Dialog */
  --surface-2: #141414;
  --surface-3: #232323;
  --header-bg: #000000;

  --ink: #ffffff;
  --ink-2: #b4b4b4;           /* Nebentext, 10:1 */
  --ink-3: #949494;           /* Meta, 7:1 */
  --ink-past: #949494;        /* Vergangenes: gedämpft, aber lesbar */
  --rail-dim: #333333;
  --separator: #1c1c1c;       /* Tabellenzeilen: eine Tonstufe, keine Linie */
  --separator-strong: #2a2a2a;

  --accent: #ff3347;          /* nur "jetzt" */
  --live: #ff3347;
  --title-red: #ffffff;

  --fs-body: 1.0625rem;       /* 17px wie iOS */
  --fs-sub: 1rem;
  --fs-footnote: 0.875rem;
}

body { font-size: var(--fs-body); line-height: 1.47; letter-spacing: -0.01em; }

/* ---------- Kopf: Logo, darunter "Beta · bei knieses.ch", rechts der Umschalter ---------- */
.app-header { background: #000; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid transparent; }
.app-header.is-scrolled { border-bottom-color: #1c1c1c; }
.app-header__inner,
.site-footer__inner,
.main.container { max-width: calc(760px + var(--gutter) * 2 + var(--safe-left) + var(--safe-right)); margin-inline: auto; }
.brand-block { gap: 4px; }
.brand__tag { display: inline-flex; align-items: center; gap: 8px; line-height: 1; }
.beta {
  display: inline-block;
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--kb-red);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
}
.brand__credit {
  display: inline-flex; align-items: center;
  min-height: 24px;
  padding: 0;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  letter-spacing: 0;
}
.brand__credit:hover { color: var(--ink); text-decoration: none; }

/* Umschalter: Spur in einer Tonstufe, aktive Seite invertiert */
.mode-toggle { padding: 3px; border-radius: 999px; background: var(--raised-2); }
.mode-toggle__opt { border: 0 !important; border-radius: 999px !important; padding: 7px 12px; color: var(--ink-2); font-size: 0.8125rem; }
.mode-toggle__opt.is-on { background: #fff; color: #000; }

/* ---------- Titel: gross, ruhig, höchstens zwei Zeilen ---------- */
.ngp-hero { padding: var(--space-7) 0 0; }
.ngp-hero__title {
  margin: 0;
  max-width: none;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  font-size: clamp(2.5rem, 11vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-transform: none;
  color: var(--ink);
  text-wrap: balance;
}
.ngp-hero__year { color: var(--ink-3); -webkit-text-stroke: 0; }
.ngp-hero__date { display: block; margin-top: var(--space-3); font-size: 1.0625rem; color: var(--ink-2); }
.ngp-hero__date time { color: var(--ink); font-weight: 600; }

/* Was läuft gerade – eine Karte, eine Tonstufe über dem Grund */
.ngp-status {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: 0;
  border-radius: 18px;
  background: var(--raised);
}
.ngp-status__label { font-size: var(--fs-footnote); }
.ngp-status__title { font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.015em; }
.ngp-status__sub { font-size: var(--fs-footnote); color: var(--ink-3); }
.ngp-status__clock {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  font-size: 2.5rem;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.ngp-status[data-mode="soon"] .ngp-status__clock,
.ngp-status[data-mode="next"] .ngp-status__clock { color: var(--ink); }
.ngp-status__unit { font-weight: 600; font-size: 0.5em; color: var(--ink-2); }

/* ---------- Tabs: weisser Strich unter dem aktiven, sonst nur Schrift ---------- */
.event-tabs {
  background: #000;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 0;
  margin-top: var(--space-5);
}
.tabs { gap: var(--space-5); }
.tabs__item { font-size: 1.0625rem; font-weight: 600; color: var(--ink-3); }
.tabs__item[aria-selected="true"] { color: var(--ink); }
.tabs__item[aria-selected="true"]::after { background: #fff; height: 2px; bottom: 6px; }

/* Kategorie-Filter: aktive Kategorie invertiert */
.tl-filters { gap: var(--space-2); margin-top: var(--space-3); }
.tl-filter {
  min-height: 36px; padding: 0 14px; border-radius: 999px;
  background: var(--raised); color: var(--ink-2); font-size: 0.9375rem;
}
.tl-filter[aria-pressed="true"] { background: #fff; color: #000; }
.tl-filter[aria-pressed="true"]::after { display: none; }
.tl-filter[aria-pressed="true"] .tl-filter__dot { box-shadow: 0 0 0 1.5px #fff; }
.tl-filter::before { content: ""; position: absolute; inset: -4px 0; } /* 44px Trefferfläche */

/* ---------- Zeitplan ---------- */
.tl-item__head { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; }
.tl-item__sub { font-size: 0.9375rem; color: var(--ink-2); }
.tl-item__time { color: inherit; }
.tl-item__results,
.tl-item__pdf { color: var(--ink); font-weight: 600; font-size: 0.9375rem; text-decoration: none; }
.tl-item__results::after { content: " ›"; color: var(--ink-3); }
.tl-item__pdf { color: var(--ink-2); }
.tl-now p { font-size: 0.875rem; }

/* ---------- Lauf-Seite ---------- */
.session-head__title, .large-title, .title-1 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.session-head__title { font-size: clamp(2rem, 9vw, 3rem); }
.race-num { font-family: var(--font-display); font-style: normal; font-weight: 700; letter-spacing: -0.02em; }
.chip, .badge--outline { box-shadow: none; background: var(--raised-2); }
.chip[aria-pressed="true"] { background: #fff; color: #000; }
.pdf-link { border: 0; background: #fff; color: #000; }
.pdf-link::before { color: var(--kb-red); }
.pdf-link:hover { border: 0; filter: brightness(0.92); }
.podium__step { border-top: 0; background: var(--raised); border-radius: 14px; }
.podium__step--1 { background: var(--raised-2); }
.stat { border-top: 0; background: var(--raised); border-radius: 14px; padding: var(--space-3) var(--space-4); }
.card { border-top: 0; }
.latest { border-bottom: 0; background: var(--raised); border-radius: 18px; padding: var(--space-4) var(--space-5); }
.ngp-status, .latest, .podium__step, .stat { box-shadow: none; }
.search input, .search__input, input[type="search"] { background: var(--raised); border: 0; }

/* ---------- Einfach-Ansicht: bleibt wie vorher (Wunsch des Betreibers) ---------- */
.simple { --separator: rgba(255, 255, 255, 0.1); }
.simple__h1 { font-family: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif; color: var(--kb-red); letter-spacing: 0; }

/* ---------- Fuss: eine Tonstufe statt Linie ---------- */
.site-footer { border-top: 0; background: #0b0b0b; margin-top: var(--space-9); }
.site-footer__meta { max-width: 60ch; font-size: var(--fs-footnote); color: var(--ink-3); }
.signature__name { font-family: var(--font-display); font-style: normal; text-transform: none; font-weight: 700; font-size: 2rem; letter-spacing: -0.03em; }
.signature__tld { color: var(--ink-3); }

/* ---------- Willkommens-Hinweis (erster Besuch) ---------- */
.welcome {
  width: min(100% - 32px, 420px);
  margin: auto auto calc(16px + var(--safe-bottom));
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: var(--bg-elevated);
  color: var(--ink);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); /* schwebt wirklich */
}
@media (min-width: 600px) { .welcome { margin: auto; } }
.welcome::backdrop { background: rgba(0, 0, 0, 0.6); }
.welcome__inner { padding: 22px 22px 18px; }
.welcome__badge { margin: 0 0 10px; }
.welcome__title { margin: 0; font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; }
.welcome__text { margin: 8px 0 18px; font-size: 1rem; line-height: 1.45; color: var(--ink-2); }
.welcome__ok {
  display: block; width: 100%; min-height: 50px;
  border: 0; border-radius: 14px;
  background: #fff; color: #000;
  font: inherit; font-size: 1.0625rem; font-weight: 600; cursor: pointer;
}
.welcome__ok:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.welcome[open] { animation: welcome-in 280ms var(--ease-out) both; }
@keyframes welcome-in { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { .welcome[open] { animation: none; } }

/* Druck & Fokus */
:focus-visible { outline-color: #fff; }

/* Korrekturen nach dem ersten Blick */
.segmented__item[aria-selected="true"], .segmented__item.is-active, .segmented__item[aria-pressed="true"] { box-shadow: inset 0 -2px 0 #fff !important; }
.segmented { border-bottom: 0; }
.welcome__ok:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.welcome { box-shadow: none; }
.welcome::backdrop { background: rgba(0, 0, 0, 0.72); }
.tl-filters { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
.ngp-hero__title { font-size: clamp(2.5rem, 11vw, 3.5rem); }
.pdf-link::before { font-size: 0.75rem; letter-spacing: 0.02em; }

/* Web Interface Guidelines */
button, a, .tl-filter, .mode-toggle { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.mode-toggle:hover .mode-toggle__opt:not(.is-on) { color: var(--ink); }
.tl-filter:hover:not([aria-pressed="true"]) { color: var(--ink); background: var(--raised-2); }
.welcome { overscroll-behavior: contain; }
.welcome__ok:hover { background: #e6e6e6; }

/* ---------- Hintergrund etwas heller (Wunsch) ---------- */
:root, :root[data-theme="dark"] {
  --bg: #121212;
  --surface: #121212;
  --header-bg: #121212;
  --raised: #1d1d1d;
  --raised-2: #2b2b2b;
  --bg-elevated: #262626;
  --surface-2: #1d1d1d;
  --surface-3: #2b2b2b;
  --separator: #222222;
  --rail-dim: #3a3a3a;
}
.app-header, .event-tabs { background: var(--bg); }
.app-header.is-scrolled { border-bottom-color: #242424; }
.site-footer { background: #0c0c0c; }

/* ---------- Bestzeiten + Konstanz: gleiche Zeilenhöhe, gleich hohe Karten ---------- */
.analysis__pair { align-items: stretch; }
.analysis__pair > .card { height: 100%; }
.best-bars { gap: 0; }
.best-bars .bar-list__row { height: 52px; align-items: center; margin: 0; }
.best-bars__main { gap: 6px; }
.best-bars .bar-list__value { line-height: 1.15; }

/* ---------- Entwicklung: eine Kategorie pro Seite, seitlich wischen ---------- */
.dev-scroller {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.dev-scroller::-webkit-scrollbar { display: none; }
.dev-scroller > * { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.carousel__nav { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-top: var(--space-3); }
.carousel__arrow {
  width: 44px; height: 44px; border: 0; border-radius: 999px;
  background: var(--raised); color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.carousel__arrow:hover:not(:disabled) { background: var(--raised-2); }
.carousel__arrow:disabled { opacity: .35; cursor: default; }
.carousel__dots { display: flex; gap: var(--space-2); }
.carousel__dot {
  min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px;
  background: var(--raised); color: var(--ink-2); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer;
}
.carousel__dot[aria-current="true"] { background: #fff; color: #000; }
@media (max-width: 420px) {
  .carousel__dot { padding: 0; width: 10px; min-height: 10px; height: 10px; }
  .carousel__dot::before { content: ""; position: absolute; }
  .carousel__dot { position: relative; }
  .carousel__dot::after { content: ""; position: absolute; inset: -17px -6px; } /* Trefferfläche */
  .carousel__dot-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
.dev .section__head, .dev .dev__intro { padding-inline: 0; margin-inline: 0; }

/* =================== Feinschliff: Kopf, Fuss, PDF, Willkommen =================== */

/* Kopf: Zurück als runder Knopf, mittig zum Logo-Block; Tag fein */
.app-header__lead { align-items: center; gap: 10px; }
.back-btn {
  flex: none;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--raised);
  color: var(--ink);
  text-decoration: none;
  position: relative;
}
.back-btn::after { content: ""; position: absolute; inset: -4px; } /* 44px Trefferfläche */
.back-btn svg { width: 18px; height: 18px; margin-left: -2px; }
.back-btn:hover { background: var(--raised-2); text-decoration: none; }
.back-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.brand-block { gap: 5px; }
.brand__logo { width: 168px; }
.brand__tag { gap: 7px; }
.beta {
  padding: 2px 6px 3px;
  border-radius: 5px;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.1;
  background: var(--kb-red);
}
.brand__credit { font-size: 0.75rem; font-weight: 600; color: var(--ink-3); min-height: 20px; }
.brand__credit:hover { color: var(--ink); }

/* Lauf: PDF + Stand auf einer Linie */
.session-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: var(--space-4); }
.pdf-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 16px 0 12px;
  border-radius: 999px;
  background: #fff; color: #000;
  font-size: 0.9375rem; font-weight: 600;
  text-decoration: none;
}
.pdf-btn svg { width: 18px; height: 18px; color: var(--kb-red); }
.pdf-btn:hover { background: #e9e9e9; text-decoration: none; }
.pdf-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.session-actions .session-head__updated { margin: 0; font-size: 0.875rem; color: var(--ink-3); }

/* Fuss: eine Feedback-Karte, darunter Signatur + Logo, ganz unten die Fussnote */
.site-footer { background: var(--bg); margin-top: var(--space-9); padding: 0 0 calc(var(--space-7) + var(--safe-bottom)); }
.foot-card {
  padding: var(--space-5);
  border-radius: 20px;
  background: var(--raised);
}
.foot-card__top { display: flex; align-items: center; gap: 10px; margin: 0; }
.foot-card__title { font-size: 1.125rem; font-weight: 700; color: var(--ink); letter-spacing: -0.015em; }
.foot-card__text { margin: 8px 0 14px !important; font-size: 1rem; color: var(--ink-2); max-width: 40ch; }
.foot-card__mail {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 18px;
  border-radius: 999px;
  background: #fff; color: #000 !important;
  font-size: 0.9375rem; font-weight: 600; text-decoration: none !important;
}
.foot-card__mail:hover { background: #e9e9e9; }
.foot-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-7); }
.foot-row__logo { height: 22px; width: auto; opacity: .9; margin-bottom: 6px; }
.site-footer .signature { margin-top: 0; padding: 0; }
.signature__by { font-size: 0.875rem; }
.signature__name { font-size: 2.25rem; }
.site-footer__meta { margin-top: var(--space-5) !important; font-size: 0.8125rem; color: var(--ink-3); }
.site-footer__sim { font-size: 0.8125rem; }
@media (max-width: 420px) {
  .foot-row { flex-direction: column-reverse; align-items: flex-start; gap: var(--space-5); }
}

/* Willkommen: Logo, Titel, zwei kurze Absätze, Feedback-Zeile, ein Knopf */
.welcome { width: min(100% - 24px, 440px); border-radius: 26px; background: #1c1c1c; }
.welcome__inner { padding: 24px 22px 20px; }
.welcome__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.welcome__logo { height: 22px; width: auto; }
.welcome__title { font-size: 1.625rem; line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; }
.welcome__text { margin: 10px 0 0; font-size: 1rem; line-height: 1.5; color: var(--ink-2); }
.welcome__mail {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 16px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #262626;
  color: var(--ink); font-size: 0.9375rem; font-weight: 600; text-decoration: none;
}
.welcome__mail svg { flex: none; width: 22px; height: 22px; color: var(--ink-2); }
.welcome__mail-label { display: block; font-size: 0.75rem; font-weight: 500; color: var(--ink-3); }
.welcome__mail:hover { background: #2e2e2e; text-decoration: none; }
.welcome__ok { border-radius: 16px; min-height: 52px; }
.welcome__title:focus { outline: none; }
.site-footer .foot-card__mail { padding: 0 20px; min-height: 44px; }

/* =================== Kopf & Fuss – Neubau =================== */

/* Hinweisstreifen ganz oben (scrollt weg) */
.topnote {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 8px;
  margin: 0;
  padding: calc(8px + var(--safe-top)) 16px 8px;
  background: var(--raised);
  font-size: 0.8125rem; line-height: 1.3; color: var(--ink-2);
  text-align: center;
}
.topnote a { color: var(--ink); font-weight: 600; text-decoration: none; }
.topnote a:hover { text-decoration: underline; text-underline-offset: 3px; }
.topnote__sep { color: var(--ink-3); }
.topnote .beta { font-size: 0.6875rem; }

/* Navigationsleiste: eine Zeile, 56px */
.app-header { padding-top: 0; }
.app-header__inner { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.app-header__lead { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; overflow: visible; }
.brand--logo { display: flex; align-items: center; min-height: 44px; min-width: 0; }
.brand__logo { width: auto; height: 20px; max-width: 100%; }
.back-btn { width: 34px; height: 34px; }
.event-tabs { top: calc(56px + var(--safe-top)); }

/* Umschalter: Spur und Knopf konzentrisch (gleicher Abstand rundum, beide voll gerundet) */
.mode-toggle {
  position: relative;
  display: inline-flex; align-items: stretch;
  height: 34px; min-height: 0;
  padding: 3px;
  gap: 0;
  border-radius: 17px;
  background: var(--raised-2);
  flex: none;
}
.mode-toggle::after { content: ""; position: absolute; inset: -5px 0; } /* 44px Trefferfläche */
.mode-toggle__opt {
  display: inline-flex; align-items: center;
  height: 28px;
  padding: 0 12px !important;
  border-radius: 14px !important;
  font-size: 0.8125rem; font-weight: 600; line-height: 1;
}

/* Fuss: eine Feedback-Zeile, darunter eine ruhige Schlusszeile */
.site-footer { margin-top: var(--space-9); padding: 0 0 calc(var(--space-6) + var(--safe-bottom)); background: var(--bg); }
.site-footer__inner { display: block; }
.site-footer .foot-feedback {
  display: flex; align-items: center; gap: 14px;
  min-height: 64px; padding: 12px 16px;
  border-radius: 16px;
  background: var(--raised);
  color: var(--ink); text-decoration: none;
}
.site-footer .foot-feedback:hover { background: var(--raised-2); text-decoration: none; }
.foot-feedback__icon { flex: none; width: 22px; height: 22px; color: var(--ink-2); }
.foot-feedback__text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.foot-feedback__title { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.foot-feedback__mail { font-size: 0.875rem; color: var(--ink-2); }
.foot-feedback__chev { flex: none; width: 8px; height: 14px; color: var(--ink-3); }

.foot-bottom {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 20px;
  margin-top: var(--space-6);
  font-size: 0.8125rem; line-height: 1.45; color: var(--ink-3);
}
.foot-bottom p { margin: 0; }
.foot-bottom__logo { height: 16px; width: auto; opacity: .85; }
.foot-bottom__credit { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.site-footer .foot-bottom__credit a { min-height: 0; padding: 0; color: var(--ink-2); font-weight: 600; text-decoration: none; }
.site-footer .foot-bottom__credit a:hover { color: var(--ink); }
.foot-bottom__credit .beta { font-size: 0.625rem; padding: 2px 5px; }
.site-footer__sim { margin-top: var(--space-3) !important; font-size: 0.8125rem; }
@media (max-width: 640px) {
  .foot-bottom { grid-template-columns: 1fr; justify-items: start; gap: 10px; }
}

/* Kopf inkl. Beta-Streifen bleibt oben stehen */
.app-header { position: sticky; top: 0; z-index: var(--z-header); }
.app-header .topnote {
  height: calc(32px + var(--safe-top));
  padding: var(--safe-top) 16px 0;
  white-space: nowrap; overflow: hidden;
  flex-wrap: nowrap;
}
.event-tabs { top: calc(32px + 56px + var(--safe-top)); }
.tl-item, .tl-now { scroll-margin-top: 170px; }