/* Animate-on-Scroll CSS */

/* Keyframes für verschiedene Animationen */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(2em);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideLeft {
  from {
    opacity: 0;
    transform: translateX(-35px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(35px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Basis-Klasse für alle animate-on-scroll Elemente */
.animate-on-scroll {
  opacity: 0;
}

/* Auslöser-Klasse für sichtbare Elemente */
.is-visible {
  animation-duration: .8s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

/* Spezifische Animationen */
.fade-in.is-visible {
  animation-name: fadeIn;
}

.slide-up.is-visible {
  animation-name: slideUp;
}

.slide-left.is-visible {
  animation-name: slideLeft;
}

.slide-right.is-visible {
  animation-name: slideRight;
}

/* Editor-spezifische Overrides */
/* Setzt die Stile im WordPress-Block-Editor zurück, damit die Blöcke sichtbar sind. */
.editor-styles-wrapper .animate-on-scroll {
    opacity: 1 !important;
    transform: none !important;
}