/* =================================================================
   UXOVIA · SCROLL-BACKDROPS · STILE
   Lag bis zuletzt in der Startseite. Seit die Figuren auch auf den
   Leistungsseiten stehen, gehoert das hierher — sonst muesste jede
   Seite ihre eigene Kopie tragen.
   ================================================================= */
/* ── Scroll-Backdrops: Constellation-Figuren, die den Content untermalen ── */
#ux-backdrops {
  position: fixed;
  inset: 0;
  z-index: -1;                 /* immer hinter dem Content, über dem Body-Ground */
  pointer-events: none;
  overflow: hidden;
  --ux-bd-max: 0.7;            /* maximale Deckkraft der Figuren */
}
.ux-bd {
  position: absolute;
  top: 50%;
  height: min(96vh, 960px);
  width: auto;
  max-width: none;
  opacity: 0;
  will-change: opacity, transform;
  /* Schwarz -> transparent gegen das schwarze Body-Ground: keine Kanten */
  mix-blend-mode: screen;
  /* elliptische Feder: straffer Kern, damit mehr scharfe Struktur sichtbar
     bleibt; Rand läuft weiterhin weich aus (keine Kanten) */
  /* #000 = volle Deckkraft der Maske, keine Farbe. Kein Token einsetzen. */
  -webkit-mask-image: radial-gradient(ellipse 74% 72% at 50% 46%, #000 62%, transparent 100%);
          mask-image: radial-gradient(ellipse 74% 72% at 50% 46%, #000 62%, transparent 100%);
  transform: translate3d(0, calc(-50% + var(--ux-ty, 0px)), 0);
}
/* leicht über den Viewport-Rand ziehen -> äußere Kante liegt off-screen */
.ux-bd--left  { left:  -5vw; }
.ux-bd--right { right: -5vw; }

@media (max-width: 860px) {
  #ux-backdrops { --ux-bd-max: 0.38; }
  .ux-bd { height: min(74vh, 620px); }
  .ux-bd--left  { left:  -16vw; }
  .ux-bd--right { right: -16vw; }
}
@media (max-width: 560px) {
  #ux-backdrops { --ux-bd-max: 0.26; }
  .ux-bd--left  { left:  -24vw; }
  .ux-bd--right { right: -24vw; }
}