/* ============================================================
   VIEWER 360 — Buehne fuer das drehbare Modell (js/viewer360.js) und Bausteine der Pipeline
   Tokens aus css/app.css, neue Design-Tokens nur mit Rueckfall (Vertrag).
   ============================================================ */
.t360{position:relative;height:260px;display:block;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  cursor:grab;outline:none;background:var(--surface)}
.t360.grab{cursor:grabbing}
.t360:focus-visible{box-shadow:inset 0 0 0 2px var(--ink)}
/* Bodenschatten: das Teil "schwebt" (Design-Brief 5.2) */
.t360-floor{position:absolute;left:12%;right:12%;bottom:38px;height:14%;pointer-events:none;
  background:radial-gradient(ellipse 60% 100% at 50% 60%,rgba(26,26,24,.14),transparent 70%)}
[data-theme="dark"] .t360-floor{background:radial-gradient(ellipse 60% 100% at 50% 60%,rgba(255,255,255,.07),transparent 70%)}
.t360-stack{position:absolute;inset:0 0 34px 0;padding:8% 10% 4%}
/* Die Einzelbilder sind deckende WebPs mit weissem Grund: Multiplizieren laesst das Weiss in der
   Flaeche verschwinden, der Bodenschatten scheint durch — kein weisser Kasten. Im Dunkelmodus wuerde
   Multiplizieren das Teil schwaerzen, dort bleibt die Buehne hell wie eine Produktkarte. */
.t360-stack img{position:absolute;inset:8% 10% 4%;width:80%;height:88%;object-fit:contain;opacity:0;pointer-events:none;mix-blend-mode:multiply}
.t360-stack img.on{opacity:1}
[data-theme="dark"] .t360{background:#f3f0e9}
[data-theme="dark"] .t360-stack img{mix-blend-mode:normal}
[data-theme="dark"] .t360-floor{background:radial-gradient(ellipse 60% 100% at 50% 60%,rgba(26,26,24,.14),transparent 70%)}
[data-theme="dark"] .t360-foot{background:var(--surface)}
/* Dasselbe fuer Karten, Kacheln und Collagen: img.frame kommt aus frameImg() in kern.js */
img.frame{mix-blend-mode:multiply}
[data-theme="dark"] img.frame{mix-blend-mode:normal;background:#f3f0e9;border-radius:8px}
.t360-foot{position:absolute;left:0;right:0;bottom:0;height:34px;display:flex;align-items:center;justify-content:space-between;
  padding:0 12px;font-size:11.5px;color:var(--ink-3,var(--muted));border-top:1px solid var(--line);background:var(--surface)}
.t360-hint{opacity:.9;transition:opacity .24s var(--ease-out,ease-out)}
.t360.grab .t360-hint{opacity:.35}
.t360 .deg{transition:color .18s var(--ease-out,ease-out)}
/* Im Dialog (ab 720 px, Design-Brief 5.8) hoeher */
@media (min-width:720px){.sheet .t360{height:360px}}
/* Buehne ohne Grad-Zeile: ghost-stage-Variante mit eigener ghost-bar */
.ghost-stage .t360{border-radius:0}
.ghost-stage.turn{background:var(--surface)}
/* Fortschrittsleiste im Schrank (#turnbar, platziert vom Design-Strang) und Karten der Pipeline */
.turnbar{display:flex;align-items:center;gap:10px;margin:0 18px 10px;padding:10px 12px;border-radius:14px;background:var(--surface);border:1px solid var(--line);font-size:12.5px;text-align:left;width:auto}
.turnbar .bar{flex:1;min-width:60px}
.turnbar[hidden]{display:none}
.turn-card .bar i{background:var(--ink)}
.turn-note .btn{width:100%}
.turn-list .turn-thumb{width:40px;height:52px;flex-shrink:0;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);padding:2px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.turn-list .turn-thumb img,.turn-list .turn-thumb svg{width:100%;height:100%;object-fit:contain}
.turn-list li .v{flex-shrink:0}
/* Schalter im Pruef-Sheet: mindestens 44 px hoch als Tippziel */
.turn-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:6px 0 2px;font-size:13px}
.turn-toggle .tx{flex:1;min-width:0}
.turn-toggle .tx span{display:block;font-size:11.5px;color:var(--ink-3,var(--muted));margin-top:2px}
@media (prefers-reduced-motion: reduce){.t360-stack img{transition:none}}
/* Tippziele auf Touch: kleine Knoepfe der Pipeline auf 44 px, Schalter mit unsichtbarem Rand */
@media (pointer:coarse){
  .turn-note .btn,.turn-card .btn,.turn-list .btn,[data-act="gphoto"]{min-height:44px}
  .turn-toggle .sw-toggle::after{content:'';position:absolute;inset:-8px -6px}
}