/* Alsterbahn – Tokens als CSS-Variablen (aus project/tokens.json des Design Systems) */
:root {
  --karton: #BEC6C4;
  --tiefschwarz: #191919;
  --weiss: #FFFFFF;
  --canvas: #F3F3F1;
  --hellgrau: #E3E6E5;
  --linie: #D9DCDB;
  --schiefer: #5E6468;
  --text-body: #2B2D29;
  --text-lead: #4A4D47;
  --text-meta: #7E8386;
  --fehler: #B42318;
  --akzent: var(--tiefschwarz);
  --fs: 0.9; /* Schriftskala: 1 = Entwurf, kleiner = kompakter (PIKO-Shop: Fließtext 14 px, H1 32 px) */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-56: 56px;
  --space-72: 72px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 12px -2px rgba(25, 25, 25, 0.12);
  --shadow-md: 0 8px 24px -6px rgba(25, 25, 25, 0.16);
  --shadow-lg: 0 24px 48px -12px rgba(25, 25, 25, 0.24);
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}