/* objekt3d.css: Baustein 3D-Objekt. Das Poster (<img>) ist Inhalt und bestimmt die Größe;
   die Leinwand legt sich darüber und wird erst sichtbar, wenn three.js das erste Bild gezeichnet hat.
   Bewegung im DOM nur über opacity. */
.objekt3d{--ueberstand:0px;position:relative;isolation:isolate}
.objekt3d>img{display:block;width:100%;height:auto;transition:opacity .6s ease}
.objekt3d>canvas{position:absolute;left:calc(var(--ueberstand)*-1);top:calc(var(--ueberstand)*-1);display:block;width:calc(100% + 2*var(--ueberstand));height:calc(100% + 2*var(--ueberstand));opacity:0;transition:opacity .8s ease;pointer-events:none}
.objekt3d.ist-bereit>canvas{opacity:1}
.objekt3d.ist-bereit>img{opacity:0}
.objekt3d>img.ist-wechsel{opacity:0;transition-duration:.22s}
/* Größe kommt vom Rahmen statt vom Poster (feste Bühne, aspect-ratio oder Höhe gesetzt) */
.objekt3d--fuellen>img{width:100%;height:100%;object-fit:contain}
.objekt3d--decken>img{width:100%;height:100%;object-fit:cover}
/* Weiche Ränder für Nahstationen (zoom über 1,3): die Leinwand läuft zum Rand hin aus statt hart zu schneiden */
.objekt3d--weich>canvas{-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);mask-composite:intersect}
@media (prefers-reduced-motion:reduce){.objekt3d>img,.objekt3d>canvas{transition:none}}