/* Hero "Mitflug", Variante C (Designstudie 26.09.2026).
   Die Szene läuft live als SVG (hero-mitflug.js); Text bleibt echtes HTML. */
.new-hero.mitflug {
  min-height: 0;
}
.hero-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
  background: var(--ink);
}
.hero-stage-svg {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}
/* Tinte-Verlauf trägt den Text links */
.hero-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #171b19f0 0%, #171b19c7 34%, #171b1926 62%, #171b1900 80%),
    linear-gradient(0deg, #171b19e6 0%, #171b1900 22%);
}
.new-hero.mitflug .hero-inner {
  padding-top: clamp(48px, 7vw, 96px);
}
.new-hero.mitflug h1 {
  font-family: var(--body-font);
  font-weight: 300;
  font-size: clamp(44px, 6.4vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 11ch;
  margin: 26px 0 30px;
  text-wrap: balance;
}
.new-hero.mitflug h1 em {
  display: block;
  font-family: var(--body-font);
  font-style: normal;
  font-weight: 800;
  font-size: 1em;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--paper);
  transition:
    opacity 0.5s ease,
    transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.new-hero.mitflug.hero-waiting h1 em {
  opacity: 0.001;
  transform: translateY(10px);
}
.new-hero.mitflug .hero-bottom,
.new-hero.mitflug .hero-bottom > p {
  max-width: 34em;
}
.new-hero.mitflug .hero-bottom > p {
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.6;
  color: #d9d8ce;
}
.new-hero.mitflug .hero-baseline {
  margin-top: clamp(48px, 6vw, 88px);
}

@media (max-width: 780px) {
  .hero-stage {
    bottom: auto;
    height: min(520px, 104vw);
  }
  .hero-stage::after {
    background: linear-gradient(0deg, var(--ink) 0%, #171b19b3 22%, #171b1900 48%, #171b1900 86%, #171b198c 100%);
  }
  .new-hero.mitflug .hero-inner {
    padding-top: calc(min(520px, 104vw) - 150px);
  }
  .new-hero.mitflug h1 {
    font-size: clamp(40px, 11vw, 60px);
  }
}
@media print {
  .hero-stage {
    display: none;
  }
}