/* =====================================================================================
   Vorlage 29 Fahrschule · 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.
   Ein Akzent: Verkehrsblau. Das Gelb ist Signalfarbe in den Zeichnungen (Blinker, Spur, Markierung),
   nie Textfarbe und nie Knopffarbe.
   ===================================================================================== */
@font-face {
  font-family: "Albert Sans";
  src: url("../fonts/albert-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  --schrift: "Albert Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;

  --bg: #f5f7fa;            /* Warnweiß, leicht kühl */
  --surface: #ffffff;       /* Karten, Tafeln */
  --surface-2: #e9eef5;     /* abgesetzte Lektionen */
  --text: #0f1c2e;          /* 16,4 : 1 auf --bg */
  --muted: #4a5a6e;         /* 6,5 : 1 auf --bg */
  --accent: #0e4f9f;        /* Verkehrsblau. Weiß darauf 8,0 : 1, auf --bg 7,4 : 1 */
  --on-accent: #ffffff;
  --accent-tief: #093d7c;
  --accent-hell: #dfe9f7;
  --border: #d3dae4;
  --error: #b42318;

  --gelb: #f7c600;          /* Blinker, Spur, Markierung in den Zeichnungen */
  --gelb-tief: #d9a900;

  --nacht: #0b1c33;         /* dunkle Lektionen (2 und 6) */
  --nacht-2: #122a4a;
  --nacht-text: #eaf0f8;
  --nacht-leise: #a9b9cf;   /* 7,9 : 1 auf --nacht */

  --asphalt: #3b4250;
  --asphalt-hell: #4a525f;
  --gehsteig: #d8d4cc;
  --gras: #7ea86a;

  --radius: 18px;
  --radius-gross: 28px;
  --radius-klein: 10px;

  --breite: 1200px;
  --abstand: clamp(72px, 9vw, 128px);
  --kopf: 64px;
  --leiste: 60px;           /* feste Lektionsleiste unten */
}