/* =====================================================================================
   Vorlage 18 Kfz-Werkstatt · Farben, Schrift, Ecken, Abstände
   Brücke zur Web-App: die Namen --bg --surface --text --muted --accent --on-accent
   --border --radius --schrift sind dieselben wie in 00_Projektstart/starter-webapp/styles.css.
   Die eine Akzentfarbe ist Signalgelb. Gelb ist NIE Schrift auf Weiß (zu wenig Kontrast),
   sondern Fläche mit dunkler Schrift darauf, oder Schrift auf dem Graphit-Dunkel.
   Umfärben: --accent, --accent-tief ändern, danach pruefen.mjs (Kontrast).
   ===================================================================================== */
@font-face {
  font-family: "Chivo";
  src: url("../fonts/chivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --schrift: "Chivo", "Segoe UI", system-ui, sans-serif;

  --bg: #ffffff;            /* Grund */
  --surface: #f2f3f5;       /* abgesetzte Abschnitte und Kacheln, kühles Hellgrau */
  --surface-2: #e7e9ec;     /* zweiter Grauton für Flächen auf --surface */
  --text: #17191c;          /* Schrift, 17,6 : 1 auf Weiß */
  --muted: #545b64;         /* leiser Text, 6,9 : 1 auf Weiß, 6,3 : 1 auf --surface */
  --accent: #ffc21a;        /* Signalgelb: Knöpfe, Preisflächen, Marken. --text darauf 11,5 : 1 */
  --on-accent: #17191c;     /* Schrift auf Gelb */
  --accent-tief: #f0ad00;   /* Knopf beim Überfahren, --text darauf 9,4 : 1 */
  --dunkel: #1d2126;        /* Graphit: Abschnitt Wintercheck, E-Auto-Kachel, Fuß */
  --dunkel-2: #2a2f36;      /* Flächen auf Graphit */
  --dunkel-text: #eef0f2;   /* Schrift auf Graphit, 14,6 : 1 */
  --dunkel-leise: #aab1b9;  /* leise auf Graphit, 7,6 : 1; Gelb auf Graphit 10,0 : 1 */
  --border: #d9dce1;        /* Zierlinien */
  --feldrand: #7a828c;      /* Rand von Eingabefeldern, 3,9 : 1 auf Weiß */
  --error: #b42318;         /* Fehlermeldungen in einer Web-App, 6,5 : 1 auf Weiß */

  /* Getriebe (Effekt 39): Stahltöne, Inhalt, kein Schmuck */
  --stahl-hell: #f1f3f6;
  --stahl: #8e9aa6;
  --stahl-tief: #2c3640;

  /* Nebelbild (Effekt 281): Nebel, Wald; das Scheinwerferlicht ist --accent */
  --nebel: #c9ced5;
  --wald: #2d3a37;

  --radius: 20px;           /* Karten, Kacheln */
  --radius-gross: 32px;     /* große Bilder, Bühne */
  --radius-klein: 12px;     /* Felder, Marken */

  --breite: 1260px;         /* Inhalt höchstens so breit, immer mittig */
  --spalte: 660px;          /* Textspalte */
  --abstand: clamp(80px, 10.5vw, 144px);   /* zwischen den Abschnitten */
  --kopf: 64px;
}