/* =====================================================================================
   Stemmhalle · 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-text, --accent-hell. Die Muskeln im Körper und in der Szene
   übernehmen den Akzent von selbst.
   Zwei Schriftfamilien: Big Shoulders Display nur für Überschriften, Zahlen, Preise und Uhrzeiten,
   Atkinson Hyperlegible für alles, was gelesen wird.
   ===================================================================================== */
@font-face {
  font-family: "Big Shoulders Display";
  src: url("../fonts/big-shoulders-display-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-hyperlegible-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-hyperlegible-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --schrift: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --schrift-gross: "Big Shoulders Display", "Arial Narrow", "Segoe UI", sans-serif;

  --bg: #ffffff;            /* Grund */
  --surface: #f2f3f5;       /* abgesetzte Flächen, kühles Hellgrau */
  --surface-2: #e7e9ec;     /* Felder auf --surface */
  --text: #0d0d0e;          /* 19,4 : 1 auf Weiß */
  --muted: #53575e;         /* 7,3 : 1 auf Weiß, 6,6 : 1 auf --surface */
  --accent: #ff4f1f;        /* die eine Farbe: Signal-Orangerot. Knöpfe, Muskeln, Puls */
  --on-accent: #0d0d0e;     /* Schrift auf dem Akzent: Schwarz 5,9 : 1 (Weiß wäre nur 3,3 : 1) */
  --accent-text: #c2350b;   /* derselbe Ton dunkler als Schrift auf Weiß, 5,5 : 1, auf --surface 5,0 : 1 */
  --accent-hell: #ffe9e2;   /* Hauch Akzent für Flächen, nie Schrift */
  --border: #dfe1e5;
  --error: #b42318;

  --dunkel: #0d0d0e;        /* erster Bildschirm, Anzeige, Kontakt, Fuß */
  --dunkel-2: #1b1c1f;      /* Karten auf dunkel */
  --dunkel-3: #26282d;      /* Felder auf dunkel */
  --dunkel-text: #f3f3f4;   /* 17,5 : 1 auf --dunkel */
  --dunkel-leise: #a9adb4;  /* 8,6 : 1 auf --dunkel, 7,6 : 1 auf --dunkel-2 */
  /* Akzent als Schrift auf dunkel: --accent selbst, 5,9 : 1 */

  /* Körper im ersten Bildschirm (auf --dunkel) */
  --haut: #1d1f23;          /* Umriss: Kopf, Hände, Gelenke */
  --muskel: #34373d;        /* Muskel in Ruhe */
  --muskel-kante: #4a4e56;  /* feine Kante zwischen den Muskeln */

  /* Szene „Zwölf Wochen" (auf --surface) */
  --figur: #17181b;         /* Sportlerin */
  --figur-arm: #2d3036;
  --figur-leise: #9da2aa;   /* Trainerin, Hilfslinien */

  --radius: 22px;
  --radius-gross: 36px;
  --radius-klein: 12px;

  --breite: 1280px;
  --abstand: clamp(80px, 10.5vw, 140px);
  --kopf: 66px;
}