/* ==========================================================================
   pro Klimafakten – Design-Tokens
   Quelle: Corporate Design v1.2 und gemeinsame brand-system.css (26.10.2026)
   Spätere Entsprechung: theme.json → settings.color.palette, typography,
   spacing.spacingSizes. Die Slugs hier sind die späteren theme.json-Slugs.
   [NEU] = nicht im Design-System, Vorschlag aus diesem Entwurf.
   ========================================================================== */

@font-face {
  font-family: "PT Sans";
  src: url("../fonts/PTSans-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PT Sans";
  src: url("../fonts/PTSans-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "PT Sans";
  src: url("../fonts/PTSans-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* Marken- und Anwendungsfarben: brand-system.css ist die gemeinsame Quelle. */

  /* Semantische Tokens (Design-System) */
  --surface:      var(--pkf-weiss);
  --ink:          var(--pkf-schwarz);
  --action:       var(--pkf-signalgruen);
  --on-action:    var(--pkf-weiss);
  --highlight:    var(--pkf-impulsgruen);
  --on-highlight: var(--pkf-schwarz);

  /* Gemeinsame Typografie; bestehende Website-Skala führt. */
  --font-sans:var(--pkf-font-sans); --font-serif:"PT Serif",Georgia,serif;
  --fs-display:var(--pkf-fs-hero); --lh-display:var(--pkf-lh-hero);
  --fs-h1:var(--pkf-fs-h1); --lh-h1:var(--pkf-lh-h1);
  --fs-h2:var(--pkf-fs-h2); --lh-h2:var(--pkf-lh-h2);
  --fs-h3:var(--pkf-fs-h3); --lh-h3:var(--pkf-lh-h3);
  --fs-lead:var(--pkf-fs-lead); --lh-lead:var(--pkf-lh-lead);
  --fs-body:var(--pkf-fs-body); --lh-body:var(--pkf-lh-body); --fs-small:var(--pkf-fs-small);

  /* [NEU] Spacing – 8er-Raster */
  --space-1: .25rem;  --space-2: .5rem;  --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;   --space-7: 3rem;   --space-8: 4rem;
  --space-9: 6rem;
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* Gemeinsame Formensprache: alle Ecken rechtwinklig. */
  --radius-s:var(--pkf-radius); --radius-m:var(--pkf-radius); --radius-pill:var(--pkf-radius);

  /* Layout */
  --content: 72rem;   /* 1152px */
  --narrow:  44rem;   /* Lesebreite */
  --gutter:  clamp(1rem, .5rem + 2.5vw, 2.5rem);
  --header-h: 5.625rem;
}