/* ============================================================
   salzbibel.de — Stilblatt
   Eine Datei für die ganze Seite. Keine Webfonts, keine Bilder
   im Stil, kein Kartenschatten. Ruhig, gelehrt, wie eine Edition.
   ============================================================ */

/* ------------------------------------------------------------
   1. Farben und Maße
   Grundzustand ist hell: Pergament, dunkles Braungrau, Tiefrot
   als Anspielung auf die Rubrizierung der Handschrift.
   ------------------------------------------------------------ */
:root{
  /* helle Fassung (Standard) */
  --grund:#f6f1e6;        /* Pergament / Werkdruckpapier */
  --grund-2:#eee7d6;      /* leicht abgesetzte Fläche: Kästen, Tabellenkopf */
  --grund-3:#e4dbc5;      /* Zebrastreifen, Kopf des Zeitleistenelements */
  --tinte:#2a2521;        /* Fließtext, sehr dunkles Braungrau */
  --tinte-2:#4f4841;      /* Nebentext */
  --tinte-3:#645b53;      /* Marginalien, Nachweise (5,9:1 auf Pergament, 4,8:1 auf --grund-3) */
  --rot:#8a1c1c;          /* Tiefrot — sparsam */
  --rot-hell:#a83a30;     /* Hover */
  --rot-fein:rgba(138,28,28,.12);
  --linie:#cdc0a9;        /* Haarlinien */
  --linie-fein:#e0d6c2;
  --linie-stark:#857a6e;  /* Rahmen von Bedienelementen (≥ 3:1) */
  --fokus:#8a1c1c;
  --fokus-innen:#f6f1e6;

  /* dunkle Fassung: Werte nur hier, unten wird nur zugewiesen */
  --d-grund:#1b1815;
  --d-grund-2:#241f1a;
  --d-grund-3:#2f2921;
  --d-tinte:#ebe3d3;
  --d-tinte-2:#cfc5b3;
  --d-tinte-3:#aea38f;
  --d-rot:#e39b8c;
  --d-rot-hell:#f0b4a6;
  --d-rot-fein:rgba(227,155,140,.16);
  --d-linie:#4a4136;
  --d-linie-fein:#332c25;
  --d-linie-stark:#877b6c;
  --d-fokus:#f0b4a6;
  --d-fokus-innen:#1b1815;

  /* Schriften — reine Systemschriften mit vollständigen Fallbacks */
  --serif:"Libertinus Serif","Linux Libertine O",Charter,"Bitstream Charter","Sitka Text",
          Cambria,"Iowan Old Style",Georgia,"Times New Roman",Times,serif;
  --sans:system-ui,-apple-system,"Segoe UI","Noto Sans",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --lesbar:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",Verdana,"Noto Sans",Tahoma,
           "DejaVu Sans","Segoe UI",Arial,sans-serif;
  --text:var(--serif);     /* Fließtext und Überschriften */
  --bedien:var(--sans);    /* Bedienelemente, Tabellen, Beschriftungen */

  /* Maße */
  --satz:68ch;             /* Textspalte — nie breiter */
  --marg:17rem;            /* Marginalspalte auf breiten Bildschirmen */
  --rand:1.25rem;          /* Außenrand auf schmalen Bildschirmen */
  --spalte:2.75rem;        /* Abstand Text ↔ Marginalie */
  --breit:64rem;           /* breite Seiten (Karte, Tabellenwerke) */
  --zeilen:1.55;
  --grundgroesse:1.0625rem;
  --kopf-hoehe:3.5rem;     /* Höhe der klebenden Kopfleiste (eigener Wert, damit sie mit der Schrift wächst) */
  --kopf-h:var(--kopf-hoehe); /* daran richten sich Filterleiste und Sprungziele aus; das Skript misst nach */
  --leiste-h:0px;          /* Höhe der klebenden Filterleiste; setzt das Skript, sonst Schätzwert in .gefiltert */

  color-scheme:light;
}

/* Dunkelmodus doppelt: Systemeinstellung — außer, der Nutzer hat „hell“
   gewählt — und ausdrückliche Wahl „dunkel“. Beide Blöcke gemeinsam ändern. */
@media (prefers-color-scheme: dark){
  :root:not([data-thema="hell"]){
    --grund:var(--d-grund); --grund-2:var(--d-grund-2); --grund-3:var(--d-grund-3);
    --tinte:var(--d-tinte); --tinte-2:var(--d-tinte-2); --tinte-3:var(--d-tinte-3);
    --rot:var(--d-rot); --rot-hell:var(--d-rot-hell); --rot-fein:var(--d-rot-fein);
    --linie:var(--d-linie); --linie-fein:var(--d-linie-fein); --linie-stark:var(--d-linie-stark);
    --fokus:var(--d-fokus); --fokus-innen:var(--d-fokus-innen);
    color-scheme:dark;
  }
}
:root[data-thema="dunkel"]{
  --grund:var(--d-grund); --grund-2:var(--d-grund-2); --grund-3:var(--d-grund-3);
  --tinte:var(--d-tinte); --tinte-2:var(--d-tinte-2); --tinte-3:var(--d-tinte-3);
  --rot:var(--d-rot); --rot-hell:var(--d-rot-hell); --rot-fein:var(--d-rot-fein);
  --linie:var(--d-linie); --linie-fein:var(--d-linie-fein); --linie-stark:var(--d-linie-stark);
  --fokus:var(--d-fokus); --fokus-innen:var(--d-fokus-innen);
  color-scheme:dark;
}

/* Hoher Kontrast: reines Weiß/Schwarz, kräftigere Linien, Links immer unterstrichen */
:root[data-kontrast="hoch"]{
  --grund:#fff; --grund-2:#f2f2f2; --grund-3:#e6e6e6;
  --tinte:#000; --tinte-2:#111; --tinte-3:#222;
  --rot:#6e0f0f; --rot-hell:#4a0a0a; --rot-fein:rgba(110,15,15,.15);
  --linie:#333; --linie-fein:#777; --linie-stark:#000; --fokus:#000; --fokus-innen:#fff;
}
@media (prefers-color-scheme: dark){
  :root:not([data-thema="hell"])[data-kontrast="hoch"]{
    --grund:#000; --grund-2:#111; --grund-3:#222;
    --tinte:#fff; --tinte-2:#f0f0f0; --tinte-3:#e0e0e0;
    --rot:#ffb8a8; --rot-hell:#ffd0c6; --rot-fein:rgba(255,184,168,.2);
    --linie:#ccc; --linie-fein:#888; --linie-stark:#fff; --fokus:#fff; --fokus-innen:#000;
  }
}
:root[data-thema="dunkel"][data-kontrast="hoch"]{
  --grund:#000; --grund-2:#111; --grund-3:#222;
  --tinte:#fff; --tinte-2:#f0f0f0; --tinte-3:#e0e0e0;
  --rot:#ffb8a8; --rot-hell:#ffd0c6; --rot-fein:rgba(255,184,168,.2);
  --linie:#ccc; --linie-fein:#888; --linie-stark:#fff; --fokus:#fff; --fokus-innen:#000;
}
:root[data-kontrast="hoch"] a{text-decoration:underline}
:root[data-kontrast="hoch"] .kasten,
:root[data-kontrast="hoch"] .element,
:root[data-kontrast="hoch"] .bild-rahmen{border-width:2px}

/* Skalierung, Zeilenabstand, Schriftart — gesetzt über data-Attribute auf <html> */
:root[data-groesse="klein"]{--grundgroesse:.9375rem}
:root[data-groesse="gross"]{--grundgroesse:1.2rem}
:root[data-groesse="sehr-gross"]{--grundgroesse:1.4rem}
:root[data-zeilen="eng"]{--zeilen:1.4}
:root[data-zeilen="weit"]{--zeilen:1.85}
:root[data-schrift="sans"]{--text:var(--sans)}
:root[data-schrift="lesbar"]{--text:var(--lesbar);--bedien:var(--lesbar);letter-spacing:.01em}

/* Bewegung aus: alle Übergänge und Animationen abschalten */
@media (prefers-reduced-motion: reduce){
  :root:not([data-bewegung="an"]),
  :root:not([data-bewegung="an"]) *,
  :root:not([data-bewegung="an"]) *::before,
  :root:not([data-bewegung="an"]) *::after{
    transition:none !important; animation:none !important; scroll-behavior:auto !important;
  }
}
:root[data-bewegung="aus"],
:root[data-bewegung="aus"] *,
:root[data-bewegung="aus"] *::before,
:root[data-bewegung="aus"] *::after{
  transition:none !important; animation:none !important; scroll-behavior:auto !important;
}

/* ------------------------------------------------------------
   2. Grundlagen
   ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{
  font-size:var(--grundgroesse);
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--kopf-h) + 1rem);
  background:var(--grund);
}
body{
  margin:0;
  min-width:320px;
  overflow-x:hidden;
  font-family:var(--text);
  font-size:1rem;
  line-height:var(--zeilen);
  color:var(--tinte);
  background:var(--grund);
  text-rendering:optimizeLegibility;
  font-kerning:normal;
  hanging-punctuation:first last;
}
img,svg,video{max-width:100%;height:auto;display:block}
iframe{max-width:100%}
p,ul,ol,dl,blockquote,figure,table,pre{margin:0 0 1.1em}
p{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
p + p{margin-top:-.25em}
ul,ol{padding-left:1.4em}
li{margin:.25em 0}
b,strong{font-weight:700}
small{font-size:.85em}
hr{border:0;border-top:1px solid var(--linie);margin:2.5rem 0;width:6rem}
abbr[title]{text-decoration:underline dotted;text-underline-offset:.15em}
sup,sub{line-height:0;font-size:.75em}
code,kbd,samp{font-family:ui-monospace,"Cascadia Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;font-size:.92em;overflow-wrap:anywhere}
blockquote{padding-left:1.25rem;border-left:1px solid var(--rot);color:var(--tinte-2);font-style:normal}
blockquote cite{display:block;font-style:normal;font-size:.9em;color:var(--tinte-3);margin-top:.4em}
::selection{background:var(--rot-fein);color:var(--tinte)}

/* Verweise: im Fließtext dezent unterstrichen, Rot nur beim Zeigen */
a{color:inherit;text-decoration:underline;text-decoration-color:var(--linie-stark);
  text-decoration-thickness:1px;text-underline-offset:.18em;
  transition:color .12s ease,text-decoration-color .12s ease}
a:hover{color:var(--rot);text-decoration-color:var(--rot)}
a[href^="http"]:not([href*="salzbibel.de"])::after{
  content:"\2197" / "";font-size:.7em;vertical-align:super;margin-left:.15em;color:var(--tinte-3)}
figcaption a::after,.nachweis a::after{content:none}

/* Fokus: kräftig, immer sichtbar, nie outline:none */
:focus-visible{outline:3px solid var(--fokus);outline-offset:3px;border-radius:2px;
  box-shadow:0 0 0 5px var(--fokus-innen)}
:focus:not(:focus-visible){outline:none}

/* Sprungmarke */
.sprung{position:absolute;left:1rem;top:-4rem;z-index:100;padding:.5rem 1rem;
  background:var(--tinte);color:var(--grund);font-family:var(--bedien);text-decoration:none}
.sprung:focus-visible{top:1rem}

/* Nur für Vorleseprogramme; nur für Skripte */
.nur-vorleser{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.nur-code{display:none}

/* ------------------------------------------------------------
   3. Überschriften und Kolumnentitel
   ------------------------------------------------------------ */
h1,h2,h3,h4,h5,h6{font-family:var(--text);font-weight:400;line-height:1.2;
  color:var(--tinte);margin:0 0 .5em;hyphens:manual;text-wrap:balance}
h1{font-size:2.1rem;letter-spacing:-.01em;margin-top:.2em}
h2{font-size:1.5rem;margin-top:2.2em;padding-top:.7em;border-top:1px solid var(--linie);position:relative}
h3{font-size:1.2rem;margin-top:1.8em;font-weight:600}
h4{font-size:1.05rem;margin-top:1.5em;font-weight:600;font-variant-caps:small-caps;letter-spacing:.04em}
h5,h6{font-size:1rem;margin-top:1.2em;font-weight:600}
/* Das Rubrum: ein kurzes rotes Stück auf der Haarlinie über Überschriften zweiter Ordnung */
h2::before{content:"";position:absolute;left:0;top:-1px;width:2.5rem;height:1px;background:var(--rot)}

.kolumnentitel,.dach{font-family:var(--text);font-variant-caps:small-caps;letter-spacing:.12em;
  font-size:.95rem;color:var(--rot);margin:0 0 .6em}
.untertitel{font-size:1.2rem;color:var(--tinte-2);margin:.2em 0 0;text-wrap:balance}
.seitenkopf{margin:1.5rem 0 2.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--linie)}
.seitenkopf::after{content:"";display:block;width:3rem;height:1px;background:var(--rot);margin-top:1.5rem}
/* Die erste Zwischenüberschrift rückt näher an den Seitenkopf */
.seitenkopf + * > h2:first-child,.seitenkopf + h2{margin-top:.6em}

/* ------------------------------------------------------------
   4. Kopf, Navigation, Pfad, Fuß
   Die Kopfleiste klebt oben und bleibt bei jedem Scrollen sichtbar.
   Sie ist genau --kopf-h hoch (fest, damit nichts springt) und
   deckend, damit kein Text durchscheint. Drei Schalter nach der
   Kästchen-Technik — Suche, Menü, Filter — arbeiten ohne Skript;
   das Skript macht aus den Knöpfen echte Taster.
   ------------------------------------------------------------ */
.kopf{position:sticky;top:0;z-index:90;height:var(--kopf-hoehe);
  border-bottom:1px solid var(--linie);background:var(--grund);font-family:var(--bedien)}
.kopf-zeile{max-width:calc(var(--satz) + var(--marg) + var(--spalte) + 2*var(--rand) + 4rem);
  height:100%;margin:0 auto;padding:0 var(--rand);display:flex;align-items:center;
  gap:.5rem 1.25rem;position:relative}
.wortmarke{font-family:var(--text);text-decoration:none;display:inline-flex;align-items:baseline;gap:.6em;
  margin-right:auto;white-space:nowrap;flex:none}
.wortmarke-name{font-size:1.35rem;letter-spacing:.01em;color:var(--tinte)}
.wortmarke-name::first-letter{color:var(--rot)}
.wortmarke-zusatz{font-variant-caps:small-caps;letter-spacing:.1em;font-size:.85rem;color:var(--tinte-3)}
.wortmarke:hover .wortmarke-name{color:var(--rot)}
/* Auf breiten Bildschirmen ist das Menü kein Kasten: seine Teile stehen direkt in der Zeile */
.kopf-menue{display:contents}
.hauptnav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:nowrap;gap:.2rem 1.25rem}
.hauptnav a{text-decoration:none;font-size:.95rem;letter-spacing:.02em;color:var(--tinte-2);white-space:nowrap;
  padding:.25em 0;border-bottom:1px solid transparent}
.hauptnav a:hover{color:var(--rot);border-bottom-color:var(--rot)}
.hauptnav a[aria-current]{color:var(--tinte);border-bottom-color:var(--rot)}
.kopf-rechts{display:flex;align-items:center;gap:1rem;order:4}

/* Die Schalter: das Kästchen ist unsichtbar, aber erreichbar (Leertaste schaltet); der
   Knopf ist sein Label. Sichtbar werden die Knöpfe erst auf schmalen Bildschirmen. */
.schalter{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap;border:0}
.kopf-knopf{display:none;align-items:center;gap:.35em;height:2.25rem;padding:0 .55em;flex:none;
  border:1px solid var(--linie-stark);color:var(--tinte-2);font-size:.85rem;line-height:1;cursor:pointer;
  user-select:none;-webkit-user-select:none;background:transparent;white-space:nowrap}
.kopf-knopf .ikone{width:1.15rem;height:1.15rem;flex:none}
.kopf-knopf:hover{color:var(--rot);border-color:var(--rot)}
.kopf-knopf[aria-expanded="true"],
.schalter:checked + .kopf-knopf{background:var(--tinte);color:var(--grund);border-color:var(--tinte)}
.schalter:focus-visible + .kopf-knopf{outline:3px solid var(--fokus);outline-offset:2px}
body:has(> #filter-auf:focus-visible) .filter-knopf{outline:3px solid var(--fokus);outline-offset:2px}
body:has(> #filter-auf:checked) .filter-knopf{background:var(--tinte);color:var(--grund);border-color:var(--tinte)}
body:has(> #filter-auf:checked) .filter-knopf .filter-zahl{background:var(--grund);color:var(--tinte)}
.filter-zahl{display:inline-grid;place-items:center;min-width:1.35em;height:1.35em;padding:0 .3em;
  border-radius:1em;background:var(--rot);color:var(--grund);font-size:.72rem;font-weight:600;
  font-variant-numeric:tabular-nums;line-height:1}
.filter-zahl:empty{display:none}
.kopf-knopf[aria-expanded="true"] .filter-zahl,.schalter:checked + .kopf-knopf .filter-zahl{background:var(--grund);color:var(--tinte)}

/* Suche: auf breiten Bildschirmen ein Feld in der Zeile, sonst hinter der Lupe */
.suche{display:flex;align-items:center;order:3;height:2.1rem;border:1px solid var(--linie-stark);background:var(--grund)}
.suche:focus-within{border-color:var(--rot)}
.suche input{font:inherit;font-size:.9rem;color:var(--tinte);background:transparent;border:0;border-radius:0;
  width:9rem;height:100%;padding:0 .6em;min-width:0}
.suche input::-webkit-search-decoration{-webkit-appearance:none}
.suche input:focus-visible{outline-offset:-3px;box-shadow:none}
.suche-los{display:inline-grid;place-items:center;height:100%;padding:0 .45em;border:0;background:transparent;
  color:var(--tinte-2);cursor:pointer}
.suche-los .ikone{width:1.1rem;height:1.1rem}
.suche-los:hover{color:var(--rot)}

/* Leiste „Darstellung“: ohne Skript unsichtbar, dann greift der Verweis zur Seite */
.darstellung-link{font-size:.9rem;text-decoration:none;color:var(--tinte-2);border-bottom:1px solid transparent;white-space:nowrap}
.darstellung-link:hover{color:var(--rot);border-bottom-color:var(--rot)}
:root[data-js] .darstellung-link{display:none}
:root:not([data-js]) .leiste{display:none}
.leiste{font-size:.9rem}
.leiste > summary{list-style:none;cursor:pointer;color:var(--tinte-2);padding:.25em 0;white-space:nowrap;
  border-bottom:1px solid transparent;display:inline-block}
.leiste > summary::-webkit-details-marker{display:none}
.leiste > summary::before{content:"◐" / "";margin-right:.4em;color:var(--rot)}
.leiste > summary:hover,.leiste[open] > summary{color:var(--rot);border-bottom-color:var(--rot)}
.leiste-inhalt{position:absolute;right:var(--rand);top:calc(100% + 1px);z-index:96;
  width:min(26rem,calc(100vw - 2*var(--rand)));max-height:calc(100vh - var(--kopf-h) - 1rem);overflow:auto;
  background:var(--grund);border:1px solid var(--linie);border-top:0;padding:1rem 1.25rem}
.leiste-hinweis{margin:.75rem 0 0;font-size:.85rem;color:var(--tinte-3)}

/* Bis 64 em: der Zusatz der Wortmarke fällt weg, die Suche klappt hinter der Lupe auf */
@media (max-width:64em){
  .wortmarke-zusatz{display:none}
  .suche-knopf{display:inline-flex}
  .suche{display:none;position:absolute;left:0;right:0;top:100%;z-index:96;height:auto;
    border:0;border-bottom:1px solid var(--linie);padding:.6rem var(--rand);background:var(--grund)}
  .suche input{flex:1;width:auto;height:2.25rem;border:1px solid var(--linie-stark);font-size:1rem}
  .suche input:focus-visible{outline-offset:1px}
  .suche-los{height:2.25rem;padding:0 .7em;border:1px solid var(--linie-stark);border-left:0}
  #suche-auf:checked ~ .suche{display:flex}
}

/* Unter 53,75 em (860 px): Hauptnavigation und Darstellung wandern in die Schublade
   hinter dem Menü-Knopf; der Filter-Knopf steht direkt daneben. */
@media (max-width:53.75em){
  :root{--kopf-hoehe:3.25rem}
  .kopf-zeile{gap:.4rem}
  .wortmarke-name{font-size:1.2rem}
  .menue-knopf,.filter-knopf{display:inline-flex}
  .kopf-menue{display:none;position:absolute;left:0;right:0;top:100%;z-index:95;
    max-height:calc(100vh - var(--kopf-h));overflow:auto;background:var(--grund);
    border-bottom:1px solid var(--linie);padding:.5rem var(--rand) 1rem}
  #menue-auf:checked ~ .kopf-menue{display:block}
  .hauptnav ul{flex-direction:column;gap:0}
  .hauptnav a{display:block;font-size:1.05rem;padding:.65em 0;border-bottom:1px solid var(--linie-fein)}
  .hauptnav a[aria-current]{border-bottom-color:var(--linie-fein);box-shadow:inset 3px 0 0 var(--rot);padding-left:.75em}
  .hauptnav a:hover{border-bottom-color:var(--linie-fein)}
  .kopf-rechts{display:block;padding-top:.75rem}
  .leiste,:root[data-js] .leiste{display:none}
  :root[data-js] .kopf-rechts .darstellung-link{display:inline-block}
  .leiste-inhalt{right:var(--rand);left:var(--rand);width:auto}
}
@media (max-width:25em){
  .kopf-knopf-text{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
  .kopf-knopf{padding:0 .45em}
}

/* Brotkrumenpfad */
.pfad{font-family:var(--bedien);font-size:.85rem;color:var(--tinte-3);
  max-width:calc(var(--satz) + var(--marg) + var(--spalte) + 2*var(--rand) + 4rem);margin:0 auto;padding:.7rem var(--rand) 0}
.pfad ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.2rem .3rem}
.pfad li + li::before{content:"›" / "";margin-right:.3rem;color:var(--rot)}
.pfad a{text-decoration:none;color:inherit}
.pfad a:hover{color:var(--rot)}
.pfad a[aria-current]{color:var(--tinte-2)}

/* Fußzeile */
.fuss{margin-top:5rem;border-top:1px solid var(--linie);font-family:var(--bedien);font-size:.88rem;color:var(--tinte-3)}
.fuss > *{max-width:calc(var(--satz) + var(--marg) + var(--spalte) + 2*var(--rand) + 4rem);margin:0 auto;padding:0 var(--rand)}
.fussnav ul{list-style:none;margin:0;padding:1.4rem 0 .5rem;display:flex;flex-wrap:wrap;gap:.3rem 1.4rem}
.fussnav a{text-decoration:none;color:var(--tinte-2)}
.fussnav a:hover{color:var(--rot)}
.fuss-zeile{display:flex;flex-wrap:wrap;gap:.3rem 1.5rem;justify-content:space-between;padding-bottom:2rem !important}

/* ------------------------------------------------------------
   5. Das Raster: Textspalte + Marginalspalte
   Schmal: eine Spalte, Marginalie fällt unter den Absatz.
   Breit (≥ 64em): drei Spalten — Rand, Text (≤ 68 Zeichen),
   Abstand, Marginalie, Rand.
   ------------------------------------------------------------ */
main{
  --raster:
    [voll-start] var(--rand)
    [text-start] minmax(0,1fr)
    [text-end rand-start] 0
    [rand-end] var(--rand)
    [voll-end];
  display:grid;
  grid-template-columns:var(--raster);
  column-gap:0;
  padding:0 0 2rem;
  min-height:40vh;
}
/* Alles Direkte landet in der Textspalte … */
:where(main,.gefiltert-inhalt) > *{grid-column:text}
/* … Gliederungen werden zu Unter-Rastern, damit auch ihre Kinder die Spalten sehen */
:where(main,.gefiltert-inhalt) > :where(section,article,div,form,nav),
.raster{grid-column:voll;display:grid;grid-template-columns:subgrid}
:where(main > section, main > article, main > div, main > form, main > nav,
  .gefiltert-inhalt > section, .gefiltert-inhalt > article, .gefiltert-inhalt > div,
  .gefiltert-inhalt > form, .gefiltert-inhalt > nav, .raster) > *{grid-column:text}
/* Gefilterte Listen: ein Block, in dem die Leiste kleben kann (ein Rasterfeld wäre
   ihr Käfig — sticky reicht nie über die eigene Zeile hinaus). Die Liste darin
   bekommt dasselbe Raster wie main, damit Marginalien ihre Spalte finden. */
.gefiltert{grid-column:voll;display:block;--leiste-h:13rem}   /* Schätzwert ohne Skript; das Skript misst */
.gefiltert-inhalt{display:grid;grid-template-columns:var(--raster);column-gap:0}
.gefiltert-inhalt [id]{scroll-margin-top:calc(var(--leiste-h) + .5rem)}

/* Ausnahmen: Marginalie, breite und volle Elemente */
.marginalie{grid-column:text}
.breit,.tabelle,.bild-voll,.karte,.faksimile,.zeitleiste{grid-column:text-start / rand-end}
.voll{grid-column:voll}
.bild-rand{grid-column:text}

@media (min-width:64em){
  main{
    --raster:
      [voll-start] minmax(var(--rand),1fr)
      [text-start] minmax(0,var(--satz))
      [text-end] var(--spalte)
      [rand-start] minmax(0,var(--marg))
      [rand-end] minmax(var(--rand),1fr)
      [voll-end];
  }
  .marginalie,.bild-rand{grid-column:rand;align-self:start}
  /* Ein Randbild steht in der Zeile des Absatzes (oder der Überschrift), hinter dem es
     im Quelltext folgt, und erstreckt sich über die folgenden Zeilen, statt eine eigene,
     bildhohe Zeile aufzumachen. Die Zahl der Zeilen lässt sich je Bild über
     kern.bild(…, zeilen=n) setzen; leere Zeilen am Ende einer Gliederung sind 0 hoch. */
  .bild-rand{grid-row:span 8}
}
/* Browser ohne Subgrid: Gliederungen als schlichte Blöcke in der Textspalte,
   die Marginalie fällt darunter. */
@supports not (grid-template-columns:subgrid){
  :where(main,.gefiltert-inhalt) > :where(section,article,div,form,nav),.raster,.element,.element-inhalt{
    display:block;grid-column:text}
  .marginalie,.bild-rand{grid-column:auto;grid-row:auto}
}

/* Breite Seiten (breit=True im Rahmen): eine Spalte bis --breit, keine Marginalspalte */
main.breit{--raster:[voll-start] minmax(var(--rand),1fr) [text-start] minmax(0,var(--breit)) [text-end rand-start] 0 [rand-end] minmax(var(--rand),1fr) [voll-end]}
main.breit .marginalie{grid-column:text}
main.breit .seitenkopf{max-width:var(--satz)}
main.breit p,main.breit li{max-width:var(--satz)}

/* Marginalien: klein, serifenlos, in Kapitälchen für Seitenzahlen */
.marginalie{font-family:var(--bedien);font-size:.82rem;line-height:1.4;color:var(--tinte-3);
  margin:0 0 1em;padding:.15em 0 .15em .75em;border-left:1px solid var(--linie);
  font-variant-numeric:tabular-nums}
.marginalie-seite,.marginalie-blatt{color:var(--rot);border-left-color:var(--rot);letter-spacing:.03em}
.marginalie a{text-decoration:none;border-bottom:1px solid var(--linie)}
@media (min-width:64em){
  .marginalie{margin-top:.35em;padding-left:.75em}
}

/* ------------------------------------------------------------
   6. Zeitleistenelement, Feedback
   ------------------------------------------------------------ */
.element{
  grid-column:text-start / rand-end;display:grid;grid-template-columns:subgrid;
  border-top:1px solid var(--linie);padding:1.4rem 0 1rem;margin:0 0 1rem;
  scroll-margin-top:.5rem}
:where(.element) > *{grid-column:text}
/* Der Inhalt eines Elements ist selbst ein Unter-Raster: Marginalien und Randbilder
   darin finden die Marginalspalte, auch innerhalb der Zeitleiste. */
.element-inhalt{grid-column:text-start / rand-end;display:grid;grid-template-columns:subgrid}
:where(.element-inhalt) > *{grid-column:text}
.element:target{background:linear-gradient(90deg,var(--rot-fein),transparent 30%);border-top-color:var(--rot)}
.element-titel{margin-top:0;font-size:1.15rem;font-weight:600}
.element-titel::before{content:"";display:inline-block;width:.45em;height:.45em;margin-right:.5em;
  background:var(--rot);vertical-align:.15em}
.element-inhalt > :last-child{margin-bottom:0}
.element-fuss{margin-top:.9rem;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:flex-end;
  font-family:var(--bedien);font-size:.82rem;color:var(--tinte-3)}
.feedback{text-decoration:none;color:var(--tinte-3);border-bottom:1px solid var(--linie);padding-bottom:.1em}
.feedback::before{content:"✎" / "";margin-right:.4em;color:var(--rot)}
.feedback:hover{color:var(--rot);border-bottom-color:var(--rot)}
.zeitleiste{display:grid;grid-template-columns:subgrid}
.zeitleiste > *{grid-column:text-start / rand-end}
.zeitleiste > h2,.zeitleiste > p{grid-column:text}

/* Handschriftenwortlaut und Übertragung */
.original{font-family:var(--text);color:var(--tinte);padding-left:1rem;border-left:2px solid var(--rot);
  font-variant-ligatures:common-ligatures discretionary-ligatures;hyphens:manual}
.original p{hyphens:manual}
.uebertragung{padding-left:1rem;border-left:1px solid var(--linie);color:var(--tinte-2)}
.original > :last-child,.uebertragung > :last-child{margin-bottom:0}
.original .zeile,.uebertragung .zeile{display:block}
.original .unsicher,.uebertragung .unsicher{text-decoration:underline dotted var(--tinte-3);text-underline-offset:.2em}
.original .seitenwechsel{font-family:var(--bedien);font-size:.75em;color:var(--rot);letter-spacing:.05em;
  font-variant-numeric:tabular-nums;user-select:none}
.original + .uebertragung{margin-top:1rem}

/* ------------------------------------------------------------
   7. Kästen
   ------------------------------------------------------------ */
.kasten{border:1px solid var(--linie);border-left-width:3px;padding:1rem 1.25rem;margin:1.5rem 0;
  background:var(--grund-2);font-size:.95rem}
.kasten > :last-child{margin-bottom:0}
.kasten-titel{font-family:var(--bedien);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tinte-3);margin:0 0 .5em}
.kasten-hinweis{border-left-color:var(--tinte-3)}
.kasten-warnung{border-left-color:var(--rot);background:var(--grund)}
.kasten-warnung .kasten-titel{color:var(--rot)}
.kasten-quelle{border-left-color:var(--linie);background:transparent;font-size:.9rem;color:var(--tinte-2)}
.kasten-offen{border-left-color:var(--rot);border-style:dashed;border-left-style:solid;background:transparent}
.kasten-offen .kasten-titel::before{content:"?" / "";display:inline-block;width:1.3em;height:1.3em;line-height:1.3em;
  text-align:center;border:1px solid var(--rot);color:var(--rot);margin-right:.5em;font-weight:600}

/* ------------------------------------------------------------
   8. Bilder, Faksimile
   ------------------------------------------------------------ */
.bild{margin:2rem 0}
.bild-rahmen{background-size:cover;background-position:center;border:1px solid var(--linie-fein);
  overflow:hidden;position:relative}
.bild-rahmen img{width:100%;height:100%;object-fit:contain;display:block}
.bild-verweis{display:block;text-decoration:none}
.bild-verweis:hover img{opacity:.96}
figcaption{font-family:var(--bedien);font-size:.82rem;line-height:1.45;color:var(--tinte-3);
  margin-top:.5rem;padding-top:.4rem;border-top:1px solid var(--linie-fein)}
figcaption .bildunterschrift{color:var(--tinte-2);font-family:var(--text);font-size:.92rem;display:block;margin-bottom:.2em}
.nachweis{display:block;font-size:.78rem}
.nachweis a{text-decoration:none;border-bottom:1px solid var(--linie)}
.nachweis a:hover{color:var(--rot);border-bottom-color:var(--rot)}
.bild-rand{margin:.5rem 0 1rem}
.bild-rand .bild-rahmen{border:1px solid var(--linie)}
.bild-rand figcaption{font-size:.75rem}
.bild-voll{margin:2.5rem 0}
.faksimile{margin:2rem 0}
.faksimile .bild-rahmen{background:var(--grund-2);border:1px solid var(--linie)}
.faksimile figure{margin:0}
.faksimile-reihe{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}

/* ------------------------------------------------------------
   9. Tabellen, Listen, Filter
   ------------------------------------------------------------ */
.tabelle{margin:1.5rem 0 2rem;overflow-x:auto;max-width:100%;
  border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);
  -webkit-overflow-scrolling:touch}
.tabelle table{border-collapse:collapse;width:100%;font-family:var(--bedien);font-size:.9rem;
  font-variant-numeric:tabular-nums;line-height:1.4}
.tabelle caption{text-align:left;font-family:var(--text);font-size:.95rem;color:var(--tinte-2);
  padding:.6rem 0 .5rem;caption-side:top}
.tabelle th,.tabelle td{padding:.5rem .8rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--linie-fein)}
.tabelle th{font-weight:600;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tinte-3);
  background:var(--grund-2);border-bottom:1px solid var(--linie);white-space:nowrap}
.tabelle tbody tr:last-child td{border-bottom:0}
.tabelle tbody tr:hover td{background:var(--grund-2)}
.tabelle .zahl{text-align:right;font-variant-numeric:tabular-nums}
.tabelle th:first-child,.tabelle td:first-child{padding-left:.4rem}
.tabelle tbody th{font-family:var(--text);font-weight:600;text-transform:none;letter-spacing:0;font-size:.95rem;
  color:var(--tinte);background:transparent}

/* Listen mit Haarlinien (Personen, Begriffe, Nachweise) */
.liste{list-style:none;margin:1.5rem 0 2rem;padding:0;border-top:1px solid var(--linie)}
.liste > li{margin:0;padding:.8rem 0;border-bottom:1px solid var(--linie-fein)}
.liste > li > :last-child{margin-bottom:0}
.liste .motiv,.liste dt,.liste .name{font-weight:600}
.liste dd{margin:0}
.liste .nachweis{margin-top:.2em}
dl.liste > div{padding:.8rem 0;border-bottom:1px solid var(--linie-fein)}
dl.liste dt{font-weight:600}
dl.liste dd{margin:.2em 0 0;color:var(--tinte-2)}
.liste[hidden]{display:none}

/* Filterleiste — ein Formular, das auch ohne Skript nichts zerstört */
.filter{font-family:var(--bedien);font-size:.9rem;margin:1.5rem 0;padding:.9rem 0 .5rem;
  border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;align-items:flex-end}
.filter fieldset{border:0;margin:0;padding:0;min-width:0}
.filter legend,.filter label.feld{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinte-3);
  padding:0;margin-bottom:.35rem;display:block}
.filter input[type="search"],.filter input[type="text"],.filter select{
  font:inherit;color:var(--tinte);background:var(--grund);border:1px solid var(--linie-stark);border-radius:0;
  padding:.4em .6em;min-width:12rem;max-width:100%}
.filter input:focus-visible,.filter select:focus-visible{border-color:var(--rot)}
.filter .treffer{margin-left:auto;color:var(--tinte-3);font-variant-numeric:tabular-nums;align-self:center}
.filter .treffer:empty{display:none}

/* Wahlreihen (Radio als Knopfreihe) — in Filter und Einstellungen */
.wahlreihe{display:flex;flex-wrap:wrap;gap:.35rem}
.wahlreihe label{position:relative;cursor:pointer}
.wahlreihe input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.wahlreihe span{display:inline-block;padding:.3em .8em;border:1px solid var(--linie-stark);color:var(--tinte-2);
  font-size:.85rem;line-height:1.3;transition:background .12s ease,color .12s ease}
.wahlreihe input:checked + span{background:var(--tinte);color:var(--grund);border-color:var(--tinte)}
.wahlreihe input:focus-visible + span{outline:3px solid var(--fokus);outline-offset:2px}
.wahlreihe label:hover span{border-color:var(--rot);color:var(--rot)}
.wahlreihe input:checked + span:hover{color:var(--grund)}

/* Knöpfe */
.knopf,button.knopf,input[type="submit"].knopf{
  font-family:var(--bedien);font-size:.9rem;line-height:1.3;cursor:pointer;
  padding:.5em 1.1em;border:1px solid var(--tinte);border-radius:0;
  background:transparent;color:var(--tinte);transition:background .12s ease,color .12s ease}
.knopf:hover{border-color:var(--rot);color:var(--rot)}
.knopf.knopf-haupt{background:var(--tinte);color:var(--grund)}
.knopf.knopf-haupt:hover{background:var(--rot);border-color:var(--rot);color:var(--grund)}
.knopfreihe{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 0}
.status{font-family:var(--bedien);font-size:.85rem;color:var(--tinte-2);margin:.6rem 0 0;min-height:1.2em}
.status:empty{margin:0;min-height:0}

/* Formulare (Kontakt, Feedback) */
.formular{font-family:var(--bedien);font-size:.95rem}
.formular label{display:block;font-weight:600;margin:1rem 0 .3rem}
.formular input[type="text"],.formular input[type="email"],.formular textarea,.formular select{
  font:inherit;width:100%;max-width:100%;padding:.5em .7em;color:var(--tinte);background:var(--grund);
  border:1px solid var(--linie-stark);border-radius:0}
.formular textarea{min-height:10rem;resize:vertical}
.formular input:focus-visible,.formular textarea:focus-visible{border-color:var(--rot)}
.formular .hinweis{font-size:.85rem;color:var(--tinte-3);margin:.3rem 0 0}
.formular .fehler{color:var(--rot);font-weight:600}

/* Einstellungsformular */
.einstellungen{font-family:var(--bedien);font-size:.9rem}
.einstellungen fieldset{border:0;margin:0 0 .9rem;padding:0;min-width:0}
.einstellungen legend{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinte-3);padding:0;margin-bottom:.35rem}

/* ------------------------------------------------------------
   9b. Die Filterleiste
   Ein Formular mit Kästchen, die wie Knöpfe aussehen. Der Zustand
   „an“ zeigt sich in Farbe *und* Form (Häkchen statt leerem Kästchen).
   Die Leiste klebt unter der Kopfleiste; auf schmalen Bildschirmen
   liegt ihr Körper in einer Schublade hinter dem Filter-Knopf, sichtbar
   bleibt nur die Zeile mit Trefferzahl und Knopf.
   ------------------------------------------------------------ */
.filterleiste{position:sticky;top:var(--kopf-h);z-index:80;display:block;
  margin:0 0 1.5rem;background:var(--grund);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);
  font-family:var(--bedien);font-size:.85rem;color:var(--tinte-2)}
/* So breit wie die Kopfzeile — die Leiste ist ihr zweites Band, nicht Teil der Textspalte */
.filter-innen{max-width:calc(var(--satz) + var(--marg) + var(--spalte) + 2*var(--rand) + 4rem);margin:0 auto;
  display:flex;align-items:flex-start;gap:.5rem 1.5rem;padding:.55rem var(--rand) .45rem}
.filter-koerper{flex:1 1 auto;min-width:0}
.filter-reihe{border:0;margin:0 0 .3rem;padding:0;min-width:0;display:flex;align-items:baseline;gap:.25rem .6rem}
.filter-reihe:last-of-type{margin-bottom:0}
/* Die Legende wird zum gewöhnlichen Kind (float), damit sie in der Reihe steht */
.filter-reihe > legend{float:left;flex:none;width:6.2rem;padding:.25em 0 0;margin:0;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinte-3)}
.filter-knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .35rem;flex:1;min-width:0}
.schalt{position:relative;display:inline-block;max-width:100%}
.schalt input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.schalt span{display:inline-flex;align-items:center;gap:.4em;padding:.22em .6em .22em .45em;
  border:1px solid var(--linie-stark);color:var(--tinte-2);background:transparent;
  font-size:.82rem;line-height:1.3;cursor:pointer;transition:background .12s ease,color .12s ease}
.schalt span::before{content:"";flex:none;width:.7em;height:.7em;box-sizing:border-box;
  border:1px solid currentColor;transition:none}
.schalt small{font-size:.72em;letter-spacing:.05em;color:var(--tinte-3);font-variant-numeric:tabular-nums}
.schalt input:checked + span{background:var(--tinte);color:var(--grund);border-color:var(--tinte)}
.schalt input:checked + span::before{width:.42em;height:.75em;margin:-.2em .1em 0 .12em;border-width:0 2px 2px 0;
  border-color:currentColor;transform:rotate(45deg)}
.schalt input:checked + span small{color:var(--grund);opacity:.8}
.schalt:hover span{border-color:var(--rot);color:var(--rot)}
.schalt input:checked + span:hover,.schalt:hover input:checked + span{color:var(--grund);border-color:var(--rot);background:var(--rot)}
.schalt input:focus-visible + span{outline:3px solid var(--fokus);outline-offset:2px}
.filter-alle{display:inline-flex;gap:.1rem;margin-left:.3rem}
.filter-glied{font:inherit;font-size:.8rem;color:var(--tinte-2);background:none;border:0;padding:.2em .35em;cursor:pointer;
  text-decoration:underline;text-decoration-color:var(--linie-stark);text-underline-offset:.18em}
.filter-glied:hover{color:var(--rot);text-decoration-color:var(--rot)}
.filter-feld{display:inline-flex;align-items:center;gap:.4em}
.filter-feld label{font-size:.8rem;color:var(--tinte-2);white-space:nowrap}
.filter-feld input,.filter-feld select{font:inherit;font-size:.85rem;color:var(--tinte);background:var(--grund);
  border:1px solid var(--linie-stark);border-radius:0;padding:.25em .45em;height:2rem}
.filter-feld input:focus-visible,.filter-feld select:focus-visible{border-color:var(--rot)}
.filter-feld-zahl input{width:4.6rem;font-variant-numeric:tabular-nums}
.filter-feld-text input{width:11rem}
.filter-feld-auswahl select{padding-right:.2em}
.filter-fuss{display:none}
/* „Weitere Filter“: aufklappbar, damit die klebende Leiste flach bleibt */
.filter-mehr{margin:.15rem 0 0}
.filter-mehr > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.4em;
  padding:.2em 0;margin-left:6.2rem;color:var(--tinte-2);font-size:.8rem}
.filter-mehr > summary::-webkit-details-marker{display:none}
.filter-mehr > summary::before{content:"+" / "";display:inline-grid;place-items:center;width:1.1em;height:1.1em;
  border:1px solid var(--linie-stark);font-weight:600;line-height:1;font-size:.9em}
.filter-mehr[open] > summary::before{content:"−" / ""}
.filter-mehr > summary:hover{color:var(--rot)}
.filter-mehr > summary:hover::before{border-color:var(--rot)}
.filter-mehr-text{text-decoration:underline;text-decoration-color:var(--linie-stark);text-underline-offset:.18em}
.filter-mehr > summary:hover .filter-mehr-text{text-decoration-color:var(--rot)}
.filter-mehr-inhalt{padding-top:.35rem}
/* rechts: Trefferzahl, zurücksetzen, Link kopieren, Anzeigen */
.filter-stand{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:.3rem;min-width:9rem;text-align:right}
.filter-treffer{margin:0;font-variant-numeric:tabular-nums;color:var(--tinte-3);font-size:.85rem}
.filter-treffer b{font-size:1.05rem;color:var(--tinte);font-weight:600}
.filter-werkzeug{display:flex;flex-direction:column;align-items:flex-end;gap:.15rem}
.filter-werkzeug .filter-knopf{display:none}
.filter-anzeigen{font-size:.82rem;padding:.35em .9em;margin-top:.15rem}
:root[data-js] .filter-anzeigen{display:none}
.filter-meldung{font-size:.78rem;color:var(--tinte-3);min-height:1.2em}
.filter-meldung:empty{display:none}
[data-link-kopieren]{cursor:pointer}

/* Liste ohne Treffer */
.filter-leer{border:1px dashed var(--linie-stark);padding:1rem 1.25rem;margin:1rem 0 2rem;color:var(--tinte-2)}

/* ------------------------------------------------------------
   9c. Blätterwerk
   ------------------------------------------------------------ */
.blaettern{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.5rem;
  font-family:var(--bedien);font-size:.85rem;color:var(--tinte-2);margin:0 0 1.5rem;padding:.6rem 0;
  border-bottom:1px solid var(--linie);grid-column:text-start / rand-end}
.blaettern-unten{border-top:1px solid var(--linie);border-bottom:0;margin:1.5rem 0 0}
.blaettern-stand{margin:0;font-variant-numeric:tabular-nums}
.blaettern-stand b{color:var(--tinte);font-weight:600}
.blaettern-seiten{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:.15rem}
.blaettern-seiten li{margin:0}
.blaettern-seiten a,.blaettern-seiten > li > span{display:inline-flex;align-items:center;justify-content:center;gap:.3em;
  min-width:2rem;height:2rem;padding:0 .5em;white-space:nowrap;
  text-decoration:none;color:var(--tinte-2);border:1px solid transparent;font-variant-numeric:tabular-nums}
.blaettern-seiten a:hover{color:var(--rot);border-color:var(--rot)}
.blaettern-seiten a[aria-current]{background:var(--tinte);color:var(--grund);border-color:var(--tinte);font-weight:600}
.blaettern-schritt{padding:0 .6em}
.blaettern-aus{color:var(--tinte-3)}
.blaettern-luecke{color:var(--tinte-3)}
.blaettern-sprung{display:flex;align-items:center;gap:.4em;margin-left:auto}
.blaettern-sprung input,.blaettern-sprung select{font:inherit;font-size:.85rem;color:var(--tinte);background:var(--grund);
  border:1px solid var(--linie-stark);border-radius:0;padding:.25em .4em;height:2rem}
.blaettern-sprung input{width:4rem;text-align:center;font-variant-numeric:tabular-nums}
.blaettern-sprung input:focus-visible,.blaettern-sprung select:focus-visible{border-color:var(--rot)}
.blaettern-los{font-size:.8rem;padding:.35em .8em}

/* Bis 64 em: die rechte Spalte wird zur Zeile über den Reihen, die Reihen bekommen die ganze Breite */
@media (max-width:64em){
  .filter-innen{flex-wrap:wrap;gap:.35rem 0}
  .filter-stand{order:-1;flex:1 1 100%;flex-direction:row;align-items:baseline;justify-content:space-between;
    min-width:0;text-align:left;padding-bottom:.3rem;border-bottom:1px solid var(--linie-fein);margin-bottom:.2rem}
  .filter-werkzeug{flex-direction:row;align-items:baseline;gap:1rem}
  .filter-koerper{flex:1 1 100%}
}

/* Schmale Bildschirme: Körper der Leiste in der Schublade, Zeile mit Zahl und Knopf bleibt */
@media (max-width:53.75em){
  .gefiltert{--leiste-h:3rem}
  .filter-innen{display:block;padding:.35rem 0}
  .filter-stand{flex-direction:row;align-items:center;justify-content:space-between;min-width:0;text-align:left;gap:.75rem}
  .filter-werkzeug{flex-direction:row;align-items:center;gap:.6rem}
  .filter-werkzeug .filter-knopf{display:inline-flex}
  .filter-werkzeug .filter-glied,.filter-werkzeug .filter-anzeigen,.filter-werkzeug [data-link-kopieren]{display:none}
  .filter-meldung{position:absolute;left:var(--rand);bottom:-1.6em;font-size:.75rem}
  .filter-koerper{display:none;position:fixed;left:0;right:0;top:var(--kopf-h);bottom:0;z-index:85;overflow:auto;
    background:var(--grund);border-top:1px solid var(--linie);padding:.75rem var(--rand) 0}
  #filter-auf:checked ~ main .filter-koerper,#filter-auf:checked ~ * .filter-koerper{display:block}
  .filter-stand{border-bottom:0;padding-bottom:0;margin-bottom:0;align-items:center}
  .filter-reihe{flex-direction:column;align-items:stretch;gap:.4rem;margin:0 0 1.1rem}
  .filter-reihe > legend{width:auto;padding:0}
  .filter-mehr > summary{margin-left:0;font-size:.9rem;padding:.4em 0}
  .filter-mehr-inhalt{padding-top:.75rem}
  .filter-feld-zahl{width:auto;flex:1 1 40%;justify-content:flex-start}
  .filter-feld-zahl input{width:5.5rem}
  .schalt span{font-size:.9rem;padding:.4em .75em .4em .55em}
  .filter-feld{width:100%;justify-content:space-between}
  .filter-knoepfe:has(> .filter-feld-zahl){gap:.5rem 1rem}
  .filter-feld input,.filter-feld select{height:2.4rem}
  .filter-feld-text input{width:60%}
  .filter-fuss{display:flex;flex-wrap:wrap;gap:.5rem;position:sticky;bottom:0;margin:0 calc(-1*var(--rand));
    padding:.75rem var(--rand);background:var(--grund);border-top:1px solid var(--linie)}
  .filter-fuss .knopf{cursor:pointer}
  .filter-fuss a.knopf{text-decoration:none;display:inline-flex;align-items:center}
  .filter-fuss label.knopf{margin-left:auto}
  .blaettern{gap:.5rem 1rem}
  .blaettern-sprung{margin-left:0;flex-basis:100%}
}

/* ------------------------------------------------------------
   10. Aufklappbares, Dialog, Karte
   ------------------------------------------------------------ */
details.auf{border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);margin:1rem 0;padding:.2rem 0}
details.auf + details.auf{border-top:0;margin-top:-1rem}
details.auf > summary{cursor:pointer;padding:.6rem 0;list-style:none;font-weight:600;display:flex;gap:.6em;align-items:baseline}
details.auf > summary::-webkit-details-marker{display:none}
details.auf > summary::before{content:"+" / "";color:var(--rot);font-weight:400;width:1em;flex:none;font-family:var(--bedien)}
details.auf[open] > summary::before{content:"−" / ""}
details.auf > summary:hover{color:var(--rot)}
.auf-inhalt{padding:.2rem 0 1rem 1.6em}
.auf-inhalt > :last-child{margin-bottom:0}

/* Dialog (Zustimmung zum Speichern) und Popups (Karte) */
dialog.popup,.popup{font-family:var(--bedien);font-size:.92rem;color:var(--tinte);background:var(--grund);
  border:1px solid var(--tinte);padding:1.25rem 1.5rem;max-width:min(34rem,calc(100vw - 2rem))}
dialog.popup{margin:auto}
dialog.popup::backdrop{background:rgba(42,37,33,.55)}
dialog.popup h2{font-size:1.25rem;margin-top:0;border:0;padding:0}
dialog.popup h2::before{content:none}
dialog.popup ul{padding-left:1.2em}
dialog.popup li{margin:.4em 0}
.popup:not(dialog){position:absolute;z-index:20;padding:.8rem 1rem;max-width:20rem;font-size:.85rem}
.popup:not(dialog)[hidden]{display:none}
.popup .zu{float:right;margin:-.3rem -.5rem 0 .5rem;background:none;border:0;font:inherit;font-size:1.2rem;
  cursor:pointer;color:var(--tinte-3);line-height:1;padding:.2rem .4rem}
.popup .zu:hover{color:var(--rot)}

/* Karte: ein SVG oder Bild mit Ortsmarken, dazu die Ortsliste als Text */
.karte{position:relative;margin:1.5rem 0 2rem;border:1px solid var(--linie);background:var(--grund-2)}
.karte svg,.karte img{width:100%;height:auto;display:block}
.karte .ort{cursor:pointer}
.karte .ort circle{fill:var(--rot);stroke:var(--grund);stroke-width:1.5}
.karte .ort:hover circle,.karte .ort:focus-visible circle{r:7}
.karte .ort text{font-family:var(--bedien);font-size:11px;fill:var(--tinte);paint-order:stroke;stroke:var(--grund);stroke-width:3px}
.karte-legende{font-family:var(--bedien);font-size:.85rem;color:var(--tinte-3);margin:.5rem 0 0}

/* Statusfarben nur mit Text, nie allein durch Farbe */
.marke{font-family:var(--bedien);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--linie);padding:.1em .5em;color:var(--tinte-3);white-space:nowrap}
.marke-rot{border-color:var(--rot);color:var(--rot)}

/* Kleine Helfer */
.klein{font-size:.88rem;color:var(--tinte-2)}
.zahlen{font-variant-numeric:tabular-nums}
.rechts{text-align:right}
.abstand{margin-top:2.5rem}
.zwei-spalten{columns:2 18rem;column-gap:2.5rem}
.zwei-spalten > *{break-inside:avoid}
.zitat-marke{margin-top:3rem}

/* ------------------------------------------------------------
   11. Schmale Bildschirme — nichts darf bei 320 px brechen
   ------------------------------------------------------------ */
@media (max-width:40em){
  h1{font-size:1.7rem}
  h2{font-size:1.3rem}
  .tabelle th,.tabelle td{padding:.4rem .5rem}
  .element-fuss{justify-content:flex-start}
  .zwei-spalten{columns:1}
}

/* ------------------------------------------------------------
   12. Druck
   ------------------------------------------------------------ */
@media print{
  :root{--grund:#fff;--grund-2:#fff;--grund-3:#f2f2f2;--tinte:#000;--tinte-2:#111;--tinte-3:#333;
    --rot:#7a1a1a;--linie:#999;--linie-fein:#bbb}
  html{font-size:11pt}
  body{background:#fff;color:#000}
  .sprung,.hauptnav,.leiste,.darstellung-link,.pfad,.fussnav,.feedback,dialog,.filter,.knopfreihe,.status,
  .schalter,.kopf-knopf,.suche,.filterleiste,.blaettern{display:none !important}
  .kopf{position:static;height:auto}
  .kopf-zeile{height:auto}
  .gefiltert-inhalt{display:block}
  main{display:block;padding:0}
  :where(main) > *,.element,.element-inhalt,.marginalie,.breit,.voll{display:block}
  .element{border-top:1px solid #999;padding:.6cm 0}
  .marginalie{border-left:0;padding-left:0;font-style:italic}
  a{color:inherit;text-decoration:none}
  a[href^="http"]::after,a[href^="http"]:not([href*="salzbibel.de"])::after{content:" (" attr(href) ")";font-size:.85em;color:#333;vertical-align:baseline;margin:0}
  a[href^="#"]::after,.nachweis a::after,.wortmarke::after{content:none}
  h1,h2,h3,h4{break-after:avoid;page-break-after:avoid}
  figure,table,.element,.kasten,blockquote,.tabelle{break-inside:avoid;page-break-inside:avoid}
  .kopf{border-bottom:1px solid #000}
  .kopf-zeile{padding:0 0 .3cm}
  .fuss{margin-top:1cm}
  .bild-rahmen{border:1px solid #999;background-image:none !important}
  .bild-rahmen img{max-height:14cm;width:auto;margin:0 auto}
  .tabelle{overflow:visible}
  .tabelle table{font-size:9.5pt}
}