/* Gemeinsamer Hero (Video + Poster + Sound + Scroll-Cue) — /home1/ und /fan1/ */
.hero{position:relative;height:100svh;width:100%;overflow:hidden;background:#000}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--hp,50% 30%);transform:scale(var(--hz,1.12));transform-origin:50% 100%}
.hero .poster{background:#000 var(--hp,50% 30%)/cover no-repeat}
.hero .poster{transition:opacity 1.2s ease}
.hero:after{content:"";position:absolute;inset:0;z-index:2;
  background:radial-gradient(130% 100% at 68% 42%,rgba(6,9,13,.1),rgba(6,12,18,.5) 60%,rgba(6,9,13,.93) 100%),
             linear-gradient(180deg,rgba(6,9,13,.22),rgba(6,9,13,0) 18%,rgba(6,9,13,0) 52%,#06090d 99%)}
.hero .wrap{position:absolute;inset:0;z-index:3}
.soundtgl{position:absolute;left:4vw;top:15vh;z-index:4;display:flex;align-items:center;gap:9px;cursor:pointer;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut2);border:1px solid var(--line);border-radius:4px;
  padding:8px 14px;background:rgba(6,9,13,.35);transition:border-color .4s,color .4s}
.soundtgl:hover{border-color:var(--ice);color:var(--ice-br)}
.scrollcue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:9px;color:var(--mut);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;animation:pulse 3s infinite}
.scrollcue i{width:1px;height:38px;background:linear-gradient(var(--ice),transparent);display:block}
.hero video{opacity:1}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:.9}}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* v0.6.0: „Sound on“ mobil unter den Hero-Text (unten rechts), nicht in die Navigation */
@media(max-width:720px){.soundtgl{top:auto;left:auto;right:5vw;bottom:calc(4vh + 10px)}}