/* Bomert Name Site — Erscheinungsbild des Umbaus.
   Quelle: Referenzseite https://bomert.name/TanteElsa/ (Chronik Elsa Nagel);
   Palette, Schriftstapel und Bildsprache gelesen aus RECON/ref-tanteelsa/chronik.css.
   Rohwerte stehen ausschliesslich in :root. Der Akzent tritt im Ruhezustand
   genau einmal je Bildschirm auf (Marke des aktuellen Ortes im Register).

   Aufbau: 1 Grundlagen · 2 Kopfzeile · 3 Brotkrumen · 4 Raster · 5 Register und Umfeld
           6 Inhalt · 7 Bildtafeln · 8 Familienvarianten · 9 Blaetterleiste
           10 Fusszeile · 11 Mobil · 12 Zustande · 13 Druck */

/* ─── 1 · Grundlagen ───────────────────────────────────────────────────── */
:root {
  --bg:      oklch(98% 0.004 95);
  --surface: oklch(100% 0.002 95);
  --fg:      oklch(20% 0.018 70);
  --muted:   oklch(48% 0.012 70);
  --border:  oklch(90% 0.006 95);
  --accent:  oklch(52% 0.10 28);

  --accent-soft: color-mix(in oklch, var(--accent) 12%, transparent);
  --fg-soft:     color-mix(in oklch, var(--fg) 5%, transparent);
  --fg-line:     color-mix(in oklch, var(--fg) 32%, transparent);

  --font-display: 'Iowan Old Style', 'Charter', Georgia, 'Times New Roman', serif;
  --font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, 'Courier New', monospace;

  --fs-titel:  clamp(32px, 3.1vw, 58px);
  --fs-gruppe: 22px;
  /* Die Grundschrift waechst mit der Breite. Die Zeilenlaenge haelt das Raster
     (Register + Text + Umfeld), nicht ein Rahmen - gemessen sind es 65 Zeichen
     bei 1250 px und rund 104 Zeichen bei 2560 px. */
  --fs-text:   clamp(16.5px, 0.45vw + 10px, 21.5px);
  --fs-klein:  15px;
  --fs-meta:   13px;

  --gap-xs: 8px;
  --gap-sm: 12px;
  --gap-md: 20px;
  --gap-lg: 32px;
  --gap-xl: 56px;
  --gap-2xl: 88px;

  /* Die Seite fuellt das Fenster vollstaendig aus - es gibt keine Obergrenze
     mehr. Die Zeilenlaenge haelt nicht ein Rahmen, sondern das Raster:
     Register links, Text in der Mitte, Umfeld rechts. */
  --wrap: 100%;
  --gutter: clamp(20px, 2.2vw, 48px);
  --kopf: 65px;
  /* Das Register traegt fuenf Ebenen - es waechst mit dem Fenster mit. */
  --register: clamp(224px, 13vw, 400px);
  /* Lesemass der Textspalte: rund 90 Zeichen. Was daneben uebrig bleibt, geht
     an die Umfeldspalte - die Breite geht an Inhalt, nicht an leere Flaeche. */
  --text-max: clamp(460px, 46vw, 1000px);
  /* Der Absatz fuellt die Textspalte; die Zeilenlaenge haelt die Spalte
     selbst (--text-max), nicht eine zweite Obergrenze am Absatz. */
  --mass: 100%;

  /* Trefferflaeche: auf Zeigergeraeten 24 px (WCAG 2.5.8), auf Fingergeraeten
     44 px (WCAG 2.5.5). Verweise im Fliesstext sind ausgenommen - sie stehen
     in der Zeile und lassen sich nicht vergroessern. */
  --treffer: 24px;

  /* Haengender Einzug der Personenzeilen auf Linien- und Stammbaumseiten.
     In px, damit Generationenband und Textzeile dieselbe Flucht haben. */
  --zug: 43px;

  --radius: 0px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-text);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0; text-wrap: pretty; }
/* Personeneintraege der Stammbaumseiten sind Listenpunkte, keine Absaetze:
   ohne pretty enden sie mit Fragmenten wie "Jahren)". Nur die Umbruchregel
   setzen, kein margin - das wuerde das Register verschieben. */
li, dd, dt, td { text-wrap: pretty; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
ul, dl, dd { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* Bedienelemente halten die Mindesthoehe aus --treffer, ohne dass die
   Beschriftung umbrechen muss: der Text sitzt mittig in der Flaeche. */
.hauptnav a, .krumen a, .baum a, .fusszeile a, .blaetterleiste a, .register-sprung {
  min-height: var(--treffer);
  display: inline-flex; align-items: center;
  max-width: 100%;
}
.marke { min-height: var(--treffer); justify-content: center; }
.register-box > summary { min-height: var(--treffer); }
/* Die Blaetterleiste stellt ihre Beschriftung ueber den Seitennamen -
   deshalb hier Spalte statt Zeile. */
.blaetterleiste a { display: flex; flex-direction: column; justify-content: center; }
.blaetterleiste .weiter { align-items: flex-end; }

.sprungmarke {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--fg); color: var(--bg);
  padding: 12px 18px; font-size: var(--fs-klein);
}
.sprungmarke:focus { left: var(--gap-md); top: var(--gap-md); }

/* ─── 2 · Kopfzeile ────────────────────────────────────────────────────── */
.kopfzeile {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in oklch, var(--bg) 94%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.kopfzeile-innen {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap-sm) var(--gap-md); flex-wrap: wrap; padding-block: 12px;
}
.marke {
  font-family: var(--font-display); font-size: 19px; font-weight: 600;
  letter-spacing: -0.01em; line-height: 1.2;
  display: flex; flex-direction: column; gap: 1px;
}
.marke span {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 400;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted);
  transition: color 0.15s ease;
}
.marke:hover span { color: var(--fg); }
.hauptnav { display: flex; flex-wrap: wrap; gap: 2px var(--gap-md); }
.hauptnav a {
  font-size: 14px; color: var(--muted); padding: 5px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.hauptnav a:hover { color: var(--fg); border-bottom-color: var(--fg-line); }
.hauptnav a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--fg); }
.hauptnav a.ist-bereich { color: var(--fg); }

/* ─── 3 · Brotkrumen ───────────────────────────────────────────────────── */
.krumen {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px;
  padding-top: var(--gap-md);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.03em;
  color: var(--muted);
}
.krumen a { border-bottom: 1px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; }
.krumen a:hover { color: var(--fg); border-bottom-color: var(--fg-line); }
.krumen [aria-current="page"] { color: var(--fg); }
.krumen .trenner { color: var(--border); }
.krumen-auslassung { display: none; }

/* Sprung zum Register. Am Zeigergeraet steht das Register als Spalte links und
   ist immer sichtbar; auf dem Telefon liegt es hinter dem Inhalt - dort holt
   dieser Verweis es nach oben. */
.register-sprung {
  display: none;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--border);
  transition: color 0.15s ease, border-color 0.15s ease;
}

/* ─── 4 · Raster ───────────────────────────────────────────────────────── */
.raster {
  display: grid;
  grid-template-columns: var(--register) minmax(0, 1fr);
  gap: clamp(28px, 3.2vw, 72px);
  align-items: start;
  margin-top: var(--gap-lg);
}
.spalte { min-width: 0; }

/* Auf breiten Schirmen traegt eine dritte Spalte das Umfeld. Erst damit fuellt
   die Seite die Fensterbreite wirklich aus, ohne dass die Textzeile laenger
   wird: die Textspur ist auf das Lesemass gedeckelt (--text-max), die
   Umfeldspur nimmt den Rest und legt ihre Bloecke nebeneinander. */
@media (min-width: 1100px) {
  .raster { grid-template-columns: var(--register) minmax(0, var(--text-max)) minmax(0, 1fr); }
  /* Zwei Klassen, damit diese Regel die spaetere Grundregel (display: none)
     sicher ueberstimmt - bei gleicher Spezifitaet gewaenne sonst die spaetere. */
  .raster > .umfeld { display: grid; position: sticky; top: calc(var(--kopf) + var(--gap-md)); }
}

/* ─── 5 · Register ─────────────────────────────────────────────────────── */
.verzeichnis { font-size: 14.5px; }
.register-box { border-top: 1px solid var(--fg); padding-top: var(--gap-sm); }
.register-box > summary {
  display: none;
  align-items: center; justify-content: space-between; gap: 10px;
  min-height: 44px; cursor: pointer; list-style: none;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg);
}
.register-box > summary::-webkit-details-marker { display: none; }
.register-box > summary span {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.04em; text-transform: none; color: var(--muted);
}
.register-box > summary::after { content: '+'; font-size: 15px; color: var(--muted); }
.register-box[open] > summary::after { content: '–'; }

.baum, .baum ul { list-style: none; margin: 0; padding: 0; }
.baum ul { margin-left: 5px; padding-left: 13px; border-left: 1px solid var(--border); }
.baum > li + li { border-top: 1px solid var(--border); margin-top: var(--gap-sm); padding-top: var(--gap-sm); }
.baum li { padding: 2px 0; }
.baum .zeile { display: flex; align-items: baseline; gap: 7px; }
.baum .zeile::before {
  content: ''; flex: 0 0 5px; width: 5px; height: 5px;
  background: transparent; transform: translateY(-1px);
}
.baum li.ist-hier > .zeile::before { background: var(--accent); }
.baum a {
  color: var(--muted); line-height: 1.35; padding: 1px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.baum a:hover { color: var(--fg); border-bottom-color: var(--fg-line); }
.baum a[aria-current="page"] { color: var(--fg); font-weight: 600; }
.baum > li > .zeile > a { color: var(--fg); font-size: 15px; }
.baum ul .zweig > .zeile > a {
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.baum .zahl { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }

.bestand { margin-top: var(--gap-lg); border-top: 1px solid var(--fg); padding-top: 10px; }
.bestand > div {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 12px;
  padding: 7px 0; border-bottom: 1px solid var(--border);
}
.bestand dt {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted); padding-top: 2px; white-space: nowrap;
}
.bestand dd { font-size: 14px; }

/* Umfeldspalte: Pfad nach oben, Nachbarseiten, direkt untergeordnete Seiten.
   Sie traegt die Fensterbreite mit (ab 1100 px, siehe Raster) und ist auf
   schmalen Schirmen ausgeblendet - dort fuehrt der Inhalt, das Register steht
   hinter ihm. Ihre Bloecke legen sich nebeneinander, sobald die Spalte breit
   wird: so fuellt die Seite die Breite mit Inhalt statt mit Leerflaeche. */
.umfeld {
  display: none;
  min-width: 0;
  font-size: 14px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--gap-lg);
  align-content: start;
}
/* Jeder Block traegt seine eigene Kopfregel - in einer Reihe stehend braucht
   keiner mehr Abstand nach oben. */
.umfeld-block {
  border-top: 1px solid var(--border);
  padding-top: var(--gap-sm);
}
.umfeld h2 {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 10px;
}
/* Die Listen der Umfeldspalte legen sich in Spalten: so bleibt der Block
   innen gefuellt, wenn er die Breite traegt, statt sie leer zu lassen. */
.umfeld ul { list-style: none; padding: 0; columns: auto 240px; column-gap: var(--gap-lg); }
.umfeld li { break-inside: avoid; }
.umfeld li + li { margin-top: 1px; }
.umfeld a {
  color: var(--muted); border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.umfeld a:hover { color: var(--fg); border-bottom-color: var(--fg-line); }
.umfeld [aria-current="page"] { color: var(--fg); font-weight: 600; }

/* ─── 6 · Inhalt ───────────────────────────────────────────────────────── */
.inhalt { min-width: 0; hyphens: auto; overflow-wrap: break-word; }
.inhalt::after { content: ''; display: block; clear: both; }

.inhalt p { max-width: var(--mass); margin: 0 0 var(--gap-md); }
.spalte > h1,
.inhalt > h1:first-of-type,
.inhalt > h2:first-of-type,
.inhalt > h3:first-of-type {
  font-family: var(--font-display); font-size: var(--fs-titel);
  font-weight: 600; line-height: 1.1; letter-spacing: -0.02em;
  margin: 0 0 var(--gap-md);
}
.inhalt h3 {
  font-size: 20px; font-weight: 600; line-height: 1.35; letter-spacing: -0.005em;
  margin: var(--gap-lg) 0 var(--gap-sm);
}
.inhalt strong { font-weight: 600; }
.inhalt a {
  color: var(--fg); border-bottom: 1px solid var(--fg-line);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.inhalt a:hover { border-bottom-color: var(--fg); }

.inhalt ul { list-style: none; padding: 0; max-width: var(--mass); margin: 0 0 var(--gap-md); }
.inhalt li { padding: 9px 0; border-top: 1px solid var(--border); }
.inhalt li:last-child { border-bottom: 1px solid var(--border); }
.inhalt li:not(:has(a)) { color: var(--muted); }

/* ─── 7 · Bildtafeln ───────────────────────────────────────────────────── */
.image-content { margin: var(--gap-lg) 0; }
.image-content img { background: var(--surface); border: 1px solid var(--border); }
.image-content .caption {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em;
  line-height: 1.5; color: var(--muted); margin-top: 10px; max-width: 56ch;
}
.image-content.center img { margin-inline: auto; }
.image-content.center .caption { text-align: center; margin-inline: auto; }
.image-content.center.medium { max-width: 560px; margin-inline: auto; }

/* Mehrbildraster der Verbreitungsseite: die vier Bootstrap-Spalten des
   Originals werden hier zu einem Raster, ohne das Markup anzufassen. */
.inhalt .image-content.col-xs-3 {
  float: left; width: 25%; padding-right: var(--gap-md);
  margin: var(--gap-md) 0 var(--gap-lg);
}
.inhalt .image-content.col-xs-3 img { width: 100%; }
.inhalt .image-content.col-xs-3 .caption { font-size: 11px; line-height: 1.45; }

/* Seitenverhaeltnisse der vorhandenen Bilder, damit beim Laden nichts springt */
.inhalt img[src$="See-Heinr-600.jpg"] { aspect-ratio: 600 / 457; }
.inhalt img[src$="fam_bo1928.jpg"]    { aspect-ratio: 756 / 547; }
.inhalt img[src$="PLZ-200.jpg"]       { aspect-ratio: 200 / 274; }

/* ─── 8 · Familienvarianten ────────────────────────────────────────────── */
/* Linien- und Stammbaumseiten: Eintraege mit haengendem Nummerngitter,
   Ziffern auf fester Breite, damit Daten untereinander stehen. */
.seite--linie .inhalt,
.seite--stammbaum .inhalt { font-variant-numeric: tabular-nums; hyphens: auto; }
/* Der Einzug gilt nur fuer Personen- und Linienseiten; das Mass ist dasselbe
   wie im uebrigen Text, damit alle Spalten auf einer Flucht enden. */
.seite--linie .inhalt p,
.seite--stammbaum .inhalt p { max-width: var(--mass); padding-left: var(--zug); text-indent: calc(var(--zug) * -1); }

/* Stammbaum: jedes h3 ist ein Generationenband, nicht eine Zwischenueberschrift.
   Die Orts- und Linienseiten kennzeichnen ihre Generationen dagegen nur im Text
   ("2. Generation"); dort traegt die Stilmarke .band dieselbe Form. */
.seite--stammbaum .inhalt h3,
.seite--linie .inhalt .band,
.seite--stammbaum .inhalt .band {
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted);
  border-top: 1px solid var(--fg); padding-top: 12px;
  margin: var(--gap-xl) 0 var(--gap-md);
}
/* Das Band in einem Absatz beginnt auf der Flucht der ersten Zeile. Die
   Leerzeilen der Vorlage unmittelbar vor und nach der Generationenmarke fallen
   weg - sonst klafft zwischen Band und Eintraegen eine Luecke. (Die Vorlage
   setzt vor der Marke bis zu drei, nach ihr bis zu zwei <br />.) */
.seite--linie .inhalt .band,
.seite--stammbaum .inhalt .band {
  display: block; text-indent: 0; margin-inline-start: calc(var(--zug) * -1);
}
.seite--linie .inhalt .band + br,
.seite--linie .inhalt .band + br + br,
.seite--stammbaum .inhalt .band + br,
.seite--stammbaum .inhalt .band + br + br { display: none; }
.seite--linie .inhalt p > br:has(+ .band),
.seite--linie .inhalt p > br:has(+ br + .band),
.seite--linie .inhalt p > br:has(+ br + br + .band),
.seite--stammbaum .inhalt p > br:has(+ .band),
.seite--stammbaum .inhalt p > br:has(+ br + .band),
.seite--stammbaum .inhalt p > br:has(+ br + br + .band) { display: none; }
/* Unter dem Seitentitel braucht die erste Generation keinen Trennstrich */
.seite--linie .inhalt > p:first-of-type .band,
.seite--stammbaum .inhalt > p:first-of-type .band {
  margin-top: 0; border-top: 0; padding-top: 0;
}

/* Ahnentafel: ein einziger Absatz in der Quelle — also Urkundensatz,
   keine vorgetaeuschte Kartenstruktur. */
.seite--ahnentafel .inhalt p { max-width: var(--mass); line-height: 1.78; }

/* Startseite: die Datumszeile des Originals wird zur Metazeile */
.seite--start .inhalt > p:first-of-type {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: 0.05em; color: var(--muted);
}

/* ─── 9 · Blaetterleiste ───────────────────────────────────────────────── */
.blaetterleiste {
  display: flex; justify-content: space-between; gap: var(--gap-md);
  margin-top: var(--gap-2xl); border-top: 1px solid var(--border); padding-top: var(--gap-md);
}
.blaetterleiste a { font-size: var(--fs-klein); color: var(--fg); border-bottom: 1px solid var(--fg-line); padding-bottom: 2px; }
.blaetterleiste a:hover { border-bottom-color: var(--fg); }
.blaetterleiste a span {
  display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.blaetterleiste .weiter { text-align: right; }
.blaetterleiste .platzhalter { visibility: hidden; }

/* ─── 10 · Fusszeile ───────────────────────────────────────────────────── */
.fusszeile {
  margin-top: var(--gap-2xl); border-top: 1px solid var(--border);
  padding-block: var(--gap-xl); color: var(--muted); font-size: var(--fs-meta);
}
/* Fusszeile: die Listen bleiben schmal und laufen auf die beiden Raender,
   statt sich ueber die ganze Breite zu verteilen - sonst stuenden fuenf
   Menuepunkte auf 1600 px. */
.fuss-spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 320px));
  justify-content: space-between;
  gap: clamp(32px, 6vw, 88px);
}
.fusszeile h2 {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 10px;
}
.fusszeile ul { list-style: none; padding: 0; }
.fusszeile li { margin-bottom: 6px; }
.fusszeile a { color: var(--fg); border-bottom: 1px solid var(--border); transition: border-color 0.15s ease; }
.fusszeile a:hover { border-bottom-color: var(--fg); }
.kolophon {
  display: flex; justify-content: space-between; gap: var(--gap-sm) var(--gap-md); flex-wrap: wrap;
  border-top: 1px solid var(--border); margin-top: var(--gap-lg); padding-top: var(--gap-md);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em;
}

/* ─── 11 · Mobil ───────────────────────────────────────────────────────── */
@media (max-width: 920px) {
  :root { --gutter: 20px; --fs-titel: clamp(28px, 7vw, 38px); --mass: 100%; --treffer: 44px; }
  .kopfzeile { position: static; backdrop-filter: none; background: var(--bg); }
  .raster { grid-template-columns: minmax(0, 1fr); gap: var(--gap-lg); }
  .spalte { order: 1; }
  .verzeichnis { order: 2; margin-top: var(--gap-md); }
  .register-box > summary { display: flex; }
  .register-sprung { display: inline-flex; margin-bottom: var(--gap-md); }
  .register-sprung:hover { color: var(--fg); border-bottom-color: var(--fg); }
  .verzeichnis { scroll-margin-top: var(--gap-md); }
  .fuss-spalten { grid-template-columns: 1fr; }
  .blaetterleiste { flex-direction: column; gap: var(--gap-md); }
  .blaetterleiste .weiter { text-align: left; align-items: flex-start; }
  .inhalt .image-content.col-xs-3 { width: 50%; }
  .inhalt .image-content.col-xs-3:nth-of-type(odd) { clear: left; }
  /* Trefferflaechen auf Fingergroesse (--treffer traegt die Mindesthoehe) */
  .baum a { padding: 6px 0; }
  .inhalt li > a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 560px) {
  /* Krumen auf dem Telefon: nur die letzten zwei Ebenen plus Auslassung. */
  .krumen-mobil-aus { display: none; }
  .krumen-auslassung { display: inline; }
  .inhalt .image-content.col-xs-3 { float: none; width: 100%; padding-right: 0; }
  .hauptnav a { font-size: 13.5px; }
  .baum ul { padding-left: 11px; }
}
@media (min-width: 921px) {
  .verzeichnis {
    position: sticky; top: calc(var(--kopf) + var(--gap-md));
    scroll-margin-top: calc(var(--kopf) + var(--gap-md));
  }
}
@media (min-width: 921px) and (max-height: 1000px) {
  .verzeichnis,
  .umfeld { max-height: calc(100vh - var(--kopf) - var(--gap-xl)); overflow-y: auto; overscroll-behavior: contain; }
}

/* ─── 12 · Zustaende ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ─── 13 · Druck ───────────────────────────────────────────────────────── */
/* Papier ist kein Bildschirm. Ohne eigene Regeln druckte die Seite bislang
   den halben Rahmen mit: Kopfzeile, fuenf Bereichsverweise, den kompletten
   Menuebaum (auf der Waltrop-Seite 1602 px, rund anderthalb Seiten), den
   Register-Sprung, die Blaetterleiste und die Fusszeile — und weil eine
   A4-Seite nur rund 690 px breit ist, griff dabei zusaetzlich die
   Mobil-Regel und setzte 44-px-Trefferflaechen. Auf dem Papier bleibt jetzt
   der Inhalt plus der Pfad (Brotkrumen) als Kopfzeile der Seite; die
   Fusszeile wuerde ohne Seitenzahlwiederholung nur einmal erscheinen und
   faellt deshalb weg. */
@page { margin: 16mm 14mm; }

@media print {
  :root {
    /* Auf Papier keine Flaechenfarben: Schwarz auf Weiss, Grautoene so dunkel,
       dass sie den Kontrast von 4,5:1 sicher halten. Der Akzent druckt
       dunkler, weil Rot auf Papier weniger traegt als auf dem Schirm. */
    --bg:      oklch(100% 0 0);
    --surface: oklch(100% 0 0);
    --fg:      oklch(0% 0 0);
    --muted:   oklch(35% 0 0);
    --border:  oklch(78% 0 0);
    --accent:  oklch(40% 0.10 28);
    /* Drucktext mindestens 12 pt — die Bildschirmgroessen (13 px = 9,8 pt)
       waeren auf Papier zu klein. */
    --fs-text:   12pt;
    --fs-klein:  12pt;
    --fs-meta:   12pt;
    --fs-gruppe: 15pt;
    --fs-titel:  20pt;
    /* Trefferflaechen und klebende Bedienelemente sind Bildschirmsachen. */
    --treffer: 0px;
    --gap-xl: 26px;
    --gap-2xl: 34px;
  }

  html { scroll-behavior: auto; }
  body { background: var(--bg); color: var(--fg); line-height: 1.5; }
  .wrap { max-width: none; padding-inline: 0; }

  /* Rahmen weg: alles ausser dem Pfad ist Navigation. */
  .kopfzeile,
  .verzeichnis,
  .umfeld,
  .register-sprung,
  .blaetterleiste,
  .fusszeile,
  .sprungmarke { display: none !important; }
  .krumen { padding-top: 0; padding-bottom: 10px; }
  /* Der Pfad ist die Kopfzeile des Blattes — hier alle Ebenen zeigen. */
  .krumen-mobil-aus { display: inline !important; }
  .krumen-auslassung { display: none !important; }

  .raster { display: block; }
  .spalte { order: 0; }
  .inhalt li > a { display: inline; min-height: 0; }

  /* Verweise im Inhalt muessen auf Papier erkennbar sein: kein Zeiger, der
     ueber sie faehrt. Deshalb Unterstrich, und bei Zielen ausserhalb der
     Seite die Adresse ausgeschrieben. */
  .inhalt a { text-decoration: underline; border-bottom: 0; text-underline-offset: 2px; }
  .inhalt a[href^="http"]::after { content: " (" attr(href) ")"; word-break: break-all; }

  /* Bogenbau: nichts zerreissen, was zusammengehoert. */
  .inhalt h1, .inhalt h2, .inhalt h3 { break-after: avoid; break-inside: avoid; }
  .inhalt .band { break-after: avoid; break-inside: avoid; }
  .inhalt p { orphans: 2; widows: 2; break-inside: avoid; }
  .inhalt li, .inhalt .image-content, .inhalt .image-content .caption { break-inside: avoid; }
  .inhalt img { max-height: 235mm; width: auto; }
  .inhalt .image-content.col-xs-3 { break-inside: avoid; }

  /* Kleinschrift des Bildschirms auf Druckgroesse bringen: Pfad 12 px, Bild-
     unterschriften 15 bzw. 11 px, Generationenbaender und -ueberschriften
     12,5 px — das sind 8,3 bis 9,4 pt und damit unter der Druckgrenze. */
  .krumen,
  .image-content .caption,
  .inhalt .image-content.col-xs-3 .caption,
  .seite--linie .inhalt .band,
  .seite--stammbaum .inhalt .band,
  .seite--stammbaum .inhalt h3 { font-size: 12pt; }
}