.hero-header {
  position: relative;
  width: 100%;
  min-height: 100vh; /* Erstmal klassische Lösung */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  box-sizing: border-box;
}

/* das Bild füllt die Fläche aus */
.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  z-index: 0;
}

/* dunkler Verlauf */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
  z-index: 1;
}

/* Text liegt ganz oben */
.hero-content {
  position: relative;
  z-index: 2;
  color: white;
  padding: 2rem;
}

/* Schrift etc. */
.hero-header h1 {
  font-size: 3rem;
  margin-bottom: 30px;
}

.hero-header h2 {
  margin: 0.75rem 0 3rem 0;
  opacity: 0.85;
}

.hero-header a {
  color: white;
  text-decoration: none;
}