/* ==========================================================================
   NH40 · Motion-Bausteine
   Handover: website-motion-redesign-handover-2026-08-01.md · Phase F3

   Fünf Module, einzeln einsetzbar, alle nach denselben Regeln gebaut:

   1. CSS-first. Scroll-gebundene Bewegung läuft über native Scroll-Timelines
      (animation-timeline). Wo die fehlen, springt ein rAF-Treiber in
      motion.js ein und schreibt denselben Fortschritt als --p / [data-aktiv].
   2. Animiert werden ausschliesslich transform und opacity.
   3. Der Ausgangszustand eines Reveals wird NUR gesetzt, wenn motion.js
      wirklich läuft (html.m-js). Ohne JS ist alles sichtbar — kein
      unsichtbarer Inhalt, nie.
   4. Zweites Netz: der Sicherheitstimer setzt html.m-notaus (~2,5 s nach
      DOMContentLoaded). Dann blendet alles ein, egal was schiefging.
   5. prefers-reduced-motion: reduce → alles statisch und vollwertig nutzbar.
      Die Lichtstrecke wird dann zur normalen Dreier-Fotostrecke.

   Easing: die zwei Kurven der Seite, keine neuen.
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}


/* ==========================================================================
   MODUL A · Ken-Burns — langsamer Zoom auf einem Vollflächenbild
   --------------------------------------------------------------------------
   Zwei getrennte Bewegungen auf zwei Ebenen, damit sie sich nicht
   gegenseitig überschreiben (eine transform-Eigenschaft pro Element):

     .m-kenburns__lage  → scroll-gebunden (gehört dem Finger)
     .m-kenburns img    → einmaliger Einzug beim Laden, 4,5 s, dann Ruhe

   Der Einzug bleibt bewusst unter 5 s: darüber verlangt WCAG 2.2.2 eine
   Pause-Bedienung. Der Scroll-Teil ist nutzergetrieben und davon nicht
   betroffen.

   Reichweite steuerbar über --kb-bereich:
     Hero (steht beim Laden schon im Bild) → exit 0% exit 100%
       Damit ruht er bei Scrollposition 0 und driftet erst beim Weggehen.
     Bild mitten auf der Seite           → cover 0% cover 100%  (Vorgabe)
   ========================================================================== */

.m-kenburns {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.m-kenburns__lage {
  position: absolute;
  inset: 0;
}

.m-kenburns img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--kb-fokus, 50% 50%);
  display: block;
  transform-origin: var(--kb-fokus, 50% 50%);
}

/* Einzug — nur mit JS, damit ohne JS nichts skaliert stehenbleibt */
html.m-js .m-kenburns[data-kb~="einzug"] img {
  animation: m-kb-einzug 4.5s var(--ease-out) both;
}

@keyframes m-kb-einzug {
  from { transform: scale(1.09); }
  to   { transform: scale(1); }
}

/* Scroll-Teil, nativer Weg */
@supports (animation-timeline: view()) {
  html.m-js:not(.m-fallback) .m-kenburns[data-kb~="scroll"] .m-kenburns__lage {
    animation: m-kb-scroll linear both;
    animation-timeline: view();
    animation-range: var(--kb-bereich, cover 0% cover 100%);
  }
}

@keyframes m-kb-scroll {
  from { transform: scale(1); }
  to   { transform: scale(var(--kb-weite, 1.12)); }
}

/* Scroll-Teil, Ersatzweg: motion.js schreibt --p (0…1) auf das Element */
html.m-fallback .m-kenburns[data-kb~="scroll"] .m-kenburns__lage {
  transform: scale(calc(1 + var(--p, 0) * (var(--kb-weite, 1.12) - 1)));
}


/* ==========================================================================
   MODUL B · Parallax — Hintergrundebene läuft langsamer als der Vordergrund
   --------------------------------------------------------------------------
   Faktor über --px-tiefe, maximal 0.2 (aus /motion-web). Darüber wird die
   Bewegung als Ruckeln wahrgenommen statt als Tiefe.
   Die Ebene ist bewusst grösser als ihr Rahmen (scale 1.15), sonst schiebt
   der Versatz eine leere Kante ins Bild.
   ========================================================================== */

.m-parallax {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Die Ebene muss um mindestens den halben Laufweg über den Rahmen
   hinausragen, sonst schiebt der Versatz eine leere Kante ins Bild.
   Deshalb hängt die Übergrösse an derselben Tiefe wie die Bewegung. */
.m-parallax__ebene {
  position: absolute;
  inset: calc(var(--px-tiefe, 0.18) * -56vh) 0;
}

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

.m-parallax__vordergrund {
  position: relative;
  z-index: 2;
}

@supports (animation-timeline: view()) {
  html.m-js:not(.m-fallback) .m-parallax__ebene {
    animation: m-parallax linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
}

/* Laufweg in vh statt px: der Versatz muss zur durchscrollten Strecke
   passen, nicht zu einer festen Pixelzahl. Bei Tiefe 0,18 sind das
   ±9 vh — die Hintergrundebene läuft also spürbar langsamer als der
   Vordergrund, bleibt aber unter der 0,2-Grenze aus /motion-web. */
@keyframes m-parallax {
  from { transform: translateY(calc(var(--px-tiefe, 0.18) * -50vh)); }
  to   { transform: translateY(calc(var(--px-tiefe, 0.18) *  50vh)); }
}

html.m-fallback .m-parallax__ebene {
  transform: translateY(calc((var(--p, 0.5) - 0.5) * var(--px-tiefe, 0.18) * 100vh));
}


/* ==========================================================================
   MODUL C · Reveal mit Netz — Auftritt beim Reinscrollen
   --------------------------------------------------------------------------
   Der Startzustand hängt an drei Bedingungen gleichzeitig:
     html.m-js        → JS läuft überhaupt
     :not(.m-notaus)  → der Sicherheitstimer ist noch nicht gefallen
     :not(.ist-da)    → der IntersectionObserver war noch nicht da

   Fällt eine davon weg, greift die Regel nicht mehr und der Inhalt ist
   sichtbar. Der Übergang steht ausserhalb, damit auch das Not-Aus
   sanft einblendet statt zu springen.
   ========================================================================== */

html.m-js .m-reveal {
  transition:
    opacity   0.8s var(--ease-out),
    transform 0.8s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}

html.m-js:not(.m-notaus) .m-reveal:not(.ist-da) {
  opacity: 0;
  transform: translateY(32px);
}

/* Variante für Bilder: kommen aus der Tiefe statt von unten —
   verschiebt keine Textzeilen und wirkt ruhiger. */
html.m-js:not(.m-notaus) .m-reveal[data-reveal="tiefe"]:not(.ist-da) {
  transform: scale(1.06);
}


/* ==========================================================================
   MODUL D · Lichtstrecke — dieselbe Aussicht, drei Tageszeiten
   --------------------------------------------------------------------------
   Die alte Idee (Licht wandert durchs Haus) mit echten Fotos statt Regler:
   ein hoher Behälter, eine klebende Bühne, Bilder blenden über den
   Scrollfortschritt ineinander.

   Nativer Weg: benannte view-timeline am Behälter, die Ebenen hängen sich
   daran. Reichweite "contain" = genau die Zeit, in der die Bühne klebt.
   Ersatzweg: motion.js setzt [data-aktiv="0|1|2"] — statt stufenlosem
   Scrubben ein weicher Wechsel in drei Stufen. Sieht ruhig aus, ist robust.

   Die Bildzeile steht als figcaption IM figure. Damit erbt sie dessen
   Überblendung und braucht keine eigene Animation — und in Reduced Motion
   steht jede Zeile automatisch bei ihrem Bild statt in einem Sammelblock.

   Reduced Motion: die Bühne klebt nicht mehr, die Bilder stehen als
   normale Dreierstrecke untereinander, jedes mit seiner Bildzeile.
   ========================================================================== */

.m-lichtstrecke {
  position: relative;
  height: var(--ls-hoehe, 300vh);
}

.m-lichtstrecke__buehne {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.m-lichtstrecke__bild {
  position: absolute;
  inset: 0;
  margin: 0;
}

/* picture ist von Haus aus inline — das setzt eine Zeilen-Unterlänge unter
   das Bild und reisst einen Spalt zur Bildzeile. Als Block verschwindet er. */
.m-lichtstrecke__bild picture {
  display: block;
  height: 100%;
}

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

/* Ausgangslage: das erste Bild steht, die anderen warten.
   Ohne JS bleibt es dabei — ein vollständiges, richtiges Bild. */
.m-lichtstrecke__bild + .m-lichtstrecke__bild { opacity: 0; }

.m-lichtstrecke__wort {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 5rem clamp(1.5rem, 5vw, 4rem) clamp(2rem, 5vh, 3.5rem);
  background: linear-gradient(to top, #1A1A17E6, #1A1A1755 55%, #1A1A1700);
  color: #FCFBF8;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.15;
}

.m-lichtstrecke__wort small {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.62;
  margin-bottom: 0.55rem;
}

/* — nativer Weg — */
@supports (animation-timeline: view()) {
  html.m-js:not(.m-fallback) .m-lichtstrecke {
    view-timeline-name: --ls;
    view-timeline-axis: block;
  }

  html.m-js:not(.m-fallback) .m-lichtstrecke__bild,
  html.m-js:not(.m-fallback) .m-lichtstrecke__bild .m-lichtstrecke__wort {
    animation-timeline: --ls;
    animation-range: contain 0% contain 100%;
    animation-timing-function: linear;
    animation-fill-mode: both;
  }

}


/* --- Überblend-Kurven für 2 bis 6 Ebenen (erzeugt) --- */
@keyframes m-ls-2-1{0%,25.0%{opacity:1}75.0%,100%{opacity:0}}
@keyframes m-ls-2-2{0%,25.0%{opacity:0}75.0%,100%{opacity:1}}
@keyframes m-ls-3-1{0%,16.67%{opacity:1}50.0%,100%{opacity:0}}
@keyframes m-ls-3-2{0%,16.67%{opacity:0}50.0%,50.0%{opacity:1}83.33%,100%{opacity:0}}
@keyframes m-ls-3-3{0%,50.0%{opacity:0}83.33%,100%{opacity:1}}
@keyframes m-ls-4-1{0%,12.5%{opacity:1}37.5%,100%{opacity:0}}
@keyframes m-ls-4-2{0%,12.5%{opacity:0}37.5%,37.5%{opacity:1}62.5%,100%{opacity:0}}
@keyframes m-ls-4-3{0%,37.5%{opacity:0}62.5%,62.5%{opacity:1}87.5%,100%{opacity:0}}
@keyframes m-ls-4-4{0%,62.5%{opacity:0}87.5%,100%{opacity:1}}
@keyframes m-ls-5-1{0%,10.0%{opacity:1}30.0%,100%{opacity:0}}
@keyframes m-ls-5-2{0%,10.0%{opacity:0}30.0%,30.0%{opacity:1}50.0%,100%{opacity:0}}
@keyframes m-ls-5-3{0%,30.0%{opacity:0}50.0%,50.0%{opacity:1}70.0%,100%{opacity:0}}
@keyframes m-ls-5-4{0%,50.0%{opacity:0}70.0%,70.0%{opacity:1}90.0%,100%{opacity:0}}
@keyframes m-ls-5-5{0%,70.0%{opacity:0}90.0%,100%{opacity:1}}
@keyframes m-ls-6-1{0%,8.33%{opacity:1}25.0%,100%{opacity:0}}
@keyframes m-ls-6-2{0%,8.33%{opacity:0}25.0%,25.0%{opacity:1}41.67%,100%{opacity:0}}
@keyframes m-ls-6-3{0%,25.0%{opacity:0}41.67%,41.67%{opacity:1}58.33%,100%{opacity:0}}
@keyframes m-ls-6-4{0%,41.67%{opacity:0}58.33%,58.33%{opacity:1}75.0%,100%{opacity:0}}
@keyframes m-ls-6-5{0%,58.33%{opacity:0}75.0%,75.0%{opacity:1}91.67%,100%{opacity:0}}
@keyframes m-ls-6-6{0%,75.0%{opacity:0}91.67%,100%{opacity:1}}

@supports (animation-timeline: view()) {
  html.m-js:not(.m-fallback) .m-lichtstrecke[data-anzahl="2"] .m-lichtstrecke__bild:nth-child(1) { animation-name: m-ls-2-1; }
  html.m-js:not(.m-fallback) .m-lichtstrecke[data-anzahl="2"] .m-lichtstrecke__bild:nth-child(2) { animation-name: m-ls-2-2; }
  html.m-js:not(.m-fallback) .m-lichtstrecke[data-anzahl="3"] .m-lichtstrecke__bild:nth-child(1) { animation-name: m-ls-3-1; }
  html.m-js:not(.m-fallback) .m-lichtstrecke[data-anzahl="3"] .m-lichtstrecke__bild:nth-child(2) { animation-name: m-ls-3-2; }
  html.m-js:not(.m-fallback) .m-lichtstrecke[data-anzahl="3"] .m-lichtstrecke__bild:nth-child(3) { animation-name: m-ls-3-3; }
  html.m-js:not(.m-fallback) .m-lichtstrecke[data-anzahl="4"] .m-lichtstrecke__bild:nth-child(1) { animation-name: m-ls-4-1; }
  html.m-js:not(.m-fallback) .m-lichtstrecke[data-anzahl="4"] .m-lichtstrecke__bild:nth-child(2) { animation-name: m-ls-4-2; }
  html.m-js:not(.m-fallback) .m-lichtstrecke[data-anzahl="4"] .m-lichtstrecke__bild:nth-child(3) { animation-name: m-ls-4-3; }
  html.m-js:not(.m-fallback) .m-lichtstrecke[data-anzahl="4"] .m-lichtstrecke__bild:nth-child(4) { animation-name: m-ls-4-4; }
  html.m-js:not(.m-fallback) .m-lichtstrecke[data-anzahl="5"] .m-lichtstrecke__bild:nth-child(1) { animation-name: m-ls-5-1; }
  html.m-js:not(.m-fallback) .m-lichtstrecke[data-anzahl="5"] .m-lichtstrecke__bild:nth-child(2) { animation-name: m-ls-5-2; }
  html.m-js:not(.m-fallback) .m-lichtstrecke[data-anzahl="5"] .m-lichtstrecke__bild:nth-child(3) { animation-name: m-ls-5-3; }
  html.m-js:not(.m-fallback) .m-lichtstrecke[data-anzahl="5"] .m-lichtstrecke__bild:nth-child(4) { animation-name: m-ls-5-4; }
  html.m-js:not(.m-fallback) .m-lichtstrecke[data-anzahl="5"] .m-lichtstrecke__bild:nth-child(5) { animation-name: m-ls-5-5; }
  html.m-js:not(.m-fallback) .m-lichtstrecke[data-anzahl="6"] .m-lichtstrecke__bild:nth-child(1) { animation-name: m-ls-6-1; }
  html.m-js:not(.m-fallback) .m-lichtstrecke[data-anzahl="6"] .m-lichtstrecke__bild:nth-child(2) { animation-name: m-ls-6-2; }
  html.m-js:not(.m-fallback) .m-lichtstrecke[data-anzahl="6"] .m-lichtstrecke__bild:nth-child(3) { animation-name: m-ls-6-3; }
  html.m-js:not(.m-fallback) .m-lichtstrecke[data-anzahl="6"] .m-lichtstrecke__bild:nth-child(4) { animation-name: m-ls-6-4; }
  html.m-js:not(.m-fallback) .m-lichtstrecke[data-anzahl="6"] .m-lichtstrecke__bild:nth-child(5) { animation-name: m-ls-6-5; }
  html.m-js:not(.m-fallback) .m-lichtstrecke[data-anzahl="6"] .m-lichtstrecke__bild:nth-child(6) { animation-name: m-ls-6-6; }
}


/* --- Bildzeilen: eigene, SCHMALERE Kurven mit Lücke (erzeugt) ---
   Die Zeile erbt die Deckkraft ihres Bildes ohnehin (Kind-Element);
   diese Kurven multiplizieren sich dazu. Ohne sie stehen während
   jeder Überblendung zwei Texte halbtransparent übereinander —
   Bilder dürfen ineinander blenden, Text nicht. */
@keyframes m-lw-2-1{0%,25.0%{opacity:1}37.5%,100%{opacity:0}}
@keyframes m-lw-2-2{0%,62.5%{opacity:0}75.0%,100%{opacity:1}}
@keyframes m-lw-3-1{0%,16.67%{opacity:1}25.0%,100%{opacity:0}}
@keyframes m-lw-3-2{0%,41.67%{opacity:0}50.0%,50.0%{opacity:1}58.33%,100%{opacity:0}}
@keyframes m-lw-3-3{0%,75.0%{opacity:0}83.33%,100%{opacity:1}}
@keyframes m-lw-4-1{0%,12.5%{opacity:1}18.75%,100%{opacity:0}}
@keyframes m-lw-4-2{0%,31.25%{opacity:0}37.5%,37.5%{opacity:1}43.75%,100%{opacity:0}}
@keyframes m-lw-4-3{0%,56.25%{opacity:0}62.5%,62.5%{opacity:1}68.75%,100%{opacity:0}}
@keyframes m-lw-4-4{0%,81.25%{opacity:0}87.5%,100%{opacity:1}}
@keyframes m-lw-5-1{0%,10.0%{opacity:1}15.0%,100%{opacity:0}}
@keyframes m-lw-5-2{0%,25.0%{opacity:0}30.0%,30.0%{opacity:1}35.0%,100%{opacity:0}}
@keyframes m-lw-5-3{0%,45.0%{opacity:0}50.0%,50.0%{opacity:1}55.0%,100%{opacity:0}}
@keyframes m-lw-5-4{0%,65.0%{opacity:0}70.0%,70.0%{opacity:1}75.0%,100%{opacity:0}}
@keyframes m-lw-5-5{0%,85.0%{opacity:0}90.0%,100%{opacity:1}}
@keyframes m-lw-6-1{0%,8.33%{opacity:1}12.5%,100%{opacity:0}}
@keyframes m-lw-6-2{0%,20.83%{opacity:0}25.0%,25.0%{opacity:1}29.17%,100%{opacity:0}}
@keyframes m-lw-6-3{0%,37.5%{opacity:0}41.67%,41.67%{opacity:1}45.83%,100%{opacity:0}}
@keyframes m-lw-6-4{0%,54.17%{opacity:0}58.33%,58.33%{opacity:1}62.5%,100%{opacity:0}}
@keyframes m-lw-6-5{0%,70.83%{opacity:0}75.0%,75.0%{opacity:1}79.17%,100%{opacity:0}}
@keyframes m-lw-6-6{0%,87.5%{opacity:0}91.67%,100%{opacity:1}}

@supports (animation-timeline: view()) {
  html.m-js:not(.m-fallback) .m-lichtstrecke[data-anzahl="2"] .m-lichtstrecke__bild:nth-child(1) .m-lichtstrecke__wort { animation-name: m-lw-2-1; }
  html.m-js:not(.m-fallback) .m-lichtstrecke[data-anzahl="2"] .m-lichtstrecke__bild:nth-child(2) .m-lichtstrecke__wort { animation-name: m-lw-2-2; }
  html.m-js:not(.m-fallback) .m-lichtstrecke[data-anzahl="3"] .m-lichtstrecke__bild:nth-child(1) .m-lichtstrecke__wort { animation-name: m-lw-3-1; }
  html.m-js:not(.m-fallback) .m-lichtstrecke[data-anzahl="3"] .m-lichtstrecke__bild:nth-child(2) .m-lichtstrecke__wort { animation-name: m-lw-3-2; }
  html.m-js:not(.m-fallback) .m-lichtstrecke[data-anzahl="3"] .m-lichtstrecke__bild:nth-child(3) .m-lichtstrecke__wort { animation-name: m-lw-3-3; }
  html.m-js:not(.m-fallback) .m-lichtstrecke[data-anzahl="4"] .m-lichtstrecke__bild:nth-child(1) .m-lichtstrecke__wort { animation-name: m-lw-4-1; }
  html.m-js:not(.m-fallback) .m-lichtstrecke[data-anzahl="4"] .m-lichtstrecke__bild:nth-child(2) .m-lichtstrecke__wort { animation-name: m-lw-4-2; }
  html.m-js:not(.m-fallback) .m-lichtstrecke[data-anzahl="4"] .m-lichtstrecke__bild:nth-child(3) .m-lichtstrecke__wort { animation-name: m-lw-4-3; }
  html.m-js:not(.m-fallback) .m-lichtstrecke[data-anzahl="4"] .m-lichtstrecke__bild:nth-child(4) .m-lichtstrecke__wort { animation-name: m-lw-4-4; }
  html.m-js:not(.m-fallback) .m-lichtstrecke[data-anzahl="5"] .m-lichtstrecke__bild:nth-child(1) .m-lichtstrecke__wort { animation-name: m-lw-5-1; }
  html.m-js:not(.m-fallback) .m-lichtstrecke[data-anzahl="5"] .m-lichtstrecke__bild:nth-child(2) .m-lichtstrecke__wort { animation-name: m-lw-5-2; }
  html.m-js:not(.m-fallback) .m-lichtstrecke[data-anzahl="5"] .m-lichtstrecke__bild:nth-child(3) .m-lichtstrecke__wort { animation-name: m-lw-5-3; }
  html.m-js:not(.m-fallback) .m-lichtstrecke[data-anzahl="5"] .m-lichtstrecke__bild:nth-child(4) .m-lichtstrecke__wort { animation-name: m-lw-5-4; }
  html.m-js:not(.m-fallback) .m-lichtstrecke[data-anzahl="5"] .m-lichtstrecke__bild:nth-child(5) .m-lichtstrecke__wort { animation-name: m-lw-5-5; }
  html.m-js:not(.m-fallback) .m-lichtstrecke[data-anzahl="6"] .m-lichtstrecke__bild:nth-child(1) .m-lichtstrecke__wort { animation-name: m-lw-6-1; }
  html.m-js:not(.m-fallback) .m-lichtstrecke[data-anzahl="6"] .m-lichtstrecke__bild:nth-child(2) .m-lichtstrecke__wort { animation-name: m-lw-6-2; }
  html.m-js:not(.m-fallback) .m-lichtstrecke[data-anzahl="6"] .m-lichtstrecke__bild:nth-child(3) .m-lichtstrecke__wort { animation-name: m-lw-6-3; }
  html.m-js:not(.m-fallback) .m-lichtstrecke[data-anzahl="6"] .m-lichtstrecke__bild:nth-child(4) .m-lichtstrecke__wort { animation-name: m-lw-6-4; }
  html.m-js:not(.m-fallback) .m-lichtstrecke[data-anzahl="6"] .m-lichtstrecke__bild:nth-child(5) .m-lichtstrecke__wort { animation-name: m-lw-6-5; }
  html.m-js:not(.m-fallback) .m-lichtstrecke[data-anzahl="6"] .m-lichtstrecke__bild:nth-child(6) .m-lichtstrecke__wort { animation-name: m-lw-6-6; }
}

/* — Ersatzweg: gestufter Wechsel über [data-aktiv] —
   Erst alles auf 0, dann genau die aktive Ebene auf 1. Zwei Regeln
   statt einer Kreuztabelle. */
html.m-fallback .m-lichtstrecke__bild {
  transition: opacity 0.8s var(--ease-out);
  opacity: 0;
}

html.m-fallback .m-lichtstrecke[data-aktiv="0"] .m-lichtstrecke__bild:nth-child(1),
html.m-fallback .m-lichtstrecke[data-aktiv="1"] .m-lichtstrecke__bild:nth-child(2),
html.m-fallback .m-lichtstrecke[data-aktiv="2"] .m-lichtstrecke__bild:nth-child(3),
html.m-fallback .m-lichtstrecke[data-aktiv="3"] .m-lichtstrecke__bild:nth-child(4),
html.m-fallback .m-lichtstrecke[data-aktiv="4"] .m-lichtstrecke__bild:nth-child(5),
html.m-fallback .m-lichtstrecke[data-aktiv="5"] .m-lichtstrecke__bild:nth-child(6) { opacity: 1; }

/* Solange der Treiber noch keine Stufe gesetzt hat, steht das erste Bild. */
html.m-fallback .m-lichtstrecke:not([data-aktiv]) .m-lichtstrecke__bild:nth-child(1) { opacity: 1; }

/* Auch im Ersatzweg dürfen sich zwei Zeilen nie überlagern: die alte
   verschwindet schnell und sofort, die neue wartet, bis ihr Bild
   weitgehend steht. */
html.m-fallback .m-lichtstrecke[data-aktiv] .m-lichtstrecke__wort {
  opacity: 0;
  transition: opacity 0.25s var(--ease-out);
}
html.m-fallback .m-lichtstrecke[data-aktiv="0"] .m-lichtstrecke__bild:nth-child(1) .m-lichtstrecke__wort,
html.m-fallback .m-lichtstrecke[data-aktiv="1"] .m-lichtstrecke__bild:nth-child(2) .m-lichtstrecke__wort,
html.m-fallback .m-lichtstrecke[data-aktiv="2"] .m-lichtstrecke__bild:nth-child(3) .m-lichtstrecke__wort,
html.m-fallback .m-lichtstrecke[data-aktiv="3"] .m-lichtstrecke__bild:nth-child(4) .m-lichtstrecke__wort,
html.m-fallback .m-lichtstrecke[data-aktiv="4"] .m-lichtstrecke__bild:nth-child(5) .m-lichtstrecke__wort,
html.m-fallback .m-lichtstrecke[data-aktiv="5"] .m-lichtstrecke__bild:nth-child(6) .m-lichtstrecke__wort {
  opacity: 1;
  transition-delay: 0.5s;
}


/* ==========================================================================
   MODUL E · Zähl-Animation
   --------------------------------------------------------------------------
   Die fertige Zahl steht im HTML. motion.js liest sie als Ziel, zählt von
   0 hoch und schreibt sie am Ende exakt so zurück, wie sie dastand
   (deutsche Schreibweise, Komma inbegriffen). Ohne JS, mit Reduced Motion
   oder bei jedem Fehler bleibt schlicht die richtige Zahl stehen.
   tabular-nums + reservierte Breite: die Zeile darf beim Zählen nicht
   zucken (CLS).
   ========================================================================== */

.m-zahl {
  font-variant-numeric: tabular-nums;
  display: inline-block;
  text-align: inherit;
}


/* ==========================================================================
   REDUCED MOTION — Motion ist Zugabe, nie Voraussetzung
   --------------------------------------------------------------------------
   Zweimal notiert: einmal für die echte Systemeinstellung, einmal für den
   Demo-Schalter html.m-reduce auf der Modulseite. Der Schalter ist nur ein
   Prüfwerkzeug und wandert nicht in die Live-Seiten.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html.m-js .m-kenburns img,
  html.m-js .m-kenburns__lage,
  html.m-js .m-parallax__ebene { animation: none !important; transform: none !important; }

  html.m-js .m-reveal { transition: none !important; }
  html.m-js .m-reveal:not(.ist-da) { opacity: 1 !important; transform: none !important; }

  .m-lichtstrecke { height: auto !important; }
  .m-lichtstrecke__buehne {
    position: static !important;
    height: auto !important;
    display: grid;
    gap: 1px;
  }
  .m-lichtstrecke__bild {
    position: static !important;
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
  }
  .m-lichtstrecke__bild picture { height: auto; }
  .m-lichtstrecke__bild img { aspect-ratio: 3 / 2; height: auto; }
  .m-lichtstrecke__wort {
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
    position: static !important;
    background: var(--graphit, #1A1A17);
    padding: 1.25rem clamp(1.5rem, 5vw, 4rem) 1.75rem;
    font-size: 1.35rem;
  }
}

html.m-reduce.m-js .m-kenburns img,
html.m-reduce.m-js .m-kenburns__lage,
html.m-reduce.m-js .m-parallax__ebene { animation: none !important; transform: none !important; }

html.m-reduce.m-js .m-reveal { transition: none !important; }
html.m-reduce.m-js .m-reveal:not(.ist-da) { opacity: 1 !important; transform: none !important; }

html.m-reduce .m-lichtstrecke { height: auto !important; }
html.m-reduce .m-lichtstrecke__buehne {
  position: static !important;
  height: auto !important;
  display: grid;
  gap: 1px;
}
html.m-reduce .m-lichtstrecke__bild {
  position: static !important;
  opacity: 1 !important;
  animation: none !important;
  transition: none !important;
}
html.m-reduce .m-lichtstrecke__bild picture { height: auto; }
html.m-reduce .m-lichtstrecke__bild img { aspect-ratio: 3 / 2; height: auto; }
html.m-reduce .m-lichtstrecke__wort {
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
  position: static !important;
  background: var(--graphit, #1A1A17);
  padding: 1.25rem clamp(1.5rem, 5vw, 4rem) 1.75rem;
  font-size: 1.35rem;
}

/* ==========================================================================
   Bühnen-Wort — geteiltes Idiom: Kicker + Titel AUF einem Foto.
   Verlauf so bemessen, dass weisser Text bis 55 % Höhe mindestens α 0.68
   hinter sich hat — hält ≥ 6:1 selbst gegen ein rein weisses Foto
   (analytisch belegt, 02.08.). Nutzer: Aktivitäten-Karten und
   Startseiten-Vorschau. Wer den Verlauf ändert, rechnet nach.
   ========================================================================== */
.m-buehnenwort {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 4.5rem 1.35rem 1.1rem;
  background: linear-gradient(to top, #1A1A17F2, #1A1A17AD 55%, #1A1A1700);
  color: #FCFBF8;
}