/* Hero-Loop valentin.film
   Ergaenzt die bestehenden .hero Regeln der Seite. Keine CSS-Filter und keine Blend-Modi auf dem Video. */
.hero-stage{position:absolute;inset:0;overflow:hidden;background:#0c0a08 center/cover no-repeat;
  background-image:url("/assets/img/hero.jpg?v=2");background-position:62% 50%;
  transform:translate3d(0,0,0) scale(1);will-change:transform}
.hero-stage .hero-media{opacity:0;transition:opacity .45s linear}
.hero-stage .hero-media.is-on{opacity:1}
.hero-stage .hero-media.is-top{z-index:1}
.hero.has-parallax .hero-stage{inset:-14px}

.hero-index{position:absolute;z-index:2;right:var(--pad);bottom:28px;display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  list-style:none;margin:0;padding:0;font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.hero-index button{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;padding:5px 0;color:rgba(255,255,255,.55);
  transition:color .25s}
.hero-index button::after{content:"";width:18px;height:1px;background:currentColor;transition:width .3s ease}
.hero-index button:hover,.hero-index button:focus-visible,.hero-index .is-current button{color:#fff}
.hero-index .is-current button::after{width:44px}
.hero-index button:focus-visible{outline:1px solid rgba(255,255,255,.7);outline-offset:4px}
.hero-index .ext{font-size:11px;letter-spacing:0;margin-left:-4px;opacity:.8}

.hero-cursor{position:fixed;left:0;top:0;z-index:60;pointer-events:none;display:flex;align-items:center;gap:10px;
  opacity:0;transition:opacity .2s;font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#fff;white-space:nowrap}
.hero-cursor.is-visible{opacity:1}
.hero-cursor i{width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid rgba(255,255,255,.85);border-radius:50%;transition:transform .25s ease}
.hero-cursor.is-active i{transform:scale(1.45)}
.hero-cursor span{margin-top:-17px;transition:opacity .2s}
.hero-cursor.is-active span{opacity:0}

@media (max-width:720px) and (orientation:portrait){
  .hero-stage .hero-media{object-position:50% 50%}
  .hero-index{left:var(--pad);right:auto;bottom:18px;flex-direction:row;flex-wrap:wrap;gap:0 14px;font-size:10px}
  .hero-index button::after{display:none}
}
@media (hover:none),(pointer:coarse){.hero-cursor{display:none}}
/* Still mode (slow connection / reduced motion): no project list, no video */
.hero.is-still .hero-index{display:none}
.hero.is-still .hero-stage .hero-media{display:none}
@media (prefers-reduced-motion:reduce){.hero-stage .hero-media{transition:none}}