/* Coach Loris — generated from tokens.json */
:root, [data-theme="light"] {
  --paper: #f5f5f3; /* Seitengrund aller Sites und Apps. */
  --surface: #ffffff; /* Karten, Eingabefelder, helle Sektionen auf `paper` (Scorcerer: «So funktioniert’s»). */
  --surface-2: #ececea; /* Ruhige Fläche: Sektionswechsel, Segment-Hintergrund, erledigte Tags. */
  --line: #d6d6d3; /* Haarlinien: Fusszeilen-Oberkante, Tabellenzeilen, Kartenrand. Dekorativ. */
  --line-strong: #858582; /* Rand von Eingabefeldern, Sekundärknöpfen, Segmenten. 3.4:1 auf `paper`, 3.7:1 auf `surface` – erfüllt 3:1 für Bedienelemente. */
  --ink: #151515; /* Titel, Primärknopf, dunkle Panels. 16.7:1 auf `paper`. */
  --ink-2: #2e2e2e; /* Fliesstext und Leads (Scorcerer `ink-2`). 12.4:1 auf `paper`. */
  --muted: #4a4a4a; /* Sekundärtext: Unterzeilen, Fusszeile, Hinweise. 8.1:1 auf `paper`. */
  --faint: #6b6b6b; /* Tertiärtext, Platzhalter. 4.9:1 auf `paper` – nicht unter 14px. */
  --red: #dc1a1f; /* Trikotrot als Fläche: Akzentknopf (eine Hauptaktion pro Seite), CTA-Band, Live-Punkt, Haken, Hervorhebung. Text darauf `on-red` (5.0:1). */
  --red-strong: #b3151a; /* Hover/aktiv für `red`-Flächen. `on-red` darauf 6.9:1. */
  --red-text: #c8191a; /* Rot als Schrift auf hell: Kicker, Links, aktiver Tab. 5.3:1 auf `paper`, 5.8:1 auf `surface`. */
  --red-soft: #fbeceb; /* Heller Rotgrund für Fehler-Alert, Alarm-Kacheln und Rückfrage-Tags; Text `red-text` (5.1:1). */
  --on-red: #ffffff; /* Text und Icons auf `red` und `red-strong`. */
  --dark: #151515; /* Dunkles Panel (Regeln-Karte, Tab-Leiste) mit `on-dark`. */
  --dark-deep: #0d0d0d; /* Scoreboard-Grund – noch eine Stufe dunkler als `dark`. */
  --dark-panel: #1f1f1f; /* Innere Flächen auf `dark-deep` (Schiri-Zeile im Scoreboard). */
  --on-dark: #f5f5f3; /* Text auf `dark`, `dark-deep`, `dark-panel`. */
  --on-dark-soft: #bdbdbd; /* Sekundärtext auf dunkel (8.8:1 auf `dark-panel`). Ersetzt Scorcerers `white/80`. */
  --red-on-dark: #ff5a4e; /* Rot auf dunkel: grosse Zahlen, Live-Punkt, Links. 5.4:1 auf `dark-panel`, 6.3:1 auf `dark-deep`. Übernimmt die Rolle von Scorcerers Limette. */
  --line-on-dark: rgba(245, 245, 243, .14); /* Haarlinien auf dunkel. */
  --focus: #c8191a; /* Fokusring 2px + 2px Abstand. Auf `red`-Flächen `ink`, auf dunkel `red-on-dark`. */
  --team-grey: #9ca3af; /* Leibchenfarbe «Grau» im Scoreboard – Inhalt, kein UI-Ton; Text darauf `ink`. */
  --shadow-1: 0 1px 2px #1515150f, 0 1px 1px #1515150a; /* Karten und Felder auf `paper`. */
  --shadow-2: 0 10px 30px -12px #15151547; /* Schwebende Flächen: Scoreboard, Dialog, Menü. */
}
:root {
  --space-1: 4px; /* Kleinste Lücke (Segment-Innenrand). */
  --space-2: 8px; /* Label zu Feld, Icon zu Text. */
  --space-3: 12px; /* Listenpunkte, Knopf-Reihen, Kartenlücke. */
  --space-4: 16px; /* Seitenrand Telefon, Scoreboard-Innenabstand. */
  --space-5: 20px; /* Titel zu Lead. */
  --space-6: 24px; /* Abstand vor Knopf-Reihe, Fusszeile oben. */
  --space-7: 28px; /* Innenabstand dunkler Karten. */
  --space-8: 32px; /* Seitenrand ab 640px; Lücke zwischen Spalten. */
  --space-10: 40px; /* Innenabstand CTA-Band. */
  --space-14: 56px; /* Vertikaler Sektionsabstand. */
  --container: 1152px; /* Maximale Inhaltsbreite (max-w-6xl). */
  --container-text: 576px; /* Maximale Breite von Lead und Fliesstext (max-w-xl). */
  --container-form: 448px; /* Breite von Login- und Formularseiten (max-w-md). */
  --radius-xs: 6px; /* Hervorhebung im Text (Marker). */
  --radius-s: 8px; /* Eingabefelder. */
  --radius-m: 14px; /* Alerts, kleine Karten, Kacheln. */
  --radius-panel: 16px; /* Innere Panels: Teamkarten, Schiri-Zeile. */
  --radius-l: 22px; /* Karten, dunkle Panels, CTA-Band, Dialoge. */
  --radius-xl: 28px; /* Scoreboard (Gerät-Optik). */
  --radius-pill: 9999px; /* Knöpfe, Segmente, Tags. */
  --radius-round: 50%; /* Logo-Scheiben, Icon-Knöpfe, Punkte. */
  --size-button: 56px; /* Hauptknöpfe. */
  --size-input: 48px; /* Eingabefelder. */
  --size-button-sm: 36px; /* Knöpfe in der Kopfzeile, Icon-Knöpfe im Feld. */
  --size-header: 64px; /* Höhe der Kopfzeile. */
  --size-logo: 34px; /* Logo in der Kopfzeile. */
  --size-dot: 8px; /* Live-/Anspielpunkt. */
  --font-display: "Barlow Condensed", Barlow, ui-sans-serif, system-ui, sans-serif;
  --font-sans: Barlow, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-display-hero: 800 80px/0.95 var(--font-display); /* Hero-Titel, normale Schreibung. clamp(2.8rem, 9vw, 5rem). */
  --text-display-number: 800 88px/0.9 var(--font-display); /* Timer und Spielstand im Scoreboard, tabular-nums. */
  --text-page-title: 700 42px/1 var(--font-display); /* H1 auf App-Seiten (Login, Einstellungen). */
  --text-section-title: 700 36px/1.11 var(--font-display); /* H2 einer Sektion, CTA-Band. */
  --text-card-title: 700 30px/1.2 var(--font-display); /* Titel in grossen Karten und dunklen Panels. */
  --text-item-title: 700 24px/1.33 var(--font-display); /* H3 in Schritten, Listen, kleinen Karten. */
  --text-stat-number: 800 48px/1 var(--font-display); /* Kennzahlen (Regeln-Punkte, Stat-Kacheln), tabular-nums. */
  --text-step-number: 800 48px/1 var(--font-display); /* Grosse Schrittnummer in `line-strong`. */
  --text-name: 700 20px/1.25 var(--font-display); /* Spielernamen in Teamlisten. */
  --text-overline: 700 14px/1.43 var(--font-display); /* Überzeile in Versalien (Scoreboard, Teamkarten). */
  --text-lead: 400 18px/1.625 var(--font-sans); /* Lead unter dem Hero-Titel, `ink-2`, max. 36rem. */
  --text-body: 400 17px/1.625 var(--font-sans); /* Fliesstext in Sektionen und Karten. */
  --text-body-sm: 400 16px/1.5 var(--font-sans); /* Text in Schritten, Formularen, Eingaben. */
  --text-small: 400 15px/1.625 var(--font-sans); /* Nebentext, Hinweise, Fussnoten in Karten. */
  --text-caption: 400 14px/1.43 var(--font-sans); /* Bildunterschrift, Fusszeile, `muted`. */
  --text-kicker: 600 14px/1.43 var(--font-sans); /* Dachzeile über dem Hero-Titel, `red-text`. */
  --text-label: 600 15px/1.5 var(--font-sans); /* Formular-Labels, `ink`. */
  --text-button-lg: 600 18px/1.56 var(--font-sans); /* Knopf 56px. */
  --text-button-sm: 600 14px/1.43 var(--font-sans); /* Knopf 36px in der Kopfzeile. */
  --text-micro: 600 12px/1.33 var(--font-sans); /* Segment-Umschalter (Sprache), Tags. */
  --text-mono: 400 14px/1.4 var(--font-mono); /* Links, Codes, Token. */
}
.display-hero {
  font-family: var(--font-display);
  font-size: 80px;
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: 0.005em;
}
.display-number {
  font-family: var(--font-display);
  font-size: 88px;
  line-height: 0.9;
  font-weight: 800;
  letter-spacing: 0;
}
.page-title {
  font-family: var(--font-display);
  font-size: 42px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
}
.section-title {
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 1.11;
  font-weight: 700;
  letter-spacing: 0;
}
.card-title {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0;
}
.item-title {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.33;
  font-weight: 700;
  letter-spacing: 0;
}
.stat-number {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0;
}
.step-number {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0;
}
.name {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0;
}
.overline {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.43;
  font-weight: 700;
  letter-spacing: 0.18em;
}
.lead {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.625;
  font-weight: 400;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.625;
  font-weight: 400;
  letter-spacing: 0;
}
.body-sm {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
}
.small {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.625;
  font-weight: 400;
  letter-spacing: 0;
}
.caption {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.43;
  font-weight: 400;
  letter-spacing: 0;
}
.kicker {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.43;
  font-weight: 600;
  letter-spacing: 0;
}
.label {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0;
}
.button-lg {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.56;
  font-weight: 600;
  letter-spacing: 0;
}
.button-sm {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.43;
  font-weight: 600;
  letter-spacing: 0;
}
.micro {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.33;
  font-weight: 600;
  letter-spacing: 0;
}
.mono {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}