/* ═══════════════════════════════════════════════════════════
   GOTHIC ONLINE — UNTOLD CHAPTERS
   Dark chronicle · ember & barrier-blue · Cormorant × Plex Mono
   ═══════════════════════════════════════════════════════════ */

:root {
  --bg: #0d0a06;
  --bg-2: #161109;
  --ink: #e9dfc8;
  --ink-dim: rgba(233, 223, 200, 0.62);
  --ink-faint: rgba(233, 223, 200, 0.35);
  /* craftsmanship tones: brass borders, iron plates */
  --line: rgba(176, 141, 79, 0.2);
  --brass: #b08d4f;
  --iron: linear-gradient(180deg, #1d1710, #100c07);
  /* Sumpflager-Grün — primary accent (variable keeps its historical name) */
  --ember: #94c14c;
  --ember-deep: #3d551e;
  /* Khorinis: Banner-Rot mit Gold (Variable behält historischen Namen) */
  --barrier: #c0392f;
  --barrier-deep: #6e1a14;
  /* Minental: magisches Erz — violett-blau glimmend */
  --ore: #8a7ce0;
  --accent: var(--ember);
  --accent-deep: var(--ember-deep);
  --serif: "Cormorant", "Times New Roman", serif;
  /* label face: Roman capitals instead of a tech mono (var keeps its old name) */
  --mono: "Cinzel", "Cormorant", serif;
  --fraktur: "UnifrakturMaguntia", serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-world="khorinis"] {
  --accent: var(--barrier);
  --accent-deep: var(--barrier-deep);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: auto; }

body {
  /* warm stone: faint torch-lit mottling instead of flat void-black */
  background:
    radial-gradient(1100px 700px at 15% -5%, rgba(70, 50, 26, 0.14), transparent 60%),
    radial-gradient(900px 650px at 85% 30%, rgba(52, 38, 20, 0.1), transparent 60%),
    radial-gradient(1000px 800px at 40% 100%, rgba(58, 42, 22, 0.1), transparent 55%),
    var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: var(--bg); }

.mono {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.accent { color: var(--accent); transition: color 0.8s; }

a { color: inherit; text-decoration: none; }

h1, h2, h3 { font-weight: 500; line-height: 1.02; }
h2 em, h1 em { font-style: italic; color: var(--accent); transition: color 0.8s; }

/* ─────────── Atmosphere layers ─────────── */

#atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.grain {
  position: fixed;
  inset: -50%;
  z-index: 70;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.9s steps(4) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-3%, 2%); }
  50% { transform: translate(2%, -3%); }
  75% { transform: translate(-2%, -2%); }
  100% { transform: translate(3%, 3%); }
}

.vignette {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  /* warm soot instead of pure black — edges feel torch-lit, not void */
  background:
    radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, rgba(14, 8, 3, 0.6) 100%);
}

.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 95;
  pointer-events: none;
}
.progress__bar {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--ore), var(--barrier));
  transform-origin: left;
  transform: scaleX(0);
}

/* ─────────── Preloader ─────────── */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  --fill: 0%;
}
/* Schläfer-Siegel: je eine Hälfte pro Torflügel — beim Öffnen reißt
   es exakt in der Mitte und fährt mit den Toren davon */
.preloader__half {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: min(24vw, 280px);
  aspect-ratio: 724 / 1086;
  overflow: hidden;
}
/* um die 2px-Torkante nach außen versetzt: beide Schnittkanten
   liegen exakt auf der 50%-Linie — kein Überlappen, kein Spalt */
.preloader__half--l { right: -2px; }
.preloader__half--r { left: -2px; }
.preloader__mask {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* flaches Schwarz mit hauchdünnem Lichtsaum, damit es auf den
   dunklen Toren als Silhouette lesbar bleibt */
.preloader__mask--black {
  filter: brightness(0) drop-shadow(0 0 18px rgba(233, 223, 200, 0.14));
}
/* die farbige Maske wird von unten nach oben freigegeben */
.preloader__mask--color {
  clip-path: inset(calc(100% - var(--fill)) 0 0 0);
}
.preloader__gate {
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  /* heavy timber gates */
  background: linear-gradient(90deg, #0a0704, #120d07 60%, #0a0704);
}
.preloader__gate--left { left: 0; border-right: 2px solid rgba(176, 141, 79, 0.35); }
.preloader__gate--right { right: 0; border-left: 2px solid rgba(176, 141, 79, 0.35); }
.preloader__center {
  position: absolute;
  bottom: 11vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.preloader__rune {
  font-family: var(--fraktur);
  font-size: 5rem;
  color: var(--ember);
  text-shadow: 0 0 40px rgba(148, 193, 76, 0.6);
}
.preloader__count {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  color: var(--ink-dim);
}
.preloader__label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ─────────── Cursor ─────────── */

.cursor { display: none; }
@media (pointer: fine) {
  .cursor { display: block; }
  .cursor__dot, .cursor__ring {
    position: fixed;
    top: 0; left: 0;
    /* über allem, auch über der Lightbox (z 120) */
    z-index: 200;
    pointer-events: none;
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }
  .cursor__dot {
    width: 6px; height: 6px;
    background: var(--accent);
    transition: background 0.8s;
  }
  .cursor__ring {
    width: 34px; height: 34px;
    border: 1px solid var(--accent);
    opacity: 0.5;
    transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out),
                opacity 0.3s, border-color 0.8s;
  }
  .cursor.is-active .cursor__ring {
    width: 58px; height: 58px;
    opacity: 0.9;
  }
  body { cursor: none; }
  a, button { cursor: none; }
}

/* ─────────── Header ─────────── */

.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.1rem clamp(1.2rem, 4vw, 3rem);
  transition: transform 0.5s var(--ease-out), background 0.4s, backdrop-filter 0.4s;
}
.header.is-hidden { transform: translateY(-110%); }
.header.is-solid {
  background: linear-gradient(180deg, rgba(20, 15, 8, 0.88), rgba(13, 10, 6, 0.82));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(176, 141, 79, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.header__logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.header__logo-img {
  height: 38px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.65)) brightness(1.15);
  transition: filter 0.35s;
}
.header__logo:hover .header__logo-img {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 14px rgba(148, 193, 76, 0.55)) brightness(1.3);
}
.header__logo-mark {
  font-family: var(--fraktur);
  font-size: 1.7rem;
  color: var(--accent);
  transition: color 0.8s;
  line-height: 1;
}
.header__logo-text {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}
.header__logo-text em {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--ink-dim);
}
.header__nav {
  display: flex;
  gap: clamp(1rem, 2.2vw, 2rem);
}
.header__nav a {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  position: relative;
  padding: 0.3rem 0;
  transition: color 0.3s;
}
.header__nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}
.header__nav a:hover { color: var(--ink); }
.header__nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
@media (max-width: 1000px) { .header__nav { display: none; } }

/* ─────────── Buttons & links ─────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.9rem;
  border: 1px solid rgba(176, 141, 79, 0.55);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  /* iron plate with a forged bevel */
  background: var(--iron);
  box-shadow:
    inset 0 1px 0 rgba(233, 223, 200, 0.08),
    inset 0 -2px 6px rgba(0, 0, 0, 0.55);
  transition: color 0.35s, border-color 0.4s, box-shadow 0.4s;
  /* forged plate: notched corners */
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  /* embers rising behind the plate on hover — torchlight, not paint fill */
  background: linear-gradient(180deg, #a2551f 0%, #6f3512 55%, #4a230c 100%);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease-out);
  z-index: 0;
}
.btn:hover::before { transform: translateY(0); }
.btn:hover {
  color: #f4ead2;
  border-color: #c9a15c;
  box-shadow:
    inset 0 1px 0 rgba(233, 223, 200, 0.12),
    0 0 26px rgba(214, 118, 43, 0.28);
}
.btn > * { position: relative; z-index: 1; }
.btn__arrow { transition: transform 0.35s var(--ease-out); }
.btn:hover .btn__arrow { transform: translate(3px, -3px); }
.btn--small { padding: 0.65rem 1.2rem; font-size: 0.65rem; }
/* Discord-Markenfarben (Blurple) */
.btn--discord {
  border-color: #5865f2;
  background: linear-gradient(180deg, #5865f2, #4450c9);
  color: #fff;
}
.btn--discord::before {
  background: linear-gradient(180deg, #6d78ff, #5865f2);
}
.btn--discord:hover {
  color: #fff;
  border-color: #8891f7;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 26px rgba(88, 101, 242, 0.45);
}
.header__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.btn--big { padding: 1.4rem 3rem; font-size: 0.85rem; }

.link-line {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  position: relative;
  padding-bottom: 0.35rem;
  transition: color 0.3s;
}
.link-line::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform-origin: right;
  transition: transform 0.45s var(--ease-out);
}
.link-line:hover { color: var(--gold); }
.link-line:hover::after {
  animation: line-sweep 0.6s var(--ease-out);
}
@keyframes line-sweep {
  0% { transform: scaleX(1); transform-origin: right; }
  50% { transform: scaleX(0); transform-origin: right; }
  51% { transform-origin: left; }
  100% { transform: scaleX(1); transform-origin: left; }
}

/* ─────────── Sections base ─────────── */

main { position: relative; z-index: 1; }

.section {
  padding: clamp(6rem, 12vh, 10rem) clamp(1.2rem, 6vw, 7rem);
  max-width: 1500px;
  margin: 0 auto;
}
.section__kicker {
  color: var(--ink-dim);
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: clamp(2rem, 4vh, 3.5rem);
}
.section__kicker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
  align-self: center;
}
.section__num {
  color: var(--brass);
}

/* ─────────── Hero ─────────── */

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 7rem clamp(1.2rem, 5vw, 5rem) 5rem;
  position: relative;
}
.hero__kicker {
  color: var(--ink-dim);
  margin-bottom: clamp(1.5rem, 3vh, 2.5rem);
}
.hero__title {
  position: relative;
}
/* Metall-Wordmark: aufgehellt fürs dunkle Gewölbe, mit atmendem
   Schläfer-Glow hinter den gravierten Lettern */
.hero__logo {
  display: block;
  width: clamp(320px, 46vw, 840px);
  height: auto;
  filter: drop-shadow(0 10px 32px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 26px rgba(148, 193, 76, 0.22)) brightness(1.22);
  animation: logo-glow 5.5s ease-in-out infinite;
}
@keyframes logo-glow {
  0%, 100% { filter: drop-shadow(0 10px 32px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 26px rgba(148, 193, 76, 0.22)) brightness(1.22); }
  50% { filter: drop-shadow(0 10px 32px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 42px rgba(148, 193, 76, 0.42)) brightness(1.3); }
}
.hero__line { display: block; overflow: hidden; }
.hero__line .ch { display: inline-block; }
.hero__line--outline {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(233, 223, 200, 0.55);
}
.hero__script {
  position: absolute;
  left: clamp(2rem, 18vw, 20rem);
  top: 50%;
  transform: translateY(-50%) rotate(-3deg);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.8rem, 5vw, 5rem);
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--accent);
  text-shadow: 0 0 60px rgba(148, 193, 76, 0.35);
  white-space: nowrap;
  z-index: 2;
  transition: color 0.8s;
  animation: script-glow 4.5s ease-in-out infinite;
}
@keyframes script-glow {
  0%, 100% { text-shadow: 0 0 60px rgba(148, 193, 76, 0.35); }
  50% { text-shadow: 0 0 95px rgba(148, 193, 76, 0.65), 0 0 30px rgba(148, 193, 76, 0.3); }
}
.hero__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 3rem;
  margin-top: clamp(2.5rem, 6vh, 5rem);
}
.hero__claim {
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  line-height: 1.15;
  margin-bottom: 0.8rem;
}
.hero__claim em { color: var(--accent); transition: color 0.8s; }
.hero__desc {
  max-width: 34rem;
  color: var(--ink-dim);
  font-size: 1.15rem;
  margin-bottom: 2rem;
}
.hero__cta {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  flex-wrap: wrap;
}
.hero__meta {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-align: right;
  color: var(--ink-faint);
}
.hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  color: var(--ink-faint);
  font-size: 0.58rem;
}
.hero__scroll-line {
  width: 1px;
  height: 46px;
  background: var(--ink-faint);
  overflow: hidden;
  position: relative;
}
.hero__scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  animation: scroll-drip 1.8s var(--ease-out) infinite;
}
@keyframes scroll-drip {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}
@media (max-width: 800px) {
  .hero__bottom { flex-direction: column; align-items: flex-start; }
  .hero__meta { text-align: left; }
  .hero__scroll { display: none; }
}

/* ─────────── Marquee ─────────── */

.marquee {
  overflow: hidden;
  border-top: 1px solid rgba(176, 141, 79, 0.3);
  border-bottom: 1px solid rgba(176, 141, 79, 0.3);
  padding: 1.1rem 0;
  position: relative;
  z-index: 1;
  /* aged parchment ribbon */
  background: linear-gradient(180deg, rgba(38, 29, 16, 0.75), rgba(22, 16, 9, 0.85));
  box-shadow: inset 0 1px 0 rgba(233, 223, 200, 0.05), inset 0 -6px 14px rgba(0, 0, 0, 0.4);
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  width: max-content;
  /* Spur ist doppelt so lang wie zuvor — Tempo entsprechend halten */
  animation: marquee 52s linear infinite;
}
.marquee__track span {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  white-space: nowrap;
  color: var(--ink-dim);
}
.marquee__track i {
  color: var(--brass);
  font-style: normal;
  font-size: 0.8rem;
}
/* ikonische Zitate heben sich golden vom Lauftext ab */
.marquee__track .q { color: #c9a15c; }
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ─────────── Projekt ─────────── */

.project__layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) 1.15fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.project__figure {
  position: relative;
  margin: 0;
}
/* Fackelschein hinter dem Paladin */
.project__figure::before {
  content: "";
  position: absolute;
  inset: -8% -18%;
  background: radial-gradient(ellipse 60% 55% at 50% 55%, rgba(214, 134, 58, 0.16), transparent 70%);
  pointer-events: none;
}
.project__paladin {
  display: block;
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  filter: drop-shadow(0 26px 44px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 28px rgba(214, 134, 58, 0.12));
}
.project__statement {
  font-size: clamp(2.4rem, 4.6vw, 4.6rem);
  max-width: 18ch;
  margin-bottom: clamp(1.8rem, 4vh, 3rem);
}
.project__statement .w { display: inline-block; }
.project__text {
  color: var(--ink-dim);
  font-size: 1.2rem;
  max-width: 36rem;
}
.project__text + .project__text { margin-top: 1.4rem; }
.project__text--drop::first-letter {
  font-family: var(--fraktur);
  font-size: 4.6em;
  float: left;
  line-height: 0.75;
  padding: 0.08em 0.12em 0 0;
  color: var(--accent);
  transition: color 0.8s;
}
@media (max-width: 800px) {
  .project__layout { grid-template-columns: 1fr; }
  .project__paladin { max-width: 300px; }
}

/* ─────────── Säulen (pinned horizontal) ─────────── */

.pillars { position: relative; }
/* Der Paladin wacht hinter den Säulen — abgedunkelt, in die Nacht aufgelöst */
.pillars__figure {
  position: absolute;
  right: clamp(-5rem, -2vw, 0rem);
  bottom: 0;
  width: min(44vw, 660px);
  pointer-events: none;
  z-index: 0;
}
.pillars__figure::before {
  content: "";
  position: absolute;
  inset: -10%;
  background: radial-gradient(ellipse 52% 46% at 50% 42%, rgba(176, 141, 79, 0.14), transparent 70%);
  pointer-events: none;
}
.pillars__paladin {
  display: block;
  width: 100%;
  opacity: 0.6;
  filter: brightness(0.72) saturate(0.85) drop-shadow(0 24px 48px rgba(0, 0, 0, 0.8));
  -webkit-mask-image: radial-gradient(ellipse 62% 74% at 50% 40%, #000 52%, transparent 82%);
  mask-image: radial-gradient(ellipse 62% 74% at 50% 40%, #000 52%, transparent 82%);
}
.pillars__head, .pillars__track { position: relative; z-index: 1; }
@media (max-width: 899px) {
  .pillars__figure { display: none; }
}
.pillars__viewport {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: clamp(4rem, 8vh, 6rem) 0;
}
.pillars__head {
  padding: 0 clamp(1.2rem, 6vw, 7rem);
  margin-bottom: clamp(2.5rem, 6vh, 4rem);
}
.pillars__title { font-size: clamp(2.4rem, 5vw, 4.5rem); }
.pillars__track {
  display: flex;
  gap: clamp(1.2rem, 2.5vw, 2.5rem);
  padding: 0 clamp(1.2rem, 6vw, 7rem);
  width: max-content;
  will-change: transform;
}
.pillar {
  width: clamp(300px, 34vw, 460px);
  min-height: 420px;
  border: 1px solid var(--line);
  outline: 1px solid rgba(176, 141, 79, 0.12);
  outline-offset: -8px;
  background: linear-gradient(160deg, rgba(58, 44, 24, 0.14), rgba(22, 17, 9, 0.4) 55%);
  box-shadow: inset 0 1px 0 rgba(233, 223, 200, 0.05), inset 0 -8px 18px rgba(0, 0, 0, 0.35);
  padding: 2.4rem 2.2rem;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: border-color 0.4s, transform 0.5s var(--ease-out);
}
.pillar:hover {
  border-color: var(--accent);
  transform: translateY(-8px);
}
.pillar__num {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  color: var(--brass);
  margin-bottom: auto;
}
.pillar__name {
  font-size: clamp(1.9rem, 2.6vw, 2.6rem);
  margin: 3.5rem 0 1.2rem;
}
.pillar__text { color: var(--ink-dim); font-size: 1.05rem; }
.pillar__glyph {
  position: absolute;
  right: -0.4rem;
  bottom: -1.8rem;
  font-size: 9rem;
  line-height: 1;
  color: var(--accent);
  opacity: 0.07;
  transition: opacity 0.5s, transform 0.6s var(--ease-out), color 0.8s;
}
.pillar:hover .pillar__glyph {
  opacity: 0.18;
  transform: rotate(-8deg) scale(1.08);
}
@media (max-width: 899px) {
  .pillars__viewport { min-height: 0; }
  .pillars__track {
    flex-direction: column;
    width: auto;
  }
  .pillar { width: 100%; min-height: 0; }
  .pillar__name { margin-top: 2rem; }
}

/* ─────────── Welten ─────────── */

.worlds__head { padding-bottom: 0; }
.worlds__title { font-size: clamp(2.6rem, 6.5vw, 6rem); }

.world {
  min-height: 100svh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: clamp(5rem, 10vh, 8rem) clamp(1.2rem, 6vw, 7rem);
}
.world__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity 1s;
}
.world__barrier,
.world__sea {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.world--minental .world__bg {
  z-index: 1;
  background:
    linear-gradient(180deg, var(--bg) 0%, transparent 16%, transparent 84%, var(--bg) 100%),
    /* randverbundene Textsäule: Plateau hinter der Spalte, weiche Ausfederung */
    linear-gradient(90deg, rgba(10, 8, 5, 0.92) 0%, rgba(10, 8, 5, 0.8) 38%, rgba(10, 8, 5, 0.35) 58%, rgba(10, 8, 5, 0) 82%),
    radial-gradient(ellipse 75% 65% at 78% 45%, rgba(138, 124, 224, 0.08), transparent 65%);
}
.world--khorinis .world__bg {
  z-index: 1;
  background:
    linear-gradient(180deg, var(--bg) 0%, transparent 16%, transparent 84%, var(--bg) 100%),
    /* randverbundene Textsäule (rechts): Plateau + weiche Ausfederung */
    linear-gradient(270deg, rgba(10, 8, 5, 0.92) 0%, rgba(10, 8, 5, 0.8) 38%, rgba(10, 8, 5, 0.35) 58%, rgba(10, 8, 5, 0) 82%),
    radial-gradient(ellipse 75% 65% at 22% 45%, rgba(192, 57, 47, 0.12), transparent 65%);
}
.world__inner {
  position: relative;
  z-index: 2;
  max-width: 40rem;
}
.world--khorinis .world__inner { margin-left: auto; text-align: right; }
.world__meta { color: var(--ink-dim); margin-bottom: 1.4rem; }
/* Lesbarkeit über den 3D-Szenen: mehrlagige Schlagschatten */
.world__meta,
.world__tagline,
.world__desc {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 3px 16px rgba(0, 0, 0, 0.75);
}
.world__name {
  font-size: clamp(3rem, 9vw, 10rem);
  letter-spacing: 0.04em;
  line-height: 0.95;
  overflow: hidden;
  white-space: nowrap;
}
/* the display title may outgrow the 40rem text column — let its box
   extend into the panel (the panel clips overflow safely) */
.world--minental .world__name { margin-right: -55vw; }
.world--khorinis .world__name { margin-left: -55vw; }
.world__name .ch { display: inline-block; }
/* MINENTAL — wie aus magischem Erz geschlagen: violett-blauer
   Kristallverlauf im Schriftbild + pulsierendes Erz-Glimmen */
.world--minental .world__name {
  color: #9a8cf0;
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.85), 0 6px 22px rgba(0, 0, 0, 0.65),
    0 0 18px rgba(138, 124, 224, 0.5), 0 0 44px rgba(96, 120, 255, 0.28);
  animation: ore-glow 3.8s ease-in-out infinite;
}
/* Verlauf pro Buchstaben-Span — background-clip:text am Elternelement
   versagt, sobald GSAP die Spans transformiert */
.world--minental .world__name .ch {
  background: linear-gradient(170deg, #d8d2ff 5%, #9a8cf0 35%, #6858c0 62%, #7a6a58 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@keyframes ore-glow {
  0%, 100% {
    text-shadow:
      0 2px 6px rgba(0, 0, 0, 0.85), 0 6px 22px rgba(0, 0, 0, 0.65),
      0 0 18px rgba(138, 124, 224, 0.5), 0 0 44px rgba(96, 120, 255, 0.28);
  }
  50% {
    text-shadow:
      0 2px 6px rgba(0, 0, 0, 0.85), 0 6px 22px rgba(0, 0, 0, 0.65),
      0 0 26px rgba(168, 150, 255, 0.8), 0 0 64px rgba(110, 140, 255, 0.45);
  }
}
/* KHORINIS — das rote Banner mit goldenem Emblem: Fahnenverlauf
   mit Gold-Lichtkante + goldener Schimmer-Glow */
.world--khorinis .world__name {
  color: #c0392f;
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.85), 0 6px 22px rgba(0, 0, 0, 0.65),
    0 0 18px rgba(212, 169, 78, 0.4), 0 0 44px rgba(192, 57, 47, 0.32);
  animation: banner-glow 4.2s ease-in-out infinite;
}
.world--khorinis .world__name .ch {
  background: linear-gradient(175deg, #e8b06a 0%, #d4534a 24%, #a8231f 62%, #6e1410 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@keyframes banner-glow {
  0%, 100% {
    text-shadow:
      0 2px 6px rgba(0, 0, 0, 0.85), 0 6px 22px rgba(0, 0, 0, 0.65),
      0 0 18px rgba(212, 169, 78, 0.4), 0 0 44px rgba(192, 57, 47, 0.32);
  }
  50% {
    text-shadow:
      0 2px 6px rgba(0, 0, 0, 0.85), 0 6px 22px rgba(0, 0, 0, 0.65),
      0 0 26px rgba(232, 192, 104, 0.65), 0 0 64px rgba(212, 72, 56, 0.48);
  }
}
.world__tagline {
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  margin: 1.2rem 0 1.4rem;
  color: var(--ink);
}
.world__desc { color: var(--ink-dim); font-size: 1.15rem; }
.world__facts {
  display: flex;
  gap: 0.8rem;
  list-style: none;
  margin-top: 2.2rem;
  flex-wrap: wrap;
}
.world--khorinis .world__facts { justify-content: flex-end; }
.world__facts li {
  border: 1px solid rgba(176, 141, 79, 0.5);
  padding: 0.5rem 1rem;
  color: var(--ink);
  /* solide Eisenplatte statt durchsichtigem Rahmen — bleibt über der Szene lesbar */
  background: linear-gradient(180deg, rgba(26, 20, 12, 0.92), rgba(12, 9, 6, 0.92));
  box-shadow: inset 0 1px 0 rgba(233, 223, 200, 0.08);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.world__ghost {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(20rem, 48vw, 46rem);
  line-height: 1;
  font-weight: 600;
  color: transparent;
  -webkit-text-stroke: 1px rgba(233, 223, 200, 0.07);
  pointer-events: none;
  z-index: 1;
}
.world--minental .world__ghost { right: clamp(-2rem, 2vw, 6rem); }
.world--khorinis .world__ghost { left: clamp(-2rem, 2vw, 6rem); }
@media (max-width: 800px) {
  .world--khorinis .world__inner { text-align: left; margin-left: 0; }
  .world--khorinis .world__facts { justify-content: flex-start; }
}

/* ─────────── Welten-Beschwörung: Ladeanzeige der 3D-Meshes ─────────── */

.world__loader {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.7rem;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s ease, transform 0.9s ease, visibility 0s linear 0.9s;
}
.world__loader.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease;
}
.world__loader.is-done { opacity: 0; transform: scale(1.08); }
/* Kreis über der freien Szenenhälfte, nicht über dem Text */
.world--minental .world__loader { --wl-col: rgba(138, 124, 224, 0.95); --wl-soft: rgba(138, 124, 224, 0.4); padding-left: min(38vw, 46rem); }
.world--khorinis .world__loader { --wl-col: rgba(201, 161, 92, 0.95); --wl-soft: rgba(192, 57, 47, 0.45); padding-right: min(38vw, 46rem); }

/* „Welt in 3D laden"-Button — auf Touch-Geräten statt automatischem 3D-Modell.
   Solides rgba statt backdrop-blur (Samsung-Internet-sicher), explizite Farben. */
.world__load3d {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 6vw, 3rem);
  transform: translateX(-50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  font-family: "Cinzel", serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  color: #e7cf8f;
  background: rgba(18, 12, 7, 0.92);
  border: 1px solid rgba(210, 178, 92, 0.55);
  border-radius: 2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.world__load3d:hover,
.world__load3d:focus-visible {
  background: rgba(210, 178, 92, 0.18);
  border-color: rgba(210, 178, 92, 0.9);
  color: #f4e0a2;
  outline: none;
}
.world__load3d-ic { font-size: 1em; opacity: 0.9; }
.wl__rings { position: relative; width: clamp(120px, 15vw, 168px); aspect-ratio: 1; }
.wl__ring { position: absolute; inset: 0; border-radius: 50%; }
/* Fortschrittsring: füllt sich mit dem geladenen Anteil der Weltdaten */
.wl__ring--prog {
  inset: -9%;
  background: conic-gradient(from -90deg, var(--wl-col) calc(var(--p, 0) * 1%), rgba(233, 223, 200, 0.08) 0);
  -webkit-mask: radial-gradient(closest-side, transparent 89%, #000 90% 97%, transparent 98%);
  mask: radial-gradient(closest-side, transparent 89%, #000 90% 97%, transparent 98%);
  filter: drop-shadow(0 0 10px var(--wl-col));
}
/* zwei gegenläufige Runenkreise mit umlaufenden Funken */
.wl__ring--a { border: 1px dashed rgba(233, 223, 200, 0.32); animation: wl-spin 14s linear infinite; }
.wl__ring--b { inset: 12%; border: 1px dotted rgba(233, 223, 200, 0.2); animation: wl-spin 9s linear infinite reverse; }
.wl__ring--a::before,
.wl__ring--b::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--wl-col);
  box-shadow: 0 0 10px var(--wl-col), 0 0 24px var(--wl-col);
}
.wl__ring--b::before { width: 5px; height: 5px; top: auto; bottom: -3px; }
/* atmender Kern — die Welt verdichtet sich */
.wl__core {
  position: absolute;
  inset: 27%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, var(--wl-soft), transparent 72%);
  filter: blur(7px);
  animation: wl-breathe 2.6s ease-in-out infinite;
}
.wl__pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  letter-spacing: 0.08em;
  color: var(--ink);
  text-shadow: 0 0 18px var(--wl-col), 0 1px 3px rgba(0, 0, 0, 0.9);
}
.wl__pct i { font-style: normal; font-size: 0.72em; opacity: 0.65; margin-left: 2px; }
.wl__status {
  font-size: 0.82rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  transition: opacity 0.45s;
}
.wl__status.is-swap { opacity: 0; }
@keyframes wl-spin { to { transform: rotate(360deg); } }
@keyframes wl-breathe {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.14); }
}
@media (max-width: 880px) {
  .world--minental .world__loader,
  .world--khorinis .world__loader { padding-left: 0; padding-right: 0; }
}

/* ─────────── Lager ─────────── */

.camps__title {
  font-size: clamp(2.4rem, 5.5vw, 5rem);
  margin-bottom: clamp(3rem, 6vh, 5rem);
}
.camps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.camp {
  position: relative;
  border: 1px solid var(--line);
  outline: 1px solid rgba(176, 141, 79, 0.12);
  outline-offset: -8px;
  box-shadow: inset 0 1px 0 rgba(233, 223, 200, 0.05), inset 0 -8px 18px rgba(0, 0, 0, 0.35);
  padding: 2.2rem 2rem 2rem;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  overflow: hidden;
  transition: border-color 0.4s;
  transform-style: preserve-3d;
}
.camp:hover { border-color: rgba(201, 161, 92, 0.55); }
/* in-world screenshot behind each faction (::before) with a readability
   grade on top (::after); text children stack above both */
.camp::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.95;
  filter: saturate(0.95) brightness(1.12);
  transition: opacity 0.5s, filter 0.5s;
  /* Ken-Burns-Drift: die Szenen atmen langsam, jede Karte asynchron */
  animation: camp-drift 26s ease-in-out infinite alternate;
}
.camp:nth-child(2n)::before { animation-delay: -9s; }
.camp:nth-child(3n)::before { animation-delay: -17s; }
.camp:hover::before { opacity: 1; filter: saturate(1.08) brightness(1.28); }
@keyframes camp-drift {
  from { transform: scale(1.03); }
  to { transform: scale(1.12) translateY(-2%); }
}
.camp::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 10, 6, 0.8) 0%, rgba(13, 10, 6, 0.3) 45%, rgba(13, 10, 6, 0.88) 100%);
}
.camp > * { position: relative; z-index: 1; }
/* breite Umland-Banner über die volle Rasterbreite */
.camp--banner {
  grid-column: 1 / -1;
  min-height: 260px;
}
.camp--banner .camp__desc { max-width: 46rem; }
.camp--minental-umland::before { background-image: url("../img/welt/minental-umland/35.jpg"); }
.camp--khorinis-umland::before { background-image: url("../img/welt/khorinis-umland/39.jpg"); }
.camp--altes-lager::before { background-image: url("../img/welt/altes-lager/17.jpg"); }
.camp--neues-lager::before { background-image: url("../img/welt/neues-lager/9.jpg"); }
.camp--sumpflager::before { background-image: url("../img/welt/sumpflager/3.jpg"); }
.camp--hafenstadt::before { background-image: url("../img/welt/hafenstadt/1.jpg"); }
.camp--grossbauernhof::before { background-image: url("../img/welt/grossbauernhof/2.jpg"); }
.camp--kloster::before { background-image: url("../img/welt/kloster/3.jpg"); }
.camp__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s;
  background: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 50%), rgba(148, 193, 76, 0.14), transparent 70%);
}
html[data-world="khorinis"] .camp__glow {
  background: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 50%), rgba(212, 169, 78, 0.13), transparent 70%);
}
.camp:hover .camp__glow { opacity: 1; }
.camp__world { margin-bottom: auto; }
.camp__world--m { color: var(--ore); }
.camp__world--k { color: var(--barrier); }
.camp__name {
  font-size: 2.15rem;
  margin: 2.6rem 0 0.9rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85), 0 6px 24px rgba(0, 0, 0, 0.6);
}
.camp__desc {
  color: var(--ink-dim);
  font-size: 1.02rem;
  margin-bottom: 1.8rem;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.85);
}
.camp__preview {
  margin-top: auto;
  align-self: flex-start;
}
@media (max-width: 1000px) { .camps__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .camps__grid { grid-template-columns: 1fr; } .camp { min-height: 0; } }

/* ─────────── Gestalten (expanding panels) ─────────── */

.figures__title {
  font-size: clamp(2.4rem, 5.5vw, 5rem);
  margin-bottom: clamp(3rem, 6vh, 5rem);
}
.figures__row {
  display: flex;
  gap: 0.8rem;
  min-height: 560px;
}
.figure {
  --char-glow: 176, 141, 79;   /* Fallback: Messing */
  flex: 1 1 0;
  border: 1px solid var(--line);
  background: var(--bg-2);
  padding: 2rem 1.6rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: flex 0.7s var(--ease-out), border-color 0.4s, background 0.4s, box-shadow 0.4s;
  outline: none;
}
/* jede Gestalt hat ihre eigene Aura-Farbe */
.figure--erzbaron { --char-glow: 154, 140, 240; }     /* magisches Erz */
.figure--feuermagier { --char-glow: 255, 122, 41; }   /* Innos' Flamme */
.figure--milizionaer { --char-glow: 205, 60, 48; }    /* Khorinis-Banner */
.figure--buerger { --char-glow: 214, 178, 106; }      /* Kerzengold */
.figure--bandit { --char-glow: 106, 165, 216; }       /* Neues Lager: Wassermagie-Blau */
/* nur is-open öffnet — Hover wählt per JS aus, damit nie zwei offen sind */
.figure.is-open {
  flex: 2.6;
  border-color: rgba(var(--char-glow), 0.65);
  background: linear-gradient(180deg, var(--bg-2), rgba(var(--char-glow), 0.06));
  box-shadow: inset 0 -3px 0 rgba(var(--char-glow), 0.75);
}
/* Aura + Bodenlicht in der Farbe der Gestalt (unter dem Charakter) */
.figure::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 46% at 50% 40%, rgba(var(--char-glow), 0.2), transparent 70%),
    radial-gradient(ellipse 46% 10% at 50% 97%, rgba(var(--char-glow), 0.38), transparent 75%);
  opacity: 0;
  transition: opacity 0.6s;
  pointer-events: none;
}
.figure.is-open::after { opacity: 1; }
/* Nummer + Rolle übernehmen die Aura-Farbe der gewählten Gestalt */
.figure.is-open .figure__num,
.figure.is-open .figure__role { color: rgb(var(--char-glow)); }
/* Charakter-Render: steht permanent als dunkle Silhouette im Slot
   (wie eine nicht gewählte Gestalt) und tritt beim Öffnen ins Licht */
.figure__char {
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 82%;
  width: auto;
  max-width: none;
  transform: translateX(-50%);
  filter: brightness(0.16) saturate(0.3) drop-shadow(0 10px 20px rgba(0, 0, 0, 0.6));
  transition: filter 0.6s, height 0.6s var(--ease-out);
  pointer-events: none;
}
.figure.is-open .figure__char {
  height: 96%;
  filter: brightness(1.05) saturate(1)
    drop-shadow(0 14px 26px rgba(0, 0, 0, 0.65))
    drop-shadow(0 0 24px rgba(var(--char-glow), 0.4));
}
/* Idle-Atmen der gewählten Gestalt */
.figure.is-open .figure__char {
  animation: char-idle 5.5s ease-in-out 1s infinite;
}
@keyframes char-idle {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
    filter: brightness(1.05) saturate(1)
      drop-shadow(0 14px 26px rgba(0, 0, 0, 0.65))
      drop-shadow(0 0 24px rgba(var(--char-glow), 0.4));
  }
  50% {
    transform: translateX(-50%) translateY(-8px);
    filter: brightness(1.12) saturate(1)
      drop-shadow(0 14px 26px rgba(0, 0, 0, 0.65))
      drop-shadow(0 0 38px rgba(var(--char-glow), 0.65));
  }
}
/* Text bleibt über dem Charakter lesbar */
.figure > :not(.figure__char) { position: relative; z-index: 1; }
.figure__text { max-width: 62%; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.7); }
.figure__num {
  position: absolute;
  top: 1.6rem;
  left: 1.6rem;
  color: var(--brass);
}
.figure__name {
  font-size: clamp(1.5rem, 2.2vw, 2.2rem);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  transition: writing-mode 0s, opacity 0.3s;
  margin-bottom: 0.4rem;
}
.figure.is-open .figure__name {
  writing-mode: horizontal-tb;
  transform: none;
}
.figure__body {
  max-height: 0;
  opacity: 0;
  transition: max-height 0.7s var(--ease-out), opacity 0.5s 0.15s;
  overflow: hidden;
}
.figure.is-open .figure__body {
  max-height: 300px;
  opacity: 1;
}
.figure__role {
  color: var(--brass);
  margin: 0.8rem 0 0.7rem;
}
.figure__text { color: var(--ink-dim); font-size: 1rem; }
.figures__hint {
  margin-top: 2rem;
  color: var(--ink-faint);
}
@media (max-width: 900px) {
  .figures__row { flex-direction: column; min-height: 0; }
  .figure { padding: 1.8rem 1.6rem; }
  .figure__name { writing-mode: horizontal-tb; transform: none; }
  .figure__num { position: static; display: block; margin-bottom: 0.6rem; }
  .figure.is-open .figure__body { max-height: 300px; }
  .figure__body { max-height: 0; }
  .figure__char { left: auto; right: 2%; transform: none; height: 90%; }
  .figure.is-open .figure__char { animation: none; height: 96%; }
}

/* ─────────── Fundament ─────────── */

.foundation__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.foundation__title {
  font-size: clamp(2.4rem, 4.5vw, 4.2rem);
  margin-bottom: 1.6rem;
}
.foundation__left { position: sticky; top: 8rem; }
.foundation__text { color: var(--ink-dim); font-size: 1.15rem; max-width: 30rem; }
.foundation__list { list-style: none; }
.foundation__item {
  display: flex;
  gap: 1.8rem;
  align-items: baseline;
  padding: 1.8rem 0.5rem;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.4s var(--ease-out), background 0.4s;
}
.foundation__item:first-child { border-top: 1px solid var(--line); }
.foundation__item:hover {
  padding-left: 1.4rem;
  background: linear-gradient(90deg, rgba(233, 223, 200, 0.03), transparent);
}
.foundation__idx { color: var(--brass); }
.foundation__item h3 { font-size: 1.5rem; margin-bottom: 0.3rem; }
.foundation__item p { color: var(--ink-dim); font-size: 1.02rem; }
@media (max-width: 900px) {
  .foundation__grid { grid-template-columns: 1fr; }
  .foundation__left { position: static; }
}

/* ─────────── Einblicke (Galerie) ─────────── */

.gallery__title {
  font-size: clamp(2.4rem, 5.5vw, 5rem);
  margin-bottom: clamp(2rem, 4vh, 3rem);
}
.gallery__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 2rem;
}
.gfilter {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: var(--iron);
  border: 1px solid rgba(176, 141, 79, 0.35);
  padding: 0.55rem 1rem;
  transition: color 0.3s, border-color 0.3s, background 0.3s;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
.gfilter:hover { color: var(--ink); border-color: var(--gold); }
.gfilter.is-active {
  color: #f4ead2;
  border-color: var(--gold);
  background: linear-gradient(180deg, #6a471d, #3a2810);
}
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.8rem;
}
.gitem {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-2);
  box-shadow: inset 0 1px 0 rgba(233, 223, 200, 0.05);
  transition: border-color 0.4s, box-shadow 0.4s;
}
.gitem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.9) brightness(0.9);
  transition: transform 0.6s var(--ease-out), filter 0.5s;
}
.gitem:hover { border-color: rgba(201, 161, 92, 0.6); box-shadow: 0 0 20px rgba(214, 118, 43, 0.16); }
.gitem:hover img { transform: scale(1.06); filter: saturate(1.05) brightness(1.02); }
.gitem figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.4rem 0.8rem 0.55rem;
  font-size: 0.58rem;
  color: var(--ink-dim);
  background: linear-gradient(180deg, transparent, rgba(8, 6, 3, 0.85));
  opacity: 0;
  transition: opacity 0.4s;
}
.gitem:hover figcaption { opacity: 1; }
.gallery__count {
  margin-top: 1.4rem;
  color: var(--ink-faint);
}

/* ─────────── Musik: schwebender Mute-Knopf ─────────── */

.audio-toggle {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 130;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(176, 141, 79, 0.5);
  background: rgba(16, 12, 7, 0.82);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(233, 223, 200, 0.08);
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.audio-toggle:hover {
  border-color: var(--brass);
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6), 0 0 18px rgba(176, 141, 79, 0.25);
}
.audio-toggle:focus-visible { outline: 1px solid var(--brass); outline-offset: 3px; }
.audio-toggle__bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 16px;
}
.audio-toggle__bars i {
  width: 3px;
  border-radius: 1px;
  background: #c9a15c;
  transform-origin: bottom;
  transform: scaleY(0.35);
  opacity: 0.55;
  transition: transform 0.4s, opacity 0.4s;
}
.audio-toggle__bars i:nth-child(1) { height: 10px; }
.audio-toggle__bars i:nth-child(2) { height: 16px; }
.audio-toggle__bars i:nth-child(3) { height: 12px; }
.audio-toggle__bars i:nth-child(4) { height: 8px; }
.audio-toggle.is-playing .audio-toggle__bars i {
  opacity: 1;
  animation: eq-dance 0.9s ease-in-out infinite;
}
.audio-toggle.is-playing .audio-toggle__bars i:nth-child(2) { animation-delay: 0.15s; }
.audio-toggle.is-playing .audio-toggle__bars i:nth-child(3) { animation-delay: 0.3s; }
.audio-toggle.is-playing .audio-toggle__bars i:nth-child(4) { animation-delay: 0.45s; }
@keyframes eq-dance {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}
/* stumm: schräger Strich über den ruhenden Balken */
.audio-toggle::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 1.5px;
  background: rgba(233, 223, 200, 0.75);
  transform: rotate(-45deg);
  border-radius: 1px;
  transition: opacity 0.3s;
}
.audio-toggle.is-playing::after { opacity: 0; }

/* ─────────── Lightbox ─────────── */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(8, 6, 3, 0.93);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.5rem clamp(3.2rem, 7vw, 6rem);
}
.lightbox[hidden] { display: none; }
.lightbox__img {
  max-width: 100%;
  max-height: 84vh;
  border: 1px solid rgba(176, 141, 79, 0.5);
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.75);
}
.lightbox button {
  position: absolute;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: var(--iron);
  border: 1px solid rgba(176, 141, 79, 0.5);
  color: var(--ink);
  font-size: 1.3rem;
  line-height: 1;
  transition: border-color 0.3s, color 0.3s;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.lightbox button:hover { border-color: var(--gold); color: var(--gold); }
.lightbox__close { top: 1.2rem; right: 1.2rem; }
.lightbox__prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__caption {
  position: absolute;
  bottom: 1.3rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--ink-dim);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .lightbox { padding: 3rem 0.8rem; }
  .lightbox__prev { left: 0.4rem; }
  .lightbox__next { right: 0.4rem; }
}

/* ─────────── Launcher-Promo (im Fundament) ─────────── */

.launcher {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  margin-top: clamp(4rem, 9vh, 7rem);
}
.launcher__media {
  position: relative;
  border: 1px solid rgba(176, 141, 79, 0.4);
  outline: 1px solid rgba(176, 141, 79, 0.12);
  outline-offset: -8px;
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.6),
    0 0 44px rgba(214, 134, 58, 0.1);
  transform-style: preserve-3d;
}
.launcher__img {
  display: block;
  width: 100%;
}
.launcher__eyebrow { color: var(--brass); margin-bottom: 1rem; }
.launcher__title {
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  margin-bottom: 1.2rem;
}
.launcher__text {
  color: var(--ink-dim);
  font-size: 1.15rem;
  margin-bottom: 2rem;
  max-width: 32rem;
}
@media (max-width: 900px) {
  .launcher { grid-template-columns: 1fr; }
}

/* ─────────── Chronik ─────────── */

.chronicle__title {
  font-size: clamp(2.4rem, 5.5vw, 5rem);
  margin-bottom: clamp(3.5rem, 8vh, 6rem);
}
.chronicle__timeline {
  position: relative;
  max-width: 46rem;
  margin: 0 auto;
  padding-left: 3rem;
}
.chronicle__line {
  position: absolute;
  /* exakt mittig unter den 9px-Punkten (Punktmitte = 4.5px, Linie 1px) */
  left: 4px;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 1px;
  background: linear-gradient(180deg, var(--ore), var(--barrier));
  /* wächst aus Xardas' Glut nach OBEN */
  transform-origin: bottom;
  transform: scaleY(0);
}
.phase {
  position: relative;
  padding: 0 0 clamp(3rem, 7vh, 4.5rem);
}
.phase__dot {
  position: absolute;
  left: -3rem;
  top: 0.4rem;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: var(--bg);
  transition: border-color 0.8s;
}
.phase--done .phase__dot { background: var(--accent); }
.phase--active .phase__dot {
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(148, 193, 76, 0.5);
  animation: pulse 2.2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(148, 193, 76, 0.5); }
  70% { box-shadow: 0 0 0 14px rgba(148, 193, 76, 0); }
  100% { box-shadow: 0 0 0 0 rgba(148, 193, 76, 0); }
}
.phase__meta { color: var(--brass); margin-bottom: 0.7rem; }
.phase__name { font-size: clamp(1.9rem, 3.4vw, 3rem); margin-bottom: 0.5rem; }
.phase__text { color: var(--ink-dim); font-size: 1.1rem; }

/* ── Xardas beschwört die Chronik ── */

.chronicle__layout {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: end;
}
.chronicle__layout .chronicle__timeline { margin: 0; }
.chronicle__figure {
  position: relative;
  margin: 0;
  min-height: 440px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
/* nur das Bild bekommt die Aufsteig-Maske — Aura und Glut atmen frei */
.chronicle__rise {
  position: relative;
  z-index: 1;
  width: min(88%, 400px);
  overflow: hidden;
  animation: xardas-idle 7s ease-in-out 3s infinite;
}
.chronicle__xardas {
  display: block;
  width: 100%;
  /* Bildränder weich in die Nacht auflösen — er erscheint aus dem Dunkel */
  -webkit-mask-image: radial-gradient(ellipse 62% 78% at 50% 46%, #000 52%, transparent 78%);
  mask-image: radial-gradient(ellipse 62% 78% at 50% 46%, #000 52%, transparent 78%);
  filter: drop-shadow(0 0 34px rgba(150, 84, 220, 0.35));
}
@keyframes xardas-idle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
/* Nekromanten-Aura hinter ihm */
.chronicle__aura {
  position: absolute;
  inset: -6%;
  background: radial-gradient(ellipse 52% 46% at 50% 46%, rgba(150, 84, 220, 0.22), transparent 70%);
  animation: necro-pulse 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes necro-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
/* Höllenglut zu seinen Füßen */
.chronicle__hellfire {
  position: absolute;
  left: 50%;
  bottom: -6%;
  width: 92%;
  height: 30%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 52% 62% at 50% 100%, rgba(214, 100, 46, 0.45), rgba(150, 84, 220, 0.2) 55%, transparent 78%);
  filter: blur(8px);
  animation: hellfire-flicker 3.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes hellfire-flicker {
  0%, 100% { opacity: 0.7; }
  35% { opacity: 1; }
  60% { opacity: 0.8; }
}
/* Der Zeitstrahl liegt in seiner Magie: violett glühend, in Glut auslaufend */
.chronicle__line {
  background: linear-gradient(180deg, rgba(150, 84, 220, 0.95), rgba(214, 134, 58, 0.85));
  box-shadow: 0 0 14px rgba(150, 84, 220, 0.55);
}
.chronicle .phase__dot { border-color: #a76ae0; }
.chronicle .phase--done .phase__dot,
.chronicle .phase--active .phase__dot { background: #a76ae0; }
.chronicle .phase--active .phase__dot { animation: pulse-necro 2.2s infinite; }
@keyframes pulse-necro {
  0% { box-shadow: 0 0 0 0 rgba(150, 84, 220, 0.55); }
  70% { box-shadow: 0 0 0 14px rgba(150, 84, 220, 0); }
  100% { box-shadow: 0 0 0 0 rgba(150, 84, 220, 0); }
}
.chronicle .phase__meta { color: #b585ea; }
@media (max-width: 900px) {
  .chronicle__layout { grid-template-columns: 1fr; }
  .chronicle__figure { min-height: 340px; }
}

/* ─────────── FAQ ─────────── */

.faq { max-width: 60rem; }
.faq__title {
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  margin-bottom: clamp(3rem, 6vh, 4.5rem);
}
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line); }
.faq__q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding: 1.7rem 0.4rem;
  background: none;
  border: none;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  text-align: left;
  transition: color 0.3s, padding-left 0.4s var(--ease-out);
}
.faq__q:hover { color: var(--gold); padding-left: 1rem; }
.faq__icon {
  position: relative;
  width: 16px; height: 16px;
  flex: 0 0 16px;
}
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  background: var(--brass);
  transition: transform 0.45s var(--ease-out);
}
.faq__icon::before { left: 0; top: 7px; width: 16px; height: 2px; }
.faq__icon::after { left: 7px; top: 0; width: 2px; height: 16px; }
.faq__item.is-open .faq__icon::after { transform: scaleY(0); }
.faq__item.is-open .faq__icon::before { transform: rotate(180deg); }
.faq__a {
  height: 0;
  overflow: hidden;
}
.faq__a p {
  padding: 0 0.4rem 1.8rem;
  color: var(--ink-dim);
  font-size: 1.12rem;
  max-width: 46rem;
}

/* ─────────── CTA ─────────── */

.cta {
  min-height: 90svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2.2rem;
  padding: 6rem 1.5rem;
  position: relative;
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Drachenglut unten links + Weltfarbe in der Mitte */
  background:
    radial-gradient(ellipse 46% 42% at 16% 92%, rgba(214, 110, 46, 0.16), transparent 72%),
    radial-gradient(ellipse 60% 50% at 55% 55%, rgba(148, 193, 76, 0.1), transparent 70%);
  pointer-events: none;
  transition: background 1s;
}
html[data-world="khorinis"] .cta::before {
  background:
    radial-gradient(ellipse 46% 42% at 16% 92%, rgba(214, 110, 46, 0.16), transparent 72%),
    radial-gradient(ellipse 60% 50% at 55% 55%, rgba(192, 57, 47, 0.1), transparent 70%);
}
/* Der Drache wacht über den Aufbruch — gespiegelt, den Blick auf den Ruf gerichtet */
.cta__dragon {
  position: absolute;
  left: clamp(-9rem, -6vw, -2rem);
  bottom: -2%;
  width: min(52vw, 860px);
  pointer-events: none;
}
.cta > :not(.cta__dragon) { position: relative; z-index: 1; }
.cta__dragon-bob { animation: dragon-idle 8s ease-in-out 2.6s infinite; }
.cta__dragon-img {
  display: block;
  width: 100%;
  transform: scaleX(-1);
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 42px rgba(214, 110, 46, 0.22));
}
@keyframes dragon-idle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(-0.6deg); }
}
/* Glut unter seinen Schwingen */
.cta__dragonfire {
  position: absolute;
  left: 14%;
  bottom: -3%;
  width: 78%;
  height: 26%;
  background: radial-gradient(ellipse 56% 64% at 50% 100%, rgba(214, 110, 46, 0.42), rgba(192, 57, 47, 0.16) 55%, transparent 78%);
  filter: blur(10px);
  animation: hellfire-flicker 3.8s ease-in-out infinite;
}
@media (max-width: 900px) {
  .cta__dragon { width: min(80vw, 480px); left: -16vw; opacity: 0.85; }
}
.cta__kicker { color: var(--ink-dim); }
.cta__title {
  font-size: clamp(3rem, 9vw, 8.5rem);
  line-height: 1;
  max-width: 12ch;
}
.cta__title .w { display: inline-block; }
.cta__note { color: var(--ink-faint); }

/* ─────────── Footer ─────────── */

.footer {
  border-top: 1px solid rgba(176, 141, 79, 0.28);
  padding: 3rem clamp(1.2rem, 5vw, 5rem) 2.5rem;
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, rgba(16, 12, 7, 0.85), rgba(8, 6, 4, 0.95));
  box-shadow: inset 0 1px 0 rgba(233, 223, 200, 0.04);
}
.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 2.2rem;
}
.footer__logo {
  display: block;
  width: min(250px, 62vw);
  height: auto;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.6));
}
.footer__nav {
  display: flex;
  gap: 1.8rem;
  flex-wrap: wrap;
}
.footer__nav a {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  transition: color 0.3s;
}
.footer__nav a:hover { color: var(--gold); }
.footer__legal {
  color: var(--ink-faint);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  line-height: 1.8;
  text-transform: none;
  max-width: 60rem;
}

/* ─────────── Reduced motion ─────────── */

@media (prefers-reduced-motion: reduce) {
  .grain, .hero__scroll-line::after, .hero__script, .hero__logo, .camp::before,
  .figure.is-open .figure__char,
  .chronicle__rise, .chronicle__aura, .chronicle__hellfire,
  .cta__dragon-bob, .cta__dragonfire,
  .wl__ring--a, .wl__ring--b, .wl__core,
  .audio-toggle.is-playing .audio-toggle__bars i,
  .world--minental .world__name, .world--khorinis .world__name { animation: none; }
  /* ohne Reveal-Animation braucht der Titel keine Maske — Glow frei lassen */
  .world__name { overflow: visible; }
  .marquee__track { animation-duration: 120s; }
  *, *::before, *::after { transition-duration: 0.01s !important; }
}