/* Wibsy’s Hero V6: Der Verlauf und das Spotlicht sind im Motiv vorbereitet.
   Das Bild liegt hinter dem echten HTML-Text. Keine dynamische Maskensteuerung. */
#start.hero.hero-centered {
  --hero-paper: var(--cream, #fdfaf4);
  position: relative;
  isolation: isolate;
  padding-top: 0 !important;
  overflow: hidden !important;
  background: var(--hero-paper) !important;
}
#start.hero.hero-centered::before,
#start.hero.hero-centered::after { content: none !important; }
#start .hero-layout.hero-layout-centered {
  position: relative;
  width: 100%; max-width: none; margin: 0; padding: 0; gap: 0;
}
#start .hero-unified {
  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: hidden;
  background: var(--hero-paper);
}
#start .hero-copy.hero-copy-centered {
  position: relative; z-index: 2;
  width: 100%; max-width: none;
  margin: 0 !important;
  background: transparent !important;
}
#start .hero-copy .hero-kicker,
#start .hero-copy .hero-main-title { width: 100%; }
#start .hero-copy .hero-tagline {
  width: 100%; color: #505b6b; text-wrap: pretty;
}
#start .hero-picture-layer {
  position: absolute; z-index: 0;
  inset: 0; display: block;
  width: 100%; height: 100%; margin: 0; padding: 0;
  pointer-events: none;
}
#start .hero-picture-layer .hero-scene-image {
  position: absolute; left: 0; bottom: -36px;
  display: block; width: 100%; max-width: none;
  height: auto; margin: 0; padding: 0;
  object-fit: contain; opacity: 1;
  border: 0; border-radius: 0; box-shadow: none;
  filter: none; mix-blend-mode: normal;
  /* Nur die ohnehin hellen Außenränder an die exakte Seitenfarbe angleichen.
     Der eigentliche Hell-Dunkel-Übergang ist bereits Teil des Bildmotivs. */
  -webkit-mask-image: linear-gradient(180deg,transparent 0%,#000 3%,#000 97%,transparent 100%);
  mask-image: linear-gradient(180deg,transparent 0%,#000 3%,#000 97%,transparent 100%);
}
#start .hero-unified::after {
  content: "";
  position: absolute; z-index: 1; inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,transparent calc(100% - 24px),var(--hero-paper) 100%);
}
#start .hero-steps {
  position: relative; z-index: 2;
  width: calc(100% - 48px); max-width: 1000px;
  margin: 0 auto !important; padding-top: 8px;
}
#start .hero-cta,
#start .hero-highlights {
  position: relative;
  width: calc(100% - 48px); max-width: 1160px;
}

/* Mobil: Text und Motiv teilen sich denselben fotografischen Hintergrund.
   Wächst der Text, wächst die Fläche mit. Das Foto bleibt unten verankert. */
@media(max-width:760px) {
  #start .hero-unified { padding-bottom: calc(95vw - 36px); }
  #start .hero-copy.hero-copy-centered {
    padding: 32px 20px 24px;
    align-items: center; text-align: center;
  }
  #start .hero-copy .hero-tagline { max-width: 600px; }
  #start .hero-steps { width: calc(100% - 32px); max-width: 600px; }
  #start .hero-cta,
  #start .hero-highlights { width: calc(100% - 32px); }
}

/* Breitbild: Heller Textraum links, Spotlichtmotiv rechts – eine Fläche. */
@media(min-width:761px) {
  #start .hero-unified { min-height: max(620px, calc(62.5473vw - 36px)); }
  #start .hero-copy.hero-copy-centered {
    width: 44%;
    padding: clamp(64px, 9vw, 180px) 0 54px clamp(24px, 4vw, 80px);
    align-items: flex-start;
    text-align: left;
  }
  #start .hero-copy .hero-kicker {
    font-size: clamp(10px, 1.05vw, 17px);
    line-height: 1.5; letter-spacing: .14em;
  }
  #start h1.hero-main-title {
    font-size: clamp(31px, 3.65vw, 73px);
    line-height: 1.08;
    letter-spacing: -.055em;
  }
  #start .hero-title-second > span { white-space: normal; }
  #start .hero-copy .hero-tagline {
    max-width: 640px;
    color: var(--navy, #0b274c);
    font-size: clamp(16px, 1.5vw, 24px);
    line-height: 1.5;
    margin-top: 22px;
  }
}