/* Video-Testimonials (Hochkant, Vimeo erst nach Klick). Gilt für Webinar- und Presale-Seite. */

.vt{padding-block:clamp(48px,9vw,96px)}
.vt h2{max-width:20ch}
.vt__list{display:flex;gap:14px;margin:28px calc(var(--gutter) * -1) 0;padding:6px var(--gutter) 22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch;list-style:none}
.vt__list::-webkit-scrollbar{display:none}
.vt__item{flex:none;width:min(62vw,250px);scroll-snap-align:start}

.vt__card{position:relative;display:block;width:100%;aspect-ratio:9/16;padding:0;border:0;border-radius:22px;overflow:clip;background:var(--ink);color:var(--on-ink);cursor:pointer;font:inherit;text-align:left;
  box-shadow:0 22px 36px -20px rgb(31 27 23 / .45),0 6px 14px -8px rgb(31 27 23 / .2);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.vt__card:active{transform:scale(.98)}
.vt__poster{position:absolute;inset:0;display:grid;place-items:start center;padding-top:18%;background:var(--poster,none) center/cover no-repeat,linear-gradient(160deg,#3A322A,#1F1B17 70%)}
.vt__poster::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 40% at 80% 10%,color-mix(in srgb,var(--accent) 38%,transparent),transparent 70%)}
.vt__poster::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;background:linear-gradient(to top,rgb(20 17 14 / .78),transparent)}
.vt__initial{position:relative;z-index:1;font-size:4.5rem;font-weight:800;letter-spacing:-.05em;color:color-mix(in srgb,var(--on-ink) 40%,transparent)}
.vt__card.has-poster .vt__initial{display:none}
.vt__play{position:absolute;z-index:2;left:50%;top:46%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgb(247 244 239 / .92);display:grid;place-items:center;
  box-shadow:0 10px 24px -8px rgb(0 0 0 / .45);transition:transform .35s var(--ease)}
.vt__play::before{content:"";margin-left:4px;border-style:solid;border-width:10px 0 10px 16px;border-color:transparent transparent transparent var(--ink)}
.vt__name{position:absolute;z-index:2;left:16px;right:16px;bottom:14px;font-size:1rem;font-weight:700;letter-spacing:-.01em}
.vt__name small{display:block;margin-top:2px;font-size:.75rem;font-weight:600;color:var(--on-ink-muted)}
.vt__soon{position:absolute;z-index:3;inset:auto 12px 56px 12px;padding:8px 10px;border-radius:10px;background:rgb(247 244 239 / .95);color:var(--ink);font-size:.8125rem;font-weight:600;line-height:1.3;text-align:center}
.vt__card iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.vt__card.is-playing{cursor:default}
.vt__card.is-playing:active{transform:none}

.vt__fine{margin-top:6px;max-width:64ch}
.vt__fine + .vt__fine{margin-top:8px}

@media (hover:hover) and (pointer:fine){
  .vt__card:not(.is-playing):hover{transform:translateY(-3px);box-shadow:0 28px 40px -20px rgb(31 27 23 / .5),0 8px 16px -8px rgb(31 27 23 / .22)}
  .vt__card:not(.is-playing):hover .vt__play{transform:scale(1.08)}
}
@media (min-width:900px){
  .vt__list{display:grid;grid-template-columns:repeat(4,1fr);margin-inline:0;padding-inline:0;overflow:visible;gap:18px}
  .vt__item{width:auto}
}
@media (prefers-reduced-motion:reduce){
  .vt__card,.vt__play{transition:none}
}