/* ==========================================================================
   Night Grand Prix 2026 – offenes Erscheinungsbild
   Wird nach tokens/app/schedule/results geladen und überschreibt diese.
   Prinzip: keine Kästen. Inhalt steht frei auf der Fläche, Struktur entsteht
   durch Abstand, Typografie und feine Linien. Die Kursiv-Condensed der
   Wortmarke "KART BAHN" trägt die Persönlichkeit (Titel, Uhren).
   ========================================================================== */

:root {
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;

  /* Kartbahn-Farben aus dem Logo: Rot, Schwarz, Weiss */
  --kb-red: #e4002b;              /* Wortmarke "KART" – für grosse Flächen/Titel */
  --kb-black: #111111;            /* Balken "LYSS" */

  /* Hell (nur auf Wunsch) */
  --bg: #ffffff;
  --surface: #ffffff;
  --ink: #111111;
  --ink-2: #55555a;
  --ink-3: #6a6a70;
  --ink-past: #8b8b90;
  --rail-dim: #d6d6d6;
  --separator: rgba(0, 0, 0, 0.1);
  --header-bg: rgba(255, 255, 255, 0.88);
  --accent: #c8102e;              /* Logo-Rot, textfähig 5.9:1 */
  --live: #c8102e;
  --title-red: #c8102e;

  --cat-1: #b26a00; --cat-1-ink: #8f5500; --cat-1-tint: rgba(178, 106, 0, 0.12);   /* Mini – Bernstein */
  --cat-2: #0a74b8; --cat-2-ink: #075f97; --cat-2-tint: rgba(10, 116, 184, 0.12);  /* Schaltkart – Blau */
  --cat-3: #7a4fd6; --cat-3-ink: #6440b8; --cat-3-tint: rgba(122, 79, 214, 0.12);  /* Teamrennen – Violett */
}

:root[data-theme="dark"] {
  --bg: #111111;                  /* Logo-Schwarz */
  --bg-elevated: #1c1c1c;
  --surface: #111111;             /* Flächen = Seite: keine Kästen */
  --surface-2: #1f1f1f;
  --surface-3: #2a2a2a;
  --ink: #ffffff;
  --ink-2: #b4b4b4;
  --ink-3: #8f8f8f;
  --ink-past: #777777;            /* vergangene Punkte, 4.2:1 */
  --rail-dim: #3d3d3d;
  --separator: rgba(255, 255, 255, 0.1);
  --separator-strong: rgba(255, 255, 255, 0.18);
  --header-bg: rgba(17, 17, 17, 0.88);
  --accent: #ff3347;              /* Logo-Rot, auf Schwarz aufgehellt: 5.2:1 */
  --accent-ink: #ffffff;
  --accent-tint: rgba(228, 0, 43, 0.18);
  --accent-tint-ink: #ff8090;
  --live: #ff3347;
  --live-ink: #ff8090;
  --live-tint: rgba(228, 0, 43, 0.18);
  --title-red: var(--kb-red);

  --cat-1: #f4b740; --cat-1-ink: #f6c766; --cat-1-tint: rgba(244, 183, 64, 0.16);
  --cat-2: #5cc4ff; --cat-2-ink: #86d3ff; --cat-2-tint: rgba(92, 196, 255, 0.16);
  --cat-3: #b59bff; --cat-3-ink: #c7b3ff; --cat-3-tint: rgba(181, 155, 255, 0.16);
}

html, body { background: var(--bg); }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Header: Logo links, sonst nichts ---------- */
.app-header {
  background: var(--header-bg);
  border-bottom: 1px solid transparent;
}
.app-header.is-scrolled { border-bottom-color: var(--separator); }
.app-header__inner { grid-template-columns: minmax(0, 1fr) auto; min-height: 60px; }
.app-header__title { display: none; }
.brand-block { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; }
.brand--logo { display: flex; align-items: center; }
.brand__logo { display: block; height: 26px; width: auto; max-width: min(70vw, 300px); object-fit: contain; object-position: left center; }
:root[data-theme="dark"] .brand__logo,
:root[data-theme="dark"] .site-footer__logo { filter: drop-shadow(0 0 0.5px rgba(255, 255, 255, 0.5)); }
.back-link { color: var(--accent); }

/* ---------- Hero: Titel frei auf der Fläche ---------- */
.ngp-hero { padding: var(--space-7) 0 var(--space-2); }
.ngp-hero__date {
  display: flex; flex-wrap: wrap; gap: 0 var(--space-3);
  margin: 0;
  font-size: var(--fs-sub);
  color: var(--ink-2);
}
.ngp-hero__date time { color: var(--ink); font-weight: var(--fw-medium); }
.ngp-hero__title {
  margin: var(--space-3) 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(3.5rem, 17.5vw, 6.5rem);
  line-height: 0.86;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: balance;
  max-width: 9ch;
  color: var(--title-red);
}
.ngp-hero__title:focus { outline: none; }
/* Jahreszahl als Kontur – wie "BAHN" im Logo */
.ngp-hero__year {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
  paint-order: stroke fill;
}
@supports not (-webkit-text-stroke: 1px black) {
  .ngp-hero__year { color: var(--ink-2); }
}

/* Statuszeile: was läuft gerade */
.ngp-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-4);
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 1px solid var(--separator);
}
.ngp-status__label {
  display: flex; align-items: center; gap: 8px;
  margin: 0;
  font-size: var(--fs-footnote);
  color: var(--ink-2);
}
.ngp-status__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: none; }
.ngp-status[data-mode="live"] .ngp-status__label { color: var(--accent); font-weight: var(--fw-semibold); }
.ngp-status__title {
  margin: 4px 0 0;
  font-size: 1.25rem;
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.ngp-status__sub { margin: 2px 0 0; font-size: var(--fs-footnote); color: var(--ink-2); }
.ngp-status__clock {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 3rem;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ngp-status[data-mode="live"] .ngp-status__clock { color: var(--accent); }
.ngp-status__unit { font-size: 0.55em; font-weight: 600; letter-spacing: 0; }

/* ---------- Tabs: Text mit Unterstrich, klebt unter dem Header ---------- */
.event-tabs {
  position: sticky;
  top: calc(64px + var(--safe-top));
  z-index: calc(var(--z-header) - 1);
  margin: var(--space-6) calc(var(--gutter) * -1) 0;
  padding: 0 var(--gutter);
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--separator);
}
.tabs { display: flex; gap: var(--space-6); }
.tabs__item {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 48px;
  color: var(--ink-2);
  font-size: 1rem;
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.tabs__item:hover { color: var(--ink); text-decoration: none; }
.tabs__item[aria-selected="true"] { color: var(--ink); }
.tabs__item[aria-selected="true"]::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; border-radius: 2px;
  background: var(--accent);
}
.tabs__item:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.event-panel { padding-top: var(--space-4); }

/* ---------- Kästen auflösen (Resultate, Statistik, Lauf) ---------- */
.card,
.list,
.latest,
.notice:not(.notice--error) {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.card { padding: var(--space-4) 0; border: 0; border-top: 1px solid var(--separator); }
.card--flush { padding: 0; }
.list { border: 0; }
.row { padding-inline: 0; background: transparent; }
.row:hover, .row:active { background: transparent; }
.list > li + li > .row::before { left: 0; right: 0; background: var(--separator); }
.list-group__header { padding-inline: 0; }
.latest { padding: var(--space-4) 0 var(--space-5); border-top: 0; border-bottom: 1px solid var(--separator); }
.latest.cat-1, .latest.cat-2, .latest.cat-3 { border-left: 0; }
.latest__title { font-size: 1.375rem; }

.segmented { background: transparent; padding: 0; gap: var(--space-5); border-bottom: 1px solid var(--separator); border-radius: 0; }
.segmented__item { border-radius: 0; background: transparent !important; box-shadow: none !important; padding-inline: 0; color: var(--ink-2); flex: none; }
.segmented__item[aria-selected="true"], .segmented__item.is-active, .segmented__item[aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent) !important; }

.chip { background: transparent; box-shadow: inset 0 0 0 1px var(--separator-strong); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); box-shadow: none; }

.table-wrap, .lap-matrix, .table { background: transparent; }
.empty { background: transparent; border: 0; padding-inline: 0; text-align: left; align-items: flex-start; }

/* Lauf-Kopf */
.session-head__title, .large-title, .title-1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 0.95;
}
.session-head__title { font-size: clamp(2.25rem, 11vw, 3.5rem); }
.race-num { font-family: var(--font-display); font-style: italic; transform: none; }

/* ---------- Footer ---------- */
.site-footer {
  margin-top: var(--space-9);
  padding: var(--space-6) 0 calc(var(--space-7) + var(--safe-bottom));
  border-top: 1px solid var(--separator);
  color: var(--ink-3);
  font-size: var(--fs-footnote);
}
.site-footer__inner { display: block; }
.site-footer p { margin: 0; }
.site-footer__meta { color: var(--ink-3); }
.site-footer__sim { margin-top: var(--space-2) !important; color: var(--accent); }

@media (min-width: 900px) {
  .ngp-hero { padding-top: var(--space-9); }
  .main.container { max-width: calc(820px + var(--gutter) * 2); }
}

/* Theme-Schalter: nur das Symbol des Ziel-Modus zeigen */
.icon-btn svg { width: 22px; height: 22px; }
#theme-toggle[data-mode="dark"] .icon-moon,
#theme-toggle[data-mode="light"] .icon-sun { display: none; }
#theme-toggle { color: var(--ink-2); }

/* Neue Ansicht wird unsichtbar aufgebaut (echte Breiten für Charts) und dann getauscht */
.main { position: relative; }
.view.is-staging { position: absolute; top: 0; left: var(--gutter); right: var(--gutter); visibility: hidden; pointer-events: none; }
.tl-item, .tl-now { scroll-margin-top: 140px; }

/* Neuestes Resultat: ohne Kategorie-Kante, bündig links */
.latest { padding-left: 0; }
.latest::before { display: none; }
/* Podium & Kennzahlen offen: nur Haarlinien statt Flächen */
.podium__step { background: transparent; box-shadow: none; border-top: 2px solid var(--separator-strong); border-radius: 0; }
.podium__step--1 { border-top-color: var(--gold); }
.stat { padding-inline: 0; border-top: 1px solid var(--separator); border-radius: 0; }
.table-wrap { border-radius: 0; }
.table th:first-child, .table td:first-child { padding-left: 0; }

/* Logo + "von knieses.ch" auf jeder Ansicht */
.app-header__lead { gap: var(--space-2); }
.app-header__inner { min-height: 64px; }
.brand__credit {
  align-self: flex-start;
  display: inline-flex; align-items: baseline; gap: 0.3em;
  padding: 1px 0 3px;
  font-family: var(--font-display);
  font-style: italic;
  line-height: 1;
  text-decoration: none;
}
.brand__credit-by { font-size: 0.8125rem; font-weight: 600; color: var(--ink-3); }
.brand__credit-name {
  font-size: 0.9375rem; font-weight: 800; letter-spacing: 0.02em; color: var(--ink);
  background: linear-gradient(var(--accent), var(--accent)) left bottom / 100% 2px no-repeat;
  padding-bottom: 2px;
}
.brand__credit:hover { text-decoration: none; }
.brand__credit:hover .brand__credit-name { color: var(--accent); }
.brand__credit:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }

/* Signatur im Fuss: gross, in der Schrift der Wortmarke */
.signature {
  display: inline-flex; flex-direction: column; gap: 4px;
  margin-top: var(--space-6);
  padding: var(--space-2) 0;
  color: var(--ink);
  text-decoration: none;
}
.signature__by { font-size: var(--fs-footnote); color: var(--ink-3); }
.signature__name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  transition: color var(--dur-base) var(--ease-out);
}
.signature__tld { color: var(--accent); }
.signature:hover { text-decoration: none; }
.signature:hover .signature__name { color: var(--accent); }
.signature:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.back-link--icon { flex: none; width: 32px; min-height: var(--tap); justify-content: flex-start; margin-right: calc(var(--space-1) * -1); }
@media (max-width: 359px) { .brand__logo { height: 22px; } }
.site-footer .signature { align-items: flex-start; color: var(--ink); min-height: 0; padding-inline: 0; }

/* ---------- Umschalter Einfach / Details (ersetzt Hell/Dunkel) ---------- */
.mode-toggle {
  display: inline-flex; align-items: center;
  min-height: var(--tap);
  padding: 0;
  border: 0; background: none; cursor: pointer;
  font: inherit;
}
.mode-toggle__opt {
  padding: 6px 10px;
  font-size: var(--fs-footnote);
  font-weight: var(--fw-semibold);
  color: var(--ink-3);
  border: 1px solid var(--separator-strong);
}
.mode-toggle__opt:first-child { border-radius: 999px 0 0 999px; border-right: 0; }
.mode-toggle__opt:last-child { border-radius: 0 999px 999px 0; }
.mode-toggle__opt.is-on { background: var(--kb-red); border-color: var(--kb-red); color: #fff; }
.mode-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 999px; }

/* ---------- Einfache Ansicht ---------- */
.simple { padding-top: var(--space-6); }
.simple__date { margin: 0; font-size: var(--fs-sub); color: var(--ink-2); }
.simple__h1 {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display); font-style: italic; font-weight: 800;
  font-size: 2.25rem; line-height: 1; text-transform: uppercase; color: var(--title-red);
}
.simple__h1:focus { outline: none; }
.simple__lead { margin: var(--space-3) 0 var(--space-5); font-size: var(--fs-sub); color: var(--ink-2); max-width: 36em; }
.simple__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--separator); }
.simple__row {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--separator);
}
.simple__time { font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); font-size: var(--fs-sub); }
.simple__title { font-size: 1rem; line-height: 1.3; }
.simple__row.is-past .simple__time, .simple__row.is-past .simple__title { color: var(--ink-past); }
.simple__row.is-live .simple__time, .simple__row.is-live .simple__title { color: var(--accent); font-weight: var(--fw-semibold); }
.simple__now {
  display: inline-block; margin-right: 4px; padding: 1px 6px; border-radius: 4px;
  background: var(--kb-red); color: #fff; font-size: 0.6875rem; font-weight: 700; vertical-align: 2px;
}
.simple__pdf {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--tap); padding: 0 14px;
  border-radius: 999px;
  background: var(--kb-red); color: #fff;
  font-size: var(--fs-footnote); font-weight: var(--fw-semibold);
  text-decoration: none; white-space: nowrap;
}
.simple__pdf span { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.04em; opacity: .85; }
.simple__pdf:hover { text-decoration: none; filter: brightness(1.1); }
.simple__wait { font-size: var(--fs-footnote); color: var(--ink-3); white-space: nowrap; }
.simple__more { margin-top: var(--space-6); font-size: var(--fs-footnote); color: var(--ink-3); }

/* PDF-Links in der Detail-Ansicht */
.tl-item__links { display: flex; gap: var(--space-4); margin: 6px 0 0; }
.tl-item__links .tl-item__results { margin-top: 0; }
.tl-item__pdf {
  position: relative; z-index: 1;            /* über dem Zeilen-Link */
  font-size: var(--fs-footnote); font-weight: var(--fw-semibold);
  color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px;
}
.pdf-link {
  display: inline-flex; align-items: center; min-height: var(--tap);
  margin-top: var(--space-2);
  padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--separator-strong);
  color: var(--ink); font-size: var(--fs-footnote); font-weight: var(--fw-semibold); text-decoration: none;
}
.pdf-link::before { content: "PDF"; margin-right: 8px; font-size: 0.625rem; font-weight: 800; color: var(--accent); letter-spacing: .04em; }
.pdf-link:hover { text-decoration: none; border-color: var(--ink-3); }

/* Logo schrumpft mit, statt vom Umschalter abgeschnitten zu werden */
.app-header__lead { overflow: visible; }
.brand-block { flex: 0 1 auto; min-width: 0; }
.brand--logo { min-width: 0; }
.brand__logo { width: 178px; max-width: 100%; height: auto; }
@media (max-width: 380px) { .mode-toggle__opt { padding: 6px 8px; } }

/* Entwicklung: Name zweizeilig statt "A…", Linien über nicht gefahrene Läufe gestrichelt */
.dev-table { table-layout: auto; }
.dev-table .dev-col { width: auto; }
.dev-table .dev-name { white-space: normal; overflow: visible; padding-block: 6px; min-width: 6.5rem; max-width: 9rem; line-height: 1.2; }
.dev-table .dev-nr { display: block; min-width: 0; font-size: 0.6875rem; color: var(--ink-3); }
.dev-table .dev-dname { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dev-table td.num, .dev-table th.num { white-space: nowrap; padding-inline: 4px; }
.dev-table thead th.num { color: var(--ink-2); font-weight: var(--fw-semibold); }
.dev-bridge { stroke-dasharray: 3 4; }
.chart__line--muted.dev-bridge { opacity: .7; }
.dev-meta { display: flex; align-items: baseline; gap: 8px; }
.dev-meta .dev-delta { font-size: 0.6875rem; font-variant-numeric: tabular-nums; }
.dev-table .dev-nr { display: inline; }
.chart__line--muted.dev-bridge { opacity: .4; }