/* =====================================================================================
   Kfz-Werkstatt (neu) · Farben, Schrift, Ecken, Abstände
   Brücke zur Web-App: --bg --surface --text --muted --accent --on-accent --border --radius --schrift
   heißen wie in 00_Projektstart/starter-webapp/styles.css.
   Die eine Akzentfarbe ist Signalgelb. Gelb ist NIE Schrift auf Hell (zu wenig Kontrast),
   sondern Fläche mit dunkler Schrift darauf, oder Schrift auf Graphit.
   Die Prüffarben (--p-…) sind Inhalt der Zeichnung wie die Leitungsfarben der Musterseite, kein Schmuck.
   ===================================================================================== */
@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: #f2f3f4;            /* Grund: heller, kühler Werkstattboden */
  --surface: #ffffff;       /* Karten */
  --surface-2: #e3e6e9;     /* abgesetzte Flächen */
  --text: #15181b;          /* 16,0 : 1 auf --bg */
  --muted: #4c545d;         /* 6,9 : 1 auf --bg, 6,1 : 1 auf --surface-2 */
  --accent: #ffc21a;        /* Signalgelb: Knöpfe, Plakette, Haken. --text darauf 11,0 : 1 */
  --on-accent: #15181b;
  --accent-tief: #f0ad00;   /* Knopf beim Überfahren, --text darauf 9,1 : 1 */
  --fokus: #15181b;         /* Fokusrahmen auf Hell; auf Graphit gilt --accent */
  --border: #d3d8dd;
  --feldrand: #79818a;      /* Rand von Eingabefeldern, 4,0 : 1 auf Weiß */
  --error: #b42318;

  --graphit: #14181c;       /* Röntgenbild, dunkle Abschnitte, Fuß */
  --graphit-2: #20262c;     /* Flächen auf Graphit */
  --graphit-text: #eceff2;  /* 15,5 : 1 auf --graphit */
  --graphit-leise: #a8b1ba; /* 8,2 : 1 auf --graphit; Gelb auf Graphit 11,0 : 1 */

  /* Lack des Demo-Autos */
  --lack-hell: #3c788c;
  --lack: #245a6b;
  --lack-tief: #173d49;

  /* Prüffarben im Röntgenbild, gleich wie in den Zeichnungen (index.html, <defs>) */
  --p-bremse: #ff6a5c;
  --p-fahrwerk: #63b9f2;
  --p-lenkung: #8fd68a;
  --p-licht: #ffe27a;
  --p-reifen: #c9d2db;
  --p-auspuff: #d6a878;
  --p-oel: #f2b33d;
  --p-rost: #e07a4a;

  --radius: 20px;
  --radius-gross: 32px;
  --radius-klein: 12px;

  --breite: 1260px;
  --abstand: clamp(84px, 10.5vw, 144px);
  --kopf: 66px;
}