/* ============================================================================
   Hasselblatt v8 · Gestaltung

   Ruhig und klar: eine Icon-Leiste wie in einer Karten-App, eine Karte für
   die Auswahl, sonst die Szene. Tintengrund, Elfenbein, Altgold.
   Serifenschrift nur für Namen, sonst Jost.
   ========================================================================== */

@font-face { font-family: 'Cormorant Garamond'; font-weight: 500; font-display: swap; src: url(../assets/fonts/cormorant-garamond-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 600; font-display: swap; src: url(../assets/fonts/cormorant-garamond-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 400; font-display: swap; src: url(../assets/fonts/jost-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 500; font-display: swap; src: url(../assets/fonts/jost-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 600; font-display: swap; src: url(../assets/fonts/jost-latin-600-normal.woff2) format('woff2'); }

:root {
  --tinte: #0d1310;
  --flaeche: rgba(14, 20, 16, .86);
  --flaeche-fest: #121a15;
  --papier: #efe7d6;
  --papier-2: #c9bfa9;
  --papier-3: #8f8674;
  --gold: #c9a45c;
  --gold-hell: #e8cf92;
  --haar: rgba(239, 231, 214, .14);
  --schatten-text: 0 0 8px rgba(6, 9, 7, .9), 0 0 2px rgba(6, 9, 7, .95);
  --serif: 'Cormorant Garamond', Garamond, Georgia, serif;
  --sans: 'Jost', 'Futura', 'Avenir Next', sans-serif;
  --rand: clamp(14px, 2.4vw, 28px);
  --ecke: 3px;
}

html, body { margin: 0; height: 100%; background: var(--tinte); color: var(--papier); overflow: hidden; }
body { font: 400 14px/1.45 var(--sans); -webkit-font-smoothing: antialiased; }
body > canvas { display: block; position: fixed; inset: 0; width: 100vw; height: 100vh; touch-action: none; outline: none; z-index: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
[hidden] { display: none !important; }
.ikon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.leise { color: var(--papier-3); }

/* ---------- Ladebild: sofort da, bevor irgendein Skript läuft ---------- */
.laden { position: fixed; inset: 0; z-index: 50; background: var(--tinte); display: grid; place-content: center; justify-items: center; gap: 18px; transition: opacity .9s ease; }
.laden.fertig { opacity: 0; pointer-events: none; }
/* Vorschaubild des Zimmers hinter dem Ladebild: der Raum ist sofort da und wird dann lebendig */
.laden-bild { position: absolute; inset: 0; z-index: -1; background: center / cover no-repeat; opacity: 0; filter: blur(1.5px) saturate(.92) brightness(.62);
  transform: scale(1.01); transition: opacity .6s ease; }
.laden-bild.da { opacity: 1; }
.laden-name, .laden-text, .laden-geduld { text-shadow: 0 1px 10px rgba(0,0,0,.8); }
.laden img { width: 76px; height: auto; opacity: .92; animation: atmen 3.2s ease-in-out infinite; }
.laden .laden-name { font: 500 26px/1 var(--serif); letter-spacing: .06em; }
.laden .laden-linie { width: 240px; height: 3px; border-radius: 2px; background: rgba(239, 231, 214, .2); overflow: hidden; box-shadow: 0 1px 8px rgba(0,0,0,.5); }
.laden .laden-linie span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #c9a45c, #f0d596); transition: width .35s ease; }
.laden .laden-text { font: 400 14px/1.2 var(--sans); letter-spacing: .06em; color: var(--papier-2); min-height: 1.2em; }
/* Wappen im Ladebild: ein Lichtkranz läuft darum, damit man sieht, dass sich etwas tut (läuft auch, wenn gerade gerechnet wird) */
.laden-wappen { position: relative; width: 132px; height: 132px; display: grid; place-items: center; }
.laden-wappen img { width: 84px; }
.laden-wappen::before { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(232, 199, 128, 0) 0deg, rgba(232, 199, 128, .0) 200deg, rgba(240, 210, 140, .85) 340deg, rgba(232, 199, 128, 0) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  animation: kranz 2.4s linear infinite; will-change: transform; }
.laden-wappen::after { content: ''; position: absolute; left: 50%; top: -3px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%;
  background: #f4dca0; box-shadow: 0 0 10px 3px rgba(240, 205, 130, .7); transform-origin: 3px 69px; animation: kranz 2.4s linear infinite; will-change: transform; }
@keyframes kranz { to { transform: rotate(360deg); } }
.laden-geduld { font: italic 400 13px/1.3 var(--sans); color: var(--papier-3); opacity: 0; animation: geduld 1s ease 8s forwards; will-change: opacity; }
@keyframes geduld { to { opacity: 1; } }
.laden.fertig .laden-geduld { animation: none; }
@keyframes atmen { 50% { opacity: .6; transform: scale(.985); } }

/* Die Oberfläche erscheint erst, wenn die Szene steht */
body.laedt .baum-ui, body.laedt .werkstatt { opacity: 0; }
.baum-ui { transition: opacity .8s ease .2s; }

/* ---------- Marke oben links ---------- */
.marke { position: fixed; left: var(--rand); top: var(--rand); z-index: 3; display: flex; align-items: center; gap: 12px; pointer-events: none; text-shadow: var(--schatten-text); }
.marke img { width: 30px; height: auto; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5)); }
.marke span { font: 500 24px/1 var(--serif); letter-spacing: .02em; }

/* ---------- Werkzeugleiste ---------- */
.leiste { position: fixed; right: var(--rand); top: var(--rand); z-index: 4; display: flex; flex-direction: column; gap: 10px; }
.leiste-gruppe { display: flex; flex-direction: column; background: var(--flaeche); border: 1px solid var(--haar); border-radius: var(--ecke); }
.knopf { position: relative; width: 44px; height: 44px; display: grid; place-items: center; color: var(--papier-2); transition: color .15s, background .15s; }
.knopf + .knopf { border-top: 1px solid var(--haar); }
.knopf:hover { color: var(--papier); background: rgba(239, 231, 214, .05); }
.knopf.offen { color: var(--gold-hell); }
.knopf[aria-pressed="true"] { color: var(--gold-hell); }
.knopf[aria-pressed="false"] .ikon { opacity: .5; }
.knopf.offen::before { content: ''; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 2px; background: var(--gold); }
.knopf .tipp { position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%); white-space: nowrap; pointer-events: none;
  font: 500 12px/1 var(--sans); letter-spacing: .02em; color: var(--papier); background: var(--flaeche-fest); border: 1px solid var(--haar);
  border-radius: var(--ecke); padding: 7px 9px; opacity: 0; transition: opacity .12s .25s; }
.knopf:hover .tipp { opacity: 1; }
.knopf.offen .tipp { opacity: 0; transition: none; }

/* ---------- Aufklappmenü links neben der Leiste ---------- */
.aufklapp { position: fixed; z-index: 5; width: 250px; background: var(--flaeche-fest); border: 1px solid var(--haar); border-radius: var(--ecke);
  padding: 8px 0; box-shadow: 0 12px 32px rgba(0, 0, 0, .35); }
.aufklapp-titel { font: 600 10px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--papier-3); padding: 8px 14px 10px; }
.wahl-zeile { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 14px; text-align: left; color: var(--papier-2); }
.wahl-zeile:hover { background: rgba(239, 231, 214, .05); color: var(--papier); }
.wahl-zeile:disabled { opacity: .35; cursor: default; }
.wahl-zeile .wahl-text { flex: 1; font: 400 14px/1.25 var(--sans); }
.wahl-zeile .wahl-text small { display: block; font-size: 11.5px; color: var(--papier-3); margin-top: 2px; }
.wahl-zeile .haken { width: 16px; height: 16px; stroke: var(--gold); opacity: 0; }
.wahl-zeile[aria-pressed="true"] { color: var(--papier); }
.wahl-zeile[aria-pressed="true"] .haken { opacity: 1; }
.wahl-zeile[aria-pressed="true"] > .ikon:first-child { color: var(--gold-hell); }
.ikon-platz { width: 20px; flex: none; }
.aufklapp-inhalt { padding: 0 14px 8px; }
.aufklapp-inhalt p { margin: 0; font-size: 13px; line-height: 1.5; }
.suchfeld { display: block; width: calc(100% - 28px); margin: 0 14px 6px; padding: 8px 0; background: transparent; border: 0; border-bottom: 1px solid var(--haar);
  color: var(--papier); font: 400 15px/1.2 var(--sans); caret-color: var(--gold); border-radius: 0; -webkit-appearance: none; appearance: none; }
.suchfeld:focus { outline: none; border-bottom-color: var(--gold); }
.suchfeld::placeholder { color: var(--papier-3); }
.suchliste { max-height: 320px; overflow: auto; }
.treffer-zeile { display: block; width: 100%; text-align: left; padding: 8px 14px; }
.treffer-zeile span { display: block; font: 500 17px/1.2 var(--serif); color: var(--papier); }
.treffer-zeile small { display: block; font-size: 11.5px; color: var(--papier-3); margin-top: 1px; }
.treffer-zeile:hover, .treffer-zeile[aria-selected="true"] { background: rgba(239, 231, 214, .05); }
.treffer-zeile[aria-selected="true"] span { color: var(--gold-hell); }
.suchliste .leer { padding: 8px 14px; color: var(--papier-3); font-size: 13px; }

/* ---------- Karte zur Auswahl, unten links ---------- */
.karte { position: fixed; left: var(--rand); bottom: var(--rand); z-index: 3; width: min(330px, calc(100vw - 2 * var(--rand) - 60px));
  background: var(--flaeche); border: 1px solid var(--haar); border-radius: var(--ecke); padding: 18px 20px 16px; }
.karte-zu { position: absolute; right: 8px; top: 8px; width: 32px; height: 32px; display: grid; place-items: center; color: var(--papier-3); }
.karte-zu:hover { color: var(--papier); }
.karte-zu .ikon { width: 16px; height: 16px; }
.karte-name { font: 500 26px/1.1 var(--serif); padding-right: 26px; }
.karte-daten { margin-top: 5px; color: var(--papier-2); font-size: 13px; }
.karte-zeilen { margin-top: 6px; font-size: 12.5px; color: var(--papier-3); }
.karte-zeilen:empty { display: none; }
.karte-aktionen:not(:empty) { margin-top: 14px; }
.karte-knopf { display: inline-flex; align-items: center; gap: 8px; color: var(--papier-2); font-size: 13px; padding: 6px 10px 6px 8px; border: 1px solid var(--haar); border-radius: var(--ecke); }
.karte-knopf .ikon { width: 18px; height: 18px; }
.karte-knopf:hover { color: var(--papier); }
.karte-knopf[aria-pressed="true"] { color: var(--papier); border-color: rgba(201, 164, 92, .6); }
.karte-knopf[aria-pressed="true"] .ikon { color: var(--gold-hell); }

/* ---------- Pfeile vom gewählten Blatt zu den Nachbarn ---------- */
.pfeile { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.pfeil { position: absolute; left: 0; top: 0; pointer-events: auto; color: var(--papier); will-change: transform; }
.pfeil-spitze { position: absolute; left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; display: grid; place-items: center; transform: rotate(var(--w)); color: var(--gold-hell); filter: drop-shadow(0 0 3px rgba(0, 0, 0, .8)); }
.pfeil-spitze .ikon { width: 22px; height: 22px; stroke-width: 1.6; }
.pfeil-text { position: absolute; white-space: nowrap; font: 500 16px/1.1 var(--serif); text-shadow: var(--schatten-text); }
.pfeil-text small { display: block; font: 600 9px/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hell); }
.pfeil[data-seite="rechts"] .pfeil-text { left: 20px; top: -14px; }
.pfeil[data-seite="links"] .pfeil-text { right: 20px; top: -14px; text-align: right; }
.pfeil[data-seite="oben"] .pfeil-text { left: 0; bottom: 18px; transform: translateX(-50%); text-align: center; }
.pfeil[data-seite="unten"] .pfeil-text { left: 0; top: 18px; transform: translateX(-50%); text-align: center; }
.pfeil.geschwister .pfeil-spitze { color: var(--papier-2); }
.pfeil.geschwister .pfeil-text small { color: var(--papier-2); }
.pfeil:hover .pfeil-text { color: var(--gold-hell); }

.ziel-ring { position: absolute; left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 1.5px solid rgba(232, 207, 146, .85);
  border-radius: 50%; pointer-events: none; box-shadow: 0 0 10px rgba(232, 207, 146, .35); animation: zielPuls 2.2s ease-in-out infinite; }
.ziel-ring.geschwister { border-color: rgba(201, 191, 169, .7); box-shadow: none; }
.ziel-ring.an { width: 36px; height: 36px; margin: -18px 0 0 -18px; border-color: var(--gold-hell); animation: none; }
@keyframes zielPuls { 50% { transform-origin: center; opacity: .55; } }

/* ---------- Namen im Raum ---------- */
.namen { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.name { position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform; padding-left: 6px; margin-top: -24px; text-shadow: var(--schatten-text); }
.name b { display: block; font: 500 14.5px/1.1 var(--serif); color: var(--papier); }
.name i { display: none; font: 500 10.5px/1.5 var(--sans); color: var(--papier-2); font-style: normal; }
.name.zweig b { color: var(--gold-hell); }
.name.zeiger { margin-top: -40px; }
.name.zeiger b { font-size: 19px; }
.name.zeiger i { display: block; }
.name.partner b { color: #dfe2ea; }

/* ---------- Hinweis und Sprechblase ---------- */
.hinweis-unten { position: fixed; left: 50%; bottom: calc(var(--rand) + 6px); transform: translateX(-50%); z-index: 2; font: 500 17px/1.3 var(--serif);
  color: var(--papier-2); text-shadow: var(--schatten-text); text-align: center; transition: opacity .6s; pointer-events: none; }
.hinweis-unten em { font-style: normal; color: var(--gold-hell); }
.hinweis-unten.weg { opacity: 0; }
.sprechblase { position: fixed; left: 0; top: 0; z-index: 3; pointer-events: none; font: 500 22px/1.2 var(--serif); color: var(--gold-hell);
  text-shadow: var(--schatten-text); white-space: nowrap; margin: -64px 0 0 18px; animation: auftauchen .5s ease both; }
@keyframes auftauchen { from { opacity: 0; } }

/* ---------- Rundgang ---------- */
.rundgang { position: fixed; inset: 0; z-index: 40; }
.rundgang-loch { position: fixed; border-radius: 6px; box-shadow: 0 0 0 9999px rgba(6, 9, 7, .66); transition: all .35s ease; pointer-events: none; }
.rundgang-karte { position: fixed; width: 290px; background: var(--flaeche-fest); border: 1px solid rgba(201, 164, 92, .45); border-radius: var(--ecke); padding: 16px 18px 14px; transition: left .35s ease, top .35s ease; }
.rundgang-zahl { font: 600 10px/1 var(--sans); letter-spacing: .16em; color: var(--papier-3); }
.rundgang-titel { font: 500 22px/1.15 var(--serif); margin-top: 8px; }
.rundgang-text { margin: 6px 0 14px; color: var(--papier-2); font-size: 13.5px; line-height: 1.5; }
.rundgang-knoepfe { display: flex; justify-content: space-between; align-items: center; }
.rundgang-weg { color: var(--papier-3); font-size: 13px; }
.rundgang-weg:hover { color: var(--papier-2); }
.rundgang-weiter { font-size: 13px; color: var(--tinte); background: var(--gold-hell); padding: 7px 14px; border-radius: var(--ecke); }
.rundgang-weiter:hover { background: var(--papier); }
.rundgang-zeiger { position: absolute; width: 10px; height: 10px; background: var(--flaeche-fest); border: 1px solid rgba(201, 164, 92, .45); transform: translate(-50%, -50%) rotate(45deg); }
.rundgang-karte[data-seite="rechts"] .rundgang-zeiger { border-left: 0; border-bottom: 0; }
.rundgang-karte[data-seite="links"] .rundgang-zeiger { border-right: 0; border-top: 0; }
.rundgang-karte[data-seite="unten"] .rundgang-zeiger { border-left: 0; border-top: 0; }
.rundgang-karte[data-seite="oben"] .rundgang-zeiger { border-right: 0; border-bottom: 0; }
.rundgang-karte[data-seite="keine"] .rundgang-zeiger { display: none; }

/* ---------- Werkstatt (nur mit ?werkstatt) ---------- */
.werkstatt { position: fixed; left: var(--rand); top: 76px; z-index: 3; background: var(--flaeche-fest); border: 1px solid var(--haar); border-radius: var(--ecke); padding: 10px 12px; font-size: 12px; }
.werkstatt label { display: grid; grid-template-columns: 90px 150px; gap: 8px; align-items: center; margin: 4px 0; color: var(--papier-2); }
.werkstatt button { border: 1px solid var(--haar); border-radius: var(--ecke); padding: 4px 8px; margin: 4px 4px 0 0; color: var(--papier-2); }
.werkstatt button:hover { color: var(--papier); }

/* ---------- Familie in der Karte ---------- */
.karte { max-height: calc(100vh - 2 * var(--rand) - 60px); overflow: auto; overscroll-behavior: contain; }
.karte-familie:not(:empty) { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--haar); display: grid; gap: 9px; }
.fam { display: grid; grid-template-columns: 86px 1fr; gap: 10px; align-items: baseline; }
.fam-titel { font: 600 9.5px/1.9 var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--papier-3); }
.fam-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.fam-liste small { margin-left: 8px; font-size: 11px; color: var(--papier-3); }
.verweis { font: 500 16px/1.25 var(--serif); color: var(--papier); text-align: left; border-bottom: 1px solid transparent; }
.verweis:hover, .verweis:focus-visible { color: var(--gold-hell); border-bottom-color: rgba(201, 164, 92, .5); }
.mehr { font-size: 12px; color: var(--papier-3); }
.mehr:hover { color: var(--papier); }
.karte-details:not([hidden]) { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--haar); display: grid; gap: 7px; }
.det-zeile { display: grid; grid-template-columns: 86px 1fr; gap: 10px; font-size: 13px; color: var(--papier-2); line-height: 1.45; }
.det-titel { font: 600 9.5px/2 var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--papier-3); }
.karte-aktionen { display: flex; flex-wrap: wrap; gap: 8px; padding-right: 36px; }
.karte-bearbeiten { position: absolute; right: 10px; bottom: 12px; width: 30px; height: 30px; display: grid; place-items: center; color: var(--papier-3); border-radius: var(--ecke); }
.karte-bearbeiten:hover { color: var(--gold-hell); background: rgba(239, 231, 214, .06); }
.karte-bearbeiten .ikon { width: 16px; height: 16px; }

/* ---------- Breite Aufklapp-Inhalte: Formular, Experimentell ---------- */
.aufklapp.breit { width: 340px; }
.formular { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.formular label { display: grid; gap: 4px; font-size: 11.5px; color: var(--papier-3); }
.formular .feld-voll { grid-column: 1 / 3; }
.formular .formular-titel { margin: 0; font: 500 19px/1.2 var(--serif); color: var(--papier); }
.formular input, .formular select { background: transparent; border: 0; border-bottom: 1px solid var(--haar); color: var(--papier); font: 400 14px/1.3 var(--sans); padding: 5px 0; border-radius: 0; }
.formular select option { background: var(--flaeche-fest); }
.formular input:focus, .formular select:focus { outline: none; border-bottom-color: var(--gold); }
.formular .haken-feld { display: flex; align-items: center; gap: 8px; color: var(--papier-2); font-size: 13px; }
.formular .fehler { grid-column: 1 / 3; margin: 0; color: #e6a57e; font-size: 12.5px; }
.formular-knoepfe { grid-column: 1 / 3; display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.knopf-voll { font-size: 13px; color: var(--tinte); background: var(--gold-hell); padding: 7px 14px; border-radius: var(--ecke); }
.knopf-voll:hover { background: var(--papier); }
.knopf-leise { font-size: 13px; color: var(--papier-2); padding: 7px 10px; border: 1px solid var(--haar); border-radius: var(--ecke); }
.knopf-leise:hover { color: var(--papier); }
.exp-reihe { display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: center; margin-bottom: 10px; }
.exp-titel { font: 600 9.5px/1.6 var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--papier-3); }
.exp-wahl { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.exp-wahl button { font-size: 13px; color: var(--papier-2); padding-bottom: 2px; border-bottom: 1px solid transparent; }
.exp-wahl button[aria-pressed="true"] { color: var(--papier); border-bottom-color: var(--gold); }
.exp-info { font-size: 11.5px; margin: 6px 0 0; }

/* ---------- Rundgang: nur das erklärte Element ist bedienbar ---------- */
.rundgang { pointer-events: none; }
.rundgang-sperre { position: fixed; pointer-events: auto; }
.rundgang-karte { pointer-events: auto; }
.rundgang-karte.geschafft .rundgang-titel::after { content: ''; display: inline-block; width: 7px; height: 12px; margin-left: 10px; border: solid var(--gold-hell); border-width: 0 2px 2px 0; transform: translateY(-3px) rotate(45deg); }
.rundgang-karte.geschafft .rundgang-text { opacity: .6; }
.rundgang-fertig { font-size: 13px; color: var(--tinte); background: var(--gold-hell); padding: 7px 14px; border-radius: var(--ecke); }

/* ---------- Schlichte Ansicht: helle Oberfläche ---------- */
.baum-ui.schlicht .marke, .baum-ui.schlicht .name, .baum-ui.schlicht .pfeil-text, .baum-ui.schlicht .hinweis-unten { text-shadow: none; color: #1d1d1b; }
.baum-ui.schlicht .name b { color: #1d1d1b; }
.baum-ui.schlicht .name.zweig b, .baum-ui.schlicht .pfeil-text small { color: #8a6a2a; }
.baum-ui.schlicht .pfeil-spitze { color: #8a6a2a; filter: none; }

/* ---------- Kleine Bildschirme ---------- */
@media (max-width: 720px) {
  .marke span { font-size: 20px; }
  .knopf { width: 42px; height: 42px; }
  .karte { left: 0; right: 0; bottom: 0; width: auto; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; }
  .aufklapp { width: min(250px, calc(100vw - 80px)); }
  .hinweis-unten { width: 80vw; font-size: 15px; }
}
/* ---------- Das Zimmer ---------- */
.raum-ui .marke { gap: 20px; text-shadow: 0 2px 14px rgba(0, 0, 0, .75), 0 1px 3px rgba(0, 0, 0, .6); }
/* dunkle, weich auslaufende Fläche hinter Wappen und Schriftzug */
.raum-ui .marke::before { content: ''; position: absolute; z-index: -1; left: -80px; right: -90px; top: -56px; bottom: -50px; pointer-events: none;
  background: radial-gradient(ellipse 58% 56% at 42% 50%, rgba(5, 7, 6, .84) 0%, rgba(5, 7, 6, .62) 42%, rgba(5, 7, 6, .22) 72%, rgba(5, 7, 6, 0) 100%); filter: blur(10px); }
.raum-ui .marke img { width: 84px; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .7)); }
.raum-ui .marke span { font: 500 58px/1 var(--serif); letter-spacing: .03em; }
@media (max-width: 700px) { .raum-ui .marke { left: 50%; transform: translateX(-50%); gap: 14px; } .raum-ui .marke img { width: 56px; } .raum-ui .marke span { font-size: 38px; }
  .raum-ui .marke::before { left: -50px; right: -50px; top: -40px; bottom: -36px; } }
/* Schild am Gegenstand: ruhig, klein, wie in einem Spiel */
.raum-schild { position: fixed; left: 0; top: 0; z-index: 4; pointer-events: none; display: grid; justify-items: center; gap: 1px;
  padding: 6px 14px 7px; text-align: center; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(ellipse at center, rgba(12, 16, 13, .72) 0%, rgba(12, 16, 13, .45) 60%, rgba(12, 16, 13, 0) 100%); }
.raum-schild.an { opacity: 1; }
.raum-schild[hidden] { display: grid !important; }
.raum-schild b { font: 500 20px/1.1 var(--serif); color: #f4e6c4; letter-spacing: .02em; text-shadow: 0 0 12px rgba(232, 190, 110, .35); }
.raum-schild span { font-size: 12px; color: var(--papier-2); letter-spacing: .03em; }
.raum-schild::after { content: ''; width: 1px; height: 14px; margin-top: 4px; background: linear-gradient(rgba(232, 207, 146, .7), rgba(232, 207, 146, 0)); }
.raum-karte { position: fixed; left: var(--rand); bottom: var(--rand); z-index: 4; width: min(340px, calc(100vw - 2 * var(--rand)));
  padding: 18px 20px 16px; background: var(--flaeche-fest); border: 1px solid var(--haar); border-radius: var(--ecke); }
.raum-karte h2 { margin: 0 0 6px; font: 500 26px/1.1 var(--serif); }
.raum-karte p { margin: 0; color: var(--papier-2); }
.raum-karte-zu { position: absolute; right: 10px; top: 6px; font-size: 22px; color: var(--papier-3); }
/* Die HasselBLATT, aufgeschlagen */
.zeitung-blatt { position: fixed; z-index: 6; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(920px, calc(100vw - 2 * var(--rand)));
  max-height: calc(100vh - 2 * var(--rand)); overflow: auto; padding: 34px 40px 40px; color: #1f1b16;
  background: #efe8d8 radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.35), rgba(0,0,0,0) 60%);
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.4) inset; border-radius: 2px; animation: zeitung-auf .5s ease both; }
@keyframes zeitung-auf { from { opacity: 0; transform: translate(-50%, -46%) rotate(-1.2deg); } to { opacity: 1; transform: translate(-50%, -50%); } }
.zeitung-zu { position: sticky; float: right; top: 0; margin: -18px -22px 0 0; font-size: 26px; color: #6b6255; }
.zt-kopf h2 { margin: 0; text-align: center; font: 600 clamp(48px, 9vw, 96px)/1 'Cormorant Garamond', Georgia, serif; letter-spacing: .01em; }
.zt-zeile { display: flex; justify-content: space-between; gap: 12px; margin: 10px 0 18px; padding: 6px 0; font: 500 13px/1.3 Jost, sans-serif;
  letter-spacing: .06em; text-transform: uppercase; border-top: 3px double #1f1b16; border-bottom: 1px solid #1f1b16; }
.zt-hinweis { margin: 0 0 16px; font: italic 400 14px/1.4 Jost, sans-serif; color: #6b6255; }
.zt-spalten { display: grid; grid-template-columns: 1fr 230px; gap: 28px; }
.zt-rand { border-left: 1px solid #1f1b16; padding-left: 20px; }
.zt-rand h4 { margin: 0 0 6px; padding-bottom: 4px; font: 600 24px/1.1 'Cormorant Garamond', serif; border-bottom: 1.5px solid #1f1b16; }
.zt-rand p { margin: 0 0 20px; font: 400 14px/1.5 Jost, sans-serif; }
.zt-artikel img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; filter: grayscale(.35) sepia(.25); margin-bottom: 10px; }
.zt-artikel h3 { margin: 0 0 4px; font: 600 26px/1.1 'Cormorant Garamond', serif; }
.zt-aufmacher h3 { font-size: 40px; }
.zt-autor { margin-bottom: 8px; font: italic 400 13px/1.3 Jost, sans-serif; color: #6b6255; }
.zt-fix { font-style: normal; font-weight: 500; color: #7a2a1d; }
.zt-artikel p { margin: 0; font: 400 15px/1.55 Jost, sans-serif; }
.zt-aufmacher { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #1f1b16; }
.zt-weitere { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.zt-archiv h2 { font-size: clamp(40px, 7vw, 72px); }
.zt-weiter { margin: 0; text-align: center; }
.zt-noch-eins { padding: 6px 16px; border: 1px solid #1f1b16; border-radius: 999px; font: 500 14px/1.4 Jost, sans-serif; color: #1f1b16; }
.zt-noch-eins:hover { background: #1f1b16; color: #efe8d8; }
@media (max-width: 700px) { .zt-spalten, .zt-weitere { grid-template-columns: 1fr; } .zt-rand { border-left: 0; padding-left: 0; border-top: 1px solid #1f1b16; padding-top: 16px; } .zeitung-blatt { padding: 24px 20px 28px; } }
/* Stationen unten (wie bei Maskus): ein Balken je Station, der aktive leuchtet */
.stationen { position: fixed; left: 50%; bottom: calc(var(--rand) - 4px); transform: translateX(-50%); z-index: 3; display: flex; gap: 6px;
  width: min(1040px, calc(100vw - 2 * var(--rand))); }
.stationen button { --an: 0; flex: 1 1 auto; min-width: 0; display: grid; gap: 7px; padding: 8px 4px 6px; color: var(--papier-2); text-align: center; }
.stationen span { font: 500 10.5px/1 var(--sans); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: calc(.35 + var(--an) * .65); transition: opacity .3s; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.stationen i { display: block; height: 3px; border-radius: 2px; background: rgba(239, 231, 214, .22); position: relative; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.stationen i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #c9a45c, #f0d596); opacity: var(--an); transition: opacity .15s; }
.stationen button:hover span, .stationen button.aktiv span { opacity: 1; color: #f4e6c4; }
/* Schmale Bildschirme: die Leiste lässt sich seitlich schieben, die Namen bleiben ganz, weiche Kanten links und rechts */
@media (max-width: 700px) {
  .stationen { left: 0; right: 0; width: auto; transform: none; gap: 20px; padding: 0 28px; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); }
  .stationen::-webkit-scrollbar { display: none; }
  .stationen button { flex: 0 0 auto; padding: 10px 2px 8px; }
  .stationen span { font-size: 11px; letter-spacing: .06em; overflow: visible; text-overflow: clip; }
}
/* Telefon: nach dem ersten Tippen steht unten in Gold, dass ein zweites Tippen den Punkt aufruft */
.raum-tipp { bottom: calc(var(--rand) + 52px); color: #f0c56a; font-weight: 600; font-size: 17px; opacity: 0; transition: opacity .3s ease; width: min(86vw, 380px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 14px rgba(0, 0, 0, .8); }
.raum-tipp.an { opacity: 1; }
@media (max-width: 700px) { .raum-schild { max-width: calc(100vw - 32px); } }
.raum-karte .karte-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.raum-karte .karte-knoepfe .karte-oeffnen { margin-left: 0; padding: 6px 16px; font-size: 13px; }
.raum-karte { padding: 22px 24px 20px; }
.raum-karte p:empty { display: none; }
.raum-schild span:empty { display: none; }
.raum-karte .karte-hilfe { display: block; margin-top: 6px; font-size: 13px; opacity: .8; }
.raum-karte .karte-oeffnen { margin-left: 4px; padding: 3px 10px; border: 1px solid rgba(201, 164, 92, .6); border-radius: 999px; color: #f4e6c4; font: 500 12px/1.4 var(--sans); }
.raum-karte { bottom: calc(var(--rand) + 46px); }
/* Hinweispunkte an allem, was man anklicken kann */
.raum-punkte { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .6s ease; }
.raum-punkte.an { opacity: 1; }
/* Der Knopf ist 32 px groß (Trefferfläche), Punkt und Ring sitzen genau in seiner Mitte */
.raum-punkt { position: absolute; left: 0; top: 0; width: 32px; height: 32px; margin: -16px 0 0 -16px; padding: 0; border-radius: 50%;
  transition: opacity .35s ease; will-change: transform; pointer-events: auto; cursor: pointer; }
.raum-punkte:not(.an) .raum-punkt, .raum-punkt[style*="opacity: 0"] { pointer-events: none; }
.raum-punkt::before, .raum-punkt::after { content: ''; position: absolute; left: 50%; top: 50%; box-sizing: border-box; border-radius: 50%; }
.raum-punkt::before { width: 14px; height: 14px; margin: -7px 0 0 -7px;
  background: radial-gradient(circle, #fffaf0 0%, #fff1cc 38%, #f0c878 62%, rgba(240, 200, 120, 0) 76%);
  box-shadow: 0 0 0 2px rgba(20, 14, 6, .28), 0 0 16px 6px rgba(255, 214, 140, .55); }
.raum-punkt::after { width: 44px; height: 44px; margin: -22px 0 0 -22px; transform-origin: 50% 50%;
  border: 2px solid rgba(255, 232, 180, .95); box-shadow: 0 0 0 1px rgba(20, 14, 6, .22), inset 0 0 0 1px rgba(20, 14, 6, .18);
  animation: punkt-ring 2.4s ease-out infinite; animation-delay: inherit; }
.raum-punkt:hover::before { transform: scale(1.25); transition: transform .2s; }
@keyframes punkt-ring { 0% { transform: scale(.3); opacity: 1; } 70% { opacity: .35; } 100% { transform: scale(1.25); opacity: 0; } }
.raum-cta { bottom: calc(var(--rand) + 52px); opacity: 0; transition: opacity .8s ease; }
.raum-cta.da { opacity: 1; }
.raum-cta.weg { opacity: 0; }
.raum-vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 85% 80% at 50% 48%, rgba(0,0,0,0) 55%, rgba(8, 6, 4, .38) 100%); }
.blende { position: fixed; inset: 0; z-index: 5; background: var(--tinte); opacity: 0; pointer-events: none; transition: opacity .9s ease; }
.blende.an { opacity: 1; }
@media (prefers-reduced-motion: reduce) { *, *::before { transition: none !important; animation: none !important; } }

/* ============================================================================
   Blätter im Zimmer: Beitrag, Editor, Archiv, Mitglieder, Verein, Dateien,
   Eintreten (Papier wie die Zeitung) und die Karte (dunkel, breit)
   ========================================================================== */
.zeitung-blatt { --tinte-blatt: #1f1b16; --grau-blatt: #6b6255; --linie-blatt: rgba(31, 27, 22, .22); box-sizing: border-box; }
@media (max-width: 700px) { .zeitung-blatt { padding: 26px 20px 30px; } }
.zeitung-blatt.breit { width: min(1240px, calc(100vw - 2 * var(--rand))); height: calc(100vh - 2 * var(--rand)); display: flex; flex-direction: column; }
.zeitung-blatt.breit .zeitung-inhalt { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.zeitung-blatt.dunkel { --tinte-blatt: var(--papier); --grau-blatt: var(--papier-2); --linie-blatt: var(--haar); color: var(--papier);
  background: var(--flaeche-fest); border: 1px solid var(--haar); }
.zeitung-blatt.dunkel .zeitung-zu { color: var(--papier-2); }
.bl-zurueck { display: inline-block; margin: -14px 0 10px; font: 500 13px/1.4 var(--sans); letter-spacing: .04em; color: var(--grau-blatt); }
.bl-zurueck:hover { color: var(--tinte-blatt); }
.bl-titel { margin: 0 0 6px; font: 600 clamp(30px, 4.4vw, 44px)/1.05 var(--serif); letter-spacing: .01em; }
.bl-oberzeile { margin: 0 0 8px; font: 500 12px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--grau-blatt); }
.bl-meta { margin: 0 0 18px; font: italic 400 14px/1.4 var(--sans); color: var(--grau-blatt); }
.bl-leise { color: var(--grau-blatt); }
.bl-fehler { color: #8e2a1c; min-height: 0; margin: 6px 0; }
.bl-fehler:empty, .bl-gut:empty { display: none; }
.zeitung-blatt.dunkel .bl-fehler { color: #f0a58f; }
.bl-gut { color: #2f6a3c; margin: 6px 0; }
.bl-foto { display: block; width: 100%; max-height: 62vh; object-fit: cover; margin: 0 0 18px; filter: grayscale(.2) sepia(.15); }
.bl-beitrag { max-width: 720px; }
.bl-beitrag p { font: 400 16.5px/1.7 var(--sans); margin: 0 0 1em; }
.bl-reihe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 18px 0 0; }
.bl-werkzeuge { display: flex; justify-content: flex-end; gap: 8px; margin: -6px 28px 8px 0; }
.bl-knopf { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border: 1px solid var(--tinte-blatt); border-radius: 999px;
  font: 500 14px/1.4 var(--sans); color: var(--tinte-blatt); text-decoration: none; cursor: pointer; background: none; transition: background .2s, color .2s; }
.bl-knopf:hover { background: var(--tinte-blatt); color: #efe8d8; }
.zeitung-blatt.dunkel .bl-knopf:hover { color: var(--tinte); }
.bl-knopf.voll { background: var(--tinte-blatt); color: #efe8d8; }
.zeitung-blatt.dunkel .bl-knopf.voll { background: var(--gold); border-color: var(--gold); color: var(--tinte); }
.bl-knopf.leise { border-color: transparent; }
.bl-knopf.gefahr { border-color: #8e2a1c; color: #8e2a1c; }
.bl-knopf.gefahr:hover { background: #8e2a1c; color: #efe8d8; }
.bl-knopf:disabled { opacity: .55; cursor: default; }
.bl-kreuz { width: 30px; height: 30px; flex: none; border-radius: 50%; font-size: 18px; color: var(--grau-blatt); }
.bl-kreuz:hover { background: var(--linie-blatt); color: var(--tinte-blatt); }
/* Formulare */
.bl-form { display: grid; gap: 12px; max-width: 640px; margin-top: 12px; }
.bl-form.bl-schmal { max-width: 380px; }
.bl-form label { display: grid; gap: 4px; font: 500 12px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--grau-blatt); }
.bl-form input:not([type=checkbox]):not([type=file]):not([type=radio]), .bl-form textarea, .bl-form select, .zeitung-blatt select, .bl-suche {
  font: 400 15.5px/1.45 var(--sans); letter-spacing: 0; text-transform: none; color: var(--tinte-blatt);
  background: rgba(255, 255, 255, .5); border: 1px solid rgba(31, 27, 22, .3); border-radius: 2px; padding: 8px 10px; width: 100%; box-sizing: border-box; }
.zeitung-blatt.dunkel .bl-form input:not([type=checkbox]):not([type=file]):not([type=radio]), .zeitung-blatt.dunkel select, .zeitung-blatt.dunkel .bl-form textarea {
  background: rgba(255, 255, 255, .06); border-color: var(--haar); color: var(--papier); }
.bl-form textarea { resize: vertical; min-height: 7em; }
.bl-form input:focus, .bl-form textarea:focus, .bl-suche:focus, .zeitung-blatt select:focus { outline: 1px solid var(--gold); outline-offset: 1px; }
.bl-form input[type=file] { font: 400 14px var(--sans); text-transform: none; letter-spacing: 0; color: var(--tinte-blatt); }
.bl-haken { display: flex !important; grid-auto-flow: column; align-items: center; gap: 8px !important; text-transform: none !important; letter-spacing: 0 !important; font: 400 14px/1.4 var(--sans) !important; color: var(--tinte-blatt) !important; }
.bl-verwaltung { border: 1px dashed rgba(31, 27, 22, .35); padding: 10px 14px 14px; display: grid; gap: 10px; }
.bl-verwaltung legend { font: 500 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--grau-blatt); padding: 0 6px; }
.bl-foto-wahl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bl-foto-wahl img { width: 120px; height: 80px; object-fit: cover; }
.bl-foto-wahl label.bl-knopf { display: inline-flex; text-transform: none; letter-spacing: 0; font: 500 14px/1.4 var(--sans); color: var(--tinte-blatt); }
.bl-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bl-honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Liste (Archiv, Suche) */
.bl-suche { margin: 12px 0 8px; font-size: 17px; padding: 10px 12px; }
.bl-liste { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--linie-blatt); }
.bl-liste li { border-bottom: 1px solid var(--linie-blatt); }
.bl-liste button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 4px; text-align: left; color: var(--tinte-blatt); }
.bl-liste button:hover { background: rgba(31, 27, 22, .06); }
.bl-liste b { display: block; font: 600 19px/1.2 var(--serif); }
.bl-liste small { display: block; font: 400 13px/1.35 var(--sans); color: var(--grau-blatt); }
.bl-daumen { width: 46px; height: 46px; flex: none; display: grid; place-items: center; background: #d9cfb9 center / cover; font: 600 20px var(--serif); color: #6b6255; filter: sepia(.15); }
/* Mitglieder, Vorstand */
.bl-mitglieder { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 22px 16px; }
.bl-mitglied { display: grid; justify-items: center; gap: 4px; text-align: center; color: var(--tinte-blatt); text-decoration: none; padding: 8px 4px; }
a.bl-mitglied:hover .bl-rund { transform: scale(1.04); box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
.bl-mitglied b { font: 600 20px/1.15 var(--serif); margin-top: 6px; }
.bl-mitglied small { font: 400 13px/1.35 var(--sans); color: var(--grau-blatt); }
.bl-rund { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: #d9cfb9 center / cover; border: 3px solid #fffaf0;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .18); font: 600 34px var(--serif); color: #6b6255; transition: transform .25s, box-shadow .25s; }
/* Reiter (Verein) */
.bl-reiter { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 8px 0 16px; border-bottom: 1px solid var(--linie-blatt); }
.bl-reiter button { padding: 8px 0 9px; font: 500 14px/1.3 var(--sans); letter-spacing: .04em; color: var(--grau-blatt); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.bl-reiter button[aria-selected=true] { color: var(--tinte-blatt); border-bottom-color: var(--tinte-blatt); }
[data-seite-inhalt] > p { font: 400 16.5px/1.7 var(--sans); max-width: 720px; }
/* Dateien */
.bl-dateien { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--linie-blatt); }
.bl-dateien li { display: flex; align-items: center; gap: 14px; padding: 10px 2px; border-bottom: 1px solid var(--linie-blatt); }
.bl-dateien li > .bl-datei-text { flex: 1; min-width: 0; }
.bl-dateien b { display: block; font: 600 19px/1.2 var(--serif); }
.bl-dateien small { display: block; font: 400 13px/1.35 var(--sans); color: var(--grau-blatt); overflow-wrap: anywhere; }
.bl-dateiart { width: 46px; height: 56px; flex: none; display: grid; place-items: end center; padding-bottom: 8px; box-sizing: border-box; font: 600 11px var(--sans); letter-spacing: .06em;
  background: linear-gradient(135deg, #fffaf0 0 78%, #d9cfb9 78%); border: 1px solid rgba(31, 27, 22, .25); color: #7a2a1d; }
.bl-hochladen { margin-top: 26px; padding-top: 14px; border-top: 1px dashed rgba(31, 27, 22, .35); }
.bl-hochladen h3, .bl-kartenseite h3 { margin: 0; font: 600 22px/1.2 var(--serif); }
/* Karte */
.bl-karte { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 300px; gap: 18px; margin-top: 10px; }
.bl-kartenplatz { position: relative; min-height: 320px; border-radius: 3px; overflow: hidden; background: #0a1411; }
/* MapLibre setzt .maplibregl-map auf position: relative; der Kasten muss trotzdem den Platz füllen */
.bl-kartenplatz > .bl-kartenkasten { position: absolute !important; inset: 0; }
.bl-kartenkasten.waehlen, .bl-kartenkasten.waehlen canvas { cursor: crosshair !important; }
.bl-kartenmeldung { position: absolute; left: 16px; top: 12px; margin: 0; }
.bl-kartenseite { overflow: auto; display: grid; align-content: start; gap: 10px; padding-right: 4px; }
.bl-kartenseite .bl-form { margin: 0; }
.bl-legende { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--papier-2); }
.k { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; flex: none; }
.k.home { background: #eed9a4; } .k.temp { background: #9fe0b4; } .k.poi { background: #f0b49a; } .k.past { background: transparent; border: 1px solid rgba(238, 217, 164, .6); }
.bl-meine { list-style: none; margin: 0; padding: 0; }
.bl-meine li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--haar); cursor: pointer; }
.bl-meine li > span:nth-child(2) { flex: 1; }
.bl-meine b { display: block; font: 600 17px/1.2 var(--serif); }
.bl-meine small { font-size: 12px; color: var(--papier-3); }
.pin { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; width: 1.5em; height: 1.5em; display: grid; place-items: center; }
.pin .dot { width: .72em; height: .72em; border-radius: 50%; background: var(--pin); box-shadow: 0 0 0 .28em var(--ring), 0 1px 5px rgba(0, 0, 0, .6); transition: transform .16s; }
.pin:hover .dot, .pin:focus-visible .dot { transform: scale(1.35); }
.pin.past .dot { background: transparent; border: 1.5px solid var(--pin); box-shadow: none; opacity: .75; }
.maplibregl-popup-content { background: rgba(10, 20, 17, .96); color: var(--papier); border: 1px solid var(--haar); border-radius: 3px; padding: .7em .85em; box-shadow: 0 10px 34px rgba(0, 0, 0, .5); font-family: var(--sans); }
.maplibregl-popup-tip { border-top-color: rgba(10, 20, 17, .96) !important; border-bottom-color: rgba(10, 20, 17, .96) !important; }
.pinpop { display: flex; flex-direction: column; gap: .18em; }
.pinpop strong { font: 600 17px/1.25 var(--serif); }
.pinpop .mt { font-size: 12px; color: var(--gold-hell); letter-spacing: .03em; }
.pinpop .nt { font-size: 13px; line-height: 1.5; color: var(--papier-2); margin-top: .2em; }
.maplibregl-ctrl-group { background: rgba(10, 20, 17, .9) !important; border: 1px solid var(--haar) !important; }
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--haar) !important; }
.maplibregl-ctrl-group button span { filter: invert(1) brightness(1.6); }
.maplibregl-ctrl-attrib { background: rgba(10, 20, 17, .75) !important; font-size: 10.5px; }
.maplibregl-ctrl-bottom-right { z-index: 3; }
.maplibregl-ctrl-attrib a { color: var(--papier-2) !important; }
/* Quellenangabe (Info-Knopf unten rechts): helle Schrift auf der dunklen Karte */
.maplibregl-ctrl-attrib, .maplibregl-ctrl-attrib-inner { color: var(--papier-2) !important; }
.maplibregl-ctrl-attrib-button { filter: invert(1); }   /* weißes i auf dunklem Grund */
/* Zeitung: Beiträge anklickbar */
.zt-klickbar { cursor: pointer; }
.zt-klickbar:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.zt-weiterlesen { display: inline-block; margin-top: 6px; font: 500 12px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #7a2a1d; }
.zt-aelter { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; margin-top: 18px; }
@media (max-width: 760px) {
  .zeitung-blatt.breit { height: calc(100vh - 2 * var(--rand)); }
  .bl-karte { grid-template-columns: 1fr; grid-template-rows: minmax(300px, 55vh) auto; overflow: auto; }
  .bl-mitglieder { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .bl-rund { width: 76px; height: 76px; }
  .bl-werkzeuge { margin-right: 24px; }
}
/* Konto-Knopf: ein Goldpunkt, solange man angemeldet ist */
.leiste .knopf { position: relative; }
.leiste .knopf.angemeldet::after { content: ''; position: absolute; right: 8px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 6px rgba(201, 164, 92, .8); }

/* ============================================================================
   v8, Oktober: Blätter überarbeitet (Hintergrund, Varianten), Zeitung als
   A4-Seiten, Archiv als Buch, Profil, Dashboard, Karte
   ========================================================================== */
.blatt-grund { position: fixed; inset: 0; z-index: 5; background: rgba(6, 8, 7, .5); opacity: 0; transition: opacity .3s ease; }
.blatt-grund.an { opacity: 1; }
.zeitung-blatt { z-index: 6; }
.bl-ik { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bl-ikknopf { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--grau-blatt); flex: none; }
.bl-ikknopf:hover, .bl-ikknopf.an { background: var(--linie-blatt); color: var(--tinte-blatt); }
.bl-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; font: inherit; padding: 0; }
.bl-link:hover { color: var(--tinte-blatt); }
.bl-laedt { animation: atmen 1.6s ease-in-out infinite; }
/* Varianten */
.zeitung-blatt.schmal { width: min(470px, calc(100vw - 2 * var(--rand))); padding: 32px 34px 30px; }
.zeitung-blatt.schmal .bl-form { max-width: none; }
.bl-hilfelink { margin: 18px 0 0; font-size: 14px; color: var(--grau-blatt); }
.bl-abschnitt { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--linie-blatt); }
.bl-abschnitt h3 { margin: 0 0 8px; font: 600 21px/1.2 var(--serif); }
.bl-abschnitt .bl-haken { margin: 6px 0; }
.bl-wahl { align-items: flex-start !important; }
.bl-wahl input { margin-top: 4px; }
.bl-wahl b { display: block; font-weight: 500; }
.bl-wahl small { display: block; color: var(--grau-blatt); font-size: 13px; }
.bl-suche.klein { font-size: 15px; padding: 8px 10px; margin: 8px 0 4px; }
.bl-liste.klein b { font-size: 17px; }
.bl-figur { margin: 0 0 16px; }
.bl-figur img { display: block; width: 100%; max-height: 50vh; object-fit: cover; }
.bl-figur figcaption { font: italic 400 13px/1.4 var(--sans); color: var(--grau-blatt); margin-top: 6px; }
.zeitung-blatt.breit .zeitung-zu, .zeitung-blatt.zeitung .zeitung-zu { position: absolute; float: none; right: 14px; top: 10px; margin: 0; z-index: 3; }
.zeitung-blatt.breit { padding: 26px 32px 28px; }

/* ---------- Die Zeitung: A4-Seiten ---------- */
.zeitung-blatt.zeitung { width: min(980px, calc(100vw - 2 * var(--rand))); padding: 0 0 8px; background: none; box-shadow: none; color: #1f1b16; overflow-x: hidden; }
@media (max-width: 700px) { .zeitung-blatt.zeitung { width: calc(100vw - 12px); max-height: calc(100vh - 12px); } }
.zeitung-blatt.zeitung .zeitung-zu { position: sticky; float: right; top: 0; right: auto; margin: 0 -2px 0 0; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(239, 232, 216, .95); color: #1f1b16; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.zeitung-blatt.zeitung > .zeitung-inhalt > .bl-laedt, .zeitung-blatt.zeitung > .zeitung-inhalt > .bl-fehler { background: #efe8d8; padding: 30px; margin: 0; }
.zt-werkzeuge { display: flex; gap: 8px; min-height: 40px; align-items: center; margin: 0 52px 10px 0; }
.zt-werkzeuge .bl-knopf { background: rgba(239, 232, 216, .95); border-color: transparent; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
.zt-werkzeuge .bl-knopf:hover { background: #1f1b16; color: #efe8d8; }
.zt-hinweis { margin: 0 52px 12px 0; padding: 10px 16px; background: rgba(239, 232, 216, .95); font: 400 14px/1.5 var(--sans); box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
.zt-seiten { display: grid; gap: 22px; }
.zt-seite { container-type: inline-size; position: relative; aspect-ratio: 210 / 297; width: 100%; box-sizing: border-box; padding: 4.6cqw 5cqw 3.4cqw;
  display: grid; grid-template-rows: auto 1fr auto; gap: 1.6cqw; overflow: hidden; color: #1f1b16;
  background: #f1eadb radial-gradient(ellipse at 30% 15%, rgba(255, 255, 255, .45), rgba(0, 0, 0, 0) 60%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .5) inset; }
.zt-seite .zt-kopf h2 { margin: 0; text-align: center; font: 600 12.2cqw/0.95 var(--serif); letter-spacing: .005em; }
.zt-seite .zt-zeile { display: flex; justify-content: space-between; gap: 2cqw; margin: 1.4cqw 0 0; padding: .7cqw 0; font: 500 1.3cqw/1.3 var(--sans);
  letter-spacing: .08em; text-transform: uppercase; border-top: .32cqw double #1f1b16; border-bottom: .12cqw solid #1f1b16; }
.zt-seite .zt-naechste { margin: .7cqw 0 0; text-align: right; font: italic 400 1.3cqw/1.3 var(--sans); color: #5a5245; }
.zt-seite .zt-kopf.klein { display: flex; align-items: baseline; justify-content: space-between; gap: 2cqw; padding-bottom: .8cqw; border-bottom: .12cqw solid #1f1b16;
  font: 500 1.3cqw/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.zt-seite .zt-kopf.klein b { font: 600 3.4cqw/1 var(--serif); letter-spacing: 0; text-transform: none; }
.zt-raster { display: grid; gap: 2.4cqw; min-height: 0; }
.zt-raster.eins { grid-template-columns: 21fr 56fr 21fr; }
.zt-raster.drei { grid-template-columns: 1fr 1fr 1fr; }
.zt-spalte { min-height: 0; overflow: hidden; }
.zt-raster > .zt-spalte + .zt-spalte { border-left: .1cqw solid rgba(31, 27, 22, .45); padding-left: 2.4cqw; margin-left: -1.2cqw; }
.zt-fuss { display: flex; justify-content: space-between; font: 500 1.15cqw/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #6b6255;
  border-top: .1cqw solid rgba(31, 27, 22, .45); padding-top: .8cqw; }
.zt-a { cursor: pointer; margin: 0 0 2cqw; padding-bottom: 1.6cqw; border-bottom: .1cqw solid rgba(31, 27, 22, .35); }
.zt-a:last-child { border-bottom: 0; }
.zt-a:focus-visible { outline: .2cqw solid var(--gold); outline-offset: .4cqw; }
.zt-a .zt-foto { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin: 0 0 1cqw; filter: grayscale(.25) sepia(.2) contrast(1.02); }
.zt-a.zt-lead .zt-foto { aspect-ratio: 16 / 10; }
.zt-a h3 { margin: 0 0 .5cqw; font: 600 2.7cqw/1.08 var(--serif); }
.zt-a.zt-lead h3 { font-size: 4.6cqw; line-height: 1.02; }
.zt-a:hover h3 { text-decoration: underline; text-decoration-thickness: .1cqw; text-underline-offset: .5cqw; }
.zt-autor { margin: 0 0 .9cqw; font: italic 400 1.3cqw/1.3 var(--sans); color: #6b6255; }
.zt-a p { margin: 0 0 .9cqw; font: 400 1.58cqw/1.48 var(--sans); text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.zt-a p + p { text-indent: 1.4cqw; margin-top: -.5cqw; }
.zt-a.zt-lead > p:first-of-type::first-letter { float: left; font: 600 5.6cqw/.82 var(--serif); margin: .3cqw .8cqw 0 0; }
.zt-a p.zt-geteilt { text-align-last: justify; margin-bottom: 0; }
.zt-a p.zt-weiter { text-indent: 0; }
.zt-fort-kopf { font: italic 400 1.25cqw/1.3 var(--sans); color: #6b6255; margin: 0 0 .7cqw; }
.zt-leer { color: #6b6255; font-style: italic; font-size: 1.4cqw; }
.zt-verein h4, .zt-rechts h4 { margin: 0 0 1cqw; padding-bottom: .5cqw; font: 600 2.3cqw/1.1 var(--serif); border-bottom: .2cqw solid #1f1b16; }
.zt-verein h5 { margin: 1.4cqw 0 .6cqw; font: 600 1.25cqw/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.zt-verein figure { margin: 0 0 1.2cqw; }
.zt-verein img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(.3) sepia(.2); }
.zt-verein figcaption { font: italic 400 1.15cqw/1.35 var(--sans); color: #6b6255; margin-top: .5cqw; }
.zt-verein p, .zt-rechts p { margin: 0 0 .9cqw; font: 400 1.42cqw/1.45 var(--sans); hyphens: auto; -webkit-hyphens: auto; }
.zt-vorstand { list-style: none; margin: 0; padding: 0; }
.zt-vorstand li { margin: 0 0 .6cqw; font: 400 1.35cqw/1.3 var(--sans); }
.zt-vorstand b { display: block; font: 600 1.7cqw/1.15 var(--serif); }
.zt-vorstand span { color: #6b6255; }
.zt-mehr { display: inline-block; margin: 1.2cqw 0 0; padding: .6cqw 1.4cqw; border: .12cqw solid #1f1b16; border-radius: 99px; font: 500 1.3cqw/1.3 var(--sans); color: #1f1b16; cursor: pointer; }
.zt-mehr.leise { border-color: transparent; padding-left: 0; text-decoration: underline; text-underline-offset: .4cqw; margin-top: 0; }
.zt-mehr:hover { background: #1f1b16; color: #efe8d8; }
.zt-kasten { margin: 0 0 2cqw; }
.zt-pdf { position: fixed; z-index: 7; bottom: calc(var(--rand) + 8px); right: max(14px, calc((100vw - min(980px, 100vw - 2 * var(--rand))) / 2 - 64px));
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #1f1b16; color: #efe8d8; box-shadow: 0 6px 20px rgba(0, 0, 0, .45); }
.zt-pdf .bl-ik { width: 22px; height: 22px; }
.zt-pdf:hover { background: var(--gold); color: #1f1b16; }
/* Drucken / als PDF sichern: nur die Seiten, je Seite ein A4-Blatt */
@media print {
  @page { size: A4 portrait; margin: 0; }
  html, body { height: auto !important; overflow: visible !important; background: #fff !important; }
  body.druckt-zeitung > *:not(.raum-ui), body.druckt-zeitung .raum-ui > *:not(.zeitung-blatt) { display: none !important; }
  body.druckt-zeitung .zeitung-blatt { position: static !important; transform: none !important; width: auto !important; max-height: none !important; overflow: visible !important;
    animation: none !important; padding: 0 !important; margin: 0 !important; background: none !important; box-shadow: none !important; }
  body.druckt-zeitung .zeitung-zu, body.druckt-zeitung .zt-werkzeuge, body.druckt-zeitung .zt-hinweis, body.druckt-zeitung .zt-pdf { display: none !important; }
  body.druckt-zeitung .zt-seiten { display: block; }
  /* Höhe = druckbare Seitenhöhe, Breite im A4-Verhältnis daraus: passt auch, wenn der Browser Ränder lässt */
  body.druckt-zeitung .zt-seite { height: 99.6vh; width: calc(99.6vh / 1.4142); aspect-ratio: auto; margin: 0 auto; box-shadow: none; background: #fff;
    break-after: page; page-break-after: always; break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.druckt-zeitung .zt-seite:last-child { break-after: auto; page-break-after: auto; }
}

/* ---------- Archiv: wie ein Buch ---------- */
.zeitung-blatt.buch { width: min(780px, calc(100vw - 2 * var(--rand))); padding: 44px 56px 48px 64px; color: #2a2118;
  background: #f4ecd9 linear-gradient(90deg, rgba(80, 55, 25, .2) 0, rgba(80, 55, 25, .05) 26px, rgba(0, 0, 0, 0) 60px, rgba(0, 0, 0, 0) calc(100% - 20px), rgba(80, 55, 25, .1) 100%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(120, 90, 50, .15); --tinte-blatt: #2a2118; --grau-blatt: #7a6a55; --linie-blatt: rgba(80, 55, 25, .22); }
.zeitung-blatt.buch .bl-titel { font-size: clamp(30px, 4.2vw, 42px); }
.bl-buchkopf { text-align: center; margin-bottom: 10px; }
.bl-buchkopf .bl-oberzeile { margin-bottom: 2px; }
.bl-inhalt { margin-top: 10px; }
.bl-jahr h3 { margin: 22px 0 6px; font: 600 22px/1.2 var(--serif); text-align: center; letter-spacing: .1em; }
.bl-jahr h3::before, .bl-jahr h3::after { content: '·'; margin: 0 10px; color: var(--grau-blatt); }
.bl-jahr ol { list-style: none; margin: 0; padding: 0; }
.bl-jahr li { padding: 4px 0 6px; }
.bl-jahr button { display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left; color: #2a2118; padding: 0; }
.bl-jahr .bl-ti { font: 500 19px/1.25 var(--serif); }
.bl-jahr button:hover .bl-ti { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.bl-jahr .bl-punkte { flex: 1; border-bottom: 1.5px dotted rgba(80, 55, 25, .4); transform: translateY(-4px); min-width: 20px; }
.bl-jahr .bl-wann { font: 400 13px/1 var(--sans); color: var(--grau-blatt); font-variant-numeric: tabular-nums; }
.bl-jahr small { display: block; font: italic 400 13px/1.3 var(--sans); color: var(--grau-blatt); }
.bl-buchseite .bl-titel { text-align: center; }
.bl-buchseite .bl-meta, .bl-buchseite .bl-oberzeile { text-align: center; }
.bl-buchseite .bl-foto { filter: sepia(.3) grayscale(.2); }
.bl-buchseite .bl-text p { font: 400 20px/1.6 var(--serif); text-align: justify; hyphens: auto; -webkit-hyphens: auto; margin: 0; }
.bl-buchseite .bl-text p + p { text-indent: 1.5em; }
.bl-buchseite .bl-text p:first-child::first-letter { float: left; font: 600 64px/.8 var(--serif); margin: 6px 10px 0 0; color: #5a3a1a; }

/* ---------- Dashboard ---------- */
.db-inhalt { flex: 1; min-height: 0; overflow: auto; padding-right: 6px; }
.db-abschnitt { margin: 0 0 26px; max-width: 900px; }
.db-abschnitt h3 { margin: 0 0 6px; font: 600 23px/1.2 var(--serif); }
.db-offen { padding: 14px 16px; background: rgba(201, 164, 92, .14); border: 1px solid rgba(201, 164, 92, .45); }
.db-liste { list-style: none; margin: 6px 0 0; padding: 0; border-top: 1px solid var(--linie-blatt); }
.db-liste li { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--linie-blatt); }
.db-titel { flex: 1; min-width: 0; }
.db-titel b { display: block; font: 600 17px/1.2 var(--serif); }
.db-titel small, .db-liste small { display: block; font: 400 13px/1.35 var(--sans); color: var(--grau-blatt); overflow-wrap: anywhere; }
.db-sortier { list-style: none; margin: 8px 0 0; padding: 0; }
.db-sortier li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin: 0 0 6px; background: rgba(255, 255, 255, .45); border: 1px solid var(--linie-blatt); cursor: grab; }
.db-sortier li.zieht { opacity: .4; }
.db-sortier li.erster { background: rgba(201, 164, 92, .18); border-color: rgba(201, 164, 92, .6); }
.db-griff { color: var(--grau-blatt); display: grid; }
.db-marke { display: none; font: 500 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #7a2a1d; border: 1px solid #7a2a1d; padding: 4px 6px; }
.db-sortier li.erster .db-marke { display: inline-block; }
.db-zeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.db-zeile input, .db-zeile select { flex: 1 1 160px; width: auto !important; }
.db-tabelle { overflow: auto; }
.db-tabelle table { width: 100%; border-collapse: collapse; font-size: 14px; }
.db-tabelle th { text-align: left; font: 500 12px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--grau-blatt); padding: 6px 8px; border-bottom: 1px solid var(--linie-blatt); }
.db-tabelle td { padding: 7px 8px; border-bottom: 1px solid var(--linie-blatt); vertical-align: middle; }
.db-tabelle tr.aus td { opacity: .5; }
.db-tabelle select { font: 400 14px var(--sans); padding: 4px 6px; background: rgba(255, 255, 255, .5); border: 1px solid rgba(31, 27, 22, .3); }
.db-aktionen { white-space: nowrap; text-align: right; }
.db-aktionen .bl-link { margin-right: 6px; font-size: 13px; }
.db-kasten { border: 1px solid var(--linie-blatt); padding: 10px; margin: 0 0 10px; display: grid; gap: 8px; }
.db-kasten-knoepfe { display: flex; gap: 4px; justify-content: flex-end; }
.bl-rund.mini { width: 40px; height: 40px; font-size: 16px; border-width: 2px; flex: none; }
.zeitung-blatt.breit .zeitung-inhalt { gap: 0; }

/* ---------- Karte ---------- */
.kt-kopf { display: flex; align-items: baseline; gap: 16px; margin-right: 44px; }
.kt { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 320px; gap: 18px; margin-top: 12px; }
.kt-karte { position: relative; min-height: 360px; border-radius: 4px; overflow: hidden; background: #0a1411; box-shadow: inset 0 0 0 1px var(--haar); }
.kt-platz, .kt-platz > .kt-kasten { position: absolute !important; inset: 0; }
.kt-kasten.waehlen, .kt-kasten.waehlen canvas { cursor: crosshair !important; }
.kt-werkzeuge { position: absolute; left: 12px; top: 12px; z-index: 2; display: grid; gap: 4px; padding: 6px; border-radius: 26px;
  background: rgba(13, 19, 16, .88); box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
.kt-werkzeuge > i { height: 1px; margin: 3px 6px; background: var(--haar); }
.kt-werkzeuge button { position: relative; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--papier-2); }
.kt-werkzeuge button:hover, .kt-werkzeuge button[aria-pressed=true] { background: rgba(201, 164, 92, .18); color: var(--gold-hell); }
.kt-werkzeuge button > span { position: absolute; left: 46px; top: 50%; transform: translateY(-50%); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s;
  padding: 4px 9px; border-radius: 3px; background: rgba(13, 19, 16, .95); color: var(--papier); font: 500 12px/1 var(--sans); }
.kt-werkzeuge button:hover > span, .kt-werkzeuge button:focus-visible > span { opacity: 1; }
.kt-suche { position: absolute; left: 70px; top: 12px; z-index: 2; width: min(380px, calc(100% - 90px)); background: rgba(13, 19, 16, .95); border-radius: 6px; box-shadow: 0 6px 20px rgba(0, 0, 0, .4); }
.kt-suche input { width: 100%; box-sizing: border-box; padding: 11px 14px; border: 0; background: none; color: var(--papier); font: 400 15px var(--sans); }
.kt-suche input:focus { outline: none; }
.kt-suche ul { list-style: none; margin: 0; padding: 0 0 6px; max-height: 50vh; overflow: auto; }
.kt-suche li > button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 14px; text-align: left; color: var(--papier); }
.kt-suche li > button:hover { background: rgba(201, 164, 92, .14); }
.kt-suche b { display: block; font: 500 14px/1.2 var(--sans); }
.kt-suche small, .kt-suche .bl-leise { display: block; font-size: 12px; color: var(--papier-3); padding: 0 14px; }
.kt-suche li > button small { padding: 0; }
.kt-legende { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px 14px; max-width: calc(100% - 60px); padding: 8px 12px; border-radius: 4px;
  background: rgba(13, 19, 16, .85); font-size: 12.5px; color: var(--papier-2); }
.kt-legende i.k { margin-right: 6px; vertical-align: -1px; }
.kt-leg-routen { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 12px; padding-top: 6px; border-top: 1px solid var(--haar); }
.kt-leg-routen i { display: inline-block; width: 16px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: 3px; }
.kt-meldung { position: absolute; left: 70px; top: 18px; z-index: 2; margin: 0; color: var(--papier-2); }
.kt-seite { overflow: auto; display: grid; align-content: start; gap: 18px; padding-right: 4px; }
.kt-seite h3 { display: flex; align-items: center; justify-content: space-between; margin: 0 0 6px; font: 600 21px/1.2 var(--serif); }
.kt-liste { list-style: none; margin: 0; padding: 0; }
.kt-liste li { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--haar); }
.kt-ort { flex: 1; display: flex; align-items: center; gap: 10px; padding: 8px 2px; text-align: left; color: var(--papier); min-width: 0; }
.kt-ort:hover b { color: var(--gold-hell); }
.kt-ort b { display: block; font: 600 17px/1.2 var(--serif); }
.kt-ort small { display: block; font-size: 12px; color: var(--papier-3); }
.kt-sichtbar { display: grid; grid-template-columns: 1fr auto; gap: 6px 4px; align-items: center; padding-top: 12px; border-top: 1px solid var(--haar); }
.kt-sicht-wahl { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 16px; padding-left: 26px; }
.kt-info { grid-column: 1 / -1; margin: 0; padding: 10px 12px; background: rgba(201, 164, 92, .12); border-left: 2px solid var(--gold); font-size: 13px; line-height: 1.5; color: var(--papier-2); }
.kt-form { gap: 10px; }
.kt-arten { display: flex; gap: 6px; }
.kt-arten button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; border: 1px solid var(--haar); border-radius: 4px; color: var(--papier-2); font: 500 13px var(--sans); }
.kt-arten button[aria-checked=true] { border-color: var(--gold); color: var(--papier); background: rgba(201, 164, 92, .14); }
.kt-adresse { display: flex; gap: 4px; align-items: center; }
.kt-adresse input { flex: 1; }
.kt-treffer { list-style: none; margin: -4px 0 0; padding: 0; }
.kt-treffer button { display: block; width: 100%; text-align: left; padding: 6px 4px; font-size: 13px; color: var(--papier-2); border-bottom: 1px solid var(--haar); }
.kt-treffer button:hover { color: var(--papier); background: rgba(201, 164, 92, .1); }
.zeitung-blatt.dunkel .bl-ikknopf { color: var(--papier-3); }
.zeitung-blatt.dunkel .bl-ikknopf:hover, .zeitung-blatt.dunkel .bl-ikknopf.an { background: rgba(255, 255, 255, .08); color: var(--papier); }
.k.poi { background: #8fd0c8; }
.pin.neu .dot { animation: punkt-neu 1.2s ease-in-out infinite; }
@keyframes punkt-neu { 50% { transform: scale(1.4); } }
.maplibregl-popup.pin-hover { pointer-events: none; }
/* helle Karte: Bedienelemente bleiben dunkel, die Fläche drumherum wird Papier */
.kt.hell .kt-karte { background: #eee9dc; }
@media (max-width: 860px) {
  .kt { grid-template-columns: 1fr; grid-template-rows: minmax(320px, 58vh) auto; overflow: auto; }
  .zeitung-blatt.breit { padding: 22px 16px; }
  .zt-werkzeuge, .zt-hinweis { margin-right: 46px; }
}

/* ---------- Zeitung, Oktober 2: Fotos zum Durchwischen, Spaltenformen, Verein ---------- */
.zt-raster.verein { grid-template-columns: 21fr 38.5fr 38.5fr; }
.zt-raster.zwei { grid-template-columns: 1fr 1fr; }
.zt-unter { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; margin-top: .6cqw; }
.zt-unter > .zt-spalte { min-height: 0; overflow: hidden; }
.zt-unter > .zt-spalte + .zt-spalte { border-left: .1cqw solid rgba(31, 27, 22, .35); padding-left: 2cqw; margin-left: -1cqw; }
.zt-fotos { position: relative; margin: 0 0 1cqw; }
.zt-band { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.zt-band::-webkit-scrollbar { display: none; }
.zt-band img { flex: 0 0 100%; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; scroll-snap-align: center; filter: grayscale(.25) sepia(.2) contrast(1.02); user-select: none; }
.zt-lead .zt-band img { aspect-ratio: 16 / 10; }
.zt-blaettern { position: absolute; top: 50%; transform: translateY(-50%); width: 3.4cqw; height: 3.4cqw; min-width: 26px; min-height: 26px; border-radius: 50%;
  background: rgba(239, 232, 216, .88); color: #1f1b16; font: 600 2.2cqw/1 var(--serif); display: grid; place-items: center; opacity: 0; transition: opacity .2s; }
.zt-blaettern.zurueck { left: .8cqw; } .zt-blaettern.vor { right: .8cqw; }
.zt-fotos:hover .zt-blaettern, .zt-blaettern:focus-visible { opacity: 1; }
@media (pointer: coarse) { .zt-blaettern { opacity: .8; } }
.zt-zahl { position: absolute; right: .8cqw; bottom: .8cqw; padding: .2cqw .8cqw; border-radius: 99px; background: rgba(31, 27, 22, .65); color: #efe8d8; font: 500 1.1cqw/1.4 var(--sans); }
.zt-a p.zt-zum { text-indent: 0; text-align: left; margin: .6cqw 0 0; }
.zt-zum-knopf { font: 500 1.25cqw/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: #7a2a1d; padding: 0; cursor: pointer; }
.zt-zum-knopf:hover { text-decoration: underline; text-underline-offset: .3cqw; }
.zt-vb h4 { margin: 0 0 1cqw; padding-bottom: .5cqw; font: 600 2.3cqw/1.1 var(--serif); border-bottom: .2cqw solid #1f1b16; }
.zt-vb .zt-fort-kopf { margin-top: -.4cqw; }
.zt-arten { list-style: none; margin: 0 0 .8cqw; padding: 0; }
.zt-arten li { margin: 0 0 .6cqw; font: 400 1.35cqw/1.3 var(--sans); }
.zt-arten b { display: block; font: 600 1.6cqw/1.15 var(--serif); }
.zt-arten span { color: #6b6255; }
.zt-verein .zt-vb p.zt-geteilt { text-align-last: justify; }
@media print { .zt-blaettern, .zt-zahl, .zt-zum { display: none !important; } .zt-band { overflow: hidden; } }
/* Beitrag ganz: Fotos groß zum Durchwischen */
.bl-galerie { margin: 0 0 18px; }
.bl-galerie .zt-band img { aspect-ratio: auto; height: min(62vh, 560px); object-fit: contain; background: #e6dcc6; filter: none; }
.bl-buchseite .bl-galerie .zt-band img { filter: sepia(.25) grayscale(.15); }
.bl-galerie .zt-blaettern { width: 40px; height: 40px; font-size: 26px; }
.bl-galerie .zt-zahl { font-size: 13px; padding: 2px 10px; right: 10px; bottom: 10px; }
/* Editor: Fotoliste */
.bl-fotoliste { display: flex; flex-wrap: wrap; gap: 10px; }
.bl-fotoliste figure { margin: 0; width: 132px; }
.bl-fotoliste img { display: block; width: 132px; height: 88px; object-fit: cover; }
.bl-fotoliste figure:first-child img { outline: 2px solid var(--gold); outline-offset: 2px; }
.bl-fotoliste div { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; }
.bl-fotoliste .bl-ikknopf { font: 600 20px/1 var(--serif); width: 28px; height: 28px; }
.bl-fotoliste .bl-ikknopf:disabled { opacity: .3; }
/* Verein (Blatt) */
.bl-zwischen { margin: 20px 0 6px; font: 600 22px/1.2 var(--serif); }
.bl-arten { list-style: none; margin: 0; padding: 0; }
.bl-arten li { padding: 6px 0; border-bottom: 1px solid var(--linie-blatt); }
.bl-arten b { display: block; font: 600 18px/1.2 var(--serif); }
.bl-arten span { font-size: 14px; color: var(--grau-blatt); }
/* Profil */
.bl-mit-info { display: flex !important; align-items: center; justify-content: space-between; }
.bl-infokasten { margin: 4px 0 12px; padding: 12px 14px; background: rgba(201, 164, 92, .12); border-left: 2px solid var(--gold); font-size: 14px; line-height: 1.5; }
.bl-infokasten ul { margin: 6px 0 0; padding-left: 18px; }
.bl-infokasten li { margin: 0 0 4px; }
.bl-feldzeile { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.bl-sicht { display: flex !important; align-items: center; gap: 6px; padding-bottom: 10px; text-transform: none !important; letter-spacing: 0 !important; font: 400 13px/1 var(--sans) !important; color: var(--grau-blatt) !important; white-space: nowrap; }
.bl-unterform { display: grid; gap: 10px; padding: 10px 12px; border: 1px dashed var(--linie-blatt); }
.bl-reihe.klein { margin: 0; }
.bl-form input:disabled { opacity: .7; }
.db-haken { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.db-abschnitt h3 + .db-haken, .bl-form > h3 { margin-top: 10px; }
.bl-ausgaben { margin: 6px 0 4px; }
.bl-ausgaben summary { cursor: pointer; font: 600 18px/1.3 var(--serif); padding: 6px 0; }
.bl-ausgaben ol { list-style: none; margin: 4px 0 8px; padding: 0; }
.bl-ausgaben li { padding: 4px 0 6px; }
.bl-ausgaben button { display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left; color: #2a2118; padding: 0; }
.bl-ausgaben .bl-ti { font: 500 19px/1.25 var(--serif); }
.bl-ausgaben .bl-punkte { flex: 1; border-bottom: 1.5px dotted rgba(80, 55, 25, .4); transform: translateY(-4px); }
.bl-ausgaben .bl-wann { font: 400 13px/1 var(--sans); color: var(--grau-blatt); }
.bl-ausgaben small { display: block; font: italic 400 13px/1.3 var(--sans); color: var(--grau-blatt); }

/* ---------- Karte: Kontaktkarte ---------- */
.kt-person { padding: 12px 14px; background: rgba(201, 164, 92, .1); border: 1px solid rgba(201, 164, 92, .35); border-radius: 4px; }
.kt-person h3 { margin: 0 0 4px; }
.kt-kontakt { display: grid; gap: 4px; margin: 6px 0 0; font-size: 14px; }
.kt-kontakt a { color: var(--gold-hell); text-decoration: none; }
.kt-kontakt a:hover { text-decoration: underline; }

/* ---------- Bilder & Videos ---------- */
.md-kopf { display: flex; align-items: baseline; gap: 18px; margin-right: 44px; }
.md-alben { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.md-alben button { padding: 5px 14px; border-radius: 99px; border: 1px solid var(--haar); color: var(--papier-2); font: 500 13px var(--sans); }
.md-alben button[aria-selected=true] { border-color: var(--gold); color: var(--papier); background: rgba(201, 164, 92, .15); }
.md-form { max-width: 760px; margin-bottom: 18px; padding: 14px 16px; border: 1px solid var(--haar); border-radius: 4px; }
.md-form input[type=file] { color: var(--papier-2); }
.md-fortschritt { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.md-fortschritt li { display: grid; grid-template-columns: 1fr 160px auto; gap: 10px; align-items: center; }
.md-fortschritt i { height: 4px; border-radius: 2px; background: var(--haar); overflow: hidden; }
.md-fortschritt i b { display: block; height: 100%; background: var(--gold); transition: width .2s; }
.md-fortschritt li.ok small { color: #9fe0b4; } .md-fortschritt li.fehler small { color: #f0a58f; }
.md-raster { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; align-content: start; }
.md-kachel { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 3px; background: #0f1713; }
.md-kachel img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.md-kachel:hover img { transform: scale(1.04); }
.md-ohne { display: grid; place-items: center; height: 100%; color: var(--papier-3); font-size: 13px; }
.md-play { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(13, 19, 16, .7); }
.md-play::after { content: ''; position: absolute; left: 18px; top: 14px; border-left: 15px solid #efe7d6; border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.md-gross { position: fixed; inset: 0; z-index: 9; background: rgba(6, 8, 7, .96); }
.md-band { height: 100%; }
.md-band figure { flex: 0 0 100%; margin: 0; display: grid; grid-template-rows: 1fr auto; scroll-snap-align: center; min-width: 0; }
.md-band img, .md-band video { width: 100%; height: 100%; min-height: 0; object-fit: contain; background: #000; }
.md-band figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 70px 18px; color: var(--papier); }
.md-band figcaption b { font: 600 19px/1.2 var(--serif); }
.md-band figcaption small { color: var(--papier-3); flex: 1; }
.md-band .bl-knopf { color: var(--papier); border-color: var(--haar); }
.md-zu { position: absolute; right: 18px; top: 12px; width: 44px; height: 44px; font-size: 30px; color: var(--papier); }
.md-pfeil { position: absolute; top: 45%; width: 48px; height: 48px; border-radius: 50%; background: rgba(239, 231, 214, .14); color: var(--papier); font: 600 30px/1 var(--serif); }
.md-pfeil.zurueck { left: 14px; } .md-pfeil.vor { right: 14px; }
@media (max-width: 700px) { .md-fortschritt li { grid-template-columns: 1fr; } .md-raster { grid-template-columns: repeat(3, 1fr); gap: 4px; } .md-band figcaption { padding: 8px 14px 14px; } }

/* Redaktion: Turnus der Ausgaben */
.db-turnus { margin: 4px 0 8px; }
.db-turnus label { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 15px; }
.db-turnus select { width: auto !important; }

/* ---------- Stammbaum: zurück ins Zimmer, Liste aller Familienmitglieder ---------- */
.zum-zimmer { position: fixed; left: var(--rand); top: calc(var(--rand) + 42px); z-index: 3; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 9px; border-radius: 999px; background: var(--flaeche); border: 1px solid var(--haar); color: var(--papier-2);
  font: 500 13px/1 var(--sans); text-decoration: none; transition: color .2s, border-color .2s; }
.zum-zimmer:hover, .zum-zimmer:focus-visible { color: var(--papier); border-color: rgba(232, 204, 140, .55); }
.zum-zimmer .ikon { width: 17px; height: 17px; }
.personen { position: fixed; left: var(--rand); top: calc(var(--rand) + 86px); bottom: var(--rand); z-index: 3; width: 290px;
  display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 10px; background: var(--flaeche); border: 1px solid var(--haar); border-radius: var(--ecke); }
.personen[hidden] { display: none; }
.personen-kopf { display: flex; align-items: baseline; gap: 10px; padding-right: 30px; position: relative; }
.personen-kopf b { font: 500 22px/1.1 var(--serif); }
.personen-kopf .leise { font-size: 12px; color: var(--papier-3); }
.personen-kopf .karte-zu { right: -6px; top: -6px; }
.personen-wahl { display: flex; border: 1px solid var(--haar); border-radius: 999px; overflow: hidden; }
.personen-wahl button { flex: 1; padding: 6px 4px; font: 500 12px/1 var(--sans); color: var(--papier-3); }
.personen-wahl button[aria-pressed="true"] { background: rgba(232, 204, 140, .16); color: var(--papier); }
.personen-gen { display: grid; gap: 4px; font-size: 12px; color: var(--papier-3); }
.personen-gen b { color: var(--papier-2); font-weight: 500; }
.doppelregler { position: relative; height: 22px; }
.doppelregler .spur { position: absolute; left: 8px; right: 8px; top: 10px; height: 3px; border-radius: 2px; background: var(--haar); }
.doppelregler .spur i { position: absolute; top: 0; bottom: 0; background: #d9b670; border-radius: 2px; }
.doppelregler input { position: absolute; left: 0; top: 0; width: 100%; height: 22px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.doppelregler input::-webkit-slider-runnable-track { background: none; height: 22px; }
.doppelregler input::-moz-range-track { background: none; }
.doppelregler input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; background: #f1e3c0; border: 2px solid #b8924a; cursor: pointer; }
.doppelregler input::-moz-range-thumb { pointer-events: auto; width: 13px; height: 13px; border-radius: 50%; background: #f1e3c0; border: 2px solid #b8924a; cursor: pointer; }
.personen-filter { width: 100%; box-sizing: border-box; padding: 7px 10px; border-radius: 6px; border: 1px solid var(--haar); background: rgba(255, 255, 255, .05); color: inherit; font: 400 13px var(--sans); }
.personen-liste { flex: 1; overflow-y: auto; margin: 0 -8px; padding: 0 8px; overscroll-behavior: contain; scrollbar-width: thin; }
.personen-buchstabe { margin: 10px 0 2px; font: 600 11px/1 var(--sans); letter-spacing: .14em; color: #c9a45c; }
.person { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; padding: 5px 8px; border-radius: 6px; color: var(--papier-2); }
.person:hover, .person:focus-visible { background: rgba(255, 255, 255, .07); color: var(--papier); }
.person[aria-current] { background: rgba(232, 204, 140, .18); color: var(--papier); }
.person-name { font-size: 14px; line-height: 1.3; }
.person-name b { font-weight: 600; }
.person small { font-size: 11.5px; color: var(--papier-3); }
.person-partner { display: block; font-size: 12px; color: var(--papier-3); }
.personen .zweig > summary { list-style: none; display: flex; align-items: flex-start; cursor: pointer; }
.personen .zweig > summary::-webkit-details-marker { display: none; }
.personen .zweig > summary::before { content: ''; flex: none; width: 7px; height: 7px; margin: 11px 4px 0 2px; border-right: 1.5px solid var(--papier-3); border-bottom: 1.5px solid var(--papier-3); transform: rotate(-45deg); transition: transform .2s; }
.personen .zweig[open] > summary::before { transform: rotate(45deg); }
.personen .zweig > summary .person { flex: 1; }
.personen .zweig-kinder { margin-left: 9px; padding-left: 6px; border-left: 1px solid var(--haar); }
.personen .zweig-blatt { padding-left: 13px; }
.baum-ui.mit-liste .karte { left: calc(var(--rand) + 304px); }
.baum-ui.schlicht .personen, .baum-ui.schlicht .zum-zimmer { background: rgba(255, 255, 255, .92); color: #1d1d1b; border-color: rgba(0, 0, 0, .12); }
.baum-ui.schlicht .person, .baum-ui.schlicht .personen-kopf b { color: #1d1d1b; }
.baum-ui.schlicht .person small, .baum-ui.schlicht .personen-gen, .baum-ui.schlicht .person-partner { color: #6b675f; }
@media (max-width: 700px) {
  .zum-zimmer { top: auto; bottom: var(--rand); }
  .baum-ui.mit-auswahl .zum-zimmer { display: none; }
  .personen { top: auto; left: var(--rand); right: var(--rand); width: auto; height: 62vh; z-index: 6; }
  .baum-ui.mit-liste .karte { left: var(--rand); }
}
/* tiefe Zweige: Einrückung wird schmaler, damit auch die 16. Generation noch Platz hat */
.personen .zweig-kinder .zweig-kinder .zweig-kinder .zweig-kinder .zweig-kinder .zweig-kinder { margin-left: 4px; padding-left: 4px; }

/* Dokumente unter einem Beitrag (PDFs) */
.bl-dokumente { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--bl-linie, rgba(31, 27, 22, .18)); }
.bl-dokumente h3 { margin: 0 0 8px; font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.bl-dokumente ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bl-dokumente a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; color: inherit; text-decoration: none; border: 1px solid var(--bl-linie, rgba(31, 27, 22, .15)); }
.bl-dokumente a:hover, .bl-dokumente a:focus-visible { background: rgba(160, 120, 50, .1); }
.bl-dokumente a span { flex: 1; }
.bl-dokumente a small { font-size: 11px; letter-spacing: .1em; opacity: .6; }
.bl-dokumente .bl-ik { width: 18px; height: 18px; flex: none; }

/* ---------- Bildbetrachter ---------- */
.bl-galerie .zt-band img { cursor: zoom-in; }
.bb-grund { position: fixed; inset: 0; z-index: 60; background: rgba(8, 10, 9, .97); color: #f1ead8; touch-action: none; user-select: none; -webkit-user-select: none; }
.bb-buehne { position: absolute; inset: 0 0 56px; overflow: hidden; cursor: grab; }
.bb-buehne:active { cursor: grabbing; }
.bb-bearbeiten .bb-buehne { cursor: crosshair; }
.bb-bild { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; --gegen: 1; }
.bb-bild img { width: 100%; height: 100%; display: block; pointer-events: none; }
.bb-punkte { position: absolute; inset: 0; }
.bb-punkt { position: absolute; transform: translate(-50%, -50%) scale(var(--gegen)); width: 26px; height: 26px; padding: 0; display: grid; place-items: center; }
.bb-punkt i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #f4dca0; background: rgba(20, 16, 8, .35); box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); opacity: .55; transition: opacity .2s, transform .2s; }
.bb-punkt span { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 4px; white-space: nowrap; padding: 3px 8px; border-radius: 4px;
  background: rgba(14, 16, 14, .88); color: #f6efdd; font: 500 13px/1.2 var(--sans); opacity: 0; pointer-events: none; transition: opacity .15s; }
.bb-punkt:hover i, .bb-punkt.an i, .bb-punkt:focus-visible i { opacity: 1; transform: scale(1.2); }
.bb-punkt:hover span, .bb-punkt.an span, .bb-punkt:focus-visible span, .bb-alle .bb-punkt span { opacity: 1; }
.bb-alle .bb-punkt i { opacity: .9; }
.bb-leiste { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: #0b0d0c; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 16px; }
.bb-zaehler { font: 500 13px var(--sans); opacity: .7; min-width: 48px; }
.bb-knopf { padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(241, 234, 216, .3); color: inherit; font: 500 13px var(--sans); background: rgba(255, 255, 255, .04); }
.bb-knopf[aria-pressed="true"] { background: rgba(232, 204, 140, .22); border-color: rgba(232, 204, 140, .6); }
.bb-zu { position: absolute; right: 14px; top: 10px; width: 44px; height: 44px; font-size: 28px; line-height: 1; color: #f1ead8; border-radius: 50%; background: rgba(10, 12, 11, .72); }
.bb-pfeil { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 64px; font-size: 40px; color: #f1ead8; border-radius: 8px; background: rgba(10, 12, 11, .55); }
.bb-pfeil.zurueck { left: 6px; } .bb-pfeil.vor { right: 6px; }
.bb-hinweis { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); margin: 0; padding: 8px 14px; border-radius: 6px; background: rgba(14, 16, 14, .85); font: 400 13px var(--sans); max-width: calc(100% - 120px); text-align: center; }
.bb-namefeld { position: fixed; z-index: 2; display: flex; gap: 6px; padding: 8px; border-radius: 8px; background: #1b1e1b; box-shadow: 0 6px 24px rgba(0, 0, 0, .5); }
.bb-namefeld input { width: 170px; padding: 6px 8px; border-radius: 4px; border: 1px solid rgba(241, 234, 216, .3); background: #0f110f; color: inherit; font: 400 14px var(--sans); }
@media (max-width: 600px) { .bb-pfeil { display: none; } .bb-leiste { gap: 6px; } .bb-knopf { padding: 6px 10px; font-size: 12px; } }

/* Dateien: Ordner und Mehrfachauswahl */
.bl-ordner { margin-top: 14px; }
.bl-ordner > summary { cursor: pointer; display: flex; align-items: baseline; gap: 10px; padding: 8px 2px; list-style: none; }
.bl-ordner > summary::-webkit-details-marker { display: none; }
.bl-ordner > summary::before { content: ''; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .2s; align-self: center; flex: none; }
.bl-ordner[open] > summary::before { transform: rotate(45deg); }
.bl-ordner > summary b { font: 600 20px/1.2 var(--serif); }
.bl-ordner > summary small { font: 400 13px var(--sans); color: var(--grau-blatt); }
.bl-ordner .bl-dateien { margin-top: 4px; }
.bl-wahl-haken { display: grid; place-items: center; width: 22px; flex: none; }
.bl-wahl-haken input { width: 18px; height: 18px; }
.bl-kreuz-platz { width: 28px; flex: none; }
.bl-auswahl { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding: 10px 12px;
  border: 1px solid var(--linie-blatt); border-radius: 8px; background: var(--papier-blatt, #f6f1e6); }
.bl-auswahl [data-zahl] { flex: 1; }
.bl-auswahl .bl-knopf:disabled { opacity: .45; cursor: default; }
/* Bilder & Videos: wer es hochgeladen hat, Auswahl */
.md-von { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 8px 5px; font: 500 11px/1.2 var(--sans); color: #f3ecd9; text-align: left;
  background: linear-gradient(transparent, rgba(0, 0, 0, .65)); opacity: 0; transition: opacity .2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-kachel:hover .md-von, .md-kachel:focus-visible .md-von, .md-raster.waehlen .md-von { opacity: 1; }
.md-haken { position: absolute; right: 7px; top: 7px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #f3ecd9; background: rgba(0, 0, 0, .35); display: none; }
.md-raster.waehlen .md-haken { display: block; }
.md-kachel.gewaehlt .md-haken { background: #d9b670; border-color: #d9b670; }
.md-kachel.gewaehlt .md-haken::after { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #1a140a; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.md-kachel.gewaehlt img { opacity: .75; }
.md-auswahl { background: #16201b; border-color: var(--haar); }
.md-albuminfo { margin: 4px 0 0; }
@media (hover: none) { .md-von { opacity: 1; } }
/* Profil: eigenes Foto */
.bl-fotozeile { display: flex; align-items: center; gap: 18px; margin: 8px 0 10px; }
.bl-profilfoto { width: 84px; height: 84px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 600 34px var(--serif);
  background: #e7dcc4 center / cover no-repeat; color: #6b5a3c; border: 1px solid rgba(31, 27, 22, .2); }
.bl-profilfoto.mit-bild { color: transparent; }
.bl-fotozeile p { margin: 0 0 6px; }
/* Stammbaum: Sammelpfeile (Geschwister · 5) und aufgefächerte Gruppe */
.pfeil.gruppe .pfeil-text { font-style: italic; text-decoration: underline dotted rgba(232, 201, 138, .7); text-underline-offset: 4px; }
.pfeile.mit-offener-gruppe .pfeil:not(.aus-gruppe) { opacity: .28; transition: opacity .25s; }
.pfeile.mit-offener-gruppe .pfeil:not(.aus-gruppe):hover { opacity: 1; }
.pfeil.aus-gruppe .pfeil-text small { color: #e8c98a; }

/* Stammbaum: Fotos */
.karte-foto { float: left; width: 62px; height: 62px; margin: 2px 14px 6px 0; border-radius: 50%; background: #2a2a24 center 20% / cover no-repeat;
  box-shadow: 0 0 0 2px rgba(232, 204, 140, .55), 0 3px 10px rgba(0, 0, 0, .4); cursor: zoom-in; }
.karte-foto[hidden] { display: none; }
.karte.mit-foto .karte-daten, .karte.mit-foto .karte-zeilen { margin-left: 76px; }
.karte.mit-foto .karte-familie { clear: both; }
.name-foto { display: none; }
.baum-ui.schlicht .name-foto { display: block; float: left; width: 30px; height: 30px; margin: -3px 7px 0 -2px; border-radius: 50%; background: #ddd center 20% / cover no-repeat; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.det-block { margin-top: 12px; }
.det-block > .det-titel { display: block; margin-bottom: 6px; }
.det-bilder { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.det-bild { aspect-ratio: 1; border-radius: 4px; background: #222 center / cover no-repeat; cursor: zoom-in; border: 1px solid var(--haar); }
.det-dokumente, .det-quellen { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 5px; font-size: 13px; }
.det-dokumente a { display: flex; gap: 8px; align-items: center; color: inherit; text-decoration: none; }
.det-dokumente a:hover span { text-decoration: underline; }
.det-dokumente .ikon { width: 16px; height: 16px; flex: none; }
.det-quellen li { line-height: 1.4; }
/* Stammbaum 2D: Namen als dunkle Tinte auf dem Papier, gut lesbar */
.baum-ui.eben .name, .baum-ui.eben .pfeil-text, .baum-ui.eben .hinweis-unten, .baum-ui.eben .marke { text-shadow: 0 0 3px rgba(245, 240, 228, .95), 0 0 8px rgba(245, 240, 228, .9); color: #1d1d1b; }
.baum-ui.eben .name b { color: #1d1d1b; font-weight: 600; }
.baum-ui.eben .name i { color: #4d463c; }
.baum-ui.eben .name.zweig b, .baum-ui.eben .pfeil-text small { color: #7a5a1e; }
.baum-ui.eben .pfeil-spitze { color: #7a5a1e; filter: none; }
/* Stammbaum: eine Geburt */
.geburt { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
.baum-ui.in-geburt .karte, .baum-ui.in-geburt .pfeile, .baum-ui.in-geburt .namen, .baum-ui.in-geburt .hinweis-unten, .baum-ui.in-geburt .personen { opacity: 0; pointer-events: none; transition: opacity .6s; }
.geburt-band { position: absolute; left: 50%; top: calc(var(--rand) + 4px); transform: translateX(-50%); display: flex; align-items: center; gap: 16px; padding: 10px 12px 10px 22px;
  border-radius: 999px; background: rgba(14, 18, 15, .82); border: 1px solid rgba(232, 204, 140, .45); color: #f3e3b8; font: 500 20px/1 var(--serif); pointer-events: auto; animation: auftauchen .8s ease both; }
.geburt-band button { font: 500 12px var(--sans); padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(243, 227, 184, .4); color: inherit; }
.geburt-satz { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); padding: 12px 22px; border-radius: 10px; background: rgba(14, 18, 15, .78);
  color: #f6ecd0; font: 500 26px/1.25 var(--serif); text-align: center; max-width: min(640px, calc(100vw - 40px)); }
.geburt-satz.neu { animation: auftauchen .7s ease both; }
.geburt-ring { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.geburt-ring::before, .geburt-ring::after { content: ''; position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%;
  border: 3px solid #f4d48a; box-shadow: 0 0 18px rgba(244, 212, 138, .9); animation: geburt-puls 1.6s ease-out infinite; }
.geburt-ring::after { animation-delay: .8s; }
.geburt-ring.neu::before, .geburt-ring.neu::after { border-color: #fff4cf; animation-duration: 1.2s; }
@keyframes geburt-puls { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }
.geburt-funke { position: absolute; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #fff2c4; box-shadow: 0 0 10px 3px rgba(255, 220, 140, .9);
  animation: funke 1.4s ease-out forwards; }
@keyframes funke { to { transform: translate(var(--fx, 0), -46px) scale(.2); opacity: 0; } }
.geburt-karte { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 26px 40px 24px; border-radius: 14px; text-align: center;
  background: rgba(14, 18, 15, .88); border: 1px solid rgba(232, 204, 140, .5); box-shadow: 0 20px 60px rgba(0, 0, 0, .5); animation: geburt-karte .9s cubic-bezier(.2, .9, .3, 1.2) both; }
.geburt-karte small { display: block; font: 600 12px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #e8c98a; }
.geburt-karte b { display: block; margin: 8px 0 6px; font: 500 40px/1.1 var(--serif); color: #fbf3df; }
.geburt-karte span { font: 400 15px/1.4 var(--sans); color: #d9cfb8; }
@keyframes geburt-karte { from { opacity: 0; transform: translate(-50%, -50%) scale(.85); } }
.geburt-band span { white-space: nowrap; }
.baum-ui.in-geburt .zum-zimmer { opacity: 0; pointer-events: none; }
@media (max-width: 900px) { .geburt-band { top: calc(var(--rand) + 52px); font-size: 17px; } }
.geburt-karte, .geburt-band, .geburt-satz { z-index: 2; }
/* Dashboard: Rundnachricht */
.db-editor-leiste { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.db-editor-leiste button { padding: 5px 10px; border: 1px solid var(--linie-blatt); border-radius: 4px; font: 500 13px var(--sans); background: rgba(255, 255, 255, .35); }
.db-editor { min-height: 220px; padding: 12px 14px; border: 1px solid var(--linie-blatt); border-radius: 6px; background: #fffdf8; font: 400 16px/1.6 Georgia, serif; color: #1f1b16; overflow-wrap: anywhere; }
.db-editor:focus { outline: 2px solid rgba(160, 120, 50, .45); }
.db-editor h2 { font-size: 21px; margin: 12px 0 6px; }
.db-mailfotos { display: flex; flex-wrap: wrap; gap: 8px; }
.db-mailfotos span { position: relative; }
.db-mailfotos img { width: 96px; height: 72px; object-fit: cover; border-radius: 4px; display: block; }
.db-mailfotos .bl-kreuz { position: absolute; right: -6px; top: -6px; background: #fff; border-radius: 50%; }
.db-unterschrift { border: 1px solid var(--linie-blatt); border-radius: 6px; padding: 8px 12px 10px; display: grid; gap: 4px; }
.db-unterschrift legend { font: 600 12px var(--sans); padding: 0 6px; }
.db-mailvorschau { position: fixed; inset: 0; z-index: 70; background: rgba(10, 10, 9, .7); display: grid; place-items: center; padding: 16px; }
.db-mailvorschau > div { width: min(700px, 100%); height: min(90vh, 900px); background: #fbf7ee; color: #1f1b16; border-radius: 10px; padding: 10px 12px 12px; display: flex; flex-direction: column; }
.db-mailvorschau .bl-reihe { justify-content: space-between; margin: 0 0 8px; }
.db-mailvorschau iframe { flex: 1; width: 100%; border: 1px solid #e3d9c4; border-radius: 6px; background: #efe8d8; }

/* Zweiter Schritt beim Einloggen (Profil) */
.bl-zf-tipp { padding: 8px 12px; border-left: 3px solid #b8892b; background: rgba(184, 137, 43, .09); margin: 8px 0; font-size: .95em; }
.bl-zf-schritte { padding-left: 1.3em; display: grid; gap: 10px; margin: 6px 0 12px; }
.bl-zf-qr { margin: 10px 0 6px; }
.bl-zf-qr svg { display: block; width: 200px; height: 200px; max-width: 100%; border-radius: 6px; border: 1px solid var(--linie-blatt); }
.bl-zf-schluessel { display: block; margin-top: 6px; font: 600 15px/1.45 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em; user-select: all; }
.bl-zf-codes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, max-content); gap: 6px 26px; margin: 10px 0 14px; }
.bl-zf-codes code { font: 600 16px/1.3 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .05em; }
.db-zf { display: inline-block; margin-left: 6px; padding: 0 5px; background: none; font-family: inherit; cursor: pointer; border: 1px solid #2f6a3c; border-radius: 4px; color: #2f6a3c; font-size: 11px; line-height: 16px; vertical-align: 1px; }

/* HasselBLATT: Leitartikel mit der größten Überschrift und dem Foto groß darunter;
   die übrigen Beiträge mit dem Foto rechts im Text (der Text fließt darum herum) */
.zt-a.zt-lead > .zt-fotos { margin: .6cqw 0 1cqw; }
.zt-a:not(.zt-lead) { display: flow-root; }
.zt-a:not(.zt-lead) > .zt-fotos { float: right; width: 46%; margin: .3cqw 0 .7cqw 1.4cqw; }
.zt-a:not(.zt-lead) > .zt-fotos .zt-band img { aspect-ratio: 4 / 3; }
.zt-a:not(.zt-lead) > .zt-fotos .zt-blaettern { width: 2.6cqw; height: 2.6cqw; font-size: 1.7cqw; }
.zt-a.zt-schmal:not(.zt-lead) > .zt-fotos { float: none; width: auto; margin: 0 0 1cqw; }
/* Leitartikel breit: Kopf über Mitte und rechte Spalte, Termine und Aktuelles als Kasten unten rechts */
.zt-raster.breit { grid-template-columns: 21fr 56fr 21fr; grid-template-rows: auto minmax(0, 1fr); }
.zt-raster.breit > .zt-verein { grid-column: 1; grid-row: 1 / 3; }
.zt-raster.breit > .zt-leitkopf { grid-column: 2 / 4; grid-row: 1; margin: 0 0 0 -1.2cqw; padding: 0 0 1.4cqw 2.4cqw;
  border-left: .1cqw solid rgba(31, 27, 22, .45); border-bottom: .1cqw solid rgba(31, 27, 22, .45); }
.zt-raster.breit > .zt-leitkopf h3 { font-size: 5.4cqw; line-height: 1; }
.zt-raster.breit > .zt-leitkopf .zt-band img { aspect-ratio: 2 / 1; }
.zt-raster.breit > .zt-mitte { grid-column: 2; grid-row: 2; margin-left: -1.2cqw; padding-left: 2.4cqw; border-left: .1cqw solid rgba(31, 27, 22, .45); }
.zt-rechts-breit { grid-column: 3; grid-row: 2; display: flex; flex-direction: column; min-height: 0;
  margin-left: -1.2cqw; padding-left: 2.4cqw; border-left: .1cqw solid rgba(31, 27, 22, .45); }
.zt-rechts-breit > .zt-rechtsfluss { flex: 1 1 0; min-height: 0; }
.zt-rechts-breit > .zt-box { flex: none; margin-top: 1.6cqw; padding: 1.4cqw 1.4cqw .4cqw; background: rgba(31, 27, 22, .05); border-top: .3cqw double #1f1b16; }
.zt-a.zt-leittext { cursor: pointer; }

/* „Jetzt Mitglied werden“ in der Zeitung: eckig, schwarz, weiße Schrift, Doppelrahmen */
.zt-beitreten { display: block; width: 100%; margin: .6cqw 0 1.4cqw; padding: 1cqw 1cqw .9cqw; cursor: pointer;
  background: #1f1b16; color: #f6f0e3; border: .55cqw double #f6f0e3; box-shadow: 0 0 0 .16cqw #1f1b16; border-radius: 0;
  font: 600 1.3cqw/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-align: center; }
.zt-beitreten:hover, .zt-beitreten:focus-visible { background: #3a3128; }
@media print { .zt-beitreten { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* Profil: Adresse kommt von der Karte; „Wie sind deine Daten geschützt?“ klappt auf */
.bl-adresse { display: grid; gap: 2px; }
.bl-adresse p { margin: 0; }
.bl-feldname { font: 500 12px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--grau-blatt); margin: 6px 0 2px; }
.bl-schutz { margin: 4px 0 18px; }
.bl-schutz summary { cursor: pointer; font: 600 15px/1.3 var(--sans); padding: 6px 0; }
.bl-schutz ul { margin: 6px 0 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: 14px; }

/* Dashboard: Under construction an/aus */
.db-schalter { display: inline-flex; border: 1px solid var(--linie-blatt); border-radius: 8px; overflow: hidden; margin: 2px 0 8px; }
.db-schalter button { font: 500 14px/1 var(--sans); padding: 9px 18px; background: transparent; color: inherit; cursor: pointer; }
.db-schalter button + button { border-left: 1px solid var(--linie-blatt); }
.db-schalter button[aria-checked="true"] { background: #1f1b16; color: #f6f0e3; }
.db-baustelle .db-schalter button[data-bau="1"][aria-checked="true"] { background: #7a2a1d; }

/* Zeitung: Vorstand mit Profilfoto */
.zt-vorstand li.mit-foto { display: grid; grid-template-columns: 3.6cqw 1fr; column-gap: .9cqw; align-items: center; }
.zt-vorstand li.mit-foto > b, .zt-vorstand li.mit-foto > span:not(.zt-vorstand-foto) { grid-column: 2; }
.zt-vorstand-foto { grid-row: 1 / span 2; width: 3.6cqw; height: 3.6cqw; border-radius: 50%; background: #d9d1bf center / cover; filter: grayscale(.3) sepia(.2); }
/* Dashboard: Vereinsmitglieder */
.db-mitte { text-align: center; }
.db-tabelle input:not([type=checkbox]), .db-tabelle select { font: 400 14px var(--sans); padding: 4px 6px; background: rgba(255, 255, 255, .5); border: 1px solid rgba(31, 27, 22, .3); max-width: 100%; }
.db-tabelle input[type=date] { min-width: 8.5em; }

/* Stammbaum-Karte: Kontakt (Mitglieder) und Verein (Admins) */
.karte-kontakt { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--haar); display: grid; gap: 3px; font-size: 13px; color: var(--papier-2); }
.karte-kontakt a { color: var(--papier); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--haar); }
.karte-kontakt[hidden] { display: none; }
.karte-marke { cursor: default; opacity: .85; }
.person-verein { margin-left: 6px; padding: 0 4px; border: 1px solid var(--haar); border-radius: 3px; font: 500 9.5px/1.5 var(--sans); letter-spacing: .06em; color: var(--papier-3); vertical-align: 1px; }