/* ==========================================================================
   Design-Tokens — greenscan / 2nd look
   Alle Groessen fluid zwischen 375px und 1440px Viewport.
   Keine feste Wurzel-Schriftgroesse: die Skala rechnet auf dem Browser-Default,
   damit vergroesserte Schrift in den Systemeinstellungen wirksam bleibt.
   ========================================================================== */

:root {
  /* --- Marke: Farben aus dem Logo ------------------------------------- */
  --lime: #b8c417;              /* Akzent — nur Flaeche, Linie, Unterstreichung */
  --lime-soft: #eef1c8;         /* helle Akzentflaeche */
  --lime-line: #d9e07a;         /* Trennlinie in Limette */
  --lime-text: #6c7409;         /* abgedunkelte Limette fuer Ziffern auf Weiss */
  /* Das Logo-Gruen, leicht abgedunkelt — derselbe Farbton (64 Grad),
     Helligkeit 43 auf 38 Prozent. Darauf dunkle Schrift: 6,34:1.
     Weisse Schrift scheidet aus, sie kaeme nur auf 2,46:1. */
  --aktion: #a3ad14;            /* Buttonflaeche */
  --aktion-hover: #9aa413;      /* Hover, noch etwas tiefer */
  --green: #5c630c;             /* Textlinks auf Weiss, 6,47:1 */
  --green-dark: #4a5009;
  --grey: #6f7171;              /* Sekundaertext (4,91:1 auf Weiss) */
  --ink: #232423;               /* Fliesstext (15,2:1 auf Weiss) */
  --paper: #ffffff;
  --paper-soft: #f7f8f4;        /* abgesetzte Sektionsflaeche */
  --border: #d8dad4;
  --border-soft: #ececec;

  /* Dunkle Flaeche: neutrales Grau, kein Farbstich — die Limette wirkt
     darauf staerker als auf einem gruenen Untergrund. */
  --dunkel: #333433;
  --auf-dunkel: #dcdcda;        /* 10,3:1 */
  --auf-dunkel-leise: #a9aaa8;  /* 5,7:1 */

  /* --- Zweitton je Einheit ---------------------------------------------
     Die Limette ist die Klammer und steht auf allen drei Domains. Damit die
     Einheiten trotzdem unterscheidbar bleiben, traegt jede zusaetzlich einen
     eigenen Zweitton fuer abgesetzte Flaechen, Trennlinien und die Fusszeile.
     Hier stehen die neutralen Vorgaben, ueberschrieben wird pro Seite.

     Alle Werte nachgerechnet: --ton-text erreicht auf Weiss mindestens
     5,6:1, --ton-tief traegt die Limette mit mindestens 5,5:1. */
  --ton-flaeche: var(--paper-soft);
  --ton-linie: var(--border);
  --ton-text: var(--green);
  --ton-tief: var(--dunkel);
  --auf-ton-tief: #dcdcda;
  --auf-ton-tief-leise: #a9aaa8;

  /* Limette hat auf Weiss nur 1,92:1 und ist als Textfarbe unzulaessig (BFSG).
     Fuer Text auf limettener Flaeche gilt --ink (8,12:1). */

  /* --- Typografie ------------------------------------------------------ */
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fw-normal: 400;
  --fw-semi: 600;
  --fw-semi-bold: 700;
  --fw-bold: 800;

  /* Skala 02.08.2026 um rund 8 Prozent angehoben. Alle Werte fluid zwischen
     375 und 1440 px Viewport, gerechnet auf dem Browser-Default. */
  --fs-xs: clamp(0.875rem, 0.853rem + 0.0939vw, 0.9375rem);    /* 14 → 15 */
  --fs-sm: clamp(1rem, 0.978rem + 0.0939vw, 1.062rem);         /* 16 → 17 */
  --fs-ui: clamp(1.125rem, 1.081rem + 0.1878vw, 1.25rem);      /* 18 → 20   Button, Menue */
  --fs-base: clamp(1.125rem, 1.081rem + 0.1878vw, 1.25rem);    /* 18 → 20   Fliesstext */
  --fs-md: clamp(1.25rem, 1.184rem + 0.2817vw, 1.438rem);      /* 20 → 23 */
  --fs-lead: clamp(1.25rem, 1.184rem + 0.2817vw, 1.438rem);    /* 20 → 23   Subline */
  --fs-num: clamp(1.25rem, 1.184rem + 0.2817vw, 1.438rem);     /* 20 → 23   Ablauf-Ziffer */
  --fs-lg: clamp(1.5rem, 1.434rem + 0.2817vw, 1.688rem);       /* 24 → 27 */
  --fs-xl: clamp(1.875rem, 1.633rem + 1.033vw, 2.562rem);      /* 30 → 41 */
  --fs-2xl: clamp(2.25rem, 1.612rem + 2.723vw, 4.062rem);      /* 36 → 65 */
  --fs-person: clamp(1.875rem, 1.633rem + 1.033vw, 2.562rem);  /* 30 → 41   h2 Person */
  --fs-hero: clamp(2.25rem, 1.546rem + 3.005vw, 4.25rem);      /* 36 → 68 */

  --lh-tight: 1.12;
  --lh-heading: 1.2;
  --lh-body: 1.62;
  --lh-lead: 1.55;

  --ls-kicker: 0.08em;
  --ls-heading: -0.01em;

  /* --- Abstaende ------------------------------------------------------- */
  --sp-3xs: clamp(0.25rem, 0.206rem + 0.1878vw, 0.375rem);     /*  4 →  6 */
  --sp-2xs: clamp(0.5rem, 0.456rem + 0.1878vw, 0.625rem);      /*  8 → 10 */
  --sp-xs: clamp(0.75rem, 0.662rem + 0.3756vw, 1rem);          /* 12 → 16 */
  --sp-sm: clamp(1rem, 0.912rem + 0.3756vw, 1.25rem);          /* 16 → 20 */
  --sp-md: clamp(1.5rem, 1.324rem + 0.7512vw, 2rem);           /* 24 → 32 */
  --sp-lg: clamp(2rem, 1.648rem + 1.502vw, 3rem);              /* 32 → 48 */
  --sp-gap: clamp(2.5rem, 1.972rem + 2.254vw, 4rem);           /* 40 → 64  Spaltenabstand */
  --sp-xl: clamp(3rem, 2.472rem + 2.254vw, 4.5rem);            /* 48 → 72 */
  --sp-2xl: clamp(4rem, 3.296rem + 3.005vw, 6rem);             /* 64 → 96 */
  --sp-3xl: clamp(5rem, 3.944rem + 4.507vw, 8rem);             /* 80 → 128 — Sektionen */

  /* --- Mass und Raster -------------------------------------------------- */
  --container: 73.75rem;        /* 1180px */
  --container-pad: var(--sp-md);
  --measure: 42rem;             /* ~672px — Fliesstext bei 60–75 Zeichen */
  --measure-narrow: 34rem;

  /* --- Form ------------------------------------------------------------ */
  --radius-sm: 0.625rem;
  --radius: 1.125rem;
  --radius-pill: 62.4375rem;
  --border-w: 4px;              /* konstant in allen Zustaenden — sonst springt der Inhalt */
  --shadow-sm: 0 2px 10px rgb(23 52 4 / 0.06);
  --shadow: 0 8px 32px rgb(23 52 4 / 0.10);
  --shadow-lg: 0 14px 40px rgb(23 52 4 / 0.16);

  /* --- Bewegung -------------------------------------------------------- */
  --dur-fast: 150ms;
  --dur: 250ms;
  --dur-slow: 600ms;
  --ease: cubic-bezier(0.16, 0.84, 0.44, 1);

  --header-h: 5.5rem;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur: 0.01ms;
    --dur-slow: 0.01ms;
  }
}