/* Plattform: Tokens (Maße, Schriftgrößen, Breiten) für alle Bereiche. Eigene Datei, damit auch Seiten ohne kern.css sie
   nutzen können (Bearbeiten-Leiste der Landingpages, public/landingpage-bearbeiten.css). Geladen vor kern.css
   (src/ui/seite.js) und im Bearbeiten-Modus der Seiten. Regeln: DESIGN.md. Keine Farbwerte. */

/* ===================== 1. Tokens ===================== */

:root {
  /* Abstände im 4er-Raster */
  --abstand-1: 4px;
  --abstand-2: 8px;
  --abstand-3: 12px;
  --abstand-4: 16px;
  --abstand-5: 20px;
  --abstand-6: 24px;
  --abstand-7: 32px;
  --abstand-8: 48px;
  --abstand-9: 64px;

  /* Seite: Rand links und rechts, Luft oben und unten, Abstand zwischen Abschnitten */
  --rand: var(--abstand-7);
  --seite-oben: var(--abstand-7);
  --seite-unten: var(--abstand-9);
  --abstand-abschnitt: var(--abstand-8);

  /* Karte: ein Innenabstand, eine Lücke zwischen den Teilen, Lücke zwischen Feldern */
  --karte-innen: var(--abstand-7);
  --karte-luecke: var(--abstand-6);
  --feld-luecke: var(--abstand-4);

  /* Radien */
  --radius-klein: 8px;
  --radius: 12px;
  --radius-gross: 16px;
  --radius-rund: 999px;

  /* Höhen: Buttons und Felder, Auswahl-Chips */
  --hoehe: 44px;
  --hoehe-chip: 36px;

  /* Schriftgrößen und Zeilenhöhen */
  --text-seitentitel: 32px;
  --text-abschnitt: 24px;
  --text-kartentitel: 20px;
  --text-normal: 15px;
  --text-feld: 15px;
  --text-lesen: 17px;
  --text-klein: 13px;
  --text-etikett: 12px;
  --text-bildzahl: 48px;
  --zeile-titel: 1.2;
  --zeile-kartentitel: 1.35;
  --zeile-text: 1.6;
  --sperrung-etikett: 0.12em;

  /* Inhaltsbreiten */
  --breite-schmal: 480px;
  --breite-normal: 800px;
  --breite-breit: 1200px;

  /* Text-Hierarchie (Jan 02.11.2026: das Wichtigste sticht ins Auge, Unwichtiges rückt zurück). Vier Stufen aus der
     Textfarbe der Marke mit Transparenz, hell und dunkel getrennt abgestimmt (Deckkraft --ton-a2 … --ton-a4, dunkel
     gesetzt in src/ui/seite.js, dunkelTokens). Alle Stufen erreichen WCAG AA (4,5 zu 1) bei normaler Größe auf
     Seitengrund und Fläche, auch in den Paletten unter Aussehen. Werte im Bericht 2026-11-02-design-ruhe.
     Stufe 1 Titel, Zahlen, Hauptaktion · Stufe 2 Inhalt · Stufe 3 Hinweise, Metadaten, Datum · Stufe 4 leere Zustände. */
  --ton-a2: 86%;
  --ton-a3: 66%;
  --ton-a4: 60%;
  --text-hinweis: var(--text-klein);
  --text-still: var(--text-klein);
  --gewicht-stark: 500;

  /* Bewegung: nur dort, wo sie erklärt, was passiert (Akkordeon, Kartenreihe). Aus bei „Bewegung reduzieren“. */
  --dauer: 220ms;
  --kurve: cubic-bezier(.2, .7, .2, 1);
}

/* Die Stufen hängen an --text: überall neu rechnen, wo die Marke Farben setzt (Seite, dunkle Fläche der Musterseite) */
:root, .muster-dunkel {
  --ton-1: var(--text);
  --ton-2: color-mix(in srgb, var(--text) var(--ton-a2), transparent);
  --ton-3: color-mix(in srgb, var(--text) var(--ton-a3), transparent);
  --ton-4: color-mix(in srgb, var(--text) var(--ton-a4), transparent);
}
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  :root, .muster-dunkel { --ton-2: var(--text); --ton-3: var(--muted); --ton-4: var(--muted); }
}
@media (prefers-reduced-motion: reduce) {
  :root { --dauer: 0ms; }
}

/* Handy: dieselben Namen, kleinere Werte. Buttons und Felder werden höher (Daumen), Felder 16 px (kein Zoom auf iOS). */
@media (max-width: 640px) {
  :root {
    --rand: var(--abstand-5);
    --seite-oben: var(--abstand-6);
    --seite-unten: var(--abstand-8);
    --abstand-abschnitt: var(--abstand-7);
    --karte-innen: var(--abstand-5);
    --karte-luecke: var(--abstand-4);
    --hoehe: 48px;
    --hoehe-chip: 40px;
    --text-seitentitel: 28px;
    --text-abschnitt: 20px;
    --text-kartentitel: 18px;
    --text-feld: 16px;
    --text-lesen: 16px;
    --text-bildzahl: 40px;
  }
}