/* ============================================================
   Shared hero pattern — Pixelrobots spoke pages (Branchen-Landingpages)
   Single source of truth für den Foto-Hero: Scrim, Layout, Typo.

   Einbindung pro Seite:
     <link rel="stylesheet" href="/css/hero.css">   (im <head>, VOR dem inline <style>)
   Hintergrundfoto pro Seite über die Custom-Property --hero-image
   am .hero-Element:
     <header class="hero grain" style="--hero-image: url('img/heros/<branche>.jpg');">

   Nutzt CSS-Variablen (--gold, --dark, --surface, --font-*), die in
   jeder Seite im :root des inline <style> definiert sind.

   Verwendet von den 7 Branchen-Spokes: physiotherapie, logopaedie,
   heilpraktiker, ergotherapie, heilberufe, handwerker, dienstleister.

   Bewusst NICHT betroffen (eigene, abweichende Hero-Varianten — inline belassen):
     - index.html            (Vollton-Navy-Hero, ganz andere Struktur)
     - wie-wir-arbeiten.html  (Hub-Hero: hellerer ::before, kleinere Typo,
                               eigenes .hero-sub-mini — absichtlich anders als
                               die Conversion-Spokes)
   ============================================================ */

.hero {
  position: relative;
  background:
    linear-gradient(135deg, rgba(18,30,54,0.82) 0%, rgba(18,30,54,0.66) 50%, rgba(28,46,74,0.86) 100%),
    var(--hero-image) center/cover no-repeat,
    var(--dark);
  color: var(--surface);
  padding: 140px 24px 100px;
  text-align: center;
  overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 65% 70% at 50% 50%, rgba(18,30,54,0.42) 0%, rgba(18,30,54,0.18) 50%, transparent 75%),
    radial-gradient(ellipse at 30% 40%, rgba(200,170,110,0.06), transparent 50%);
  pointer-events: none;
}
.hero-inner { max-width: 820px; margin: 0 auto; position: relative; z-index: 2; }
.hero-eyebrow {
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 600;
  color: var(--gold); letter-spacing: 1.5px; text-transform: uppercase;
  margin-bottom: 20px;
  text-shadow: 0 1px 8px rgba(18,30,54,0.7);
}
.hero h1 {
  font-family: var(--font-headline);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 700; line-height: 1.2; margin-bottom: 24px;
  color: var(--surface);
  text-shadow: 0 2px 24px rgba(18,30,54,0.85), 0 1px 4px rgba(18,30,54,0.5);
}
.hero h1 em { font-style: italic; color: var(--gold); }
.hero-lead {
  font-size: 1.15rem; line-height: 1.7;
  color: rgba(240,236,228,0.97); max-width: 640px; margin: 0 auto 36px;
  text-shadow: 0 1px 3px rgba(18,30,54,0.9), 0 2px 16px rgba(18,30,54,0.8);
}
.hero-ctas {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
  margin-top: 12px;
}
.hero-trio { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin: 24px 0 32px; }
.hero-trio-badge { padding: 8px 18px; border: 1px solid rgba(200,170,110,0.4); border-radius: 999px; font-size: 0.85rem; color: var(--gold); letter-spacing: 0.5px; }

@media (max-width: 768px) {
  .hero { padding: 120px 20px 80px; }
}
