/* 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}}
/* Markierung: Zeiger (Punkt mit Ring, feine Linie, Etikett) an einem 3D-Punkt; das Skript setzt Lage und Deckkraft je Bild.
   Farbe aus --markierung (sonst --akzent), Etikett aus --zeiger-grund und --zeiger-text. README-markierung.md */
.objekt3d__zeiger{--zf:var(--markierung,var(--akzent,#B07A6B));position:absolute;left:0;top:0;z-index:2;width:0;height:0;pointer-events:none;opacity:0;will-change:transform,opacity}
.objekt3d__ring{position:absolute;left:-12px;top:-12px;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--zf);box-sizing:border-box}
.objekt3d__ring::after{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--zf)}
.objekt3d__ring::before{content:"";position:absolute;inset:-1.5px;border-radius:50%;border:1.5px solid var(--zf);animation:objekt3d-puls 2.4s cubic-bezier(.2,.7,.3,1) infinite}
.objekt3d__linie{position:absolute;left:0;top:-.5px;height:1px;transform-origin:0 50%;background:linear-gradient(90deg,transparent 15px,var(--zf) 15px)}
.objekt3d__etikett{position:absolute;left:0;top:0;white-space:nowrap;font-size:13px;font-weight:500;line-height:1.2;letter-spacing:0;padding:6px 11px;border-radius:999px;background:var(--zeiger-grund,rgb(0 0 0/.6));color:var(--zeiger-text,#fff)}
@keyframes objekt3d-puls{0%{transform:scale(1);opacity:.75}100%{transform:scale(2);opacity:0}}
@media (prefers-reduced-motion:reduce){.objekt3d__zeiger{display:none}}