/* ==========================================================================
   Design-Tokens
   Alle Farben, Schriften, Abstände, Radien, Schatten und Bewegungswerte an
   einer Stelle. Eine Änderung hier wirkt auf die gesamte Website.
   ========================================================================== */

:root {
  /* Farben ---------------------------------------------------------------- */
  --c-ink: #132a1d;          /* Tannengrün: Headlines, Fließtext, dunkle Flächen (15,3 : 1) */
  --c-ink-soft: #2b4a37;     /* Zwischenüberschriften, Icons */
  --c-text-muted: #5b6b61;   /* Sekundärtext (5,6 : 1 auf Weiß) */
  --c-green-700: #146b37;    /* Textlinks, Button-Verlauf außen (6,6 : 1) */
  --c-green-600: #1a8546;    /* Primärfarbe – weiße Schrift darauf: 4,7 : 1 */
  --c-green-400: #2dbe6c;    /* Leuchtakzent – nie als Text auf Weiß */
  --c-mint-100: #e8f5ec;     /* Panels, Icon-Kacheln, Pills */
  --c-mint-50: #f3faf5;      /* zarte Flächen, Hero-Glow */
  --c-surface: #f6f7f5;      /* wechselnde Sektions-Hintergründe */
  --c-line: #e1e6e2;         /* Rahmen, Trennlinien, inaktive Timeline */
  --c-white: #ffffff;

  /* Verläufe --------------------------------------------------------------- */
  --grad-btn: linear-gradient(90deg, var(--c-green-700) 0%, var(--c-green-600) 50%, var(--c-green-700) 100%);
  --grad-ink: linear-gradient(160deg, #1d3d2a 0%, var(--c-ink) 55%, #0d1f15 100%);

  /* Schriften -------------------------------------------------------------- */
  --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  /* Fließende Schriftgrößen: Minimum bei 375 px, Maximum ab 1280 px Breite */
  --fs-h1: clamp(2.5rem, 1.775rem + 3.094vw, 4.25rem);        /* 40 → 68 px */
  --fs-h2: clamp(2rem, 1.534rem + 1.989vw, 3.125rem);         /* 32 → 50 px */
  --fs-h3: clamp(1.25rem, 1.146rem + 0.442vw, 1.5rem);        /* 20 → 24 px */
  --fs-lead: clamp(1.125rem, 1.047rem + 0.331vw, 1.3125rem);  /* 18 → 21 px */
  --fs-body: 1.0625rem;                                       /* 17 px */
  --fs-small: 0.9375rem;                                      /* 15 px */
  --fs-xs: 0.8125rem;                                         /* 13 px */

  /* Abstände (4-px-Raster) ------------------------------------------------- */
  --space-1: 0.25rem;   /*  4 */
  --space-2: 0.5rem;    /*  8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */

  /* Layout ----------------------------------------------------------------- */
  --container: 75rem;            /* 1200 px */
  --container-narrow: 47.5rem;   /*  760 px */
  --gutter: clamp(1rem, 4vw, 2rem);
  --section-y: clamp(4.5rem, 8vw, 8rem);
  --header-h: 4.5rem;

  /* Radien ----------------------------------------------------------------- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* Schatten (leicht grünstichig) ----------------------------------------- */
  --shadow-xs: 0 1px 2px rgb(19 42 29 / 0.06);
  --shadow-sm: 0 1px 2px rgb(19 42 29 / 0.04), 0 4px 14px rgb(19 42 29 / 0.05);
  --shadow-md: 0 2px 4px rgb(19 42 29 / 0.04), 0 12px 32px rgb(19 42 29 / 0.08);
  --shadow-lg: 0 4px 10px rgb(19 42 29 / 0.04), 0 28px 64px rgb(19 42 29 / 0.12);
  --shadow-soft: 0 12px 40px rgb(19 42 29 / 0.06);
  --shadow-glow: 0 0 0 1px rgb(26 133 70 / 0.12), 0 24px 60px -18px rgb(26 133 70 / 0.35);
  --shadow-btn: inset 0 1px 0 rgb(255 255 255 / 0.18), inset 0 -2px 0 rgb(0 0 0 / 0.12), 0 8px 20px -6px rgb(26 133 70 / 0.45);
  --shadow-btn-hover: inset 0 1px 0 rgb(255 255 255 / 0.18), inset 0 -2px 0 rgb(0 0 0 / 0.12), 0 14px 28px -8px rgb(26 133 70 / 0.55);

  /* Bewegung --------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-reveal: cubic-bezier(0.33, 1, 0.68, 1);  /* sanftes Ausrollen beim Einblenden */
  --dur-fast: 200ms;
  --dur-reveal: 900ms;
}