@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; }
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%); }
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/hoelle.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); }

/* ─── Region-Hero ──────────────────────────────────────────── */
/* Bild als background-image (per Inline-style pro Seite) statt <img> mit
   position:absolute + filter — letzteres erzeugte in manchen Browsern eine
   sichtbare Artefakt-Kante am Übergang der Alpha-Fade. Farbkorrektur
   (saturate/contrast/brightness) ist direkt in den region-*-fade.webp
   gebacken. background-position:center bottom hält den unteren, vollständig
   transparenten Bildrand bei jeder Viewport-Breite exakt an der Hero-
   Unterkante — bei background-size:cover wird sonst je nach Breite
   unterschiedlich viel vom Rand weggeschnitten, was bei "center 34%" bei
   breiten Fenstern genau die untere Fade-Zone gekappt hat. */
/* Höhe wächst auf breiten Viewports mit (50vw), statt starr bei 720px zu
   bleiben: bei fixer Höhe wird der Container bei breiten Fenstern immer viel
   breiter als die 16:9-Fotos, wodurch background-size:cover immer mehr vom
   oberen Bildinhalt wegschneiden muss (bottom-Position hält zwar die
   Fade-Zone sichtbar, aber dann verschwindet zu viel vom eigentlichen Motiv
   darüber). 88vh deckelt die Höhe weiterhin auf kurzen/breiten Viewports. */
.region-hero { position:relative; min-height:min(max(720px,50vw),88vh); display:flex; align-items:flex-end; overflow:hidden;
  background-position:center bottom; background-size:cover; background-repeat:no-repeat; }
/* Nur noch horizontale Linksverdunklung für Textlesbarkeit — kein vertikaler
   Verlauf mehr: der würde sich mit der bild-eigenen Alpha-Fade-Kurve am
   unteren Rand überlagern und dort eine sichtbare Ringkante erzeugen (siehe
   himmel-v2.css). Der frühere ::before-Textur-Fade-Layer (eigene gekachelte
   Kopie der Fels-Textur) ist komplett entfallen: die Transparenz kommt jetzt
   aus dem Bild selbst, es scheint exakt dieselbe body-Textur-Instanz durch,
   keine zweite, unabhängig phasenverschobene Kachelung mehr möglich. */
/* 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%; }
.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); }

/* Experiment: Leder-Textur der Startseite (#uebel) unterhalb des
   Atmosphäre-Bilds statt der normalen Fels-Textur — volle Viewport-Breite
   per left:50%/translateX(-50%)-Breakout, wie auf der Startseite. */
#orte { position:relative; isolation:isolate; }
#orte::before {
  content:""; position:absolute; z-index:-1; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%); pointer-events:none;
  background:
    linear-gradient(90deg,#090807 0%,rgba(9,8,7,.15) 13%,rgba(9,8,7,.15) 87%,#090807 100%),
    linear-gradient(rgba(9,8,7,.68),rgba(9,8,7,.68)),
    url('../img/texturen/section-leather-seamless.webp') top center/1400px repeat;
}
.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; }

.location-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:42px; }
.location-card { position:relative; padding:24px; border:1px solid var(--line); background:linear-gradient(145deg,#171310,#100e0c); }
.location-card::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;
}
.location-card .type { color:var(--gold); font:700 12px/1 system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.location-card h3 { margin-top:14px; font-size:1.35rem; }
.location-card p { margin:12px 0 0; color:var(--muted); font-size:var(--type-body); }

/* ─── Region-Nav (prev/next) ───────────────────────────────── */
.region-nav { max-width:1200px; margin:0 auto; padding:0 24px 90px; display:flex; justify-content:space-between; gap:16px; }
.region-nav a { display:inline-flex; align-items:center; gap:8px; padding:13px 18px; border:1px solid var(--line); color:var(--muted); text-decoration:none; font:700 calc(.74rem + 1px)/1 system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; transition:border-color .2s ease,color .2s ease; }
.region-nav a:hover,.region-nav a:focus-visible { color:var(--bone); border-color:#8b5540; }
.region-nav .all { margin:0 auto; }

@media (max-width:900px) {
  .location-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:680px) {
  .nav { padding:0 18px; min-height:75px; gap:16px; }
  .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:38px; }
  .region-hero-content,.block,.region-nav { padding-left:18px; padding-right:18px; }
  .location-grid { grid-template-columns:1fr; }
  .region-nav { flex-wrap:wrap; }
}

/* ═══════════════════════════════════════════════════════════════
   ATLAS-LAYOUT (editorial überarbeitete Regionsseiten-Struktur)
   Eigene Klassen, damit die bestehenden Regeln oben für Seiten,
   die noch nicht umgestellt sind, unverändert weiterlaufen.
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. Region im Überblick ───────────────────────────────────
   Die Karte ist kein Bild-Container mehr, sondern eine große, freigestellte
   Fläche, die rechts bis an den Viewport-Rand reicht und über vier
   gekreuzte Masken-Verläufe (mask-composite:intersect) weich in den
   dunklen Seitenhintergrund ausläuft — stark nach links/unten, nur
   angedeutet oben/rechts. Kein Rahmen, kein Schlagschatten, keine Box:
   die Karte liegt als atmosphärische Fläche HINTER dem Text, nicht daneben
   in einem eigenen Container. */
.overview-block { position:relative; overflow:hidden; padding:var(--space-feature) 0; min-height:1260px; }
.overview-content { max-width:1200px; margin:0 auto; padding:0 24px; position:relative; z-index:1; }
.overview-intro { max-width:640px; }
.overview-intro > p { margin:0 0 30px; color:#c2b6a6; font-size:var(--type-body); line-height:var(--type-leading); }
.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; }
.meta-block.danger { border-left-color:#6b241c; }
.meta-block.danger .meta-label { color:#c96a4f; }

.overview-map-stage { position:absolute; top:50%; right:140px; transform:translateY(-50%); width:min(1420px,86vw); z-index:0; pointer-events:none; }
.region-map-real { position:relative; }
/* map_new.webp hat bereits einen sauberen Alpha-Zuschnitt (keine helle Nebel-Aura
   mehr wie die alte Vorlage) — die Karte muss also nicht mehr freigekämpft werden,
   sondern nur noch farblich/stofflich in die Fels-Textur der Seite eingefärbt werden.
   mix-blend-mode:multiply lässt die darunterliegende Textur durch die Kartenfarben
   hindurchscheinen, wodurch die Karte wie direkt auf den Fels gemalt wirkt statt
   wie ein separates Bild obenauf zu liegen. */
.region-map-img {
  display:block; width:100%; height:auto; opacity:.8;
  filter:saturate(.58) brightness(.8) sepia(.14) contrast(1.04);
  mix-blend-mode:multiply;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 40%),
    linear-gradient(to top, transparent 0%, #000 46%),
    linear-gradient(to left, transparent 0%, #000 12%),
    linear-gradient(to bottom, transparent 0%, #000 14%),
    radial-gradient(ellipse 82% 82% at 60% 48%, #000 50%, transparent 94%);
  -webkit-mask-composite: source-in, source-in, source-in, source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 40%),
    linear-gradient(to top, transparent 0%, #000 46%),
    linear-gradient(to left, transparent 0%, #000 12%),
    linear-gradient(to bottom, transparent 0%, #000 14%),
    radial-gradient(ellipse 82% 82% at 60% 48%, #000 50%, transparent 94%);
  mask-composite: intersect, intersect, intersect, intersect;
}
/* Der Marker sitzt mit der runden Öffnung seines Ornaments exakt auf der
   Ziel-Koordinate (left/top im HTML) — nicht mit seiner eigenen Bild-Mitte,
   da das Ornament nach unten hin als Dorn ausläuft und die Öffnung dadurch
   im oberen Drittel der Grafik liegt (per Pixelanalyse ermittelt: 50.04%/34.2%
   der Bildfläche). transform:translate versetzt die Box entsprechend, sodass
   die Öffnung unabhängig von der gewählten Größe präzise auf dem Punkt bleibt. */
.region-map-marker { position:absolute; width:92px; height:92px; transform:translate(-50.04%,-34.2%); pointer-events:none; z-index:1; }
.region-map-marker::before {
  content:""; position:absolute; inset:0;
  background:url('../img/gemeinsam/mapmarker.webp') center/contain no-repeat;
  filter:drop-shadow(0 0 10px rgba(190,55,22,.5));
}
.region-map-marker::after {
  content:""; position:absolute; left:50.04%; top:34.2%; width:11px; height:11px; margin:-5.5px 0 0 -5.5px;
  border-radius:50%; background:#fff0d9;
  box-shadow:
    0 0 0 4px rgba(255,215,165,.22),
    0 0 9px 3px rgba(255,200,135,1),
    0 0 22px 9px rgba(225,115,42,.68);
  animation:map-glow-pulse 7s ease-in-out infinite;
}
@keyframes map-glow-pulse {
  0%,100% { opacity:.6; }
  50% { opacity:1; }
}
@media (prefers-reduced-motion:reduce) {
  .region-map-marker::before,.region-map-marker::after { animation:none; opacity:.85; }
}
.overview-map-caption { position:absolute; left:50%; bottom:4%; transform:translateX(-50%); margin:0; color:#7d7160; font-size:calc(.72rem + 1px); letter-spacing:.02em; text-align:center; opacity:.75; white-space:nowrap; }

@media (max-width:1200px) {
  .overview-map-stage { width:min(980px,78vw); }
}
@media (max-width:900px) {
  .overview-block { overflow:visible; min-height:0; padding:var(--space-feature-mobile) var(--page-gutter) 0; }
  .overview-content { padding:0; }
  .overview-intro { max-width:none; }
  .overview-map-stage { position:relative; top:auto; right:auto; transform:none; width:100%; margin-top:56px; padding-bottom:var(--space-feature-mobile); }
  .overview-map-caption { position:static; transform:none; margin-top:14px; white-space:normal; }
}
@media (max-width:680px) {
  .overview-block { padding-left:18px; padding-right:18px; }
}

/* ─── 2. Atmosphäre (volle Breite, Landschaftsbild + Schlagworte) ─ */
/* <main> trägt selbst kein max-width, daher ist dieser Block schon ohne 100vw-Trick
   randlos — vermeidet den bekannten Scrollbar-Rundungsfehler der left:50%/100vw-Technik. */
.atmosphere-block { position:relative; }
.atmosphere-visual { position:relative; width:100%; aspect-ratio:12/5; min-height:clamp(520px,56vw,760px); max-height:760px; background:
  repeating-linear-gradient(135deg,rgba(196,154,80,.05) 0 2px,transparent 2px 26px),
  linear-gradient(180deg,#14100c 0%,#0c0a08 100%); overflow:hidden; }
.atmosphere-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%; filter:saturate(.8) contrast(1.06) brightness(.66); }
.atmosphere-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(9,8,7,.55) 0%,rgba(9,8,7,.15) 40%,rgba(9,8,7,.4) 100%),linear-gradient(90deg,rgba(9,8,7,.35),transparent 30%,transparent 70%,rgba(9,8,7,.35)); pointer-events:none; }
.atmosphere-visual-tag { position:absolute; left:50%; bottom:20px; transform:translateX(-50%); color:#6b5e4f; font:650 12px/1 system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase; }
.atmosphere-words { position:absolute; z-index:1; inset:0; display:flex; align-items:center; justify-content:center; gap:clamp(14px,3vw,34px); flex-wrap:wrap; padding:24px; text-align:center; }
.atmosphere-words span { color:var(--bone); font-family:'Marcellus',Georgia,serif; font-weight:400; letter-spacing:.1em; text-transform:uppercase; font-size:calc(clamp(1.3rem,3.6vw,2.5rem) + 1px); filter:url(#grunge); opacity:.95; text-shadow:0 3px 18px rgba(0,0,0,.85); }
.atmosphere-words span + span::before { content:"—"; display:inline-block; margin-right:clamp(14px,3vw,34px); color:#5c4530; }
@media (max-width:680px) {
  .atmosphere-visual { aspect-ratio:4/3; min-height:440px; max-height:none; }
  .atmosphere-words { flex-direction:column; flex-wrap:nowrap; gap:16px; }
  .atmosphere-words span + span::before { display:block; margin:0 0 8px; text-align:center; }
}

/* Unser site-weiter Zier-Divider (gleiches Motiv wie auf der Startseite), hier
   anstelle der schlichten Rahmenlinien vor/nach dem Atmosphäre-Bild. */
.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; }
.overview-block:has(+ .section-divider) { padding-bottom:var(--space-divider-clearance); }
.section-divider + .block { padding-top:var(--space-divider-clearance); }
.section-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(80,10,5,.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(235,100,38,.72) 0%,rgba(190,60,22,.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; } }
@keyframes divider-glow-line { 0%,100% { filter:drop-shadow(0 0 4px rgba(157,42,20,.36)); } 50% { filter:drop-shadow(0 0 10px rgba(220,72,25,.72)); } }
@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/gemeinsam/section-divider-line.webp') center/107.6% 70px no-repeat;
  filter:drop-shadow(0 0 4px rgba(157,42,20,.3));
  animation:divider-glow-line 8s ease-in-out infinite; animation-delay:-2s;
}
@media (prefers-reduced-motion:reduce) { .section-divider::before { animation:none; } }
@media (max-width:680px) { .section-divider { width:calc(100vw - 28px); } }
@media (max-width:680px) {
  .overview-block:has(+ .section-divider) { padding-bottom:var(--space-divider-clearance-mobile); }
  .section-divider + .block { padding-top:var(--space-divider-clearance-mobile); }
}

/* ─── 3. Bedeutende Orte – asymmetrisches Showcase ────────────── */
.showcase-grid { display:grid; grid-template-columns:1.5fr 1fr; grid-template-rows:auto auto; gap:44px 40px; }
.showcase-card { position:relative; display:flex; flex-direction:column; }
.showcase-card .image-placeholder { aspect-ratio:4/3; }
.showcase-main { grid-column:1; grid-row:1 / 3; }
.showcase-main .image-placeholder { aspect-ratio:16/12; }
.showcase-minor:nth-of-type(2) { grid-column:2; grid-row:1; }
.showcase-minor:nth-of-type(3) { grid-column:2; grid-row:2; }
.showcase-minor .image-placeholder { aspect-ratio:16/10; }

.image-placeholder { position:relative; width:100%; background:
  repeating-linear-gradient(45deg,rgba(196,154,80,.04) 0 2px,transparent 2px 22px),
  linear-gradient(160deg,#181410,#100e0c); border:1px solid var(--line); }
.image-placeholder::after { content:"Bild folgt"; position:absolute; left:50%; bottom:12px; transform:translateX(-50%); color:#5c5142; font:650 12px/1 system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase; }
.showcase-image { margin:0; overflow:hidden; background:none; }
.showcase-image::after { content:none; }
.showcase-image img { display:block; width:100%; height:100%; object-fit:cover; }

/* Die regionalen Assets sind echte CSS-border-images: Der Rahmen gehört zum
   Bildcontainer selbst statt als versetztes Overlay über dem Bild zu liegen. */
.showcase-card .image-placeholder {
  /* Die breite Rahmen-Grafik darf keinen Platz vom Foto wegnehmen.
     Eine echte 1px-Border hält die Boxgeometrie, border-image-width
     zeichnet den Rahmen lediglich darüber. */
  border:1px solid transparent;
  border-image:var(--region-showcase-frame,url('../img/klassen/class-card-frame-subtle.webp')) 150 140 / 36px 26px / 0 stretch;
}
.region-page--zersplitterte-gipfel { --region-showcase-frame:url('../img/regionen/frame-zersplitterte-gipfel.webp'); }
.region-page--trockensteppe { --region-showcase-frame:url('../img/regionen/frame-trockensteppe.webp'); }
.region-page--scosglen { --region-showcase-frame:url('../img/regionen/frame-scosglen.webp'); }
.region-page--kehjistan { --region-showcase-frame:url('../img/regionen/frame-kehjistan.webp'); }
.region-page--hawezar { --region-showcase-frame:url('../img/regionen/frame-hawezar.webp'); }
.region-page--skovos { --region-showcase-frame:url('../img/regionen/frame-skovos.webp'); }
.region-page--nahantu { --region-showcase-frame:url('../img/regionen/frame-nahantu.webp'); }
.showcase-main .image-placeholder {
  border-image-width:48px 34px;
}
.showcase-minor .image-placeholder {
  border-image-width:28px 20px;
}

.showcase-card .type { display:block; margin-top:18px; color:var(--gold); font:700 12px/1 system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.showcase-card h3 { margin-top:10px; font-size:1.4rem; }
.showcase-main h3 { font-size:1.75rem; }
.showcase-card p { margin:10px 0 0; color:var(--muted); font-size:var(--type-body); }

@media (max-width:900px) {
  .showcase-grid { grid-template-columns:1fr; grid-template-rows:auto; }
  .showcase-main { grid-column:1; grid-row:auto; }
  .showcase-minor:nth-of-type(2),.showcase-minor:nth-of-type(3) { grid-column:1; grid-row:auto; }
}

/* ─── 4. Bewohner & Gefahren – zwei Gruppen + Bildfläche ──────── */
.inhabitants-visual { margin-bottom:34px; aspect-ratio:21/6; min-height:160px; }
.inhabitants-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--line); }
.inhabitants-col { padding:26px 30px 0 0; }
.inhabitants-col + .inhabitants-col { padding-left:30px; padding-right:0; border-left:1px solid var(--line); }
.inhabitants-col .group-label { display:block; margin-bottom:10px; color:var(--gold); font:700 12px/1 system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.inhabitants-col.danger .group-label { color:#c96a4f; }
.inhabitants-col p { margin:0; color:#c2b6a6; font-size:var(--type-body); line-height:var(--type-leading); }

@media (max-width:680px) {
  .inhabitants-grid { grid-template-columns:1fr; }
  .inhabitants-col,.inhabitants-col + .inhabitants-col { padding:26px 0 0; border-left:0; border-top:1px solid var(--line); }
  .inhabitants-col:first-child { border-top:0; padding-top:0; }
}

/* ─── 5. Verbindung zur Geschichte – Chronik-Zeitleiste ───────── */
.chronicle { position:relative; list-style:none; margin:0; padding:0 0 0 34px; }
.chronicle::before { content:""; position:absolute; left:6px; top:6px; bottom:6px; width:1px; background:linear-gradient(var(--gold),var(--line) 85%,transparent); opacity:.5; }
.chronicle-entry { position:relative; padding-bottom:38px; }
.chronicle-entry:last-child { padding-bottom:0; }
.chronicle-marker { position:absolute; left:-34px; top:5px; width:13px; height:13px; background:#100e0c; border:1.5px solid var(--gold); transform:rotate(45deg); }
.chronicle-era { display:block; margin-bottom:8px; color:var(--gold); font:700 12px/1 system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.chronicle-entry p { margin:0; max-width:680px; color:#c2b6a6; font-size:var(--type-body); line-height:var(--type-leading); }

/* ─── 6. 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: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; }

/* Randnotizen ergänzen den Fließtext, ohne dessen Aussage zu ersetzen. */
.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) {
  .block { padding-top:var(--space-section-mobile); padding-bottom:var(--space-section-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%); }
}