/* ================================================================
   LICHTSCHACHT-HINTERGRUND — 1:1-PORT (§7) aus dem abgesegneten
   Kunden-Hub Tiefe B (design/kunden-hub-final-tiefeB.html, <style> Z.27–58).
   Nur die reinen Hintergrund-Ebenen: shaft-bg + 3 Parallax-Felder (far/mid/near)
   + Grain. KEINE Vignette-/Reveal-/Content-Regeln (die hängen am Hub-Inhalt).
   Farben/Werte verbatim (bereits als Hex/rgba im Hub — keine Hub-Tokens nötig).
   Wird via <link> NACH styles.css geladen; CSP-clean (extern, kein inline <style>).
   ================================================================ */

/* Der Schacht selbst: sehr dunkle Grundfläche, in der das LED-Feld lebt. */
.shaft-bg{position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:radial-gradient(1200px 900px at 50% 12%, rgba(34,84,85,.30), transparent 60%),
    radial-gradient(900px 1100px at 82% 62%, rgba(151,137,201,.08), transparent 62%),
    linear-gradient(180deg,#0b1414 0%,#0E1616 40%,#0b1313 100%)}
/* Drei Parallax-Ebenen als getrennte Grids: fern (hinten) → nah (vorne).
   Nur der Look wird pro Ebene variiert; die Warp-Mechanik ist geteilt.
   1b2: wie 1b (Tiefe B, ~28 % dezent), aber die Slide-Streaks feiner —
   beim Warp zusätzlich schmäler (scaleX schrumpft) und minimal länger. */
.shaft-field{position:fixed;inset:0;pointer-events:none;
  display:grid;grid-template-columns:repeat(var(--cols,30),1fr);grid-template-rows:repeat(var(--rows,20),1fr);
  padding:0 2%;will-change:transform}
.shaft-field.far {z-index:-2;filter:blur(.6px)}
.shaft-field.mid {z-index:-2}
.shaft-field.near{z-index:-2}

.shaft-field i{margin:auto;border-radius:50%;background:#52CFAB;opacity:0;will-change:opacity,transform;
  transform:scaleX(var(--sx,1)) scaleY(var(--sy,1));transform-origin:center}
/* Basis-Größe je Ebene (nah = größer, fern = kleiner) */
.shaft-field.far  i{width:2px;  height:2px}
.shaft-field.mid  i{width:2.8px;height:2.8px}
.shaft-field.near i{width:3.6px;height:3.6px}
/* Farb-Rollen wie in der Baseline (.r hell-mint, .p purple, .p.r hell-purple) */
.shaft-field i.r  {background:#A1EDDB}
.shaft-field i.p  {background:#9789C9}
.shaft-field i.p.r{background:#CCBDF6}
/* Nahe helle Mint-Punkte bekommen einen zarten Glow — hier softer (kleinerer Radius, geringere Deckung) */
.shaft-field.near i.r{box-shadow:0 0 3px rgba(161,237,219,.35)}
.shaft-field.near i.p.r{box-shadow:0 0 3px rgba(204,189,246,.35)}
.shaft-grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E")}

/* ---- REDUCED MOTION: Feld statisch/gedimmt (verbatim aus Hub <style> Z.404–408).
   rAF startet dann gar nicht (siehe login-bg.js), das Feld liegt via CSS ruhig. ---- */
@media(prefers-reduced-motion:reduce){
  .shaft-field{filter:none !important}
  .shaft-field i{transform:none !important;opacity:.1;box-shadow:none !important}
  .shaft-field i.p{opacity:.13}
  .shaft-field.far i{opacity:.06}
  .shaft-field.near i{opacity:.13}
}

/* ---- Einzige technisch nötige Ergänzung (KEIN Redesign):
   Die Login-Card muss über dem Shaft liegen und lesbar bleiben.
   Im Hub liegt der Shaft ganz hinten (z-index negativ); der Body-Content dort
   ist automatisch darüber. Auf der Login-Seite hatte .login-card z-index:2
   relativ zum alten .login-bg (z-index:0). Da die Shaft-Ebenen negativ liegen,
   liegt die Card ohnehin darüber — wir sichern es defensiv ab. ---- */
.login-body{position:relative}
.login-card{position:relative;z-index:1}