/* =====================================================================
   Basis: Reset, Bühne, Typografie, Reveal-Grammatik
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--stage);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}

body.mode-story { overflow: hidden; }
body.mode-explore { overflow-y: auto; overflow-x: hidden; }

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--action-soft);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: rgba(36, 64, 255, .38); }

.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;
}

/* --- Bühne -------------------------------------------------------- */

#stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--stage);
}

/* Ruhiger, architektonischer Hintergrund: ein sehr weiches Licht und
   ein feines Raster. Beides bewegt sich langsam und trägt Bedeutung —
   das Raster verdichtet sich in Architektur-Szenen. */
#backdrop {
  position: absolute;
  inset: -10%;
  pointer-events: none;
  transition: opacity 1.4s var(--ease);
}
#backdrop .glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 62% at 22% 18%, rgba(27, 47, 168, .40), transparent 62%),
    radial-gradient(52% 58% at 82% 78%, rgba(36, 64, 255, .22), transparent 64%),
    radial-gradient(70% 70% at 50% 110%, rgba(6, 24, 125, .55), transparent 70%);
  animation: drift 46s var(--ease) infinite alternate;
}
#backdrop .grid {
  position: absolute;
  inset: 0;
  opacity: .5;
  background-image:
    linear-gradient(to right, rgba(150, 175, 255, .055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(150, 175, 255, .055) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(78% 78% at 50% 42%, #000 30%, transparent 78%);
  transition: opacity 1.2s var(--ease), background-size 1.6s var(--ease);
}
body.grid-dense #backdrop .grid { opacity: 1; background-size: 48px 48px; }
body.grid-off   #backdrop .grid { opacity: .18; }

@keyframes drift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1.02); }
  to   { transform: translate3d(2%, 1.5%, 0) scale(1.08); }
}

/* Feines Korn — nimmt Farbverläufen das Digitale, ohne Datei. */
#stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .32;
  background-image: radial-gradient(rgba(255, 255, 255, .35) .5px, transparent .5px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
}

/* --- Szenen ------------------------------------------------------- */

.scene {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  padding: clamp(74px, 11.5vh, 112px) var(--pad-x) clamp(76px, 11.5vh, 106px);
  opacity: 0;
  visibility: hidden;
  transform: scale(1.015);
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility 0s linear var(--dur);
  will-change: opacity, transform;
}
.scene.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility 0s;
}
.scene.is-past { transform: scale(.985) translateY(-14px); }

.scene-inner {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
}

/* --- Typografie-Bausteine ----------------------------------------- */

.vdiv-logo {
  display: block;
  height: clamp(40px, 4.2vw, 60px);
  width: auto;
  margin-bottom: clamp(12px, 1.6vh, 20px);
}

.kicker {
  font-size: var(--t-kicker);
  font-weight: 600;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--fg-3);
}
.kicker .dot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--action-soft);
  margin-right: 10px;
  vertical-align: 2px;
}

.display {
  font-size: var(--t-display);
  font-weight: 600;
  letter-spacing: var(--track-display);
  line-height: 1.02;
}
.h1 {
  font-size: var(--t-h1);
  font-weight: 600;
  letter-spacing: var(--track-h1);
  line-height: 1.06;
}
.h2 {
  font-size: var(--t-h2);
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.14;
}
.h3 {
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.24;
}
.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--fg-2);
  max-width: 46ch;
}
.small { font-size: var(--t-small); color: var(--fg-3); line-height: 1.5; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dim { color: var(--fg-3); }
.hi { color: var(--fg); }

/* --- Reveal-Grammatik --------------------------------------------- *
   Alles, was erscheint, erscheint auf eine von zwei Arten:
   maskiert von unten (Text) oder angehoben (Objekte).            */

.rv {
  display: block;
  overflow: hidden;
  /* Maskierte Reveals dürfen keine Unterlängen abschneiden. */
  padding-bottom: .13em;
  margin-bottom: -.13em;
}
.rv > * {
  display: block;
  transform: translateY(110%);
  transition: transform 900ms var(--ease);
  transition-delay: var(--d, 0ms);
}
.is-active .rv > * { transform: none; }

.up {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  transition-delay: var(--d, 0ms);
}
.is-active .up { opacity: 1; transform: none; }

.fade {
  opacity: 0;
  transition: opacity 800ms var(--ease);
  transition-delay: var(--d, 0ms);
}
.is-active .fade { opacity: 1; }

/* Schrittgesteuerte Elemente innerhalb einer Szene. */
.step-el {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease),
              filter 520ms var(--ease);
  filter: blur(3px);
}
.step-el.on { opacity: 1; transform: none; filter: none; }
.step-el.was { opacity: .26; filter: none; }

/* --- Kleinteile --------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--t-small);
  color: var(--fg-2);
  background: var(--surface);
  white-space: nowrap;
}
.chip.ki { border-color: rgba(165, 139, 255, .4); color: #cfc0ff; background: var(--ki-dim); }
.chip.ok { border-color: rgba(52, 211, 153, .34); color: #8ef0cd; }
.chip.warn { border-color: rgba(251, 191, 36, .34); color: #ffd980; }

/* Reifegrad-Marker — nur dort, wo er wirklich nötig ist. */
.maturity {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: clamp(9.5px, .68vw, 11px);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--fg-2);
  background: rgba(255, 255, 255, .04);
}
.maturity::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.maturity[data-m="prototyp"] { color: var(--mat-proto);  border-color: rgba(52, 211, 153, .32); }
.maturity[data-m="aufbau"]   { color: var(--mat-build);  border-color: rgba(111, 134, 255, .32); }
.maturity[data-m="naechstes"]{ color: var(--mat-next);   border-color: rgba(251, 191, 36, .32); }
.maturity[data-m="zielbild"] { color: var(--mat-vision); border-color: rgba(165, 139, 255, .32); }

.rule {
  height: 1px;
  background: linear-gradient(90deg, var(--line-strong), transparent);
  border: 0;
}

/* --- Logos -------------------------------------------------------- *
   Logodateien werden nie verändert. Dunkle Marken bekommen deshalb
   eine helle Platte, statt invertiert zu werden.                  */
.logo-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: var(--r-sm);
  padding: 9px 14px;
}
.logo-plate img { height: var(--lh, 20px); width: auto; }
.logo-bare img { height: var(--lh, 20px); width: auto; }

/* --- Bewegung aus ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .rv > *, .up, .fade, .step-el { transform: none !important; opacity: 1 !important; filter: none !important; }
  #backdrop .glow { animation: none; }
}