/* ---------- Startseite: fließende Übergänge beim Scrollen (aus Entwurf 5b/6) ----------
   Nur auf der Startseite eingebunden (index.html), nicht auf den Rechtsseiten.
   Nur wenn der Browser Scroll-Timelines kann (@supports) und „Bewegung reduzieren“ aus ist; sonst statische Seite.
   Regeln wie in 5a: Alles, was ganz im Bild ist, ist voll sichtbar (Deckkraft 1 ab 60 % des Hereinscrollens);
   Ausnahme ist nur der Einstiegstext, der nach den ersten Scrollschritten nach oben verblasst. Bewegt werden Deckkraft, Versatz
   (translate) und Größe (scale), Größe nur innerhalb beschnittener Bildrahmen: kein Querscrollen.
   Fokus im Element setzt die Bewegung aus. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) and (animation-range: entry 0% exit 100%) {

    /* 1 · Der Inhalt schiebt sich mit runden Ecken über das Einstiegsbild. Das Bild bleibt zurück und dunkelt ab. */
    main {
      position: relative; z-index: 1;
      margin-top: -2rem;
      background: var(--schwarz);
      border-radius: 28px 28px 0 0;
      box-shadow: 0 -1px 0 var(--linie);
    }
    .einstieg-bild {
      animation: einstieg-zurueck linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
    /* Der Inhalt überdeckt den Einstieg unten um 2rem. Damit der Schein des Glanz-Knopfs nicht unter dieser Kante
       verschwindet, bleiben unter den Knöpfen mindestens 2rem + 34 px (34 px = Unschärfe 26 px + Ausdehnung 8 px des
       Scheins). Wirkt nur bei Fensterhöhen unter 825 px; darüber ist der Abstand wie in Entwurf 5b. */
    .einstieg-text { padding-bottom: max(clamp(2.5rem, 8vh, 5.5rem), calc(2rem + 34px)); }
    .einstieg::after {
      content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
      background: var(--schwarz); opacity: 0;
      animation: abdunkeln linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
    /* Einstiegstext verblasst gestaffelt (wie bei apple.com): erst Text und Überschrift, die Knöpfe erst kurz vor dem
       oberen Rand. Startpunkte mit Abstand hinter dem Stand beim Laden, damit beim Laden alles voll sichtbar ist.
       Gemessen an 15 Fenstergrößen von 320×568 bis 1080×1920 (Entwurf 6 mit Mindestabstand unter den Knöpfen,
       tools/messung_v6.py): Überschrift höchstens 63 %, Text 42 %, Knöpfe 20 %.
       Der Glanz-Knopf hängt daran: Sein Script zählt nur die unteren 75 % des Fensters, passend zum Startpunkt der
       Knöpfe (cover 75 %). Wer hier ändert, prüft beides. */
    .einstieg-text h1 {
      animation: einstieg-text-weg linear both;
      animation-timeline: view();
      animation-range: cover 72% cover 100%;
    }
    .einstieg-text .lead {
      animation: einstieg-text-weg linear both;
      animation-timeline: view();
      animation-range: cover 55% cover 95%;
    }
    .einstieg-text .knoepfe {
      animation: einstieg-text-weg linear both;
      animation-timeline: view();
      animation-range: cover 75% cover 100%;
    }

    /* 2 · Überschriften und Text. Deckkraft nur an einzelnen Elementen, nie an Behältern: sonst wäre ein Kind schon ganz
         im Bild, sein Behälter aber erst halb hereingescrollt und damit halb transparent. */
    main :is(h2, .verleih-text > *, .playarc p, .ueber p, .kontakt-satz, .mail-gross, .kontakt-unten :is(h3, li, p), .partner-liste li) {
      animation: hoch linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
    .playarc h2 {
      animation: hoch linear both, heranwachsen linear both;
      animation-timeline: view(), view();
      animation-range: entry 0% entry 100%, entry 0% cover 45%;
      transform-origin: 0 60%;
    }

    /* 3 · Leistungen: Karten steigen gestaffelt auf (nur Versatz), ihre Teile blenden einzeln ein; Fotos zoomen im Rahmen zurück */
    .leistungen article {
      animation: aufsteigen linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
    .leistungen article:nth-child(2) { animation-range: entry 12% cover 45%; }
    .leistungen article:nth-child(3) { animation-range: entry 24% cover 50%; }
    .leistungen article > * {
      animation: nur-einblenden linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
    .leistungen .foto {
      animation: zoom-zurueck linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 60%;
    }

    /* 4 · Verleih und PlayArc: Die abgerundeten Flächen steigen wie die Leistungskarten auf (nur Versatz, keine Deckkraft);
         ihre Texte blenden über Abschnitt 2 ein. Feinschliff v3: Die frühere Bewegung Karte → randlos → Karte (clip-path)
         entfällt, weil die Flächen jetzt dauerhaft im Raster stehen. */
    .flaeche {
      animation: aufsteigen linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 35%;
    }

    /* 5 · Tiefe: Verleih- und Über-uns-Foto bewegen sich langsamer als die Seite (vergrößert, im Rahmen beschnitten) */
    .verleih-bild { overflow: hidden; overflow: clip; }
    :is(.verleih-bild, .ueber .bild) .foto {
      scale: 1.16;
      animation: tiefe linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    /* Fokus im Element: keine Bewegung, sofort voll sichtbar.
       !important, weil :is() die Spezifität seines stärksten Arguments übernimmt und sonst die Animationsregeln gewinnen. */
    :is(main, header) :focus-within { animation: none !important; }
  }
}
@keyframes einstieg-zurueck { to { translate: 0 35%; scale: 1.06; } }
@keyframes abdunkeln { to { opacity: 0.65; } }
@keyframes einstieg-text-weg { to { opacity: 0; translate: 0 -48px; } }
@keyframes hoch { 0% { opacity: 0; translate: 0 48px; } 60% { opacity: 1; } 100% { opacity: 1; translate: 0 0; } }
@keyframes aufsteigen { from { translate: 0 80px; } to { translate: 0 0; } }
@keyframes nur-einblenden { 0% { opacity: 0; } 60%, 100% { opacity: 1; } }
@keyframes heranwachsen { from { scale: 0.82; } to { scale: 1; } }
@keyframes zoom-zurueck { from { scale: 1.18; } to { scale: 1; } }
@keyframes tiefe { from { translate: 0 -7%; } to { translate: 0 7%; } }