/*
 * 04-abschnitte.css — die Abschnittsmuster aus 02-abschnittstabellen.md.
 *
 * Zwei Haltepunkte, keine weiteren: 1200px und 900px.
 * Keine Literalwerte — alles aus 00-tokens.css.
 */

/* === Ein Element zu viel ================================================ */

/*
 * core/group rendert je nach Layout-Art einen zusätzlichen
 * .wp-block-group__inner-container. Damit sieht ein Raster nur EIN Kind
 * statt der echten Elemente — der Zweispalter stapelt, das Kachelraster
 * wird einspaltig.
 *
 * display:contents nimmt diesen Zwischenbehälter aus dem Layout heraus,
 * ohne ihn aus dem DOM zu entfernen. Die echten Kinder werden dadurch
 * wieder direkte Rasterelemente — im Frontend wie im Editor, egal ob
 * WordPress den Behälter erzeugt oder nicht.
 *
 * Bewusst eng gefasst: nur unter den eigenen Rasterklassen, damit sonstige
 * Gruppen unberührt bleiben.
 */
.db-zweispalt        > .wp-block-group__inner-container,
.db-kachelraster     > .wp-block-group__inner-container,
.db-personenraster   > .wp-block-group__inner-container,
.db-gruenraster      > .wp-block-group__inner-container,
.db-kosten__raster   > .wp-block-group__inner-container,
.db-galerie          > .wp-block-group__inner-container,
.db-abschluss__block > .wp-block-group__inner-container,
.db-faq__liste       > .wp-block-group__inner-container {
  display: contents;
}

/* === Raster ============================================================= */

.db-zweispalt {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--db-spalte-zweispalt), 100%), 1fr));
  gap: var(--db-gap-zweispalt);
  align-items: center;
}
.db-zweispalt--text {
  grid-template-columns: repeat(auto-fit, minmax(min(var(--db-spalte-text), 100%), 1fr));
  align-items: start;
}
.db-kachelraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--db-spalte-kachel), 100%), 1fr));
  gap: var(--db-gap-kachel);
}
.db-personenraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--db-spalte-person), 100%), 1fr));
  gap: var(--db-gap-kachel);
}
.db-gruenraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--db-spalte-gruen), 100%), 1fr));
  gap: var(--db-gap-gruen);
}

/* === Kopfbild Startseite ================================================ */

.db-hero-start {
  background: var(--db-seitenflaeche);
  padding: clamp(4px, 0.8vw, 12px) 0 0;
}
.db-hero-start__panel {
  background: var(--db-sand-hell);
  padding: clamp(28px, 3.4vw, 54px);
  /* Bewusst kantig — hier gilt kein Kartenradius. */
  border-radius: var(--db-r-kantig);
}
.db-hero-start__raster {
  display: grid;
  gap: var(--db-gap-zweispalt);
  align-items: center;
}
/* 1fr zu 1,15fr — die Bildspalte ist die breitere.
   Seit dem 27.08.2026, zusammen mit dem quadratischen Kopfbild. Nur das
   Verhaeltnis zu aendern haette das Bild NIEDRIGER gemacht statt groesser:
   Die Spaltenbreite gibt die Breite vor, das Seitenverhaeltnis nur die Hoehe.
   Davor: 1,05fr zu 0,95fr. */
@media (min-width: 900px) {
  .db-hero-start__raster { grid-template-columns: 1fr 1.15fr; }
}
.db-hero-start__text > * + * { margin-top: var(--db-h-zu-text); }
.db-hero-start__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.db-herobild { position: relative; }
/* Kopfbildmasse — gelten auf Startseite UND Unterseiten gleichermassen.
 *
 * Seit dem 27.08.2026 quadratisch statt 3/4. Vorbild zahnboutique.ch, dort
 * gemessen 590 x 606 (Verhaeltnis 0,974). Ein quadratisches Bild gibt dem
 * Motiv spuerbar mehr Flaeche als ein Hochformat.
 *
 * ⚠️ KEINE Breite setzen. Mit fester Breite kann `aspect-ratio` die Breite
 * nicht mehr aus der gedeckelten Hoehe ableiten; `max-height` schneidet dann
 * nur die Hoehe ab und das Verhaeltnis kippt.
 *
 * ⚠️ KEIN min-height. Frueher standen hier 360px — beim Hochformat harmlos,
 * weil 279 x 4/3 = 372 ohnehin groesser ist. Beim Quadrat rechnet
 * `aspect-ratio` eine erzwungene Hoehe von 360px in 360px BREITE zurueck.
 * Gemessen bei 375px: Das Bild ragt dann 53px ueber das Panel und 33px ueber
 * den Fensterrand hinaus — OHNE dass eine Ueberlaufpruefung anschlaegt, denn
 * `.db-rahmen` traegt `overflow-x: clip` und schneidet es stillschweigend ab.
 */
.db-herobild__rahmen {
  position: relative;
  aspect-ratio: 1 / 1;
  /* 100dvh mit 100vh-Rückfall: ältere Browser kennen dvh nicht. */
  max-height: min(calc(100vh - 216px), 700px);
  max-height: min(calc(100dvh - 216px), 700px);
  box-shadow: var(--db-schatten-kopfbild);
}
.db-herobild__ebene {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  /* Kein background-attachment:fixed — das funktioniert auf iOS nicht. */
  transition: opacity var(--db-t-motiv) var(--db-kurve-bild);
}
.db-herobild__ebene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--db-hero-verlauf);
}
.db-herobild__knoepfe {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
/* 44×44 Klickfläche, Strich darin 32×2. Die Fassung aus
   Angstpatienten.dc.html hat hier nur 32×14 und verfehlt die 44px. */
.db-herobild__knopf {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.db-herobild__knopf span {
  display: block;
  width: 32px; height: 2px;
  background: var(--db-linie-dunkel-35);
  transition: background var(--db-t-strich) ease;
}
.db-herobild__knopf[aria-current="true"] span { background: var(--db-creme); }

/* Die Muster-Variante `db-hero-start--breit` vom 27.08.2026 ist entfallen:
   Christian hat das breite Format für ALLE Kopfbilder übernommen, es steht
   deshalb jetzt in den Grundregeln weiter oben. Die Klasse schadet nicht,
   wo sie noch im Markup steht — sie tut nur nichts mehr. */

.db-herolieste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 24px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--db-linie-hell-12);
}
.db-herolieste__wert {
  font-size: var(--db-hero-leiste-size);
  margin-top: 6px;
  color: var(--db-text);
}
.db-herolieste__wert a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--db-gruen);
  border-bottom: 1px solid var(--db-unterstreichung);
}
.db-heute--zu { color: var(--db-text-leise); }

/* === 0 · Kopfbild Unterseite ============================================
 *
 * Gebaut wie das Kopfbild der Startseite (Christians Vorgabe 27.08.2026):
 * weiße Abschnittsfläche, asymmetrischer Rand links/rechts, darin ein
 * sand-helles Panel, darin erst das zweispaltige Raster.
 *
 * ABWEICHUNG VON 07-abnahme.txt: die Liste erwartet für Abschnitt 0 der
 * Unterseiten Fläche "#F8F5EF (erbt)", Polsterung "56px 28px 0" und Container
 * 1340. Alle drei ändern sich hier bewusst — die Prüfung meldet das je
 * Unterseite als drei Abweichungen.
 */

.db-hero-sub {
  background: var(--db-seitenflaeche);
  padding: clamp(4px, 0.8vw, 12px) var(--db-seitenrand-rechts) 0 var(--db-seitenrand-links);
}
/* Nachfahre statt direktes Kind: core/group schiebt je nach Layout-Art einen
   .wp-block-group__inner-container dazwischen, dann greift ein
   Kind-Selektor nicht mehr und der Container bleibt bei 1340 statt 1300. */
.db-hero-sub .db-container {
  max-width: var(--db-container-start);
  padding-inline: 0;
}
.db-hero-sub__panel {
  background: var(--db-sand-hell);
  padding: clamp(28px, 3.4vw, 54px);
  /* Bewusst kantig — wie auf der Startseite. */
  border-radius: var(--db-r-kantig);
}
/* Dieselbe Spaltenteilung wie auf der Startseite: 1 zu 1,15. */
@media (min-width: 900px) {
  .db-hero-sub__panel > .db-zweispalt,
  .db-hero-sub__panel .wp-block-group__inner-container > .db-zweispalt {
    grid-template-columns: 1fr 1.15fr;
  }
}
.db-hero-sub__text > * + * { margin-top: var(--db-h-zu-text); }
.db-hero-sub__knopf { margin-top: 30px; }

/* Dieselben Maße wie das Kopfbild der Startseite. Die Begruendung zu
   aspect-ratio, fehlender Breite und fehlendem min-height steht dort. */
.db-hero-sub__bild {
  aspect-ratio: 1 / 1;
  max-height: min(calc(100vh - 216px), 700px);
  max-height: min(calc(100dvh - 216px), 700px);
  box-shadow: var(--db-schatten-kopfbild);
}
.db-hero-sub__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* === 1 · Textblock ====================================================== */

.db-textblock { padding: var(--db-abschnitt-oben) var(--db-seitenrand) 0; }
.db-textblock__text p:first-child { margin-top: var(--db-h-zu-text); }
.db-textblock__text p + p { margin-top: var(--db-absatz); }

/* === 2 · Ablauf mit Bild ================================================ */

.db-ablauf { padding: var(--db-abschnitt-oben) var(--db-seitenrand) 0; }
.db-ablauf__bild { aspect-ratio: 4 / 3; }
.db-ablauf__bild img { width: 100%; height: 100%; object-fit: cover; }

/* Nummerierte Schritte */
.db-schritte { counter-reset: db-schritt; }
.db-schritt {
  display: flex;
  gap: 18px;
  padding: 20px 0;
}
.db-schritt + .db-schritt { border-top: 1px solid var(--db-linie-hell-12); }
.db-schritt__nummer {
  counter-increment: db-schritt;
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--db-linie-hell-20);
  /* Bewusst kantig — muss aktiv gesetzt werden, sonst erbt es den Kartenradius. */
  border-radius: var(--db-r-kantig);
  font-family: var(--db-schrift-mono);
  font-size: var(--db-meta-size);
  color: var(--db-gruen);
}
.db-schritt__nummer::before { content: counter(db-schritt, decimal-leading-zero); }

/* === 3 · Kachelblock auf Sand =========================================== */

.db-kachelblock {
  background: var(--db-sand);
  padding: var(--db-abschnitt-sand) var(--db-seitenrand);
  margin-top: var(--db-abschnitt-oben);
}
.db-kachelblock .db-kachel { background: var(--db-creme); }

/* Vorspann im Sandblock: Überschrift, ein erklärender Satz, dann das Raster.
   Nur „Was uns verbindet" nutzt das — die übrigen Kachelblöcke gehen ohne
   Zwischentext direkt ins Raster (dort trägt die H2 .db-h-abstand).
   Gemessen im Entwurf: 18px unter der Überschrift, 44px über dem Raster. */
.db-kachelblock__vorspann { margin-top: 18px; margin-bottom: 44px; max-width: 56ch; }
.db-kachel__titel { margin-bottom: 10px; }
.db-kachel__text {
  font-size: var(--db-eyebrow-size);
  line-height: var(--db-lauftext-kachel-lh);
  color: var(--db-text);
}

/* === 4 · Kosten ========================================================= */

.db-kosten { padding: var(--db-abschnitt-oben) var(--db-seitenrand) 0; }
.db-kosten__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--db-spalte-zweispalt), 100%), 1fr));
  gap: clamp(36px, 5vw, 56px);
  align-items: start;
}
.db-kosten__kasten {
  background: var(--db-sand-hell);
  border-radius: var(--db-r-karte);
  padding: clamp(28px, 3.4vw, 44px);
  align-self: start;
}
.db-kosten__text p:first-child { margin-top: var(--db-h-zu-text); }
.db-kosten__text p + p { margin-top: var(--db-absatz); }

/* Listenpunkt ist ein 6×6px grünes Quadrat, kein Punkt. */
/* align-items:baseline statt eines gerechneten margin-top: so sitzt das
   Quadrat auf der Schriftgrundlinie und verrutscht nicht, wenn die Zeile
   umbricht. Gemessen im Entwurf: flex, baseline, gap 14px. */
.db-punkte li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: var(--db-lauftext-klein-size);
  line-height: 1.6;
  color: var(--db-text-menue);
}
.db-punkte li + li { margin-top: 12px; }
.db-punkte li::before {
  content: "";
  flex-shrink: 0;
  width: 6px; height: 6px;
  background: var(--db-gruen);
  border-radius: var(--db-r-kantig);
  transform: translateY(-3px);
}

/* === 5 · Bewertungen ==================================================== */

.db-bewertungen { padding: var(--db-abschnitt-oben) var(--db-seitenrand) 0; }
.db-bewertung {
  background: var(--db-sand);
  border-radius: var(--db-r-karte);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.db-bewertung__text {
  font-size: var(--db-lauftext-klein-size);
  line-height: var(--db-lauftext-lh);
  color: var(--db-text);
}
.db-bewertung__wer {
  font-size: var(--db-meta-size);
  color: var(--db-text-leise);
  margin-top: auto;
}
/* Überschrift links, Google-Link rechts auf derselben Zeile. */
.db-bewertungen__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: var(--db-h-zu-raster);
}

.db-bewertungen__profil {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--db-ui-klein-size);
  font-weight: var(--db-w-halbfett);
  color: var(--db-gruen);
  border-bottom: 1px solid var(--db-unterstreichung);
}

/* === 6 · FAQ ============================================================ */

.db-faq { padding: var(--db-abschnitt-oben) var(--db-seitenrand) 0; }
.db-faq__liste { margin-top: var(--db-h-zu-raster); }

/* Startseite: Bild links, Aufklapper rechts. Unter 900px rutscht das Bild
   unter den Text — order:1 statt einer eigenen Reihenfolge im Markup. */
.db-faq--zweispaltig { padding-top: var(--db-abschnitt-oben-weit); }
.db-faq--zweispaltig .db-faq__liste { margin-top: var(--db-h-zu-text); }
.db-faq__bild { aspect-ratio: 4 / 5; }
.db-faq__bild img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) {
  .db-faq__bild { order: 1; }
}

/* === 7 · Abschluss ====================================================== */

/* Bewusst ohne Überschrift: die Aussage ist ein Absatz, keine H2.
   Das ist kein Fehler in der Überschriftenhierarchie. */
.db-abschluss { padding: var(--db-abschnitt-oben) var(--db-seitenrand) 0; }
.db-abschluss__block {
  background: var(--db-gruen);
  border-radius: var(--db-r-feature);
  padding: clamp(40px, 6vw, 80px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}
.db-abschluss__aussage {
  font-size: var(--db-abschluss-size);
  font-weight: var(--db-w-mittel);
  line-height: 1.2;
  letter-spacing: -.03em;
  color: var(--db-creme);
  max-width: 26ch;
}
.db-abschluss__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.db-abschluss__nachsatz {
  font-size: var(--db-ui-klein-size);
  color: var(--db-salbei);
  max-width: 44ch;
}

/* .db-btn--creme steht in 03-bausteine.css bei den übrigen Schaltflächen. */

/* === Leistungskacheln (Startseite) ====================================== */

.db-leistungen { padding: var(--db-abschnitt-oben-start) var(--db-seitenrand) 0; }
.db-leistungen__ueberschrift { max-width: 24ch; }

/* Gemessen im Entwurf: die hellen Kacheln sind SAND (#EDE7DC), nicht Creme.
   Und DREI sind dunkel, nicht zwei — Angstpatienten gehoert dazu. */
.db-leistungskachel { background: var(--db-sand); }

/* KEINE festen vier Spalten: das ergab bei 375px zwei Kacheln zu 163px, in
   denen "Professionelle Zahnreinigung" aus dem Kasten lief.
   Die auto-fit-Regel aus 00-tokens.css trifft bei Container 1340 von selbst
   die vier Spalten zu 320px des Entwurfs — und bricht mobil auf eine um.
   (Vorher stimmte sie nur deshalb nicht, weil der Container 1284 breit war.) */

.db-leistungskachel__bild { aspect-ratio: 16 / 10; background: var(--db-sand-tief); }
.db-leistungskachel__bild img { width: 100%; height: 100%; object-fit: cover; }
/* Gemessen: die Kachel ist flex/column, der Inhaltsteil hat flex:1.
   Nur dadurch sitzt "Mehr erfahren" in allen Kacheln auf gleicher Höhe. */
.db-leistungskachel { display: flex; flex-direction: column; padding: 0; }
.db-leistungskachel__inhalt {
  padding: 28px 26px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.db-leistungskachel__text {
  font-size: var(--db-eyebrow-size);
  line-height: var(--db-lauftext-leistung-lh);
  color: var(--db-text);
  margin-top: 10px;
}
.db-leistungskachel__detail {
  font-size: var(--db-meta-size);
  line-height: var(--db-meta-lh);
  color: var(--db-text-leise);
  margin-top: 10px;
}
/* margin-top:auto drückt die Zeile an den unteren Rand — daher die
   gemeinsame Höhe über alle Kacheln. Farbe ist Tinte, nicht Grün, und es
   gibt keine Unterstreichung. Gemessen: 14.5px/600 #1A1C19. */
.db-leistungskachel__mehr {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
  font-size: var(--db-ui-klein-size);
  font-weight: var(--db-w-halbfett);
  color: var(--db-tinte);
}
.db-leistungskachel--dunkel .db-leistungskachel__mehr { color: var(--db-creme); border-bottom: 0; }

/* Zwei der acht Kacheln sind dunkel: Zahnerhaltung und Oralchirurgie. */
.db-leistungskachel--dunkel { background: var(--db-gruen); }
.db-leistungskachel--dunkel .db-h3-kachel { color: var(--db-creme); }
.db-leistungskachel--dunkel .db-leistungskachel__text { color: var(--db-salbei-hell); }
.db-leistungskachel--dunkel .db-leistungskachel__detail { color: var(--db-salbei); }
.db-leistungskachel--dunkel .db-leistungskachel__mehr {
  color: var(--db-creme);
  border-bottom-color: var(--db-linie-dunkel-35);
}

/* === Sprechzeitenblock (grün) =========================================== */

.db-sprechzeiten {
  background: var(--db-gruen);
  color: var(--db-salbei-hell);
  padding: var(--db-abschnitt-gruen) var(--db-seitenrand);
  margin-top: var(--db-abschnitt-gruen-oben);
}
.db-zeitkarte {
  background: var(--db-linie-dunkel-07);
  border: 1px solid var(--db-linie-dunkel-14);
  border-radius: var(--db-r-karte);
  padding: 32px 28px;
}
/* Gemessen: die dritte Karte ist eine VOLLE Cremeflaeche ohne Rahmen,
   nicht die durchscheinende Variante der ersten beiden. */
.db-zeitkarte--hell {
  background: var(--db-creme);
  border: 0;
  color: var(--db-text);
}
.db-zeitkarte--hell .db-zeitkarte__label { color: var(--db-text-leise); }
.db-zeitkarte--hell .db-icon-quadrat { border-color: var(--db-linie-hell-20); color: var(--db-gruen); }
/* Der Terminknopf ist ausdrücklich ausgenommen: sonst gewinnt diese Regel
   (zwei Klassen plus Pseudoklasse) gegen .db-zeitkarte__knopf und der Knopf
   bekommt grüne Schrift auf grüner Fläche — gemessen als Kontrast 1,00. */
.db-zeitkarte--hell a:not(.db-btn):not(.db-zeitkarte__knopf) {
  color: var(--db-gruen) !important;
  border-bottom-color: var(--db-unterstreichung);
}
.db-zeitkarte--hell .db-btn--umriss-dunkel {
  color: var(--db-tinte);
  border-color: var(--db-linie-hell-22);
}
.db-zeitkarte--hell .db-btn--umriss-dunkel:hover { background: var(--db-gruen-lasur-05); border-color: var(--db-gruen); color: var(--db-tinte); }

/* Icon und Beschriftung stehen NEBENEINANDER, nicht untereinander.
   Gemessen: Zeile 374x34, flex, gap 12px. */
.db-zeitkarte__kopf {
  display: flex;
  align-items: center;
  gap: 12px;
}
.db-zeitkarte__label {
  font-size: var(--db-label-size);
  color: var(--db-salbei-mittel);
}
.db-zeitkarte--hell .db-zeitkarte__label { color: var(--db-text-leise); }

/* Hinweistext in der Telefonkarte: 15px in salbei. */
.db-zeitkarte__hinweis {
  font-size: var(--db-ui-size);
  color: var(--db-salbei);
  margin-top: 14px;
}

/* Telefonnummer in der hellen Karte: 20px/500 in Praxisgrün, Icon 19px. */
.db-zeitkarte__telefon {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  font-size: var(--db-telefon-mobil-size);
  font-weight: var(--db-w-mittel);
  color: var(--db-gruen) !important;
  border-bottom: 0 !important;
}
.db-zeitkarte__zeile { font-size: var(--db-eyebrow-size); color: var(--db-text); margin-top: 8px; }
.db-zeitkarte__zeile--leise { color: var(--db-text-leise); }

/* Terminknopf in der hellen Karte: gefüllt grün, volle Kartenbreite, 54px. */
.db-zeitkarte__knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: var(--db-btn-standard-hoehe);
  margin-top: auto;
  background: var(--db-gruen);
  color: var(--db-creme) !important;
  border-radius: var(--db-r-pille);
  font-size: var(--db-btn-standard-size);
  font-weight: var(--db-w-mittel);
  border-bottom: 0 !important;
  transition: background var(--db-t-ui) ease;
}
.db-zeitkarte__knopf:hover,
.db-zeitkarte__knopf:focus-visible { background: var(--db-gruen-hover); }

/* Die helle Karte stapelt ihre Teile mit 28px Abstand. */
.db-zeitkarte--hell { display: flex; flex-direction: column; gap: 28px; }
.db-zeitliste { margin-top: 14px; }
.db-zeitliste li {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 0;
  font-size: var(--db-eyebrow-size);
}
.db-zeitliste li + li { border-top: 1px solid var(--db-linie-dunkel-12); }
.db-zeitliste__uhr {
  font-family: var(--db-schrift-mono);
  font-size: var(--db-meta-size);
  white-space: nowrap;
}
.db-zeitliste__tag { color: var(--db-creme-warm); }

/* Der Telefonlink in der Karte war gemessen nur 21,5px hoch. */
.db-zeitkarte a:not(.db-btn) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--db-creme-warm);
  border-bottom: 1px solid var(--db-linie-dunkel-35);
}

/* === Zitat ============================================================== */

.db-zitat-block {
  background: var(--db-sand);
  border-radius: var(--db-r-feature);
  padding: clamp(40px, 6vw, 84px);
}
.db-zitat-block .db-zitat { max-width: 26ch; }
.db-zitat__wer {
  display: flex;
  align-items: center;
  gap: 14px;
  /* Gemessen im Entwurf: 36px, nicht 26px. */
  margin-top: 36px;
  font-size: var(--db-ui-klein-size);
  color: var(--db-text-leise);
}
.db-zitat__wer::before {
  content: "";
  width: 44px; height: 1px;
  background: var(--db-linie-hell-30);
  flex-shrink: 0;
}

/* === Personenkarten ===================================================== */

.db-person {
  background: var(--db-sand);
  border-radius: var(--db-r-karte);
  overflow: hidden;
  display: flex;
  gap: 22px;
  padding: 22px;
}
.db-person__bild {
  flex-shrink: 0;
  width: 132px;
  aspect-ratio: 3 / 4;
  border-radius: var(--db-r-karte);
  overflow: hidden;
  background: var(--db-sand-tief);
}
.db-person__bild img { width: 100%; height: 100%; object-fit: cover; }

/* Zoom beim Hover auf der ganzen Karte, nicht nur auf dem Bild — so ist es
   im Entwurf gebaut (900ms, dieselbe weiche Kurve wie bei der Galerie).
   Der Rahmen schneidet ab, deshalb wächst nichts über die Karte hinaus. */
.db-person__bild { overflow: hidden; }
.db-person__bild img {
  transform: scale(1);
  transition: transform var(--db-t-bild) var(--db-kurve-weich),
              filter var(--db-t-filter) ease;
}
.db-person:hover .db-person__bild img,
.db-person:focus-within .db-person__bild img { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
  .db-person__bild img { transition: none; }
  .db-person:hover .db-person__bild img { transform: none; }
}
.db-person__funktion {
  font-size: var(--db-ui-klein-size);
  color: var(--db-text-leise);
  margin-top: 6px;
}
.db-person__text {
  font-size: var(--db-lauftext-klein-size);
  line-height: var(--db-lauftext-lh);
  margin-top: 12px;
}

/* Zwei Raster: erst die beiden grossen Karten (660px), dann sechs kleine
   (433px) mit 20px Abstand dazwischen. Im Entwurf gemessen. */
.db-personenraster--gross { grid-template-columns: repeat(2, 1fr); }
.db-personenraster--klein { grid-template-columns: repeat(3, 1fr); margin-top: 20px; }
@media (max-width: 899px) {
  .db-personenraster--gross,
  .db-personenraster--klein { grid-template-columns: 1fr; }
}

.db-person--gross { flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
.db-person--gross .db-person__bild {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 0;
}
.db-person--gross .db-person__inhalt { padding: 26px 28px 28px; }

/* Schwerpunkte: untereinander, schlicht — keine Pillen.
   Gemessen: flex/column, gap 11px, margin-top 24px, 15.5px/400 #3A3F39. */
.db-schwerpunkte {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.db-schwerpunkte li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: var(--db-eyebrow-size);
  color: var(--db-text-menue);
}
.db-schwerpunkte li::before {
  content: "";
  flex-shrink: 0;
  width: 6px; height: 6px;
  background: var(--db-gruen);
  border-radius: var(--db-r-kantig);
  transform: translateY(-3px);
}

/* Platzhalterkarten mit Initialen — einziger Einsatz von Schnitt 300. */
.db-person--platzhalter .db-person__bild {
  display: flex;
  align-items: center;
  justify-content: center;
}
.db-person__initialen {
  font-size: var(--db-initialen-size);
  font-weight: var(--db-w-leicht);
  letter-spacing: -.03em;
  color: var(--db-gruen);
  opacity: .42;
}

/* === Galerie ============================================================ */

.db-galerie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  row-gap: var(--db-gap-galerie);
}
.db-galerie__spalte { display: flex; flex-direction: column; gap: 20px; }

/* Statischer Versatz der Mittelspalte — das ist KEIN Effekt, sondern Layout.
   Zusätzlich läuft darauf die Spaltenparallaxe (0.34 / -0.30 / 0.46). */
.db-galerie__spalte--mitte { margin-top: 48px; }
/* Die Mitte lief zu unruhig: gegenläufig und fast so stark wie die Außen-
   spalten ergibt eine Relativbewegung von über 1,1 — das liest sich als
   "die Mitte rast". Jetzt bleibt sie deutlich ruhiger, die Außenspalten
   tragen die Bewegung. Werte in konvert.py. */

.db-galerie__bild {
  overflow: hidden;
  border-radius: var(--db-r-karte);
  background: var(--db-sand-tief);
}
.db-galerie__bild img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 899px) {
  .db-galerie { grid-template-columns: repeat(2, 1fr); row-gap: 0; }
  .db-galerie__spalte--mitte { margin-top: 30px; }
  /* Dritte Spalte aus, alle Bilder 4/5. */
  .db-galerie__spalte--drei { display: none; }
  .db-galerie__bild { aspect-ratio: 4 / 5 !important; }
}

/* === Mitgliedschaften =================================================== */

.db-mitgliedschaften {
  padding: var(--db-abschnitt-oben-start) var(--db-seitenrand) 0;
}
.db-mitgliedschaften__innen {
  border-top: 1px solid var(--db-linie-hell-10);
  padding-top: 44px;
}
.db-mitglied {
  min-height: 132px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.db-mitglied__kuerzel {
  font-size: var(--db-h3-kachel-size);
  font-weight: var(--db-w-halbfett);
  letter-spacing: -.01em;
  color: var(--db-gruen);
}

/* === Angst-Anriss (Startseite) ========================================== */

/* Gemessen: das Raster IST der Sandblock — 1340 breit, Radius 22, kein
   Spaltenabstand, Bild randlos bis an die Kante. */
.db-anriss {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--db-sand);
  border-radius: var(--db-r-feature);
  overflow: hidden;
  align-items: center;
}
@media (max-width: 899px) {
  .db-anriss { grid-template-columns: 1fr; }
}
.db-anriss__text { padding: clamp(36px, 5vw, 68px); }
.db-anriss__text > * + * { margin-top: var(--db-h-zu-text); }
.db-anriss__knopf { margin-top: 28px; }
.db-anriss__bild { align-self: stretch; min-height: 320px; background: var(--db-sand-tief); }
.db-anriss__bild img { width: 100%; height: 100%; object-fit: cover; }

/* === Karriereblock ====================================================== */

.db-karriere-block {
  background: var(--db-sand);
  border-radius: var(--db-r-feature);
  padding: clamp(32px, 4vw, 56px);
}
/* Gemessen: zwei Spalten zu 598px, Abstand 32px — Text links, Knopf rechts. */
.db-karriere-block .db-zweispalt {
  gap: 32px;
  align-items: center;
}


/* === Rechtstext ========================================================= */

.db-rechtstext { padding: var(--db-abschnitt-oben-hero) var(--db-seitenrand) 0; }
.db-rechtstext__inhalt { max-width: var(--db-container-rechtstext); }
.db-rechtstext__inhalt h2 {
  font-size: var(--db-h2-abschnitt-size);
  line-height: var(--db-h2-abschnitt-lh);
  letter-spacing: var(--db-h2-abschnitt-ls);
  margin-top: 48px;
  margin-bottom: var(--db-h-zu-text);
}
.db-rechtstext__inhalt h3 {
  font-size: var(--db-h3-person-size);
  line-height: 1.3;
  letter-spacing: -.02em;
  margin-top: 32px;
  margin-bottom: 12px;
}
.db-rechtstext__inhalt p + p,
.db-rechtstext__inhalt ul { margin-top: var(--db-absatz); }
.db-rechtstext__inhalt a {
  color: var(--db-gruen);
  border-bottom: 1px solid var(--db-unterstreichung);
}

/* === Karte auf /anfahrt/ ================================================ */

.db-karte-rahmen {
  border-radius: var(--db-r-karte);
  overflow: hidden;
  background: var(--db-sand-tief);
  aspect-ratio: 4 / 3;
}
.db-karte-rahmen iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* === Bild in der Platzhalterfläche ====================================== */

/* Schraffierte Platzhalterfläche — im Entwurf steht sie rechts im
   Split-Block der Startseite und trägt die Notiz zum Fototermin. */
.db-platzhalter {
  background:
    repeating-linear-gradient(135deg, var(--db-schraffur) 0 1px, transparent 1px 11px),
    var(--db-sand-tief);
  border-radius: var(--db-r-karte);
  padding: 26px;
  display: flex;
  align-items: flex-end;
  min-height: 420px;
  height: 100%;
}
.db-platzhalter__notiz {
  font-size: var(--db-ui-klein-size);
  line-height: 1.6;
  color: var(--db-text-leise);
  max-width: 34ch;
}

/* Unterschriftenzeile unter dem Text: zwei Namen nebeneinander. */
.db-unterschriften {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 32px;
}
.db-unterschrift__name {
  font-size: var(--db-lauftext-klein-size);
  font-weight: var(--db-w-halbfett);
  color: var(--db-gruen);
}
.db-unterschrift__rolle {
  font-size: var(--db-label-size);
  color: var(--db-text-leise);
  margin-top: 2px;
}

/* === Seitenweise Abweichungen ==========================================
 *
 * Stehen bewusst am Dateiende: die Blockklassen weiter oben setzen padding
 * als Kurzschreibweise, ein padding-top davor käme nie an.
 * Alle Werte aus 07-abnahme.txt, gemessen bei 1440px.
 */

/* Startseite und Angstpatienten: 108px statt 104px. */
.db-abschnitt--start { padding-top: var(--db-abschnitt-oben-start); }

/* Zitat, Galerie, Angst-Anriss und FAQ der Startseite: 118px. */
.db-abschnitt--weit { padding-top: var(--db-abschnitt-oben-weit); }

/* Team, Abschnitt 1: bewusst knapp unter dem Kopfbild. */
.db-abschnitt--eng { padding-top: 24px; }

/* Angstpatienten, Kopfbild: 64px statt 56px. */
.db-hero-sub--angst { padding-top: 64px; }

/* Startseite, Kopfbild: die asymmetrische Polsterung sitzt am Abschnitt
   selbst, nicht am Container — sonst misst die Abnahme sie nicht. */
.db-hero-start {
  padding: clamp(4px, 0.8vw, 12px) var(--db-seitenrand-rechts) 0 var(--db-seitenrand-links);
}
.db-hero-start .db-container { padding-inline: 0; }

/* Startseite, Split-Block „Praxis": eigene Fläche und eigene Polsterung. */
.db-split-praxis {
  background: var(--db-seitenflaeche);
  padding:
    clamp(72px, 9vw, 118px)
    var(--db-seitenrand-rechts)
    clamp(56px, 7vw, 96px)
    var(--db-seitenrand-links);
}
.db-split-praxis .db-container { padding-inline: 0; }
/* Gemessen im Entwurf: zwei Spalten zu 620px bei Container 1300 — Abstand 60. */
.db-split-praxis .db-zweispalt { gap: 60px; align-items: start; }

/* Rechtstexte: Container 860, H1 kleiner als auf den Unterseiten. */
.db-rechtstext { padding-top: var(--db-abschnitt-oben-hero); }

/* Karriereblock: Text links, Knopf rechts am Spaltenende. */
.db-karriere-block__text > * + * { margin-top: 16px; }
/* Gemessen im Entwurf: der Knopf steht am LINKEN Rand seiner Spalte
   (x=736), nicht rechtsbündig am Blockrand. */
.db-karriere-block__knopf { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-start; }


/* === Mitlaufende Ueberschriften ==========================================
 *
 * In den zweispaltigen Bloecken bleibt die linke Spalte beim Scrollen stehen,
 * solange der Text rechts laeuft. Christians Vorgabe vom 27.08.2026 — im
 * Entwurf steht dort nichts dergleichen.
 *
 * Der Abstand nach oben ist die Hoehe der klebenden Kopfzeile plus etwas
 * Luft, sonst schiebt sich die Ueberschrift darunter.
 *
 * Nur ab 900px: einspaltig gestapelt waere ein klebendes Element sinnlos und
 * wuerde den Text ueberdecken.
 *
 * ⚠️ DER DOPPELSATZ IST ABSICHT, NICHT SCHLUDRIGKEIT.
 *
 * WordPress schiebt in die Rasterkiste einen
 * `.wp-block-group__inner-container` ein. Der steht hier auf
 * `display: contents` (siehe Dateianfang) — das erste Rasterelement ist dann
 * DESSEN erstes Kind, nicht das der Kiste. Ohne die zweite Zeile je Block
 * trifft die Regel den Behaelter.
 *
 * Und darauf ist sie folgenlos: `position: sticky` auf einem
 * `display: contents`-Element bewirkt nichts, meldet sich in
 * getComputedStyle aber trotzdem als "sticky". Genau daran ist diese Vorgabe
 * von August 2026 bis zum 27.08.2026 unbemerkt ins Leere gelaufen — die
 * Regel stand da, geklebt hat nie etwas. Wer hier aufraeumt: erst messen mit
 * `position === 'sticky' && display !== 'contents'`, sonst faellt es wieder
 * niemandem auf.
 *
 * Seit dem 27.08.2026 klebt die ganze linke Spalte, nicht nur ihre
 * Ueberschrift. Grund: Der Textblock ist jetzt entwurfstreu zweispaltig, die
 * linke Spalte traegt Ueberschrift UND Fliesstext. Christians Entscheidung.
 */
@media (min-width: 900px) {
  .db-textblock .db-zweispalt--text > :first-child,
  .db-textblock .db-zweispalt--text > .wp-block-group__inner-container > :first-child,
  .db-kosten__raster > :first-child,
  .db-kosten__raster > .wp-block-group__inner-container > :first-child,
  .db-ablauf .db-zweispalt > :first-child,
  .db-ablauf .db-zweispalt > .wp-block-group__inner-container > :first-child {
    position: sticky;
    top: calc(var(--db-kopfzeile-hoehe) + 32px);
    align-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Kein Grund, das abzuschalten: Kleben ist keine Bewegung im Sinne der
     Einstellung. Der Hinweis steht hier, damit niemand es "der Ordnung
     halber" doch entfernt. */
}

/* Zwischenüberschrift im Textblock ("Was dafür spricht") — schlicht, ohne
   eigene Fläche. */
/* Anamnesebogen zum Vorab-Ausfuellen. Steht unter der Aufzaehlung
   „Praktisches" und blendet sich aus, solange keine Datei hinterlegt ist —
   die Regel greift dann ins Leere, das ist gewollt. */
.db-anamnese { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.db-anamnese__hinweis { font-size: var(--db-meta-size); color: var(--db-text-leise); }

.db-textblock__zwischen { margin-top: 30px; margin-bottom: 14px; }
.db-textblock__text .db-punkte { margin-top: 6px; }

/* Zweite Spalte im Textblock: eigene Überschrift über ihrer Aufzählung.
 *
 * Im Entwurf ist der Textblock zweispaltig — links Überschrift und Fließtext,
 * rechts eine zweite Überschrift mit der Aufzählung darunter. Beide sind H2,
 * beide beginnen auf gleicher Höhe.
 *
 * Weil die Überschrift jetzt INNERHALB der Spaltengruppe steht, greift
 * `.db-textblock__text p:first-child` nicht mehr — der erste Absatz ist nicht
 * mehr erstes Kind. Die beiden Nachbarregeln holen das nach.
 * Gemessen im Entwurf: Absatz 22px unter der Überschrift, Liste 24px.
 *
 * KEIN Kind-Selektor: WordPress schiebt in die Gruppe einen
 * `.wp-block-group__inner-container` ein, `> h2` liefe dann ins Leere.
 * Das Geschwister-Zeichen `+` funktioniert darin unverändert.
 */
.db-textblock__text h2 + p          { margin-top: var(--db-h-zu-text); }
.db-textblock__text h2 + .db-punkte { margin-top: 24px; }