/* Familie Selhorst — Gestaltung ausschließlich aus den Elementen des Wappens:
   Schild (Silber · Blau · Grün · Silber), schwarze Adlerköpfe mit goldenem Schnabel und roter Zunge,
   drei goldene Sterne, fünf goldene Ähren, goldene Krone, Büffelhörner, Helmdecke,
   Spruchband „MERGOR · NON SUB · MERGOR“ und die Fraktur-Unterschrift „von Selhorst“. */

@font-face{font-family:"Fraktur";src:url(fonts/unifrakturmaguntia-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Garamond";src:url(fonts/cormorant-garamond-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Garamond";src:url(fonts/cormorant-garamond-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Garamond";src:url(fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Versal";src:url(fonts/cormorant-sc-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Versal";src:url(fonts/cormorant-sc-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  /* Wappentinkturen — Füllfarben */
  --gold:#ecbd1d; --gold-hi:#f7d75a;
  --blau:#8ebde2; --gruen:#5e9c3c;
  --schwarz:#151515; --silber:#f4f2ec; --silber-schatten:#a9a7a0;
  --rot:#c3282d;
  /* Fläche & Schrift (hell = Pergament der Wappentafel) */
  --bg:#f3eddd; --bg-tief:#ebe3cd; --karte:#faf6ea;
  --ink:#1b1915; --ink-2:#4a453b; --linie:#d6cbb0;
  --gold-text:#8a6a05; --blau-text:#2c6592; --gruen-text:#3b6b22;
  --feld-blau:#8ebde2; --feld-nacht:#1d3a52;
  --schatten:0 1px 0 #fff8, 0 18px 40px -24px #3a2c0a55;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#121110; --bg-tief:#0b0a09; --karte:#1b1a17;
    --ink:#f1ede2; --ink-2:#bdb6a5; --linie:#3a362d;
    --gold-text:#f0c632; --blau-text:#9ccbef; --gruen-text:#8cc66a;
    --feld-nacht:#0f2436;
    --schatten:0 18px 40px -24px #000c;
  }
}
:root[data-theme="dark"]{
  --bg:#121110; --bg-tief:#0b0a09; --karte:#1b1a17;
  --ink:#f1ede2; --ink-2:#bdb6a5; --linie:#3a362d;
  --gold-text:#f0c632; --blau-text:#9ccbef; --gruen-text:#8cc66a;
  --feld-nacht:#0f2436;
  --schatten:0 18px 40px -24px #000c;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 clamp(18px,1.05vw + 13px,21px)/1.55 "Garamond",Georgia,serif;overflow-x:hidden}
img,svg{max-width:100%}
a{color:var(--blau-text);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--gold-text)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

/* Zweisprachigkeit */
html[lang="de"] [lang="en"]:not(html),html[lang="en"] [lang="de"]:not(html){display:none!important}

.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
@media (min-width:700px){.wrap{padding:0 32px}}

/* ——— Kopfleiste ——— */
.kopf{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--linie)}
.kopf .wrap{display:flex;align-items:center;gap:18px;height:60px}
.marke{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:400 26px/1 "Fraktur",serif;white-space:nowrap}
.marke svg{width:26px;height:31px;flex:none}
.nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav a{font:500 15px/1 "Versal",serif;letter-spacing:.08em;color:var(--ink-2);text-decoration:none;padding:9px 10px;border-radius:3px}
.nav a:hover{color:var(--ink);background:var(--bg-tief)}
.sprache{display:flex;border:1px solid var(--linie);border-radius:999px;overflow:hidden;margin-left:8px;flex:none}
.sprache button{all:unset;cursor:pointer;font:700 12px/1 "Versal",serif;letter-spacing:.1em;padding:8px 11px;color:var(--ink-2)}
.sprache button[aria-pressed="true"]{background:var(--schwarz);color:var(--gold)}
.menue-knopf{display:none}
@media (max-width:900px){
  .nav{position:fixed;inset:60px 0 auto 0;flex-direction:column;align-items:stretch;background:var(--bg);border-bottom:1px solid var(--linie);padding:8px 16px 16px;transform:translateY(-120%);visibility:hidden;transition:transform .3s,visibility .3s;margin:0}
  .nav.offen{transform:none;visibility:visible}
  .nav a{padding:14px 6px;font-size:17px;border-bottom:1px solid var(--linie)}
  .menue-knopf{all:unset;cursor:pointer;width:40px;height:40px;display:grid;place-items:center;margin-left:auto}
  .menue-knopf span{display:block;width:22px;height:2px;background:var(--ink);box-shadow:0 7px 0 var(--ink),0 -7px 0 var(--ink)}
  .sprache{margin-left:0}
}

/* ——— Spruchband (wiederkehrendes Leitmotiv) ——— */
.band{display:block;width:100%;max-width:620px;margin:0 auto;height:auto}
.band text{font-family:"Versal",serif;font-weight:700;letter-spacing:.06em;fill:var(--schwarz)}
.band .stoff{fill:var(--silber);stroke:var(--schwarz);stroke-width:1.6}
.band .falte{fill:var(--silber-schatten);stroke:var(--schwarz);stroke-width:1.6}

/* ——— Held ——— */
.held{position:relative;padding:48px 0 0;overflow:hidden}
.held .wrap{display:grid;gap:32px;align-items:center}
@media (min-width:900px){.held .wrap{grid-template-columns:1.05fr .95fr;gap:56px;padding-bottom:20px}}
.held h1{margin:0;font:400 clamp(58px,9vw,118px)/.92 "Fraktur",serif;letter-spacing:-.01em}
.held h1 small{display:block;font:500 clamp(14px,1.4vw,17px)/1.2 "Versal",serif;letter-spacing:.32em;color:var(--gold-text);margin-bottom:14px}
.held .leit{font-style:italic;font-size:clamp(22px,2.2vw,28px);line-height:1.35;margin:22px 0 14px;color:var(--ink)}
.held p{color:var(--ink-2);max-width:34em}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.knopf{display:inline-flex;align-items:center;gap:10px;font:700 15px/1 "Versal",serif;letter-spacing:.1em;text-decoration:none;padding:15px 20px;border-radius:2px;border:1.5px solid var(--schwarz);color:var(--schwarz);background:var(--gold)}
.knopf:hover{background:var(--gold-hi);color:var(--schwarz)}
.knopf.leise{background:transparent;color:var(--ink);border-color:var(--ink)}
.knopf.leise:hover{background:var(--bg-tief);color:var(--ink)}
.knopf svg{width:16px;height:16px}

.wappen-buehne{position:relative;max-width:440px;width:100%;margin:0 auto}
.wappen-buehne .wappen{display:block;width:100%;height:auto;animation:auftauchen 1.8s cubic-bezier(.2,.7,.2,1) both .15s}
@keyframes auftauchen{0%{transform:translateY(16%);opacity:0;clip-path:inset(0 0 100% 0)}60%{opacity:1}100%{transform:none;clip-path:inset(0 0 -10% 0)}}

/* Die Wasserlinie: das „mergor“ — sichtbar als Linie, über die alles wieder auftaucht */
.wasserlinie{position:relative;height:56px;margin-top:-6px}
.wasserlinie svg{position:absolute;inset:0;width:100%;height:100%}
.wasserlinie path{fill:none;stroke:var(--gold);stroke-width:1.5}
.wasserlinie path+path{stroke:var(--linie);stroke-width:1}

/* ——— Abschnitte ——— */
.abschnitt{padding:clamp(56px,8vw,110px) 0}
.abschnitt.tief{background:var(--bg-tief)}
.satz{display:flex;align-items:center;gap:14px;font:700 clamp(13px,1.2vw,15px)/1 "Versal",serif;letter-spacing:.3em;color:var(--gold-text);margin-bottom:18px}
.satz svg{width:18px;height:18px;flex:none}
.satz .ziffer{font-family:"Garamond",serif;font-weight:600;letter-spacing:.1em}
h2{font:400 clamp(40px,5.6vw,72px)/1 "Fraktur",serif;margin:0 0 20px;letter-spacing:-.005em}
h3{font:700 clamp(19px,1.6vw,22px)/1.25 "Versal",serif;letter-spacing:.06em;margin:0 0 8px}
.vorspann{font-size:clamp(21px,1.6vw,25px);line-height:1.5;max-width:36em;color:var(--ink)}
.vorspann em{color:var(--gold-text)}
.fein{font-size:.84em;color:var(--ink-2)}
.quelle{font-size:.78em;color:var(--ink-2);font-style:italic}

/* Trenner: Stern zwischen zwei Ähren */
.trenner{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 auto;padding:6px 0;color:var(--gold)}
.trenner::before,.trenner::after{content:"";height:1px;flex:1;max-width:260px;background:linear-gradient(90deg,transparent,var(--linie))}
.trenner::after{background:linear-gradient(-90deg,transparent,var(--linie))}
.trenner svg{width:120px;height:24px}

/* ——— Wahlspruch ——— */
.spruch-raster{display:grid;gap:2px;margin-top:40px;background:var(--linie);border:1px solid var(--linie)}
@media (min-width:800px){.spruch-raster{grid-template-columns:1fr 1fr 1fr}}
.spruch-teil{background:var(--karte);padding:28px 26px 30px;position:relative}
.spruch-teil .wort{font:700 clamp(28px,3vw,38px)/1 "Versal",serif;letter-spacing:.08em;margin:6px 0 4px}
.spruch-teil .uebers{font-style:italic;color:var(--gold-text);margin:0 0 12px}
.spruch-teil p{margin:0;color:var(--ink-2)}
.spruch-teil .nr{font:600 14px/1 "Garamond",serif;letter-spacing:.2em;color:var(--ink-2)}
.spruch-teil a{display:inline-block;margin-top:14px;font:700 13px/1 "Versal",serif;letter-spacing:.14em;text-decoration:none}

/* ——— Zeitleiste ——— */
.zeit{list-style:none;margin:44px 0 0;padding:0;position:relative}
.zeit::before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--gold),var(--gruen) 60%,var(--blau))}
@media (min-width:760px){.zeit::before{left:151px}}
.zeit li{position:relative;padding:0 0 30px 40px}
@media (min-width:760px){.zeit li{display:grid;grid-template-columns:120px 1fr;gap:62px;padding-left:0}}
.zeit .jahr{font:700 20px/1.2 "Versal",serif;letter-spacing:.04em;color:var(--gold-text);display:block;margin-bottom:4px}
@media (min-width:760px){.zeit .jahr{text-align:right;margin:0}}
.zeit li::before{content:"";position:absolute;left:4px;top:5px;width:16px;height:16px;background:var(--gold);clip-path:polygon(50% 0,62.5% 28.3%,93.3% 25%,75% 50%,93.3% 75%,62.5% 71.7%,50% 100%,37.5% 71.7%,6.7% 75%,25% 50%,6.7% 25%,37.5% 28.3%)}
@media (min-width:760px){.zeit li::before{left:144px}}
.zeit h3{margin-bottom:4px}
.zeit p{margin:0;color:var(--ink-2)}
.zeit .ueberliefert{display:inline-block;font:700 11px/1 "Versal",serif;letter-spacing:.14em;color:var(--blau-text);border:1px solid currentColor;border-radius:999px;padding:4px 8px 3px;margin-left:6px;vertical-align:3px}
.zeit li.mergor .jahr{color:var(--rot)}

.zwei{display:grid;gap:28px;margin-top:48px}
@media (min-width:860px){.zwei{grid-template-columns:1fr 1fr;gap:40px}}
.karte{background:var(--karte);border:1px solid var(--linie);padding:26px 26px 24px;box-shadow:var(--schatten)}
.karte p:last-child{margin-bottom:0}

/* ——— Wappen-Lesung ——— */
.wappen-lesung{display:grid;gap:40px;margin-top:40px;align-items:start}
@media (min-width:900px){.wappen-lesung{grid-template-columns:minmax(300px,420px) 1fr;gap:64px}}
.lesung-schild{position:sticky;top:84px}
.lesung-schild svg{width:100%;height:auto;display:block}
.lesung-schild [data-teil]{cursor:pointer;transition:opacity .25s,filter .25s}
.lesung-schild.fokus [data-teil]{opacity:.28}
.lesung-schild.fokus [data-teil].an{opacity:1;filter:drop-shadow(0 0 6px #ecbd1d88)}
.teile{display:grid;gap:12px}
.teil{all:unset;display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;padding:18px 18px;border:1px solid var(--linie);background:var(--karte);cursor:pointer;transition:border-color .2s,transform .2s}
.teil:hover,.teil.an{border-color:var(--gold)}
.teil.an{transform:translateX(4px)}
.teil:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.teil svg{width:44px;height:44px}
.teil h3{margin:2px 0 4px}
.teil p{margin:0;color:var(--ink-2);font-size:.95em}
.blason{margin-top:28px;border-left:3px solid var(--gold);padding:4px 0 4px 18px;font-style:italic;color:var(--ink-2)}
.original{margin-top:40px;display:grid;gap:20px}
@media (min-width:700px){.original{grid-template-columns:1fr 1fr}}
.original figure{margin:0;background:#f4efe1;padding:14px;border:1px solid var(--linie)}
.original img{display:block;width:100%;height:auto}
.original figcaption{font-size:.8em;color:#4a453b;margin-top:10px;font-style:italic}

/* ——— Weltkarte als blaues Wappenfeld mit Sternen ——— */
.sternfeld{position:relative;margin-top:40px;background:var(--feld-nacht);border:1.5px solid var(--schwarz);overflow:hidden}
.sternfeld svg{display:block;width:100%;height:auto}
.sternfeld .land{fill:#ffffff14;stroke:#ffffff26;stroke-width:.6}
.sternfeld .netz{stroke:#ffffff12;stroke-width:.5}
.sternfeld .stern{fill:var(--gold);cursor:pointer;transition:transform .2s}
.sternfeld .stern:hover,.sternfeld .stern:focus{fill:var(--gold-hi)}
.sternfeld .beschr{font:700 21px "Versal",serif;paint-order:stroke;stroke:#0f2436;stroke-width:4px;letter-spacing:.08em;fill:#f4f2ec}
.sternfeld .bogen{fill:none;stroke:var(--gold);stroke-width:.9;stroke-dasharray:3 4;opacity:.65}
.legende{position:absolute;left:14px;bottom:12px;font:600 12px/1.3 "Versal",serif;letter-spacing:.12em;color:#f4f2ecaa}
.zweige{display:grid;gap:14px;margin-top:28px}
@media (min-width:640px){.zweige{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.zweige{grid-template-columns:1fr 1fr 1fr}}
.zweig{background:var(--karte);border:1px solid var(--linie);padding:20px 20px 18px;position:relative}
.zweig.an{border-color:var(--gold)}
.zweig h3{display:flex;align-items:center;gap:10px}
.zweig h3 svg{width:18px;height:18px;flex:none}
.zweig p{margin:0;color:var(--ink-2);font-size:.95em}
.zahl{font:700 13px/1 "Versal",serif;letter-spacing:.12em;color:var(--gruen-text);display:block;margin-top:10px}

/* ——— Netzwerk ——— */
.filter{display:flex;flex-wrap:wrap;gap:8px;margin:34px 0 22px}
.filter button{all:unset;cursor:pointer;font:700 13px/1 "Versal",serif;letter-spacing:.1em;padding:10px 14px;border:1px solid var(--linie);border-radius:999px;color:var(--ink-2);background:var(--karte)}
.filter button[aria-pressed="true"]{background:var(--schwarz);color:var(--gold);border-color:var(--schwarz)}
.filter button:focus-visible{outline:2px solid var(--gold)}
.quellen{display:grid;gap:14px}
@media (min-width:700px){.quellen{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.quellen{grid-template-columns:1fr 1fr 1fr}}
.quelle-karte{display:flex;flex-direction:column;background:var(--karte);border:1px solid var(--linie);padding:20px;text-decoration:none;color:var(--ink);transition:border-color .2s,transform .2s;min-height:100%}
.quelle-karte:hover{border-color:var(--gold);transform:translateY(-2px);color:var(--ink)}
.quelle-karte .kat{font:700 11px/1 "Versal",serif;letter-spacing:.16em;color:var(--gruen-text);margin-bottom:10px}
.quelle-karte h3{font-size:19px;margin-bottom:8px}
.quelle-karte p{margin:0 0 14px;color:var(--ink-2);font-size:.92em;flex:1}
.quelle-karte .url{font:600 13px/1.3 "Garamond",serif;color:var(--blau-text);word-break:break-all}
.quelle-karte .land-tag{font:600 12px "Versal",serif;letter-spacing:.1em;color:var(--ink-2)}

/* ——— Mitmachen ——— */
.mitmachen{background:var(--schwarz);color:#f1ede2}
.mitmachen h2{color:#f1ede2}
.mitmachen .satz{color:var(--gold)}
.mitmachen .vorspann{color:#f1ede2}
.mitmachen .schritte{display:grid;gap:2px;margin:40px 0 36px;background:#ffffff1c}
@media (min-width:800px){.mitmachen .schritte{grid-template-columns:repeat(3,1fr)}}
.mitmachen .schritt{background:var(--schwarz);padding:24px 22px}
.mitmachen .schritt .nr{font:700 34px/1 "Versal",serif;color:var(--gold)}
.mitmachen .schritt p{color:#c9c3b4;margin:8px 0 0}
.mitmachen .knopf.leise{color:#f1ede2;border-color:#f1ede2}
.mitmachen .knopf.leise:hover{background:#ffffff14}
.mitmachen .fein{color:#a9a294}
.mitmachen a{color:var(--blau)}

/* ——— Fuß ——— */
.fuss{padding:56px 0 40px;border-top:1px solid var(--linie);text-align:center}
.fuss .band{max-width:460px}
.fuss .unterschrift{font:400 clamp(30px,8vw,44px)/1.1 "Fraktur",serif;margin:18px 0 6px}
.fuss nav{display:flex;justify-content:center;flex-wrap:wrap;gap:18px;margin:22px 0 12px}
.fuss nav a{font:700 13px/1 "Versal",serif;letter-spacing:.14em;color:var(--ink-2);text-decoration:none}
.fuss nav a:hover{color:var(--gold-text)}
.fuss .fein{margin:0}

/* ——— Rechtstexte ——— */
.recht{padding:48px 0 80px}
.recht .wrap{max-width:860px}
.recht h1{font:400 clamp(48px,7vw,80px)/1 "Fraktur",serif;margin:8px 0 26px}
.recht h2{font:700 15px/1.2 "Versal",serif;letter-spacing:.18em;color:var(--gold-text);margin:34px 0 10px;display:flex;gap:10px;align-items:center}
.recht h2::before{content:"";width:12px;height:12px;flex:none;background:var(--gold);clip-path:polygon(50% 0,62.5% 28.3%,93.3% 25%,75% 50%,93.3% 75%,62.5% 71.7%,50% 100%,37.5% 71.7%,6.7% 75%,25% 50%,6.7% 25%,37.5% 28.3%)}
.recht .karte{padding:30px 30px 26px}
.recht p,.recht li{color:var(--ink)}
.recht ul{padding-left:22px}
.zurueck{display:inline-flex;gap:8px;align-items:center;font:700 13px/1 "Versal",serif;letter-spacing:.14em;text-decoration:none;color:var(--ink-2)}

.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

[hidden]{display:none!important}

/* Lesewappen auf schmalen Schirmen: kleiner, nicht klebend */
@media (max-width:899px){.lesung-schild{position:relative;top:auto;max-width:300px;margin:0 auto}}
/* Dunkel: Schwarz des Wappens bekommt eine silberne Kontur, damit es nicht im Grund versinkt */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wappen,:root:not([data-theme="light"]) .lesung-schild svg{filter:drop-shadow(0 0 .7px #f4f2ecd0) drop-shadow(0 0 .7px #f4f2ec90)}}
:root[data-theme="dark"] .wappen,:root[data-theme="dark"] .lesung-schild svg{filter:drop-shadow(0 0 .7px #f4f2ecd0) drop-shadow(0 0 .7px #f4f2ec90)}
.mitmachen{border-top:1px solid var(--gold);border-bottom:1px solid var(--gold)}
.mitmachen .knopf{color:var(--schwarz)}
.mitmachen .knopf.leise{color:#f1ede2}

/* Hell/Dunkel-Umschalter: halb Silber, halb Schwarz – die Helmdecke */
.thema{all:unset;cursor:pointer;width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--linie);border-radius:999px;margin-left:8px;color:var(--ink);flex:none}
.thema svg{width:20px;height:20px;transition:transform .4s}
:root[data-theme="dark"] .thema svg{transform:rotate(180deg)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .thema svg{transform:rotate(180deg)}}
.thema:focus-visible{outline:2px solid var(--gold)}

/* Ungelöst */
.raetsel{display:grid;gap:22px;margin-top:40px;align-items:start}
@media (min-width:900px){.raetsel{grid-template-columns:.9fr 1.1fr;gap:40px}}
.raetsel-bild{margin:0;background:#f4efe1;padding:12px;border:1px solid var(--linie);box-shadow:var(--schatten)}
@media (min-width:900px){.raetsel-bild{position:sticky;top:84px}}
.raetsel-bild img{display:block;width:100%;height:auto}
.raetsel-bild figcaption{font-size:.8em;color:#4a453b;margin-top:10px;font-style:italic}
.raetsel-liste{display:grid;gap:14px}
.raetsel-liste .karte p{color:var(--ink-2);margin:0}
#ungeloest .knoepfe{margin-top:32px}

@media (max-width:520px){.kopf .zurueck{display:none}.zurueck+.sprache{margin-left:auto}.kopf .wrap{gap:10px}.thema{margin-left:4px}}

/* ——— Gemalte Wappentafel (2026) ——— */
.wappen-tafel{position:relative}
.wappen-tafel img,.lesung-schild img{display:block;width:100%;height:auto}
/* Dunkel: das Wappen liegt auf einer Pergament-Tafel, damit Schwarz und die Unterschrift lesbar bleiben */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wappen-tafel,:root:not([data-theme="light"]) .lesung-schild{background:#f3eddd;padding:18px 16px 14px;border-radius:4px;box-shadow:0 0 0 1px #ecbd1d55,0 24px 60px -30px #000}}
:root[data-theme="dark"] .wappen-tafel,:root[data-theme="dark"] .lesung-schild{background:#f3eddd;padding:18px 16px 14px;border-radius:4px;box-shadow:0 0 0 1px #ecbd1d55,0 24px 60px -30px #000}
.wappen-buehne .wappen{filter:none!important}
.lesung-schild svg{position:absolute;inset:0;width:100%;height:100%;filter:none!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lesung-schild svg{inset:18px 16px 14px;width:calc(100% - 32px);height:calc(100% - 32px)}}
:root[data-theme="dark"] .lesung-schild svg{inset:18px 16px 14px;width:calc(100% - 32px);height:calc(100% - 32px)}
.lesung-schild .schleier{fill:#121110;opacity:0;transition:opacity .3s;pointer-events:none}
.lesung-schild.fokus .schleier{opacity:.62}
.lesung-schild .rahmen{fill:none;stroke:#ecbd1d;stroke-width:5;opacity:0;transition:opacity .3s;pointer-events:none}
.lesung-schild .rahmen.an{opacity:1}
.lesung-schild .zone{fill:transparent;cursor:pointer}
.original{grid-template-columns:minmax(0,420px)!important;justify-content:center}

/* ——— Lupe: Bilder per Klick vergrößern, zoomen, mit der Maus verschieben ——— */
img[data-zoom]{cursor:zoom-in}
img[data-zoom]:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.zoom-hinweis{display:block;font:700 11px/1 "Versal",serif;letter-spacing:.14em;color:var(--gold-text);margin-top:8px;font-style:normal}
.lupe{position:fixed;inset:0;z-index:100;background:#0b0a09;overflow:hidden;touch-action:none;cursor:zoom-in}
.lupe.gross{cursor:move}
.lupe img{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0;user-select:none;-webkit-user-drag:none;box-shadow:0 30px 80px -20px #000;background:#f3eddd}
.lupe .steuer{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:6px;align-items:center;background:#151515e6;border:1px solid #ecbd1d66;border-radius:999px;padding:6px;z-index:2}
.lupe .steuer button{all:unset;cursor:pointer;width:40px;height:40px;display:grid;place-items:center;border-radius:999px;color:#f1ede2;font:700 20px/1 "Garamond",serif}
.lupe .steuer button:hover,.lupe .steuer button:focus-visible{background:#ecbd1d;color:#151515}
.lupe .steuer .stufe{min-width:54px;text-align:center;color:#ecbd1d;font:700 13px/1 "Versal",serif;letter-spacing:.08em}
.lupe .zu{position:absolute;top:14px;right:14px;z-index:2;all:unset;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;border-radius:999px;background:#151515e6;border:1px solid #ecbd1d66;color:#f1ede2;font:400 26px/1 "Garamond",serif}
.lupe .zu{position:absolute;top:14px;right:14px;z-index:3}
.lupe .zu:hover,.lupe .zu:focus-visible{background:#ecbd1d;color:#151515}
.lupe .tipp{position:absolute;top:14px;left:14px;max-width:calc(100% - 90px);margin:0;padding:9px 14px;border-radius:999px;background:#151515e6;border:1px solid #ecbd1d66;color:#f1ede2;font:600 12px/1.4 "Versal",serif;letter-spacing:.1em;z-index:2;pointer-events:none}
body.lupe-offen{overflow:hidden}