/* ============================================================
   MIDGARD 5 — WELT-PORTAL „Das Weltenlied"
   ------------------------------------------------------------
   Bühnen-Layout für portal.html (Tor → Atrium → Kompendium).
   Nutzt die Tokens aus base.css und die Region-Paletten +
   .scene-Crossfade aus themes.css. Hier nur portal-spezifisches.
   ============================================================ */

.portal-body { min-height: 100%; }

/* Bühne über dem .scene-Hintergrund */
.portal {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
}
/* Kompendium nutzt die volle Seite und scrollt */
.portal.is-kompendium {
  display: block;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
}

.portal-audio {
  position: fixed;
  top: 1rem; right: 1.25rem;
  z-index: 7;
}

/* ============================================================
   1 · DAS TOR
   ============================================================ */
.tor {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  text-align: center;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.tor.is-on { opacity: 1; }
.tor.is-leaving { opacity: 0; transition: opacity .7s ease; }

.tor__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  transition: transform 14s ease-out;
}
.tor.is-on .tor__img { transform: scale(1); }   /* sanfter Ken-Burns */

.tor__veil {
  position: absolute;
  inset: 0;
  background:
    /* fokussierter dunkler Schleier hinter dem Logo/Inhalt — gibt der Goldschrift Kontrast */
    radial-gradient(ellipse 62% 48% at 50% 46%, rgba(8,6,3,.66) 0%, rgba(8,6,3,.30) 46%, transparent 72%),
    /* Rand-Vignette (Mitte bleibt frei) */
    radial-gradient(ellipse 88% 78% at 50% 42%, transparent 32%, rgba(10,7,3,.55) 86%),
    /* sanfter Verlauf oben/unten */
    linear-gradient(to bottom, rgba(10,7,3,.45) 0%, rgba(10,7,3,.15) 35%, rgba(10,7,3,.55) 72%, rgba(10,7,3,.92) 100%);
}

.tor__inner {
  position: relative;
  z-index: 1;
  max-width: 46rem;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}
.tor__logo {
  width: min(48rem, 90vw);   /* breite Wortmarke (transparent), prominent am Tor präsentiert */
  height: auto;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.9)) drop-shadow(0 8px 30px rgba(0,0,0,.6));
  opacity: 0;
  transform: translateY(14px);
  animation: torRise 1.4s .25s ease forwards;
}
.tor__eyebrow {
  font-family: var(--f-display);
  letter-spacing: .42em;
  text-transform: uppercase;
  font-size: .82rem;
  color: var(--h-or-bright);
  opacity: 0;
  animation: torRise 1.4s .7s ease forwards;
}
.tor__skalde {
  font-family: var(--f-heading);
  font-style: italic;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  line-height: 1.5;
  color: var(--c-on-stage);
  text-shadow: 0 2px 14px rgba(0,0,0,.7);
  max-width: 40rem;
  opacity: 0;
  animation: torRise 1.8s 1.1s ease forwards;
}
.tor__enter {
  margin-top: 1.4rem;
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: .92rem;
  color: var(--c-parchment-hi);
  background: linear-gradient(180deg, var(--h-gules-bright), var(--h-gules-deep));
  border: 1px solid var(--h-or-deep);
  border-radius: 999px;
  padding: .85rem 2.6rem;
  cursor: pointer;
  box-shadow: 0 8px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.25);
  opacity: 0;
  transform: translateY(14px);
  animation: torRise 1.4s 1s ease forwards;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.tor__enter:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 12px 38px rgba(0,0,0,.55), 0 0 0 3px rgba(200,150,42,.18);
}

@keyframes torRise {
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   2 · DAS ATRIUM
   ============================================================ */
.atrium {
  width: min(64rem, 100%);
  text-align: center;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s ease, transform .9s ease;
}
.atrium.is-on { opacity: 1; transform: none; }

.atrium__eyebrow {
  font-family: var(--f-display);
  letter-spacing: .4em;
  text-transform: uppercase;
  font-size: .78rem;
  color: var(--h-or-bright);
  margin-bottom: .6rem;
}
.atrium__titel {
  font-family: var(--f-heading);
  font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  color: var(--c-on-stage);
  text-shadow: 0 2px 18px rgba(0,0,0,.6);
  margin-bottom: .7rem;
}
.atrium__tagline {
  font-family: var(--f-heading);
  font-style: italic;
  font-size: clamp(1rem, 1.9vw, 1.3rem);
  color: var(--c-on-stage);
  opacity: .85;
  text-shadow: 0 2px 14px rgba(0,0,0,.55);
  max-width: 38rem;
  margin: 0 auto 2.4rem;
}

/* Kompendium-Übersicht: linksbündige Rückleiste über dem zentrierten Titel */
.komp-ueber__topbar {
  text-align: left;
  margin-bottom: 1.6rem;
}

.atrium__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.2rem;
}

.tuer {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  color: var(--c-on-stage);
  border: 1px solid var(--c-stage-edge);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.tuer:hover {
  transform: translateY(-4px);
  border-color: var(--h-or);
  box-shadow: var(--shadow-card), 0 0 0 1px rgba(200,150,42,.25);
}
.tuer__bild {
  position: absolute;
  inset: 0;
  /* Fallback-Grund, falls ein Türbild (noch) fehlt — dunkles Holz/Pergament */
  background-color: #1a140d;
  background-image: radial-gradient(ellipse 90% 70% at 50% 30%, #2a2014 0%, #14100a 80%);
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  transition: transform .35s ease, filter .35s ease;
}
/* Platzhalter-Tür „Digitale Bibliothek" bis ein door-bibliothek.webp geliefert wird:
   großer Gold-Glyph auf dunklem Grund, damit sie bewusst gesetzt wirkt. */
.tuer[href$="bibliothek.html"] .tuer__glyph { font-size: 2.6rem; color: var(--h-or-bright); }
.tuer:hover .tuer__bild { transform: scale(1.07); filter: brightness(1.08); }
.tuer__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(10,7,3,.92) 0%, rgba(10,7,3,.55) 32%, rgba(10,7,3,.10) 62%, rgba(10,7,3,.22) 100%);
}
.tuer__inhalt {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: .35rem;
  padding: 1.4rem 1rem 1.3rem;
  text-align: center;
}
.tuer__glyph {
  font-size: 1.9rem;
  line-height: 1;
  color: var(--h-or-bright);
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
  margin-bottom: .15rem;
}
.tuer__titel {
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: .04em;
  font-size: 1.05rem;
  text-shadow: 0 2px 10px rgba(0,0,0,.75);
}
.tuer__unter {
  font-family: var(--f-heading);
  font-style: italic;
  font-size: .92rem;
  color: var(--c-on-stage-soft);
  text-shadow: 0 1px 8px rgba(0,0,0,.7);
}
.tuer--bald { opacity: .62; cursor: default; }
.tuer--bald:hover { transform: none; border-color: var(--c-stage-edge); box-shadow: var(--shadow-card); }
.tuer--bald:hover .tuer__bild { transform: scale(1.02); filter: none; }
.tuer--bald .tuer__bild { filter: grayscale(.35) brightness(.85); }
.tuer--bald .tuer__unter { text-transform: uppercase; letter-spacing: .3em; font-style: normal; font-size: .72rem; }

/* ---- Welt-Kompendium-Übersicht: Blöcke (Reiche · Völker · Götter) + Großregionen ---- */
.komp-block { margin: 3.2rem auto 0; max-width: 78rem; }
.komp-block:first-of-type { margin-top: 2.4rem; }
.komp-block__kopf { text-align: center; margin-bottom: 1.6rem; }
.komp-block__titel {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: .06em;
  color: var(--h-or-bright);
  text-shadow: 0 2px 14px rgba(0,0,0,.5);
}
.komp-block__titel::before,
.komp-block__titel::after {
  content: "✦"; color: var(--h-or); opacity: .65;
  font-size: .6em; vertical-align: middle; margin: 0 .7em;
}
.komp-block__unter {
  font-family: var(--f-heading); font-style: italic;
  font-size: clamp(.95rem, 1.7vw, 1.12rem);
  color: var(--c-on-stage-soft); margin-top: .3rem;
}

.komp-gruppe { margin-top: 2rem; }
.komp-gruppe:first-of-type { margin-top: .4rem; }
.komp-gruppe__titel {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .35rem .9rem;
  margin: 0 0 1rem; padding-bottom: .55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--h-or) 28%, transparent);
}
.komp-gruppe__zier {
  width: 1.6rem; height: 0; align-self: center;
  border-top: 2px solid var(--h-or); opacity: .8; flex: 0 0 auto;
}
.komp-gruppe__name {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.12rem, 2.1vw, 1.4rem); letter-spacing: .04em;
  color: var(--c-on-stage); text-shadow: 0 1px 10px rgba(0,0,0,.55);
}
.komp-gruppe__unter {
  font-family: var(--f-heading); font-style: italic;
  font-size: .95rem; color: var(--c-on-stage-faded);
}
.komp-block--goetter { text-align: center; padding-bottom: 1rem; }

/* Übersichts-Kacheln in sauberen 4-er Reihen (nur im Welt-Kompendium, nicht im Atrium-Hub).
   Bricht responsiv auf 2 bzw. 1 Spalte herunter. */
.komp-ueber .atrium__grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 60rem) { .komp-ueber .atrium__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 30rem) { .komp-ueber .atrium__grid { grid-template-columns: 1fr; } }

/* ============================================================
   3 · KOMPENDIUM — vollflächige, scrollbare Welt-Seite
   ============================================================ */
.komp { position: relative; z-index: 2; opacity: 0; transition: opacity .8s ease; }
.komp.is-on { opacity: 1; }

/* Rail (fixiert oben, lässt Klicks an den Musikregler durch) */
.komp__rail {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 6;
  pointer-events: none;
  display: flex; align-items: center; gap: .9rem;
  padding: .7rem clamp(1rem, 3vw, 2rem);
  font-family: var(--f-display);
  font-size: .8rem; letter-spacing: .12em;
  background: linear-gradient(to bottom, rgba(12,9,5,.82), rgba(12,9,5,0));
}
.komp__rail > * { pointer-events: auto; }
.rail__back { font: inherit; color: var(--c-on-stage); background: none; border: none; cursor: pointer; padding: .2rem .3rem; transition: color .15s; }
.rail__back:hover { color: var(--h-or-bright); }
.rail__sep { color: var(--h-or); opacity: .7; font-size: .55rem; }
.rail__gruppe { color: var(--h-or-bright); font-family: var(--f-display); letter-spacing: .1em; font-size: .82rem; text-transform: uppercase; }
.rail__regionen { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.rail__region { font: inherit; background: none; border: none; cursor: pointer; color: var(--c-on-stage-faded); letter-spacing: .12em; padding: .1rem 0; transition: color .15s; }
.rail__region.is-active { color: var(--h-or-bright); }
.rail__region.is-locked { opacity: .4; cursor: default; }

/* Hero */
.komp__hero {
  position: relative;
  height: 100vh;
  min-height: 32rem;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.komp__hero-img {
  position: absolute; inset: -2% 0;
  background-size: cover; background-position: center 38%;
  transform: scale(1.08);
  will-change: transform;
}
.komp__hero-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 95% 60% at 30% 82%, rgba(10,7,3,.5), transparent 70%),
    linear-gradient(to top, rgba(10,7,3,.97) 0%, rgba(10,7,3,.5) 30%, rgba(10,7,3,.10) 56%, rgba(10,7,3,.4) 100%);
}
.komp__hero-inner {
  position: relative;
  width: min(60rem, 92vw);
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2rem) clamp(3rem, 8vh, 6rem);
  text-align: center;
}
.komp__wappen {
  display: block;
  width: clamp(6rem, 14vw, 10.5rem); height: clamp(6rem, 14vw, 10.5rem);
  margin: 0 auto clamp(.9rem, 2vw, 1.4rem);
  background-size: contain; background-position: center; background-repeat: no-repeat;
  filter: drop-shadow(0 6px 22px rgba(0,0,0,.62)) drop-shadow(0 1px 3px rgba(0,0,0,.5));
  animation: komp-wappen-ein .7s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes komp-wappen-ein {
  from { opacity: 0; transform: translateY(-8px) scale(.92); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .komp__wappen { animation: none; } }
.komp__claim {
  font-family: var(--f-display);
  letter-spacing: .3em; text-transform: uppercase;
  font-size: clamp(.72rem, 1.4vw, .92rem);
  color: var(--h-or-bright);
  margin-bottom: .5rem;
}
.komp__name {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(3.2rem, 11vw, 8rem);
  line-height: .92;
  color: var(--c-parchment-hi);
  text-shadow: 0 4px 30px rgba(0,0,0,.65);
  letter-spacing: .02em;
}
.komp__atemzug {
  font-family: var(--f-heading);
  font-style: italic;
  font-size: clamp(1.15rem, 2.3vw, 1.7rem);
  line-height: 1.5;
  color: var(--c-on-stage);
  text-shadow: 0 2px 14px rgba(0,0,0,.85);
  max-width: 44rem; margin: 1rem auto 0;
}
.komp__scrollhint {
  position: absolute; bottom: 1.2rem; left: 50%;
  color: var(--h-or-bright); font-size: 1.3rem;
  animation: hint 1.9s ease-in-out infinite;
}
@keyframes hint {
  0%, 100% { transform: translate(-50%, 0); opacity: .45; }
  50%      { transform: translate(-50%, 9px); opacity: 1; }
}

/* Body über dunklem Pergament-Schleier */
.komp__body {
  position: relative;
  background: linear-gradient(to bottom, rgba(18,13,8,.88), rgba(13,9,5,.94));
  border-top: 2px solid var(--h-or-deep);
  padding-bottom: 4rem;
}

/* Scroll-Reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* Spannungen-Band */
.komp__spannungen {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center;
  gap: 1.2rem 1.6rem;
  width: min(62rem, 92vw); margin: 0 auto; padding: 2.8rem 1rem 2.2rem;
}
.sp { text-align: center; flex: 1 1 11rem; }
.sp__pole { display: flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--f-display); font-weight: 600; color: var(--h-or-bright); letter-spacing: .03em; font-size: 1.02rem; }
.sp__pole i { color: var(--h-gules-bright); font-style: normal; font-size: .68rem; opacity: .85; }
.sp__text { display: block; margin-top: .4rem; font-family: var(--f-heading); font-style: italic; color: var(--c-on-stage-soft); font-size: .96rem; line-height: 1.45; }
.sp__sep { align-self: center; width: 1px; height: 2.6rem; background: linear-gradient(var(--h-or-deep), transparent); opacity: .5; }

/* Lese-Spalte */
.komp__lese { width: min(42rem, 90vw); margin: 0 auto; padding: 1.4rem 0; }
.komp__abschnitt { margin-bottom: 2.4rem; }
.komp__h2 {
  display: flex; align-items: center; gap: .7rem;
  font-family: var(--f-display); font-weight: 600;
  font-size: .92rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--h-or-bright);
  margin-bottom: .8rem;
}
.komp__h2-zier { width: 1.7rem; height: 1px; background: linear-gradient(90deg, var(--h-or), transparent); flex: none; }
.komp__h2--center { justify-content: center; }
.komp__abschnitt p {
  font-family: var(--f-body);
  font-size: clamp(1.2rem, 1.6vw, 1.32rem); line-height: 1.8;
  color: var(--c-parchment);
}
.komp__abschnitt.is-erste p::first-letter {
  float: left; font-family: var(--f-display); font-weight: 700;
  font-size: 3.4rem; line-height: .78; padding: .25rem .5rem .1rem 0;
  color: var(--h-gules-bright);
}

/* Stimme (Pull-Quote) */
.komp__stimme {
  position: relative;
  width: min(48rem, 92vw); margin: 1.5rem auto; padding: 2.6rem 1.5rem 2rem;
  text-align: center;
  border-top: 1px solid rgba(200,150,42,.25);
  border-bottom: 1px solid rgba(200,150,42,.25);
}
.komp__stimme-mark { position: absolute; top: -.6rem; left: 50%; transform: translateX(-50%); font-family: var(--f-display); font-size: 4rem; color: var(--h-or); opacity: .4; }
.komp__stimme p { font-family: var(--f-heading); font-style: italic; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.45; color: var(--c-parchment-hi); }
.komp__stimme cite { display: block; margin-top: 1rem; font-family: var(--f-display); font-style: normal; font-size: .82rem; letter-spacing: .1em; color: var(--c-on-stage-faded); }

/* Geschichten */
.komp__geschichten { width: min(64rem, 92vw); margin: 1rem auto; padding: 2rem 0; }
.gesch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.1rem; margin-top: 1.4rem; }
.gesch {
  position: relative;
  background: linear-gradient(180deg, rgba(242,231,205,.97), rgba(230,214,178,.96));
  border: 1px solid var(--c-parchment-edge); border-radius: var(--radius-lg);
  padding: 1.3rem 1.2rem 1.1rem; color: var(--c-ink);
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, box-shadow .2s ease;
}
.gesch:hover { transform: translateY(-4px); box-shadow: var(--shadow-card), 0 0 0 1px rgba(200,150,42,.35); }
.gesch__icon { display: block; width: 2.4rem; height: 2.4rem; margin-bottom: .6rem; background-size: contain; background-position: left center; background-repeat: no-repeat; }
.gesch__titel { font-family: var(--f-display); font-weight: 600; font-size: 1.04rem; color: var(--h-gules-deep); margin-bottom: .35rem; }
.gesch__text { font-size: .98rem; line-height: 1.55; color: var(--c-ink-soft); margin-bottom: .5rem; }
.gesch__quelle { font-family: var(--f-heading); font-style: italic; font-size: .8rem; color: var(--c-ink-faded); }

/* Stichworte */
.komp__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; width: min(48rem, 92vw); margin: 1.5rem auto; }
.chip { font-family: var(--f-display); font-size: .74rem; letter-spacing: .1em; color: var(--c-on-stage-soft); background: rgba(60,46,28,.5); border: 1px solid var(--h-or-deep); border-radius: 999px; padding: .25rem .8rem; }

/* Sage */
.komp__sage { width: min(46rem, 92vw); margin: 1rem auto 0; }
.komp__sage summary { font-family: var(--f-display); font-size: .86rem; letter-spacing: .12em; color: var(--h-or-bright); cursor: pointer; list-style: none; text-align: center; }
.komp__sage summary::-webkit-details-marker { display: none; }
.komp__sage summary::before { content: '❦ '; }
.komp__sage[open] summary::before { content: '❦ '; }
.komp__sage p { margin-top: 1rem; font-family: var(--f-body); font-size: 1.05rem; line-height: 1.75; color: var(--c-parchment); }

/* Quelle */
.komp__quelle { width: min(48rem, 92vw); margin: 2.6rem auto 0; text-align: center; font-size: .78rem; line-height: 1.5; color: var(--c-on-stage-faded); }
.komp__marker { margin: 0 .15rem; }

.fehler { color: var(--h-gules-bright); font-family: var(--f-heading); padding: 4rem; }

@media (prefers-reduced-motion: reduce) {
  .tor, .tor__img, .tor__logo, .tor__eyebrow, .tor__skalde, .tor__enter,
  .atrium, .komp, .reveal, .komp__hero-img, .komp__scrollhint {
    transition: none !important; animation: none !important;
    opacity: 1 !important; transform: none !important;
  }
}

/* ============================================================
   WELT-KOMPENDIUM — Bild-Sektionen (Impressionen) + Lightbox
   ------------------------------------------------------------
   Visuelle Eindrücke je Region (Landschaften, Orte, Siedlungen
   & Städte, Stadt-Szenarien, Charaktere, Kreaturen). Kleine
   Galerie-Karten, per Klick in der Lightbox vergrößerbar.
   Fehlt ein Bild (noch nicht erzeugt), zeigt die Karte einen
   Pergament-Platzhalter — das Layout bleibt intakt.
   ============================================================ */
.komp__bilder { width: min(70rem, 94vw); margin: 1.2rem auto; padding: 1.4rem 0; }
.komp__bilder-intro {
  text-align: center; max-width: 44rem; margin: .4rem auto 1.4rem;
  font-family: var(--f-heading); font-style: italic; font-size: 1.05rem;
  color: var(--c-on-stage-soft); line-height: 1.6;
}
.komp-galerie {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1.1rem;
}
.komp-bild {
  margin: 0; position: relative; cursor: pointer;
  background: linear-gradient(160deg, var(--c-parchment-hi), var(--c-parchment) 60%, var(--c-parchment-deep));
  border: 1px solid var(--c-parchment-edge);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform .16s, box-shadow .16s;
}
.komp-bild:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.komp-bild:focus-visible { outline: 2px solid var(--h-or-bright); outline-offset: 2px; }
.komp-bild__img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .35s ease;
}
.komp-bild:hover .komp-bild__img { transform: scale(1.05); }
/* Platzhalter (Bild fehlt noch) */
.komp-bild__ph {
  display: none; aspect-ratio: 4 / 3; align-items: center; justify-content: center;
  font-size: 2rem; color: var(--h-or-deep); opacity: .5;
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.025) 0 8px, transparent 8px 16px),
    linear-gradient(160deg, var(--c-parchment-hi), var(--c-parchment-deep));
}
.komp-bild--leer { cursor: default; }
.komp-bild--leer:hover { transform: none; box-shadow: var(--shadow-card); }
.komp-bild--leer .komp-bild__img { display: none; }
.komp-bild--leer .komp-bild__ph { display: flex; }
.komp-bild__cap {
  display: block; padding: .6rem .8rem .75rem;
}
.komp-bild__titel {
  display: block; font-family: var(--f-display); font-weight: 700; font-size: .98rem;
  color: var(--c-ink); line-height: 1.25;
}
.komp-bild__text {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: .2rem;
  font-family: var(--f-body); font-size: .82rem; line-height: 1.45; color: var(--c-ink-soft);
}
.komp-bild__cap::after {
  content: 'Mehr erfahren ›';
  display: block; margin-top: .45rem;
  font-family: var(--f-display); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--h-or-deep); opacity: 0; transition: opacity .16s;
}
.komp-bild:hover .komp-bild__cap::after,
.komp-bild:focus-visible .komp-bild__cap::after { opacity: 1; }
.komp-bild--leer .komp-bild__cap::after { display: none; }
.komp-bild--leer .komp-bild__titel::after {
  content: ' · Bild folgt'; font-weight: 400; font-style: italic;
  font-family: var(--f-heading); color: var(--c-ink-faded); font-size: .8rem;
}

/* Lightbox */
.komp-lightbox {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(8,5,2,.86);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 4vh 4vw;
  opacity: 0; transition: opacity .22s ease;
}
.komp-lightbox.is-on { opacity: 1; }
/* „Folianten-Seite": großes Bild OBEN, illuminierte Schrifttafel DARUNTER */
.komp-lightbox__box {
  display: flex; flex-direction: column;
  width: min(1080px, 94vw); max-height: 92vh;
  background: linear-gradient(168deg, var(--c-parchment-hi), var(--c-parchment) 50%, var(--c-parchment-deep));
  border: 1px solid var(--c-parchment-edge); border-radius: var(--radius-lg);
  box-shadow: 0 30px 90px rgba(0,0,0,.7), inset 0 0 60px rgba(120,90,40,.06);
  overflow-y: auto; overflow-x: hidden;
  transform: translateY(14px) scale(.985); transition: transform .3s cubic-bezier(.22,.68,0,1.1);
}
.komp-lightbox.is-on .komp-lightbox__box { transform: none; }

/* Bühne — großes, prominentes Bild vor geblurrter Eigenfüllung */
.komp-lightbox__buehne {
  position: relative; flex: none; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  min-height: 220px; background: var(--c-stage);
  border-bottom: 2px solid color-mix(in srgb, var(--h-or) 45%, var(--c-parchment-edge));
}
.komp-lightbox__bg {
  position: absolute; inset: -8%;
  background-size: cover; background-position: center;
  filter: blur(36px) brightness(.46) saturate(.9); transform: scale(1.14);
}
.komp-lightbox__img {
  position: relative; z-index: 1; display: block;
  max-width: 100%; max-height: 68vh; width: auto; height: auto;
  object-fit: contain;
  box-shadow: 0 12px 50px rgba(0,0,0,.55);
}
/* Ohne Bild: getönte Sinnbild-Plakette (Initialen/Glyphe) statt Bühne */
.komp-lightbox__box--ohnebild { width: min(660px, 94vw); }
.komp-lightbox__plakette {
  width: 100%; min-height: clamp(150px, 26vh, 230px);
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse 60% 130% at 50% -12%, rgba(198,154,69,.20), transparent 70%),
    linear-gradient(160deg, #221c13, #100c08);
}
.komp-lightbox__sigil {
  font-family: var(--f-display); font-weight: 700; letter-spacing: .08em;
  font-size: clamp(2.4rem, 9vw, 4rem); line-height: 1;
  color: color-mix(in srgb, var(--c-gold) 58%, var(--c-parchment));
  opacity: .92; text-shadow: 0 4px 24px rgba(0,0,0,.6);
}

/* Schrifttafel — zentrierte Folianten-Typografie mit Initiale */
.komp-lightbox__tafel {
  padding: clamp(1.6rem, 4vw, 2.8rem) clamp(1.4rem, 5vw, 3rem) clamp(1.5rem, 3vw, 2.2rem);
  text-align: center;
}
.komp-lightbox__kicker {
  display: block;
  font-family: var(--f-display); font-size: .72rem; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase; color: var(--h-or-deep);
}
.komp-lightbox__titel {
  margin: .5rem 0 0; font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.7rem, 4.5vw, 2.6rem); line-height: 1.08; color: var(--c-ink);
  letter-spacing: .01em;
}
.komp-lightbox__flourish-wrap {
  display: block; margin: .9rem auto 1.2rem;
  width: clamp(150px, 42%, 220px); color: var(--c-gold-deep);
}
.komp-lightbox__flourish { display: block; width: 100%; height: auto; }
.komp-lightbox__text {
  max-width: 60ch; margin: 0 auto; text-align: left;
  font-family: var(--f-body); font-size: clamp(1.06rem, 2.2vw, 1.2rem);
  line-height: 1.78; color: var(--c-ink);
}
.komp-lightbox__text::first-letter {
  float: left; font-family: var(--f-display); font-weight: 700;
  font-size: 3.1em; line-height: .76; padding: .05em .14em 0 0;
  color: var(--h-or-deep); text-shadow: 0 2px 4px rgba(0,0,0,.12);
}
.komp-lightbox__text--leer { font-style: italic; color: var(--c-ink-faded); text-align: center; }
.komp-lightbox__text--leer::first-letter { float: none; font-size: 1em; color: inherit; padding: 0; }
.komp-lightbox__ref {
  display: inline-flex; align-items: center; gap: .5rem;
  margin: 1.5rem auto 0;
  padding: .55rem 1.1rem; border-radius: 999px;
  font-family: var(--f-display); font-size: .8rem; letter-spacing: .04em;
  color: var(--c-ink); text-decoration: none;
  background: color-mix(in srgb, var(--c-gold) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--h-or) 50%, var(--c-parchment-edge));
  transition: background .15s, border-color .15s, transform .1s;
}
.komp-lightbox__ref:hover {
  background: color-mix(in srgb, var(--c-gold) 32%, transparent);
  border-color: var(--c-gold-deep);
}
.komp-lightbox__ref:active { transform: scale(.97); }
.komp-lightbox__ref-ic { font-size: 1rem; }
.komp-lightbox__quelle {
  display: block; max-width: 60ch; margin: 1.3rem auto 0; padding-top: .8rem;
  border-top: 1px solid color-mix(in srgb, var(--c-ink) 14%, transparent);
  font-family: var(--f-heading); font-style: italic; font-size: .9rem; color: var(--c-ink-soft);
}
@media (max-width: 600px) {
  .komp-lightbox { padding: 2vh 2vw; }
  .komp-lightbox__img { max-height: 52vh; }
}
.komp-lightbox__zu {
  position: fixed; top: 1.1rem; right: 1.2rem;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.45); background: rgba(20,12,4,.6);
  color: var(--c-parchment-hi); font-size: 1.5rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .15s, transform .1s;
}
.komp-lightbox__zu:hover { background: var(--h-gules-deep, #7d160f); }
.komp-lightbox__zu:active { transform: scale(.92); }

/* ---- Welt-Kompendium: Berühmte Persönlichkeiten (NSC-DB) ---- */
.komp__nscs { width: min(64rem, 92vw); margin: 1.4rem auto; padding: 1.2rem 0; }
.komp-nsc-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(27rem, 1fr));
  gap: 1.2rem; margin-top: 1.3rem;
}
.komp-nsc {
  display: flex; gap: 1rem; align-items: stretch; text-decoration: none;
  padding: .9rem 1rem;
  background: linear-gradient(160deg, var(--c-parchment-hi), var(--c-parchment) 60%, var(--c-parchment-deep));
  border: 1px solid var(--c-parchment-edge);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform .14s, box-shadow .14s;
}
.komp-nsc:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.42); }
.komp-nsc__bild {
  flex: 0 0 auto; width: 9.6rem; height: 12.8rem; object-fit: cover; object-position: center top;
  border-radius: var(--radius); border: 1px solid var(--c-parchment-edge);
  box-shadow: 0 3px 10px rgba(20,12,4,.28);
}
.komp-nsc__bild--leer {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-weight: 700; font-size: 1.2rem;
  color: var(--h-or-deep);
  background: repeating-linear-gradient(45deg, rgba(0,0,0,.03) 0 6px, transparent 6px 12px), var(--c-parchment-deep);
}
.komp-nsc__txt { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.komp-nsc__name { font-family: var(--f-display); font-weight: 700; font-size: 1.18rem; color: var(--c-ink); line-height: 1.2; }
.komp-nsc__bei { font-family: var(--f-heading); font-style: italic; font-size: .92rem; color: var(--c-ink-soft); }
.komp-nsc__rolle {
  font-family: var(--f-body); font-size: .9rem; line-height: 1.4; color: var(--c-ink-soft); margin-top: .15rem;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.komp-nsc__kat {
  margin-top: auto; align-self: flex-start;
  font-family: var(--f-display); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--h-or-deep);
  padding: .1rem .45rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--h-or) 45%, var(--c-parchment-edge));
  background: color-mix(in srgb, var(--h-or) 8%, transparent);
}

/* ---- Artefakte & Schätze der Region (Querverweis → Ausrüstungs-Verzeichnis) ---- */
.komp__artefakte { width: min(64rem, 92vw); margin: 1.4rem auto; padding: 1.2rem 0; }
.komp-art-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
  gap: 1.1rem; margin-top: 1.3rem;
}
.komp-art {
  display: flex; gap: 1rem; align-items: stretch; text-decoration: none;
  padding: .85rem .95rem;
  background: linear-gradient(160deg, var(--c-parchment-hi), var(--c-parchment) 60%, var(--c-parchment-deep));
  border: 1px solid var(--c-parchment-edge);
  border-left: 3px solid var(--kat, var(--c-parchment-edge));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform .14s, box-shadow .14s;
}
.komp-art:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.42); }
/* Kategorie-Akzent (gleiche Farben wie das Ausrüstungs-Verzeichnis) */
.komp-art--artefakt       { --kat: #c69a45; }
.komp-art--magischewaffe  { --kat: #b0432f; }
.komp-art--zaubermittel   { --kat: #9b74c4; }
.komp-art--material       { --kat: #7d8794; }
.komp-art--schmiedegesang { --kat: #6fae8e; }
.komp-art__bild {
  flex: 0 0 auto; width: 6.6rem; height: 6.6rem; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--c-parchment-edge);
  box-shadow: 0 3px 10px rgba(20,12,4,.28);
}
.komp-art__bild--leer {
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: var(--kat, var(--h-or-deep));
  background: repeating-linear-gradient(45deg, rgba(0,0,0,.03) 0 6px, transparent 6px 12px), var(--c-parchment-deep);
}
.komp-art__txt { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.komp-art__name { font-family: var(--f-display); font-weight: 700; font-size: 1.12rem; color: var(--c-ink); line-height: 1.2; }
.komp-art__art {
  font-family: var(--f-heading); font-style: italic; font-size: .88rem; color: var(--c-ink-soft); margin-top: .12rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.komp-art__kat {
  margin-top: auto; align-self: flex-start;
  font-family: var(--f-display); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--kat, #555) 75%, #1a1206);
  padding: .1rem .45rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--kat, #999) 50%, transparent);
  background: color-mix(in srgb, var(--kat, #999) 12%, transparent);
}
.komp-art-mehr {
  display: inline-block; margin-top: 1rem;
  font-family: var(--f-heading); font-style: italic; font-size: .95rem;
  color: var(--c-gold-bright); text-decoration: none;
}
.komp-art-mehr:hover { text-decoration: underline; }

/* ---- Götter-Kompendium: Einstieg auf der Welt-Kompendium-Übersicht ---- */
.komp-ueber__goetter {
  display: block; width: max-content; max-width: 92vw; margin: 2rem auto 0;
  font-family: var(--f-heading); font-style: italic; font-size: clamp(1rem, 2vw, 1.18rem);
  color: var(--c-on-stage, #f3e7cf); text-decoration: none; text-align: center;
  padding: .6rem 1.4rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--h-or) 50%, rgba(255,255,255,.25));
  background: rgba(255,255,255,.06); text-shadow: 0 2px 14px rgba(0,0,0,.55);
  transition: background .15s, border-color .15s, transform .12s;
}
.komp-ueber__goetter:hover { background: color-mix(in srgb, var(--h-or) 22%, transparent); border-color: var(--h-or); transform: translateY(-1px); }

/* ---- Götter & Glauben der Region (Querverweis → Götter-Kompendium) ---- */
.komp__goetter { width: min(64rem, 92vw); margin: 1.4rem auto; padding: 1.2rem 0; }
.komp-gott-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1rem; margin-top: 1.3rem;
}
.komp-gott {
  position: relative; display: flex; align-items: center; gap: .9rem;
  padding: .8rem .95rem; text-decoration: none; overflow: hidden;
  background: linear-gradient(160deg, var(--c-parchment-hi), var(--c-parchment) 60%, var(--c-parchment-deep));
  border: 1px solid var(--c-parchment-edge); border-left: 3px solid var(--h-or);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  transition: transform .14s, box-shadow .14s;
}
.komp-gott:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.42); }
.komp-gott--religion { border-left-color: var(--h-vert, #6fae8e); }
.komp-gott--geist { border-left-color: var(--h-azure, #3a607f); }
.komp-gott--wesen { border-left-color: var(--h-purpure, #9b74c4); }
/* Emblem-Medaillon (Reich-Sigill, durch Götter-Porträt ersetzbar) */
.komp-gott__emblem {
  position: relative; flex: 0 0 auto; width: 3.5rem; height: 3.5rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: radial-gradient(circle at 50% 36%, rgba(46,34,16,.52), rgba(18,12,6,.68));
  border: 1px solid color-mix(in srgb, var(--h-or) 42%, transparent);
  box-shadow: inset 0 1px 5px rgba(0,0,0,.5), 0 0 0 3px rgba(0,0,0,.1);
  transition: transform .16s;
}
.komp-gott:hover .komp-gott__emblem { transform: scale(1.05); }
.komp-gott__icon { width: 2.8rem; height: 2.8rem; object-fit: contain; filter: drop-shadow(0 2px 5px rgba(0,0,0,.5)); }
.komp-gott__portrait { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.komp-gott__txt { display: flex; flex-direction: column; gap: .08rem; min-width: 0; padding-right: 2.6rem; }
.komp-gott__typ {
  position: absolute; top: .55rem; right: .6rem;
  font-family: var(--f-display); font-size: .54rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--h-or-deep); padding: .08rem .42rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--h-or) 45%, var(--c-parchment-edge)); background: color-mix(in srgb, var(--h-or) 8%, transparent);
}
.komp-gott__name { font-family: var(--f-display); font-weight: 700; font-size: 1.08rem; color: var(--c-ink); line-height: 1.2; }
.komp-gott__bei { font-family: var(--f-heading); font-style: italic; font-size: .82rem; color: var(--c-ink-soft); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.komp-gott__sub { font-family: var(--f-body); font-size: .82rem; line-height: 1.35; color: var(--c-ink-soft); margin-top: .15rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- Kreaturen des Reichs — Karten (Standard-Querverweismuster wie Persönlichkeiten/Artefakte:
       Einleser + Foliant-Lightbox-Verweis auf den Bestiarium-Volleintrag) ---- */
.komp__bestiarium { width: min(64rem, 92vw); margin: 1.2rem auto 0; }
.komp-best-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
  gap: 1.1rem; margin-top: 1.3rem;
}
.komp-best {
  display: flex; gap: 1rem; align-items: stretch; text-decoration: none; padding: .85rem .95rem;
  background: linear-gradient(160deg, var(--c-parchment-hi), var(--c-parchment) 60%, var(--c-parchment-deep));
  border: 1px solid var(--c-parchment-edge); border-left: 3px solid #8a2f24;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  transition: transform .14s, box-shadow .14s;
}
.komp-best:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.42); }
.komp-best__bild {
  flex: 0 0 auto; width: 6.6rem; height: 6.6rem; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--c-parchment-edge);
  box-shadow: 0 3px 10px rgba(20,12,4,.28);
}
.komp-best__bild--leer {
  display: flex; align-items: center; justify-content: center; font-size: 1.9rem; color: #8a2f24;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,.03) 0 6px, transparent 6px 12px), var(--c-parchment-deep);
}
.komp-best__txt { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.komp-best__name { font-family: var(--f-display); font-weight: 700; font-size: 1.12rem; color: var(--c-ink); line-height: 1.2; }
.komp-best__text {
  font-family: var(--f-heading); font-style: italic; font-size: .86rem; color: var(--c-ink-soft); margin-top: .12rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.komp-best__meta {
  margin-top: auto; align-self: flex-start;
  font-family: var(--f-display); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, #8a2f24 80%, #1a1206);
  padding: .1rem .45rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, #8a2f24 50%, transparent);
  background: color-mix(in srgb, #8a2f24 12%, transparent);
}