@font-face {
  font-family:'Diablo';
  src:url('../img/gemeinsam/diablo-heavy.ttf') format('truetype');
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
:root {
  --ink:#090807; --bone:#eee6d8; --muted:#a99b89; --blood:#a5261c;
  --gold:#c49a50; --line:#463328; --shadow:rgba(0,0,0,.58);
  --type-body:17px; --type-note:20px; --type-small:14px; --type-label:12px; --type-leading:1.7;
  --space-xs:8px; --space-sm:12px; --space-md:16px; --space-lg:24px; --space-xl:32px; --space-2xl:48px;
  --space-section:96px; --space-section-mobile:64px; --space-feature:128px; --space-feature-mobile:88px;
  --space-divider-clearance:256px; --space-divider-clearance-mobile:112px;
  --page-gutter:24px; --page-gutter-mobile:18px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
/* min-height:100vh + flex-column: hält den Footer am unteren Viewport-Rand
   auf kurzen Seiten (z.B. nach dem Kürzen von Inhalten), statt direkt unter
   dem letzten Abschnitt zu schweben. main:flex:1 nimmt den restlichen
   Platz ein. */
.svg-filter-defs { position:absolute; width:0; height:0; overflow:hidden; }
body { margin:0; min-height:100vh; overflow-x:hidden; display:flex; flex-direction:column; color:var(--bone); font:400 var(--type-body)/var(--type-leading) 'Spectral',Georgia,'Times New Roman',serif;
  background:#050403 url('../img/texturen/section-lava-seamless.webp') top center/1400px repeat; }
body::before { content:""; position:fixed; inset:0; z-index:-1; background:rgba(5,4,3,.6); }
body::after { content:""; position:fixed; inset:0; z-index:18; pointer-events:none; background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.18) 13%,transparent 24%,transparent 76%,rgba(0,0,0,.18) 87%,rgba(0,0,0,.72) 100%); }
main { flex:1 0 auto; }
a { color:inherit; }
button { font:inherit; }

.topbar { border-bottom:1px solid var(--line); background:rgba(9,8,7,.94); position:sticky; top:0; z-index:20; }
.nav { max-width:1200px; margin:auto; min-height:85px; padding:0 24px; display:flex; align-items:center; gap:24px; }
.brand { display:flex; align-items:center; margin-right:auto; text-decoration:none; }
.brand-logo { display:block; height:50px; width:auto; }
.nav a:not(.brand) { color:var(--muted); text-decoration:none; font:650 calc(.78rem + 1px)/1 system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.nav a:not(.brand):hover { color:var(--bone); }
.nav-links { display:flex; gap:20px; }
.menu-btn { display:none; color:var(--bone); background:none; border:1px solid var(--line); padding:7px 10px; }

/* ─── Sub-Navigation (Sprungmarken) ────────────────────────────────
   Fest am unteren Bildschirmrand (position:fixed, nicht sticky/scrollend),
   Links rechtsbündig (site-weit einheitliches Muster, siehe auch
   sanctuary.css/himmel-v2.css/welt.css). body padding-bottom hält die
   Leiste vom Footer fern; scroll-margin-top berücksichtigt nur noch die
   Topbar, da die Subnav nicht mehr oben mitklebt. */
.subnav { position:relative; background:rgba(9,8,7,.96); border-top:1px solid var(--line); }
.subnav + footer { margin-top:0; border-top:0; }
.subnav-inner { max-width:1200px; margin:auto; padding:0 24px; display:flex; justify-content:flex-end; gap:30px; overflow-x:auto; scrollbar-width:none; }
.subnav-inner::-webkit-scrollbar { display:none; }
.subnav a { flex:none; display:flex; align-items:center; height:46px; color:var(--muted); text-decoration:none;
  font:650 calc(.72rem + 1px)/1 system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
  border-bottom:2px solid transparent; transition:color .2s,border-color .2s; }
.subnav a:hover { color:var(--bone); }
.subnav a.active { color:var(--gold); border-bottom-color:var(--gold); }
section[id] { scroll-margin-top:100px; }

.eyebrow { display:flex; align-items:center; gap:8px; color:var(--gold); font:700 calc(.72rem + 1px)/1 system-ui,sans-serif; text-transform:uppercase; letter-spacing:.16em; }
h1,h2,h3 { margin:0; font-family:'Marcellus',Georgia,serif; font-weight:400; line-height:1.05; text-transform:uppercase; letter-spacing:.02em; filter:url(#grunge); }

/* ─── Hero (identischer Aufbau wie die Regionsseiten/welt.css) ──── */
/* Bild als background-image statt <img> + filter, Fade direkt im Alphakanal
   von hell-header-final.webp gebacken — siehe himmel-v2.css für die
   ausführliche Begründung (Artefakt-Kante bei <img>+position:absolute+filter,
   background-position:bottom statt eines %-Werts wegen cover-Zuschnitt).
   Basis-Höhe bewusst höher als bei Himmel (825px statt 720px). Höhe wächst
   auf breiten Viewports mit (41.7vw = 100vw/2.4, dem Seitenverhältnis von
   hell-header-final.webp) — Content wandert dabei bewusst mit nach unten,
   identisches Verhalten wie auf den Regionsseiten. */
.region-hero { position:relative; min-height:min(max(825px,41.7vw),88vh); display:flex; align-items:flex-end; overflow:hidden;
  background:url('../img/evil/hell-header-final.webp') center bottom/cover no-repeat; }
/* Maske blendet die Verdunklung linear in der bild-eigenen Alpha-Fade-Zone
   (62%–100% der Höhe) aus, statt hart abzuschneiden — ein harter Schnitt
   erzeugt selbst eine sichtbare Kante. Deckungsgleich mit der im Bild
   gebackenen Fade-Kurve, sodass beide zusammen weich gegen null auslaufen. */
.region-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,5,4,.6),transparent 55%);
  -webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 100%); mask-image:linear-gradient(to bottom,#000 62%,transparent 100%); }
.region-hero-content { position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:64px 24px 56px; width:100%; }
.region-hero h1 { max-width:920px; margin:16px 0 20px; font-size:clamp(2.6rem,6vw,4.4rem); text-shadow:0 3px 25px #000; }
.region-hero .lead { max-width:640px; margin:0; color:#d4c8bb; font-size:var(--type-body); line-height:var(--type-leading); text-shadow:0 2px 12px #000; }

.region-facts { display:flex; flex-wrap:wrap; gap:22px 34px; margin:26px 0 0; }
.region-facts div { display:grid; gap:6px; }
.region-facts dt { color:#c3a47f; font:700 12px/1 system-ui,sans-serif; letter-spacing:.13em; text-transform:uppercase; }
.region-facts dd { margin:0; color:#eee4d8; font-size:var(--type-body); }

.block { max-width:1200px; margin:auto; padding:var(--space-section) var(--page-gutter); }
.block-head { margin-bottom:var(--space-xl); }
.block-head h2 { font-size:clamp(1.9rem,3.6vw,2.7rem); }
.block-head p { max-width:700px; margin:14px 0 0; color:var(--muted); }
/* Drei Großen Übel: Intro-Absatz nutzt die volle Content-Breite statt der
   700px-Vorgabe von .block-head p. */
#grosse-uebel .block-head p { max-width:none; line-height:var(--type-leading); }
.uebel-overview-facts { padding-top:24px; margin-top:32px !important; border-top:1px solid var(--line); }

/* Zweiter Hintergrund für "Die Drei Großen Übel" + Slider: eigenes,
   deckendes background auf dem Wrapper statt body-weit, damit der Wechsel
   exakt an der Sektion beginnt (identisches Muster wie .heaven-bg-alt auf
   himmel.html, nur mit dunkelrotem statt bläulichem Tönungs-Overlay). */
.hell-bg-alt { background:linear-gradient(rgba(5,4,3,.55),rgba(5,4,3,.55)),
  url('../img/texturen/section-leather-seamless.webp') top center/1400px repeat; }

/* ─── Wesen der Brennenden Höllen: Fließtext + Merkmalsliste ──────── */
.overview-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:56px; align-items:start; }
.overview-intro > p { margin:0 0 22px; color:#c2b6a6; font-size:var(--type-body); line-height:var(--type-leading); }
.overview-intro > p:last-child { margin-bottom:0; }
.meta-blocks { display:grid; gap:2px; }
.meta-block { padding:14px 0 14px 18px; border-left:2px solid var(--line); }
.meta-block .meta-label { display:block; color:var(--gold); font:700 12px/1 system-ui,sans-serif; letter-spacing:.13em; text-transform:uppercase; }
.meta-block strong { display:block; margin-top:6px; color:var(--bone); font-size:var(--type-body); font-weight:500; }
@media (max-width:900px) {
  .overview-grid { grid-template-columns:1fr; gap:36px; }
}

/* ─── Site-weiter Zier-Divider (Hölle-Thema) ───────────────────── */
.section-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; }
.block:has(+ .section-divider) { padding-bottom:var(--space-divider-clearance); }
.section-divider + .block,
.section-divider + .hell-bg-alt > .block:first-child { padding-top:var(--space-divider-clearance); }
.section-divider img {
  content:url('../img/evil/divider-hell-ornament.webp');
  position:absolute; top:0; left:50%;
  width:min(1680px,calc(100vw - 40px)); height:auto; display:block; z-index:1;
  transform:translate(-50%,-48.8%);
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.7)) drop-shadow(0 0 6px rgba(220,90,50,.4));
  opacity:.96;
}
.section-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(255,160,90,.75) 0%,rgba(165,38,28,.4) 40%,transparent 72%);
  mix-blend-mode:screen; pointer-events:none;
  animation:divider-glow-pulse 8s ease-in-out infinite;
}
@keyframes divider-glow-pulse { 0%,100% { opacity:.42; } 50% { opacity:1; } }
@media (prefers-reduced-motion:reduce) { .section-divider::after { animation:none; } }
.section-divider::before {
  content:""; position:absolute; top:0; left:50%; width:100vw; height:14px;
  transform:translate(-50%,-50%);
  background:url('../img/evil/divider-hell-line.webp') center/107.6% 70px no-repeat;
  filter:drop-shadow(0 0 4px rgba(220,90,50,.35));
}
@media (max-width:680px) { .section-divider { width:calc(100vw - 28px); } }

/* ─── Die Drei Großen Übel: vollflächiger Portrait-Slider, 1:1 Sprache
   des Angiris-Rat-Sliders auf himmel.html (der wiederum den Regions-Slider
   .world der Startseite spiegelt). Die Querformat-Renders sind bereits so
   komponiert wie jene Vorlagen (Figur links, Architektur/Feuer rechts). */
.uebel-wrap { position:relative; }
.uebel-slider { position:relative; left:50%; width:100vw; min-height:min(max(760px,42vw),84vh); margin-bottom:6px; transform:translateX(-50%); overflow:hidden; isolation:isolate; border-block:1px solid var(--line); background:#090807; }
.uebel-slide { position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .75s ease,visibility .75s; }
.uebel-slide.active { opacity:1; visibility:visible; z-index:1; }
.uebel-portrait { position:absolute; inset:-2%; width:104%; height:104%; object-fit:cover; object-position:25% 10%; transform:scale(1.035); transition:transform 7s ease; filter:saturate(.92) contrast(1.05); }
.uebel-slide.active .uebel-portrait { transform:scale(1); }
.uebel-slide::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(9,8,7,.42) 0%,rgba(9,8,7,.24) 42%,rgba(9,8,7,.67) 72%,rgba(9,8,7,.82) 100%),linear-gradient(0deg,rgba(9,8,7,.83) 0%,rgba(9,8,7,.15) 42%,rgba(9,8,7,.44) 100%); }
.uebel-info { position:absolute; z-index:3; right:max(32px,calc((100vw - 1200px)/2)); bottom:clamp(150px,20vh,220px); width:min(560px,calc(100vw - 64px)); }
.uebel-info .type { color:var(--gold); font:700 calc(.72rem + 1px)/1 system-ui,sans-serif; letter-spacing:.16em; text-transform:uppercase; }
.uebel-info h3 { margin:13px 0 0; font-size:clamp(2.2rem,4.6vw,3.2rem); line-height:.95; text-shadow:0 3px 25px #000; }
.uebel-info p { max-width:540px; margin:18px 0 0; color:#d4c8bb; font-size:var(--type-body); line-height:var(--type-leading); text-shadow:0 2px 12px #000; }
.uebel-facts { display:flex; flex-wrap:wrap; gap:18px 30px; margin:22px 0 0; }
.uebel-facts div { display:grid; gap:6px; }
.uebel-facts dt { color:#987d68; font:700 12px/1 system-ui,sans-serif; letter-spacing:.13em; text-transform:uppercase; }
.uebel-facts dd { margin:0; color:#eee4d8; font-size:var(--type-body); }
/* bottom:96px statt der 64px des Angiris-Rat-Sliders: der Slider hier ist
   etwas niedriger (siehe .uebel-slider), wodurch das nach oben ausblutende
   Divider-Ornament direkt darunter sonst mit den Tabs kollidiert. */
.uebel-controls { position:absolute; z-index:5; left:50%; bottom:96px; width:min(1200px,calc(100vw - 64px)); transform:translateX(-50%); display:grid; grid-template-columns:48px minmax(0,1fr) 48px; align-items:center; gap:16px; }
.uebel-arrow { width:48px; height:48px; display:grid; place-items:center; border:1px solid rgba(207,183,158,.32); color:#dfd2c2; background:rgba(8,7,6,.66); cursor:pointer; font-size:calc(1.3rem + 1px); transition:border-color .2s ease,background .2s ease; }
.uebel-arrow:hover,.uebel-arrow:focus-visible { border-color:#c4573a; background:#2a120c; }
.uebel-tabs { display:flex; overflow-x:auto; scrollbar-width:none; border-top:1px solid rgba(207,183,158,.23); }
.uebel-tabs::-webkit-scrollbar { display:none; }
.uebel-tab { position:relative; flex:1 0 auto; min-width:120px; padding:16px 12px 0; border:0; color:#8f8276; background:transparent; font:700 calc(.74rem + 1px)/1.2 system-ui,sans-serif; letter-spacing:.05em; text-transform:uppercase; cursor:pointer; text-align:center; }
.uebel-tab::after { content:""; position:absolute; top:-1px; left:0; right:0; height:2px; background:transparent; transition:background .2s ease; }
.uebel-tab:hover { color:#c9bba8; }
.uebel-tab.active { color:var(--gold); }
.uebel-tab.active::after { background:var(--gold); }
@media (max-width:760px) {
  .uebel-slider { min-height:760px; }
  .uebel-slide::after { background:linear-gradient(0deg,rgba(9,8,7,.83) 0%,rgba(9,8,7,.63) 52%,rgba(9,8,7,.31) 100%); }
  .uebel-info { right:22px; bottom:130px; width:calc(100vw - 44px); }
  .uebel-facts { gap:14px 22px; }
  .uebel-controls { bottom:88px; width:calc(100vw - 30px); grid-template-columns:40px minmax(0,1fr) 40px; gap:7px; }
  .uebel-arrow { width:40px; height:40px; font-size:calc(1.1rem + 1px); }
  .uebel-tab { min-width:96px; font-size:12px; padding:14px 8px 0; }
}
/* Mobil: Porträt oben, Text darunter im normalen Fluss. Vorher lag der Text
   absolut über einer festen Slider-Höhe - bei langen Einträgen ragte er oben
   aus dem overflow:hidden-Bereich (Name und erster Absatz fehlten) und deckte
   zugleich das Motiv ab. Alle Slides teilen sich eine Grid-Zelle, die Höhe
   richtet sich so nach dem längsten Eintrag. */
@media (max-width:760px) {
  .uebel-slider { min-height:0; }
  .uebel-track { display:grid; }
  .uebel-slide { position:relative; inset:auto; grid-area:1/1; display:flex; flex-direction:column; }
  .uebel-slide::after { display:none; }
  .uebel-portrait,.uebel-slide.active .uebel-portrait { position:relative; inset:auto; width:100%; height:min(100vw,440px); transform:none; transition:none; object-position:24% 12%; -webkit-mask-image:linear-gradient(#000 58%,transparent); mask-image:linear-gradient(#000 58%,transparent); }
  .uebel-info { position:relative; right:auto; bottom:auto; width:auto; margin:-64px 22px 28px; }
  .uebel-controls { position:relative; left:auto; bottom:auto; transform:none; width:auto; margin:18px 15px 64px; }
}
@media (prefers-reduced-motion:reduce) { .uebel-slide,.uebel-portrait { transition:none; } }

/* ─── Die Vier Geringen Übel liegen als aufgeschlagener Foliant auf der
   Holz-Textur — exakt dieselbe Bühnen-Konstruktion wie das Bestiarium
   (vgl. voelker.html/voelker.css: .voelker-bg-wood > .monster-archive >
   .block.monster-archive-inner). .hell-bg-wood liegt dafür AUSSERHALB von
   .block und ist raumgreifend/vollflächig (kein max-width, kein eigenes
   Padding) — die Holz-Textur füllt so die komplette Breite der Bühne statt
   nur die auf 1200px begrenzte .block-Spalte. Der Innenbereich bekommt
   stattdessen sein eigenes, bewusst breiteres .uebel-archive-inner
   (1760px, identischer Wert wie .monster-archive-inner), damit auch der
   codex-folio (max-width 1450px) seine volle Breite erreichen kann. */
.hell-bg-wood {
  background:linear-gradient(rgba(9,8,7,.35),rgba(9,8,7,.35)),
    url('../img/texturen/section-wood-seamless.webp') top center/1400px repeat;
}
.uebel-archive { position:relative; }
.uebel-archive-inner { max-width:1760px; padding:var(--space-divider-clearance) 40px var(--space-feature); }
@media (max-width:980px) { .uebel-archive-inner { padding-left:28px; padding-right:28px; } }
@media (max-width:760px) { .uebel-archive-inner { padding:var(--space-divider-clearance-mobile) var(--page-gutter-mobile) var(--space-feature-mobile); } }

/* Bildebenen im linken Buchpage-Bild: Sepia-Zeichnung als Standard, Farb-
   Render + kurze Belebungs-Animation blenden bei Hover/Fokus auf dieselbe
   Weise ein wie zuvor im freien Layout — jetzt innerhalb des
   codex-folio__image-Rahmens positioniert. Die Zeichnung selbst darf
   größer sein als die generische Bestiarium-Studie, daher eine höhere
   Mindesthöhe statt der geerbten 295px. */
.codex-folio--uebel .codex-folio__image { min-height:420px; }
.codex-folio--uebel .codex-folio__image img,
.codex-folio--uebel .codex-folio__image-placeholder { min-height:420px; }
/* Bug der vorherigen Version: <video> ist (anders als <img>) von der
   generischen .codex-folio__image img-Regel nicht erfasst und behält ohne
   eigene width/height seine native Auflösung (hier 1152×768) bei, auch
   mit position:absolute + inset:8px — ein Video ist ein Replaced Element,
   bei dem 'auto'-Breite NICHT automatisch die verfügbare Fläche über
   left/right füllt (anders als bei nicht ersetzten Elementen). Deshalb
   width/height hier explizit wie beim <img> auf 100% setzen. */
.codex-folio--uebel .codex-folio__image img.color,
.codex-folio--uebel .codex-folio__image video.anim {
  position:absolute; inset:8px; width:calc(100% - 16px); height:calc(100% - 16px);
  opacity:0; transition:opacity .5s ease;
}
.codex-folio--uebel .codex-folio__image img.sketch { transition:opacity .5s ease; }
.codex-folio--uebel .codex-folio__image video.anim { z-index:2; object-fit:contain; pointer-events:none; }
/* Weicher, runder Ausblendrand statt der harten Rechteckkante: das
   generische Foliant-Modul faded nur die äußersten 6% gerade Kanten
   (für rechteckige Bestiarium-Fotos gedacht) und lässt <video> dabei
   sogar ganz außen vor (kein mask-image auf Replaced-Video). Für die
   freigestellten Dämonen-Portraits hier stattdessen ein weicher,
   ovaler Verlauf auf allen drei Ebenen (Sketch/Color/Video) — dieselbe
   Maske, die diese Assets schon im vorherigen freien Layout genutzt
   haben. */
.codex-folio--uebel .codex-folio__image img,
.codex-folio--uebel .codex-folio__image video.anim {
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 40%, transparent 100%);
}
.codex-folio--uebel .codex-folio__image:hover img.sketch,
.codex-folio--uebel .codex-folio__image:focus-within img.sketch { opacity:0; }
.codex-folio--uebel .codex-folio__image:hover img.color,
.codex-folio--uebel .codex-folio__image:focus-within img.color { opacity:1; }
.codex-folio--uebel .codex-folio__image video.anim.playing { opacity:1; }
.codex-folio--uebel .codex-folio__content .lore-note { color:#5c4530; }
.codex-folio--uebel .codex-folio__content .lore-note span { color:#7a4a1e; }

.lilith-note { margin:56px 0 0; padding:19px 22px; border:1px solid #4e2923; background:rgba(99,26,20,.13); color:#cfc2b2; }
.lilith-note strong { color:#d45a46; }

/* ─── Geschichte der Hölle / Wichtige Orte / Weiterführend: fließender
   Buchsatz statt Website-Bausteinen, identisches Muster wie die
   entsprechenden Abschnitte auf himmel-v2.css. */
.codex-text { max-width:680px; }
.codex-text p { margin:20px 0 0; color:#c2b6a6; font-size:var(--type-body); line-height:var(--type-leading); }
.codex-text p:first-child { margin-top:0; }
.codex-text p.drop-cap::first-letter { float:left; margin:4px 10px 0 0; color:var(--gold); font:400 calc(3.1rem + 1px)/.78 'Marcellus',Georgia,serif; }
.codex-marginalia { position:relative; padding-left:190px; }
.codex-marginalia .era { position:absolute; left:0; top:.15em; width:160px; color:var(--gold); font:italic 400 calc(.95rem + 1px)/1.4 'Spectral',Georgia,serif; }
@media (max-width:760px) {
  .codex-marginalia { padding-left:0; }
  .codex-marginalia .era { position:static; display:block; margin-bottom:4px; }
}
/* Großes, dezentes Kompassrosen-Ornament rechts neben dem Fließtext,
   identisches Muster wie auf himmel.html ("Der Fall der Hohen Himmel"). */
.codex-section-deco { position:relative; }
.codex-section-deco .codex-text { position:relative; z-index:1; }
.codex-deco-img { position:absolute; top:-10px; right:-30px; z-index:0; width:min(30vw,440px); height:auto; opacity:.16; filter:grayscale(.4); pointer-events:none; }
@media (max-width:1000px) { .codex-deco-img { display:none; } }
/* Hervorgehobener Zitat-Hinweis, analog .heaven-note auf himmel.html, aber
   in Blutrot statt Gold — passend zum infernalischen statt himmlischen Ton. */
.hell-note { position:relative; margin-top:32px; padding:22px 26px 22px 66px; max-width:680px; border-left:3px solid var(--blood); background:rgba(165,38,28,.08); color:var(--bone); font:italic 400 var(--type-body)/var(--type-leading) 'Spectral',Georgia,serif; }
.hell-note::before { content:""; position:absolute; left:22px; top:22px; width:24px; height:41px; background:url('../img/decoration/quote-mark.webp') center/contain no-repeat; opacity:.8; filter:sepia(1) saturate(4) hue-rotate(-40deg) brightness(.8); }
.codex-register { max-width:680px; margin:0; padding:0; }
.codex-register div { padding:14px 0; border-top:1px solid var(--line); }
.codex-register div:first-child { border-top:0; padding-top:0; }
.codex-register dt { display:inline-flex; align-items:center; gap:8px; color:var(--gold); font:italic 600 calc(1.05rem + 1px)/1 'Spectral',Georgia,serif; }
.codex-register dt::before { content:""; width:12px; height:12px; flex:none; background:url('../img/decoration/star-bullet.webp') center/contain no-repeat; opacity:.85; }
.codex-register dt::after { content:" — "; color:var(--line); }
.codex-register dd { display:inline; margin:0; color:var(--muted); font-size:var(--type-body); line-height:var(--type-leading); }
.codex-seealso { max-width:680px; margin:18px 0 0; color:var(--muted); font-size:var(--type-body); line-height:var(--type-leading); }
.codex-seealso:first-child { margin-top:0; }
.codex-seealso strong { color:var(--bone); font-weight:600; }
.codex-seealso a { color:#c2b6a6; text-decoration:none; border-bottom:1px solid rgba(196,154,80,.3); }
.codex-seealso a:hover,.codex-seealso a:focus-visible { color:var(--gold); border-color:var(--gold); }

/* ─── Footer (site-weit einheitlich) ───────────────────────────── */
footer { margin-top:60px; border-top:1px solid var(--line);  }
.footer-inner { max-width:1200px; margin:auto; padding:35px 24px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:24px; color:#776d61; font:500 calc(.74rem + 1px)/1.5 system-ui,sans-serif; }
.footer-notice { display:flex; flex-direction:column; gap:6px; max-width:640px; }
.footer-notice p { margin:0; }
.footer-inner a { color:#ae9d89; }
.footer-meta { display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.footer-links { display:flex; gap:16px; }
.footer-links a { text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
.backtop { text-transform:uppercase; letter-spacing:.08em; text-decoration:none; }

/* Handschriftliche Randvermerke: Ergänzung, nicht Teil der Hauptchronik. */
.lore-note { position:relative; margin:24px 0 6px; padding:8px 0 4px 22px; max-width:570px; color:#d6c2a5; font:400 var(--type-note)/1.35 'Jim Nightshade','Spectral',Georgia,serif; transform:rotate(-.55deg); transform-origin:left center; }
.lore-note::before { content:'✦'; position:absolute; left:0; top:8px; color:var(--blood); font:400 calc(.78rem + 1px)/1 Georgia,serif; }
.lore-note span { display:block; margin-bottom:2px; color:#bb786d; font:400 var(--type-note)/1 'Jim Nightshade','Spectral',Georgia,serif; transform:rotate(.55deg); }
.lore-note--uncertain { color:#cfb99a; }

@media (max-width:760px) {
  .nav { gap:13px; min-height:75px; }
  .subnav-inner { padding:0 18px; gap:22px; }
  .menu-btn { display:block; }
  .nav-links { display:none; position:absolute; top:75px; left:0; right:0; padding:18px 24px 24px; flex-direction:column; gap:14px; background:#0d0b0a; border-bottom:1px solid var(--line); }
  .nav-links.open { display:flex; }

  .brand-logo { height:40px; }
  .region-hero-content,.block { padding-left:var(--page-gutter-mobile); padding-right:var(--page-gutter-mobile); }
  .block { padding-top:var(--space-section-mobile); padding-bottom:var(--space-section-mobile); }
  .block:has(+ .section-divider) { padding-bottom:var(--space-divider-clearance-mobile); }
  .section-divider + .block,
  .section-divider + .hell-bg-alt > .block:first-child { padding-top:var(--space-divider-clearance-mobile); }
  .footer-inner { flex-direction:column; align-items:flex-start; }
  .footer-meta { align-items:flex-start; }
  .lore-note { padding-left:18px; }
}

/* Touch-Geräte kennen kein Hover: das Farbbild ist dort der Standard (statt
   der Sepia-Zeichnung), ein Tippen auf das Bild spielt die Animation. */
@media (hover:none) {
  .codex-folio--uebel .codex-folio__image img.sketch { opacity:0; }
  .codex-folio--uebel .codex-folio__image img.color { opacity:1; }
}

/* Mobil: Slider-Navigation dockt am unteren Viewport-Rand an, solange der
   Slider im Bild ist (position:sticky im selben Wrapper), und löst sich am
   Slider-Ende wieder. So sieht man Tabs/Pfeile sofort und muss nicht erst
   ans untere Ende des (hohen) Sliders scrollen. wrap-padding hält die
   Leiste am Ende vom herausragenden Divider-Ornament fern. */
@media (max-width:760px) {
  .uebel-controls + .section-divider { margin-top:72px; }
  .uebel-controls { position:sticky; bottom:0; z-index:20; margin:0; width:auto; padding:10px 15px calc(10px + env(safe-area-inset-bottom)); background:rgba(9,8,7,.96); border-top:1px solid rgba(207,183,158,.16); }
}

/* Mobil/Tablet: die 420px Mindesthöhe der Desktop-Zeichnung ließ um das
   Bild im einspaltigen Folianten große leere Flächen - hier wieder frei. */
@media (max-width:860px) {
  .codex-folio--uebel .codex-folio__image,
  .codex-folio--uebel .codex-folio__image img,
  .codex-folio--uebel .codex-folio__image-placeholder { min-height:0; }
}