@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; }
/* Ohne dies erzeugt das inline SVG (leeres <svg width=0 height=0>, aber
   display:inline) eine Zeilenbox in eigener Höhe vor dem Header - der
   Header "rutscht" dadurch sichtbar nach unten. */
.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:#0a0c10 url('../img/texturen/section-heaven-seamless.webp') top center/1400px repeat; }
body::before { content:""; position:fixed; inset:0; z-index:-1; background:rgba(10,12,16,.7); }
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%); }
/* Zweiter Hintergrund ab "Der Angiris-Rat": eigenes, deckendes background
   auf dem Wrapper statt body-weit, damit der Wechsel exakt an der Sektion
   beginnt. Die Abdunkelung wird hier als Gradient-Layer im selben
   background-Stack repliziert (statt sich auf body::before zu verlassen),
   weil ein normal positioniertes Element sonst vor dem fixed z-index:-1
   Overlay liegt und es komplett verdecken würde.
   TODO: section-leather-seamless.webp ist nur ein Platzhalter, bis eine
   passende Heaven-Textur feststeht. */
.heaven-bg-alt { background:linear-gradient(rgba(10,12,16,.55),rgba(10,12,16,.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
   sanctuary.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; }

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> mit position:absolute + filter:
   letzteres erzeugte in manchen Browsern eine sichtbare Artefakt-Kante am
   Übergang der Alpha-Fade (Compositing-Layer der gefilterten, teiltransparenten
   Ebene). Farbkorrektur (saturate/contrast/brightness) ist stattdessen direkt
   in heaven-header-final.webp gebacken. background-position:center bottom
   hält den unteren, vollständig transparenten Bildrand bei jeder
   Viewport-Breite exakt an der Hero-Unterkante. */
/* Höhe wächst auf breiten Viewports mit (42.85vw = 100vw/2.3337, dem
   Seitenverhältnis von heaven-header-final.webp), statt starr bei 720px zu
   bleiben: bei fixer Höhe wird der Container bei breiten Fenstern immer viel
   breiter als das Foto, wodurch background-size:cover immer mehr vom oberen
   Bildinhalt wegschneiden muss. 88vh deckelt die Höhe weiterhin auf
   kurzen/breiten Viewports. Der Content wandert dadurch bei breiten
   Viewports mit nach unten — identisches, bewusstes 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/heaven/heaven-header-final.webp') center bottom/cover no-repeat; }
/* Nur horizontale Linksverdunklung für Textlesbarkeit. Ein harter Schnitt
   (z.B. bottom:38%) erzeugt selbst eine sichtbare Kante, weil die
   Verdunklung dort abrupt endet statt auszulaufen. Stattdessen blendet eine
   Maske die Verdunklung linear genau in der bild-eigenen Alpha-Fade-Zone
   (62%–100% der Höhe) aus — 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%; }
.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; }
.region-hero h1 { max-width:820px; 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); }

/* ─── Content Blocks ───────────────────────────────────────── */
main { overflow:clip; display:flow-root; }
.block { max-width:1200px; margin:auto; padding:var(--space-section) var(--page-gutter); }
.block + .block { border-top:1px solid var(--line); }
.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); }
.block > p { max-width:780px; color:#c2b6a6; font-size:var(--type-body); }
.block > p + p { margin-top:16px; }

/* ─── Wesen der Hohen Himmel: 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 ─────────────────────────────────── */
.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 + .heaven-bg-alt > .block:first-child { padding-top:var(--space-divider-clearance); }
.section-divider img {
  content:url('../img/heaven/divider-heaven-ornament.webp');
  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(120,160,220,.35));
  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(160,205,255,.72) 0%,rgba(196,154,80,.38) 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/heaven/divider-heaven-line.webp') center/107.6% 70px no-repeat;
  filter:drop-shadow(0 0 4px rgba(140,175,220,.3));
}
@media (max-width:680px) { .section-divider { width:calc(100vw - 28px); } }

/* Angiris-Rat: Intro-Absatz nutzt die volle Content-Breite statt der
   700px-Vorgabe von .block-head p (mehr Text als bei den anderen
   Abschnitten), zusätzlicher Abstand vor dem Slider-Breakout. */
#rat .block-head h2 { margin-bottom:6px; }
#rat .block-head p { max-width:none; line-height:var(--type-leading); }
#rat .block-head p + p { margin-top:22px; }
.council-overview-facts { padding-top:24px; margin-top:32px !important; border-top:1px solid var(--line); }

/* ─── Angiris-Rat: vollflächiger Portrait-Slider, 1:1 Sprache des
   Regions-Sliders .world auf der Startseite. Die Querformat-Renders sind
   bereits so komponiert wie die Weltkarten-Hintergründe (Figur links,
   Architektur/Himmel rechts), daher passt der linksbündige Text-Gradient
   von .world hier direkt. ─────────────────────────────────────────── */
.council-wrap { position:relative; }
/* Höhe wächst mit der Breite mit (analog zum Regions-Hero-Fix): bei fixer
   Höhe wird die Box bei breiten Screens sehr viel breiter als die 16:9-
   Bilder, wodurch object-fit:cover immer mehr vom Bild vertikal wegschneiden
   muss — inklusive der Köpfe, die nahe am oberen Bildrand sitzen. */
.council-slider { position:relative; left:50%; width:100vw; min-height:min(max(820px,46vw),90vh); margin-bottom:6px; transform:translateX(-50%); overflow:hidden; isolation:isolate; border-block:1px solid var(--line); background:#090807; }
.council-slide { position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .75s ease,visibility .75s; }
.council-slide.active { opacity:1; visibility:visible; z-index:1; }
.council-portrait { position:absolute; inset:-2%; width:104%; height:104%; object-fit:cover; object-position:22% 8%; transform:scale(1.035); transition:transform 7s ease; filter:saturate(.92) contrast(1.05); }
.council-slide.active .council-portrait { transform:scale(1); }
.council-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%); }
.council-info { position:absolute; z-index:3; right:max(32px,calc((100vw - 1200px)/2)); bottom:clamp(150px,20vh,220px); width:min(560px,calc(100vw - 64px)); }
.council-info .type { color:var(--gold); font:700 calc(.72rem + 1px)/1 system-ui,sans-serif; letter-spacing:.16em; text-transform:uppercase; }
.council-info h3 { margin:13px 0 0; font-size:clamp(2.2rem,4.6vw,3.2rem); line-height:.95; text-shadow:0 3px 25px #000; }
.council-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; }
.council-facts { display:flex; flex-wrap:wrap; gap:18px 30px; margin:22px 0 0; }
.council-facts div { display:grid; gap:6px; }
.council-facts dt { color:#987d68; font:700 12px/1 system-ui,sans-serif; letter-spacing:.13em; text-transform:uppercase; }
.council-facts dd { margin:0; color:#eee4d8; font-size:var(--type-body); }
.council-controls { position:absolute; z-index:5; left:50%; bottom:64px; width:min(1200px,calc(100vw - 64px)); transform:translateX(-50%); display:grid; grid-template-columns:48px minmax(0,1fr) 48px; align-items:center; gap:16px; }
.council-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; }
.council-arrow:hover,.council-arrow:focus-visible { border-color:#a96549; background:#26140f; }
.council-tabs { display:flex; overflow-x:auto; scrollbar-width:none; border-top:1px solid rgba(207,183,158,.23); }
.council-tabs::-webkit-scrollbar { display:none; }
.council-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; }
.council-tab::after { content:""; position:absolute; top:-1px; left:0; right:0; height:2px; background:transparent; transition:background .2s ease; }
.council-tab:hover { color:#c9bba8; }
.council-tab.active { color:var(--gold); }
.council-tab.active::after { background:var(--gold); }
@media (max-width:760px) {
  .council-slider { min-height:820px; }
  .council-slide::after { background:linear-gradient(0deg,rgba(9,8,7,.83) 0%,rgba(9,8,7,.63) 52%,rgba(9,8,7,.31) 100%); }
  .council-info { right:22px; bottom:130px; width:calc(100vw - 44px); }
  .council-facts { gap:14px 22px; }
  .council-controls { bottom:60px; width:calc(100vw - 30px); grid-template-columns:40px minmax(0,1fr) 40px; gap:7px; }
  .council-arrow { width:40px; height:40px; font-size:calc(1.1rem + 1px); }
  .council-tab { min-width:96px; font-size:12px; padding:14px 8px 0; }
}
/* Mobil: Porträt oben, Text darunter im normalen Fluss (siehe hoelle.css) -
   verhindert, dass lange Einträge oben aus dem Slider ragen und der Name
   abgeschnitten wird. */
@media (max-width:760px) {
  .council-slider { min-height:0; }
  .council-track { display:grid; }
  .council-slide { position:relative; inset:auto; grid-area:1/1; display:flex; flex-direction:column; }
  .council-slide::after { display:none; }
  .council-portrait,.council-slide.active .council-portrait { position:relative; inset:auto; width:100%; height:min(100vw,440px); transform:none; transition:none; object-position:22% 10%; -webkit-mask-image:linear-gradient(#000 58%,transparent); mask-image:linear-gradient(#000 58%,transparent); }
  .council-info { position:relative; right:auto; bottom:auto; width:auto; margin:-64px 22px 28px; }
  .council-controls { position:relative; left:auto; bottom:auto; transform:none; width:auto; margin:18px 15px 64px; }
}
@media (prefers-reduced-motion:reduce) { .council-slide,.council-portrait { transition:none; } }

/* ─── Codex-Kapitel: fließender Buchsatz statt Website-Bausteinen ───
   Ab hier (Himmel & Sanktuario, Der Fall, Wichtige Orte, Weiterführend)
   liest sich die Seite wie ein Kapitel im Kompendium statt wie eine
   Sammlung von UI-Karten/Grids — eine ruhige Textspalte, Drop-Cap am
   Kapitelanfang, Marginalien statt Timeline-Widget. */
.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-lede { color:var(--gold); font-style:italic; font-weight:600; }

/* Zweispaltiger Buchsatz für den längsten reinen Fließtext-Abschnitt — nutzt
   den Platz rechts, der bei der schmalen einspaltigen codex-text-Spalte
   sonst leer bliebe, und liest sich durch die Mittellinie wie eine
   aufgeschlagene Buchseite. */
.codex-columns { max-width:980px; column-count:2; column-gap:56px; column-rule:1px solid var(--line); }
.codex-columns p { break-inside:avoid; }
@media (max-width:900px) { .codex-columns { column-count:1; } }

/* Der Fall der Hohen Himmel: Era-Name als Marginalie links neben dem
   Absatz statt als eigenständiges Timeline-UI mit Punkten/Linie. */
.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 — nutzt
   den sonst leeren Raum rechts der schmalen Textspalte, läuft bewusst leicht
   unter den rechten Textrand statt hart daneben zu stehen. Text bleibt via
   z-index über der Deko lesbar. */
.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; } }

/* Optisch hervorgehobener Hinweis auf die Abwesenheit des Himmels in Diablo IV —
   gleiches Prinzip wie die Lilith-Notiz bei den Übeln, aber in kühlerem Gold/Bone
   statt Blutrot, damit es zum himmlischen statt infernalischen Ton passt.
   Quote-Mark-Ornament oben links wie eine illuminierte Initiale. */
.heaven-note { position:relative; margin-top:32px; padding:22px 26px 22px 66px; max-width:680px; border-left:3px solid var(--gold); background:rgba(196,154,80,.07); color:var(--bone); font:italic 400 var(--type-body)/var(--type-leading) 'Spectral',Georgia,serif; }
.heaven-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; }

/* ─── Wichtige Orte: Register wie im Anhang eines Buches ───────── */
.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); }

/* ─── Weiterführend im Codex: „Siehe auch" statt Karten-Grid ───── */
.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); }

/* ─── Weiterreisen-Navigation (Seitenende) ─────────────────────── */
.journey-nav { max-width:1200px; margin:0 auto; padding:var(--space-section-mobile) var(--page-gutter) var(--space-section); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; }
.journey-link {
  display:flex; flex-direction:column; gap:6px; padding:18px 22px; text-decoration:none; color:var(--muted);
  border:8px solid transparent; border-image-source:url('../img/buttons/back.webp'); border-image-slice:16 fill; border-image-width:8px; border-image-repeat:stretch;
  transition:filter .2s ease;
}
.journey-link:hover,.journey-link:focus-visible { filter:brightness(1.25); }
.journey-link .journey-label { color:#8f8276; font:700 12px/1 system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.journey-link strong { color:var(--bone); font-family:'Marcellus',Georgia,serif; font-weight:400; letter-spacing:.02em; text-transform:uppercase; font-size:var(--type-body); }
.journey-link.next { text-align:right; align-items:flex-end; border-image-source:url('../img/buttons/next.webp'); }
.journey-all {
  justify-self:center; display:inline-flex; align-items:center; gap:10px; padding:12px 20px; color:#8f8276; text-decoration:none;
  font:700 calc(.7rem + 1px)/1 system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
  border:7px solid transparent; border-image-source:url('../img/buttons/overview.webp'); border-image-slice:15 fill; border-image-width:7px; border-image-repeat:stretch;
  transition:filter .2s ease;
}
.journey-all::before,.journey-all::after { content:none; }
.journey-all:hover,.journey-all:focus-visible { color:var(--bone); filter:brightness(1.25); }

/* ─── Footer (site-weit einheitlich) ───────────────────────────── */
footer { margin-top:0; 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(--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); }
  .block:has(+ .section-divider) { padding-bottom:var(--space-divider-clearance-mobile); }
  .section-divider + .block,
  .section-divider + .heaven-bg-alt > .block:first-child { padding-top:var(--space-divider-clearance-mobile); }
  .journey-nav { grid-template-columns:1fr; padding-left:var(--page-gutter-mobile); padding-right:var(--page-gutter-mobile); text-align:left; }
  .journey-link.next { text-align:left; align-items:flex-start; }
  .journey-all { justify-self:start; }
  .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%); }
}

/* Mobil: Slider-Navigation dockt am unteren Viewport-Rand an, solange der
   Slider im Bild ist (siehe hoelle.css). */
@media (max-width:760px) {
  .council-controls + .section-divider { margin-top:72px; }
  .council-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); }
}