/* =====================================================================================
   Vorlage 15 Content Creator (neu) · 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.
   Umfärben: --accent, --accent-tief, --accent-hell. Die Szene im Sucher hat feste Farben im SVG
   (Holz, Wand, Berge), nur die grünen Schärfekanten und der Fokusrahmen nehmen --accent nicht auf:
   Sie stehen als #c6f432 in index.html, weil die Szene auch als Bild ins Canvas gezeichnet wird.
   ===================================================================================== */
@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: #f4f3ee;            /* heller Grund der ruhigen Abschnitte, warmes Weiß */
  --surface: #ffffff;       /* Karten */
  --surface-2: #e8eae1;     /* abgesetzte helle Abschnitte */
  --text: #10120f;          /* 17,9 : 1 auf --bg */
  --muted: #545a50;         /* 6,4 : 1 auf --bg, 5,6 : 1 auf --surface-2 */
  --accent: #c6f432;        /* die eine Farbe: Limette. Knöpfe, Schärfekanten, Fokusrahmen. Auf --dunkel 14,9 : 1 */
  --on-accent: #10120f;     /* Schrift auf Limette */
  --accent-tief: #3b6100;   /* Limette als Schrift auf hell: 6,7 : 1 auf --bg */
  --accent-hell: #e6f3c0;   /* weiche Limettenfläche (nur Fläche, nie Schrift) */
  --border: #d9ddd0;
  --error: #b42318;

  --dunkel: #0e100d;        /* Sucher, Drehtag, Kontakt: fast Schwarz mit Hauch Grün */
  --dunkel-2: #1a1d17;      /* Karten auf dunkel */
  --dunkel-text: #eef0ea;   /* 16,7 : 1 auf --dunkel */
  --dunkel-leise: #a8ad9f;  /* 8,3 : 1 auf --dunkel */
  --dunkel-linie: rgba(238, 240, 234, .14);
  --rec: #ff4538;           /* nur der Aufnahme-Punkt im Sucher, kein zweiter Akzent */

  --radius: 20px;
  --radius-gross: 30px;
  --radius-klein: 12px;

  --breite: 1260px;
  --abstand: clamp(80px, 10vw, 140px);
  --kopf: 64px;
  --zl: 96px;               /* Höhe der Zeitleiste unten im klebenden Abschnitt */
  --breit: 130%;            /* Breite der Überschriften (Achse wdth der Anybody) */
}