/* Bewegungsebenen — siehe docs/parallax-ebenen.md

   Abweichung vom urspruenglichen Ebenenmodell, bewusst:
   Es gibt KEINE vollflaechigen Bilder hinter dem Text. Fotografie und
   Typografie bleiben getrennte Register (docs/design-system.md, Regel 4).
   Die Tiefe entsteht stattdessen im Bildband — es laeuft waagerecht
   durch, waehrend die Sektion vorbeizieht, und die Wagen darin bewegen
   sich in zwei Geschwindigkeiten.

   Animiert wird ausschliesslich transform und opacity. */

.sektion { position: relative; }
.sektion__inhalt { position: relative; z-index: 1; }

/* ---------- Bildband ---------- */

.bildband {
  position: relative;
  margin-block: var(--chapter-gap);
  overflow: hidden;
  padding-block: 4px;
}
/* Am Sektionsende traegt der Abstand der Sektion selbst. */
.sektion > .bildband:last-child { margin-bottom: 0; }

.bildband__spur {
  display: flex;
  align-items: flex-end;
  gap: clamp(12px, 2vw, 28px);
  width: max-content;
  padding-inline: 8vw;
}

.bildband__wagen {
  flex: none;
  margin: 0;
  width: clamp(200px, 24vw, 360px);
}

/* Die "nahen" Wagen sind groesser und laufen spaeter etwas schneller. */
.bildband__wagen[data-tiefe='nah']  { width: clamp(230px, 28vw, 420px); }
.bildband__wagen[data-tiefe='fern'] { width: clamp(180px, 21vw, 320px); }

.bildband__bild {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--color-ash);
}

.bildband__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bildband__titel {
  margin-top: 12px;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--color-slate);
}

/* Startzustand nur, wenn Bewegung wirklich laeuft — sonst bliebe das
   Band bei fehlendem GSAP unsichtbar. */
.bewegung .bildband__wagen {
  opacity: 0;
  transform: translate3d(0, 48px, 0);
}

@media (prefers-reduced-motion: reduce) {
  .bewegung .bildband__wagen { opacity: 1; transform: none; }
  .bildband__spur { transform: none !important; will-change: auto; }
}

/* ---------- Bildtafel ---------- */

/* Vollbreite Aufnahme zwischen den Inhaltsbloecken. Kein Text darueber.
   Das Bild ist hoeher als sein Rahmen und laeuft darin langsamer als die
   Seite — das ist die Tiefe aus Ebene 0, ohne dass etwas hinter dem
   Text liegt. */
.bildtafel {
  position: relative;
  margin: 0;
  /* Die Tafel steht zwischen zwei Inhaltsbloecken und nutzt denselben
     Abstand wie der Rhythmus innerhalb der Sektion. */
  margin-block: var(--section-gap);
  height: clamp(280px, 52vh, 560px);
  overflow: hidden;
  background: var(--color-ash);
}

.sektion > .bildtafel:last-child { margin-bottom: 0; }

.bildtafel__bild {
  position: absolute;
  left: 0;
  top: -15%;
  width: 100%;
  height: 130%;
  object-fit: cover;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .bildtafel__bild { transform: none !important; }
}


/* ---------- Fotostreifen: Ausgangslage fuer den Parallaxlauf ---------- */

/* Das Bild ist hoeher als der Streifen. Der Ueberschuss ist der Weg, den
   es beim Vorbeiziehen zuruecklegt — ohne ihn wuerden an den Kanten
   Luecken auftauchen.

   124 Prozent Hoehe bei -12 Prozent Versatz lassen oben und unten je
   0,12 der Streifenhoehe Spiel. Der Lauf betraegt 8 Prozent der
   Bildhoehe, also 0,099 der Streifenhoehe — das passt hinein.

   Absolut gelegt, nicht ueber einen negativen Rand: senkrechte
   Prozentraender rechnen gegen die BREITE des Containers. Bei 1440 px
   Breite und 504 px Hoehe waren -12 Prozent nicht -60, sondern -173 px —
   unten blieb dadurch ein leerer Streifen. */
.bewegung .fotostreifen__bild {
  position: absolute;
  left: 0;
  top: -12%;
  height: 124%;
}

/* ---------- Ausgangslagen der neuen Auftritte ---------- */

.bewegung .aussageband__satz,
.bewegung .prozessband__satz { opacity: 0; transform: translate3d(0, 18%, 0); }
.bewegung .kapitelkopf__nr { opacity: 0; transform: translate3d(-14%, 0, 0); }
.bewegung .hero__riese-wert { opacity: 0; }

/* Ohne Bewegung steht alles sofort auf dem Endwert — gleicher Inhalt,
   nur ohne Auftritt. */
@media (prefers-reduced-motion: reduce) {
  .bewegung .fotostreifen__bild { position: static; height: 100%; }
  .bewegung .aussageband__satz,
  .bewegung .prozessband__satz,
  .bewegung .kapitelkopf__nr,
  .bewegung .hero__riese-wert { opacity: 1; transform: none; }
}