/* Container, der die Bilder passend umschließt */
.slideshow {
  position: relative;
  width: 704px;       /* Gewünschte Breite (z. B. 100% oder 800px) */
  height: 384px;     /* Gewünschte Höhe der Bilder */
  overflow: hidden;
}

/* Beide Bilder exakt übereinanderlegen */
.slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; 
  opacity: 0; /* Standardmäßig sind alle Bilder unsichtbar */
  animation-name: blendEffekt;
  animation-duration: 20s; /* Gesamtdauer für alle 4 Bilder */
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

/* Zeitlicher Versatz für die einzelnen Bilder (20s Gesamtzeit / 4 Bilder = 5s Versatz) */
.slideshow .bild-1 { animation-delay: 0s; }
.slideshow .bild-2 { animation-delay: 5s; }
.slideshow .bild-3 { animation-delay: 10s; }
.slideshow .bild-4 { animation-delay: 15s; }

/* Die Animation für ein einzelnes Bild innerhalb der 20 Sekunden */
@keyframes blendEffekt {
  0% { opacity: 0; }
  5% { opacity: 1; }      /* Blendet in 1 Sekunde ein (0% bis 5%) */
  25% { opacity: 1; }     /* Bleibt 4 Sekunden voll sichtbar (5% bis 25%) */
  30% { opacity: 0; }     /* Blendet in 1 Sekunde aus (25% bis 30%) */
  100% { opacity: 0; }    /* Bleibt den Rest der Zeit unsichtbar */
}