/* band: breites Heizestrich-Bild nach dem Hero, öffnet sich beim Scrollen */
.band{padding:clamp(.5rem,2vw,1.5rem) 0 0}
.band-bild{position:relative;margin:0 auto;width:100%;max-width:1680px;aspect-ratio:21/9;overflow:clip;background:var(--nacht)}
.band-bild img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.band-bild::after{content:"";position:absolute;inset:auto 0 0 0;height:64%;background:linear-gradient(to top,rgba(23,25,27,.9) 0,rgba(23,25,27,.62) 40%,rgba(23,25,27,0));pointer-events:none}
.band-bild figcaption{position:absolute;left:clamp(16px,4vw,64px);right:clamp(72px,8vw,120px);bottom:clamp(16px,3.2vw,44px);z-index:1;display:flex;flex-direction:column;gap:6px;color:#fff}
.band-bild .eyebrow{color:#fff;opacity:1;text-shadow:0 1px 10px rgba(23,25,27,.8)}
.band-satz{font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:1;font-size:clamp(1.7rem,4.6vw,3.6rem);text-wrap:balance;text-shadow:0 2px 18px rgba(23,25,27,.5)}
@supports (animation-timeline:view()){
  .band-bild{animation:band-auf linear both;animation-timeline:view();animation-range:entry 0% entry 85%}
  .band-bild img{animation:band-zoom linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
  .band-bild figcaption{animation:band-text linear both;animation-timeline:view();animation-range:entry 45% entry 100%}
}
@keyframes band-auf{from{clip-path:inset(0 14% round 28px)}to{clip-path:inset(0 0 round 0)}}
@keyframes band-zoom{from{transform:scale(1.22)}to{transform:scale(1)}}
@keyframes band-text{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (max-width:760px){
  .band-bild{aspect-ratio:4/3}
  .band-bild img{object-position:50% 58%}
  .band-bild figcaption{right:72px}
}
@media (prefers-reduced-motion:reduce){
  .band-bild,.band-bild img,.band-bild figcaption{animation:none!important}
}