/* 3D-Geräte-Ebene (js/geraet3d.js): transparentes Canvas über der Pin-Fläche, Poster als Ladezustand.
   Posterlage setzt geraet3d.js (--poster-*), passend zum ersten 3D-Bild.
   ist-flach (kein WebGL2): Poster bleibt, zur Story (ist-story) übernimmt das iMac-Standbild. */
.geraet3d {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.geraet3d-canvas,
.geraet3d-poster,
.geraet3d-poster-story {
  transition: opacity .6s cubic-bezier(.625, .05, 0, 1);
}

.geraet3d-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.geraet3d-poster {
  position: absolute;
  left: var(--poster-x, 68%);
  top: var(--poster-y, 52%);
  width: auto;
  max-width: none;
  height: var(--poster-h, 88%);
  transform: translate(-50%, -50%) perspective(var(--poster-perspektive, 1700px)) var(--poster-lage, none);
  /* Nur das Handy zeigen (das Standbild ist freigestellt, die Maske schneidet nur die Ränder ab). */
  -webkit-mask-image: linear-gradient(90deg, transparent 33%, #000 36.5%, #000 63.5%, transparent 67%), linear-gradient(transparent 5%, #000 9.5%, #000 91%, transparent 96%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 33%, #000 36.5%, #000 63.5%, transparent 67%), linear-gradient(transparent 5%, #000 9.5%, #000 91%, transparent 96%);
  mask-composite: intersect;
  user-select: none;
}

.geraet3d.ist-bereit .geraet3d-canvas { opacity: 1; }
.geraet3d.ist-bereit .geraet3d-poster { opacity: 0; }
.geraet3d.ist-statisch { display: none; }

.geraet3d-poster-story {
  position: absolute;
  right: 3%;
  top: 55%;
  width: 44%;
  height: auto;
  transform: translateY(-50%);
  -webkit-mask-image: linear-gradient(90deg, transparent 8%, #000 12.5%, #000 93%, transparent 97%), linear-gradient(transparent 1%, #000 4%, #000 96%, transparent 99%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 8%, #000 12.5%, #000 93%, transparent 97%), linear-gradient(transparent 1%, #000 4%, #000 96%, transparent 99%);
  mask-composite: intersect;
  opacity: 0;
}
.ist-flach .geraet3d-canvas { display: none; }
.ist-flach.ist-story .geraet3d-poster { opacity: 0; }
.ist-flach.ist-story .geraet3d-poster-story { opacity: 1; }

@media (max-aspect-ratio: 1/1) {
  .geraet3d-poster-story { right: 5%; top: 38%; width: 90%; }
}