/* Ticketing-System Hero (Seite 204): Symbolgrafik statt Screenshot */
[data-id="4ce24a83"]{position:relative;isolation:isolate;overflow:hidden;}
[data-id="4c4707f3"]{position:relative;z-index:2!important;}
.vth-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0;transition:opacity 2s ease;}
.vth-canvas.is-ready{opacity:1;}

/* Einblenden + ruhiges Schweben der ganzen Gruppe */
[data-id="1a2f52ac"]{transform:none!important;}
html.vth-anim [data-id="1f0e6ef8"]{opacity:0;translate:0 18px;animation:vthUp 1.1s cubic-bezier(.2,.7,.2,1) .25s forwards;}
html.vth-anim [data-id="6d2b9285"]{opacity:0;translate:0 18px;animation:vthUp 1s cubic-bezier(.2,.7,.2,1) .9s forwards;}
html.vth-anim [data-id="637cd9a3"]{opacity:0;scale:.85;animation:vthPop .6s cubic-bezier(.3,1.5,.5,1) 2.6s forwards;}
html.vth-anim [data-id="1a2f52ac"]{animation:vthFloat 9s ease-in-out 2.2s infinite;}
@keyframes vthUp{to{opacity:1;translate:0 0}}
@keyframes vthPop{to{opacity:1;scale:1}}
@keyframes vthFloat{0%,100%{translate:0 0}50%{translate:0 -8px}}

/* Status-Punkt "Shop online" */
.vth-live{display:inline-block;position:relative;width:.4rem;height:.4rem;margin-right:.35rem;border-radius:50%;background:#1F9D6B;vertical-align:.05em;}
.vth-live i{position:absolute;inset:0;border-radius:50%;background:#1F9D6B;animation:vthPulse 2s ease-out infinite;}
@keyframes vthPulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(3);opacity:0}}

/* Verkaufskurve */
.vth-bar{flex:1 1 0;min-width:0;border-radius:3px 3px 1px 1px;background:linear-gradient(180deg,#6CC0EA 0%,#1764AA 100%);height:var(--h,40%);transform-origin:bottom center;transition:height .8s cubic-bezier(.2,.7,.2,1);}
html.vth-anim .vth-bar{transform:scaleY(0);animation:vthGrow .9s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.9s + var(--i) * .06s);}
.vth-bar:last-child{background:linear-gradient(180deg,#9BDDEB 0%,#14A8C8 100%);}
@keyframes vthGrow{to{transform:scaleY(1)}}

/* Live-Feed */
.vth-new{animation:vthIn .6s cubic-bezier(.2,.7,.2,1);}
@keyframes vthIn{0%{opacity:0;translate:0 -8px;background-color:#DDF0FB}60%{background-color:#DDF0FB}100%{opacity:1;translate:0 0}}
.vth-bump{animation:vthBump .5s ease;}
@keyframes vthBump{40%{color:#14A8C8}}

/* QR-Code + Scanlinie */
[data-id="6777424d"]{position:relative;overflow:hidden;}
.vth-qr{display:grid;grid-template-columns:repeat(11,1fr);grid-template-rows:repeat(11,1fr);width:100%;height:100%;gap:0;}
.vth-qr span{background:transparent;}
.vth-qr span.on{background:#0E2A49;}
.vth-scan{position:absolute;left:0;right:0;top:0;height:2px;background:#14A8C8;box-shadow:0 0 8px 2px rgba(20,168,200,.6);opacity:0;pointer-events:none;}
.vth-scan.run{animation:vthScan 1.2s ease-in-out;}
@keyframes vthScan{0%{top:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}
.vth-ok{animation:vthOk .7s ease;}
@keyframes vthOk{0%{scale:1}35%{scale:1.08;box-shadow:0 0 0 6px rgba(31,157,107,.25)}100%{scale:1}}

@media (prefers-reduced-motion: reduce){
  .vth-canvas{display:none;}
  .vth-live i{animation:none;}
}