/* ══════════════════════════════════════════════════════════════════════════
   RAUM — das Fundament aller Schaustücke (11.08.2026)
   ══════════════════════════════════════════════════════════════════════════
   Konzept: `.nomad/ANIMATIONS-KONZEPT.md` §0.

   Bisher hieß „Faux-3D" hier: isometrisch gezeichnete SVGs, die sich
   einblenden. Das kann keine Kamerafahrt — und genau deshalb sahen die drei
   Vorgängerfassungen nach Deko aus.

   Stattdessen ein ECHTER Raum: die Bühne bekommt `perspective`, die Welt
   `transform-style:preserve-3d`, und die Ebenen darin stehen mit echtem
   `translateZ` hintereinander. Bewegt wird die WELT, nicht die einzelne
   Ebene — das ist die Kamera.

     .rm         Bühne     perspective + perspective-origin
     .rm-welt    Welt      preserve-3d, trägt --gier/--nick/--fahrt
     .rm-e       Ebene     translateZ(var(--z)), Glas, Innenkante, Spiegelung

   Was das kann und flaches SVG nicht: nahe Ebenen wandern schneller als ferne,
   ohne dass ich das rechne · `rotateY` stellt die ganze Szene schräg · echte
   Verdeckung · Tiefenschärfe nach Z.
   Was es nicht kann: ein Objekt umrunden. Deshalb schwenkt und fährt die Kamera
   in jedem Stück — sie umrundet nie.

   Kosten: 0 KB. Keine Bibliothek, kein Canvas. Fail-Safe: ohne `preserve-3d`
   liegen die Ebenen flach übereinander und alles bleibt lesbar.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Die Bühne ─────────────────────────────────────────────────────────── */
.rm{position:relative; width:100%; isolation:isolate; overflow:hidden;
  border-radius:var(--radius-lg,20px);
  perspective:var(--tiefe,1400px); perspective-origin:50% var(--blickpunkt,44%);
  background:linear-gradient(152deg,#F3F9F5 0%,#FFFFFF 44%,#F5FAF7 100%);
  --gier:0deg; --nick:0deg; --fahrt:0px; --seit:0px; --hoehe:0px}

/* Zwei weiche Höfe und ein Raster geben dem Grund Leben, ohne Lärm. */
.rm-grund{position:absolute; inset:0; z-index:0; pointer-events:none}
.rm-hof{position:absolute; border-radius:50%; filter:blur(44px)}
.rm-hof--a{width:58%; aspect-ratio:1; left:-8%; top:0;
  background:radial-gradient(closest-side,rgba(0,148,92,.2),transparent 70%);
  animation:rm-drift-a 38s ease-in-out infinite}
.rm-hof--b{width:52%; aspect-ratio:1; right:-6%; bottom:-6%;
  background:radial-gradient(closest-side,rgba(232,166,0,.19),transparent 70%);
  animation:rm-drift-b 47s ease-in-out infinite}
@keyframes rm-drift-a{0%,100%{transform:translate(0,0) scale(1)}
                      50%{transform:translate(11%,7%) scale(1.1)}}
@keyframes rm-drift-b{0%,100%{transform:translate(0,0) scale(1.06)}
                      50%{transform:translate(-9%,-7%) scale(.93)}}
.rm-raster{position:absolute; inset:-8%;
  background-image:linear-gradient(rgba(14,33,25,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(14,33,25,.045) 1px,transparent 1px);
  background-size:42px 42px;
  -webkit-mask-image:radial-gradient(closest-side,#000 8%,transparent 72%);
          mask-image:radial-gradient(closest-side,#000 8%,transparent 72%);
  animation:rm-raster 52s linear infinite}
@keyframes rm-raster{to{background-position:42px 42px}}

/* ── Die Welt: hier sitzt die Kamera ───────────────────────────────────── */
.rm-welt{position:relative; z-index:2; width:100%; height:100%;
  transform-style:preserve-3d;
  transform:translate3d(var(--seit),var(--hoehe),var(--fahrt))
            rotateX(var(--nick)) rotateY(var(--gier));
  transition:transform .6s cubic-bezier(.34,1.1,.64,1)}

/* ── Die Ebenen ────────────────────────────────────────────────────────── */
.rm-e{position:absolute; inset:0; transform-style:preserve-3d;
  transform:translateZ(var(--z,0px)) translateX(var(--x,0px)) translateY(var(--y,0px))
            rotateY(var(--dreh,0deg));
  display:grid; place-items:center}
/* Tiefenschärfe: was hinten steht, ist minimal weich. Kostet nichts, wirkt viel. */
.rm-e--fern{filter:blur(.7px)}
.rm-e--mittel{filter:blur(.3px)}

/* ── Die Glastafel ─────────────────────────────────────────────────────── */
.rm-glas{position:relative; width:100%; height:100%; border-radius:18px; overflow:hidden;
  background:linear-gradient(158deg,rgba(255,255,255,.74),rgba(255,255,255,.46));
  -webkit-backdrop-filter:blur(16px) saturate(160%); backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 26px 52px -30px rgba(14,33,25,.5), 0 1px 0 rgba(255,255,255,.92) inset}
/* Genau EINE Innenkante je Tafel, in der Bereichsfarbe. */
.rm-glas::before{content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--akzent,var(--signal)),transparent)}
/* Der Glanz wandert einmal je Runde diagonal über das Glas. */
.rm-glanz{position:absolute; inset:-45%; pointer-events:none;
  background:linear-gradient(112deg,transparent 42%,rgba(255,255,255,.9) 50%,transparent 58%)}

/* ── Die Spiegelung — der „cleane" Effekt ──────────────────────────────
   Eine gespiegelte Kopie unter der Tafel, mit Verlaufsmaske und leichtem
   Weichzeichner. Das ist der Glastisch-Look; er kostet ein Element. */
.rm-spiegel{position:absolute; left:0; right:0; top:100%; height:46%;
  transform:scaleY(-1); transform-origin:top; opacity:.26; filter:blur(1.5px);
  pointer-events:none;
  -webkit-mask-image:linear-gradient(#000,transparent 64%);
          mask-image:linear-gradient(#000,transparent 64%)}

/* ── Bausteine, die in mehreren Stücken vorkommen ─────────────────────── */
.rm-fahne{position:absolute; display:inline-flex; align-items:center; gap:.5rem;
  padding:.36rem .85rem; border-radius:999px; font-size:.78rem; font-weight:600;
  color:var(--ink); background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 10px 22px -14px rgba(14,33,25,.55); white-space:nowrap}
.rm-fahne i{width:.52rem; height:.52rem; border-radius:50%; background:var(--akzent,var(--signal))}
.rm-wert{display:flex; align-items:baseline; gap:.55rem; margin:.4rem 0 0;
  padding-top:.85rem; border-top:1px solid var(--linie)}
.rm-wert b{font-family:var(--font-head); font-size:clamp(1.7rem,2.9vw,2.3rem); line-height:1;
  color:var(--akzent,var(--signal-text)); font-variant-numeric:tabular-nums; font-weight:700}
.rm-wert small{font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2)}

/* Bereichsfarben als Akzent — jedes Stück setzt genau einen. */
.rm--chemie{--akzent:#00945C} .rm--nuklear{--akzent:#E8A600}
.rm--industrie{--akzent:#B4762A} .rm--personal{--akzent:#5E6E78}

/* ── Zeichenwerte für die Objekte (REF-P: wenige Farben, viele Werte) ──── */
.rm svg text{font-family:var(--font-body)}
.rm-t{font-size:13px; font-weight:600; fill:var(--ink)}
.rm-t--klein{font-size:11px; fill:var(--ink-2); font-weight:500}
.rm-t--gross{font-size:16px; font-weight:700; fill:var(--ink); font-family:var(--font-head)}

/* ── Dunkelmodus ───────────────────────────────────────────────────────── */
html.dark .rm{background:linear-gradient(152deg,#18261F 0%,#131E19 44%,#17251E 100%)}
html.dark .rm-hof--a{background:radial-gradient(closest-side,rgba(47,191,136,.26),transparent 70%)}
html.dark .rm-hof--b{background:radial-gradient(closest-side,rgba(240,185,58,.22),transparent 70%)}
html.dark .rm-raster{background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
                                      linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px)}
html.dark .rm-glas{background:linear-gradient(158deg,rgba(40,58,50,.82),rgba(28,45,37,.56));
  border-color:rgba(255,255,255,.12);
  box-shadow:0 26px 52px -30px rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.1) inset}
html.dark .rm-glanz{background:linear-gradient(112deg,transparent 42%,rgba(255,255,255,.16) 50%,transparent 58%)}
html.dark .rm-fahne{background:rgba(34,52,44,.9); border-color:rgba(255,255,255,.14); color:var(--ink)}
html.dark .rm-spiegel{opacity:.16}
/* Die gezeichneten Objekte behalten ihren hellen Zeichengrund — sie sind auf
   Licht von oben links gebaut und würden im Dunkeln zu grauen Flecken. */
html.dark .rm-blatt{background:rgba(255,255,255,.94); border-radius:14px}

/* ── Leistung ──────────────────────────────────────────────────────────
   Nur `transform` und `opacity` werden animiert. `backdrop-filter` ist teuer:
   ab der dritten gleichzeitigen Glasfläche wird die hinterste auf einen
   statischen Verlauf umgestellt — optisch kaum zu unterscheiden. */
.rm-e--fern .rm-glas{-webkit-backdrop-filter:none; backdrop-filter:none;
  background:linear-gradient(158deg,rgba(255,255,255,.6),rgba(255,255,255,.38))}
html.dark .rm-e--fern .rm-glas{background:linear-gradient(158deg,rgba(40,58,50,.7),rgba(28,45,37,.5))}

@media (prefers-reduced-motion: reduce){
  /* Dämpfen, nicht töten (REF-C Regel 7). */
  .rm-hof,.rm-raster{animation-duration:400s !important}
  .rm-welt{transition-duration:2.4s}
}
@media(max-width:900px){
  .rm{--tiefe:1000px}
  .rm-e--fern{filter:none}
}