@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; }
.svg-filter-defs { position:absolute; width:0; height:0; overflow:hidden; }
body { margin:0; overflow-x:hidden; color:var(--bone); font:400 var(--type-body)/var(--type-leading) 'Spectral',Georgia,'Times New Roman',serif;
  background:#090807 url('../img/texturen/section-rock-seamless.webp') top center/1400px repeat; }
body::before { content:""; position:fixed; inset:0; z-index:-1; background:rgba(4,4,4,.78); }
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%); }
/* Die Chronik erhält ihre eigene, deckende Kirchen-Textur. Der Wrapper
   begrenzt den Wechsel exakt auf den Archivbereich. */
.sanctuary-bg-church { background:linear-gradient(rgba(9,8,7,.55),rgba(9,8,7,.55)),
  url('../img/texturen/church.webp') top center/1400px repeat; }
/* Ab „Jenseits der Chronik“ kehrt die Seite zur Ledertextur zurück. */
.sanctuary-bg-leather { background:linear-gradient(rgba(9,8,7,.55),rgba(9,8,7,.55)),
  url('../img/texturen/section-leather-seamless.webp') top center/1400px repeat; }
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
   himmel-v2.css/hoelle.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 direkt auf .region-hero, Fade im Alphakanal
   von sanctuary-header-final.webp gebacken. Höhe wächst auf breiten
   Viewports mit (42.85vw = 100vw/2.3337, dem Seitenverhältnis des Bilds)
   — Content wandert dabei bewusst mit nach unten, identisches Verhalten
   wie auf den Regionsseiten. */
.region-hero { position:relative; min-height:min(max(720px,42.85vw),88vh); display:flex; align-items:flex-end; overflow:hidden;
  background:url('../img/sanctuary/sanctuary-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:1000px; margin:16px 0 20px; font-size:clamp(2.6rem,6vw,4.6rem); text-shadow:0 3px 25px #000; }
.region-hero .lead { max-width:700px; margin:0; color:#d4c2b6; 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 + .block { border-top:1px solid var(--line); }
/* Die Naht bleibt ausschließlich innerhalb der Lederfläche: Sie trennt die
   dort aufeinanderfolgenden Inhaltsabschnitte, nicht den Texturwechsel an
   der Chronik. */
.sanctuary-bg-leather .block + .block { position:relative; border-top:0; }
.sanctuary-bg-leather .block + .block::before {
  content:""; position:absolute; z-index:1; top:0; left:50%;
  width:100vw; height:112px; transform:translate(-50%,-50%);
  pointer-events:none;
  /* Die Naht liegt über einer zurückhaltenden Schwarzvignette, die ihren
     Übergang andeutet, aber nicht so stark wie der große Zier-Divider. */
  background:url('../img/trenner/naht-kachel.webp') center/auto 18px repeat-x,
    linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.36) 39%,rgba(0,0,0,.5) 50%,rgba(0,0,0,.36) 61%,transparent 100%);
  opacity:.58; filter:drop-shadow(0 3px 3px rgba(0,0,0,.38));
}
.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); }

/* ─── Teaser-Abschnitt (identisch zu .sanctuary-teaser auf index.html):
   reiner Text-Teaser mit CTA statt Card-Grid, für Bereiche, deren
   vollständiger Inhalt auf eine eigene Unterseite ausgelagert wurde
   (siehe #voelker → voelker.html). */
.sanctuary-teaser { max-width:720px; margin:0 auto; text-align:center; }
.sanctuary-teaser .eyebrow { justify-content:center; }
.sanctuary-teaser h2 { margin-top:14px; }
.sanctuary-teaser h2::after { content:"◆"; display:block; width:max-content; margin:16px auto 0; color:#7f2b20; font:400 .72rem/1 'Spectral',Georgia,serif; text-shadow:16px 0 #4d2d24,-16px 0 #4d2d24; }
.sanctuary-lead { max-width:600px; margin:22px auto 0; color:var(--muted); font-size:var(--type-body); line-height:var(--type-leading); }
.sanctuary-teaser .download-file { margin-top:34px; }
.download-file {
  display:inline-flex; align-items:center; gap:9px; margin-top:26px; padding:11px 14px; color:#ddcdb9; background:#1c110d; text-decoration:none;
  font:700 calc(.72rem + 1px)/1 system-ui,sans-serif; letter-spacing:.09em; text-transform:uppercase;
  border:9px solid transparent; border-image-source:url('../img/buttons/more-info-standard.webp'); border-image-slice:16 fill; border-image-width:9px; border-image-repeat:stretch;
  transition:filter .2s ease;
}
.download-file:hover,.download-file:focus-visible { filter:brightness(1.2); background:#2a1711; }

/* ─── Wesen/Monster & Völker/Fraktionen: dasselbe bildstarke Zwei-Spalten-
   Modul wie .heaven-hell-block auf index.html (styles.css), hier mit
   echten Illustrationen statt Kachel-Textur als Spaltenhintergrund. */
/* Divider liegt bewusst ohne Abstand direkt auf der Bildkante (anders als
   bei den Text-Blocks, die 128/192px Luft zum Ornament brauchen) - das
   Ornament markiert hier den Übergang zwischen Textur und Illustration. */
.sanctuary-duo { position:relative; left:50%; width:100vw; transform:translateX(-50%); display:grid; grid-template-columns:1fr 1fr; align-items:stretch; min-height:860px; }
.duo-col { position:relative; display:flex; flex-direction:column; justify-content:center; padding:var(--space-feature) 64px; text-align:center; isolation:isolate; }
.duo-col::before { content:""; position:absolute; inset:0; z-index:-1; background-size:cover; background-position:center; }
.duo-monster::before { background-image:linear-gradient(rgba(5,4,3,.6),rgba(5,4,3,.6)),url('../img/sanctuary/monster-teaser.webp'); }
/* Spiegelverkehrt, damit die Blickrichtung der Szene zur Bildmitte
   (und damit zum Zier-Divider zwischen den Spalten) zeigt. */
.duo-fraktionen::before { background-image:linear-gradient(rgba(9,8,7,.55),rgba(9,8,7,.55)),url('../img/sanctuary/fraktionen-teaser.webp'); transform:scaleX(-1); }
.duo-col .eyebrow { justify-content:center; }
.duo-col h2 { margin-top:14px; }
.duo-col h2::after { content:"◆"; display:block; width:max-content; margin:16px auto 0; color:#7f2b20; font:400 .72rem/1 'Spectral',Georgia,serif; text-shadow:16px 0 #4d2d24,-16px 0 #4d2d24; }
.duo-lead { max-width:460px; margin:var(--space-lg) auto 0; color:var(--muted); font-size:var(--type-body); line-height:var(--type-leading); }
.duo-col .download-file { margin:var(--space-xl) auto 0; }
/* z-index:1 statt 0: .duo-col hat isolation:isolate (= eigener Stacking-
   Context, aber ohne echtes z-index), dadurch stapelte die rechte Spalte
   (später im DOM, gleiche Stack-Ebene) bislang über der Linie und
   verdeckte sie zur Hälfte. */
.duo-line { position:absolute; top:0; bottom:0; left:50%; width:14px; transform:translateX(-50%); overflow:hidden; pointer-events:none; z-index:1; }
/* section-divider-line.png ist von Haus aus sehr dunkel/dezent (feiner
   Metallriss mit schwachem Glutschimmer) - auf den gleichmäßigen Himmel-/
   Höllen-Texturen der Startseite trägt das noch, verschwindet aber auf
   den kontrastreichen Illustrationen hier fast vollständig. Eigener
   dunkler Streifen dahinter sorgt für verlässlichen Kontrast, egal was
   im jeweiligen Spaltenbild an dieser Stelle liegt. */
.duo-line::before { content:""; position:absolute; top:50%; left:50%; width:1600px; height:14px; transform:translate(-50%,-50%) rotate(90deg);
  background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),url('../img/gemeinsam/section-divider-line.webp') center/107.6% 70px no-repeat;
  filter:drop-shadow(0 0 6px rgba(157,42,20,.5)); }
.duo-divider { position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%); width:clamp(140px,14vw,220px); display:flex; align-items:center; justify-content:center; pointer-events:none; z-index:2; }
.duo-divider img { width:100%; height:auto; max-height:640px; object-fit:contain; filter:drop-shadow(0 0 20px rgba(0,0,0,.6)); position:relative; z-index:1; }
@media (max-width:900px) {
  .sanctuary-duo { grid-template-columns:1fr; }
  .duo-divider { position:static; transform:none; width:auto; height:2px; background:linear-gradient(90deg,transparent,#7f2b20 30%,#7f2b20 70%,transparent); }
  .duo-divider img { display:none; }
  .duo-line { display:none; }
  .duo-col { padding:var(--space-feature-mobile) var(--page-gutter-mobile); }
}

/* Einleitung als echter Chronik-Prolog: fließender Lesetext in einer Spalte
   statt Website-Absatz-Grid, mit Initiale auf dem ersten Buchstaben für den
   Manuskript-Charakter. */
.lore-lead { margin:0 auto 8px; max-width:760px; }
.lore-lead p { margin:0 0 20px; color:#c2b6a6; font-size:var(--type-body); line-height:var(--type-leading); }
.lore-lead p:last-child { margin-bottom:0; }
.lore-lead p:first-of-type::first-letter {
  float:left; margin:.03em .1em 0 0; color:var(--gold);
  font-family:'Marcellus',Georgia,serif; font-size:calc(3.4em + 1px); line-height:.82;
}

/* ─── Zier-Divider (Sanktuario-Thema) ────────────────────────────
   Gleicher Aufbau wie bei Himmel/Hölle: Ornament + dünne Glutlinie,
   goldener Glow statt blau/rot. Bilder aus dem sanktuario-Ordner sind
   auf reinem Schwarz gerendert, keine echte Alpha-Transparenz — daher
   per Skript in RGBA (Alpha = Helligkeit, unpremultiplied) umgewandelt,
   damit sie sich wie die übrigen Divider freistehend über die Textur legen. */
.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; }
#chronik { padding-bottom:192px; }
.block:has(+ .section-divider) { padding-bottom:192px; }
.section-divider + .block { --divider-content-offset:128px; padding-top:var(--divider-content-offset); }
.section-divider + .sanctuary-bg-leather > .block:first-child { --divider-content-offset:128px; padding-top:var(--divider-content-offset); }
.section-divider img {
  content:url('../img/sanctuary/divider-sanctuary-ornament.png');
  position:absolute; top:0; left:50%;
  width:min(1680px,calc(100vw - 40px)); height:auto; display:block; z-index:1;
  transform:translate(-50%,-49.7%);
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.7)) drop-shadow(0 0 6px rgba(196,154,80,.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(228,196,140,.75) 0%,rgba(196,154,80,.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:280px;
  transform:translate(-50%,-50%);
  /* Die weiche Abdunklung auf beiden Seiten bindet den freistehenden
     Trenner in die Textur ein, ohne das goldene Ornament zu überdecken. */
  background:linear-gradient(to bottom,transparent 0%,#000 46%,#000 54%,transparent 100%),
    url('../img/sanctuary/divider-sanctuary-line.png') center/109% 70px no-repeat;
}

/* ─── Chronik als Zeitstrahl ───────────────────────────────────────
   Zickzack-Layout (Bild/Text wechseln pro Eintrag die Seite) um eine
   dezente, "eingravierte" Mittellinie mit kleinen Rauten-Markern statt
   Kacheln in einer Liste. Große, fast unsichtbare Kapitelziffer im
   Hintergrund jedes Eintrags sorgt für den Manuskript-/Archiv-Charakter,
   ohne dass es wie ein UI-Zähler wirkt. Kein neuer heller Untergrund —
   weiterhin dieselbe dunkle Kirchen-Textur wie der Rest der Chronik, nur mit
   einer sehr leichten Aufhellung + Noise pro Eintrag (siehe --chronicle-*
   unten) als "gealtertes Archivmaterial"-Andeutung. */
.chronicle-timeline { position:relative; max-width:1160px; margin:0 auto; }
.chronicle-timeline::before {
  content:""; position:absolute; left:50%; top:calc(0px - var(--divider-content-offset, 0px)); bottom:0; width:2px; transform:translateX(-50%);
  background:linear-gradient(to bottom,var(--line) 0%,var(--line) 94%,transparent);
  box-shadow:1px 0 0 rgba(196,154,80,.16);
  pointer-events:none;
}

.chronicle-entry {
  position:relative; z-index:0; isolation:isolate;
  display:grid; grid-template-columns:1fr 1fr; column-gap:64px; align-items:center;
  padding-block:5rem 7rem;
}
.chronicle-entry:nth-child(even) .chronicle-media { order:2; }
.chronicle-entry:nth-child(even) .chronicle-content { order:1; }

/* Kapitelziffer: dekorativ, riesig, fast unsichtbar, darf hinter Bild/Text
   verschwinden — bewusst kein UI-Zähler. */
.chronicle-number {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:0; pointer-events:none; white-space:nowrap;
  font-family:'Marcellus',Georgia,serif; font-size:calc(clamp(6rem,10vw,11rem) + 1px);
  color:var(--gold); opacity:.035; letter-spacing:.02em;
}

/* Rauten-Marker auf der Mittellinie statt großer Kreise/Glow. */
.chronicle-marker {
  position:absolute; left:50%; top:64px; z-index:1;
  width:9px; height:9px; transform:translate(-50%,-50%) rotate(45deg);
  background:var(--ink); border:1px solid rgba(196,154,80,.55);
}
.chronicle-entry--major .chronicle-marker {
  width:14px; height:14px; border-color:rgba(228,196,140,.85);
  box-shadow:0 0 7px rgba(196,154,80,.3);
}

/* Die neuen Kirchenfenster liegen im Hochformat vor. Ihre Breite wird auf
   Desktop begrenzt und zur Zeitachse ausgerichtet, damit sie vollständig
   sichtbar bleiben, ohne die Textspalte zu überragen. */
.chronicle-media { position:relative; z-index:1; inline-size:min(100%,540px); justify-self:end; overflow:hidden; border-radius:3px; }
.chronicle-entry:nth-child(even) .chronicle-media { justify-self:start; }
.chronicle-media img {
  display:block; width:100%; height:auto;
  filter:drop-shadow(0 14px 32px rgba(0,0,0,.95));
}
.chronicle-content { position:relative; z-index:1; }
.chronicle-date {
  display:flex; align-items:center; gap:10px; margin:0 0 14px;
  color:#b79b6b; font:650 calc(.72rem + 1px)/1 system-ui,sans-serif; text-transform:uppercase; letter-spacing:.14em;
}
.chronicle-date::before { content:""; width:22px; height:1px; flex:none; background:linear-gradient(90deg,transparent,var(--gold)); }
.chronicle-entry:nth-child(even) .chronicle-date { flex-direction:row-reverse; }
.chronicle-entry:nth-child(even) .chronicle-date::before { background:linear-gradient(90deg,var(--gold),transparent); }
.chronicle-content h3 { font-size:1.7rem; }
.chronicle-kicker { margin:8px 0 0; color:#8e7c69; font:650 12px/1.3 system-ui,sans-serif; text-transform:uppercase; letter-spacing:.11em; }
.chronicle-copy { margin-top:16px; color:var(--muted); }
.chronicle-copy p { margin:0 0 10px; }
.chronicle-copy p:last-child { margin-bottom:0; }

/* ─── Weltbeschreibung & kompakter Regionen-Atlas ─────────────────
   Bewusst kein zweiter großer Startseiten-Slider: Alle Regionen bleiben
   gleichzeitig sichtbar und der Atlas liest sich als Teil des Archivs. */
.sanctuary-world { padding-top:var(--space-feature); padding-bottom:var(--space-feature); }
.world-heading { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); gap:var(--space-2xl); align-items:end; }
.world-heading h2 { max-width:720px; margin-top:14px; font-size:clamp(2.2rem,4.5vw,3.5rem); }
.world-heading > p { margin:0; padding-left:var(--space-lg); color:#c3b4a2; border-left:1px solid #765638; font-size:calc(var(--type-body) + 1px); line-height:1.65; }
.world-prose { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr); gap:clamp(40px,7vw,88px); margin-top:var(--space-2xl); }
.world-copy { max-width:760px; }
.world-copy p { margin:0 0 20px; color:var(--muted); }
.world-copy p:first-child::first-letter { float:left; margin:.04em .11em 0 0; color:var(--gold); font-family:'Marcellus',Georgia,serif; font-size:3.4em; line-height:.78; }
.world-copy p:last-child { margin-bottom:0; }
.world-facts { margin:0; padding:4px 0 4px var(--space-lg); border-left:1px solid var(--line); }
.world-facts div + div { margin-top:var(--space-lg); padding-top:var(--space-lg); border-top:1px solid rgba(70,51,40,.7); }
.world-facts dt { color:var(--gold); font:700 var(--type-label)/1 system-ui,sans-serif; letter-spacing:.13em; text-transform:uppercase; }
.world-facts dd { margin:8px 0 0; color:#d5c5b2; line-height:1.45; }

.atlas-heading { display:flex; justify-content:space-between; align-items:end; gap:var(--space-xl); margin:clamp(72px,9vw,108px) 0 var(--space-xl); padding-top:var(--space-xl); border-top:1px solid var(--line); }
.atlas-kicker { display:block; margin-bottom:10px; color:var(--gold); font:700 var(--type-label)/1 system-ui,sans-serif; letter-spacing:.15em; text-transform:uppercase; }
.atlas-heading h3 { font-size:clamp(1.8rem,3.2vw,2.5rem); }
.atlas-heading p { max-width:480px; margin:0; color:var(--muted); text-align:right; }
.atlas-register { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(380px,.88fr); gap:clamp(36px,6vw,78px); align-items:center; padding:var(--space-lg) 0; }
.atlas-map { position:relative; margin:0; padding:18px; }
.atlas-map::after { content:""; position:absolute; z-index:0; inset:8%; background:url('../img/sanctuary/atlas-compass-ornament.webp') center/contain no-repeat; opacity:.1; filter:sepia(.35); }
.atlas-map img { position:relative; z-index:1; display:block; width:100%; height:auto; opacity:.78; filter:sepia(.2) saturate(.72) contrast(1.04) drop-shadow(0 20px 28px rgba(0,0,0,.55)); }
.atlas-map figcaption { position:relative; margin-top:2px; color:#9e8667; font:400 var(--type-note)/1.1 'Jim Nightshade','Spectral',Georgia,serif; text-align:center; transform:rotate(-.7deg); }
.atlas-index { border-top:1px solid #634830; }
.atlas-entry { display:grid; grid-template-columns:42px minmax(0,1fr) 24px; gap:14px; align-items:center; padding:17px 4px 17px 0; color:var(--bone); border-bottom:1px solid rgba(99,72,48,.72); text-decoration:none; transition:padding .25s ease,background .25s ease; }
.atlas-number { color:#80613d; font:400 1rem/1 'Marcellus',Georgia,serif; }
.atlas-entry small { display:block; margin-bottom:5px; color:#aa8453; font:700 var(--type-label)/1 system-ui,sans-serif; letter-spacing:.11em; text-transform:uppercase; }
.atlas-entry strong { display:block; font:400 1.3rem/1.1 'Marcellus',Georgia,serif; text-transform:uppercase; letter-spacing:.02em; }
.atlas-entry em { display:block; margin-top:5px; color:#9f9180; font:400 var(--type-small)/1.35 'Spectral',Georgia,serif; }
.atlas-entry b { color:#74513a; font:400 1rem/1 Georgia,serif; transition:transform .25s ease,color .25s ease; }
.atlas-entry:hover,.atlas-entry:focus-visible { padding-left:10px; color:#fff8eb; outline:none; background:linear-gradient(90deg,rgba(103,62,30,.14),transparent 75%); }
.atlas-entry:hover .atlas-number,.atlas-entry:focus-visible .atlas-number,.atlas-entry:hover b,.atlas-entry:focus-visible b { color:var(--gold); }
.atlas-entry:hover b,.atlas-entry:focus-visible b { transform:translateX(4px); }

.people-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:42px; }
.people { position:relative; min-height:190px; padding:22px; border:1px solid var(--line); background:#13110f; }
.people::before {
  content:""; position:absolute; inset:-16px -11px; pointer-events:none; opacity:.6;
  border-style:solid; border-width:30px 20px;
  border-image-source:url('../img/klassen/class-card-frame-subtle.webp');
  border-image-slice:150 140 150 140;
  border-image-repeat:stretch;
}
.people.hostile { background:linear-gradient(150deg,#1c1310,#11100e); }
.people .type { color:var(--gold); font:700 12px/1 system-ui,sans-serif; letter-spacing:.11em; text-transform:uppercase; }
.people h3 { margin-top:32px; font-size:1.4rem; }
.people p { color:var(--muted); margin:11px 0 0; font-size:var(--type-body); }

.archive-panel[hidden] { display:none; }
.archive-panel::before { display:block; margin:4px 0 30px; color:#9c866d; font:700 12px/1 system-ui,sans-serif; letter-spacing:.14em; text-transform:uppercase; }
#panel-factions::before { content:"Sechs überlieferte Dossiers"; }
#panel-figures::before { content:"Neun Personenakten"; }
.archive-list { border-top:1px solid var(--line); }
.archive-entry { position:relative; display:grid; grid-template-columns:minmax(180px,.55fr) minmax(0,1.45fr); column-gap:clamp(28px,5vw,74px); padding:32px 0 34px; border-bottom:1px solid var(--line); }
.archive-entry::before { content:""; position:absolute; top:43px; left:-19px; width:7px; height:7px; border:1px solid rgba(196,154,80,.65); transform:rotate(45deg); }
.archive-entry .meta { grid-column:1; display:block; color:#c3a47f; font:700 12px/1.3 system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase; }
.archive-entry h3 { grid-column:1; margin-top:13px; font-size:clamp(1.5rem,2.5vw,2rem); }
.archive-entry p { grid-column:2; grid-row:1 / span 2; align-self:center; margin:0; color:#b8aa9a; font-size:var(--type-body); }
.archive-entry dl { grid-column:2; display:flex; flex-wrap:wrap; gap:14px 38px; margin:19px 0 0; padding-top:16px; border-top:1px solid rgba(196,154,80,.2); }
.archive-entry dl > * { max-width:290px; }
.archive-entry dt { color:#8d7d6b; font:650 11px/1.35 system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.archive-entry dd { margin:4px 0 0; color:#d1c1ae; font-size:calc(.9rem + 1px); line-height:1.4; }
.archive-list--figures { columns:2; column-gap:clamp(34px,6vw,86px); }
.archive-list--figures .archive-entry { display:block; break-inside:avoid; padding:27px 0 29px 20px; }
.archive-list--figures .archive-entry::before { top:38px; left:1px; }
.archive-list--figures .archive-entry h3 { margin-top:9px; font-size:1.55rem; }
.archive-list--figures .archive-entry p { margin:12px 0 0; }

/* ─── Stammbaum: eine einzelne, bereits vollständig beschriftete
   Illustration statt der früheren Karten-Grid-Darstellung. */
.family-tree-head { text-align:center; }
.family-tree-head p { margin-left:auto; margin-right:auto; }
.family-tree { position:relative; max-width:1200px; margin:0 auto; padding:0; text-align:center; }
/* border-radius kappt die winzigen hellen Ecken des Scans (das Pergament
   ist eine unregelmäßige Rissform auf leicht zu großer Leinwand - dort,
   wo die Risskante nicht bis in die Bildecke reicht, blitzt sonst ein
   helles Dreieck durch). */
.family-tree img { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:22px; filter:drop-shadow(0 20px 40px rgba(0,0,0,.55)); }
.family-tree figcaption { margin-top:14px; color:#9e8667; font:400 var(--type-note)/1.1 'Jim Nightshade','Spectral',Georgia,serif; }

.relationship-map { padding:26px; border:1px solid var(--line); background:radial-gradient(circle at 50% 50%,rgba(130,35,25,.13),transparent 40%),#0e0c0a; }
.relation-tier { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.relation-tier + .relation-tier { position:relative; margin-top:40px; }
.relation-tier + .relation-tier::before { content:'↓'; position:absolute; left:50%; top:-32px; color:#8e4937; font:700 calc(1.2rem + 1px)/1 system-ui,sans-serif; }
.relation-node { position:relative; min-height:130px; padding:18px; border:1px solid #4d392f; background:#15110f; }
.relation-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;
}
.relation-node.origin { grid-column:2; text-align:center; border-color:#75503e; }
.relation-node h3 { font-size:1.15rem; }
.relation-node span { display:block; margin-top:7px; color:var(--muted); font-size:var(--type-body); }
.relation-node em { display:block; margin-top:10px; color:#9b765e; font:650 12px/1.35 system-ui,sans-serif; letter-spacing:.07em; text-transform:uppercase; }
.relationship-note { margin:18px 0 0; color:#8f806f; font-size:var(--type-body); }

@media (max-width:900px) {
  .people-grid,.relation-tier { grid-template-columns:repeat(2,1fr); }
  .world-heading,.world-prose { grid-template-columns:1fr; gap:var(--space-xl); }
  .world-heading > p { max-width:760px; }
  .atlas-register { grid-template-columns:1fr; }
  .atlas-map { max-width:680px; margin:0 auto; }
  .relation-node.origin { grid-column:auto; }
  .archive-entry::before { left:-12px; }

  /* Mobil: Timeline an den linken Rand, keine wechselnde Spaltenanordnung
     mehr, Bild immer oberhalb des Texts, Ziffer kleiner. */
  .chronicle-timeline::before { left:17px; }
  .chronicle-entry { grid-template-columns:1fr; column-gap:0; padding:3rem 0 4rem 40px; }
  .chronicle-entry:nth-child(even) .chronicle-media,
  .chronicle-entry:nth-child(even) .chronicle-content { order:initial; }
  .chronicle-media { inline-size:100%; max-width:none; justify-self:stretch; margin-bottom:22px; }
  .chronicle-marker { left:17px; top:8px; }
  .chronicle-entry--major .chronicle-marker { top:6px; }
  .chronicle-number { left:0; top:0; transform:none; font-size:calc(clamp(3.4rem,20vw,5rem) + 1px); line-height:1; }
  .chronicle-entry:nth-child(even) .chronicle-date,
  .chronicle-date { flex-direction:row; justify-content:flex-start; }
  .chronicle-entry:nth-child(even) .chronicle-date::before,
  .chronicle-date::before { background:linear-gradient(90deg,transparent,var(--gold)); }
  .chronicle-entry:nth-child(odd) .chronicle-media,
  .chronicle-entry:nth-child(even) .chronicle-media {
    -webkit-mask-image:none; mask-image:none;
  }
}
/* ─── 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 Einträge aus dem Rand des horadrischen Archivs. */
.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(--gold); font:400 calc(.78rem + 1px)/1 Georgia,serif; }
.lore-note span { display:block; margin-bottom:2px; color:#b89161; font:400 var(--type-note)/1 'Jim Nightshade','Spectral',Georgia,serif; transform:rotate(.55deg); }
.lore-note--uncertain { color:#cfb99a; }

@media (max-width:680px) {
  .nav { padding:0 18px; min-height:75px; gap:16px; }
  .subnav-inner { padding:0 18px; gap:22px; }

  .brand-logo { height:38px; }
  .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; }
  .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); }
  #chronik,.block:has(+ .section-divider) { padding-bottom:var(--space-divider-clearance-mobile); }
  .section-divider + .block { --divider-content-offset:96px; padding-top:var(--divider-content-offset); }
  .section-divider + .sanctuary-bg-leather > .block:first-child { --divider-content-offset:96px; padding-top:var(--divider-content-offset); }
  .lore-lead,.people-grid,.relation-tier { grid-template-columns:1fr; }
  .archive-entry { display:block; padding:28px 0 30px 18px; }
  .archive-entry::before { top:37px; left:1px; }
  .archive-entry h3 { margin-top:10px; }
  .archive-entry p { margin:13px 0 0; }
  .archive-entry dl { gap:12px 28px; margin-top:18px; }
  .archive-list--figures { columns:1; }
  .sanctuary-world { padding-top:var(--space-feature-mobile); padding-bottom:var(--space-feature-mobile); }
  .world-heading > p { padding-left:var(--space-md); }
  .world-facts { padding-left:var(--space-md); }
  .atlas-heading { display:block; }
  .atlas-heading p { margin-top:14px; text-align:left; }
  .atlas-register { gap:var(--space-lg); padding-top:0; }
  .atlas-map { padding:8px 0; }
  .atlas-entry { grid-template-columns:34px minmax(0,1fr) 18px; gap:10px; }
  .footer-inner { flex-direction:column; align-items:flex-start; }
  .footer-meta { align-items:flex-start; }
  .lore-note { padding-left:18px; }
}

/* Mobil: Text steht über der vollen Bildbreite, die seitliche Verdunklung (nur linke Hälfte) reicht dafür nicht - eigener Lesehintergrund hinter dem Textblock, läuft nach oben weich aus. */
@media (max-width:760px) {
  .region-hero-content { padding-top:92px; background:linear-gradient(to top,rgba(7,5,4,.84) 0%,rgba(7,5,4,.68) 60%,rgba(7,5,4,0) 100%); }
}

/* Chronik mobil: nur der erste Absatz je Eintrag, Rest per Button (siehe
   js/chronicle-collapse.js); Fensterbilder schmaler, damit ein Eintrag nicht
   fast zwei Bildschirme einnimmt. */
.chronicle-more { margin-top:14px; padding:10px 0; color:var(--gold); background:none; border:0; border-bottom:1px solid rgba(196,154,80,.45); font:700 12px/1 system-ui,sans-serif; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; }
.chronicle-more:hover,.chronicle-more:focus-visible { color:#e3cfa8; border-bottom-color:#e3cfa8; }
.chronicle-more[hidden] { display:none; }
@media (max-width:760px) {
  .chronicle-copy.is-collapsed > p:nth-of-type(n+2) { display:none; }
  .chronicle-media { inline-size:min(100%,280px); justify-self:center; margin-inline:auto; }
}