:root {
  /* Farbe: Markenblau-Skala.
     Der Kunde hat am 2026-08-09 den Leitton festgelegt: #305CDE. Die übrigen
     Stufen sind daraus abgeleitet, nicht frei gewählt: gleicher Farbton
     (224.8 Grad) und gleiche Sättigung (0.725), nur die Helligkeit variiert.
     Dadurch bleibt die Skala in sich stimmig statt aus zusammengesuchten
     Blautönen zu bestehen.

     Die Namen sagen weiterhin "sky", obwohl der Ton jetzt ein kräftiges
     Königsblau ist. Umbenennen hieße rund zweihundert Fundstellen anfassen,
     ohne dass sich am Ergebnis etwas ändert. Maßgeblich sind die Werte hier.

     Kontraste gegen Weiß in Klammern, alle gerechnet, keiner geschätzt. */
  --sky-50: #F3F6FD;   /* 1.08, Sektionshintergrund */
  --sky-100: #E0E7FA;  /* 1.24, Karten, Hinweisboxen */
  --sky-200: #C1CFF5;  /* 1.55, Trennlinien, Rahmen */
  --sky-300: #9AAFEF;  /* 2.15, dekorative Flächen */
  --sky-400: #6989E7;  /* 3.32, Verläufe, Grafik */
  --sky-500: #4B71E2;  /* 4.41, Grafik. Für Text zu knapp, nicht verwenden */
  --sky-600: #708FE8;  /* 3.10, heller Rahmen (Nicht-Text, Minimum 3:1) */
  --sky-700: #305CDE;  /* 5.66, LEITTON. Links, Button-Fläche, Fokusring,
                          Kante unter dem Kopf und über dem Fuß */
  --sky-800: #204BC9;  /* 7.21, Hover auf Buttons, außerdem Links auf getönter
                          Fläche */
  --sky-900: #19399A;  /* 10.03, Footer-Fläche */

  /* Farbe: Text- und Grauwerte */
  --ink-900: #12212B;  /* 16.43, Fließtext und Überschriften */
  --ink-700: #33454F;  /* 9.98, Sekundärtext */
  --ink-500: #5C6B74;  /* 5.51, Hilfstext. Nicht kleiner als 0.875rem */
  --ink-200: #D9E0E4;  /* 1.33, Linien auf Weiß */

  /* Basis, Seitenhintergrund und Schrift auf Flächen */
  --white: #FFFFFF;

  /* Halbtransparente Ableitungen. Stehen hier, damit auch diese Farbwerte an
     genau einer Stelle gepflegt werden und nicht in den Komponenten verstreut. */
  --header-fläche: rgba(255, 255, 255, 0.94);
  --footer-trennlinie: rgba(255, 255, 255, 0.15);

  /* Abgrenzung der drei Bereiche. Kopf und Fuß bekommen eine eigene Fläche und
     eine sichtbare Kante, damit der Inhalt dazwischen klar als eigener Bereich
     liest und nicht nach oben und unten ausfranst.
     Die Kante unter dem Kopf ist 2 px stark und trägt den Leitton, damit sie
     zur Kante über dem Fuß passt. Beide Kanten rahmen den Inhalt. */
  --schatten-header: 0 2px 0 var(--sky-700), 0 8px 16px -12px rgba(25, 57, 154, 0.35);
  --inhalt-fläche: #FCFDFF;

  /* Schriftfamilien */
  --font-serif: "Source Serif 4", Georgia, serif;
  --font-sans: "Source Sans 3", "Segoe UI", Arial, sans-serif;

  /* Typografie-Skala, fließend über clamp() */
  /* H1-Obergrenze bewusst auf 2.625rem statt der 3rem aus dem Masterplan:
     "Schimmelpilzgutachter" ist ein 21 Zeichen langes Kompositum und riss die
     Überschrift bei 3rem auf drei Zeilen. Siehe docs/ENTSCHEIDUNGEN.md. */
  --font-size-h1: clamp(1.75rem, 1.25rem + 2.1vw, 2.625rem);
  --line-height-h1: 1.15;
  --font-size-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --line-height-h2: 1.2;
  --font-size-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --line-height-h3: 1.3;
  --font-size-h4: 1.125rem;
  --line-height-h4: 1.35;
  --font-size-body: clamp(1rem, 0.97rem + 0.15vw, 1.125rem);
  --line-height-body: 1.65;
  --font-size-klein: 0.875rem;
  --line-height-klein: 1.5;
  --content-max-width: 65ch;
  /* Bewusst schmaler als ein üblicher 72rem-Container: Der Fließtext ist auf
     65ch begrenzt, ein sehr breiter Container ließ dadurch über die Hälfte der
     Fläche leer und der Text wirkte an den linken Rand gedrängt. */
  --seiten-max-width: 61rem;

  /* Abstandsskala. Ein Wert je Stufe, keine freien Zwischenwerte erfinden. */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;

  /* Vertikale Rhythmik im Fließtext, relativ zur eigenen Schriftgröße */
  --flow-absatz: 1.15em;
  --flow-vor-h2: 2.75rem;
  --flow-nach-h2: 0.65em;
  --flow-vor-h3: 2rem;
  --flow-nach-h3: 0.45em;

  /* Sektionsabstand, fließend: mobil kompakter, am Desktop großzügig */
  --sektion-abstand: clamp(2.75rem, 2rem + 3vw, 4.5rem);
  --seiten-padding-x: clamp(1rem, 0.5rem + 2vw, 2rem);

  /* Wortmarke: bewusst feste px, skaliert nicht mit Textzoom */
  --wortmarke-size-mobile: 20px;
  --wortmarke-size-desktop: 26px;
  --wortmarke-letter-spacing: -0.01em;

  /* Radius: genau ein Wert fürs ganze Projekt, siehe docs/ENTSCHEIDUNGEN.md */
  --radius: 0.625rem;

  /* Schatten, in die Markenfarbe eingefärbt statt neutralschwarz */
  --schatten-karte: 0 1px 2px rgba(25, 57, 154, 0.06), 0 4px 12px rgba(25, 57, 154, 0.06);
  --schatten-button: 0 1px 2px rgba(25, 57, 154, 0.14);

  /* Fokusring, immer sichtbar */
  --focus-ring-width: 3px;
  --focus-ring-color: var(--sky-700);
  --focus-ring-offset: 2px;

  /* Motion: gedeckelt bei 200ms, siehe docs/ENTSCHEIDUNGEN.md */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-hover: ease;
  --duration-enter: 180ms;
  --duration-exit: 120ms;
  --duration-hover: 150ms;
  --duration-press: 100ms;
  --duration-error: 120ms;
  --duration-focus: 80ms;
}