/* ==========================================================================
   Taxi Fluor — Hero (Startseite: Hellgrau-Band, 2 Spalten) + Page-Hero
   (Unterseiten: schlanker Textkopf, kein Foto), exakt Mock-Werte.
   ========================================================================== */

.hero {
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
}

.hero__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--space-40);
  align-items: center;
  padding-block: var(--space-56) var(--space-48);
}

.hero__kicker {
  margin: 0 0 var(--space-10);
  /* 19px statt Mock-Wert 17px: #E30613 auf #F5F5F6 erreicht bei 17px/700
     nur 4.48:1 (WCAG AA verlangt 4.5:1 für Normaltext). Ab 18.66px/700
     gilt die "Large Text"-Schwelle (3:1), die 4.48:1 sicher erfüllt.
     Siehe DESIGN.md, "Treue zum Mock". */
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-accent);
}

.hero__title {
  margin: 0 0 var(--space-16);
  line-height: var(--leading-tight);
  text-wrap: pretty;
}

.hero__lead {
  margin: 0 0 var(--space-26);
  font-size: var(--text-2xl);
  line-height: var(--leading-normal);
  max-width: 52ch;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-14);
}

.hero__hours {
  margin: var(--space-22) 0 0;
  font-size: var(--text-md);
  color: var(--color-text-muted);
}

.hero__media {
  min-height: 20rem;
  display: flex;
}

.hero__media img {
  width: 100%;
  min-height: 20rem;
  object-fit: cover;
  border-radius: var(--radius-xl);
}

/* ==========================================================================
   Page-Hero: Unterseiten ohne Foto (Bestellen, Offerten, Referenzen, Kontakt,
   Impressum, Datenschutz, 404) — heller Textkopf, kein Hellgrau-Band.
   ========================================================================== */
.page-hero {
  padding-block: var(--space-56) var(--space-24);
}

.page-hero__title {
  margin: 0 0 var(--space-12);
}

.page-hero__lead {
  margin: 0;
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  max-width: 70ch;
}