/* stromtarife-{stadt}.de — Design Tokens
   Anzeigetafel-System. Quelle: Design v3 (Claude Design), unverändert
   übernommen aus files.zip/colors_and_type.css. */

@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@400;500;600;700&family=Libre+Franklin:wght@400;500;600&family=Oswald:wght@300;400;500;600&display=swap');

:root {
  /* Farben */
  --ink: #14224F;          /* Preußischblau — Primär, Flächen, Fließtext */
  --signal: #D02A22;       /* Signalrot — CTA, Rubriken, Vergleichsmarke */
  --board: #F0C948;        /* Tafelgelb — Zahlen/Spaltenköpfe auf --ink */
  --paper: #F3EDE1;        /* Creme — Seitengrund, Text auf --ink */
  --desk: #DDD5C4;         /* Umgebungsfläche außerhalb der Seite */
  --ink-muted: #5A6486;    /* einzige Zwischenstufe — Labels, Meta */

  /* Schriften */
  --font-display: 'Zilla Slab', serif;     /* Überschriften, Anbieternamen, Fragen */
  --font-text: 'Libre Franklin', sans-serif; /* Fließtext */
  --font-figure: 'Oswald', sans-serif;     /* NUR Zahlenkolonnen, Spaltenköpfe, Labels, Buttons */

  /* Schriftgrößen (Desktop) */
  --display-xxl: 76px;   /* mobil 42px */
  --display-xl: 38px;    /* mobil 26px */
  --display-l: 30px;
  --display-m: 24px;
  --display-s: 19px;
  --text-lede: 19px;
  --text-base: 16px;
  --text-small: 14px;
  --figure-xl: 34px;
  --figure-l: 29px;
  --figure-m: 24px;
  --label: 13px;   /* Versalien, letter-spacing .14–.18em */
  --label-s: 11px;

  /* Linien & Radien */
  --radius: 0px;              /* durchgehend, ohne Ausnahme */
  --rule-hair: 1px;           /* Zeilen, Spalten, Textblöcke */
  --rule-section: 3px;        /* Sektionsköpfe, Tafelkopf, Marginalie */
  --seam: 1px;                /* Split-Flap-Naht, auf 50% Zellenhöhe */
  --shadow: none;             /* kein Schatten im gesamten System */

  /* Abstände */
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 20px;
  --space-5: 26px;
  --space-6: 36px;
  --space-7: 52px;
  --gutter-desktop: 44px;
  --gutter-mobile: 18px;

  /* Raster */
  --grid-tafel: 56px 3fr 1.1fr 1.1fr .9fr 1.3fr 132px;
  --grid-editorial: 200px 1fr 1fr;

  --container: 1200px;
}

/* Transparenzstufen auf --ink (nur diese, kein separates Grau-System) */
:root {
  --ink-a35: rgba(20, 34, 79, 0.35);   /* Spaltenlinien auf hellem Grund */
  --paper-a35: rgba(243, 237, 225, 0.35); /* Rechner-Block: Zeilenlinie unten, Segmented-Border */
  --paper-a25: rgba(243, 237, 225, 0.25); /* Rechner-Block: Spaltenlinien */
  --paper-a18: rgba(243, 237, 225, 0.18); /* Zeilenlinien auf --ink */
  --paper-a72: rgba(243, 237, 225, 0.72); /* gedämpfter Text auf --ink */
}

body {
  background: var(--desk);
  color: var(--ink);
  font-family: var(--font-text);
}

/* Basisregel: font-figure nie für Fließtext, immer tabular-nums bei Zahlen */
.figure {
  font-family: var(--font-figure);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}