/* ════════════════════════════════════════════════════════════════════
   Scroll — was passiert, während man die Seite hinunterfährt.
   Gehört zu assets/js/bewegung.js und zu nichts sonst.

   Grundsatz dieser Datei: JEDE Klasse hier wird ausschließlich von
   bewegung.js gesetzt, und bewegung.js beendet sich sofort, wenn
   prefers-reduced-motion gesetzt ist. Ohne JavaScript entsteht keine
   einzige dieser Klassen — die Seite steht dann vollständig sichtbar da.
   Nichts hier verbirgt Inhalt, den nicht ein laufendes Skript wieder
   hervorholt.

   Das vorhandene .einblenden (bau.css) und .auf/.da (grund.css) bleiben
   unberührt. Hier kommt nur dazu, was es dort noch nicht gibt.

   Bewegt werden ausschließlich opacity, transform und translate —
   translate ist die eigenständige Transform-Eigenschaft (Transforms
   Level 2). Sie wird bewusst statt transform benutzt: .fil-foto img und
   .buehne-bild .foto img tragen schon ein transform:scale() samt eigenem
   Übergang für den Hover-Zoom. Wer dort transform überschreibt, nimmt den
   Zoom weg und bekommt den 1,2-s-Übergang in den laufenden Versatz —
   also Ruckeln. translate komponiert daneben und hat keinen Übergang.
   ════════════════════════════════════════════════════════════════════ */


/* ── (1) Text, der aufzieht ──────────────────────────────────────────
   bewegung.js zerlegt eine Überschrift im Browser in Wörter und hängt
   jedes in ein <span class="wortteil">. Der Text im HTML bleibt dabei
   Zeichen für Zeichen derselbe — Suchmaschinen und Screenreader lesen
   unverändert weiter, nur die Verpackung ist neu. Bei
   prefers-reduced-motion wird gar nicht erst zerlegt.
   ------------------------------------------------------------------- */
.wortteil{
  display:inline-block;
  /* Ein langes Wort muss weiter umbrechen dürfen: ein inline-block ist
     sonst so breit wie sein Inhalt und schiebt bei 375 px die Seite auf. */
  max-width:100%;
  overflow-wrap:break-word;
  opacity:0;
  transform:translate3d(0,.3em,0);
  transition:opacity .62s var(--weich), transform .62s var(--weich);
  transition-delay:var(--verzug,0ms);
}
.wortzug-auf .wortteil{ opacity:1; transform:none }


/* ── (2) Gestaffeltes Erscheinen ─────────────────────────────────────
   Die Verzögerung steckt in der vorhandenen Variablen --verzug, die
   bewegung.js auf die Kinder der Raster setzt. Zwei Fälle:

   a) Das Kind trägt schon .einblenden (die Regel liegt in bau.css). Dann
      wird nur die Verzögerung gesetzt. bau.css staffelt bis zum fünften
      Kind über :nth-child; diese Regel hat dieselbe Spezifität, steht
      aber später in der Ladereihenfolge (teil-* nach bau) und gewinnt
      deshalb ohne !important.
   b) Das Kind hat noch gar keine Einblendung. Dann hängt bewegung.js
      .stufenkind an und beobachtet es selbst.
   ------------------------------------------------------------------- */
.kacheln > .einblenden,
.filialen > .einblenden,
.termin-wahl > .einblenden,
.fil-reihe > .einblenden{ transition-delay:var(--verzug,0ms) }

.stufenkind{
  opacity:0;
  transform:translate3d(0,16px,0);
  transition:opacity .66s var(--weich), transform .66s var(--weich);
  transition-delay:var(--verzug,0ms);
}
.stufenkind.stufe-auf{ opacity:1; transform:none }


/* ── (3) Ruhiger Tiefenversatz ───────────────────────────────────────
   bewegung.js rechnet --tiefe in requestAnimationFrame und nur für
   Elemente, die im Sichtfenster stehen. Höchstwert ±20 px, also 40 px
   über die ganze Strecke.

   .leistung-buehne steht hier bewusst NICHT: ihr Grund (.leistung-grund)
   hat seinen Versatz schon in seiten.css, über eine reine CSS-Zeitachse
   (animation-timeline:scroll). Zweimal versetzt wäre doppelt so weit.
   Und die Bühne selbst trägt den Titel — Text wird nicht verschoben.
   ------------------------------------------------------------------- */
.tiefenbild{ translate:0 var(--tiefe,0px) }
/* Die eigene Ebene nur, solange das Bild wirklich im Blick ist. */
.tiefenbild.tiefe-aktiv{ will-change:translate }


/* ── (5) Zahlen, die hochlaufen ──────────────────────────────────────
   Nur während des Hochlaufens: Ziffern gleicher Laufweite, damit die
   Zahl beim Zählen nicht zappelt. Die richtige Zahl steht im HTML;
   bewegung.js ersetzt sie für höchstens 1,2 s und setzt sie danach
   zeichengenau zurück.
   ------------------------------------------------------------------- */
.zaehlwerk{ font-variant-numeric:tabular-nums }


/* ── Auf dem Telefon sparsamer ───────────────────────────────────────
   Kein Tiefenversatz (kleines Bild, viel Scrollweg, wenig Wirkung,
   dafür Rechenzeit auf dem schwächeren Gerät) und ein kürzerer Weg für
   die Wörter.
   ------------------------------------------------------------------- */
@media (max-width:767px){
  .tiefenbild{ translate:none }
  .tiefenbild.tiefe-aktiv{ will-change:auto }
  .wortteil{ transform:translate3d(0,.2em,0); transition-duration:.46s }
  .stufenkind{ transform:translate3d(0,11px,0) }
}


/* ── Keine Bewegung heißt aus, nicht gedämpft ────────────────────────
   Steht bewusst als letzter Block der Datei: so hebt er auch die
   Telefonregeln darüber auf. bewegung.js setzt unter dieser Abfrage
   ohnehin keine dieser Klassen — das hier ist das zweite Netz.
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .wortteil,
  .wortzug-auf .wortteil{
    opacity:1; transform:none; transition:none; transition-delay:0ms;
  }
  .kacheln > .einblenden,
  .filialen > .einblenden,
  .termin-wahl > .einblenden,
  .fil-reihe > .einblenden{ transition-delay:0ms }
  .stufenkind,
  .stufenkind.stufe-auf{
    opacity:1; transform:none; transition:none; transition-delay:0ms;
  }
  .tiefenbild,
  .tiefenbild.tiefe-aktiv{ translate:none; will-change:auto }
  .zaehlwerk{ font-variant-numeric:normal }
}