/* Zahlungsabwicklung Hero (Seite 206): Bezahlvorgang im Buchungsfluss */
[data-id="43082a79"]{position:relative;isolation:isolate;overflow:hidden;}
[data-id="6b87d957"]{position:relative;z-index:2!important;}
.vz-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0;transition:opacity 2s ease;}
.vz-canvas.is-ready{opacity:1;}

/* Text */
html.vz-anim [data-id="3956b8c9"],
html.vz-anim [data-id="eca773a"],
html.vz-anim [data-id="63aaf034"]{opacity:0;translate:0 16px;animation:vzUp 1s cubic-bezier(.2,.7,.2,1) forwards;}
html.vz-anim [data-id="3956b8c9"]{animation-delay:.05s;}
html.vz-anim [data-id="eca773a"]{animation-delay:.8s;}
html.vz-anim [data-id="63aaf034"]{animation-delay:1s;}
html.vz-anim [data-id="36253641"]{opacity:0;animation:vzShow .01s 1.5s forwards;}
html.vz-anim [data-id="36253641"].is-split{opacity:1;animation:none;}
.vz-word{display:inline-block;opacity:0;translate:0 .4em;filter:blur(8px);animation:vzWord 1s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.15s + var(--i) * .08s);}
@keyframes vzUp{to{opacity:1;translate:0 0}}
@keyframes vzShow{to{opacity:1}}
@keyframes vzWord{to{opacity:1;translate:0 0;filter:blur(0)}}

/* Karte: ersetzt "Scale In", ruhiges Schweben */
[data-id="3b1a83d7"]{transform:rotate(-2deg)!important;transition:box-shadow .45s!important;}
html.vz-anim [data-id="3b1a83d7"]{opacity:0;translate:0 22px;animation:vzUp 1.2s cubic-bezier(.2,.7,.2,1) .35s forwards,vzFloat 9s ease-in-out 1.8s infinite;}
@keyframes vzFloat{0%,100%{translate:0 0}50%{translate:0 -8px}}

/* Status-Box */
[data-id="72765978"]{transition:background-color .5s ease!important;}
[data-id="72765978"].vz-paid{background-color:#E6F6EF!important;}
[data-id="5499858a"]{transition:opacity .25s ease,color .4s ease;}
[data-id="5499858a"].vz-fade{opacity:0;}
[data-id="72765978"].vz-paid [data-id="5499858a"]{color:#1F9D6B!important;}
.vz-spin{display:inline-block;width:1.05rem;height:1.05rem;margin-right:.6rem;vertical-align:-.1em;border-radius:50%;border:2.5px solid rgba(23,100,170,.2);border-top-color:#1764AA;animation:vzSpin .8s linear infinite;}
@keyframes vzSpin{to{transform:rotate(360deg)}}

/* Zahlart-Kacheln */
[data-id="6b990c5d"],[data-id="67411ed4"],[data-id="1198854b"],[data-id="76d014ae"],[data-id="747e7ed3"],[data-id="639b0170"]{position:relative;transition:background-color .35s ease,border-color .35s ease,box-shadow .35s ease,scale .2s ease!important;}
.vz-sel{background-color:#EAF7FC!important;border-color:#1764AA!important;box-shadow:0 0 0 2px rgba(23,100,170,.15);}
.vz-press{scale:.96;}
.vz-check{position:absolute;top:-.45rem;right:-.45rem;width:1.15rem;height:1.15rem;border-radius:50%;background:#1764AA;color:#fff;font-size:.68rem;font-weight:800;line-height:1.15rem;text-align:center;opacity:0;scale:.4;transition:opacity .25s ease,scale .35s cubic-bezier(.3,1.6,.5,1);}
.vz-sel .vz-check{opacity:1;scale:1;}

/* Zeiger */
.vz-cursor{position:absolute;left:0;top:0;width:22px;height:22px;z-index:4;pointer-events:none;opacity:0;transition:transform .9s cubic-bezier(.45,0,.2,1),opacity .4s ease;filter:drop-shadow(0 3px 5px rgba(0,14,31,.3));}
.vz-cursor svg{display:block;width:100%;height:100%;}
.vz-ripple{position:absolute;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:2px solid rgba(23,100,170,.55);pointer-events:none;z-index:3;opacity:0;}
.vz-ripple.go{animation:vzRipple .6s ease-out;}
@keyframes vzRipple{0%{opacity:.9;scale:.3}100%{opacity:0;scale:1.3}}

/* Fortschritt Buchung -> Zahlung -> Ticket */
.vz-steps{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;}
.vz-step{padding:.28rem .7rem;border-radius:999px;background:#F2F7FB;color:#8A9BAB;transition:background-color .4s ease,color .4s ease;}
.vz-step.on{background:#1764AA;color:#fff;}
.vz-step.done{background:#E6F1FA;color:#1764AA;}
.vz-arr{color:#B9CCDA;transition:color .4s ease;}
.vz-arr.done{color:#1764AA;}

/* Hinweis "E-Ticket versendet" */
.vz-toast{position:absolute;right:-1.2rem;bottom:-1.3rem;z-index:4;display:flex;align-items:center;gap:.55rem;padding:.6rem .95rem;border-radius:.9rem;background:linear-gradient(135deg,#1764AA,#0E2A49);color:#fff;font-size:.78rem;font-weight:700;box-shadow:0 1rem 2.2rem rgba(0,14,31,.4);opacity:0;translate:0 12px;transition:opacity .45s ease,translate .5s cubic-bezier(.2,.7,.2,1);pointer-events:none;}
.vz-toast.show{opacity:1;translate:0 0;}
.vz-toast b{display:inline-block;width:1.3rem;height:1.3rem;border-radius:.35rem;background:#9BDDEB;color:#0E2A49;text-align:center;line-height:1.3rem;font-size:.72rem;}
@media (max-width:767px){.vz-toast{right:-.4rem;bottom:-1.6rem;}}

@media (prefers-reduced-motion: reduce){
  .vz-canvas{display:none;}
}