.header-bild{
  position: relative;
  display: flex;
  height: 80vh;
  overflow: hidden;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 32px 32px 0 0 !important;
  /* KEIN background-image hier mehr */
}

/* Die zwei Slideshow-Bilder liegen unter dem Inhalt */
.header-bild .bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;        /* füllt den Header korrekt ohne Nachspringen */
  object-position: center;
  opacity: 0;
  transition: opacity 1.8s ease-in-out;
  z-index: 1;
}

/* sichtbare Ebene */
.header-bild .bg.show{ opacity: 1; }

/* Dein Logo (oder sonstiger Header-Content) bleibt oben */
.header-bild > img:not(.bg),
.header-bild > *:not(.bg){
  position: relative;
  z-index: 2;
}

/* deine bisherigen Paddings/Breakpoints kannst du behalten */


/* Restliche Breakpoints */
@media(min-width:350px){
  .header-bild {
    padding: 32px 32px 0 0 !important;
  }
}

@media(min-width:750px){
  .header-bild {
    padding: 36px 36px 0 0 !important;
  }
}

@media(min-width:1750px){
  .header-bild {
    padding: 48px 48px 0 0 !important;
  }
}