/* ============================================================
   Bewegung — gemeinsam fuer alle Seiten (2026-08-11)

   Grundregel: Inhalt ist standardmaessig sichtbar. Die Einblendung
   wird erst zugeschaltet, wenn das Motion-Skript laeuft. Faellt
   JavaScript aus oder rendert ein Crawler ohne Skript, steht die
   Seite trotzdem vollstaendig da — sie animiert dann nur nicht.

   Enthaelt:
   1. Scroll-Fortschrittslinie (ersetzt die dicke Scrollbar)
   2. Schlanke Scrollbar
   3. Einblendungen .u-reveal / .u-stagger
   4. Seitliches Hereinfahren .u-slide-in
   ============================================================ */

/* -------------------- 1 · Scroll-Fortschritt -------------------- */
.scroll-progress {
  position: fixed;
  z-index: 200;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--mint, #5dfdbd);
  pointer-events: none;
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: 0 50%;
  will-change: transform;
}

/* Wo verfuegbar laeuft die Linie ohne JavaScript direkt am Scroll-Offset. */
@supports (animation-timeline: scroll()) {
  .scroll-progress {
    animation: scroll-progress-grow linear both;
    animation-timeline: scroll(root block);
    transform: scaleX(0);
  }
}

@keyframes scroll-progress-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* -------------------- 2 · Schlanke Scrollbar -------------------- */
html {
  scrollbar-color: rgba(11, 37, 69, .28) transparent;
  scrollbar-width: thin;
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: rgba(11, 37, 69, .26);
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(11, 37, 69, .44);
  background-clip: content-box;
}

/* -------------------- 3 · Einblendungen --------------------
   Kurz genug, damit Inhalt beim Scrollen sofort lesbar bleibt. */
@keyframes u-fade-up-22 {
  from { opacity: 0; translate: 0 22px; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes u-fade-up-26 {
  from { opacity: 0; translate: 0 26px; }
  to   { opacity: 1; translate: 0 0; }
}

.js-motion .u-reveal { opacity: 0; }
.js-motion .u-reveal.is-in {
  animation: u-fade-up-22 650ms cubic-bezier(.16, 1, .3, 1) both;
}

.js-motion .u-stagger > * { opacity: 0; }
.js-motion .u-stagger.is-in > * {
  animation: u-fade-up-26 600ms cubic-bezier(.16, 1, .3, 1) both;
}

.js-motion .u-stagger.is-in > *:nth-child(1) { animation-delay: 0ms; }
.js-motion .u-stagger.is-in > *:nth-child(2) { animation-delay: 90ms; }
.js-motion .u-stagger.is-in > *:nth-child(3) { animation-delay: 180ms; }
.js-motion .u-stagger.is-in > *:nth-child(4) { animation-delay: 270ms; }
.js-motion .u-stagger.is-in > *:nth-child(5) { animation-delay: 360ms; }
.js-motion .u-stagger.is-in > *:nth-child(6) { animation-delay: 450ms; }

/* -------------------- 4 · Seitliches Herein- und Hinausfahren --------------------
   Die Karten liegen zu Beginn ausserhalb des Satzspiegels, fahren beim
   Herunterscrollen herein, stehen in der Sektion ruhig an ihrem Platz und
   gehen beim Weiterscrollen wieder auseinander. Der Fortschritt haengt am
   Scroll-Offset, nicht an einer Uhr — die Bewegung folgt dem Rad bzw. dem
   Finger und laeuft rueckwaerts, wenn man zurueckscrollt.

   Wichtig gegen Ueberlappung: jede Karte faehrt zur naechstgelegenen
   Seitenkante hinaus, nie quer ueber eine Nachbarkarte. Deshalb steuert
   nicht die Reihenfolge die Richtung, sondern die Spalte:
   linke Spalte -> nach links, rechte Spalte -> nach rechts.

   Nebeneinander liegende Karten teilen sich ueber `.u-slide-group` eine
   gemeinsame Zeitleiste. Ohne sie haette jede Karte ihre eigene und die
   obere Karte begaenne bereits hinauszufahren, waehrend die untere noch
   hereinkommt — genau das wirkte bisher unruhig.

   `translate` statt `transform`, damit Hover-Lifts unberuehrt bleiben. */
.u-slide-host { overflow-x: clip; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Einzelne Karte: eigene Zeitleiste, gemessen an ihrem eigenen Durchlauf. */
    .u-slide-in {
      animation: u-slide-from-left linear both;
      animation-timeline: view();
      animation-range: entry 6% exit 94%;
    }
    .u-slide-in-right { animation-name: u-slide-from-right; }

    /* Mehrspaltige Gruppe: eine Zeitleiste fuer alle Karten, gemessen am
       Durchlauf des Rasters. Alle rasten gemeinsam ein und loesen sich
       gemeinsam wieder. Unterhalb von 980px stapeln sich die Karten
       untereinander — dort ist die Einzel-Zeitleiste die richtige. */
    @media (min-width: 981px) {
      .u-slide-group { view-timeline: --u-slide-group block; }
      .u-slide-group > .u-slide-in {
        animation-timeline: --u-slide-group;
        animation-range: cover 0% cover 100%;
      }
    }
  }
}

/* 0–30 % hereinfahren · 30–76 % an Ort und Stelle stehen · 76–100 % hinausfahren */
@keyframes u-slide-from-left {
  0%   { opacity: 0; translate: -46% 0; }
  30%  { opacity: 1; translate: 0 0; }
  76%  { opacity: 1; translate: 0 0; }
  100% { opacity: 0; translate: -46% 0; }
}
@keyframes u-slide-from-right {
  0%   { opacity: 0; translate: 46% 0; }
  30%  { opacity: 1; translate: 0 0; }
  76%  { opacity: 1; translate: 0 0; }
  100% { opacity: 0; translate: 46% 0; }
}

/* -------------------- Reduzierte Bewegung -------------------- */
@media (prefers-reduced-motion: reduce) {
  .js-motion .u-reveal,
  .js-motion .u-reveal.is-in,
  .js-motion .u-stagger > *,
  .js-motion .u-stagger.is-in > *,
  .u-slide-in {
    opacity: 1 !important;
    translate: none !important;
    animation: none !important;
    transition: none !important;
  }
}