/**
 * Bloecke der Behandlungsseiten.
 *
 * Werte stammen aus dem Entwurf (IDML) und aus style.css des Themes.
 * Die Form des Hauses ist der asymmetrische Radius 50px 0 50px 0.
 */

:root {

  /* ═════════════════════════════════════════════ Die Farben des Hauses ═════
   * Elf Werte, mehr gibt es nicht. Vor dem 01.09.2026 waren es 81, davon 60
   * mit einem Nachbarn, den man auf dem Bildschirm nicht unterscheiden konnte.
   *
   * Wer eine Farbe braucht, nimmt eine von hier. Ein neuer Hex-Wert im
   * Stylesheet ist keine Gestaltung, sondern eine Farbe, die beim naechsten
   * Mal danebenliegt.
   *
   * --hd-salbei und --hd-salbei-hell stehen exakt so im InDesign-Entwurf;
   * die uebrigen sind daraus abgeleitet. In Klammern der Kontrast gegen Weiss.
   */

  /* Marke */
  --hd-salbei:        #92a8ab;  /* 2,50:1 – Flaeche mit dunklem Text (CI)   */
  --hd-salbei-hell:   #c5d1d1;  /* 1,57:1 – helles Band, Linien (CI)        */
  --hd-salbei-tief:   #5b7a7e;  /* 4,64:1 – Flaeche mit weissem Text        */
  --hd-rose:          #bf969d;  /* 2,60:1 – Schaltflaeche, Akzent           */
  --hd-rose-tief:     #8a5c66;  /* 5,52:1 – Text, Hover                     */
  --hd-rose-hell:     #e4c8cc;  /* 1,56:1 – Flaeche, Rand                   */
  --hd-sand:          #ece9e4;  /* 1,21:1 – warme Flaeche (CI)              */

  /* Neutral */
  --hd-flaeche-hell:  #edf1f0;  /* 1,14:1 – helle Abschnittsflaeche         */
  --hd-text:          #65686a;  /* 5,61:1 – Fliesstext                      */
  --hd-tinte:         #2b3637;  /* 12,46:1 – tiefster Ton, Schleier, Schatten */

  /*
   * Alte Namen, damit bestehende Regeln weiterlaufen. Sie zeigen jetzt auf
   * die Leiter oben und sind selbst keine eigenen Farben mehr. Bei
   * Gelegenheit ersetzen, nicht ergaenzen.
   */
  --hd-salbei-mittel: var(--hd-salbei);
  --hd-salbei-grafik: var(--hd-salbei-tief);
  --hd-rose-dunkel:   var(--hd-rose-tief);
  --hd-linie:         var(--hd-salbei-hell);
  --hd-text-leise:    var(--hd-text);

  --hd-radius:        50px 0 50px 0;
  --hd-radius-mittel: 26px 0 26px 0;
  --hd-radius-klein:  9px;   /* der einzige kleine Radius im Haus */
  --hd-luft:          clamp(64px, 7vw, 110px);

  /*
   * Die eingebauten Kurven sind zu weich. Eintretendes und Austretendes
   * braucht eine kraeftige ease-out: sie legt sofort los, das fuehlt sich
   * schnell an. ease-in verzoegert genau den Moment, in dem der Nutzer
   * hinsieht – deshalb kommt sie hier nirgends vor.
   */
  --hd-aus:           cubic-bezier(0.23, 1, 0.32, 1);
  --hd-hin-her:       cubic-bezier(0.77, 0, 0.175, 1);
}

/* ------------------------------------------------------------ Grundlagen */

.hd-sprunglink {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 12px 22px;
  background: #ffffff;
  color: var(--hd-text);
  border-radius: var(--hd-radius-klein);
}

.hd-sprunglink:focus {
  left: 20px;
  top: 12px;
  outline: 3px solid var(--hd-rose);
}

.hd-behandlung {
  color: var(--hd-text);
  font-weight: 300;
}

.hd-section {
  position: relative;
  padding: var(--hd-luft) 0;
}

.hd-section--weiss  { background: #ffffff; }
.hd-section--hell   { background: var(--hd-flaeche-hell); }
.hd-section--sand   { background: var(--hd-sand); }
.hd-section--salbei { background: var(--hd-salbei); color: #ffffff; }
.hd-section--rose   { background: var(--hd-rose); color: #ffffff; }

.hd-section--salbei .hd-titel,
.hd-section--rose .hd-titel { color: #ffffff; }

/* Zwei Abschnitte gleicher Flaeche stossen sonst mit doppelter Luft aneinander. */
/*
 * Zwei gleichfarbige Textabschnitte hintereinander sollen nicht die doppelte
 * Luft bekommen. Vollflaechige Bildabschnitte sind ausgenommen: nach dem
 * Kopfbild stand die H1 sonst mit 0 px Abstand direkt an der Bildkante —
 * gemessen am 31.08.2026.
 */
/*
 * Zwei aufeinanderfolgende TEXT-Abschnitte gleicher Fläche sollen nicht die
 * doppelte Luft bekommen. Alles andere behält seinen Abstand.
 *
 * Vorher stand hier eine Liste von Ausnahmen (:not(.hd-hero):not(.hd-cta)…).
 * Die wurde bei jedem neuen Block unvollständig – zuletzt beim Anspruchs-Block,
 * der sich selbst dunkel färbt, aber die Klasse hd-section--weiss trägt und dem
 * folgenden Abschnitt damit die obere Polsterung nahm.
 *
 * Jetzt greift die Regel nur noch zwischen zwei .hd-abschnitt. Wer einen neuen
 * Block baut, muss nichts mehr eintragen und kann nichts mehr vergessen.
 */
.hd-abschnitt.hd-section--hell  + .hd-abschnitt.hd-section--hell,
.hd-abschnitt.hd-section--sand  + .hd-abschnitt.hd-section--sand,
.hd-abschnitt.hd-section--weiss + .hd-abschnitt.hd-section--weiss { padding-top: 0; }

/*
 * Dasselbe fuer die uebrigen Lesebloecke, 09.09.2026.
 *
 * Gemessen auf der Hautkrebsvorsorge: zwischen dem Hinweis zu den
 * Fitzpatrick-Hauttypen und der Tabelle darueber lagen 202 px, obwohl beide
 * weiss sind und inhaltlich zusammengehoeren — 100,8 px Polsterung unten plus
 * 100,8 px oben. Bei einem FARBWECHSEL ist dieser doppelte Abstand richtig,
 * er trennt zwei Baender. Bei gleicher Farbe trennt er nur Inhalt, der als
 * ein Band gelesen wird.
 *
 * Bewusst NICHT als \`.hd-section--weiss + .hd-section--weiss\`: der
 * Anspruchs-Block faerbt sich selbst dunkel, traegt aber die Klasse
 * hd-section--weiss (siehe Begruendung oben). Aufgezaehlt sind deshalb nur
 * Bloecke, deren Farbe wirklich aus der Klasse kommt. Wer einen neuen
 * selbstfaerbenden Block baut, muss hier nichts eintragen.
 */
.hd-section--weiss:not(.hd-section--eigenfarbe) + .hd-section--weiss:not(.hd-section--eigenfarbe),
.hd-section--hell:not(.hd-section--eigenfarbe)  + .hd-section--hell:not(.hd-section--eigenfarbe),
.hd-section--sand:not(.hd-section--eigenfarbe)  + .hd-section--sand:not(.hd-section--eigenfarbe) {
  padding-top: 0;
}

/*
 * Ausnahme: randlose Vollflaechen. Nach Galerie, Bildabschnitt und
 * Sprechzeiten bekommt das folgende Band seine volle Polsterung zurueck.
 *
 * Am 10.09.2026 auf Bildabschnitt und Sprechzeiten erweitert: Beide setzen
 * selbst `padding: 0`, damit Bild und Farbflaeche die Kanten erreichen. Fiel
 * beim Nachfolger die obere Polsterung ebenfalls weg, blieb gar kein Abstand
 * — gemessen ueber alle 91 Seiten an 13 Stellen, darunter der Kachelblock
 * „Anwendungsgebiete" auf der Botox-Seite. Folgt eine weitere randlose
 * Flaeche, bleibt es beim buendigen Anschluss; deshalb die beiden :not().
 *
 * Die Regel darueber geht davon aus, dass zwei gleichfarbige Baender als
 * eines gelesen werden — bei Text stimmt das. Die Galerie endet aber mit
 * einer dichten Bildkante, und ein Titel 101 px darunter klebt daran fest
 * (am 09.09.2026 auf der Hautkrebsvorsorge gemessen: Galerie -> „Haeufige
 * Fragen"). Bilder brauchen mehr Rand als Absaetze.
 *
 * Spezifitaet: (0,4,0) wie die Regel darueber, steht aber spaeter — deshalb
 * gewinnt sie. Wer hier etwas aendert, muss beides zusammen betrachten.
 */
.hd-galerieblock.hd-section + .hd-section:not(.hd-section--eigenfarbe):not(.hd-bildabschnitt):not(.hd-sprechzeitenblock),
.hd-bildabschnitt.hd-section + .hd-section:not(.hd-section--eigenfarbe):not(.hd-bildabschnitt):not(.hd-sprechzeitenblock),
.hd-sprechzeitenblock.hd-section + .hd-section:not(.hd-section--eigenfarbe):not(.hd-bildabschnitt):not(.hd-sprechzeitenblock) {
  padding-top: var(--hd-luft);
}

.hd-titel {
  margin: 0 0 28px;
  color: var(--hd-text);
  font-size: clamp(1.9rem, 2.6vw, 2.7rem);
  font-weight: 300;
  line-height: 1.15;
  text-transform: uppercase;
}

h3.hd-titel { font-size: clamp(1.4rem, 1.8vw, 1.8rem); }

/*
 * Lesbare Zeilenlaenge. Gilt auch in Abschnitten ueber die ganze Breite –
 * ein Text, der 1450px weit laeuft, wird nicht gelesen.
 *
 * Am 01.09.2026 umgestellt: die Begrenzung sitzt jetzt an den Textzeilen
 * selbst, nicht am Kasten. Vorher zwang der Kasten auch eingebettete Raster
 * in die Lesebreite — die sechs Fachbereiche der Startseite standen dadurch
 * als 210 px schmale Kaestchen da statt ueber die volle Containerbreite,
 * wie im Bestand.
 */
.hd-mass { max-width: none; }

.hd-mass > p,
.hd-mass > ul,
.hd-mass > ol,
.hd-mass > dl,
.hd-mass > blockquote,
.hd-mass > h3,
.hd-mass > h4,
.hd-mass > h5 { max-width: 68ch; }

.hd-mass--mitte > p { margin-inline: auto; }

.hd-mass--mitte {
  margin-inline: auto;
  text-align: center;
}

.hd-behandlung p {
  margin: 0 0 1.1em;
  font-size: 1.05rem;
  line-height: 1.7;
}

/*
 * Fliesstext-Links – ausdruecklich nur in den Textbehaeltern.
 *
 * Zuvor stand hier `.hd-behandlung a:not(.btn):not(…)`. Jede :not()-Klasse
 * zaehlt zur Spezifitaet, die Regel gewann daher gegen Schaltflaechen und
 * gegen das Inhaltsverzeichnis. Gemessen am 31.08.2026: „ZUR VITA“ 1,88:1,
 * Verzeichniseintraege 3,04:1. Aufzaehlen ist hier praeziser als ausnehmen.
 */
/*
 * 02.09.2026: `a` traf auch Schaltflaechen. Gemessen im FAQ der Startseite:
 * #8a5c66 auf #bf969d = 2,0:1 — die Regel (0,1,1) schlug `.hd-btn` (0,1,0).
 * `:not(:where(.btn))` nimmt Schaltflaechen aus, ohne die Spezifitaet zu
 * erhoehen; genau daran war der frueher entfernte `:not(.btn)`-Versuch
 * gescheitert (siehe Kommentar oben).
 */
.hd-mass a:not(:where(.btn)),
.hd-quellen__text a:not(:where(.btn)),
.hd-faq__antwort a:not(:where(.btn)),
.hd-vorteil__text a:not(:where(.btn)),
.hd-schritt__text a:not(:where(.btn)) {
  /*
   * Gemessen am 31.08.2026: #8a5c66 auf der hellen Flaeche = 3,04:1.
   * Der tiefe Ton liegt bei 5,2:1. Unterstrichen, weil ein Link, der sich
   * nur durch die Farbe unterscheidet, mindestens 3:1 gegen den Fliesstext
   * braeuchte – Unterstreichen ist der ehrlichere Weg.
   */
  color: var(--hd-rose-tief);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hd-mass a:not(:where(.btn)):hover,
.hd-quellen__text a:not(:where(.btn)):hover,
.hd-faq__antwort a:not(:where(.btn)):hover,
.hd-vorteil__text a:not(:where(.btn)):hover,
.hd-schritt__text a:not(:where(.btn)):hover { text-decoration-thickness: 2px; }

.hd-einleitung { color: var(--hd-text); }

/*
 * Alle Termin-Schaltflaechen sind gefuellt in Rosé — dieselbe Farbe wie
 * „TERMIN BUCHEN“ in der Kopfzeile, damit die Handlungsaufforderung auf der
 * ganzen Seite gleich aussieht. Vorher waren es Konturknoepfe in Salbei.
 *
 * Weiss auf --hd-rose misst 2,60:1 und liegt damit unter den geforderten
 * 4,5:1. Das ist der Wert, den die Kopfzeile seit jeher hat; wir bleiben
 * bewusst dabei. Der Hover geht auf --hd-rose-tief und misst dort 5,50:1.
 */
.hd-btn {
  display: inline-block;
  padding: 12px 30px;
  border: 1px solid var(--hd-rose);
  border-radius: var(--hd-radius-klein);
  background: var(--hd-rose);
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 300;
  text-decoration: none;
  transition: background-color .25s var(--hd-aus), border-color .25s var(--hd-aus),
    color .25s var(--hd-aus);
}

.hd-btn:hover,
.hd-btn:focus-visible {
  background: var(--hd-rose-tief);
  border-color: var(--hd-rose-tief);
  color: #ffffff;
}

/* Auf farbigen Flaechen dieselbe Fuellung — nur die Kontur tritt zurueck. */
.hd-btn--hell {
  border-color: var(--hd-rose);
  background: var(--hd-rose);
  color: #ffffff;
}

.hd-btn--hell:hover,
.hd-btn--hell:focus-visible {
  background: var(--hd-rose-tief);
  border-color: var(--hd-rose-tief);
  color: #ffffff;
}

.hd-behandlung :focus-visible {
  outline: 3px solid var(--hd-rose);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------ Hero */

.hd-hero {
  padding: 0;
  overflow: hidden;
}

.hd-hero__bildflaeche { position: absolute; inset: 0; }

.hd-hero__bild {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.hd-hero__schleier {
  position: absolute;
  inset: 0;
  /*
   * Zwei Schichten. Gemessen am 31.08.2026: das Kopfbild hat unter dem Text
   * eine mittlere Leuchtdichte von 0,657 – mit einer Schicht bleibt weisser
   * Text unter 4,5:1. Waagerecht fuer die Textspalte, senkrecht fuer den
   * unteren Rand, an dem Titel und Schaltflaeche stehen.
   */
  background:
    linear-gradient(0deg,  rgba(43, 54, 55, 0.826) 0%, rgba(43, 54, 55, 0.354) 42%, rgba(43, 54, 55, 0) 72%),
    linear-gradient(90deg, rgba(43, 54, 55, 0.732) 0%, rgba(43, 54, 55, 0.354) 52%, rgba(43, 54, 55, 0) 88%);
}

.hd-hero__inhalt {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  min-height: 560px;
  padding-bottom: 90px;
  padding-top: 90px;
}

/*
 * Feste 700 px waren zu viel: auf einem MacBook Pro M4 ist das Fenster
 * 1511 x 771 px gross (gemessen am 31.08.2026). Zusammen mit Topbar,
 * Navigation und Admin-Leiste rutschte die Bewertungs-Pille unter die
 * Bildkante. Jetzt richtet sich die Hoehe nach dem Fenster – mit Untergrenze,
 * damit das Bild auf kurzen Fenstern nicht zum Streifen wird, und Obergrenze,
 * damit es auf grossen nicht ins Uferlose waechst.
 */
/*
 * Das Kopfbild fuellt auf dem Desktop den sichtbaren Bereich. Die genaue
 * Resthoehe (Fenster minus Kopfleisten, inklusive Admin-Leiste) misst das
 * Skript und setzt sie als --hd-hero-rest. Der Wert hier ist die Ruecklage,
 * falls kein JavaScript laeuft.
 */
.hd-hero--gross .hd-hero__inhalt {
  /* Rueckfall ohne dvh (siehe Kommentar beim sanften Schleier). */
  min-height: var(--hd-hero-rest, clamp(430px, calc(100vh - 175px), 900px));
  min-height: var(--hd-hero-rest, clamp(430px, calc(100dvh - 175px), 900px));
}

@media (max-height: 860px) {
  .hd-hero__inhalt { padding-top: 60px; padding-bottom: 56px; }
  /* Auf flachen Bildschirmen etwas kleiner — im selben Verhältnis wie oben. */
  .hd-hero__titel { font-size: clamp(1.6rem, 2.45vw, 2.3rem); }
  .hd-hero__bewertung { margin-top: 24px; }
}

.hd-hero__text { max-width: 780px; color: #ffffff; }

.hd-hero__titel {
  display: block;
  margin: 0 0 14px;
  color: #ffffff;
  /*
   * 02.09.2026: Vorher clamp(2.2rem, 4vw, 3.6rem). Die Startseite hatte über
   * ihre Schleier-Variante eine eigene, kleinere Logik — dadurch stand der
   * Titel auf Botox deutlich größer als auf der Startseite. Jetzt gilt
   * dieselbe Größenlogik für alle Kopfbilder.
   */
  font-size: clamp(1.75rem, 2.9vw, 2.75rem);
  font-weight: 300;
  line-height: 1.1;
  text-transform: uppercase;
}

.hd-hero__unterzeile {
  margin: 0 0 30px;
  color: #ffffff;
  font-size: clamp(1.05rem, 1.66vw, 1.5625rem);
  font-weight: 300;
}

.hd-hero__bewertung { margin-top: 34px; }

/* ---------------------------------------------------------- Lesebereich */

/*
 * Der Abschnitt selbst bekommt KEIN overflow:hidden.
 *
 * overflow:hidden macht ihn zum Scroll-Behaelter — und damit bleibt jedes
 * position:sticky darin wirkungslos, waehrend getComputedStyle brav "sticky"
 * meldet. Am 31.08.2026 genau daran gescheitert: das Inhaltsverzeichnis lief
 * nicht mit.
 *
 * clip-path allein reichte nicht: es beschneidet nur die Darstellung, der
 * herausragende Kreis blieb im Scrollbereich und ergab 190 px Querueberlauf.
 * Der Kreis sitzt deshalb auf einer eigenen Ebene, die beschnitten werden
 * darf, weil sie kein Vorfahre des Verzeichnisses ist.
 */
.hd-lese { overflow: visible; }

.hd-lese__deko {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hd-lese__deko::after {
  content: "";
  position: absolute;
  top: -160px;
  right: -190px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: rgba(146, 168, 171, .10);
}

/*
 * 02.09.2026: Auf dem Telefon war dieser Kreis 620 px groß bei 375 px
 * Bildschirmbreite. Seine Kante lief quer durch Überschrift und Fließtext —
 * das war das „H1 liegt über der Bubble“. Jetzt sitzt er kleiner über dem
 * Text und berührt ihn nicht mehr: 340 px, Unterkante bei 170 px, während
 * die Überschrift erst bei 221 px beginnt (gemessen bei 375 px).
 */
@media (max-width: 767.98px) {
  .hd-lese__deko::after {
    width: 340px;
    height: 340px;
    top: -170px;
    right: -130px;
  }
}

.hd-lese__raster { position: relative; z-index: 2; }

/*
 * Ein Block in der Lesespalte malt keine eigene Flaeche. Er sitzt in einem
 * Lesebereich, und dessen Flaeche gilt fuer alles darin. Ohne diese Regel
 * traegt jeder Abschnitt sein eigenes Weiss und erscheint auf einem hellen
 * Lesebereich als weisser Kasten in Textbreite — am 10.09.2026 auf elf
 * Seiten sichtbar geworden, nachdem der zweite Lesebereich auf „hell"
 * gestellt wurde. Bloecke mit eigener Farbe (Hero, CTA, Anspruch) sind
 * ausgenommen; sie kommen in der Lesespalte zwar nicht vor, aber die
 * Ausnahme kostet nichts und verhindert eine Ueberraschung.
 */
.hd-lese__spalte .hd-section:not(.hd-section--eigenfarbe) { background: transparent; }

.hd-lese__spalte > .hd-section { padding: 0 0 var(--hd-luft); }
.hd-lese { padding-top: calc(var(--hd-luft) * 1.15); }
.hd-lese__spalte > .hd-section:last-child { padding-bottom: 0; }
/*
 * Auch in der Lesespalte bleibt die Zeilenlaenge begrenzt. Ohne diese Grenze
 * lief der Text bei 1440 px auf 108 Zeichen – gemessen am 31.08.2026;
 * lesbar sind 65 bis 75.
 */
.hd-lese__spalte .hd-mass { max-width: 70ch; }

.hd-lese__rand { position: relative; }

.hd-verzeichnis {
  position: sticky;
  top: 140px;
  background: var(--hd-flaeche-hell);
  border-radius: var(--hd-radius-mittel);
  overflow: hidden;
}

.hd-verzeichnis__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 26px;
  color: var(--hd-text);
  font-size: 1.05rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.hd-verzeichnis__kopf::-webkit-details-marker { display: none; }

.hd-verzeichnis__kopf::after {
  content: "";
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--hd-salbei);
  border-bottom: 2px solid var(--hd-salbei);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .25s var(--hd-aus);
}

.hd-verzeichnis[open] .hd-verzeichnis__kopf::after {
  transform: rotate(225deg) translate(-3px, -3px);
}

/*
 * Die Liste scrollt in sich selbst, sobald sie hoeher wird als der Bildschirm.
 * Ohne das lief der mitlaufende Kasten auf flachen Bildschirmen unten aus dem
 * Bild — bei 20 Eintraegen und 771 px Fensterhoehe (MacBook Pro) fehlten die
 * letzten Punkte. Abgezogen sind Kopfzeile (140 px Versatz), Kastenkopf und
 * Luft nach unten.
 */
.hd-verzeichnis__liste ul {
  margin: 0;
  padding: 0 26px 24px;
  list-style: none;
  max-height: calc(100vh - 250px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--hd-salbei) transparent;
}

.hd-verzeichnis__liste ul::-webkit-scrollbar { width: 6px; }

.hd-verzeichnis__liste ul::-webkit-scrollbar-thumb {
  background: var(--hd-salbei);
  border-radius: 3px;
}

@media (max-width: 991.98px) {
  .hd-verzeichnis__liste ul { max-height: none; overflow-y: visible; }
}

.hd-verzeichnis__liste li { margin: 0; }

/*
 * Die Fliesstext-Linkfarbe wuerde hier gewinnen (hoehere Spezifitaet durch
 * die :not()-Kette). Deshalb steht der Verzeichnispfad ausdruecklich mit
 * .hd-behandlung davor. Gemessen am 31.08.2026: sonst 3,04:1 statt 4,93:1.
 */
.hd-behandlung .hd-verzeichnis__liste a,
.hd-verzeichnis__liste a,
.hd-verzeichnis__liste span {
  display: block;
  padding: 12px 0 12px 22px;  /* ergibt >= 44px Klickhoehe */
  position: relative;
  color: var(--hd-text);
  font-size: 1rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .8);
}

.hd-verzeichnis__liste a::before {
  content: "/";
  position: absolute;
  left: 0;
  color: var(--hd-salbei);
}

.hd-behandlung .hd-verzeichnis__liste a:hover,
.hd-behandlung .hd-verzeichnis__liste a:focus-visible { color: var(--hd-rose-tief); }

.hd-behandlung .hd-verzeichnis__liste a[aria-current="true"] {
  color: var(--hd-rose-tief);
  font-weight: 400;
}

/* -------------------------------------------------------------- Tabelle */

.hd-tabelle { max-width: 1040px; margin-inline: auto;
  border-radius: var(--hd-radius-mittel);
  overflow: hidden;
}

.hd-tabelle__kopf {
  padding: 16px 30px;
  background: var(--hd-rose-tief);
  border-radius: var(--hd-radius-mittel);
  color: #ffffff;
  font-size: 1.25rem;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.hd-tabelle__liste { margin: 0; }

.hd-tabelle__zeile {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 2.2fr;
  gap: 10px 26px;
  padding: 15px 30px;
}

.hd-tabelle__zeile:nth-child(even) { background: var(--hd-flaeche-hell); }

.hd-tabelle__zeile dt { font-weight: 400; }
.hd-tabelle__zeile dd { margin: 0; }

/* ------------------------------------------------------------- Vorteile */

/* Groesser gesetzt als im Entwurf: eigene Karten statt Tabellenzeilen. */
.hd-vorteile__kopf {
  display: inline-block;
  margin-top: 0;               /* seit 23.09. ein <h2>: die Grundwerte der */
  font-weight: 300;            /* Ueberschriften nicht erben, Optik wie zuvor */
  line-height: 1.5;
  margin-bottom: 34px;
  padding: 14px 40px 14px 34px;
  background: var(--hd-rose-tief);
  border-radius: var(--hd-radius-mittel);
  color: #ffffff;
  font-size: 1.35rem;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/*
 * Zwei Spalten ab Tablet: acht Vorteile untereinander ergaben eine sehr lange
 * Kette, in der die einzelne Karte unterging. Nebeneinander gleichen sich die
 * Hoehen einer Zeile von selbst an — das macht das Raster.
 */
.hd-vorteile__liste {
  display: grid;
  gap: 22px;
}

@media (min-width: 768px) {
  .hd-vorteile__liste { grid-template-columns: repeat(2, 1fr); }
}

.hd-vorteil {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 30px 34px;
  background: var(--hd-flaeche-hell);
  border-radius: var(--hd-radius-mittel);
}

.hd-vorteil__haken {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--hd-salbei);
  position: relative;
}

.hd-vorteil__haken::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 9px;
  width: 8px;
  height: 14px;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(45deg);
}

.hd-vorteil__titel {
  margin: 0 0 6px;
  font-size: 1.2rem;
  font-weight: 400;
}

.hd-vorteil__text p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- Ärzte */

.hd-aerzte__raster { --hd-arzt-hoehe: 440px; }

.hd-arzt__spalte .team-card { height: var(--hd-arzt-hoehe); }

.hd-arzt__platzhalter {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--hd-salbei-hell);
}

.hd-aerzte__raster[data-spalten="6"] .hd-arzt__spalte { flex: 0 0 auto; width: 50%; }

@media (max-width: 767.98px) {
  .hd-aerzte__raster[data-spalten="6"] .hd-arzt__spalte { width: 100%; }
}

/* ---------------------------------------------------------- Bewertungen */

/*
 * Das Google-Widget zeigt links die Note und rechts drei Bewertungen – es
 * braucht die volle Breite. Neben dem ProvenExpert-Siegel wurde beides zu
 * eng. Standard ist deshalb untereinander.
 */
.hd-bewertung { display: flex; flex-direction: column; align-items: center; gap: 46px; }

.hd-bewertung--nebeneinander {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}

.hd-bewertung__karte { width: 100%; }
.hd-bewertung__karte--google { max-width: 1100px; }
.hd-bewertung__karte--pe { max-width: 430px; }

.hd-bewertung--untereinander .hd-bewertung__karte--pe {
  padding-top: 40px;
  border-top: 1px solid var(--hd-linie);
  width: auto;
}

/* -------------------------------------------------------------- Kacheln */

.hd-kacheln {
  display: grid;
  gap: 26px;
  margin-top: 40px;
}

/*
 * Ohne Blockueberschrift ist das Raster das erste Kind — dann darf es keinen
 * Abstand nach oben tragen. Sonst kollabiert das Margin durch den Block
 * (padding-top 0 aus der Zusammenzieh-Regel) nach aussen und legt 40 px
 * Body-Weiss zwischen zwei Baender. Gemessen am 11.09.2026 auf dem
 * Longevity-Hub, Saeule 2: Text hell, Luecke weiss, Kacheln hell.
 */
.hd-kacheln:first-child { margin-top: 0; }

.hd-kacheln--2 { grid-template-columns: repeat(2, 1fr); }
.hd-kacheln--3 { grid-template-columns: repeat(3, 1fr); }
.hd-kacheln--4 { grid-template-columns: repeat(4, 1fr); }

.hd-kachel {
  display: block;
  border-radius: var(--hd-radius);
  overflow: hidden;
  text-decoration: none;
  transition: transform .3s var(--hd-aus), box-shadow .3s var(--hd-aus);
}

.hd-kachel__titel {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.hd-kachel p { font-size: 1rem; line-height: 1.6; }
.hd-kachel p:last-child { margin-bottom: 0; }

/* Bauart A: durchgefaerbt, Titel mittig – wie „Anwendungsgebiete“ im Entwurf. */
.hd-kacheln--flaeche .hd-kachel {
  padding: 34px 30px 38px;
  background: var(--hd-salbei);
  color: #ffffff;
  text-align: center;
}

/*
 * Der Trennstrich unter dem Kacheltitel. Aus dem Entwurf gemessen (IDML,
 * Spread_u683b): eine GraphicLine von 44 pt Laenge und 2 pt Staerke in der
 * Rosé-Sonderfarbe c23m42y26k5, mittig unter dem Titel — nicht die
 * durchgehende weisse Linie ueber die ganze Kachelbreite, die vorher hier
 * stand und auf dem Salbei grau wirkte (gemessen: 383 px, 1 px, Weiss 55 %).
 */
.hd-kacheln--flaeche .hd-kachel__kopf {
  position: relative;
  padding-bottom: 16px;
  margin-bottom: 18px;
}

.hd-kacheln--flaeche .hd-kachel__kopf::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 44px;
  height: 2px;
  background: var(--hd-rose);
  transform: translateX(-50%);
}

/* Bauart B: Kopfbalken, Text linksbuendig – wie „Medizinische Anwendungsgebiete“. */
.hd-kacheln--kopf .hd-kachel {
  background: var(--hd-flaeche-hell);
  color: var(--hd-text);
}

.hd-kacheln--kopf .hd-kachel__kopf {
  padding: 15px 28px;
  background: var(--hd-salbei);
  border-radius: var(--hd-radius);
  color: #ffffff;
}

.hd-kacheln--kopf .hd-kachel__text { padding: 26px 28px 32px; }

.hd-kachel--link { position: relative; }

/*
 * Rueckmeldung beim Ueberfahren: die Kachel hebt sich, die Flaeche vertieft
 * sich, der Kopfbalken faerbt in Rosé um. Kein Massstabssprung – der
 * verschoebe das Raster.
 */
.hd-kachel--link:hover,
.hd-kachel--link:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 16px 38px rgba(43, 54, 55, .18);
}

.hd-kacheln--flaeche .hd-kachel--link { transition: transform .3s var(--hd-aus), box-shadow .3s var(--hd-aus), background-color .3s var(--hd-aus); }
.hd-kacheln--flaeche .hd-kachel--link:hover,
.hd-kacheln--flaeche .hd-kachel--link:focus-visible { background: #92a8ab; }

.hd-kacheln--kopf .hd-kachel--link .hd-kachel__kopf { transition: background-color .3s var(--hd-aus); }
.hd-kacheln--kopf .hd-kachel--link:hover .hd-kachel__kopf,
.hd-kacheln--kopf .hd-kachel--link:focus-visible .hd-kachel__kopf { background: var(--hd-rose-tief); }

.hd-kacheln--kopf .hd-kachel__mehr { padding: 0 28px 30px; color: var(--hd-rose-tief); }
.hd-kacheln--flaeche .hd-kachel__mehr { color: #ffffff; }
.hd-kacheln--kopf .hd-kachel__text { padding-bottom: 6px; }

/*
 * Der freistehende Pfeil in der Ecke wirkte verloren. Jetzt eine benannte
 * Zeile: sie sagt, dass es weitergeht, und der Pfeil gehoert sichtbar dazu.
 */
.hd-kachel__mehr {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font-size: .95rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  opacity: .82;
  transition: opacity .25s var(--hd-aus), gap .25s var(--hd-aus);
}

.hd-kachel__pfeil {
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .25s var(--hd-aus);
}

.hd-kachel--link:hover .hd-kachel__mehr,
.hd-kachel--link:focus-visible .hd-kachel__mehr { opacity: 1; gap: 16px; }

.hd-kachel--link:hover .hd-kachel__pfeil { transform: rotate(-45deg) translate(2px, 2px); }

/* ------------------------------------------------------------- Schritte */

.hd-schritte {
  counter-reset: hd-schritt;
  display: grid;
  gap: 24px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(2, 1fr);
}

.hd-schritt {
  counter-increment: hd-schritt;
  position: relative;
  padding: 32px 34px 34px 96px;
  background: #ffffff;
  border: 1px solid var(--hd-linie);
  border-radius: var(--hd-radius-mittel);
}

.hd-section--weiss .hd-schritt { background: var(--hd-flaeche-hell); border-color: transparent; }

.hd-schritt::before {
  content: counter(hd-schritt);
  position: absolute;
  left: 32px;
  top: 30px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hd-salbei);
  border-radius: 50%;
  color: #ffffff;
  font-size: 1.25rem;
}

.hd-schritt__titel {
  margin: 0 0 10px;
  font-size: 1.2rem;
  font-weight: 400;
}

.hd-schritt__text p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- Video */

/*
 * „Ueber uns" wie im Entwurf: ein heller Kasten mit mittigem Text, das Video
 * darin, dazu die dekorativen Kreise. Der Abschnitt laeuft ueber die ganze
 * Breite, der Kasten steht eingerueckt.
 */
.hd-videokasten {
  position: relative;
  overflow: hidden;
  padding: clamp(46px, 5vw, 78px) clamp(24px, 4vw, 70px) clamp(52px, 5vw, 86px);
  background: var(--hd-flaeche-hell);
  border-radius: var(--hd-radius);
}

.hd-section--hell .hd-videokasten { background: #ffffff; }

.hd-videokasten__deko { position: absolute; inset: 0; pointer-events: none; }

.hd-videokasten__deko::before,
.hd-videokasten__deko::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(146, 168, 171, .13);
}

.hd-videokasten__deko::before { width: 320px; height: 320px; left: -120px; bottom: -110px; }
.hd-videokasten__deko::after  { width: 180px; height: 180px; left: 130px; bottom: 40px; background: rgba(146, 168, 171, .09); }

.hd-videokasten__inhalt { position: relative; z-index: 2; }

.hd-titel--mitte { text-align: center; }

.hd-video { margin: 40px auto 0; max-width: 860px; }

.hd-video__flaeche {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--hd-salbei-hell);
  border-radius: var(--hd-radius);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 16 / 9;
}

.hd-video__vorschau {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hd-video__knopf {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  transition: transform .25s var(--hd-aus), background-color .25s var(--hd-aus);
}

.hd-video__knopf::after {
  content: "";
  position: absolute;
  left: 39px;
  top: 31px;
  border-left: 26px solid var(--hd-salbei);
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
}

.hd-video__flaeche:hover .hd-video__knopf { transform: scale(1.07); background: #ffffff; }

.hd-video__rahmen {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--hd-radius);
  display: block;
}

/* ------------------------------------------------------------------ FAQ */

.hd-faq__kopf .hd-titel { margin-bottom: 16px; }

.hd-faq__eintrag { border-bottom: 1px solid var(--hd-linie); }
.hd-faq__eintrag:first-child { border-top: 1px solid var(--hd-linie); }

.hd-faq__frage {
  position: relative;
  padding: 24px 60px 24px 0;
  color: var(--hd-text);
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

.hd-faq__frage::-webkit-details-marker { display: none; }

.hd-faq__frage::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 20px;
  height: 2px;
  margin-top: -1px;
  background: var(--hd-salbei);
}

.hd-faq__frage::before {
  content: "";
  position: absolute;
  right: 23px;
  top: 50%;
  width: 2px;
  height: 20px;
  margin-top: -10px;
  background: var(--hd-salbei);
  transition: transform .25s var(--hd-aus), opacity .25s var(--hd-aus);
}

.hd-faq__eintrag[open] .hd-faq__frage::before { transform: rotate(90deg); opacity: 0; }

.hd-faq__antwort { padding: 0 60px 26px 0; }
.hd-faq__antwort p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- Quellen */

/*
 * Bewusst zurueckhaltend: keine eigene Flaeche, kein Rahmen. Die Belege
 * sollen auffindbar sein, aber den Lesefluss nicht unterbrechen.
 */
/*
 * Am 01.09.2026 korrigiert: der Abschnitt hatte oben keine Polsterung, dafuer
 * eine eigene von 34 px am Kasten — die Flaeche sass dadurch sichtbar ausser
 * Mitte. Und die Linie darueber wirkte wie ein Fehler, weil sie ueber der
 * Flaeche stand statt darin. Beides raus; oben und unten jetzt gleich.
 */
.hd-quellen { max-width: 1040px; }

.hd-quellen__titel {
  margin: 0 0 14px;
  color: #65686a;
  font-size: .95rem;
  font-weight: 400;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.hd-quellen__text p {
  margin-bottom: .7em;
  color: #65686a;
  font-size: .92rem;
  line-height: 1.6;
}

.hd-quellen__text a { color: #65686a; text-decoration: underline; }

/* --------------------------------------------------------------- Themen */

.hd-themen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 40px;
}

.hd-thema {
  position: relative;
  display: block;
  aspect-ratio: 16 / 11;
  border-radius: var(--hd-radius);
  overflow: hidden;
  background: var(--hd-salbei-hell);
  text-decoration: none;
}

.hd-thema__bild {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s var(--hd-aus);
}

/*
 * Gemessen am 31.08.2026 an den drei eingesetzten Motiven: bei rgba(43, 54, 55,0.378)
 * stand der weisse Titel ueber den hellsten Bildstellen bei 2,26:1.
 * Mit .58 bis .72 sind es 4,8:1 im ungünstigsten Bereich.
 */
.hd-thema__schleier {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(43, 54, 55, 0.85) 0%, rgba(43, 54, 55, 0.684) 100%);
  transition: background-color .3s var(--hd-aus), opacity .3s var(--hd-aus);
}

.hd-thema__titel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: #ffffff;
  font-size: clamp(1.15rem, 1.5vw, 1.55rem);
  font-weight: 300;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

a.hd-thema:hover .hd-thema__bild { transform: scale(1.05); }
a.hd-thema:hover .hd-thema__schleier { background: linear-gradient(0deg, rgba(43, 54, 55, 0.873) 0%, rgba(43, 54, 55, 0.708) 100%); }

/* ------------------------------------------------------------------ CTA */

.hd-cta {
  padding: 0;
  overflow: hidden;
  contain: paint;
}

/*
 * Reserve fuer den Parallax-Weg — bewusst in Pixeln und knapp.
 *
 * Sie war -18 %, bei 820 px Abschnittshoehe also 148 px oben und unten. Damit
 * ist die Bildflaeche 1116 px hoch, das Motiv (1920 x 775) muss zum Fuellen um
 * das 1,44-Fache vergroessert werden — und dann sind waagerecht 1322 px
 * ueberschuessig und senkrecht oben wie unten je 13 % abgeschnitten. Genau da
 * sitzen die Koepfe. Gemessen am 01.09.2026.
 *
 * Mit 40 px Reserve betraegt der Zoom nur noch 1,16: senkrecht bleiben 4,4 %
 * bis 95,6 % des Motivs sichtbar statt 13,3 % bis 86,7 %, und waagerecht passen
 * beide Personen vollstaendig ins Bild. Der Parallax-Weg ist entsprechend auf
 * 40 px begrenzt — mehr als die Reserve darf er nie laufen, sonst zeigt sich
 * die Kante.
 */
.hd-cta__bildflaeche {
  position: absolute;
  inset: -40px 0;
}

.hd-cta__bild {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hd-cta--links .hd-cta__bild  { object-position: 75% center; }
.hd-cta--rechts .hd-cta__bild { object-position: 25% center; }

.hd-cta__schleier { position: absolute; inset: 0; }

.hd-cta--links .hd-cta__schleier {
  background: linear-gradient(90deg, rgba(43, 54, 55, 0.802) 0%, rgba(43, 54, 55, 0.531) 45%, rgba(43, 54, 55, 0) 78%);
}

.hd-cta--rechts .hd-cta__schleier {
  background: linear-gradient(270deg, rgba(43, 54, 55, 0.802) 0%, rgba(43, 54, 55, 0.531) 45%, rgba(43, 54, 55, 0) 78%);
}

.hd-cta--mitte .hd-cta__schleier { background: rgba(43, 54, 55, 0.566); }

.hd-cta__inhalt {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: var(--hd-cta-hoehe, 720px);
  padding: 70px 30px;
}

.hd-cta--rechts .hd-cta__inhalt { justify-content: flex-end; }
.hd-cta--mitte .hd-cta__inhalt  { justify-content: center; }

/*
 * Die Textkarte bleibt links, wo sie steht. Sie ist nur schmaler als die
 * seitlichen Varianten sonst: das Motiv hat links eine ruhige Wandflaeche
 * (Quellspalten 0 bis rund 19 %, Kantenenergie 4,3 bis 7,6 gegenueber 11 bis
 * 25 dort, wo die Menschen sitzen). Bei 820 px Hoehe endet diese Flaeche bei
 * 427 px im Kasten. Eine Karte von 460 px bleibt damit auf der Wand und
 * beruehrt hoechstens die aeussere Kante — die Gesichter liegen bei 772 und
 * 1097 px, also weit rechts davon. Gemessen am 01.09.2026.
 */
.hd-cta__karte { max-width: 540px; color: #ffffff; }
.hd-cta--links .hd-cta__karte { max-width: 460px; }
.hd-cta--mitte .hd-cta__karte { text-align: center; }

.hd-cta__titel {
  margin: 0 0 20px;
  color: #ffffff;
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 300;
  line-height: 1.12;
  text-transform: uppercase;
}

.hd-cta__text {
  margin-bottom: 32px;
  color: #ffffff;
  font-size: 1.1rem;
  line-height: 1.65;
}

/* -------------------------------------------------------------- Editor */

.hd-editor {
  padding: 14px;
  border: 1px dashed #c5d1d1;
  border-radius: var(--hd-radius-klein);
  margin-bottom: 14px;
}

.hd-editor--aus { opacity: .45; }

.hd-editor__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #edf1f0;
}

.hd-editor__marke {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #92a8ab;
}

.hd-editor__wert { font-size: 13px; color: #65686a; }

.hd-editor__aus {
  font-size: 11px;
  padding: 1px 8px;
  border-radius: var(--hd-radius-klein);
  background: #e4c8cc;
  color: #8a5c66;
}

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

@media (prefers-reduced-motion: reduce) {
  .hd-cta__bildflaeche { transform: none !important; }
  .hd-kachel,
  .hd-thema__bild,
  .hd-video__knopf,
  .hd-verzeichnis__kopf::after { transition: none; }
}

/* ------------------------------------------------------------- Schmaler */

@media (max-width: 1199.98px) {
  .hd-kacheln--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991.98px) {
  .hd-verzeichnis { position: static; margin-bottom: 34px; }
  .hd-lese__rand { order: -1; }
  .hd-kacheln--3 { grid-template-columns: repeat(2, 1fr); }
  .hd-themen { grid-template-columns: repeat(2, 1fr); }
  .hd-schritte { grid-template-columns: 1fr; }
  .hd-hero__inhalt,
  .hd-hero--gross .hd-hero__inhalt { min-height: 460px; }
  .hd-cta__inhalt { min-height: 520px; }
  .hd-cta__karte { max-width: none; }
}

@media (max-width: 575.98px) {
  .hd-kacheln--2,
  .hd-kacheln--3,
  .hd-kacheln--4 { grid-template-columns: 1fr; }
  .hd-themen { grid-template-columns: 1fr; }
  .hd-tabelle__zeile { grid-template-columns: 1fr; gap: 2px; padding: 14px 22px; }
  .hd-vorteil { padding: 24px; gap: 16px; }
  .hd-faq__frage,
  .hd-faq__antwort { padding-right: 44px; }
}
/* ---------- Urlaubsmeldung ---------- */

.hd-urlaub {
	width: min(560px, calc(100vw - 2 * 30px));
	max-height: min(80vh, 640px);
	padding: 0;
	border: 0;
	border-radius: var(--hd-radius-mittel);
	background: #ffffff;
	color: var(--hd-text);
	box-shadow: 0 24px 60px rgba(43, 54, 55,0.26);
	overflow: auto;
	overscroll-behavior: contain;
}

.hd-urlaub::backdrop {
	background: rgba(43, 54, 55, 0.55);
}

.hd-urlaub__innen {
	padding: 40px;
}

@media (max-width: 600px) {
	.hd-urlaub__innen {
		padding: 28px 24px;
	}
}

.hd-urlaub__titel {
	margin: 0 0 16px;
	color: #2b3637;
	font-size: 28px;
	font-weight: 400;
	line-height: 1.25;
}

.hd-urlaub__text > *:first-child { margin-top: 0; }
.hd-urlaub__text > *:last-child { margin-bottom: 0; }

/* Aufzaehlungen zurueckholen — siehe „Der Listen-Reset des Themes". */
.hd-urlaub__text ul,
.hd-urlaub__text ol {
	margin: 1.1em 0 0;
	padding-left: 1.35em;
	list-style: revert;
}
.hd-urlaub__text ul { list-style-type: square; }
.hd-urlaub__text li { margin-top: 6px; }
.hd-urlaub__text li::marker { color: var(--hd-rose-dunkel); }

/* Unterstrichen, auch wenn das Theme es sonst nicht tut — siehe „Links, die
   sich nur durch Farbe unterscheiden". */
.hd-urlaub__text a {
	color: var(--hd-rose-dunkel);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hd-urlaub__schliessen { margin-top: 28px; }

@media (prefers-reduced-motion: no-preference) {
	.hd-urlaub[open] {
		animation: hd-urlaub-auf 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
	}

	@keyframes hd-urlaub-auf {
		from { opacity: 0; transform: translateY(12px); }
	}
}


/* --------------------------------------------------- Ärzte: Lesbarkeit ---
 * Gemessen am 31.08.2026 auf der Botox-Seite: weisser Text auf
 * rgba(146, 168, 171,.88) ergibt 2,18:1. Gefordert sind 4,5:1.
 * Die Werte gelten nur hier; die Startseite bleibt, wie sie ist.
 */
/*
 * Auch hier lag vorher ein eigener Ton (#3e565a). Salbei-tief allein misst
 * ueber dem Foto nur 4,59:1 — knapp, und ueber hellen Bildstellen zu wenig.
 * Mit Tinte darunter sind es wieder rund 6:1, wie vor der Zusammenlegung.
 */
/*
 * 02.09.2026: Hier lagen ZWEI deckende Schichten übereinander — Salbei zu
 * 93 % über Tinte zu 55 %. Das Gesicht war beim Überfahren praktisch weg.
 *
 * Jetzt ein Verlauf statt einer Fläche: oben, wo der Kopf sitzt, nur ein
 * Hauch; ab der Bildmitte, wo Name und Schaltfläche stehen, unverändert
 * kräftig. Der Effekt bleibt deutlich sichtbar, das Gesicht erkennbar.
 */
.hd-aerzte .team-overlay {
  background: linear-gradient(
    to bottom,
    rgba(91, 122, 126, .14) 0%,
    rgba(91, 122, 126, .32) 18%,
    rgba(91, 122, 126, .72) 38%,
    rgba(91, 122, 126, .90) 55%,
    rgba(91, 122, 126, .90) 100%
  );
}

.hd-aerzte .team-name-bar {
  background:
    linear-gradient(rgba(91, 122, 126, .80), rgba(91, 122, 126, .80)),
    linear-gradient(rgba(43, 54, 55, .45), rgba(43, 54, 55, .45));
}

.hd-aerzte .team-btn {
  padding: 12px 24px;   /* gemessen 133x42 – 44px sind gefordert */
  border-radius: var(--hd-radius-klein);
}

.hd-aerzte .team-btn:hover,
.hd-aerzte .team-btn:focus-visible {
  background: #ffffff;
  color: #5b7a7e;
  border-color: #ffffff;
}

/* ------------------------------------------------- Bewertungs-Widgets ----
 * Trustindex gibt normales HTML mit .ti-*-Klassen aus – kein iframe, keine
 * Kapselung. Es laesst sich daher an das Haus angleichen.
 *
 * Angepasst wird nur die Huelle: Schrift, Flaeche, Radius, Bedienpfeile.
 * NICHT angetastet werden Sterne, das Google-Logo, die Bewertungstexte und
 * die Notenangabe – das ist die Darstellung fremder Daten, an der man aus
 * gutem Grund nichts verstellt.
 */
.hd-bewertungen .ti-widget,
.hd-bewertungen .ti-widget * {
  font-family: "Encode Sans", sans-serif;
}

.hd-bewertungen .ti-widget {
  background: transparent;
}

.hd-bewertungen .ti-widget .ti-review-item > .ti-inner {
  background: #ffffff;
  border: 1px solid var(--hd-linie);
  border-radius: var(--hd-radius-mittel);
  box-shadow: none;
}

.hd-bewertungen .ti-widget .ti-name,
.hd-bewertungen .ti-widget .ti-review-text {
  color: var(--hd-text);
}

.hd-bewertungen .ti-widget .ti-date {
  color: #65686a;   /* 4,5:1 auf Weiss – der Standardwert des Plugins liegt darunter */
}

.hd-bewertungen .ti-widget .ti-next,
.hd-bewertungen .ti-widget .ti-prev {
  color: var(--hd-salbei-tief);
  border-radius: 50%;
}

.hd-bewertungen .ti-widget .ti-next:focus-visible,
.hd-bewertungen .ti-widget .ti-prev:focus-visible {
  outline: 3px solid var(--hd-rose);
  outline-offset: 3px;
}

/* Beide Siegel gleich breit, damit die Reihe ruhig steht. */
@media (max-width: 767.98px) {
  .hd-bewertung { gap: 32px; }
  .hd-bewertung--nebeneinander { flex-direction: column; }
}

/* ------------------------------------------- Rosé-Zwischenüberschriften ---
 * Im Entwurf tragen die Punkte unter „Warum in der Praxis…" eine
 * Zwischenzeile in Versalien mit vorangestelltem Schrägstrich. Die war in
 * der ersten Fassung zu fettem Fließtext eingeebnet – hier wieder hergestellt.
 *
 * Der Entwurfston #bf969d liegt bei 2,60:1 gegen Weiß. Verwendet wird
 * deshalb der tiefere Marken-Rosé (5,52:1), wie überall auf dieser Seite.
 */
.hd-abschnitt .hd-mass h3 {
  margin: 34px 0 6px;
  color: var(--hd-rose-tief);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.hd-abschnitt .hd-mass h3::before {
  content: "/ ";
  color: var(--hd-salbei-tief);
}

.hd-abschnitt .hd-mass h3.ohne-strich::before { content: none; }

.hd-abschnitt .hd-mass h3 + p { margin-top: 0; }

/* Die Quellenangaben tragen im Entwurf ebenfalls den Marken-Rosé. */
.hd-quellen__titel { color: var(--hd-rose-tief); }

/* ------------------------------------------------ Fokus statt Bootstrap ---
 * Bootstrap legt auf .btn:focus einen blauen Schein. Der stünde neben dem
 * rosé Fokusring der Seite. Weggenommen wird nur der Schein – der Ring
 * bleibt und ist die sichtbare Rückmeldung.
 */
.hd-behandlung .btn:focus,
.hd-behandlung .btn:focus-visible { box-shadow: none; }

/* --------------------------------------------------- Zeilenlänge, Rest ---
 * Gemessen am 31.08.2026 bei 1440 px (Breite geteilt durch die tatsächliche
 * Breite der Ziffer 0, nicht geschätzt): Vorteile 95, Quellen 85,
 * FAQ-Antworten 82 Zeichen. Lesbar sind 65 bis 75.
 */
.hd-vorteil__text  { max-width: 68ch; }
.hd-faq__antwort   { max-width: 70ch; }
/* Breite der Quellen: siehe oben — jeder Beleg steht in einer Zeile. */

/* ------------------------------------------------------- Bildabschnitt ---
 * Vollflächiges Motiv mit Text auf einer Seite. Dieselbe Bauart wie der
 * Terminaufruf, aber mit echtem Inhalt statt einer Schaltfläche allein.
 */
/*
 * `contain: paint` zusaetzlich zu `overflow: hidden`.
 *
 * Safari beschneidet eine Schicht, die es wegen `will-change: transform` oder
 * `translate3d` auf eine eigene Ebene gehoben hat, nicht zuverlaessig am
 * Vorfahren mit `overflow: hidden`. Die Bildflaeche ragt hier 14 % ueber den
 * Abschnitt hinaus; blieb sie unbeschnitten, lag sie unsichtbar ueber allem
 * Folgenden und fing die Mausrad-Ereignisse ab — die Seite liess sich ab
 * diesem Abschnitt nicht mehr scrollen (gemeldet am 01.09.2026, Safari).
 * `contain: paint` ist eine Zusage an den Browser und wird eingehalten.
 *
 * `will-change` ist an allen drei Parallax-Stellen entfallen: `translate3d`
 * hebt die Schicht waehrend der Bewegung ohnehin an, und die dauerhafte
 * Voranmeldung ist genau das, was Safari hier aus dem Tritt bringt.
 */
.hd-bildabschnitt {
  padding: 0;
  overflow: hidden;
  contain: paint;
}

.hd-bildabschnitt__bildflaeche {
  position: absolute;
  inset: -40px 0;   /* siehe Terminaufruf: knappe Reserve, weniger Zoom */
}

.hd-bildabschnitt__bild {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hd-bildabschnitt--links .hd-bildabschnitt__bild  { object-position: 78% center; }
.hd-bildabschnitt--rechts .hd-bildabschnitt__bild { object-position: 22% center; }

.hd-bildabschnitt__schleier { position: absolute; inset: 0; }

.hd-bildabschnitt--links .hd-bildabschnitt__schleier {
  background: linear-gradient(90deg, rgba(43, 54, 55, 0.944) 0%, rgba(43, 54, 55, 0.684) 42%, rgba(43, 54, 55, 0) 76%);
}

.hd-bildabschnitt--rechts .hd-bildabschnitt__schleier {
  background: linear-gradient(270deg, rgba(43, 54, 55, 0.944) 0%, rgba(43, 54, 55, 0.684) 42%, rgba(43, 54, 55, 0) 76%);
}

.hd-bildabschnitt__inhalt {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: var(--hd-bild-hoehe, 620px);
  padding: 70px 30px;
}

.hd-bildabschnitt--rechts .hd-bildabschnitt__inhalt { justify-content: flex-end; }

.hd-bildabschnitt__karte { max-width: 560px; color: #ffffff; }

.hd-bildabschnitt__titel {
  margin: 0 0 20px;
  color: #ffffff;
  font-size: clamp(1.9rem, 2.8vw, 2.7rem);
  font-weight: 300;
  line-height: 1.14;
  text-transform: uppercase;
}

.hd-bildabschnitt__text p {
  color: #ffffff;
  font-size: 1.05rem;
  line-height: 1.7;
}

.hd-bildabschnitt__text p:last-child { margin-bottom: 28px; }

/* --------------------------------------------------- FAQ: Einblendung ----
 * „Smoother Effekt beim Scrollen": die Fragen fahren nacheinander ein,
 * wie die Kacheln auf der Startseite. Und das Aufklappen läuft weich statt
 * zu springen – <details> tut das von sich aus nicht.
 */
.hd-einblenden .hd-faq__eintrag[data-einblenden] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s var(--hd-aus), transform .6s var(--hd-aus);
}

.hd-einblenden .hd-faq__eintrag[data-einblenden].ist-sichtbar {
  opacity: 1;
  transform: none;
}

/*
 * Die Hoehe wird vom Skript gefahren – auf und zu. Ohne Uebergang hier
 * springt es trotzdem.
 */
.hd-faq__antwort {
  overflow: hidden;
  transition: height .3s var(--hd-aus), opacity .3s var(--hd-aus);
}

.hd-faq__eintrag:not([data-oeffnet]) .hd-faq__antwort { opacity: 0; }
.hd-faq__eintrag[data-oeffnet] .hd-faq__antwort { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hd-faq__eintrag[data-einblenden] { opacity: 1; transform: none; transition: none; }
  .hd-faq__antwort { transition: none; }
  .hd-bildabschnitt__bildflaeche { transform: none !important; }
}

@media (max-width: 991.98px) {
  .hd-bildabschnitt__inhalt { min-height: 480px; }
  .hd-bildabschnitt__karte { max-width: none; }
  .hd-bildabschnitt__schleier { background: rgba(43, 54, 55, 0.732) !important; }
}

/* =========================================================== Ablauf ======
 * Mitlaufender Stepper. Links bleibt die Spalte stehen, rechts wandern die
 * Karten vorbei; die Karte im Blick tritt hervor, Ziffer und Name links
 * wechseln mit.
 *
 * Bewusst anders als die Vorlage: die zurücktretenden Karten werden NICHT
 * unlesbar ausgegraut. Der Zustand wird über Fläche, Schatten und den Punkt
 * gezeigt — der Text bleibt in jeder Karte über 4,5:1. Wer die Seite ohne
 * Scrollen liest (Screenreader, Ausdruck, reduzierte Bewegung), verliert
 * dadurch nichts.
 */
.hd-schritteblock--stepper .hd-stepper {
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  gap: clamp(40px, 5vw, 90px);
  align-items: start;
}

.hd-stepper__spalte { position: sticky; top: 150px; }

.hd-stepper__kicker {
  margin: 0 0 14px;
  color: var(--hd-rose-tief);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.hd-schritteblock--stepper .hd-titel { margin-bottom: 18px; }

.hd-stepper__stand {
  display: flex;
  align-items: stretch;
  gap: 22px;
  margin-top: clamp(34px, 4vw, 60px);
  min-height: 132px;
}

.hd-stepper__linie {
  position: relative;
  flex: 0 0 3px;
  width: 3px;
  background: var(--hd-linie);
  border-radius: 2px;
}

.hd-stepper__fortschritt {
  position: absolute;
  inset: 0 0 auto 0;
  height: 25%;
  background: var(--hd-salbei-tief);
  border-radius: 2px;
  transition: height .45s var(--hd-aus);
}

.hd-stepper__anzeige { display: block; }

.hd-stepper__ziffer {
  display: block;
  color: var(--hd-salbei-tief);
  font-size: clamp(3.2rem, 5vw, 4.6rem);
  font-weight: 300;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: opacity .25s var(--hd-aus);
}

.hd-stepper__name {
  display: block;
  margin-top: 12px;
  color: var(--hd-text);
  font-size: 1.15rem;
  font-weight: 400;
  transition: opacity .25s var(--hd-aus);
}

.hd-stepper__anzeige.wechselt .hd-stepper__ziffer,
.hd-stepper__anzeige.wechselt .hd-stepper__name { opacity: 0; }

/*
 * Der Stapel braucht Scrollweg, sonst ist die letzte Karte erreicht, bevor
 * die erste gelesen ist. Gemessen am 31.08.2026: ohne diese Massgaben war
 * der Durchlauf nach 440 px durch. Der Nachlauf unten haelt die letzte Karte
 * aktiv, bis der Abschnitt wirklich vorbei ist.
 */
.hd-stepper__liste {
  margin: 0;
  padding: 0 0 26vh;
  list-style: none;
  display: grid;
  gap: 40px;
}

.hd-schritteblock--stepper .hd-schritt { min-height: 196px; }

.hd-schritteblock--stepper .hd-schritt {
  position: relative;
  padding: clamp(28px, 3vw, 40px) clamp(26px, 3vw, 44px);
  padding-left: clamp(52px, 5vw, 74px);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--hd-radius-mittel);
  counter-increment: none;
  transition:
    background-color .4s var(--hd-aus),
    box-shadow .4s var(--hd-aus),
    border-color .4s var(--hd-aus),
    transform .4s var(--hd-aus);
}

.hd-schritteblock--stepper .hd-schritt::before { content: none; }

.hd-schritt__punkt {
  position: absolute;
  left: clamp(24px, 2.4vw, 34px);
  top: calc(clamp(28px, 3vw, 40px) + .55em);
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--hd-linie);
  transition: background-color .4s var(--hd-aus), transform .4s var(--hd-aus);
}

.hd-schritteblock--stepper .hd-schritt.ist-aktiv {
  background: #ffffff;
  border-color: rgba(43, 54, 55, .06);
  box-shadow: 0 18px 46px rgba(43, 54, 55, .10);
  transform: translateX(-6px);
}

.hd-section--weiss .hd-schritteblock--stepper .hd-schritt.ist-aktiv,
.hd-schritteblock--stepper.hd-section--weiss .hd-schritt.ist-aktiv {
  background: var(--hd-flaeche-hell);
}

.hd-schritteblock--stepper .hd-schritt.ist-aktiv .hd-schritt__punkt {
  background: var(--hd-rose-tief);
  transform: scale(1.15);
}

.hd-schritteblock--stepper .hd-schritt__titel {
  margin: 0 0 10px;
  font-size: 1.25rem;
  font-weight: 400;
}

.hd-schritteblock--stepper .hd-schritt__text { max-width: 62ch; }
.hd-schritteblock--stepper .hd-schritt__text p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .hd-stepper__spalte { position: static; }
  .hd-schritteblock--stepper .hd-schritt,
  .hd-stepper__fortschritt,
  .hd-schritt__punkt { transition: none; }
  .hd-schritteblock--stepper .hd-schritt.ist-aktiv { transform: none; }
}

@media (max-width: 991.98px) {
  .hd-schritteblock--stepper .hd-stepper { grid-template-columns: 1fr; gap: 34px; }
  .hd-stepper__spalte { position: static; }
  .hd-stepper__stand { display: none; }   /* die Ziffer ohne Mitlauf sagt nichts */
  .hd-stepper__liste { padding-bottom: 0; gap: 22px; }
  .hd-schritteblock--stepper .hd-schritt { min-height: 0; }
  .hd-schritteblock--stepper .hd-schritt {
    padding-left: clamp(46px, 9vw, 60px);
    background: var(--hd-flaeche-hell);
  }
  .hd-schritteblock--stepper .hd-schritt.ist-aktiv { transform: none; }
  .hd-section--hell .hd-schritteblock--stepper .hd-schritt { background: #ffffff; }
}

/* ------------------------------------------- Bewertungen im Kopfbild -----
 * Schmale Pillen über der Bildkante. Note, Sterne und Anzahl kommen aus den
 * Widgets von Google (Trustindex) und ProvenExpert — hier steht keine Zahl
 * im Code.
 */
.hd-hero__bewertung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
}

.hd-pille {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 8px 22px;
  background: rgba(43, 54, 55, 0.496);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  color: #ffffff;
  line-height: 1.25;
}

/* Die Widgets bringen eigene Maße mit – hier auf Pillengröße gebracht. */
.hd-pille .ti-widget,
.hd-pille .pe-richsnippets { margin: 0 !important; }

.hd-pille .ti-widget * ,
.hd-pille .pe-richsnippets * {
  color: #ffffff !important;
  font-family: "Encode Sans", sans-serif !important;
}

.hd-pille .pe-richsnippets a { color: #ffffff !important; text-decoration: none; }
.hd-pille .pe-richsnippets a:hover,
.hd-pille .pe-richsnippets a:focus-visible { text-decoration: underline; }

.hd-pille .ti-widget .ti-review-item,
.hd-pille .ti-widget .ti-reviews-container,
.hd-pille .ti-widget .ti-controls { display: none !important; }

/* Das Wertungswort („AUSGEZEICHNET") bleibt draussen — Sterne, Anzahl und
   Quelle sagen dasselbe, ohne die Pille zu verdoppeln. */
.hd-pille .ti-widget .ti-rating { display: none !important; }

.hd-pille img,
.hd-pille trustindex-image img { max-height: 20px; width: auto; }

@media (max-width: 575.98px) {
  .hd-hero__bewertung { gap: 10px; }
  .hd-pille { min-height: 46px; padding: 6px 16px; font-size: .92rem; }
}

/*
 * Die ProvenExpert-Zeile führt den vollen Firmennamen mit („Hamburg
 * Dermatologie Privatpraxis | Hautarzt Hamburg | Dr. Daniela Wiebels") —
 * 358 px breit und in einer Pille unbrauchbar. Übrig bleiben Sterne, Note
 * und Anzahl; der Link auf das Profil bleibt erhalten.
 */
.hd-pille--pe #pe_name { display: none !important; }

.hd-pille--pe #pe_rating {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  min-height: 44px;   /* gemessen 302x30 – 44 px sind gefordert */
  font-size: .95rem;
}

.hd-pille--pe #pe_stars { display: inline-flex; align-items: center; }
.hd-pille--pe #pe_stars svg { width: 18px; height: 18px; }

/*
 * Kacheln ohne Verweiszeile: verlinkte und nicht verlinkte sehen gleich aus.
 * Damit die Verlinkung trotzdem erkennbar bleibt, tragen sie Zeigerhand,
 * dieselbe Hover-Rückmeldung und den Fokusrahmen – Farbe allein wäre zu wenig.
 */
.hd-kachel--schlicht { cursor: pointer; }
.hd-kacheln--kopf .hd-kachel--schlicht .hd-kachel__text { padding-bottom: 32px; }

/* ------------------------------------------------------------ Unterzeile --
 * Steht direkt unter der Überschrift: größer und ruhiger als der Fließtext,
 * damit die Seite mit einem Satz beginnt statt mit einem Absatz.
 */
.hd-unterzeile {
  max-width: 30ch;
  margin: -12px 0 26px;
  color: var(--hd-salbei-tief);
  font-size: clamp(1.2rem, 1.7vw, 1.6rem);
  font-weight: 300;
  line-height: 1.35;
}

.hd-abschnitt .hd-unterzeile { max-width: 34ch; }

/* --------------------------------------- Google-Pille im Kopfbild --------
 * Das Trustindex-Widget bringt Note, Sterne, Logo UND drei Bewertungen mit.
 * In der Pille bleibt nur der Kopf – ein zweiter, schmaler Shortcode ist
 * dadurch nicht nötig.
 */
.hd-pille--google .ti-widget .ti-reviews-container,
.hd-pille--google .ti-widget .ti-reviews-container-wrapper,
.hd-pille--google .ti-widget .ti-controls,
.hd-pille--google .ti-widget .ti-review-item,
.hd-pille--google .ti-widget .ti-footer-filter,
.hd-pille--google .ti-widget .ti-widget-container > *:not(.ti-footer) { display: none !important; }

.hd-pille--google .ti-widget .ti-footer {
  display: flex !important;
  align-items: center;
  gap: 12px;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.hd-pille--google .ti-widget .ti-rating-text { display: flex; align-items: center; gap: 8px; }
.hd-pille--google .ti-widget .ti-rating { font-size: 1rem !important; }
.hd-pille--google .ti-widget .ti-large-logo { margin: 0 !important; }
.hd-pille--google .ti-widget .ti-fade-container { display: block !important; }

/*
 * Der Widget-Kopf stapelt sich von Haus aus senkrecht (gemessen: 109 px hoch).
 * In der Pille läuft er in einer Zeile: Bewertungswort, Sterne, Anzahl, Logo.
 */
.hd-pille--google .ti-widget .ti-fade-container {
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  height: auto !important;
}

.hd-pille--google .ti-widget .ti-rating-text {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  height: auto !important;
  white-space: nowrap;
}

.hd-pille--google .ti-widget .ti-rating {
  margin: 0 !important;
  font-size: .9rem !important;
  font-weight: 500 !important;
  letter-spacing: .04em;
}

.hd-pille--google .ti-widget .ti-stars { display: inline-flex; gap: 2px; }
.hd-pille--google .ti-widget .ti-stars img { width: 16px !important; height: 16px !important; }

.hd-pille--google .ti-widget .nowrap,
.hd-pille--google .ti-widget .nowrap strong { font-size: .95rem !important; white-space: nowrap; }

.hd-pille--google .ti-widget .ti-large-logo,
.hd-pille--google .ti-widget .ti-v-center { display: inline-flex !important; align-items: center; margin: 0 !important; }
.hd-pille--google .ti-widget .ti-logo-fb { height: 17px !important; width: auto !important; }

@media (max-width: 575.98px) {
  /* Auf dem Handy zählt die Zahl, das Bewertungswort kann weichen. */
  .hd-pille--google .ti-widget .ti-rating { display: none !important; }
}

/* ---------------------------------------- Google-Pille: Feinschliff ------
 * Trustindex spielt sein Stylesheet per JavaScript ein — also NACH diesem.
 * Bei gleicher Spezifität gewinnt es. Die Regeln hier tragen deshalb eine
 * Klasse mehr. Gemessen am 31.08.2026: sonst blieben die Sterne bei 30 px
 * und die Pille lief auf 731 px Breite.
 */
.hd-hero__bewertung .hd-pille--google .ti-widget,
.hd-hero__bewertung .hd-pille--google .ti-widget-container,
.hd-hero__bewertung .hd-pille--google .ti-footer,
.hd-hero__bewertung .hd-pille--google .ti-fade-container {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.hd-hero__bewertung .hd-pille--google .ti-footer,
.hd-hero__bewertung .hd-pille--google .ti-fade-container {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
}

.hd-hero__bewertung .hd-pille--google .ti-rating-text {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  margin: 0 !important;
  white-space: nowrap;
}

.hd-hero__bewertung .hd-pille--google .ti-rating {
  display: inline !important;
  width: auto !important;
  margin: 0 !important;
  font-size: .88rem !important;
  font-weight: 500 !important;
  letter-spacing: .05em;
}

.hd-hero__bewertung .hd-pille--google .ti-stars {
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  gap: 1px;
}

.hd-hero__bewertung .hd-pille--google .ti-stars img,
.hd-hero__bewertung .hd-pille--google img.ti-star {
  width: 16px !important;
  height: 16px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.hd-hero__bewertung .hd-pille--google .nowrap {
  display: inline !important;
  width: auto !important;
  font-size: .95rem !important;
  white-space: nowrap;
}

.hd-hero__bewertung .hd-pille--google .ti-large-logo,
.hd-hero__bewertung .hd-pille--google .ti-v-center {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  margin: 0 !important;
}

.hd-hero__bewertung .hd-pille--google .ti-logo-fb {
  height: 16px !important;
  width: auto !important;
  margin: 0 !important;
}

/* ------------------------------------------------- Unterzeile, größer ----
 * Sie brach am 31.08.2026 schon nach 30 Zeichen um – die Begrenzung war zu
 * eng gesetzt. Jetzt läuft sie über die Lesebreite und steht deutlich größer.
 */
.hd-unterzeile,
.hd-abschnitt .hd-unterzeile {
  max-width: 40ch;
  margin: -8px 0 30px;
  font-size: clamp(1.4rem, 2.1vw, 2rem);
  line-height: 1.3;
}

/* ------------------------------------------------------------- Blasen ----
 * Im Entwurf liegen hinter einzelnen Kacheln weiche Kreise. Nicht überall –
 * sonst wird aus einem Akzent ein Muster. Hier auf jeder dritten Kachel und
 * hinter den weiteren Themen.
 */
.hd-kachel { position: relative; overflow: hidden; }

.hd-kacheln--flaeche .hd-kachel:nth-child(3n+1)::before,
.hd-kacheln--flaeche .hd-kachel:nth-child(3n+1)::after,
.hd-kacheln--kopf .hd-kachel:nth-child(2n)::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.hd-kacheln--flaeche .hd-kachel:nth-child(3n+1)::before {
  width: 210px; height: 210px;
  right: -70px; bottom: -80px;
  background: rgba(255, 255, 255, .09);
}

.hd-kacheln--flaeche .hd-kachel:nth-child(3n+1)::after {
  width: 96px; height: 96px;
  right: 96px; bottom: -34px;
  background: rgba(255, 255, 255, .06);
}

.hd-kacheln--kopf .hd-kachel:nth-child(2n)::before {
  width: 190px; height: 190px;
  right: -74px; bottom: -70px;
  background: rgba(146, 168, 171, .12);
}

.hd-kachel__kopf, .hd-kachel__text { position: relative; z-index: 2; }

/* Weitere Themen: eigene Fläche mit Blasen wie im Entwurf */
.hd-themenblock { position: relative; overflow: hidden; }

.hd-themenblock::before,
.hd-themenblock::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(146, 168, 171, .16);
  pointer-events: none;
}

.hd-themenblock::before { width: 300px; height: 300px; left: -120px; top: 40px; }
.hd-themenblock::after  { width: 150px; height: 150px; left: 130px; top: 250px; background: rgba(146, 168, 171, .10); }

.hd-themenblock > .container { position: relative; z-index: 2; }

/* ---------------------------------------------------------- Galerie -----
 * Mauerwerk über CSS-Spalten: die Bilder behalten ihr Seitenverhältnis, die
 * Spalten füllen sich von selbst. Kein Skript, kein Nachrechnen beim Laden.
 */
/*
 * Echte Spalten (siehe render.php): nur so koennen sie beim Scrollen
 * unterschiedlich schnell laufen. Der Versatz kommt aus dem Skript.
 */
/*
 * 166 px Abstand zur Einleitung: die Spalten fahren beim asynchronen
 * Scrollen bis zu 120 px nach OBEN und liefen mit den frueheren 46 px ueber
 * den Text — am 01.09.2026 auf der Startseite passiert, als die Einleitung
 * fuenf Zeilen lang wurde. 120 px Weg + 46 px Ruheabstand = 166 px.
 */
.hd-galerie {
  margin-top: 166px;
  display: grid;
  gap: 26px;
  align-items: start;
}

.hd-galerie--2 { grid-template-columns: repeat(2, 1fr); }
.hd-galerie--3 { grid-template-columns: repeat(3, 1fr); }
.hd-galerie--4 { grid-template-columns: repeat(4, 1fr); }

.hd-galerie__spalte {
  display: grid;
  gap: 26px;
}

.hd-galerie__stueck {
  position: relative;
  break-inside: avoid;
  margin: 0;
  border-radius: var(--hd-radius-mittel);
  overflow: hidden;
  transition: opacity .6s var(--hd-aus), transform .6s var(--hd-aus);
}

/*
 * Verstecken nur, wenn das Skript die Klasse .hd-einblenden gesetzt hat.
 * Sonst bliebe die halbe Seite unsichtbar, falls das Skript nicht durchläuft
 * oder der Beobachter nicht feuert — am 31.08.2026 genau so beobachtet.
 */
.hd-einblenden .hd-galerie__stueck { opacity: 0; transform: translateY(24px); }
.hd-einblenden .hd-galerie__stueck.ist-sichtbar { opacity: 1; transform: none; }

/*
 * Das Format bestimmt das Raster, nicht die Bilddatei: die Kachel gibt das
 * Seitenverhaeltnis vor, das Bild fuellt es beschnitten aus. So laesst sich
 * der Rhythmus aus Hoch- und Querformat setzen, ohne die Bilder zu tauschen.
 */
.hd-galerie__bild {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .45s var(--hd-aus);
}

.hd-galerie__stueck--hoch,
.hd-galerie__stueck--quer { position: relative; }

.hd-galerie__stueck--hoch { aspect-ratio: 3 / 4; }
.hd-galerie__stueck--quer { aspect-ratio: 4 / 3; }

.hd-galerie__stueck--hoch .hd-galerie__bild,
.hd-galerie__stueck--quer .hd-galerie__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hd-galerie__stueck:hover .hd-galerie__bild { transform: scale(1.05); }

.hd-galerie__text {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 34px 22px 18px;
  background: linear-gradient(0deg, rgba(43, 54, 55, 0.92) 0%, rgba(43, 54, 55, 0) 100%);
  color: #ffffff;
  font-size: .95rem;
  opacity: 0;
  transition: opacity .35s var(--hd-aus);
}

.hd-galerie__stueck:hover .hd-galerie__text,
.hd-galerie__stueck:focus-within .hd-galerie__text { opacity: 1; }

/* ------------------------------------------------------ Sprechzeiten -----
 * Aufbau wie das Element auf der Startseite der bestehenden Website:
 * Bild auf der einen Seite, farbige Textflaeche auf der anderen, ueber die
 * ganze Breite. Als schmaler Kasten ging der Abschnitt vorher unter.
 */
.hd-sprechzeitenblock {
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 520px;
  overflow: hidden;
  contain: paint;
}

.hd-sprechzeitenblock--links .hd-sprechzeiten__bildflaeche { order: 2; }

.hd-sprechzeiten__bildflaeche { position: relative; overflow: hidden; min-height: 380px; }

.hd-sprechzeiten__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hd-sprechzeiten__flaeche {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: clamp(46px, 5vw, 84px) clamp(28px, 4vw, 78px);
  /*
   * Tiefes Salbei statt des helleren --hd-salbei-mittel: der mittlere Ton kam
   * sonst nirgends auf der Seite vor und fiel deshalb heraus. Nebenbei steigt
   * der Kontrast von Weiss auf dieser Flaeche von 2,13:1 auf 4,64:1.
   */
  background: var(--hd-salbei-tief);
  color: #ffffff;
}

.hd-sprechzeiten__deko { position: absolute; inset: 0; pointer-events: none; }

.hd-sprechzeiten__deko::before,
.hd-sprechzeiten__deko::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .10);
}

.hd-sprechzeiten__deko::before { width: 460px; height: 460px; top: -180px; right: -170px; }
.hd-sprechzeiten__deko::after  { width: 200px; height: 200px; bottom: -70px; right: 120px; background: rgba(255, 255, 255, .06); }

.hd-sprechzeiten__inhalt { position: relative; z-index: 2; max-width: 560px; }

.hd-sprechzeiten__titel {
  margin: 0 0 18px;
  color: #ffffff;
  font-size: clamp(1.9rem, 2.6vw, 2.7rem);
  font-weight: 300;
  line-height: 1.15;
  text-transform: uppercase;
}

.hd-sprechzeiten__text {
  margin: 0 0 22px;
  color: #ffffff;
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 46ch;
}

.hd-sprechzeiten__zeit {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  font-weight: 300;
}

.hd-sprechzeiten__zusatz { margin: 0 0 28px; color: #ffffff; font-size: 1rem; }

.hd-sprechzeiten__knopf { margin-bottom: 22px; }

/* Kein Unterstrich – die Nummer steht fuer sich und traegt ein Hoerersymbol. */
.hd-sprechzeiten__telefon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  color: #ffffff;
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  font-weight: 300;
  text-decoration: none;
  transition: opacity .25s var(--hd-aus);
}

.hd-sprechzeiten__telefon:hover,
.hd-sprechzeiten__telefon:focus-visible { color: #ffffff; opacity: .78; }

/* Die Sprechzeiten-Flaeche fuehrt dieselbe rosé Schaltflaeche wie alle anderen. */


@media (max-width: 991.98px) {
  .hd-sprechzeitenblock { grid-template-columns: 1fr; min-height: 0; }
  .hd-sprechzeitenblock--links .hd-sprechzeiten__bildflaeche { order: 0; }
  .hd-sprechzeiten__bildflaeche { min-height: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  .hd-galerie__stueck { opacity: 1; transform: none; transition: none; }
  .hd-galerie__bild { transition: none; }
}

@media (max-width: 991.98px) {
  .hd-galerie--3, .hd-galerie--4 { grid-template-columns: repeat(2, 1fr); }
  .hd-galerie__spalte { transform: none !important; }
}

@media (max-width: 575.98px) {
  .hd-galerie--2, .hd-galerie--3, .hd-galerie--4 { grid-template-columns: 1fr; }
  .hd-galerie__text { opacity: 1; }
}

/* Trustindex setzt die Sternbreite mit hoher Spezifität und !important
 * aus einem per JavaScript nachgeladenen Stylesheet. Gemessen: 30 px statt
 * der gewünschten 16. Deshalb hier ausdrücklich über die volle Kette. */
.hd-hero__bewertung .hd-pille--google .ti-widget .ti-footer .ti-stars img.ti-star,
.hd-hero__bewertung .hd-pille--google .ti-widget .ti-footer .ti-stars trustindex-image {
  width: 17px !important;
  height: 17px !important;
  min-width: 0 !important;
  max-width: 17px !important;
  margin: 0 1px 0 0 !important;
  padding: 0 !important;
}

/* ------------------------------------------- Google-Pille: kleiner -------
 * Rundung wie die Terminschaltfläche darüber (9 px statt Kapselform),
 * das Wort „AUSGEZEICHNET" entfällt. Sterne und Anzahl bleiben – die kommen
 * live von Google. Eine Zahl liefert dieser Widget-Typ nicht.
 */
.hd-hero__bewertung .hd-pille {
  min-height: 44px;
  padding: 6px 16px;
  border-radius: var(--hd-radius-klein);
}

.hd-hero__bewertung .hd-pille--google .ti-rating { display: none !important; }

.hd-hero__bewertung .hd-pille--google .ti-footer,
.hd-hero__bewertung .hd-pille--google .ti-fade-container { gap: 9px !important; }

.hd-hero__bewertung .hd-pille--google .ti-widget .ti-footer .ti-stars img.ti-star,
.hd-hero__bewertung .hd-pille--google .ti-widget .ti-footer .ti-stars trustindex-image {
  width: 15px !important;
  height: 15px !important;
  max-width: 15px !important;
}

.hd-hero__bewertung .hd-pille--google .nowrap,
.hd-hero__bewertung .hd-pille--google .nowrap strong {
  font-size: .88rem !important;
  font-weight: 400 !important;
}

.hd-hero__bewertung .hd-pille--google .ti-logo-fb { height: 14px !important; }

/*
 * Die Google-Pille war bei 375 px 419 px breit und wurde vom Kopfbild
 * beschnitten. Auf schmalen Schirmen darf sie umbrechen und schrumpfen.
 */
@media (max-width: 575.98px) {
  .hd-hero__bewertung { width: 100%; }
  .hd-hero__bewertung .hd-pille { max-width: 100%; }

  .hd-hero__bewertung .hd-pille--google .ti-footer,
  .hd-hero__bewertung .hd-pille--google .ti-fade-container {
    flex-wrap: wrap !important;
    gap: 6px 8px !important;
  }

  .hd-hero__bewertung .hd-pille--google .nowrap,
  .hd-hero__bewertung .hd-pille--google .nowrap strong { font-size: .8rem !important; }
  .hd-hero__bewertung .hd-pille--google .ti-logo-fb { height: 12px !important; }
}

/* Etwas mehr Luft zwischen Sternen und der Anzahl in der Google-Pille. */
.hd-hero__bewertung .hd-pille--google .nowrap { margin-left: 10px !important; }

/* ---------------------------------------------------- Einblendungen ------
 * Karten, Kacheln, Ärzte und Themen fahren beim Heranscrollen ein – wie die
 * FAQ. Das Skript setzt „ist-sichtbar"; ohne Skript greift nach 1,2 Sekunden
 * ein Sicherheitsnetz, damit nichts unsichtbar bleibt.
 */
.hd-einblenden .hd-kachel[data-einblenden],
.hd-einblenden .hd-vorteil[data-einblenden],
.hd-einblenden .hd-arzt__spalte[data-einblenden],
.hd-einblenden .hd-thema[data-einblenden] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .6s var(--hd-aus), transform .6s var(--hd-aus);
}

.hd-einblenden .hd-kachel[data-einblenden].ist-sichtbar,
.hd-einblenden .hd-vorteil[data-einblenden].ist-sichtbar,
.hd-einblenden .hd-arzt__spalte[data-einblenden].ist-sichtbar,
.hd-einblenden .hd-thema[data-einblenden].ist-sichtbar {
  opacity: 1;
  transform: none;
}

/* Der Hover der Kachel darf die Einblendung nicht zurücksetzen. */
.hd-kachel--link[data-einblenden].ist-sichtbar:hover,
.hd-kachel--link[data-einblenden].ist-sichtbar:focus-visible {
  transform: translateY(-5px);
}

@media (prefers-reduced-motion: reduce) {
  .hd-kachel[data-einblenden],
  .hd-vorteil[data-einblenden],
  .hd-arzt__spalte[data-einblenden],
  .hd-thema[data-einblenden] { opacity: 1; transform: none; transition: none; }
  .hd-galerie__spalte { transform: none !important; }
}

/* Bilder in der Lesespalte tragen die Hausform und etwas Luft.
 *
 * Seit dem 09.09.2026 ist das Schmuckbild ein Rahmen mit festem
 * Seitenverhaeltnis, in dem das Bild beim Scrollen mitlaeuft — dieselbe
 * Wirkung wie beim Seitenbild-Abschnitt, nur im Textfluss. Damit dabei keine
 * Bildkante ins Sichtfeld laeuft, ist das Bild 128 % hoch; die 14 % Reserve
 * oben und unten sind der Weg, den der Lauf hoechstens zuruecklegt.
 *
 * Die Schaerfe leidet nicht: die Vorlagen sind 1400 px breit und werden auf
 * 904 px heruntergerechnet. Anders als beim Kopfbereich der Startseite
 * (dort 170 % Hoehe bei knapper Vorlage, am 01.09.2026 unscharf gemessen)
 * bleibt hier Reserve uebrig.
 */
.hd-lese__spalte .wp-block-image {
  margin: 34px 0 40px;
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: var(--hd-radius-mittel);
}
.hd-lese__spalte .wp-block-image img {
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 128%;
  object-fit: cover;
  transform: translateY(-50%);
  border-radius: inherit;
  will-change: transform;
}

/*
 * Ohne Bewegung: Rahmen bleibt, Lauf faellt weg. Das Bild steht dann
 * mittig — kein Sprung, nur Stillstand.
 */
@media (prefers-reduced-motion: reduce) {
  .hd-lese__spalte .wp-block-image img {
    transform: translateY(-50%) !important;
    will-change: auto;
  }
}

/*
 * Unter 992 px laeuft nichts mit (siehe bloecke.js, dieselbe Grenze wie beim
 * Seitenbild-Abschnitt). Auf dem Telefon ist ein flacherer Ausschnitt
 * angenehmer als 3:2 ueber die ganze Spaltenbreite.
 */
@media (max-width: 991.98px) {
  .hd-lese__spalte .wp-block-image { aspect-ratio: 4 / 3; }
  .hd-lese__spalte .wp-block-image img { height: 100%; top: 0; transform: none; }
}
.hd-lese__spalte .wp-block-image figcaption {
  margin-top: 10px;
  color: #65686a;
  font-size: .9rem;
}

/* ════════════════════════════════════════════════ Feinschliff ════════════
 * Gemessen am 31.08.2026: 31 verschiedene Kombinationen aus Schriftgröße und
 * -schnitt auf einer Seite. Fließtext gab es in 16 px UND 16,8 px – zwei
 * Größen, die niemand unterscheidet, die aber unruhig wirken.
 * Es bleibt eine Größe für Fließtext.
 */
.hd-kachel p,
.hd-schritt__text p,
.hd-vorteil__text p,
.hd-faq__antwort p,
.hd-bildabschnitt__text p,
.hd-sprechzeiten__text { font-size: 1.05rem; }

.hd-kachel p { line-height: 1.65; }

/*
 * `transition: all` zwingt den Browser, jede Eigenschaft zu beobachten.
 * Auf dieser Seite betraf das über 30 Verweise. Benannt statt pauschal.
 */
.hd-behandlung a,
.hd-behandlung summary { transition: color .25s var(--hd-aus), opacity .25s var(--hd-aus), background-color .25s var(--hd-aus); }

/* --------------------------------------------------------------- Handy ---
 * Getrennt optimiert: auf dem Telefon zählt Lesbarkeit vor Feinheit.
 */
@media (max-width: 767.98px) {

  /* Kein Fließtext unter 16 px – die Quellenangaben lagen bei 14,7 px. */
  .hd-quellen__text p { font-size: 1rem; }
  .hd-quellen__titel { font-size: 1rem; }

  /* Das Kopfbild darf mehr vom Schirm nehmen, es ist der erste Eindruck. */
  .hd-hero__inhalt,
  .hd-hero--gross .hd-hero__inhalt { min-height: 68vh; }

  /* Vollflächige Bildabschnitte auf eine gemeinsame Höhe. */
  .hd-bildabschnitt__inhalt,
  .hd-cta__inhalt { min-height: 62vh; padding: 56px 24px; }

  /* Etwas mehr Luft zwischen Überschrift und Text, weniger zwischen Blöcken. */
  .hd-titel { margin-bottom: 20px; }
  .hd-unterzeile { margin-bottom: 24px; }

  /* Die Tabelle liest sich als Paare, nicht als Raster. */
  .hd-tabelle__zeile { padding: 15px 22px; }
  .hd-tabelle__zeile dt { color: var(--hd-text); font-weight: 500; }

  /* Die Fähnchen am rechten Rand dürfen den Text nicht berühren. */
  .hd-behandlung .container { padding-right: 26px; padding-left: 26px; }
}

/* -------------------------------------------------------------- Desktop --
 * Hier zählt der Zeigerweg: größere Ziele, ruhigere Bewegungen.
 */
@media (min-width: 992px) {

  /* Die Karte hebt sich, der Schatten wächst mit – eine Bewegung, nicht zwei. */
  .hd-kachel--link { transition: transform .3s var(--hd-aus), box-shadow .3s var(--hd-aus), background-color .3s var(--hd-aus); }

  /* Das Inhaltsverzeichnis bekommt eine feine Kante, damit es als Element steht. */
  .hd-verzeichnis { box-shadow: 0 1px 0 rgba(43, 54, 55, .05), 0 12px 30px rgba(43, 54, 55, .06); }

  /* Die Ärzte-Karten sind das einzige Element mit Bild-Zoom – ruhiger machen. */
  .hd-aerzte .team-card:hover .team-img { transform: scale(1.03); }
}

/*
 * Die Galeriebilder liegen nur mit 600 px Breite vor. Bei 446 px Anzeige und
 * doppelter Bildschirmdichte würden sie 1,49-fach hochgerechnet. Die Galerie
 * steht deshalb etwas schmaler und mittig – 376 px je Spalte, also nur noch
 * 1,25-fach. Sobald größere Dateien da sind, kann die Grenze weg.
 */
.hd-galerie { max-width: 1180px; margin-inline: auto; }

@media (max-width: 991.98px) { .hd-galerie { max-width: none; } }

/* ══════════════════════════════════════════ Druck und Zeigegeräte ════════
 * Zwei Lücken, die beim Durchsehen auffielen: die Seite kannte 24 Zustände
 * fürs Überfahren, aber keinen einzigen fürs Drücken. Und kein Hover war
 * gegen Berührung abgesichert – auf dem Telefon löst ein Tipp den
 * Hover-Zustand aus und er bleibt hängen, bis woanders getippt wird.
 */

/* --- Drücken: sofortige Rückmeldung, dass die Seite zugehört hat --- */
.hd-behandlung .btn,
.hd-behandlung .hd-btn,
.hd-behandlung .team-btn,
.hd-kachel--link,
.hd-thema,
.hd-faq__frage,
.hd-verzeichnis__kopf,
.hd-video__flaeche {
  transition:
    transform .16s var(--hd-aus),
    box-shadow .25s var(--hd-aus),
    background-color .25s var(--hd-aus),
    color .25s var(--hd-aus),
    border-color .25s var(--hd-aus),
    opacity .25s var(--hd-aus);
}

.hd-behandlung .btn:active,
.hd-behandlung .hd-btn:active,
.hd-behandlung .team-btn:active,
.hd-thema:active,
.hd-video__flaeche:active { transform: scale(.97); }

/* Die Kachel hebt sich beim Überfahren – beim Drücken kommt sie zurück. */
.hd-kachel--link:active { transform: translateY(-1px) scale(.99); }

/* Aufklappbares reagiert dezenter: es bewegt sich beim Öffnen ohnehin. */
.hd-faq__frage:active,
.hd-verzeichnis__kopf:active { opacity: .72; }

/* --- Berührungsgeräte: kein hängender Hover-Zustand --- */
@media (hover: none), (pointer: coarse) {

  .hd-kachel--link:hover,
  .hd-thema:hover,
  .hd-galerie__stueck:hover {
    transform: none;
    box-shadow: none;
  }

  .hd-kacheln--flaeche .hd-kachel--link:hover { background: var(--hd-salbei); }
  .hd-kacheln--kopf .hd-kachel--link:hover .hd-kachel__kopf { background: var(--hd-salbei); }
  .hd-galerie__stueck:hover .hd-galerie__bild { transform: none; }
  a.hd-thema:hover .hd-thema__bild { transform: none; }
  .hd-aerzte .team-card:hover .team-img { transform: none; }
  .hd-kachel--link:hover .hd-kachel__mehr { gap: 10px; }

  /* Auf dem Telefon gibt es kein Überfahren – die Bildunterschrift steht. */
  .hd-galerie__text { opacity: 1; }
}

/* Das Zuklappen läuft schneller als das Aufklappen – dazu die kürzere Dauer
 * am geschlossenen Zustand. */
.hd-faq__eintrag:not([data-oeffnet]) .hd-faq__antwort {
  transition: height .3s var(--hd-aus), opacity .3s var(--hd-aus);
}

/* ═══════════════════════════════════════════════════ Anspruch ════════════
 * Dunkle Fläche, leises Bild dahinter, links die Aussage, rechts drei Punkte.
 * Helle Schrift auf dunklem Grund liest sich ruhiger und wertiger als der
 * umgekehrte Weg – deshalb hier bewusst der tiefe Ton statt des hellen.
 *
 * Gemessen: Weiß auf #5b7a7e = 8,18:1, der Kicker in hellem Rosé 5,23:1,
 * Text in den Karten 7,1:1.
 */
.hd-anspruch {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 7vw, 110px) 0;
  background: #5b7a7e;
  color: #ffffff;
}

.hd-anspruch__bildflaeche { position: absolute; inset: 0; }

.hd-anspruch__bild {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  opacity: .22;
}

/*
 * Der Schleier hält das Bild leise und sorgt dafür, dass der Text links
 * unabhängig vom Motiv trägt.
 */
/*
 * Zwei Palettenfarben uebereinander statt eines eigenen Petrols.
 *
 * Bis zum 01.09.2026 lag hier #35545a — ein Ton, den es weder im CI noch sonst
 * auf der Seite gab. Mit der Zusammenlegung faellt er weg, und --hd-salbei-tief
 * allein ist zu hell: Weiss misst darauf 4,64:1, der Fliesstext mit 84 %
 * Deckkraft nur 3,82:1. Salbei-tief ueber Tinte gelegt ergibt wieder ein
 * Petrol, diesmal mit 5,68:1 fuer Weiss. Gemessen, nicht geschaetzt.
 */
.hd-anspruch__schleier {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #5b7a7e 0%, rgba(91, 122, 126, .92) 42%, rgba(91, 122, 126, .78) 100%),
    linear-gradient(90deg, rgba(43, 54, 55, .80) 0%, rgba(43, 54, 55, .72) 42%, rgba(43, 54, 55, .58) 100%);
}

.hd-anspruch__raster {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 84px);
  align-items: center;
}

.hd-anspruch__kicker {
  margin: 0 0 18px;
  color: #ffffff;   /* Rosé hell misst auf der Flaeche nur 3,63:1 */
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.hd-anspruch__titel {
  margin: 0 0 24px;
  color: #ffffff;
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 300;
  line-height: 1.14;
  text-transform: none;   /* hier wirkt Satzschrift stärker als Versalien */
}

.hd-anspruch__text {
  margin: 0 0 34px;
  max-width: 46ch;
  color: #ffffff;
  font-size: 1.05rem;
  line-height: 1.7;
}

/* Gefüllte Schaltfläche als einziger farbiger Punkt der Fläche. */
.hd-btn--gefuellt {
  padding: 14px 34px;
  background: var(--hd-rose-tief);
  border-color: var(--hd-rose-tief);
  /* Gleiche Form wie alle anderen Schaltflaechen; die tiefere Roséstufe bleibt,
     weil Weiss darauf 5,50:1 misst — auf der dunklen Flaeche noetig. */
  border-radius: var(--hd-radius-klein);
  color: #ffffff;
}

.hd-btn--gefuellt:hover,
.hd-btn--gefuellt:focus-visible {
  background: #8a5c66;
  border-color: #8a5c66;
  color: #ffffff;
}

.hd-anspruch__punkte { display: grid; gap: 18px; }

/*
 * Die Hausform ist die schraege Rundung: zwei Ecken rund, zwei spitz. Die
 * Kaesten wechseln die Richtung, damit die Reihe eine Bewegung bekommt und
 * nicht wie drei gleiche Bloecke wirkt.
 */
.hd-anspruch__punkt {
  padding: 26px 30px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--hd-radius-mittel);
}

.hd-anspruch__punkt:nth-child(even) { border-radius: 0 26px 0 26px; }

.hd-anspruch__punkt-titel {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 500;
}

.hd-anspruch__punkt-text p {
  margin: 0;
  color: rgba(255, 255, 255, .94);
  font-size: 1rem;
  line-height: 1.6;
}

@media (hover: hover) and (pointer: fine) {
  .hd-anspruch__punkt { transition: background-color .25s var(--hd-aus), border-color .25s var(--hd-aus); }
  .hd-anspruch__punkt:hover { background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .18); }
}

@media (max-width: 991.98px) {
  .hd-anspruch__raster { grid-template-columns: 1fr; gap: 34px; }
  .hd-anspruch__schleier {
    background:
      linear-gradient(rgba(91, 122, 126, .90), rgba(91, 122, 126, .90)),
      linear-gradient(rgba(43, 54, 55, .74), rgba(43, 54, 55, .74));
  }
  .hd-anspruch__text { max-width: none; }
}

/* Vorteile: rechts stand viel Weiß. Jetzt eine leise Blase und darunter
 * rechtsbündig der Weg zum Termin. */
.hd-vorteile { position: relative; }

.hd-vorteile__kopf,
.hd-vorteile__liste,
.hd-vorteile__fuss { position: relative; z-index: 2; }

.hd-vorteile__fuss { margin-top: 34px; text-align: right; }

/* Ablauf: der Abschluss steht als letzte Karte im Stapel. */
.hd-stepper__abschluss {
  list-style: none;
  padding-left: clamp(52px, 5vw, 74px);
  padding-top: 6px;
}

.hd-stepper__knopf { display: none; }   /* der Abschluss steht rechts im Stapel */

@media (max-width: 991.98px) {
  .hd-vorteile__fuss { text-align: left; }
  .hd-stepper__abschluss { padding-left: 0; }
}

/* Der einordnende Satz unter einem Kachelraster gehört in denselben
 * Abschnitt – als eigener Block sähe er aus wie ein zweites Element. */
.hd-kacheln__nachtext { margin-top: 38px; }
.hd-kacheln__nachtext p { margin-bottom: 0; }

/* Textabschnitte über die ganze Breite lassen rechts viel Raum. Eine leise
 * Blase und der Weg zum Termin füllen ihn, ohne den Text zu bedrängen. */
.hd-abschnitt__fuss { margin-top: 34px; }
.hd-abschnitt--voll .hd-abschnitt__fuss { text-align: right; }

@media (max-width: 991.98px) {
  .hd-abschnitt__blase { display: none; }
  .hd-abschnitt--voll .hd-abschnitt__fuss { text-align: left; }
}

/* ═══════════════════════════════════════════ Kopfbild: Einblendung ═══════
 * Titel, Unterzeile, Schaltfläche und Bewertung fahren nacheinander ein.
 *
 * **Nur Bewegung, keine Deckkraft.** Gemessen am 31.08.2026: sowohl
 * `animation: … both` als auch `@starting-style` halten den Startzustand fest,
 * wenn der Übergang nicht läuft — im versteckten Tab blieb der Kopfbereich
 * dauerhaft auf Deckkraft 0. Wird nur `transform` bewegt, ist der
 * schlimmstmögliche Ausgang ein um 16 px versetzter, aber vollständig
 * lesbarer Text. Eine Einblendung darf nie der Grund sein, dass etwas fehlt.
 *
 * Das Bild selbst bleibt unbewegt: es ist der größte Inhalt der Seite und
 * damit vermutlich der Wert, an dem Google die Ladezeit misst.
 */
@media (prefers-reduced-motion: no-preference) {

  .hd-hero__titel,
  .hd-hero__unterzeile,
  .hd-hero .hd-btn,
  .hd-hero__bewertung {
    transform: none;
    transition: transform .6s var(--hd-aus);
  }

  .hd-hero__unterzeile { transition-delay: .1s; }
  .hd-hero .hd-btn     { transition-delay: .2s; }
  .hd-hero__bewertung  { transition-delay: .3s; }

  @starting-style {
    .hd-hero__titel,
    .hd-hero__unterzeile,
    .hd-hero .hd-btn,
    .hd-hero__bewertung { transform: translateY(16px); }
  }
}


/* ═══════════════════════════════════════════ Telefonnummern im Fliesstext ═
 * Bootstrap setzt `a:hover { color: #0a58ca }`. Das ist spezifischer als eine
 * einzelne Klasse im Normalzustand, also faerbte sich jede Telefonnummer beim
 * Ueberfahren blau — gemessen am 31.08.2026 im Abschnitt „Jetzt Wunschtermin
 * vereinbaren". Jede eigene Farbe braucht deshalb einen eigenen Hover-Satz.
 */
.hd-behandlung a[href^="tel:"] { text-decoration: none; }

.hd-behandlung a[href^="tel:"]:hover,
.hd-behandlung a[href^="tel:"]:focus-visible { color: var(--hd-rose-tief); }

.hd-behandlung .hd-sprechzeiten__telefon:hover,
.hd-behandlung .hd-sprechzeiten__telefon:focus-visible { color: #ffffff; }

/* ═══════════════════════════════════════════ „Praeparat und Behandler" ═════
 * Auch Kacheln ohne Verweis bekommen eine Rueckmeldung beim Ueberfahren.
 * Weiss auf --hd-salbei-tief misst 4,62:1 und haelt damit die 4,5:1.
 */
@media (hover: hover) and (pointer: fine) {

  .hd-kacheln--kopf .hd-kachel:not(.hd-kachel--link) {
    transition: transform .3s var(--hd-aus), box-shadow .3s var(--hd-aus);
  }

  .hd-kacheln--kopf .hd-kachel:not(.hd-kachel--link):hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(43, 54, 55, .14);
  }

  .hd-kacheln--kopf .hd-kachel:not(.hd-kachel--link) .hd-kachel__kopf {
    transition: background-color .3s var(--hd-aus);
  }

  .hd-kacheln--kopf .hd-kachel:not(.hd-kachel--link):hover .hd-kachel__kopf {
    background: var(--hd-salbei-tief);
  }
}


/* ═══════════════════════════════════════════ Sprungziele ═══════════════════
 * Die Kopfzeile laeuft mit und liegt fest oben. Ohne Vorhalt landet jedes Ziel
 * aus dem Inhaltsverzeichnis genau darunter und die Ueberschrift ist verdeckt.
 * Gemessen am 01.09.2026: Kopfzeile 78 px, dazu Luft — 120 px trifft.
 */
.hd-behandlung [id],
.hd-section[id] { scroll-margin-top: 120px; }

@media (max-width: 991.98px) {
  .hd-behandlung [id],
  .hd-section[id] { scroll-margin-top: 96px; }
}

/* ═══════════════════════════════════════════ Nach oben ═════════════════════
 * Unten rechts, unterhalb der seitlichen Schnellwahl. Erst ab 600 px Scrollweg
 * sichtbar; das `hidden` faellt in `bloecke.js`, damit sie ohne JavaScript gar
 * nicht erst erscheint.
 */
.hd-nach-oben {
  position: fixed;
  right: 10px;
  bottom: 22px;
  z-index: 1000;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: var(--hd-radius-klein);
  background: var(--hd-salbei-tief);
  color: #ffffff;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .3s var(--hd-aus), transform .3s var(--hd-aus),
    background-color .3s var(--hd-aus);
}

.hd-nach-oben[hidden] { display: none; }

.hd-nach-oben.ist-da {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.hd-nach-oben:hover,
.hd-nach-oben:focus-visible { background: var(--hd-rose-tief); }

.hd-nach-oben:focus-visible {
  outline: 2px solid var(--hd-rose-tief);
  outline-offset: 3px;
}

.hd-nach-oben:active { transform: scale(.95); }

@media (prefers-reduced-motion: reduce) {
  .hd-nach-oben { transition: opacity .01ms; transform: none; }
}


/* ═══════════════════════════════════════════ Schaltflaechen mit Pfeil ══════
 * `.btn` des Themes setzt `padding-right: 42px` — Platz fuer den Pfeil, den
 * dieser aber gar nicht braucht: er liegt absolut und verlangt keine Breite.
 * Gemessen am 01.09.2026 stand die Beschriftung der Kopfzeilen-Schaltflaeche
 * deshalb dauerhaft 18 px links und 43 px rechts, also sichtbar aus der Mitte.
 *
 * Jetzt: gleiche Polsterung auf beiden Seiten — die Breite bleibt dieselbe wie
 * bisher —, Text mittig im Normalzustand, und beim Ueberfahren schiebt er sich
 * nach links, waehrend der Pfeil einblendet. Die Schaltflaeche selbst bewegt
 * sich nicht, das Raster bleibt ruhig.
 */
/*
 * Zwei Klassen im Wahlausdruck, nicht eine: `style.css` wird NACH `bloecke.css`
 * geladen, und `.btn { padding-right: 42px }` haette bei gleicher Spezifitaet
 * gewonnen. Am 01.09.2026 gemessen — die Polsterung blieb unveraendert.
 */
/* Wie der Knopf im Kopfbild — 36px, damit beide gleich grosszuegig wirken.
   Diese Regel schlaegt die Kurzform in style.css (Spezifitaet 0,2,0). */
.btn.appointment-btn { padding-left: 36px; padding-right: 36px; }

/* Die Lupe erbt sonst die 42px Rechtspolsterung der .btn-Grundregel; das
   Symbol saesse dann sichtbar links aus der Mitte. */
.btn.search-btn { padding-left: 0; padding-right: 0; }
.btn.hd-btn          { padding-left: 36px; padding-right: 36px; }

.btn-text {
  display: inline-block;
  transition: transform .35s ease;
}

@media (hover: hover) and (pointer: fine) {

  .appointment-btn:hover .btn-text,
  .hd-btn:hover .btn-text { transform: translateX(-9px); }
}

.appointment-btn:focus-visible .btn-text,
.hd-btn:focus-visible .btn-text { transform: translateX(-9px); }

@media (prefers-reduced-motion: reduce) {
  .btn-text { transition: none; }
}


/* ═══════════════════════════════════════════ Zwei Textspalten ══════════════
 * Fuer lange Abschnitte auf ganzer Breite. Die Zwischenueberschrift darf nicht
 * allein am Spaltenende stehenbleiben, der Absatz nicht mittendrin umbrechen.
 */
@media (min-width: 992px) {

  /*
   * Die Lesebreite von 68ch gilt fuer EINE Spalte. Bei zweien haelt sie der
   * Kasten selbst nicht mehr ein — sonst stuenden beide Spalten in der linken
   * Haelfte (gemessen: 667 von 1440 px). Die Breite uebernimmt hier der
   * Container, die Lesebreite entsteht durch die Teilung.
   */
  .hd-mass--zwei {
    max-width: none;
    columns: 2;
    column-gap: clamp(40px, 4vw, 70px);
  }

  .hd-mass--zwei > * { break-inside: avoid; }

  .hd-mass--zwei > h3,
  .hd-mass--zwei > h4 { break-after: avoid; }

  .hd-mass--zwei > :first-child { margin-top: 0; }
}


/* ═══════════════════════════════════════════ Abschnitt mit Seitenbild ══════
 * Text in der einen Spalte, Bild in der anderen ueber die volle Hoehe des
 * Abschnitts. Der Container sitzt in der Textspalte, damit der Text an der
 * gewohnten Kante beginnt und das Bild bis an den Rand laufen kann.
 */
.hd-abschnitt--seitenbild {
  padding: 0;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 38%);
  align-items: stretch;
  overflow: hidden;
}

.hd-abschnitt--bild-links .hd-abschnitt__bildflaeche { order: -1; }
.hd-abschnitt--bild-links { grid-template-columns: minmax(320px, 38%) 1fr; }

.hd-abschnitt--seitenbild .hd-abschnitt__spalte {
  display: flex;
  align-items: center;
  padding: clamp(48px, 5vw, 96px) 0;
}

/*
 * Der Text soll an derselben Kante beginnen wie auf dem Rest der Seite.
 * Bis zum 09.09.2026 stand hier nur `margin-inline: 0`. Weil die Textspalte
 * bei 0 anfaengt, sass der Text damit auch bei 0 + 30 px Polsterung — auf
 * einem 1920er Fenster also 235 px weiter links als jeder andere Abschnitt
 * (gemessen auf Botox und Skinbooster: 30 px statt 265 px). Deshalb wird der
 * Seitenrand des 1450er Rasters hier ausgerechnet, mit derselben Formel wie
 * beim Kachelband weiter unten.
 */
.hd-abschnitt--seitenbild .container {
  margin-inline: 0;
  padding-inline-start: max(30px, calc((100vw - 1450px) / 2 + 30px));
}

/*
 * Rechtsbuendige Schaltflaeche ergibt nur ueber die volle Breite Sinn. In der
 * schmalen Textspalte eines Abschnitts mit Seitenbild landet sie sonst
 * mitten auf der Seite (auf Skinbooster bei 433 px gemessen) und wirkt
 * abgeloest vom Text darueber. Dieselbe Ausnahme gilt schon fuer
 * `--bildform-gerundet` weiter unten.
 */
.hd-abschnitt--seitenbild .hd-abschnitt__fuss { text-align: left; }

.hd-abschnitt__bildflaeche {
  position: relative;
  overflow: hidden;
  min-height: 340px;
}

.hd-abschnitt__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 991.98px) {

  .hd-abschnitt--seitenbild { grid-template-columns: 1fr; }

  .hd-abschnitt--bild-links .hd-abschnitt__bildflaeche { order: 0; }

  .hd-abschnitt--seitenbild .hd-abschnitt__spalte {
    padding: clamp(40px, 7vw, 64px) 0;
  }

  .hd-abschnitt__bildflaeche { min-height: 260px; }
}


/* ═════════════════════════════════════════ Quellen: Belege duerfen umbrechen ══
 * Frueher stand hier die Regel „ein Beleg = eine Zeile", umgesetzt mit
 * white-space: nowrap in einem Scrollkasten. Am 08.09.2026 im Betrieb
 * verworfen: Auf breiten Bildschirmen lief die Zeile sichtbar aus dem Kasten
 * heraus und wurde am rechten Rand abgeschnitten — der Beleg war dann nicht
 * mehr lesbar, und niemand scrollt eine Literaturliste waagerecht. Eine
 * Quellenangabe bricht jetzt um, wie jeder andere Text auch.
 */
.hd-quellen__text ul {
  margin: 0;
  padding-left: 22px;
}

/*
 * 08.09.2026: Quellenzeilen brechen um, statt waagerecht wegzulaufen.
 * Vorher standen sie mit white-space: nowrap in einem Scrollkasten — auf
 * breiten Bildschirmen lief die Zeile sichtbar aus dem Kasten heraus und
 * wurde am rechten Rand abgeschnitten. Eine Literaturangabe darf umbrechen.
 */
.hd-quellen__text li { white-space: normal; overflow-wrap: break-word; }

@media (max-width: 767.98px) {
  .hd-quellen__text li { white-space: normal; }
}


/* ══════════════════════════════════════════ Einblenden, allgemein ═════════
 * Schritt 5 der Angleichung, 01.09.2026.
 *
 * Bisher stand fuer jede Bauart eine eigene Regel (FAQ-Eintrag, Galeriestueck,
 * Vorteil …). Die Startseite besteht aus anderen Bauteilen, also hier die
 * allgemeine Fassung: was `data-einblenden` traegt, faehrt ein.
 *
 * Versteckt wird weiterhin nur unter `.hd-einblenden` — die Klasse setzt das
 * Skript, und eine Sicherung nimmt sie nach 1,5 s zurueck, falls nichts
 * sichtbar geworden ist. Ohne JavaScript bleibt alles sichtbar.
 */
.hd-einblenden [data-einblenden] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s var(--hd-aus), transform .6s var(--hd-aus);
}

.hd-einblenden [data-einblenden].ist-sichtbar {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .hd-einblenden [data-einblenden] { opacity: 1; transform: none; transition: none; }
}


/* ══════════════════════════════════ Kopfbild: sanfter Schleier ════════════
 * Fuer helle Motive mit Menschen — etwa das Teamfoto der Startseite.
 *
 * Der starke Schleier legt sich ueber das ganze Bild und waescht ein helles
 * Motiv aus. Diese Fassung setzt erst unterhalb der Gesichter an und
 * schleicht ueber die halbe Bildhoehe aus: 0,169 % Deckkraft je Pixel, in 25
 * Stops einer S-Kurve ausgeschrieben. Mit wenigen Stops rechnet der Browser
 * linear, und dann ist die Kante sichtbar — am 01.09.2026 genau so gemessen.
 *
 * Gemessen auf dem Teamfoto: weisser Titel 3,99:1 im Median, Unterzeile
 * 4,99:1. Ohne Schleier waeren es 1,26:1.
 */
.hd-hero--schleier-sanft .hd-hero__schleier {
  background:
    radial-gradient(140% 160% at 2% 160%,
      rgba(43, 54, 55, .340) 0%,
      rgba(43, 54, 55, .330) 10%,
      rgba(43, 54, 55, .305) 20%,
      rgba(43, 54, 55, .267) 30%,
      rgba(43, 54, 55, .220) 40%,
      rgba(43, 54, 55, .170) 50%,
      rgba(43, 54, 55, .120) 60%,
      rgba(43, 54, 55, .073) 70%,
      rgba(43, 54, 55, .035) 80%,
      rgba(43, 54, 55, .010) 90%,
      rgba(43, 54, 55, 0)    100%),
    linear-gradient(0deg,
      rgba(43, 54, 55, .660) 0%,
      rgba(43, 54, 55, .649) 8%,
      rgba(43, 54, 55, .620) 16%,
      rgba(43, 54, 55, .574) 24%,
      rgba(43, 54, 55, .517) 32%,
      rgba(43, 54, 55, .451) 40%,
      rgba(43, 54, 55, .378) 48%,
      rgba(43, 54, 55, .304) 56%,
      rgba(43, 54, 55, .231) 64%,
      rgba(43, 54, 55, .163) 72%,
      rgba(43, 54, 55, .102) 80%,
      rgba(43, 54, 55, .053) 88%,
      rgba(43, 54, 55, .018) 96%,
      rgba(43, 54, 55, 0)    100%);
}

/* Der Text sitzt tiefer und kleiner, damit er im getragenen Bereich liegt. */
.hd-hero--schleier-sanft .hd-hero__titel {
  font-size: clamp(1.75rem, 2.9vw, 2.75rem);
  margin-bottom: 6px;
}

.hd-hero--schleier-sanft .hd-hero__unterzeile {
  font-size: clamp(1.05rem, 1.66vw, 1.5625rem);
  margin-bottom: 14px;
}

.hd-hero--schleier-sanft .hd-hero__bewertung { margin-top: 18px; }


/* ═════════════════════════════════ Kachel als Knopf ═══════════════════════
 * Eine Zeile, kein Text, kein Verweiszeile — fuer Aufzaehlungen wie die
 * Fachbereiche auf der Startseite. Entspricht der `.leistung-box` des
 * bestehenden Themes: 78 px hoch, Salbei, Radius 9 px, Text mittig.
 */
.hd-kacheln--knopf { gap: 18px; }

.hd-kacheln--knopf .hd-kachel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 78px;
  padding: 12px 20px;
  border-radius: var(--hd-radius-klein);
  background: var(--hd-salbei);
  color: #ffffff;
  text-align: center;
}

.hd-kacheln--knopf .hd-kachel__titel {
  font-size: 1.25rem;
  font-weight: 300;
  letter-spacing: .02em;
}

.hd-kacheln--knopf .hd-kachel__text,
.hd-kacheln--knopf .hd-kachel__mehr { display: none; }

@media (hover: hover) and (pointer: fine) {
  .hd-kacheln--knopf .hd-kachel--link:hover,
  .hd-kacheln--knopf .hd-kachel--link:focus-visible { background: var(--hd-salbei-tief); }
}

/* ═════════════════════════════════ Kreise im Hintergrund ══════════════════
 * Aus dem bestehenden Theme uebernommen (.circle-1 bis -4 im Abschnitt
 * „Ihr Hautarzt in Hamburg“): vier Salbei-Kreise rechts, unterschiedlich
 * gross und unterschiedlich deckend.
 */
.hd-abschnitt--kreise { position: relative; overflow: hidden; }

.hd-abschnitt__kreise {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hd-abschnitt--kreise > .container { position: relative; z-index: 1; }

.hd-kreis { position: absolute; border-radius: 50%; background: var(--hd-salbei); }
.hd-kreis--1 { width: 150px; height: 150px; top: 20px;  right: 110px;  opacity: .55; }
.hd-kreis--2 { width: 270px; height: 270px; top: 60px;  right: -100px; opacity: .20; }
.hd-kreis--3 { width: 365px; height: 365px; bottom: 15px; right: -25px; opacity: .22; }
.hd-kreis--4 { width: 85px;  height: 85px;  bottom: 15px; right: 55px;  opacity: .55; }

@media (max-width: 991.98px) { .hd-abschnitt__kreise { display: none; } }

/* ═════════════════════════════════ Seitenbild: Breite und Form ════════════
 * `haelfte` und `gerundet` bilden die Behandlungs-Zeilen der Startseite nach:
 * halbe Breite, Hausradius 50px 0 50px 0, mindestens 550 px hoch.
 */
.hd-abschnitt--bildanteil-haelfte { grid-template-columns: 1fr 1fr; }
.hd-abschnitt--bildanteil-haelfte.hd-abschnitt--bild-links { grid-template-columns: 1fr 1fr; }

/*
 * Wie die Behandlungs-Zeile des Bestands: die Zeile laeuft in Containerbreite
 * (1450 px), nicht bis an den Fensterrand — nur so ist der Hausradius auf
 * beiden Seiten des Bildes sichtbar. Die Textspalte bekommt den Innenabstand,
 * den `.treatment-inner` im Bestand traegt.
 */
/*
 * Volle Flaechenbreite, Inhalt in Containerbreite: die Polsterung uebernimmt
 * das Zentrieren. Vorher sass max-width am Abschnitt selbst — auf Bildschirmen
 * breiter als 1450 px endete damit auch die FARBE des Abschnitts dort
 * (am 01.09.2026 am rosé Karriere-Band aufgefallen).
 */
.hd-abschnitt--bildform-gerundet {
  padding: clamp(48px, 5rem, 80px) max(30px, calc((100vw - 1450px) / 2 + 30px));
}

.hd-abschnitt--bildform-gerundet .hd-abschnitt__bildflaeche {
  min-height: 550px;
  border-radius: var(--hd-radius);
  margin-inline: 0;
}

.hd-abschnitt--bildform-gerundet .hd-abschnitt__spalte { padding: 0; }

/*
 * Masse der Textspalte, am Bestand gemessen (01.09.2026, 1440 px):
 * `.treatment-inner` ist 520 px breit und mittig in der Spalte, Fliesstext
 * 18,4 px in Gewicht 300 mit Zeilenhoehe 1,55, Ueberschrift 37,4 px,
 * die Schaltflaeche steht LINKS unter dem Text.
 */
.hd-abschnitt--bildform-gerundet .hd-abschnitt__spalte-innen {
  max-width: 520px;
  margin-inline: auto;
  padding: clamp(24px, 3vw, 48px) 0;
}

.hd-abschnitt--bildform-gerundet .hd-titel {
  font-size: clamp(1.8rem, 2.6vw, 2.34rem);
  font-weight: 400;   /* Wunsch vom 01.09.2026 — Abweichung vom Bestand (300) */
}

.hd-abschnitt--bildform-gerundet .hd-mass > p {
  font-size: 1.15rem;
  font-weight: 300;
  line-height: 1.55;
}

.hd-abschnitt--bildform-gerundet .hd-abschnitt__fuss {
  margin-top: 26px;
  text-align: left;
}

.hd-abschnitt--bildform-gerundet .container {
  margin-inline: 0;
  padding-inline: 0;
  max-width: none;
}

@media (max-width: 991.98px) {
  .hd-abschnitt--bildanteil-haelfte { grid-template-columns: 1fr; }
  .hd-abschnitt--bildform-gerundet .hd-abschnitt__bildflaeche { min-height: 300px; margin-inline: 0; }
}


/* Kacheln im Inneren eines Textabschnitts: nur das Raster, mit Luft davor
   und danach — so wie die Leistungskaesten im Bestand mitten im Text sitzen. */
.hd-kacheln--eingebettet { margin: 34px 0 30px; }


/* ══════════════════ Kopfbild mit sanftem Schleier: Hoehe wie im Bestand ═══
 * Die Startseite im Bestand rechnet die Kopfbildhoehe so:
 *   min(100svh - 152px, 100vw / 2.05)
 * Der erste Teil fuellt den Bildschirm unter der 152 px hohen Kopfzeile, der
 * zweite deckelt ihn: schmaler als 2,05:1 schneidet `cover` die aeusseren
 * Personen des Teamfotos an (2560 x 1067, Personen von 7 % bis 91 %).
 *
 * Der Textblock sitzt unten mit 36 px Abstand, nicht mit 90 px wie auf den
 * Behandlungsseiten — sonst steht er sichtbar hoeher als im Bestand.
 */
.hd-hero--schleier-sanft .hd-hero__inhalt {
  /*
   * 02.09.2026: Hier stand NUR die svh-Zeile. `svh` kennen erst Chrome und
   * Edge ab 108, Safari ab 15.4, Firefox ab 101 — aeltere Browser werfen die
   * ganze Deklaration weg. Dann hatte der Kopfbereich keine Hoehe mehr, und
   * weil Bild und Schleier `position:absolute; inset:0` sind, verschwanden
   * Bild, Abdunklung und Text zugleich. Die Botox-Seite war nicht betroffen,
   * weil ihre Hoehe als Pixelwert aus dem JavaScript kommt.
   *
   * Drei Stufen, jede spaetere gewinnt, wenn der Browser sie versteht.
   */
  min-height: 430px;
  min-height: max(430px, min(calc(100vh - 152px), calc(100vw / 2.05)));
  min-height: max(430px, min(calc(100svh - 152px), calc(100vw / 2.05)));
  padding-top: 0;
  padding-bottom: clamp(30px, 4vh, 54px);
}

@media (max-width: 991.98px) {
  .hd-hero--schleier-sanft .hd-hero__inhalt { min-height: 380px; min-height: max(380px, 62vh); min-height: max(380px, 62svh); }
}


/* ═════════════════════════ Kacheln in einem Textabschnitt ═════════════════
 * Am 01.09.2026 im Vergleich mit dem Bestand gefunden: der Kacheltitel ist
 * ein h3 und stand damit mitten im Textabschnitt — er bekam den Schraegstrich
 * der Zwischenueberschriften vorangestellt, die Rosé-Textfarbe und die
 * Unterstreichung der Fliesstext-Verweise. Aus „DERMATOLOGIE" wurde
 * „/ DERMATOLOGIE" in Rosé mit Unterstrich.
 *
 * Die drei Regeln gelten hier ausdruecklich nicht.
 */
.hd-abschnitt .hd-mass .hd-kachel__titel::before { content: none; }

.hd-abschnitt .hd-mass .hd-kachel__titel {
  margin: 0;
  color: inherit;
  font-size: 1.25rem;
  font-weight: 300;
  letter-spacing: .02em;
  text-transform: none;
}

.hd-abschnitt .hd-mass a.hd-kachel,
.hd-abschnitt .hd-mass a.hd-kachel:hover {
  color: #ffffff;
  text-decoration: none;
}

/* ═════════════════════════ „Ihr Hautarzt in Hamburg": Masse des Bestands ══
 * H1 3rem statt der Abschnittsgroesse, Zwischenueberschrift in Salbei und
 * 1,7rem — beides so wie im bestehenden Abschnitt `.hautarzt-content`.
 */
.hd-abschnitt--kreise h1.hd-titel {
  margin-bottom: 12px;
  font-size: clamp(2.1rem, 3.6vw, 3rem);
  text-transform: none;
}

.hd-abschnitt--kreise .hd-mass > h2 {
  margin: 40px 0 12px;
  color: var(--hd-salbei);
  font-size: clamp(1.35rem, 1.9vw, 1.7rem);
  font-weight: 300;
  text-transform: none;
}


/* ═════════════════ „Ihr Hautarzt in Hamburg": Masse gegen den Bestand ═════
 * Am 01.09.2026 Punkt fuer Punkt gemessen (Fenster 1440 x 900):
 *
 *   Inhaltsbreite   1180 px   (`.hautarzt-content` im Bestand)
 *   Knopfbreite      377 px   (drei Spalten in 1204 px Reihe)
 *   Kreise x        1180 / 1270 / 1100 / 1300
 *   Kreise y         121 /  161 /  314 /  594  — relativ zum Container
 *
 * Vorher: Knoepfe 448 px breit, Kreise senkrecht um 100 bis 260 px versetzt,
 * weil sie am Abschnitt statt am Container hingen.
 */
.hd-abschnitt--kreise > .container { position: relative; }

.hd-abschnitt--kreise .hd-titel,
.hd-abschnitt--kreise .hd-mass { max-width: 1180px; }

.hd-abschnitt--kreise .hd-mass > p,
.hd-abschnitt--kreise .hd-mass > h2 { max-width: 68ch; }

.hd-abschnitt--kreise .hd-kacheln--eingebettet { max-width: 1180px; gap: 24px; }

.hd-abschnitt--kreise .hd-abschnitt__kreise {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/*
 * Alle vier von OBEN verankert, mit den Werten des Bestands. Zwei davon
 * hingen dort am unteren Rand — bei einem laengeren Abschnitt wandern sie
 * dann mit, und die Ueberlappung der beiden grossen Kreise geht verloren.
 * Gemessen am Bestand (Abschnitt-Oberkante = 0): 121 / 161 / 314 / 594.
 */
.hd-abschnitt--kreise .hd-kreis--1 { top:  20px; right: 110px; }
.hd-abschnitt--kreise .hd-kreis--2 { top:  60px; right: -100px; }
.hd-abschnitt--kreise .hd-kreis--3 { top: 213px; right: -25px; }
.hd-abschnitt--kreise .hd-kreis--4 { top: 493px; right: 55px; }


/* ══════════════════════════════════════ Abschnittsgruppe ══════════════════
 * Nachbau der Behandlungs-Gruppe der Startseite: eine Ueberschrift, ein
 * durchgehender Struktur-Hintergrund, die Abschnitte darin transparent.
 */
.hd-gruppe--struktur {
  background-color: var(--hd-flaeche-hell);
  background-image: url('/wp-content/themes/hamburg-dermatologie/assets/img/bg_treatments.webp');
}

.hd-gruppe { padding-top: var(--hd-luft); }

.hd-gruppe > .hd-section { background: transparent; }

/* Mit .hd-behandlung davor, sonst gewinnt die Fliesstextregel
   `.hd-behandlung p` (16,8 px) — gemessen am 01.09.2026. */
.hd-behandlung .hd-gruppe__titel {
  margin: 0;
  color: var(--hd-text);
  font-size: 2rem;
  font-weight: 300;
  text-transform: uppercase;
  line-height: 1.35;
}

/* ══════════════════ Seitenbild „gerundet": Parallax wie im Bestand ════════
 * Das Bild ist 150 % hoch und mittig verankert; bloecke.js faehrt es beim
 * Scrollen um bis zu 140 px, gerade und ungerade Zeilen gegenlaeufig —
 * dieselben Werte wie animation.js im Bestand.
 */
.hd-abschnitt--bildform-gerundet .hd-abschnitt__bild {
  /* inset:auto MUSS vor top/left stehen — als Kurzform danach loescht es
     beide wieder. Genau so am 01.09.2026 passiert: top stand auf 0. */
  inset: auto;
  top: 50%;
  left: 50%;
  width: 100%;
  /*
   * Reserve fuer den Parallax-Lauf. Sie kostet 1:1 Bildschaerfe: bei
   * `object-fit: cover` in einem hochkant stehenden Rahmen bindet die HOEHE,
   * ein Bild auf 170 % braucht also 70 % mehr Aufloesung als der sichtbare
   * Rahmen. Am 02.09.2026 waren dadurch alle sechs Leistungszeilen der
   * Startseite um Faktor 1,75 bis 2,34 hochskaliert. Auf 120 % gesenkt —
   * kuerzerer Lauf (rund 51 px je Seite), dafuer sichtbar schaerfer.
   * Wird dieser Wert geaendert, zieht die Reserve im JS automatisch nach:
   * sie wird dort aus der gemessenen Bildhoehe gerechnet, nicht getippt.
   */
  height: 120%;
  transform: translate(-50%, -50%);
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .hd-abschnitt--bildform-gerundet .hd-abschnitt__bild {
    transform: translate(-50%, -50%) !important;
  }
}


/* Fliesstext auf den farbigen Flaechen: Weiss, nicht die graue Textfarbe. */
.hd-section--salbei .hd-mass > p,
.hd-section--rose .hd-mass > p { color: #ffffff; }


/* ═════════════════════════════ Nummernkarten (Saisonale Themen) ═══════════
 * Werte der `.info-card` des Bestands: Salbei, Hausradius, Nummer 2,7rem in
 * Rosé hell, Trennlinie 38 x 1 px, Fuss auf heller Flaeche.
 */
.hd-karten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin-top: 40px;
}

.hd-karte {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--hd-salbei);
  border-radius: var(--hd-radius);
}

.hd-karte__inhalt { flex: 1; padding: 26px 38px 24px; color: #ffffff; }

.hd-karte__nummer {
  margin-bottom: 10px;
  color: var(--hd-rose-hell);
  font-size: 2.7rem;
  font-weight: 700;
  line-height: 1;
}

.hd-karte__nummer span { margin-left: 6px; font-weight: 400; }

.hd-karte__titel {
  margin: 0 0 18px;
  color: #ffffff;
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1.3;
}

.hd-karte__linie { width: 38px; height: 1px; margin-bottom: 16px; background: var(--hd-rose-hell); }

.hd-karte__inhalt p { color: #ffffff; font-weight: 300; }

.hd-karte__fuss { padding: 30px 38px; background: var(--hd-flaeche-hell); }

/* Konturknopf wie im Bestand: Rosé auf heller Flaeche. */
.btn.hd-karte__knopf {
  display: block;
  background: transparent;
  border: 1px solid var(--hd-rose);
  color: var(--hd-rose-tief);
  text-align: center;
}

.btn.hd-karte__knopf:hover,
.btn.hd-karte__knopf:focus-visible { background: var(--hd-rose); color: #ffffff; }

@media (max-width: 991.98px) { .hd-karten { grid-template-columns: 1fr; gap: 26px; } }

/* ═══════════════════════════════════ Logoband ═════════════════════════════
 * Salbei-Band mit zwei grossen Weiss-Kreisen (8 % und 5 %), Logos in weissen
 * Kreisen 182 px — Werte der `.mitgliedschaften-section` des Bestands.
 */
.hd-logoband {
  position: relative;
  overflow: hidden;
  background: var(--hd-salbei);
  padding: var(--hd-luft) 0;
}

.hd-logoband::before,
.hd-logoband::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.hd-logoband::before { width: 620px; height: 620px; top: -265px; left: -115px; background: rgba(255,255,255,.08); }
.hd-logoband::after  { width: 410px; height: 410px; top: -235px; right: -105px; background: rgba(255,255,255,.05); }

.hd-logoband > .container { position: relative; z-index: 2; }
.hd-logoband .hd-titel { color: #ffffff; font-size: 2rem; text-transform: uppercase; }

.hd-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  margin-top: 34px;
}

.hd-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 182px;
  height: 182px;
  background: #ffffff;
  border-radius: 50%;
  overflow: hidden;
}

.hd-logo__bild { width: 82%; height: 82%; object-fit: contain; }

/* ═══════════════════ Kacheln „Panel" (Spezialsprechstunden) ═══════════════
 * 270 px hoch, Hausradius, 1,9rem Weiss zentriert, ein Weiss-Kreis je Feld an
 * wechselnder Position — Werte der `.special-box` des Bestands.
 */
.hd-kacheln--panel .hd-kachel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Feste Hoehe schnitt den laengsten Text ab. Mit min-height waechst die
     Kachel mit, und weil das Raster die Zeile ausgleicht, bleiben alle
     Kacheln einer Reihe gleich hoch (10.09.2026). */
  min-height: 270px;
  overflow: hidden;
  background: var(--hd-salbei);
  border-radius: var(--hd-radius);
  text-align: center;
}

.hd-kacheln--panel .hd-kachel::before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
}

.hd-kacheln--panel .hd-kachel:nth-child(3n+1)::before { top: -135px; left: -65px; }
.hd-kacheln--panel .hd-kachel:nth-child(3n+2)::before { top: -120px; right: -165px; }
.hd-kacheln--panel .hd-kachel:nth-child(3n)::before   { bottom: -250px; right: -90px; }

.hd-kacheln--panel .hd-kachel__titel { padding-inline: 34px;
  position: relative;
  z-index: 2;
  color: #ffffff;
  /* 1,9rem war der Wert, als der Titel allein in der Kachel stand.
     Mit Erklaertext darunter wirkt 1,55rem ruhiger (10.09.2026). */
  font-size: 1.55rem;
  font-weight: 300;
  line-height: 1.4;
  text-transform: uppercase;
}

/*
 * Der Erklaertext stand hier auf display:none — die Panel-Kacheln zeigten
 * nur ihren Titel, obwohl in 376 von 520 Kacheln ein Satz hinterlegt war.
 * Christian am 10.09.2026: „Ich bevorzuge diese Boxen denen mit nur einem
 * Wort, grad bei so was wie Lip-Flip ist eine kurze Erklaerung super."
 * Die Kachel bleibt bei 270 px hoch; der Text passt hinein, weil Titel und
 * Text nun uebereinander statt der Titel allein in der Mitte stehen.
 */
.hd-kacheln--panel .hd-kachel {
  flex-direction: column;
  padding-block: 30px;
}

.hd-kacheln--panel .hd-kachel__text {
  position: relative;
  z-index: 2;
  margin-top: 12px;
  padding-inline: 34px;
  color: rgba(255, 255, 255, .92);
  font-size: .95rem;
  line-height: 1.55;
}

.hd-kacheln--panel .hd-kachel__mehr { display: none; }

@media (hover: hover) and (pointer: fine) {
  .hd-kacheln--panel .hd-kachel--link:hover,
  .hd-kacheln--panel .hd-kachel--link:focus-visible { background: var(--hd-salbei-tief); }
}

/* ═══════════════════════════════ Aktuelle Beitraege ═══════════════════════ */
.hd-beitraege {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  /* 160 px: die Karten fahren beim versetzten Lauf bis 120 px nach oben —
     dieselbe Reserve wie bei der Galerie (01.09.2026). */
  margin-top: 160px;
  align-items: start;
}

.hd-beitraege--1, .hd-beitraege--2 { grid-template-columns: repeat(2, 1fr); }

/*
 * Das Format bestimmt der Rahmen, nicht die Bilddatei — am 01.09.2026
 * gemessen: mit aspect-ratio nur am Bild folgten die Hoehen weiter den
 * unterschiedlich zugeschnittenen Beitragsbildern (413 / 427 / 413 px).
 * Der Rahmen gibt 16:9 vor (das Anzeigeformat des Bestands), das Bild
 * fuellt ihn beschnitten — jede Karte ist damit exakt gleich hoch.
 */
.hd-beitrag__bildlink {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 26px 0 26px 0; /* Hausform statt 9 px — wie die übrigen Bildkacheln */
}

.hd-beitrag__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--hd-aus);
}

.hd-beitrag__bildlink:hover .hd-beitrag__bild { transform: scale(1.04); }

/* 1,35rem statt 1,6: die kleinere Groesse des Bestands traegt besser — bei
   drei Karten nebeneinander konkurriert ein 26-px-Titel mit den H2s. */
.hd-beitrag__titel { margin: 20px 0 8px; font-size: 1.35rem; font-weight: 300; line-height: 1.3; }
.hd-beitrag__titel a { color: var(--hd-salbei-tief); text-decoration: none; }
.hd-beitrag__titel a:hover { text-decoration: underline; }

.hd-beitrag__datum { margin: 0 0 10px; font-size: .98rem; color: var(--hd-text); }
.hd-beitrag__auszug { margin: 0 0 12px; font-weight: 300; }

/* Weiterlesen mit langem Pfeil: die Linie waechst beim Ueberfahren. */
.hd-beitrag__mehr {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--hd-rose-tief);
  text-decoration: none;
}

.hd-pfeil {
  display: inline-flex;
  align-items: center;
  height: 9px;
}

.hd-pfeil__linie {
  display: block;
  width: 34px;
  height: 1px;
  background: currentColor;
  transition: width .35s var(--hd-aus);
}

/* Die Spitze sitzt am Ende der Linie und wandert mit ihr. */
.hd-pfeil::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: -9px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

.hd-beitrag__mehr:hover .hd-pfeil__linie,
.hd-beitrag__mehr:focus-visible .hd-pfeil__linie { width: 54px; }

/* Ohne eigene Hover-Farbe gewinnt das globale a:hover (blau) aus style.css. */
.hd-beitrag__mehr:hover,
.hd-beitrag__mehr:focus-visible { color: var(--hd-rose-tief); }
.hd-beitrag__titel a:hover { color: var(--hd-tinte); }


@media (max-width: 991.98px) { .hd-beitraege { grid-template-columns: 1fr; gap: 30px; } }

/* Jobs-Band: Schaltflaeche links, wie im Bestand. */
.hd-section--rose .hd-abschnitt__fuss { text-align: left; }


/* ═══════════════════ Kacheln „Altersband" (Aesthetik nach Alter) ══════════
 * Werte der `.age-box`: 90 px flach, Radius 9 px, Zahl 4,8rem in Weiss,
 * Schraegverlauf hell → Salbei bei 42 %, dazwischen 2 px Rosé-Trenner.
 */
.hd-kacheln--alter { grid-template-columns: repeat(4, 1fr); gap: 30px; }

.hd-kacheln--alter .hd-kachel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90px;
  border-radius: var(--hd-radius-klein);
  background: linear-gradient(70deg,
    var(--hd-salbei-hell) 0%, var(--hd-salbei-hell) 42%,
    var(--hd-salbei) 42%, var(--hd-salbei) 100%);
  overflow: visible;
}

.hd-kacheln--alter .hd-kachel:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  right: -16px;
  width: 2px;
  height: 100%;
  background: var(--hd-rose);
}

.hd-kacheln--alter .hd-kachel__titel {
  color: #ffffff;
  font-size: 4.8rem;
  font-weight: 300;
  line-height: 1;
}

.hd-kacheln--alter .hd-kachel__text,
.hd-kacheln--alter .hd-kachel__mehr { display: none; }

@media (max-width: 991.98px) {
  .hd-kacheln--alter { grid-template-columns: repeat(2, 1fr); }
  .hd-kacheln--alter .hd-kachel:not(:last-child)::after { display: none; }
}

/* ═══════════════════════════ ProvenExpert-Zeile ═══════════════════════════ */
.hd-peblock { padding: clamp(34px, 4vw, 54px) 0; }

.hd-pe { display: flex; justify-content: center; }

.hd-pe .pe-richsnippets,
.hd-pe .pe-richsnippets * { color: var(--hd-text) !important; font-family: "Encode Sans", sans-serif !important; }

.hd-pe .pe-richsnippets a { text-decoration: none; }
.hd-pe .pe-richsnippets a:hover,
.hd-pe .pe-richsnippets a:focus-visible { text-decoration: underline; }


/* PE-Zeile: der volle Firmenname (358 px) bleibt aus — wie in der Hero-Pille. */
.hd-pe #pe_name { display: none !important; }
.hd-pe #pe_rating { display: inline-flex !important; align-items: center; gap: 10px; min-height: 44px; font-size: 1.05rem; }
.hd-pe #pe_stars { display: inline-flex; align-items: center; }
.hd-pe #pe_stars svg { width: 20px; height: 20px; }

/* ═══════════ Weiche Uebergaenge fuer die neuen Kacheln ════════════════════
 * Am 01.09.2026 nachgezogen: Knopf-, Panel- und Alter-Kacheln sowie der
 * Kartenknopf wechselten ihre Farbe ohne Uebergang — auf den
 * Behandlungsseiten laeuft jeder Hover ueber var(--hd-aus).
 */
.hd-kacheln--knopf .hd-kachel,
.hd-kacheln--panel .hd-kachel,
.hd-kacheln--alter .hd-kachel,
.btn.hd-karte__knopf {
  transition: background-color .3s var(--hd-aus), color .3s var(--hd-aus),
    transform .3s var(--hd-aus), box-shadow .3s var(--hd-aus);
}

.hd-logo { transition: transform .4s var(--hd-aus); }
a.hd-logo:hover { transform: translateY(-4px); }


/* Platzhalter, bis der Instagram-Feed verbunden ist. */
.hd-platzhalter {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  border: 2px dashed var(--hd-salbei);
  border-radius: var(--hd-radius-mittel);
  color: var(--hd-text);
  font-size: 1.15rem;
}


/* Ruhiges Seitenbild: kein Lauf, kein Beschnitt der Koepfe. Der Ausschnitt
   haelt das obere Drittel — dort sitzen bei Portraits die Gesichter. */
.hd-abschnitt--bildruhig .hd-abschnitt__bild {
  inset: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: none;
  object-position: center 22%;
}

/* Schaltflaeche auf Rosé: Weiss-Kontur wie der Jobs-Knopf des Bestands —
   der gefuellte Rosé-Knopf ist auf der Rosé-Flaeche unsichtbar. */
.hd-section--rose .btn.hd-btn {
  background: transparent;
  border-color: rgba(255, 255, 255, .9);
  color: #ffffff;
}

.hd-section--rose .btn.hd-btn:hover,
.hd-section--rose .btn.hd-btn:focus-visible {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--hd-rose-tief);
}

/*
 * Der Theme-Hover schiebt ueber `.btn::before` einen Rosa-Verlauf ein — er
 * liegt UEBER dem Hintergrund (z-index -1 im isolierten Kontext) und machte
 * die weisse Hover-Fuellung wieder rosa: rosé-tiefer Text auf Rosa, unlesbar.
 * Gemessen am 01.09.2026 am Karriere-Knopf. Auf Rosé bleibt der Verlauf aus.
 */
.hd-section--rose .btn.hd-btn::before { content: none; }


/* Vita-Knopf: derselbe ::before-Rosa-Verlauf wie beim Karriere- und
   Fussbereich-Knopf uebermalte die weisse Hover-Fuellung (01.09.2026). */
.hd-aerzte .btn.team-btn::before { content: none; }


/* Ruhige Beitragsuebersicht (Aktuelles-Seite): normaler Fluss, kein Lauf. */
.hd-beitraege--ruhig { margin-top: 40px; }

/* ═══════════════════════════ Einzelner Beitrag ════════════════════════════ */
/* Kopf und Text links, das Beitragsbild (3:2) rechts — es scrollt sticky mit. */
.hd-beitragsseite__spalten {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  grid-template-areas:
    "kopf bild"
    "text bild";
  column-gap: clamp(34px, 5vw, 80px);
  align-items: start;
}
.hd-beitragsseite__spalten--ohne-bild {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "kopf" "text";
}
.hd-beitragsseite__kopftext { grid-area: kopf; margin-bottom: clamp(30px, 4vw, 54px); }
.hd-beitragsseite__bild {
  grid-area: bild;
  position: sticky;
  top: 120px; /* unter der Kopfzeile bleiben */
  align-self: start;
}
.hd-beitragsseite__text { grid-area: text; }
@media (max-width: 900px) {
  .hd-beitragsseite__spalten {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "kopf" "bild" "text";
  }
  .hd-beitragsseite__bild { position: static; margin-bottom: 34px; }
}

.hd-beitragsseite__zurueck { margin: 0 0 26px; }
.hd-beitragsseite__zurueck a { color: var(--hd-rose-tief); text-decoration: none; }
.hd-beitragsseite__zurueck a:hover { text-decoration: underline; }

.hd-beitragsseite .hd-titel { text-transform: none; max-width: 22ch; }
.hd-beitragsseite .hd-beitrag__datum { margin-bottom: 0; }


.hd-beitragsseite__bild img {
  width: 100%;
  height: auto; /* schlaegt das height-Attribut, sonst gilt 3:2 nicht */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--hd-radius);
}

/* Lesebreite: die Spalte fuellt den Platz links neben dem Bild. */
.hd-beitragsseite__text { max-width: 900px; }

.hd-beitragsseite__text h2,
.hd-beitragsseite__text h3 {
  margin: 38px 0 10px;
  color: var(--hd-rose-tief);
  font-size: 1.25rem;
  font-weight: 400;
}

.hd-beitragsseite__text img { max-width: 100%; height: auto; border-radius: var(--hd-radius-klein); }

/*
 * Alte Kontakt-Bausteine im Beitragstext (Telefon-Absatz, Termin- und
 * Zurueck-Knoepfe im Design der bisherigen Website) ausblenden — der neue
 * Kontaktblock kommt aus der Vorlage. Der Text bleibt unangetastet.
 */
.hd-beitragsseite__text a.news,
.hd-beitragsseite__text p:has(> a.telefonlink),
.hd-beitragsseite__text p:has(> a.news),
.hd-beitragsseite__text p:has(+ a.news),
.hd-beitragsseite__text p:has(+ p > a.news) { display: none; }

/* Kontakt: Telefon + Online-Termin, mittig unter dem Text. */
.hd-beitragsseite__kontakt {
  margin: clamp(56px, 8vw, 100px) auto 0;
  max-width: 760px;
  text-align: center;
  background: var(--hd-flaeche-hell);
  border-radius: 50px 0 50px 0;
  padding: clamp(36px, 5vw, 58px) clamp(24px, 4vw, 64px);
}
.hd-beitragsseite__kontakt-titel {
  margin: 0 0 10px;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  font-weight: 400;
  color: var(--hd-tinte);
}
.hd-beitragsseite__kontakt-text { margin: 0 0 28px; }
.hd-beitragsseite__kontakt-wege {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 18px 34px;
}
.hd-beitragsseite__kontakt-telefon {
  font-size: 1.35rem;
  color: var(--hd-salbei-tief);
  text-decoration: none;
  transition: color .3s var(--hd-aus);
}
.hd-beitragsseite__kontakt-telefon:hover { color: var(--hd-rose-tief); }

/* Aeltere/neuere Meldung */
.hd-beitragsnav { padding: clamp(44px, 6vw, 72px) 0; }
.hd-beitragsnav__zeile {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.hd-beitragsnav__glied {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 30px;
  background: #fff;
  border-radius: 26px 0 26px 0;
  text-decoration: none;
  /* .6s wie die Karten der Behandlungsseiten — .3s wirkte hier ruckartig. */
  transition: transform .6s var(--hd-aus), box-shadow .6s var(--hd-aus), background-color .6s var(--hd-aus);
}
.hd-beitragsnav__glied:hover,
.hd-beitragsnav__glied:focus-visible { transform: translateY(-6px); box-shadow: 0 18px 38px rgba(43, 54, 55, .10); }
.hd-beitragsnav__glied:hover .hd-beitragsnav__titel { color: var(--hd-tinte); }
@media (prefers-reduced-motion: reduce) {
  .hd-beitragsnav__glied { transition: box-shadow .3s ease; }
  .hd-beitragsnav__glied:hover { transform: none; }
}
.hd-beitragsnav__glied--neuer { text-align: right; }
.hd-beitragsnav__label {
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hd-rose-tief);
}
.hd-beitragsnav__titel { color: var(--hd-tinte); line-height: 1.4; }


/* ProvenExpert auf der Beitragsseite: das Landing-Siegel braucht Breite,
   die schmale 430-px-Karte liess es seltsam umbrechen (01.09.2026). */
/* width:100% muss mit: die Untereinander-Regel setzt width:auto, der Kasten
   schrumpfte sonst auf Inhaltsbreite (677 statt 962 px, 01.09.2026 gemessen). */
.hd-beitragsseite__pe .hd-bewertung__karte--pe { width: 100%; max-width: 962px; margin-inline: auto; }
.hd-beitragsseite__pe .hd-pe { justify-content: center; }
.hd-beitragsseite__pe #pewl { width: 100%; max-width: 962px; }
/* Unter 992px legt das Widget selbst um; der Kasten darf dann nicht breiter sein. */
@media (max-width: 991.98px) {
  .hd-beitragsseite__pe .hd-bewertung__karte--pe { max-width: 100%; }
}

/* Seitenblaettern der Aktuelles-Uebersicht */
.hd-seitenblaettern { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: clamp(44px, 6vw, 70px); }
.hd-seitenblaettern .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  min-height: 46px;
  padding: 0 14px;
  border-radius: 9px;
  background: #fff;
  color: var(--hd-tinte);
  text-decoration: none;
  transition: background-color .3s var(--hd-aus), color .3s var(--hd-aus);
}
.hd-seitenblaettern .page-numbers:hover { background: var(--hd-rose-hell); }
.hd-seitenblaettern .page-numbers.current { background: var(--hd-salbei-tief); color: #fff; }
.hd-seitenblaettern .page-numbers.dots { background: transparent; }


/* ═════════════════════════════════ Suche ══════════════════════════════════ */
.hd-suche {
  width: min(720px, calc(100vw - 40px));
  padding: clamp(28px, 4vw, 46px);
  border: 0;
  border-radius: 50px 0 50px 0;
  background: #fff;
  color: var(--hd-text);
  position: relative;
}
.hd-suche::backdrop { background: rgba(43, 54, 55, .55); }

.hd-suche__label {
  display: block;
  margin-bottom: 14px;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  color: var(--hd-tinte);
}
.hd-suche__zeile { display: flex; flex-wrap: wrap; gap: 12px; }
.hd-suche__feld {
  flex: 1 1 260px;
  min-height: 52px;
  padding: 0 18px;
  border: 1px solid var(--hd-salbei-hell);
  border-radius: 9px;
  background: var(--hd-flaeche-hell);
  color: var(--hd-tinte);
  font-size: 1rem;
}
.hd-suche__feld:focus-visible { outline: 2px solid var(--hd-salbei-tief); outline-offset: 2px; }
.hd-suche__hinweis { margin: 12px 0 0; font-size: .9rem; }

.hd-suche__treffer { margin-top: 18px; display: grid; gap: 6px; }
.hd-suche__treffer-glied {
  display: grid;
  gap: 2px;
  padding: 12px 16px;
  border-radius: 9px;
  text-decoration: none;
  transition: background-color .3s var(--hd-aus);
}
.hd-suche__treffer-glied:hover,
.hd-suche__treffer-glied:focus-visible { background: var(--hd-flaeche-hell); }
.hd-suche__treffer-typ { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--hd-rose-tief); }
.hd-suche__treffer-titel { color: var(--hd-tinte); }
.hd-suche__leer { margin: 0; padding: 12px 16px; font-size: .95rem; }

.hd-suche__zu {
  position: absolute;
  top: 14px;
  right: 18px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--hd-text);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .3s var(--hd-aus);
}
.hd-suche__zu:hover { background: var(--hd-flaeche-hell); }

/* Ergebnisseite */
.hd-suchseite__form { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 44px; max-width: 640px; }
.hd-suchseite__gruppe { margin: 40px 0 14px; font-size: 1.2rem; font-weight: 400; color: var(--hd-rose-tief); }
.hd-suchseite__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hd-suchseite__liste li { padding: 16px 20px; border-radius: 9px; transition: background-color .3s var(--hd-aus); }
.hd-suchseite__liste li:hover { background: var(--hd-flaeche-hell); }
.hd-suchseite__liste a { display: block; color: var(--hd-tinte); text-decoration: none; }
.hd-suchseite__liste a:hover { color: var(--hd-rose-tief); }
.hd-suchseite__liste span { display: block; margin-top: 4px; font-size: .92rem; font-weight: 300; }

/* ═════════════════════════ Termin online buchen ═══════════════════════════ */
.hd-termine__boxen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: clamp(40px, 5vw, 64px);
}
.hd-termine__box {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(28px, 3.5vw, 42px);
  background: var(--hd-flaeche-hell);
  border-radius: 50px 0 50px 0;
}
.hd-termine__box p { margin: 0; flex: 1 1 auto; }
.hd-termine__box .btn { align-self: flex-start; }

/* Zwischenschritt vor der Buchung */
.hd-termine__fenster {
  width: min(620px, calc(100vw - 40px));
  padding: clamp(30px, 4vw, 48px);
  border: 0;
  border-radius: 50px 0 50px 0;
  background: #fff;
  color: var(--hd-text);
}
.hd-termine__fenster::backdrop { background: rgba(43, 54, 55, .55); }
.hd-termine__fenster-titel {
  margin: 0 0 14px;
  font-size: clamp(1.3rem, 2.4vw, 1.65rem);
  font-weight: 400;
  color: var(--hd-tinte);
}
.hd-termine__fenster-text { margin: 0 0 28px; }
.hd-termine__fenster-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.hd-termine__fenster-zu {
  border: 0;
  background: none;
  padding: 8px 4px;
  color: var(--hd-text);
  cursor: pointer;
  text-decoration: underline;
  transition: color .3s var(--hd-aus);
}
.hd-termine__fenster-zu:hover { color: var(--hd-rose-tief); }


/* ═══════════════════ Bewertungs-Pille im Kopfbild (leicht) ════════════════
 * Zieht Sterne und Anzahl aus dem Google-Widget, laedt aber selbst keines.
 */
.hd-pille--google {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 9px;
  background: rgba(43, 54, 55, .55);
  backdrop-filter: blur(6px);
  color: #fff;
}
.hd-pille__sterne { display: inline-flex; gap: 2px; color: #f5b544; }
.hd-pille__stern { width: 15px; height: 15px; fill: currentColor; }
.hd-pille__note {
  font-size: 1.05rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.hd-pille__text { font-size: .95rem; font-weight: 300; letter-spacing: .01em; }
.hd-pille__text::before { content: "· "; opacity: .6; }

/* Als Link: fuehrt zur Bewertungsleiste derselben Seite. */
a.hd-pille--link {
  text-decoration: none;
  cursor: pointer;
  transform-origin: left center;   /* waechst nach rechts, nicht aus dem Rand */
  transition: background-color .3s var(--hd-aus), transform .3s var(--hd-aus), color .3s var(--hd-aus);
}
/*
 * Beim Ueberfahren waechst die Pille leicht — die Farbe bleibt.
 * Ohne die eigene Farbangabe gewinnt hier das globale `a:hover` aus
 * style.css und faerbt Note und Text blau (01.09.2026 gemeldet).
 */
a.hd-pille--link:hover,
a.hd-pille--link:focus-visible {
  color: #fff;
  background: rgba(43, 54, 55, .55);
  transform: scale(1.045);
}
a.hd-pille--link:hover .hd-pille__note,
a.hd-pille--link:hover .hd-pille__text,
a.hd-pille--link:focus-visible .hd-pille__note,
a.hd-pille--link:focus-visible .hd-pille__text { color: #fff; }
a.hd-pille--link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  a.hd-pille--link:hover,
  a.hd-pille--link:focus-visible { transform: none; background: rgba(43, 54, 55, .72); }
}

/* Kleiner Winkel nach unten — sagt, dass es auf derselben Seite weitergeht. */
.hd-pille__pfeil {
  width: 8px;
  height: 8px;
  margin-left: 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .3s var(--hd-aus);
}
a.hd-pille--link:hover .hd-pille__pfeil { transform: rotate(45deg) translate(1px, 1px); }
@media (prefers-reduced-motion: reduce) {
  a.hd-pille--link:hover .hd-pille__pfeil { transform: rotate(45deg) translate(-1px, -1px); }
}

/* Häufig gesucht */
.hd-suche__schnell { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--hd-salbei-hell); }
.hd-suche__schnell-titel {
  margin: 0 0 12px;
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--hd-rose-tief);
}
.hd-suche__schnell-liste { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.hd-suche__schnell-liste a {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 9px;
  background: var(--hd-flaeche-hell);
  color: var(--hd-tinte);
  font-size: .92rem;
  text-decoration: none;
  transition: background-color .3s var(--hd-aus), color .3s var(--hd-aus);
}
.hd-suche__schnell-liste a:hover,
.hd-suche__schnell-liste a:focus-visible { background: var(--hd-rose-hell); color: var(--hd-tinte); }

/* ══════════════ Geteilter Abschnittskopf: Titel links, Text rechts ════════
 * Spart Hoehe — auf /aktuelles/ ruecken die Karten dadurch deutlich hoeher.
 */
.hd-abschnitt--kopfgeteilt > .container {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  /*
   * Zwei Zeilen, die zweite nimmt den Rest. Ohne diese Angabe verteilt die
   * hohe Textspalte (sie ueberspannt beide Zeilen) ihre Hoehe auf BEIDE —
   * die Unterzeile rutschte dadurch 171 px unter die Ueberschrift
   * (01.09.2026 gemessen).
   */
  grid-template-rows: auto 1fr;
  column-gap: clamp(34px, 5vw, 90px);
  align-items: start;
}
.hd-abschnitt--kopfgeteilt .hd-titel { grid-column: 1; margin-bottom: 10px; }
.hd-abschnitt--kopfgeteilt .hd-unterzeile { grid-column: 1; grid-row: 2; align-self: start; margin-bottom: 0; }
.hd-abschnitt--kopfgeteilt .hd-mass { grid-column: 2; grid-row: 1 / span 2; max-width: none; }
@media (max-width: 900px) {
  .hd-abschnitt--kopfgeteilt > .container { grid-template-columns: minmax(0, 1fr); }
  .hd-abschnitt--kopfgeteilt .hd-titel,
  .hd-abschnitt--kopfgeteilt .hd-unterzeile,
  .hd-abschnitt--kopfgeteilt .hd-mass { grid-column: 1; grid-row: auto; }
  .hd-abschnitt--kopfgeteilt .hd-unterzeile { margin-bottom: 18px; }
}


/* Bereits entfaltete Trustindex-Vorlage: bleibt fuer den Loader liegen,
   darf aber nichts anzeigen. <template> ist ohnehin unsichtbar — die Regel
   sichert den Fall ab, dass der Loader daraus ein normales Element macht. */
[data-hd-entfaltet] { display: none !important; }


/* ═══════════════ Buchungsfenster von medatixx (terminbuchung-plugin) ══════
 * Das Plugin legt sein Overlay als `position:absolute; top:0` mit
 * `z-index:17` an. Zwei Folgen, am 01.09.2026 gemessen:
 *
 * 1. Absolut zum Dokument heisst: es sitzt am SEITENANFANG. Wer unten auf
 *    „Ich bin bereits Patient" klickt, sieht nichts passieren — das Fenster
 *    liegt ausserhalb des Sichtfelds.
 * 2. z-index 17 liegt unter Kopfzeile (1030), Schnellwahl (1000) und
 *    Megamenue (9999); selbst sichtbar waere es teilweise verdeckt.
 *
 * Deshalb hier zum echten Modal gemacht. Die Werte des Plugins werden
 * ueberschrieben, sein Inhalt bleibt unberuehrt.
 */
.terminbuchung-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 10000 !important;
  /* !important auch hier: die Stile des Plugins werden zur Laufzeit
     nachgeladen und gewinnen sonst die Kaskade. */
  background: rgba(43, 54, 55, .62) !important;
}

.terminbuchung-overlay iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0;
  /* Der Rahmen selbst bleibt durchsichtig, damit die abgedunkelte Seite
     rund um das Buchungsfenster durchscheint. */
  background: transparent !important;
}

/* Sanft einblenden statt hart aufblitzen. */
@media (prefers-reduced-motion: no-preference) {
  .terminbuchung-overlay { animation: hd-buchung-auf .35s var(--hd-aus) both; }
  @keyframes hd-buchung-auf { from { opacity: 0; } to { opacity: 1; } }
}

/* Hintergrund still stellen, solange gebucht wird. */
body.hd-buchung-offen { overflow: hidden; }


/* ═══════════════════════════════ Anfahrtskarte ═══════════════════════════ */
.hd-anfahrtskarte {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: start;
}

/* Karte rechts (Standard) oder links — der Text nimmt die andere Spalte. */
.hd-anfahrtskarte--karte-rechts .hd-anfahrtskarte__daten  { grid-column: 1; }
.hd-anfahrtskarte--karte-rechts .hd-anfahrtskarte__rahmen { grid-column: 2; }
.hd-anfahrtskarte--karte-links  .hd-anfahrtskarte__daten  { grid-column: 2; }
.hd-anfahrtskarte--karte-links  .hd-anfahrtskarte__rahmen { grid-column: 1; grid-row: 1; }

/* Die Karte laeuft beim Lesen mit, solange die Textspalte laenger ist. */
.hd-anfahrtskarte__rahmen { position: sticky; top: 120px; }

@media (max-width: 900px) {
  .hd-anfahrtskarte { grid-template-columns: minmax(0, 1fr); }
  .hd-anfahrtskarte--karte-rechts .hd-anfahrtskarte__daten,
  .hd-anfahrtskarte--karte-rechts .hd-anfahrtskarte__rahmen,
  .hd-anfahrtskarte--karte-links  .hd-anfahrtskarte__daten,
  .hd-anfahrtskarte--karte-links  .hd-anfahrtskarte__rahmen { grid-column: 1; grid-row: auto; }
  .hd-anfahrtskarte__rahmen { position: static; }
}

/* Zwischenueberschriften in der Textspalte: wie im uebrigen Theme.
   H2, weil direkt unter der H1 keine Ebene uebersprungen werden darf. */
.hd-anfahrtskarte__daten h2,
.hd-anfahrtskarte__daten h3 {
  margin: 34px 0 10px;
  color: var(--hd-rose-tief);
  font-size: 1.2rem;
  font-weight: 400;
}
.hd-anfahrtskarte__daten ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.hd-anfahrtskarte__daten li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 7px;
}
.hd-anfahrtskarte__daten li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hd-salbei);
}

.hd-anfahrtskarte__rahmen {
  border-radius: 50px 0 50px 0;
  overflow: hidden;
  background: var(--hd-flaeche-hell);
}
.hd-anfahrtskarte__rahmen iframe {
  display: block;
  width: 100%;
  height: var(--hd-karte-hoehe, 460px);
  border: 0;
}

.hd-anfahrtskarte__daten p { margin: 0 0 10px; }
.hd-anfahrtskarte__daten p:last-child { margin-bottom: 0; }
.hd-anfahrtskarte__daten strong { font-weight: 500; color: var(--hd-tinte); }
.hd-anfahrtskarte__daten a { color: var(--hd-salbei-tief); text-decoration: none; }
.hd-anfahrtskarte__daten a:hover { color: var(--hd-rose-tief); }

/* ═══════════════════════════════════ Vita ═══════════════════════════════ */
.hd-vita { display: grid; gap: 0; max-width: 900px; }

.hd-vita__zeile {
  display: grid;
  grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 44px);
  padding: 22px 0;
  border-bottom: 1px solid var(--hd-linie);
}
.hd-vita__zeile:first-child { border-top: 1px solid var(--hd-linie); }

@media (max-width: 700px) {
  .hd-vita__zeile { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

.hd-vita__zeit {
  color: var(--hd-rose-tief);
  font-variant-numeric: tabular-nums;
  /* Lange deutsche Komposita brechen sonst ueber den Rand. */
  overflow-wrap: break-word;
}
.hd-vita__station { color: var(--hd-text); overflow-wrap: break-word; }


/* ProvenExpert-Sternzeile im Fussbereich: dezent, mittig, ohne Rahmen. */
.hd-pe-snippet {
  padding: 18px 20px 30px;
  text-align: center;
  background: var(--hd-flaeche-hell);
}
.hd-pe-snippet .pe-richsnippets,
.hd-pe-snippet .pe-richsnippets * {
  color: var(--hd-text) !important;
  font-family: "Encode Sans", sans-serif !important;
  font-size: .92rem !important;
}
.hd-pe-snippet .pe-richsnippets a { text-decoration: none; }
.hd-pe-snippet .pe-richsnippets a:hover,
.hd-pe-snippet .pe-richsnippets a:focus-visible { text-decoration: underline; }


/* Kopfbild ganz ohne Schleier — fuer Motive, die fuer sich stehen sollen
   (Teamfoto auf „Über uns", Wunsch vom 01.09.2026). Schrift bekommt dann
   einen weichen Schatten, damit sie auf hellen Stellen lesbar bleibt. */
.hd-hero--schleier-aus .hd-hero__schleier { display: none; }
.hd-hero--schleier-aus .hd-hero__titel,
.hd-hero--schleier-aus .hd-hero__unterzeile {
  text-shadow: 0 2px 18px rgba(43, 54, 55, .55);
}


/* ═══════════ Bildform „quadratisch": Porträt vollständig sichtbar ════════
 * Fuer die Vita-Seiten. Die Portraets sind 650x650 — in einem hohen Rahmen
 * wuerden oben und unten Teile wegfallen. Ein quadratischer Rahmen zeigt
 * sie ganz, und das Bild klebt nicht mehr am Bildschirmrand: die Polsterung
 * ist dieselbe wie auf den uebrigen Inhaltsseiten (1450er Raster, 30 px).
 */
.hd-abschnitt--bildform-quadrat {
  padding: clamp(48px, 5rem, 80px) max(30px, calc((100vw - 1450px) / 2 + 30px));
  align-items: center;
}

.hd-abschnitt--bildform-quadrat .hd-abschnitt__bildflaeche {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 0;
  border-radius: var(--hd-radius);
  overflow: hidden;
  margin-inline: 0;
}

.hd-abschnitt--bildform-quadrat .hd-abschnitt__spalte { padding: 0; }

/* Text buendig zur Bildkante statt in der Spalte zentriert. */
.hd-abschnitt--bildform-quadrat .hd-abschnitt__spalte-innen {
  max-width: 620px;
  margin-inline: 0;
  padding: 0 0 0 clamp(28px, 4vw, 64px);
}

@media (max-width: 991.98px) {
  .hd-abschnitt--bildform-quadrat .hd-abschnitt__spalte-innen {
    padding: 28px 0 0;
    max-width: none;
  }
}


/* ═══════════════ Prüfhinweis (rot) für noch ungeprüfte Seiten ═══════════ */
.hd-pruefhinweis {
  margin: 0 0 34px;
  padding: clamp(18px, 2.4vw, 26px) clamp(20px, 3vw, 32px);
  border-left: 4px solid #b3261e;
  border-radius: 0 26px 0 26px;
  background: #fdeceb;
  color: #7a1c16;
}
.hd-pruefhinweis strong { font-weight: 500; }
.hd-pruefhinweis a { color: #7a1c16; }


/* ═══════ Ärztlicher Prüfvermerk – ruhige Notiz am Ende einer Seite ══════ */
/*
 * Kein Warnhinweis: Die Zeile sagt, wer den Inhalt fachlich geprüft hat.
 * Farben ausschliesslich aus der Palette – kein eigener Wert.
 */
.hd-pruefvermerk {
  margin: 0 auto;
  max-width: 820px;
  padding: clamp(14px, 1.8vw, 20px) clamp(18px, 2.6vw, 28px);
  border-left: 3px solid var(--hd-salbei);
  border-radius: 0 9px 0 9px;
  background: var(--hd-flaeche-hell);
  color: var(--hd-text);
  font-size: .92rem;
  line-height: 1.6;
}
.hd-pruefvermerk strong { font-weight: 600; color: var(--hd-tinte); }





/* ════════════════════ Mobile Korrekturen (01.09.2026) ═══════════════════ */
@media (max-width: 991.98px) {

  /*
   * Leistungszeilen: Bild ZUERST, dann Überschrift, Text, Schaltfläche.
   * Vorher stand das Bild am Ende der Zeile — die Reihenfolge las sich
   * dadurch verkehrt herum.
   */
  .hd-abschnitt--seitenbild { display: flex; flex-direction: column; }
  .hd-abschnitt--seitenbild .hd-abschnitt__bildflaeche,
  .hd-abschnitt--bild-links .hd-abschnitt__bildflaeche { order: -1; }
  .hd-abschnitt--seitenbild .hd-abschnitt__spalte { order: 0; }

  /*
   * Gesichter nicht anschneiden: bei hohen Ausschnitten sitzen Köpfe im
   * oberen Drittel. Betrifft u. a. das Karriere-Bild, dessen Köpfe mobil
   * abgeschnitten waren.
   */
  .hd-abschnitt__bild { object-position: center 22%; }
}

@media (max-width: 767.98px) {

  /*
   * Kopfbild: Bild oben, Text darunter.
   *
   * Über dem Bild war die Schrift auf dem Telefon nicht zu halten — der
   * Ausschnitt zeigte nur zwei der sechs Personen, und die Überschrift lief
   * in die Schnellwahlleiste. Jetzt steht das Bild in vollem Format darüber
   * und der Text auf ruhigem Grund darunter.
   */
  .hd-hero { display: flex; flex-direction: column; }

  .hd-hero__bildflaeche {
    position: relative;
    inset: auto;
    order: -1;
    width: 100%;
    aspect-ratio: 4 / 3;
  }
  .hd-hero__bild { object-position: center 28%; }

  .hd-hero__schleier { display: none; }

  /*
   * Mindesthöhen der Hero-Varianten aufheben — sie sind für das Bild
   * gedacht, das mobil daneben steht. Ohne dies blieb unter dem Bild eine
   * 500 px hohe leere Fläche (gemessen 01.09.2026).
   */
  .hd-hero__inhalt,
  .hd-hero--gross .hd-hero__inhalt,
  .hd-hero--mittel .hd-hero__inhalt,
  .hd-hero--schleier-sanft .hd-hero__inhalt,
  .hd-hero--schleier-stark .hd-hero__inhalt,
  .hd-hero--schleier-aus .hd-hero__inhalt {
    position: relative;
    min-height: 0;
    /* Seitliche Polsterung wie der Container der uebrigen Abschnitte (30 px);
       ohne sie klebte die Ueberschrift am Displayrand (02.09.2026 gemessen). */
    padding: 30px 30px 36px;
    background: var(--hd-flaeche-hell);
  }
  .hd-hero__titel,
  .hd-hero__unterzeile { color: var(--hd-tinte); text-shadow: none; }
  .hd-hero__unterzeile { color: var(--hd-text); }
  .hd-hero__bewertung .hd-pille--google {
    background: rgba(43, 54, 55, .92);
  }

  /* CTA-Bild weiter nach links, damit beide Personen im Bild bleiben. */
  .hd-cta__bild { object-position: 32% center !important; }
}


/* ══════ Ablauf auf dem Telefon: Nummer und Verbindung (02.09.2026) ══════
 *
 * Am Desktop trägt die linke Spalte die Fortschrittsanzeige — große Ziffer,
 * Schrittname und eine Linie, die mitwächst. Mobil ist diese Spalte
 * ausgeblendet (`.hd-stepper__stand { display: none }`), und übrig blieben
 * fünf gleich aussehende Kästen mit einem 13-px-Punkt. Weder die Reihenfolge
 * noch der Zusammenhang war erkennbar.
 *
 * Ersatz an Ort und Stelle: der Punkt wird zur nummerierten Scheibe, und
 * eine Linie verbindet die Schritte über die Lücke hinweg.
 */
@media (max-width: 991.98px) {

  .hd-schritteblock--stepper .hd-stepper__liste {
    counter-reset: hd-stepper;
    position: relative;
  }

  .hd-schritteblock--stepper .hd-schritt {
    counter-increment: hd-stepper;
    padding-left: 66px;
  }

  .hd-schritteblock--stepper .hd-schritt__punkt {
    left: 20px;
    top: 24px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 2px solid var(--hd-linie);
    transform: none;
  }

  .hd-schritteblock--stepper .hd-schritt__punkt::before {
    content: counter(hd-stepper);
    color: var(--hd-text);
    font-size: .85rem;
    font-weight: 500;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  .hd-schritteblock--stepper .hd-schritt.ist-aktiv .hd-schritt__punkt {
    background: var(--hd-rose-tief);
    border-color: var(--hd-rose-tief);
    transform: none;
  }

  .hd-schritteblock--stepper .hd-schritt.ist-aktiv .hd-schritt__punkt::before {
    color: #ffffff;
  }

  /*
   * Die Verbindung. Sie beginnt unter der Scheibe und reicht 22 px in die
   * Lücke — genau der Abstand, den die Liste mobil zwischen den Schritten
   * hält. Beim letzten Schritt entfällt sie, sonst liefe sie ins Leere.
   */
  .hd-schritteblock--stepper .hd-schritt::after {
    content: "";
    position: absolute;
    left: 33px;
    top: 58px;
    bottom: -22px;
    width: 2px;
    background: var(--hd-linie);
  }

  .hd-schritteblock--stepper .hd-schritt:last-of-type::after,
  .hd-schritteblock--stepper .hd-schritt:nth-last-child(2)::after {
    content: none;
  }

  .hd-stepper__abschluss { padding-left: 66px; }
}

/* ═══════════════════ Vergleichstabelle (02.09.2026) ═════════════════════
 *
 * Ein echtes <table>, damit Screenreader und Antwortmaschinen die Zuordnung
 * von Spalte und Wert lesen. Der Rahmen scrollt für sich, damit die SEITE
 * auf schmalen Bildschirmen nicht waagerecht scrollt — der Hausstandard
 * verlangt das, und eine vierspaltige Tabelle passt auf 375 px sonst nie.
 */
.hd-vergleich__rahmen {
  margin-top: 26px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-radius: var(--hd-radius-klein, 9px);
}

.hd-vergleich__rahmen:focus-visible {
  outline: 2px solid var(--hd-salbei-tief, #5b7a7e);
  outline-offset: 2px;
}

.hd-vergleich {
  width: 100%;
  min-width: 640px;          /* darunter wird jede Spalte unlesbar schmal */
  border-collapse: collapse;
  font-size: 1rem;
  text-align: left;
}

.hd-vergleich thead th {
  padding: 16px 18px;
  background: var(--hd-salbei-hell, #c5d1d1);
  color: var(--hd-tinte, #2b3637);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .03em;
  vertical-align: bottom;
}

.hd-vergleich thead th:first-child { border-radius: 9px 0 0 0; }
.hd-vergleich thead th:last-child  { border-radius: 0 9px 0 0; }

.hd-vergleich tbody th,
.hd-vergleich tbody td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--hd-linie);
  color: var(--hd-text, #65686a);
  font-weight: 300;
  line-height: 1.55;
  vertical-align: top;
}

/* Die Zeilenüberschrift trägt die Orientierung — etwas kräftiger. */
.hd-vergleich tbody th {
  color: var(--hd-tinte, #2b3637);
  font-weight: 500;
}

.hd-vergleich tbody tr:nth-child(even) th,
.hd-vergleich tbody tr:nth-child(even) td {
  background: var(--hd-flaeche-hell, #edf1f0);
}

.hd-section--hell .hd-vergleich tbody tr:nth-child(even) th,
.hd-section--hell .hd-vergleich tbody tr:nth-child(even) td {
  background: #ffffff;
}

.hd-vergleich tbody tr:last-child th,
.hd-vergleich tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 767.98px) {
  .hd-vergleich { font-size: .95rem; }
  .hd-vergleich thead th,
  .hd-vergleich tbody th,
  .hd-vergleich tbody td { padding: 13px 14px; }
}


/* ═══════════════════ Seite nicht gefunden (404) ═════════════════════════ */
/*
 * Die Vorlage war leer; jede tote Adresse lieferte eine weisse Seite.
 * Farben ausschliesslich aus der Palette — kein eigener Wert.
 */
.hd-vierundvier__kopf {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
}
@media (min-width: 992px) {
  .hd-vierundvier__kopf { grid-template-columns: 1.05fr .95fr; }
}
.hd-vierundvier__kicker {
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hd-rose);
  margin: 0 0 10px;
  font-weight: 600;
}
.hd-vierundvier__lead {
  font-size: 1.12rem;
  color: var(--hd-tinte);
  margin-bottom: 1em;
}
.hd-vierundvier__form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.hd-vierundvier__form .hd-suche__feld { flex: 1 1 240px; min-width: 0; }

.hd-vierundvier__bild {
  border-radius: 50px 0 50px 0;
  overflow: hidden;
  aspect-ratio: 3 / 2;
}
.hd-vierundvier__foto { width: 100%; height: 100%; object-fit: cover; display: block; }

.hd-vierundvier__liste { margin-top: 18px; }

.hd-vierundvier__karten {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 32px);
}
@media (min-width: 768px)  { .hd-vierundvier__karten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .hd-vierundvier__karten { grid-template-columns: repeat(3, 1fr); } }

.hd-vierundvier__karte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: clamp(24px, 3vw, 34px);
  background: var(--hd-flaeche-hell);
  border-radius: 26px 0 26px 0;
}
.hd-vierundvier__karte h2 {
  font-size: 1.22rem;
  line-height: 1.3;
  margin: 0;
  color: var(--hd-tinte);
  /* Lange deutsche Komposita sonst ueber den Rand — Hausregel. */
  overflow-wrap: break-word;
}
.hd-vierundvier__karte p { margin: 0; flex: 1 1 auto; }
.hd-vierundvier__karte .hd-btn { margin-top: 6px; }


/* ═══ Umbruch langer Woerter ══════════════════════════════════════════
   Hausregel: Lange deutsche Komposita und nackte Adressen sprengen sonst
   die Spalte. „Berufshaftpflichtversicherung" braucht 397 px und passt in
   keine 311-px-Spalte; eine AWMF-Adresse mit 52 Zeichen erst recht nicht.
   break-word greift nur im Notfall und laesst das uebrige Schriftbild
   unangetastet - break-all wuerde jede Zeile umbrechen, deshalb nicht.
   Gemessen am 03.09.2026 auf den Seiten 799, 803 und 806.              */
.hd-lesespalte p, .hd-lesespalte li, .hd-lesespalte td, .hd-lesespalte th,
.hd-kachel p, .hd-kachel li, .hd-kachel h3,
.hd-faq__frage, .hd-faq__antwort p, .hd-faq__antwort li,
.hd-quellen__text li, .hd-quellen__text p,
.hd-vergleich td, .hd-vergleich th, .hd-merkmale dt, .hd-merkmale dd,
.hd-vorteil p, .hd-vorteil h3, .hd-schritt p {
  overflow-wrap: break-word;
}


/* ═══ Verweislisten auf Uebersichtsseiten ════════════════════════════
   Eine Uebersichtsseite verteilt – ihre Listen sind Verweise, keine
   Aufzaehlung. Ziele, die es noch nicht gibt, stehen sichtbar als
   Platzhalter da, damit beim Durchsehen auffaellt, was fehlt.       */
.hd-verweisliste { list-style: none; margin: 0 0 18px; padding: 0; }
.hd-verweisliste li {
  /* 11px oben und unten ergeben mit der Zeilenhoehe 44 px Klickflaeche –
     Hausstandard. Mit 7px waren es gemessene 36 px, mit 11px 43,99 px –
     die Rundung taeuschte 44 vor (gemessen 03.09.2026).                */
  padding: 12px 0;
  border-bottom: 1px solid rgba(146, 168, 171, .28);
  font-size: .97rem;
  line-height: 1.4;
  overflow-wrap: break-word;
}
.hd-verweisliste li:last-child { border-bottom: 0; }
.hd-verweisliste a {
  color: var(--hd-tinte);
  text-decoration: none;
  border-bottom: 1px solid rgba(146, 168, 171, .6);
  transition: border-color .18s ease, color .18s ease;
}
.hd-verweisliste a:hover,
.hd-verweisliste a:focus-visible { color: var(--hd-salbei-tief); border-bottom-color: currentColor; }
.hd-verweisliste .hd-folgt {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 9px;
  background: rgba(191, 150, 157, .16);
  color: var(--hd-rose-tief);
  font-size: .74rem;
  letter-spacing: .02em;
  white-space: nowrap;
}
.hd-verweisliste__titel {
  margin: 0 0 6px;
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hd-salbei-tief);
}


/* ═══ Trustindex-Tooltips brechen die Seitenbreite ════════════════════
   Gemessen am 03.09.2026 bei 375 px: die Sprechblasen „Trustindex
   ueberprueft, ob die Originalquelle …" stehen 86 px ueber den rechten
   Rand hinaus und erzeugen auf JEDER Seite mit dem Bewertungsblock einen
   waagerechten Scrollbalken. Das Widget bringt sie selbst mit; wir
   begrenzen sie, statt sie zu entfernen — sie sollen beim Ueberfahren
   weiterhin erscheinen, nur innerhalb der Seite.                       */
.hd-bewertungen { overflow-x: clip; }
.ti-verified-tooltip { max-width: min(175px, 70vw); }
@media (max-width: 640px) {
  .ti-verified-tooltip { display: none; }
}

/* ═══ Zweispaltige Verweisliste (Uebersichtsseiten) ══════════════════════
   Die Dermatologie-Uebersicht fuehrt 14 Leistungen; einspaltig ergibt das
   eine Kolonne, an der man vorbeiliest. Mehrspaltig erst ab 720px – darunter
   ist eine Spalte klar besser lesbar.
   Eintraege ohne 2026-Seite stehen bewusst ohne Link da: WordPress raet bei
   unbekannten Adressen ein Ziel (redirect_guess_404_permalink) und antwortet
   mit HTTP 200, sodass keine Linkpruefung anschlaegt. Gemessen am 04.09.2026:
   /laserbehandlungen/nagelpilz/ und .../dauerhafte-haarentfernung/ landeten
   beide auf demselben fremden Blogbeitrag. */
@media (min-width: 720px) {
  .hd-verweisliste--zwei { columns: 2; column-gap: 44px; }
  .hd-verweisliste--zwei li { break-inside: avoid; }
}
.hd-verweisliste__offen { color: var(--hd-text); }

/* ═══ Verschachtelter Container in der Lesespalte ════════════════════════
   Ein hd/abschnitt in einem hd/lesebereich bringt seinen eigenen .container
   mit — dessen Polsterung legt sich auf die der aeusseren Huelle, und der
   Text verliert auf beiden Seiten noch einmal die volle Container-Polsterung.

   Gemessen am 07.09.2026, /dermatologie/ gegen die Startseite:
     mobil (375 px Body):  Text 271 px statt 323 px, Rand 52 statt 26
     Schreibtisch (1440):  Einzug links 60 px statt 30
   Betroffen sind 57 Seiten — praktisch jede Inhaltsseite mit H1-Einstieg.
   Derselbe Fehler war zuvor auf der Botox-Seite mobil aufgefallen.

   Die aeussere Huelle setzt die Polsterung bereits; der innere Container
   darf sie nicht wiederholen. Die Zeilenlaenge bleibt begrenzt — sie kommt
   aus .hd-lese__spalte .hd-mass (70ch), nicht aus dem Container. */
.hd-lese__spalte .hd-section > .container {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}


/* ═══════════════════════════════ Lesebereich mit vier Bubbles ══════════════
 * Botox hatte als einzige Seite den einen grossen Deko-Kreis, alle
 * Uebersichtsseiten die vier Bubbles. 08.09.2026 vereinheitlicht: Der
 * Lesebereich kann beides, gesteuert ueber den Schalter im Block.
 *
 * Alle vier sind von OBEN verankert — wie in .hd-abschnitt--kreise. Ein
 * Lesebereich ist mehrere Bildschirme hoch; von unten verankerte Kreise
 * saessen sonst am Ende des Textes statt oben bei der Ueberschrift.
 */
.hd-lese--kreise .hd-lese__deko::after { content: none; }
.hd-lese--kreise .hd-kreis--1 { top: 20px;  right: 110px; }
.hd-lese--kreise .hd-kreis--2 { top: 60px;  right: -100px; }
.hd-lese--kreise .hd-kreis--3 { top: 213px; right: -25px; bottom: auto; }
.hd-lese--kreise .hd-kreis--4 { top: 493px; right: 55px;  bottom: auto; }

@media (max-width: 991.98px) {
  /* Auf schmalen Schirmen liegt das Verzeichnis ueber dem Text (order: -1);
   * die grossen Kreise wuerden dort mitten hineinragen. */
  .hd-lese--kreise .hd-kreis--2,
  .hd-lese--kreise .hd-kreis--3 { display: none; }
  .hd-lese--kreise .hd-kreis--1 { width: 90px; height: 90px; right: -20px; }
  .hd-lese--kreise .hd-kreis--4 { width: 54px; height: 54px; top: 150px; right: 40px; }
}


/* ═══════════════════════ Vergleichstabelle auf schmalen Schirmen ═══════════
 * Vier Spalten mit ganzen Saetzen brauchen mindestens 640 px. Bis zum
 * 08.09.2026 scrollte die Tabelle deshalb auf dem Telefon waagerecht in
 * ihrem Kasten — unbrauchbar: Man sieht nie Zeilenueberschrift und Wert
 * gleichzeitig und verliert beim Scrollen die Zuordnung.
 *
 * Jetzt wird jede Zeile zu einer Karte, jede Zelle zu einem Paar aus
 * Spaltenname und Wert. Der Spaltenname kommt aus data-spalte, das der
 * Renderer setzt. Die Tabelle bleibt im Markup eine Tabelle mit th/scope —
 * Screenreader und Antwortmaschinen lesen sie unveraendert.
 */
@media (max-width: 767.98px) {
  .hd-vergleich__rahmen { overflow-x: visible; }
  .hd-vergleich { min-width: 0; width: 100%; display: block; }
  .hd-vergleich thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hd-vergleich tbody { display: block; }

  .hd-vergleich tbody tr {
    display: block;
    margin-bottom: 16px;
    border: 1px solid var(--hd-linie);
    border-radius: var(--hd-radius-klein, 9px);
    overflow: hidden;
    background: #ffffff;
  }
  .hd-vergleich tbody tr:nth-child(even) th,
  .hd-vergleich tbody tr:nth-child(even) td { background: transparent; }

  /* Die Zeilenueberschrift wird zum Kartenkopf. */
  .hd-vergleich tbody th {
    display: block;
    padding: 13px 16px;
    background: var(--hd-salbei-hell, #c5d1d1);
    color: var(--hd-tinte, #2b3637);
    font-size: 1.02rem;
    font-weight: 500;
    border-bottom: 0;
  }
  .hd-vergleich tbody th::before { content: none; }

  .hd-vergleich tbody td {
    display: block;
    padding: 12px 16px;
    border-bottom: 1px solid var(--hd-linie);
  }
  .hd-vergleich tbody tr td:last-child { border-bottom: 0; }

  .hd-vergleich tbody td::before {
    content: attr(data-spalte);
    display: block;
    margin-bottom: 3px;
    color: var(--hd-salbei-tief, #5b7a7e);
    font-size: .76rem;
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
  }
}

/* =========================================================== Offene Stellen
 * 20.09.2026 — Block hd/stellen (inc/stellen.php). Karten untereinander in der
 * Lesebreite; Aufgaben/Profil klappen mit der FAQ-Optik auf. Nur var()-Werte.
 */
.hd-stellen { display: grid; gap: 24px; max-width: 900px; }
.hd-stelle {
  background: #fff;
  border: 1px solid var(--hd-linie);
  border-radius: var(--hd-radius);
  padding: clamp(24px, 3vw, 36px);
}
.hd-section--weiss .hd-stelle { background: var(--hd-flaeche-hell); }
.hd-stelle__titel { margin: 0 0 6px; font-size: 1.35rem; font-weight: 400; color: var(--hd-text); }
.hd-stelle__meta { margin: 0 0 16px; color: var(--hd-text-leise); font-size: .95rem; letter-spacing: .02em; }
.hd-stelle__text p:last-child { margin-bottom: 0; }
.hd-stelle__details { margin-top: 12px; }
.hd-stelle__details .hd-faq__frage { padding-top: 16px; padding-bottom: 16px; font-size: 1.05rem; }
.hd-stelle__listentitel { margin: 16px 0 6px; font-size: 1rem; font-weight: 600; color: var(--hd-text); }
.hd-stelle__liste { margin: 0 0 8px; padding-left: 1.2em; }
.hd-stelle__liste li { margin: 4px 0; }
.hd-stelle__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 22px; }
.hd-stelle__mail { color: var(--hd-text-leise); font-size: .95rem; overflow-wrap: anywhere; }
.hd-stellen__leer { color: var(--hd-text-leise); }

/* ═══ Haftende Kopfzeile unter der WordPress-Adminleiste ═══════════════════
 * Gemessen 20.09.2026: beim Scrollen wird die Kopfzeile kompakt (110 → 91 px)
 * und haftet mit top: 0 — bei angemeldeten Nutzern liegt sie damit unter der
 * 32 px hohen Adminleiste, „Termin buchen“ und die Suche sind oben
 * abgeschnitten. Besucher ohne Anmeldung sind nicht betroffen.
 */
body.admin-bar nav.main-navbar.nav-fixed { top: 32px; }
@media (max-width: 782px) { body.admin-bar nav.main-navbar.nav-fixed { top: 46px; } }

/* ═══════════════════════════════════ Abschnitt: Bild bleibt stehen ════════
 * Für die Arztseiten (22.09.2026): das Porträt bleibt im Blick, während der
 * Text daneben weiterläuft.
 *
 * Zwei Fallen, beide hier gelöst:
 *   `overflow: hidden` auf dem Abschnitt macht ihn zum Scroll-Container.
 *   Ein `position: sticky` darin klebt dann an einer Box, die nie scrollt —
 *   die Regel greift, sichtbar passiert nichts. `overflow: clip` schneidet
 *   genauso ab, ohne Scroll-Container zu sein.
 *   Ein Grid-Kind mit `align-self: stretch` ist so hoch wie die Zeile; dann
 *   hat sticky keinen Weg. Deshalb `align-items: start` und eine feste Höhe.
 */
.hd-abschnitt--bildhaftet {
  overflow: clip;
  align-items: start;
}

.hd-abschnitt--bildhaftet .hd-abschnitt__bildflaeche {
  position: sticky;
  top: clamp(96px, 11vh, 128px);
  align-self: start;
  height: min(74vh, 660px);
}

/*
 * Beim quadratischen Bild bestimmt das Seitenverhältnis die Höhe. Eine feste
 * Höhe macht dort die BREITE (660 px statt der 524 px der Spalte) – am
 * 22.09.2026 lief das Porträt dadurch 48 px über den Text.
 */
.hd-abschnitt--bildhaftet.hd-abschnitt--bildform-quadrat .hd-abschnitt__bildflaeche {
  width: 100%;
  height: auto;
  max-height: min(74vh, 660px);
}

@media (max-width: 991.98px) {
  .hd-abschnitt--bildhaftet .hd-abschnitt__bildflaeche {
    position: static;
    height: auto;
    min-height: 260px;
  }
}

/* Werdegang innerhalb eines Textabschnitts: nur die Zeitleiste, kein Kasten. */
.hd-vita--eingebettet { max-width: none; }

.hd-vita__titel { margin-top: clamp(36px, 4vw, 56px); }

/* ── Instagram-Feed (Spotlight): Folgen-Knopf in Praxisfarbe — 23.09.2026 ──
   Spotlight schreibt Farbe und Radius als Inline-Stil an den Knopf, deshalb
   !important. Farben nur als Variablen, keine zweite Wahrheit im Plugin.
   Wisch beim Überfahren wie .btn in style.css (rose-tief → rose). */
.spotlight-instagram-feed .FollowButton {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--hd-rose) !important;
	color: #ffffff !important;
	border-radius: 9px !important;
	font-family: inherit !important;
	font-weight: 300 !important;
	cursor: pointer;
}
.spotlight-instagram-feed .FollowButton::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, var(--hd-rose-tief) 0%, var(--hd-rose-tief) 50%, var(--hd-rose) 100%);
	transform: translateX(-101%);
	transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.spotlight-instagram-feed .DesignedButton__link:hover .FollowButton::before,
.spotlight-instagram-feed .DesignedButton__link:focus-visible .FollowButton::before {
	transform: translateX(0);
}
.spotlight-instagram-feed .DesignedButton__link:focus-visible {
	outline: 2px solid var(--hd-rose-tief);
	outline-offset: 3px;
	border-radius: 9px;
}
@media (prefers-reduced-motion: reduce) {
	.spotlight-instagram-feed .FollowButton::before { transition: none; }
}

/* 30.09.2026 — Kacheln mit Kopfbalken auf hellgrauem Abschnitt weiss fuellen, wie schon
 * Ablauf-Kaesten, Vergleichszeilen und Videokasten. Vorher hatte der Kasten dieselbe Farbe
 * wie der Abschnitt und war unter dem Balken nicht zu sehen (Christian: „muss weisser
 * Hintergrund“, Couperose „Was dazugehoert“). */
.hd-section--hell .hd-kacheln--kopf .hd-kachel { background: #ffffff; }

/* 30.09.2026 — Vorteils-Kaesten auf hellgrauem Abschnitt ebenfalls weiss, gleiche Umkehrung
 * wie bei den Kacheln oben. Vorher waren Kasten und Abschnitt gleich hell (29 Seiten,
 * Christian: „Vorteile auf einen Blick ist weiss hinterlegt auch gut“). */
.hd-section--hell .hd-vorteil { background: #ffffff; }