.el-header {
  height: 600px;
  padding-top: var(--fixed-top-height);
}

.el-header__inner {
  position: relative;
  overflow: hidden; /* wichtig, damit Slides nicht rauspoppen */
  height: 100%;
}

.swiper-wrapper {
  width: 100%;
  height: 100%;
}

/* Swiper als Background-Layer */
.el-header__bg-swiper {
  position: absolute;
  inset: 0; /* top/right/bottom/left = 0 */
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Jede Slide ist ein Fullsize-Background */
.el-header__bg-slide {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.el-header__content {
  position: relative;
  z-index: 1;
}

.el-header__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}

.el-header__bg-swiper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.el-header__bg-swiper .swiper-wrapper,
.el-header__bg-swiper .swiper-slide {
  width: 100%;
  height: 100%;
}

/* Slides als Background */
.el-header__bg-slide {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.el-header__content {
  position: absolute;
  z-index: 2;
  bottom: 20px;
  left: 20px;

  font-family: var(--font-family-main);
}