.vk{
  --vk-ease:cubic-bezier(.16,1,.3,1);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"screen" "nochmal" "wahl" "b2b";
  margin-top:28px;
}
.vk__titel{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.vk__screen{
  grid-area:screen;justify-self:center;position:relative;margin:0;
  width:min(100%,calc((100svh - 150px) * 16 / 9));
  aspect-ratio:16/9;overflow:hidden;border-radius:18px;
  background:#03051a;
  box-shadow:0 34px 80px -30px rgba(59,91,253,.7),0 0 70px -12px rgba(195,60,255,.22);
  container-type:inline-size;isolation:isolate;transform-origin:0 0;
  --pill-h:clamp(42px,4.4cqw,64px);
}
.vk--js[data-state="idle"] .vk__screen{
  --vk-w:min(calc(100vw - 2 * var(--pad)),calc((100svh - 130px) * 16 / 9));
  justify-self:start;width:var(--vk-w);margin-left:calc((100% - var(--vk-w)) / 2);
}
.vk--js[data-state="idle"] .vk__wahl,
.vk--js[data-state="idle"] .vk__b2b{display:none}
.vk__screen::after{
  content:"";position:absolute;inset:0;z-index:8;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(160,190,255,.28);pointer-events:none;transition:opacity .6s;
}
.vk__film{
  position:absolute;inset:0;display:block;width:100%;height:100%;
  object-fit:contain;background:#03051a;
}
.vk__ende{
  position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;
  object-fit:contain;opacity:0;pointer-events:none;
}
.vk__screen.show-end .vk__ende{opacity:1}
.vk__flicken{
  position:absolute;z-index:1;border-radius:.6cqw;background:#0e0f11;
  filter:blur(.3cqw);opacity:0;pointer-events:none;
}
.vk__flaeche{position:absolute;inset:0;z-index:2;display:none;cursor:pointer}
.vk__hotspot{
  position:absolute;z-index:3;margin:0;padding:0;border:0;background:none;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.vk__hotspot[hidden]{display:none}
.vk__screen.is-fs .vk__hotspot{display:none}

.vk__start{
  position:absolute;inset:0;z-index:3;display:block;width:100%;margin:0;padding:0;
  border:0;background:transparent;cursor:pointer;
}
.vk__start:focus-visible{outline:none}
.vk__pill{
  position:absolute;left:var(--pill-x,50%);top:var(--pill-y,66%);translate:var(--pill-shift,-50%) 0;
  display:inline-flex;align-items:center;gap:.7em;
  height:var(--pill-h);padding:0 1.3em 0 1.1em;border-radius:999px;
  color:#fff;font-size:max(15px,calc(var(--pill-h) * .36));font-weight:600;white-space:nowrap;
  background:linear-gradient(90deg,#ff2f7e 0%,#c33cff 50%,#3b3bff 100%);
  box-shadow:0 14px 36px rgba(200,60,255,.45);
  transition:scale .35s var(--vk-ease),filter .2s;
}
.vk__pill svg{width:.95em;height:.95em;fill:currentColor}
.vk__pill-zeit{
  padding-left:.7em;border-left:1px solid rgba(255,255,255,.4);
  color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums;line-height:1;
}
.vk__start:hover .vk__pill{scale:1.03;filter:brightness(1.08)}
.vk__start:active .vk__pill{scale:.97}
.vk__start:focus-visible .vk__pill{outline:3px solid #9fb4ff;outline-offset:6px}

.vk__laden{
  position:absolute;left:50%;top:50%;z-index:3;width:36px;height:36px;margin:-18px 0 0 -18px;
  border:2px solid rgba(255,255,255,.18);border-top-color:#fff;border-radius:50%;
  opacity:0;pointer-events:none;transition:opacity .2s;animation:vk-dreh .8s linear infinite;
}
.vk__screen.is-waiting .vk__laden{opacity:1}
@keyframes vk-dreh{to{rotate:360deg}}
.vk__fehler{
  position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;gap:10px;padding:0 7.8%;background:#03051a;
}
.vk__fehler[hidden]{display:none}
.vk__fehler-titel{margin:0;max-width:22ch;font-size:clamp(20px,3.4cqw,44px);font-weight:600;line-height:1.1}
.vk__fehler-text{margin:0;max-width:46ch;color:#c9d2ff;font-size:clamp(14px,1.3cqw,17px)}
.vk__fehler-knopf.cta{width:auto;height:46px;margin-top:8px;padding:0 22px;font-size:16px}

.vk__leiste{
  position:absolute;left:0;right:0;bottom:0;z-index:4;display:none;
  padding:clamp(4px,.8cqw,10px) clamp(10px,2.2cqw,28px) clamp(4px,1cqw,12px);
  background:rgba(5,8,34,.82);opacity:0;translate:0 8px;pointer-events:none;
  transition:opacity .3s,translate .3s var(--vk-ease);
}
.vk__screen.is-ui .vk__leiste,.vk__screen.is-paused .vk__leiste{opacity:1;translate:0 0;pointer-events:auto}
.vk__spur{position:relative;display:flex;align-items:center;height:22px;cursor:pointer;touch-action:none}
.vk__spur:focus-visible{outline:2px solid #9fb4ff;outline-offset:2px;border-radius:4px}
.vk__schiene{
  position:relative;width:100%;height:3px;overflow:hidden;border-radius:2px;
  background:rgba(255,255,255,.2);transition:height .2s var(--vk-ease);
}
.vk__spur:hover .vk__schiene,.vk__spur:focus-visible .vk__schiene,.vk__spur.is-drag .vk__schiene{height:6px}
.vk__puffer,.vk__fuellung{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(0)}
.vk__puffer{background:rgba(255,255,255,.2)}
.vk__fuellung{background:linear-gradient(90deg,#ff2f7e 0%,#c33cff 50%,#3b3bff 100%)}
.vk__marke{position:absolute;top:0;bottom:0;z-index:2;width:3px;margin-left:-1.5px;background:rgba(5,8,34,.9)}
.vk__tipp{
  position:absolute;bottom:28px;left:0;padding:6px 10px;border-radius:6px;
  background:#fff;color:#0f1233;font-size:12px;font-weight:500;font-variant-numeric:tabular-nums;
  white-space:nowrap;opacity:0;pointer-events:none;translate:-50% 0;transition:opacity .15s;
}
.vk__spur:hover .vk__tipp,.vk__spur.is-drag .vk__tipp{opacity:1}
.vk__reihe{display:flex;align-items:center;gap:clamp(2px,.8cqw,10px);margin-top:4px}
.vk__ikon{
  display:grid;place-items:center;flex:none;width:40px;height:40px;padding:0;border:0;border-radius:50%;
  background:transparent;color:#fff;cursor:pointer;transition:background-color .2s;
}
.vk__ikon:hover{background:rgba(255,255,255,.1)}
.vk__ikon:focus-visible{outline:2px solid #9fb4ff;outline-offset:1px}
.vk__ikon svg{width:20px;height:20px;fill:currentColor}
.vk__ikon .i-play,.vk__ikon .i-muted,.vk__ikon .i-fs-off{display:none}
.vk__screen.is-paused .i-play,.vk__screen.is-muted .i-muted,.vk__screen.is-fs .i-fs-off{display:block}
.vk__screen.is-paused .i-pause,.vk__screen.is-muted .i-sound,.vk__screen.is-fs .i-fs-on{display:none}
.vk__ikon[hidden]{display:none}
.vk__zeit{font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.vk__gesamt{color:#a9b3e6}
.vk__kapitel{
  padding-left:12px;margin-left:4px;border-left:1px solid rgba(255,255,255,.22);
  color:#a9b3e6;font-size:13px;white-space:nowrap;
}
.vk__luecke{flex:1}
@container (max-width:620px){
  .vk__kapitel{display:none}
  .vk__direkt-lang{display:none}
  .vk__direkt-kurz{display:inline}
}
@container (max-width:400px){
  .vk__gesamt{display:none}
  .vk__ikon{width:36px;height:36px}
}

.vk__linie{
  position:absolute;left:0;right:0;bottom:0;z-index:3;display:none;height:2px;
  background:rgba(255,255,255,.1);transition:opacity .3s;
}
.vk__linie span{
  display:block;height:100%;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,#ff2f7e 0%,#c33cff 50%,#3b3bff 100%);
}
.vk__screen.is-ui .vk__linie,.vk__screen.is-paused .vk__linie{opacity:0}

.vk__direkt{
  --h:clamp(38px,3.2cqw,50px);
  position:absolute;right:clamp(10px,2.2cqw,28px);bottom:clamp(10px,2.2cqw,28px);z-index:5;
  display:none;align-items:center;gap:calc(var(--h) * .22);
  height:var(--h);padding:0 calc(var(--h) * .5);border:0;border-radius:999px;cursor:pointer;
  color:#fff;font:inherit;font-size:calc(var(--h) * .38);font-weight:600;white-space:nowrap;
  background:linear-gradient(90deg,#ff2f7e 0%,#c33cff 50%,#3b3bff 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.35),0 8px 26px rgba(0,0,20,.55);
  transition:filter .15s,bottom .3s var(--vk-ease);
}
.vk__direkt:hover{filter:brightness(1.08)}
.vk__direkt:focus-visible{outline:3px solid #9fb4ff;outline-offset:3px}
.vk__direkt svg{flex:none;width:calc(var(--h) * .36);height:calc(var(--h) * .36);fill:currentColor}
.vk__direkt-kurz{display:none}
.vk[data-state="playing"] .vk__screen .vk__direkt:not([hidden]){display:inline-flex}
.vk[data-state="playing"] .vk__screen.is-ui .vk__direkt,
.vk[data-state="playing"] .vk__screen.is-paused .vk__direkt{
  bottom:calc(76px + clamp(4px,.8cqw,10px) + clamp(4px,1cqw,12px));
}
.vk > .vk__direkt--unten{display:none}

.vk__nochmal-zeile{grid-area:nochmal;display:none;justify-content:flex-start;margin-top:18px}
.vk__nochmal.cta{
  display:inline-flex;align-items:center;gap:9px;width:auto;height:46px;margin:0;padding:0 20px;font-size:16px;
}
.vk__nochmal svg{width:17px;height:17px;fill:currentColor}

.vk__wahl{grid-area:wahl;width:100%}
.vk__b2b{grid-area:b2b}

.vk__dunkel{
  position:fixed;inset:0;z-index:60;background:#02031a;
  opacity:0;pointer-events:none;transition:opacity .4s ease;
}
html.vk-spielt{overflow:hidden}
html.vk-spielt .vk__dunkel{opacity:1;pointer-events:auto}

.vk[data-state="playing"] .vk__screen{
  position:fixed;inset:0;z-index:61;margin:auto;
  width:min(100vw,calc(100dvh * 16 / 9));height:min(100dvh,calc(100vw * 9 / 16));
  border-radius:0;box-shadow:none;
}
.vk[data-state="playing"] .vk__screen::after{opacity:0}
.vk[data-state="playing"] .vk__start{display:none}
.vk[data-state="playing"] .vk__flaeche,
.vk[data-state="playing"] .vk__leiste,
.vk[data-state="playing"] .vk__linie{display:block}
.vk[data-state="playing"] .vk__screen:not(.is-ui):not(.is-paused) .vk__flaeche{cursor:none}

@media (max-aspect-ratio:1/1){
  .vk[data-state="playing"] .vk__screen:not(.is-fs) .vk__direkt:not([hidden]){display:none}
  .vk[data-state="playing"] > .vk__direkt--unten{
    --h:52px;
    position:fixed;left:50%;right:auto;bottom:auto;z-index:62;translate:-50% 0;
    top:calc(50% + min(100dvh,calc(100vw * 9 / 16)) / 2 + 24px);
    display:inline-flex;
  }
}

.vk[data-state="done"] .vk__start{display:none}
.vk[data-state="done"] .vk__flicken{opacity:1}
.vk[data-state="done"] .vk__screen.no-patch .vk__flicken{opacity:0}
.vk[data-state="done"] .vk__nochmal-zeile{display:flex}

.vk[data-state="done"]{
  --vk-done-w:min(100%,clamp(520px,calc((100svh - 560px) * 16 / 9),1000px));
}
.vk[data-state="done"] .vk__screen,
.vk[data-state="done"] .vk__nochmal-zeile{justify-self:center;width:var(--vk-done-w)}
.vk[data-state="done"] .vk__nochmal-zeile{margin-top:14px}
.vk[data-state="done"] .vk__nochmal.cta{height:40px;padding:0 16px;font-size:15px}
.vk[data-state="done"] .vk__wahl{margin-top:26px}

.vk .paket-karte__titel{font-size:28px}
.vk .paket-karte .price__amount--ask{font-size:24px;color:#e6e9ff}
.vk .paket-karte .cta{margin-top:14px}
.vk #ask-block{padding-bottom:0}

@media (prefers-reduced-motion:reduce){
  .vk__laden{animation:none;border-color:rgba(255,255,255,.5)}
  .vk__pill,.vk__leiste,.vk__direkt,.vk__dunkel{transition:none}
}