@media (prefers-reduced-motion: no-preference) {
  html.js .auf {
    opacity: 0;
    transform: translateY(40px) scale(0.985);
    transition: opacity 0.9s var(--kurve), transform 1.2s var(--kurve);
    transition-delay: var(--verzoegerung, 0ms);
  }

  html.js .auf.ist-sichtbar {
    opacity: 1;
    transform: none;
  }

  html.js .glanz {
    background-image: linear-gradient(100deg, #f5f5f7 0%, #f5f5f7 42%, #2c2c31 58%, #2c2c31 100%);
    background-size: 260% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: background-position 1.6s var(--kurve);
  }

  html.js .glanz.ist-sichtbar {
    background-position: 0% 0;
  }

  /* Bilder: aufziehen wie ein Vorhang, dann leicht gegenlaufen */
  html.js .bild {
    clip-path: inset(12% 6% 12% 6% round var(--radius));
    transition: clip-path 1.4s var(--kurve);
  }

  html.js .bild.ist-sichtbar {
    clip-path: inset(0 0 0 0 round var(--radius));
  }

  html.js .bild img {
    transform: translate3d(0, var(--parallaxe, 0px), 0) scale(1.16);
    transition: transform 1.6s var(--kurve);
  }

  html.js .bild.ist-sichtbar img {
    transform: translate3d(0, var(--parallaxe, 0px), 0) scale(1.08);
    transition: none;
  }

  html.js .auf.ist-fertig,
  html.js .glanz.ist-fertig {
    transition: none !important;
  }

  html.js .auf.ist-fertig {
    opacity: 1 !important;
    transform: none !important;
  }

  html.js .glanz.ist-fertig {
    background-position: 0% 0 !important;
  }

  /* Startbild: Zeichen steigen nacheinander aus der Grundlinie */
  html.js .held__titel .zeichen {
    transform: translate3d(0, 0.9em, 0) rotate(4deg);
    opacity: 0;
    filter: blur(8px);
    transition: transform 1.1s var(--kurve), opacity 0.8s ease, filter 0.9s ease;
    transition-delay: calc(var(--n) * 34ms + 120ms);
  }

  html.js.ist-geladen .held__titel .zeichen {
    transform: none;
    opacity: 1;
    filter: none;
  }

  html.js .held__etikett,
  html.js .held__lead,
  html.js .held .held__knoepfe,
  html.js .held__fuss,
  html.js .held__hinweis {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity 0.9s ease, transform 1.1s var(--kurve);
  }

  html.js.ist-geladen .held__etikett { transition-delay: 0.1s; }
  html.js.ist-geladen .held__lead { transition-delay: 0.75s; }
  html.js.ist-geladen .held .held__knoepfe { transition-delay: 0.9s; }
  html.js.ist-geladen .held__fuss { transition-delay: 1.1s; }
  html.js.ist-geladen .held__hinweis { transition-delay: 1.6s; }

  html.js.ist-geladen .held__etikett,
  html.js.ist-geladen .held__lead,
  html.js.ist-geladen .held .held__knoepfe,
  html.js.ist-geladen .held__fuss,
  html.js.ist-geladen .held__hinweis {
    opacity: 1;
    transform: none;
  }

  .held__hinweis-linie {
    animation: hinweis 2.8s ease-in-out infinite;
    transform-origin: 100% 50%;
  }

  @keyframes hinweis {
    0%, 100% { transform: scaleX(0.4); opacity: 0.4; }
    50% { transform: scaleX(1); opacity: 1; }
  }

  .lader__teilung line {
    stroke: rgba(255, 255, 255, 0.25);
    stroke-width: 0.6;
    opacity: calc(var(--fortschritt) * 60 - var(--i) + 1);
  }

  .stimme blockquote .wort {
    transition: opacity 0.25s linear;
  }

  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root) {
    animation: 0.3s ease both seite-raus;
  }

  ::view-transition-new(root) {
    animation: 0.5s var(--kurve) both seite-rein;
  }

  @keyframes seite-raus {
    to { opacity: 0; }
  }

  @keyframes seite-rein {
    from { opacity: 0; transform: translateY(12px); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .lader__teilung line {
    stroke: rgba(255, 255, 255, 0.25);
    stroke-width: 0.6;
  }
}