/* Startseite C (startseite_c.html): ruhige, sorgfältige Oberfläche nach dem Ansatz „unsichtbare Details“.
   - Praxiskarte in der Bühne: heutiger Wochentag hervorgehoben, Telefonnummer mit „Kopieren“.
   - Leistungen als Zeilen mit kleinem Praxisfoto, Schritte mit Linie, die sich beim Scrollen zieht.
   - Bewegung nur mit Zweck: kurzer Einstieg (gestaffelt), sanftes Einblenden beim Scrollen,
     Fotos öffnen sich von oben, Rückmeldung beim Drücken. Hover nur mit Maus.
   - Bei „Bewegung reduzieren“: keine Bewegung, nur kurzes Einblenden; ohne JavaScript alles sofort sichtbar. */

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

/* ---------- Bühne ---------- */
.c-buehne { padding: clamp(2rem, 6vw, 5rem) 0 var(--abschnitt); }
.c-buehne__raster { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 52rem) { .c-buehne__raster { grid-template-columns: 1.25fr .75fr; } }
.c-buehne h1 { font-size: var(--s-5); line-height: 1.05; letter-spacing: -.015em; }
.c-buehne .einleitung { max-width: 34rem; }

/* ---------- Praxiskarte ---------- */
.c-praxis {
  padding: clamp(1.25rem, 3vw, 1.75rem); border: 1px solid var(--linie); border-top: 4px solid var(--arkade);
  background: var(--kalkweiss);
}
.c-praxis__titel { font-size: var(--s-2); font-weight: 800; margin-bottom: .75rem; }
.c-zeiten { list-style: none; margin: 0 -.6rem .5rem; padding: 0; }
.c-zeiten li {
  display: flex; justify-content: space-between; gap: 1rem; padding: .3rem .6rem;
  border-radius: var(--ecke); font-variant-numeric: tabular-nums;
}
.c-zeiten li.ist-heute { background: var(--salbei); font-weight: 600; }
.c-zeiten li.ist-heute span:first-child::after { content: " (heute)"; color: var(--moos); }
.c-praxis__hinweis { margin-bottom: 1rem; }
.c-praxis__adresse { margin-bottom: .5rem; font-size: var(--s-0); }
.c-praxis__weg { margin: 0; font-size: var(--s-0); }

.c-telefon { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; margin: 0 0 1rem; padding-block: .75rem; border-block: 1px solid var(--linie); }
.c-telefon__nummer {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 3rem;
  font-size: 1.375rem; font-weight: 800; color: var(--moos); text-decoration: none; font-variant-numeric: tabular-nums;
}
.c-kopieren {
  min-height: 2.75rem; padding: .35rem 1rem; border: 2px solid var(--linie); border-radius: var(--rund);
  background: var(--kalkweiss); color: var(--schiefer); font: inherit; font-size: var(--s-0); font-weight: 600; cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, transform 160ms var(--ease-out);
}
.c-kopieren:active { transform: scale(.97); }
.c-kopieren.ist-kopiert { border-color: var(--moos); color: var(--moos); }
/* Text wechselt mit kurzer Unschärfe statt hartem Sprung */
.c-kopieren__text { display: inline-block; transition: filter 200ms ease, opacity 200ms ease; }
.c-kopieren.wechselt .c-kopieren__text { filter: blur(2px); opacity: .3; }
.c-kopieren__meldung { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Leistungen ---------- */
.c-kopf { margin-bottom: 2rem; }
.c-leistungen { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
@media (min-width: 52rem) { .c-leistungen { grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; } }
.c-leistung {
  display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; align-items: center; height: 100%;
  padding: .75rem; border: 1px solid var(--linie); border-radius: var(--ecke); background: var(--kalkweiss);
  color: var(--schiefer); text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease, transform 160ms var(--ease-out);
}
@media (min-width: 40rem) { .c-leistung { grid-template-columns: 7rem 1fr; } }
.c-leistung__bild { display: block; overflow: hidden; border-radius: var(--ecke); background: var(--salbei); }
.c-leistung__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 400ms var(--ease-out); }
.c-leistung__titel { display: block; font-size: var(--s-2); font-weight: 800; line-height: 1.25; color: var(--moos); }
.c-leistung__satz { display: block; margin-top: .2rem; font-size: var(--s-0); line-height: 1.45; color: var(--neben); }
.c-leistung:active { transform: scale(.985); }

/* ---------- Team und Anfahrt ---------- */
.c-team, .c-anfahrt { align-items: center; }
.c-team .foto img { aspect-ratio: 4 / 5; max-height: 34rem; }
.c-anfahrt .foto img { aspect-ratio: 5 / 3; }
.foto.c-enthuellen { overflow: hidden; border-radius: var(--ecke); }

/* ---------- Schritte: Linie oben, Nummer darunter ---------- */
.c-schritte { list-style: none; counter-reset: c-schritt; margin: 2rem 0 0; padding: 0; display: grid; gap: 2rem; }
@media (min-width: 52rem) { .c-schritte { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.c-schritte li { counter-increment: c-schritt; position: relative; padding-top: 3.25rem; border-top: 3px solid var(--linie); }
.c-schritte li::before {
  content: counter(c-schritt, decimal-leading-zero); position: absolute; top: .9rem; left: 0;
  font-size: 1.375rem; font-weight: 800; color: var(--moos); font-variant-numeric: tabular-nums;
}
/* Moos-Linie über der grauen; ohne Bewegung sofort voll */
.c-schritte li::after {
  content: ""; position: absolute; top: -3px; left: 0; right: 0; height: 3px; background: var(--moos);
  transform-origin: 0 50%;
}
.c-schritte h3 { margin-bottom: .25rem; }
.c-schritte p { margin: 0; font-size: var(--s-0); }

/* ---------- Drücken und Hover ---------- */
.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); }
@media (hover: hover) and (pointer: fine) {
  .c-leistung:hover { border-color: var(--moos); background: var(--salbei); }
  .c-leistung:hover img { transform: scale(1.05); }
  .c-leistung:hover .c-leistung__titel { text-decoration: underline; text-underline-offset: .15em; }
  .c-kopieren:hover { border-color: var(--moos); }
}
@media (hover: none) {
  .knopf:hover { background: var(--moos); border-color: var(--moos); }
  .knopf--rand:hover { background: var(--kalkweiss); color: var(--moos); }
}

/* ---------- Einstieg: kurz und gestaffelt (nur beim ersten Bild der Seite) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .c-buehne__text > * { animation: c-auftauchen 500ms var(--ease-out) both; }
  .c-buehne__text > :nth-child(2) { animation-delay: 60ms; }
  .c-buehne__text > :nth-child(3) { animation-delay: 120ms; }
  .c-praxis { animation: c-auftauchen 600ms var(--ease-out) 180ms both; }
}
@media (prefers-reduced-motion: reduce) {
  .c-buehne__text, .c-praxis { animation: c-einblenden 250ms ease both !important; }
}
@keyframes c-auftauchen { from { opacity: 0; transform: translateY(8px); } }
@keyframes c-einblenden { from { opacity: 0; } }

/* ---------- Beim Scrollen (Klasse .bewegt setzt startseite-c.js, nur ohne Bewegungs-Reduktion) ---------- */
.bewegt [data-zeigen]:not([data-zeigen="gestaffelt"]) {
  opacity: 0; transform: translateY(12px);
  transition: opacity 500ms ease, transform 500ms var(--ease-out);
}
.bewegt [data-zeigen="gestaffelt"] > * {
  opacity: 0; transform: translateY(12px);
  transition: opacity 400ms ease, transform 500ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.bewegt [data-zeigen].ist-da, .bewegt [data-zeigen="gestaffelt"].ist-da > * { opacity: 1; transform: none; }

/* Fotos öffnen sich von oben nach unten (clip-path am Bild, beobachtet wird die figure) */
.bewegt .c-enthuellen[data-zeigen] { opacity: 1; transform: none; }
.bewegt .c-enthuellen img { clip-path: inset(0 0 100% 0); transition: clip-path 900ms var(--ease-in-out); }
.bewegt .c-enthuellen.ist-da img { clip-path: inset(0); }

/* Schritt-Linien ziehen sich nacheinander */
.bewegt .c-schritte li::after { transform: scaleX(0); transition: transform 700ms var(--ease-in-out); transition-delay: calc(200ms + var(--i, 0) * 150ms); }
.bewegt .c-schritte.ist-da li::after { transform: scaleX(1); }