/* 11. Parallax-Bänder ---------------------------------------------------- */

.band {
  position: relative;
  min-height: clamp(26rem, 62vh, 42rem);
  display: grid;
  place-items: center;
  overflow: clip;
  isolation: isolate;
  background: var(--c-ink);
  text-align: center;
}

.band__media {
  position: absolute;
  inset: -12% 0 -12% 0;
  z-index: -2;
}

.band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}




.quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 3rem;
  line-height: 1.18;
  color: var(--c-ink);
  max-width: 30ch;
  margin: 0;
}


/* Zitatband mit stehendem Hintergrund (.band--fixed).
   Das Bild liegt fest im Sichtfeld, der Text laeuft darueber hinweg.

   Warum clip und nicht background-attachment: fixed? Letzteres ist auf iOS
   seit Jahren fehlerhaft und ruckelt. Und warum die veraltete
   clip-Eigenschaft statt overflow oder clip-path? Ein fest positioniertes
   Element wird von overflow gar nicht beschnitten, und clip-path wuerde den
   Container zum Bezugsrahmen machen — dann waere das Bild wieder relativ
   zum Band positioniert statt zum Sichtfeld. clip beschneidet, ohne das zu
   tun, und wird von allen aktuellen Browsern unterstuetzt.

   Nur auf Zeigegeraeten ab 900 px aktiv. Auf Touch-Geraeten und schmalen
   Displays bleibt es beim normalen, mitscrollenden Bild. */

@media (hover: hover) and (pointer: fine) and (min-width: 56.25rem) {
  .band--fixed .band__media {
    position: absolute;
    inset: 0;
    clip: rect(0, auto, auto, 0);
    transform: none !important;
  }

  .band--fixed .band__media img {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
  }
}

.band::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(42, 34, 30, 0.50);
}

.band__inner {
  padding: var(--sp-2xl) var(--gutter);
  max-width: 48rem;
}

.band .quote {
  color: var(--c-white);
  max-width: none;
  margin-inline: auto;
}

.band__attrib {
  display: block;
  margin-top: var(--sp-s);
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 253, 250, 0.75);
}