/* design.css — das Designsystem der Website, EIN Ort.
 *
 * Jede Seite unter landing/ nutzt nur diese Token; eine px-Größe oder
 * eine Farbe außerhalb dieser Datei ist ROT (werkzeug/design_faelle.py).
 *
 * Farben stehen hier NICHT: sie kommen aus dem Kern-Abdruck des
 * Dashboards (kern/farbwelten.css, gebaut aus kern/farbwelten.json) —
 * hell und dunkel, dieselben Welten wie im Produkt. Diese Datei nennt
 * sie nur beim Namen (var(--text), var(--linie), …).
 *
 * Haltepunkte: --bruch-handy / --bruch-tablet aus kern/kern.css. In
 * @media geht var() nicht; dort steht der Wert des Kerns, und der
 * Prüffall lässt nur genau diese Werte zu.
 *
 * Eingebunden nach kern.css und farbwelten.css:
 *   <link rel="stylesheet" href="/design.css">
 */

:root {
  /* Schrift: eine Familie, der System-Stack des Kerns — keine Webschrift,
     kein Fremd-CDN. */
  --schrift:        var(--font);
  --schrift-mono:   var(--font-mono);

  /* Typo-Skala (rem: folgt der Schriftgröße, die der Leser eingestellt hat) */
  --schrift-fein:   0.75rem;     /* 12 — Bildunterschriften, Quellen    */
  --schrift-klein:  0.875rem;    /* 14 — Listen, Nebentext              */
  --schrift-basis:  1rem;        /* 16 — Fließtext                      */
  --schrift-gross:  1.125rem;    /* 18 — Einleitung, Kartentitel        */
  --titel-4:        1.25rem;     /* 20                                  */
  --titel-3:        1.5rem;      /* 24                                  */
  --titel-2:        clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);   /* 28–40  */
  --titel-1:        clamp(2.25rem, 1.5rem + 3vw, 3.75rem);    /* 36–60  */
  --zeilenhoehe:        1.6;
  --zeilenhoehe-titel:  1.15;
  --laufweite-titel:    -0.02em;

  /* Abstände: 8-px-Raster (-0 ist der halbe Schritt für Feinheiten) */
  --abstand-0:   4px;
  --abstand-1:   8px;
  --abstand-2:  16px;
  --abstand-3:  24px;
  --abstand-4:  32px;
  --abstand-5:  40px;
  --abstand-6:  48px;
  --abstand-7:  56px;
  --abstand-8:  64px;
  --abstand-10: 80px;
  --abstand-12: 96px;

  /* Sektionen: großzügig — ≥ 96 px Desktop, ≥ 56 px Handy (unten) */
  --sektion:    var(--abstand-12);

  /* Breiten */
  --zeile-max:      70ch;        /* 65–75 Zeichen je Zeile               */
  --band-lesen:     900px;       /* Rechtstexte, Formulare mit Text      */
  --formular-max:   560px;
  --kachel-breit:   300px;       /* Mindestbreite einer Karte im Raster  */
  --kachel:         220px;
  --kachel-schmal:  200px;
  --qr-groesse:     120px;
  --punkt:          14px;        /* Ampelpunkt einer Farbwelt            */
  --band-bild-hoehe: 240px;      /* Höhe eines Bildes im Bilderband      */

  /* Linien, Radien, Schatten */
  --linie-breite:   1px;
  --rund-klein:     6px;
  --rund:           12px;
  --rund-gross:     20px;
  --schatten-1:     0 1px 2px color-mix(in srgb, var(--text) 6%, transparent);
  --schatten-2:     0 8px 24px color-mix(in srgb, var(--text) 10%, transparent);
  --schatten-rand:  0 0 0 var(--linie-breite) var(--karte);

  /* Bewegung */
  --dauer-kurz:     150ms;
  --dauer:          300ms;
  --kurve:          cubic-bezier(0.2, 0.8, 0.2, 1);
  --laufband-tempo: 40;          /* Bildpunkte je Sekunde (laufband.js) */

  /* Druck (qr.html): Papier ist weiß, Schrift schwarz — unabhängig von
     der Farbwelt, die gerade am Bildschirm gilt. */
  --druck-papier:   white;
  --druck-text:     black;
}

@media (max-width: 720px) {          /* = --bruch-handy */
  :root {
    --sektion:         var(--abstand-7);
    --band-bild-hoehe: 180px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dauer-kurz: 0ms;
    --dauer:      0ms;
  }
}