.kss-hpm-video{padding:84px 0}
.kss-hpm-video h2{font-size:clamp(29px,3.6vw,40px);margin-bottom:12px}
.kss-hpm-video .intro{color:var(--tinte-weich);max-width:52ch;margin-bottom:34px}
.kss-hpm-video .video-figur{margin:0 auto;max-width:860px}
.kss-hpm-video--schmal .video-figur{max-width:560px}
.kss-hpm-video--breit .video-figur{max-width:1100px}

.kss-hpm-video .video-player{
  position:relative;width:100%;overflow:hidden;border-radius:12px;
  border:1px solid var(--linie);background:var(--sand);
  box-shadow:0 20px 38px -24px rgba(35,34,32,.36);
}
.kss-hpm-video .f-16-9{aspect-ratio:16/9}
.kss-hpm-video .f-4-3{aspect-ratio:4/3}
.kss-hpm-video .f-1-1{aspect-ratio:1/1}
.kss-hpm-video .f-4-5{aspect-ratio:4/5}
.kss-hpm-video .f-9-16{aspect-ratio:9/16;max-width:420px;margin:0 auto}

.kss-hpm-video .video-thumb,
.kss-hpm-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#000}
.kss-hpm-video video{object-fit:contain}
.kss-hpm-video .video-thumb{transition:transform .6s cubic-bezier(.22,1,.36,1)}
.kss-hpm-video .video-player:hover .video-thumb{transform:scale(1.03)}

.kss-hpm-video .video-play{
  position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;
  background:linear-gradient(to top,rgba(35,34,32,.28),rgba(35,34,32,0) 55%);
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.kss-hpm-video .video-play svg{
  width:78px;height:78px;padding:22px 20px 22px 25px;box-sizing:border-box;
  border-radius:50%;background:var(--rose);
  box-shadow:0 10px 28px -8px rgba(169,108,85,.7);
  transition:transform .3s,background .3s;
}
.kss-hpm-video .video-play:hover svg{background:var(--rose-tief);transform:scale(1.08)}
.kss-hpm-video .video-play:focus-visible{outline:3px solid var(--rose-tief);outline-offset:-6px}

.kss-hpm-video figcaption{
  font-family:var(--hand);font-size:20px;color:var(--rose-tief);
  margin-top:12px;text-align:center;
}
@media(max-width:900px){.kss-hpm-video{padding:60px 0}}
@media(max-width:560px){.kss-hpm-video .video-play svg{width:62px;height:62px;padding:17px 15px 17px 20px}}
@media(prefers-reduced-motion:reduce){.kss-hpm-video .video-thumb,.kss-hpm-video .video-play svg{transition:none}}
