/* Hero-Video der Startseite: läuft stumm in Schleife; mit Ton einmal von vorne, danach Endscreen mit CTA */
.hero-visual{max-width:min(620px,100%)}
.hv-frame{position:relative;z-index:1;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#07080a;
  box-shadow:0 30px 70px rgba(40,30,20,.22),0 8px 20px rgba(40,30,20,.12);border:1px solid rgba(0,0,0,.06)}
.hv-frame video{display:block;width:100%;height:100%;object-fit:cover}

/* Steuerleiste */
.hv-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:28px 12px 12px;
  background:linear-gradient(transparent,rgba(0,0,0,.55));opacity:.85;transition:opacity .25s}
.hv-frame:hover .hv-bar,.hv-frame:focus-within .hv-bar{opacity:1}
.hv-btn,.hv-sound{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;border-radius:999px;
  background:rgba(12,11,10,.6);color:#fff;border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px);
  font:700 .8rem/1 var(--font,system-ui);cursor:pointer;transition:background .2s,transform .15s}
.hv-btn{width:34px;font-size:.9rem}
.hv-sound{padding:0 13px;white-space:nowrap}
.hv-btn:hover,.hv-sound:hover{background:rgba(12,11,10,.85);transform:translateY(-1px)}
.hv-btn:focus-visible,.hv-sound:focus-visible{outline:2px solid var(--blue,#89cff0);outline-offset:2px}

/* Großer Play/Pause-Button in der Mitte: sichtbar, wenn pausiert; beim Abspielen nur bei Hover */
.hv-big{position:absolute;left:50%;top:50%;z-index:2;width:clamp(68px,17%,104px);aspect-ratio:1;border-radius:50%;
  translate:-50% -55%;display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:rgba(137,207,240,.95);color:#0c0b0a;border:0;box-shadow:0 18px 44px rgba(0,0,0,.35),0 0 0 10px rgba(137,207,240,.22);
  opacity:0;scale:.9;transition:opacity .25s,scale .25s cubic-bezier(.16,1,.3,1),background .2s}
.hv-big svg{width:42%;height:42%;fill:currentColor}
.hv-big .i-pause{display:none}
.hv-frame.is-playing .hv-big .i-play{display:none}
.hv-frame.is-playing .hv-big .i-pause{display:block}
.hv-frame.is-paused .hv-big{opacity:1;scale:1}
.hv-frame.is-playing:hover .hv-big,.hv-big:focus-visible{opacity:.92;scale:1}
.hv-big:hover{scale:1.06!important;background:#9fd8f3}
.hv-big:focus-visible{outline:3px solid #fff;outline-offset:4px}
.hv-frame.is-ended .hv-big{opacity:0;pointer-events:none}
.hv-frame video{cursor:pointer}
@media(hover:none){.hv-frame.is-playing .hv-big{opacity:0}}

/* Endscreen-CTA */
.hv-cta{position:absolute;left:0;right:0;bottom:58px;display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;
  padding:0 12px;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .45s,transform .45s cubic-bezier(.16,1,.3,1)}
.hv-cta.show{opacity:1;transform:none;pointer-events:auto}
.hv-cta-main{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;background:var(--blue,#89cff0);color:#0c0b0a;
  font-weight:800;font-size:.92rem;box-shadow:0 12px 30px rgba(29,127,181,.35);transition:transform .15s}
.hv-cta-main:hover{transform:translateY(-2px)}
.hv-cta-replay{display:none;padding:11px 16px;border-radius:999px;background:rgba(12,11,10,.7);color:#fff;border:1px solid rgba(255,255,255,.25);font:700 .85rem/1 var(--font,system-ui);cursor:pointer}
.hv-cta.ended .hv-cta-replay{display:inline-flex}
.hv-frame.is-ended video{filter:brightness(.92)}
@media(max-width:860px){.hero-visual{max-width:100%}.hv-frame{border-radius:18px}.hv-bar{opacity:1}.hv-cta{bottom:54px}.hv-cta-main{padding:10px 16px;font-size:.85rem}}
@media(max-width:420px){.hv-sound{padding:0 10px;font-size:.74rem}}