/* Stadtgeschichte Bischofsheim / Tauberbischofsheim – Fachmagazin-Layout
   Keine externen Schriften oder Skripte (DSGVO): System-Schriften, eigenes JS. */

:root {
  --paper: #faf8f4;
  --paper-2: #f2eee6;
  --ink: #1d1b19;
  --ink-2: #4a4641;
  --ink-3: #7a746b;
  --line: #ded8cc;
  --rot: #9c1d22;          /* Mainzer Rad / Rotsandstein */
  --rot-dunkel: #6f1216;
  --sand: #c79a5b;
  --sand-hell: #efe2cc;
  --blau: #25465f;         /* Taubertal, Wasser */
  --gruen: #4d6b4f;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Charter, Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --maß: 41rem;            /* Textspalte */
  --breit: 68rem;          /* Bilder, Boxen */
  --rand: clamp(1rem, 4vw, 2rem);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #15130f;
    --paper-2: #1d1a15;
    --ink: #ece7dd;
    --ink-2: #c3bcae;
    --ink-3: #958d7d;
    --line: #34302a;
    --rot: #e0585d;
    --rot-dunkel: #c43a40;
    --sand: #d7ac6c;
    --sand-hell: #2a2318;
    --blau: #7fb0d4;
    --gruen: #93b896;
  }
}
:root[data-theme="dark"] {
  --paper: #15130f; --paper-2: #1d1a15; --ink: #ece7dd; --ink-2: #c3bcae; --ink-3: #958d7d;
  --line: #34302a; --rot: #e0585d; --rot-dunkel: #c43a40; --sand: #d7ac6c; --sand-hell: #2a2318;
  --blau: #7fb0d4; --gruen: #93b896;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--serif); font-size: 1.125rem; line-height: 1.68;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--rot); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--rot-dunkel); }
:focus-visible { outline: 2px solid var(--rot); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Kopfleiste ---------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  font-family: var(--sans); font-size: 0.82rem;
}
.kopf-innen { max-width: 80rem; margin: 0 auto; padding: 0.55rem var(--rand); display: flex; align-items: center; gap: 1.2rem; }
.marke { font-weight: 700; letter-spacing: 0.02em; color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 0.55rem; white-space: nowrap; }
.marke svg { width: 1.35rem; height: 1.35rem; color: var(--rot); flex: none; }
.marke small { font-weight: 400; color: var(--ink-3); }
.kopf nav { margin-left: auto; display: flex; gap: 1.1rem; align-items: center; }
.kopf nav a { color: var(--ink-2); text-decoration: none; }
.kopf nav a:hover, .kopf nav a[aria-current] { color: var(--rot); }
.kopf button.knopf { font: inherit; background: none; border: 1px solid var(--line); color: var(--ink-2); border-radius: 999px; padding: 0.2rem 0.65rem; cursor: pointer; }
.fortschritt { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--rot); }
@media (max-width: 62rem) { .kopf-innen { flex-wrap: wrap; row-gap: 0.3rem; } .kopf nav { width: 100%; margin-left: 0; overflow-x: auto; white-space: nowrap; gap: 0.9rem; padding-bottom: 0.25rem; font-size: 0.92rem; } }

/* ---------- Titel / Kapitelkopf ---------- */
.titel { position: relative; color: #fff; background: #1b1814; overflow: hidden; }
.titel img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.58; }
.titel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,16,12,0.15), rgba(20,16,12,0.78)); }
.titel-innen { position: relative; z-index: 1; max-width: var(--breit); margin: 0 auto; padding: clamp(6rem, 22vh, 13rem) var(--rand) 3rem; }
.kapitelnr { font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.78rem; color: #f0d9b3; margin: 0 0 0.9rem; }
.titel h1 { font-weight: 700; font-size: clamp(2.2rem, 6.2vw, 4.4rem); line-height: 1.04; letter-spacing: -0.012em; margin: 0 0 1.1rem; max-width: 18ch; text-wrap: balance; }
.stand { font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.4; max-width: 38rem; color: #f2ebdf; margin: 0; text-wrap: pretty; }
.titel .meta { font-family: var(--sans); font-size: 0.8rem; color: #d9cdb8; margin-top: 1.6rem; display: flex; gap: 1.4rem; flex-wrap: wrap; }
.bildnachweis { position: absolute; right: var(--rand); bottom: 0.5rem; z-index: 1; font-family: var(--sans); font-size: 0.68rem; color: #cfc4b0; }

/* ---------- Text ---------- */
.spalte { max-width: var(--maß); margin: 0 auto; padding: 0 var(--rand); }
article > p, .spalte > p { margin: 0 0 1.2em; text-wrap: pretty; hyphens: auto; }
article h2 { font-size: clamp(1.55rem, 3.4vw, 2.1rem); line-height: 1.16; margin: 3.2rem 0 0.9rem; letter-spacing: -0.008em; text-wrap: balance; }
article h2 .nr { display: block; font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rot); margin-bottom: 0.45rem; }
article h3 { font-family: var(--sans); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-2); margin: 2.2rem 0 0.5rem; }
article section.anfang .spalte > h2 + p::first-line { font-variant: small-caps; letter-spacing: 0.03em; }
article section.anfang .spalte > h2 + p::first-letter { float: left; font-size: 4.2em; line-height: 0.82; padding: 0.06em 0.09em 0 0; color: var(--rot); font-weight: 700; }
em { font-style: italic; }
blockquote.zitat {
  margin: 2rem auto; max-width: var(--maß); padding: 0.2rem var(--rand) 0.2rem calc(var(--rand) + 1.2rem);
  font-size: 1.28rem; line-height: 1.5; font-style: italic; color: var(--ink);
  border-left: 3px solid var(--rot); margin-left: auto; margin-right: auto;
}
blockquote.zitat footer { font-family: var(--sans); font-style: normal; font-size: 0.8rem; color: var(--ink-3); margin-top: 0.6rem; }
.hinweis-name { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-3); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 0.7rem 0; margin: 1.5rem 0 2rem; }

/* Begriffe (Glossar-Tooltips) */
.begriff { text-decoration: underline dotted var(--sand); text-underline-offset: 0.2em; text-decoration-thickness: 2px; cursor: help; border: 0; background: none; font: inherit; color: inherit; padding: 0; }
.begriff:hover, .begriff:focus-visible { color: var(--rot); }
.tipp { position: absolute; z-index: 80; max-width: 21rem; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-top: 3px solid var(--sand); box-shadow: 0 8px 28px rgba(0,0,0,0.18); padding: 0.8rem 1rem; font-family: var(--sans); font-size: 0.85rem; line-height: 1.5; border-radius: 3px; }
.tipp b { display: block; font-family: var(--serif); font-size: 1rem; margin-bottom: 0.2rem; }
.tipp a { font-size: 0.78rem; }

/* Fußnoten */
sup.fn { font-family: var(--sans); font-size: 0.65em; line-height: 0; }
sup.fn a { text-decoration: none; padding: 0 0.12em; font-weight: 600; }
.fussnoten { max-width: var(--maß); margin: 0 auto; padding: 0 var(--rand); font-family: var(--sans); font-size: 0.82rem; line-height: 1.55; color: var(--ink-2); }
.fussnoten ol { padding-left: 1.4rem; margin: 0.5rem 0 0; }
.fussnoten li { margin-bottom: 0.45rem; }
.fussnoten li:target { background: var(--sand-hell); outline: 6px solid var(--sand-hell); }

/* ---------- Bilder ---------- */
figure { margin: 2.4rem 0; }
figure.breit { max-width: var(--breit); margin-left: auto; margin-right: auto; padding: 0 var(--rand); }
figure.voll { margin-left: 0; margin-right: 0; }
figure.spaltig { max-width: var(--maß); margin-left: auto; margin-right: auto; padding: 0 var(--rand); }
figure img { width: 100%; background: var(--paper-2); cursor: zoom-in; }
figcaption { font-family: var(--sans); font-size: 0.8rem; line-height: 1.5; color: var(--ink-3); margin-top: 0.55rem; max-width: 48rem; }
figcaption b { color: var(--ink-2); font-weight: 600; }
.bilderpaar { max-width: var(--breit); margin: 2.4rem auto; padding: 0 var(--rand); display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.bilderpaar figure { margin: 0; }
@media (max-width: 42rem) { .bilderpaar { grid-template-columns: 1fr; } }
.lupe { position: fixed; inset: 0; z-index: 100; background: rgba(10,8,6,0.94); display: none; align-items: center; justify-content: center; flex-direction: column; padding: 1rem; }
.lupe.offen { display: flex; }
.lupe img { max-height: 84vh; max-width: 96vw; object-fit: contain; cursor: zoom-out; }
.lupe p { color: #ddd3c0; font-family: var(--sans); font-size: 0.85rem; max-width: 52rem; text-align: center; margin: 0.8rem 0 0; }

/* ---------- Boxen ---------- */
.box { max-width: var(--breit); margin: 2.6rem auto; padding: 0 var(--rand); }
.box > .innen { border: 1px solid var(--line); background: var(--paper-2); border-radius: 4px; padding: 1.3rem 1.5rem 1.1rem; font-family: var(--sans); font-size: 0.95rem; line-height: 1.6; }
.box .typ { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--rot); margin: 0 0 0.35rem; }
.box h3 { font-family: var(--serif); text-transform: none; letter-spacing: 0; font-size: 1.3rem; color: var(--ink); margin: 0 0 0.7rem; }
.box p { margin: 0 0 0.8em; }
.box ul { margin: 0 0 0.8em; padding-left: 1.2rem; }
.box.schmal { max-width: var(--maß); }
.box.quelle > .innen { border-left: 4px solid var(--blau); background: color-mix(in srgb, var(--blau) 6%, var(--paper)); }
.box.quelle .typ { color: var(--blau); }
.box.begriffe dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.2rem; margin: 0; }
.box.begriffe dt { font-weight: 700; font-family: var(--serif); }
.box.begriffe dd { margin: 0; }
@media (max-width: 40rem) { .box.begriffe dl { grid-template-columns: 1fr; } }
details.auf { border-top: 1px solid var(--line); padding: 0.7rem 0; }
details.auf summary { cursor: pointer; font-weight: 600; color: var(--ink); }
details.auf[open] summary { color: var(--rot); }

/* Einordnung (eigene Schlussfolgerung) */
.einordnung > .innen { background: var(--sand-hell); border-color: color-mix(in srgb, var(--sand) 50%, var(--line)); border-left: 4px solid var(--sand); }
.einordnung .typ { color: #8a5d1c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .einordnung .typ { color: var(--sand); } }

/* ---------- Interaktive Zeitleiste ---------- */
.tl { max-width: var(--breit); margin: 3rem auto; padding: 0 var(--rand); font-family: var(--sans); }
.tl-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.tl-kopf h3 { margin: 0; font-family: var(--serif); text-transform: none; letter-spacing: 0; font-size: 1.35rem; color: var(--ink); }
.tl-kopf span { font-size: 0.8rem; color: var(--ink-3); }
.tl-leiste { position: relative; height: 6.6rem; margin: 0.5rem 0 1rem; }
.tl-leiste::before { content: ""; position: absolute; left: 0; right: 0; top: 3.1rem; height: 2px; background: var(--line); }
.tl-monat { position: absolute; top: 5.5rem; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); transform: translateX(-50%); }
.tl-punkt { position: absolute; top: 1.5rem; width: 1.4rem; height: 1.4rem; margin-left: -0.7rem; border-radius: 50%; border: 2px solid var(--rot); background: var(--paper); cursor: pointer; padding: 0; transition: transform 0.15s, background 0.15s; }
.tl-punkt:hover { transform: scale(1.18); }
.tl-punkt[aria-pressed="true"] { background: var(--rot); transform: scale(1.3); }
.tl-punkt.stadt { border-color: var(--blau); } .tl-punkt.stadt[aria-pressed="true"] { background: var(--blau); }
.tl-punkt.land { border-color: var(--sand); top: 3.5rem; } .tl-punkt.land[aria-pressed="true"] { background: var(--sand); }
.tl-karte { background: var(--paper-2); border: 1px solid var(--line); border-radius: 4px; padding: 1.1rem 1.4rem; min-height: 8.5rem; }
.tl-karte time { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--rot); }
.tl-karte h4 { font-family: var(--serif); font-size: 1.25rem; margin: 0.25rem 0 0.4rem; }
.tl-karte p { margin: 0 0 0.5rem; font-size: 0.95rem; line-height: 1.55; }
.tl-karte .qu { font-size: 0.75rem; color: var(--ink-3); }
.tl-legende { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: 0.75rem; color: var(--ink-3); margin-top: 0.6rem; }
.tl-legende i { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; border: 2px solid; margin-right: 0.35rem; vertical-align: -0.05rem; }
.tl-nav { display: flex; gap: 0.5rem; margin-top: 0.8rem; }
.tl-nav button { font: inherit; font-size: 0.8rem; background: none; border: 1px solid var(--line); border-radius: 999px; padding: 0.25rem 0.9rem; color: var(--ink-2); cursor: pointer; }
.tl-nav button:hover:not(:disabled) { border-color: var(--rot); color: var(--rot); }
.tl-nav button:disabled { opacity: 0.4; cursor: default; }

/* ---------- Kapitelverzeichnis (Startseite) ---------- */
.raster { max-width: 80rem; margin: 0 auto; padding: 0 var(--rand); display: grid; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); gap: 1.4rem; }
.karte { display: flex; flex-direction: column; border-top: 3px solid var(--ink); padding-top: 0.7rem; text-decoration: none; color: var(--ink); }
.karte .zeit { font-family: var(--sans); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--rot); }
.karte h3 { font-size: 1.35rem; line-height: 1.2; margin: 0.25rem 0 0.45rem; text-wrap: balance; }
.karte p { font-size: 0.95rem; color: var(--ink-2); margin: 0; line-height: 1.5; }
a.karte:hover { border-top-color: var(--rot); }
a.karte:hover h3 { color: var(--rot); }
.karte.folgt { opacity: 0.55; border-top-color: var(--line); }
.karte.folgt .zeit::after { content: " · folgt"; color: var(--ink-3); }
.abschnitt-kopf { max-width: 80rem; margin: 4rem auto 1.4rem; padding: 0 var(--rand); display: flex; align-items: baseline; gap: 1rem; border-bottom: 1px solid var(--line); }
.abschnitt-kopf h2 { margin: 0 0 0.5rem; font-size: 1.7rem; }
.abschnitt-kopf span { font-family: var(--sans); font-size: 0.82rem; color: var(--ink-3); }

/* ---------- Fuß ---------- */
.kapitelende { max-width: var(--maß); margin: 4rem auto 0; padding: 1.5rem var(--rand); border-top: 2px solid var(--ink); display: flex; justify-content: space-between; gap: 1rem; font-family: var(--sans); font-size: 0.9rem; }
.kapitelende a { text-decoration: none; font-weight: 600; }
.fuss { margin-top: 4rem; background: var(--paper-2); border-top: 1px solid var(--line); font-family: var(--sans); font-size: 0.82rem; color: var(--ink-3); }
.fuss-innen { max-width: 80rem; margin: 0 auto; padding: 2rem var(--rand); display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; justify-content: space-between; }
.fuss a { color: var(--ink-2); }

@media print {
  .kopf, .tl-nav, .lupe, .fortschritt { display: none !important; }
  body { font-size: 10.5pt; background: #fff; color: #000; }
  .titel { color: #000; background: none; } .titel img.bg, .titel::after { display: none; }
  .titel h1, .stand, .kapitelnr { color: #000; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* Themenpfade und Zeitleiste */
.spalte.breit { max-width: var(--breit); }
.pfadliste { list-style: none; margin: 1rem 0 3rem; padding: 0; font-family: var(--sans); }
.pfadliste li { display: grid; grid-template-columns: 9.5rem 1fr; gap: 0.2rem 1.2rem; padding: 0.7rem 0; border-top: 1px solid var(--line); font-size: 0.95rem; line-height: 1.5; }
.pfadliste .ed { color: var(--rot); font-weight: 600; }
.pfadliste .et { color: var(--ink-2); }
.pfadliste .ek { font-size: 0.8rem; white-space: nowrap; margin-left: 0.3rem; }
.st { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.05rem 0.4rem; border-radius: 0.6rem; background: var(--sand-hell); color: var(--ink-2); margin-left: 0.3rem; }
.st-strittig { background: #f3d9d9; color: #6f1216; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .st-strittig { background: #4a2326; color: #f0c4c6; } }
:root[data-theme="dark"] .st-strittig { background: #4a2326; color: #f0c4c6; }
.pfadkap { margin: 0.5rem 0 1rem; padding-left: 1.2rem; font-family: var(--sans); }
.pfadhinweis { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-3); }
.tlfilter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 1rem; font-family: var(--sans); }
.chip { font: inherit; font-size: 0.85rem; padding: 0.3rem 0.8rem; border: 1px solid var(--line); border-radius: 1rem; background: transparent; color: var(--ink-2); cursor: pointer; }
.chip.an { background: var(--rot); border-color: var(--rot); color: #fff; }
#tlsuche { width: 100%; max-width: 24rem; font: inherit; font-family: var(--sans); padding: 0.45rem 0.7rem; border: 1px solid var(--line); border-radius: 0.4rem; background: var(--paper-2); color: var(--ink); }
@media (max-width: 40rem) { .pfadliste li { grid-template-columns: 1fr; } }

/* Karten */
.kz { font-family: var(--sans); margin: 0.8rem 0 1rem; }
.kz label { font-size: 0.95rem; color: var(--ink-2); }
.kz output { font-weight: 700; color: var(--rot); font-size: 1.15rem; }
.kz input[type=range] { width: 100%; accent-color: var(--rot); margin: 0.4rem 0; }
.kzknoepfe { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.kzknoepfe button { font: inherit; font-size: 0.85rem; padding: 0.25rem 0.7rem; border: 1px solid var(--line); border-radius: 1rem; background: transparent; color: var(--ink-2); cursor: pointer; }
.kv { position: relative; border: 1px solid var(--line); border-radius: 0.4rem; background: var(--paper-2); margin: 0.6rem 0 1rem; }
.kvfenster { position: relative; overflow: hidden; height: min(75vh, 46rem); touch-action: none; cursor: grab; border-radius: 0.4rem; }
.kvfenster:active { cursor: grabbing; }
.kvinhalt { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.kvinhalt img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.kvknoepfe { position: absolute; right: 0.6rem; top: 0.6rem; display: flex; flex-direction: column; gap: 0.3rem; }
.kvknoepfe button { width: 2.2rem; height: 2.2rem; font-size: 1.2rem; border: 1px solid var(--line); border-radius: 0.3rem; background: var(--paper); color: var(--ink); cursor: pointer; }
.pin { position: absolute; width: 0; height: 0; padding: 0; border: 0; background: none; cursor: pointer; transform: scale(var(--ps, 1)); transform-origin: 0 0; }
.pin span { position: absolute; left: -0.8rem; top: -0.8rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--rot); border: 3px solid #fff; box-shadow: 0 1px 6px rgba(0,0,0,0.5); }
.pin.blass span { background: #888; opacity: 0.45; }
.pin.sel span { outline: 3px solid var(--sand); }
.kzinfo { font-family: var(--sans); font-size: 0.95rem; line-height: 1.55; margin-bottom: 2rem; }
.kzinfo p { margin: 0.5rem 0; }
.kartentext { font-family: var(--sans); font-size: 0.92rem; line-height: 1.55; color: var(--ink-2); }

/* Verzeichnisse */
.verz { font-family: var(--sans); font-size: 0.9rem; margin: 0 0 1.4rem; color: var(--ink-3); }
.verz a { text-decoration: none; }
.inhkap { margin: 0 0 2rem; padding-top: 1rem; border-top: 1px solid var(--line); font-family: var(--sans); }
.inhkap h2 { font-family: var(--serif); font-size: 1.4rem; margin: 0 0 0.2rem; }
.inhkap h2 a { text-decoration: none; color: var(--ink); }
.inhkap h2 small { font-family: var(--sans); font-size: 0.8rem; color: var(--ink-3); font-weight: 400; margin-left: 0.5rem; }
.nrk { color: var(--rot); font-weight: 600; margin-right: 0.3rem; }
.inhteaser { margin: 0 0 0.6rem; color: var(--ink-2); font-size: 0.92rem; }
.inhliste { margin: 0; padding-left: 0; list-style: none; columns: 2; column-gap: 2rem; }
.inhliste li { break-inside: avoid; margin: 0.2rem 0; font-size: 0.95rem; }
.inhkasten { font-size: 0.82rem; color: var(--ink-3); margin: 0.6rem 0 0; }
@media (max-width: 40rem) { .inhliste { columns: 1; } }
.pbuchstabe { font-size: 1.6rem; color: var(--rot); margin: 2rem 0 0.4rem; border-bottom: 1px solid var(--line); }
.person { padding: 0.6rem 0; border-bottom: 1px dotted var(--line); font-family: var(--sans); }
.person h3 { font-family: var(--serif); font-size: 1.1rem; margin: 0 0 0.1rem; }
.person p { margin: 0.1rem 0; font-size: 0.93rem; color: var(--ink-2); line-height: 1.5; }
.pkap { font-size: 0.82rem !important; color: var(--ink-3) !important; }
.ptag { background: var(--sand-hell); color: var(--ink-2); padding: 0.05rem 0.45rem; border-radius: 0.6rem; margin-right: 0.4rem; font-size: 0.72rem; }
#psuche { width: 100%; max-width: 24rem; font: inherit; font-family: var(--sans); padding: 0.45rem 0.7rem; border: 1px solid var(--line); border-radius: 0.4rem; background: var(--paper-2); color: var(--ink); margin-bottom: 0.5rem; }
.qliste { list-style: none; padding: 0; margin: 0.5rem 0 2rem; font-family: var(--sans); }
.qliste li { padding: 0.7rem 0; border-top: 1px solid var(--line); }
.qliste p { margin: 0.1rem 0; font-size: 0.95rem; line-height: 1.5; }
.pnote { color: var(--ink-3); font-size: 0.85rem !important; }
.fuss-verz { font-size: 0.82rem; margin-top: 0.3rem; }

#gsuche { width: 100%; max-width: 24rem; font: inherit; font-family: var(--sans); padding: 0.45rem 0.7rem; border: 1px solid var(--line); border-radius: 0.4rem; background: var(--paper-2); color: var(--ink); margin-bottom: 0.5rem; }
.gl { scroll-margin-top: 4rem; }

/* ---------- Tabellen und Grafiken ---------- */
figure.tabelle, figure.grafik { max-width: var(--breit); margin: 2.4rem auto; padding: 0 var(--rand); }
figure.tabelle > .tabwrap, figure.grafik > svg { max-width: 54rem; margin: 0 auto 0 0; }
.tabtitel { font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--rot); margin: 0 0 0.6rem; max-width: none; }
.tabwrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 4px; background: var(--paper-2); }
.tabwrap table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 0.9rem; line-height: 1.45; }
.tabwrap th, .tabwrap td { padding: 0.5rem 0.8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.tabwrap thead th { font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); border-bottom: 2px solid var(--ink); white-space: nowrap; }
.tabwrap tbody tr:last-child > * { border-bottom: 0; }
.tabwrap tbody th { font-weight: 600; color: var(--ink); }
.tabwrap .z { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabwrap tr.zw th { background: var(--sand-hell); color: var(--ink-2); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
.tabquelle { font-family: var(--sans); font-size: 0.8rem; line-height: 1.5; color: var(--ink-3); margin: 0.55rem 0 0; max-width: 54rem; }
figure.grafik svg { width: 100%; height: auto; display: block; }
figure.grafik text { font-family: var(--sans); fill: var(--ink-2); }
.g-name { font-size: 14px; font-weight: 600; fill: var(--ink) !important; }
.g-innen { font-size: 13px; font-weight: 700; fill: #fff !important; }
.g-leg, .g-ach { font-size: 12.5px; }
.g-wert { font-size: 13px; font-weight: 700; fill: var(--ink) !important; }
.g-gitter { stroke: var(--line); stroke-width: 1; }
.g-linie { fill: none; stroke: var(--rot); stroke-width: 2.4; stroke-linejoin: round; }
.g-punkt { fill: var(--rot); }
.g-offen { fill: var(--paper); stroke: var(--rot); stroke-width: 2.4; }
.b-gruen { fill: #4d6b4f; } .b-blau { fill: #25465f; } .b-sand { fill: #a9793a; } .b-rot { fill: #9c1d22; } .b-grau { fill: #8a8378; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .b-gruen { fill: #5f8a62; } :root:not([data-theme="light"]) .b-blau { fill: #4a7ba3; }
  :root:not([data-theme="light"]) .b-sand { fill: #b88a4a; } :root:not([data-theme="light"]) .b-rot { fill: #c4474c; }
}
:root[data-theme="dark"] .b-gruen { fill: #5f8a62; } :root[data-theme="dark"] .b-blau { fill: #4a7ba3; }
:root[data-theme="dark"] .b-sand { fill: #b88a4a; } :root[data-theme="dark"] .b-rot { fill: #c4474c; }
@media (max-width: 40rem) { .tabwrap table { font-size: 0.82rem; } .tabwrap th, .tabwrap td { padding: 0.4rem 0.55rem; } }
.z-linie { stroke: var(--ink-2); stroke-width: 2; }
.z-teil { stroke: var(--line); stroke-width: 1; }
.z-text { font-size: 12.5px; fill: var(--ink-2) !important; }

/* ---------- Sonderseite Bildstöcke ---------- */
.bsseite .spalte.breit { max-width: var(--breit); }
.bsseite h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); line-height: 1.15; margin: 3rem 0 0.8rem; text-wrap: balance; }
.bsgruppe { max-width: var(--maß); color: var(--ink-2); }
.bsobjekt { margin: 2.2rem 0 2.6rem; padding-top: 1.1rem; border-top: 1px solid var(--line); max-width: 52rem; }
.bsobjekt header { margin-bottom: 0.8rem; }
.bsnr { font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rot); margin: 0 0 0.3rem; }
.bsobjekt h3 { font-family: var(--serif); text-transform: none; letter-spacing: 0; font-size: 1.45rem; line-height: 1.2; color: var(--ink); margin: 0 0 0.35rem; }
.bsmeta { font-family: var(--sans); font-size: 0.88rem; color: var(--ink-3); margin: 0 0 0.4rem; }
.bsmeta .jahr { font-weight: 700; color: var(--ink-2); }
.bsobjekt p { margin: 0 0 1em; }
.bsinschrift { margin: 1rem 0 1.1rem; padding: 0.6rem 1rem; border-left: 3px solid var(--sand); background: var(--paper-2); font-size: 0.95rem; }
.bsinschrift p { margin: 0 0 0.4em; font-variant: normal; }
.bsinschrift .uebers { font-style: italic; color: var(--ink-2); }
.bsinschrift footer { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.bsquelle { font-family: var(--sans); font-size: 0.8rem; line-height: 1.5; color: var(--ink-3); }
.bskarte { font-family: var(--sans); font-size: 0.85rem; }
.bshinweis { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-3); max-width: 52rem; }
.bsfoto { margin: 0.4rem 0 1.2rem; }
.bsfoto img { max-width: 100%; height: auto; border-radius: 3px; }
.bsfotos { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: flex-start; margin: 0.4rem 0 1.2rem; }
.bsfotos .bsfoto { margin: 0; flex: 1 1 12rem; max-width: 16rem; }
.bsfotos .bsfoto:has(img[src$="-4.jpg"]) { max-width: 22rem; }
.bsfotos .bsfoto:has(img[src*="peter1572-"]) { max-width: 24rem; flex-basis: 16rem; }
.bsfoto figcaption { font-size: 0.85rem; opacity: 0.8; margin-top: 0.25rem; }
.bsfoto.klein img { max-width: 7rem; display: block; margin-top: 0.3rem; }
.bskat { font-family: var(--serif); text-transform: none; letter-spacing: 0; font-size: 1.25rem; color: var(--ink); margin: 2rem 0 0.6rem; }
.bskat span { color: var(--ink-3); font-size: 0.9rem; font-family: var(--sans); }
.bstab { width: 100%; }
.bsfig { margin: 1rem 0 0.4rem; }
.bk-svg { width: 100%; height: auto; display: block; background: var(--paper-2); border: 1px solid var(--line); border-radius: 4px; }
.bk-grenze { fill: var(--paper); stroke: var(--ink-3); stroke-width: 1.6; stroke-linejoin: round; stroke-dasharray: 5 3; }
.bk-altstadt { fill: var(--sand-hell); stroke: var(--sand); stroke-width: 1; }
.bk-ort { font: 600 12px var(--sans); fill: var(--ink-2); text-anchor: middle; letter-spacing: 0.04em; }
.bk-m.kb { fill: var(--rot); } .bk-m.kk { fill: var(--ink-2); } .bk-m.kf { fill: var(--blau); } .bk-m.kc { fill: var(--sand); } .bk-m.kd { fill: var(--gruen); }
.bk-p { stroke: var(--paper); stroke-width: 1; } .bk-p:hover { stroke: var(--ink); stroke-width: 2; }
.bk-p.bk-gm { stroke: var(--paper); stroke-width: 2; }
.bk-gm { stroke: var(--ink); }
.bk-nr { font: 700 12px var(--sans); fill: var(--ink); paint-order: stroke; stroke: var(--paper-2); stroke-width: 3px; }
.bk-mass path { stroke: var(--ink-2); stroke-width: 1.5; fill: none; } .bk-mass text, .bk-nord text { font: 11px var(--sans); fill: var(--ink-2); }
.bk-nord path { stroke: var(--ink-2); stroke-width: 1.5; fill: none; }
.bk-legende { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-family: var(--sans); font-size: 0.85rem; margin: 0.6rem 0; }
.bk-leg { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; }
.bk-leg svg { width: 1.1rem; height: 1.1rem; }
.bk-leg span { color: var(--ink-3); }
.bk-leg-gm { cursor: default; } .bk-leg-gm .bk-gm { fill: var(--rot); }

/* ---------- Sonderseite Flurnamen ---------- */
.flseite .spalte.breit { max-width: var(--breit); }
.flseite h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); line-height: 1.15; margin: 3rem 0 0.8rem; text-wrap: balance; }
.flstreit { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; margin: 1rem 0 2rem; }
.flfall { border: 1px solid var(--line); background: var(--paper-2); border-radius: 4px; padding: 1rem 1.2rem; font-family: var(--sans); font-size: 0.92rem; line-height: 1.55; }
.flfall h3 { font-family: var(--serif); text-transform: none; letter-spacing: 0; font-size: 1.2rem; color: var(--ink); margin: 0 0 0.4rem; }
.flfall p { margin: 0; }
.fltab tr[hidden] { display: none; }
.fltab th[scope="row"] { width: 22%; }
.fl-lage, .fl-alt { display: block; color: var(--ink-3); font-size: 0.82rem; }
.fl-alt { font-style: italic; }
.fl-leer { color: var(--ink-3); }

/* ---------- Sonderseite Spuren in Stein ---------- */
.stfliess { max-width: var(--maß); }
.stfliess p { margin: 0 0 1.2em; text-wrap: pretty; hyphens: auto; }
.stseite .bsinschrift { max-width: var(--maß); }
.sttab th[scope="row"] { width: 18%; }
.sttab td:nth-child(2), .sttab td:nth-child(3) { min-width: 8rem; }

.pindex { margin: 1.2rem 0 0; padding: 0.9rem 1.2rem; border-left: 3px solid var(--rot); background: var(--paper-2); font-family: var(--sans); font-size: 0.92rem; line-height: 1.55; }
.pindex p { margin: 0; }

/* ---------- Flurnamen: Karte ---------- */
:root { --fa-g: #25679a; --fa-n: #b8862f; --fa-t: #4d8a50; --fa-p: #b3262c; --fa-h: #7b5ea7; --fa-l: #4a4641; --fa-u: #d2701a; --fa-k: #8a8378; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fa-g: #6aaee0; --fa-n: #e0b050; --fa-t: #84c186; --fa-p: #ef6a70; --fa-h: #b79ae0; --fa-l: #c3bcae; --fa-u: #f0a05a; --fa-k: #a39b8c; } }
:root[data-theme="dark"] { --fa-g: #6aaee0; --fa-n: #e0b050; --fa-t: #84c186; --fa-p: #ef6a70; --fa-h: #b79ae0; --fa-l: #c3bcae; --fa-u: #f0a05a; --fa-k: #a39b8c; }
.fa-g { --c: var(--fa-g); } .fa-n { --c: var(--fa-n); } .fa-t { --c: var(--fa-t); } .fa-p { --c: var(--fa-p); }
.fa-h { --c: var(--fa-h); } .fa-l { --c: var(--fa-l); } .fa-u { --c: var(--fa-u); } .fa-k { --c: var(--fa-k); }
.fl-pt { display: inline-block; width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--c); margin-right: 0.4em; vertical-align: baseline; }
.fl-such { margin: 0.6rem 0 1rem; }
.fl-such input { width: 100%; max-width: 28rem; padding: 0.5rem 0.7rem; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: var(--ink); font: inherit; }
.fl-kartenfeld { position: relative; margin: 0.6rem 0 0.8rem; }
.fl-svg { width: 100%; height: auto; display: block; background: var(--paper-2); border: 1px solid var(--line); border-radius: 4px; touch-action: none; cursor: grab; user-select: none; }
.fl-svg:active { cursor: grabbing; }
.fl-dot { fill: var(--c); stroke: var(--paper); stroke-width: 1.2; cursor: pointer; }
.fl-dot.fl-ung { fill: var(--paper-2); stroke: var(--c); stroke-width: 2.2; }
.fl-dot.sel { stroke: var(--ink); stroke-width: 2.5; fill: var(--c); }
.fl-lbl { font: 600 12px var(--sans); fill: var(--ink); paint-order: stroke; stroke: var(--paper-2); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; display: none; }
.fl-svg[data-z="2"] .fl-lbl, .fl-svg[data-z="3"] .fl-lbl { display: inline; }
.fl-svg[data-z="1"] .fl-lbl.treffer, .fl-svg[data-z="0"] .fl-lbl.treffer, .fl-lbl.sel { display: inline; }
.fl-lbl.aus { display: none !important; }
.fl-knoepfe { position: absolute; right: 0.6rem; top: 0.6rem; display: flex; flex-direction: column; gap: 0.3rem; }
.fl-knoepfe button { width: 2.2rem; height: 2.2rem; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 4px; font: 700 1.1rem var(--sans); cursor: pointer; }
.fl-knoepfe button:hover { border-color: var(--rot); color: var(--rot); }
.fl-info { border: 1px solid var(--line); border-left: 4px solid var(--rot); background: var(--paper-2); border-radius: 4px; padding: 0.8rem 1.1rem; font-family: var(--sans); font-size: 0.92rem; line-height: 1.55; margin: 0 0 0.8rem; max-width: 52rem; }
.fl-info h3 { font-family: var(--serif); text-transform: none; letter-spacing: 0; font-size: 1.25rem; color: var(--ink); margin: 0 0 0.3rem; }
.fl-info p { margin: 0 0 0.5em; } .fl-info p:last-child { margin: 0; }
.fl-meta { color: var(--ink-3); font-size: 0.85rem; } .fl-quelle { color: var(--ink-3); font-size: 0.8rem; }
.fl-k { text-align: right; white-space: nowrap; }
.fl-zeig { font: 600 0.78rem var(--sans); padding: 0.25rem 0.6rem; border: 1px solid var(--line); background: var(--paper); color: var(--rot); border-radius: 3px; cursor: pointer; }
.fl-zeig:hover { border-color: var(--rot); }
.fltab tr.sel > * { background: var(--sand-hell); }
.flseite .chip .fl-pt { margin-right: 0.35em; }

/* Verknüpfung der Kleindenkmale mit den Projekten Pano und Grenze */
.bsverbund { margin: 1rem 0 0.4rem; padding: 0.7rem 1rem; border-left: 3px solid var(--rot, #a33); background: color-mix(in srgb, currentColor 5%, transparent); font-size: 0.95rem; }
.bsverbund h4 { margin: 0.2rem 0 0.4rem; font-size: 0.95rem; }
.bsverbund p { margin: 0.4rem 0; }
.bsverbund summary { cursor: pointer; font-weight: 600; }
.bslinks { font-size: 0.9rem; margin: 0.6rem 0 0.2rem; }
.bstab .bsverbund { margin: 0.5rem 0 0; padding: 0.4rem 0.7rem; font-size: 0.88rem; }
.bstab .bslinks { margin: 0.3rem 0 0; }