/* =============================================================================
   hero-intro — Sektions-Kopf: Eyebrow, Headline, Lead
   =============================================================================
   Geerntet aus den Realbauten (Sektions-Ernte 2026-09-01, recfX55otwCPVGo4Z).
   Das meistgebaute Muster überhaupt (BEFUND-lp-components-Lieferweg, Abschnitt 5):
   Engpass-Funnel .eyebrow + h2 + .measure, Kunden-Präzedenz .kicker + h2 + .lead.
   Vereinheitlicht auf einen Namen mit drei Elementen.

   Trägt sowohl den Seiten-Hero (h1) als auch jeden Sektions-Kopf (h2):
   das Element ist frei, die Klassen tragen die Form. Im Perspective-Einsatz
   ist die H1 oft ein NATIVES Element (dynamische Headlines greifen nur nativ);
   dann übernimmt hero-intro die Sektions-Köpfe darunter.

   TOKEN-PUR: ausschließlich Variablen aus _tokens/_base.css. Die --hi-* sind
   komponenten-lokale Layout-Konstanten (rules/lp-components-token-disziplin.md).

   Statisch: braucht KEIN eigenes JS. Mit [data-reveal] kompatibel.

   Lade-Reihenfolge: _tokens/_base.css -> <brand>.css -> diese Datei.
   ============================================================================ */

.hero-intro {
  /* komponenten-lokale Konstanten (kein Marken-Bezug) */
  --hi-measure-head: 22ch;   /* Zeilenmaß der Headline */
  --hi-measure-lead: 62ch;   /* Zeilenmaß des Leads */

  margin-top: var(--space-l);
}

/* Zentrierte Variante (Sektions-Kopf über einem Grid, Hero ohne Split). */
.hero-intro--center {
  text-align: center;
}
.hero-intro--center .hero-intro__title,
.hero-intro--center .hero-intro__lead {
  margin-left: auto;
  margin-right: auto;
}

.hero-intro__eyebrow {
  display: block;
  margin: 0 0 var(--space-s);
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--font-scale-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.hero-intro__title {
  margin: 0;
  max-width: var(--hi-measure-head);
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--font-scale-h2);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  /* Schusterjungen in kurzen Kopfzeilen vermeiden; degradiert still. */
  text-wrap: balance;
}

/* Hero-Größe als Modifier, nicht als eigenes Element:
   dieselbe Struktur, nur die h1-Skala. */
.hero-intro--display .hero-intro__title {
  font-size: var(--font-scale-h1);
  line-height: 1.08;
}

.hero-intro__lead {
  margin: var(--space-s) 0 0;
  max-width: var(--hi-measure-lead);
  font-size: var(--font-scale-body);
  line-height: 1.65;
  color: var(--color-ink-soft);
}

.hero-intro__lead strong {
  color: var(--color-ink);
  font-weight: 600;
}