/* 3D-Effekte (nur CSS-Transforms, keine externen Ressourcen) */
.scene{position:relative;height:380px;perspective:1100px;margin-bottom:28px}
.scene .rig{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(calc(var(--ry,0)*1deg)) rotateY(calc(var(--rx,0)*1deg));transition:transform .15s ease-out}
.s3{position:absolute;transform-style:preserve-3d}
.browser{left:4%;top:34px;width:84%;height:240px;background:#fff;border:1px solid #D5D6D2;border-radius:10px;transform:translateZ(0) rotateY(-14deg) rotateX(6deg);box-shadow:-24px 34px 50px rgba(20,23,28,.22),0 2px 6px rgba(20,23,28,.1);overflow:hidden}
.browser .bar{height:26px;background:#F0F0ED;border-bottom:1px solid #E4E4E0;display:flex;gap:6px;align-items:center;padding:0 10px}
.browser .bar i{width:8px;height:8px;border-radius:50%;background:#C8272A}.browser .bar i:nth-child(2){background:#B8BEC8}.browser .bar i:nth-child(3){background:#47505C}
.browser .body{padding:16px}
.browser .ln{height:9px;border-radius:5px;background:#E4E4E0;margin-bottom:9px}
.browser .ln.h{height:16px;width:62%;background:#14171C}
.browser .ln.w{width:88%}.browser .ln.s{width:54%}
.browser .blk{display:flex;gap:10px;margin-top:14px}
.browser .blk b{flex:1;height:58px;border-radius:6px;background:#F0F0ED}.browser .blk b:first-child{background:#C8272A}
.phone{right:2%;top:150px;width:104px;height:210px;background:#14171C;border-radius:18px;padding:7px;transform:translateZ(90px) rotateY(-14deg) rotateX(6deg);box-shadow:-18px 28px 40px rgba(20,23,28,.35)}
.phone .scr{height:100%;border-radius:12px;background:#fff;padding:12px 9px;overflow:hidden}
.phone .ln{height:6px;border-radius:3px;background:#E4E4E0;margin-bottom:7px}
.phone .ln.h{height:10px;width:70%;background:#14171C}
.phone .btnm{height:18px;border-radius:4px;background:#C8272A;margin-top:10px}
.cube{width:46px;height:46px;transform-style:preserve-3d;animation:gwspin 14s linear infinite}
.cube i{position:absolute;inset:0;border:1px solid rgba(200,39,42,.7);background:rgba(200,39,42,.12)}
.cube i:nth-child(1){transform:translateZ(23px)}.cube i:nth-child(2){transform:rotateY(180deg) translateZ(23px)}
.cube i:nth-child(3){transform:rotateY(90deg) translateZ(23px)}.cube i:nth-child(4){transform:rotateY(-90deg) translateZ(23px)}
.cube i:nth-child(5){transform:rotateX(90deg) translateZ(23px)}.cube i:nth-child(6){transform:rotateX(-90deg) translateZ(23px)}
.cube.c1{left:-2%;top:6px;transform:translateZ(140px)}
.cube.c2{left:44%;top:300px;width:30px;height:30px;animation-duration:20s;transform:translateZ(60px)}
.cube.c2 i{transform:none}
.ring{left:76%;top:0;width:70px;height:70px;border:5px solid #14171C;border-radius:50%;transform:translateZ(120px) rotateX(70deg);animation:gwfloat 6s ease-in-out infinite}
@keyframes gwspin{from{rotate:1 1 0 0deg}to{rotate:1 1 0 360deg}}
@keyframes gwfloat{50%{translate:0 -14px}}
.cube.c1{animation:gwspin 14s linear infinite}
.hero-side.has-scene{border-left:none;padding-left:0}
.hero-stats{display:flex;gap:28px;border-top:1px solid var(--grid);padding-top:20px}
.hero-stats .stat{margin-bottom:0}
.hero-stats .stat .num{font-size:1.4rem}
/* Karten kippen */
.tilt{transform-style:preserve-3d;transition:transform .18s ease-out,box-shadow .25s;will-change:transform}
.tilt:hover{box-shadow:0 18px 40px rgba(20,23,28,.18)}
/* Auftauchen mit Tiefe */
.js3d .rv{opacity:0;transform:perspective(900px) translateZ(-80px) translateY(30px) rotateX(8deg);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.js3d .rv.in{opacity:1;transform:none}
.hero{perspective:1200px}
@media (prefers-reduced-motion:reduce){.cube,.ring{animation:none}.js3d .rv{opacity:1;transform:none;transition:none}.scene .rig{transition:none}}
@media (max-width:640px){.scene{height:300px}.browser{height:190px}.phone{width:84px;height:170px;top:120px}.hero-stats{flex-direction:column;gap:14px}}

/* ---- Vorfallmeldung-Zeichnung ---- */
.case-visual{perspective:900px;overflow:hidden;position:relative;background:radial-gradient(circle at 30% 20%,#fff,#F4F4F1)}
.case-visual svg{transform-style:preserve-3d;transition:transform .2s ease-out;overflow:visible}
.case-visual svg *{transform-box:fill-box}
.va-worker{transform-origin:50% 100%;animation:gwwork 3.2s ease-in-out infinite}
.va-phone{transform-origin:50% 50%;animation:gwphone 3.2s ease-in-out infinite}
.va-flash{opacity:0;transform-origin:center;animation:gwflash 3.2s ease-out infinite}
.va-ray{transform-origin:left center;animation:gwray 3.2s ease-out infinite}
.va-ray.r2{animation-delay:.05s}.va-ray.r3{animation-delay:.1s}
.va-box{animation:gwdash 1.2s linear infinite}
.va-check{stroke-dasharray:40;stroke-dashoffset:40;animation:gwcheck 3.2s ease-out infinite}
.va-flow{animation:gwdash 1s linear infinite}
.va-sp{transform-origin:center;animation:gwsp 3.2s ease-in-out infinite}
@keyframes gwwork{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes gwphone{0%,35%{transform:rotate(0)}45%,60%{transform:rotate(-8deg) scale(1.12)}75%,100%{transform:rotate(0)}}
@keyframes gwflash{0%,40%{opacity:0;transform:scale(.3)}46%{opacity:.85;transform:scale(1.6)}60%,100%{opacity:0;transform:scale(2.2)}}
@keyframes gwray{0%,40%{opacity:0;transform:scaleX(.2)}50%{opacity:1;transform:scaleX(1.15)}70%,100%{opacity:.35;transform:scaleX(1)}}
@keyframes gwdash{to{stroke-dashoffset:-18}}
@keyframes gwcheck{0%,50%{stroke-dashoffset:40}70%,100%{stroke-dashoffset:0}}
@keyframes gwsp{0%,80%,100%{transform:scale(1)}88%{transform:scale(1.1)}}
@media (prefers-reduced-motion:reduce){.case-visual svg *{animation:none!important}.va-check{stroke-dashoffset:0}}