@charset "UTF-8";
@import url("../fonts/fonts.css");

/* ============================================================
   PROGENIA AHNENFORSCHUNG
   ------------------------------------------------------------
   Aufbau
     01  Farb- und Maßtokens
     02  Grundumkehrung Dunkel/Hell (CI-Regel)
     03  Reset und Grundsatz
     04  Typografie
     05  Layout: Bahn, Raster, Registerspalte
     06  Kopf und Navigation
     07  Schaltflächen und Verweise
     08  Bausteine: Signatur, Zierlinie, Marke, Archivbild
     09  Hero und Ahnentafel
     10  Ledger-Tabellen und Preisdarstellung
     11  Zeitstrahl, Definitionslisten, Akkordeon
     12  Lesestrecke (Wissensartikel, Rechtstexte)
     13  Formulare
     14  Fußbereich
     15  Bewegung
   ============================================================ */


/* 01 — Farb- und Maßtokens ================================== */

:root {
  /* CI, unveränderlich */
  --edelblau:        #1A1B38;
  --ahnengold:       #AD7D3D;

  /* Die Website läuft durchgehend dunkel. Die Abstufungen liegen eng
     beieinander — Tiefe entsteht durch Ton, Linie und Licht, nicht
     durch Helligkeitssprünge. Das Schriftweiß ist warm gehalten
     (leicht ins Elfenbein), kühles Blauweiß wirkt technisch. */
  --grund-tief:      #0C0D1C;   /* tiefste Fläche, Footer, Panels   */
  --grund:           #14152C;   /* Standardgrund der Abschnitte     */
  --grund-lese:      #191A34;   /* Lesestrecken, minimal angehoben  */
  --grund-hoch:      #21234A;   /* erhöhte Flächen, Karten          */
  --elfenbein:       #E8E6E1;   /* Fließtext           — 14,5:1     */
  --ahnengold-hell:  #D4A863;   /* Goldtexte           —  8,3:1     */

  /* Maßsystem, 8px-Raster, Stufe „spacious“ */
  --sp-1: .5rem;   --sp-2: 1rem;  --sp-3: 1.5rem; --sp-4: 2rem;
  --sp-5: 3rem;    --sp-6: 4rem;  --sp-7: 6rem;   --sp-8: 8rem;

  --gutter:  clamp(1.25rem, 4vw, 3.5rem);
  --bahn:    78rem;
  --lese:    38rem;              /* ~68 Zeichen Satzbreite */
  --abschnitt: clamp(4rem, 8vw, 8rem);
  --gap:     clamp(1.5rem, 3vw, 2.5rem);

  /* Schriftrollen — zwei Familien, drei Rollen.
     Die Mikrotypografie läuft über Marcellus SC (echte Kapitälchen)
     statt über eine dicktengleiche Schrift: ruhiger, edler, und es
     bleibt bei einer einzigen Formensprache über die ganze Seite. */
  --f-display: "Marcellus", "Times New Roman", serif;
  --f-caps:    "Marcellus SC", "Marcellus", serif;
  --f-text:    "Spectral", Georgia, serif;
  --f-mono:    "Marcellus SC", "Marcellus", serif;

  /* Fließende Typoskala */
  --fs-display: clamp(2.75rem, 1.55rem + 5.3vw, 5.5rem);
  --fs-h1:      clamp(2.1rem,  1.45rem + 2.9vw, 3.6rem);
  --fs-h2:      clamp(1.7rem,  1.3rem  + 1.8vw, 2.6rem);
  --fs-h3:      clamp(1.2rem,  1.08rem + .55vw, 1.55rem);
  --fs-lead:    clamp(1.15rem, 1.06rem + .45vw, 1.4rem);
  --fs-body:    clamp(1.0625rem, 1.02rem + .2vw, 1.1875rem);
  --fs-small:   .9375rem;
  --fs-micro:   .75rem;

  --tr: 200ms cubic-bezier(.22,.61,.36,1);
  --z-kopf: 100;
  --z-overlay: 400;

  color-scheme: dark;
}

/* 02 — Grundumkehrung Dunkel/Hell ===========================
   Die CI schreibt vor: „Edelblau als Hintergrund, auf hellem
   Untergrund umgedreht.“ Genau das leistet dieses Attribut.
   Marketingflächen laufen dunkel, Lesestrecken hell.          */

:root,
[data-ground="dunkel"] {
  --bg:        var(--grund);
  --bg-tief:   var(--grund-tief);
  --surface:   var(--grund-hoch);
  --fg:        var(--elfenbein);
  --fg-muted:  rgba(232,230,225,.62);
  --accent:    var(--ahnengold);
  --accent-tx: var(--ahnengold-hell);
  --border:    rgba(212,168,99,.18);
  --border-kraeftig: rgba(212,168,99,.38);
  --ring:      var(--ahnengold-hell);
  --auf-akzent: #0C0D1C;
  --linierung: rgba(232,230,225,.022);
}

/* Die Lesestrecken kehren den Grund nicht mehr um, sondern heben ihn
   nur eine Nuance an. Die CI-Regel „auf hellem Untergrund umgedreht“
   greift damit nur noch für gedruckte Anwendungen, nicht im Web —
   dort trägt Edelblau durchgehend. */
[data-ground="hell"] {
  --bg:        var(--grund-lese);
  --bg-tief:   var(--grund-tief);
  --surface:   var(--grund-hoch);
  --fg:        var(--elfenbein);
  --fg-muted:  rgba(232,230,225,.62);
  --accent:    var(--ahnengold);
  --accent-tx: var(--ahnengold-hell);
  --border:    rgba(212,168,99,.18);
  --border-kraeftig: rgba(212,168,99,.38);
  --ring:      var(--ahnengold-hell);
  --auf-akzent: #0C0D1C;
  --linierung: rgba(232,230,225,.022);
}


/* 03 — Reset und Grundsatz ================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-text);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.72;
  font-variant-numeric: oldstyle-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Auf dunklem Grund läuft Spectral optisch zu — minimal öffnen. */
[data-ground="dunkel"], :root { letter-spacing: .005em; }
[data-ground="hell"] { letter-spacing: 0; }

img, svg, picture { max-width: 100%; display: block; }
img { height: auto; }

::selection { background: var(--accent); color: var(--auf-akzent); }

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: 1px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: var(--gutter); top: -100%;
  z-index: calc(var(--z-kopf) + 10);
  background: var(--ahnengold); color: var(--auf-akzent);
  padding: .75rem 1.25rem;
  font-family: var(--f-mono); font-size: var(--fs-micro);
  letter-spacing: .14em;
  text-decoration: none;
}
.skip:focus { top: .75rem; }


/* 04 — Typografie =========================================== */

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.008em;
  margin: 0 0 var(--sp-3);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.25; }
h4 { font-size: 1.0625rem; font-family: var(--f-caps); letter-spacing: .02em; }

p { margin: 0 0 var(--sp-3); }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--fg);
  max-width: 34em;
}

/* Mikrotypografie: Rubriken, Labels, Signaturen */
.eyebrow {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--accent-tx);
  margin: 0 0 var(--sp-2);
}

.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

strong, b { font-weight: 600; }
em, i { font-style: italic; }

abbr[title] { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }

/* Deutsche Zahlensetzung in Tabellen und Preisen */
table, .preis, time, .zahl { font-variant-numeric: tabular-nums lining-nums; }


/* 05 — Layout: Bahn, Raster, Registerspalte ================= */

.bahn {
  width: min(100% - 2 * var(--gutter), var(--bahn));
  margin-inline: auto;
}
.bahn--schmal { --bahn: 56rem; }

/* Auf Lesestrecken rückt die Bahn enger zusammen, damit Registerspalte
   und Text als Block in der Seite stehen statt am linken Rand zu kleben. */
.bahn:has(.prosa) { --bahn: 66rem; }

.abschnitt {
  padding-block: var(--abschnitt);
  background: var(--bg);
  color: var(--fg);
  position: relative;
}
.abschnitt--tief { background: var(--bg-tief); }

/* Registerlinierung: die Ruhe eines Rechnungsbuchs,
   nicht die generische Papierkörnung. */
.abschnitt--liniert::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 2.25rem,
    var(--linierung) 2.25rem calc(2.25rem + 1px)
  );
}
.abschnitt--liniert > * { position: relative; }

.raster {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
}

/* Registerspalte — nachempfunden der linierten Randspalte
   eines Kirchenbuchs: schmale Marke links, Inhalt rechts. */
.register { display: grid; gap: var(--sp-3); }
.register__rail {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: .16em;
  color: var(--accent-tx);
  padding-top: .45rem;
}
.register__rail b {
  display: block;
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: .02em;
  line-height: 1;
  color: var(--accent-tx);
  margin-bottom: .4rem;
}

@media (min-width: 60rem) {
  .register {
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: var(--gap);
  }
  .register__rail {
    border-top: 1px solid var(--border-kraeftig);
    padding-top: var(--sp-2);
  }
}

.stapel > * + * { margin-top: var(--sp-3); }
.stapel-gross > * + * { margin-top: var(--sp-5); }


/* 06 — Kopf und Navigation ================================== */

.kopf {
  position: sticky; top: 0; z-index: var(--z-kopf);
  background: color-mix(in srgb, var(--grund-tief) 92%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid rgba(201,154,91,.2);
  color: var(--elfenbein);
}
.kopf__innen {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  min-height: 4.5rem;
}

.marke {
  display: inline-flex; align-items: center; gap: .75rem;
  text-decoration: none; color: var(--ahnengold);
  padding: .35rem 0;
}
.marke svg, .marke img { width: 2.35rem; height: auto; color: var(--ahnengold); }
.marke__wort {
  font-family: var(--f-caps);
  font-size: 1.05rem;
  letter-spacing: .12em;
  color: var(--elfenbein);
  line-height: 1;
}
.marke__wort span {
  display: block;
  font-family: var(--f-mono);
  font-size: .5625rem;
  letter-spacing: .2em;
  color: var(--ahnengold-hell);
  margin-top: .3rem;
}

.nav { display: none; }
.nav ul {
  display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem);
  list-style: none; margin: 0; padding: 0;
}
.nav a {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: .14em;
  color: var(--elfenbein);
  text-decoration: none;
  padding: .65rem 0;
  display: inline-block;
  border-bottom: 1px solid transparent;
  transition: color var(--tr), border-color var(--tr);
}
.nav a:hover { color: var(--ahnengold-hell); }
.nav a[aria-current="page"] {
  color: var(--ahnengold-hell);
  border-bottom-color: var(--ahnengold);
}

.nav-schalter {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  background: none; border: 1px solid var(--border-kraeftig);
  color: var(--elfenbein); cursor: pointer;
  padding: 0;
}
.nav-schalter svg { width: 1.25rem; height: 1.25rem; }
.nav-schalter .icon-schliessen { display: none; }
.nav-schalter[aria-expanded="true"] .icon-menue { display: none; }
.nav-schalter[aria-expanded="true"] .icon-schliessen { display: block; }

/* Der Kopf-CTA trägt zusätzlich .btn, und .btn setzt weiter unten
   display:inline-flex. Deshalb brauchen diese beiden Regeln eine
   Klasse mehr, sonst gewinnt .btn und der Knopf erscheint auch
   mobil — wo er den Menüschalter aus dem Bild schiebt. */
.kopf .kopf__cta { display: none; }

@media (min-width: 64rem) {
  .nav { display: block; }
  .nav-schalter { display: none; }
  .kopf .kopf__cta { display: inline-flex; }
}

/* Mobilnavigation */
.nav-mobil {
  display: none;
  background: var(--grund-tief);
  border-bottom: 1px solid var(--border);
}
.nav-mobil.ist-offen { display: block; }
.nav-mobil ul { list-style: none; margin: 0; padding: var(--sp-2) 0 var(--sp-4); }
.nav-mobil a {
  display: block;
  padding: .9rem 0;
  font-family: var(--f-mono);
  font-size: .8125rem;
  letter-spacing: .14em;
  color: var(--elfenbein);
  text-decoration: none;
  border-bottom: 1px solid rgba(201,154,91,.14);
}
.nav-mobil a[aria-current="page"] { color: var(--ahnengold-hell); }
@media (min-width: 64rem) { .nav-mobil { display: none !important; } }


/* 07 — Schaltflächen und Verweise =========================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .6rem;
  min-height: 2.875rem;
  padding: .85rem 1.6rem;
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: .14em;
  text-decoration: none;
  border: 1px solid var(--ahnengold);
  border-radius: 1px;
  cursor: pointer;
  transition: background var(--tr), color var(--tr), border-color var(--tr);
}
.btn--primaer {
  background: var(--ahnengold);
  color: var(--auf-akzent);
}
.btn--primaer:hover { background: var(--ahnengold-hell); border-color: var(--ahnengold-hell); }
.btn--sekundaer {
  background: transparent;
  color: var(--accent-tx);
  border-color: var(--border-kraeftig);
}
.btn--sekundaer:hover { border-color: var(--ahnengold); color: var(--accent-tx); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* Textverweis mit Goldunterstreichung — die sekundäre Aktion */
.tlink {
  color: var(--fg);
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: .14em;
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: .3rem;
  transition: color var(--tr), border-color var(--tr);
}
.tlink:hover { color: var(--accent-tx); }

/* Fließtextverweise */
.prosa a, .fliess a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: color var(--tr);
}
.prosa a:hover, .fliess a:hover { color: var(--accent-tx); }

.aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }


/* 08 — Bausteine ============================================ */

/* Signatur-Tag: macht das Markenversprechen „kein Fund ohne
   Beleg“ zu einem sichtbaren Interface-Muster. */
.signatur {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .06em;
  color: var(--accent-tx);
  border-left: 2px solid var(--accent);
  padding: .1rem 0 .1rem .55rem;
  font-variant-numeric: tabular-nums;
}

.zierlinie {
  display: flex; align-items: center; gap: .75rem;
  color: var(--accent);
  margin-block: var(--sp-4);
}
.zierlinie::before, .zierlinie::after {
  content: ""; height: 1px; background: currentColor; flex: 1; opacity: .45;
}
.zierlinie::after { flex: 1; }
.zierlinie span { width: 4px; height: 4px; background: currentColor; transform: rotate(45deg); }

/* Wappen und Wortmarke werden als CSS-Maske geführt: eine einzige
   SVG-Datei, die Farbe kommt aus currentColor. So lässt sich die
   CI-Regel (Gold auf Dunkel, Edelblau auf Hell) ohne Dateikopien
   umsetzen — und das 58-KB-SVG landet nicht in jeder Seite. */
/* Das Wappen war früher eine CSS-Maske über der Logodatei. Das sah
   elegant aus, hatte aber einen Haken: Beim Öffnen der Seiten direkt
   vom Datenträger (file://) behandelt der Browser jede Datei als eigene
   Herkunft und blockiert externe SVG-Verweise in mask-image — das
   Wappen verschwand dann überall spurlos.

   Jetzt ist es ein gewöhnliches Bild mit fest eingefärbter Datei. Das
   lädt in jedem Kontext, wird einmal zwischengespeichert und kann
   nicht mehr an Pfad- oder Herkunftsregeln scheitern. Alle drei
   Einsatzorte liegen auf Edelblau, dort gilt nach CI ohnehin Gold. */
.wappen {
  display: block;
  width: 100%;
  height: auto;
}
.marke__zeichen { width: 2.35rem; flex: none; }

/* Archivalie in echtem Duotone. Zweistufig, damit auch helle
   Vorlagen sicher in die CI fallen und nicht cremefarben wirken:
   „lighten“ mit Edelblau setzt den Tiefenwert, „darken“ mit
   Ahnengold die Lichter. Originaldateien bleiben unverändert. */
.archivbild {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--grund-tief);
  border: 1px solid var(--border);
}
.archivbild img {
  width: 100%;
  filter: grayscale(1) contrast(1.14) brightness(.94);
}
.archivbild::before,
.archivbild::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
}
.archivbild::before { background: var(--grund-tief);  mix-blend-mode: lighten; }
.archivbild::after  { background: var(--ahnengold); mix-blend-mode: darken;  }

/* Rasterbreiten — als Klassen, weil Inline-Stile keine
   Medienabfragen können. Mobil immer volle Breite. */
.sp-4, .sp-6, .sp-8, .sp-12 { grid-column: 1 / -1; }
@media (min-width: 48rem) {
  .sp-4  { grid-column: span 4; }
  .sp-6  { grid-column: span 6; }
  .sp-8  { grid-column: span 8; }
}
.archivbild__unterschrift {
  font-family: var(--f-mono);
  font-size: .6875rem;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--fg-muted);
  margin-top: .75rem;
}

.karte {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.karte--akzent { border-color: var(--ahnengold); }


/* 09 — Hero und Ahnentafel ================================== */

/* Der Hero arbeitet in vier Ebenen: Tafel, Schleier, Text, Belegfeld.
   Ohne JavaScript ist er ein gewöhnlicher Abschnitt mit sichtbarem Text
   — die Sichtbarkeit des Titels darf nie am Skript hängen. Erst wenn
   das Skript die Klasse hat-heroverlauf setzt, wird daraus die hohe,
   stehende Bühne mit scrollgesteuertem Verlauf. */

.hero {
  position: relative;
  /* clip statt hidden: Beides schneidet Überstehendes ab, aber hidden
     würde hier einen Scroll-Container erzeugen — und darin verliert
     die Bühne ihr position:sticky und läuft einfach mit weg. */
  overflow: clip;
  background: var(--grund);
  color: var(--elfenbein);
  --fortschritt: 1;              /* ohne Skript: Endzustand */
}

.hero__buehne {
  position: relative;
  min-height: min(46rem, 92svh);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(17rem, 36vh, 21rem);
  overflow: hidden;
}

/* Mit Skript: Der Abschnitt wird höher als der Bildschirm, die Bühne
   bleibt darin stehen. Der zurückgelegte Weg treibt den Verlauf.

   Der Hero wird dabei unter die Kopfleiste gezogen, damit die Bühne
   wirklich die volle Bildhöhe hat. Die Leiste ist halbdurchlässig —
   die Tafel läuft also sichtbar unter ihr hindurch. Ohne diesen Zug
   ragte der untere Rand um die Leistenhöhe aus dem Bild. */
.hat-heroverlauf .hero {
  --kopfversatz: 4.5625rem;
  height: 190svh;
  margin-top: calc(-1 * var(--kopfversatz));
}
.hat-heroverlauf .hero__buehne {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 0;
}
.hat-heroverlauf .hero .tafel__flaeche {
  padding-top: calc(var(--kopfversatz) + clamp(1.5rem, 4vh, 3rem));
}

.hero__wappen {
  position: absolute;
  right: -8%; top: -12%;
  width: min(46rem, 78vw);
  color: var(--ahnengold);
  opacity: .045;
  pointer-events: none;
  z-index: 0;
}

/* Ebene 2 — Verdunkelung. Wächst mit dem Fortschritt und macht den
   Text über der Tafel lesbar. */
.hero__schleier {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: calc(var(--fortschritt) * .96);
  background:
    linear-gradient(100deg,
      rgba(11,13,26,.96) 0%, rgba(11,13,26,.88) 42%, rgba(11,13,26,.35) 78%, rgba(11,13,26,.2) 100%),
    radial-gradient(90% 70% at 20% 45%, rgba(11,13,26,.75) 0%, transparent 70%);
}

/* Ebene 3 — Text. Nur die Verweise fangen Zeigerereignisse ab, damit
   die Tafel darunter überall bedienbar bleibt. */
.hero__innen {
  position: relative;
  z-index: 3;
  pointer-events: none;
}
.hero__innen a, .hero__innen button { pointer-events: auto; }

.hero__text {
  max-width: 40rem;
  opacity: var(--fortschritt);
  transform: translateY(calc((1 - var(--fortschritt)) * 1.6rem));
}
.hero__titel {
  font-family: var(--f-display);
  /* Im zweispaltigen Hero bleibt weniger Breite als bei einer
     Vollbreiten-Schlagzeile — die Skala ist entsprechend kleiner. */
  font-size: clamp(2.2rem, 1.35rem + 2.7vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -.015em;
  margin: 0 0 var(--sp-3);
  text-wrap: balance;
}
.hero__titel em {
  font-style: normal;
  color: var(--ahnengold-hell);
}
.hero .lead { color: rgba(230,232,240,.82); max-width: 32em; }
.hero .aktionen { margin-top: var(--sp-4); }

@media (min-width: 62rem) {
  .hero__innen { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); align-items: center; }
}

/* Begehbare Ahnentafel — das Signaturelement */
/* Begehbare Ahnentafel — das Signaturelement.
   Aufbau: eine SVG-Ebene mit Bezierkurven, darüber echte
   <button>-Elemente. Buttons statt SVG-Gruppen, weil SVG in manchen
   Engines kein focus-Ereignis liefert — Tastaturnutzer bekämen sonst
   keine Quellenangabe zu sehen. */

/* Die Tafel steht bewusst ohne Rahmen und ohne eigene Fläche: Sie soll
   nicht als Karte auf dem Hero liegen, sondern in dessen Tiefe stehen —
   wie ein Wasserzeichen, das man trotzdem anfassen kann. Deshalb nur ein
   weicher Lichtkern statt Panel und Kontur. */
/* Im Hero füllt die Tafel die gesamte Fläche und liegt hinter allem
   anderen. Sie behält dabei ihre Bedienbarkeit. */
.tafel {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

/* Die Tafel muss sich aus der verfügbaren Höhe ergeben, nicht aus der
   Breite. Sonst wächst sie über den Bildschirm hinaus und schiebt das
   Belegfeld unter die Kante. Sie wird deshalb wie ein Bild eingepasst:
   Höhe füllen, Breite folgt dem Seitenverhältnis. */
.tafel__flaeche {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  /* Unten bleibt Platz für das Belegfeld — sonst laufen die untersten
     Positionen der Tafel dahinter. */
  padding: clamp(1.5rem, 4vh, 3rem) var(--gutter) clamp(17rem, 36vh, 21rem);
}
.tafel__flaeche > .tafel__rollbereich {
  width: 100%; height: 100%;
  display: grid;
  /* Waagerecht mittig, senkrecht auf volle Höhe gestreckt. Mit
     place-items:center bliebe die Höhe unbestimmt und die Bühne
     fiele auf ihre Inhaltsgröße zusammen. */
  justify-items: center;
  align-items: stretch;
  min-height: 0;
}
.hero .tafel__buehne {
  width: auto;
  height: auto;
  max-width: 100%;
  aspect-ratio: 1000 / 660;
  min-height: 0;
}

/* Die Tafel tritt zurück, während der Text kommt — sie verschwindet
   aber nie ganz, sonst wäre der Hero am Ende leer. */
.tafel__flaeche,
.hero__beleg { opacity: calc(1 - var(--fortschritt) * .55); }

/* Ein sehr langsamer Lichtschein hinter der Tafel — kaum bewusst
   wahrnehmbar, nimmt der Fläche aber das Statische. */
.tafel::before {
  content: "";
  position: absolute;
  inset: -30% -20%;
  background:
    radial-gradient(60% 55% at 60% 45%, rgba(173,125,61,.10) 0%, transparent 70%);
  pointer-events: none;
}
.tafel::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(212,168,99,.05) 40deg, transparent 110deg,
    transparent 250deg, rgba(212,168,99,.03) 300deg, transparent 360deg);
  animation: tafelschein 26s linear infinite;
  pointer-events: none;
}
.tafel > * { position: relative; }

@keyframes tafelschein { to { transform: rotate(360deg); } }

.tafel__kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-2); flex-wrap: wrap;
  font-family: var(--f-caps);
  font-size: var(--fs-micro);
  letter-spacing: .18em;
  color: var(--accent-tx);
  padding-bottom: .9rem;
  margin-bottom: 1.2rem;
  opacity: .8;
}
.tafel__kopf span:last-child { color: var(--fg-muted); letter-spacing: .12em; }

/* --- Bühne: Leitungen und Knoten übereinander ------------------ */

.tafel__buehne {
  position: relative;
  aspect-ratio: 1000 / 660;
  min-height: 15rem;
}

.tafel__leitungen {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
}

.tafel__leitung {
  fill: none;
  stroke: url(#tafelverlauf);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  transition: stroke-width 260ms ease, opacity 260ms ease;
  opacity: .55;
}
/* Beim Anwählen leuchtet die gesamte Abstammungslinie auf.
   Das ist der eigentliche Inhalt der Tafel: nicht der Knoten,
   sondern der Weg zur Ausgangsperson. */
.tafel.ist-verfolgt .tafel__leitung { opacity: .16; }
.tafel .tafel__leitung.ist-linie {
  opacity: 1;
  stroke: var(--ahnengold-hell);
  stroke-width: 2.2;
  filter: drop-shadow(0 0 5px rgba(212,168,99,.55));
}

.tafel__knoten-ebene { position: absolute; inset: 0; }

/* Einlauf. Als Animation statt als Transition: Eine Animation läuft
   immer zu Ende — bleibt sie aus, ist der Endzustand trotzdem sichtbar,
   und nichts kann unsichtbar hängenbleiben. */
.hat-eintritt .tafel.ist-eingelaufen .tafel__leitung {
  stroke-dasharray: var(--laenge, 260);
  animation: leitungZiehen 700ms cubic-bezier(.4,0,.2,1) var(--verzug, 0ms) backwards;
}
@keyframes leitungZiehen {
  from { stroke-dashoffset: var(--laenge, 260); }
  to   { stroke-dashoffset: 0; }
}

.hat-eintritt .tafel.ist-eingelaufen .tafel__knoten {
  animation: knotenAuf 420ms cubic-bezier(.22,.61,.36,1) var(--verzug, 0ms) backwards;
}
@keyframes knotenAuf {
  from { opacity: 0; transform: translateY(-50%) translateX(-8px); }
  to   { opacity: 1; transform: translateY(-50%); }
}

/* --- Knoten ----------------------------------------------------
   Eine gedruckte Ahnentafel setzt ihre Personen nicht in Kästen,
   sondern auf Registerlinien: Nummer, Name, Lebensdaten, darunter
   ein Strich. Genau das ist hier nachgebaut. Kästen mit Rahmen und
   Farbverlauf lasen sich wie Formularfelder — das Papierne, das
   diese Marke tragen soll, entsteht erst durch die Linie.

   Farbe trägt nur die verfolgte Abstammungslinie. Alles andere
   bleibt zurückgenommen, damit das Auge dem Weg folgt. */

.tafel__generationen { position: absolute; inset: 0; pointer-events: none; }
.tafel__generationen span {
  position: absolute;
  left: var(--x); width: var(--b); top: 0;
  font-family: var(--f-caps);
  font-size: clamp(.42rem, .62cqw + .1rem, .625rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ahnengold-hell) 62%, transparent);
  padding-bottom: .5em;
  border-bottom: 1px solid rgba(212,168,99,.18);
}

.tafel__knoten {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--b);
  transform: translateY(-50%);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "nr vorname" "nr nachname" ". daten";
  align-items: baseline;
  column-gap: .55em;
  padding: 0 0 .42em;
  border: none;
  border-bottom: 1px solid rgba(212,168,99,.2);
  border-radius: 0;
  background: none;
  color: var(--fg);
  text-align: left;
  cursor: pointer;
  font-size: clamp(.5rem, .8cqw + .15rem, .78125rem);
  transition: border-color 240ms ease, color 240ms ease;
}

.tafel__nr {
  grid-area: nr;
  align-self: center;
  font-family: var(--f-mono);
  font-size: .74em;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--ahnengold-hell) 55%, transparent);
  transition: color 240ms ease;
}

.tafel__vorname {
  grid-area: vorname;
  font-family: var(--f-text);
  font-size: .82em;
  line-height: 1.35;
  color: color-mix(in srgb, var(--elfenbein) 52%, transparent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color 240ms ease;
}

/* Der Familienname ist das, was man auf einer Ahnentafel sucht —
   er steht deshalb in der Auszeichnungsschrift und trägt die Zeile. */
.tafel__nachname {
  grid-area: nachname;
  font-family: var(--f-display);
  font-size: 1.16em;
  line-height: 1.2;
  letter-spacing: .004em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Lebensdaten erscheinen nur auf der verfolgten Linie. So bleibt die
   Tafel ruhig und belohnt das Anwählen mit mehr Inhalt. */
.tafel__daten {
  grid-area: daten;
  font-family: var(--f-mono);
  font-size: .68em;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--ahnengold-hell);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 260ms ease, max-height 260ms ease;
}

.tafel__knoten:hover,
.tafel__knoten:focus-visible,
.tafel__knoten.ist-linie {
  border-bottom-color: var(--ahnengold-hell);
  outline: none;
}
.tafel__knoten:hover .tafel__nachname,
.tafel__knoten:focus-visible .tafel__nachname,
.tafel__knoten.ist-linie .tafel__nachname { color: var(--ahnengold-hell); }

.tafel__knoten:hover .tafel__nr,
.tafel__knoten:focus-visible .tafel__nr,
.tafel__knoten.ist-linie .tafel__nr { color: var(--ahnengold-hell); }

.tafel__knoten:hover .tafel__vorname,
.tafel__knoten:focus-visible .tafel__vorname,
.tafel__knoten.ist-linie .tafel__vorname {
  color: color-mix(in srgb, var(--elfenbein) 80%, transparent);
}

.tafel__knoten:hover .tafel__daten,
.tafel__knoten:focus-visible .tafel__daten,
.tafel__knoten.ist-linie .tafel__daten { opacity: 1; max-height: 2em; }

.tafel__knoten:focus-visible {
  box-shadow: 0 2px 0 -1px var(--ahnengold-hell);
}

/* Die angewählte Position selbst wird zusätzlich durch eine kräftigere
   Linie und ein Goldquadrat vor der Nummer hervorgehoben. */
.tafel__knoten[aria-pressed="true"] { border-bottom-width: 2px; }
.tafel__knoten[aria-pressed="true"] .tafel__nr::before {
  content: "";
  display: inline-block;
  width: .34em; height: .34em;
  margin-right: .42em;
  background: var(--ahnengold);
  transform: rotate(45deg) translateY(-.06em);
}

/* Noch nicht am Originaldokument geprüft: gestrichelte statt
   durchgezogener Linie. Die Seite verspricht, Ungeprüftes zu
   kennzeichnen — hier tut sie es, ohne wie ein Fehler auszusehen. */
.tafel__knoten[data-geprueft="nein"] { border-bottom-style: dashed; }

.tafel.ist-verfolgt .tafel__knoten:not(.ist-linie) { opacity: .3; }

/* --- Belegfeld -------------------------------------------------- */

/* Ebene 4 — Belegfeld am unteren Rand des Heros. Es bleibt lesbar,
   während der Text darüber einblendet: Es ist der laufende Beweis,
   dass zu jeder Angabe eine Quelle gehört. */
.hero__beleg {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding-block: clamp(1rem, 2.5vh, 1.6rem) clamp(1.25rem, 3vh, 2rem);
  background: linear-gradient(to top, rgba(11,13,26,.92) 30%, transparent 100%);
  pointer-events: none;
}
.hero__beleg .tafel__kopf { margin-bottom: .4rem; }

/* Unten links steht der Beleg zur gerade gewählten Position, unten
   rechts die Erläuterung der Nummern. Die Erklärung steht damit dort,
   wo die Zahlen tatsächlich zu sehen sind — im Fußbereich hätte sie
   niemand mit der Tafel in Verbindung gebracht. */
.hero__beleg-reihe {
  display: grid;
  gap: var(--sp-3) clamp(2rem, 5vw, 4rem);
  align-items: end;
}
@media (min-width: 62rem) {
  .hero__beleg-reihe { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); }
}

.hero__kekule {
  margin: 0;
  font-size: .6875rem;
  line-height: 1.75;
  letter-spacing: .02em;
  color: color-mix(in srgb, var(--elfenbein) 50%, transparent);
  border-left: 1px solid var(--linie);
  padding-left: clamp(.9rem, 2vw, 1.4rem);
}
.hero__kekule .mono { color: var(--ahnengold-hell); }

/* Auf schmalen Schirmen ist im Hero kein Platz dafür. Die Zählung wird
   ohnehin im Wissensbeitrag „Was ist Ahnenforschung?“ erklärt. */
@media (max-width: 61.99rem) { .hero__kekule { display: none; } }

/* Herkunftsvermerk zur Tafel — steht bewusst klein und ruhig unter der
   Kopfzeile, nicht als Auszeichnung. */
.tafel__herkunft {
  max-width: 46em;
  margin: 0 0 .6rem;
  font-size: .6875rem;
  line-height: 1.55;
  letter-spacing: .02em;
  color: color-mix(in srgb, var(--elfenbein) 52%, transparent);
}

.tafel__beleg .signatur { transition: border-color 200ms ease; }

/* Auf schmalen Schirmen ist die Bildhöhe knapp: Das Belegfeld wird
   kompakter, und die Bühne reserviert entsprechend mehr Fußraum —
   sonst laufen die Aktionsschaltflächen dahinter. */
@media (max-width: 48rem) {
  .hero__beleg { padding-block: .9rem 1.15rem; }
  .hero__beleg .tafel__kopf { margin-bottom: .5rem; font-size: .625rem; }
  .hero__beleg .tafel__beleg { min-height: 0; }
  .hero__beleg .tafel__beleg-name { font-size: 1.05rem; }
  .hero__beleg .tafel__beleg-daten { margin-bottom: .5rem; }
  /* Der Fußraum muss das gesamte Belegfeld fassen: Kopfzeile,
     Herkunftsvermerk und den Beleg selbst. Sonst laufen die
     Aktionsschaltflächen dahinter. */
  .hero__buehne { padding-bottom: clamp(18rem, 38vh, 22rem); }
}

.tafel__beleg {
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
  min-height: 5.5rem;
}
.hero__beleg .tafel__beleg { border-top: none; padding-top: 0; min-height: 6.25rem; }
.tafel__beleg-name {
  font-family: var(--f-display);
  font-size: 1.2rem;
  line-height: 1.2;
  margin: 0 0 .3rem;
}
.tafel__beleg-daten {
  font-family: var(--f-caps);
  font-size: .8125rem;
  letter-spacing: .1em;
  color: var(--fg-muted);
  margin: 0 0 .8rem;
}
/* Wechselt der Inhalt, blendet er kurz auf — sonst merkt man beim
   Durchtabben nicht, dass sich etwas geändert hat. */
.tafel__beleg.ist-gewechselt > * { animation: belegAuf 320ms ease-out both; }
.tafel__beleg.ist-gewechselt > :nth-child(2) { animation-delay: 40ms; }
.tafel__beleg.ist-gewechselt > :nth-child(3) { animation-delay: 80ms; }

@keyframes belegAuf {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}

/* Quellenliste im Belegfeld.
   Alle Quellen einer Position, nicht nur die erste. Bei sieben
   Einträgen wird das lang, deshalb zweispaltig ab mittlerer Breite
   und mit enger Zeilenführung. Die Zahl davor ist selbst eine
   Aussage: Wie gut ist diese Angabe abgesichert? */
.tafel__beleg-zahl {
  font-family: var(--f-caps);
  font-size: .625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-leise);
  margin: 0 0 .45rem;
}

.signaturliste {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 1;
  column-gap: var(--sp-4);
}
.signaturliste .signatur {
  display: block;
  break-inside: avoid;
  margin-bottom: .2rem;
  font-size: .6875rem;
  line-height: 1.5;
}
@media (min-width: 56rem) { .signaturliste { columns: 2; } }
@media (min-width: 82rem) { .signaturliste { columns: 3; } }

.tafel__hinweis {
  font-family: var(--f-caps);
  font-size: .6875rem;
  letter-spacing: .1em;
  color: var(--fg-muted);
  margin-top: 1rem;
}

/* Auf schmalen Schirmen bleibt die Tafel vollständig und wird
   seitlich scrollbar, statt die vierte Generation zu verstecken. */
@media (max-width: 47.99rem) {
  /* Auf schmalen Schirmen läuft die Tafel seitlich. Die Bildlaufleiste
     bekommt dabei die Farben der Marke — als graues Systemband schnitt
     sie sichtbar in das Belegfeld darunter. */
  .tafel__rollbereich {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(212,168,99,.4) transparent;
    padding-bottom: .35rem;
  }
  .tafel__rollbereich::-webkit-scrollbar { height: 3px; }
  .tafel__rollbereich::-webkit-scrollbar-track { background: transparent; }
  .tafel__rollbereich::-webkit-scrollbar-thumb {
    background: rgba(212,168,99,.4);
    border-radius: 2px;
  }
  .tafel__buehne { min-width: 32rem; }
}


/* 10 — Ledger-Tabellen und Preise =========================== */

.ledger {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}
.ledger caption {
  text-align: left;
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: .16em;
  color: var(--accent-tx);
  padding-bottom: var(--sp-2);
}
.ledger th, .ledger td {
  text-align: left;
  padding: 1.05rem .9rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.ledger thead th {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: var(--fs-micro);
  letter-spacing: .14em;
  color: var(--fg-muted);
  border-bottom-color: var(--border-kraeftig);
  padding-block: .7rem;
}
.ledger th:first-child, .ledger td:first-child { padding-left: 0; }
.ledger th:last-child, .ledger td:last-child { padding-right: 0; text-align: right; }
.ledger tbody tr:last-child td { border-bottom: none; }

.ledger .paket-name {
  font-family: var(--f-display);
  font-size: 1.2rem;
  display: block;
  margin-bottom: .2rem;
}
.ledger .paket-zusatz {
  font-family: var(--f-text);
  font-size: .875rem;
  color: var(--fg-muted);
  display: block;
  max-width: 30em;
}
.preis {
  font-family: var(--f-mono);
  font-size: 1.15rem;
  font-weight: 500;
  white-space: nowrap;
}
.preis small {
  display: block;
  font-size: .6875rem;
  font-weight: 400;
  color: var(--fg-muted);
  letter-spacing: .04em;
  margin-top: .25rem;
}

.ist-empfohlen { position: relative; }
.ist-empfohlen td { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.ist-empfohlen td:first-child { box-shadow: inset 2px 0 0 var(--accent); padding-left: 1rem; }

.marke-empfohlen {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: .625rem;
  letter-spacing: .16em;
  color: var(--accent-tx);
  border: 1px solid var(--accent);
  padding: .15rem .5rem;
  margin-bottom: .5rem;
}

/* Auf kleinen Schirmen bricht die Tabelle in Blöcke um */
@media (max-width: 47.99rem) {
  .ledger, .ledger tbody, .ledger tr, .ledger td { display: block; width: 100%; }
  .ledger thead { display: none; }
  .ledger tr { border-bottom: 1px solid var(--border-kraeftig); padding-block: 1.25rem; }
  .ledger tr:last-child { border-bottom: none; }
  .ledger td { border: none; padding: .25rem 0; text-align: left !important; }
  .ist-empfohlen td { background: none; }
  .ist-empfohlen { background: color-mix(in srgb, var(--accent) 7%, transparent); padding-inline: 1rem; }
  .ist-empfohlen td:first-child { box-shadow: none; padding-left: 0; }
  .preis { font-size: 1.35rem; margin-top: .5rem; }
}

.fussnote {
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .04em;
  line-height: 1.7;
  color: var(--fg-muted);
  margin-top: var(--sp-3);
}


/* 11 — Zeitstrahl, Listen, Akkordeon ======================== */

/* Die sieben Schritte sind eine echte Abfolge — hier trägt
   die Nummerierung tatsächlich Information. */
.strahl { list-style: none; margin: 0; padding: 0; }
.strahl > li {
  position: relative;
  padding: 0 0 var(--sp-5) clamp(2.75rem, 6vw, 4.5rem);
  border-left: 1px solid var(--border);
  margin-left: .5rem;
}
.strahl > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.strahl > li::before {
  content: attr(data-schritt);
  position: absolute;
  left: 0; top: 0;
  transform: translateX(-50%);
  width: 2.35rem; height: 2.35rem;
  display: grid; place-items: center;
  background: var(--bg);
  border: 1px solid var(--accent);
  color: var(--accent-tx);
  font-family: var(--f-mono);
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
}
.strahl h3 { margin-bottom: .6rem; }

.merkmale { list-style: none; margin: 0; padding: 0; }
.merkmale li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .55rem;
}
/* --- Forschungskarte ------------------------------------------
   Leaflet mit dunkler CARTO-Grundkarte. Die Kacheln kommen von einem
   fremden Server, deshalb lädt die Karte erst auf Klick — bis dahin
   verlässt keine Anfrage die Seite. Leaflet selbst liegt lokal unter
   assets/vendor, sodass nur die Kacheln extern sind. */

.fkarte { margin: var(--sp-5) 0 0; }

.fkarte__rahmen {
  position: relative;
  aspect-ratio: 16 / 10;
  min-height: 22rem;
  border: 1px solid var(--linie);
  background:
    radial-gradient(120% 90% at 30% 15%, rgba(173,125,61,.08) 0%, transparent 60%),
    var(--grund-tief);
  overflow: hidden;
}
@media (max-width: 40rem) { .fkarte__rahmen { aspect-ratio: 4 / 5; } }

/* Vorschaltfläche vor dem Laden */
.fkarte__tor {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-content: center; justify-items: center;
  gap: .9rem;
  padding: var(--sp-4);
  text-align: center;
}
.fkarte__tor-zeichen { width: 3.4rem; height: auto; opacity: .85; }
.fkarte__tor-text {
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem);
  margin: 0; max-width: 26em;
}
.fkarte__tor-hinweis {
  font-family: var(--f-caps);
  font-size: .6875rem;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--fg-leise);
  max-width: 34em; margin: 0;
}
.fkarte__tor-hinweis a { color: var(--ahnengold-hell); }

.fkarte__flaeche { position: absolute; inset: 0; z-index: 1; }

/* Leaflet an die Palette angleichen */
.fkarte__flaeche.leaflet-container {
  background: var(--grund-tief);
  font-family: var(--f-text);
}
.leaflet-control-zoom a {
  background: var(--grund) !important;
  color: var(--ahnengold-hell) !important;
  border-color: var(--linie) !important;
}
.leaflet-control-zoom a:hover { background: var(--flaeche) !important; }
.leaflet-control-attribution {
  background: rgba(11,13,26,.82) !important;
  color: var(--fg-leise) !important;
  font-size: 10px !important;
}
.leaflet-control-attribution a { color: var(--ahnengold-hell) !important; }

/* Markierung: Kreis mit dem Wappen */
.fkarte__marke {
  width: 2.3rem; height: 2.3rem;
  display: grid; place-items: center;
  background: var(--grund);
  border: 1px solid var(--ahnengold);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(11,13,26,.6), 0 5px 14px rgba(0,0,0,.5);
  transition: transform 200ms cubic-bezier(.22,.61,.36,1), background 200ms ease;
}
.fkarte__marke img { width: 58%; height: auto; filter: brightness(1.15); }
.leaflet-marker-icon:hover .fkarte__marke,
.leaflet-marker-icon:focus-visible .fkarte__marke {
  transform: scale(1.16);
  background: color-mix(in srgb, var(--ahnengold) 24%, var(--grund));
}

.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--flaeche);
  color: var(--elfenbein);
  border: 1px solid var(--linie-kraeftig);
  border-radius: 2px;
  box-shadow: 0 10px 30px rgba(0,0,0,.55);
}
.leaflet-popup-content { margin: .9rem 1rem; font-size: .8125rem; line-height: 1.6; }
.leaflet-popup-content b {
  display: block;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.05rem;
  margin-bottom: .35rem;
}
.leaflet-popup-content ul { margin: 0; padding-left: 1rem; color: var(--fg-leise); }
.leaflet-popup-content li { margin-bottom: .25rem; }
.leaflet-container a.leaflet-popup-close-button { color: var(--fg-leise); }

.fkarte__unterschrift {
  margin-top: .8rem;
  font-family: var(--f-caps);
  font-size: .6875rem;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--fg-leise);
  max-width: 52em;
}

/* --- Ausklappbare Bestandslisten ------------------------------ */

.bestandsliste { margin-top: var(--sp-5); border-top: 1px solid var(--linie); }

.falte { border-bottom: 1px solid var(--linie); }
.falte > summary {
  display: flex; align-items: baseline; gap: var(--sp-2);
  justify-content: space-between;
  padding: 1.05rem 0;
  cursor: pointer;
  list-style: none;
}
.falte > summary::-webkit-details-marker { display: none; }
.falte__titel {
  font-family: var(--f-display);
  font-size: 1.1rem;
  line-height: 1.35;
}
.falte__unter {
  display: block;
  font-family: var(--f-caps);
  font-size: .6875rem;
  letter-spacing: .08em;
  color: var(--fg-leise);
  margin-top: .2rem;
}
.falte__zahl {
  flex: none;
  font-family: var(--f-caps);
  font-size: .75rem;
  color: var(--ahnengold-hell);
  font-variant-numeric: tabular-nums lining-nums;
}
.falte__zahl::after {
  content: "＋";
  margin-left: .6rem;
  color: var(--ahnengold-hell);
}
.falte[open] .falte__zahl::after { content: "－"; }
.falte > ul { padding-bottom: 1.4rem; margin-top: 0; }

/* Frisch geöffnete Liste kurz hervorheben, wenn sie von der Karte
   aus angesteuert wurde — sonst ist unklar, was sich geändert hat. */
.falte.ist-angesteuert { animation: falteAuf 1.6s ease-out; }
@keyframes falteAuf {
  0%, 40% { background: color-mix(in srgb, var(--ahnengold) 12%, transparent); }
  100%    { background: transparent; }
}

/* Lange Bestandslisten laufen mehrspaltig, sonst entsteht eine
   endlose schmale Kolumne. Die Einträge dürfen dabei nicht über
   den Spaltenumbruch zerrissen werden. */
.merkmale--spalten { columns: 2; column-gap: clamp(1.5rem, 4vw, 3rem); }
.merkmale--spalten li { break-inside: avoid; -webkit-column-break-inside: avoid; }
@media (min-width: 68rem) { .merkmale--spalten { columns: 3; } }
@media (max-width: 40rem)  { .merkmale--spalten { columns: 1; } }

.merkmale li::before {
  content: "";
  position: absolute; left: 0; top: .72em;
  width: 6px; height: 1px;
  background: var(--accent);
}

/* Kennzahlen der Referenzseite. Bewusst ohne Karten und Schatten —
   die Zahl trägt, nicht der Rahmen. */
.kennzahlen {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
@media (min-width: 34rem) { .kennzahlen { grid-template-columns: 1fr 1fr; } }
@media (min-width: 58rem) { .kennzahlen { grid-template-columns: repeat(3, 1fr); } }

.kennzahlen li {
  background: var(--bg);
  padding: clamp(1.1rem, 2.4vw, 1.75rem);
}
.kennzahlen b {
  display: block;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem);
  line-height: 1;
  color: var(--accent-tx);
  font-variant-numeric: lining-nums tabular-nums;
  margin-bottom: .45rem;
}
.kennzahlen span {
  font-family: var(--f-caps);
  font-size: .8125rem;
  letter-spacing: .1em;
  color: var(--fg-muted);
}

/* Während des Hochrechnens steht die Ziffer etwas zurück und rastet am
   Ende auf den vollen Goldton ein. Die Breite bleibt dank Tabellenziffern
   konstant, sonst würde die Zeile beim Zählen zappeln.

   Der volle Ton ist der Grundzustand — gedimmt wird nur, solange das
   Skript zählt. Andersherum blieben die Zahlen ohne JavaScript für
   immer blass. */
.kennzahlen b { transition: color 420ms ease-out; }
.kennzahlen b.ist-zaehlt {
  color: color-mix(in srgb, var(--accent-tx) 68%, transparent);
}

/* Balkenliste für Regionen und Zeitverteilung. Reines CSS, keine
   Diagrammbibliothek — und damit auch kein externer Request. */
.balkenliste { list-style: none; margin: var(--sp-4) 0 0; padding: 0; }
.balkenliste > li + li { margin-top: var(--sp-3); }

.balken__kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-2); flex-wrap: wrap;
  margin-bottom: .5rem;
}
.balken__name {
  font-family: var(--f-display);
  font-size: 1.15rem;
}
.balken__wert {
  font-family: var(--f-caps);
  font-size: .75rem;
  letter-spacing: .1em;
  color: var(--accent-tx);
  font-variant-numeric: lining-nums tabular-nums;
}
.balken__spur {
  height: 6px;
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  overflow: hidden;
}
.balken__fuellung {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(max(var(--anteil, 0), .015));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--ahnengold), var(--ahnengold-hell));
}
.ist-sichtbar .balken__fuellung {
  animation: balkenWachsen 900ms cubic-bezier(.22,.61,.36,1) var(--verzug, 0ms) backwards;
}
@keyframes balkenWachsen { from { transform: scaleX(0); } }


.balken__zusatz {
  margin: .5rem 0 0;
  font-size: .8125rem;
  color: var(--fg-muted);
  max-width: 46em;
}

.quellenliste { margin: 0; }
.quellenliste dt {
  font-family: var(--f-caps);
  font-size: 1rem;
  letter-spacing: .04em;
  margin-top: var(--sp-3);
}
.quellenliste dt:first-child { margin-top: 0; }
.quellenliste dd {
  margin: .35rem 0 0;
  color: var(--fg-muted);
  font-size: var(--fs-small);
  max-width: 42em;
}

.faq { border-top: 1px solid var(--border); }
.faq details {
  border-bottom: 1px solid var(--border);
}
.faq summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2);
  padding: 1.35rem 0;
  cursor: pointer;
  font-family: var(--f-display);
  font-size: var(--fs-h3);
  line-height: 1.3;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--f-mono);
  font-size: 1.25rem;
  color: var(--accent-tx);
  flex: none;
  transition: transform var(--tr);
}
.faq details[open] summary::after { content: "–"; }
.faq details > div {
  padding-bottom: 1.5rem;
  max-width: var(--lese);
  color: var(--fg-muted);
}


/* 12 — Lesestrecke ========================================== */

/* Zwei Maße statt einem: Fließtext bleibt auf Satzbreite (~68
   Zeichen), Tabellen und Abbildungen dürfen breiter werden. Sonst
   werden dreispaltige Referenztabellen unlesbar gequetscht. */
.prosa { max-width: 52rem; }
.prosa > p,
.prosa > ul,
.prosa > ol,
.prosa > h2,
.prosa > h3,
.prosa > .marginalie { max-width: var(--lese); }
.prosa > .tabelle-scroll,
.prosa > figure,
.prosa > .karte { max-width: none; }
.prosa > * + * { margin-top: var(--sp-3); }
.prosa h2 { margin-top: var(--sp-5); font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem); }
.prosa h3 { margin-top: var(--sp-4); }
.prosa ul, .prosa ol { padding-left: 1.25rem; }
.prosa li { margin-bottom: .5rem; }
.prosa img, .prosa figure { max-width: 100%; }

.prosa--initial > p:first-of-type::first-letter {
  float: left;
  font-family: var(--f-display);
  font-size: 3.9em;
  line-height: .82;
  padding: .06em .12em 0 0;
  color: var(--accent-tx);
}

.artikel-kopf { max-width: 42rem; }
.artikel-meta {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  color: var(--fg-muted);
  margin-top: var(--sp-2);
}

.marginalie {
  border-left: 2px solid var(--accent);
  padding: .2rem 0 .2rem 1.15rem;
  margin-block: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--fg-muted);
  max-width: 34em;
}
.marginalie b {
  display: block;
  font-family: var(--f-caps);
  font-weight: 400;
  font-size: .9375rem;
  letter-spacing: .05em;
  color: var(--fg);
  margin-bottom: .2rem;
}

.tabelle-lese { width: 100%; border-collapse: collapse; font-size: var(--fs-small); margin-block: var(--sp-3); }
.tabelle-lese th, .tabelle-lese td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.tabelle-lese th { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .12em; font-weight: 500; color: var(--fg-muted); }
.tabelle-lese th:first-child, .tabelle-lese td:first-child { padding-left: 0; }
.tabelle-lese tbody tr:nth-child(odd) td { background: color-mix(in srgb, var(--fg) 3.5%, transparent); }
.tabelle-scroll { overflow-x: auto; }

/* Inhaltsverzeichnis im Stil eines Buchregisters */
.register-liste { list-style: none; margin: 0; padding: 0; }
.register-liste li { border-bottom: 1px solid var(--border); }
.register-liste a {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  gap: var(--sp-2);
  align-items: baseline;
  padding: 1.05rem 0;
  text-decoration: none;
  color: var(--fg);
  transition: color var(--tr);
}
.register-liste a:hover { color: var(--accent-tx); }
.register-liste .nr {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  color: var(--accent-tx);
  font-variant-numeric: tabular-nums;
}
.register-liste .titel { font-family: var(--f-display); font-size: 1.15rem; line-height: 1.3; }
.register-liste .pfeil { font-family: var(--f-mono); font-size: .8125rem; color: var(--accent-tx); }


/* 13 — Formulare ============================================ */

.feld { margin-bottom: var(--sp-3); }
.feld label {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: .14em;
  color: var(--fg);
  margin-bottom: .55rem;
}
.feld .pflicht { color: var(--accent-tx); }
.feld .hilfe {
  display: block;
  font-family: var(--f-text);
  font-size: .875rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg-muted);
  margin-top: .3rem;
}

.feld input, .feld textarea, .feld select {
  width: 100%;
  min-height: 2.875rem;
  padding: .75rem .9rem;
  background: var(--surface);
  border: 1px solid var(--border-kraeftig);
  border-radius: 1px;
  color: var(--fg);
  font-family: var(--f-text);
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color var(--tr);
}
.feld textarea { min-height: 8rem; resize: vertical; }
.feld input:hover, .feld textarea:hover, .feld select:hover { border-color: var(--accent); }
.feld input::placeholder, .feld textarea::placeholder { color: var(--fg-muted); opacity: .7; }

.feld .fehler {
  display: none;
  font-family: var(--f-mono);
  font-size: .75rem;
  letter-spacing: .03em;
  color: #F0A9A9;
  margin-top: .45rem;
}
[data-ground="hell"] .feld .fehler { color: #9B1C1C; }
.feld.hat-fehler .fehler { display: block; }
.feld.hat-fehler input, .feld.hat-fehler textarea, .feld.hat-fehler select { border-color: #F0A9A9; }
[data-ground="hell"] .feld.hat-fehler input,
[data-ground="hell"] .feld.hat-fehler textarea { border-color: #9B1C1C; }

.feld-paar { display: grid; gap: var(--sp-3); }
@media (min-width: 40rem) { .feld-paar { grid-template-columns: 1fr 1fr; } }

.feld--kontroll { display: flex; align-items: flex-start; gap: .8rem; }
.feld--kontroll input {
  width: 1.15rem; height: 1.15rem; min-height: 0;
  margin-top: .3rem; flex: none; accent-color: var(--ahnengold);
}
.feld--kontroll label {
  text-transform: none; letter-spacing: 0;
  font-family: var(--f-text); font-size: var(--fs-small);
  margin-bottom: 0; line-height: 1.6;
}

/* Honigtopf gegen Bots — für Menschen unsichtbar, aber nicht
   display:none, damit Ausfüllautomaten ihn finden. */
.honigtopf {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0; height: 0; overflow: hidden;
}

.meldung {
  border: 1px solid var(--accent);
  border-left-width: 3px;
  padding: var(--sp-3);
  margin-bottom: var(--sp-4);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.meldung h2 { font-size: var(--fs-h3); margin-bottom: .4rem; }
.meldung p { margin-bottom: 0; font-size: var(--fs-small); }


/* 14 — Fußbereich =========================================== */

.fuss {
  position: relative;
  background: var(--grund-tief);
  color: var(--elfenbein);
  padding-block: var(--sp-7) var(--sp-4);
  border-top: 1px solid rgba(201,154,91,.22);
  overflow: hidden;
}
.fuss__wappen {
  position: absolute;
  right: -4rem; bottom: -6rem;
  width: 24rem;
  color: var(--ahnengold);
  opacity: .04;
  pointer-events: none;
}
.fuss__raster {
  position: relative;
  display: grid;
  gap: var(--sp-5);
}
@media (min-width: 48rem)  { .fuss__raster { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 68rem)  { .fuss__raster { grid-template-columns: 1.6fr 1fr 1fr 1.1fr; } }

.fuss h2 {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--ahnengold-hell);
  margin-bottom: var(--sp-2);
}
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: .55rem; }
.fuss a {
  color: rgba(230,232,240,.8);
  text-decoration: none;
  font-size: var(--fs-small);
  transition: color var(--tr);
}
.fuss a:hover { color: var(--ahnengold-hell); }
.fuss address {
  font-style: normal;
  font-size: var(--fs-small);
  color: rgba(230,232,240,.8);
  line-height: 1.85;
}
.fuss__unten {
  position: relative;
  margin-top: var(--sp-6);
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(201,154,91,.18);
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .05em;
  color: rgba(230,232,240,.5);
}
.fuss__kekule {
  position: relative;
  max-width: 34em;
  font-size: .75rem;
  line-height: 1.7;
  color: rgba(230,232,240,.45);
  margin-top: var(--sp-4);
}


/* 15 — Bewegung ============================================= */

/* Grundregel: Bewegung erklärt eine Beziehung oder lenkt den Blick.
   Alles hier läuft über transform und opacity, damit kein Layout
   neu berechnet wird. prefers-reduced-motion schaltet es ab. */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
}
[data-reveal].ist-sichtbar {
  opacity: 1;
  transform: none;
  transition: opacity 620ms cubic-bezier(.22,.61,.36,1),
              transform 620ms cubic-bezier(.22,.61,.36,1);
}

/* Gestaffelter Einlauf für Listen, Karten und Tabellenzeilen.
   Die Verzögerung setzt das Skript je Kind. */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(16px);
}
[data-stagger].ist-sichtbar > * {
  opacity: 1;
  transform: none;
  transition: opacity 520ms cubic-bezier(.22,.61,.36,1) var(--verzug, 0ms),
              transform 520ms cubic-bezier(.22,.61,.36,1) var(--verzug, 0ms);
}

/* Hero: Die Überschrift baut sich zeilenweise auf, der Rest folgt.
   Ein einziger orchestrierter Moment beim Laden.

   Wichtig: Der Grundzustand ist immer der sichtbare. Die Animation
   holt ihn über „backwards“ nur nach vorne. Bliebe der Grundzustand
   unsichtbar, wäre der Inhalt weg, sobald eine Animation nicht läuft
   — etwa in gedrosselten Hintergrund-Tabs. */
.hero__titel .zeile { display: block; overflow: hidden; }
.hat-eintritt .hero__titel .zeile > span {
  display: block;
  animation: zeileHoch 900ms cubic-bezier(.16,1,.3,1) backwards;
  animation-delay: calc(var(--i, 0) * 95ms + 120ms);
}
@keyframes zeileHoch {
  from { transform: translateY(105%); }
  to   { transform: none; }
}

.hat-eintritt .hero__eintritt {
  animation: sanftAuf 800ms cubic-bezier(.22,.61,.36,1) backwards;
  animation-delay: var(--verzug, 0ms);
}
@keyframes sanftAuf {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Das Wappen im Hero atmet sehr langsam. */
.hero__wappen {
  animation: wappenAtmen 34s ease-in-out infinite alternate;
}
@keyframes wappenAtmen {
  from { transform: scale(1) rotate(0deg);      opacity: .045; }
  to   { transform: scale(1.06) rotate(2.5deg); opacity: .075; }
}

/* Scroll-Fortschritt als Haarlinie unter dem Kopf. */
.fortschritt {
  position: fixed; left: 0; top: 0;
  height: 2px; width: 100%;
  z-index: calc(var(--z-kopf) + 1);
  transform-origin: 0 50%;
  transform: scaleX(var(--anteil, 0));
  background: linear-gradient(90deg, var(--ahnengold), var(--ahnengold-hell));
  pointer-events: none;
}

/* Der Kopf verdichtet sich beim Scrollen. */
.kopf { transition: min-height 260ms ease, background 260ms ease, box-shadow 260ms ease; }
.kopf.ist-verdichtet {
  box-shadow: 0 12px 40px -24px rgba(0,0,0,.9);
  background: color-mix(in srgb, var(--grund-tief) 97%, transparent);
}
.kopf.ist-verdichtet .kopf__innen { min-height: 3.6rem; }
.kopf__innen { transition: min-height 260ms ease; }

/* Schaltflächen: ein Lichtstreif wandert beim Überfahren durch. */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%,
              rgba(255,255,255,.28) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform 620ms cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
.btn:hover::after { transform: translateX(130%); }

/* Textverweise: die Goldlinie wächst von links. */
.tlink { position: relative; border-bottom-color: transparent; }
.tlink::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--accent);
  transform: scaleX(.28); transform-origin: 0 50%;
  transition: transform 380ms cubic-bezier(.22,.61,.36,1);
}
.tlink:hover::after, .tlink:focus-visible::after { transform: scaleX(1); }

/* Karten und Registerzeilen heben sich leicht an. */
.karte {
  transition: border-color 260ms ease, transform 260ms cubic-bezier(.22,.61,.36,1),
              box-shadow 260ms ease;
}
.karte:hover {
  border-color: var(--border-kraeftig);
  transform: translateY(-3px);
  box-shadow: 0 18px 44px -30px rgba(0,0,0,.9);
}

.register-liste a { position: relative; }
.register-liste a::before {
  content: "";
  position: absolute; left: -1rem; right: -1rem; top: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(212,168,99,.10), transparent 70%);
  opacity: 0;
  transition: opacity 260ms ease;
  pointer-events: none;
}
.register-liste a:hover::before, .register-liste a:focus-visible::before { opacity: 1; }
.register-liste .pfeil { transition: transform 260ms cubic-bezier(.22,.61,.36,1); }
.register-liste a:hover .pfeil { transform: translateX(5px); }

/* Zeitstrahl: die Goldlinie wächst mit, die Marken poppen auf. */
.strahl > li { transition: border-color 400ms ease; }
.strahl > li::before { transition: transform 320ms cubic-bezier(.34,1.56,.64,1), background 260ms ease, color 260ms ease; }
.strahl > li:hover::before { transform: translateX(-50%) scale(1.14); background: var(--accent); color: var(--auf-akzent); }

/* Ledger-Zeilen reagieren dezent. */
.ledger tbody tr { transition: background 240ms ease; }
.ledger tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }

/* Akkordeon öffnet weich. */
.faq summary::after { transition: transform 260ms cubic-bezier(.34,1.56,.64,1), color 200ms ease; }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq summary:hover { color: var(--accent-tx); }

/* Archivbilder ziehen beim Überfahren minimal an. */
.archivbild img { transition: transform 900ms cubic-bezier(.22,.61,.36,1), filter 500ms ease; }
.archivbild:hover img { transform: scale(1.035); filter: grayscale(1) contrast(1.2) brightness(1.02); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-stagger] > * {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .hero__titel .zeile > span, .hero__eintritt {
    transform: none !important; opacity: 1 !important; animation: none !important;
  }
  .hero__wappen, .tafel::before { animation: none !important; }
  .fortschritt { display: none; }
  .btn::after { display: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .kopf, .nav-mobil, .skip, .aktionen, .hero__wappen, .fuss__wappen, .fortschritt { display: none !important; }
  body { background: #fff; color: #000; }
}