:root {
  --vh: 100vh;              /* wird per JS auf die echte Fensterhöhe gesetzt */
  --pad: clamp(20px, 5.5vw, 96px);
  --padb: clamp(36px, 10vh, 120px);
  --ink: #0d0d0c;
  --accent: #b3262d;        /* das-Rot aus den Renderings */
  --paper: #f8f4ec;         /* Papierton der Grundrisse */
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ink); color: #fff; }
body {
  font-family: "Inter Tight", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

/* Preloader */
html.locked, html.locked body { overflow: hidden; }
#preloader {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: var(--ink);
  overflow: hidden;
  transition: opacity .8s ease, visibility .8s;
}
/* erstes Rendering verschwommen als Hintergrund, darüber schwarzes Overlay */
#preloader::before, #preloader::after { content: ""; position: absolute; inset: 0; z-index: -1; }
#preloader::before {
  background: url("assets/img/das_hub_001.webp") center / cover no-repeat;
  filter: blur(28px); transform: scale(1.12);
}
#preloader::after { background: rgba(0, 0, 0, .6); }
#preloader { isolation: isolate; }
#preloader.done { opacity: 0; visibility: hidden; }
.preload-logo { height: clamp(48px, 7vw, 80px); width: auto; }
.preload-bar { width: min(240px, 60vw); height: 1px; background: rgba(255,255,255,.18); overflow: hidden; }
.preload-bar span {
  display: block; height: 100%; background: #fff;
  transform-origin: 0 50%; transform: scaleX(0); transition: transform .3s ease;
}
.preload-pct { margin: 0; font-size: .75rem; letter-spacing: .2em; opacity: .6; font-variant-numeric: tabular-nums; }

/* Header */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--pad);
  pointer-events: none;
}
.top > * { pointer-events: auto; }
.brand {
  font-weight: 600; font-size: 1.05rem; letter-spacing: -0.02em;
  text-decoration: none; text-shadow: 0 1px 12px rgba(0,0,0,.35);
}
.brand span { color: var(--accent); }
.brand img { display: block; height: clamp(26px, 2.6vw, 38px); width: auto; filter: drop-shadow(0 1px 10px rgba(0,0,0,.3)); }
.top-right { display: flex; align-items: center; gap: 16px; }
.loader { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.pill {
  font-size: .85rem; text-decoration: none;
  padding: 10px 18px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(0,0,0,.18);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background .2s;
}
.pill:hover { background: rgba(255,255,255,.18); }

.progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 101; }
.progress span {
  display: block; height: 100%; background: #fff;
  transform-origin: 0 50%; transform: scaleX(0);
}

/* Kapitel */
.chapter { position: relative; }
.chapter + .chapter { margin-top: calc(var(--vh) * -1); }
.stage {
  position: sticky; top: 0;
  height: var(--vh); overflow: hidden;
  background: var(--ink);
}
.media { position: absolute; inset: 0; will-change: transform; }
.media canvas, .media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.media img { will-change: opacity; }
.shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.2) 38%, rgba(0,0,0,0) 62%),
    linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 16%);
}
.cover { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }

.text {
  position: absolute; left: var(--pad); right: var(--pad); bottom: var(--padb);
  opacity: 0; will-change: opacity, transform;
  text-shadow: 0 2px 24px rgba(0,0,0,.25);
}
.kicker {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 1.1rem;
  font-size: .78rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
}
.kicker::before { content: ""; width: 36px; height: 1px; background: currentColor; opacity: .8; }
.text h1, .text h2 {
  margin: 0 0 1.2rem; font-weight: 300;
  font-size: clamp(2.3rem, 6.2vw, 6.6rem);
  line-height: .98; letter-spacing: -0.035em;
  max-width: 14ch;
}
.text h1 { font-size: clamp(3rem, 9.5vw, 10rem); max-width: none; }
.text h1 span { color: var(--accent); }
.text h1.logo-title { margin-bottom: 1.6rem; }
.text h1.logo-title img {
  display: block; width: auto; height: clamp(90px, 14vw, 230px);
  filter: drop-shadow(0 2px 24px rgba(0,0,0,.25));
}
.lede {
  margin: 0; max-width: 36ch;
  font-size: clamp(1rem, 1.35vw, 1.28rem); line-height: 1.5; opacity: .92;
}
.cta {
  display: inline-block; margin-top: 2rem;
  padding: 15px 26px; border-radius: 999px;
  background: #fff; color: var(--ink); text-decoration: none; font-weight: 500;
  text-shadow: none;
}

.hint {
  position: absolute; right: var(--pad); bottom: var(--padb);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
}
.hint i {
  display: block; width: 1px; height: 56px; background: rgba(255,255,255,.35);
  position: relative; overflow: hidden;
}
.hint i::after {
  content: ""; position: absolute; left: 0; top: -40%; width: 100%; height: 40%;
  background: #fff; animation: hint 1.8s ease-in-out infinite;
}
@keyframes hint { to { top: 100%; } }

/* Grundrisse + Footer: ein Hintergrund im Papierton der Pläne */
.plans {
  position: relative; z-index: 50;
  margin-top: calc(var(--vh) * -1);   /* schiebt sich wie die Kapitel über die letzte Szene */
  background: var(--paper); color: var(--ink);
  padding: clamp(80px, 14vh, 160px) var(--pad) 40px;
}
.plan { margin: 0 auto clamp(64px, 12vh, 140px); max-width: 1400px; }
.plan .kicker { margin-bottom: 1.4rem; }
.plan img { display: block; width: 100%; height: auto; }

/* Footer */
.footer {
  position: relative; z-index: 50; background: var(--paper); color: var(--ink);
  padding: 24px var(--pad) 56px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.footer-logo { display: block; height: 34px; width: auto; }

/* Header über hellem Hintergrund dunkel */
.top .brand img, .progress span { transition: filter .3s, background .3s; }
body.light-ui .top .brand img { filter: invert(1); }
body.light-ui .progress span { background: var(--ink); }
.fine { margin: 0; font-size: .8rem; opacity: .5; }
.fine a { text-decoration: none; }
.fine a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .hint { display: none; }
  .loader { display: none; }
  .pill { padding: 8px 14px; font-size: .78rem; }
}