/* =========================================================================
   Into the Void — Stylesheet
   Nur Systemschriften, keine externen Ressourcen.
   Kompatibel mit: style-src 'self'; script-src 'self'
   ========================================================================= */

:root {
  --void:        #04050a;
  --panel-fill:  rgba(6, 9, 17, 0.72);   /* Scheibe dahinter wird sehr hell */
  --panel-solid: rgba(6, 9, 17, 0.88);   /* ohne backdrop-filter */

  --fg:      #dbe2f5;
  --fg-soft: #b9c2d8;
  --dim:     #67728c;
  --mute:    #475365;

  --ice:   #9fb4ff;   /* kühler Akzent, für den Photonenring/die Scheibe */

  --hair:  rgba(159, 180, 255, 0.13);
  --hair2: rgba(159, 180, 255, 0.34);

  --mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono",
          "Roboto Mono", Menlo, Consolas, monospace;

  --panel-blur: 14px;

  /* Text ohne Platte steht teils auf sehr heller Scheibe */
  --lift: 0 1px 3px rgba(4, 5, 10, 0.95), 0 2px 16px rgba(4, 5, 10, 0.9);

  --pad: clamp(0.85rem, 2.4vw, 1.9rem);
  --sb: env(safe-area-inset-bottom, 0px);
  --sl: env(safe-area-inset-left, 0px);
  --sr: env(safe-area-inset-right, 0px);
  --stp: env(safe-area-inset-top, 0px);
}

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

html {
  height: 100%;
  background: var(--void);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--fg);
  font-family: var(--mono);
}

/* ---------- Vollbild ohne Scrollen ---------- */

body.void {
  position: fixed;
  inset: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

#stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
}

#stage:active { cursor: grabbing; }

/* ---------- Deckel, bis das erste Bild wirklich steht ----------
   Weicht, sobald void.js (oder der Notpfad) das erste Mal gezeichnet
   hat. Die Animation ist nur die Reißleine, falls gar kein Skript
   läuft — sonst bliebe der Deckel für immer liegen. */

.calib {
  position: fixed;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--void);
  pointer-events: none;
  font-size: 0.575rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
  opacity: 1;
  transition: opacity 520ms ease;
  animation: calibFail 5s ease forwards;
}

body.is-live .calib { opacity: 0; animation: none; }

@keyframes calibFail {
  0%, 70% { opacity: 1; }
  100%    { opacity: 0; }
}

/* zentriert über der Szene, unabhängig davon ob WebGL oder der
   Notpfad läuft */
.nogl {
  position: fixed;
  left: 50%;
  top: 32%;
  z-index: 3;
  transform: translateX(-50%);
  max-width: min(28rem, calc(100% - 2 * var(--pad)));
  margin: 0;
  color: var(--dim);
  font-size: 0.7rem;
  text-align: center;
}

/* ---------- Bedienschicht: nur noch der Datenschutz-Link ---------- */

.ui {
  position: fixed;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: calc(var(--pad) + var(--stp)) calc(var(--pad) + var(--sr))
           calc(var(--pad) + var(--sb)) calc(var(--pad) + var(--sl));
  pointer-events: none;
  opacity: 1;
  transition: opacity 900ms ease;
}

.ui > * { pointer-events: auto; }

.ui.is-idle { opacity: 0.26; }
.ui.is-idle:hover,
.ui.is-idle:focus-within { opacity: 1; transition-duration: 180ms; }

/* ---------- Glasplatten der Instrumente ---------- */

.panel {
  background: var(--panel-fill);
  border: 1px solid var(--hair);
  border-radius: 0;   /* bewusst kantig, kein abgerundetes Glas */
  padding: 0.55rem 0.85rem;
  -webkit-backdrop-filter: blur(var(--panel-blur));
  backdrop-filter: blur(var(--panel-blur));
  transition: border-color 160ms ease;
}

.panel:hover,
.panel:focus-within { border-color: var(--hair2); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .panel { background: var(--panel-solid); }
}

/* ---------- Datenschutz: klein und unaufdringlich ---------- */

.legal {
  color: var(--dim);
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: var(--lift);
  opacity: 1;
  transition: color 160ms, opacity 160ms;
}

.legal:hover { color: var(--ice); opacity: 1; }

/* ---------- Tastaturfokus ---------- */

:focus-visible { outline: 1px solid var(--ice); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .ui, .legal, .panel, .calib { transition: none; }
  /* Reißleine bleibt, aber ohne Verlauf — harter Schnitt */
  .calib { animation: calibFail 5s step-end forwards; }
}

/* =========================================================================
   Rechtstexte — eigene Seiten, hier darf gescrollt werden
   ========================================================================= */

body.doc {
  overflow-y: auto;
  padding: clamp(1.5rem, 6vw, 4rem) var(--pad);
  line-height: 1.7;
}

.doc__inner {
  max-width: 44rem;
  margin: 0 auto;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.95rem;
}

.doc__back {
  display: inline-block;
  margin-bottom: 2.5rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
  text-decoration: none;
  border-bottom: 1px solid var(--hair);
}

.doc__back:hover { color: var(--ice); border-bottom-color: var(--hair2); }

.doc h1 {
  margin: 0 0 0.4rem;
  font-family: var(--mono);
  font-size: clamp(1.2rem, 4vw, 1.6rem);
  font-weight: 400;
  letter-spacing: 0.04em;
}

.doc h2 {
  margin: 2.5rem 0 0.7rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--hair);
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ice);
}

.doc h3 { margin: 1.6rem 0 0.4rem; font-size: 0.95rem; font-weight: 600; }

.doc p, .doc li { color: var(--fg-soft); }
.doc ul { padding-left: 1.15rem; }
.doc li { margin-bottom: 0.35rem; }
.doc a { color: var(--ice); }

.doc__meta {
  margin: 0 0 2rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
}

.doc__fill {
  padding: 0.1rem 0.35rem;
  border-bottom: 1px dashed var(--hair2);
  color: var(--ice);
  font-family: var(--mono);
  font-size: 0.88em;
}

.doc__note {
  margin: 2rem 0;
  padding: 1rem 1.15rem;
  border-left: 2px solid var(--hair2);
  background: rgba(159, 180, 255, 0.05);
  font-size: 0.875rem;
  color: var(--dim);
}