/* ============================================================
   GOLFANLAGE GERHELM — Design-Tokens 2026
   Eine Datei, alle Werte. In jedes Template einbinden:
   <link rel="stylesheet" href="tokens.css">
   ============================================================ */

/* ---------- Schriften (lokal, DSGVO-freundlich) ---------- */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/space-grotesk-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/space-grotesk-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/space-grotesk-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/space-grotesk-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300;font-display:swap;src:url('assets/fonts/hanken-grotesk-latin-300-normal.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/hanken-grotesk-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/hanken-grotesk-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/hanken-grotesk-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/hanken-grotesk-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/hanken-grotesk-latin-800-normal.woff2') format('woff2')}

:root{
  /* ---------- Farben: Marke ---------- */
  --lime:#CCFF00;      /* Akzent. Nur auf Dunkel oder als Fläche mit dunkler Schrift */
  --gruen:#1F8446;     /* Primär: Buttons, Links, Kapitelnummern */
  --tanne:#0B412B;     /* Dunkle Flächen, Sektionen */
  --pine:#07301F;      /* Dunkelste Fläche: Footer, Band, 500%-Block */

  /* ---------- Farben: Fläche ---------- */
  --weiss:#ffffff;
  --mint:#E8EFE8;      /* Zweite helle Fläche, max. eine Sektion je Bildschirm */

  /* ---------- Gold ---------- */
  /* Nur für die goldene Regionalkennzeichnung: Hologramm-Karte und
     Gold-Plakette. Nirgends sonst, nie als Fläche für Lauftext.
     Gold auf Weiß ist nicht textfähig — goldene Schrift ausschließlich
     auf --pine oder --tanne. */
  --gold:#CE9A3A;      /* Text auf --pine 5,7:1 · auf --tanne 4,6:1 */
  --gold-hell:#F0D695; /* Glanzkante und Verlauf, nie für Text */

  /* ---------- Farben: Schrift ---------- */
  --tinte:#14231B;     /* Überschriften auf Hell */
  --text:#43504a;      /* Lauftext auf Hell — 7,6:1 */
  --sekundaer:#5d6a63; /* Lead, Beschreibungen — 5,6:1 */
  --muted:#616c65;     /* Kleinste Stufe, Meta — 5,5:1 auf Weiss, 4,7:1 auf Mint */
  --nav:#3c473f;       /* Navigation */

  /* ---------- Farben: Linien und Signale ---------- */
  --linie-header:#e9ede7;
  --linie-karte:#e4e9e3;
  --hairline:rgba(20,35,27,.14);          /* Trennlinie auf Hell */
  --hairline-dunkel:rgba(255,255,255,.16); /* Trennlinie auf Dunkel */
  --live:#ff5a4d;                          /* Nur für „live", nie dekorativ */

  /* ---------- Raster und Abstand ---------- */
  --inset:64px;        /* Seitenrand. 1200px: 40px · 560px: 22px */
  --luft:84px;         /* Abstand zwischen Sektionen */
  --luft-s:44px;       /* Abstand zwischen Blöcken innerhalb einer Sektion */

  /* ---------- Radien ---------- */
  --r-pill:999px;      /* Buttons, Chips, Plaketten */
  --r-karte:14px;      /* Dropdowns, Glaskarten */
  --r-flaeche:0px;     /* Bildflächen und Tarifkarten: scharfe Kante */

  /* ---------- Bewegung ---------- */
  --ease:cubic-bezier(.16,.84,.44,1);
  --t-schnell:.25s;    /* Farbe, Deckkraft */
  --t-mittel:.35s;     /* Position, Größe */
  --t-lang:.8s;        /* Reveals, Bildwechsel */

  /* ---------- Schatten ---------- */
  --schatten-karte:0 28px 60px -28px rgba(11,65,43,.45);
  --schatten-plakette:0 14px 30px -14px rgba(6,26,17,.6);
}

@media (max-width:1200px){ :root{ --inset:40px } }
@media (max-width:560px){  :root{ --inset:22px } }

/* ============================================================
   TYPOGRAFIE — die neun .t-*-Stufen stehen seit 25.08.2026 in
   seite.css, nicht mehr hier. Grund: tokens.css hängt nur an 15
   der 56 Seiten; auf allen übrigen griffen die Klassen ins Leere.
   Die Gestaltungsregel dazu steht am neuen Ort.
   ============================================================ */