/* 10 Forms — Strom (ersetzt das Kononenko-Rad, Felix 07.11.): eine Form groß in der Mitte, die nächste wartet unten
   angeschnitten, die vorige verschwindet nach oben. Abschnitt bleibt 100vh angeheftet; Scrollen schiebt den Strom (js/stream.js).
   Größen: --h relativ zur höchsten Form (Segel), Bühne --stage-h. */
.stream { position: relative; background: var(--black); color: var(--white); --stage-h: 66vh; --gap: 9vh; }
.stream__pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.stream__label {
  position: absolute; left: var(--gutter); top: clamp(84px, 8vw, 120px); margin: 0; z-index: 2;
  font-family: var(--serif); font-size: 13px; line-height: 1.2;
}
.stream__copy {
  position: absolute; left: calc(var(--gutter) + clamp(60px, 6vw, 96px)); top: clamp(78px, 7.6vw, 114px);
  max-width: min(34vw, 30em); z-index: 2;
}
.stream__line {
  margin: 0; max-width: 11em; font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 3.2vw, 56px); line-height: 1.03; letter-spacing: -0.02em;
}
.stream__text { margin: 1.2em 0 0; max-width: 30em; font-size: 13px; line-height: 1.35; color: var(--grey); }
.stream__count {
  position: absolute; right: var(--gutter); bottom: clamp(28px, 4vw, 56px); margin: 0; z-index: 2;
  font-family: var(--serif); font-size: clamp(16px, 1.6vw, 24px); line-height: 1;
}
.stream__count em { font-style: normal; color: var(--grey); margin-left: .35em; }
.stream__track { position: absolute; left: 62%; top: 0; width: 0; will-change: transform; }
.stream__item {
  position: absolute; left: 0; margin: 0;
  top: 0;                                  /* top + height setzt js/stream.js aus --h, --stage-h, --gap */
  height: calc(var(--h, 1) * var(--stage-h));
  aspect-ratio: var(--ar, 1);
  transform: translateX(-50%);
  will-change: transform, opacity;
}
.stream__item picture, .stream__item img { display: block; height: 100%; width: 100%; }
.stream__item img { pointer-events: none; user-select: none; }
@media (max-width: 760px) {
  .stream { --stage-h: 46vh; --gap: 7vh; }
  .stream__track { left: 50%; }
  .stream__label { top: 92px; }
  .stream__copy { left: var(--gutter); top: 118px; max-width: 80vw; }
  .stream__line { max-width: 9em; font-size: clamp(24px, 7.2vw, 34px); }
  .stream__text { font-size: 12.5px; }
  .stream__count { bottom: 24px; }
}

/* 08.11. — ohne Bewegung (prefers-reduced-motion): kein Anheften, Formen als Liste untereinander, Zähler aus */
.stream.is-static .stream__pin { height: auto; overflow: visible; padding: clamp(84px, 8vw, 120px) 0 clamp(72px, 7vw, 110px); }
.stream.is-static .stream__label, .stream.is-static .stream__copy { position: relative; top: auto; left: auto; margin: 0 var(--gutter); max-width: 30em; }
.stream.is-static .stream__copy { margin-top: 1.2em; margin-bottom: clamp(48px, 6vw, 96px); }
.stream.is-static .stream__count { display: none; }
.stream.is-static .stream__track { position: static; width: auto; transform: none; will-change: auto; }
.stream.is-static .stream__item { position: relative; left: auto; transform: none; margin: 0 auto clamp(48px, 7vh, 96px);
  /* Breite aus Höhe × Seitenverhältnis, aber nie breiter als der Viewport minus Ränder (Nachtest 08.11.: Halbmond war 423 px bei 400 px) */
  width: min(calc(var(--h, 1) * var(--stage-h) * var(--ar, 1)), calc(100% - 2 * var(--gutter))); height: auto; aspect-ratio: var(--ar, 1); }