/* ==========================================================================
   GLÆR · Design-Tokens
   Die einzige Stelle, an der Farben, Schriften, Größen und Abstände
   definiert werden. Werte stammen aus dem Pitch Deck (April 2026).
   ========================================================================== */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../assets/fonts/schibsted-grotesk-latin-wght.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Mono";
  src: url("../assets/fonts/dm-mono-latin-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Farben ---------------------------------------------------------------- */
  --color-paper: #ffffff;        /* Hintergrund */
  --color-ink: #282828;          /* Text, Linienzeichnungen */
  --color-orange: #ff8c38;       /* einzige Akzentfarbe */
  --color-orange-soft: #ffd6b9;  /* helle Orange-Fläche */
  --color-sage: #e5ebdf;         /* ruhige Flächen, Karten */
  --color-muted: #6f6f6f;        /* Fußnoten, Nebentext */
  --color-line: #8a9082;         /* Rahmen von Formularfeldern */

  /* Die Größen wachsen mit der Fensterbreite (vw) und sind zusätzlich
     durch die Fensterhöhe (vh) gedeckelt, damit jeder Abschnitt als
     "Folie" in ein flaches Laptop-Fenster passt. */

  /* Schrift --------------------------------------------------------------- */
  /* Deck: OT Marmo Bold + Matter Mono Light (Trial-Lizenzen).
     Website: freie Alternativen. Zum Wechsel nur diese zwei Zeilen ändern. */
  --font-sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --weight-regular: 500;
  --weight-bold: 700;
  --weight-heavy: 800;

  --text-note: 0.75rem;                              /* Fußnoten (Mono) */
  --text-small: 0.9375rem;
  --text-body: clamp(1rem, min(0.5vw + 0.95rem, 2.6vh), 1.25rem);
  --text-eyebrow: clamp(1rem, min(0.6vw + 0.85rem, 3vh), 1.375rem);
  --text-claim: clamp(1.25rem, min(1.4vw + 0.9rem, 3.6vh), 1.875rem);
  --text-title: clamp(2rem, min(3.2vw + 1rem, 6.5vh), 3.5rem);
  --text-stat: clamp(3rem, min(5vw + 1.5rem, 11vh), 5.5rem);

  --tracking-tight: -0.02em;
  --leading-tight: 1.08;
  --leading-body: 1.45;

  /* Abstände & Form ------------------------------------------------------- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: clamp(2rem, 6vh, 4rem);          /* schrumpft in flachen Fenstern */
  --space-section: clamp(2.5rem, 6vh, 6rem);    /* Innenabstand der Abschnitte */
  --footer-height: 5.5rem;

  --page-width: 70rem;
  --page-gutter: clamp(1.25rem, 4vw, 3rem);

  --radius-card: clamp(1.75rem, 3vw, 3rem);
  --radius-pill: 999px;
}