/* Container, der die Bilder passend umschließt */
.slideshow {
  position: relative;
  width: 768px;       /* Gewünschte Breite (z. B. 100% oder 800px) */
  height: 512px;     /* 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; /* Verhindert das Verzerren der Bilder */
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

/* Animation für das erste Bild */
.slideshow .bild-1 {
  animation-name: blendBild1;
}

/* Animation für das zweite Bild */
.slideshow .bild-2 {
  animation-name: blendBild2;
}

/* Zeitplan für Bild 1: Sichtbar am Start, unsichtbar zur Mitte, am Ende wieder sichtbar */
@keyframes blendBild1 {
  0%, 45%, 100% { opacity: 1; }
  55%, 90% { opacity: 0; }
}

/* Zeitplan für Bild 2: Unsichtbar am Start, sichtbar zur Mitte, am Ende wieder unsichtbar */
@keyframes blendBild2 {
  0%, 45%, 100% { opacity: 0; }
  55%, 90% { opacity: 1; }
}