/* ============================================================
   Verein für Heimatkunde Bad Sooden-Allendorf
   Grundstil — eine Datei für die ganze Seite
   ============================================================ */

:root{
  /* ---------- Helle Fassung (Standard) ---------- */
  --sole:#0d3b45; --sole-2:#12525f;
  --salz:#f7f4ee; --salz-2:#efe9dd; --sand:#e2d7c3;
  --kupfer:#a1521f; --kupfer-hell:#d98a4e;
  --tinte:#1b1d1c; --tinte-2:#414644; --tinte-3:#5d6764;
  --linie:#cfc7b6;
  --lokal:#0d3b45; --global:#7a4d21; --amt:#4c5a43;
  --bg:#faf8f4; --karte:#fff;
  --fokus:#0d3b45;
  --schatten:0 1px 2px rgba(27,29,28,.05), 0 8px 24px -12px rgba(27,29,28,.18);
  --schatten-stark:0 2px 6px rgba(27,29,28,.08), 0 18px 48px -18px rgba(27,29,28,.3);

  /* ---------- Dunkle Fassung: Werte an einer Stelle ---------- */
  --d-sole:#7fc9db; --d-sole-2:#9ad8e6;
  --d-salz:#14181a; --d-salz-2:#1b2124; --d-sand:#2a3236;
  --d-kupfer:#e8a36a; --d-kupfer-hell:#f0b98a;
  --d-tinte:#eef1ef; --d-tinte-2:#c3cac7; --d-tinte-3:#a5b1ae;
  --d-linie:#38423f;
  --d-lokal:#7fc9db; --d-global:#e0a86e; --d-amt:#a9c69a;
  --d-bg:#0f1315; --d-karte:#171d20;
  --d-fokus:#9ad8e6;
  --d-schatten:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --d-schatten-stark:0 2px 6px rgba(0,0,0,.5), 0 18px 48px -18px rgba(0,0,0,.8);

  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --r:10px; --breit:1240px; --schmal:74ch;
  --kopf-h:60px;
  --schleier-oben:.86; --schleier-mitte:.62;
}

/* Die Zuweisung steht zweimal — einmal für den Schalter, einmal für die
   Systemeinstellung, damit der Dunkelmodus auch ohne JavaScript greift.
   Die Farbwerte selbst stehen nur oben. Beide Blöcke gemeinsam ändern. */
:root[data-thema="dunkel"]{
  --sole:var(--d-sole); --sole-2:var(--d-sole-2);
  --salz:var(--d-salz); --salz-2:var(--d-salz-2); --sand:var(--d-sand);
  --kupfer:var(--d-kupfer); --kupfer-hell:var(--d-kupfer-hell);
  --tinte:var(--d-tinte); --tinte-2:var(--d-tinte-2); --tinte-3:var(--d-tinte-3);
  --linie:var(--d-linie);
  --lokal:var(--d-lokal); --global:var(--d-global); --amt:var(--d-amt);
  --bg:var(--d-bg); --karte:var(--d-karte); --fokus:var(--d-fokus);
  --schatten:var(--d-schatten); --schatten-stark:var(--d-schatten-stark);
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-thema="hell"]){
    --sole:var(--d-sole); --sole-2:var(--d-sole-2);
    --salz:var(--d-salz); --salz-2:var(--d-salz-2); --sand:var(--d-sand);
    --kupfer:var(--d-kupfer); --kupfer-hell:var(--d-kupfer-hell);
    --tinte:var(--d-tinte); --tinte-2:var(--d-tinte-2); --tinte-3:var(--d-tinte-3);
    --linie:var(--d-linie);
    --lokal:var(--d-lokal); --global:var(--d-global); --amt:var(--d-amt);
    --bg:var(--d-bg); --karte:var(--d-karte); --fokus:var(--d-fokus);
    --schatten:var(--d-schatten); --schatten-stark:var(--d-schatten-stark);
    color-scheme:dark;
  }
}

/* ---------- Verstärkter Kontrast ---------- */
:root[data-kontrast="hoch"]{
  --tinte:#000; --tinte-2:#242927; --tinte-3:#4a5350;
  --kupfer:#8b3f18; --sole:#062a32; --linie:#8d8677;
  --salz-2:#eae3d5; --bg:#fffdf9; --karte:#fff;
  --schleier-oben:.95; --schleier-mitte:.82;
}
:root[data-thema="dunkel"][data-kontrast="hoch"]{
  --tinte:#fff; --tinte-2:#e4e9e7; --tinte-3:#ccd1d0;
  --kupfer:#f5c396; --kupfer-hell:#f8d5b5; --sole:#b6e6f2; --lokal:#b6e6f2;
  --global:#f0c48f; --amt:#c6dcb9;
  --linie:#6a7773; --salz-2:#20282b; --bg:#05080a; --karte:#101618;
}
@media (prefers-color-scheme: dark){
  :root:not([data-thema="hell"])[data-kontrast="hoch"]{
    --tinte:#fff; --tinte-2:#e4e9e7; --tinte-3:#ccd1d0;
    --kupfer:#f5c396; --kupfer-hell:#f8d5b5; --sole:#b6e6f2; --lokal:#b6e6f2;
    --global:#f0c48f; --amt:#c6dcb9;
    --linie:#6a7773; --salz-2:#20282b; --bg:#05080a; --karte:#101618;
  }
}
/* Im starken Kontrast sind alle Verweise unterstrichen, nicht nur beim Zeigen */
:root[data-kontrast="hoch"] a{text-decoration:underline;text-decoration-color:currentColor}
:root[data-kontrast="hoch"] .feld,
:root[data-kontrast="hoch"] .kasten,
:root[data-kontrast="hoch"] figure.bild .rahmen{border:2px solid var(--linie)}

/* ---------- Schriftgröße ---------- */
:root{font-size:100%}
:root[data-schrift="gross"]{font-size:118%}
:root[data-schrift="sehr-gross"]{font-size:138%}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--bg);color:var(--tinte);font-family:var(--sans);font-size:1rem;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
a{color:var(--sole);text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:2px}
a:hover{color:var(--kupfer)}
.springlink{position:absolute;left:-9999px;top:0;background:var(--tinte);color:var(--bg);padding:.6rem 1rem;z-index:200;border-radius:0 0 8px 0}
.springlink:focus{left:0}

/* ---------- Kopf und Navigation ---------- */
html{overflow-x:clip}  /* der ausgeblendete Menü-Schubkasten liegt rechts außerhalb — darf keinen Seitenscroll erzeugen */
.kopf{position:sticky;top:0;z-index:80;border-bottom:1px solid var(--linie)}
.kopf::before{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);z-index:-1}
.kopf-innen{max-width:var(--breit);margin:0 auto;padding:.55rem 1.1rem;display:flex;align-items:center;gap:.7rem 1.2rem;position:relative;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit;flex:0 1 auto;min-width:0;position:relative;z-index:3}
.logo .zeichen{width:32px;height:39px;flex:none;color:var(--tinte-3);transition:transform .3s cubic-bezier(.4,0,.2,1)}
:root[data-thema="dunkel"] .logo .zeichen{color:var(--lokal)}
@media (prefers-color-scheme: dark){:root:not([data-thema="hell"]) .logo .zeichen{color:var(--lokal)}}
.logo:hover .zeichen{transform:translateY(-2px) scale(1.05)}
.logo b{font-family:var(--serif);font-size:min(1.02rem,19px);font-weight:600;line-height:1.15;letter-spacing:.005em}
.logo .ort{display:block;font-size:min(.7rem,13px);color:var(--tinte-3);font-weight:400;letter-spacing:.06em;text-transform:uppercase}
.logo .name{display:block;line-height:1.2}

nav{margin-left:auto}
.menue{display:flex;gap:.15rem;list-style:none;margin:0;padding:0;align-items:center}
.menue>li{position:relative}
.menue>li>a,.menue>li>button{
  display:block;padding:.5rem .78rem;font-size:min(.905rem,17px);color:var(--tinte-2);text-decoration:none;
  border-radius:7px;border:0;background:none;font-family:inherit;cursor:pointer;position:relative;
  transition:color .18s;white-space:nowrap;
}
.menue>li>a::after,.menue>li>button::after{
  content:"";position:absolute;left:.78rem;right:.78rem;bottom:.28rem;height:2px;
  background:var(--kupfer);transform:scaleX(0);transform-origin:left;
  transition:transform .26s cubic-bezier(.4,0,.2,1);border-radius:2px;
}
.menue>li>a:hover,.menue>li>button:hover,.menue>li.auf>button{color:var(--tinte)}
.menue>li>a:hover::after,.menue>li>button:hover::after,.menue>li.auf>button::after{transform:scaleX(1)}
.menue>li>a[aria-current="page"]{color:var(--tinte);font-weight:600}
.menue>li>a[aria-current="page"]::after{transform:scaleX(1);background:var(--tinte)}
.menue .pfeil{display:inline-block;width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:.4rem;transition:transform .24s}
.menue>li.auf .pfeil{transform:rotate(-135deg) translateY(0)}

/* Untermenü */
.unter::before{content:"";position:absolute;left:0;right:0;top:-.45rem;height:.45rem}
.unter{
  position:absolute;top:calc(100% + .3rem);left:0;min-width:250px;background:var(--karte);
  border:1px solid var(--linie);border-radius:12px;box-shadow:var(--schatten-stark);
  padding:.4rem;list-style:none;margin:0;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s,transform .2s,visibility .2s;
}
.menue>li.auf .unter,
.menue>li>.unter:focus-within{opacity:1;visibility:visible;transform:none}
/* die hinteren Klappmenüs nach links öffnen, sonst schieben sie die Seite auf */
@media (min-width:1081px){.menue>li:nth-last-child(-n+2) .unter{left:auto;right:0}}
.unter a{display:block;padding:.5rem .7rem;border-radius:7px;text-decoration:none;color:var(--tinte-2);font-size:min(.885rem,17px);transition:background .15s,color .15s,padding-left .18s}
.unter a:hover{background:var(--salz-2);color:var(--tinte);padding-left:.95rem}
.unter a small{display:block;color:var(--tinte-3);font-size:.76rem;margin-top:.05rem;line-height:1.35}
.unter a:hover small{color:var(--tinte-2)}

.menue-schalter{position:absolute;opacity:0;pointer-events:none}
.menue-knopf{display:none;position:relative;z-index:3;border:1px solid var(--linie);background:var(--karte);color:var(--tinte);width:40px;height:40px;border-radius:9px;cursor:pointer;align-items:center;justify-content:center;flex:none}
.menue-knopf span,.menue-knopf span::before,.menue-knopf span::after{display:block;width:17px;height:1.8px;background:currentColor;border-radius:2px;transition:transform .25s,opacity .2s}
.menue-knopf span{position:relative}
.menue-knopf span::before,.menue-knopf span::after{content:"";position:absolute;left:0}
.menue-knopf span::before{top:-5.5px} .menue-knopf span::after{top:5.5px}
.menue-schalter:checked ~ .menue-knopf span{background:transparent}
.menue-schalter:checked ~ .menue-knopf span::before{transform:translateY(5.5px) rotate(45deg)}
.menue-schalter:checked ~ .menue-knopf span::after{transform:translateY(-5.5px) rotate(-45deg)}
.menue-schalter:focus-visible ~ .menue-knopf{outline:2px solid var(--kupfer);outline-offset:2px}

@media (max-width:1080px){
  .menue-knopf{display:flex}
  /* Der geschlossene Schubkasten wird NICHT nach rechts außerhalb geparkt —
     das erzeugte auf manchen Breiten seitlichen Seitenscroll. Er blendet auf. */
  nav{position:fixed;inset:0;z-index:2;background:var(--bg);overflow-y:auto;
      padding:4.6rem 1.1rem 5rem;opacity:0;transform:translateY(-.6rem);
      transition:opacity .22s ease,transform .26s cubic-bezier(.4,0,.2,1),visibility .22s;
      visibility:hidden;pointer-events:none;overscroll-behavior:contain}
  .menue-schalter:checked ~ nav, nav.offen{opacity:1;transform:none;visibility:visible;pointer-events:auto}
  .menue{flex-direction:column;align-items:stretch;gap:0}
  .menue>li{border-bottom:1px solid var(--linie);padding:.35rem 0}
  .menue>li:last-child{border-bottom:0}
  .menue>li>a,.menue>li>button{width:100%;text-align:left;padding:.6rem .4rem;font-size:1.05rem;border-radius:0}
  .menue>li>a::after,.menue>li>button::after{display:none}
  /* Gruppentitel statt Klappschalter — alle Punkte sind sofort sichtbar */
  .menue>li>button{color:var(--tinte-3);font-size:.72rem;text-transform:uppercase;
    letter-spacing:.1em;font-weight:600;padding:.7rem .4rem .2rem;cursor:default;pointer-events:none}
  .menue .pfeil{display:none}
  .unter{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
         max-height:none;overflow:visible;padding:0;min-width:0}
  .unter a{padding:.55rem .4rem;font-size:1rem}
  .unter a:hover{padding-left:.75rem}
  .unter a small{font-size:.8rem}
}

/* ---------- Grundraster ---------- */
main{min-height:60vh}
.bahn{max-width:var(--breit);margin:0 auto;padding:0 1.1rem}
.eng{max-width:var(--schmal)}
section{padding:3.2rem 0}
section+section{border-top:1px solid var(--linie)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;line-height:1.2}
h1{font-size:clamp(1.95rem,4.6vw,3rem);margin:0 0 .7rem}
h2{font-size:clamp(1.4rem,2.8vw,1.95rem);margin:0 0 .8rem}
h3{font-size:1.18rem;margin:1.6rem 0 .5rem}
p{margin:0 0 1rem;max-width:var(--schmal)}
.fuehrer{font-size:1.1rem;color:var(--tinte-2);max-width:62ch}
.dach{font-size:.73rem;text-transform:uppercase;letter-spacing:.11em;color:var(--kupfer);font-weight:600;margin-bottom:.5rem;display:block}

/* ---------- Startseite ---------- */
.buehne{padding:4.5rem 0 3.2rem;position:relative;overflow:hidden}
.buehne::after{content:"";position:absolute;right:-14%;top:-28%;width:640px;height:640px;
  background:radial-gradient(circle,color-mix(in srgb,var(--sand) 55%,transparent),transparent 66%);z-index:-1;pointer-events:none}
.buehne h1{max-width:17ch}
.buehne .fuehrer{font-size:1.19rem;max-width:56ch}
.knopfreihe{display:flex;gap:.65rem;flex-wrap:wrap;margin-top:1.9rem}
.knopf{display:inline-flex;align-items:center;gap:.5rem;padding:.72rem 1.35rem;border-radius:99px;
  background:var(--tinte);color:var(--bg);text-decoration:none;font-size:.94rem;font-weight:500;
  border:1px solid var(--tinte);transition:transform .18s,box-shadow .18s,background .18s}
.knopf:hover{transform:translateY(-2px);box-shadow:var(--schatten-stark);background:var(--sole);border-color:var(--sole);color:#fff}
.knopf.leer{background:none;color:var(--tinte);border-color:var(--linie)}
.knopf.leer:hover{background:var(--salz-2);color:var(--tinte);border-color:var(--tinte-3)}
.knopf .pf{transition:transform .2s}
.knopf:hover .pf{transform:translateX(3px)}

.gitter{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.feld{background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);padding:1.35rem;
  text-decoration:none;color:inherit;display:block;transition:transform .2s,box-shadow .2s,border-color .2s;position:relative;overflow:hidden}
.feld::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--kupfer);transform:scaleY(0);transform-origin:top;transition:transform .28s cubic-bezier(.4,0,.2,1)}
.feld:hover{transform:translateY(-3px);box-shadow:var(--schatten-stark);border-color:var(--tinte-3)}
.feld:hover::before{transform:scaleY(1)}
.feld h3{margin:0 0 .35rem;font-size:1.12rem}
.feld p{font-size:.92rem;color:var(--tinte-2);margin:0}
.feld .mehr{display:inline-block;margin-top:.75rem;font-size:.85rem;color:var(--kupfer);font-weight:500}
.feld .mehr::after{content:" →";transition:margin .2s}
.feld:hover .mehr::after{margin-left:.25rem}

.zahlen{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:1.6rem}
.zahl b{display:block;font-family:var(--serif);font-size:2.15rem;line-height:1;color:var(--sole);font-variant-numeric:tabular-nums}
:root[data-thema="dunkel"] .zahl b{color:var(--lokal)}
@media (prefers-color-scheme: dark){:root:not([data-thema="hell"]) .zahl b{color:var(--lokal)}}
.zahl span{font-size:.86rem;color:var(--tinte-3)}

/* ---------- Inhaltselemente ---------- */
.kasten{background:var(--salz-2);border-radius:var(--r);padding:1.15rem 1.35rem;margin:1.5rem 0;max-width:var(--schmal)}
.kasten h3{margin-top:0}
.kasten.warnung{background:color-mix(in srgb,var(--kupfer) 7%,var(--karte));border:1px solid color-mix(in srgb,var(--kupfer) 34%,transparent);color:var(--tinte)}
.kasten.warnung b{color:var(--tinte);font-weight:700}
.kasten.warnung>p:first-child>b:first-child{color:var(--kupfer)}
.liste{list-style:none;padding:0;margin:1rem 0;max-width:var(--schmal)}
.liste li{padding:.65rem 0;border-bottom:1px solid var(--linie);display:flex;gap:1rem;align-items:baseline}
.liste li:last-child{border-bottom:0}
.liste .wann{flex:none;width:11rem;color:var(--tinte-3);font-size:.9rem;font-variant-numeric:tabular-nums}
@media (max-width:600px){.liste li{flex-direction:column;gap:.15rem}.liste .wann{width:auto}}
table{border-collapse:collapse;width:100%;max-width:var(--schmal);margin:1.2rem 0;font-size:.93rem}
th,td{text-align:left;padding:.55rem .7rem;border-bottom:1px solid var(--linie);vertical-align:top}
th{font-weight:600;color:var(--tinte-3);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}
tr:hover td{background:var(--salz-2)}
blockquote{margin:1.4rem 0;padding:.3rem 0 .3rem 1.2rem;border-left:3px solid var(--kupfer);color:var(--tinte-2);font-family:var(--serif);font-size:1.06rem;max-width:var(--schmal)}
.platzhalter{border:1.5px dashed var(--linie);border-radius:var(--r);padding:1.5rem;color:var(--tinte-3);text-align:center;font-size:.9rem;margin:1.2rem 0;max-width:var(--schmal)}
.platzhalter b{display:block;color:var(--tinte-2);font-family:var(--serif);font-size:1.05rem;margin-bottom:.3rem}

/* ---------- Fuß ---------- */
.fuss{border-top:1px solid var(--linie);background:var(--salz-2);margin-top:3rem;padding:3rem 0 2.2rem;font-size:.9rem}
.fuss-gitter{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));max-width:var(--breit);margin:0 auto;padding:0 1.1rem}
.fuss h4{margin:0 0 .6rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.09em;color:var(--tinte-3);font-family:var(--sans);font-weight:600}
.fuss ul{list-style:none;padding:0;margin:0}
.fuss li{margin-bottom:.35rem}
.fuss a{color:var(--tinte-2);text-decoration:none}
.fuss a:hover{color:var(--kupfer);text-decoration:underline}
.fuss-unten{max-width:var(--breit);margin:2.2rem auto 0;padding:1.2rem 1.1rem 0;border-top:1px solid var(--linie);color:var(--tinte-3);font-size:.83rem;display:flex;gap:1.2rem;flex-wrap:wrap}
.fuss-unten a{color:var(--tinte-3)}

/* ---------- Lexikon ---------- */
.lex-kopf{position:sticky;top:var(--kopf-h);z-index:50;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);padding:.85rem 0;border-bottom:1px solid var(--linie);margin-bottom:1.5rem}
.lex-suche{width:100%;max-width:400px;padding:.55rem .9rem;border:1px solid var(--linie);border-radius:99px;background:var(--karte);color:var(--tinte);font:inherit;font-size:.92rem}
.lex-suche:focus{outline:2px solid var(--kupfer);outline-offset:1px}
.kat-reihe{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.65rem}
.kat{border:1px solid var(--linie);background:var(--karte);color:var(--tinte-2);padding:.28rem .68rem;border-radius:99px;font-size:.79rem;cursor:pointer;font-family:inherit;transition:all .16s}
.kat:hover{border-color:var(--tinte-3);transform:translateY(-1px)}
.kat[aria-pressed="true"]{background:var(--tinte);color:var(--bg);border-color:var(--tinte)}
:root[data-thema="dunkel"] .kat[aria-pressed="true"]{color:#0f1315}
@media (prefers-color-scheme: dark){:root:not([data-thema="hell"]) .kat[aria-pressed="true"]{color:#0f1315}}
.lex-gitter{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.lex-karte{background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);padding:1.05rem 1.2rem;transition:box-shadow .18s,transform .18s,border-color .18s;cursor:pointer}
.lex-karte:hover{box-shadow:var(--schatten-stark);transform:translateY(-2px);border-color:var(--tinte-3)}
.lex-karte h3{margin:0 0 .3rem;font-size:1.06rem}
.lex-karte p{font-size:.885rem;color:var(--tinte-2);margin:0}
.lex-karte .kat-tag{font-size:.68rem;text-transform:uppercase;letter-spacing:.075em;color:var(--tinte-3);margin-bottom:.25rem;display:block}
.lex-karte .lang{display:none;margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--linie);font-size:.9rem;color:var(--tinte-2)}
.lex-karte.offen .lang{display:block}
.lex-karte .bezug{background:var(--salz-2);border-radius:7px;padding:.6rem .75rem;margin-top:.7rem;font-size:.86rem}
.lex-karte .bezug b{display:block;font-size:.67rem;text-transform:uppercase;letter-spacing:.08em;color:var(--tinte-3);margin-bottom:.2rem}
.verwandt{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.6rem}
.verwandt button{border:1px solid var(--linie);background:none;color:var(--tinte-2);padding:.15rem .5rem;border-radius:99px;font-size:.77rem;cursor:pointer;font-family:inherit}
.verwandt button:hover{border-color:var(--kupfer);color:var(--kupfer)}
mark{background:color-mix(in srgb,var(--kupfer) 26%,transparent);border-radius:2px;color:inherit}

/* ---------- Personen ---------- */
.spur{margin:2rem 0}
.spur h3{margin:0 0 .8rem}
.person{display:grid;grid-template-columns:11rem 1fr;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--linie);align-items:baseline}
.person:hover{background:var(--salz-2)}
.person .zeit{color:var(--tinte-3);font-size:.89rem;font-variant-numeric:tabular-nums}
.person b{font-weight:600}
.person .anm{display:block;color:var(--tinte-2);font-size:.87rem;margin-top:.15rem}
.person.unsicher .zeit{font-style:italic;opacity:.85}
@media (max-width:620px){.person{grid-template-columns:1fr;gap:.1rem}}

/* ---------- Museum-Teaser ---------- */
.museum-buehne{background:linear-gradient(150deg,var(--sole),var(--sole-2) 62%,#0a2b33);color:#f3efe6;border-radius:16px;padding:3rem 2.2rem;margin:2rem 0;position:relative;overflow:hidden}
.museum-buehne::after{content:"";position:absolute;right:-90px;bottom:-130px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(217,138,78,.32),transparent 68%)}
.museum-buehne h2,.museum-buehne h3{color:#fff}
.museum-buehne p{color:#d9d3c6;max-width:56ch}
.museum-buehne .knopf{background:#f3efe6;color:var(--sole);border-color:#f3efe6}
.museum-buehne .knopf:hover{background:#fff;color:var(--sole)}
.bald{display:inline-block;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;background:rgba(255,255,255,.16);color:#fff;padding:.22rem .6rem;border-radius:99px;margin-bottom:.9rem}

/* ---------- Stadtwiki ---------- */
.brotkrumen{font-size:.85rem;color:var(--tinte-3);margin-bottom:1.2rem}
.brotkrumen span{margin:0 .35rem;opacity:.6}
.wiki-raster{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:2.4rem;align-items:start}
@media (max-width:900px){.wiki-raster{grid-template-columns:1fr}.infobox{order:-1;max-width:100%!important}}
.wiki-text h1{margin:0 0 .3rem;padding-bottom:.5rem;border-bottom:2px solid var(--linie)}
.wiki-text h2{font-size:1.35rem;margin:2rem 0 .6rem;padding-bottom:.3rem;border-bottom:1px solid var(--linie)}
.wiki-text h3{font-size:1.1rem;margin:1.5rem 0 .4rem}
.wiki-text p{max-width:none}
.wiki-text ul,.wiki-text ol{max-width:var(--schmal);padding-left:1.3rem}
.wiki-text li{margin-bottom:.35rem}
.wiki-text .einzug{margin-left:1.6rem;color:var(--tinte-2)}

.infobox{background:var(--salz-2);border:1px solid var(--linie);border-radius:var(--r);overflow:hidden;font-size:.88rem;position:sticky;top:calc(var(--kopf-h) + 1rem)}
.ib-kopf{background:var(--sole);color:#fff;padding:.7rem 1rem;font-family:var(--serif);font-size:1.05rem;font-weight:600;text-align:center}
:root[data-thema="dunkel"] .ib-kopf{background:var(--sand);color:var(--tinte)}
@media (prefers-color-scheme: dark){:root:not([data-thema="hell"]) .ib-kopf{background:var(--sand);color:var(--tinte)}}
.infobox table{width:100%;margin:0;font-size:.87rem}
.infobox th{text-align:left;color:var(--tinte-3);font-weight:600;width:42%;vertical-align:top;padding:.5rem .8rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--linie)}
.infobox td{padding:.5rem .8rem;border-bottom:1px solid var(--linie)}
.infobox tr:last-child th,.infobox tr:last-child td{border-bottom:0}
.infobox tr:hover td{background:transparent}
.ib-typ{padding:.4rem .8rem;font-size:.7rem;color:var(--tinte-3);text-transform:uppercase;letter-spacing:.07em;border-top:1px solid var(--linie);text-align:center}

sup.fn a{text-decoration:none;font-size:.75em;padding:0 .1em;color:var(--sole)}
:root[data-thema="dunkel"] sup.fn a{color:var(--lokal)}
@media (prefers-color-scheme: dark){:root:not([data-thema="hell"]) sup.fn a{color:var(--lokal)}}
sup.fn a:hover{background:color-mix(in srgb,var(--kupfer) 20%,transparent);border-radius:2px}
.fussnoten{margin-top:2.4rem;padding-top:1rem;border-top:1px solid var(--linie)}
.fussnoten h2{font-size:1.1rem;border:0;margin-bottom:.6rem}
.fussnoten ol{font-size:.87rem;color:var(--tinte-2);padding-left:1.6rem}
.fussnoten li{margin-bottom:.5rem;scroll-margin-top:calc(var(--kopf-h) + 1rem)}
.fussnoten li:target{background:color-mix(in srgb,var(--kupfer) 12%,transparent);border-radius:4px;padding:.2rem .4rem;margin-left:-.4rem}
.rueck{text-decoration:none;color:var(--tinte-3);font-weight:600;margin-right:.2rem}
.rueck:hover{color:var(--kupfer)}
.abruf{color:var(--tinte-3)}

.wl.fehlt{color:#a8442c;text-decoration:none;border-bottom:1px dotted currentColor;cursor:help}
:root[data-thema="dunkel"] .wl.fehlt{color:#e08a6f}
@media (prefers-color-scheme: dark){:root:not([data-thema="hell"]) .wl.fehlt{color:#e08a6f}}
span.wl.fehlt{border-bottom:1px dotted currentColor}
.normdaten{margin-top:1.6rem;padding:.7rem .9rem;background:var(--salz-2);border-radius:8px;font-size:.82rem;color:var(--tinte-3)}
.normdaten b{color:var(--tinte-2);margin-right:.4rem}
.kategorien{margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--linie);font-size:.85rem;color:var(--tinte-3)}
.kategorien b{color:var(--tinte-2);margin-right:.4rem}
.wiki-fuss{margin-top:2rem;font-size:.83rem;color:var(--tinte-3);font-style:italic}
.wikitabelle{border:1px solid var(--linie);background:var(--karte)}
.wikitabelle th{background:var(--salz-2)}
.kat-gitter{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin-top:1.4rem}
.kat-block{scroll-margin-top:calc(var(--kopf-h) + 1rem)}
.kat-block h3{margin:0 0 .3rem;font-size:1rem;padding-bottom:.3rem;border-bottom:1px solid var(--linie)}
.kat-block .liste{margin:0}
.kat-block .liste li{padding:.3rem 0;border:0;font-size:.9rem}

/* ============================================================
   Bilder — Bühnen, Enthüllung, Bildstrecken, Leuchtkasten
   ============================================================ */

/* ---------- Grundbaustein: Bild mit Nachweis ---------- */
figure.bild{margin:1.9rem 0;position:relative}
/* Jede Bildfassung braucht einen Bezugsrahmen, damit die Bildmarke darin
   sitzt — auch die klassenlosen Figuren in Bildstrecke und Leuchtkasten. */
figure .rahmen{position:relative}
figure.bild .rahmen{
  position:relative;overflow:hidden;border-radius:var(--r);
  background-size:cover;background-position:center;
  box-shadow:var(--schatten);
}
figure.bild .rahmen::after{                 /* feine Innenkante, damit helle Bilder nicht ausfransen */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tinte) 10%,transparent);
}
figure.bild img{width:100%;display:block;transition:opacity .6s ease, transform 1.1s cubic-bezier(.22,.61,.36,1)}
figure.bild.breit{max-width:none}
figcaption{
  margin-top:.55rem;font-size:.795rem;line-height:1.5;color:var(--tinte-3);
  display:flex;flex-wrap:wrap;gap:.15rem .5rem;align-items:baseline;
}
figcaption .motiv{color:var(--tinte-2);font-style:italic}
figcaption .nachweis{font-size:.745rem;letter-spacing:.01em}
figcaption a{color:inherit;text-decoration-color:color-mix(in srgb,currentColor 30%,transparent)}
figcaption a:hover{color:var(--kupfer)}
figcaption .nachweis .alle,.bildhinweis .alle{text-transform:uppercase;letter-spacing:.07em;white-space:nowrap}

/* ---------- Bildnachweis im Bild ----------
   Der vollstaendige Nachweis steht mit seinen Links in der Bildunterschrift.
   Hier dieselbe Angabe als Kurzform direkt im Bild, damit sie sichtbar bleibt,
   wenn das Bild fuer sich betrachtet oder weitergegeben wird. Fuer
   Screenreader ausgeblendet, weil die Unterschrift sie bereits vorliest,
   und klickdurchlaessig, damit Galerie und Leuchtkasten weiter reagieren. */
figure .rahmen .bildmarke{
  position:absolute;right:.5rem;bottom:.5rem;z-index:2;
  max-width:min(92%,44ch);margin:0;padding:.32em .6em;
  border-radius:calc(var(--r) / 2);
  font-size:.66rem;line-height:1.4;letter-spacing:.012em;text-align:right;
  color:#fff;background:rgba(12,15,16,.62);
  -webkit-backdrop-filter:blur(7px) saturate(1.15);backdrop-filter:blur(7px) saturate(1.15);
  text-shadow:0 1px 2px rgba(0,0,0,.5);
  pointer-events:none;text-wrap:pretty;
}
@media (max-width:480px){
  figure .rahmen .bildmarke{font-size:.6rem;right:.35rem;bottom:.35rem;max-width:min(94%,34ch);padding:.28em .5em}
}
:root[data-kontrast="hoch"] figure .rahmen .bildmarke{background:#000;text-shadow:none;border:1px solid #fff}
@media (prefers-reduced-transparency:reduce){
  figure .rahmen .bildmarke{background:rgba(12,15,16,.88);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media print{figure .rahmen .bildmarke{position:static;display:block;color:#000;background:none;text-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;text-align:left;padding:.2em 0}}

/* ---------- Enthüllung beim Scrollen ---------- */
.zeig{opacity:0;transform:translateY(26px);transition:opacity .85s cubic-bezier(.22,.61,.36,1),transform .85s cubic-bezier(.22,.61,.36,1)}
.zeig.da{opacity:1;transform:none}
.zeig .rahmen>img{transform:scale(1.07)}
.zeig.da .rahmen>img{transform:none}
@media (prefers-reduced-motion:reduce){
  .zeig{opacity:1;transform:none}
  .zeig .rahmen>img,.zeig.da .rahmen>img{transform:none}
}

/* ---------- Große Bildbühne ---------- */
.bildbuehne{
  position:relative;min-height:clamp(430px,78vh,760px);display:flex;align-items:flex-end;
  overflow:hidden;isolation:isolate;background:var(--tinte);
}
.bildbuehne .hintergrund{position:absolute;inset:0;z-index:0;overflow:hidden}
.bildbuehne .hintergrund img{
  width:100%;height:100%;object-fit:cover;
  animation:langsamHeran 26s cubic-bezier(.3,.1,.3,1) both;
  will-change:transform;
}
@keyframes langsamHeran{from{transform:scale(1.001)}to{transform:scale(1.11)}}
@media (prefers-reduced-motion:reduce){.bildbuehne .hintergrund img{animation:none}}
.bildbuehne .schleier{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to top,
      rgba(8,12,13,var(--schleier-oben)) 0%,
      rgba(8,12,13,var(--schleier-mitte)) 34%,
      rgba(8,12,13,.2) 64%, rgba(8,12,13,.38) 100%),
    linear-gradient(to right, rgba(8,12,13,.58) 0%, rgba(8,12,13,0) 64%);
}
.bildbuehne .bahn{position:relative;z-index:2;width:100%;padding-top:5rem;padding-bottom:2.6rem}
.bildbuehne .dach{color:#e9c9a8}
.bildbuehne h1{color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.45);margin:.2rem 0 .7rem;max-width:19ch}
.bildbuehne .fuehrer{color:rgba(255,255,255,.96);max-width:52ch;text-shadow:0 1px 16px rgba(0,0,0,.5)}
.bildbuehne .bildhinweis{
  position:absolute;right:0;bottom:0;z-index:3;padding:.42rem .8rem;
  font-size:.72rem;color:rgba(255,255,255,.92);background:rgba(6,9,10,.78);
  border-radius:var(--r) 0 0 0;backdrop-filter:blur(6px);max-width:min(96vw,52ch);
}
.bildbuehne .bildhinweis a{color:#fff;text-decoration:underline}
.bildbuehne .weiter{
  position:absolute;left:50%;bottom:1.1rem;z-index:3;transform:translateX(-50%);
  width:22px;height:34px;border:1.5px solid rgba(255,255,255,.45);border-radius:11px;
}
.bildbuehne .weiter::after{
  content:"";position:absolute;left:50%;top:6px;width:2px;height:6px;border-radius:1px;
  background:rgba(255,255,255,.8);animation:tropfen 2.1s ease-in-out infinite;
}
@keyframes tropfen{0%,100%{transform:translate(-50%,0);opacity:0}35%{opacity:1}70%{transform:translate(-50%,13px);opacity:0}}

/* ---------- Band über die volle Breite, mit Tiefenwirkung ---------- */
.band{position:relative;height:clamp(300px,52vh,520px);overflow:hidden;margin:3.4rem 0;isolation:isolate}
.band .tiefe{position:absolute;left:0;right:0;top:-16%;height:132%;z-index:0;will-change:transform}
.band .tiefe img{width:100%;height:100%;object-fit:cover}
.band .schleier{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(8,12,13,.7),rgba(8,12,13,.12) 55%,rgba(8,12,13,.4))}
.band .wort{position:relative;z-index:2;height:100%;display:flex;align-items:center}
.band .wort blockquote{
  margin:0;border:0;padding:0;max-width:34ch;color:#fff;font-family:var(--serif);
  font-size:clamp(1.28rem,2.6vw,2rem);line-height:1.34;text-shadow:0 2px 24px rgba(0,0,0,.5);
}
.band .wort cite{display:block;margin-top:.7rem;font-family:var(--sans);font-size:.83rem;
  font-style:normal;color:rgba(255,255,255,.9);letter-spacing:.02em}
.band .bildhinweis{position:absolute;right:0;bottom:0;z-index:3;padding:.36rem .75rem;font-size:.68rem;
  color:rgba(255,255,255,.92);background:rgba(6,9,10,.78);border-radius:var(--r) 0 0 0;max-width:min(96vw,50ch)}
.band .bildhinweis a{color:#fff;text-decoration:underline}

/* ---------- Bildstrecke, waagerecht ---------- */
.strecke{margin:2rem 0 1rem}
.strecke .lauf{
  display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:.4rem 1.1rem 1.4rem;margin:0 -1.1rem;scrollbar-width:thin;
}
.strecke .lauf::-webkit-scrollbar{height:7px}
.strecke .lauf::-webkit-scrollbar-thumb{background:var(--linie);border-radius:4px}
.strecke figure{flex:0 0 min(78vw,430px);scroll-snap-align:center;margin:0}
.strecke figure .rahmen{cursor:zoom-in;background:#0c0f10}
.strecke figure img{aspect-ratio:4/3;object-fit:cover;object-position:center;transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.strecke figure:hover img{transform:scale(1.035)}
.strecke figcaption{min-height:3.4em}

/* ---------- Damals und heute ---------- */
.damals figure.bild:last-child .rahmen img{filter:sepia(.28) contrast(1.05)}
.damals figure.bild:last-child:hover .rahmen img{filter:none}

/* ---------- Zwei nebeneinander ---------- */
.bildpaar{display:grid;gap:1.1rem;grid-template-columns:1fr;margin:1.9rem 0}
@media (min-width:760px){.bildpaar{grid-template-columns:1fr 1fr}.bildpaar figure{margin:0}}

/* ---------- Text neben Bild ---------- */
.textbild{display:grid;gap:1.6rem 2.4rem;grid-template-columns:1fr;align-items:start;margin:2.2rem 0}
@media (min-width:900px){
  .textbild{grid-template-columns:1.05fr .95fr}
  .textbild.kehr>figure{order:-1}
  .textbild>figure{margin:0;position:sticky;top:calc(var(--kopf-h) + 1.4rem)}
}

/* Zitate und andere verschachtelte Figuren kleben nie — nur das Bild
   als direktes Kind von .textbild ist sticky (siehe oben). */
.textbild figure.zitat,.textbild blockquote{position:static!important;top:auto!important}

/* ---------- Leuchtkasten ---------- */
.leuchtkasten{
  position:fixed;inset:0;z-index:300;background:rgba(6,9,10,.94);
  display:none;align-items:center;justify-content:center;padding:1.2rem;
  backdrop-filter:blur(4px);
}
.leuchtkasten[open],.leuchtkasten.auf{display:flex}
.leuchtkasten figure{margin:0;max-width:min(1180px,96vw);max-height:92vh;display:flex;flex-direction:column}
.leuchtkasten img{max-height:82vh;width:auto;max-width:100%;object-fit:contain;border-radius:6px;margin:0 auto}
.leuchtkasten figcaption{color:rgba(255,255,255,.72);justify-content:center;text-align:center;margin-top:.8rem}
.leuchtkasten figcaption .motiv{color:rgba(255,255,255,.92)}
.leuchtkasten figcaption a{color:rgba(255,255,255,.8)}
.leuchtkasten .zu{
  position:absolute;top:.8rem;right:.9rem;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff;
  font-size:1.3rem;line-height:1;cursor:pointer;
}
.leuchtkasten .zu:hover{background:rgba(255,255,255,.18)}
.leuchtkasten .blaettern{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:64px;
  border:0;background:rgba(255,255,255,.08);color:#fff;font-size:1.4rem;cursor:pointer;border-radius:6px}
.leuchtkasten .blaettern:hover{background:rgba(255,255,255,.2)}
.leuchtkasten .vor{right:.7rem}.leuchtkasten .zurueck{left:.7rem}

/* ---------- Bildnachweis-Seite ---------- */
.nachweis-liste{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin:1.4rem 0}
.nachweis-liste article{display:flex;gap:.85rem;background:var(--karte);border:1px solid var(--linie);
  border-radius:var(--r);padding:.7rem;align-items:flex-start}
.nachweis-liste img{width:84px;height:64px;object-fit:cover;border-radius:6px;flex:none;background:var(--salz-2)}
.nachweis-liste b{display:block;font-size:.88rem;font-weight:600;line-height:1.35}
.nachweis-liste small{display:block;font-size:.76rem;color:var(--tinte-3);margin-top:.2rem;line-height:1.5}
.lizenzmarke{display:inline-block;font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;
  padding:.1rem .38rem;border-radius:4px;background:var(--salz-2);color:var(--tinte-2);margin-right:.3rem}

/* Hochformatige Bilder in der Textspalte nicht ausufern lassen */
.textbild>figure.bild .rahmen{max-height:74vh}
.textbild>figure.bild img{max-height:74vh;width:100%;object-fit:contain;object-position:top}
@media (min-width:900px){.textbild>figure.bild .rahmen{background-position:top}}

@media (max-width:700px){
  .leuchtkasten .blaettern{top:auto;bottom:.8rem;transform:none;width:56px;height:46px}
  .leuchtkasten figure{padding-bottom:3.6rem}
  .leuchtkasten img{max-height:56vh}
}

/* ============================================================
   Ansicht einstellen — Farben, Kontrast, Schriftgröße
   ============================================================ */

/* Sichtbarer Fokus überall. Ohne den ist Tastaturbedienung Ratespiel. */
:where(a,button,input,select,summary,[tabindex]):focus-visible{
  outline:3px solid var(--fokus);
  outline-offset:2px;
  border-radius:4px;
}
:root[data-kontrast="hoch"] :where(a,button,input,select,summary,[tabindex]):focus-visible{
  outline-width:4px;
}

.ansicht{position:relative;flex:none;order:3}
.ansicht-knopf{
  display:flex;align-items:center;gap:.34rem;padding:.42rem .6rem;border-radius:8px;
  border:1px solid var(--linie);background:var(--karte);color:var(--tinte-2);
  font-family:inherit;font-size:min(.83rem,15px);cursor:pointer;line-height:1;white-space:nowrap;
  transition:color .18s,border-color .18s;
}
.ansicht-knopf:hover{color:var(--tinte);border-color:var(--tinte-3)}
.ansicht-knopf svg{width:17px;height:17px;flex:none}
.ansicht-knopf .wort{display:none}
@media (min-width:1100px){.ansicht-knopf .wort{display:inline}}

.ansicht-feld{
  position:absolute;right:0;top:calc(100% + .45rem);z-index:90;width:min(19rem,86vw);
  background:var(--karte);border:1px solid var(--linie);border-radius:12px;
  box-shadow:var(--schatten-stark);padding:.9rem;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s,transform .18s,visibility .18s;
}
.ansicht.auf .ansicht-feld{opacity:1;visibility:visible;transform:none}
.ansicht-feld h2{font-size:.95rem;margin:0 0 .1rem;font-family:var(--sans);font-weight:600}
.ansicht-feld>p{font-size:.78rem;color:var(--tinte-3);margin:0 0 .8rem}
.ansicht-feld fieldset{border:0;margin:0 0 .75rem;padding:0}
.ansicht-feld legend{font-size:.75rem;color:var(--tinte-3);padding:0 0 .3rem;
  letter-spacing:.05em;text-transform:uppercase;font-weight:600}
.wahlreihe{display:flex;gap:.3rem}
.wahlreihe label{
  flex:1;position:relative;text-align:center;font-size:.8rem;padding:.44rem .3rem;
  border:1px solid var(--linie);border-radius:7px;cursor:pointer;color:var(--tinte-2);
  transition:background .16s,color .16s,border-color .16s;
}
.wahlreihe input{position:absolute;opacity:0;width:100%;height:100%;left:0;top:0;margin:0;cursor:pointer}
.wahlreihe label:hover{border-color:var(--tinte-3);color:var(--tinte)}
.wahlreihe input:checked+span{font-weight:600}
.wahlreihe label:has(input:checked){background:var(--sole);border-color:var(--sole);color:var(--karte)}
:root[data-thema="dunkel"] .wahlreihe label:has(input:checked){color:var(--d-bg)}
.wahlreihe label:has(input:focus-visible){outline:3px solid var(--fokus);outline-offset:2px}
.ansicht-feld .zuruecksetzen{
  background:none;border:0;padding:.2rem 0;font-family:inherit;font-size:.78rem;
  color:var(--tinte-3);cursor:pointer;text-decoration:underline;
}
.ansicht-feld .zuruecksetzen:hover{color:var(--kupfer)}
.ansicht-feld .hinweis{font-size:.73rem;color:var(--tinte-3);margin:.5rem 0 0;line-height:1.45}

/* auf schmalen Bildschirmen im aufgeklappten Menü mitlaufen */
@media (max-width:1080px){
  .ansicht{order:2;margin-left:auto;margin-right:.4rem}
  .ansicht-feld{right:-.4rem;width:min(21rem,92vw)}
}

/* Nummerierte Aufzählung mit Luft */
ol.liste-zahlen{max-width:var(--schmal);padding-left:1.3rem;margin:1rem 0}
ol.liste-zahlen li{margin-bottom:.7rem;padding-left:.25rem}
ol.liste-zahlen li::marker{color:var(--kupfer);font-weight:700}

/* ============================================================
   Die Salzbibel — Leseausgabe
   ============================================================ */
.sb-kopf{padding:3.4rem 0 1.8rem;position:relative;overflow:hidden}
.sb-kopf::after{content:"";position:absolute;right:-12%;top:-40%;width:560px;height:560px;
  background:radial-gradient(circle,color-mix(in srgb,var(--kupfer) 12%,transparent),transparent 68%);
  pointer-events:none}
.sb-kopf h1{max-width:20ch}
.sb-kopf .fuehrer{max-width:62ch}
.sb-meta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.3rem}

/* ---------- Filterleiste ---------- */
.sb-leiste{position:sticky;top:var(--kopf-h);z-index:70;border-top:1px solid var(--linie);
  border-bottom:1px solid var(--linie);padding:.7rem 0 .6rem;margin-bottom:1.6rem}
.sb-leiste::before{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);z-index:-1}
.sb-reihe{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.45rem}
.sb-reihe:last-of-type{margin-bottom:0}
.sb-titel{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--tinte-3);
  font-weight:600;flex:none;width:5.4rem}
.sb-knoepfe{display:flex;gap:.3rem;flex-wrap:wrap;flex:1}
.sb-filter,.sb-ansicht,.sb-alle{
  display:inline-flex;align-items:center;gap:.35rem;padding:.32rem .62rem;border-radius:7px;
  border:1px solid var(--linie);background:var(--karte);color:var(--tinte-3);
  font-family:inherit;font-size:min(.83rem,15px);cursor:pointer;line-height:1.35;
  transition:color .16s,border-color .16s,background .16s;
}
.sb-filter:hover,.sb-ansicht:hover,.sb-alle:hover{color:var(--tinte);border-color:var(--tinte-3)}
.sb-filter[aria-pressed="true"]{background:var(--sole);border-color:var(--sole);color:var(--karte)}
:root[data-thema="dunkel"] .sb-filter[aria-pressed="true"]{color:var(--d-bg)}
@media (prefers-color-scheme:dark){:root:not([data-thema="hell"]) .sb-filter[aria-pressed="true"]{color:var(--d-bg)}}
.sb-ansicht[aria-pressed="true"]{background:color-mix(in srgb,var(--kupfer) 15%,var(--karte));
  border-color:var(--kupfer);color:var(--tinte);font-weight:600}
.sb-nr{font-size:.7rem;opacity:.75;font-variant-numeric:tabular-nums}
.sb-punkt{width:6px;height:6px;border-radius:50%;flex:none;background:var(--tinte-3)}
.sb-punkt.sb-fertig{background:#3d8b57}
.sb-punkt.sb-teilweise{background:var(--kupfer)}
.sb-punkt.sb-offen{background:color-mix(in srgb,var(--tinte-3) 45%,transparent)}
.sb-stand{margin:.5rem 0 0;font-size:.76rem;color:var(--tinte-3)}

/* ---------- Abschnitt ---------- */
.sb-abschnitt{margin:0 0 3.4rem;scroll-margin-top:calc(var(--kopf-h) + 7.5rem)}
.sb-element{scroll-margin-top:calc(var(--kopf-h) + 8rem)}
.sb-abschnitt>header{border-bottom:2px solid var(--linie);padding-bottom:.7rem;margin-bottom:1.2rem;
  /* ausdrücklich nicht klebend: sonst legt sich die Abschnittsüberschrift
     über die Filterleiste und fängt deren Klicks ab */
  position:static;z-index:auto;background:none;backdrop-filter:none}
.sb-abschnitt h2{margin:.1rem 0 .2rem;font-size:clamp(1.32rem,2.4vw,1.72rem)}
.sb-abschnitt .sb-dach{font-size:.73rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--kupfer);font-weight:600}
.sb-fakten{display:flex;gap:.4rem 1.1rem;flex-wrap:wrap;font-size:.8rem;color:var(--tinte-3);
  margin-top:.45rem;align-items:center}
.sb-marke{display:inline-flex;align-items:center;gap:.32rem;padding:.1rem .45rem;border-radius:5px;
  font-size:.73rem;font-weight:600;letter-spacing:.02em}
.sb-marke.sb-fertig{background:color-mix(in srgb,#3d8b57 16%,transparent);color:#2b6b41}
.sb-marke.sb-teilweise{background:color-mix(in srgb,var(--kupfer) 16%,transparent);color:var(--kupfer)}
.sb-marke.sb-offen{background:var(--salz-2);color:var(--tinte-3)}
:root[data-thema="dunkel"] .sb-marke.sb-fertig{color:#7cc999}
@media (prefers-color-scheme:dark){:root:not([data-thema="hell"]) .sb-marke.sb-fertig{color:#7cc999}}

/* ---------- Rhenanus' eigene Ankündigung ---------- */
.sb-rhenanus{border-left:3px solid var(--kupfer);padding:.5rem 0 .5rem 1rem;margin:1.1rem 0;
  max-width:var(--schmal);font-family:var(--serif);font-size:1.02rem;line-height:1.6;color:var(--tinte-2)}
.sb-rhenanus b{display:block;font-family:var(--sans);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tinte-3);margin-bottom:.3rem;font-weight:600}

/* ---------- Der Strom der Elemente ---------- */
/* Jede Handschriftenseite, jede Zusammenfassung, jede Anmerkung und jeder
   Platzhalter ist ein Element und sieht gleich aus: eine Karte mit einer
   Kopfzeile, die den Seitenbereich nennt. Unterschieden wird nur durch eine
   farbige Kante links. */
.sb-strom{display:grid;gap:.85rem;margin:1.2rem 0}
.sb-element{background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);
  padding:.9rem 1.15rem;border-left:3px solid var(--linie)}
.sb-el-kopf{display:flex;align-items:baseline;gap:.3rem .8rem;flex-wrap:wrap;
  font-size:.76rem;color:var(--tinte-3);letter-spacing:.03em;
  border-bottom:1px dotted var(--linie);padding-bottom:.4rem;margin-bottom:.75rem}
.sb-el-kopf b{font-weight:600;color:var(--tinte-2);font-size:.87rem;
  font-variant-numeric:tabular-nums;letter-spacing:.01em}
.sb-el-kopf a{margin-left:auto;color:var(--tinte-3);white-space:nowrap}
.sb-el-kopf a:hover{color:var(--kupfer)}

.sb-el-zusammenfassung{border-left-color:var(--sole);background:var(--salz)}
.sb-el-zusammenfassung .sb-el-kopf b{color:var(--sole)}
.sb-el-anmerkung{border-left-color:var(--kupfer);background:var(--salz-2)}
.sb-el-anmerkung .sb-el-kopf b{color:var(--kupfer)}
.sb-el-platzhalter{border-left-color:var(--sand);background:none}

.sb-fliess{max-width:var(--schmal)}
.sb-fliess p{margin:0 0 .8rem;font-size:.95rem}
.sb-fliess p:last-child{margin-bottom:0}
.sb-el-titel{margin:0 0 .3rem!important;font-family:var(--serif);font-size:1.02rem;
  font-weight:600;color:var(--tinte)}
.sb-el-platzhalter>p{margin:0 0 .4rem;font-size:.92rem;color:var(--tinte-2);
  max-width:var(--schmal)}

/* ---------- Der Text: Wortlaut und Übersetzung ---------- */
.sb-text{margin-top:.4rem}
.sb-seite{margin-bottom:1.7rem}
.sb-seitenkopf{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
  font-size:.74rem;color:var(--tinte-3);letter-spacing:.03em;
  border-bottom:1px dotted var(--linie);padding-bottom:.28rem;margin-bottom:.7rem}
.sb-seitenkopf b{font-weight:600;color:var(--tinte-2);font-variant-numeric:tabular-nums}
.sb-seitenkopf a{margin-left:auto;color:var(--tinte-3)}
.sb-seitenkopf a:hover{color:var(--kupfer)}
.sb-rand{font-size:.76rem;color:var(--tinte-3);font-style:italic;margin:.2rem 0 .6rem;
  padding-left:.7rem;border-left:2px solid var(--linie)}

.sb-paar{display:grid;gap:.2rem 1.8rem;padding:.35rem 0;border-radius:6px;transition:background .15s}
.sb-paar:hover{background:color-mix(in srgb,var(--kupfer) 6%,transparent)}
.sb-paar.zwei{grid-template-columns:1fr}
@media (min-width:920px){
  .sb-paar.zwei{grid-template-columns:1fr 1fr;gap:.2rem 2.4rem;position:relative}
  /* feine Mittellinie, damit die Spalten sich nicht vermischen */
  .sb-paar.zwei::before{content:"";position:absolute;left:calc(50% - .6px);top:.35rem;bottom:.35rem;
    width:1.2px;background:var(--linie);opacity:.55}
}
.sb-o{font-family:var(--serif);font-size:1.01rem;line-height:1.66;color:var(--tinte-2)}
.sb-m{font-size:.98rem;line-height:1.66}
.sb-paar.eins .sb-o,.sb-paar.eins .sb-m{max-width:var(--schmal)}
.sb-o::selection,.sb-m::selection{background:color-mix(in srgb,var(--kupfer) 30%,transparent)}
.sb-weiter{color:var(--tinte-3);font-size:.9em}

/* ---------- Faksimile-Hinweis bei leeren Abschnitten ---------- */
.sb-offen-hinweis{background:var(--karte);border:1px dashed var(--linie);border-radius:var(--r);
  padding:1rem 1.25rem;max-width:var(--schmal);font-size:.93rem;color:var(--tinte-2)}
.sb-offen-hinweis b{color:var(--tinte)}
.sb-leer{text-align:center;color:var(--tinte-3);padding:3rem 1rem}
.sb-leer b{display:block;color:var(--tinte);font-size:1.05rem;margin-bottom:.3rem}

@media (max-width:700px){
  .sb-titel{width:100%}
  .sb-leiste{position:static}
}

/* ---------- Arbeitsstand oben ---------- */
.sb-stand-kasten{background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);
  padding:1.1rem 1.35rem;margin-top:1.8rem;max-width:var(--schmal)}
.sb-stand-kasten h2{margin:0 0 .5rem;font-size:1.05rem;font-family:var(--sans);font-weight:600}
.sb-stand-kasten p{margin:0 0 .6rem;font-size:.93rem;color:var(--tinte-2)}
.sb-fortschritt{height:7px;border-radius:4px;background:var(--salz-2);overflow:hidden;
  margin:.9rem 0 .35rem!important}
.sb-fortschritt span{display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--kupfer),var(--kupfer-hell))}
.sb-fortschritt-text{margin:0!important;font-size:.78rem;color:var(--tinte-3);
  letter-spacing:.03em}

/* ---------- Anleitung über dem Filter ---------- */
.sb-anleitung-block{padding:.4rem 0 1.4rem}
.sb-anleitung{max-width:78ch;border-left:3px solid var(--kupfer);padding-left:1.1rem}
.sb-anleitung>b{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--kupfer);font-weight:700;margin-bottom:.35rem}
.sb-anleitung p{margin:0 0 .5rem;font-size:.89rem;color:var(--tinte-2);line-height:1.6}
.sb-anleitung p:last-child{margin-bottom:0}
.sb-anleitung b{color:var(--tinte)}
.sb-anleitung-tipp{font-size:.83rem!important;color:var(--tinte-3)!important}

.sb-noch-nicht{margin:.7rem 0 0!important;font-size:.86rem;color:var(--tinte-3);
  padding:.5rem .75rem;background:var(--salz-2);border-radius:7px}

/* ---------- Sachartikel: Inhaltsübersicht, Tabellen, Zitate ---------- */
.inhaltsuebersicht{background:var(--salz-2);border-radius:var(--r);padding:1.05rem 1.3rem;
  margin:1.8rem 0 0;max-width:var(--schmal)}
.inhaltsuebersicht>b{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--kupfer);font-weight:700;margin-bottom:.5rem}
.inhaltsuebersicht ol{margin:0;padding-left:1.3rem}
.inhaltsuebersicht li{margin-bottom:.3rem;font-size:.93rem}
.inhaltsuebersicht li:last-child{margin-bottom:0}

.tab{border-collapse:collapse;margin:1.2rem 0 .5rem;font-size:.92rem;
  max-width:var(--schmal);width:100%}
.tab caption{text-align:left;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tinte-3);font-weight:600;padding-bottom:.5rem}
.tab th{text-align:left;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinte-3);font-weight:600;padding:.3rem .9rem .3rem 0;
  border-bottom:1.5px solid var(--linie)}
.tab td{padding:.35rem .9rem .35rem 0;border-bottom:1px solid var(--linie);vertical-align:baseline}
.tab tbody tr:last-child td{border-bottom:0}
.tab td:first-child{color:var(--tinte-3);font-variant-numeric:tabular-nums;white-space:nowrap;
  width:7.5rem}
.tab td b{color:var(--kupfer)}
.tab .kl{color:var(--tinte-3);font-size:.85em}

.quellzeile{font-size:.82rem;color:var(--tinte-3);max-width:var(--schmal);
  margin:.2rem 0 1.4rem;line-height:1.55}

.zitat{margin:1.3rem 0;padding:0 0 0 1.1rem;border-left:3px solid var(--kupfer);
  max-width:var(--schmal)}
.zitat p{margin:0 0 .4rem;font-family:var(--serif);font-size:1.03rem;line-height:1.6}
.zitat cite{font-style:normal;font-size:.8rem;color:var(--tinte-3);letter-spacing:.02em}

.gruende{margin:1.2rem 0;padding-left:1.3rem;max-width:var(--schmal)}
.gruende li{margin-bottom:.85rem;padding-left:.2rem}
.gruende li::marker{color:var(--kupfer);font-weight:700}

.offen-liste{margin:1.1rem 0;padding-left:1.2rem;max-width:var(--schmal)}
.offen-liste li{margin-bottom:.6rem}

.sieheauch{margin-top:2rem;font-size:.9rem;color:var(--tinte-3);
  padding-top:.9rem;border-top:1px solid var(--linie);max-width:var(--schmal)}

/* Tabellen dürfen auf schmalen Schirmen für sich scrollen, nie die Seite */
@media (max-width:520px){
  .tab{display:block;overflow-x:auto}
}

/* ---------- Zitate aus alten Quellen ---------- */
/* Der Wortlaut steht oben, die Übertragung darunter — nie eines ohne das
   andere. Beide Teile sind gleich wichtig und deshalb gleich gut lesbar. */
.zitat{margin:1.4rem 0;max-width:var(--schmal)}
.zitat blockquote{margin:0;padding:0 0 0 1.1rem;border-left:3px solid var(--kupfer)}
.zitat p{margin:0}
.zitat-marke{display:block;font-family:var(--sans);font-size:.68rem;letter-spacing:.11em;
  text-transform:uppercase;font-weight:700;margin-bottom:.25rem}
.zitat-alt{font-family:var(--serif);font-size:1.03rem;line-height:1.6;color:var(--tinte)}
.zitat-alt .zitat-marke{color:var(--kupfer)}
.zitat-neu{margin-top:.85rem!important;padding-top:.8rem;border-top:1px dotted var(--linie);
  font-size:.96rem;line-height:1.6;color:var(--tinte-2)}
.zitat-neu .zitat-marke{color:var(--tinte-3)}
.zitat figcaption{font-size:.8rem;color:var(--tinte-3);letter-spacing:.02em;
  margin-top:.55rem;padding-left:1.1rem}
.uebertragung{color:var(--tinte-3)}

/* ---------- Vordruck zum Ausdrucken ---------- */
.drucknotiz{font-size:.85rem;color:var(--tinte-3);max-width:var(--schmal)}
.vordruck{border:1px solid var(--linie);border-radius:var(--r);padding:1.6rem 1.7rem;
  margin:1.2rem 0;max-width:var(--schmal);background:var(--karte)}
.vordruck-kopf{border-bottom:2px solid var(--linie);padding-bottom:.7rem;margin-bottom:1.3rem}
.vordruck-kopf b{display:block;font-family:var(--serif);font-size:1.08rem}
.vordruck-kopf span{display:block;font-size:.88rem;color:var(--tinte-3);margin-top:.15rem}
.vd-zeile{display:flex;align-items:baseline;gap:.8rem;margin-bottom:1.15rem}
.vd-etikett{flex:none;width:11rem;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--tinte-3);font-weight:600}
.vd-feld{flex:1;border-bottom:1px solid var(--linie);height:1.5rem}
.vd-block{margin-bottom:1.3rem}
.vd-block .vd-etikett{display:block;width:auto;margin-bottom:.4rem}
.vd-block .vd-feld{display:block;height:auto}
.vd-feld.hoch{height:3.6rem;border:1px solid var(--linie);border-radius:6px}
.vd-block small{display:block;font-size:.76rem;color:var(--tinte-3);margin-top:.25rem}
.vd-text{font-size:.9rem;line-height:1.6;margin:0 0 .8rem}
.vd-kaestchen{display:flex;gap:.6rem;align-items:flex-start;font-size:.88rem;margin-bottom:.5rem;
  color:var(--tinte-2)}
.vd-box{flex:none;width:.95rem;height:.95rem;border:1.5px solid var(--tinte-3);border-radius:3px;
  margin-top:.18rem}
.vd-unterschrift{display:flex;gap:2rem;margin-top:2.2rem}
.vd-unterschrift>div{flex:1}
.vd-linie{display:block;border-bottom:1px solid var(--tinte-3);height:1.8rem}
.vd-unterschrift small{font-size:.76rem;color:var(--tinte-3)}

@media print{
  .kopf,.fuss,.buehne,.springlink,.leuchtkasten,.ansicht-feld{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  section{padding:0;border:0!important}
  /* Gedruckt wird nur der Vordruck */
  body.hat-vordruck section:not(#erklaerung){display:none}
  #erklaerung h2,#erklaerung .drucknotiz,#erklaerung .sieheauch{display:none}
  .vordruck{border:0;padding:0;max-width:none;background:none}
  .bahn{padding:0}
  a{text-decoration:none;color:#000}
}
.sb-el-verlust{border-left-color:#a1521f;background:color-mix(in srgb,var(--kupfer) 7%,var(--karte))}
.sb-el-verlust .sb-el-kopf b{color:var(--kupfer)}

/* ---------- Breite Tabellen (Stadtteile, Zahlenreihen, Ausstattung) ----------
   Die Grundregel kappt Tabellen auf die schmale Textbreite. Tabellen mit mehr
   als vier Spalten brauchen die ganze Bahn — und auf kleinen Schirmen einen
   waagerechten Schieber, statt die Seite zu sprengen. */
.breite-tabelle{overflow-x:auto;margin:1.2rem 0;-webkit-overflow-scrolling:touch}
.breite-tabelle table{max-width:none;width:100%;margin:0;table-layout:auto}
.breite-tabelle thead th{white-space:nowrap}
.breite-tabelle td,.breite-tabelle tbody th{white-space:normal;vertical-align:top}
.breite-tabelle td.eng,.breite-tabelle tbody th.eng{white-space:nowrap}
.breite-tabelle caption{text-align:left;font-size:.72rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--tinte-3);font-weight:600;padding-bottom:.5rem;white-space:normal}
.breite-tabelle .drucknotiz{white-space:nowrap}
/* Tabellen messen ihren eigenen Platz, nicht das Fenster (Container-Query).
   Dadurch stapeln sie genau dann, wenn sie sonst überlaufen würden — unabhängig
   von Fensterbreite, Schriftgröße oder Zoom. */
.breite-tabelle{container-type:inline-size;container-name:tab}

@container tab (max-width:820px){
  .breite-tabelle{overflow-x:visible;-webkit-overflow-scrolling:auto}
  .breite-tabelle table,.breite-tabelle tbody,.breite-tabelle tr,
  .breite-tabelle td,.breite-tabelle tbody th{display:block;width:auto;max-width:none}
  .breite-tabelle thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .breite-tabelle table{font-size:.9rem;border:0;min-width:0}
  .breite-tabelle tr{border:1px solid var(--linie);border-radius:var(--r);
    padding:.7rem .85rem;margin:0 0 .75rem;background:var(--salz-2)}
  .breite-tabelle tr:last-child{margin-bottom:0}
  .breite-tabelle tbody th,.breite-tabelle tbody th[scope="row"],.breite-tabelle tbody th.eng{
    font-weight:700;font-size:1.02em;border:0;padding:0 0 .35rem;white-space:normal;text-align:left}
  .breite-tabelle td,.breite-tabelle td.eng{border:0;padding:.22rem 0;white-space:normal}
  .breite-tabelle td[data-spalte]::before{content:attr(data-spalte) ": ";
    font-weight:600;color:var(--tinte-3)}
  .breite-tabelle td:empty{display:none}
  .breite-tabelle .drucknotiz{white-space:normal}
  .breite-tabelle caption{display:block;width:auto;padding-bottom:.65rem}
}

/* Rückfall für Browser ohne Container-Queries: derselbe Stapel, nach Fensterbreite */
@supports not (container-type:inline-size){
  @media (max-width:900px){
    .breite-tabelle{overflow-x:auto}
    .breite-tabelle table,.breite-tabelle tbody,.breite-tabelle tr,
    .breite-tabelle td,.breite-tabelle tbody th{display:block;width:auto;max-width:none}
    .breite-tabelle thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
    .breite-tabelle tr{border:1px solid var(--linie);border-radius:var(--r);
      padding:.7rem .85rem;margin:0 0 .75rem;background:var(--salz-2)}
    .breite-tabelle td,.breite-tabelle td.eng{border:0;padding:.22rem 0;white-space:normal}
    .breite-tabelle td[data-spalte]::before{content:attr(data-spalte) ": ";font-weight:600;color:var(--tinte-3)}
    .breite-tabelle tbody th{display:block;border:0;padding:0 0 .35rem;font-weight:700}
    .breite-tabelle caption{display:block;width:auto}
  }
}

/* Schmale Schirme, alles übrige */
@media (max-width:900px){
  main table{display:block;overflow-x:visible;min-width:0}
  main table td,main table th{white-space:normal}
  /* Eine Tabelle mit display:block macht aus ihrer caption eine
     schrumpfende Zelle — hier wieder auf volle Breite zwingen. */
  main table caption{display:block;width:auto}
}

/* sehr schmale Schirme: auch die kleinen Wertetabellen müssen hineinpassen */
@media (max-width:480px){
  main table{table-layout:fixed;width:100%}
  main table td,main table th{overflow-wrap:anywhere}
  main{overflow-wrap:break-word}
}

/* ---------- Fußnotenzeichen im Fließtext ----------
   Die Nachweisliste selbst ist weiter oben gestaltet (.fussnoten). Hier nur
   die Ziffer im Text: klein, hochgestellt, aber groß genug zum Antippen. */
.fnr{font-size:.7em;line-height:0;vertical-align:super}
.fnr a{text-decoration:none;color:var(--kupfer);font-weight:600;padding:0 .15em}
.fnr a:hover{text-decoration:underline}
.fnr a:focus-visible{outline:2px solid var(--kupfer);outline-offset:2px;border-radius:2px}
sup.fnr::before{content:"\200B ["}   /* Zero-Width-Space, Escape durch Leerzeichen beendet: erlaubt den Zeilenumbruch VOR der Fussnotenzahl */
sup.fnr::after{content:"]"}
@media print{.fnr a{color:inherit}}