/* klickrichtig – Design-Tokens, Farbwelt „Graphit & Zitrone“ (GO Joern 18.10.2026).
   Erzeugt von marke/quellen/bauen.py – nicht von Hand ändern. Gleiche Werte in tokens.json.
   Kopie für website/: Schriftpfade auf assets/fonts/ angepasst (sonst unverändert).
   TTF-Dateien und OFL-Lizenztexte liegen in website/assets/fonts/. */

@font-face { font-family: "Figtree"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("fonts/Figtree-Bold.ttf") format("truetype"); }
@font-face { font-family: "Figtree"; font-weight: 800; font-style: normal; font-display: swap;
  src: url("fonts/Figtree-ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/AtkinsonHyperlegibleNext-Regular.ttf") format("truetype"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("fonts/AtkinsonHyperlegibleNext-Bold.ttf") format("truetype"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("fonts/AtkinsonHyperlegibleNext-Italic.ttf") format("truetype"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 700; font-style: italic; font-display: swap;
  src: url("fonts/AtkinsonHyperlegibleNext-BoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Atkinson Hyperlegible Mono"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/AtkinsonHyperlegibleMono-Regular.ttf") format("truetype"); }

:root {
  --kr-primaer: #262A33;
  --kr-primaer-dunkel: #16181D;
  --kr-primaer-hell: #EEF0F3;
  --kr-auf-primaer-text: #D5D8DE;
  --kr-akzent: #E3EC4F;  /* Zitrone: auf Dunkel frei; auf Hell NUR als Textmarker-Fläche hinter dunkler Schrift */
  --kr-akzent-hell: #FAFBE0;
  --kr-knopf: #E3EC4F;
  --kr-knopf-text: #1D1F24;
  --kr-tinte: #1D1F24;
  --kr-grau: #5D6270;
  --kr-linie: #DCDFE4;  /* nie Schrift */
  --kr-flaeche: #F5F6F7;
  --kr-weiss: #FFFFFF;
  --kr-erfolg: #2A7048;
  --kr-erfolg-hell: #E7F3EC;
  --kr-warnung: #B3261E;
  --kr-warnung-hell: #FCE8E6;
  --kr-info: #2D5B9A;
  --kr-info-hell: #E9F0FA;
  /* Markierungen in Bildschirmfotos */
  --kr-markierung-rahmen: #262A33;       /* 3 px */
  --kr-markierung-schein: #E3EC4F;       /* 8 px außen, Deckkraft 90 % */
  --kr-klickpunkt-ring: #262A33;         /* Pflicht auf hellem Grund */
  --kr-schrift-titel: "Figtree", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --kr-schrift-text: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --kr-schrift-mono: "Atkinson Hyperlegible Mono", ui-monospace, Consolas, monospace;
  --kr-gewicht-text: 400;
  --kr-gewicht-fett: 700;
  --kr-gewicht-titel: 800;
  --kr-groesse-klein: 0.875rem;
  --kr-groesse-text: 1.0625rem;
  --kr-groesse-gross: 1.25rem;
  --kr-groesse-h3: 1.25rem;
  --kr-groesse-h2: clamp(1.625rem, 3.2vw, 2.125rem);
  --kr-groesse-h1: clamp(2rem, 4.6vw, 3rem);
  --kr-zeilenhoehe-text: 1.6;
  --kr-zeilenhoehe-titel: 1.15;
  --kr-abstand-1: 4px;
  --kr-abstand-2: 8px;
  --kr-abstand-3: 12px;
  --kr-abstand-4: 16px;
  --kr-abstand-5: 24px;
  --kr-abstand-6: 32px;
  --kr-abstand-7: 48px;
  --kr-abstand-8: 64px;
  --kr-radius-klein: 6px;
  --kr-radius: 12px;
  --kr-radius-gross: 16px;
  --kr-schatten: 0 6px 18px rgba(29, 31, 36, .08);
  --kr-breite-inhalt: 1080px;
}