/* =========================================================================
   tokens.css – gemeinsame Design-Tokens für Stammtischapps und Spielfeldapps
   Quelle: design-tokens.json → "gemeinsam". Keine Farben hier (siehe theme-*.css).
   ========================================================================= */
:root {
  /* Schrift */
  --schrift-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --schrift-text: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;

  --fs-basis: 17px;
  --lh-basis: 1.55;
  --fs-h1: clamp(40px, 6.2vw, 78px);
  --lh-h1: 1.02;
  --ls-h1: -0.03em;
  --fs-h2: clamp(30px, 3.6vw, 44px);
  --lh-h2: 1.1;
  --ls-h2: -0.02em;
  /* Abgeleitet (nicht in design-tokens.json): H1 auf Unterseiten und H3 */
  --fs-h1-unterseite: clamp(34px, 4.6vw, 56px);
  --fs-h3: clamp(21px, 2vw, 24px);
  --lh-h3: 1.2;
  --fs-lead: clamp(18px, 1.6vw, 21px);
  --fs-karten-titel: 22px;
  --fs-klein: 15px;
  --fs-overline: 14px;
  --fw-overline: 700;
  --ls-overline: 0.08em;
  --fs-chip: 15px;
  --fs-wortmarke: 24px;
  --ls-wortmarke: -0.02em;

  /* Layout */
  --container-max: 1200px;
  --text-max: 72ch;
  --seitenrand: clamp(16px, 4vw, 40px);
  --abschnitt-y: clamp(48px, 7vw, 88px);
  --hero-y: clamp(40px, 7vw, 96px);
  --kachel-raster: repeat(auto-fill, minmax(255px, 1fr));
  --kachel-abstand: 16px;

  /* Abstände (abgeleitete Stufen auf 4-px-Raster) */
  --a-1: 4px;
  --a-2: 8px;
  --a-3: 12px;
  --a-4: 16px;
  --a-5: 20px;
  --a-6: 24px;
  --a-7: 32px;
  --a-8: 40px;
  --a-9: 56px;
  --kachel-innen: 22px;
  --werbung-abstand: 28px;

  /* Radien */
  --r-chip: 999px;
  --r-button: 14px;
  --r-button-klein: 12px;
  --r-badge: 999px;
  --r-icon-kachel: 14px;
  --r-karte: 20px;
  --r-karte-gross: 24px;
  --r-band: 28px;
  --r-werbung: 16px;
  --r-klein: 8px;

  /* Buttons und Bedienung */
  --btn-hoehe: 56px;
  --btn-padding: 16px 24px;
  --btn-schrift: 18px;
  --btn-kopf-hoehe: 44px;
  --btn-kopf-padding: 12px 18px;
  --touch-min: 44px;

  /* Icons */
  --icon-versprechen: 28px;
  --icon-kachel: 52px;
  --icon-in-kachel: 30px;
  --logo-kopf: 44px;
  --logo-fuss: 34px;

  /* Werbeflächen: reservierte Mindesthöhe (Handy / ab 728 px) */
  --werbung-hoehe-handy: 280px;
  --werbung-hoehe-pc: 110px;

  /* Bewegung */
  --dauer-kurz: 150ms;
  --dauer: 200ms;
  --dauer-lang: 250ms;
  --kurve: cubic-bezier(.2, .7, .2, 1);
}