/* =========================================================================
   SPUR v2 -- Design-Tokens (Ueberarbeitung von Richtung B, richtungen.json).
   Uebernommen aus design/v2/tokens.css (Landing-Nachbesserung, 2026-09-07,
   QA_DESIGN_V2.md Punkt 5) -- Font-Pfade bleiben relativ (fonts/...), wie im
   bisherigen Landing-Ordner, da assets/tokens.css und assets/fonts/ im
   selben Verzeichnis liegen. Gleiche tragende Idee wie v1 (Fahrbahn-
   markierung, Tempofarben), hochwertigere Ausfuehrung: waermeres/satteres
   Gruen, Terrakotta/Ocker als seltener Zweitakzent, mehr Tiefe (Koernung,
   doppelte Schatten, warmes Glow), ueberarbeitete Typo-Hierarchie. Struktur
   identisch zu app/src/ui/tokens.css (bereits am 06.09.2026 umgestellt),
   damit Landingpage und App wieder dieselbe Palette zeigen.
   Kontraste rechnerisch geprueft (WCAG relative Luminanz), s.
   design/v2/VERGLEICH.md.
   ========================================================================= */

@font-face{
  font-family:"Bricolage Grotesque";
  src:url("fonts/bricolage-grotesque-variable.woff2") format("woff2-variations");
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Work Sans";
  src:url("fonts/work-sans-variable.woff2") format("woff2-variations");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}

:root{
  /* ---- Flaechen: warmer Cream-Asphalt statt Papier-Beige ---- */
  --bg:#F8F0E1;
  --bg-dark:#20190F;
  --text:#241E15;
  --text-dark:#F3EAD6;
  --karte:#F1E7D2;
  --karte-dark:#2B2216;
  --ink-halo:#20190F; /* konstante dunkle Kontur, s. Ink-Halo-Technik unten */

  /* ---- Markenfarbe: warmes, sattes Waldgruen (kein kaltes Teal mehr) ---- */
  --primary:#237A4E;
  --primary-on:#FFFFFF;
  /* Textvariante: #237A4E liegt als Fliesstext auf --karte nur bei 4,31:1 --
     knapp unter dem AA-Minimum 4,5:1. #175738 (gleicher Farbton, dunklerer
     L-Wert) erreicht 7,55/6,96:1 auf bg/karte -- rechnerisch geprueft.
     Fuer Flaechen (Buttons/Chip-Fuellung) bleibt --primary die Quelle der
     Wahrheit; --primary-text nur fuer Fliesstext/Links/aktive Icons. */
  --primary-text:#175738;
  /* Dark-Theme-Variante von --primary-text: #175738 waere auf dunklem Grund
     fast unlesbar (dunkelgruen auf dunkelbraun). #34B273 ist dieselbe
     Farbfamilie, hellere Stufe, 6,43:1 gegen --bg-dark/--ink-halo. Das war in
     v1 eine Luecke (--primary-text galt unveraendert auch im Dark-Theme). */
  --primary-text-dark:#34B273;

  /* ---- Zweitakzent: gedaempftes Terrakotta/Ocker, SELTEN, nie Fliesstext ---- */
  --sekundaer:#C1602E;       /* Motiv-/Icon-Akzent (Fahrbahn-Rest-Motive, Highlights) */
  --sekundaer-fill:#A94F26;  /* Flaechen-Variante fuer gefuellte Abzeichen (weisser Text 5,48:1) */

  /* ---- Geschwindigkeitsskala (waermer/gedeckter als v1, Ink-Halo-gepruefte Kontraste) ---- */
  --v-0-30:#268254;    /* warmes Gruen, 3,65:1 vs Ink-Halo */
  --v-30-50:#4D7E2A;   /* Oliv-Lindgruen, 3,59:1 */
  --v-50-100:#AF831D;  /* Ocker/Mustard statt Zitronengelb, 5,04:1 */
  --v-100-130:#C1631F; /* Orange, 4,20:1 */
  --v-130-180:#BA482C; /* Ziegelrot, 3,36:1 */
  --v-180-plus:#C23866;/* Beerenrot, 3,36:1 */

  /* ---- Struktur ---- */
  --radius-card:20px;
  --radius-button:999px;
  /* Doppelter warmer Schatten: kurz+dicht fuer Kante, weit+weich fuer Tiefe --
     ein einzelner Schlagschatten wirkt flach (s. Lessons design.md). */
  --schatten:0 1px 2px rgba(32,25,15,0.10), 0 14px 32px -8px rgba(32,25,15,0.22);
  --schatten-innen-licht:inset 0 1px 0 rgba(255,255,255,0.45);
  --glow-morgen:radial-gradient(120% 90% at 18% -10%, rgba(255,214,158,0.55), transparent 60%);
  --trenner-stil:dashed;
  /* Feine Koernung fuer Karten (Asphalt-/Papierstruktur), als winziges
     wiederholtes SVG-Rauschen, ~3% Deckkraft -- s. .karte::after */
  --koernung:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");

  /* ---- Typografie: Anzeige mit Charakter, Fliesstext ruhig ---- */
  --font-display:"Bricolage Grotesque", "Arial Black", sans-serif;
  --font-text:"Work Sans", "Segoe UI", sans-serif;

  /* Type-Scale (ueberarbeitete Hierarchie, mehr Stufen als v1) */
  --fs-hero:clamp(2.4rem, 9vw, 3.2rem);   /* grosse Kennzahlen (Rekorde, km) */
  --fs-display:1.5rem;                    /* Screen-/Kartentitel */
  --fs-title:1.125rem;                    /* Sektionstitel */
  --fs-body:1rem;                         /* Fliesstext */
  --fs-label:0.8125rem;                   /* UI-Labels, Metadaten */
  --fs-caption:0.6875rem;                 /* Mikro-Label, Zeitstempel */
  --tracking-label:0.06em;

  /* Semantik (hell) */
  --oberflaeche:var(--bg);
  --oberflaeche-karte:var(--karte);
  --oberflaeche-text:var(--text);
  --oberflaeche-primaertext:var(--primary-text);
  --rand:rgba(36,30,21,0.13);
  --fokus-ring:0 0 0 3px rgba(35,122,78,0.35);

  color-scheme:light;
}

:root[data-theme="dark"],
:root:not([data-theme="light"]){
  @media (prefers-color-scheme: dark){
    --oberflaeche:var(--bg-dark);
    --oberflaeche-karte:var(--karte-dark);
    --oberflaeche-text:var(--text-dark);
    --oberflaeche-primaertext:var(--primary-text-dark);
    --rand:rgba(243,234,214,0.14);
    --schatten-innen-licht:inset 0 1px 0 rgba(255,255,255,0.06);
    --glow-morgen:radial-gradient(120% 90% at 18% -10%, rgba(255,180,120,0.10), transparent 60%);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --oberflaeche:var(--bg-dark);
  --oberflaeche-karte:var(--karte-dark);
  --oberflaeche-text:var(--text-dark);
  --oberflaeche-primaertext:var(--primary-text-dark);
  --rand:rgba(243,234,214,0.14);
  --schatten-innen-licht:inset 0 1px 0 rgba(255,255,255,0.06);
  --glow-morgen:radial-gradient(120% 90% at 18% -10%, rgba(255,180,120,0.10), transparent 60%);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --oberflaeche:var(--bg);
  --oberflaeche-karte:var(--karte);
  --oberflaeche-text:var(--text);
  --oberflaeche-primaertext:var(--primary-text);
  --rand:rgba(36,30,21,0.13);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--oberflaeche);
  color:var(--oberflaeche-text);
  font-family:var(--font-text);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.zahl-gross{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-0.01em;
  margin:0;
}
/* Optical-Size-Achse von Bricolage Grotesque bewusst ausnutzen: grosse
   Kennzahlen bekommen den fuer grosse Groessen gezeichneten Schnitt (opsz 60+),
   kleine UI-Ueberschriften den fuer Text gezeichneten (opsz ~14-24) --
   ein Detail, das reine Groessenskalierung nicht liefert. */
.zahl-gross{
  font-size:var(--fs-hero);
  font-variation-settings:"opsz" 80, "wght" 700;
  font-variant-numeric:tabular-nums lining-nums;
  letter-spacing:-0.02em;
  line-height:1.02;
}
h1{font-size:var(--fs-display);font-variation-settings:"opsz" 32,"wght" 700}
h2{font-size:var(--fs-title);font-variation-settings:"opsz" 20,"wght" 700}

/* Ruhige Mikro-Labels als eigene Hierarchie-Stufe (nicht nur kleiner, auch
   zurueckhaltender: Tracking + reduzierte Deckkraft statt nur font-size). */
.label-ruhig{
  font-family:var(--font-text);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  opacity:.62;
}
.caption{font-size:var(--fs-caption);opacity:.55}

img{max-width:100%;display:block}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important}
}