/* ============================================
   HERO-DIASHOW – kleinschwaerzer.eu
   ============================================
   Wichtig: Die Bilder sind bereits fertig komponierte
   Banner-Grafiken mit Logos/Schriftzügen in den Ecken.
   Deshalb wird hier bewusst NICHT auf ein hohes
   Mobile-Format zugeschnitten (das würde Logos abschneiden),
   sondern das Seitenverhältnis bleibt auf allen Geräten
   gleich – nur die Gesamthöhe passt sich der Bildschirmbreite an.
*/

.hero-slideshow {
  position: relative;
  width: 100%;
  aspect-ratio: 2480 / 1180;   /* exaktes Verhältnis deiner Originalbilder */
  overflow: hidden;
  background-color: #111;     /* falls ein Bild noch lädt */
}

.hero-slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}

.hero-slide.is-active {
  opacity: 1;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Optional: Auf sehr kleinen Screens etwas weniger Höhe,
   ohne das Bild seitlich zu beschneiden (gleiches Verhältnis bleibt) */
@media (max-width: 480px) {
  .hero-slideshow {
    aspect-ratio: 2480 / 1300; /* minimal kompakter, Logos bleiben sichtbar */
  }
}