/* Three complementary pillars: equal weight, not a treatment-success ladder. */
.treatment-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; position: relative; isolation: isolate; }
.treatment-pillars::before { content: ''; position: absolute; z-index: -1; left: 12%; right: 12%; top: 2rem; border-top: 2px solid var(--accent-strong); }
.treatment-pillar { display: flex; flex-direction: column; min-width: 0; padding: 1.5rem; background: var(--paper); border: 1px solid var(--border); border-top: 3px solid var(--accent-strong); }
.treatment-pillar { border-radius: calc(var(--radius) - 5px); }
.treatment-pillar h3 { font-size: clamp(1.25rem, 1.8vw, 1.55rem); }
.treatment-pillar .text-link { margin-top: auto; }
.doctor-intro-image { margin: 0; width: min(100%, 380px); justify-self: center; }
.doctor-intro-image img { width: 100%; height: auto; }
#behandlungen .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#behandlungen .service-panel { display: flex; flex-direction: column; min-width: 0; }
#behandlungen .service-panel .text-link { margin-top: auto; }
/* Etwas kleinere Kartentitel, damit z. B. „Therapeutische Injektionen“ in eine Zeile passt. */
#behandlungen .service-panel h3 { font-size: clamp(1.2rem, 1.6vw, 1.35rem); }
/* Bausteine: ganze Kachel ist der Link, nummeriert 1–3. */
a.treatment-pillar { color: inherit; text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
a.treatment-pillar:hover { border-color: var(--accent-strong); box-shadow: 0 10px 28px #0f172a1f; transform: translateY(-2px); }
a.treatment-pillar:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 3px; }
.pillar-no { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; margin-bottom: .9rem; border-radius: 50%; background: var(--accent-strong); color: var(--paper); font-weight: 700; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { a.treatment-pillar { transition: none; } a.treatment-pillar:hover { transform: none; } }
/* Behandlungen: ganze Kachel ist der Link. */
#behandlungen a.service-panel { color: inherit; text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
#behandlungen a.service-panel:hover { border-color: var(--accent-strong); box-shadow: 0 10px 28px #0f172a1f; transform: translateY(-2px); }
#behandlungen a.service-panel:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { #behandlungen a.service-panel { transition: none; } #behandlungen a.service-panel:hover { transform: none; } }
/* Engere Abschnitte, z. B. Therapiekonzept Einleitung und Bausteine. */
.section.section-tight { padding-block: clamp(48px, 5vw, 80px); }
/* Bewegungsprogramm: Hinweis auf den Bewegungscheck als weiße Karte, damit er sich vom hellen Schlussband abhebt. */
.check-teaser { align-items: center; padding: clamp(1.5rem, 4vw, 3.25rem); background: var(--paper); border: 1px solid var(--border); border-top: 3px solid var(--accent-strong); border-radius: calc(var(--radius) - 5px); box-shadow: 0 18px 40px #0f172a12; }
.check-teaser .prose > :last-child { margin-bottom: 0; }
/* Schnellkontakt-Leiste: Termin-Button im dunklen Türkis der Website. */
.contact-bar-link:nth-child(1) { background: var(--accent-strong); color: white; }
.contact-bar-link:nth-child(1):hover { background: #3f646b; color: white; }
/* Startseite: Doctolib-Button im Startbild ebenfalls im dunklen Türkis. */
.hero-split .button { background: var(--accent-strong); border-color: var(--accent-strong); color: white; }
.hero-split .button span[aria-hidden="true"] { background: white; color: var(--accent-strong); }
.hero-split .button:hover { background: #3f646b; border-color: #3f646b; color: white; }
/* Startseite Behandlungen: Bild statt Kurztext (KI-Bilder, echte Fotos folgen). */
#behandlungen .service-media { display: block; margin-top: auto; padding-top: 1.1rem; }
#behandlungen .service-media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: calc(var(--radius) - 12px); }
/* Leistungen: Verfahren gruppiert, jedes als eigener Kasten; Pflichtsatz als Fußzeile. */
.procedure-group { margin-bottom: 1rem; }
.procedure-list { display: grid; gap: 1rem; margin-bottom: 2.5rem; }
.procedure-list:last-child { margin-bottom: 0; }
.procedure-list article { padding: 1.5rem 1.6rem; background: var(--paper); border: 1px solid var(--border); border-radius: calc(var(--radius) - 5px); scroll-margin-top: 120px; }
.procedure-list article h3 { margin-top: 0; }
.procedure-list article p:last-child { margin-bottom: 0; }
.procedure-note { padding-top: .8rem; border-top: 1px solid var(--border); font-size: .88rem; color: var(--muted); }
@media (min-width: 761px) { #verfahren .content-grid > div:first-child { position: sticky; top: 120px; align-self: start; } }
/* Leistungen „Gespräch und Untersuchung“: Hochformatfoto quadratisch zuschneiden, damit kein Leerraum neben dem kurzen Text entsteht. */
@media (min-width: 761px) { #diagnostik .content-grid { align-items: center; } }
#diagnostik .section-image img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 78% 50%; }
/* Startseite „Drei Bausteine“: Überschrift direkt unter dem Label, Text rechts oben bündig daneben. */
#bausteine .section-heading { align-items: start; }
/* Der rechte Text belegt zwei Zeilen, damit der Absatz links direkt unter der Überschrift steht. */
@media (min-width: 761px) { #bausteine .section-heading .intro { grid-row: span 2; } }
/* Startseite „Ihre Ärztin“: Facharzt- und Zusatzbezeichnung am Desktop in einer Zeile; Textspalte dafür breiter als das Porträt. */
@media (min-width: 1200px) {
  #aerztin .split { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  #aerztin .prose > h2 + p { white-space: nowrap; }
}
/* Hauptnavigation am Desktop etwas vom rechten Rand abrücken (seit der Terminbutton oben entfällt). */
@media (min-width: 1101px) { .site-header .site-nav { margin-right: 1.5rem; } }
/* Kontakt: Angaben in zwei Spalten, Bild füllt die Höhe des Textblocks. */
.contact-split { align-items: stretch; }
.contact-split .contact-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 2rem; margin-top: 2rem; }
.contact-split .contact-list dd { overflow-wrap: anywhere; }
.contact-split .contact-list-wide { grid-column: 1 / -1; }
.contact-split .image-frame { align-self: stretch; }
.contact-split .image-frame img { width: 100%; height: 100%; object-fit: cover; }
.absence-notice { padding-block: 1.5rem; background: var(--pale); }
.absence-notice h2 { font-size: 1.25rem; margin-bottom: .5rem; }
.absence-notice p:last-child { margin-bottom: 0; }
@media (max-width: 760px) {
  .movement-hero h1 { font-size: clamp(1.5rem, 8vw, 3.6rem); }
  .treatment-pillars, #behandlungen .service-grid { grid-template-columns: 1fr; }
  .treatment-pillars::before { display: none; }
  .contact-split .contact-list { grid-template-columns: 1fr; gap: 1.2rem; }
  .procedure-list article { padding: 1.2rem; }
}