/* ============================================================
   3D-Modell als Section-Hintergrund (Stil-Layer, nicht UI).
   Vollflaechig ueber die Leistungen-Sektion. Das Modell selbst
   wird im Canvas-Space oben rechts positioniert und teilweise
   ueber den Rand hinaus skaliert.
   ============================================================ */

.qs-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* opacity wird via JS aus dem Scroll-Progress gesetzt (kontinuierlich) */
  opacity: 0;
}

.qs-stage canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Glow-Aura: erbt opacity von der Stage (also auch scroll-driven) */
.qs-stage::before {
  content: '';
  position: absolute;
  top: -10%;
  right: -10%;
  width: 70%;
  height: 80%;
  background: radial-gradient(
    circle at 65% 35%,
    rgba(28, 138, 62, 0.18),
    rgba(28, 138, 62, 0.06) 35%,
    transparent 65%
  );
  filter: blur(60px);
  z-index: -1;
  pointer-events: none;
}

/* Damit der Stage-Layer hinter Section-Content liegt, aber vor BG */
.section--leistungen .section__container {
  position: relative;
  z-index: 1;
}

.section--leistungen .qs-stage {
  z-index: 0;
}

/* Mobile: Modell verstecken (zu klein, lenkt ab vom Content) */
@media (max-width: 880px) {
  .qs-stage {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qs-stage {
    display: none;
  }
}