/* CeraSalt 3D – eingebettete Szenen (nur gescopte Regeln, keine globalen Resets) */
.xp-scene{position:relative;width:100%;aspect-ratio:5/4;max-width:640px;margin-inline:auto;justify-self:stretch;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.xp-scene[data-cs3d="cell"]{aspect-ratio:3/4;max-width:340px}
.xp-scene[data-cs3d="explode"]{aspect-ratio:auto;height:min(62vh,540px);max-width:none}
.xp-scene canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.xp-scene canvas.dragging{cursor:grabbing}
.xp-scene .xp-scene-img{position:absolute;inset:8% 4%;width:92%;height:auto;object-fit:contain;display:none;pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.xp-scene.xp-no-gl .xp-scene-img{display:block;opacity:1;pointer-events:auto}
.xp-scene.xp-no-gl canvas{display:none}
.xp-scene-cap{position:absolute;bottom:.6rem;left:50%;transform:translateX(-50%);z-index:6;pointer-events:none;margin:0;padding:.32rem .75rem;font-size:.76rem;font-family:inherit;color:rgba(255,255,255,.78);background:rgba(11,12,14,.78);border:1px solid rgba(255,255,255,.14);border-radius:999px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);white-space:nowrap;user-select:none;-webkit-user-select:none}
.xp-scene.xp-no-gl .xp-scene-cap{display:none}
.xp-perf-badge{position:absolute;bottom:.6rem;right:.6rem;z-index:10;display:inline-flex;align-items:center;gap:.45rem;padding:.36rem .75rem;font-size:.74rem;font-family:inherit;color:rgba(255,255,255,.82);background:rgba(11,12,14,.85);border:1px solid rgba(255,255,255,.18);border-radius:999px;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .2s,color .2s,border-color .2s;user-select:none;-webkit-user-select:none}
.xp-perf-badge:hover{background:rgba(11,12,14,.96);color:#fff;border-color:rgba(255,255,255,.38)}
.xp-perf-dot{width:6px;height:6px;border-radius:50%;background:#67B98F;flex:none}
.xp-perf-badge.is-2d .xp-perf-dot{background:#E84910}
@media (max-width:900px){
  .xp-scene[data-cs3d="explode"]{height:clamp(150px, 24vh, 210px)}
}
@media (max-width:600px){
  .xp-scene-cap{bottom:.35rem;font-size:.68rem;padding:.24rem .55rem;max-width:calc(100% - 130px);overflow:hidden;text-overflow:ellipsis}
  .xp-perf-badge{bottom:.35rem;right:.35rem;padding:.3rem .6rem;font-size:.7rem}
}

