/* =====================================================================================
   Vorlage 37 Kinderhaus · 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.
   Bild: ein Brettspiel. Vier Primärfarben (Rot, Blau, Gelb, Grün) tragen die Seite, jeder Abschnitt
   hat seinen eigenen Grund. Alles Dunkle ist ein tiefes Marineblau (--tinte), nie reines Schwarz.
   Kontrast (gerechnet): --tinte auf --gelb 10,6 : 1, Weiß auf --rot 4,7 : 1, Weiß auf --blau 5,8 : 1,
   Weiß auf --gruen 5,2 : 1, --tinte auf --blau-hell 11,5 : 1, --muted auf Weiß 8,4 : 1.
   ===================================================================================== */
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-hyperlegible-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-hyperlegible-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

  /* die vier Primärfarben, je Kraftton, tief (für Schrift und Kanten) und hell (für Flächen) */
  --rot: #d9352a;
  --rot-tief: #a82219;
  --rot-hell: #ffd8d2;
  --blau: #1b5fd1;
  --blau-tief: #123f96;
  --blau-hell: #d3e5ff;
  --gelb: #ffc61f;
  --gelb-tief: #d99a00;
  --gelb-hell: #fff0b5;
  --gruen: #0f7d3e;
  --gruen-tief: #0a5a2c;
  --gruen-hell: #cdeed9;

  --tinte: #1c2352;          /* Schrift, Kanten, Fuß: Marineblau */
  --text: #1c2352;
  --muted: #454c78;
  --surface: #ffffff;        /* die Spielkarte */
  --surface-2: #fff9ea;      /* Papier, abgesetzte Felder */
  --bg: #d3e5ff;             /* Grund des Starts (Himmel) */
  --accent: var(--rot);      /* Hauptknopf */
  --on-accent: #ffffff;
  --border: #1c2352;
  --error: #b42318;

  --radius: 26px;            /* Karten */
  --radius-klein: 14px;
  --radius-rund: 999px;
  --kante: 4px;              /* Linienstärke der dicken Zeichenkante */
  --schatten-hart: 0 6px 0 rgba(28, 35, 82, .92);

  --breite: 1320px;
  --kopf: 68px;
  --lane: 180px;             /* Streifen, in dem der Weg läuft (wechselt links und rechts) */
  --marke: 68px;             /* Durchmesser der Stationsmarke */
  --weg: 40px;               /* Breite des Wegs */
}