/* =====================================================================
   Praxis Rietberg — Zahnmedizin, Zug
   Haltung: ruhig, sorgfältig, zugewandt. Eine Praxis, in der man sich
   nicht klein fühlt. Deshalb: EINE ruhige Spalte, in die Fotografien
   über die volle Breite einbrechen — kein Kachelraster, keine Karten-
   wüste. Die Farbe trägt (Tannengrün, ca. 40 % der Fläche), Aprikose
   setzt genau dort einen Punkt, wo etwas zu tun ist.

   Systemdokumentation: ../DESIGN.md
   Belegte Skill-Änderungen: ../_SKILLS-ANGEWENDET.md
   ===================================================================== */

:root {
  /* ---- Farbe (OKLCH, Strategie „Committed") ----------------------- */
  --tanne: oklch(0.33 0.055 158);
  --tanne-tief: oklch(0.235 0.045 158);
  --tanne-hell: oklch(0.52 0.06 158);
  --grund: oklch(0.985 0.006 152);
  --flaeche: oklch(0.955 0.013 152);
  --flaeche-2: oklch(0.915 0.018 152);
  --tinte: oklch(0.245 0.022 160);
  --leise: oklch(0.455 0.022 160);
  --linie: oklch(0.885 0.014 152);
  --aprikose: oklch(0.7 0.155 52);
  --aprikose-tief: oklch(0.58 0.15 47);

  /* Gemessene Kontrast-Korrekturen, siehe _SKILLS-ANGEWENDET.md:
     --platzhalter  5.24:1 statt 3.76:1 (WCAG 1.4.3)
     --feldrand     3.20:1 statt 1.35:1 (WCAG 1.4.11, Bedienelement-Rand)
     --aprikose-hell 5.72:1 auf Tannengrün statt 4.24:1               */
  --platzhalter: oklch(0.52 0.016 160);
  --feldrand: oklch(0.64 0.02 152);
  --aprikose-hell: oklch(0.78 0.15 55);

  /* ---- Schrift ----------------------------------------------------- */
  --serif: 'Faustina', Georgia, 'Times New Roman', serif;
  --grotesk: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Modulare Stufen, Verhältnis ≈ 1.6 im Display-Bereich.
     Vorher lag h3 nur 1.36× über dem Fliesstext — zu flach, um als
     eigene Ebene gelesen zu werden. */
  --s-1: clamp(2.4rem, 1.9rem + 2.6vw, 4.4rem);
  --s-2: clamp(1.85rem, 1.55rem + 1.55vw, 2.75rem);
  --s-3: clamp(1.3rem, 1.18rem + 0.6vw, 1.72rem);
  --s-satz: clamp(1.45rem, 1.2rem + 1.25vw, 2.15rem);
  --s-klein: 0.9rem;
  --s-label: 0.78rem;

  /* ---- Rhythmus (4-px-Leiter statt freihändiger clamp-Werte) ------- */
  --r1: 0.5rem;
  --r2: 0.75rem;
  --r3: 1rem;
  --r4: 1.5rem;
  --r5: 2rem;
  --r6: clamp(2rem, 5vw, 3rem);
  --r7: clamp(2.5rem, 6vw, 4rem);
  --luft: clamp(3.5rem, 9vw, 8rem);
  --rand: clamp(1.25rem, 5vw, 3rem);
  --mass: 68rem;

  /* ---- Ebenen ------------------------------------------------------ */
  --z-band: 10;
  --z-kopf: 40;
  --z-leiste: 45;
  --z-vorhang: 60;
  --z-meldung: 80;

  /* ---- Bewegung ---------------------------------------------------- */
  --weich: cubic-bezier(0.22, 1, 0.36, 1);
  --t-schnell: 180ms;
  --t-mittel: 280ms;
  --t-raus: 160ms;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--grotesk);
  font-size: clamp(1.02rem, 0.97rem + 0.28vw, 1.14rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  padding-bottom: 4.3rem;
}

img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
}

/* Jedes Bedienelement bekommt einen sichtbaren Tastaturfokus — vorher
   hatten nur .knopf und die Formularfelder einen. */
:focus-visible {
  outline: 2px solid var(--aprikose-tief);
  outline-offset: 3px;
  border-radius: 2px;
}
.auf-dunkel :focus-visible,
.band :focus-visible,
.band-tief :focus-visible,
.pakete :focus-visible,
.fuss :focus-visible,
.vorhang :focus-visible {
  outline-color: var(--aprikose-hell);
}
a,
button,
summary,
label {
  touch-action: manipulation;
}

/* ---------- Sprungmarke -------------------------------------------- */

.sprung {
  position: absolute;
  left: var(--rand);
  top: -4rem;
  z-index: var(--z-meldung);
  display: inline-flex;
  align-items: center;
  min-height: 2.9rem;
  padding: 0.6rem 1.1rem;
  background: var(--tanne);
  color: oklch(0.98 0.01 152);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: top var(--t-schnell) var(--weich);
}
/* Bewusst :focus statt :focus-visible — eine Sprungmarke soll auch dann
   auftauchen, wenn der Fokus programmatisch dorthin gesetzt wird. */
.sprung:focus {
  top: 0.5rem;
}

/* ---------- Typografie ---------------------------------------------- */

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 0;
  text-wrap: balance;
}
h1 {
  font-size: var(--s-1);
}
h2 {
  font-size: var(--s-2);
  line-height: 1.12;
}
h3 {
  font-size: var(--s-3);
  line-height: 1.2;
  letter-spacing: -0.012em;
}
p {
  margin: 0 0 1.1em;
  text-wrap: pretty;
}
p:last-child {
  margin-bottom: 0;
}

.mass {
  width: 100%;
  max-width: var(--mass);
  margin-inline: auto;
  padding-inline: var(--rand);
}
.eng {
  max-width: 44rem;
}
/* `mass` und `eng` am selben Element: der Rahmen bleibt breit,
   die Zeilen werden schmal — sonst rückt der ganze Block nach rechts. */
.mass.eng {
  max-width: var(--mass);
}
.mass.eng > * {
  max-width: 44rem;
}
.text-mass {
  max-width: 62ch;
}
.abschnitt {
  padding-block: var(--luft);
}
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Knöpfe ------------------------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.8rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--grotesk);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--t-mittel) var(--weich),
    color var(--t-mittel) var(--weich),
    border-color var(--t-mittel) var(--weich),
    transform var(--t-schnell) var(--weich);
}
/* Druckzustand: vorher gab es gar keinen. Ohne ihn fühlt sich ein
   Knopf auf dem Telefon tot an, weil :hover dort nie greift. */
.knopf:active {
  transform: translateY(0) scale(0.985);
  transition-duration: var(--t-raus);
}
.knopf[aria-busy='true'] {
  cursor: progress;
  opacity: 0.72;
}
.knopf-voll {
  background: var(--aprikose);
  color: oklch(0.22 0.05 50);
}
.knopf-voll:hover {
  background: oklch(0.76 0.155 55);
  transform: translateY(-2px);
}
.knopf-dunkel {
  background: var(--tanne);
  color: oklch(0.98 0.01 152);
}
.knopf-dunkel:hover {
  background: var(--tanne-tief);
  transform: translateY(-2px);
}
.knopf-linie {
  border-color: color-mix(in oklch, var(--tinte) 34%, transparent);
  color: var(--tinte);
}
.knopf-linie:hover {
  border-color: var(--tanne);
  background: var(--flaeche);
}
.auf-dunkel .knopf-linie,
.pakete .knopf-linie {
  border-color: color-mix(in oklch, white 45%, transparent);
  color: oklch(0.97 0.01 152);
  background: color-mix(in oklch, black 12%, transparent);
}
.auf-dunkel .knopf-linie:hover,
.pakete .knopf-linie:hover {
  border-color: white;
  background: color-mix(in oklch, white 12%, transparent);
}

/* ---------- Bilder -------------------------------------------------- */

.bild {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--flaeche-2);
}
.bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.r-16x9 {
  aspect-ratio: 16 / 9;
}
.r-4x3 {
  aspect-ratio: 4 / 3;
}
.r-1x1 {
  aspect-ratio: 1 / 1;
}
.r-4x5 {
  aspect-ratio: 4 / 5;
}
.r-3x4 {
  aspect-ratio: 3 / 4;
}
.r-hoch {
  aspect-ratio: 5 / 7;
}

/* Passermarken um ein Portrait — Struktur übernommen von der 21st.dev-
   Komponente „Testimonials Section" (@sshahaider), dort als crosshair
   mask lines. Hier in Haarlinienstärke und Praxisfarbe. */
.passer {
  position: relative;
  z-index: 0;
}
/* Die Linien liegen UNTER dem Bild: sichtbar bleibt nur der Überstand
   im Weissraum. Läuft die Linie über das Foto, verschwindet sie auf
   dunklen Motiven und wirkt auf hellen wie ein Kratzer. */
.passer::before,
.passer::after {
  content: '';
  position: absolute;
  z-index: 0;
  background: color-mix(in oklch, var(--tinte) 30%, transparent);
  pointer-events: none;
}
.passer > .bild {
  position: relative;
  z-index: 1;
}
.passer::before {
  left: -1.1rem;
  right: -1.1rem;
  top: 2.75rem;
  height: 1px;
}
.passer::after {
  top: -1.1rem;
  bottom: -1.1rem;
  left: 2.75rem;
  width: 1px;
}

/* ---------- Kopf ---------------------------------------------------- */

.rueckbalken {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 2.9rem;
  padding: 0.55rem 1rem;
  background: oklch(0.19 0.02 160);
  color: oklch(0.83 0.015 152);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--t-schnell) var(--weich);
}
.rueckbalken:hover {
  color: white;
}

.kopf {
  position: sticky;
  top: 0;
  z-index: var(--z-kopf);
  background: color-mix(in oklch, var(--grund) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linie);
}
.kopf-in {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4rem;
  padding-block: 0.6rem;
}
.marke {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 2.9rem;
  margin-right: auto;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.marke small {
  font-family: var(--grotesk);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tanne-hell);
  margin-top: 0.32rem;
}
.menue {
  display: none;
}
.kopf .knopf {
  display: none;
}

.burger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border: 1px solid var(--feldrand);
  border-radius: 2px;
  background: transparent;
  color: var(--tinte);
  cursor: pointer;
  transition: background var(--t-schnell) var(--weich);
}
.burger:active {
  background: var(--flaeche);
}
.burger span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: currentColor;
  transition:
    transform var(--t-mittel) var(--weich),
    opacity var(--t-raus) var(--weich);
}
.burger span + span {
  margin-top: 5px;
}
.burger[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.burger[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}
.burger[aria-expanded='true'] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.vorhang {
  position: fixed;
  inset: 0;
  z-index: var(--z-vorhang);
  display: grid;
  align-content: center;
  gap: 0.25rem;
  padding: 5rem var(--rand) 2rem;
  background: var(--tanne-tief);
  color: oklch(0.97 0.012 152);
  transform: translateY(-100%);
  /* Hinein langsam, hinaus kürzer — sonst fühlt sich das Schliessen
     träge an (exit ≈ 60 % von enter). */
  transition: transform var(--t-raus) var(--weich);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.vorhang[data-offen='ja'] {
  transform: translateY(0);
  transition-duration: 460ms;
}
.vorhang a {
  display: block;
  padding: 0.85rem 0;
  border-bottom: 1px solid color-mix(in oklch, white 16%, transparent);
  font-family: var(--serif);
  font-size: 1.9rem;
  text-decoration: none;
}
.vorhang a[aria-current='page'] {
  color: var(--aprikose-hell);
}
.vorhang .vorhang-schluss {
  border: 0;
  margin-top: 1.6rem;
  font-family: var(--grotesk);
  font-size: var(--s-klein);
  color: oklch(0.82 0.02 152);
}
.vorhang .knopf {
  margin-top: 1.2rem;
  width: 100%;
}

/* ---------- Auftritt: siehe .start am Dateiende ---------------------
   Der alte Hero (ganzflächiges Bild, Text darüber, zwei Knöpfe) ist
   ersetzt. Er war die generische Lösung: dasselbe Bild-mit-Text-drauf,
   das jede zweite Praxisseite hat. Der neue steht unten bei ".start".
   -------------------------------------------------------------------- */

.auftritt-tun {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r2);
  margin-top: var(--r5);
}
.auftritt-fakten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r1) 1.6rem;
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid color-mix(in oklch, white 22%, transparent);
  font-size: var(--s-klein);
  color: oklch(0.9 0.015 152);
  font-variant-numeric: tabular-nums;
}
.auftritt-fakten b {
  font-weight: 600;
  color: white;
}

/* ---------- Textblöcke ---------------------------------------------- */

.satz {
  font-family: var(--serif);
  font-size: var(--s-satz);
  line-height: 1.3;
  letter-spacing: -0.015em;
  max-width: 28ch;
}
.hinweis {
  font-size: var(--s-klein);
  color: var(--leise);
}
.trenner {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--linie);
}

/* ---------- Leistungen: gestufte Liste, kein Kachelraster ---------- */

.leistungen {
  display: grid;
  gap: 0;
  margin-top: var(--r7);
  border-top: 1px solid var(--linie);
}
.leistung {
  display: grid;
  gap: 1.2rem;
  padding-block: clamp(1.8rem, 5vw, 2.8rem);
  border-bottom: 1px solid var(--linie);
}
.leistung-kopf {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin-bottom: 0.7rem;
}
.leistung p {
  color: var(--leise);
  max-width: 58ch;
}
.leistung .bild {
  border-radius: 2px;
}

/* ---------- Ablauf mit gezeichneter Linie --------------------------- */

.ablauf {
  position: relative;
  margin-top: var(--r7);
  padding-left: 2.6rem;
}
.ablauf-linie {
  position: absolute;
  left: 0.85rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 2px;
  background: var(--linie);
}
.ablauf-linie i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: var(--tanne);
  transform-origin: top;
  transform: scaleY(var(--fortschritt, 1));
}
.schritt {
  position: relative;
  padding-block: 0 var(--r6);
}
.schritt:last-child {
  padding-bottom: 0;
}
.schritt::before {
  content: '';
  position: absolute;
  left: -2.6rem;
  top: 0.45rem;
  width: 0.85rem;
  height: 0.85rem;
  margin-left: 0.42rem;
  border-radius: 50%;
  background: var(--grund);
  border: 2px solid var(--tanne);
}
.schritt h3 {
  margin-bottom: 0.4rem;
}
.schritt p {
  color: var(--leise);
  max-width: 54ch;
}

/* ---------- Band in Tannengrün -------------------------------------- */

.band {
  background: var(--tanne);
  color: oklch(0.97 0.012 152);
}
.band-tief {
  background: var(--tanne-tief);
  color: oklch(0.96 0.012 152);
}
.auf-dunkel {
  color: oklch(0.96 0.012 152);
}
.auf-dunkel p {
  color: oklch(0.88 0.015 152);
  line-height: 1.72;
}
.auf-dunkel .hinweis {
  color: oklch(0.8 0.015 152);
}
.karte .ablauf-linie {
  background: color-mix(in oklch, var(--tinte) 14%, transparent);
}

/* ---------- Bewertungsspiegel (Vertrauens-Datenblock) ---------------
   Aufbau nach dem Landing-Muster „Product Review/Ratings Focused"
   (ui-ux-pro-max, domain landing): Gesamtnote → Verteilung → einzelne
   Stimmen. Die Verteilung ist echte Datenvisualisierung, deshalb mit
   Tabellenziffern, sichtbaren Beschriftungen und Textalternative —
   nicht nur mit Farbe erzählt.                                       */

.spiegel {
  display: grid;
  gap: var(--r6);
  margin-top: var(--r7);
  padding-bottom: var(--r6);
  border-bottom: 1px solid color-mix(in oklch, white 20%, transparent);
}
.spiegel-note {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--serif);
  font-size: clamp(3.2rem, 2.4rem + 3.2vw, 4.6rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.auf-dunkel .spiegel-note {
  color: oklch(0.97 0.012 152);
  margin: 0;
}
.spiegel-note span {
  font-family: var(--grotesk);
  font-size: 1rem;
  font-weight: 600;
  color: oklch(0.86 0.015 152);
  letter-spacing: 0;
}
.auf-dunkel .spiegel-quelle {
  margin: 0.7rem 0 0;
  font-size: var(--s-klein);
  color: oklch(0.85 0.015 152);
}
.balken {
  display: grid;
  gap: 0.4rem;
  align-content: start;
}
.balken > div {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) 2.9rem;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
  color: oklch(0.88 0.015 152);
}
.balken > div > span:first-child {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  color: oklch(0.86 0.14 88);
}
.balken i {
  display: block;
  height: 0.4rem;
  background: color-mix(in oklch, white 16%, transparent);
  overflow: hidden;
}
/* Füllung als echtes Element, nicht als ::after — Pseudo-Elemente
   lassen sich von GSAP nicht ansprechen. */
.balken i > span {
  display: block;
  height: 100%;
  width: var(--anteil, 0%);
  min-width: 3px;
  background: var(--aprikose-hell);
  transform-origin: left center;
}
.balken b {
  text-align: right;
  font-weight: 600;
  color: white;
}

/* ---------- Stimmen -------------------------------------------------
   Vorher: drei identische Karten nebeneinander — genau das Raster, das
   eine Seite maschinell aussehen lässt. Jetzt gestufte Vollbreiten-
   Zeilen mit Absenderblock über dem Zitat und Sternen danach; Struktur
   übernommen von der 21st.dev-Komponente „Testimonial Basic"
   (@uilayout.contact), Farbe und Typografie hierher übersetzt.       */

.stimmen {
  display: grid;
  margin-top: var(--r6);
}
.stimme {
  display: grid;
  gap: var(--r3);
  padding-block: var(--r6);
  border-bottom: 1px solid color-mix(in oklch, white 20%, transparent);
  margin: 0;
}
.stimme:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.stimme-wer {
  display: flex;
  align-items: center;
  gap: var(--r3);
}
.stimme-name {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}
.stimme-name b {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.stimme-name span {
  font-size: 0.8rem;
  color: oklch(0.84 0.015 152);
}
.stimme blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.18rem, 1.08rem + 0.5vw, 1.48rem);
  line-height: 1.45;
  letter-spacing: -0.008em;
  max-width: 46ch;
}
.stimme blockquote em {
  font-style: normal;
  color: var(--aprikose-hell);
}
.sterne {
  display: flex;
  gap: 0.18rem;
  color: oklch(0.86 0.14 88);
}
.sterne svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: currentColor;
}
/* ---------- Zahlenreihe --------------------------------------------- */

.reihe {
  display: grid;
  gap: 1.6rem;
  margin-top: var(--r6);
}
.reihe > div {
  padding-top: var(--r3);
  border-top: 2px solid var(--tanne);
}
.reihe dt {
  font-family: var(--serif);
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.9rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.reihe dd {
  margin: 0.5rem 0 0;
  font-size: 0.92rem;
  color: var(--leise);
}
.auf-dunkel .reihe > div {
  border-color: var(--aprikose);
}
.auf-dunkel .reihe dd {
  color: oklch(0.86 0.015 152);
}

/* ---------- Vorher/Nachher-Regler ------------------------------------
   Mechanik übernommen von der 21st.dev-Komponente „Image Comparison"
   (@ibelick / motion-primitives): zwei übereinanderliegende Bilder,
   das obere per clip-path beschnitten, Trennlinie am Zeiger.
   Hier ohne React gebaut und über ein echtes <input type="range">
   gesteuert — damit funktioniert es auch mit Tastatur, Screenreader
   und Touch, und ohne JavaScript steht der Regler in der Mitte.     */

.vergleich {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 2px;
  background: var(--flaeche-2);
  --pos: 50%;
}
.vergleich > .bild {
  aspect-ratio: 16 / 10;
}
.vergleich-oben {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.vergleich-oben img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vergleich-linie {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: oklch(0.99 0 0);
  box-shadow: 0 0 0 1px color-mix(in oklch, black 22%, transparent);
  pointer-events: none;
}
.vergleich-knauf {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  background: oklch(0.99 0 0);
  color: var(--tanne-tief);
  box-shadow: 0 2px 14px color-mix(in oklch, black 32%, transparent);
  transition: transform var(--t-schnell) var(--weich);
}
.vergleich-knauf svg {
  width: 1.1rem;
  height: 1.1rem;
}
.vergleich-regler {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  touch-action: pan-y;
}
.vergleich-regler::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 3rem;
  height: 100%;
}
.vergleich-regler::-moz-range-thumb {
  width: 3rem;
  height: 100%;
  border: 0;
  background: transparent;
}
.vergleich-regler:focus-visible ~ .vergleich-linie .vergleich-knauf {
  outline: 3px solid var(--aprikose-tief);
  outline-offset: 3px;
}
.vergleich:hover .vergleich-knauf {
  transform: translate(-50%, -50%) scale(1.06);
}
.vergleich-schild {
  position: absolute;
  bottom: 0.85rem;
  padding: 0.3rem 0.7rem;
  background: color-mix(in oklch, black 62%, transparent);
  color: oklch(0.97 0.01 152);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
}
.vergleich-schild[data-seite='links'] {
  left: 0.85rem;
}
.vergleich-schild[data-seite='rechts'] {
  right: 0.85rem;
}
.vergleich-hinweis {
  margin-top: 0.7rem;
  font-size: var(--s-klein);
  color: var(--leise);
}

/* ---------- Formular (Struktur nach 21st.dev „Contact Form") -------- */

.formular {
  display: grid;
  gap: 1.15rem;
}
.feld {
  display: grid;
  gap: 0.4rem;
}
.feld > label {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.005em;
}
.feld input,
.feld select,
.feld textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 0.9rem;
  /* Vorher --linie: 1.35:1 gegen die Seitenfläche. Der Rand eines
     Bedienelements braucht 3:1 (WCAG 1.4.11) — sonst sieht man das
     Feld auf einem hellen Telefondisplay schlicht nicht. */
  border: 1px solid var(--feldrand);
  border-radius: 2px;
  background: var(--grund);
  color: var(--tinte);
  font-family: inherit;
  font-size: 1rem;
  transition:
    border-color var(--t-schnell),
    box-shadow var(--t-schnell);
}
.feld textarea {
  min-height: 7rem;
  resize: vertical;
}
.feld input::placeholder,
.feld textarea::placeholder {
  color: var(--platzhalter);
}
.feld input:hover,
.feld select:hover,
.feld textarea:hover {
  border-color: var(--tanne-hell);
}
.feld input:focus-visible,
.feld select:focus-visible,
.feld textarea:focus-visible {
  outline: none;
  border-color: var(--tanne);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--tanne) 24%, transparent);
}
.feld[data-fehler] input,
.feld[data-fehler] select,
.feld[data-fehler] textarea {
  border-color: oklch(0.55 0.19 27);
  background: oklch(0.985 0.012 27);
}
.feld .fehler {
  display: none;
  gap: 0.4rem;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: oklch(0.5 0.19 27);
}
.feld[data-fehler] .fehler {
  display: flex;
}
/* Fehler nicht allein über Farbe erzählen. */
.feld .fehler::before {
  content: '';
  flex: 0 0 auto;
  width: 0.95rem;
  height: 0.95rem;
  background: currentColor;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.feld-paar {
  display: grid;
  gap: 1.15rem;
}
.formular .knopf {
  width: 100%;
  margin-top: 0.3rem;
}
.formular .hinweis {
  margin: 0;
}
.formular a {
  color: var(--tanne);
  font-weight: 600;
}

.danke {
  display: none;
  padding: clamp(1.8rem, 5vw, 2.6rem);
  border: 1px solid var(--tanne);
  border-radius: 2px;
  background: var(--flaeche);
}
.danke[data-an='ja'] {
  display: block;
}
.danke svg {
  color: var(--tanne);
}
.danke h3 {
  margin: 1rem 0 0.5rem;
}
.danke p {
  color: var(--leise);
  margin: 0;
}
.haken {
  stroke-dasharray: 48;
  stroke-dashoffset: 0;
}
.danke[data-an='ja'] .haken {
  animation: haken 0.7s var(--weich) 0.1s both;
}
@keyframes haken {
  from {
    stroke-dashoffset: 48;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* ---------- Kontaktkarte -------------------------------------------- */

.karte {
  padding: clamp(1.6rem, 4vw, 2.2rem);
  border: 1px solid var(--linie);
  border-radius: 2px;
  background: var(--flaeche);
}
.zeiten {
  display: grid;
  gap: 0;
  margin: 1rem 0 0;
}
.zeiten div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--linie);
  font-size: 0.94rem;
}
.zeiten div:last-child {
  border-bottom: 0;
}
.zeiten dt {
  font-weight: 600;
}
.zeiten dd {
  margin: 0;
  color: var(--leise);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
/* Auf schmalen Telefonen reisst „07:30 – 12:00 · 13:30 – 18:00" sonst
   mitten in der zweiten Zeitspanne um. Lieber sauber stapeln. */
@media (max-width: 30rem) {
  .zeiten div {
    display: grid;
    gap: 0.1rem;
    justify-content: stretch;
  }
  .zeiten dd {
    text-align: left;
  }
}
/* Der Balken lag auf --tanne; Aprikose darauf ergab 4.24:1 und fiel
   damit durch. Auf --tanne-tief sind es 5.85:1, ohne die Farbe zu
   verlieren. */
.notfall {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 1.4rem;
  padding: 1rem 1.2rem;
  background: var(--tanne-tief);
  color: oklch(0.96 0.012 152);
  border-radius: 2px;
}
.notfall a {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 2.75rem;
  min-width: 2.75rem;
  font-weight: 700;
  color: var(--aprikose);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.notfall a:hover {
  color: var(--aprikose-hell);
}

/* ---------- Pakete (Struktur nach 21st.dev „Pricing Section 1") ---- */

.pakete {
  background: oklch(0.17 0.018 160);
  color: oklch(0.95 0.01 152);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.pakete-kopf {
  max-width: 42rem;
}
.pakete-kopf p {
  color: oklch(0.8 0.015 152);
  line-height: 1.72;
}
.paketreihe {
  display: grid;
  gap: 1.1rem;
  margin-top: var(--r6);
}
.paket {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 4vw, 2rem);
  border: 1px solid oklch(0.32 0.02 160);
  border-radius: 3px;
  background: oklch(0.21 0.018 160);
  transition:
    border-color var(--t-mittel) var(--weich),
    background var(--t-mittel) var(--weich);
}
.paket:hover {
  border-color: oklch(0.42 0.03 160);
  background: oklch(0.235 0.02 160);
}
.paket[data-beliebt] {
  border-color: var(--aprikose);
  background: oklch(0.235 0.022 160);
}
.paket-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.paket h3 {
  font-size: 1.3rem;
}
.marke-beliebt {
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--aprikose);
  color: oklch(0.22 0.05 50);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.paket .preis {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 1.1rem 0 0.3rem;
  font-family: var(--serif);
  font-size: clamp(2.1rem, 1.7rem + 1.6vw, 2.9rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.paket .preis span {
  font-family: var(--grotesk);
  font-size: 0.85rem;
  font-weight: 600;
  color: oklch(0.75 0.015 152);
}
.paket > p {
  color: oklch(0.78 0.015 152);
  font-size: 0.94rem;
  line-height: 1.7;
}
.paket ul {
  list-style: none;
  margin: 1.2rem 0 1.6rem;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  font-size: 0.94rem;
}
.paket li {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: 0.6rem;
  color: oklch(0.85 0.015 152);
}
.paket li::before {
  content: '';
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.28rem;
  background: var(--aprikose);
  clip-path: polygon(14% 46%, 6% 58%, 40% 90%, 96% 22%, 86% 12%, 39% 68%);
}
.paket .knopf {
  margin-top: auto;
  width: 100%;
}

/* ---------- Fuss ----------------------------------------------------- */

.fuss {
  background: oklch(0.128 0.014 160);
  color: oklch(0.82 0.015 152);
  padding-block: clamp(2.5rem, 5vw, 3.5rem) 1.6rem;
}
.fuss .marke {
  color: white;
  margin-bottom: 1rem;
}
.fuss-raster {
  display: grid;
  gap: 2.5rem;
}
.fuss h4 {
  margin: 0 0 0.9rem;
  font-family: var(--grotesk);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: oklch(0.68 0.02 152);
}
.fuss ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fuss li a,
.fuss .zeile a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  text-decoration: none;
  color: oklch(0.85 0.015 152);
  transition: color var(--t-schnell) var(--weich);
}
.fuss a:hover {
  color: white;
}
.fuss-schluss {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid oklch(0.3 0.02 160);
  font-size: 0.84rem;
  color: oklch(0.66 0.02 152);
}

/* ---------- Handleiste unten ----------------------------------------- */

.handleiste {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-leiste);
  display: flex;
  gap: var(--r1);
  padding: 0.55rem 0.7rem calc(0.55rem + env(safe-area-inset-bottom));
  background: color-mix(in oklch, var(--grund) 94%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--linie);
}
.handleiste .knopf {
  flex: 1;
  min-height: 3rem;
  padding-inline: 0.6rem;
  font-size: 0.95rem;
}

/* ---------- Seitenkopf der Unterseiten ------------------------------- */

.seitenkopf {
  padding-block: clamp(2.5rem, 7vw, 4.5rem) var(--r6);
  border-bottom: 1px solid var(--linie);
}
.seitenkopf p {
  max-width: 56ch;
  margin-top: 1.2rem;
  color: var(--leise);
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
}
.brotkrume {
  margin-bottom: 1.2rem;
  font-size: 0.82rem;
  color: var(--leise);
}
.brotkrume a {
  color: var(--tanne);
  text-decoration: none;
  font-weight: 600;
}
.brotkrume a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Katalog (Behandlungen) ----------------------------------- */

.katalog {
  display: grid;
  gap: var(--r7);
}
.katalog-index {
  display: none;
}
.eintrag {
  padding-top: var(--r6);
  border-top: 2px solid var(--tanne);
  scroll-margin-top: 6rem;
}
.eintrag:first-child {
  padding-top: 0;
  border-top: 0;
}
.eintrag > .bild {
  margin-block: 1.6rem;
  border-radius: 2px;
}
.eintrag p {
  color: var(--leise);
  max-width: 62ch;
}
.eintrag h2 {
  font-size: clamp(1.7rem, 1.35rem + 1.5vw, 2.4rem);
}
.fakten {
  display: grid;
  gap: 0;
  margin: 1.6rem 0 0;
  border-top: 1px solid var(--linie);
}
.fakten > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--linie);
  font-size: 0.94rem;
}
.fakten dt {
  color: var(--leise);
}
.fakten dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- Personen -------------------------------------------------- */

.personen {
  display: grid;
  gap: var(--r7);
  margin-top: var(--r6);
}
.person {
  display: grid;
  gap: var(--r4);
}
.person .bild {
  border-radius: 2px;
}
.person .rolle {
  margin-top: var(--r1);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tanne-hell);
}
.person p {
  color: var(--leise);
  max-width: 54ch;
  margin-top: 0.9rem;
}
.person .seit {
  display: inline-block;
  margin-top: 0.9rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--feldrand);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--leise);
}

/* ---------- Mosaik ---------------------------------------------------- */

.mosaik {
  display: grid;
  gap: var(--r2);
  margin-top: var(--r6);
}
.mosaik .bild {
  border-radius: 2px;
}

/* ---------- Preistafel ------------------------------------------------ */

.tafel {
  margin-top: var(--r6);
  border-top: 2px solid var(--tinte);
}
.tafel-zeile {
  display: grid;
  gap: 0.35rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--linie);
  transition: background var(--t-schnell) var(--weich);
}
.tafel-zeile:hover {
  background: var(--flaeche);
}
.tafel-zeile .kopfzeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.tafel-zeile h3 {
  font-size: 1.12rem;
  font-family: var(--grotesk);
  font-weight: 600;
  letter-spacing: 0;
}
.tafel-zeile .betrag {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tafel-zeile p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--leise);
  max-width: 58ch;
}
.tafel-fuss {
  margin-top: 1.2rem;
  font-size: 0.86rem;
  color: var(--leise);
}

details.frage {
  border-bottom: 1px solid var(--linie);
}
details.frage summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.4rem;
  padding: 0.9rem 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: color var(--t-schnell) var(--weich);
}
details.frage summary:hover {
  color: var(--tanne);
}
.auf-dunkel details.frage summary:hover {
  color: var(--aprikose-hell);
}
details.frage summary::-webkit-details-marker {
  display: none;
}
details.frage summary::after {
  content: '+';
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--tanne);
  transition: transform var(--t-mittel) var(--weich);
}
.auf-dunkel details.frage summary::after {
  color: var(--aprikose-hell);
}
details.frage[open] summary::after {
  content: '\2013';
}
details.frage p {
  margin: 0 0 1.2rem;
  color: var(--leise);
  max-width: 62ch;
}
.auf-dunkel details.frage {
  border-bottom-color: color-mix(in oklch, white 20%, transparent);
}
.auf-dunkel details.frage p {
  color: oklch(0.88 0.015 152);
}

/* ---------- Kontaktraster --------------------------------------------- */

.kontaktraster {
  display: grid;
  gap: var(--r6);
  margin-top: var(--r6);
  align-items: start;
}
.streifen {
  height: 0.75rem;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--linie),
    var(--linie) 1px,
    transparent 1px,
    transparent 7px
  );
  border-inline: 1px solid var(--linie);
}

/* ---------- Bewegung -------------------------------------------------- */

.tritt-auf {
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Ab Tablet ------------------------------------------------- */

@media (min-width: 46rem) {
  .feld-paar {
    grid-template-columns: 1fr 1fr;
  }
  .leistung {
    grid-template-columns: 1fr 15rem;
    gap: var(--r6);
    align-items: start;
  }
  .leistung-text {
    order: -1;
  }
  .reihe {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--r5);
  }
  .spiegel {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: var(--r7);
    align-items: center;
  }
  .fuss-raster {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 3rem;
  }
  .paketreihe {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }
  .person {
    grid-template-columns: 16rem 1fr;
    gap: var(--r6);
    align-items: center;
  }
  .person:nth-child(even) {
    grid-template-columns: 1fr 16rem;
  }
  .person:nth-child(even) > .passer,
  .person:nth-child(even) > .bild {
    order: 2;
  }
  .mosaik {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 8rem;
  }
  .mosaik .bild:nth-child(1) {
    grid-column: span 4;
    grid-row: span 2;
    aspect-ratio: auto;
  }
  .mosaik .bild:nth-child(2) {
    grid-column: span 2;
    grid-row: span 1;
    aspect-ratio: auto;
  }
  .mosaik .bild:nth-child(3) {
    grid-column: span 2;
    grid-row: span 1;
    aspect-ratio: auto;
  }
  .mosaik .bild:nth-child(4) {
    grid-column: span 3;
    grid-row: span 2;
    aspect-ratio: auto;
  }
  .mosaik .bild:nth-child(5) {
    grid-column: span 3;
    grid-row: span 2;
    aspect-ratio: auto;
  }
  .kontaktraster {
    grid-template-columns: 1.15fr 0.85fr;
  }
  .tafel-zeile {
    grid-template-columns: 1fr 9rem;
    align-items: baseline;
    gap: var(--r4);
  }
  .tafel-zeile .kopfzeile {
    display: block;
  }
  .tafel-zeile .betrag {
    grid-row: 1 / span 2;
    grid-column: 2;
    text-align: right;
  }
  .tafel-zeile p {
    grid-column: 1;
  }
  /* Gestufte Zeilen mit wechselnder Seite — die Struktur, die die
     drei identischen Karten ersetzt hat. */
  .stimme {
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: var(--r7);
    align-items: start;
  }
  .stimme-block {
    display: grid;
    gap: var(--r4);
  }
  .stimme:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) 14rem;
  }
  .stimme:nth-child(even) .stimme-seite {
    order: 2;
  }
  .stimme-seite {
    display: grid;
    gap: var(--r3);
  }
}

@media (min-width: 56rem) {
  .katalog {
    grid-template-columns: 13rem 1fr;
    gap: 4rem;
    align-items: start;
  }
  .katalog-index {
    display: block;
    position: sticky;
    top: 6.5rem;
    padding-top: 0.2rem;
  }
  .katalog-index ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.1rem;
    border-left: 1px solid var(--linie);
  }
  .katalog-index a {
    display: block;
    padding: 0.5rem 0 0.5rem 1rem;
    margin-left: -1px;
    border-left: 1px solid transparent;
    font-size: 0.92rem;
    color: var(--leise);
    text-decoration: none;
    transition:
      color var(--t-schnell) var(--weich),
      border-color var(--t-schnell) var(--weich);
  }
  .katalog-index a:hover {
    color: var(--tinte);
    border-left-color: var(--tanne);
  }
  .katalog-liste {
    display: grid;
    gap: clamp(3rem, 6vw, 4.5rem);
  }
  .menue {
    display: flex;
    gap: 1.8rem;
    margin-right: 1.6rem;
  }
  .menue a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--leise);
    border-bottom: 1.5px solid transparent;
    transition:
      color var(--t-schnell) var(--weich),
      border-color var(--t-schnell) var(--weich);
  }
  .menue a:hover {
    color: var(--tinte);
    border-bottom-color: var(--linie);
  }
  .menue a[aria-current='page'] {
    color: var(--tinte);
    border-bottom-color: var(--aprikose);
  }
  .kopf .knopf {
    display: inline-flex;
    min-height: 2.75rem;
    padding-inline: 1.2rem;
    font-size: 0.92rem;
  }
  .burger,
  .handleiste {
    display: none;
  }
  body {
    padding-bottom: 0 !important;
  }
  .fuss li a {
    min-height: 2rem;
  }
  .leistung {
    grid-template-columns: 1fr 20rem;
  }
}

/* `display: grid` schlaegt das hidden-Attribut — deshalb ausdruecklich. */
[hidden] {
  display: none !important;
}


/* ---------------------------------------------------------------------
   Gemessene Einzelkorrekturen. Jede Textfarbe dieser Demo wurde auf
   allen fünf Seiten gegen ihren tatsächlichen Hintergrund gerechnet
   (`_kontrast.html`); diese Paare lagen unter der Schwelle. Der neue
   Wert ist der kleinste, der sie erreicht — die Farbe bleibt also so
   nah am Original wie möglich.
   --------------------------------------------------------------------- */
.pakete .hinweis {
  color: #737f78; /* vorher 2.65:1 */
}
.fuss .marke small {
  color: #5a806a; /* vorher 3.79:1 */
}


/* =====================================================================
   .start — der Auftritt als Terminkarte

   Warum so: eine Zahnarztseite verkauft keinen Raum, sie verkauft einen
   Termin. Links steht der Satz, rechts steht, was der Besucher wissen
   will, bevor er anruft — und darunter der eine Knopf. Kein zweiter
   Knopf, der davon ablenkt.

   Das Bild ist bewusst NICHT ganzflächig hinter dem Text: dafür müsste
   der Text abgedunkelt werden, und die dünnen Faustina-Haarstriche
   ersaufen darin. Es sitzt als ruhiges Band unter dem Satz.

   Bewegung: die Karte rastet Zeile für Zeile ein (siehe lauf.js).
   Sichtbarkeit hängt an keiner Zeile davon — ohne JavaScript steht
   hier alles offen.
   ===================================================================== */

.start {
  padding-block: calc(var(--r7) + 1rem) var(--r7);
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
}
.start-gitter {
  display: grid;
  gap: var(--r6);
  align-items: start;
}
.start .vorsatz {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--grotesk);
  font-size: var(--s-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tanne-hell);
}
.start .vorsatz::before {
  content: '';
  width: 1.7rem;
  height: 1px;
  background: var(--tanne-hell);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.55s var(--weich) 0.15s;
}
.start[data-da] .vorsatz::before {
  transform: scaleX(1);
}
.start h1 {
  margin: var(--r3) 0 0;
  max-width: 13ch;
  color: var(--tanne-tief);
  text-wrap: balance;
}
.start .lauf {
  max-width: 44ch;
  margin: var(--r4) 0 0;
  color: var(--leise);
  text-wrap: pretty;
}

/* ---- Die Terminkarte ------------------------------------------------ */
.start-karte {
  background: var(--grund);
  border: 1px solid var(--linie);
  padding: var(--r5);
}
.start-karte h2 {
  margin: 0;
  font-family: var(--grotesk);
  font-size: var(--s-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--leise);
}
.start-karte dl {
  margin: 0;
}
.start-zeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--r3);
  padding: var(--r3) 0;
  border-bottom: 1px solid var(--linie);
}
.start-zeile:last-of-type {
  border-bottom: 0;
}
.start-zeile dt {
  font-size: 0.97rem;
  color: var(--tinte);
}
.start-zeile dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--tanne);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.start-karte .knopf {
  margin-top: var(--r4);
  /* Ohne nowrap rechnet ein inline-flex-Knopf seine Wunschbreite zu
     klein und bricht um, obwohl daneben Platz frei ist. */
  white-space: nowrap;
}
.start-fuss {
  margin: var(--r2) 0 0;
  font-family: var(--grotesk);
  font-size: 0.82rem;
  text-align: center;
  color: var(--leise);
}

@media (min-width: 56rem) {
  /* Zweispaltig ab demselben Punkt, an dem die Navigation zur Leiste wird.
     Im Band 896–992 px ist die Karte schmaler: neben ihr steht dann noch
     der Satz, und 22 rem würden ihn auf eine Spalte Text zusammendrücken. */
  .start-gitter {
    grid-template-columns: 1fr 19rem;
    gap: var(--r6);
  }
  .start-karte {
    position: sticky;
    top: calc(var(--kopf-hoehe, 5rem) + var(--r3));
  }
}
@media (min-width: 62rem) {
  .start-gitter {
    grid-template-columns: 1fr 22rem;
    gap: var(--r7);
  }
}

@media (prefers-reduced-motion: reduce) {
  .start .vorsatz::before {
    transform: scaleX(1);
    transition: none;
  }
}

@media (max-width: 61.99rem) {
  .start {
    padding-bottom: calc(var(--r7) + 4.4rem + env(safe-area-inset-bottom));
  }
}


/* ---------- Preistafel: Lesbarkeit vor Spaltenzahl --------------------
   Drei Spalten erst, wenn je Karte genug Breite bleibt. Davor zwei.
   Zusätzlich darf die Preiszeile umbrechen: „einmalig" rutscht dann
   unter den Betrag, statt abgeschnitten zu werden.
   ---------------------------------------------------------------------- */
@media (min-width: 62rem) {
  .paketreihe {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.paket .preis {
  flex-wrap: wrap;
  row-gap: 0.15rem;
}
.paket .preis span {
  flex: 0 0 auto;
}

/* Alle drei Knöpfe gleich breit und auf einer Linie: sie füllen ihre
   Karte und sitzen an deren Fuss, unabhängig davon, wie lang der Text
   darüber ist. Vorher richtete sich jeder nach seiner eigenen
   Beschriftung — drei verschiedene Breiten nebeneinander. */
.paket .knopf {
  width: 100%;
  margin-top: auto;
}
.paket > p:last-of-type,
.paket ul {
  margin-bottom: var(--r4);
}


/* ---------- Navigation auf schmalen Schirmen --------------------------
   Kein Hamburger: die Abschnitte stehen als eigene Zeile unter der Marke,
   immer sichtbar und immer klickbar. Fünf Links hinter zwei Klicks zu
   verstecken kostet Aufrufe der Unterseiten — auf einer Seite mit fünf
   Seiten ist das der falsche Handel.

   Diese Regeln stehen bewusst HIER und nicht in basis.css: stil.css wird
   danach geladen und setzt .menue selbst auf display:none. Eine Regel in
   basis.css verliert die Kaskade — genau das ist vorhin passiert.
   ---------------------------------------------------------------------- */
@media (max-width: 55.99rem) {
  .kopf-in {
    flex-wrap: wrap;
    row-gap: 0;
  }
  .menue {
    display: flex;
    order: 3;
    width: 100%;
    gap: 0.15rem;
    margin: 0 calc(var(--rand) * -1);
    padding: 0 var(--rand);
    overflow-x: auto;
    scrollbar-width: none;
    border-top: 1px solid var(--linie);
  }
  .menue::-webkit-scrollbar {
    display: none;
  }
  .menue a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 0.7rem;
    font-family: var(--grotesk);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--leise);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    opacity: 1;
  }
  .menue a:first-child {
    padding-left: 0;
  }
  .menue a[aria-current='page'] {
    color: var(--tanne);
    font-weight: 600;
    border-bottom-color: var(--tanne);
  }
}


/* ---------- Der Mensch im Auftritt -----------------------------------
   Fünf Stockfotos von Behandlungsräumen sind hier durchgefallen: Bohrer,
   Instrumententabletts, kaltes Neonlicht. Bei „nimmt sich Zeit" arbeitet
   ein Gerätebild gegen die Aussage — man sieht genau das, wovor man
   Angst hat. Also kein Raum, sondern die Person, die sich die Zeit nimmt,
   im Hochformat neben dem Satz statt als Bildbanner darüber.
   ---------------------------------------------------------------------- */
.start-person {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  align-items: center;
  gap: var(--r4);
  margin: var(--r5) 0 0;
  padding-top: var(--r4);
  border-top: 1px solid var(--linie);
  max-width: 34rem;
}
.start-person img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border-radius: 2px;
}
.start-person figcaption {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--leise);
  text-wrap: pretty;
}
.start-person figcaption b {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--tanne-tief);
}
@media (max-width: 30rem) {
  .start-person {
    grid-template-columns: 6rem 1fr;
    gap: var(--r3);
  }
  .start-person figcaption {
    font-size: 0.88rem;
  }
}


/* ---------- Stimmen: ruhig statt grafisch ----------------------------
   Vorher standen hier ein Passerkreuz aus zwei Haarlinien und ein
   schraffiertes Band — Zeichen aus der Druckvorstufe. In einem
   Gestaltungsbüro sind sie richtig; über der Google-Bewertung einer
   Zahnarztpraxis wirken sie aufgesetzt. Es bleibt: Name, woher die
   Bewertung stammt, Sterne, Zitat. Mehr braucht eine Stimme nicht.
   ---------------------------------------------------------------------- */
.stimme-seite {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--r3);
}
.stimme-wer {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  min-width: 0;
}
.stimme-wer::before {
  content: '';
  flex: 0 0 auto;
  width: 1.4rem;
  height: 1px;
  background: color-mix(in oklch, white 34%, transparent);
  transform: translateY(-0.35rem);
}
.stimme-name b {
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 600;
}


/* Rechtszeile im Fuss. Ein Cookie-Banner fehlt hier nicht — die Demo
   setzt keine Cookies und misst nichts, also gibt es nichts einzuwilligen.
   Ein Banner ohne Anlass ist kein Rechtsschutz, sondern Dekoration. */
.fuss-recht {
  margin-top: 0.5rem;
  font-size: 0.84rem;
  opacity: 0.85;
}
.fuss-recht a {
  color: inherit;
}

.kopf .knopf {
  flex: 0 0 auto;
  white-space: nowrap;
}


/* ---------- Wegweiser zwischen den Abschnitten --------------------------- */
/* Eine kurze Linie mit Spitze, die sich zeichnet, wenn die Grenze zwischen
   zwei Abschnitten in Sicht kommt. Sie sitzt in einem Kasten ohne eigene
   Höhe, mitten auf der Grenze — die Seite verschiebt sich dadurch nicht.
   Der Kasten steht nicht im HTML; wegweiser.js baut ihn. */

.wegweiser {
  position: relative;   /* eigener Bezug, damit kein Abschnitt umgestellt wird */
  height: 0;
  width: 100%;
  pointer-events: none;
  z-index: 2;
}
.wegweiser svg {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% -50%;
  display: block;
  overflow: visible;
}
.wegweiser-linie {
  stroke: var(--weg-ton, currentColor);
  stroke-width: 1.4;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.05s cubic-bezier(.22, .61, .36, 1);
}
.wegweiser-spitze {
  stroke: var(--weg-ton, currentColor);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  translate: 0 -5px;
  transition: opacity 0.4s ease-out 0.75s, translate 0.5s cubic-bezier(.22, .61, .36, 1) 0.75s;
}
.wegweiser[data-an] .wegweiser-linie { stroke-dashoffset: 0 !important; }
.wegweiser[data-an] .wegweiser-spitze { opacity: 1; translate: 0 0; }

/* Die Naht ist gestrichelt — dafür zeichnet nicht der Strich, sondern die
   Deckkraft, sonst frisst die Strichelung den dashoffset. */
.wegweiser[data-art="naht"] .wegweiser-linie {
  stroke-dasharray: 5 4 !important;
  stroke-dashoffset: 0 !important;
  opacity: 0;
  transition: opacity 0.8s ease-out;
}
.wegweiser[data-art="naht"][data-an] .wegweiser-linie { opacity: 1; }

@media (max-width: 45.99rem) { .wegweiser svg { width: 18px; height: 52px; } }


/* ---------- Gezeichneter Rahmen und antwortende Zeilen ------------------- */
/* Beim Überfahren zeichnet sich ein Rahmen: erst laufen die waagrechten
   Linien aus der Mitte nach aussen, dann wachsen die senkrechten dazu. Zwei
   Pseudoelemente, kein SVG. Der Rahmen liegt 5 px ausserhalb und fängt
   keine Zeiger ab — das Trefferfeld bleibt, wie es war. */

.knopf { position: relative; }
.knopf::before,
.knopf::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 7px;
  pointer-events: none;
  border: 1.5px solid transparent;
}
.knopf::before {
  border-top-color: var(--tanne);
  border-bottom-color: var(--tanne);
  transform: scaleX(0);
  transition: transform 0.26s cubic-bezier(.22, .61, .36, 1);
}
.knopf::after {
  border-left-color: var(--tanne);
  border-right-color: var(--tanne);
  transform: scaleY(0);
  transition: transform 0.26s cubic-bezier(.22, .61, .36, 1) 0.14s;
}
.knopf:hover::before, .knopf:focus-visible::before { transform: scaleX(1); }
.knopf:hover::after,  .knopf:focus-visible::after  { transform: scaleY(1); }

/* Die Zeilen der Preiskarte antworten nacheinander, nicht alle zugleich —
   45 ms Abstand liest sich als Bewegung, gleichzeitig wäre es ein Ruck. */
.paket li { transition: transform 0.34s cubic-bezier(.22, .61, .36, 1); }
.paket:hover li { transform: translateX(4px); }
.paket:hover li:nth-child(1) { transition-delay: 0s; }
.paket:hover li:nth-child(2) { transition-delay: 0.045s; }
.paket:hover li:nth-child(3) { transition-delay: 0.09s; }
.paket:hover li:nth-child(4) { transition-delay: 0.135s; }
.paket:hover li:nth-child(5) { transition-delay: 0.18s; }

@media (prefers-reduced-motion: reduce) {
  .knopf::before, .knopf::after { display: none; }
  .paket li, .paket:hover li { transform: none; transition: none; }
}


/* Korrektur, gemessen (Prüfstand demos-50): die Grundriss-Legende stand im
   dunklen Band auf der Root---leise (dunkel, für Papier gedacht) — 2,30:1
   auf Tanne-tief. Die dunklen Kontexte deklarieren ihre eigene leise;
   oklch(0.84 0.015 152) ergibt 7,4:1 auf var(--tanne-tief). */
.band, .band-tief, .auf-dunkel { --leise: oklch(0.84 0.015 152); }