/* ==========================================================================
   Hero — Bild + transparenter Header (Variante A, angepasst)
   Enthält nur noch das Bild + den Weiß-Verlauf. Headline und Kalkulator
   sitzen im weißen Kalkulator-Panel darüber (siehe calculator.css) und
   überlappen den Hero von außen.
   ========================================================================== */

.hero-section {
  position: relative;
  aspect-ratio: 21 / 10;
  background-image: url('../assets/wohnung-weiss-streichen-maler.jpg');
  background-size: cover;
  background-position: 55% 25%;
  display: flex;
  flex-direction: column;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  /* Verlauf von Weiß (oberer Rand) zu transparent, kein flächiges Overlay */
  background: linear-gradient(to bottom, #FFFFFF 0, #FFFFFF 60px, rgba(255,255,255,0) 340px);
  pointer-events: none;
}
.hero-content {
  z-index: 1;
  position: relative;
  padding: 10vh 0;
}
.hero-content-box {
  max-width: 720px;
}

.hero__headline {
  font-family: var(--font-family);
  font-size: var(--type-display-2);
  font-weight: var(--font-weight-black);
  line-height: var(--lh-display-2);
  color: var(--color-primary);
  text-wrap: balance;
  margin-bottom: var(--space-4);
}

.hero__subline {
  font-size: var(--type-text-large);
  line-height: var(--lh-text-large);
  color: var(--color-body);
  max-width: 46ch;
  margin: 0 0 var(--space-10);
}