/* Praxis-Kit Design-Tokens: die EINZIGE Stelle fuer Farben, Schrift, Abstaende, Radien.
   Freigegeben: Petrol #1D4E5F, Orange #D9792B, Text auf Orange #14191C, Text #1B262C, Atkinson Hyperlegible (selbst gehostet).
   Pro Kit austauschbar: nur --akzent / --akzent-rand / --akzent-hell / --auf-akzent (in build.py: seite.akzent).
   Kontrastwerte gegen Weiss, falls nicht anders angegeben (WCAG AA: Text >= 4,5:1). */

@font-face { font-family: "Atkinson Hyperlegible"; src: url("/fonts/atkinson-hyperlegible-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/fonts/atkinson-hyperlegible-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/fonts/atkinson-hyperlegible-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  /* Marke (fest fuer die ganze Reihe) */
  --petrol: #1D4E5F;          /* 9,1:1  Ueberschriften, Links */
  --petrol-dunkel: #143844;   /* 12,5:1 Hover, Fusszeile */
  --petrol-hell: #E8F0F2;     /* Flaechen; Petrol darauf 7,9:1 */
  --text: #1B262C;            /* 15,4:1 */
  --text-leise: #3E4C53;      /* 8,9:1 */
  --text-hell: #E6EEF0;       /* Text auf Petrol-dunkel */
  --linie: #C9D6DB;           /* nur Linien, nie Text */
  --feldrand: #5C6E76;        /* Formularrahmen, 5,6:1 (Nicht-Text >= 3:1) */
  --hintergrund: #FFFFFF;
  --flaeche: #F4F7F8;

  /* Akzent (pro Kit austauschbar, Pflegegrad = Orange) */
  --akzent: #D9792B;          /* nur Knoepfe, Linien, Fokus; Weiss darauf 3,1:1 = NICHT verwenden */
  --akzent-rand: #B4611D;
  --akzent-hover: #C96B20;
  --akzent-hell: #FBEFE4;     /* Hinweisflaechen; Text darauf 13,7:1 */
  --auf-akzent: #14191C;      /* Text auf Akzent, 5,7:1 */
  /* Rueckwaertskompatible Namen */
  --orange: var(--akzent);
  --orange-hell: var(--akzent-hell);

  /* Platzhalter / Entwurf (vor Veroeffentlichung entfernen) */
  --gelb: #FFF1A8;
  --gelb-hell: #FFFBE0;
  --gelb-rand: #8A6D00;
  --gelb-text: #3A3000;

  /* Schrift */
  --schrift: "Atkinson Hyperlegible", "Segoe UI", Verdana, Arial, sans-serif;
  --zeilenhoehe: 1.55;

  /* Abstaende (Basis 1rem = 18 px mobil / 19 px ab 64em) */
  --abstand-1: .25rem; --abstand-2: .5rem; --abstand-3: .8rem; --abstand-4: 1rem;
  --abstand-5: 1.4rem; --abstand-6: 2rem; --abstand-7: 2.6rem; --abstand-8: 3.6rem;

  /* Formen */
  --radius-s: 4px; --radius-m: 8px; --radius: 10px; --radius-pille: 999px;
  --schatten: 0 2px 14px rgba(20,56,68,.15);
  --fokus-ring: 3px solid var(--akzent);
  --fokus-schatten: 0 0 0 6px var(--petrol);
  --ziel-min: 48px;           /* Mindesthoehe Klickflaechen */

  /* Raster */
  --breite: 72rem;
  --lesebreite: 44rem;
}