/* Dezente, eigenständige Build-Szene der Startseite. */
.pixels-3d-scroll-scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.pixels-3d-scroll-scene__stage {
  opacity: 0;
  transition: opacity .35s ease;
}
.pixels-3d-scroll-scene.is-active .pixels-3d-scroll-scene__stage { opacity: .42; }
.pixels-3d-scroll-scene::before,
.pixels-3d-scroll-scene::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  filter: blur(2px);
  opacity: calc(.08 + var(--scene-progress, 0) * .16);
  transition: opacity .4s ease;
}
.pixels-3d-scroll-scene::before {
  width: min(58vw, 760px);
  height: min(58vw, 760px);
  left: calc(50% - min(29vw, 380px));
  top: calc(50% - min(29vw, 380px));
  background: radial-gradient(circle, rgba(69, 220, 207, .18), transparent 65%);
}
.pixels-3d-scroll-scene::after {
  inset: 0;
  background-image: linear-gradient(rgba(15, 118, 110, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 118, 110, .06) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse at center, black, transparent 72%);
}
.pixels-3d-scroll-scene__stage {
  position: absolute;
  z-index: 0;
  inset: 0;
  perspective: 1200px;
  perspective-origin: 50% 50%;
  overflow: hidden;
}
.pixels-3d-scroll-scene__site {
  position: absolute;
  width: min(67vw, 920px);
  height: 570px;
  left: 50%;
  top: 52%;
  transform: translate3d(-50%, -50%, -170px) rotateX(49deg) rotateZ(-3deg);
  transform-style: preserve-3d;
  transform-origin: center;
  opacity: .38;
  will-change: transform, opacity;
  filter: drop-shadow(0 20px 38px rgba(15, 118, 110, .1));
}
.pixels-3d-scroll-scene__frame,
.pixels-3d-scroll-scene__block {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid rgba(12, 94, 108, .38);
  background: rgba(255, 255, 255, .7);
  box-shadow: 0 16px 38px rgba(16, 92, 105, .14);
  transform-style: preserve-3d;
}
.pixels-3d-scroll-scene__frame {
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: 20px;
  background: rgba(243, 252, 253, .32);
}
.pixels-3d-scroll-scene__frame::before {
  content: "";
  display: block;
  height: 7%;
  border-bottom: 1px solid rgba(12, 94, 108, .15);
  background: linear-gradient(90deg, rgba(15, 118, 110, .2) 0 18%, transparent 18% 100%);
}
.pixels-3d-scroll-scene__block {
  z-index: 1;
  border-radius: 9px;
  opacity: 0;
  will-change: transform, opacity;
  transition: transform .72s cubic-bezier(.16, 1, .3, 1), opacity .42s ease;
}
.pixels-3d-scroll-scene__block.is-built {
  opacity: .2;
  transform: translate3d(0, 0, var(--depth));
}
.pixels-3d-scroll-scene__block--nav { border-radius: 5px; background: rgba(15, 118, 110, .22); }
.pixels-3d-scroll-scene__block--headline { background: linear-gradient(90deg, rgba(15, 118, 110, .56) 0 72%, rgba(110, 231, 255, .48) 72%); }
.pixels-3d-scroll-scene__block--button { background: rgba(15, 118, 110, .64); border-color: rgba(15, 118, 110, .7); }
.pixels-3d-scroll-scene__block--visual { background: linear-gradient(135deg, rgba(110, 231, 255, .54), rgba(15, 118, 110, .42)); }
.pixels-3d-scroll-scene__block--card { background: rgba(255, 255, 255, .66); }
.pixels-3d-scroll-scene__content {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}
body > main,
body > .site-footer,
body > footer { position: relative; z-index: 1; }
@media (max-width: 767.98px) {
  .pixels-3d-scroll-scene__site { width: 112vw; height: 480px; opacity: .24; }
}
@media (prefers-reduced-motion: reduce) {
  .pixels-3d-scroll-scene { display: none; }
}