/* =====================================================================================
   Vorlage 38 Fahrradwerkstatt · 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: eine Konstruktionszeichnung. Das Rad steht auf Zeichenpapier (--papier), die Abschnitte wechseln
   zwischen Anthrazit, Türkis, Orange, Gelb und Blau. Eine Marke (Orange) führt, die anderen Farben
   gehören zu den Bauteilen.
   ===================================================================================== */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

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

  --bg: #f5f1e6;            /* Zeichenpapier */
  --surface: #fffdf8;       /* Karten, Felder */
  --text: #1e2327;          /* Anthrazit, 14 : 1 auf Papier */
  --muted: #4b555c;         /* 6,6 : 1 auf Papier, 7,6 : 1 auf Weiß */
  --accent: #ff6a13;        /* Orange: Hauptknopf, Markierung. Anthrazit darauf 5,5 : 1 */
  --on-accent: #1e2327;
  --border: #cfc7b3;
  --error: #b42318;

  --anthrazit: #1e2327;
  --anthrazit-2: #2a3036;
  --anthrazit-3: #3a424a;
  --papier: #f5f1e6;
  --weiss: #fffdf8;
  --orange: #ff6a13;
  --orange-text: #b83f00;   /* Orange als Schrift auf hellem Grund: 5,6 : 1 auf Weiß */
  --orange-tief: #e0560a;
  --tuerkis: #18c5b3;       /* Anthrazit darauf 7,3 : 1 */
  --tuerkis-tief: #00756c;  /* Türkis als Schrift auf hellem Grund: 5,6 : 1 auf Weiß */
  --gelb: #ffd02e;          /* Anthrazit darauf 11 : 1 */
  --blau: #2457d6;          /* Weiß darauf 6,6 : 1 */
  --blau-tief: #173a95;
  --hell-auf-dunkel: #e9edef;   /* Text auf Anthrazit, 13 : 1 */
  --leise-auf-dunkel: #aeb8bf;  /* 7,9 : 1 auf Anthrazit */

  --linie: rgba(30, 35, 39, .16);
  --radius: 6px;
  --radius-gross: 14px;

  --kopf: 64px;
  --panel-b: clamp(440px, 46vw, 720px);
  --spalte: 780px;

  /* Rahmenfarbe des Rades (js/mein-rad.js setzt sie nach der Wahl) */
  --rahmen: #ff6a13;
  --rahmen-d: #c24500;
  --rahmen-h: #ffb27a;
  --decal: #ffffff;
}