.cs4-demo{max-width:950px}.cs4-kopfzeile{justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;display:flex}.cs4-kopfzeile .kk-pill{border-color:var(--line)}.cs4-box{background:linear-gradient(#141417,#0e0e11);border:1px solid #232328;border-radius:22px;padding:24px 24px 18px;position:relative;overflow:hidden}@media (max-width:760px){.cs4-kopfzeile{align-items:flex-start}.cs4-box{border-radius:16px;padding:18px 16px 16px}}.cs4{--ease:var(--ease-card);--pop:cubic-bezier(.34,1.56,.64,1)}.cs4-buehne{width:900px;height:450px;position:relative}.cs4-trenn{background:var(--line-soft);width:1px;position:absolute;top:0;bottom:0;left:450px}.cs4-h{width:420px;height:450px;position:absolute;top:0}.cs4-l{left:0}.cs4-r{--off:1.6s;left:480px}.cs4-inhalt{position:absolute;inset:0}.cs4-hlabel{font:500 12px/1.2 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-text);position:absolute;top:0;left:0}.cs4-r .cs4-hlabel{color:var(--muted)}.cs4-maske{border:1px solid var(--line);background:#111114;border-radius:14px;width:272px;height:382px;position:absolute;top:34px;left:0;box-shadow:inset 0 1px #ffffff0d}.cs4-mkopf{color:var(--muted);justify-content:space-between;font-size:14px;font-weight:500;display:flex;position:absolute;top:13px;left:16px;right:16px}.cs4-mkopf span:last-child{color:var(--muted-text);font-weight:400}.cs4-mlinie{background:#1c1c20;height:1px;position:absolute;top:44px;left:0;right:0}.cs4-flabel{color:var(--muted-text);font-size:13px;line-height:15px;position:absolute;left:16px}.cs4-feld{border:1px solid var(--line);background:#0e0e11;border-radius:6px;align-items:center;width:240px;height:34px;padding:0 10px;display:flex;position:absolute;left:16px}.cs4-leer{border:1px dashed var(--muted-strong);background:#0e0e11;border-radius:6px;position:absolute;inset:-1px}.cs4-papier{color:#1a1a1e;background:linear-gradient(#f7f7f9,#e9e9ee);border-radius:10px;width:128px;height:228px;padding:12px 10px;position:absolute;top:50px;left:292px;box-shadow:0 30px 80px #0000008c,0 0 0 1px #ffffff0d}.cs4-l .cs4-papier{transform:rotate(2.5deg)}.cs4-ph{letter-spacing:-.2px;font-size:14px;font-weight:700}.cs4-pa{color:#6e6f77;white-space:nowrap;margin-top:2px;font-size:8.5px}.cs4-pz{color:#3a3a40;border-bottom:1px solid #dadae0;justify-content:space-between;align-items:center;gap:4px;height:25px;font-size:10px;display:flex;position:absolute;left:10px;right:10px}.cs4-pz b{color:#1a1a1e;white-space:nowrap;font-weight:600}.cs4-pfuss{background:#d5d5db;border-radius:3px;height:5px;position:absolute;bottom:14px;left:10px;right:40px}.cs4-wert{color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums;font-size:16px;line-height:20px;display:inline-block}.cs4-feld>.cs4-wert{text-overflow:ellipsis;max-width:100%;display:block;overflow:hidden}.cs4-lose{transform-origin:0;position:absolute;top:300px;left:290px;transform:rotate(-7deg)}.cs4-lose .cs4-wert{border:1px solid var(--line);color:var(--muted);background:#17171a;border-radius:6px;padding:6px 10px;font-size:14px;line-height:18px;display:block}.cs4-lose b{color:var(--muted-text);margin-right:5px;font-weight:400}.cs4-rf{position:absolute;left:16px}.cs4-rf .cs4-flabel{margin-bottom:3px;display:block;position:static}.cs4-box2{height:34px;box-shadow:inset 0 0 0 1px var(--line);white-space:nowrap;font-variant-numeric:tabular-nums;background:#0e0e11;border-radius:6px;align-items:center;padding:0 10px;display:inline-flex;position:relative}.cs4-seg{align-items:center;height:34px;display:inline-flex}.cs4-seg>span{border-left:1px solid var(--line);align-items:center;height:22px;padding:0 10px;display:inline-flex}.cs4-seg>span:first-child{border-left:0}.cs4-seg i{color:var(--muted-text);margin-right:6px;font-size:12.5px;font-style:normal}.cs4-rand{pointer-events:none;border:1.5px solid #0000;border-radius:6px;position:absolute;inset:0}.cs4-status{color:var(--muted);white-space:nowrap;align-items:center;gap:10px;font-size:14px;line-height:16px;display:flex;position:absolute;top:428px;left:2px}.cs4-l .cs4-status{color:var(--muted-text)}.cs4-punkt{background:var(--mint);border-radius:50%;width:8px;height:8px;box-shadow:0 0 6px #46d69f8c}.cs4-ring{border:1.5px solid var(--muted-strong);border-radius:50%;width:8px;height:8px}.cs4-l .cs4-inhalt{opacity:1}.cs4.is-bewegt .cs4-h:not(.is-visible) .cs4-maske{opacity:0;transform:translateY(14px)}.cs4.is-bewegt .cs4-h:not(.is-visible) .cs4-papier{opacity:0;transform:translateY(-36px)rotate(-4deg)}.cs4.is-bewegt .cs4-h:not(.is-visible) .cs4-wert{opacity:0;transform:translate(var(--dx,0px), var(--dy,0px)) scale(.6)}.cs4.is-bewegt .cs4-h:not(.is-visible) .cs4-leer{opacity:0}.cs4.is-bewegt .cs4-h:not(.is-visible) .cs4-status{opacity:0;transform:translateY(8px)}.cs4.is-bewegt .cs4-l:not(.is-visible) .cs4-inhalt{opacity:1}.cs4.is-bewegt .cs4-r:not(.is-visible) .cs4-rf .cs4-flabel,.cs4.is-bewegt .cs4-r:not(.is-visible) .cs4-seg i{opacity:0}.cs4.is-bewegt .cs4-r:not(.is-visible) .cs4-seg>span{border-left-color:#0000}.cs4.is-bewegt .cs4-r:not(.is-visible) .cs4-box2{background:0 0;box-shadow:inset 0 0 0 1px #0000}.cs4.is-bewegt .cs4-r:not(.is-visible) .cs4-rand{clip-path:inset(0 100% 0 0 round 6px);border-color:var(--mint)}.cs4.is-bewegt .cs4-r:not(.is-visible) .cs4-punkt{transform:scale(.3)}.cs4-l.is-visible .cs4-maske{transition:opacity .5s ease 0s, transform .6s var(--ease) 0s}.cs4-l.is-visible .cs4-papier{transition:opacity .3s ease .15s, transform .6s var(--ease) .15s}.cs4-l.is-visible .cs4-wert{transition:opacity .3s ease var(--d), transform .5s var(--ease) var(--d)}.cs4-l.is-visible .cs4-leer{transition:opacity .4s .9s}.cs4-l.is-visible .cs4-status{transition:opacity .45s ease 1.15s, transform .55s var(--ease) 1.15s}.cs4-l.is-visible .cs4-inhalt{transition:opacity .45s 1.2s}.cs4-r.is-visible .cs4-maske{transition:opacity .4s ease var(--off), transform .5s var(--ease) var(--off)}.cs4-r.is-visible .cs4-papier{transition:opacity .3s ease calc(var(--off) + 50ms), transform .5s var(--ease) calc(var(--off) + 50ms)}.cs4-r.is-visible .cs4-wert{transition:opacity .3s ease calc(var(--off) + var(--d)), transform .45s var(--ease) calc(var(--off) + var(--d))}.cs4-r.is-visible .cs4-rf .cs4-flabel,.cs4-r.is-visible .cs4-seg i{transition:opacity .35s ease calc(var(--off) + var(--d) + .3s)}.cs4-r.is-visible .cs4-seg>span{transition:border-color .35s ease calc(var(--off) + var(--d) + .35s)}.cs4-r.is-visible .cs4-box2{transition:background .3s ease calc(var(--off) + var(--d) + .3s), box-shadow .3s ease calc(var(--off) + var(--d) + .6s)}.cs4-r.is-visible .cs4-rand{transition:clip-path .45s var(--ease) calc(var(--off) + var(--d) + .15s), border-color .3s ease calc(var(--off) + var(--d) + .4s)}.cs4-r.is-visible .cs4-status{transition:opacity .45s ease calc(var(--off) + 1.65s), transform .55s var(--ease) calc(var(--off) + 1.65s)}.cs4-r.is-visible .cs4-punkt{transition:transform .45s var(--pop) calc(var(--off) + 1.7s)}@media (max-width:760px){.cs4-buehne{height:auto;zoom:1!important;width:auto!important}.cs4-trenn{display:none}.cs4-h{width:420px;height:450px;position:relative;left:0}.cs4-r{--off:0s;margin-top:30px}.cs4-r:before{content:"";background:var(--line-soft);height:1px;position:absolute;top:-16px;left:0;right:0}}@media (prefers-reduced-motion:reduce){.cs4 *{transition:none!important;animation:none!important}}@media (max-width:560px){.cs4-h{zoom:.9}}@media (max-width:480px){.cs4-h{zoom:.66}}