/* Rahmen aller Seiten (25.10.2026, aus hero.css und abschnitte.css herausgelöst, Werte unverändert): Schrift, Nacht als Grund, die feste
   Kopfleiste und die gemeinsamen Werte der Abschnitte. Lädt nach basis.css und lenis.css, auf der Startseite vor hero.css. */
@font-face { font-family: "Inter Tight V"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/schrift/inter-tight-300.woff2) format("woff2"); }
:root {
  --schrift: "Inter Tight V", "Inter Tight", system-ui, sans-serif;
  --linie: rgb(var(--vg-k) / .14);
  --linie-stark: rgb(var(--vg-k) / .34);
  --gedimmt: rgb(var(--vg-k) / .62);
  --fokus: var(--sonne);
  color-scheme: dark;
}
html { background: var(--nacht); scrollbar-color: rgb(var(--vg-k) / .22) var(--nacht); scrollbar-gutter: stable; }
body { background: var(--nacht); color: var(--sand); }
.titel { font-weight: 320; }   /* auf dunklem Grund leicht kräftiger, sonst dünnen die Haarlinien aus */
.knopf { --hg: var(--sand); --vg: var(--nacht); }

/* ---------- Kopfleiste: fest, Nacht; ihre Kante ist die Wasserlinie aus dem Lader ---------- */
.kopf { position: fixed; top: 0; left: 0; right: 0; margin: 0; padding: 0 var(--rand); border-bottom: 0; background: var(--nacht); color: var(--sand); z-index: 30; }
.kopf::after { content: ""; position: absolute; left: var(--rand); right: var(--rand); bottom: 0; height: 1px; background: var(--linie); pointer-events: none; }
.kopf-r { border-left-color: var(--linie); transition: opacity .5s var(--aus); }
.menue-knopf { border-color: rgb(var(--vg-k) / .4); }
.kopf.offen .kopf-r nav { background: var(--nacht); color: var(--sand); border-bottom-color: var(--linie); padding-left: var(--rand); padding-right: var(--rand); }

/* Werte und Hilfen der Abschnitte */
:root {
  --zl: rgb(var(--vg-k) / .1);         /* Zelllinie, wie das Kartengitter im Hero */
  --zp: rgb(var(--vg-k) / .3);         /* Plus an den Knoten */
  --ecke: rgb(var(--vg-k) / .6);       /* Kachelecken der Tafeln */
  --leise: rgb(var(--vg-k) / .68);     /* leiser Text, auf Nacht über 7:1 (gemessen 20.10.: 0,62 ergab 6,8:1) */
  --abstand-oben: clamp(96px, 6vw + 40px, 168px);
  --sanft: cubic-bezier(.2, 1, .36, 1);   /* Monolog: Fenster und Kacheln */
  --lade: cubic-bezier(.19, 1, .22, 1);   /* Paper Tiger: Linie unter Links */
  --raus: .32s var(--aus);                /* Rückweg aller Zustände */
}
.abschnitt { position: relative; padding: var(--abstand-oben) var(--rand) 0; }
.knoten { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.knoten .plus { color: var(--zp); }
.nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.abschnitt-titel { margin: 0 0 clamp(40px, 2.5vw + 24px, 72px); font-weight: 320; font-size: clamp(38px, 22px + 2.9vw, 72px); line-height: 1;
                   letter-spacing: -.04em; max-width: 14ch; text-wrap: balance; }