:root {
  --kurve: cubic-bezier(.22, 1, .36, 1);
  --dauer: 1.6s;
}

html[data-bewegung] .auftritt {
  opacity: 0;
  transform: translateY(45px) scale(.972);
  transform-origin: 50% 100%;
  transition: opacity var(--dauer) var(--kurve), transform var(--dauer) var(--kurve);
  transition-delay: var(--verzug, 0ms);
}
html[data-bewegung] .auftritt.ist-da {
  opacity: 1;
  transform: none;
}

html[data-bewegung] .vollbild__text > *,
html[data-bewegung] .vollbild__leiste {
  opacity: 0;
  transform: translateY(14px);
  animation: einzug 1.4s var(--kurve) forwards;
}
html[data-bewegung] .vollbild .marke { animation-delay: .1s; }
html[data-bewegung] .vollbild .titel-xl { animation-delay: .26s; }
html[data-bewegung] .vollbild .vorspann { animation-delay: .42s; }
html[data-bewegung] .vollbild .knopfreihe { animation-delay: .58s; }
html[data-bewegung] .vollbild__leiste { animation-delay: .72s; }

@keyframes einzug {
  to { opacity: 1; transform: none; }
}

html[data-bewegung] .vollbild > .vergleich img {
  animation: beruhigen 2.4s var(--kurve) both;
}
@keyframes beruhigen {
  from { transform: scale(1.035); }
  to { transform: none; }
}

.preiskarte, .bilderband__bild, .frage {
  transition: transform .45s var(--kurve), box-shadow .45s var(--kurve),
              border-color .45s var(--kurve);
}
html[data-bewegung] .preiskarte.ist-da,
html[data-bewegung] .bilderband__bild.ist-da {
  transition: transform .45s var(--kurve), box-shadow .45s var(--kurve),
              border-color .45s var(--kurve);
}

@media (hover: hover) {
  .bilderband__bild:hover { transform: translateY(-2px); }

  .preiskarte:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgb(16 24 40 / .13);
    border-color: var(--blau-linie);
  }
  .preiskarte--betont:hover { transform: translateY(-6px); }
}

.bilderband__bild > button, .bilderband__klein .vergleich, .bilderband__gross .vergleich { overflow: hidden; }
.bilderband__bild img { transition: transform .8s var(--kurve); }
@media (hover: hover) {
  .bilderband__bild:hover img { transform: scale(1.03); }
}

.knopf { transition: background-color .25s var(--kurve), color .25s var(--kurve),
                     border-color .25s var(--kurve), transform .25s var(--kurve); }
@media (hover: hover) {
  .knopf--voll:hover { transform: translateY(-1px); }
}

.kopf {
  transition: box-shadow .35s var(--kurve), background-color .35s var(--kurve);
}
.kopf__innen { transition: padding-block .35s var(--kurve); }
html[data-gerollt] .kopf { box-shadow: 0 6px 28px rgb(8 14 26 / .07); }
html[data-gerollt] .kopf__innen { padding-block: .55rem; }

@media (prefers-reduced-motion: reduce) {
  html[data-bewegung] .auftritt,
  html[data-bewegung] .vollbild__text > *,
  html[data-bewegung] .vollbild__leiste {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
  html[data-bewegung] .vollbild > .vergleich img { animation: none; }
  .preiskarte, .bilderband__bild, .frage, .knopf, .kopf, .kopf__innen,
  .bilderband__bild img { transition: none; }
}

html[data-bewegung] .beitrag__bild--breit .vergleich img,
html[data-bewegung] .beitrag__zwischenbild .vergleich img,
html[data-bewegung] .kapitel__bild .vergleich img,
html[data-bewegung] .formularkarte__rechts .vergleich img {
  transform: scale(1.07) translateY(var(--parallaxe, 0px));
}

@media (prefers-reduced-motion: reduce) {
  html[data-bewegung] .beitrag__bild--breit .vergleich img,
  html[data-bewegung] .beitrag__zwischenbild .vergleich img,
  html[data-bewegung] .kapitel__bild .vergleich img,
  html[data-bewegung] .formularkarte__rechts .vergleich img { transform: none; }
}