.fading-words {
  position: relative; /* Wichtig für die Positionierung der Kinder-Elemente */
  width: 100%;
  height: 300px;
  overflow: hidden;
  margin-top:200px;
}

.word {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 7em;
  animation: fade 18s infinite; /* 10 Sekunden pro Durchlauf, unendlich wiederholen */
}

/* Jedes Wort erhält eine Verzögerung */
.word:nth-child(1) {
  animation-delay: 0s;
}
.word:nth-child(2) {
  animation-delay: 3s;
}
.word:nth-child(3) {
  animation-delay: 6s;
}
.word:nth-child(4) {
  animation-delay: 9s;
}
.word:nth-child(5) {
  animation-delay: 12s;
}
.word:nth-child(6) {
  animation-delay: 15s;
}

/* Keyframe-Definition für die Animation */
@keyframes fade {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1; /* Wort wird sichtbar */
  }
  20% {
    opacity: 0; /* Wort wird unsichtbar */
  }
  100% {
    opacity: 0; /* Bleibt unsichtbar, bis der nächste Durchlauf beginnt */
  }
}