/* =====================================================================================
   Vorlage 15 Content Creator · Farben, Schrift, Ecken, Abstände
   Brücke zur Web-App: die Namen --bg --surface --text --muted --accent --on-accent
   --border --radius --schrift sind dieselben wie in 00_Projektstart/starter-webapp/styles.css.
   Umfärben: --accent, --accent-tief, --accent-hell ändern, danach pruefen.mjs (Kontrast).
   ===================================================================================== */
@font-face {
  font-family: "Anybody";
  src: url("../fonts/anybody-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-display: swap;
}

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

  --bg: #ffffff;            /* heller Grund */
  --surface: #f2f4ef;       /* abgesetzte helle Abschnitte, kühles Hellgrau mit Hauch Grün */
  --text: #0e100d;          /* Schrift auf hell, 19,1 : 1 auf Weiß */
  --muted: #5a6056;         /* leiser Text, 6,5 : 1 auf Weiß, 5,9 : 1 auf --surface */
  --accent: #c6f432;        /* die eine Farbe: Limette. Knöpfe, Marken, Linien. Auf --dunkel 14,9 : 1 */
  --on-accent: #0e100d;     /* Schrift auf Limette, 14,9 : 1 */
  --accent-tief: #3b6100;   /* Limette als Schrift auf hell: 7,3 : 1 auf Weiß, 6,6 : 1 auf --surface */
  --accent-hell: #eaf6c6;   /* weiche Limettenfläche für Kacheln (Fläche, nie Schrift) */
  --border: #dfe3d9;        /* Zierlinien auf hell */
  --error: #b42318;         /* Fehlermeldungen in einer Web-App, 6,5 : 1 auf Weiß */

  --dunkel: #0e100d;        /* Grundstimmung: Kopf, erster Bildschirm, Ausrüstung, Fuß */
  --dunkel-2: #191c16;      /* Kacheln auf dunkel */
  --dunkel-text: #eef0ea;   /* Schrift auf dunkel, 16,7 : 1 */
  --dunkel-leise: #a8ad9f;  /* leise auf dunkel, 8,3 : 1 */
  --dunkel-linie: rgba(238, 240, 234, .12);

  --radius: 20px;           /* Karten, Kacheln */
  --radius-gross: 32px;     /* große Bilder, Bühnen */
  --radius-klein: 12px;     /* Felder, Marken */

  --breite: 1260px;         /* Inhalt höchstens so breit, immer mittig */
  --spalte: 660px;          /* Textspalte */
  --abstand: clamp(80px, 10.5vw, 144px);   /* zwischen den Abschnitten */
  --kopf: 64px;

  --breit: 132%;            /* Breite der Überschriften (Achse wdth der Anybody) */
}