/* ============================================================
   The Ash Remembers - Wiki (Prototyp, Staging) - Fassung 3 (03.10.2026): "ein modernes Wikipedia fuer heute, mit Liebe zum Spiel"
   Gleiche Farben und Schriften wie die Hauptseite, aber ohne Leinwand, ohne Filter, ohne Video. Animiert werden NUR transform und opacity
   (Hebung, Glut-Schimmer, Zoom, Karten, Ladegeruest); prefers-reduced-motion schaltet alles ab.
   Neu in Fassung 3: Infobox rechts, Inhaltsverzeichnis, Hover-Karten, Seltenheits-Leuchten, Hell/Dunkel, Schriftgroesse, Zuletzt angesehen,
   Willkommen-Seite mit Sena und Hral, Vorschau-Seiten statt leerer "folgt"-Kacheln, weicher Seitenwechsel (View Transitions).
   ============================================================ */
@font-face { font-family: "Marcellus"; src: url("/assets/fonts/marcellus-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --grund: #0c0907; --grund-2: #120d0a; --tafel: #171009; --tafel-2: #1d140b; --tafel-rand: #2f2418;
  --glut: #ff9a3c; --glut-hell: #ffc073; --glut-tief: #c2571d; --blut: #c0392e;
  --text: #ede2d3; --text-matt: #b09a84; --text-leise: #94836f;
  --r-common: #8b95a7; --r-uncommon: #46d18a; --r-rare: #3ea6ff; --r-epic: #c270f0; --r-legendary: #f0b232; --r-apex: #ff7a45; --r-mythic: #ff427b;
  --linie: rgba(255, 255, 255, .06); --zebra: rgba(23, 16, 9, .55); --kopf-bg: rgba(12, 9, 7, .97); --feld-bg: #0d0907; --schatten: rgba(0, 0, 0, .45);
  --schimmer: rgba(255, 154, 60, .16); --hover-bg: rgba(255, 154, 60, .10); --akzent-bg: rgba(255, 154, 60, .16);
  --schrift-titel: "Marcellus", Georgia, "Times New Roman", serif;
  --schrift-lauf: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --seitenleiste: 264px; --fs: 1; --def: #5fd0c8;
  --nacht-filter: hue-rotate(215deg) saturate(1.15) brightness(.8);   /* Nacht-Gegner: derselbe Blauton wie im Spiel (wird beim Bau aus der CSS des Spiels uebernommen) */
}
/* Heller Modus: dunkle Schrift auf warmem Pergament. Alle Textfarben >= 4,5 : 1 (geprueft). */
html[data-theme="light"] {
  color-scheme: light;
  --grund: #f6f0e4; --grund-2: #efe6d4; --tafel: #fffaf0; --tafel-2: #f7eedb; --tafel-rand: #d8c8aa;
  --glut: #a4470c; --glut-hell: #86380a; --glut-tief: #c2571d; --blut: #a82a20;
  --text: #2a1d12; --text-matt: #574432; --text-leise: #6a5642;
  --r-common: #566074; --r-uncommon: #17794a; --r-rare: #1a62ad; --r-epic: #8434b0; --r-legendary: #8f6203; --r-apex: #ae4515; --r-mythic: #bd1c52;
  --linie: rgba(60, 40, 20, .12); --zebra: rgba(255, 250, 240, .7); --kopf-bg: rgba(246, 240, 228, .97); --feld-bg: #fffdf8; --schatten: rgba(70, 45, 20, .22);
  --schimmer: rgba(194, 87, 29, .20); --hover-bg: rgba(194, 87, 29, .10); --akzent-bg: rgba(194, 87, 29, .16); --def: #0d6b65;
}
html[data-fs="-1"] { --fs: .92; } html[data-fs="1"] { --fs: 1.1; } html[data-fs="2"] { --fs: 1.22; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html { color-scheme: dark; scroll-padding-top: 84px; scroll-behavior: smooth; font-size: calc(clamp(16px, calc(10.6px + .46vw), 19px) * var(--fs)); }
body { background: var(--grund); color: var(--text); font: 1rem/1.7 var(--schrift-lauf); -webkit-font-smoothing: antialiased; min-height: 100vh; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--glut); text-decoration: none; }
a:hover { color: var(--glut-hell); text-decoration: underline; text-underline-offset: 3px; }
/* Tastatur-Fokus: deutlicher Ring mit weichem Schein */
:focus-visible { outline: 2px solid var(--glut); outline-offset: 2px; border-radius: 6px; box-shadow: 0 0 0 5px var(--schimmer); }
h1, h2, h3 { font-family: var(--schrift-titel); font-weight: 400; line-height: 1.2; }
h1 { font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem); overflow-wrap: anywhere; }
h2 { font-size: 1.32rem; color: var(--glut-hell); margin: 36px 0 12px; letter-spacing: .02em; }
h3 { font-size: 1.05rem; color: var(--text); margin: 18px 0 6px; }
.nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprung { position: absolute; left: -999px; top: 8px; background: var(--tafel); color: var(--text); padding: 8px 14px; border-radius: 6px; z-index: 100; }
.sprung:focus { left: 8px; }

/* ---------- Weicher Seitenwechsel (View Transitions, wo der Browser es kann; Kopf und Seitenleiste bleiben stehen) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: wk-aus .16s ease both; }
  ::view-transition-new(root) { animation: wk-ein .26s ease both; }
  .wk-kopf { view-transition-name: wk-kopf; }
  .wk-seite { view-transition-name: wk-seite; }
}
@keyframes wk-aus { to { opacity: 0; } }
@keyframes wk-ein { from { opacity: 0; transform: translateY(6px); } }

/* ---------- Kopf ---------- */
.wk-kopf { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 16px; padding: 10px clamp(14px, 2vw, 32px); background: var(--kopf-bg); border-bottom: 1px solid var(--tafel-rand); }
.wk-marke { display: inline-flex; align-items: center; gap: 10px; font-family: var(--schrift-titel); letter-spacing: .12em; color: var(--text); white-space: nowrap; font-size: 1.02rem; }
.wk-marke b { color: var(--glut); font-weight: 400; }
.wk-marke small { color: var(--text-matt); font-size: .74rem; letter-spacing: .2em; margin-left: 2px; text-transform: uppercase; border-left: 1px solid var(--tafel-rand); padding-left: 10px; }
.wk-marke:hover { text-decoration: none; color: var(--text); }
.wk-logo { flex: none; filter: drop-shadow(0 0 6px rgba(255, 154, 60, .45)); transform-origin: 50% 90%; }
.wk-marke:hover .wk-logo { animation: flackern 1.1s ease-in-out infinite alternate; }
@keyframes flackern { from { transform: scale(1) rotate(-2deg); } to { transform: scale(1.1, 1.14) rotate(2deg); } }
.wk-suche { position: relative; flex: 1; max-width: 560px; margin: 0 auto; }
.wk-suche input { width: 100%; min-height: 42px; background: var(--feld-bg); border: 1px solid var(--tafel-rand); border-radius: 999px; color: var(--text); font: 1rem var(--schrift-lauf); padding: 9px 16px 9px 42px; }
.wk-suche input::placeholder { color: var(--text-leise); }
.wk-suche input:focus { outline: none; border-color: var(--glut-tief); box-shadow: 0 0 0 3px var(--schimmer); }
.wk-suche::before { content: ""; position: absolute; left: 16px; top: 50%; width: 11px; height: 11px; margin-top: -8px; border: 2px solid var(--text-leise); border-radius: 50%; pointer-events: none; }
.wk-suche::after { content: ""; position: absolute; left: 28px; top: 50%; width: 6px; height: 2px; background: var(--text-leise); transform: rotate(45deg); margin-top: 4px; pointer-events: none; }
.wk-treffer { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--tafel); border: 1px solid var(--tafel-rand); border-radius: 14px; box-shadow: 0 18px 50px var(--schatten); list-style: none; padding: 6px; max-height: min(72vh, 560px); overflow: auto; display: none; }
.wk-treffer.offen { display: block; animation: wk-ein .16s ease both; }
.wk-treffer li a { display: flex; align-items: center; gap: 14px; padding: 8px 12px; border-radius: 10px; color: var(--text); }
.wk-treffer li a:hover, .wk-treffer li a[aria-selected="true"] { background: var(--hover-bg); text-decoration: none; }
.wk-treffer mark { background: transparent; color: var(--glut-hell); font-weight: 700; box-shadow: inset 0 -2px 0 var(--glut-tief); }
.wk-treffer img, .wk-treffer .wk-leer { width: 44px; height: 44px; object-fit: contain; flex: none; }
.wk-treffer .wk-leer { display: grid; place-items: center; color: var(--text-leise); font-size: 1.4rem; background: var(--tafel-2); border-radius: 8px; }
.wk-treffer em { font-style: normal; color: var(--text-leise); font-size: .82rem; margin-left: auto; padding-left: 10px; white-space: nowrap; }
.wk-treffer .nix { padding: 14px; color: var(--text-matt); }
.wk-werkzeug { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.wk-knopf { border: 1px solid var(--tafel-rand); background: var(--tafel); color: var(--text-matt); border-radius: 999px; padding: 7px 14px; min-height: 38px; font: 600 .82rem var(--schrift-lauf); letter-spacing: .05em; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: transform .18s, border-color .18s, color .18s; }
.wk-knopf:hover, .wk-knopf[aria-pressed="true"] { color: var(--glut-hell); border-color: var(--glut-tief); text-decoration: none; transform: translateY(-1px); }
.wk-sprachen a { color: var(--text-matt); font-size: .86rem; font-weight: 600; letter-spacing: .08em; padding: 7px 9px; border-radius: 8px; }
.wk-sprachen a[aria-current="true"] { color: var(--glut-hell); background: var(--akzent-bg); }
.wk-menuknopf { display: none; }

/* ---------- Rahmen: Seitenleiste + Inhalt ---------- */
.wk-rahmen { display: grid; grid-template-columns: var(--seitenleiste) minmax(0, 1fr); max-width: 1560px; margin: 0 auto; }
.wk-seite { position: sticky; top: 63px; align-self: start; height: calc(100vh - 63px); overflow: auto; padding: 18px 12px 30px 16px; border-right: 1px solid var(--tafel-rand); }
.wk-seite h2 { font: 600 .74rem var(--schrift-lauf); letter-spacing: .22em; text-transform: uppercase; color: var(--text-leise); margin: 20px 10px 8px; }
.wk-seite ul { list-style: none; }
.wk-seite a { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; color: var(--text-matt); font-size: .98rem; line-height: 1.3; transition: transform .2s, color .2s, background-color .2s; }
.wk-seite a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 20%, var(--schimmer) 50%, transparent 80%); transform: translateX(-110%); transition: transform .55s ease; pointer-events: none; }
.wk-seite a:hover { background: var(--hover-bg); color: var(--text); text-decoration: none; transform: translateX(3px); }
.wk-seite a:hover::after { transform: translateX(110%); }
.wk-seite a[aria-current="page"] { background: var(--akzent-bg); color: var(--glut-hell); font-weight: 600; box-shadow: inset 3px 0 0 var(--glut); }
.wk-seite img { width: 26px; height: 26px; object-fit: contain; flex: none; transition: transform .25s; }
.wk-seite a:hover img { transform: scale(1.14) rotate(-3deg); }
.wk-seite .zahl { margin-left: auto; flex: none; white-space: nowrap; font-size: .8rem; color: var(--text-leise); font-variant-numeric: tabular-nums; }
/* Titel darf umbrechen (auch lange Woerter in fr/ru/pt), der Chip rechts bleibt immer ganz; alle Eintraege mindestens gleich hoch */
.wk-seite a > span:not(.zahl) { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; hyphens: auto; }
/* Kapitel in Planung: Chip steht UNTER dem Titel (die Seitenleiste ist zu schmal fuer Titel + Chip nebeneinander; sonst zerbricht der Titel mitten im Wort) */
.wk-seite a.bald { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; align-items: center; }
.wk-seite a.bald img { grid-row: 1 / span 2; }
.wk-seite a.bald .zahl { grid-column: 2; margin-left: 0; justify-self: start; line-height: 1.45; }
.wk-seite a { min-height: 46px; }
/* "Vorschau"-Eintraege: gut lesbar (Kontrast >= 4,5 : 1), klar als noch nicht fertig erkennbar (gestrichelte Marke, gedimmtes Symbol) */
.wk-seite .bald { color: var(--text-leise); }
.wk-seite .bald img { opacity: .6; filter: grayscale(.35); }
.wk-seite .bald:hover { color: var(--text); }
.wk-seite .bald .zahl { font-style: italic; border: 1px dashed var(--tafel-rand); border-radius: 999px; padding: 0 8px; }
.wk-seite .darst { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 10px; }
.wk-seite #wk-zuletzt a { font-size: .92rem; padding: 7px 12px; }
.wk-seite #wk-zuletzt img { width: 28px; height: 28px; }
.wk-inhalt { padding: 26px clamp(16px, 3.2vw, 56px) 80px; min-width: 0; }
.wk-inhalt > article { max-width: 1240px; }
.wk-brot { font-size: .88rem; color: var(--text-leise); margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.wk-brot a { color: var(--text-matt); }
.wk-brot span[aria-hidden] { opacity: .6; }

/* ---------- Eintrag: Titel, Text links, Infobox rechts (wie Wikipedia) ---------- */
.eintrag-titel { margin-bottom: 8px; }
.eintrag-titel h1 { color: var(--rar, var(--text)); }
.eintrag-titel .untertitel { color: var(--text-matt); margin-top: 4px; font-family: var(--schrift-titel); font-size: 1.12rem; }
.eintrag-spalten { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 28vw, 380px); gap: clamp(24px, 3vw, 44px); align-items: start; margin-top: 8px; }
.eintrag-text { min-width: 0; }
.eintrag-text > :first-child { margin-top: 12px; }
.infobox { background: var(--tafel); border: 1px solid var(--tafel-rand); border-radius: 18px; padding: 18px 20px 14px; box-shadow: 0 14px 40px var(--schatten); }
.infobox .bildrahmen { margin: 0 auto 8px; }
.infobox-daten { display: grid; grid-template-columns: minmax(96px, 42%) 1fr; font-size: .96rem; }
.infobox-daten dt, .infobox-daten dd { padding: 9px 0; border-bottom: 1px solid var(--linie); }
.infobox-daten dt { color: var(--text-matt); }
.infobox-daten dd { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.infobox-daten > :nth-last-child(-n+2) { border-bottom: 0; }
.infobox .gold { color: var(--r-legendary); } .infobox .def { color: var(--def); } .infobox .dim { color: var(--text-leise); }
.infobox-fund { margin-top: 14px; border-top: 1px solid var(--tafel-rand); padding-top: 8px; }
.infobox-fund h3 { font: 600 .74rem var(--schrift-lauf); letter-spacing: .2em; text-transform: uppercase; color: var(--text-leise); margin: 6px 0; }
.infobox-fig { display: flex; align-items: center; gap: 12px; padding: 10px 0 6px; border-top: 1px solid var(--linie); margin-top: 6px; }
.infobox-fig .fig { width: 56px; height: 56px; border-radius: 12px; overflow: hidden; border: 1px solid var(--tafel-rand); background: var(--tafel-2); flex: none; }
.infobox-fig .fig img { width: 100%; height: 100%; object-fit: cover; }
.infobox-fig small { display: block; color: var(--text-leise); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.infobox-tools { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.zitat { margin-top: 20px; padding: 6px 0 6px 20px; border-left: 3px solid var(--glut-tief); color: var(--text-matt); font-family: var(--schrift-titel); font-size: 1.14rem; line-height: 1.6; }
.zitat cite { display: block; font: 600 .8rem var(--schrift-lauf); letter-spacing: .12em; text-transform: uppercase; color: var(--text-leise); margin-top: 8px; font-style: normal; }
.satz { color: var(--text-matt); margin-top: 16px; }
.satz.hinweis { font-size: .88rem; color: var(--text-leise); }
.abschnitt { scroll-margin-top: 84px; }
/* Inhaltsverzeichnis "Auf dieser Seite" */
.toc { display: inline-block; min-width: min(100%, 280px); margin-top: 20px; padding: 12px 20px 12px 18px; background: var(--tafel); border: 1px solid var(--tafel-rand); border-radius: 14px; }
.toc b { display: block; font: 600 .74rem var(--schrift-lauf); letter-spacing: .2em; text-transform: uppercase; color: var(--text-leise); margin-bottom: 4px; }
.toc ol { list-style: none; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { display: block; padding: 3px 0; color: var(--text-matt); font-size: .96rem; }
.toc a::before { content: counter(toc) ".  "; color: var(--text-leise); font-variant-numeric: tabular-nums; }
.toc a:hover, .toc a.jetzt { color: var(--glut-hell); }
.toc a.jetzt { font-weight: 600; }

/* ---------- Bildrahmen: festes Seitenverhaeltnis, Bild liegt darin ABSOLUT mit object-fit: contain (ganz sichtbar, nichts ueberlappt) ---------- */
.bildrahmen { position: relative; flex: none; overflow: hidden; border-radius: 20px; border: 1px solid var(--rahmen, var(--tafel-rand));
  background: radial-gradient(circle at 50% 36%, var(--schimmer), transparent 70%), var(--tafel-2); box-shadow: 0 14px 40px var(--schatten), var(--leuchten, 0 0 0 0 transparent); }
.bildrahmen > img { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); max-width: none; object-fit: contain; transition: transform .45s cubic-bezier(.2, .7, .2, 1); animation: bild-ein .4s ease both; }
.bildrahmen:hover > img { transform: scale(1.06); }
.bildrahmen.q { width: clamp(150px, 15vw, 200px); aspect-ratio: 1; }
.bildrahmen.relikt { width: clamp(190px, 19vw, 260px); aspect-ratio: 1; }
.bildrahmen.hoch { width: clamp(190px, 20vw, 250px); aspect-ratio: 3 / 4; }
.bildrahmen .ph { position: absolute; inset: 0; }
img.nacht { filter: var(--nacht-filter); }
.ph { display: grid; place-items: center; }
.ph img { width: 42%; height: 42%; max-width: 64px; max-height: 64px; object-fit: contain; opacity: .55; }
.ph-zeichen { color: var(--text-leise); font-size: 1.6rem; opacity: .7; }
@keyframes bild-ein { from { opacity: 0; } }
/* Ladegeruest: bis das Bild da ist, schimmert der Rahmen (nur transform) statt leerer Flaeche */
.laedt::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, transparent 25%, var(--schimmer) 50%, transparent 75%); animation: geruest 1.3s ease-in-out infinite; pointer-events: none; }
@keyframes geruest { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.chip { display: inline-flex; align-items: center; font-size: .88rem; letter-spacing: .05em; padding: 5px 14px; min-height: 30px; border: 1px solid var(--tafel-rand); border-radius: 999px; color: var(--text-matt); background: var(--tafel); }
.chip.rar { color: var(--rar); border-color: color-mix(in srgb, var(--rar) 55%, transparent); }
.chip.dt { color: var(--dt); border-color: color-mix(in srgb, var(--dt) 55%, transparent); }
.chip.vorschau-chip { color: var(--glut-hell); border-style: dashed; border-color: var(--glut-tief); }
/* Seltenheit: Rahmenfarbe und Leuchten. selten blau, episch lila, legendaer gold, mythisch/apex Glut. Legendaer+ atmet im grossen Rahmen (nur opacity). */
.rar-common { --rar: var(--r-common); } .rar-uncommon { --rar: var(--r-uncommon); }
.rar-rare { --rar: var(--r-rare); --rahmen: color-mix(in srgb, var(--r-rare) 50%, var(--tafel-rand)); --leuchten: 0 0 26px -8px color-mix(in srgb, var(--r-rare) 60%, transparent); }
.rar-epic { --rar: var(--r-epic); --rahmen: color-mix(in srgb, var(--r-epic) 55%, var(--tafel-rand)); --leuchten: 0 0 28px -8px color-mix(in srgb, var(--r-epic) 65%, transparent); }
.rar-legendary { --rar: var(--r-legendary); --rahmen: color-mix(in srgb, var(--r-legendary) 60%, var(--tafel-rand)); --leuchten: 0 0 30px -6px color-mix(in srgb, var(--r-legendary) 70%, transparent); }
.rar-apex { --rar: var(--r-apex); --rahmen: color-mix(in srgb, var(--r-apex) 60%, var(--tafel-rand)); --leuchten: 0 0 30px -6px color-mix(in srgb, var(--r-apex) 70%, transparent); }
.rar-mythic { --rar: var(--r-mythic); --rahmen: color-mix(in srgb, var(--r-mythic) 60%, var(--tafel-rand)); --leuchten: 0 0 32px -6px color-mix(in srgb, var(--r-mythic) 75%, transparent); }
.rar-legendary .bildrahmen::after, .rar-apex .bildrahmen::after, .rar-mythic .bildrahmen::after, .bildrahmen.rar-legendary::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 34px color-mix(in srgb, var(--rar) 55%, transparent); animation: atmen 3.6s ease-in-out infinite; pointer-events: none; }
@keyframes atmen { 0%, 100% { opacity: .25; } 50% { opacity: .9; } }

/* ---------- Listen (Siehe auch, Gitter, Plaketten) mit Hebung und Glut-Schimmer ---------- */
.liste { list-style: none; display: grid; gap: 4px; }
.liste li { display: flex; gap: 14px; align-items: flex-start; padding: 11px 16px; border-radius: 12px; background: var(--tafel); line-height: 1.55; }
.liste li:nth-child(odd) { background: var(--zebra); }
.liste.klein li { padding: 7px 4px; background: none; font-size: .92rem; border-radius: 8px; }
.liste img.tx { width: 24px; height: 24px; flex: none; margin-top: 1px; object-fit: contain; }
.liste .t { min-width: 0; overflow-wrap: anywhere; }
.liste .t small { color: var(--text-leise); }
.leer { color: var(--text-leise); font-style: italic; }
.set b { color: var(--r-legendary); font-weight: 600; letter-spacing: .08em; font-size: .9rem; }
table.tab { width: 100%; border-collapse: collapse; margin-top: 12px; background: var(--tafel); border: 1px solid var(--tafel-rand); border-radius: 14px; overflow: hidden; font-variant-numeric: tabular-nums; }
table.tab th, table.tab td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--linie); vertical-align: middle; }
table.tab th { font: 600 .78rem var(--schrift-lauf); letter-spacing: .14em; text-transform: uppercase; color: var(--text-leise); background: var(--linie); }
table.tab tbody tr { transition: background-color .15s; }
table.tab tbody tr:hover td { background: var(--hover-bg); }
table.tab tr:last-child td { border-bottom: 0; }
table.tab .ik { display: inline-flex; align-items: center; gap: 12px; }
table.tab .ik img, table.tab .ik .ph { width: 40px; height: 40px; object-fit: contain; flex: none; }
.tabbox { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.siehe { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; }

.wk-filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0 16px; }
.wk-filter input[type=search] { background: var(--feld-bg); border: 1px solid var(--tafel-rand); color: var(--text); border-radius: 10px; padding: 10px 14px; min-height: 42px; font: 1rem var(--schrift-lauf); min-width: 240px; }
.wk-filter .chipknopf { cursor: pointer; font: inherit; font-size: .86rem; min-height: 36px; transition: transform .15s, border-color .15s; }
.wk-filter .chipknopf:hover { transform: translateY(-1px); border-color: var(--glut-tief); }
.wk-filter .chipknopf[aria-pressed="true"] { color: var(--glut-hell); border-color: var(--glut-tief); background: var(--akzent-bg); }
.wk-zaehler { color: var(--text-leise); font-size: .9rem; margin-left: auto; }
.wk-gitter { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 10px; }
.wk-gitter li { content-visibility: auto; contain-intrinsic-size: auto 78px; }
.wk-gitter li[hidden] { display: none; }
.wk-gitter a, .siehe a { position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; padding: 10px 14px 10px 10px; background: var(--tafel); border: 1px solid var(--rahmen, var(--tafel-rand)); border-radius: 14px; color: var(--text); height: 100%; box-shadow: var(--leuchten, none); transition: transform .22s cubic-bezier(.2, .7, .2, 1), background-color .2s; }
.wk-gitter a::after, .siehe a::after, .sockel a::after, .kacheln a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 25%, var(--schimmer) 50%, transparent 75%); transform: translateX(-115%); transition: transform .6s ease; pointer-events: none; }
.wk-gitter a:hover, .siehe a:hover { transform: translateY(-3px); background: var(--tafel-2); border-color: var(--glut-tief); text-decoration: none; }
.wk-gitter a:hover::after, .siehe a:hover::after, .sockel a:hover::after, .kacheln a:hover::after { transform: translateX(115%); }
/* Plakette: eigenes Feld mit Rand, klar vom Text getrennt; Bild immer ganz sichtbar, zoomt beim Drueberfahren leicht */
.wk-gitter .ik, .siehe .ik { position: relative; width: 60px; height: 60px; flex: none; border-radius: 12px; border: 1px solid var(--tafel-rand); background: radial-gradient(circle at 50% 40%, var(--schimmer), transparent 72%), var(--tafel-2); overflow: hidden; }
.wk-gitter .ik img, .siehe .ik img { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); object-fit: contain; transition: transform .35s cubic-bezier(.2, .7, .2, 1); animation: bild-ein .35s ease both; }
.wk-gitter a:hover .ik img, .siehe a:hover .ik img { transform: scale(1.12); }
.wk-gitter .ik .ph, .siehe .ik .ph { position: absolute; inset: 0; }
.wk-gitter .ik.hoch, .siehe .ik.hoch { width: 72px; height: 92px; }
.wk-gitter.foes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.wk-gitter.foes li { contain-intrinsic-size: auto 112px; }
.wk-gitter .nm, .siehe .nm { font-size: 1.02rem; line-height: 1.3; color: var(--rar, var(--text)); min-width: 0; overflow-wrap: anywhere; }
.wk-gitter .nm small, .siehe .nm small { display: block; color: var(--text-leise); font-size: .84rem; margin-top: 3px; }
.siehe .ik { width: 52px; height: 52px; }
.siehe .ik.hoch { width: 58px; height: 74px; }

/* ---------- Hub: Willkommen im Archiv ---------- */
.hub-kopf { text-align: center; padding: 28px 0 10px; }
.hub-kopf h1 { margin-bottom: 10px; }
.hub-kopf p { color: var(--text-matt); max-width: 680px; margin: 0 auto; }
.willkommen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(18px, 3vw, 40px); align-items: center; margin: 30px 0 8px; padding: clamp(16px, 2.4vw, 28px); background: radial-gradient(ellipse at 20% 0%, var(--schimmer), transparent 60%), var(--tafel); border: 1px solid var(--tafel-rand); border-radius: 22px; box-shadow: 0 18px 50px var(--schatten); }
.willkommen h2 { margin-top: 0; }
.willkommen-text p { color: var(--text-matt); }
.figuren { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.figur { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.figur-bild { position: relative; display: block; width: min(100%, 150px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 2px solid var(--glut-tief); background: var(--tafel-2); box-shadow: 0 0 30px -6px var(--schimmer), 0 10px 30px var(--schatten); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.figur:hover .figur-bild { transform: scale(1.05) rotate(-1.5deg); }
.figur-bild img { width: 100%; height: 100%; object-fit: cover; }
.figur b { font: 400 1.05rem var(--schrift-titel); color: var(--glut-hell); }
.figur blockquote { position: relative; margin-top: 6px; padding: 10px 14px; background: var(--tafel-2); border: 1px solid var(--tafel-rand); border-radius: 14px; color: var(--text-matt); font-family: var(--schrift-titel); font-size: .98rem; line-height: 1.5; }
.figur blockquote::before { content: ""; position: absolute; top: -7px; left: 50%; width: 12px; height: 12px; margin-left: -6px; background: var(--tafel-2); border-left: 1px solid var(--tafel-rand); border-top: 1px solid var(--tafel-rand); transform: rotate(45deg); }
.zitat-tag { margin: 22px 0 0; padding: 18px 24px; text-align: center; border-top: 1px solid var(--tafel-rand); border-bottom: 1px solid var(--tafel-rand); }
.zitat-tag small { display: block; font: 600 .74rem var(--schrift-lauf); letter-spacing: .24em; text-transform: uppercase; color: var(--text-leise); }
.zitat-tag blockquote { font: 1.25rem/1.55 var(--schrift-titel); color: var(--glut-hell); margin: 8px auto; max-width: 780px; }
.zitat-tag a { font-size: .9rem; color: var(--text-matt); letter-spacing: .08em; }
.zuletzt-hub { margin-top: 26px; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 14px; margin-top: 30px; list-style: none; }
.kacheln a { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 20px; background: var(--tafel); border: 1px solid var(--tafel-rand); border-radius: 16px; color: var(--text); height: 100%; transition: transform .22s cubic-bezier(.2, .7, .2, 1), border-color .2s; }
.kacheln a:hover { border-color: var(--glut-tief); text-decoration: none; transform: translateY(-3px); }
.kacheln img { width: 44px; height: 44px; object-fit: contain; transition: transform .3s; }
.kacheln a:hover img { transform: scale(1.14) rotate(-4deg); }
.kacheln b { font: 400 1.14rem var(--schrift-titel); color: var(--glut-hell); }
.kacheln span { color: var(--text-matt); font-size: .94rem; }
.kacheln .anz { margin-top: auto; font-size: .84rem; color: var(--text-leise); letter-spacing: .04em; }
.kacheln .bald { border-style: dashed; }
.kacheln .bald img { opacity: .7; filter: grayscale(.25); }
.kacheln .bald b { color: var(--text); }
.kacheln .bald .anz { color: var(--glut-hell); }
.wk-meta { margin-top: 36px; color: var(--text-leise); font-size: .88rem; text-align: center; }

/* ---------- Vorschau-Seiten (Kapitel in Planung) ---------- */
.vorschau-kopf { display: flex; gap: 22px; align-items: center; margin: 18px 0 4px; padding: 20px 24px; background: var(--tafel); border: 1px dashed var(--glut-tief); border-radius: 18px; }
.vorschau-bild { flex: none; width: 76px; height: 76px; display: grid; place-items: center; border-radius: 18px; background: radial-gradient(circle, var(--schimmer), transparent 70%); }
.vorschau-bild img { width: 64px; height: 64px; object-fit: contain; animation: atmen 3.6s ease-in-out infinite; }
.zahlenband { display: flex; flex-wrap: wrap; gap: 12px; }
.zahlenband div { min-width: 130px; padding: 14px 18px; background: var(--tafel); border: 1px solid var(--tafel-rand); border-radius: 14px; text-align: center; }
.zahlenband b { display: block; font: 400 1.9rem var(--schrift-titel); color: var(--glut-hell); font-variant-numeric: tabular-nums; }
.zahlenband span { color: var(--text-matt); font-size: .86rem; letter-spacing: .06em; text-transform: uppercase; }
.namen { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.namen li { padding: 5px 14px; border: 1px solid var(--tafel-rand); border-radius: 999px; background: var(--tafel); color: var(--text-matt); font-size: .92rem; }

/* ---------- Reliquienhalle ---------- */
.halle h2 { margin-top: 30px; }
.sockel { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 14px; list-style: none; }
.sockel a { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 12px 16px; text-align: center; background: radial-gradient(circle at 50% 30%, var(--schimmer), transparent 66%), var(--tafel); border: 1px solid var(--rahmen, var(--tafel-rand)); border-radius: 16px; color: var(--text); height: 100%; box-shadow: var(--leuchten, none); transition: transform .24s cubic-bezier(.2, .7, .2, 1); }
.sockel a:hover { border-color: var(--glut-tief); text-decoration: none; transform: translateY(-4px); }
.sockel img { width: 112px; height: 112px; object-fit: contain; transition: transform .4s cubic-bezier(.2, .7, .2, 1); animation: bild-ein .4s ease both; }
.sockel a:hover img { transform: scale(1.1) rotate(-2deg); }
.sockel .ph { width: 112px; height: 112px; }
.sockel .verhuellt { width: 112px; height: 112px; display: grid; place-items: center; font: 2.8rem var(--schrift-titel); color: var(--text-leise); border: 1px dashed var(--tafel-rand); border-radius: 50%; }
.sockel b { font: 400 1.08rem var(--schrift-titel); }
.sockel small { color: var(--text-leise); font-size: .84rem; }

/* ---------- Spoiler: Endspiel-Inhalte bleiben verschwommen, bis man klickt oder den Schalter setzt ---------- */
.spoiler { position: relative; cursor: pointer; }
html:not(.spoiler-an) .spoiler > * { filter: blur(9px); opacity: .6; transition: opacity .2s; pointer-events: none; user-select: none; }
html:not(.spoiler-an) .spoiler::after { content: attr(data-hinweis); position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 10px; font-size: .88rem; letter-spacing: .05em; color: var(--glut-hell); text-shadow: 0 1px 8px var(--grund); }
html:not(.spoiler-an) .spoiler.auf > * { filter: none; opacity: 1; pointer-events: auto; user-select: auto; }
html:not(.spoiler-an) .spoiler.auf::after { display: none; }
html:not(.spoiler-an) .spoiler-i:not(.auf) { filter: blur(6px); cursor: pointer; user-select: none; display: inline-block; }
html:not(.spoiler-an) .wk-gitter .sp img, html:not(.spoiler-an) .siehe .sp img { filter: blur(6px); }

/* ---------- Hover-Karte (Vorschau beim Drueberfahren; Handy: lange druecken) ---------- */
.wk-karte { position: fixed; left: 0; top: 0; z-index: 70; width: min(340px, calc(100vw - 16px)); min-height: 168px; padding: 14px 16px 12px; background: var(--tafel); border: 1px solid var(--rahmen, var(--tafel-rand)); border-radius: 16px;
  box-shadow: 0 22px 60px var(--schatten), var(--leuchten, 0 0 0 0 transparent); pointer-events: none; opacity: 0; transform: translateY(8px) scale(.98); transition: opacity .16s ease, transform .2s cubic-bezier(.2, .7, .2, 1); will-change: opacity, transform; }
.wk-karte.offen { opacity: 1; transform: none; }
.wk-karte .k-kopf { display: flex; gap: 14px; align-items: center; }
.wk-karte .k-bild { position: relative; flex: none; width: 72px; height: 72px; border-radius: 12px; border: 1px solid var(--tafel-rand); background: radial-gradient(circle at 50% 40%, var(--schimmer), transparent 72%), var(--tafel-2); overflow: hidden; }
.wk-karte .k-bild.hoch { width: 64px; height: 84px; }
.wk-karte .k-bild img { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); object-fit: contain; }
.wk-karte .k-bild .ph-zeichen { position: absolute; inset: 0; display: grid; place-items: center; }
html:not(.spoiler-an) .wk-karte .sp img { filter: blur(6px); }
.wk-karte h4 { font: 400 1.12rem var(--schrift-titel); color: var(--rar, var(--text)); line-height: 1.25; overflow-wrap: anywhere; }
.wk-karte .k-sub { color: var(--text-leise); font-size: .84rem; margin-top: 2px; }
.wk-karte ul { list-style: none; margin: 10px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 14px; font-size: .88rem; color: var(--text-matt); font-variant-numeric: tabular-nums; }
.wk-karte ul li:only-child, .wk-karte ul li.breit { grid-column: 1 / -1; }
.wk-karte .k-fund { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--linie); font-size: .84rem; color: var(--text-matt); line-height: 1.4; }
.wk-karte .k-fund b { color: var(--text-leise); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .7rem; margin-right: 4px; }
.wk-karte.laedt-daten .k-kopf, .wk-karte.laedt-daten ul, .wk-karte.laedt-daten .k-fund { visibility: hidden; }
.wk-karte.laedt-daten::before { content: ""; position: absolute; inset: 14px 16px; border-radius: 10px; background: linear-gradient(100deg, var(--linie) 25%, var(--schimmer) 50%, var(--linie) 75%); animation: geruest 1.2s ease-in-out infinite; }

/* ---------- Kleines Hinweisfeld ("Link kopiert") ---------- */
.wk-hinweis { position: fixed; left: 50%; bottom: 28px; z-index: 80; transform: translate(-50%, 16px); opacity: 0; padding: 10px 18px; background: var(--tafel); color: var(--glut-hell); border: 1px solid var(--glut-tief); border-radius: 999px; box-shadow: 0 12px 34px var(--schatten); font-size: .92rem; pointer-events: none; transition: opacity .2s, transform .25s; }
.wk-hinweis.offen { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Fuss ---------- */
.wk-fuss { border-top: 1px solid var(--tafel-rand); padding: 22px; text-align: center; color: var(--text-leise); font-size: .86rem; }
.wk-fuss a { color: var(--text-matt); }

/* ---------- Breiter Monitor (>= 1900 px): Raum nutzen, Zeilenlaenge begrenzt halten ---------- */
@media (min-width: 1900px) {
  :root { --seitenleiste: 300px; }
  .wk-rahmen { max-width: 1900px; }
  .wk-inhalt > article { max-width: 1420px; }
  .wk-gitter { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
}

/* ---------- Mittel und schmal ---------- */
@media (max-width: 1080px) {
  .eintrag-spalten { grid-template-columns: 1fr; }
  .infobox { order: -1; display: grid; grid-template-columns: auto 1fr; column-gap: 24px; align-items: start; }
  .infobox .bildrahmen { grid-row: span 3; margin: 0; }
  .infobox-daten, .infobox-fund, .infobox-tools, .infobox-fig { grid-column: 2; }
  .willkommen { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .wk-rahmen { grid-template-columns: 1fr; }
  .wk-seite { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--tafel-rand); padding: 8px 14px; display: none; }
  .wk-seite.offen { display: block; }
  .wk-menuknopf { display: inline-flex; }
  .wk-kopf { flex-wrap: wrap; gap: 8px 12px; padding: 8px 14px; }
  .wk-suche { order: 3; flex-basis: 100%; max-width: none; }
  .wk-marke small { display: none; }
  .wk-werkzeug { margin-left: auto; }
}
@media (max-width: 640px) {
  /* Handy: Bild oben, Daten darunter, dann Text - nichts nebeneinander gequetscht */
  .infobox { display: block; padding: 16px; }
  .infobox .bildrahmen { margin: 0 auto 10px; }
  .infobox .bildrahmen.q { width: min(46vw, 180px); } .infobox .bildrahmen.relikt { width: min(58vw, 230px); } .infobox .bildrahmen.hoch { width: min(62vw, 240px); }
  .infobox-daten { grid-template-columns: minmax(90px, 40%) 1fr; }
  .eintrag-titel { text-align: center; } .eintrag-titel .chips { justify-content: center; }
  table.tab th, table.tab td { padding: 11px 12px; }
  .wk-filter input[type=search] { min-width: 0; flex: 1 1 100%; }
  .wk-zaehler { margin-left: 0; flex-basis: 100%; }
  .wk-gitter, .wk-gitter.foes, .siehe { grid-template-columns: 1fr; }
  .sockel { grid-template-columns: repeat(2, 1fr); }
  .figuren { grid-template-columns: 1fr; }
  .vorschau-kopf { flex-direction: column; text-align: center; }
  .wk-werkzeug .wk-hauptseite { display: none; }
  .wk-werkzeug .wk-knopf { padding: 6px 10px; }
  .wk-marke .wk-wort { font-size: .9rem; }
  .toc { display: block; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } .wk-karte { transform: none; } }
@media print { .wk-kopf, .wk-seite, .wk-fuss, .wk-filter, .wk-karte, .infobox-tools { display: none; } body { background: #fff; color: #000; } .eintrag-spalten { display: block; } }