/* ─── Codex Article / Codex Prose ─────────────────────────────────────
   Globales, seitenübergreifendes Editorial-Modul für lange Lore-Texte.
   Nicht auf "Wissen" beschränkt - gedacht zur Wiederverwendung auf
   Sanktuario, Regionen, Persönlichkeiten, Himmel/Hölle, Klassen etc.

   Bewusste Designrichtung: liest sich wie eine aufgeschlagene Buchseite,
   nicht wie eine Website-Artikelvorlage. Eine Spalte, zentriert, viel
   Weißraum, Initiale, Kapitel als Buchüberschriften statt UI-Karten.
   Keine Foliant-Grafiken/Zierrahmen (bleiben codex-module.css
   vorbehalten) - Ruhe entsteht hier rein aus Typografie und Linien.
   Nutzt das site-weite --gold/--bone/--muted/--line/--ink-Farbschema. */

/* Übergang von der Titelseite in den Lesetext: derselbe große, auf der
   Texturkante sitzende Zier-Divider wie an den Chronik-Übergängen
   (identische Mechanik wie .section-divider in css/voelker.css/
   styles.css - hier als eigener Klassenname, da wissen.css bereits
   eine kleinere .section-divider-Variante für einfache Hub-Seiten
   definiert). Danach wechselt der Hintergrund von der Stein- auf die
   Ledertextur, identisches Prinzip wie .sanctuary-bg-leather. */
.codex-divider { display:block; position:relative; z-index:4; width:min(1680px,calc(100vw - 40px)); max-width:none; height:0; margin:0 auto; pointer-events:none; overflow:visible; }
.codex-divider img {
  content:url('../img/gemeinsam/section-divider-ornament-small.webp');
  position:absolute; top:0; left:50%;
  width:min(1680px,calc(100vw - 40px)); height:auto; display:block; z-index:1;
  transform:translate(-50%,-47.8%);
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.7)) drop-shadow(0 0 6px rgba(196,154,80,.4));
  opacity:.96;
}
.codex-divider::after {
  content:""; position:absolute; z-index:2; top:0; left:50%; width:64px; height:64px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(228,196,140,.75) 0%,rgba(196,154,80,.4) 40%,transparent 72%);
  mix-blend-mode:screen; pointer-events:none;
  animation:codex-divider-glow-pulse 8s ease-in-out infinite;
}
@keyframes codex-divider-glow-pulse { 0%,100% { opacity:.42; } 50% { opacity:1; } }
@media (prefers-reduced-motion:reduce) { .codex-divider::after { animation:none; } }
.codex-divider::before {
  content:""; position:absolute; top:0; left:50%; width:100vw; height:14px;
  transform:translate(-50%,-50%);
  background:url('../img/gemeinsam/section-divider-line.webp') center/107.6% 70px no-repeat;
  filter:drop-shadow(0 0 4px rgba(196,154,80,.35));
}
@media (max-width:680px) { .codex-divider { width:calc(100vw - 28px); } }
.codex-bg-leather { padding-top:128px; background:linear-gradient(rgba(9,8,7,.55),rgba(9,8,7,.55)), url('../img/texturen/section-leather-seamless.webp') top center/1400px repeat; }
@media (max-width:680px) { .codex-bg-leather { padding-top:96px; } }

/* ─── Laufkopf: Brotkrümel als stille Kopfzeile, keine App-Bar ────── */
.codex-runhead { max-width:1200px; margin:0 auto; padding:36px 24px 0; text-align:center; color:#8e7c69; font:700 11px/1 system-ui,sans-serif; letter-spacing:.16em; text-transform:uppercase; }
.codex-runhead a { color:#8e7c69; text-decoration:none; transition:color .2s ease; }
.codex-runhead a:hover,.codex-runhead a:focus-visible { color:var(--gold); }
.codex-runhead span[aria-current] { color:var(--muted); }
.codex-runhead .codex-runhead__sep { margin:0 10px; color:#4a3c2e; }

/* ─── Titelseite ("Frontispiz") ─────────────────────────────────────
   .codex-article teilt seine Breite mit .nav (1200px = --width-shell),
   Titelseite und Inhaltsverzeichnis bleiben aber - anders als der
   Fließtext darunter - als eigene, in sich zentrierte Insel in der
   Bildschirmmitte (nicht links an der Logo-Kante ausgerichtet). */
.codex-article { max-width:1200px; margin:0 auto; padding:28px 24px 100px; }
.codex-article:has(+ .codex-divider) { padding-bottom:192px; }
@media (max-width:680px) { .codex-article:has(+ .codex-divider) { padding-bottom:112px; } }
.codex-titlepage { max-width:640px; margin:0 auto; text-align:center; padding-bottom:40px; }
.codex-article-visual { max-width:300px; margin:0 auto 32px; }
.codex-article-visual img { display:block; width:100%; height:auto; border:1px solid var(--line); filter:saturate(.8) contrast(1.05) brightness(.85); }
.codex-eyebrow-line { display:block; color:var(--gold); font:700 .72rem/1 system-ui,sans-serif; letter-spacing:.18em; text-transform:uppercase; }
.codex-article-body h1 { margin:14px 0 0; font-size:clamp(1.65rem,7vw,3.4rem); hyphens:auto; overflow-wrap:break-word; }
.codex-titlepage h1::after { content:"◆"; display:block; width:max-content; margin:18px auto 0; color:#7f2b20; font:400 .68rem/1 'Spectral',Georgia,serif; text-shadow:15px 0 #4d2d24,-15px 0 #4d2d24; }
.codex-lead { max-width:520px; margin:22px auto 0; color:#cbbdad; font-size:var(--type-note,20px); line-height:var(--type-leading,1.7); font-style:italic; font-family:'Spectral',Georgia,serif; }

/* Colophon-Zeile statt Meta-Kartenraster: eine ruhige, zentrierte
   Zeile wie im Impressum eines gedruckten Buchs. */
.codex-meta { display:flex; flex-wrap:wrap; justify-content:center; gap:0; margin:28px 0 0; padding:0; list-style:none; color:#8f7f6c; font:600 .78rem/1.6 system-ui,sans-serif; letter-spacing:.03em; }
.codex-meta div { display:contents; }
.codex-meta dt { color:#6e5f4f; }
.codex-meta dt::after { content:": "; }
.codex-meta dd { margin:0 14px 0 4px; color:#b8a98f; }
.codex-meta div:last-child dd { margin-right:0; }

/* ─── Inhalt als Buchregister, keine sticky Sidebar-Karte ─────────── */
.codex-toc-details { max-width:640px; margin:0 auto 48px; }
.codex-toc-details summary { display:block; margin:0 auto 18px; width:max-content; cursor:pointer; list-style:none; color:var(--gold); font:700 .72rem/1 system-ui,sans-serif; letter-spacing:.18em; text-transform:uppercase; }
.codex-toc-details summary::-webkit-details-marker { display:none; }
.codex-toc-details summary::before { content:"— "; color:#6b5233; }
.codex-toc-details summary::after { content:" —"; color:#6b5233; }
.codex-toc { text-align:center; padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.codex-toc-label { display:none; }
.codex-toc ol { margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:9px 26px; counter-reset:toc; }
.codex-toc li { counter-increment:toc; }
.codex-toc li::before { content:counter(toc,upper-roman) ". "; color:#6e5f4f; }
.codex-toc a { color:var(--muted); text-decoration:none; font:400 1rem/1 'Marcellus',Georgia,serif; letter-spacing:.01em; text-transform:uppercase; transition:color .2s ease; }
.codex-toc a:hover,.codex-toc a:focus-visible { color:var(--gold); }

/* ─── Fließtext + Randspalte (Marginalie) ──────────────────────────
   .codex-layout trägt zwei Spuren: Fließtext (fix, lesbare Breite) und
   eine schmale Randspalte für "Verwandte Einträge" - läuft die ganze
   Kapitellänge mit, wie eine Marginalie im alten Manuskript, statt nur
   einmal am Artikelende aufzutauchen. Kollabiert unter 980px zu einer
   normalen End-of-Article-Liste. */
.codex-layout { max-width:1200px; margin:0 auto; padding:0 24px; display:grid; grid-template-columns:minmax(0,1fr) 300px; justify-content:start; gap:64px; align-items:start; }

/* ─── Typografischer Rhythmus ───────────────────────────────────────
   Eine Basiseinheit (--rhythm, an Schriftgröße/Zeilenhöhe gekoppelt)
   statt beliebiger Pixelwerte - Standard-Vertikalrhythmus: Absätze
   erhalten 1x, Kapitelüberschriften ein Vielfaches davon, Zwischen-
   überschriften etwas weniger. Schriftgröße/Zeilenhöhe selbst leicht
   großzügiger als der Standard-Fließtext der Seite (bessere Leselänge
   bei den bewusst längeren Wissen-/Archiv-Artikeln). */
.codex-prose { max-width:720px; margin:0; font-size:calc(1.08rem + 1px); line-height:1.8; --rhythm:1.85rem; }
.codex-prose > * + * { margin-top:var(--rhythm); }
.codex-prose h2 { margin-top:calc(var(--rhythm) * 3.4); text-align:center; font-size:clamp(1.5rem,3vw,1.9rem); }
.codex-prose h2 + * { margin-top:calc(var(--rhythm) * .85); }
.codex-chapter-num { display:block; margin-bottom:10px; color:#8c7c69; font:700 .72rem/1 system-ui,sans-serif; letter-spacing:.2em; }
.codex-prose h2::after { content:""; display:block; width:64px; height:1px; margin:18px auto 0; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.codex-prose h3 { margin-top:calc(var(--rhythm) * 1.7); text-align:center; font-size:1.2rem; }
.codex-prose h3 + * { margin-top:calc(var(--rhythm) * .7); }
.codex-prose p { color:#cabfae; line-height:inherit; text-align:justify; hyphens:auto; }
.codex-prose ul,.codex-prose ol { margin:0; padding-left:1.3em; color:#cabfae; line-height:inherit; }
.codex-prose li + li { margin-top:.5em; }

/* Initiale zu Beginn JEDES Kapitels (nicht nur des Artikelanfangs) -
   Manuskript-Charakter, identisches Prinzip wie .lore-lead auf
   sanctuary.html. Greift am ersten Absatz nach jeder Kapitelüberschrift. */
.codex-prose h2 + p::first-letter {
  float:left; margin:.02em .1em 0 0; color:var(--gold);
  font-family:'Marcellus',Georgia,serif; font-size:calc(3.4em + 1px); line-height:.78;
}

.codex-link { color:var(--gold); text-decoration:underline; text-decoration-color:rgba(196,154,80,.4); text-underline-offset:3px; transition:text-decoration-color .2s ease; }
.codex-link:hover,.codex-link:focus-visible { text-decoration-color:var(--gold); }

.codex-figure { margin:0; text-align:center; }
.codex-figure img { display:block; max-width:420px; width:100%; height:auto; margin:0 auto; border:1px solid var(--line); filter:saturate(.8) contrast(1.05) brightness(.85); }
.codex-figure figcaption { margin-top:10px; color:#8f7f6c; font:400 italic .96rem/1.4 'Jim Nightshade','Spectral',Georgia,serif; }

/* Zitat als ruhige visuelle Pause zwischen Kapiteln - zentriert, kein
   Kasten, kein Panel, nur eine kleine Linie darüber. */
.codex-quote { margin:48px 0; padding:0; border:0; text-align:center; }
.codex-quote::before { content:""; display:block; width:40px; height:1px; margin:0 auto 22px; background:var(--line); }
.codex-quote p { margin:0; color:#d9cbb8; font:400 italic 1.35rem/1.55 'Spectral',Georgia,serif; }
.codex-quote cite { display:block; margin-top:14px; color:#6e5f4f; font:700 11px/1 system-ui,sans-serif; letter-spacing:.14em; text-transform:uppercase; font-style:normal; }

.codex-note { margin:32px 0; padding:2px 0 2px 26px; border-left:2px solid var(--blood,#a5261c); }
.codex-note p,.codex-note { color:#c7b8a7; text-align:left; }
.codex-note strong { display:block; margin-bottom:4px; color:#a06356; font:700 11px/1 system-ui,sans-serif; letter-spacing:.11em; text-transform:uppercase; }

/* Quellenapparat: kompakte zweispaltige Liste (Quelle + Kategorie),
   keine Card, kein Panel - kleiner und ruhiger als der Artikel selbst. */
.codex-sources { max-width:640px; margin:56px auto 0; padding-top:20px; border-top:1px solid var(--line); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px 24px; }
.codex-sources-label { grid-column:1/-1; display:block; margin-bottom:5px; color:var(--gold); font:700 .68rem/1 system-ui,sans-serif; letter-spacing:.15em; text-transform:uppercase; text-align:center; }
.codex-sources dt { color:#c2b6a6; font:400 .92rem/1.4 'Spectral',Georgia,serif; }
.codex-sources dt::before { content:"— "; color:#4a3c2e; }
.codex-sources dd { margin:0; color:#6e5f4f; font:400 italic .82rem/1.4 'Spectral',Georgia,serif; text-align:right; white-space:nowrap; }
.codex-sources div { display:contents; }

@media (max-width:520px) {
  .codex-sources { grid-template-columns:minmax(0,1fr); }
  .codex-sources dt { overflow-wrap:anywhere; }
  .codex-sources dd { text-align:left; white-space:normal; }
  .codex-sources dd::before { content:"· "; }
}

.codex-placeholder { margin:32px 0; padding:16px 20px; border:1px dashed var(--line); color:#8a7c6a; font:600 .84rem/1.5 system-ui,sans-serif; letter-spacing:.02em; text-align:left; }
.codex-placeholder::before { content:"Platzhalter — "; color:var(--gold); font-weight:700; }

/* Lore-Status: stille Randnotiz statt Badge-Chip. */
.lore-status { display:block; margin:0 0 28px; text-align:center; color:#8e7c69; font:italic 500 .86rem/1.4 'Spectral',Georgia,serif; }
.lore-status::before { content:"« "; }
.lore-status::after { content:" »"; }
.lore-status--confirmed { color:#c2a877; }
.lore-status--unclear { color:#7d7060; }

/* ─── Related Entries / Querverweise ──────────────────────────────── */
.codex-crossrefs { max-width:640px; margin:64px auto 0; padding-top:28px; border-top:1px solid var(--line); text-align:center; }
.codex-crossrefs-label { display:block; margin-bottom:16px; color:var(--gold); font:700 .72rem/1 system-ui,sans-serif; letter-spacing:.15em; text-transform:uppercase; }
.codex-crossrefs-list { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 24px; padding:0; margin:0; list-style:none; }
.codex-crossrefs-list a { color:var(--bone); text-decoration:none; font:400 1.02rem/1 'Marcellus',Georgia,serif; letter-spacing:.01em; text-transform:uppercase; border-bottom:1px solid transparent; padding-bottom:3px; transition:color .2s ease,border-color .2s ease; }
.codex-crossrefs-list a:hover,.codex-crossrefs-list a:focus-visible { color:var(--gold); border-color:var(--gold); }

/* Randspalten-Variante: vertikal, klebt neben dem Fließtext statt einmalig
   am Ende zu erscheinen. Chevron (›) statt Card-Look - reine Textliste
   mit dünner Trennlinie darüber, keine geschlossene Box. */
.codex-margin { position:sticky; top:120px; display:grid; gap:44px; }
.codex-crossrefs--margin { max-width:none; margin:0; padding:0; border:0; text-align:left; }
.codex-crossrefs--margin .codex-crossrefs-label { text-align:left; }
.codex-crossrefs--margin .codex-crossrefs-list { flex-direction:column; align-items:flex-start; gap:13px; }
.codex-crossrefs--margin .codex-crossrefs-list a { display:flex; align-items:center; gap:6px; font:400 .95rem/1.3 'Marcellus',Georgia,serif; text-transform:none; letter-spacing:.01em; border-bottom:0; padding-bottom:0; }
.codex-crossrefs--margin .codex-crossrefs-list a::after { content:"›"; color:#6e5f4f; transition:color .2s ease,transform .2s ease; }
.codex-crossrefs--margin .codex-crossrefs-list a:hover,.codex-crossrefs--margin .codex-crossrefs-list a:focus-visible { text-decoration:none; }
.codex-crossrefs--margin .codex-crossrefs-list a:hover::after,.codex-crossrefs--margin .codex-crossrefs-list a:focus-visible::after { color:var(--gold); transform:translateX(3px); }

/* "Am Rand": kurze erklärende Randnotiz, kein Card-Panel - nur eine
   dünne obere Linie, kleine Überschrift, ruhiger Fließtext. */
.codex-margin-note { padding-top:20px; border-top:1px solid var(--line); }
.codex-margin-note-label { display:block; margin-bottom:14px; color:var(--gold); font:700 .68rem/1 system-ui,sans-serif; letter-spacing:.15em; text-transform:uppercase; }
.codex-margin-note h3 { margin:0 0 10px; font-size:1.05rem; letter-spacing:.01em; }
.codex-margin-note p { margin:0; color:#a99b89; font-size:.86rem; line-height:1.6; }

@media (max-width:980px) {
  .codex-layout { grid-template-columns:minmax(0,640px); }
  .codex-margin { position:static; margin-top:56px; gap:40px; }
  .codex-margin-note { max-width:640px; margin:0 auto; }
  .codex-crossrefs--margin { max-width:640px; margin:0 auto; padding-top:28px; border-top:1px solid var(--line); text-align:center; }
  .codex-crossrefs--margin .codex-crossrefs-label { text-align:center; }
  .codex-crossrefs--margin .codex-crossrefs-list { flex-direction:row; flex-wrap:wrap; justify-content:center; }
  .codex-crossrefs--margin .codex-crossrefs-list a { justify-content:center; }
}

@media (max-width:680px) {
  .codex-runhead { padding-top:36px; }
  .codex-article { padding:20px 20px 72px; }
  .codex-layout { padding:0 20px; }
  .codex-prose p { text-align:left; hyphens:none; }
}

/* ─── Kosmologie-/Beziehungs-Diagramm (unverändert gegenüber v1) ──── */
.codex-diagram { max-width:820px; margin:0 auto; padding:32px 24px; border:1px solid var(--line); background:radial-gradient(circle at 50% 15%,rgba(130,35,25,.12),transparent 45%),#0e0c0a; }
.codex-diagram-tier { display:grid; grid-template-columns:1fr; justify-items:center; gap:16px; }
.codex-diagram-tier--split { grid-template-columns:1fr 1fr; gap:24px; }
.codex-diagram-tier + .codex-diagram-tier { position:relative; margin-top:38px; }
.codex-diagram-tier + .codex-diagram-tier::before { content:"↓"; position:absolute; left:50%; top:-32px; transform:translateX(-50%); color:#8e4937; font:700 calc(1.2rem + 1px)/1 system-ui,sans-serif; }
.codex-diagram-node { position:relative; width:100%; max-width:340px; min-height:88px; padding:16px 20px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--bone); text-decoration:none; border:1px solid #4d392f; background:#15110f; }
.codex-diagram-node::before {
  content:""; position:absolute; inset:-11px -8px; pointer-events:none; opacity:.6;
  border-style:solid; border-width:22px 15px;
  border-image-source:url('../img/klassen/class-card-frame-subtle.webp');
  border-image-slice:150 140 150 140; border-image-repeat:stretch;
}
.codex-diagram-node.origin { border-color:#75503e; }
.codex-diagram-node h3 { margin:0; font-size:1.05rem; }
.codex-diagram-node span { display:block; margin-top:6px; color:var(--muted); font-size:13px; }
.codex-diagram-node.is-disabled { cursor:default; }
a.codex-diagram-node:hover,a.codex-diagram-node:focus-visible { border-color:var(--gold); }
a.codex-diagram-node:hover h3,a.codex-diagram-node:focus-visible h3 { color:var(--gold); }
.codex-diagram-note { margin:20px 0 0; text-align:center; color:#8f806f; font-size:14px; }

@media (max-width:680px) {
  .codex-diagram { padding:24px 16px; }
  .codex-diagram-tier--split { grid-template-columns:1fr; gap:16px; }
  .codex-diagram-tier + .codex-diagram-tier { margin-top:30px; }
}

/* Mobil: Kleinstlabels nicht unter 12px. */
@media (max-width:760px) { .codex-chapter-num { font-size:12px; } }