/* ============================================================
   VARIANTE 2 — sportlich, mit dezenten Motion-Spielereien.
   Baut auf styles.css auf (nur Overrides + Ergänzungen).
   Regeln: nur transform/opacity animieren, ease-out, < 300ms
   für UI, alles mit prefers-reduced-motion abschaltbar.
   ============================================================ */

:root { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); }

/* ---- Hero: echtes Beate-Foto (Behandlung) als Hintergrund, mittlere Transparenz ---- */
.hero-bg {
  background-image: url("images/hero.jpg");  /* Beate rechts, Behandlung (Hände am Bein) sichtbar */
  background-position: center 46%;
  filter: none;
  animation: heroKen 16s var(--ease-out) forwards;
}
/* Text an den linken Rand + schmal, damit Beate rechts frei sichtbar bleibt */
.hero-inner { max-width: 100%; padding-left: clamp(26px, 6.5vw, 96px); }   /* weiter links, damit der Text nicht in Beates Arm ragt */
.hero h1 { max-width: 760px; }                       /* Slogan darf breit, damit "Zusammen mit dir" in eine Zeile passt */
.hero-inner .eyebrow { max-width: none; white-space: nowrap; font-size: 0.66rem; letter-spacing: 0.18em; }  /* eine Zeile */
@media (max-width: 640px) { .hero-inner .eyebrow { white-space: normal; font-size: 0.6rem; letter-spacing: 0.14em; } }
.hero-inner .hero-lead { max-width: 560px; }
@keyframes heroKen { from { transform: scale(1.12); } to { transform: scale(1); } }
.hero-bg::after {
  background:
    linear-gradient(180deg, rgba(22,24,18,.52) 0%, rgba(22,24,18,.42) 42%, rgba(22,24,18,.9) 100%),
    linear-gradient(90deg, rgba(22,24,18,.9) 0%, rgba(22,24,18,.62) 55%, rgba(22,24,18,.2) 95%);
}
/* Hero-Text auf dem Foto klar lesbar halten */
.hero h1 { text-shadow: 0 2px 24px rgba(22,24,18,.45); }
.hero .hero-lead { color: rgba(242,241,232,.94); }
.hero .eyebrow-light { color: #d6dec3; }

/* ---- Schmaler Scroll-Fortschrittsbalken oben ---- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: left;
  background: var(--accent);
  z-index: 80; pointer-events: none;
}

/* ---- Buttons: Druck-Feedback + weichere Kurve ---- */
.btn { transition: transform .18s var(--ease-out), background .18s var(--ease-out),
                   color .18s var(--ease-out), border-color .18s var(--ease-out); }
.btn:active { transform: scale(.97); }

/* ---- Nav-Links: mitwachsende Lime-Unterstreichung bei Hover ---- */
.nav > a:not(.btn) { position: relative; }
.nav > a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease-out);
}
.nav > a:not(.btn):hover::after { transform: scaleX(1); }

/* ---- Bilder: sanftes Zoomen bei Hover ---- */
.about-photo, .praxis-photo { overflow: hidden; border-radius: var(--eckenradius); }
.about-photo img, .praxis-photo img { transition: transform .55s var(--ease-out); }
.about-photo:hover img, .praxis-photo:hover img { transform: scale(1.04); }

/* ---- Leistungs-Spalten & Qualifikations-Spalten: leicht anheben ---- */
.service-col, .quali-col { transition: transform .3s var(--ease-out); }
.service-col:hover { transform: translateY(-4px); }

/* ---- Credential-Chips: Akzent bei Hover ---- */
.credentials li { transition: transform .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out); }
.credentials li:hover { transform: translateY(-2px); border-color: var(--sage); color: var(--sage-dark, #5b6850); }

/* ---- Gestaffelte Einblendung, wenn Spalten gemeinsam erscheinen ---- */
.service-groups .service-col:nth-child(2).reveal { transition-delay: .1s; }
.quali-grid .quali-col:nth-child(2).reveal { transition-delay: .1s; }

/* ---- Hero-Kennzahlen: dezenter Akzent ---- */
.hstat strong { transition: color .25s var(--ease-out); }
.hstat:hover strong { color: var(--accent); }

/* ============================================================
   Mobil: Hero-Ausschnitt nach rechts, damit Beate (rechts im
   Bild) sichtbar bleibt statt nur ihr Arm in der Bildmitte.
   ============================================================ */
@media (max-width: 760px) {
  .hero-bg { background-position: 82% center; }
}

/* ============================================================
   Reduced Motion: alle Bewegungen aus, Verständlichkeit bleibt
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero-bg { animation: none; transform: scale(1); }
  .about-photo:hover img, .praxis-photo:hover img,
  .service-col:hover, .credentials li:hover, .hstat:hover strong { transform: none; }
  .nav > a:not(.btn)::after { transition: none; }
}