/* Verkaufskanaele Hero (Seite 205): Kanaele fliessen in einem System zusammen */
[data-id="7e41a2e8"]{position:relative;isolation:isolate;}
[data-id="46b4ec1b"]{position:relative;z-index:2!important;}
.vk-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0;transition:opacity 1.6s ease;}
.vk-canvas.is-ready{opacity:1;}

/* Text: Woerter + weiches Einblenden */
html.vk-anim [data-id="64db8a73"],
html.vk-anim [data-id="321055b3"],
html.vk-anim [data-id="20f5edbd"]{opacity:0;translate:0 16px;animation:vkUp 1s cubic-bezier(.2,.7,.2,1) forwards;}
html.vk-anim [data-id="64db8a73"]{animation-delay:.05s;}
html.vk-anim [data-id="321055b3"]{animation-delay:.9s;}
html.vk-anim [data-id="20f5edbd"]{animation-delay:1.1s;}
html.vk-anim [data-id="1fff0b0d"]{opacity:0;animation:vkShow .01s 1.5s forwards;}
html.vk-anim [data-id="1fff0b0d"].is-split{opacity:1;animation:none;}
.vk-word{display:inline-block;opacity:0;translate:0 .4em;filter:blur(8px);animation:vkWord 1s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.15s + var(--i) * .08s);}
@keyframes vkUp{to{opacity:1;translate:0 0}}
@keyframes vkShow{to{opacity:1}}
@keyframes vkWord{to{opacity:1;translate:0 0;filter:blur(0)}}

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

/* Kanal-Karten: aktiver Kanal wandert */
[data-id="5f0b4a9f"],[data-id="6e85a264"],[data-id="31b496b"]{position:relative;background-color:#FFFFFF!important;transition:background-color .6s ease,border-color .6s ease,box-shadow .6s ease,transform .3s!important;}
[data-id="5f0b4a9f"].vk-on,[data-id="6e85a264"].vk-on,[data-id="31b496b"].vk-on{background-color:#EAF7FC!important;border-color:#9FCBE5!important;box-shadow:0 .6rem 1.4rem rgba(23,100,170,.12);}
.vk-ping{position:absolute;top:.8rem;right:.8rem;font-size:.68rem;font-weight:800;color:#FFFFFF;background:#1764AA;padding:.2rem .5rem;border-radius:999px;pointer-events:none;opacity:0;}
.vk-ping.go{animation:vkPing 1.6s ease forwards;}
@keyframes vkPing{0%{opacity:0;translate:0 6px;scale:.8}18%{opacity:1;translate:0 0;scale:1}70%{opacity:1;translate:0 -4px}100%{opacity:0;translate:0 -12px}}

/* Fliegender Punkt Kanal -> System */
.vk-dot{position:absolute;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#14A8C8;box-shadow:0 0 0 4px rgba(20,168,200,.18),0 0 14px rgba(20,168,200,.7);pointer-events:none;z-index:3;}

/* Gesamt-Zeile */
.vk-total{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1rem;border-radius:.9rem;background:linear-gradient(90deg,#102B49,#1764AA);color:#fff;}
.vk-total-l{display:flex;align-items:center;gap:.55rem;font-size:.78rem;font-weight:700;letter-spacing:.02em;color:#D5E8F2;}
.vk-total-v{font-size:1.05rem;font-weight:800;color:#fff;white-space:nowrap;}
.vk-sync{position:relative;width:.45rem;height:.45rem;border-radius:50%;background:#6CE3B4;}
.vk-sync i{position:absolute;inset:0;border-radius:50%;background:#6CE3B4;animation:vkPulse 2s ease-out infinite;}
@keyframes vkPulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(3);opacity:0}}
.vk-total.hit{animation:vkHit .6s ease;}
@keyframes vkHit{40%{box-shadow:0 0 0 5px rgba(20,168,200,.25)}}

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