/* ============================================================
   GRUNDWERTE — Richtung A „Klar", dunkel ist Standard
   Alle Farben, Schriftgrößen und Abstände stehen NUR hier.
   Im übrigen Code niemals Hex-Werte, immer var(--name).
   Quelle: trainingsapp-projekt/konzepte/design-grundlagen.md,
   Abschnitte 1–3. Werte dort ändern, dann hier nachziehen.

   Farbwahl (Dunkel/Hell) kommt aus dem Profil und steht als
   data-theme am <html>: "dark" · "light" · "system" (wie Handy).
   ============================================================ */

/* Schrift liegt als Datei bei (Offline-Betrieb, keine Daten an Dritte).
   Atkinson Hyperlegible Next, SIL Open Font License 1.1, siehe fonts/OFL.txt.
   Eine Datei für alle Gewichte (variable Schrift). */
@font-face{
  font-family:"Atkinson Hyperlegible Next";
  src:url("./fonts/atkinson-next-latin.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Atkinson Hyperlegible Next";
  src:url("./fonts/atkinson-next-latin-ext.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Dunkel (Standard) ---------- */
:root{
  --bg:#0E1418; --surface:#172027; --raised:#1F2A32; --line:#2A3740;
  --field:#0E1418; --field-border:#5C6E7A;
  --ink:#E6EDF1; --muted:#9AAAB5;
  --accent:#4EC2C8; --accent-text:#6FD3D8; --on-accent:#05211F; --accent-soft:#15292D;
  --warn-bg:#2D240F; --warn-ink:#F2CD7C;
  --danger-bg:#3B1815; --danger-ink:#FFB4AB;
  --ok-bg:#12291D; --ok-ink:#8BE0AE;
  --shadow:none;

  --font:"Atkinson Hyperlegible Next",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;

  /* Schriftgrößen (design-grundlagen.md, Abschnitt 2) */
  --t-num-xl:3rem;      --t-num-xl-lh:3.25rem;   /* 48/52 */
  --t-num:2.5rem;       --t-num-lh:2.75rem;      /* 40/44 */
  --t-frage:1.625rem;   --t-frage-lh:2rem;       /* 26/32 */
  --t-titel:1.25rem;    --t-titel-lh:1.75rem;    /* 20/28 */
  --t-text:1.0625rem;   --t-text-lh:1.625rem;    /* 17/26 */
  --t-klein:.9375rem;   --t-klein-lh:1.375rem;   /* 15/22 */
  --t-mini:.875rem;     --t-mini-lh:1.25rem;     /* 14/20, nichts darunter */

  /* Raster aus 4 px */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-6:1.5rem; --s-10:2.5rem;

  /* Ecken: Felder 10, Knöpfe 14, Karten 18 */
  --r-s:.625rem; --r-m:.875rem; --r-l:1.125rem;

  /* Tippflächen */
  --tap:3rem;        /* 48 px Mindestmaß */
  --tap-gross:3.5rem;/* 56 px Hauptknopf und Stepper */

  --max:37.5rem;     /* Lesebreite, 600 px */
}

/* ---------- Hell ---------- */
:root[data-theme="light"]{
  --bg:#F3F6F7; --surface:#FFFFFF; --raised:#FFFFFF; --line:#D5DDE2;
  --field:#F3F6F7; --field-border:#7D8C96;
  --ink:#13202A; --muted:#51606C;
  --accent:#0B6970; --accent-text:#0B6970; --on-accent:#FFFFFF; --accent-soft:#E3EEF0;
  --warn-bg:#FFF2D4; --warn-ink:#5E3F00;
  --danger-bg:#FDE8E6; --danger-ink:#9B1C13;
  --ok-bg:#E2F3E8; --ok-ink:#1A6B3C;
  --shadow:0 1px 2px rgba(19,32,42,.06),0 6px 18px -8px rgba(19,32,42,.16);
}

/* „wie Handy": Hell nur, wenn das Gerät hell eingestellt ist */
@media (prefers-color-scheme:light){
  :root[data-theme="system"]{
    --bg:#F3F6F7; --surface:#FFFFFF; --raised:#FFFFFF; --line:#D5DDE2;
    --field:#F3F6F7; --field-border:#7D8C96;
    --ink:#13202A; --muted:#51606C;
    --accent:#0B6970; --accent-text:#0B6970; --on-accent:#FFFFFF; --accent-soft:#E3EEF0;
    --warn-bg:#FFF2D4; --warn-ink:#5E3F00;
    --danger-bg:#FDE8E6; --danger-ink:#9B1C13;
    --ok-bg:#E2F3E8; --ok-ink:#1A6B3C;
    --shadow:0 1px 2px rgba(19,32,42,.06),0 6px 18px -8px rgba(19,32,42,.16);
  }
}

/* ---------- Seite ---------- */
*{ box-sizing:border-box; }
html{ color-scheme:dark; background:var(--bg); }
:root[data-theme="light"]{ color-scheme:light; }
@media (prefers-color-scheme:light){ :root[data-theme="system"]{ color-scheme:light; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 var(--t-text)/var(--t-text-lh) var(--font);
  -webkit-text-size-adjust:100%;
  padding:env(safe-area-inset-top) 0 calc(var(--s-6) + env(safe-area-inset-bottom));
}
main{ max-width:var(--max); margin:0 auto; padding:0 var(--s-4); }

h1,h2,h3{ margin:0; line-height:1.2; text-wrap:balance; }
h1{ font-size:var(--t-frage); line-height:var(--t-frage-lh); font-weight:700; margin:var(--s-6) 0 var(--s-3); }
h2{ font-size:var(--t-titel); line-height:var(--t-titel-lh); font-weight:700; }
p{ margin:0; max-width:65ch; }
b,strong{ font-weight:700; }
a{ color:var(--accent-text); }

/* Zahlen immer gleich breit */
.num,.tabular,output,time{ font-variant-numeric:tabular-nums; }

/* Sichtbarer Fokus überall (Tastatur) */
:focus-visible{ outline:3px solid var(--accent-text); outline-offset:2px; }

/* Bewegung nur, wenn erwünscht */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}