/* ==========================================================================
   Sternkarte (früher Pinnwand) · gemeinsame Schicht für henneh.de
   Quelle: henneh-canvas G-Pinnwand-*, kopf/KOPF.md, kopf/HELL.md; Sternennebel siehe
   docs/sdd/sternennebel/spec.md (2026-10-20).
   Der Himmel ist immer Nacht. Dunkel ist Standard; hell (prefers-color-scheme: light) schaltet nur
   die Flächen (Tafel als Morgenglas, Reiter, Felder) und den Text darauf um, nicht den Himmel.
   Erzwingen: <html data-theme="hell"> bzw. <html data-theme="dunkel">.
   Jede App hat ihren eigenen Himmel: <html data-himmel="tippgen"> setzt die drei
   Nebelfarben (--g-nebel-1…3) und das Nebelbild, siehe „Himmel je App“ unten.
   Farbliterale stehen nur in Variablen; Materialfarben (Papier, Tafel, Gelb, Tinte,
   Gold) sind in beiden Modi gleich und liegen unter --m-*.
   ========================================================================== */

/* ── Welt: dunkel (Standard) ───────────────────────────────────────────── */
:root {
  color-scheme: dark;
  --g-wand: #0b0b26; --g-loch: transparent; --g-grund: #0b0b26;
  --g-himmel-oben: #0b0b26; --g-himmel-mitte: #120f38; --g-himmel-unten: #07071c;
  --g-nebel-1: #ff8a6a; --g-nebel-2: #8f6ae8; --g-nebel-3: #4fb8c8;
  --g-ruhe-farbe: rgba(9,8,32,.84);   /* ruhige Zone hinter Titel und Einleitung der Unterseiten */
  --g-sterne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' fill='white'%3E%3Ccircle cx='224' cy='370' r='0.6' fill-opacity='0.71'/%3E%3Ccircle cx='235' cy='74' r='0.6' fill-opacity='0.73'/%3E%3Ccircle cx='317' cy='38' r='0.6' fill-opacity='0.62'/%3E%3Ccircle cx='324' cy='277' r='1.2' fill-opacity='0.47'/%3E%3Ccircle cx='386' cy='262' r='0.6' fill-opacity='0.79'/%3E%3Ccircle cx='6' cy='211' r='0.6' fill-opacity='0.48'/%3E%3Ccircle cx='97' cy='12' r='0.6' fill-opacity='0.71'/%3E%3Ccircle cx='337' cy='208' r='0.6' fill-opacity='0.80'/%3E%3Ccircle cx='265' cy='183' r='0.6' fill-opacity='0.60'/%3E%3Ccircle cx='398' cy='336' r='0.6' fill-opacity='0.84'/%3E%3Ccircle cx='92' cy='116' r='0.6' fill-opacity='0.49'/%3E%3Ccircle cx='160' cy='339' r='0.6' fill-opacity='0.66'/%3E%3Ccircle cx='339' cy='0' r='0.6' fill-opacity='0.57'/%3E%3Ccircle cx='188' cy='392' r='0.6' fill-opacity='0.67'/%3E%3Ccircle cx='252' cy='311' r='1.2' fill-opacity='0.60'/%3E%3Ccircle cx='133' cy='386' r='1.2' fill-opacity='0.87'/%3E%3Ccircle cx='99' cy='40' r='0.6' fill-opacity='0.48'/%3E%3Ccircle cx='71' cy='224' r='0.6' fill-opacity='0.70'/%3E%3Ccircle cx='293' cy='52' r='0.6' fill-opacity='0.80'/%3E%3Ccircle cx='168' cy='85' r='0.6' fill-opacity='0.60'/%3E%3Ccircle cx='321' cy='122' r='0.6' fill-opacity='0.94'/%3E%3Ccircle cx='158' cy='342' r='0.6' fill-opacity='0.80'/%3E%3Ccircle cx='396' cy='85' r='0.6' fill-opacity='0.59'/%3E%3Ccircle cx='132' cy='119' r='0.6' fill-opacity='0.49'/%3E%3Ccircle cx='233' cy='97' r='1.2' fill-opacity='0.78'/%3E%3Ccircle cx='181' cy='384' r='0.6' fill-opacity='0.72'/%3E%3Ccircle cx='347' cy='73' r='0.6' fill-opacity='0.53'/%3E%3Ccircle cx='327' cy='100' r='0.6' fill-opacity='0.55'/%3E%3Ccircle cx='376' cy='79' r='0.6' fill-opacity='0.97'/%3E%3Ccircle cx='241' cy='169' r='0.6' fill-opacity='0.51'/%3E%3Ccircle cx='385' cy='95' r='1.2' fill-opacity='0.84'/%3E%3Ccircle cx='329' cy='239' r='0.6' fill-opacity='0.61'/%3E%3Ccircle cx='288' cy='28' r='0.6' fill-opacity='0.58'/%3E%3Ccircle cx='341' cy='246' r='0.6' fill-opacity='0.60'/%3E%3Ccircle cx='82' cy='7' r='0.6' fill-opacity='0.60'/%3E%3Ccircle cx='24' cy='71' r='0.6' fill-opacity='0.65'/%3E%3Ccircle cx='53' cy='145' r='0.6' fill-opacity='0.94'/%3E%3Ccircle cx='263' cy='276' r='0.6' fill-opacity='0.77'/%3E%3Ccircle cx='14' cy='7' r='0.6' fill-opacity='0.95'/%3E%3Ccircle cx='385' cy='9' r='0.6' fill-opacity='0.80'/%3E%3Ccircle cx='292' cy='128' r='0.6' fill-opacity='1.00'/%3E%3Ccircle cx='218' cy='295' r='1.2' fill-opacity='0.95'/%3E%3Ccircle cx='281' cy='317' r='0.6' fill-opacity='0.95'/%3E%3Ccircle cx='274' cy='360' r='0.6' fill-opacity='0.93'/%3E%3Ccircle cx='316' cy='345' r='0.6' fill-opacity='0.77'/%3E%3Ccircle cx='153' cy='233' r='0.6' fill-opacity='0.78'/%3E%3Ccircle cx='256' cy='397' r='1.2' fill-opacity='0.93'/%3E%3Ccircle cx='155' cy='294' r='0.6' fill-opacity='0.77'/%3E%3Ccircle cx='335' cy='34' r='0.6' fill-opacity='0.86'/%3E%3Ccircle cx='241' cy='192' r='1.2' fill-opacity='0.58'/%3E%3Ccircle cx='199' cy='246' r='0.6' fill-opacity='0.96'/%3E%3Ccircle cx='5' cy='120' r='0.6' fill-opacity='0.82'/%3E%3Ccircle cx='68' cy='362' r='0.6' fill-opacity='0.81'/%3E%3Ccircle cx='357' cy='131' r='0.6' fill-opacity='0.82'/%3E%3Ccircle cx='172' cy='322' r='0.6' fill-opacity='0.95'/%3E%3Ccircle cx='154' cy='233' r='0.6' fill-opacity='0.62'/%3E%3Ccircle cx='199' cy='335' r='0.6' fill-opacity='0.92'/%3E%3Ccircle cx='380' cy='111' r='0.6' fill-opacity='0.54'/%3E%3Ccircle cx='110' cy='86' r='0.6' fill-opacity='0.68'/%3E%3Ccircle cx='198' cy='126' r='0.6' fill-opacity='0.91'/%3E%3Ccircle cx='181' cy='30' r='0.6' fill-opacity='0.47'/%3E%3Ccircle cx='17' cy='283' r='0.6' fill-opacity='0.76'/%3E%3Ccircle cx='317' cy='8' r='0.6' fill-opacity='0.52'/%3E%3Ccircle cx='10' cy='332' r='0.6' fill-opacity='0.58'/%3E%3Ccircle cx='19' cy='252' r='0.6' fill-opacity='0.70'/%3E%3Ccircle cx='262' cy='323' r='0.6' fill-opacity='0.98'/%3E%3Ccircle cx='80' cy='190' r='0.6' fill-opacity='0.55'/%3E%3Ccircle cx='189' cy='286' r='1.2' fill-opacity='0.55'/%3E%3Ccircle cx='138' cy='279' r='0.6' fill-opacity='0.74'/%3E%3Ccircle cx='302' cy='157' r='0.6' fill-opacity='0.89'/%3E%3C/svg%3E");
  --g-kopf: #121034; --g-kopf-kante: rgba(233,184,74,.5); --g-kopf-text: #f3ecd8; --g-fuss-text: #c9c3e3;
  --g-text-1: #f6f0dd; --g-text-2: #e3dcf0; --g-text-3: #c9c3e3; --g-text-4: #9a94c2;
  --g-kreide: #f2d283; --g-neben: #f2d283; --g-neben-strich: #e9b84a;
  --g-zurueck-app-rand: #c9d6ff; --g-zurueck-app-grund: transparent; --g-zurueck-app-text: #c9d6ff;
  --g-zurueck: #c9d6ff; --g-zurueck-schatten: #6f7fc0;
  --g-reiter-text: #f2d283; --g-reiter-rand: rgba(233,184,74,.7); --g-reiter-hover: rgba(255,255,255,.07);
  --g-fokus: #f2d283; --g-nagel: #c3bedf; --g-schnur: #e9e0cf;
  --g-schatten-30: rgba(4,3,20,.3); --g-schatten-35: rgba(4,3,20,.35); --g-schatten-40: rgba(4,3,20,.4);
  --g-schatten-45: rgba(4,3,20,.45); --g-schatten-55: rgba(4,3,20,.55);
  --g-schatten-tafel: 0 0 0 1px rgba(233,184,74,.55), 0 10px 24px rgba(4,3,20,.45);
  --g-icon-kontur: none;

  /* Material: in beiden Modi gleich */
  --m-tinte: #16212a;
  --m-papier: #f3f6f7;
  --m-weiss: #ffffff;
  --m-tafel: #eef2f4;
  --m-gelb: #f5d33f;
  --m-gelb-schatten: #7a6410;
  --m-orange: var(--m-akzent);  /* Sternennebel: der alte Orange-Akzent ist Gold */
  --m-dymo: #1b1846;           /* Etikett: Nachtblau mit Goldrand */
  --m-dymo-text: #f3ecd8;
  --m-dymo-schatten: #0b0a26;
  --m-akzent: #e9b84a;          /* Gold = aktiv, Hauptaktion; Tinte darauf 9:1 */
  --m-akzent-schatten: #8a6212;
  --m-auf-akzent: #16212a;      /* Schrift auf Gold, Gelb und Orange; bleibt auch auf der Tafel dunkel */
  --m-akzent-rand: rgba(233,184,74,.75);
  --m-led: #7ee08a;
  --m-leise: #45535d;          /* Nebentext auf Tafel/Papier, 7:1 auf --m-tafel */
  --m-linie: #c3ccd1;          /* Trennlinien auf Tafel/Papier */
  --m-strich: #76858c;         /* gestrichelter Ausgaberand, 3,4:1 auf --m-tafel, 3,8:1 auf Weiß */
  --m-naht: #b3bfc6;           /* gestrichelte Trennnaht in der Tafel */
  --m-ok: #1e6b34;             /* 6,6:1 auf Weiß */
  --m-fehler: #a43c2f;         /* 6,0:1 auf Weiß */
  /* Fokus an Eingabefeldern: Gold innen, Tinte außen. Der Tintenring hält
     14,5:1 auf --m-tafel und 16,3:1 auf Weiß, Orange 6,0:1 gegen die Tinte. */
  --m-fokus-feld: 0 0 0 3px var(--m-akzent), 0 0 0 5px var(--m-tinte);
  --m-treffer-glow: rgba(233,184,74,.55);
  --m-treffer-glow-0: rgba(233,184,74,0);
  /* Knöpfe und Felder: auf Papier Tinte und Weiß, auf der Tafel (Nachtglas) umgestellt */
  --m-feld-rand: var(--m-tinte);
  --m-knopf-grund: var(--m-weiss);
  --m-knopf-hover: var(--m-papier);
  --m-knopf-schatten: var(--m-tinte);
  --m-rund: 4px;

  /* Nachtglas (Sternentafel): Bedienflächen in beiden Modi dunkel, Gegenstände bleiben Papier */
  --n-glas: rgba(22,19,60,.9); --n-glas-hoch: rgba(34,29,84,.92);
  --n-kante: rgba(233,184,74,.45); --n-kante-leise: rgba(201,195,227,.22); --n-kante-feld: rgba(201,195,227,.35);
  --n-text: #f1ecdf; --n-gold-hell: #f2d283; --n-feld: #0e0c2c;
  /* Gold für Nacht-Flächen (Kopf, Schublade, Fuß), die auch im hellen Modus dunkel bleiben. */
  --n-gold-hell-fest: #f2d283; --g-kopf-gruppe: #9a94c2;
  --n-schein: 0 0 0 1px var(--n-kante), 0 0 40px -8px rgba(143,106,232,.35), 0 18px 40px rgba(4,3,20,.5);

  --font-ui: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --rand: 48px;                /* Seitenrand Desktop */
  --inhalt: 1184px;            /* Inhaltsbreite Desktop (1280 − 2 × 48) */
  --rand-x: max(var(--rand), calc((100% - var(--inhalt)) / 2));

  /* Bewegung */
  --bew-kurz: 140ms;
  --bew-mittel: 320ms;
  --bew-seite: 180ms;          /* Seitenwechsel: kurzes Überblenden, Kopf steht */
  --bew-schwung: 800ms;
  --ease-feder: cubic-bezier(.34,1.56,.64,1);
  --ease-ausrollen: cubic-bezier(.22,1,.36,1);
}

/* ── Welt: hell ────────────────────────────────────────────────────────── */
/* Kein eigener Block: Der Himmel bleibt bei Tag Nacht (Hintergrund, Nebel, Sterne und der Text
   direkt darauf wie im dunklen Modus). Hell werden nur die Flächen, siehe „Morgenglas“ unten. */

/* ── Himmel je App ─────────────────────────────────────────────────────── */
/* Gleiche Bauweise, eigener Farbton: drei Grundfarben je App. Daraus malt `npm run nebel` die
   Nebelbilder nebel/<himmel>.webp (breit) und nebel/<himmel>-handy.webp (unter 700 px), die der body
   unten zeigt. Neue Apps bekommen hier eine Zeile, eine Zeile beim body, neue Bilder und deren
   Einträge in files und exports von package.json.
   Ohne data-himmel: Startseite (nebel/startseite*.webp). */
:root[data-himmel="tippgen"]       { --g-nebel-1: #3fcf8e; --g-nebel-2: #2f7fd0; --g-nebel-3: #c8d860; }
:root[data-himmel="strafenrad"]    { --g-nebel-1: #ff5a9a; --g-nebel-2: #9d4ee0; --g-nebel-3: #ffb35a; }
:root[data-himmel="pitch-planner"] { --g-nebel-1: #4fd6e0; --g-nebel-2: #2fae6a; --g-nebel-3: #8f9cff; }
:root[data-himmel="traffic-guard"] { --g-nebel-1: #4f8cff; --g-nebel-2: #3fc0b0; --g-nebel-3: #c79bff; }
:root[data-himmel="werkzeuge"]     { --g-nebel-1: #ffb44f; --g-nebel-2: #d0603a; --g-nebel-3: #8f6ae8; }
:root[data-himmel="sternwarte"]    { --g-nebel-1: #e86ad0; --g-nebel-2: #6a8ce8; --g-nebel-3: #ffd06a; }

/* :root[data-theme="dunkel"] braucht keinen eigenen Block: die Standardwerte
   oben sind dunkel, und die Hell-Blöcke schließen data-theme="dunkel" aus. */

/* ── Grundlage ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--g-wand);
  color: var(--g-text-1);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.4;
  overflow-x: hidden;
}
/* Sternennebel als Hintergrund des body (geht auf die ganze Zeichenfläche über), in beiden Modi gleich.
   Bewusst keine feste Ebene (position: fixed oder background-attachment: fixed): Chrome legt dann alles
   Überlappende auf eigene Ebenen, Text wird unscharf (tests/schaerfe.mjs der Homepage).
   Schichten von oben: ruhige Zone (nur Unterseiten), Sterne, Nebelbild, Himmelsverlauf. Das Nebelbild
   ist ein Standbild in absoluten Maßen, oben mittig; es bringt den Verlauf schon mit, darunter und
   daneben läuft der Himmel aus dem Verlauf weiter. */
body {
  --g-ruhe: none;
  --g-himmel-verlauf: linear-gradient(var(--g-himmel-oben), var(--g-himmel-mitte) 700px, var(--g-himmel-unten) 1600px);
  background-color: var(--g-himmel-unten);
  background-image: var(--g-ruhe), var(--g-sterne), url("nebel/startseite.webp"), var(--g-himmel-verlauf);
  background-repeat: no-repeat, repeat, no-repeat, no-repeat;
  background-position: 0 0, 0 0, 50% 0, 0 0;
}
:root[data-himmel="tippgen"] body       { background-image: var(--g-ruhe), var(--g-sterne), url("nebel/tippgen.webp"), var(--g-himmel-verlauf); }
:root[data-himmel="strafenrad"] body    { background-image: var(--g-ruhe), var(--g-sterne), url("nebel/strafenrad.webp"), var(--g-himmel-verlauf); }
:root[data-himmel="pitch-planner"] body { background-image: var(--g-ruhe), var(--g-sterne), url("nebel/pitch-planner.webp"), var(--g-himmel-verlauf); }
:root[data-himmel="traffic-guard"] body { background-image: var(--g-ruhe), var(--g-sterne), url("nebel/traffic-guard.webp"), var(--g-himmel-verlauf); }
:root[data-himmel="werkzeuge"] body     { background-image: var(--g-ruhe), var(--g-sterne), url("nebel/werkzeuge.webp"), var(--g-himmel-verlauf); }
:root[data-himmel="sternwarte"] body    { background-image: var(--g-ruhe), var(--g-sterne), url("nebel/sternwarte.webp"), var(--g-himmel-verlauf); }
/* Handy: eigener Ausschnitt hochkant, sonst zeigte die Mitte des breiten Bilds kaum Nebel. */
@media not all and (min-width: 700px) {
  body                                    { background-image: var(--g-ruhe), var(--g-sterne), url("nebel/startseite-handy.webp"), var(--g-himmel-verlauf); }
  :root[data-himmel="tippgen"] body       { background-image: var(--g-ruhe), var(--g-sterne), url("nebel/tippgen-handy.webp"), var(--g-himmel-verlauf); }
  :root[data-himmel="strafenrad"] body    { background-image: var(--g-ruhe), var(--g-sterne), url("nebel/strafenrad-handy.webp"), var(--g-himmel-verlauf); }
  :root[data-himmel="pitch-planner"] body { background-image: var(--g-ruhe), var(--g-sterne), url("nebel/pitch-planner-handy.webp"), var(--g-himmel-verlauf); }
  :root[data-himmel="traffic-guard"] body { background-image: var(--g-ruhe), var(--g-sterne), url("nebel/traffic-guard-handy.webp"), var(--g-himmel-verlauf); }
  :root[data-himmel="werkzeuge"] body     { background-image: var(--g-ruhe), var(--g-sterne), url("nebel/werkzeuge-handy.webp"), var(--g-himmel-verlauf); }
  :root[data-himmel="sternwarte"] body    { background-image: var(--g-ruhe), var(--g-sterne), url("nebel/sternwarte-handy.webp"), var(--g-himmel-verlauf); }
}
/* Unterseiten: ruhige Zone hinter Titel und Einleitung, damit kein helles Gas und kein Stern hinter
   dem Text liegt (Text auf dem Himmel hält 4,5:1 gegen jedes Pixel dahinter). */
body.unterseite {
  --g-ruhe: radial-gradient(ellipse 620px 250px at calc(var(--rand-x) + 300px) 190px, var(--g-ruhe-farbe) 55%, transparent);
}
@media not all and (min-width: 700px) {
  body.unterseite { --g-ruhe: radial-gradient(ellipse 130% 260px at 40% 150px, var(--g-ruhe-farbe) 60%, transparent); }
}
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Lochwand: im Sternennebel ohne eigene Fläche, der Himmel hinter der Seite scheint durch.
   Die Klasse bleibt, damit die Apps unverändert weiterlaufen. */
.lochwand { background: transparent; }

/* ── Kopf ──────────────────────────────────────────────────────────────── */
/* Eine Auszeichnung für alle Breiten:
   header.k-kopf > (a.k-logo | div.k-links > a.k-zurueck + a.k-logo) + nav.k-nav
   Ab 1024 px einzeilig (88 px), darunter wie der Handy-Entwurf (Logo/Rückweg oben,
   Etiketten brechen in Reihen um statt seitlich zu scrollen). Mit .k-kopf--schublade
   stattdessen kompakt mit Schublade, siehe unten. */
/* Kopf, Schublade und Fuß sind in beiden Modi Nacht: dort ist der Fokusring immer gold, sonst
   verschwände er im hellen Modus (dunkelblauer Ring auf dunkelblauem Kopf). */
.k-kopf, .fuss { --g-fokus: var(--n-gold-hell-fest); }
.k-kopf {
  display: flex; flex-direction: column; gap: 10px;
  padding: 10px 16px 14px;
  background: var(--g-kopf);
  border-bottom: 1px solid var(--g-kopf-kante);
  box-shadow: 0 6px 18px var(--g-schatten-35);
  flex-shrink: 0;
}
.k-kopf > .k-logo { align-self: flex-start; }
.k-links { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.k-logo { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--g-kopf-text); text-decoration: none; }
.k-wort { font-weight: 800; font-size: 26px; letter-spacing: -0.02em; line-height: 1; }
.k-anh { display: block; overflow: visible; width: 36px; height: 52px; flex-shrink: 0; }
/* Kein Leerlauf-Pendeln: eine Dauer-Animation im Kopf ließe Chrome die ganze Seite darunter auf Ebenen legen (Text unscharf). Nur beim Hover schwingt der Anhänger einmal. */
.k-anh-pendel { transform-box: view-box; transform-origin: 22px 4px; }
.k-logo:hover .k-anh-pendel, .k-logo:focus-visible .k-anh-pendel { animation: k-schwung 1.2s ease-out 1; }

/* Zeichen „Umlaufbahn“: ein h mit goldener Bahn und Stern (ersetzt den Anhänger .k-anh). Steht nur
   im Kopf, der in beiden Modi Nacht ist. Hover ändert nur die Farbe des Sterns. */
.k-umlauf { display: block; overflow: visible; width: 40px; height: 40px; flex-shrink: 0; }
.k-umlauf .k-umlauf-h { stroke: var(--g-kopf-text); }
.k-umlauf .k-umlauf-bahn, .k-umlauf .k-umlauf-bahn-hinten { stroke: var(--m-akzent); }
.k-umlauf .k-umlauf-bahn-hinten { opacity: .55; }
.k-umlauf .k-umlauf-stern { fill: var(--m-akzent); transition: fill .2s; }
.k-logo:hover .k-umlauf-stern, .k-logo:focus-visible .k-umlauf-stern { fill: #fff3d6; }

.k-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.k-dymo {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 14px;
  background: var(--m-dymo); color: var(--m-dymo-text);
  font-family: var(--font-mono); font-weight: 600; font-size: 14px; letter-spacing: 0.12em;
  text-transform: uppercase; white-space: nowrap;
  border: 1px solid var(--m-akzent-rand); border-radius: 4px; box-shadow: 0 2px 0 var(--m-dymo-schatten); text-decoration: none;
  transition: background-color .2s, color .2s;
}
.k-dymo:hover { background: var(--m-akzent); color: var(--m-auf-akzent); }
.k-dymo[aria-current="page"] { background: var(--m-akzent); color: var(--m-auf-akzent); box-shadow: 0 2px 0 var(--m-akzent-schatten); }

.k-zurueck {
  display: flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 16px 0 12px;
  background: transparent; color: #c9d6ff;
  font-family: var(--font-mono); font-weight: 600; font-size: 14px; letter-spacing: 0.12em;
  text-transform: uppercase; white-space: nowrap;
  border: 1px solid rgba(201,214,255,.55); border-radius: 4px; text-decoration: none;
  transition: background-color .2s, color .2s;
}
.k-zurueck:hover { background: rgba(201,214,255,.1); color: #f2d283; }
.k-pfeil { display: block; flex-shrink: 0; }

@media (min-width: 700px) {
  .k-kopf { padding-left: 24px; padding-right: 24px; }
}
@media (min-width: 1024px) {
  .k-kopf {
    flex-direction: row; align-items: center; justify-content: space-between; gap: 24px;
    height: 88px; padding: 0 24px;
  }
  .k-kopf > .k-logo { align-self: auto; }
  .k-links { justify-content: flex-start; gap: 20px; }
  .k-logo { gap: 12px; }
  .k-wort { font-size: 28px; }
  .k-anh { width: 44px; height: 64px; }
  .k-umlauf { width: 46px; height: 46px; }
  /* Sechs Etiketten neben Rückweg und Logo: bis 1199 px enger gesetzt. */
  .k-nav { flex-wrap: nowrap; gap: 8px; }
  .k-zurueck { min-height: 44px; font-size: 15px; }
  .k-dymo { font-size: 14px; letter-spacing: 0.08em; padding: 0 10px; }
}
@media (min-width: 1200px) {
  .k-kopf { padding: 0 var(--rand-x); }
  .k-nav { gap: 14px; }
  .k-dymo { font-size: 15px; letter-spacing: 0.14em; padding: 0 18px; }
}

/* ── Kopf mit Schublade ───────────────────────────────────────────────── */
/* Auszeichnung: header.k-kopf.k-kopf--schublade > … + button.k-bereiche + nav#k-schublade.k-nav[popover]
   Unter 1024 px zeigt der Kopf nur Logo und ein Etikett mit dem Namen der aktuellen Seite
   (63 px hoch, egal wie viele Bereiche es gibt). Ein Tipp darauf öffnet die Schublade mit
   allen Bereichen, gruppiert. Popover ohne Skript: Tippen daneben oder Escape schließt.
   Ab 1024 px und in Browsern ohne Popover steht die Liste wie bisher im Kopf.
   Gruppen-Überschriften (.k-gruppe) und der Zettel in der Schublade (.k-zurueck--schublade)
   gibt es nur in der Schublade. Wer bei offener Schublade über 1024 px dreht oder zieht,
   sieht sie bis zum nächsten Tippen noch offen; das nehmen wir für „ohne Skript“ in Kauf. */
.k-bereiche, .k-gruppe, .k-zurueck--schublade { display: none; }
@supports selector(:popover-open) {
  /* not … (min-width: 1024px) statt max-width: 1023px, damit gezoomte Breiten wie 1023,5 px
     nicht zwischen beide Regeln fallen. */
  @media not all and (min-width: 1024px) {
    .k-kopf--schublade {
      flex-direction: row; align-items: center; justify-content: space-between; gap: 12px;
      height: 63px; padding-top: 0; padding-bottom: 0;
    }
    .k-kopf--schublade > .k-logo { align-self: auto; }
    .k-kopf--schublade .k-links > .k-zurueck { display: none; }
    .k-kopf--schublade .k-anh { width: 30px; height: 44px; }
    .k-kopf--schublade .k-umlauf { width: 34px; height: 34px; }
    .k-kopf--schublade .k-wort { font-size: 24px; }

    .k-bereiche {
      display: flex; align-items: center; gap: 10px;
      min-height: 44px; padding: 0 12px 0 14px; border: 0; cursor: pointer;
      background: var(--m-akzent); color: var(--m-auf-akzent);
      font-family: var(--font-mono); font-weight: 600; font-size: 14px; letter-spacing: 0.12em;
      text-transform: uppercase; white-space: nowrap;
      border-radius: 4px; box-shadow: 0 2px 0 var(--m-akzent-schatten);
    }
    .k-bereiche:focus-visible { outline: 3px solid var(--g-fokus); outline-offset: 3px; }
    .k-bereiche-pfeil { display: block; flex-shrink: 0; transition: transform var(--bew-mittel) var(--ease-ausrollen); }
    .k-kopf--schublade:has(.k-nav:popover-open) .k-bereiche-pfeil { transform: rotate(180deg); }

    /* Die Schublade liegt in der obersten Ebene, fest am Fenster unter der Kopfhöhe: Scrollen
       nimmt sie nicht mit aus dem Bild (sonst bliebe nur der abgedunkelte Hintergrund). */
    .k-kopf--schublade .k-nav[popover] {
      position: fixed; inset: 63px 0 auto 0; width: auto; height: auto; max-height: calc(100dvh - 63px);
      margin: 0; padding: 14px 16px 20px; overflow-y: auto;
      border: 0; border-bottom: 1px solid var(--g-kopf-kante);
      background: var(--g-kopf); color: var(--g-kopf-text);
      box-shadow: 0 18px 30px var(--g-schatten-45);
    }
    /* .k-nav setzt display: flex und schlägt damit die Browser-Regel, die ein geschlossenes
       Popover verbirgt; deshalb hier ausdrücklich. */
    .k-kopf--schublade .k-nav:not(:popover-open) { display: none; }
    .k-kopf--schublade .k-nav:popover-open {
      display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
      transition: transform var(--bew-mittel) var(--ease-ausrollen), opacity var(--bew-kurz);
    }
    @starting-style {
      .k-kopf--schublade .k-nav:popover-open { transform: translateY(-12px); opacity: 0; }
    }
    .k-kopf--schublade .k-nav::backdrop { background: var(--g-schatten-45); }
    .k-kopf--schublade .k-nav .k-dymo { width: 100%; padding: 0 8px; font-size: 13px; letter-spacing: 0.08em; }
    .k-kopf--schublade .k-nav > .k-dymo[href="/"],
    .k-gruppe, .k-zurueck--schublade { grid-column: 1 / -1; }
    .k-gruppe {
      display: block; margin-top: 6px;
      font-family: var(--font-mono); font-weight: 600; font-size: 12px; letter-spacing: 0.14em;
      text-transform: uppercase; color: var(--g-kopf-gruppe);
    }
    .k-zurueck--schublade { display: flex; justify-content: center; }
    /* Schleier: button.k-schleier[popovertarget=k-schublade][popovertargetaction=hide] als letztes
       Kind der Schublade. Er liegt unter ihrem Inhalt über dem ganzen Fenster und fängt das Tippen
       daneben ab: es schließt nur und löst keinen Link der Seite darunter aus. */
    .k-kopf--schublade .k-nav:popover-open > .k-schleier {
      display: block; position: fixed; inset: 0; z-index: -1;
      margin: 0; padding: 0; border: 0; background: transparent; cursor: default;
    }
  }
}
.k-schleier { display: none; }
@media (min-width: 1024px) {
  .k-kopf--schublade .k-nav[popover] {
    display: flex; position: static; inset: auto; width: auto; height: auto; overflow: visible;
    margin: 0; padding: 0; border: 0; background: none; color: inherit;
  }
}

/* ── Fuß ───────────────────────────────────────────────────────────────── */
.fuss {
  margin-top: auto;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  padding: 20px 16px 28px;
  background: var(--g-kopf); border-top: 1px solid var(--g-kopf-kante);
  font-size: 15px; line-height: 1.45; color: var(--g-fuss-text);
}
.fuss-etikett {
  display: flex; align-items: center; flex-shrink: 0;
  min-height: 30px; padding: 0 12px;
  background: var(--m-dymo); color: var(--m-dymo-text);
  font-family: var(--font-mono); font-weight: 600; font-size: 13px; letter-spacing: 0.14em;
  text-transform: uppercase; border: 1px solid var(--m-akzent-rand); border-radius: 4px;
}
@media (min-width: 700px) {
  .fuss { padding-left: 24px; padding-right: 24px; }
}
@media (min-width: 1024px) {
  .fuss {
    align-items: center; gap: 24px;
    min-height: 76px; padding: 0 var(--rand-x);
    font-size: 16px; line-height: 1.4;
  }
  .fuss-etikett { min-height: 32px; }
}

/* ── Seitentitel auf der Wand ─────────────────────────────────────────── */
.titel { margin: 0; font-size: clamp(38px, 12.5vw, 46px); font-weight: 800; line-height: 0.98; letter-spacing: -0.035em; color: var(--g-text-1); }
.lead { margin: 0; font-size: 17px; line-height: 1.45; color: var(--g-text-2); }
@media (min-width: 700px) {
  .titel { font-size: 60px; line-height: 0.95; }
}
/* Galaxie der Startseite neben dem Seitentitel: <h1 class="titel"><henneh-galaxie art="tipp"></henneh-galaxie>Tippgen</h1>.
   Das Element kommt von henneh.de (/assets/galaxien/henneh-galaxie.js). Die Galaxie ist ein
   bewegtes Canvas und damit eine eigene Ebene: sie steht neben dem Text, nie darunter. */
.titel:has(> henneh-galaxie) { display: flex; align-items: center; gap: 0.22em; }
henneh-galaxie { display: block; flex: none; height: 1.5em; aspect-ratio: 1; }
henneh-galaxie[art="tipp"] { aspect-ratio: 0.89; }
henneh-galaxie[art="pitch"] { aspect-ratio: 1.46; }
henneh-galaxie[art="route"] { aspect-ratio: 1.47; }
henneh-galaxie > canvas { display: block; width: 100%; height: 100%; }
@media (min-width: 1024px) {
  .lead { font-size: 19px; }
}

/* ── Reiter (Werkzeug-Reiter über der Tafel) ──────────────────────────── */
.reiterleiste { display: flex; align-items: flex-end; gap: 8px; }
.reiter {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  min-height: 48px; padding: 0 16px; margin: 0;
  background: rgba(22,19,60,.6); color: #c9c3e3;
  border: 1px solid var(--n-kante-leise); border-bottom: none; border-radius: 12px 12px 0 0;
  font-family: var(--font-ui); font-size: 16px; font-weight: 700; white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s;
}
.reiter[aria-selected="true"], .reiter[aria-current="page"] {
  min-height: 56px; padding: 0 18px;
  background: var(--n-glas-hoch); color: var(--n-gold-hell);
  border: 1px solid var(--n-kante); border-bottom: none; font-size: 17px; font-weight: 800;
  box-shadow: inset 0 2px 0 var(--m-akzent);
}
.reiter:not([aria-selected="true"]):not([aria-current="page"]):hover { background: rgba(34,29,84,.85); color: var(--n-text); }
.reiter-icon { display: block; flex-shrink: 0; }

@media (min-width: 1024px) {
  .reiterleiste { gap: 10px; }
  .reiter { gap: 10px; padding: 0 20px; font-size: 17px; }
  .reiter[aria-selected="true"] { padding: 0 22px; font-size: 18px; }
}

/* ── Arbeitsfläche (Sternentafel: Nachtglas mit Goldkante; hell siehe Morgenglas) ── */
/* Die Tafel stellt die Material-Variablen auf Nacht um: Tinte wird hell, Weiß und
   Papier werden dunkel. Gegenstände darauf (Schein, Zettel, Karte) tragen .papier
   und bekommen die hellen Werte zurück. */
.tafel {
  position: relative;
  color-scheme: dark;
  --m-tafel: #1a1648; --m-tinte: var(--n-text); --m-papier: #241f5a; --m-weiss: var(--n-feld);
  --m-leise: #bcb6dc; --m-linie: var(--n-kante-leise); --m-strich: #7a74b8; --m-naht: var(--n-kante-leise);
  --m-ok: #7ee08a; --m-fehler: #ff8f80;
  --m-dymo: #2a2466; --m-dymo-text: var(--n-gold-hell); --m-dymo-schatten: #07061a;
  --m-feld-rand: var(--n-kante-feld); --m-knopf-grund: transparent; --m-knopf-hover: rgba(255,255,255,.06);
  --m-knopf-schatten: transparent; --m-rund: 8px;
  --m-fokus-feld: 0 0 0 2px var(--m-akzent), 0 0 18px rgba(233,184,74,.25);
  --g-text-1: #f6f0dd; --g-text-2: #e3dcf0; --g-text-3: #c9c3e3; --g-text-4: #9a94c2; --g-fokus: var(--n-gold-hell);
  background: linear-gradient(180deg, var(--n-glas-hoch), var(--n-glas) 140px);
  color: var(--m-tinte);
  border-radius: 14px;
  box-shadow: var(--n-schein);
  padding: 24px 18px 22px;
}
.tafel--eckig { border-top-left-radius: 0; }
/* Gegenstand auf der Tafel: helles Papier mit den ursprünglichen Materialwerten */
.papier {
  color-scheme: light;
  --m-tinte: #16212a; --m-papier: #f3f6f7; --m-weiss: #ffffff; --m-tafel: #eef2f4;
  --m-leise: #45535d; --m-linie: #c3ccd1; --m-strich: #76858c; --m-naht: #b3bfc6;
  --m-ok: #1e6b34; --m-fehler: #a43c2f;
  --m-dymo: #1b1846; --m-dymo-text: #f3ecd8; --m-dymo-schatten: #0b0a26;
  --m-feld-rand: var(--m-tinte); --m-knopf-grund: var(--m-weiss); --m-knopf-hover: var(--m-papier);
  --m-knopf-schatten: var(--m-tinte); --m-rund: 4px;
  --m-fokus-feld: 0 0 0 3px var(--m-akzent), 0 0 0 5px var(--m-tinte);
  color: var(--m-tinte);
}
@media (min-width: 1024px) {
  .tafel { padding: 36px 36px 32px; }
}
.naht { border-top: 2px dashed var(--m-naht); padding-top: 20px; }
@media (min-width: 1024px) { .naht { padding-top: 22px; } }

/* ── Felder (auf Tafel/Papier) ────────────────────────────────────────── */
.feld-label { display: block; font-size: 16px; font-weight: 700; color: var(--m-tinte); }
.feld {
  display: block; width: 100%; min-width: 0; min-height: 48px; margin: 0;
  padding: 0 12px;
  background: var(--m-weiss); color: var(--m-tinte);
  border: 2px solid var(--m-feld-rand); border-radius: var(--m-rund);
  font-family: var(--font-mono); font-size: 16px;
  transition: box-shadow .2s;
}
textarea.feld { padding: 12px; line-height: 1.6; resize: vertical; }
select.feld { font-family: var(--font-ui); cursor: pointer; }
.feld::placeholder { color: var(--m-leise); opacity: 1; }
.feld:focus { outline: none; box-shadow: var(--m-fokus-feld); }
@media (min-width: 1024px) and (pointer: fine) {
  .feld { font-size: 17px; padding: 0 14px; }
  textarea.feld { font-size: 16px; padding: 12px 14px; }
}

/* Ausgabe: gestrichelter Papierrand */
.ausgabe {
  display: block; margin: 0; min-width: 0;
  padding: 12px;
  background: var(--m-weiss); color: var(--m-tinte);
  border: 2px dashed var(--m-strich); border-radius: var(--m-rund);
  font-family: var(--font-mono); font-size: 15px; line-height: 1.7;
  overflow: auto;
}
@media (min-width: 1024px) { .ausgabe { padding: 14px 16px; font-size: 16px; } }

/* ── Knöpfe (auf Tafel/Papier) ────────────────────────────────────────── */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px; margin: 0;
  background: var(--m-knopf-grund); color: var(--m-tinte);
  border: 2px solid var(--m-feld-rand); border-radius: var(--m-rund);
  box-shadow: 0 2px 0 var(--m-knopf-schatten);
  font-family: var(--font-ui); font-size: 16px; font-weight: 700; line-height: 1;
  cursor: pointer; white-space: nowrap;
  transition: transform .15s, box-shadow .15s, background-color .2s;
}
.knopf:hover { background: var(--m-knopf-hover); transform: translateY(-1px); box-shadow: 0 3px 0 var(--m-knopf-schatten); }
.knopf:active { transform: translateY(2px); box-shadow: 0 0 0 var(--m-knopf-schatten); }
.knopf--akzent, .knopf--akzent:hover { background: var(--m-akzent); color: var(--m-auf-akzent); border-color: var(--m-akzent); }
.knopf--klein { min-height: 44px; padding: 0 12px; font-size: 15px; }

/* Dymo-Etikett auf Tafel/Papier (Status, Zähler) */
.dymo-etikett {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 30px; padding: 0 12px;
  background: var(--m-dymo); color: var(--m-dymo-text);
  font-family: var(--font-mono); font-weight: 600; font-size: 13px; letter-spacing: 0.12em;
  text-transform: uppercase; white-space: nowrap;
  border-radius: 4px;
}

/* ── Fokus ─────────────────────────────────────────────────────────────── */
/* Auf Wand und Kopf: gelb (dunkel) bzw. Tinte (hell). Auf der Tafel: helles Gold, auf Papier: Tinte. */
:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--g-fokus); outline-offset: 5px; }
.tafel :where(a, button, input[type="checkbox"], input[type="radio"], summary):focus-visible { outline: 3px solid var(--n-gold-hell); outline-offset: 3px; }
.tafel .papier :where(a, button, input[type="checkbox"], input[type="radio"], summary):focus-visible { outline-color: var(--m-tinte); }
.reiter:focus-visible { outline: 3px solid var(--g-fokus); outline-offset: 4px; }


/* ── Morgenglas: die Sternentafel im hellen Modus ─────────────────────── */
/* Am Tag werden Tafeln, Reiter und Felder helles Perlmuttglas mit Goldkante, Schrift Nachtblau,
   Gold tiefer. Alles andere bleibt Nacht: der Himmel samt Nebel und Galaxien, der Text direkt darauf,
   Kopf, Schublade und Fuß. Die Reiter liegen auf dem Nachthimmel und sind deshalb fast deckend. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dunkel"]) {
    --n-glas: rgba(255,251,247,.96); --n-glas-hoch: rgba(255,255,255,.98);
    --n-kante: rgba(176,125,18,.5); --n-kante-leise: rgba(52,44,110,.16); --n-kante-feld: rgba(52,44,110,.32);
    --n-text: #1b1846; --n-gold-hell: #7a5200; --n-feld: #ffffff;
    --n-schein: 0 0 0 1px var(--n-kante), 0 0 44px -10px rgba(143,106,232,.35), 0 18px 40px rgba(70,50,130,.16);
  }
  :root:not([data-theme="dunkel"]) .tafel {
    color-scheme: light;
    background-color: var(--m-tafel);   /* deckend unter dem Glas: am Tag scheint der Nachthimmel nicht durch */
    --m-tafel: #fbf8ff; --m-tinte: #1b1846; --m-papier: #f5f0ff; --m-weiss: #ffffff;
    --m-leise: #4d4775; --m-linie: rgba(52,44,110,.16); --m-strich: #8a84b8; --m-naht: rgba(52,44,110,.2);
    --m-ok: #1e6b34; --m-fehler: #a43c2f;
    --m-dymo: #f1eaff; --m-dymo-text: #4b3a00; --m-dymo-schatten: transparent;
    --m-feld-rand: rgba(52,44,110,.32); --m-knopf-grund: rgba(255,255,255,.7); --m-knopf-hover: #f1eaff;
    --m-fokus-feld: 0 0 0 2px #b07d12, 0 0 14px rgba(176,125,18,.25);
    --g-text-1: #1b1846; --g-text-2: #2c2760; --g-text-3: #4d4775; --g-text-4: #6a6494; --g-fokus: #7a5200;
  }
  :root:not([data-theme="dunkel"]) .reiter:not([aria-selected="true"]):not([aria-current="page"]) {
    background: rgba(255,255,255,.86); color: #4d4775; border-color: rgba(52,44,110,.16);
  }
  :root:not([data-theme="dunkel"]) .reiter:not([aria-selected="true"]):not([aria-current="page"]):hover { background: rgba(255,255,255,.96); color: #1b1846; }
}
:root[data-theme="hell"] {
  --n-glas: rgba(255,251,247,.96); --n-glas-hoch: rgba(255,255,255,.98);
  --n-kante: rgba(176,125,18,.5); --n-kante-leise: rgba(52,44,110,.16); --n-kante-feld: rgba(52,44,110,.32);
  --n-text: #1b1846; --n-gold-hell: #7a5200; --n-feld: #ffffff;
  --n-schein: 0 0 0 1px var(--n-kante), 0 0 44px -10px rgba(143,106,232,.35), 0 18px 40px rgba(70,50,130,.16);
}
:root[data-theme="hell"] .tafel {
  color-scheme: light;
  background-color: var(--m-tafel);   /* deckend unter dem Glas: am Tag scheint der Nachthimmel nicht durch */
  --m-tafel: #fbf8ff; --m-tinte: #1b1846; --m-papier: #f5f0ff; --m-weiss: #ffffff;
  --m-leise: #4d4775; --m-linie: rgba(52,44,110,.16); --m-strich: #8a84b8; --m-naht: rgba(52,44,110,.2);
  --m-ok: #1e6b34; --m-fehler: #a43c2f;
  --m-dymo: #f1eaff; --m-dymo-text: #4b3a00; --m-dymo-schatten: transparent;
  --m-feld-rand: rgba(52,44,110,.32); --m-knopf-grund: rgba(255,255,255,.7); --m-knopf-hover: #f1eaff;
  --m-fokus-feld: 0 0 0 2px #b07d12, 0 0 14px rgba(176,125,18,.25);
  --g-text-1: #1b1846; --g-text-2: #2c2760; --g-text-3: #4d4775; --g-text-4: #6a6494; --g-fokus: #7a5200;
}
:root[data-theme="hell"] .reiter:not([aria-selected="true"]):not([aria-current="page"]) {
  background: rgba(255,255,255,.86); color: #4d4775; border-color: rgba(52,44,110,.16);
}
:root[data-theme="hell"] .reiter:not([aria-selected="true"]):not([aria-current="page"]):hover { background: rgba(255,255,255,.96); color: #1b1846; }
/* ── Animationen ──────────────────────────────────────────────────────── */
/* Nur einmalige Bewegungen, die auf Ruhe enden. Dauer- und Wiederholbewegung
   läuft als SVG-SMIL im Markup, nie als CSS-Animation (siehe DESIGN.md, Bewegung).
   k-schwung: Logo-Hover oben; led, treffer: tools/index.html. */
@keyframes k-schwung { 0% { transform: rotate(0deg); } 22% { transform: rotate(4deg); } 48% { transform: rotate(-2deg); } 74% { transform: rotate(.8deg); } 100% { transform: rotate(0deg); } }
@keyframes led { 0%, 86% { opacity: 1; } 87%, 93% { opacity: .25; } 94% { opacity: 1; } }
@keyframes treffer { 0%, 88%, 100% { box-shadow: 0 0 0 0 var(--m-treffer-glow-0); } 92% { box-shadow: 0 0 0 3px var(--m-treffer-glow); } }

/* ── Seitenwechsel (Cross-Document View Transition) ───────────────────── */
/* Seitenwechsel innerhalb von henneh.de: der Kopf bekommt einen eigenen Namen und
   steht deshalb still (nur das aktive Etikett wechselt die Farbe), der Rest blendet
   kurz über. Bewusst kein Morph von Gegenständen: große Flächen würden als Bild
   skaliert und springen. Die Unterprojekte brauchen dafür keinen eigenen Code. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation-duration: var(--bew-seite);
    animation-timing-function: ease-out;
  }
}
.k-kopf { view-transition-name: kopf; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}