/* ═══════════════════════════════════════════════════════════════════
   quiet-pages — das gesamte Design, eine Datei.

   Aufbau nach §4 der Spezifikation, und diese Reihenfolge ist
   funktional, nicht kosmetisch: die @font-face-Regeln zuerst, damit
   der Browser die Schriftanforderung schon kennt, bevor die erste
   Regel sie braucht; danach die Tokens, weil jede folgende Regel sie
   liest; die Breakpoints am Ende, weil sie --rand-x und den Grundgrad
   ueberschreiben und dafuer spaeter in der Kaskade stehen muessen.

   (1) @font-face  (2) Tokens  (3) Grundlage  (4) Komponenten
   (5) Pygments  (6) Breakpoints  (7) Bewegung  (8) Druck

   Keine Farbe ausserhalb des Token-Blocks. Kein Gewicht ausser 400,
   600, 700 – die uebrigen Schnitte existieren als Datei nicht und
   fielen lautlos auf 400 zurueck.
   ═══════════════════════════════════════════════════════════════════ */

/* ------------------------------------------------------------------
   Iosevka Aile — SIL OFL 1.1, © 2015–2026 Renzhi Li (Belleve Invis).
   Lizenz: static/fonts/LICENSE-Iosevka.txt, verlinkt auf /hinweise/.
   Subset fuer quiet-pages: Latin + Interpunktion + Box/Block/Shapes.
   Iosevkas Code-Ligaturen (calt/dlig) sind bewusst entfernt, damit
   "->", "...", "://" im Fliesstext unveraendert bleiben.
   ------------------------------------------------------------------ */
@font-face {
  font-family: "Iosevka Aile";
  src: url("../fonts/IosevkaAile-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Iosevka Aile";
  src: url("../fonts/IosevkaAile-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Iosevka Aile";
  src: url("../fonts/IosevkaAile-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Iosevka Aile";
  src: url("../fonts/IosevkaAile-SemiBoldItalic.woff2") format("woff2");
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Iosevka Aile";
  src: url("../fonts/IosevkaAile-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Kein local("Iosevka Aile") im src – bewusst: der Betreiber hat die
   Vollversion oft installiert, und deren GSUB enthaelt "calt", die
   Code-Ligatur-Maschine (unsere Subsets nur "ccmp" + "locl",
   nachgeprueft in §Anhang). Er saehe "->" als Pfeil und "://" als
   Ligatur, jeder Besucher den normalen Text.

   Das Verbot haengt am Namen, nicht an local() selbst. Der
   Ersatzschnitt darunter nennt nur Systemschriften – Arial kann keine
   Code-Ligaturen einschleppen – und darf local() deshalb benutzen. Er
   ist keine Zierde: bei font-display: swap und bei ausgefallener woff2
   traegt der erste Satz die Plattformschrift, und ohne die Overrides
   liegt die Grundlinie vor und nach dem Umschalten anders.
*/

/* Ersatzschrift mit angeglichenen Metriken. x-Hoehe von Aile ist 52,0 %
   (sxHeight 520/1000 – gemessen), Arial ~51,9 %, Helvetica ~52,3 %:
   size-adjust bleibt bei 100 %. Auf-/Abstrich weichen ab, deshalb die
   Overrides aus sTypoAscender 965 / sTypoDescender -285 / LineGap 0.  */
@font-face {
  font-family: "Iosevka Aile Ersatz";
  src: local("Helvetica Neue"), local("Arial"), local("Liberation Sans");
  size-adjust: 100%;
  ascent-override: 96.5%;
  descent-override: 28.5%;
  line-gap-override: 0%;
}

/* ═══════════════════════════════════════════════════════════════════
   (2) Tokens. Vier Einheitenregeln, die nie gebrochen werden:
   Fliesstext in em, Chrome in px; vertikale Abstaende immer
   calc(var(--rhythmus) * n); die Lesespalte in em, nie in ch; und
   keine Variable, die nicht benutzt wird.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Schrift ─────────────────────────────────────────────────── */
  --schrift-text: "Iosevka Aile", "Iosevka Aile Ersatz", ui-sans-serif, system-ui,
                  -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
                  Consolas, monospace;          /* nur code/pre */
  --gewicht-normal: 400;
  --gewicht-halbfett: 600;                       /* strong, h2–h6, Mikrolabel */
  --gewicht-fett: 700;                           /* nur .titel */
  --zeilen-normal: 1.5;
  --zeilen-eng: 1.3;                             /* Pflicht bei Box-Zeichen */

  /* Chrome-Grade, absolut (Obsidians --font-ui-*) */
  --ui-winzig: 12px;
  --ui-klein: 13px;
  --ui-mittel: 15px;

  /* ─── Raster ──────────────────────────────────────────────────── */
  --rhythmus: 1.5rem;                            /* 24px, an rem gebunden */
  /* 40em = 75 Zeichen pro Zeile, die Obergrenze der akzeptierten Spanne
     von 45–75. Das ist eine ausdrückliche Entscheidung und kein Zufall:
     52em waren einmal eingestellt (98 Zeichen), und der Grund dagegen ist
     nicht Geschmack, sondern der Zeilenrücksprung – bei langen Zeilen
     findet das Auge den nächsten Zeilenanfang schlechter.

     Weil das Maß in em steht, hängt die Zeichenzahl NUR an diesem Wert
     und nicht am Schriftgrad; der Grad ändert allein die Pixelbreite.
     Gemessen läuft deutsche Prosa in Iosevka Aile mit 0,531 em pro
     Zeichen, bei 16px sind 40em also 640 Pixel.
     Kürzer: 38em = 71,6 Zeichen, 36em = 67,8. */
  --satzmass: 40em;
  /* Das Register ist ein Katalog, kein Fließtext: die Zeile besteht aus
     Nummer, Titel und Datum und wird nicht gelesen, sondern abgesucht.
     Die 75-Zeichen-Regel gilt dafür nicht – sie schützt den
     Zeilenrücksprung beim Lesen, und im Register liest niemand Zeile für
     Zeile. Deshalb darf diese Spalte breiter sein: 52em sind bei 16px
     832 Pixel. Gesetzt wird sie über .spalte--register, das start.html
     und thema.html anhängen. */
  --satzmass-register: 52em;
  --spur: 10px;                                  /* Spalte des Jahrgangszeichens */
  --sp-nummer: 32px;                             /* 4 Ziffern à 0,6em @13px = 31,2px */
  --sp-luecke: 8px;
  --sp-etikett: 9em;                             /* Labelspalte im Essay-Kopf */
  --kopfhoehe: 40px;                             /* Obsidians --header-height */
  --rand-x: 20px;                                /* wird ab 40em/48em erhöht */
  --radius-s: 4px;
  --tempo: 140ms;                                /* nur für color/opacity */

  /* Ziffern: Aile bringt keine Mediävalziffern mit (GSUB = ccmp, locl —
     nachgeprüft), die Angabe ist also wirkungslos. Sie steht trotzdem hier,
     damit ein späteres oldstyle-nums von außen nicht durchschlägt. */
  font-variant-numeric: lining-nums tabular-nums;
}

/* ─── Farbe: dunkel, und nur dunkel ──────────────────────────────────
   Es gibt keine zweite Palette und keinen prefers-color-scheme-Zweig für
   den Bildschirm. Der Dunkelmodus IST diese Seite: ein Ort, an dem Texte
   liegen, die man nachts liest. Wer sein System hell stellt, sieht
   dieselbe Seite — eine helle Zweitfassung hätte den Charakter nur für die
   Hälfte der Besucher getragen, und "einheitlich designt" war die Vorgabe.
   Papier ist die Ausnahme: der Druckblock am Ende der Datei setzt alles auf
   Schwarz auf Weiß zurück.

   Alle Zahlen sind nachgerechnet (WCAG 2.x, sRGB), nicht geschätzt. Die
   Mischungen stehen bewusst in srgb und nicht in oklch: nur so ist die
   komponierte Fläche von Hand nachprüfbar, weil der Browser dann einfach
   Anteil × Farbe + Rest × Grund rechnet.
   ─────────────────────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;

  /* Der Grund ist nicht #000000, und das ist eine Entscheidung: reines
     Schwarz lässt helle Schrift ausblühen und schmiert auf OLED-Displays
     beim Scrollen. Ein paar Prozent Helligkeit nehmen beides weg, ohne dass
     die Tiefe verlorengeht.
     Neutral getönt und nicht warm, obwohl Bernstein die Vorgabe ist: der
     Akzent ist umschaltbar, und ein warmer Grund würde unter dem violetten
     Akzent kippen. Den Charakter trägt die Tiefe, nicht ein Farbstich. */
  --grund:         #0e0e10;
  --flaeche-alt:   #16161a;   /* code, pre — 1,1:1 zum Grund, nur eine Andeutung */
  --rahmen:        #2a2a30;   /* 1,35:1 — Dekor, trägt nie Information */
  --leitlinie:     color-mix(in srgb, #ffffff 9%, transparent);
  --flaeche-hover: color-mix(in srgb, #ffffff 6.5%, transparent);   /* = #1e1e20 */

  /* Vier Textstufen. Die oberste liegt bei 15,0:1 und damit bewusst NICHT
     am Maximum — reines Weiß wären auf diesem Grund 18,9:1, und in dieser
     Gegend fängt helle Schrift auf tiefem Grund an zu blühen. GitHub Dark
     liegt mit #e6edf3 auf #0d1117 bei 14,8:1, also in derselben Spanne. */
  --text-normal: #e3e3e0;   /* 15,00:1 — Fließtext, Titel, Registertitel */
  --text-muted:  #adaeb3;   /*  8,71:1 — alles Chrome; Pflicht auf Hover-Flächen (dort 7,52:1) */
  --text-dim:    #8b8c93;   /*  5,76:1 — Weiterverweis, Fußnoten, Code-Kommentare */
  --text-faint:  #5a5b62;   /*  2,85:1 — NUR Ornament, immer mit aria-hidden */
  --fokus:       #9a9ba2;   /*  6,96:1 zum Grund, 6,01:1 zur Hover-Fläche */

  /* Bernstein ist die Vorgabe: der Ton alter Mikrofilm-Lesegeräte und
     Natriumlampen. Er liest sich als Bestand und als Fundstelle — etwas
     liegt hier, katalogisiert, und jemand hat es gefunden. Warm genug, um
     nicht nach Neon zu wirken, und die Sättigung liegt unter dem Maximum,
     weil gesättigte Farben auf tiefem Grund vibrieren.
     Umschaltbar auf Violett, siehe html.akzent-violett und settings.AKZENT. */
  --akzent:         #e9a53c;   /*  9,10:1 zum Grund, 7,58:1 auf der Pille */
  --akzent-hover:   #f7c56f;   /* 12,09:1 — HELLT auf, senkt den Kontrast also nie */
  --akzent-flaeche: #e9a53c;   /* Basis der Mischungen und der Zitatkante */
  --pille:       color-mix(in srgb, var(--akzent-flaeche) 12%, transparent);
  --pille-stark: color-mix(in srgb, var(--akzent-flaeche) 22%, transparent);
  --markierung:  color-mix(in srgb, var(--akzent-flaeche) 28%, transparent);

  /* Syntaxfarben: dieselben acht Töne, die jeder Editor benutzt, aber
     deutlich entsättigt. Eine bunte Palette in einem strengen Satzbild ist
     ein Bruch — hier sollen die Token unterscheidbar sein, nicht leuchten.
     Alle Werte gegen --flaeche-alt gerechnet, alle über 7:1. */
  --syn-rot:     #e88b8b;   /* 7,30:1 */
  --syn-orange:  #dda05a;   /* 7,95:1 */
  --syn-gelb:    #cfc07a;   /* 9,86:1 */
  --syn-gruen:   #8cc79a;   /* 9,24:1 */
  --syn-cyan:    #7fc3c6;   /* 9,04:1 */
  --syn-blau:    #8fb4e0;   /* 8,40:1 */
  --syn-violett: #b3a2e0;   /* 7,87:1 */
  --syn-pink:    #d9a0bd;   /* 8,35:1 */
}

/* ─── Die Umschaltung ────────────────────────────────────────────────
   Sie ändert genau den Akzent. Grund, Textstufen, Linien und Ornamentik
   bleiben, weil sie den Charakter tragen; der Akzent trägt nur den
   Beiklang. Deshalb ist die Umschaltung fünf Zeilen und kein zweites
   Stylesheet — und deshalb gibt es auch keine zweite Kontrastprüfung, die
   irgendwann auseinanderläuft.

   Die Klasse setzt templates/basis.html aus settings.AKZENT (über
   essays/kontext.py). Ohne gesetzten Wert greift Bernstein aus :root.
   Kein Umschalter für Besucher: der bräuchte JavaScript oder einen
   Server-Zustand, und die Seite hat weder das eine noch das andere.
   ─────────────────────────────────────────────────────────────────────── */
html.akzent-violett {
  --akzent:         #a88bfa;   /*  7,11:1 zum Grund, 6,08:1 auf der Pille */
  --akzent-hover:   #c9baff;   /* 10,97:1 — HELLT auf */
  --akzent-flaeche: #a88bfa;
}

/* ═══ Grundlage ══════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scrollbar-gutter: stable;          /* kein Layoutsprung beim Scrollbalken */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* Die Fusszeile steht auch auf kurzen Seiten unten. Die Kette dafuer
     laeuft durch drei Ebenen (body -> .blatt -> .spalte), weil die
     Fusszeile im Satzspiegel sitzt und nicht daneben: jede Ebene gibt den
     freien Platz weiter, und main nimmt ihn am Ende auf.
     svh statt vh: auf Mobilgeraeten wuerde vh die Fusszeile unter die
     Browserleiste schieben. Der vh-Wert davor ist der Rueckfall. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background-color: var(--grund);
  color: var(--text-normal);
  font-family: var(--schrift-text);
  font-size: 16px;
  font-weight: var(--gewicht-normal);
  line-height: var(--zeilen-normal);
  overflow-wrap: break-word;
  hyphens: auto;                     /* braucht lang="de" am <html> */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection { background-color: var(--markierung); }   /* bewusst ohne color */

/* ═══ Sprungmarke ════════════════════════════════════════════════════
   Erster Tabstop auf jeder Seite. Auf der Startseite stehen bis zu 30
   Themen-Links vor <main> – dort verdient sie sich. Bewusst ohne
   Bedingung: ein konditionaler Skip-Link ist eine Fehlerquelle ohne
   Gegenwert.                                                          */
.sprung {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: var(--sp-luecke) var(--rand-x);
  background-color: var(--grund);
  color: var(--text-normal);
  font-size: var(--ui-klein);
  text-decoration: underline;
}
.sprung:focus-visible {
  left: 0;
  outline: 2px solid var(--fokus);
  outline-offset: -2px;
}

/* ═══ Hülle: Polster am Blatt, Maß an der Spalte ═════════════════════
   .spalte aendert NIE seinen Schriftgrad – sonst laeuft ein Band mit
   eigener font-size aus der Achse (--satzmass ist in em).             */
.blatt  {
  padding: calc(var(--rhythmus) * 1.5) var(--rand-x) 0;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
.spalte {
  /* width: 100% ist Pflicht, seit .blatt eine Spalten-Flexbox ist (klebende
     Fusszeile): ein Flex-Element mit "margin-inline: auto" streckt sich in
     der Querachse NICHT, sondern schrumpft auf seinen Inhalt. Gemessen war
     das Register dadurch 390 statt 832 Pixel breit, waehrend die Leseseite
     zufaellig stimmte - ihr Fliesstext fuellt die Spalte von selbst. */
  width: 100%;
  max-width: var(--satzmass);
  margin-inline: auto;
  /* Von 4x auf 2x: auf einer kurzen Seite stand die Fusszeile sonst 96px
     ueber dem Fensterrand und sah nicht nach "unten" aus. 48px sind Luft,
     ohne dass die Zeile am Rand klebt. */
  padding-block-end: calc(var(--rhythmus) * 2);
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
/* Nimmt den freien Platz auf und schiebt Trenner und Fusszeile nach unten. */
.spalte > main { flex: 1 0 auto; }
.spalte--register { max-width: var(--satzmass-register); }
.spalte > :first-child { margin-block-start: 0; }

/* ═══ Pfadzeile: reiner Raum mit unsichtbarer Kante ══════════════════ */
.pfad {
  display: flex;
  align-items: center;
  height: var(--kopfhoehe);
  margin-block-end: calc(var(--rhythmus) * 1.5);
  font-size: var(--ui-klein);
  line-height: var(--zeilen-eng);
  color: var(--text-muted);
  border-block-end: 1px solid transparent;   /* Obsidians --file-header-border */
}
.pfad a { color: inherit; text-decoration: none; }
@media (hover: hover) { .pfad a:hover { color: var(--text-normal); } }

/* ═══ Titel (= Obsidians .inline-title) ═════════════════════════════ */
.titel {
  margin: 0 0 .5em;
  font-size: 1.618em;
  font-weight: var(--gewicht-fett);
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--text-normal);
  text-wrap: balance;
}
.untertitel {
  margin: 0;
  font-size: 1em;
  line-height: var(--zeilen-normal);
  color: var(--text-muted);
  text-wrap: pretty;
}

/* ═══ Mikrolabel in Versalien ════════════════════════════════════════
   Aile hat kein smcp – echte Versalien plus Sperrung, nie small-caps. */
.rubrik {
  /* 3x statt 2x: die Mikrolabel sind die einzige Gliederung der
     Startseite. Jeder Jahrgang und die Themenrubrik sollen als eigener
     Abschnitt lesbar sein, nicht als naechster Absatz. */
  margin: calc(var(--rhythmus) * 3) 0 calc(var(--rhythmus) * .5);
  font-size: var(--ui-winzig);
  font-weight: var(--gewicht-halbfett);
  line-height: var(--zeilen-eng);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ═══ Kennzahlen auf der Startseite ══════════════════════════════════ */
.kennzahlen {
  /* Die Kennzahlen sind ein eigener Block und kein Untertitel. Vorher
     standen sie 13px unter der Wortmarke (dem 0.5em-Rand von .titel) und
     lasen sich als deren Fortsetzung; 48px machen daraus zwei Dinge.
     Der Rand von .titel fliesst hier mit zusammen, der groessere gewinnt –
     main ist ein normaler Blockcontainer, keine Flexbox. */
  margin: calc(var(--rhythmus) * 2) 0 0;
  display: grid;
  grid-template-columns: 1fr;
  font-size: var(--ui-klein);
  line-height: 1.4;
}
.kennzahlen dt { color: var(--text-muted); }
.kennzahlen dd {
  margin: 0 0 calc(var(--rhythmus) * .25);
  color: var(--text-normal);
  font-variant-numeric: lining-nums tabular-nums;
}
@media (min-width: 40em) {
  .kennzahlen { grid-template-columns: var(--sp-etikett) minmax(0, 1fr); row-gap: 3px; }
  .kennzahlen dd { margin-block-end: 0; }
}

/* ═══ Themenliste (nur /) ════════════════════════════════════════════
   Dasselbe 9em-Raster wie .kopf – die Startseite spricht damit die
   Rastersprache des Essay-Kopfs. Keine Pille hier: die gehoert in den
   Essay, 30-mal untereinander waere sie eine Wand aus Violett.        */
.themen { margin: 0; padding: 0; list-style: none; }
.themen__eintrag {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--sp-luecke);
  align-items: baseline;
  padding-block: calc(var(--rhythmus) * .25);
  text-decoration: none;
  color: inherit;
}
.themen__name  { font-size: var(--ui-mittel); line-height: var(--zeilen-eng);
                 color: var(--text-normal); }
.themen__zahl  { font-size: var(--ui-klein);  line-height: var(--zeilen-eng);
                 color: var(--text-muted);
                 font-variant-numeric: lining-nums tabular-nums; }
@media (hover: hover) {
  .themen__eintrag:hover .themen__name {
    text-decoration: underline;
    text-decoration-color: var(--akzent);
    text-decoration-thickness: 1px;
    text-underline-offset: .22em;
  }
}
@media (min-width: 40em) {
  .themen__eintrag { grid-template-columns: var(--sp-etikett) auto; justify-content: start; }
  .themen__zahl { text-align: end; min-width: 3ch; }
}

/* ═══ Die breite Registerspalte ausnutzen ════════════════════════════
   Ab 52em ist die Registerspalte 832px breit – breiter als der
   Satzspiegel, weil eine Liste kein Fließtext ist. Kennzahlen und
   Themenliste waren aber für die 640px-Spalte gebaut ("9em | auto",
   linksgepackt) und standen darin gedrängt links: gemessen endete die
   Themenzahl bei 764px, während die Registerzeile bis 1421px lief – 657px
   Leere daneben, direkt über einem Register, das die Breite voll nutzt.

   Die Breite wird deshalb mit INHALT gefüllt und nicht durch Strecken:
   ein "9em | 1fr" mit linksstehendem Wert schiebt die Leere nur in die
   Mitte, und ein rechtsbündiger einstelliger Wert stünde 800px von seinem
   Etikett entfernt. Also: Kennzahlen als eine Zeile, Themen mehrspaltig.
   Beide behalten den linken und rechten Rand des Registers.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 52em) {
  /* Die Kennzahlen werden zur Kopfzeile: "Notizen 4 · Themen 5 · Zuletzt …".
     Das weicht bewusst vom 9em-Raster des Essay-Kopfs ab – die Startseite
     ist ein Impressum der Sammlung, die Leseseite ein Dokumentenkopf.
     Zwei verschiedene Aufgaben, zwei Darstellungen. */
  .spalte--register .kennzahlen {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--sp-luecke);      /* Etikett zu Wert */
    row-gap: 3px;
  }
  /* Der groessere Abstand trennt die Paare voneinander. Ein einzelnes
     column-gap kann das nicht, es gilt fuer jede Luecke gleich. */
  .spalte--register .kennzahlen dd { margin-inline-end: calc(var(--rhythmus) * .75); }
  .spalte--register .kennzahlen dd:last-of-type { margin-inline-end: 0; }

  /* Die Themenliste wird mehrspaltig. Bei 832px und 14em Mindestbreite
     ergibt das drei Spalten – und die Hoehe waechst ab jetzt ein Drittel
     so schnell: 30 Themen sind zehn Zeilen statt dreissig. Genau der
     Einwand, den die Jury damals gegen ein wachsendes Themenband hatte. */
  .spalte--register .themen {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14em, 1fr));
    column-gap: calc(var(--rhythmus) * 1.5);
  }
  /* Innerhalb der Zelle wieder Name links, Zahl rechts – dieselbe
     Bauart wie die Registerzeile, nur im Kleinen. */
  .spalte--register .themen__eintrag {
    grid-template-columns: minmax(0, 1fr) auto;
    justify-content: stretch;
  }
  .spalte--register .themen__zahl { text-align: end; }
}

/* ═══ Gruppe (Jahrgang) ══════════════════════════════════════════════
   Das Signet steht zentriert in einer 10px-Spur. Der Senkrechtstrich
   von ┌ liegt in Iosevka Aile bei x[259,341], Mitte also exakt
   300/1000 em – zentriert in 10px bei x = 5px. Der 1px-Border wird
   deshalb bei 4,5px gezeichnet und deckt 4,5–5,5px: dieselbe Achse.
   Und weil ─ mit y[303,377] genau 0,074em stark ist, ist der Strich
   bei 13px 0,96px dick – dieselbe Haarlinie wie der Border.           */
.gruppe__titel {
  display: grid;
  grid-template-columns: var(--spur) minmax(0, 1fr);
  column-gap: var(--sp-luecke);
  align-items: baseline;
}
.gruppe__signet {
  font-size: var(--ui-klein);
  line-height: var(--zeilen-eng);   /* Pflicht: │ ist exakt 1.3em hoch */
  font-weight: var(--gewicht-normal);
  letter-spacing: 0;                /* nie Sperrung auf Einzelzeichen */
  text-align: center;
  color: var(--text-faint);
  user-select: none;
}
.gruppe__liste { position: relative; margin: 0; padding: 0; list-style: none; }
.gruppe__liste::before {
  content: "";
  position: absolute;
  inset-block: 0 6px;
  left: calc(var(--spur) / 2 - .5px);
  width: 1px;
  background-color: var(--leitlinie);
}

/* ═══ Registerzeile ══════════════════════════════════════════════════
   Das <a> IST die Zeile und traegt sein Polster selbst – nur so ist
   die ganze Flaeche ein Klickziel.
   KEINE transition: Flaechen reagieren sofort (Obsidian animiert
   Flaechen nur auf Mobil).                                            */
.register__zeile {
  display: grid;
  grid-template-columns: var(--spur) var(--sp-nummer) minmax(0, 1fr) auto;
  column-gap: var(--sp-luecke);
  align-items: baseline;
  min-height: 44px;                              /* SC 2.5.8 */
  padding: calc(var(--rhythmus) * .5) var(--sp-luecke);
  margin-inline: calc(var(--sp-luecke) * -1);    /* Polster blutet ueber die Kante */
  border-radius: var(--radius-s);
  color: var(--text-normal);
  text-decoration: none;
}
.register__nr {
  grid-column: 2;
  font-size: var(--ui-klein);
  line-height: var(--zeilen-eng);
  color: var(--text-muted);
  font-variant-numeric: lining-nums tabular-nums;
}
.register__text { grid-column: 3; min-width: 0; }
.register__titel {
  display: block;
  font-size: var(--ui-mittel);
  font-weight: var(--gewicht-normal);
  line-height: var(--zeilen-eng);
  text-wrap: pretty;
  /* kein text-overflow, kein line-clamp: ein abgeschnittener Titel
     ist in einem Register die Grundfunktion verfehlt */
}
.register__anno {
  display: block;
  margin-block-start: 2px;
  font-size: var(--ui-klein);
  line-height: 1.4;
  color: var(--text-muted);
}
.register__datum {
  grid-column: 4;
  font-size: var(--ui-klein);
  line-height: var(--zeilen-eng);
  color: var(--text-muted);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
@media (hover: hover) {
  .register__zeile:hover { background-color: var(--flaeche-hover); }
}

/* Mobil: Spur weg, Nummer bleibt (sie ist Kennung, kein Ornament),
   Datum wandert unter den Titel. */
@media (max-width: 39.999em) {
  .gruppe__signet { display: none; }
  /* Spur = 0, wie §6.1 es fuer Mobil zeichnet. Ohne diese Zeile bleibt
     die 10px-Spalte im Raster stehen, und weil das ausgeblendete Signet
     als Rasterelement wegfaellt, rutscht die Jahreszahl selbst hinein:
     "2026" bricht dann auf vier Zeilen, eine Ziffer pro Zeile
     (im Browser bei 375px nachgesehen). Einspaltig steht das Jahr
     buendig ueber der Nummernspalte der Zeilen darunter.              */
  .gruppe__titel { grid-template-columns: minmax(0, 1fr); }
  .gruppe__liste::before { display: none; }
  .register__zeile { grid-template-columns: var(--sp-nummer) minmax(0, 1fr); }
  .register__nr   { grid-column: 1; grid-row: 1; }
  .register__text { grid-column: 2; grid-row: 1; }
  .register__datum {
    grid-column: 2; grid-row: 2;
    justify-self: start;
    margin-block-start: 2px;
  }
}

/* ═══ Essay-Kopf (= Obsidians Properties als dl) ═════════════════════
   Kein Rahmen, kein Hintergrund, keine Divider, KEIN translateX(-4px)
   (Obsidians Versatz gehoerte zum Innenpolster der Label-Eingaben).   */
.kopf {
  margin: var(--rhythmus) 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  font-size: var(--ui-klein);
}
.kopf dt {
  color: var(--text-muted);
  font-weight: var(--gewicht-normal);
  line-height: 1.4;
  margin-block-start: calc(var(--rhythmus) * .5);
}
.kopf dt:first-of-type { margin-block-start: 0; }
.kopf dd {
  margin: 0;
  color: var(--text-normal);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  line-height: 1.4;
}
@media (min-width: 40em) {
  .kopf { grid-template-columns: var(--sp-etikett) minmax(0, 1fr); row-gap: 3px; }
  .kopf dt { line-height: 28px; margin-block-start: 0; }   /* --metadata-input-height */
  .kopf dd { min-height: 28px; }
}
.trennzeichen { color: var(--text-faint); padding-inline: .5ch; user-select: none; }

/* ═══ Themen-Marker: Obsidians Tag-Pille ═════════════════════════════
   Beim Hover aendert sich NUR die Flaeche (10 % -> 20 %). Farbe,
   Rahmen und Decoration bleiben – der ruhigste Hover, den es gibt.    */
.marke {
  display: inline-block;
  padding: .25em .65em;
  border: 0;
  border-radius: 2em;
  background-color: var(--pille);
  color: var(--akzent);
  font-size: var(--ui-klein);
  font-weight: inherit;
  line-height: 1;
  vertical-align: baseline;
  text-decoration: none;
}
/* Das "#" ist eine eigene Zutat und reines Dekor: der leere
   Alternativtext hinter dem Schraegstrich haelt es sichtbar und nimmt
   es aus dem zugaenglichen Namen – sonst hiesse die Pille "#Anfaenge".
   Das ist die CSS-Haelfte des aria-hidden, das jedes gezeichnete
   Zeichen in den Templates ohnehin traegt. Die erste Deklaration
   bleibt als Rueckfall stehen: ein Browser, der die Schreibweise nicht
   kennt, verwirft die ganze Deklaration – und dann waere das Zeichen
   nicht nur namenlos, sondern weg. */
.marke::before { content: "#"; content: "#" / ""; opacity: .55; }
@media (hover: hover) {
  .marke:hover { background-color: var(--pille-stark); color: var(--akzent); }
}

/* ═══ Fliesstext ═════════════════════════════════════════════════════ */
.text {
  margin-block-start: calc(var(--rhythmus) * 1.5);
  font-size: 1em;
  line-height: var(--zeilen-normal);
  color: var(--text-normal);
}
.text > :first-child { margin-block-start: 0; }
.text > :last-child  { margin-block-end: 0; }

/* Absatzabstand statt Einzug. Obsidian setzt hier 1rem; .85rem (13,6px)
   ist der kompaktere Satz, um den gebeten wurde – sichtbar dichter, ohne
   dass die Absatzgrenze verschwimmt.
   Die Zeilenhoehe bleibt bewusst bei 1.5: das Satzmass ist gerade von 67,8
   auf 75,3 Zeichen gewachsen, und eine laengere Zeile braucht MEHR
   Durchschuss, damit das Auge den Zeilenanfang wiederfindet, nicht
   weniger. Wer es trotzdem enger will, aendert --zeilen-normal. */
.text :is(p, ul, ol, dl, pre, blockquote, figure, .tabellenrahmen, .codehilite) {
  margin-block: .85rem;
}
.text :is(h2, h3, h4, h5, h6) { margin-block: .85rem; color: inherit; }

/* Der Obsidian-Trick: der grosse Abstand kommt NUR nach Fliesstext.
   Gestapelte Ueberschriften (h3 direkt auf h2) bleiben bei 1rem. */
.text :is(p, pre, ul, ol, dl, blockquote, figure, .tabellenrahmen, .codehilite)
    + :is(h2, h3, h4, h5, h6) {
  margin-block-start: 2rem;
}

.text h2 { font-size: 1.462em; font-weight: var(--gewicht-halbfett);
           line-height: 1.2; letter-spacing: -.011em; position: relative; }
.text h3 { font-size: 1.318em; font-weight: var(--gewicht-halbfett);
           line-height: 1.3; letter-spacing: -.008em; }
.text h4 { font-size: 1.188em; font-weight: var(--gewicht-halbfett);
           line-height: 1.4; letter-spacing: -.005em; }
.text h5 { font-size: 1.076em; font-weight: var(--gewicht-halbfett);
           line-height: 1.5; letter-spacing: -.002em; }
.text h6 { font-size: 1em;     font-weight: var(--gewicht-halbfett);
           line-height: 1.5; letter-spacing: 0; }
.text :is(h2, h3, h4, h5, h6) { text-wrap: balance; }

/* § als haengende Abschnittsmarke – nur wo der Rand dafuer da ist.
   2.5ch rechnet gegen die eigene font-size des ::before (15px), also
   22,5px, plus etwa 9px Glyphenbreite: gebraucht werden ~31,5px.
   Nachgerechnet mit dem neuen Satzmass (640px) und --rand-x: 32px:
   bei 48em/768px blieben nur (768-64-640)/2 = 32px frei – ein halber
   Pixel Reserve. Deshalb steht die Schwelle jetzt bei 52em/832px, dort
   sind es 64px. Darunter laeuft die Marke inline mit.

   Nur an h2, und dafuer ohne Sonderfall: die Pipeline verschiebt die
   Ueberschriften relativ, die oberste im Text benutzte Ebene wird h2.
   Wer normal "##" schreibt, bekommt die Marke also zu sehen, und h3
   ist dann wirklich die zweite Gliederungstiefe – die bleibt
   unmarkiert, sonst stuenden zwei Tiefen gleichwertig da.
   Leerer Alternativtext wie bei .marke::before, damit die Ueberschrift
   nicht "§Der zweite Satz" heisst.                                    */
.text h2::before {
  content: "\00A7";
  content: "\00A7" / "";
  color: var(--text-faint);
  font-size: 15px;
  font-weight: var(--gewicht-normal);
  letter-spacing: 0;
  user-select: none;
  margin-inline-end: .75ch;
}
@media (min-width: 52em) {
  .text h2::before {
    position: absolute;
    left: -2.5ch;
    top: .1em;
    margin-inline-end: 0;
  }
}

.text strong { font-weight: var(--gewicht-halbfett); color: inherit; }
.text em     { font-style: italic; color: inherit; }
.text mark   { background-color: rgba(255, 208, 0, .4); color: var(--text-normal); }
.text abbr[title] { text-decoration: underline dotted; cursor: help; }

/* ═══ Links ══════════════════════════════════════════════════════════
   Immer unterstrichen (nicht erst im Hover). Uebergang nur auf color,
   140ms – Flaechen werden nie animiert.                               */
.text a {
  color: var(--akzent);
  font-weight: var(--gewicht-normal);
  text-decoration-line: underline;
  text-decoration-thickness: auto;
  text-underline-offset: .15em;
  transition: color var(--tempo) ease-in-out;
}
@media (hover: hover) { .text a:hover { color: var(--akzent-hover); } }
/* Externe Links: Unicode statt Icon-Datei. ↗ ist im Subset vorhanden
   (U+2197, adv 1000 – nachgeprueft). Interne Links schreibt der Autor
   relativ (/essay/…), treffen diese Regel also nicht.                 */
.text a[href^="http://"]::after,
.text a[href^="https://"]::after {
  content: "\2197";
  content: "\2197" / "";                /* Dekor, nicht Teil des Namens */
  font-size: .75em;
  vertical-align: .1em;
  margin-inline-start: .15em;
  color: var(--text-faint);
  text-decoration: none;
}

/* ═══ Zitat: Kante statt Box ═════════════════════════════════════════ */
.text blockquote {
  margin-inline: 0;
  padding: 0 0 0 var(--rhythmus);                /* 24px */
  border-inline-start: 2px solid var(--akzent-flaeche);
  background: none;
  color: inherit;
  font-style: normal;                            /* nie kursiv */
}
.text blockquote > :first-child { margin-block-start: 0; }
.text blockquote > :last-child  { margin-block-end: 0; }

/* ═══ Listen: Einzug in ch, Marker zurueckgenommen ═══════════════════ */
.text :is(ul, ol) { padding-inline-start: 0; }
.text :is(ul ul, ul ol, ol ul, ol ol) { margin-block: 0; }
.text li { padding-block: .075em; margin-inline-start: 3ch; }
/* Der Punkt einer Aufzaehlung ist Ornament und darf blass sein. Die
   Ziffer einer Nummerierung ist es nicht – auf sie verweist man ("Punkt
   2"), sie muss also lesbar sein. --text-faint liegt bei 2,30:1. */
.text ul li::marker { color: var(--text-faint); }
.text ol li::marker { color: var(--text-muted); }
.text li > p:first-of-type { margin-block-start: 0; }
.text li > p:last-of-type  { margin-block-end: 0; }
.text dl dt { font-weight: var(--gewicht-halbfett); }
.text dl dd { margin-inline-start: 3ch; }

/* ═══ Code: sehr flache Toenung, kein Rahmen ═════════════════════════ */
.text code {
  font-family: var(--schrift-mono);
  font-size: .875em;
  line-height: 1.45;
  color: var(--text-normal);
  background-color: var(--flaeche-alt);
  border: 0;
  border-radius: var(--radius-s);
  padding: .15em .3em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.text :is(pre, .codehilite) {
  background-color: var(--flaeche-alt);
  border: 0;
  border-radius: var(--radius-s);
  overflow-x: auto;
}
.text pre {
  margin: 0;
  padding: var(--rhythmus) calc(var(--rhythmus) * .5);
  padding: 12px 16px;                            /* Obsidians --size-4-3 --size-4-4 */
  white-space: pre;                              /* kein Umbruch im Code */
  tab-size: 4;
}
.text .codehilite > pre { border-radius: inherit; }
.text pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: 1em;                                /* .875em kommt schon vom pre */
}
.text .codehilite { font-size: .875em; line-height: 1.45; }
.text .codehilite pre { font-family: var(--schrift-mono); }

/* ═══ Tabelle: reines 1px-Raster, kein Zebra, kein Row-Hover ═════════ */
.tabellenrahmen { overflow-x: auto; }            /* setzt die Pipeline, §11.3 */
.text table {
  border-collapse: collapse;
  margin: 0;
  line-height: var(--zeilen-eng);
  word-break: normal;
}
.text :is(th, td) {
  padding: 4px 8px;
  min-width: 6ch;
  border: 1px solid var(--rahmen);
  vertical-align: top;
  text-align: start;
  font-size: .875em;
}
.text th { font-weight: var(--gewicht-halbfett); color: var(--text-normal); }
/* Kein tbody tr:nth-child, kein tr:hover, kein Header-Fond. */

/* ═══ Trenner, Bilder, Figuren ═══════════════════════════════════════ */
.text hr {
  border: 0;
  border-block-start: 2px solid var(--rahmen);
  margin-block: calc(var(--rhythmus) * 1.5);
}
.text img {
  max-width: 100%;
  height: auto;
  display: block;
  /* kein Radius, kein Schatten, keine Border */
}
.text figure { margin-inline: 0; }
.text figcaption {
  margin-block-start: calc(var(--rhythmus) * .25);
  font-size: var(--ui-klein);
  line-height: 1.4;
  color: var(--text-muted);
}

/* ═══ Fussnoten ══════════════════════════════════════════════════════
   Markdown liefert: <sup id="fnref-1"><a class="footnote-ref">1</a></sup>
   und <div class="footnote"><hr><ol><li id="fn-1">…<a class="footnote-backref">↩</a>
   Der eingebaute <hr> wird ersetzt durch eine 1px-Kante am Block.     */
.text sup { line-height: 0; }
.text .footnote-ref { text-decoration: none; padding-inline: .15em; }
@media (hover: hover) { .text .footnote-ref:hover { text-decoration: underline; } }
.text .footnote {
  margin-block-start: calc(var(--rhythmus) * 2);
  padding-block-start: var(--rhythmus);
  border-block-start: 1px solid var(--rahmen);
  font-size: var(--ui-klein);
  line-height: 1.45;
  color: var(--text-dim);
}
.text .footnote > hr { display: none; }
.text .footnote ol { margin-block: 0; }
.text .footnote li { margin-inline-start: 3ch; }
.text .footnote p  { margin-block: .35em; }
.text .footnote-backref { text-decoration: none; padding-inline: .3em; }

/* ═══ Abschlussmarke ═════════════════════════════════════════════════ */
.schluss {
  margin: calc(var(--rhythmus) * 3) 0 0;
  text-align: center;
  font-size: 20px;
  line-height: 1;
  color: var(--text-faint);
  user-select: none;
}

/* ═══ Fassungsnotiz: Apparat, nicht Fließtext ════════════════════════
   --text-dim (5,76:1) ist die Stufe für Weiterverweis und Fußnoten —
   dieselbe wie der Fußnotenapparat, und das ist genau der Rang: eine
   redaktionelle Anmerkung, die zur Kenntnis nimmt, wer will. Kein
   Rahmen, keine Fläche: sie steht im Satz und nicht in einem Kasten. */
.anmerkung {
  margin: calc(var(--rhythmus) * 1.5) 0 0;
  font-size: var(--ui-klein);
  line-height: 1.4;
  color: var(--text-dim);
  text-wrap: pretty;
}
.anmerkung__marke { color: var(--text-faint); padding-inline-end: .5ch; }

/* ═══ Pygments ═══════════════════════════════════════════════════════
   Kommentare auf --text-dim (4,74:1 / 5,52:1 auf der Code-Flaeche),
   NICHT auf faint – sie tragen Information.                           */
.codehilite :is(.c, .c1, .cm, .cs, .ch, .cp, .cpf, .sd) { color: var(--text-dim); font-style: italic; }
.codehilite :is(.k, .kc, .kd, .kn, .kp, .kr, .kt, .ow)  { color: var(--syn-pink); }
.codehilite :is(.s, .s1, .s2, .sa, .sb, .sc, .sh, .sr, .ss, .sx, .dl) { color: var(--syn-gruen); }
.codehilite :is(.na, .py, .nv, .vc, .vg, .vi, .vm, .nt, .se, .si)     { color: var(--syn-cyan); }
.codehilite :is(.nf, .fm, .nd, .nc, .ne)                { color: var(--syn-gelb); }
.codehilite :is(.m, .mb, .mf, .mh, .mi, .mo, .il, .no, .bp) { color: var(--syn-violett); }
.codehilite .nb                                         { color: var(--syn-orange); }
.codehilite .o                                          { color: var(--syn-rot); }
.codehilite :is(.p, .pm, .go)                           { color: var(--text-muted); }
.codehilite :is(.n, .nx, .nl, .nn)                      { color: var(--text-normal); }
.codehilite .err  { color: var(--syn-rot); text-decoration: underline; }
.codehilite .w    { color: inherit; }                   /* Whitespace: nichts */
/* Diff */
.codehilite .gd   { color: var(--syn-rot); }
.codehilite .gi   { color: var(--syn-gruen); }
.codehilite :is(.gh, .gu) { color: var(--akzent); }
.codehilite .ge   { font-style: italic; }
.codehilite .gs   { font-weight: var(--gewicht-halbfett); }
.codehilite .gp   { color: var(--text-dim); }
.codehilite .gt   { color: var(--syn-rot); }
/* Pygments setzt ein leeres <span> vor den Code – harmloses Artefakt. */
.codehilite pre > span:empty { display: none; }

/* ═══ Weiterverweis am Essay-Ende ════════════════════════════════════ */
.weiter {
  margin-block-start: calc(var(--rhythmus) * 2);
  display: flex;
  flex-direction: column;
  gap: calc(var(--rhythmus) * .25);
  font-size: var(--ui-klein);
  line-height: var(--zeilen-eng);
  color: var(--text-dim);
}
.weiter a { color: inherit; text-decoration: none; }
.weiter__pfeil { padding-inline-end: .75ch; color: var(--text-faint); user-select: none; }
@media (hover: hover) { .weiter a:hover { color: var(--text-normal); } }

/* ═══ Trenner vor der Fusszeile ══════════════════════════════════════ */
.trenner {
  border: 0;
  border-block-start: 1px solid var(--rahmen);
  margin: calc(var(--rhythmus) * 2) 0 0;
}

/* ═══ Fusszeile ══════════════════════════════════════════════════════ */
.leiste {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-luecke);
  margin-block-start: var(--rhythmus);
  font-size: var(--ui-winzig);
  line-height: var(--zeilen-eng);
  color: var(--text-muted);
}
.leiste a { color: inherit; text-decoration: none; }
@media (hover: hover) { .leiste a:hover { color: var(--text-normal); } }
.leiste__quelle { display: flex; align-items: baseline; flex-wrap: wrap; }

/* Der Verwaltungszugang: getarnt, weil erwartbar – nicht, weil blass.
   --text-muted = 6,69:1 / 8,13:1. Trefferflaeche 24px nach SC 2.5.8,
   erzeugt durch padding + negatives margin, also ohne Layoutwirkung.  */
.leiste__blatt {
  display: inline-block;
  padding: .5rem;
  margin: -.5rem;
  color: var(--text-muted);
  letter-spacing: .08em;
  font-variant-numeric: lining-nums tabular-nums;
  text-decoration: none;
}
@media (hover: hover) { .leiste__blatt:hover { color: var(--text-normal); } }

/* ═══ Leerzustand, 404-Satz, 404-Nummer ══════════════════════════════ */
.hinweis { margin: var(--rhythmus) 0 0; color: var(--text-muted); text-wrap: pretty; }
.leer__nr {
  display: block;
  margin-block-end: calc(var(--rhythmus) * .25);
  font-size: var(--ui-klein);
  line-height: var(--zeilen-eng);
  letter-spacing: .08em;
  color: var(--text-muted);
  font-variant-numeric: lining-nums tabular-nums;
}

/* ═══ Fokusring: neutral grau, nie Akzent ════════════════════════════
   Obsidians base-40 (#bdbdbd) erreicht nur 1,88:1 und verfehlt
   SC 1.4.11. base-60 liefert 4,95:1 / 5,98:1 und bleibt unbunt,
   konkurriert also nicht mit Links und Pillen.                        */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 2px;
  border-radius: 2px;
}
.marke:focus-visible        { border-radius: 2em; }
.register__zeile:focus-visible { border-radius: var(--radius-s); }
:focus:not(:focus-visible)  { outline: none; }

/* ═══ Scrollbalken: 6px-Faden in 12px-Spur, Spur transparent ═════════ */
::-webkit-scrollbar { width: 12px; height: 12px; background-color: transparent; }
::-webkit-scrollbar-track { background-color: transparent; }
::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, #ffffff 10%, transparent);
  border-radius: 12px;
  background-clip: padding-box;
  border: 3px solid transparent;
  border-width: 3px 3px 3px 2px;
  min-height: 45px;
}
::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active {
  background-color: color-mix(in srgb, #ffffff 20%, transparent);
}
::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, #ffffff 10%, transparent) transparent;
  }
}

/* ═══ Breakpoints ════════════════════════════════════════════════════ */
@media (min-width: 40em) {
  :root { --rand-x: 24px; }
  /* Kein eigener Grad ab 40em mehr: der Fliesstext bleibt überall 16px.
     Zusammen mit --satzmass: 40em ist die Spalte damit in Pixeln breiter
     als vorher (640 statt 612) und der Text gleichzeitig kleiner. */
  .blatt { padding-block-start: calc(var(--rhythmus) * 2); }
}
@media (min-width: 48em) { :root { --rand-x: 32px; } }

/* ═══ Bewegung: es gibt genau einen Uebergang (color, 140ms) ══════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ═══ Druck ══════════════════════════════════════════════════════════ */
@media print {
  .leiste__blatt, .weiter, .pfad, .sprung { display: none; }
  :root {
    /* Vollständig, nicht nur die Textstufen: die Vorgabe ist jetzt
       dunkel, also muss hier jede Farbe umgedreht werden, die auf Papier
       sonst als schwarze Fläche herauskäme — auch die Zitatkante und die
       drei Akzentmischungen. */
    --grund: #fff; --text-normal: #000; --text-muted: #333;
    --text-dim: #444; --text-faint: #777;
    --akzent: #000; --akzent-hover: #000; --rahmen: #999;
    --flaeche-alt: #f2f2f2; --leitlinie: #999;
    --akzent-flaeche: #000;
    --flaeche-hover: transparent;
    --pille: transparent; --pille-stark: transparent; --markierung: transparent;
  }
  body { font-size: 11pt; }
  .spalte { max-width: none; padding-block-end: 0; }
  .text a::after { content: " (" attr(href) ")"; font-size: .8em; color: #444; }
  .text :is(h2, h3, h4) { break-after: avoid; }
  .text :is(pre, blockquote, table, figure) { break-inside: avoid; }
}