/* Startseite D (startseite_d.html): „Bildstark“ – Foto zuerst. Therapieraum über die volle Breite,
   Überschrift, Einleitung und Knöpfe in Weiß auf einer dunklen Abdunklung (nur für die Lesbarkeit).
   Darunter dieselben Abschnitte wie Startseite A. Gewählt aus drei Varianten (Ruhig, Bildstark, Wegweiser) am 12.11.2026.
   „Unsere Haltung“ mit Teamfoto.
   Bewegung: Foto zoomt beim Laden leicht heraus (1,2 s), Text erscheint gestaffelt (400 ms).
   Bei „Bewegung reduzieren“ nur kurzes Einblenden. */

:root { --ease-out: cubic-bezier(.23, 1, .32, 1); }
.knopf { transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 160ms var(--ease-out); }
.knopf:active { transform: scale(.97); }
@keyframes d-auf { from { opacity: 0; transform: translateY(8px); } }
@keyframes d-zoom { from { transform: scale(1.06); } }
@keyframes d-ein { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .d2 { animation: d-ein 200ms ease both !important; }
}

/* ---------- Bühne ---------- */
.d2 {
  position: relative; isolation: isolate; overflow: clip; display: grid; align-items: end;
  min-height: min(88svh, 50rem); color: var(--kalkweiss); background: var(--nachtgruen);
}
.d2__foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
/* Abdunklung nur damit der Text lesbar ist (Weiß auf Nachtgrün ≥ 10 : 1 im Textbereich) */
.d2::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgb(36 48 32 / .93) 0%, rgb(36 48 32 / .8) 45%, rgb(36 48 32 / .2) 85%);
}
.d2__inhalt { padding-block: clamp(3rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4.5rem); }
.d2 h1 { color: var(--kalkweiss); font-size: clamp(2.5rem, 1.2rem + 4.5vw, 5rem); line-height: 1.02; letter-spacing: -.025em; max-width: 15ch; }
.d2__einleitung { max-width: 36rem; font-size: 1.25rem; line-height: 1.55; color: rgb(255 255 255 / .92); }
.d2__fakten { margin: 0; font-size: var(--s-0); color: rgb(255 255 255 / .85); }
.d2 :focus-visible { outline-color: var(--kalkweiss); }

/* „Unsere Haltung“ mit Teamfoto im Hochformat */
.d-team img { aspect-ratio: 4 / 5; max-height: 34rem; }
@media (prefers-reduced-motion: no-preference) {
  .d2__foto { animation: d-zoom 1200ms var(--ease-out) both; }
  .d2__inhalt > * { animation: d-auf 400ms var(--ease-out) 150ms both; }
  .d2__inhalt > :nth-child(2) { animation-delay: 200ms; }
  .d2__inhalt > :nth-child(3) { animation-delay: 250ms; }
  .d2__inhalt > :nth-child(4) { animation-delay: 300ms; }
}