/* Bewegungen bleiben auf transform und opacity beschraenkt, damit das Blaettern weich laeuft. */
.blattwerk-bereit .werkseite {
  transform-origin: center top;
  transition: opacity 320ms ease;
}

.blattwerk-bereit .werkseite::after {
  opacity: 0;
  transform: translate3d(20%, 0, 0) skewX(-7deg);
  transition: opacity 360ms var(--kurve), transform 520ms var(--kurve);
}

.blattwerk-bereit.blatt-hoch .werkseite::after {
  transform: translate3d(-22%, 0, 0) skewX(7deg);
}

.blattwerk-bereit .werkseite.ist-aktiv::after {
  opacity: .28;
  transform: translate3d(112%, 0, 0) skewX(-7deg);
}

.blattwerk-bereit.blatt-hoch .werkseite.ist-aktiv::after {
  transform: translate3d(-112%, 0, 0) skewX(7deg);
}

.blattwerk-bereit .werkseite.ist-vorher {
  opacity: .98;
}

.blattwerk-bereit .werkseite.ist-naechste {
  opacity: 1;
}

.blattwerk-bereit .werkseite__pigment {
  transform: translate3d(0, 18px, 0) scale(.96) rotate(-1deg);
  transition: transform 520ms var(--kurve-blueh), opacity 420ms var(--kurve-blueh);
}

.blattwerk-bereit .werkbild {
  opacity: .72;
  transform: translate3d(0, 22px, 0) scale(.96);
  transition: transform 560ms var(--kurve-blueh), opacity 420ms var(--kurve-blueh);
}

.blattwerk-bereit .werktext > * {
  opacity: .62;
  transform: translate3d(0, 16px, 0);
  transition: transform 420ms var(--kurve), opacity 360ms var(--kurve);
}

.blattwerk-bereit .werkseite:not(.ist-aktiv):not(.ist-vorher):not(.ist-naechste) .werkseite__pigment,
.blattwerk-bereit .werkseite:not(.ist-aktiv):not(.ist-vorher):not(.ist-naechste) .werkbild,
.blattwerk-bereit .werkseite:not(.ist-aktiv):not(.ist-vorher):not(.ist-naechste) .werktext > * {
  opacity: 1;
  transform: none;
}

.blattwerk-bereit .werkseite.ist-aktiv .werkseite__pigment {
  opacity: .5;
  transform: translate3d(0, 0, 0) scale(1) rotate(0);
}

.blattwerk-bereit .werkseite.ist-aktiv .werkbild {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.blattwerk-bereit .werkseite.ist-aktiv .werktext > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.blattwerk-bereit .werkseite.ist-aktiv .werktext > *:nth-child(2) { transition-delay: 45ms; }
.blattwerk-bereit .werkseite.ist-aktiv .werktext > *:nth-child(3) { transition-delay: 90ms; }
.blattwerk-bereit .werkseite.ist-aktiv .werktext > *:nth-child(4) { transition-delay: 135ms; }

@media (prefers-reduced-motion: reduce) {
  .blattwerk-bereit .werkseite,
  .blattwerk-bereit .werkseite::after,
  .blattwerk-bereit .werkseite__pigment,
  .blattwerk-bereit .werkbild,
  .blattwerk-bereit .werktext > * {
    transition: none;
  }
}