/* ==========================================================================
   Fußpflegepraxis Natascha Möller-Woltemade – Stylesheet
   Aufbau: 1 Schriften · 2 Tokens · 3 Basis · 4 Layout · 5 Komponenten
           6 Seitenbereiche · 7 Formular · 8 Bewegung · 9 Hilfsklassen
   ========================================================================== */

/* 1 · Schriften (lokal, SIL OFL – Lizenzen in /fonts) ---------------------- */
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/playfair-display-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/playfair-display-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/playfair-display-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/playfair-display-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/source-sans-3-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/source-sans-3-latin-400-italic.woff2") format("woff2"); }

/* 2 · Tokens --------------------------------------------------------------- */
:root {
  /* Farben – Kontrast jeweils gegen --creme gemessen */
  --creme: #F7F3EC;          /* Grundfläche */
  --creme-tief: #EFE7DA;     /* abgesetzte Abschnitte */
  --papier: #FCFAF6;         /* Karten */
  --sand: #D3B68D;           /* Linien, Rahmen, Deko (kein Text) */
  --sand-hell: #E8D9C1;      /* Flächen */
  --rose: #E9C9C0;           /* Logo-Rosé, Deko */
  --rose-hell: #F4E6E0;      /* Flächen */
  --nude: #D9B59E;           /* Logo-Nude, Deko */
  --text: #2B2A26;           /* Fließtext 12,99:1 */
  --text-leise: #5F5E53;     /* Nebentext 5,91:1 */
  --akzent: #6E5C45;         /* Buttons, Links 5,79:1 · Weiß darauf 6,4:1 */
  --akzent-dunkel: #574836;  /* Hover */
  --akzent-rose: #8A5A4E;    /* Kursiv-Akzente 5,2:1 */
  --nacht: #3A322A;          /* dunkle Abschnitte · Creme darauf 11,37:1 */
  --nacht-text: #F7F3EC;
  --nacht-leise: #E3C9A3;    /* 7,88:1 auf --nacht */
  --fehler: #9C3B2F;         /* 6,16:1 */
  --erfolg: #3F5F3A;
  --klaeren: #FFF3A8;
  --fokus: #6E5C45;
  --fokus-dunkel: #E3C9A3;

  /* Schrift */
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fs-klein: 1.0625rem;                                     /* 17 px, nur Zusatzinfos */
  --fs-text: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);       /* 18–20 px */
  --fs-gross: clamp(1.25rem, 1.15rem + 0.45vw, 1.4375rem);    /* 20–23 px Einleitungen */
  --fs-h4: clamp(1.1875rem, 1.12rem + 0.3vw, 1.3125rem);
  --fs-h3: clamp(1.375rem, 1.22rem + 0.7vw, 1.75rem);
  --fs-h2: clamp(1.875rem, 1.45rem + 1.9vw, 3rem);
  --fs-h1: clamp(2.25rem, 1.55rem + 3.1vw, 4.25rem);
  --fs-zitat: clamp(1.75rem, 1.3rem + 2.1vw, 3.125rem);
  --lh-text: 1.65;
  --lh-titel: 1.15;
  --mass: 66ch;

  /* Abstände (4-px-Basis) */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem;
  --abschnitt: clamp(4rem, 2.8rem + 5vw, 8rem);
  --rand: clamp(1rem, 0.4rem + 3vw, 2.5rem);
  --breite: 75rem;

  /* Formen */
  --radius-s: 0.5rem;
  --radius-m: 1rem;
  --radius-l: 1.75rem;
  --bogen: 999px 999px var(--radius-m) var(--radius-m);   /* Signatur: Rundbogen */
  --schatten: 0 1px 2px rgb(58 50 42 / 0.06), 0 8px 24px -12px rgb(58 50 42 / 0.18);
  --linie: 1px solid rgb(110 92 69 / 0.22);

  /* Bewegung */
  --dauer: 220ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --kopf-hoehe: 4.75rem;
}

/* 3 · Basis ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-hoehe) + 1rem);
}
body {
  margin: 0;
  background: var(--creme);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-text);
  line-height: var(--lh-text);
  font-kerning: normal;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-font-smoothing: antialiased;
}
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: var(--lh-titel);
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-4);
  text-wrap: balance;
  color: var(--text);
}
h1 { font-size: var(--fs-h1); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-family: var(--font-sans); font-weight: 600; letter-spacing: 0; }
h1 em, h2 em { font-style: italic; font-weight: 400; color: var(--akzent-rose); }
h1, h2 { hyphens: manual; }
@media (min-width: 45em) { h3, p, li { hyphens: manual; } }
p, ul, ol, dl { margin: 0 0 var(--s-4); }
p { text-wrap: pretty; max-width: var(--mass); }
strong { font-weight: 600; }
a { color: var(--akzent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--akzent-dunkel); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--rose); color: var(--text); }
address { font-style: normal; }
.nobr { white-space: nowrap; hyphens: manual; }

/* 4 · Layout --------------------------------------------------------------- */
.huelle { width: 100%; max-width: calc(var(--breite) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }
.abschnitt { padding-block: var(--abschnitt); }
.abschnitt--tief { background: var(--creme-tief); }
.abschnitt--rose { background: var(--rose-hell); }
.abschnitt--nacht { background: var(--nacht); color: var(--nacht-text); }
.abschnitt--nacht h2, .abschnitt--nacht h3 { color: var(--nacht-text); }
.abschnitt--nacht h2 em { color: var(--nacht-leise); }
.abschnitt--nacht a:not(.knopf) { color: var(--nacht-text); }
.abschnitt--nacht :focus-visible { outline-color: var(--fokus-dunkel); }
.abschnitt-kopf { max-width: 46rem; margin-bottom: var(--s-7); }
.abschnitt-kopf p { color: var(--text-leise); }
.einleitung { font-size: var(--fs-gross); line-height: 1.55; color: var(--text); }
.dachzeile {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-sans); font-size: var(--fs-klein); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--akzent);
  margin: 0 0 var(--s-4); hyphens: manual;
}
.dachzeile::before { content: ""; width: 2rem; height: 1px; background: currentColor; }
.abschnitt--nacht .dachzeile { color: var(--nacht-leise); }

.zwei-spalten { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 56em) {
  .zwei-spalten { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 6rem); }
  .zwei-spalten--bild-rechts > :first-child { order: 2; }
}

/* 5 · Komponenten ---------------------------------------------------------- */

/* Skip-Link */
.skip-link {
  position: absolute; left: var(--s-4); top: -10rem; z-index: 100;
  background: var(--akzent); color: #fff; padding: var(--s-3) var(--s-5);
  border-radius: var(--radius-s); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--s-4); color: #fff; }

/* Icons */
.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Buttons */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  min-height: 3.25rem; padding: 0.75rem 1.375rem;
  border: 2px solid var(--akzent); border-radius: 999px;
  background: var(--akzent); color: #fff;
  font: 600 var(--fs-text)/1.2 var(--font-sans); text-decoration: none; text-align: center;
  cursor: pointer; hyphens: manual;
  transition: background-color var(--dauer) var(--ease-out), border-color var(--dauer) var(--ease-out), color var(--dauer) var(--ease-out), transform 120ms var(--ease-out);
}
.knopf:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); color: #fff; text-decoration: none; }
.knopf:active { transform: scale(0.98); }
.knopf--rahmen { background: transparent; color: var(--akzent); }
.knopf--rahmen:hover { background: var(--akzent); color: #fff; }
.knopf--hell { background: var(--creme); border-color: var(--creme); color: var(--nacht); }
.knopf--hell:hover { background: #fff; border-color: #fff; color: var(--nacht); }
.knopf--hell-rahmen { background: transparent; border-color: var(--nacht-leise); color: var(--nacht-text); }
.knopf--hell-rahmen:hover { background: var(--nacht-text); border-color: var(--nacht-text); color: var(--nacht); }
.knopf--klein { min-height: 2.75rem; padding: 0.5rem 1.125rem; font-size: 1.0625rem; }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.knopf-reihe--zweit { margin-top: var(--s-3); }
/* Buchungs-Knopf mit sichtbarem Zusatz „öffnet meine Buchungsseite“ */
.knopf--buchen { padding-block: 0.5rem; }
.knopf__text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; text-align: left; }
.knopf__zusatz { font-size: 0.9375rem; font-weight: 500; }
@media (max-width: 30em) { .knopf-reihe .knopf { width: 100%; } }

/* Textlink mit Pfeil */
.pfeil-link {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 2.75rem; font-weight: 600; color: var(--akzent); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.pfeil-link .icon { transition: transform var(--dauer) var(--ease-out); }
.pfeil-link:hover { color: var(--akzent-dunkel); }
.pfeil-link:hover span { text-decoration: underline; text-underline-offset: 0.2em; }
.pfeil-link:hover .icon { transform: translateX(4px); }

/* Platzhalter-Markierung für offene Angaben der Kundin (vor Livegang entfernen) */
mark.klaeren {
  background: var(--klaeren); color: var(--text);
  padding: 0.05em 0.3em; border-radius: 3px;
  outline: 1px dashed #B59A00; outline-offset: 1px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.abschnitt--nacht mark.klaeren { color: var(--text); }
.platzhalter {
  display: block; background: var(--klaeren); color: var(--text);
  border: 2px dashed #B59A00; border-radius: var(--radius-s);
  padding: var(--s-3) var(--s-4); margin: 0 0 var(--s-4); font-family: var(--font-sans);
  font-size: var(--fs-text); font-weight: 400; letter-spacing: 0;
}
.entwurf-hinweis {
  display: flex; gap: var(--s-3); align-items: flex-start;
  background: var(--papier); border: 1px solid var(--sand); border-left: 4px solid var(--akzent);
  border-radius: var(--radius-s); padding: var(--s-4) var(--s-5); margin-bottom: var(--s-7);
}
.entwurf-hinweis p { margin: 0; }

/* Hinweis-Box (Info) */
.hinweis {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-3);
  background: var(--papier); border: 1px solid var(--sand); border-left: 4px solid var(--sand);
  border-radius: var(--radius-s); padding: var(--s-4) var(--s-5); margin: var(--s-5) 0;
  max-width: 44rem;
}
.hinweis .icon { width: 1.5rem; height: 1.5rem; color: var(--akzent); margin-top: 0.15rem; }
.hinweis p { margin: 0; }
@media (max-width: 30em) { .hinweis { padding: var(--s-4); gap: var(--s-2); } .hinweis .icon { width: 1.25rem; height: 1.25rem; } }
.hinweis__titel { font-weight: 600; display: block; }

/* „Für wen“-Zeile */
.fuer-wen {
  border-top: var(--linie); padding-top: var(--s-4); margin-top: var(--s-5);
  max-width: 44rem;
}
.fuer-wen strong { display: block; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: var(--fs-h4); color: var(--akzent-rose); margin-bottom: var(--s-1); }

/* Listen mit Punkt */
.liste { list-style: none; padding: 0; margin: 0 0 var(--s-5); }
.liste li { position: relative; padding-left: 1.5rem; margin-bottom: var(--s-2); }
.liste li::before {
  content: ""; position: absolute; left: 0.15rem; top: 0.68em;
  width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--nude);
  box-shadow: 0 0 0 3px var(--rose-hell);
}
.listen-titel { font-family: var(--font-sans); font-size: var(--fs-text); font-weight: 600; letter-spacing: 0.02em; margin: 0 0 var(--s-3); color: var(--text); }

/* Bilder: Rundbogen und Rahmen */
.bild { position: relative; margin: 0; }
.bild picture { height: 100%; }
.bild img { width: 100%; height: 100%; object-fit: cover; }
.bild--bogen { border-radius: var(--bogen); overflow: hidden; aspect-ratio: 4 / 5; background: var(--sand-hell); }
.bild--rund { border-radius: var(--radius-l); overflow: hidden; aspect-ratio: 3 / 2; background: var(--sand-hell); }
.bild--hoch { aspect-ratio: 4 / 5; }
.farbflaeche {
  display: grid; place-items: center; border-radius: var(--bogen); aspect-ratio: 4 / 5;
  background:
    radial-gradient(60% 50% at 30% 70%, rgb(233 201 192 / 0.9), transparent 70%),
    radial-gradient(55% 45% at 72% 35%, rgb(217 181 158 / 0.55), transparent 70%),
    var(--rose-hell);
}
.farbflaeche img { width: 70%; height: auto; }
.farbflaeche--sand {
  background:
    radial-gradient(60% 50% at 70% 72%, rgb(211 182 141 / 0.55), transparent 70%),
    radial-gradient(50% 45% at 28% 30%, rgb(233 201 192 / 0.7), transparent 70%),
    var(--sand-hell);
}

/* Kopfbereich ---------------------------------------------------------------*/
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgb(247 243 236 / 0.97);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dauer) var(--ease-out), box-shadow var(--dauer) var(--ease-out);
}
.kopf.ist-gescrollt { border-bottom-color: rgb(110 92 69 / 0.18); box-shadow: 0 6px 20px -16px rgb(58 50 42 / 0.4); }
.kopf__innen { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: var(--kopf-hoehe); }
.marke { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--text); min-height: 2.75rem; min-width: 0; }
.kopf .knopf { white-space: nowrap; }
.marke:hover { color: var(--text); }
.marke img { width: 3.25rem; height: auto; }
.marke__text { display: flex; flex-direction: column; line-height: 1.15; hyphens: manual; }
.marke__zeile1 { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--akzent); }
.marke__zeile2 { font-family: var(--font-serif); font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem); font-weight: 500; }

.nav-schalter {
  display: inline-flex; align-items: center; gap: var(--s-2); flex: none;
  min-height: 2.75rem; min-width: 2.75rem; padding: 0 var(--s-3);
  background: transparent; border: 1.5px solid rgb(110 92 69 / 0.7); border-radius: 999px;
  color: var(--text); font: 600 1rem/1 var(--font-sans); cursor: pointer; white-space: nowrap; hyphens: manual;
}
.nav-schalter .icon { width: 1.5rem; height: 1.5rem; }
.nav-schalter .icon--zu { display: none; }
.nav-schalter[aria-expanded="true"] .icon--auf { display: none; }
.nav-schalter[aria-expanded="true"] .icon--zu { display: block; }

.hauptnav__liste { list-style: none; margin: 0; padding: 0; }
.hauptnav__link {
  display: flex; align-items: center; min-height: 2.75rem; padding: 0 var(--s-2); white-space: nowrap; hyphens: manual;
  color: var(--text); text-decoration: none; font-weight: 500; position: relative;
}
.hauptnav__link:hover { color: var(--akzent); }
.hauptnav__link[aria-current="page"] { color: var(--akzent); font-weight: 600; }

/* Mobil und Tablet: Menü klappt unter dem Kopf auf */
@media (max-width: 71.99em) {
  .hauptnav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--creme); border-bottom: 1px solid rgb(110 92 69 / 0.2);
    box-shadow: 0 24px 40px -24px rgb(58 50 42 / 0.45);
    padding: var(--s-2) var(--rand) var(--s-6);
  }
  .js .hauptnav { display: none; }
  .js .hauptnav.ist-offen { display: block; animation: menue-auf 220ms var(--ease-out); }
  .hauptnav__liste { display: grid; }
  .hauptnav__link { font-family: var(--font-serif); font-size: 1.5rem; padding: var(--s-3) 0; border-bottom: var(--linie); min-height: 3.5rem; }
  .hauptnav__link[aria-current="page"]::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--nude); margin-right: var(--s-3); }
  .hauptnav .knopf { margin-top: var(--s-5); width: 100%; }
  html:not(.js) .nav-schalter { display: none; }
  html:not(.js) .hauptnav { position: static; box-shadow: none; padding-inline: 0; }
  html:not(.js) .kopf { position: static; }
  html:not(.js) .kopf__innen { flex-wrap: wrap; }
  html:not(.js) .hauptnav { width: 100%; }
}
@keyframes menue-auf { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (min-width: 72em) {
  .nav-schalter { display: none; }
  .hauptnav { display: flex; align-items: center; gap: var(--s-5); }
  .hauptnav__liste { display: flex; gap: var(--s-2); }
  .hauptnav__link { padding: 0 var(--s-3); }
  .hauptnav__link::after {
    content: ""; position: absolute; left: var(--s-3); right: var(--s-3); bottom: 0.45rem; height: 2px;
    background: var(--nude); transform: scaleX(0); transform-origin: left; transition: transform var(--dauer) var(--ease-out);
  }
  .hauptnav__link:hover::after, .hauptnav__link[aria-current="page"]::after { transform: scaleX(1); }
}

/* Mobile Aktionsleiste (Daumenbereich) */
.aktionsleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2);
  padding: var(--s-2) var(--s-3) calc(var(--s-2) + env(safe-area-inset-bottom));
  background: rgb(247 243 236 / 0.98); border-top: 1px solid rgb(110 92 69 / 0.2);
  box-shadow: 0 -8px 24px -18px rgb(58 50 42 / 0.5);
}
.aktionsleiste .knopf { min-height: 3rem; padding: 0.5rem 0.75rem; font-size: 1.0625rem; }
.aktionsleiste--drei { grid-template-columns: repeat(3, 1fr); }
.aktionsleiste--drei .knopf { flex-direction: column; gap: 0.125rem; min-height: 3.5rem; padding: 0.375rem 0.25rem; font-size: 1rem; }
.aktionsleiste--drei .knopf--rahmen { background: var(--papier); }
.aktionsleiste--drei .knopf--rahmen:hover { background: var(--akzent); }
@media (max-width: 63.99em) { body { padding-bottom: 5rem; } html { scroll-padding-bottom: 5rem; } }
@media (min-width: 64em) { .aktionsleiste { display: none; } }

/* Fußbereich */
.fuss { background: var(--creme-tief); padding-block: var(--s-8) var(--s-6); border-top: 1px solid rgb(110 92 69 / 0.15); }
.fuss__raster { display: grid; gap: var(--s-7); }
@media (min-width: 52em) { .fuss__raster { grid-template-columns: 1.3fr 1fr 1fr; } }
.fuss__marke { display: flex; gap: var(--s-4); align-items: flex-start; }
.fuss__marke img { width: 6.5rem; height: auto; flex: none; }
.fuss__name { font-family: var(--font-serif); font-size: 1.375rem; line-height: 1.25; margin: 0 0 var(--s-2); hyphens: manual; }
.fuss__claim { color: var(--text-leise); margin: 0; }
.fuss__titel { font-family: var(--font-sans); font-size: var(--fs-klein); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--akzent); margin: 0 0 var(--s-3); }
.fuss__liste { list-style: none; padding: 0; margin: 0; }
.fuss__liste a { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2.75rem; color: var(--text); text-decoration: none; }
.fuss__liste a:hover { color: var(--akzent); text-decoration: underline; }
.fuss__unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-7); padding-top: var(--s-5); border-top: var(--linie); color: var(--text-leise); font-size: var(--fs-klein); }
.fuss__unten p { margin: 0; }
.fuss__recht { display: flex; gap: var(--s-5); list-style: none; padding: 0; margin: 0; }
.fuss__recht a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--text); }

/* 6 · Seitenbereiche ------------------------------------------------------- */

/* Hero Startseite */
.hero { position: relative; overflow: hidden; padding-block: clamp(2.5rem, 1.5rem + 4vw, 6rem) var(--abschnitt); }
.hero__raster { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 56em) { .hero__raster { grid-template-columns: 1.25fr 0.75fr; gap: clamp(2.5rem, 4vw, 4.5rem); } }
.hero h1 { margin-bottom: var(--s-5); max-width: 15ch; }
.hero__sub { font-size: var(--fs-gross); line-height: 1.55; color: var(--text); margin-bottom: var(--s-6); max-width: 36rem; }
.hero__mehr { margin-top: var(--s-4); }
.wa-hinweis { font-size: var(--fs-klein); color: var(--text-leise); margin: var(--s-3) 0 0; line-height: 1.5; }
.abschnitt--nacht .wa-hinweis { color: var(--nacht-leise); }
.rueckmeldung { min-height: 55vh; }
.rueckmeldung .knopf-reihe { margin-top: var(--s-6); }
.rueckmeldung__deko { width: min(20rem, 70%); justify-self: center; }
.hero__bild { position: relative; max-width: 30rem; width: 100%; justify-self: center; }
.hero__bild::before {
  content: ""; position: absolute; inset: 8% -10% -6% 12%; z-index: -1;
  border-radius: 46% 54% 40% 60% / 55% 45% 55% 45%;
  background: radial-gradient(closest-side, rgb(233 201 192 / 0.95), rgb(233 201 192 / 0.35) 70%, transparent);
}
.hero__lotus { position: absolute; left: -16%; bottom: -8%; width: 46%; pointer-events: none; }
@media (max-width: 55.99em) { .hero__bild { max-width: 24rem; } .hero__lotus { left: -4%; width: 36%; } }

/* Vertrauensleiste */
.vertrauen { border-block: var(--linie); background: var(--papier); }
.vertrauen__liste { list-style: none; margin: 0; padding: var(--s-5) 0; display: grid; gap: var(--s-4) var(--s-6); }
@media (min-width: 36em) { .vertrauen__liste { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64em) { .vertrauen__liste { grid-template-columns: repeat(4, 1fr); padding-block: var(--s-6); } }
.vertrauen__punkt { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start; }
.vertrauen__punkt .icon { width: 1.75rem; height: 1.75rem; color: var(--akzent-rose); margin-top: 0.05rem; }
.vertrauen__punkt strong { display: block; line-height: 1.35; }
.vertrauen__zusatz { display: block; margin-top: var(--s-1); font-size: var(--fs-klein); }

/* Über-Teaser */
.teaser-bild { position: relative; }
.teaser-bild .bild--rund { aspect-ratio: 5 / 4; }
.teaser-bild__lotus { position: absolute; right: -4%; top: -9%; width: 28%; pointer-events: none; }
@media (max-width: 40em) { .teaser-bild__lotus { width: 32%; right: -2%; top: -12%; } }

/* Schwerpunkte */
.schwerpunkte { display: grid; gap: var(--s-7); }
@media (min-width: 64em) { .schwerpunkte { grid-template-columns: 0.8fr 1.2fr; gap: var(--s-8); } .schwerpunkte__kopf { position: sticky; top: calc(var(--kopf-hoehe) + 2rem); align-self: start; } }
.kacheln { display: grid; gap: var(--s-4); list-style: none; padding: 0; margin: 0; }
@media (min-width: 40em) { .kacheln { grid-template-columns: 1fr 1fr; } .kacheln > :nth-child(even) { transform: translateY(var(--s-7)); } }
.kachel {
  position: relative; background: var(--papier); border: 1px solid rgb(110 92 69 / 0.14);
  border-radius: var(--radius-l); padding: var(--s-6) var(--s-5) var(--s-5);
  transition: border-color var(--dauer) var(--ease-out), box-shadow var(--dauer) var(--ease-out), transform var(--dauer) var(--ease-out);
}
.kachel:hover { border-color: var(--sand); box-shadow: var(--schatten); }
.kachel:focus-within { border-color: var(--akzent); }
.kachel__nr { font-family: var(--font-serif); font-style: italic; font-size: 1.25rem; color: var(--akzent-rose); display: block; margin-bottom: var(--s-3); }
.kachel h3 { font-size: clamp(1.3125rem, 1.2rem + 0.5vw, 1.5rem); }
.kachel h3 a { color: var(--text); text-decoration: none; }
.kachel h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.kachel h3 a:focus-visible { outline: none; }
.kachel:has(a:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 3px; }
.kachel p { color: var(--text-leise); margin-bottom: var(--s-4); }
.kachel__mehr { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; color: var(--akzent); }
.kachel:hover .kachel__mehr .icon { transform: translateX(4px); }
.kachel__mehr .icon { transition: transform var(--dauer) var(--ease-out); }

/* Leistungen als Register-Liste (funktioniert mit 5 und 6 Einträgen) */
.register { list-style: none; padding: 0; margin: 0; border-top: var(--linie); }
.register__eintrag { display: grid; grid-template-columns: 3rem 1fr; gap: var(--s-2) var(--s-4); padding-block: var(--s-6); border-bottom: var(--linie); position: relative; }
.register__nr { font-family: var(--font-serif); font-style: italic; font-size: 1.75rem; line-height: 1.1; color: var(--akzent-rose); font-weight: 400; grid-row: span 3; }
.register__eintrag h3 { margin: 0; }
.register__eintrag p { color: var(--text-leise); margin: 0; }
.register__eintrag .pfeil-link { justify-self: start; }
@media (min-width: 56em) {
  .register__eintrag { grid-template-columns: 4.5rem 17rem minmax(0, 1fr) 16.5rem; align-items: baseline; gap: var(--s-6); padding-block: var(--s-6); }
  .register__nr { grid-row: auto; font-size: 2rem; }
  .register__eintrag .pfeil-link { justify-self: end; white-space: nowrap; }
  .register__eintrag::before { content: ""; position: absolute; inset: 0 calc(-1 * var(--s-5)); border-radius: var(--radius-m); background: var(--papier); opacity: 0; z-index: -1; transition: opacity var(--dauer) var(--ease-out); }
  .register__eintrag:hover::before { opacity: 1; }
  .register { isolation: isolate; }
}

/* Ablauf */
.schritte { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-6); counter-reset: schritt; }
@media (min-width: 52em) { .schritte { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }
.schritt { position: relative; padding-top: var(--s-5); }
.schritt::before {
  counter-increment: schritt; content: counter(schritt);
  display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: var(--rose-hell); border: 1px solid var(--rose); color: var(--akzent-rose);
  font-family: var(--font-serif); font-size: 1.625rem; margin-bottom: var(--s-4);
}
@media (min-width: 52em) {
  .schritt::after { content: ""; position: absolute; top: calc(var(--s-5) + 1.75rem); left: 4.25rem; right: calc(-1 * var(--s-6) + 0.75rem); height: 1px; background: var(--sand); }
  .schritt:last-child::after { display: none; }
}
.schritt h3 { font-size: var(--fs-h3); }

/* Leitsatz */
.leitsatz { position: relative; overflow: hidden; }
.leitsatz__raster { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 52em) { .leitsatz__raster { grid-template-columns: 1fr 2fr; gap: var(--s-8); } }
.leitsatz__bild { width: min(16rem, 60%); justify-self: center; }
@media (min-width: 52em) { .leitsatz__bild { width: 100%; max-width: 22rem; } }
.leitsatz blockquote { margin: 0; }
.leitsatz blockquote p {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: var(--fs-zitat); line-height: 1.3; color: var(--text); max-width: 22ch; text-wrap: balance;
  margin-bottom: var(--s-5); hyphens: manual;
}
.leitsatz figcaption { font-weight: 600; letter-spacing: 0.04em; color: var(--akzent); display: flex; align-items: center; gap: var(--s-3); }
.leitsatz figcaption::before { content: ""; width: 2.5rem; height: 1px; background: currentColor; }

/* Kontakt-Abschluss (dunkel) */
.abschluss__raster { display: grid; gap: var(--s-7); }
@media (min-width: 56em) { .abschluss__raster { grid-template-columns: 1.15fr 0.85fr; gap: var(--s-8); align-items: end; } }
.abschluss p { color: var(--nacht-text); }
.abschluss .einleitung { color: var(--nacht-text); }
.abschluss__hinweis { font-size: var(--fs-klein); color: var(--nacht-leise) !important; margin-top: var(--s-4); }
.kontaktliste { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.kontaktliste li { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start; padding-block: var(--s-3); border-bottom: 1px solid rgb(227 201 163 / 0.25); }
.kontaktliste .icon { width: 1.5rem; height: 1.5rem; margin-top: 0.15rem; color: var(--nacht-leise); }
.kontaktliste__label { display: block; font-size: var(--fs-klein); color: var(--nacht-leise); letter-spacing: 0.04em; }
.kontaktliste a { color: var(--nacht-text); font-weight: 600; text-decoration-color: rgb(227 201 163 / 0.6); }

/* Seitenkopf Unterseiten */
.seitenkopf { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) clamp(2.5rem, 1.5rem + 3vw, 4.5rem); position: relative; overflow: hidden; }
.seitenkopf h1 { max-width: 18ch; }
.seitenkopf .einleitung { max-width: 44rem; }
.seitenkopf--deko::after {
  content: ""; position: absolute; right: -8rem; top: -6rem; width: 26rem; height: 26rem; z-index: -1;
  border-radius: 46% 54% 40% 60% / 55% 45% 55% 45%;
  background: radial-gradient(closest-side, rgb(233 201 192 / 0.8), rgb(233 201 192 / 0.25) 70%, transparent);
}
.seitenkopf, .hero { isolation: isolate; }

/* Sprungnavigation */
.sprungnav { margin-top: var(--s-6); }
.sprungnav__titel { font-size: var(--fs-klein); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-leise); margin-bottom: var(--s-3); }
.sprungnav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.sprungnav a {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.4rem 1.1rem;
  border: 1px solid rgb(110 92 69 / 0.55); border-radius: 999px; background: var(--papier);
  color: var(--text); text-decoration: none; font-weight: 500; hyphens: manual;
  transition: background-color var(--dauer) var(--ease-out), border-color var(--dauer) var(--ease-out);
}
.sprungnav a:hover { background: var(--rose-hell); border-color: var(--nude); color: var(--text); }

/* Leistungs-Abschnitte */
.leistung { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); border-top: var(--linie); }
.leistung--tief { background: var(--creme-tief); border-top-color: transparent; }
.leistung--tief + .leistung { border-top-color: transparent; }
.leistung__raster { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 56em) {
  .leistung__raster { grid-template-columns: 5fr 7fr; gap: clamp(3rem, 6vw, 6rem); }
  .leistung--rechts .leistung__raster { grid-template-columns: 7fr 5fr; }
  .leistung--rechts .leistung__medien { order: 2; }
  .leistung__medien { position: sticky; top: calc(var(--kopf-hoehe) + 2rem); }
}
.leistung__medien { max-width: 28rem; width: 100%; }
@media (max-width: 55.99em) { .leistung__medien .bild--bogen, .leistung__medien .farbflaeche { aspect-ratio: 4 / 3; border-radius: var(--radius-l); } .leistung__medien .farbflaeche img { width: 52%; } }
.leistung__listen { display: grid; gap: var(--s-2) var(--s-6); margin-top: var(--s-5); }
@media (min-width: 40em) { .leistung__listen--zwei { grid-template-columns: 1fr 1fr; } }
.leistung__nr { font-family: var(--font-serif); font-style: italic; color: var(--akzent-rose); font-size: 1.25rem; display: block; margin-bottom: var(--s-2); }
.unterabschnitt {
  margin-top: var(--s-7); padding: var(--s-5) var(--s-4); border-radius: var(--radius-l);
  background: var(--rose-hell); border: 1px solid var(--rose);
}
@media (min-width: 40em) { .unterabschnitt { padding: var(--s-7) var(--s-6); } }
.unterabschnitt .hinweis { background: var(--papier); }
.preise { max-width: 46rem; }

/* Über mich */
.vorstellung__bild { max-width: 28rem; width: 100%; justify-self: center; position: relative; }
.vorstellung__bild::before {
  content: ""; position: absolute; inset: 10% 12% -6% -12%; z-index: -1;
  border-radius: 46% 54% 40% 60% / 55% 45% 55% 45%;
  background: radial-gradient(closest-side, rgb(211 182 141 / 0.6), rgb(211 182 141 / 0.2) 70%, transparent);
}
.prinzipien { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4); }
@media (min-width: 40em) { .prinzipien { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64em) { .prinzipien { grid-template-columns: repeat(4, 1fr); } }
.prinzip { background: var(--papier); border-radius: var(--radius-l); padding: var(--s-6) var(--s-5); border: 1px solid rgb(110 92 69 / 0.14); }
.prinzip .icon { width: 2rem; height: 2rem; color: var(--akzent-rose); margin-bottom: var(--s-4); }
.prinzip h3 { font-size: var(--fs-h3); }
.prinzip p { color: var(--text-leise); margin: 0; }
.galerie { list-style: none; padding: 0; margin: var(--s-7) 0 0; display: grid; gap: var(--s-4); }
@media (min-width: 40em) { .galerie { grid-template-columns: 1fr 1fr; } }
@media (min-width: 40em) { .galerie > :first-child { grid-column: 1 / -1; } .galerie > :first-child .bild--rund { aspect-ratio: 16 / 7; } }
@media (min-width: 64em) { .galerie { grid-template-columns: repeat(3, 1fr); } }
.galerie figure { margin: 0; height: 100%; display: flex; flex-direction: column; }
.galerie .bild--rund { border-radius: var(--radius-m); flex: 1; }
.galerie figcaption { font-size: var(--fs-klein); color: var(--text-leise); padding-top: var(--s-2); }
.fuer-wen-block { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 56em) { .fuer-wen-block { grid-template-columns: 7fr 4fr; gap: var(--s-8); } }
.fuer-wen-block__deko { width: min(18rem, 70%); justify-self: center; }

/* Kontakt */
.kontaktkarten { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4); }
@media (min-width: 48em) { .kontaktkarten { grid-template-columns: 1fr 1fr; } .kontaktkarte--breit { grid-column: 1 / -1; } }
.kontaktkarte {
  display: flex; flex-direction: column; gap: var(--s-2);
  background: var(--papier); border: 1px solid rgb(110 92 69 / 0.16); border-radius: var(--radius-l); padding: var(--s-6) var(--s-5);
}
@media (min-width: 48em) {
  .kontaktkarte { padding: var(--s-7) var(--s-6); }
  .kontaktkarte--breit { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-2) var(--s-6); padding-block: var(--s-6); }
  .kontaktkarte--breit .kontaktkarte__nummer { margin: 0; }
  .kontaktkarte--breit .knopf { margin: 0; }
}
.kontaktkarte__kopf { display: flex; align-items: center; gap: var(--s-3); }
.kontaktkarte__kopf .icon { width: 1.75rem; height: 1.75rem; color: var(--akzent-rose); }
.kontaktkarte h3 { margin: 0; font-size: var(--fs-h4); font-family: var(--font-sans); font-weight: 600; }
.kontaktkarte__nummer { font-family: var(--font-serif); font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); color: var(--text); margin: var(--s-2) 0; line-height: 1.2; hyphens: manual; overflow-wrap: anywhere; }
.kontaktkarte__nummer--mail { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); font-family: var(--font-sans); font-weight: 600; }
.kontaktkarte p { color: var(--text-leise); }
.kontaktkarte--buchen { background: var(--rose-hell); border-color: var(--rose); }
.kontaktkarte--buchen p { color: var(--text); margin: 0; }
.kontaktkarte .knopf { margin-top: auto; align-self: flex-start; }
.datenhinweis { margin-top: var(--s-5); display: grid; gap: var(--s-2); max-width: 52rem; }
.praxis-infos { display: grid; gap: var(--s-6); }
@media (min-width: 52em) { .praxis-infos { grid-template-columns: repeat(3, 1fr); } }
.praxis-info h3 { font-size: var(--fs-h4); font-family: var(--font-sans); font-weight: 600; display: flex; gap: var(--s-2); align-items: center; }
.praxis-info h3 .icon { color: var(--akzent-rose); width: 1.5rem; height: 1.5rem; }
.zeiten { margin: 0 0 var(--s-3); display: grid; gap: var(--s-2); }
.zeiten div { display: flex; flex-wrap: wrap; gap: 0 var(--s-3); justify-content: space-between; border-bottom: 1px solid var(--sand); padding-bottom: var(--s-2); }
.zeiten dt { font-weight: 600; }
.zeiten dd { margin: 0; }
.extern-hinweis { display: block; font-size: var(--fs-klein); color: var(--text-leise); margin-top: var(--s-2); max-width: 40rem; }

/* Rechtstexte */
.rechtstext { max-width: 46rem; }
.rechtstext h2 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); margin-top: var(--s-7); }
.rechtstext h1 + p { margin-top: var(--s-5); }
.rechtstext section > h2 { margin-top: var(--s-7); }
.rechtstext section:first-of-type > h2 { margin-top: var(--s-6); }
.rechtstext h3 { font-size: var(--fs-h4); font-family: var(--font-sans); font-weight: 600; margin-top: var(--s-6); }
.rechtstext ul { padding-left: 1.25rem; margin-bottom: var(--s-5); }
.rechtstext li { margin-bottom: var(--s-2); }
.rechtstext li::marker { color: var(--akzent); }
.rechtstext a { overflow-wrap: anywhere; }
.rechtstext__stand { margin-top: var(--s-7); color: var(--text-leise); }

/* 404 */
.nicht-gefunden { text-align: left; }

/* 7 · Formular ------------------------------------------------------------- */
.formular-bereich { display: grid; gap: var(--s-7); }
@media (min-width: 60em) { .formular-bereich { grid-template-columns: 4fr 7fr; gap: var(--s-8); } }
.formular { background: var(--papier); border: 1px solid rgb(110 92 69 / 0.16); border-radius: var(--radius-l); padding: var(--s-6) var(--s-5); }
@media (min-width: 40em) { .formular { padding: var(--s-7) var(--s-7); } }
.pflicht-hinweis { color: var(--text-leise); margin-bottom: var(--s-5); }
.feld { margin-bottom: var(--s-5); }
.feld label, .feldgruppe legend { display: block; font-weight: 600; margin-bottom: var(--s-2); }
.feldgruppe { border: 0; padding: 0; margin: 0 0 var(--s-5); min-width: 0; }
.feldgruppe legend { padding: 0; }
.feldgruppe__felder { display: grid; gap: var(--s-4); }
@media (min-width: 40em) { .feldgruppe__felder { grid-template-columns: 1fr 1fr; } }
.feldgruppe__felder label { font-weight: 500; }
.hilfe { display: block; color: var(--text-leise); font-size: var(--fs-klein); margin: calc(-1 * var(--s-1)) 0 var(--s-2); line-height: 1.5; }
.formular input[type="text"], .formular input[type="tel"], .formular input[type="email"], .formular textarea {
  width: 100%; min-height: 3.25rem; padding: 0.75rem 1rem;
  font: 400 var(--fs-text)/1.4 var(--font-sans); color: var(--text);
  background: #fff; border: 1.5px solid #8E8574; border-radius: var(--radius-s);
  transition: border-color var(--dauer) var(--ease-out), box-shadow var(--dauer) var(--ease-out);
}
.formular textarea { min-height: 10rem; resize: vertical; }
.formular input:hover, .formular textarea:hover { border-color: var(--akzent); }
.formular input:focus-visible, .formular textarea:focus-visible { outline: 3px solid var(--fokus); outline-offset: 1px; border-color: var(--akzent); border-radius: var(--radius-s); }
.formular [aria-invalid="true"] { border-color: var(--fehler); border-width: 2px; background: #FFF8F6; }
.feldfehler { display: flex; gap: var(--s-2); align-items: flex-start; color: var(--fehler); font-weight: 600; margin-top: var(--s-2); font-size: var(--fs-klein); line-height: 1.45; }
.feldfehler:empty { display: none; }
.feldfehler::before { content: "!"; flex: none; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--fehler); color: #fff; font-size: 0.8125rem; margin-top: 0.05rem; }
.honig { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.absende-satz { color: var(--text-leise); }
.formular .knopf[disabled] { opacity: 0.75; cursor: progress; }
.formular__datenschutz { font-size: var(--fs-klein); color: var(--text-leise); margin: 0 0 var(--s-5); line-height: 1.55; }
.meldung { border-radius: var(--radius-s); padding: var(--s-4) var(--s-5); margin-bottom: var(--s-5); border: 1px solid; }
.meldung:empty { display: none; }
.meldung p { margin: 0 0 var(--s-2); }
.meldung p:last-child { margin: 0; }
.meldung--erfolg { background: #EEF3EA; border-color: #9DB394; color: var(--erfolg); }
.meldung--erfolg p { color: #2F472B; }
.meldung--fehler { background: #FBEDEA; border-color: #D9A69C; color: var(--fehler); }
.meldung--fehler p { color: #7A2D23; }
.meldung a { font-weight: 600; color: inherit; }

/* 8 · Bewegung ------------------------------------------------------------- */
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.js [data-reveal].ist-sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* 9 · Hilfsklassen --------------------------------------------------------- */
.visuell-versteckt { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.leise { color: var(--text-leise); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

@media print {
  .kopf, .aktionsleiste, .nav-schalter, .skip-link, .sprungnav, .hero__lotus, .teaser-bild__lotus, .formular-bereich .bild { display: none !important; }
  html, body { padding: 0; background: #fff; }
  body { font-size: 11pt; }
  [data-reveal], .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .abschnitt, .leistung, .seitenkopf, .hero { padding-block: 1.25rem !important; }
  .abschnitt--nacht, .abschnitt--tief, .abschnitt--rose, .leistung--tief, .vertrauen, .fuss { background: #fff !important; color: #000 !important; }
  .abschnitt--nacht h2, .abschnitt--nacht h2 em, .abschnitt--nacht p, .abschnitt--nacht a, .kontaktliste a, .kontaktliste__label, .kontaktliste .icon, .abschnitt--nacht .wa-hinweis { color: #000 !important; }
  .knopf { border-color: #000 !important; color: #000 !important; background: #fff !important; }
  .leistung__medien, .schwerpunkte__kopf { position: static !important; }
  .kacheln > :nth-child(even) { transform: none !important; }
  .bild--bogen, .farbflaeche { max-height: 9cm; }
  h2, h3 { break-after: avoid; }
  .kachel, .prinzip, .kontaktkarte, .hinweis, .praxis-info, figure { break-inside: avoid; }
  a[href^="tel:"]::after { content: ""; }
}