/* ==========================================================================
   STEP-3D-Viewer — Modul-Styles (php/step/)
   Button erscheint in der Produktdatenbank-Downloadspalte und erbt dort die
   Basis-Link-Optik; hier Akzent + 3D-Icon + Modal.
   HELLES Studio-Theme (2026-07-19): weisser Viewport, damit das Produkt sich wie
   auf einem Produktfoto abhebt (passend zur weissen Szene + Studio-Belichtung).
   Alles namespaced mit step3d- / .step3d-view.
   ========================================================================== */

/* --- Ausloesender Button (in der Downloadspalte) --- */
a.step3d-view{cursor:pointer}
a.step3d-view:hover{border-color:#006aac!important;background:#e8f2f9!important;color:#00568a!important}
.step3d-ico{display:inline-flex;align-items:center;justify-content:center;
    width:18px;height:18px;flex-shrink:0;border-radius:4px;background:#006aac;color:#fff;
    font-size:.6rem;font-weight:700;letter-spacing:.02em}

/* --- Modal-Overlay --- */
#step3d-modal{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center}
#step3d-modal.step3d-hidden{display:none}
#step3d-modal .step3d-backdrop{position:absolute;inset:0;background:rgba(18,26,36,.55)}
#step3d-modal .step3d-box{position:relative;width:min(92vw,1100px);height:min(88vh,820px);
    display:flex;flex-direction:column;background:#ffffff;color:#333;border:1px solid #d7dee6;
    border-radius:12px;overflow:hidden;box-shadow:0 24px 64px rgba(15,25,40,.35);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
#step3d-modal .step3d-bar{display:flex;align-items:center;gap:10px;padding:10px 12px;
    border-bottom:1px solid #e4e9ef;background:#f5f7fa}
#step3d-modal .step3d-title{font-size:14px;font-weight:650;color:#2c3e50}
#step3d-modal .step3d-title b{color:#006aac}
#step3d-modal .step3d-close{margin-left:auto;width:34px;height:34px;line-height:1;font-size:22px;
    border:1px solid #d7dee6;border-radius:8px;background:#fff;color:#6b7885;cursor:pointer;transition:.15s}
#step3d-modal .step3d-close:hover{color:#006aac;border-color:#006aac;background:#e8f2f9}
#step3d-modal .step3d-stage{position:relative;flex:1;min-height:0;background:#f5f7fa}
#step3d-modal .step3d-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;
    touch-action:none;outline:none}
#step3d-modal .step3d-loader{position:absolute;inset:0;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:14px;color:#556270;font-size:13px;
    background:#f5f7fa;text-align:center;padding:20px}
#step3d-modal .step3d-loader.step3d-err{color:#b02a37}
#step3d-modal .step3d-spin{width:38px;height:38px;border-radius:50%;border:3px solid #dbe3ec;
    border-top-color:#006aac;animation:step3dspin 1s linear infinite}
#step3d-modal .step3d-loader.step3d-err .step3d-spin{display:none}
@keyframes step3dspin{to{transform:rotate(360deg)}}
#step3d-modal .step3d-hint{position:absolute;left:0;right:0;bottom:0;padding:7px 10px;
    font-size:11px;color:#6b7885;background:rgba(255,255,255,.85);border-top:1px solid #e4e9ef;text-align:center}
@media(max-width:640px){
    /* dezenter Rand rundum (Backdrop bleibt sichtbar) + handy-sichere Hoehe via dvh,
       damit das Modal NICHT unter die Browser-Leiste laeuft und das X immer erreichbar ist */
    #step3d-modal .step3d-box{
        width:calc(100vw - 20px);
        height:calc(100vh - 20px);
        height:calc(100dvh - 20px);
        border-radius:12px;
        border:1px solid #006aac;
    }
    /* groesseres, klar sichtbares Schliessen-X (Tap-Ziel >=42px, hoher Kontrast) */
    #step3d-modal .step3d-bar{padding:12px}
    #step3d-modal .step3d-close{width:42px;height:42px;font-size:26px;color:#fff;
        background:#006aac;border-color:#006aac}
    #step3d-modal .step3d-hint{font-size:10px}
}