/* Design-Tokens Denksportwerk – einzige Quelle für Farben, Schrift, Abstände */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Markenfarben */
  --c-tannennacht: #0b2522;  /* Seitenhintergrund */
  --c-tannengrund: #10302c;  /* Wechselflächen */
  --c-tanne: #12403c;        /* Kontaktband, Suchszene */
  --c-tiefe: #071b19;        /* Fuß */
  --c-feld: #0e2c29;         /* Formularfelder */
  --c-hell: #e6eeec;         /* Text, 13,7 : 1 */
  --c-nebelgrau: #a8bbb7;    /* Nebentext, 8,0 : 1 */
  --c-rosa: #f59696;         /* Akzent, Links, 7,4 : 1 */
  --c-weiss: #ffffff;
  --c-schiefer: #2b3533;     /* Text im hellen Suchfeld */
  --c-orange: #ffc07a;       /* Fehler, 10 : 1 */

  /* Rollen (im CSS nur diese verwenden) */
  --bg: var(--c-tannennacht);
  --surface: var(--c-tannengrund);
  --surface-strong: var(--c-tanne);
  --footer-bg: var(--c-tiefe);
  --text: var(--c-hell);
  --text-muted: var(--c-nebelgrau);
  --heading: var(--c-weiss);
  --accent: var(--c-rosa);
  --on-accent: var(--c-tannennacht);
  --line: #24504a;           /* dekorative Trennlinien */
  --line-strong: #3d6a63;
  --field-bg: var(--c-feld);
  --field-border: #7c9590;   /* 4,65 : 1 */
  --error: var(--c-orange);
  --focus: var(--c-rosa);
  --hero-overlay: linear-gradient(90deg, rgb(11 37 34 / 0.94) 0%, rgb(11 37 34 / 0.78) 45%, rgb(11 37 34 / 0.45) 100%);

  /* Schrift */
  --font: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --s-0: 1.125rem;   /* 18px Fließtext */
  --s--1: 0.95rem;   /* Kleintext */
  --s-1: 1.406rem;   /* Einleitung */
  --s-2: 1.758rem;   /* H3 */
  --s-3: 2.197rem;   /* H2 */
  --s-4: 2.747rem;   /* H1 Unterseiten */
  --s-hero: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);
  --lh: 1.6;
  --lh-tight: 1.12;
  --measure: 65ch;

  /* Raum & Form */
  --wrap: 72rem;
  --gutter: 1.25rem;
  --space-section: clamp(3rem, 2rem + 4vw, 5rem);
  --header-h: 7.5rem;        /* Höhe des Kopfs, der auf der Startseite über dem Hero liegt */
  --radius: 10px;
  --radius-scene: 28px;
}