/* Bewegung beim Scrollen. Nur auf Seiten eingebunden, die es ausprobieren (MOTION in build.py). */
@media (prefers-reduced-motion: no-preference) {
  /* Weicher Seitenwechsel innerhalb der Seite (Chrome, Safari 18 und neuer; sonst normaler Wechsel) */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation-duration: .18s; }
  ::view-transition-new(root) { animation-duration: .3s; }

  /* Text und Zahlen steigen von unten auf */
  .js-motion .rv-up { opacity: 0; transform: translateY(30px); }
  .js-motion .rv-up.in { opacity: 1; transform: none; transition: opacity .55s var(--ease), transform .6s var(--ease); }

  /* Bilder bauen sich auf: ein Vorhang zieht von oben nach unten auf */
  .js-motion .rv-fig { clip-path: inset(-6px -6px 100% -6px); }  /* -6px: der 1-px-Rahmen der Bilder bleibt sichtbar */
  .js-motion .rv-fig.in { clip-path: inset(-6px -6px -6px -6px); transition: clip-path .7s cubic-bezier(.4, 0, .2, 1); }
  .js-motion .rv-fig figcaption { opacity: 0; }
  .js-motion .rv-fig.in figcaption { opacity: 1; transition: opacity .5s ease .35s; }

  /* Workshop-Schritte: der aktuelle Schritt ist kräftig, die übrigen ruhiger */
  .js-motion .steps .step .step-no .n { transition: opacity .4s var(--ease), color .4s var(--ease); }
  .js-motion .steps .step:not(.is-active) .step-no .n { opacity: .38; }
  .js-motion .steps .step.is-active .step-no .n { color: var(--ink); }

  /* Diagramme: Balken wachsen, Linien zeichnen sich in einem Zug von links nach rechts, Beschriftungen kommen danach */
  .js-motion .gantt.g-wait .g-bar { animation: none; transform: scaleX(0); transform-origin: left; }
  .js-motion .gantt.g-wait.in .g-bar { transform: scaleX(1); transition: transform 1.1s var(--ease); }
  .js-motion .gantt.g-wait.in .g-rows li:nth-child(2) .g-bar { transition-delay: .1s; }
  .js-motion .gantt.g-wait.in .g-rows li:nth-child(3) .g-bar { transition-delay: .2s; }
  .js-motion .gantt.g-wait.in .g-rows li:nth-child(4) .g-bar { transition-delay: .3s; }
  .js-motion .gantt.g-wait.in .g-rows li:nth-child(5) .g-bar { transition-delay: .4s; }
  .js-motion .gantt.g-wait.in .g-rows li:nth-child(6) .g-bar { transition-delay: .5s; }
  .js-motion svg.pc.draw .lb, .js-motion svg.pc.draw .ld { opacity: 0; }
  .js-motion svg.pc.draw.in .lb { opacity: 1; transition: opacity .7s ease 1.6s; }
  .js-motion svg.pc.draw.in .ld { opacity: .7; transition: opacity .7s ease 1.6s; }
}

@media print { .js-motion .rv { opacity: 1 !important; transform: none !important; clip-path: none !important; } .js-motion .rv img { transform: none !important; } }