/* Startseite B: wie A, mit animiertem Logo in der Bühne, Abschnitten mit Praxisfoto als Parallax-Hintergrund
   und Aufbau der Abschnitte beim Scrollen (DESIGN.md 8a). Logo-Animation: logo-animation.css.
   - Rückmeldung beim Drücken: alles Anklickbare gibt um 2–3 % nach (scale), schnell (≤ 160 ms).
   - Hover-Effekte nur mit Maus (hover: hover, pointer: fine) – auf dem Handy bleibt nichts „hängen“.
   - Ohne JavaScript und bei „Bewegung reduzieren“: Fotos stehen still, alles ist sofort sichtbar. */

:root { --ease-out: cubic-bezier(.23, 1, .32, 1); }

/* ---------- Knöpfe ---------- */
.knopf, .schnellleiste__knopf, .menue-knopf {
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 160ms var(--ease-out);
}
.knopf:active, .schnellleiste__knopf:active, .menue-knopf:active { transform: scale(.97); }

/* ---------- Wegweiser-Zeilen ---------- */
.wegweiser a {
  transition: background-color 150ms ease, transform 160ms var(--ease-out);
}
.wegweiser a::after { transition: transform 200ms var(--ease-out); }
.wegweiser a:active { transform: scale(.99); background: var(--salbei); }

/* ---------- Links im Text: Unterstrich wird beim Darüberfahren kräftiger, mit kurzem Übergang ---------- */
main p a:not([class]) { transition: text-decoration-thickness 150ms ease, color 150ms ease; }

/* ---------- Hover nur mit Maus ---------- */
@media (hover: hover) and (pointer: fine) {
  .wegweiser a:hover { background: var(--salbei); }
  .wegweiser a:hover::after { transform: translateX(4px) rotate(45deg); }
}
/* Touch: die ungeschützten Hover-Regeln aus site.css zurücknehmen */
@media (hover: none) {
  .wegweiser a:hover .wegweiser__titel { text-decoration: none; }
  .wegweiser a:hover::after { transform: rotate(45deg); }
  .knopf:hover { background: var(--moos); border-color: var(--moos); }
  .knopf--rand:hover { background: var(--kalkweiss); color: var(--moos); }
}

/* Wegweiser-Zeilen bekommen etwas Innenabstand, damit die Hover-Fläche nicht am Text klebt */
.wegweiser a { padding-inline: .75rem; }

/* ---------- Bühne mit animiertem Logo statt Bogenfoto ---------- */
.buehne__logo { width: min(100%, 26rem); justify-self: center; }
@media (max-width: 51.99rem) { .buehne__logo { width: min(72vw, 20rem); } }

/* ---------- Abschnitte mit Praxisfoto als Hintergrund (Parallax) ---------- */
.parallax {
  position: relative; overflow: clip; isolation: isolate;
  padding-block: clamp(3.5rem, 14vw, 10rem); background: var(--nachtgruen);
}
.parallax__hinter { position: absolute; inset: 0; z-index: -1; }
/* Bild 30 % höher als der Abschnitt: Spielraum für die langsamere Bewegung (startseite-b.js) */
.parallax__hinter img {
  position: absolute; left: 0; top: -15%; width: 100%; height: 130%;
  object-fit: cover; background: var(--salbei);
}
.bewegt .parallax__hinter img { will-change: transform; }
.parallax__karte {
  position: relative; background: rgb(255 255 255 / .96); border-radius: var(--ecke);
  padding: clamp(1.5rem, 4vw, 3rem);
}
.parallax .zwei { align-items: center; }
.parallax .schritte li { background: var(--salbei); }
.parallax__foto img { aspect-ratio: 4 / 5; max-height: 32rem; }

/* ---------- Aufbau beim Scrollen: Karte hebt sich ins Bild, Listen folgen gestaffelt ---------- */
.bewegt [data-zeigen]:not([data-zeigen="gestaffelt"]) {
  opacity: 0; transform: translateY(24px) scale(.98);
  transition: opacity 500ms ease, transform 600ms var(--ease-out);
}
.bewegt [data-zeigen="gestaffelt"] > * {
  opacity: 0; transform: translateY(12px);
  transition: opacity 400ms ease, transform 500ms var(--ease-out);
  transition-delay: calc(200ms + var(--i, 0) * 60ms);
}
.bewegt [data-zeigen].ist-da, .bewegt [data-zeigen="gestaffelt"].ist-da > * { opacity: 1; transform: none; }