/* Sicherstellen, dass die Listenelemente keine Aufzählungszeichen haben */
.sil-item {
  list-style: none;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  box-sizing: border-box;
  background-color: #ffffff;
}

.sil-item h3{
  margin-top: 10px;
}

/* Container für die Bilder mit festem Seitenverhältnis */
.sil-img-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9-Verhältnis, passe das bei Bedarf an */
}

/* Beide Bilder werden absolut positioniert, sodass sie den Container ausfüllen */
.sil-img-container .sil-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

/* Standard: Main-Image sichtbar, Screenshot unsichtbar */
.sil-img-container .main-image {
  opacity: 1;
  z-index: 1;
}

.sil-img-container .screenshot-image {
  opacity: 0;
  z-index: 2;
}

/* Beim Hover: Main-Image ausblenden, Screenshot einblenden */
.sil-img-container:hover .main-image {
  opacity: 0;
}

.sil-img-container:hover .screenshot-image {
  opacity: 1;
}