/* =====================================================
   BEWEGUNG (12.11.2026) – dezent, an den Bildlauf gekoppelt
   =====================================================
   Liegt NACH design-2026.css. Wer zurueck will, nimmt diese eine Datei aus header.php.

   Warum es diesmal keine weissen Flaechen gibt (Grund fuer das Abschalten am 19.10.2026):
   - Nichts wird per JavaScript versteckt. Der Ruhezustand im CSS ist IMMER "sichtbar";
     die Bewegung ist eine CSS-Animation, die am Bildlauf haengt (animation-timeline: view()).
   - Was beim Laden schon im Bild steht, ist sofort fertig da.
   - Browser ohne diese Technik (aeltere Safari/Firefox) zeigen die Seite einfach ruhig.
   - "Bewegung reduzieren" im Betriebssystem schaltet alles hier ab.
   Nur opacity/translate/scale/clip-path - das rechnet die Grafikkarte, nichts ruckelt am Layout.
   ===================================================== */

/* ---------- Ablauf in 3 Schritten: Grundgeruest (gilt immer, auch ohne Bewegung) ---------- */
.ablauf-schritte { position: relative; display: grid; gap: 16px; padding-left: 34px; }
.ablauf-schritte::before,
.ablauf-schritte::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 34px;
  bottom: 34px;
  width: 2px;
  border-radius: 2px;
  background: var(--edge-strong);
}
.ablauf-schritte::after { background: var(--orange); transform-origin: 50% 0; }
.schritt { position: relative; }
.schritt::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: -32px;
  top: 27px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px var(--surface);
}

/* ---------- Bilder: Rahmen fuer den sanften Zoom ---------- */
.bild-kachel picture, .fotoband picture { display: block; overflow: hidden; }
.bk-text strong::after { display: inline-block; white-space: pre; }

@media screen and (prefers-reduced-motion: no-preference) {

  /* ---------- Drueberfahren: Foto zoomt leicht, Pfeil rueckt ein Stueck ---------- */
  @media (hover: hover) {
    .bild-kachel img, .fotoband img { transition: scale .5s cubic-bezier(.2, .7, .3, 1); }
    .bild-kachel:hover img, .fotoband figure:hover img { scale: 1.045; }
    .bk-text strong::after { transition: translate .2s ease; }
    .bild-kachel:hover .bk-text strong::after { translate: 4px 0; }
  }

  @supports ((animation-timeline: view()) and (animation-range: entry)) {

    /* ---------- Einblenden beim Scrollen ---------- */
    @keyframes bw-rein { from { opacity: 0; translate: 0 22px; } }

    .card, .bild-kachel, .bewertung, .trust-item, .faq-item, .video-card, .region-grid a {
      animation: bw-rein auto ease-out backwards;
      animation-timeline: view();
      animation-range: entry 0% cover 18%;
    }
    /* Nebeneinander stehende Karten kommen leicht versetzt an */
    .bild-kachel:nth-child(2), .bewertung:nth-child(2), .grid-3 > .card:nth-child(3n+2), .grid-2 > .card:nth-child(2n) { animation-range: entry 0% cover 23%; }
    .bild-kachel:nth-child(3), .bewertung:nth-child(3), .grid-3 > .card:nth-child(3n) { animation-range: entry 0% cover 28%; }
    .bild-kachel:nth-child(4) { animation-range: entry 0% cover 33%; }

    /* Fotoband: nur am grossen Bildschirm (am Handy ist es eine Wischreihe) */
    @media (min-width: 901px) {
      .fotoband figure {
        animation: bw-rein auto ease-out backwards;
        animation-timeline: view();
        animation-range: entry 0% cover 18%;
      }
      .fotoband figure:nth-child(2) { animation-range: entry 0% cover 21%; }
      .fotoband figure:nth-child(3) { animation-range: entry 0% cover 24%; }
      .fotoband figure:nth-child(4) { animation-range: entry 0% cover 27%; }
      .fotoband figure:nth-child(5) { animation-range: entry 0% cover 30%; }
    }

    /* ---------- Bewertungen: Sterne fuellen sich von links ---------- */
    @keyframes bw-sterne { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
    .bewertung .bw-sterne {
      width: fit-content;
      animation: bw-sterne auto linear backwards;
      animation-timeline: view();
      animation-range: entry 100% cover 34%;
    }

    /* ---------- Ablauf: Linie zeichnet sich, 1-2-3 leuchten nacheinander auf ---------- */
    @keyframes ablauf-linie { from { scale: 1 0; } }
    @keyframes ablauf-punkt { from { background-color: var(--edge-strong); scale: .6; } }
    @keyframes ablauf-karte { from { opacity: .35; translate: 14px 0; } }

    .ablauf-schritte { view-timeline: --ablauf block; }
    .ablauf-schritte::after {
      animation: ablauf-linie auto linear backwards;
      animation-timeline: --ablauf;
      animation-range: cover 14% cover 46%;
    }
    .schritt::before,
    .ablauf-schritte .schritt > .card {
      animation: ablauf-punkt auto ease-out backwards;
      animation-timeline: --ablauf;
      animation-range: cover 11% cover 18%;
    }
    .ablauf-schritte .schritt > .card { animation-name: ablauf-karte; }
    .schritt:nth-child(2)::before, .ablauf-schritte .schritt:nth-child(2) > .card { animation-range: cover 28% cover 35%; }
    .schritt:nth-child(3)::before, .ablauf-schritte .schritt:nth-child(3) > .card { animation-range: cover 43% cover 50%; }
  }
}