.reveal {
  opacity: 0;
  transform: translateY(1.75rem);
  
  filter: blur(5px);
  transition: opacity var(--t-auftritt) var(--ease-out),
    transform var(--t-auftritt) var(--ease-out),
    filter var(--t-auftritt) var(--ease-out);
  transition-delay: var(--reveal-verzug, 0ms);
  will-change: transform, opacity;
}

.reveal.ist-sichtbar {
  opacity: 1;
  transform: none;
  filter: none;
  will-change: auto;
}

.reveal--bild {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(0 0 100% 0 round var(--r-schale));
  transition: clip-path 900ms var(--ease-weich);
  transition-delay: var(--reveal-verzug, 0ms);
}

.reveal--bild.ist-sichtbar {
  clip-path: inset(0 0 0 0 round var(--r-schale));
}

.reveal--bild img {
  transform: scale(1.07);
  transition: transform 1300ms var(--ease-weich);
  transition-delay: var(--reveal-verzug, 0ms);
}

.reveal--bild.ist-sichtbar img {
  transform: scale(1);
}

@keyframes zeile-hoch {
  from {
    transform: translateY(102%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes weich-hoch {
  from {
    transform: translateY(1.25rem);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes hintergrund-zurueck {
  from {
    transform: scale(1.08);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.hero .zeile > span {
  animation: zeile-hoch 860ms var(--ease-out) both;
  animation-delay: calc(120ms + var(--i, 0) * 95ms);
}

.hero .eyebrow,
.hero__text,
.hero__aktionen {
  animation: weich-hoch 760ms var(--ease-out) both;
}

.hero .eyebrow { animation-delay: 50ms; }
.hero__text { animation-delay: 420ms; }
.hero__aktionen { animation-delay: 520ms; }

@keyframes reflex {
  from {
    background-position: -160% 0;
  }
  to {
    background-position: 260% 0;
  }
}

.reflex {
  background-image: linear-gradient(
    100deg,
    transparent 40%,
    color-mix(in srgb, var(--c-paper) 88%, #fff) 47%,
    var(--c-blau) 50%,
    color-mix(in srgb, var(--c-paper) 88%, #fff) 53%,
    transparent 60%
  );
  background-size: 220% 100%;
  background-position: -160% 0;
  background-repeat: no-repeat;
  
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: var(--c-ink);
  animation: reflex 2200ms var(--ease-weich) 1400ms 1 both;
}

@keyframes hero-ueberblenden {
  0%     { opacity: 0; }
  1.25%  { opacity: 1; }
  25%    { opacity: 1; }
  26.25% { opacity: 0; }
  100%   { opacity: 0; }
}

@keyframes hero-punkt-aktiv {
  0%     { width: 0.5rem; }
  1.25%  { width: 2.5rem; }
  25%    { width: 2.5rem; }
  26.25% { width: 0.5rem; }
  100%   { width: 0.5rem; }
}

@keyframes hero-punkt-laden {
  0%     { transform: scaleX(0); }
  1.25%  { transform: scaleX(0); }
  25%    { transform: scaleX(1); }
  25.01% { transform: scaleX(0); }
  100%   { transform: scaleX(0); }
}

@media (prefers-reduced-motion: no-preference) {
  .hero__bild {
    animation: hero-ueberblenden 32s linear infinite both;
    animation-delay: calc(var(--i) * 8s - 6.4s);
  }

  .hero__punkt {
    animation: hero-punkt-aktiv 32s linear infinite both;
    animation-delay: calc(var(--i) * 8s - 6.4s);
  }

  .hero__punkt::after {
    animation: hero-punkt-laden 32s linear infinite both;
    animation-delay: calc(var(--i) * 8s - 6.4s);
  }
}

@keyframes foto-schweben-a {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.1rem); }
}

@keyframes foto-schweben-b {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(1.1rem); }
}

@keyframes foto-schweben-knapp {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.65rem); }
}

@media (prefers-reduced-motion: no-preference) {
  .inspiration__foto--1 {
    animation: foto-schweben-a 7s ease-in-out infinite;
  }

  .inspiration__foto--4 {
    animation: foto-schweben-a 8.5s ease-in-out infinite;
    animation-delay: -3s;
  }

  .inspiration__foto--2 {
    animation: foto-schweben-b 7.5s ease-in-out infinite;
    animation-delay: -1.5s;
  }

  .inspiration__foto--3 {
    animation: foto-schweben-b 6.5s ease-in-out infinite;
    animation-delay: -4s;
  }

  .inspiration__foto--5 {
    animation: foto-schweben-knapp 9s ease-in-out infinite;
  }
}

@supports (animation-timeline: scroll()) {
  
  @keyframes leiste-setzen {
    from { height: clamp(8.5rem, 14vw, 12.5rem); }
    to { height: 6.5rem; }
  }

  @keyframes marke-setzen {
    from { height: clamp(6.5rem, 12vw, 11rem); }
    to { height: 5.5rem; }
  }

  @media (prefers-reduced-motion: no-preference) {
    body.startseite .kopf__innen {
      animation: leiste-setzen linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100px;
    }

    body.startseite .marke img {
      animation: marke-setzen linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100px;
    }
  }

  @keyframes balken {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }

  .fortschritt {
    animation: balken linear both;
    animation-timeline: scroll(root block);
  }

  @keyframes linie-zeichnen {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
  }

  .prozess__linie .ist-fortschritt {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: linie-zeichnen linear both;
    animation-timeline: view();
    animation-range: entry 60% cover 60%;
  }

  @keyframes wort-hell {
    from { color: var(--c-paper-3); }
    to { color: var(--c-ink); }
  }

  .zitat .wort {
    color: var(--c-paper-3);
    animation: wort-hell linear both;
    animation-timeline: view();
    animation-range: entry 45% cover 55%;
  }

  @keyframes ruhig-zoom {
    from { transform: scale(1.1); }
    to { transform: scale(1); }
  }

  .split__bild img,
  .split__bild video {
    animation: ruhig-zoom linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 70%;
  }

}

@supports not (animation-timeline: scroll()) {
  .fortschritt {
    display: none;
  }
}

@keyframes band-lauf {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

.bildband__spur {
  animation: band-lauf 64s linear infinite;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .bildband:hover .bildband__spur {
    animation-play-state: paused;
  }
}

.laufband__spur {
  animation: band-lauf 28s linear infinite;
  will-change: transform;
}

.menue {
  transform: scale(0.985);
  transition: opacity var(--t-mittel) var(--ease-out),
    transform var(--t-mittel) var(--ease-out),
    visibility 0s linear var(--t-mittel);
}

.menue.ist-offen {
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  .reveal--bild {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }

  .reveal--bild img,
  .split__bild img,
  .split__bild video,
  .hero__medium img {
    transform: none !important;
    opacity: 1 !important;
  }

  .zitat .wort {
    color: var(--c-ink) !important;
  }

  .reflex {
    background-image: none;
    -webkit-text-fill-color: currentColor;
  }

  .fortschritt {
    display: none;
  }

  .prozess__linie .ist-fortschritt {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }

  .bildband__spur,
  .laufband__spur {
    animation: none !important;
    transform: none !important;
  }
}