/* Strategiedashboard · Designsystem (Spezifikation 0.1, DESIGNPLAN G8)
 *
 * Eine Stildatei für jede Seite: Anmeldung, App, Sammler-Fenster. Keine Farbe direkt im
 * Markup, jede Farbe kommt von hier. Freigegeben von Oliver am 23.09.2026.
 *
 * Schriften liegen lokal unter /schriften/, nicht bei Google (G2): am Renntag darf keine
 * Seite an einem fremden Server hängen. Fehlt eine Datei, greift die Ausweichschrift.
 */

/* ------------------------------------------------------------------ Schriften */
@font-face {
  font-family: "JetBrains Mono";
  src: url("/schriften/JetBrainsMono-Variable.woff2") format("woff2");
  font-weight: 100 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/schriften/Barlow-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/schriften/Barlow-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/schriften/Barlow-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/schriften/BarlowCondensed-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/schriften/BarlowCondensed-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ------------------------------------------------------------------ Tokens */
:root {
  color-scheme: dark;

  /* Grund und Flächen, Variante B (Oliver 22.09.: „nimm B") */
  --grund: #07090C;
  --flaeche: #10161C;
  --flaeche-2: #161E26;
  --linie: #222E38;
  --text: #E8F0F5;
  --text-2: #9BAAB8;
  --text-3: #66788A;
  --text-platzhalter: #5D6E80;

  /* Ortsfarben: wo man ist. Nur an Reiter, Überschrift und Rahmen, nie an einer Zahl. */
  --ort-1: #22D3EE;   /* Rennart & Strategie */
  --ort-2: #A78BFA;   /* Strecke & Vorbereitung */
  --ort-3: #FF8A3D;   /* Kommandostand */
  --ort-4: #5B9CFF;   /* Rennauswertung */
  --ort-5: #8FA3B8;   /* Archiv */
  --ort-6: #3DDC97;   /* Driver Center */

  /* Aussagefarben: was ein Wert bedeutet, überall gleich. */
  --schnellste: #C77DFF;   /* violett: schnellste Runde, schnellster Sektor */
  --gut: #35C07E;          /* besser als die eigene Beste, Reserve da */
  --knapp: #F5C518;        /* langsamer, knapp */
  --schlecht: #FF4D45;     /* NV, Reserve unter einer Runde, Boxenrunde, Zeitverlust */
  --schlecht-text: #FF8A84;/* rote Schrift auf dunklem Grund, besser lesbar */

  /* Fahrerkarte im Driver Center (Spez 6.2, D5): hell mit blauem Kopf wie dg-edge. */
  --dc-hell: #EEF1F5;        /* Grund der Karte */
  --dc-tinte: #10161C;       /* Schrift auf hell */
  --dc-tinte-2: #4A5563;     /* Beschriftung auf hell */
  --dc-tinte-3: #6B7684;     /* Stand, Herkunft */
  --dc-blau: #2F6BEA;        /* Kopf hell, Verlaufslinie */
  --dc-blau-tief: #1E3A8A;   /* Kopf dunkel */
  --dc-kasten: #1C2127;      /* dunkler Kasten DR-Punkte */
  --dc-balken: #3A4450;      /* Balken bis zur nächsten Stufe, leer */
  --dc-raster: #C9D1DB;      /* Raster der Verlaufskurve, Schrift im dunklen Kasten */
  --dc-rot: #D92D20;         /* NV auf hellem Grund */
  --dc-rot-alt: #B42318;     /* veralteter Stand auf hellem Grund */
  --dc-weiss: #FFFFFF;

  /* Neongrün: höchstens eine Sache je Ansicht, der Knopf, der gerade zählt. */
  --akzent: #A3E635;
  --fokus: #22D3EE;

  /* Reifen als runde Plakette */
  --reifen-soft: #FF4D45;
  --reifen-medium: #F5C518;
  --reifen-hart: #F2F4F7;
  --reifen-inter: #35C07E;
  --reifen-regen: #3B82F6;
  --wasser: #3B82F6;

  /* Sektoren, nur als Fläche unter der Linie (Spez 0.6) */
  --sektor-1: #22D3EE;
  --sektor-2: #F5C518;
  --sektor-3: #FF8A3D;

  /* Schriften */
  --schrift-text: "Barlow", "Segoe UI", system-ui, sans-serif;
  --schrift-titel: "Barlow Condensed", "Arial Narrow", "Segoe UI", sans-serif;
  --schrift-zahl: "JetBrains Mono", Consolas, "Cascadia Mono", monospace;

  /* Maße */
  --rund: 10px;
  --rund-gross: 18px;
  --schatten: 0 30px 70px color-mix(in srgb, #000 60%, transparent);
  --dauer: 200ms;
}

/* ------------------------------------------------------------------ Grundlage */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--grund); }
body {
  margin: 0;
  color: var(--text);
  background: var(--grund);
  font-family: var(--schrift-text);
  -webkit-font-smoothing: antialiased;
}

/* Jede Zahl mit gleich breiten Ziffern */
.zahl, .mono { font-family: var(--schrift-zahl); font-variant-numeric: tabular-nums; }
.titel {
  font-family: var(--schrift-titel); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.klein-mono {
  font-family: var(--schrift-zahl); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-3);
}

/* Aussagen */
.ist-schnellste { color: var(--schnellste); }
.ist-gut { color: var(--gut); }
.ist-knapp { color: var(--knapp); }
.ist-schlecht, .nv { color: var(--schlecht); }

/* Reifenplakette: rund, Mischungsfarbe, Kürzel darin */
.reifen {
  display: inline-grid; place-items: center;
  width: 1.9em; height: 1.9em; border-radius: 50%;
  border: .22em solid currentColor; background: var(--grund);
  font-family: var(--schrift-titel); font-weight: 700; font-size: 14px; line-height: 1;
}
.reifen-soft   { color: var(--reifen-soft); }
.reifen-medium { color: var(--reifen-medium); }
.reifen-hart   { color: var(--reifen-hart); }
.reifen-inter  { color: var(--reifen-inter); }
.reifen-regen  { color: var(--reifen-regen); }
.reifen-nv     { color: var(--schlecht); }

/* Knöpfe */
.knopf {
  height: 44px; padding: 0 18px; border-radius: var(--rund);
  border: 1px solid var(--linie); background: var(--flaeche-2); color: var(--text);
  font-family: var(--schrift-titel); font-weight: 700; font-size: 16px;
  letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  transition: filter var(--dauer) ease, border-color var(--dauer) ease;
}
.knopf:hover { filter: brightness(1.08); }
.knopf:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }
.knopf-akzent { background: var(--akzent); border-color: var(--akzent); color: var(--grund); }

/* Leise einblenden, 200 ms (Spez 0.4) */
@keyframes einblenden { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.einblenden { animation: einblenden var(--dauer) ease-out both; }

/* Wer Bewegung nicht mag, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}