/* =====================================================================================
   Vorlage 24 Bauer Gert · 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.
   Stimmung: Karteikasten im Lager. Karteikarten aus Karton, ein Kasten aus dunklem Blech,
   ein Akzent Warngelb (nur auf Dunkel), Preise und Nummern in einer Monoschrift.
   ===================================================================================== */
@font-face {
  font-family: "Onest";
  src: url("../fonts/onest-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Chivo Mono";
  src: url("../fonts/chivo-mono-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --schrift: "Onest", "Segoe UI", system-ui, sans-serif;
  --mono: "Chivo Mono", Consolas, "Courier New", monospace;

  --bg: #e8e4db;            /* Hallenboden, hell und warm */
  --surface: #fbf6ea;       /* Karteikarte aus Karton */
  --surface-2: #f1ebdd;     /* Karteikarte, Rückseite, abgesetzte Flächen */
  --text: #1a1c1f;          /* 15,2 : 1 auf --bg */
  --muted: #4f545b;         /* 5,7 : 1 auf --bg */
  --accent: #f2c200;        /* Warngelb, nur auf dunklem Blech. Dunkle Schrift darauf 11 : 1 */
  --accent-tief: #b89300;   /* Rand und Linie zum Gelb */
  --on-accent: #1a1c1f;
  --border: #d6cfc0;
  --error: #b42318;
  --stempel: #b42318;       /* RESERVIERT */

  /* Blech: Kasten, Knöpfe, dunkle Abschnitte */
  --blech: #1f2225;
  --blech-hell: #2d3135;
  --blech-rand: #4a4f55;
  --kasten: #2a2d31;        /* Innenseite des Karteikastens */
  --kasten-tief: #1b1d20;
  --blech-text: #e9e6df;    /* Schrift auf Blech, 12,8 : 1 */
  --blech-leise: #a7acb3;   /* 6,6 : 1 auf --blech */
  --gelb-auf-blech: #f2c200;/* 9,6 : 1 auf --blech */

  /* Karteikarte */
  --karte-linie: rgba(44, 84, 150, .17);  /* blaue Linien */
  --karte-kopf: rgba(44, 84, 150, .42);   /* Kopflinie */
  --loch: var(--kasten);                   /* Lochung zeigt den Grund dahinter */

  /* Fahrgestell im Licht (js/scheinwerfer.js). Grau = Silhouette, Farbe = im Licht */
  --fg-linie: #12141a;
  --fg-rahmen: #3b3f45;  --fg-rahmen-kante: #5d636b;
  --fg-motor: #b9c2ca;   --fg-motor-tief: #8e979f;  --fg-deckel: #23303d;
  --fg-getriebe: #9aa3ab; --fg-getriebe-tief: #717a82;
  --fg-welle: #8a949d;   --fg-gelenk: #4c545b;
  --fg-achse: #5a6168;   --fg-feder: #f2c200;  --fg-daempfer: #2a2e33;
  --fg-reifen: #1d1f22;  --fg-felge: #d3d8dc;  --fg-felge-tief: #9da3a8;
  --fg-tank: #2f3337;    --fg-auspuff: #aeb6bd; --fg-bremse: #70767b;

  --radius: 6px;
  --radius-klein: 3px;
  --breite: 1240px;
  --abstand: clamp(72px, 9vw, 120px);
  --kopf: 64px;
}