/* Dr. Holger Hotz - dochotz.com
   Handgebautes Stylesheet. Werte am Original gemessen:
   Gruen dunkel #32584E, Teal #30887F, Overlay-Gruen #058466,
   Blattgrau #E4E9EB, Grau #F2F2F2, Link-Gruen #32584E, Text #414141 */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-300.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Kepler Light SCd";
  src: url("../fonts/kepler-light-scd.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Avenir Light";
  src: url("../fonts/avenir-light.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

html { font-size: 16px; }

:root {
  --gruen: #32584E;
  --teal: #30887F;
  --overlay: #058466;
  --blatt: #E4E9EB;
  --grau: #F2F2F2;
  --link: #32584E;   /* war #32584E, helles Gruen ist raus (Ansage 14.10.) */
  --text: #414141;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --body: "Kepler Light SCd", Georgia, serif;
  --breite: 61.25rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* Markierter Text in Hausgruen statt des Standard-Blaus (Ansage 18.10.,
   "ein cooles Negativ"). ::-moz-selection extra, Firefox akzeptiert die
   Kurzregel sonst gar nicht. */
::selection { background: var(--gruen); color: #fff; }
/* Chinesisch: die Hausschriften haben keine CJK-Glyphen, Systemschrift
   als Fallback (PingFang/Noto), Zeilenhoehe etwas grosszuegiger. */
html[lang="zh"] { --serif: "Cormorant Garamond", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", serif; --body: "Kepler Light SCd", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", serif; }
html[lang="zh"] body { line-height: 1.7; }
::-moz-selection { background: var(--gruen); color: #fff; }
body {
  font-family: var(--body);
  font-size: 1.0625rem;
  color: var(--text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--link); text-decoration: none; }

/* Lesefortschritts-Linie am oberen Viewportrand, von dhs-progress.js
   uebernommen (Ansage 18.10., "wie bei DHS, dass man auf jeder Seite
   weiss wie weit man gescrollt hat"). Markup kommt aus progress.js. */
.progress-bar { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: transparent; z-index: 100; pointer-events: none; }
.progress-bar__fill { height: 100%; background: var(--gruen); transform-origin: 0 50%; transform: scaleX(0); transition: transform .08s linear; }

.inhalt { width: calc(100% - 10rem); margin: 0 auto; }

/* ----- Header ----- */
.site-header { background: #fff; }
.hauptnav ul {
  list-style: none;
  display: flex; justify-content: space-between;
  width: calc(100% - 10rem); margin: 0 auto;
  padding: 1.375rem 0 1rem;
}
.hauptnav a {
  font-family: var(--body); font-size: 1.0625rem;
  color: var(--gruen);
}
.hauptnav a:hover, .hauptnav .aktiv > a { color: var(--link); }
.hauptnav .dropdown { position: relative; }
.hauptnav .dropdown > ul {
  display: none; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  background: #fff; border: 1px solid #e3e3e3; padding: 0.625rem 0;
  min-width: 9.375rem; z-index: 50; flex-direction: column; gap: 0;
}
.hauptnav .dropdown:hover > ul, .hauptnav .dropdown:focus-within > ul { display: flex; }
.hauptnav .dropdown > ul a { display: block; padding: 0.4375rem 1.125rem; font-size: 0.875rem; }
.nav-linie { border: 0; border-top: 1px solid var(--gruen); margin: 0 auto; width: calc(100% - 10rem); }

.kopf { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 1.5rem; padding: 3.25rem 0 0.625rem; width: calc(100% - 10rem); max-width: none; }
.kopf-adresse {
  text-align: center;
  font-family: var(--serif); font-weight: 300; font-size: 1.125rem;
  color: var(--gruen); line-height: 1.5; padding-top: 0.625rem;
}
.kopf-titel { text-align: center; }
.kopf-titel h1 a, .kopf-titel .seitentitel a { color: var(--gruen); }
.kopf-titel .seitentitel {
  font-family: var(--serif); font-weight: 600; font-size: 3.1875rem;
  color: var(--gruen); line-height: 1.1;
}
.kopf-titel .untertitel {
  font-family: var(--serif); font-weight: 600; font-size: 1.5625rem;
  color: var(--gruen); letter-spacing: 0.12em; margin-top: 2px;
}
.kopf-kontakt {
  text-align: center;
  font-family: var(--serif); font-weight: 300; font-size: 1.125rem;
  color: var(--gruen); line-height: 1.5; padding-top: 0.625rem;
}
.kopf-kontakt a { color: var(--gruen); }
.kopf-insta { display: inline-block; margin-top: 0.875rem; color: var(--gruen); }
.kopf-insta svg { width: 1.1875rem; height: 1.1875rem; }
.kopf-linie { border: 0; border-top: 1px solid var(--gruen); margin: 8.75rem auto 0; width: calc(100% - 10rem); }

/* ----- Hero (Startseite) ----- */
.hero { position: relative; height: 57.9375rem; }
.hero-bild { position: absolute; left: 6.5rem; top: 5.5rem; width: 41.4375rem; height: 39.75rem; object-fit: cover; }
.hero-box {
  position: absolute; left: 42.3125rem; top: 30.375rem;
  width: 35rem; height: 19rem;
  background: var(--teal);
  display: flex; align-items: center;
}
.hero-box h2, .hero-box h1, .hero-box .hero-titel {
  font-family: var(--serif); font-weight: 600; font-size: 2.5rem;
  color: #fff; padding-left: 3.25rem; letter-spacing: 0.02em;
}

/* ----- Bildsektionen mit Overlay ----- */
.bildsektion { position: relative; height: 33.6875rem; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.bildsektion > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bildsektion::after { content: ""; position: absolute; inset: 0; background: rgb(39, 116, 102); opacity: 0.88; }
.bildsektion h2 {
  position: relative; z-index: 2;
  font-family: var(--serif); font-weight: 600; font-size: 4.375rem;
  color: #fff; text-align: center; line-height: 1.3; letter-spacing: 0.01em;
}

/* ----- Herz-Blog Karten ----- */
.blogband { padding: 5.625rem 0 6.875rem; }
.blogband > h2 {
  font-family: var(--serif); font-weight: 600; font-size: 4.375rem;
  color: var(--gruen); text-align: center; margin-bottom: 4rem;
}
.blogkarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.875rem; max-width: 58.5rem; margin: 0 auto; padding: 0 1.25rem; }
.blogkarte { border: 1px solid #e3e3e3; background: #fff; display: flex; flex-direction: column; }
.blogkarte img { width: 100%; height: 13.6875rem; object-fit: cover; }
.blogkarte .bk-text { padding: 1.375rem 1.5rem 0.875rem; flex: 1; }
.blogkarte h3 {
  font-family: var(--serif); font-weight: 600; font-size: 1.375rem; color: var(--text); line-height: 1.4;
  /* Zwei Zeilen, dann Schluss - sonst machen lange Titel die Karte hoeher
     als ihre Nachbarn (Ansage 15.10., alle sollen aehnlich gross sein). */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; min-height: calc(1.4em * 2);
}
.blogkarte h3 a { color: var(--text); }
.blogkarte p {
  font-family: var(--serif); font-weight: 300; font-size: 0.9375rem; color: var(--text); margin-top: 0.625rem; line-height: 1.5;
  /* Gleiche Logik: drei Zeilen Anriss, egal wie lang der Originaltext ist. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden; min-height: calc(1.5em * 3);
}
.blogkarte .bk-fuss {
  border-top: 1px solid #e9e9e9; margin: 0 1.5rem; padding: 0.625rem 0 0.875rem;
  display: flex; justify-content: space-between; align-items: center;
  font-family: "Avenir Light", Helvetica, sans-serif; font-size: 0.8125rem; color: #656565;
}
.bk-herz { color: #e2264d; font-size: 0.9375rem; }

/* ----- Footer / Signup ----- */
.footer-duene { position: relative; min-height: 40.75rem; display: flex; align-items: center; justify-content: center; padding: 4.375rem 1.25rem; }
.footer-duene > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.signup-karte {
  position: relative; z-index: 2;
  background: #fff; width: 100%; max-width: 35rem;
  padding: 2.875rem 3.5rem 3.125rem; text-align: center;
}
.signup-karte h2 { font-family: var(--serif); font-weight: 300; font-size: 2.375rem; color: var(--text); }
.signup-karte .sub { font-family: var(--body); font-size: 1.125rem; line-height: 1.8; margin: 0.625rem 0 1.875rem; }
.signup-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 1.125rem 1.375rem; text-align: left; }
.signup-felder .voll { grid-column: 1 / -1; }
.signup-felder label { display: block; font-family: "Avenir Light", Helvetica, sans-serif; font-size: 0.8125rem; margin-bottom: 0.375rem; color: #333; }
.signup-felder input {
  width: 100%; padding: 0.5625rem 0.625rem; font-size: 0.9375rem;
  border: 1px solid #c9c9c9; background: #fff; font-family: inherit;
}
.signup-knopf {
  margin-top: 1.75rem; padding: 0.625rem 2.75rem;
  background: var(--gruen); color: #fff; border: 0; cursor: pointer;
  font-family: "Avenir Light", Helvetica, sans-serif; font-size: 0.9375rem;
}
.signup-knopf:hover { background: var(--teal); }


/* ----- Responsiv ----- */
@media (max-width: 760px) {
  .hero { height: auto; padding: 2.5rem 1.25rem 3.75rem; }
  .hero-bild { position: static; width: 100%; height: auto; }
  .hero-box { position: static; width: 100%; height: auto; margin-top: -3.75rem; margin-left: auto; padding: 2.5rem 0; }
  .bildsektion h2 { font-size: 2.75rem; padding: 0 1rem; }
  .blogkarten { grid-template-columns: 1fr; max-width: 26.25rem; }
  .kopf { grid-template-columns: 1fr; gap: 0.625rem; }
  .hauptnav ul { flex-wrap: wrap; gap: 1.125rem 1.75rem; padding: 0.875rem 0.625rem; }
}

/* ----- Unterseiten ----- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.unterhero { position: relative; margin: 0 auto; padding: 4.5rem 0 3.5rem 6.5rem; }
.unterhero img { width: 41.4375rem; height: 39.75rem; object-fit: cover; }
.seitenpill { position: absolute; left: 38.5rem; top: 12rem; background: var(--teal); padding: 1.75rem 3.25rem; }
.seitenpill h1 { font-family: var(--serif); font-weight: 600; font-size: 1.75rem; color: #fff; letter-spacing: 0.02em; }

.blattgrau { background: var(--blatt); }
.mitte { text-align: center; padding: 4.5rem 1.25rem 5.25rem; }
.mitte h2 { font-family: var(--serif); font-weight: 600; font-size: 4.375rem; color: var(--gruen); margin-bottom: 2.75rem; }
.portrait { width: 37.6875rem; margin: 0 auto 2.25rem; }
.fliess { font-family: var(--body); font-size: 1.125rem; line-height: 1.8; color: var(--gruen); max-width: 51.25rem; margin: 0 auto; }

.bildsektion.band { height: 26.875rem; }

.cv { padding-top: 3.5rem; }
.cv-eintrag { max-width: 35rem; margin: 0 auto; padding: 1.625rem 0; border-bottom: 1px solid #b9c4c2; }
.cv-eintrag:last-child { border-bottom: 0; }
.cv-datum { font-family: var(--serif); font-weight: 300; font-size: 1.125rem; color: var(--gruen); margin-bottom: 0.5rem; }
.cv-text { font-family: var(--serif); font-weight: 600; font-size: 2.5rem; line-height: 1.25; color: var(--gruen); }
.cv-text a { color: var(--link); }

/* Vita-Zeitstrahl: kompakter als die alte .cv-eintrag-Liste (jeder
   Eintrag stand vorher mit 2.5rem grosser Ueberschrift einzeln
   untereinander - "von der Laenge her sehr lang"). Zweispaltig wie bei
   die-herzspezialisten.com/arzt-hotz, Linie zeichnet sich beim
   Scrollen, Eintraege blenden gestaffelt ein (vita.js). Inhalt
   unveraendert, nur die Praesentation (Ansage 18.10.). */
.vita { list-style: none; margin: 0 auto; padding: 0; max-width: 50rem; position: relative; text-align: left; }
.vita::before {
  content: ""; position: absolute; left: calc(11.5rem + 0.4375rem); top: 0.5rem; bottom: 0.5rem; width: 1px;
  background: var(--gruen); transform-origin: top; transform: scaleY(0);
  transition: transform 1.8s cubic-bezier(.22,.7,.15,1);
}
.vita.on::before { transform: scaleY(1); }
.vita__item {
  display: grid; grid-template-columns: 11.5rem 1fr; gap: 0 2rem; align-items: start;
  padding: 1.375rem 0; position: relative;
  opacity: 0; transform: translateY(14px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
.vita__item.on { opacity: 1; transform: none; }
.vita__item::before {
  content: ""; position: absolute; left: 11.5rem; top: 1.875rem; width: 0.9375rem; height: 0.9375rem; border-radius: 50%;
  background: #fff; border: 1px solid var(--gruen);
  transition: background .5s ease .4s;
}
.vita__item.on::before { background: var(--gruen); }
.vita__year {
  font-family: var(--serif); font-weight: 300; font-size: 1.0625rem;
  color: var(--gruen); padding-top: 0.5rem; text-align: right; padding-right: 1.5rem; line-height: 1.3;
}
.vita__body { padding-left: 2.5rem; }
.vita__body h3 { font-family: var(--serif); font-weight: 600; font-size: 1.3125rem; color: var(--gruen); margin: 0 0 0.25rem; line-height: 1.3; }
.vita__body p { font-family: var(--body); font-size: 1rem; line-height: 1.55; color: rgba(50, 88, 78, .72); margin: 0; }
.vita__body p a { color: var(--gruen); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .vita::before { left: 0.4375rem; }
  .vita__item { grid-template-columns: 1fr; gap: 0; }
  .vita__item::before { left: 0; }
  .vita__year { grid-column: 1; text-align: left; padding: 0 0 0.25rem 2rem; }
  .vita__body { grid-column: 1; padding-left: 2rem; }
}
/* Physische Struktur bleibt wie ueberall sonst auch unter RTL stehen
   (keine Spiegelung, nur Text dreht - "RTL ohne Layout-Spiegelung"),
   Jahr-Spalte bleibt also links, nur ihr Text richtet sich rechts aus. */
html[dir="rtl"] .vita__year,
html[dir="rtl"] .vita__body { text-align: right; }

/* Lebenslauf komplett eingeklappt - nichts sichtbar bis zum Klick auf
   den Knopf, nicht nur eine Vorschau der ersten Eintraege (Ansage
   18.10., dritte Runde: "auf Button-Klick sieht man erst die Dinge"). */
.vita-wrap { position: relative; }
.vita-wrap:not(.offen) .vita { max-height: 0; overflow: hidden; }
.vita-toggle { margin-top: 3.25rem; }
@media (prefers-reduced-motion: no-preference) {
  .vita-wrap.offen .vita { transition: max-height .4s ease; }
}

/* Mitgliedschaften-Karten: Logo per CSS-Maske in Hausgruen eingefaerbt
   (Vorbild die-herzspezialisten.com/arzt-hotz.html), Logos selbst von
   dort uebernommen (Ansage 18.10., "die kannst du nehmen von
   die-herzspezialisten"). */
.mitglied-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; max-width: 58rem; margin: 2.75rem auto 0; }
/* Eigener, kleinerer Bodenabstand: Mitgliedschaften und die folgende
   Presse-Sektion teilen sich denselben hellen Hintergrund ohne Trenner,
   die normale .mitte-Polsterung beider Sektionen zusammen wirkte als
   riesige Luecke (Ansage 18.10., "Gap zu groß"). */
.mitgliedschaften-sektion { padding-bottom: 2rem; }
.mitglied-karte {
  background: #fff; padding: 2.5rem 1.5rem 2rem;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem;
  box-shadow: 0 0.5rem 1.25rem rgba(50, 88, 78, .07);
  transition: transform .3s cubic-bezier(.22,.7,.15,1), box-shadow .3s cubic-bezier(.22,.7,.15,1);
}
.mitglied-karte:hover { transform: translateY(-3px); box-shadow: 0 0.875rem 2rem rgba(50, 88, 78, .13); }
.mitglied-logo {
  display: inline-block; width: 7rem; height: 3.5rem; background-color: var(--gruen);
  -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat;
  opacity: .65; transition: opacity .3s ease;
}
.mitglied-karte:hover .mitglied-logo { opacity: 1; }
.mitglied-karte h3 { font-family: var(--serif); font-weight: 600; font-size: 1.0625rem; color: var(--gruen); margin: 0; line-height: 1.35; }
.mitglied-tag { font-family: var(--body); font-size: 0.6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(50, 88, 78, .6); }
/* Nachgebautes Siegel (SIEGEL_HTML): 1:1-Aufbau des echten
   wer-kennt-den-besten-Badges (Kopfband/weisser Koerper/Rang/Sterne/
   Wortmarke), nur in Hausgruen statt Orange (Ansage 18.10., "grünlich").
   EINE Karte mit zwei gestapelten Innenbereichen statt zwei getrennter
   Karten (Ansage 18.10., "der Batch soll rein batchen") - nur der
   aeussere Rahmen hat Ecken/Schatten, dazwischen kein Spalt. */
.siegel-karte { width: 10.5rem; border-radius: .75rem; overflow: hidden; box-shadow: 0 0.5rem 1.25rem rgba(50, 88, 78, .12); font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
/* Eigene Zeile zwischen "Weitere" und "Mitgliedschaften" statt Teil des
   Mitgliedschaften-Rasters (Ansage 18.10.). */
.siegel-reihe { display: flex; justify-content: center; padding: 3.5rem 1.25rem; }
.siegel-band { background: var(--gruen); color: #fff; text-align: center; font-weight: 700; font-size: 1.05rem; padding: 1rem 0 .9rem; }
.siegel-korpus { background: #fff; text-align: center; padding: 1.15rem .5rem 1.35rem; }
.siegel-rang { font-weight: 700; font-size: 1.3rem; color: var(--gruen); margin: 0 0 .6rem; letter-spacing: .02em; }
.siegel-sterne { color: rgba(50, 88, 78, .45); font-size: 1.15rem; letter-spacing: .12rem; margin-bottom: .75rem; line-height: 1; }
.siegel-marke { font-size: .76rem; color: rgba(50, 88, 78, .65); line-height: 1.25; margin: 0; font-weight: 400; }
.siegel-marke b { display: block; font-size: 1.05rem; letter-spacing: .01em; color: var(--gruen); font-weight: 800; }
/* Zweiter, dunkler Innenbereich derselben Karte: Bewertungsanzahl statt
   Durchschnittsnote (Ansage 18.10.). Kein eigener Rahmen/Schatten mehr -
   das uebernimmt jetzt .siegel-karte als gemeinsame Huelle. */
.siegel-korpus--dunkel { background: var(--gruen); padding: .85rem .5rem .9rem; }
.siegel-sterne-reihe { color: #fff; opacity: .85; font-size: 1rem; letter-spacing: .12rem; margin-bottom: .35rem; line-height: 1; }
.siegel-zahl { font-weight: 800; font-size: 1.5rem; color: #fff; margin: 0 0 .2rem; line-height: 1; }
.siegel-marke-hell { font-size: .72rem; color: rgba(255, 255, 255, .8); line-height: 1.2; margin: 0; font-weight: 400; }
@media (max-width: 760px) { .mitglied-karten { grid-template-columns: 1fr; max-width: 22rem; } }
@media (min-width: 761px) and (max-width: 980px) { .mitglied-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 40rem; } }
/* Bei 2 Spalten steht die 3. Karte sonst allein links - mittig ueber beide
   Spalten, in Einzelkartenbreite (Ansage 19.10., "mach das mittig, das 3."). */
@media (min-width: 761px) and (max-width: 980px) { .mitglied-karte:nth-child(3):last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 0.75rem); } }

.gruenpanel { background: var(--gruen); text-align: center; padding: 4rem 1.25rem 4.5rem; }
.gruenpanel h2 { font-family: var(--body); font-size: 4.375rem; color: #fff; margin-bottom: 1.875rem; line-height: 1.2; }
.gruenpanel .cv-eintrag { border-color: rgba(255,255,255,.35); }
.gruenpanel .cv-text { color: #fff; }

.media p { font-family: var(--serif); font-weight: 300; font-size: 1rem; line-height: 1.45; color: var(--gruen); max-width: 43.75rem; margin: 0 auto 1.25rem; }
.media a { color: var(--gruen); text-decoration: underline; text-underline-offset: 3px; }
.mitte-knopf { margin-top: 2.25rem; }
.uf-knopf { display: inline-block; border: 1px solid #fff; color: #fff; padding: 0.6875rem 2.125rem; font-family: "Avenir Light", Helvetica, sans-serif; font-size: 0.875rem; letter-spacing: 0.04em; }
.uf-knopf:hover { background: rgba(255,255,255,.12); }
.uf-knopf.gruen { border-color: var(--gruen); color: var(--gruen); }
.uf-knopf.gruen:hover { background: var(--gruen); color: #fff; }

.infokarten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.375rem; max-width: 55rem; margin: 0 auto 4rem; }
.infokarte { background: #fff; padding: 1.875rem 0.875rem; display: flex; align-items: center; justify-content: center; min-height: 6.5rem; }
.infokarte p { font-family: var(--serif); font-weight: 300; font-size: 1.0312rem; line-height: 1.35; color: var(--text); }

.standort-spalten { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2.125rem; max-width: 55rem; margin: 0 auto; align-items: start; }
.standort-spalten > div { border-top: 1px solid #b9c4c2; border-bottom: 1px solid #b9c4c2; padding: 1.625rem 0.5rem; min-height: 9.375rem; }
.standort-spalten h3 { font-family: var(--serif); font-weight: 600; font-size: 1.3125rem; color: var(--gruen); line-height: 1.4; }
.standort-spalten h3 a { color: var(--gruen); text-decoration: underline; text-underline-offset: 3px; }
.standort-spalten p { font-family: var(--serif); font-weight: 300; font-size: 1.0312rem; line-height: 1.6; color: var(--text); margin-bottom: 0.75rem; }
.standort-spalten a { color: var(--text); }
.standort-label { font-weight: 600; font-family: var(--serif); color: var(--gruen); }
.standort-web { margin-top: 1.875rem; }
.standort-web a { font-family: var(--serif); font-weight: 300; font-size: 1.0625rem; color: var(--gruen); text-decoration: underline; text-underline-offset: 3px; }
.logozeile { display: flex; justify-content: center; align-items: center; gap: 3rem; margin-top: 2.75rem; }
.logozeile img { height: 4.625rem; width: auto; }

.intl-karte { background: #fff; max-width: 40rem; margin: 0 auto; padding: 2.75rem 3.25rem; }
.intl-karte h2 { font-family: var(--serif); font-weight: 600; font-size: 1.875rem; color: var(--gruen); margin-bottom: 1.25rem; }
.intl-karte p { font-family: var(--serif); font-weight: 300; font-size: 1.0312rem; line-height: 1.65; color: var(--text); margin-bottom: 1rem; }
.intl-karte a:not(.knopf) { color: var(--gruen); text-decoration: underline; text-underline-offset: 3px; }

.kontakt-form { max-width: 38.75rem; margin: 0 auto; }
.kontakt-form textarea { width: 100%; padding: 0.5625rem 0.625rem; font-size: 0.9375rem; border: 1px solid #c9c9c9; background: #fff; font-family: inherit; }

.impressum { max-width: 47.5rem; margin: 0 auto; text-align: left; padding: 4rem 1.25rem 5.625rem; }
.impressum h1, .impressum h2 { font-family: var(--serif); font-weight: 600; font-size: 1.625rem; color: var(--gruen); margin: 2.375rem 0 0.875rem; }
.impressum p { font-family: var(--serif); font-weight: 300; font-size: 1.0312rem; line-height: 1.6; color: var(--text); margin-bottom: 0.75rem; }

.fehlerseite { max-width: 36rem; margin: 0 auto; text-align: center; padding: 8rem 1.25rem 9rem; }
.fehlerseite__icon { display: inline-flex; width: 4.5rem; height: 4.5rem; color: var(--teal); margin-bottom: 2rem; opacity: .85; }
.fehlerseite h1 { font-family: var(--serif); font-weight: 600; font-size: 2.25rem; line-height: 1.3; color: var(--gruen); margin: 0 0 1.25rem; }
.fehlerseite .fliess { margin-bottom: 0; }
@media (max-width: 760px) {
  .fehlerseite { padding: 5rem 1.25rem 6rem; }
  .fehlerseite__icon { width: 3.5rem; height: 3.5rem; }
  .fehlerseite h1 { font-size: 1.625rem; }
}

/* Blog */
.blogtabs { display: flex; justify-content: flex-start; gap: 2.5rem; max-width: 58.5rem; margin: 2.25rem auto 0; padding: 0 1.25rem; }
.blogtabs a { font-family: var(--serif); font-weight: 300; font-size: 1.1875rem; color: var(--text); }
.blogtabs a.aktiv, .blogtabs a:hover { color: var(--gruen); }
.aktuelle { border-top: 1px solid #e3e3e3; }
.aktuelle > h2 { font-family: var(--serif); font-weight: 300; font-size: 1.125rem; margin-bottom: 2rem; }

.artikel { max-width: 46.25rem; margin: 0 auto; padding: 3rem 1.25rem 4.375rem; }
.artikel-meta { font-family: "Avenir Light", Helvetica, sans-serif; font-size: 0.8438rem; color: #656565; margin-bottom: 1.625rem; }
.artikel-meta a { color: #656565; text-decoration: underline; text-underline-offset: 3px; }
.artikel h1 { font-family: var(--serif); font-weight: 600; font-size: 2.5rem; color: var(--gruen); line-height: 1.25; margin-bottom: 1.875rem; }
.artikel h2 { font-family: var(--serif); font-weight: 600; font-size: 1.75rem; color: var(--gruen); line-height: 1.25; margin: 2.375rem 0 1.125rem; }
.artikel p { font-family: var(--serif); font-weight: 300; font-size: 1.5rem; line-height: 1.25; color: var(--gruen); margin-bottom: 1.125rem; }
.artikel blockquote { border: 1px solid #d8d8d8; border-left: 3px solid var(--gruen); padding: 1.125rem 1.5rem; margin: 0 0 1.25rem; }
.artikel blockquote p { margin: 0; }
.artikel figure { margin: 1.625rem 0; }
.artikel figure img { width: 100%; height: auto; }
.artikel figcaption { font-family: var(--serif); font-weight: 300; font-size: 0.875rem; color: var(--gruen); text-align: center; margin-top: 0.5rem; }
.artikel .podcast-link a { color: var(--gruen); text-decoration: underline; text-underline-offset: 3px; font-size: 1.1875rem; }

/* Unterseiten-Footer (Werte am Original gemessen) */
.unterfooter { display: flex; width: calc(100% - 10rem); margin: 0 auto; }
.uf-links {
  flex: 0 0 50.4%; background: #058466; color: #fff; text-align: center;
  padding: 5.5rem 1.25rem; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.uf-name { font-family: var(--serif); font-weight: 600; font-size: 2.75rem; line-height: 1.2; margin-bottom: 0.25rem; }
.uf-klein { font-family: var(--serif); font-weight: 600; font-size: 1.5625rem; margin-bottom: 2.25rem; }
.uf-knopf {
  display: inline-block; background: #fff; color: var(--gruen); border: 0;
  padding: 0.3125rem 2.25rem; min-width: 13.25rem;
  font-family: var(--serif); font-weight: 300; font-size: 1.3125rem; letter-spacing: normal;
}
.uf-knopf:hover { background: var(--blatt); }
.uf-karte {
  flex: 1 1 49.6%; background: var(--grau); padding: 4.5rem 3.75rem;
  display: grid; grid-template-columns: auto 1fr; gap: 0 3.5rem; align-content: start;
}
.uf-label { font-family: var(--serif); font-weight: 600; font-size: 1.5625rem; color: var(--gruen); text-align: center; }
.uf-karte p { font-family: var(--serif); font-weight: 300; font-size: 1.125rem; line-height: 1.4; color: var(--gruen); margin-bottom: 1.5rem; }
.uf-karte a { color: var(--gruen); text-decoration: underline; text-underline-offset: 3px; }
.uf-trenner { grid-column: 2; border: 0; border-top: 1px solid #c8c8c8; margin: 0.25rem 0 1.5rem; }
.copyleiste { background: var(--gruen); text-align: center; padding: 1.75rem 1rem 2rem; width: calc(100% - 10rem); margin: 0 auto; }
.copyleiste p {
  font-family: var(--serif); font-weight: 600; font-size: 0.875rem;
  letter-spacing: 1.4px; line-height: 1.2; color: #fff; margin: 0;
}
.copyleiste .cl-abstand { margin-top: 1rem; }
.copyleiste a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 760px) {
  .seitenpill { position: static; display: inline-block; margin-top: 1.25rem; }
  .unterhero img { width: 100%; }
  .infokarten { grid-template-columns: repeat(2, 1fr); }
  .standort-spalten { grid-template-columns: 1fr; }
  .unterfooter { flex-direction: column; width: 100%; }
  .uf-karte { grid-template-columns: 1fr; gap: 0; }
  .copyleiste { width: 100%; }
}


/* ----- Unterseiten-Hero (Original: Bild ragt in die graue Sektion) ----- */
.unterhero { position: relative; height: 24.625rem; z-index: 2; }
.unterhero .hero-bild { top: 4.5rem; }
.unterhero .hero-box { left: 42.1875rem; top: 16.375rem; width: 31.4375rem; height: 14.125rem; }
.unterhero .hero-box h1, .unterhero .hero-box .hero-titel { font-family: var(--serif); font-weight: 600; font-size: 2.5rem; color: #fff; padding-left: 3.75rem; letter-spacing: 0.02em; }
.nach-hero { padding-top: 35.875rem; }
@media (max-width: 760px) {
  .unterhero { height: auto; }
  .unterhero .hero-bild { position: static; width: 100%; height: auto; }
  .unterhero .hero-box { position: static; width: auto; height: auto; padding: 24px 0; }
  .unterhero .hero-box h1, .unterhero .hero-box .hero-titel { padding-left: 20px; }
  .nach-hero { padding-top: 48px; }
}

/* ============================================================
   SANFTE MODERNISIERUNG
   Gleiche Inhalte, gleicher Charakter. Geaendert wird nur, was
   die Seite gedraengt wirken laesst: Luft, Typo-Ruhe, weichere
   Bildflaechen, feinere Karten. Keine Scroll-Effekte.
   ============================================================ */

:root { --luft: 7.5rem; }

/* --- Kopf: mehr Ruhe, Navigation leichter --- */
.hauptnav ul { padding: 1.75rem 0 1.25rem; }
.hauptnav a { transition: color .2s ease; }
.kopf { padding: 4rem 0 0.625rem; }
.kopf-titel .seitentitel { letter-spacing: 0.01em; }
.kopf-titel .untertitel { letter-spacing: 0.18em; margin-top: 0.5rem; }
.kopf-adresse, .kopf-kontakt { line-height: 1.75; }
.kopf-linie { margin-top: 7rem; }

/* --- Bildsektionen: Foto darf atmen, Schrift ruhiger --- */
.bildsektion::after { opacity: 0.68; }
.bildsektion h2 { line-height: 1.22; font-size: 4rem; max-width: 60rem; padding: 0 2rem; }

/* --- Abschnitte: deutlich mehr Luft --- */
.mitte { padding: var(--luft) 1.25rem calc(var(--luft) + 0.75rem); }
.mitte h2 { line-height: 1.18; margin-bottom: 3.75rem; }
.fliess { font-size: 1.1875rem; line-height: 1.85; max-width: 46rem; }

/* --- Lebenslauf: luftige Zeilen statt enger Liste --- */
.cv { padding-top: 4.5rem; }
.cv-eintrag { max-width: 38rem; padding: 2.25rem 0; border-bottom: 1px solid rgba(50,88,78,.18); }
.cv-datum { font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 0.875rem; opacity: .75; }
.cv-text { font-size: 2.125rem; line-height: 1.3; }

/* --- Gruene Flaeche --- */
.gruenpanel { padding: var(--luft) 1.25rem; }
.gruenpanel h2 { margin-bottom: 3rem; }
.gruenpanel .cv-eintrag { border-color: rgba(255,255,255,.22); }

/* --- Karten (Patienten-Information): Luft + feiner Rand --- */
.infokarten { gap: 1.75rem; max-width: 62rem; margin-bottom: 5.5rem; }
.infokarte {
  padding: 2.5rem 1.5rem; min-height: 9rem; border: 1px solid rgba(50,88,78,.10);
  transition: border-color .25s ease, transform .25s ease;
}
.infokarte:hover { border-color: rgba(50,88,78,.3); transform: translateY(-2px); }
.infokarte p { font-size: 1.1875rem; line-height: 1.5; color: var(--gruen); }

/* --- Blogkarten: ruhiger, mit sanftem Hover --- */
.blogband { padding: var(--luft) 0; }
.blogband > h2 { margin-bottom: 4.5rem; }
.blogkarten { gap: 2.25rem; max-width: 64rem; }
.blogkarte { border: 1px solid rgba(50,88,78,.12); transition: box-shadow .25s ease, transform .25s ease; }
.blogkarte:hover { box-shadow: 0 0.75rem 2rem rgba(50,88,78,.10); transform: translateY(-3px); }
.blogkarte img { height: 14.5rem; }
.blogkarte .bk-text { padding: 1.75rem 1.75rem 1rem; }
.blogkarte h3 { font-size: 1.5rem; line-height: 1.3; }
.blogkarte p { font-size: 1.0625rem; line-height: 1.65; margin-top: 0.875rem; }
.blogkarte .bk-fuss { margin: 0 1.75rem; padding: 0.875rem 0 1.25rem; }

/* --- Blogtabs --- */
.blogtabs { gap: 2.75rem; margin-top: 3.5rem; max-width: 64rem; padding: 0; width: calc(100% - 10rem); }
.blogtabs a { transition: color .2s ease; padding-bottom: 0.375rem; border-bottom: 2px solid transparent; }
.blogtabs a.aktiv { border-bottom-color: var(--gruen); }

/* --- Artikel: angenehme Lesebreite, weiches Zitat --- */
.artikel { max-width: 44rem; padding: 4.5rem 1.25rem var(--luft); }
.artikel h1 { font-size: 3rem; line-height: 1.18; margin-bottom: 2.25rem; }
.artikel h2 { font-size: 1.875rem; margin: 3.25rem 0 1.25rem; }
.artikel p { font-size: 1.3125rem; line-height: 1.6; }
.artikel blockquote {
  border: 0; border-left: 2px solid rgba(50,88,78,.25);
  background: transparent; padding: 0.25rem 0 0.25rem 1.75rem; margin-bottom: 1.5rem;
}
.artikel figure { margin: 2.75rem 0; }
.artikel figcaption { margin-top: 0.875rem; opacity: .8; }

/* --- Standort / Kontakt --- */
.standort-spalten { gap: 2.5rem; max-width: 62rem; }
.standort-spalten > div { border-color: rgba(50,88,78,.18); padding: 2.25rem 0.5rem; }
.standort-spalten p { line-height: 1.75; }
.intl-karte { padding: 3.5rem 4rem; max-width: 44rem; }
.intl-karte p { line-height: 1.8; }
.logozeile { gap: 4rem; margin-top: 3.5rem; }

/* --- Knoepfe: ruhiger Uebergang --- */
.uf-knopf, .signup-knopf { transition: background-color .25s ease, color .25s ease; }
.uf-knopf.gruen { padding: 0.75rem 2.5rem; }

/* --- Formulare --- */
.signup-karte { padding: 3.5rem 4rem 3.25rem; }
.signup-felder input, .kontakt-form textarea {
  border: 1px solid rgba(50,88,78,.22); padding: 0.75rem 0.875rem;
  transition: border-color .2s ease;
}
.signup-felder input:focus, .kontakt-form textarea:focus { outline: 0; border-color: var(--gruen); }

/* --- Fusszeile: etwas mehr Luft --- */
.uf-links { padding: 6.5rem 1.25rem; }
.uf-karte { padding: 5.5rem 4rem; }
.uf-knopf { padding: 0.625rem 2.5rem; transition: background-color .25s ease; }
.copyleiste { padding: 2.25rem 1rem 2.5rem; }

@media (max-width: 760px) {
  :root { --luft: 3.5rem; }
  .bildsektion h2 { font-size: 2.5rem; }
  .cv-text { font-size: 1.5rem; }
  .artikel h1 { font-size: 2.125rem; }
  .artikel p { font-size: 1.125rem; }
  .intl-karte, .signup-karte { padding: 2rem 1.5rem; }
  .uf-karte, .uf-links { padding: 3rem 1.5rem; }
  .blogtabs { width: 100%; padding: 0 1.25rem; }
}

/* ============================================================
   GROESSERE SCHRIFT, VIDEO-BAENDER, EDLE HOVER, MOBIL-MENUE
   ============================================================ */

/* --- Ueberlappung beheben: Hero ragt ins Grau, Inhalt startet darunter --- */
.mitte.nach-hero { padding-top: 35.875rem; }

/* --- Alles eine Stufe groesser --- */
.hauptnav a { font-size: 1.1875rem; }
.kopf-adresse, .kopf-kontakt { font-size: 1.1875rem; }
.fliess { font-size: 1.3125rem; line-height: 1.8; max-width: 48rem; }
.infokarte p { font-size: 1.375rem; line-height: 1.45; }
.infokarte { min-height: 10rem; padding: 2.75rem 1.5rem; }
.media p { font-size: 1.125rem; line-height: 1.55; max-width: 48rem; }
.blogkarte h3 { font-size: 1.625rem; }
.blogkarte p { font-size: 1.125rem; line-height: 1.55; }
.blogkarte .bk-fuss { font-size: 0.9375rem; }
.blogtabs a { font-size: 1.3125rem; }
.standort-spalten p { font-size: 1.25rem; }
.standort-spalten h3 { font-size: 1.375rem; }
.intl-karte p { font-size: 1.1875rem; }
.intl-karte h2 { font-size: 2.125rem; }
.uf-karte p { font-size: 1.25rem; }
.uf-label { font-size: 1.75rem; }
.uf-knopf { font-size: 1.4375rem; }
.signup-karte .sub { font-size: 1.25rem; }
.signup-felder label { font-size: 0.9375rem; }
.signup-felder input, .kontakt-form textarea { font-size: 1.0625rem; }
.copyleiste p { font-size: 0.9375rem; }
.impressum p { font-size: 1.1875rem; line-height: 1.7; }
.artikel-meta { font-size: 1rem; }

/* --- Video-Baender: laufendes Bild, Ton aus --- */
.bildsektion.band { height: 26.875rem; }
.bildsektion.band video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bildsektion.band::after { opacity: 0.42; }

/* --- Edle Hover-Effekte: ruhig, langsam, nichts springt --- */
.blogkarte a { display: block; overflow: hidden; }
.blogkarte img { transition: transform 1.1s cubic-bezier(.22,.61,.36,1); }
.blogkarte:hover img { transform: scale(1.045); }
.blogkarte h3 a { background-image: linear-gradient(var(--link), var(--link));
  background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .5s cubic-bezier(.22,.61,.36,1), color .3s ease; padding-bottom: 2px; }
.blogkarte:hover h3 a { background-size: 100% 1px; color: var(--gruen); }
.hauptnav a { position: relative; }
.hauptnav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.3rem;
  height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.22,.61,.36,1); }
.hauptnav a:hover::after { transform: scaleX(1); }
.hauptnav .aktiv > a::after { transform: scaleX(1); }
.media a, .intl-karte a, .standort-web a, .uf-karte a { transition: opacity .3s ease; }
.media a:hover, .intl-karte a:not(.knopf):hover, .standort-web a:hover, .uf-karte a:hover { opacity: .62; }
.logozeile img { transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.logozeile img:hover { transform: translateY(-3px); }

/* --- Mobil: Burger + Anruf-Knopf, grosse Flaechen --- */
.burger, .mobil-anruf { display: none; }
@media (max-width: 1023px) {
  .burger {
    display: flex; flex-direction: column; justify-content: center; gap: 6px;
    width: 52px; height: 52px; margin: 14px auto 0; padding: 12px;
    background: none; border: 0; cursor: pointer;
  }
  .burger span { display: block; height: 2px; background: var(--gruen); transition: transform .3s ease, opacity .3s ease; }
  .menue-offen .burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .menue-offen .burger span:nth-child(2) { opacity: 0; }
  .menue-offen .burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  .js .hauptnav { display: none; }
  .js .menue-offen .hauptnav { display: block; }
  .hauptnav ul { flex-direction: column; width: 100%; gap: 0; padding: 0.5rem 0 1rem; }
  .hauptnav li { border-bottom: 1px solid rgba(50,88,78,.14); }
  .hauptnav a { display: block; padding: 1.125rem 1.5rem; font-size: 1.375rem; text-align: center; }
  .hauptnav a::after { display: none; }
  .hauptnav .dropdown > ul { position: static; transform: none; display: flex; border: 0; background: var(--blatt); }

  .mobil-anruf {
    display: block; margin: 0 1.25rem 1rem; padding: 1.125rem 1rem;
    background: var(--gruen); color: #fff; text-align: center;
    font-family: var(--serif); font-weight: 600; font-size: 1.375rem;
  }
  .kopf { grid-template-columns: 1fr; text-align: center; padding: 1.5rem 0 0.5rem; width: calc(100% - 2.5rem); }
  .kopf-titel .seitentitel { font-size: 2.5rem; }
  .kopf-titel .untertitel { font-size: 1.25rem; }
  .kopf-adresse, .kopf-kontakt { font-size: 1.125rem; }
  .kopf-linie { margin-top: 1.5rem; width: calc(100% - 2.5rem); }
  .nav-linie { width: 100%; }
  .mitte.nach-hero { padding-top: 3.5rem; }
  .bildsektion.band { height: 14rem; }
  .infokarten { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .infokarte p { font-size: 1.125rem; }
}

/* --- Sprachauswahl: gleiche Groesse wie die Hauptnavigation --- */
.hauptnav .dropdown > ul {
  min-width: 15rem; padding: 0.75rem 0; border-color: rgba(50,88,78,.18);
  box-shadow: 0 0.75rem 2rem rgba(50,88,78,.12);
}
.hauptnav .dropdown > ul a {
  font-size: 1.1875rem; padding: 0.875rem 1.75rem; text-align: center;
  transition: background-color .25s ease, color .25s ease;
}
.hauptnav .dropdown > ul a:hover { color: var(--gruen); }
/* Eigener, deutlicherer Hover fuer die Sprachliste (vorher komplett
   unsichtbar: background:none hat jeden Effekt gekillt) - sanfte
   gruene Flaeche + Text ruckt minimal nach rechts ein (Ansage 18.10.,
   "nice hover wenn man über die Punkte hovert"). */
.hauptnav .dropdown.sprache > ul a {
  transition: background-color .2s ease, color .2s ease, padding-left .2s ease;
}
.hauptnav .dropdown.sprache > ul a:hover,
.hauptnav .dropdown.sprache > ul a:focus-visible {
  background: rgba(50,88,78,.08); color: var(--gruen); padding-left: 2.25rem;
}
.hauptnav .dropdown > ul a::after { display: none; }
@media (max-width: 1023px) {
  .hauptnav .dropdown > ul { min-width: 0; box-shadow: none; flex-direction: column; padding: 0; }
  .hauptnav .dropdown > ul a { font-size: 1.1875rem; padding: 0.875rem 1.5rem; }
}

/* ============================================================
   LESBARKEIT: Cormorant Light ist eine Zierschrift und bei
   kleinen Graden zu duenn. Kurze Beschriftungen bekommen den
   kraeftigen Schnitt, laufende Texte die Lesesschrift Kepler.
   ============================================================ */

/* Karten und kurze Beschriftungen: kraeftiger Schnitt, voller Kontrast */
.infokarte p {
  font-family: var(--serif); font-weight: 600; font-size: 1.4375rem;
  line-height: 1.4; color: var(--gruen);
}
.standort-spalten h3 { font-weight: 600; }
.uf-label, .cv-text { color: var(--gruen); }

/* Laufende Texte: Lesesschrift statt Zierschrift */
.standort-spalten p,
.uf-karte p,
.intl-karte p,
.media p,
.blogkarte p,
.impressum p,
.signup-karte .sub {
  font-family: var(--body); font-weight: 400; color: var(--gruen);
}
.standort-spalten p { font-size: 1.125rem; line-height: 1.7; }
.uf-karte p { font-size: 1.125rem; line-height: 1.7; }
.intl-karte p { font-size: 1.0625rem; line-height: 1.8; }
.media p { font-size: 1.0625rem; line-height: 1.7; }
.blogkarte p { font-size: 1.0625rem; line-height: 1.65; }
.impressum p { font-size: 1.0625rem; line-height: 1.8; }
.signup-karte .sub { font-size: 1.0625rem; }

/* Artikeltext: Zitatbloecke lesbarer */
.artikel blockquote p { font-family: var(--body); font-size: 1.1875rem; line-height: 1.8; color: var(--gruen); }
.artikel > p { font-family: var(--body); font-size: 1.3125rem; line-height: 1.75; }

/* Lebenslauf-Datum wieder gut lesbar */
.cv-datum { opacity: 1; font-family: var(--body); font-size: 0.9375rem; letter-spacing: .1em; }

@media (max-width: 1023px) {
  .infokarte p { font-size: 1.1875rem; }
  .standort-spalten p, .uf-karte p { font-size: 1.0625rem; }
}

/* ============================================================
   EINBLENDEN beim Hereinscrollen: ruhig, von unten, ohne
   Skalieren (nichts kann sich mehr ueberdecken).
   ============================================================ */
.auf-js [data-auf] {
  opacity: 0; transform: translateY(1.125rem);
  transition: opacity .85s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.auf-js [data-auf].da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .auf-js [data-auf] { opacity: 1; transform: none; transition: none; }
}

/* --- Portraet seitlich neben dem Text (moderner als untereinander) --- */
.portraet-reihe {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 4.5rem;
  align-items: start; max-width: 72rem; margin: 0 auto; text-align: left;
}
.portraet-reihe .portrait { width: 100%; margin: 0; }
.portraet-reihe .fliess { margin: 0; max-width: none; text-align: left; }
@media (max-width: 1023px) {
  .portraet-reihe { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
  .portraet-reihe .fliess { text-align: left; }
}

/* ============================================================
   MOBIL: eine einheitliche Grenze (860px). Alles, was auf dem
   Desktop fest positioniert ist, wird hier zu einer einfachen
   Spalte. Grosse Schrift, grosse Flaechen, breite Tippziele.
   ============================================================ */
@media (max-width: 1023px) {
  /* Seitenraender: statt 160px nur noch 20px */
  .inhalt, .kopf, .nav-linie, .kopf-linie,
  .unterfooter, .copyleiste, .blogtabs { width: calc(100% - 2.5rem) !important; }
  .hauptnav ul { width: 100%; }

  /* Hero: aus der absoluten Positionierung in eine Spalte */
  .hero, .unterhero { position: static; height: auto !important; padding: 0 0 2rem; }
  .hero-bild, .unterhero .hero-bild {
    position: static !important; width: 100% !important; height: auto !important;
    max-height: 68vw; object-fit: cover;
  }
  .hero-box, .unterhero .hero-box {
    position: static !important; width: calc(100% - 2.5rem) !important; height: auto !important;
    margin: -2.5rem 1.25rem 0; padding: 1.75rem 1.5rem; display: block;
  }
  .hero-box h1, .hero-box h2,
  .unterhero .hero-box h1, .unterhero .hero-box .hero-titel { font-size: 1.875rem !important; padding: 0 !important; line-height: 1.25; }

  /* Abschnitte */
  .mitte { padding: 3.5rem 1.25rem 4rem; }
  .mitte.nach-hero { padding-top: 3.5rem !important; }
  .mitte h2 { font-size: 2.25rem; margin-bottom: 2rem; line-height: 1.2; }
  .fliess { font-size: 1.125rem; line-height: 1.75; }

  /* Bildsektionen: hohe Formate statt breiter Baender */
  .bildsektion { height: 17rem !important; }
  .bildsektion h2 { font-size: 1.875rem !important; padding: 0 1.25rem !important; line-height: 1.3; }
  .bildsektion.band { height: 11rem !important; }

  /* Karten */
  .infokarten { grid-template-columns: 1fr 1fr; gap: 0.875rem; margin-bottom: 2.5rem; }
  .infokarte { padding: 1.5rem 0.75rem; min-height: 7rem; }
  .infokarte p { font-size: 1.0625rem; line-height: 1.35; }
  .blogkarten { grid-template-columns: 1fr; gap: 1.5rem; max-width: 26rem; padding: 0 1.25rem; }
  .blogkarte img { height: 12rem; }
  .blogkarte h3 { font-size: 1.375rem; }

  /* Lebenslauf */
  .cv-eintrag { padding: 1.5rem 0; }
  .cv-text { font-size: 1.375rem !important; line-height: 1.35; }
  .cv-datum { font-size: 0.875rem; }
  .gruenpanel { padding: 3.5rem 1.25rem; }
  .gruenpanel h2 { font-size: 2.25rem; }

  /* Blog-Reiter */
  .blogtabs { gap: 1.5rem; margin-top: 2rem; justify-content: center; flex-wrap: wrap; }
  .blogtabs a { font-size: 1.125rem; }

  /* Artikel */
  .artikel { padding: 2.5rem 1.25rem 3.5rem; }
  .artikel h1 { font-size: 2rem; }
  .artikel h2 { font-size: 1.5rem; margin: 2.25rem 0 1rem; }
  .artikel blockquote { padding-left: 1rem; }
  .artikel figure { margin: 1.75rem 0; }

  /* Kontakt */
  .standort-spalten { grid-template-columns: 1fr; gap: 0; }
  .standort-spalten > div { border-top: 0; padding: 1.5rem 0; }
  .standort-spalten > div:first-child { border-top: 1px solid rgba(50,88,78,.18); }
  .logozeile { gap: 2rem; flex-wrap: wrap; }
  .logozeile img { height: 3.5rem; }
  .intl-karte { padding: 2rem 1.5rem; }
  .intl-karte h2 { font-size: 1.75rem; }

  /* Formulare: ein Feld pro Zeile, grosse Tippziele */
  .signup-felder { grid-template-columns: 1fr; gap: 1rem; }
  .signup-karte { padding: 2rem 1.5rem; }
  .signup-felder input, .kontakt-form textarea { padding: 0.875rem; font-size: 1.0625rem; }
  .signup-knopf { width: 100%; padding: 1rem; font-size: 1.0625rem; }

  /* Fusszeile */
  .unterfooter { flex-direction: column; }
  .uf-links, .uf-karte { flex: 1 1 auto; padding: 2.75rem 1.5rem; }
  .uf-name { font-size: 2.125rem; }
  .uf-klein { font-size: 1.25rem; margin-bottom: 1.5rem; }
  .uf-knopf { font-size: 1.1875rem; width: 100%; max-width: 20rem; padding: 0.875rem 1rem; }
  .uf-karte { grid-template-columns: 1fr; gap: 0; text-align: center; }
  .uf-trenner { grid-column: 1; }
  .copyleiste { padding: 1.75rem 1rem 2rem; }

  .impressum { padding: 2.5rem 1.25rem 3.5rem; }
}

/* Sehr schmale Geraete */
@media (max-width: 420px) {
  .infokarten { grid-template-columns: 1fr; }
  .kopf-titel .seitentitel { font-size: 2.125rem; }
  .mitte h2 { font-size: 1.875rem; }
}

/* ============================================================
   ABSCHNITTS-PILLS nach dem DHS-Muster, aber ECKIG.
   Kleine Marke ueber der Ueberschrift, gleiche Mechanik wie auf
   den anderen Seiten, nur in den Dochotz-Farben und -Schriften.
   ============================================================ */
.pill {
  display: inline-flex; align-items: center; gap: 0.625rem;
  font-family: var(--body); font-size: 0.75rem; font-weight: 400;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gruen);
  padding: 0.5rem 1rem; margin-bottom: 1.75rem;
  background: rgba(50,88,78,.07);
  border: 1px solid rgba(50,88,78,.34);
  border-radius: 0;                 /* eckig */
}
.pill::before {
  content: ""; width: 6px; height: 6px; background: var(--teal); flex: none;
}
.gruenpanel .pill {
  color: #fff; background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.3);
}
.gruenpanel .pill::before { background: #fff; }
.pill + h2 { margin-top: 0; }

@media (max-width: 1023px) {
  .pill { font-size: 0.6875rem; padding: 0.4375rem 0.875rem; margin-bottom: 1.25rem; }
}

/* --- Keine doppelten Unterstreichungen: die aktive Seite wird nur
       durch die Farbe markiert, die Linie kommt erst beim Darüberfahren --- */
.hauptnav .aktiv > a::after { transform: scaleX(0); }
.hauptnav .aktiv > a:hover::after { transform: scaleX(1); }
.blogtabs a.aktiv { border-bottom-color: transparent; }

/* --- Pill ohne Punkt: nur die Schrift, ruhiger --- */
.pill::before { display: none; }
.pill { gap: 0; padding: 0.5625rem 1.125rem; }

/* --- Pill mittig wie die Überschrift darüber/darunter --- */
.blogband, .artikel + .blogband { text-align: center; }
.blogband .blogkarten, .blogband .bk-text { text-align: left; }
.pill { margin-left: auto; margin-right: auto; }

/* ============================================================
   MENUE nach dem Cardio-Pulse-Muster, in Dochotz-Farben, eckig
   ============================================================ */

/* Pill groesser und ruhiger */
.pill {
  font-size: 0.9375rem; letter-spacing: .16em;
  padding: 0.75rem 1.5rem; margin-bottom: 2rem;
}

/* Sprach-Globus statt Wort */
.sprach-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; padding: 0;
  background: none; border: 1px solid transparent; border-radius: 0;
  color: var(--gruen); cursor: pointer;
  transition: border-color .25s ease, color .25s ease;
}
.sprach-knopf:hover, .dropdown.sprache:hover .sprach-knopf,
.dropdown.sprache:focus-within .sprach-knopf { border-color: rgba(50,88,78,.34); color: var(--link); }

/* Aufklappmenue: rechtsbuendig, damit es nicht aus dem Bild laeuft */
.hauptnav .dropdown.sprache > ul {
  left: auto; right: 0; transform: none;
  min-width: 13rem; border-radius: 0;
}
/* Bei Arabisch (RTL) steht der Globus-Knopf links statt rechts in der
   Reihe (Flex-Reihenfolge dreht bei dir="rtl" automatisch, anders als
   Text-align) - darum muss das Menue hier linksbuendig aufklappen statt
   nach links aus dem Bild zu laufen (Fehler gefunden 17.10., "Issues
   mit der andersrummen Leseweise"). */
html[dir="rtl"] .hauptnav .dropdown.sprache > ul {
  left: 0; right: auto;
}
.hauptnav .dropdown.sprache > ul a { text-align: left; }

/* Telefon mit Symbol */
.kopf-tel { display: inline-flex; align-items: center; gap: 0.5rem; }
.kopf-tel svg { flex: none; }

@media (max-width: 1023px) {
  .sprach-knopf { width: 100%; height: auto; padding: 1.125rem; border: 0; }
  .hauptnav .dropdown.sprache > ul { position: static; min-width: 0; }
  .kopf-tel { justify-content: center; }
}

/* --- Kopfbereich: Bild und Titelkasten blenden nacheinander auf --- */
.hero .hero-bild[data-auf] { transition-duration: 1.1s; }
.hero .hero-box[data-auf] { transition-delay: .22s !important; }

/* --- Kein Unterstreichungs-Effekt im Menue: nur die Farbe reagiert --- */
.hauptnav a::after { display: none !important; }
.hauptnav a:hover { color: var(--link); }

/* --- Herzschlag auf dem Termin-Knopf (Muster aus Cardio Pulse) --- */
.uf-knopf { animation: herzschlag 8s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes herzschlag {
  0%, 88%, 100% { transform: scale(1); }
  90%           { transform: scale(1.055); }
  92%           { transform: scale(.992); }
  94%           { transform: scale(1.038); }
  96%           { transform: scale(1); }
}
.uf-knopf:hover { animation: herzschlag-kurz 1s ease-in-out; }
@keyframes herzschlag-kurz {
  0%, 100% { transform: scale(1); }
  20%      { transform: scale(1.05); }
  40%      { transform: scale(1); }
  60%      { transform: scale(1.035); }
  80%      { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .uf-knopf, .uf-knopf:hover { animation: none !important; }
}

/* --- Globus sitzt jetzt auf einer Linie mit den Menuepunkten --- */
.hauptnav ul { align-items: center; }
.hauptnav li { display: flex; align-items: center; }
.sprach-knopf { width: 2.25rem; height: 2.25rem; line-height: 0; }
.sprach-knopf svg { display: block; }
.hauptnav .dropdown.sprache { position: relative; }
.hauptnav .dropdown.sprache > ul { top: calc(100% + 0.5rem); }

/* ============================================================
   KOPFBEREICH: hochwertiger Auftritt in drei Stufen.
   Das Bild wischt von links auf und beruhigt sich aus einer
   leichten Vergroesserung, der Kasten schiebt sich dazu,
   der Titel folgt zuletzt.
   ============================================================ */
.auf-js .hero .hero-bild[data-auf] {
  opacity: 1; transform: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.25s cubic-bezier(.65,.02,.2,1), transform 1.6s cubic-bezier(.22,.61,.36,1);
}
.auf-js .hero .hero-bild[data-auf].da { clip-path: inset(0 0 0 0); }
.auf-js .hero .hero-bild[data-auf]        { transform: scale(1.06); }
.auf-js .hero .hero-bild[data-auf].da     { transform: scale(1); }

.auf-js .hero .hero-box[data-auf] {
  opacity: 0; transform: translateX(2.25rem);
  transition: opacity .9s cubic-bezier(.22,.61,.36,1) .42s,
              transform 1.05s cubic-bezier(.22,.61,.36,1) .42s;
}
.auf-js .hero .hero-box[data-auf].da { opacity: 1; transform: none; }

.auf-js .hero .hero-box h1[data-auf],
.auf-js .hero .hero-box h2[data-auf] {
  opacity: 0; transform: translateY(0.75rem);
  transition: opacity .8s ease .78s, transform .8s cubic-bezier(.22,.61,.36,1) .78s;
}
.auf-js .hero .hero-box h1[data-auf].da,
.auf-js .hero .hero-box h2[data-auf].da { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .auf-js .hero .hero-bild[data-auf],
  .auf-js .hero .hero-box[data-auf],
  .auf-js .hero .hero-box h1[data-auf],
  .auf-js .hero .hero-box h2[data-auf] {
    opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important;
  }
}

/* --- Video-Baender hoeher und klarer: das Bild soll wirken --- */
.bildsektion.band { height: 36rem; }
.bildsektion.band::after { opacity: 0.3; }
@media (max-width: 1023px) { .bildsektion.band { height: 17rem !important; } }

/* --- Video-Baender deutlich hoeher: das Motiv muss erkennbar sein --- */
.bildsektion.band { height: 46rem; }
.bildsektion.band::after { opacity: 0.22; }
@media (max-width: 1023px) { .bildsektion.band { height: 22rem !important; } }

/* --- Portraet groesser neben dem Text --- */
.portraet-reihe { grid-template-columns: 1fr 1fr; gap: 5rem; max-width: 78rem; }

/* --- Lebenslauf: deutlich sichtbarer Auftritt, Eintrag fuer Eintrag --- */
.auf-js .cv-eintrag[data-auf] {
  opacity: 0; transform: translateY(2.5rem);
  transition: opacity 1s cubic-bezier(.22,.61,.36,1), transform 1s cubic-bezier(.22,.61,.36,1);
}
.auf-js .cv-eintrag[data-auf].da { opacity: 1; transform: none; }
/* die Trennlinie wächst mit */
.auf-js .cv-eintrag[data-auf] { border-bottom-color: transparent; transition-property: opacity, transform, border-color; }
.auf-js .cv-eintrag[data-auf].da { border-bottom-color: rgba(50,88,78,.18); }
.auf-js .gruenpanel .cv-eintrag[data-auf].da { border-bottom-color: rgba(255,255,255,.22); }

/* ============================================================
   WAPPEN: die wichtigsten Stationen sichtbar herausgestellt.
   Eckig, eigene schlichte Embleme, keine fremden Logos.
   ============================================================ */
.wappen-reihe {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
  max-width: 68rem; margin: 5rem auto 0;
}
.wappen {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: #fff; border: 1px solid rgba(50,88,78,.14);
  padding: 2.75rem 1.75rem 2.5rem;
  transition: border-color .3s ease, transform .4s cubic-bezier(.22,.61,.36,1),
              box-shadow .4s ease;
}
.wappen:hover {
  border-color: rgba(50,88,78,.34); transform: translateY(-4px);
  box-shadow: 0 1rem 2.5rem rgba(50,88,78,.10);
}
.wp-marke { display: block; width: 4.5rem; height: 4.5rem; margin-bottom: 1.5rem; }
.wp-marke svg {
  width: 100%; height: 100%;
  fill: none; stroke: var(--teal); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.wp-oben {
  font-family: var(--body); font-size: 0.8125rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 0.875rem;
}
.wp-mitte {
  font-family: var(--serif); font-weight: 600; font-size: 1.5rem;
  line-height: 1.3; color: var(--gruen);
}
.wp-unten {
  font-family: var(--body); font-size: 1rem; line-height: 1.5;
  color: var(--gruen); opacity: .78; margin-top: 0.625rem;
}
@media (max-width: 1023px) {
  .wappen-reihe { grid-template-columns: 1fr; gap: 1rem; margin-top: 2.5rem; max-width: 26rem; }
  .wappen { padding: 2rem 1.25rem; }
  .wp-marke { width: 3.5rem; height: 3.5rem; margin-bottom: 1rem; }
  .wp-mitte { font-size: 1.25rem; }
}

/* --- Sprachmenue: unsichtbare Bruecke ueber den Spalt, damit es beim
       Hinunterfahren nicht zuklappt --- */
.hauptnav .dropdown.sprache::after {
  content: ""; position: absolute; top: 100%; left: -1rem; right: -1rem;
  height: 0.75rem; display: block;
}
.hauptnav .dropdown.sprache:hover::after,
.hauptnav .dropdown.sprache:focus-within::after { pointer-events: auto; }
/* Menue bleibt offen, solange Maus auf Knopf ODER Menue ist */
.hauptnav .dropdown.sprache > ul { top: calc(100% + 0.75rem); }

/* --- Kopf: Adresse links und Kontakt rechts auf gleicher Linie --- */
.kopf { align-items: center; }
.kopf-adresse, .kopf-kontakt {
  padding-top: 0; margin: 0;
  font-size: 1.1875rem; line-height: 1.85;
}
.kopf-kontakt p { margin: 0; }
.kopf-insta { margin-top: 0.875rem; }
.kopf-insta svg { width: 1.3125rem; height: 1.3125rem; }
/* gleicher optischer Block: beide Spalten gleich hoch ausrichten */
.kopf-adresse, .kopf-kontakt { display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 1023px) {
  .kopf-adresse, .kopf-kontakt { line-height: 1.7; }
  .kopf-insta { margin-top: 0.75rem; }
}

/* Kopfbild: waehrend der Einblendung (scale 1.06 -> 1) ragt es 3% ueber den
   Rand und erzeugt auf dem Handy kurz einen Querscroller. Abschneiden. */
.hero, .unterhero { overflow: hidden; }


/* ════════════════════════════════════════════════════════════════════
   MOBILER KOPF UND MENUE  (unter 1024px)
   Struktur, Masse und Verhalten wortgleich aus cardio-pulse.de
   (site-shell.css, Block "Mobiler Kopf"), nur in den Dochotz-Farben
   und mit geraden Kanten statt runder Pillen.
   Aufgebaut von /assets/js/mobil-menu.js
   ════════════════════════════════════════════════════════════════════ */
:root {
  --mn-gruen: #32584E;
  --mn-gruen-2: #27463E;
  --mn-linie: rgba(50,88,78,.18);
  --mn-weich: rgba(50,88,78,.72);
  --mn-blatt: #fff;
  --mn-r: 0;                 /* gerade Kanten, Dochotz-Stil */
}
.mnav-top, .mnav-btn, .mnav-quick, .mnav, .fab-call { display: none; }

@media (max-width: 1023px) {
  /* alter Handy-Kopf tritt ab */
  .site-header .burger,
  .site-header .mobil-anruf,
  .site-header .hauptnav,
  .site-header .nav-linie,
  .site-header .inhalt.kopf,
  .site-header .kopf-linie { display: none !important; }

  .mnav-top {
    display: grid; grid-template-columns: 44px minmax(0,1fr) 44px;
    align-items: center; justify-items: center; gap: 4px;
    padding: 26px 16px 6px;
  }
  .mnav-word {
    grid-column: 2; justify-self: center; text-align: center;
    text-decoration: none; color: var(--mn-gruen); min-width: 0; max-width: 100%;
  }
  .mnav-word b {
    display: block; font-family: var(--serif); font-weight: 600;
    font-size: clamp(21px, 6.4vw, 29px); letter-spacing: .02em; line-height: 1.15;
  }
  .mnav-word small {
    display: block; margin-top: 7px; font-family: var(--serif); font-weight: 600;
    font-size: 15px; letter-spacing: .24em; text-transform: uppercase; color: var(--mn-weich);
  }
  .mnav-btn {
    display: inline-flex; grid-column: 3; grid-row: 1;
    justify-self: end; align-self: center; margin: 0 -8px 0 0;
    width: 48px; height: 48px; align-items: center; justify-content: center;
    padding: 0; border: 1px solid var(--mn-linie); border-radius: var(--mn-r);
    background: #fff; color: var(--mn-gruen); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mnav-btn__lines { display: flex; flex-direction: column; gap: 5px; width: 18px; }
  .mnav-btn__lines i { display: block; height: 2px; border-radius: 2px; background: currentColor; }

  .mnav-quick {
    display: flex; flex-direction: column; align-items: center;
    gap: 14px; padding: 6px 24px 22px; text-align: center;
  }
  .mnav-quick__addr {
    position: relative; display: block; margin: 0; padding: 10px 12px;
    min-height: 44px; font: inherit; font-family: var(--serif); font-size: 14px;
    font-weight: 600; line-height: 1.5; color: var(--mn-weich);
    background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .mnav-quick__addr-text { display: block; transition: opacity .2s ease; }
  .mnav-quick__addr-done {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .2s ease; pointer-events: none;
  }
  .mnav-quick__addr.is-done .mnav-quick__addr-text { opacity: 0; }
  .mnav-quick__addr.is-done .mnav-quick__addr-done { opacity: 1; }
  .mnav-quick__call {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    width: min(340px, 100%); min-height: 58px; padding: 12px 30px; box-sizing: border-box;
    border: 0; border-radius: var(--mn-r); background: var(--mn-gruen); color: #fff;
    text-decoration: none; box-shadow: 0 14px 30px -18px rgba(50,88,78,.55);
  }
  .mnav-quick__call:hover, .mnav-quick__call:active { color: #fff; background: var(--mn-gruen-2); }
  .mnav-quick__call svg { flex: 0 0 auto; }
  .mnav-quick__t { display: flex; flex-direction: column; align-items: center; line-height: 1.2; text-align: center; }
  .mnav-quick__t b { font-family: var(--serif); font-size: 19px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
  .mnav-quick__t small { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: inherit; opacity: .92; }

  html.mnav-open { overflow: hidden; }
  .mnav {
    display: block; position: fixed; inset: 0; z-index: 1200; overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 24px calc(48px + env(safe-area-inset-bottom, 0px));
    background: var(--mn-blatt); opacity: 0; visibility: hidden;
    transform: translateY(-12px);
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  }
  .mnav.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease; }
  .mnav__inner { max-width: 520px; margin: 0 auto; text-align: center; }
  .mnav__head { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; min-height: 64px; }
  .mnav__title {
    grid-column: 2; font-size: 12px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--mn-weich);
  }
  .mnav__close {
    position: fixed; top: 26px; right: 16px; z-index: 3;
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; padding: 0;
    border: 1px solid var(--mn-linie); border-radius: var(--mn-r);
    background: #fff; color: var(--mn-gruen); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mnav__x { position: relative; width: 18px; height: 14px; display: block; }
  .mnav__x i {
    position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor;
    transition: transform .32s cubic-bezier(.22,.7,.15,1), opacity .2s ease;
  }
  .mnav__x i:nth-child(1) { top: 0; }
  .mnav__x i:nth-child(2) { top: 6px; }
  .mnav__x i:nth-child(3) { top: 12px; }
  .mnav.is-open .mnav__x i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .mnav.is-open .mnav__x i:nth-child(2) { opacity: 0; transform: scaleX(.2); }
  .mnav.is-open .mnav__x i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* Zeilen: ein Stil fuer alle Menuepunkte */
  .mnav__list { display: flex; flex-direction: column; }
  .mnav__link {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; margin: 0; padding: 20px 0; font: inherit;
    font-family: var(--serif); font-size: 26px; font-weight: 400; line-height: 1.2;
    color: var(--mn-gruen); background: none; border: 0;
    border-bottom: 1px solid var(--mn-linie); text-decoration: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mnav__link[aria-current] { font-weight: 600; }
  .mnav__link:hover, .mnav__link:active { color: var(--mn-gruen-2); }

  /* Knoepfe: dieselbe Familie wie auf der Seite */
  .mnav__actions { display: grid; gap: 10px; margin: 26px 0 0; }
  .mnav__cta {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    min-height: 58px; padding: 0 20px; font-family: var(--serif); font-size: 18px;
    color: #fff; background: var(--mn-gruen);
    border: 1px solid var(--mn-gruen); border-radius: var(--mn-r);
    text-decoration: none; -webkit-tap-highlight-color: transparent;
  }
  .mnav__cta:hover, .mnav__cta:active { color: #fff; background: var(--mn-gruen-2); border-color: var(--mn-gruen-2); }
  .mnav__cta--ghost { color: var(--mn-gruen); background: #fff; border-color: var(--mn-linie); }
  .mnav__cta--ghost:active { color: #fff; background: var(--mn-gruen); border-color: var(--mn-gruen); }
  @media (hover: hover) { .mnav__cta--ghost:hover { color: #fff; background: var(--mn-gruen); border-color: var(--mn-gruen); } }
  .mnav__cta--mail { font-size: 16px; letter-spacing: 0; }
  .mnav__cta span { white-space: nowrap; }

  .mnav__info { margin: 22px 0 0; text-align: center; color: var(--mn-weich); }
  .mnav__addr { margin: 0; font-family: var(--serif); font-size: 14px; letter-spacing: .02em; line-height: 1.5; }

  /* Sprachen zuletzt, als Pills */
  .mnav__langrow {
    margin-top: 26px; padding-top: 22px;
    border-top: 1px solid var(--mn-linie); text-align: center;
  }
  .mnav__lang-label {
    display: block; margin-bottom: 12px; font-size: 12px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--mn-weich);
  }
  .mnav__lang-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .mnav__lang-pill {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 11px 20px; font-family: var(--serif); font-size: 15px; letter-spacing: .04em;
    color: var(--mn-gruen); background: #fff;
    border: 1px solid var(--mn-linie); border-radius: var(--mn-r); text-decoration: none;
  }
  .mnav__lang-pill.is-active { color: #fff; background: var(--mn-gruen); border-color: var(--mn-gruen); font-weight: 600; }
  @media (hover: hover) { a.mnav__lang-pill:hover { color: #fff; background: var(--mn-gruen); border-color: var(--mn-gruen); } }

  /* Fokus: beim Tippen kein Rahmen, bei der Tastatur ein gruener */
  .mnav button:focus, .mnav a:focus, .mnav-btn:focus { outline: 0; }
  .mnav button:focus-visible, .mnav a:focus-visible, .mnav-btn:focus-visible {
    outline: 2px solid var(--mn-gruen); outline-offset: 3px;
  }

  /* Schwebender Anruf-Knopf unten rechts */
  .fab-call {
    position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 55; width: 58px; height: 58px; border-radius: 50%;
    background: var(--mn-gruen); color: #fff; display: grid; place-items: center;
    box-shadow: 0 10px 28px rgba(50,88,78,.35), 0 2px 6px rgba(0,0,0,.12);
    border: 2px solid #fff; opacity: 0; transform: translateY(16px) scale(.9);
    pointer-events: none; transition: opacity .3s, transform .3s;
  }
  .fab-call.is-visible { opacity: 1; transform: none; pointer-events: auto; }
  .fab-call svg { width: 24px; height: 24px; stroke: #fff; }
  html.mnav-open .fab-call { opacity: 0; pointer-events: none; }
}

/* Auf sehr schmalen Geraeten etwas kleiner, damit lange Punkte in eine Zeile passen */
@media (max-width: 400px) { .mnav__link { font-size: 23px; padding: 16px 0; } }
@media (max-width: 340px) { .mnav__link { font-size: 21px; } }


/* Standort (Ansage 14.10., „Ästhetik?"): drei Spalten gleich hoch, damit die
   Linien oben und unten auf einer Hoehe liegen; eine Schrift fuer alle drei;
   der Wix-Knopf war EIN Pin in zwei Toenen (Normal/Hover), nicht zwei Logos. */
.standort-spalten { align-items: stretch; }
.standort-spalten h3 { font-size: 1.0625rem; font-weight: 600; }
.standort-label { font-size: 1.0625rem; margin-bottom: 0.75rem; }
.standort-spalten > div > p:last-child { margin-bottom: 0; }
.standort-pin { position: relative; display: block; width: 48px; height: 48px; margin: 2.75rem auto 0; }
.standort-pin img { position: absolute; inset: 0; width: 48px; height: 48px; }
.standort-pin img:last-child { opacity: 0; transition: opacity .3s ease; }
.standort-pin:hover img:last-child { opacity: 1; }

/* Gruener Kasten im Kopf zieht mobil durch, ohne weissen Rand (Ansage 14.10.). */
@media (max-width: 1023px) {
  .hero-box, .unterhero .hero-box { width: 100% !important; margin: -2.5rem 0 0; padding: 1.75rem 1.25rem; }
}


/* Sprechzeiten-Status im Handy-Menue (DHS-Muster, cardiopulse.css) */
@media (max-width: 1023px) {
  .mnav__status { margin: 8px 0 0; font-family: var(--body); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--mn-gruen); }
  .mnav__status:empty { display: none; }
  .mnav-quick__t small { font-size: 12px; letter-spacing: .1em; }
  .mnav-quick__call .mnav-quick__t small { color: inherit; opacity: .92; }
}


/* Korrekturen (Ansage 14.10.) */
.hero, .unterhero { overflow: visible; }                    /* Kopfbild darf wie im Original ueberlappen */
.portraet-reihe .portrait { height: auto !important; }       /* Portraet nicht verzerren */
.media p { font-size: 1rem; line-height: 1.5; margin-bottom: 0.6rem; max-width: 40rem; }
.uf-karte .uf-trenner { grid-column: 1 / -1; }               /* Trennlinie ueber beide Spalten */
.uf-karte > p:last-child { grid-column: 2; }                 /* Telefon rechts unter die Adresse */


/* Kopfbild und gruener Kasten: gar keine Effekte mehr, auch kein Hover (Ansage 14.10.). */
.hero-bild, .hero:hover .hero-bild, .unterhero:hover .hero-bild, .hero-box, .hero-box h1, .hero-box h2 {
  transform: none !important; transition: none !important; clip-path: none !important; opacity: 1 !important; filter: none !important;
}
/* Portraet-Reihe: Spalten duerfen schmaler werden als das Bild, Bild bleibt in seiner Spalte. */
.portraet-reihe > * { min-width: 0; }
.portraet-reihe .portrait { max-width: 100%; width: 100%; }

/* Gruener Kasten: keine Linie, kein Schatten, kein Rand (Ansage 14.10.). */
.hero-box, .unterhero .hero-box { border: 0 !important; box-shadow: none !important; outline: 0 !important; background-clip: padding-box; }
/* Mobil: Kasten liegt sauber auf dem Bild, kein Spalt, keine Kante dazwischen */
@media (max-width: 1023px) {
  .hero-bild, .unterhero .hero-bild { display: block; max-height: none; }
  .hero-box, .unterhero .hero-box { margin-top: 0; }
}
/* Tablet-Breiten: der absolut gesetzte Kasten darf nicht ueber den rechten Rand hinaus */
@media (min-width: 1024px) and (max-width: 1200px) {
  .hero-box, .unterhero .hero-box { left: auto !important; right: 0 !important; width: min(31.4375rem, 48vw) !important; }
}


/* Gruener Streifen auf dem Handy: bleibt, Text mittig (Ansage 14.10.). */
@media (max-width: 1023px) {
  .hero-box, .unterhero .hero-box { display: flex; align-items: center; justify-content: center; text-align: center; padding: 2rem 1.25rem !important; min-height: 0; }
  .hero-box h1, .hero-box h2, .unterhero .hero-box h1 { width: 100%; padding: 0 !important; margin: 0; text-align: center; }
}

/* Fusszeile auf dem Handy: Standort-Karte einspaltig und mittig (Ansage 14.10.). */
@media (max-width: 1023px) {
  .uf-karte { display: block !important; text-align: center; padding: 2.5rem 1.25rem 2.75rem; }
  .uf-karte .uf-label { text-align: center; margin: 0 0 1rem; }
  .uf-karte > p { margin: 0; }
  .uf-karte .uf-trenner { width: 8rem; margin: 1.25rem auto; border: 0; border-top: 1px solid rgba(50,88,78,.25); }
  .uf-links { text-align: center; padding: 3rem 1.25rem; }
}


/* Videobaender buendig mit der Fusszeile, links und rechts derselbe Rand (Ansage 14.10.). */
@media (min-width: 1024px) {
  .bildsektion.band { width: calc(100% - 10rem); margin: 0 auto; }
}


/* Impressum: mittig, mit Ueberschriften (Ansage 14.10.) */
.impressum { text-align: center; max-width: 46rem; margin: 0 auto; }
.impressum h2 { font-family: var(--serif); font-weight: 600; font-size: 2.5rem; line-height: 1.2; color: var(--gruen); margin: 4rem 0 1.75rem; }
.impressum h2:first-of-type { margin-top: 0; }
.impressum h3 { font-family: var(--serif); font-weight: 600; font-size: 1.375rem; color: var(--gruen); margin: 2.25rem 0 0.75rem; }
.impressum p { font-family: var(--body); font-size: 1.0625rem; line-height: 1.75; color: var(--gruen); margin: 0 0 1rem; }
.impressum p strong { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; }
.kontakt-hinweis { margin-bottom: 1.5rem; }
.mitte-knopf + .mitte-knopf { margin-top: 0.75rem; }
@media (max-width: 1023px) { .impressum h2 { font-size: 1.875rem; } .impressum h3 { font-size: 1.25rem; } }


/* ════════════════════════════════════════════════════════════════════
   KORREKTUREN 14.10. (fuenf Punkte)
   ════════════════════════════════════════════════════════════════════ */

/* 1 Kein helles Gruen mehr im Lebenslauf und in Fliesstexten. */
.cv-text a, .fliess a, .impressum a, .media p a { color: var(--gruen); }
.cv-text a:hover, .fliess a:hover, .impressum a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* 2 Wappen: die Qualifikation steht vorn, der Ort darunter. */
.wp-titel {
  display: block; font-family: var(--serif); font-weight: 600; font-size: 1.625rem;
  line-height: 1.25; color: var(--gruen); margin: 0 0 0.5rem;
}
.wp-ort {
  display: block; font-family: var(--body); font-size: 1rem; line-height: 1.5;
  color: rgba(50,88,78,.72); letter-spacing: 0;
}
.wp-ort + .wp-ort { margin-top: 0.25rem; }

/* 3 „International Patients" so gross wie jede andere Abschnitts-Ueberschrift. */
.intl-karte h2 { font-size: 4.375rem; line-height: 1.18; margin-bottom: 2.5rem; }

/* 4 Kontaktwege: Kasten zum Antippen, langes Tippen kopiert. */
.kontaktwege { display: grid; gap: 14px; max-width: 34rem; margin: 2.5rem auto 0; }
.kw {
  display: block; padding: 1.5rem 1.75rem; background: #fff;
  border: 1px solid rgba(50,88,78,.16); text-decoration: none; position: relative;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.kw:hover { border-color: rgba(50,88,78,.4); box-shadow: 0 14px 34px -22px rgba(50,88,78,.4); }
.kw-art {
  display: block; font-family: var(--body); font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(50,88,78,.6); margin-bottom: 0.5rem;
}
.kw-wert { display: block; font-family: var(--serif); font-weight: 600; font-size: 1.625rem; color: var(--gruen); line-height: 1.3; }
.kw-hinweis { display: block; margin-top: 0.4rem; font-family: var(--body); font-size: 0.875rem; color: rgba(50,88,78,.6); }
.kw.ist-kopiert .kw-hinweis { color: var(--gruen); font-weight: 600; }
.kw.ist-kopiert .kw-hinweis::after { content: " · kopiert"; }

/* 5 Mobil: Portraet ueber dem Text, nicht daneben (spaetere Regel hatte die
      Mobilregel ueberschrieben), und weniger Luft im Standort-Block. */
@media (max-width: 1023px) {
  .portraet-reihe { grid-template-columns: 1fr !important; gap: 1.75rem !important; max-width: none !important; }
  .portraet-reihe .portrait { max-width: 20rem; margin: 0 auto; }
  .portraet-reihe .fliess { text-align: left; }
  .standort-spalten > div { padding: 1rem 0; }
  .standort-spalten p { margin-bottom: 0.35rem; line-height: 1.5; }
  .standort-label { margin-bottom: 0.5rem; }
  .intl-karte h2 { font-size: 1.875rem; margin-bottom: 1.5rem; }
  .kw { padding: 1.25rem 1.25rem; }
  .kw-wert { font-size: 1.375rem; }
  .wp-titel { font-size: 1.375rem; }
}


/* Selected Media: keine Unterstreichungen, alle Zeilen gleich (Ansage 14.10.). */
.media p a:not(.knopf) { text-decoration: none; border-bottom: 1px solid rgba(50,88,78,.28); }
.media p a:hover { border-bottom-color: var(--gruen); }

/* Portraet-Reihe mobil: Bild oben, Text darunter. */
@media (max-width: 1023px) {
  .portraet-reihe { display: block !important; }
  .portraet-reihe .portrait { display: block; width: 100%; max-width: 22rem; margin: 0 auto 2rem; }
  .portraet-reihe .fliess { margin: 0; text-align: left; }
}


/* Kontaktweg-Kaesten: mehr Luft nach oben, nie unterstrichen. */
.kontaktwege { margin-top: 3.5rem; }
.kw, .kw:hover { text-decoration: none; border-bottom-width: 1px; }
.kw-wert, .kw-art, .kw-hinweis { text-decoration: none; }
@media (max-width: 1023px) { .kontaktwege { margin-top: 2.5rem; } }


/* Adresse im Kopf ist anklickbar und kopiert sich (Ansage 14.10.). */
.adr-kopieren {
  position: relative; display: block; width: 100%; margin: 0; padding: 0;
  font: inherit; color: inherit; text-align: inherit;
  background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.adr-text { display: block; transition: opacity .2s ease; }
.adr-meldung {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .2s ease; pointer-events: none; color: var(--gruen); font-weight: 600;
}
.adr-kopieren.ist-kopiert .adr-text { opacity: 0; }
.adr-kopieren.ist-kopiert .adr-meldung { opacity: 1; }
.adr-kopieren:hover .adr-text { opacity: .72; }
.adr-kopieren:focus-visible { outline: 2px solid var(--gruen); outline-offset: 4px; }

/* Anruf-Knopf: Hausfarbe statt Browser-Fokusring, ganze Flaeche waehlt an. */
@media (max-width: 1023px) {
  .mnav-quick__call, .mnav-quick__call:focus, .mnav-quick__call:active {
    outline: 0 !important; border: 0 !important; -webkit-tap-highlight-color: transparent;
    text-decoration: none !important;
  }
  .mnav-quick__call:focus-visible { outline: 2px solid var(--mn-gruen) !important; outline-offset: 3px; }
  .mnav-quick__call * { pointer-events: none; }
}


/* Impressum: schlicht, mittig, eine Textgroesse (Ansage 14.10.). */
.impressum h2 { font-size: 2.25rem; margin: 3.5rem 0 1.5rem; letter-spacing: .02em; }
.impressum h2:first-of-type { margin-top: 0; }
.impressum h3 { display: none; }
.impressum p { font-size: 1.0625rem; line-height: 1.8; margin: 0 0 1.5rem; }
.impressum p strong { font: inherit; font-weight: 600; }

/* Text neben dem Portraet auf dem Handy mittig. */
@media (max-width: 1023px) {
  .portraet-reihe .fliess { text-align: center !important; }
  .impressum h2 { font-size: 1.75rem; }
}

/* Wappen: alle Karten gleich hoch, Inhalt oben buendig (Ansage 14.10.). */
.wappen-reihe { align-items: stretch; }
.wappen { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: 100%; }
.wp-marke { flex: none; }
.wp-titel { margin-top: auto; }
.wp-ort:last-child { margin-bottom: auto; }

/* Selected Media: wirklich keine Linie unter den Links - aber nicht
   unter dem Presse-Knopf, der zufaellig im selben Abschnitt sitzt und
   seinen eigenen vollen Rahmen braucht (Fehler gefunden 16.10.: die
   untere Rahmenlinie des Knopfs fehlte dadurch komplett). */
.media p a:not(.knopf), .media p a:not(.knopf):hover, .media p a:not(.knopf):visited {
  text-decoration: none !important; border-bottom: 0 !important;
  background-image: none !important; box-shadow: none !important;
}
.media p a:not(.knopf):hover { opacity: .62; }


/* Ein Knopf fuer alles: eckig, gruene Kontur, keine Unterstreichung. */
.knopf {
  display: inline-block; padding: 1rem 2.5rem;
  font-family: var(--serif); font-weight: 600; font-size: 1.1875rem; letter-spacing: .02em;
  color: var(--gruen); background: #fff; border: 1px solid var(--gruen);
  text-decoration: none; transition: background-color .25s ease, color .25s ease;
}
.knopf:hover { background: var(--gruen); color: #fff; }
.mitte-knopf { margin-top: 2.5rem; }
.mitte-knopf + .mitte-knopf { margin-top: 0.875rem; }
@media (max-width: 1023px) {
  .knopf { display: block; width: 100%; max-width: 22rem; margin: 0 auto; padding: 1rem; font-size: 1.0625rem; }
  .mitte-knopf { margin-top: 2rem; }
}


/* Vier Wappen nebeneinander, darunter zwei, auf dem Handy eines. */
.wappen-reihe { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; max-width: 76rem; }
@media (max-width: 1200px) { .wappen-reihe { grid-template-columns: repeat(2, 1fr); max-width: 44rem; } }
@media (max-width: 1023px) { .wappen-reihe { grid-template-columns: 1fr; max-width: 26rem; } }
.wp-ort { font-size: 0.9375rem; }

/* Knopf-Hover ohne Farbbrei: weisser Grund bleibt, Kontur und Schrift werden
   kraeftiger. Vorher wurde der Farbwechsel beim Ueberfahren als Matsch sichtbar. */
.knopf { transition: border-color .2s ease, color .2s ease, box-shadow .2s ease; }
.knopf:hover, .knopf:focus-visible {
  background: #fff; color: var(--gruen);
  border-color: var(--gruen); border-width: 1px;
  box-shadow: inset 0 0 0 1px var(--gruen);
}


/* Anruf-Knopf in der Fusszeile, derselbe Bau wie oben auf dem Handy. */
.uf-anruf {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 58px; padding: 12px 30px; max-width: 22rem; width: 100%;
  background: #fff; color: var(--gruen); border: 1px solid #fff;
  text-decoration: none; box-sizing: border-box;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.uf-anruf:hover { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.uf-anruf svg { flex: 0 0 auto; }
.uf-anruf__t { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.uf-anruf__t b { font-family: var(--serif); font-weight: 600; font-size: 1.1875rem; letter-spacing: .02em; white-space: nowrap; }
.uf-anruf__t small { font-family: var(--body); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
@media (max-width: 1023px) { .uf-anruf { max-width: 20rem; } }


/* Infokarten auf der Patienten-Information: groessere, besser lesbare Schrift. */
.infokarte { font-size: 1.25rem; line-height: 1.4; }
@media (max-width: 1023px) { .infokarte { font-size: 1.1875rem; } }

/* Startseite: das Portraet ist hochkant, der Kopfbereich passt sich an. */
.hero .hero-bild { object-fit: cover; object-position: 50% 18%; }


/* Standort-Pin fuehrt zur Karte und hat ein ordentliches Tippziel. */
.standort-pin { width: 48px; height: 48px; display: block; margin: 2.75rem auto 0; }
.standort-karte-text { margin-top: 0.75rem; text-align: center; }
.standort-karte-text a { font-family: var(--body); font-size: 0.9375rem; letter-spacing: .04em; color: var(--gruen); text-decoration: none; border-bottom: 1px solid rgba(50,88,78,.3); }
.standort-karte-text a:hover { border-bottom-color: var(--gruen); }

/* Wortmarke in der Fusszeile exakt wie im Kopf: gleiche Groessenstufen,
   gleiche Laufweite, gleicher Zeilenabstand (Ansage 14.10.). */
.uf-name {
  font-family: var(--serif); font-weight: 600; font-size: 3.1875rem;
  line-height: 1.1; letter-spacing: 0.01em; margin-bottom: 0;
}
.uf-klein {
  font-family: var(--serif); font-weight: 600; font-size: 1.5625rem;
  letter-spacing: 0.18em; margin-top: 0.5rem; margin-bottom: 2.25rem;
}
@media (max-width: 1023px) {
  .uf-name { font-size: 2.5rem; }
  .uf-klein { font-size: 1.25rem; margin-bottom: 1.75rem; }
}

/* Band-Ueberschriften blenden wieder auf wie im Original, der Kopfbereich nicht. */
.auf-js .bildsektion h2[data-auf] {
  opacity: 0; transform: translateY(1.5rem);
  transition: opacity 1s cubic-bezier(.22,.61,.36,1), transform 1s cubic-bezier(.22,.61,.36,1);
}
.auf-js .bildsektion h2[data-auf].da { opacity: 1; transform: none; }
.auf-js .hero [data-auf], .auf-js .unterhero [data-auf] { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .bildsektion h2[data-auf] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Text neben dem Portraet nur auf dem Desktop: etwas groesser, enger am Bild,
   nicht bis an den linken Rand gezogen (Ansage 14.10.). */
@media (min-width: 1024px) {
  .portraet-reihe { grid-template-columns: 0.85fr 1.15fr; gap: 3rem; max-width: 66rem; }
}

/* Haupttext der Biografie: eine Etage unter Bild und Fakten, mittig,
   nicht mehr in der schmalen Spalte daneben (Ansage 16.10.). */
.bio-ueber { margin-top: 3.5rem; text-align: center; }
.bio-ueber .fliess { max-width: 40rem; margin: 0 auto; font-size: 1.25rem; }
.bio-ueber .fliess + .fliess { margin-top: 1.25rem; }
@media (min-width: 1024px) {
  .bio-ueber .fliess { font-size: 1.4375rem; line-height: 1.75; }
}

/* Anker nicht unter dem Kopf verstecken. */
.impressum h2[id] { scroll-margin-top: 2rem; }


/* Knopf: klare Kontur, ruhiger Hover ohne Farbbrei und ohne Innenschatten. */
.knopf {
  padding: 0.9375rem 2.25rem; font-size: 1.125rem; letter-spacing: .04em;
  border: 1px solid rgba(50,88,78,.45);
  box-shadow: none; transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.knopf:hover, .knopf:focus-visible {
  background: var(--gruen); color: #fff; border-color: var(--gruen); box-shadow: none;
}
.knopf:focus-visible { outline: 2px solid var(--gruen); outline-offset: 3px; }

/* Sprachen, die es noch nicht gibt: sichtbar, aber nicht anklickbar. */
.sprache-folgt { display: block; padding: 0.875rem 1.75rem; font-size: 1.1875rem; text-align: center; color: rgba(50,88,78,.62); cursor: default; }
@media (max-width: 1023px) { .sprache-folgt { padding: 0.875rem 1.5rem; font-size: 1.1875rem; text-align: center; } }


/* ════════════════════════════════════════════════════════════════════
   NACHTRAEGE 15.10.
   ════════════════════════════════════════════════════════════════════ */

/* Kopfbilder: Startseite und Unterseiten liegen an genau derselben Stelle
   und haben dieselbe Groesse (Ansage 15.10.). Keine Sonderregel mehr fuer
   die Startseite, die Masse stehen oben bei ".hero, .unterhero".
   Falls hier je wieder ein Sonderfall auftaucht: nicht einbauen, sondern
   die gemeinsame Regel aendern. */

/* „Herzspezialist" ueberall in Versalien, wie auf dem Handy. */
.kopf-titel .untertitel, .uf-klein, .brand-word__sub { text-transform: uppercase; }

/* Fuenf Wappen: eine Reihe, dann drei, dann zwei, dann eines. */
.wappen-reihe { grid-template-columns: repeat(5, 1fr); max-width: 82rem; gap: 1.25rem; }
@media (max-width: 1400px) { .wappen-reihe { grid-template-columns: repeat(3, 1fr); max-width: 60rem; } }
@media (max-width: 1023px) { .wappen-reihe { grid-template-columns: 1fr; max-width: 26rem; } }
.wp-marke svg { width: 2.75rem; height: 2.75rem; stroke-width: 1.6; }

/* Sprechzeiten-Status faellt ins Auge: kleiner Punkt, der ruhig pulst. */
.mnav__status, .uf-anruf__t small { position: relative; }
[data-hours="label"]:not(:empty)::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 8px; vertical-align: 1px; background: currentColor;
  animation: puls 2.4s ease-in-out infinite;
}
@keyframes puls { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.78); } }
@media (prefers-reduced-motion: reduce) { [data-hours="label"]:not(:empty)::before { animation: none; } }

/* Derselbe pulsende Punkt vor "Hohe Nachfrage" bei der E-Mail-Kachel -
   wirkt dadurch genauso lebendig/aktuell wie der Sprechzeiten-Status
   (Ansage 17.10.). */
.kt-kachel__meta--live::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 6px; vertical-align: 1px; background: currentColor;
  animation: puls 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .kt-kachel__meta--live::before { animation: none; } }

/* Zahl in "Antwort in 2-3 Werktagen" bekommt kurz einen Rechen-Flacker-
   Effekt (kontakt.js). tabular-nums haelt die Ziffernbreite fest, damit
   der Text beim Durchflackern nicht zittert (Ansage 17.10.). */
/* unicode-bidi:isolate + direction:ltr statt <bdi> im Markup - behebt
   dieselbe Ziffern-Verdreher-Falle wie bei Telefonnummern (17.10.), hier
   aber fuer Zahl-Strich-Zahl-Texte, die direkt aus Python kommen statt
   per JS eingefuegt zu werden. Auf LTR-Seiten wirkungslos, daher fuer
   alle Sprachen gemeinsam gesetzt statt nur fuer Arabisch. Fund 18.10.:
   "09-18" erschien auf Arabisch verdreht als "18-09". */
.kt-zahl, .kt-tag__zeit, .cv-datum { font-variant-numeric: tabular-nums; unicode-bidi: isolate; direction: ltr; }

/* Flip statt nur Flackern: jede Ziffer in .kt-zahl kippt kurz um die
   X-Achse, bevor der naechste Zufallswert (bzw. am Ende der echte Wert)
   steht (Ansage 18.10., "die 2-3 sind nicht animiert mit flip"). Der
   Bindestrich bleibt stehen, nur Ziffern-Spans bekommen die Klasse. */
.kt-zahl { display: inline-block; perspective: 60px; }
.kt-zahl .kz-z {
  display: inline-block;
  transition: transform .09s ease, opacity .09s ease;
}
.kt-zahl .kz-z.kz-dreht { transform: rotateX(-90deg); opacity: 0; }

/* Knopf-Hover ohne jeden Farbwechsel der Flaeche: der Grund bleibt weiss,
   nur Kontur und Schrift werden kraeftiger. So entsteht nie ein Graugruen
   als Zwischenschritt (Ansage 15.10.). */
.knopf, .knopf:hover, .knopf:focus-visible, .knopf:active {
  background: #fff !important;
  color: var(--gruen) !important;
  transition: border-color .18s ease;
}
.knopf { border: 1px solid rgba(50,88,78,.35); }
.knopf:hover, .knopf:focus-visible { border-color: var(--gruen); }
.knopf:focus-visible { outline: 2px solid var(--gruen); outline-offset: 3px; }


/* Infokarten: saubere Silbentrennung statt fester Bindestriche. */
.infokarte p { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; text-wrap: balance; }

/* Wortmarke in der Fusszeile bricht nicht mehr um und passt sich der
   schmalen gruenen Haelfte an (Ansage 15.10.). */
.uf-name { white-space: nowrap; font-size: clamp(2rem, 4.2vw, 3.1875rem); }
.uf-klein { white-space: nowrap; font-size: clamp(1.0625rem, 1.9vw, 1.5625rem); }

/* Kopfbereich nicht uebergross: weniger Luft zwischen Wortmarke und Linie
   (war 7rem), und der gruene Kasten haengt nur noch wenig unter dem Bild,
   damit darunter keine tote Flaeche bleibt (Ansage 15.10.). */
.kopf-linie { margin-top: 3.25rem; }
.kopf { padding: 3rem 0 0.625rem; }
/* Wortmarke auf dem Desktop kleiner, Fusszeile zieht mit (Ansage 15.10.). */
@media (min-width: 1024px) {
  .kopf-titel .seitentitel { font-size: 2.5rem; }
  .kopf-titel .untertitel { font-size: 1.1875rem; letter-spacing: 0.22em; margin-top: 4px; }
  .uf-name { font-size: 2.5rem; }
  .uf-klein { font-size: 1.1875rem; letter-spacing: 0.22em; }
}

/* Unterseiten-Kopf genau wie der Startseiten-Kopf: gleiche Gruppe, gleiche
   Masse, gleiche Position, mittig im Satzspiegel (Ansage 15.10.). */
@media (min-width: 1024px) {
  .hero, .unterhero {
    height: 36.5rem; width: 70.8125rem; max-width: calc(100% - 10rem);
    margin: 3.5rem auto 0; position: relative;
  }
  .hero .hero-bild, .unterhero .hero-bild {
    left: 0; top: 0; width: 41.4375rem; height: 31.0625rem;
    object-fit: cover; object-position: 50% 30%;
  }
  .hero .hero-box, .unterhero .hero-box {
    /* Kasten auf der Mittelachse des Bildes (Bildhoehe 31.0625rem,
       Kasten 19rem -> top = (31.0625 - 19) / 2). */
    left: 35.8125rem; top: 6.03125rem; width: 35rem; height: 19rem;
  }
  .unterhero .hero-box h1 { padding-left: 3.75rem; }
  .mitte.nach-hero, .nach-hero { padding-top: var(--luft); }
}

/* Mehr Luft zwischen dem Text ueber Dr. Hotz und den Wappen. */
.wappen-reihe { margin-top: 7rem; }
@media (max-width: 1023px) { .wappen-reihe { margin-top: 4rem; } }

/* ════════════════════════════════════════════════════════════════════
   BLOG  (Ansage 15.10.): echter Zaehler, Lesezeit, Autorenzeile,
   Brotkrumen, verwandte Beitraege.
   ════════════════════════════════════════════════════════════════════ */

/* Zaehler */
.herz {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px;
  padding: 0 6px; margin: 0; background: none; border: 0; cursor: pointer;
  font-family: var(--body); font-size: 0.9375rem; color: rgba(50,88,78,.6);
  -webkit-tap-highlight-color: transparent; transition: color .2s ease;
}
.herz:hover { color: #e2264d; }
.herz-form {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.125rem; transition: transform .25s cubic-bezier(.22,.7,.15,1);
}
.herz-form svg { display: block; transition: fill .2s ease; }
.herz.ist-an { color: #e2264d; }
.herz.ist-an .herz-form svg { fill: currentColor; }

/* Im Artikelfuss darf der Zaehler groesser und als klare Chip auftreten -
   dort steht er allein, nicht gedraengt in einer kleinen Kartenzeile
   (Ansage 15.10., "auch groesserer Text"). */
.artikel-fuss .herz {
  /* Rand bleibt immer gruen/neutral, nie rot - rot ist nur fuer das Herz
     selbst reserviert, genau wie bei den anderen Knoepfen auf der Seite
     (Ansage 15.10., "nicht so bitte" zur roten Kontur). */
  min-height: 2.75rem; padding: 0 1.125rem; background: #fff;
  border: 1px solid rgba(50,88,78,.22); border-radius: 999px;
  font-size: 1.0625rem; font-weight: 600; color: rgba(50,88,78,.75);
  transition: color .2s ease, border-color .2s ease;
}
.artikel-fuss .herz:hover { color: #e2264d; border-color: var(--gruen); }
.artikel-fuss .herz-form { font-size: 1.3125rem; }
/* Ist das Herz aktiv (angeklickt), passt der Rand zur Farbe des Herzens -
   einheitlich statt rotes Herz mit grauem Rand (Ansage 15.10.). */
.artikel-fuss .herz.ist-an { color: #e2264d; border-color: #e2264d; }
.herz.schlaegt .herz-form { animation: herzschlag-klick .45s ease; }
@keyframes herzschlag-klick { 0%,100% { transform: scale(1); } 35% { transform: scale(1.35); } 70% { transform: scale(.92); } }
.herz:focus-visible { outline: 2px solid var(--gruen); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .herz.schlaegt .herz-form { animation: none; } }

/* Karte: Kategorie, Datum, Lesezeit, Zaehler */
.bk-kat {
  display: block; margin-bottom: 0.625rem; font-family: var(--body);
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(50,88,78,.55);
}
.bk-fuss { display: flex; align-items: center; justify-content: space-between; }
.bk-meta { font-family: var(--body); font-size: 0.9375rem; color: rgba(50,88,78,.6); }

/* Brotkrumen */
.krumen {
  max-width: 46rem; margin: 2.5rem auto 0; padding: 0 1.25rem;
  font-family: var(--body); font-size: 0.9375rem; color: rgba(50,88,78,.6);
}
.krumen a { color: inherit; text-decoration: none; }
.krumen a:hover { color: var(--gruen); text-decoration: underline; text-underline-offset: 3px; }
.krumen span { margin: 0 .4em; }

/* Artikelkopf */
.artikel-kopf { margin-bottom: 3rem; }
.artikel-kat {
  display: inline-block; margin-bottom: 1.25rem; padding: 0.4375rem 1rem;
  font-family: var(--body); font-size: 11px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gruen); text-decoration: none;
  border: 1px solid rgba(50,88,78,.25);
}
.artikel-kat:hover { background: var(--gruen); color: #fff; border-color: var(--gruen); }
.artikel-meta { font-family: var(--body); font-size: 1rem; color: rgba(50,88,78,.6); margin: 1rem 0 0; }
.artikel-autor { font-family: var(--body); font-size: 1.0625rem; color: rgba(50,88,78,.78); margin: 0.5rem 0 0; }
.artikel-autor a { color: var(--gruen); text-decoration: none; border-bottom: 1px solid rgba(50,88,78,.3); }
.artikel-autor a:hover { border-bottom-color: var(--gruen); }

/* Artikelfuss */
.artikel-fuss {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  margin-top: 3.5rem; padding-top: 1.75rem; border-top: 1px solid rgba(50,88,78,.18);
}
.artikel-zurueck {
  font-family: var(--serif); font-weight: 600; font-size: 1.0625rem; color: var(--gruen);
  text-decoration: none; border-bottom: 1px solid rgba(50,88,78,.3);
}
.artikel-zurueck:hover { border-bottom-color: var(--gruen); }
@media (max-width: 1023px) {
  .artikel-kopf { margin-bottom: 2rem; }
  .krumen { margin-top: 1.5rem; }
}

/* ============================================================
   Blog: sichtbarer Blogkopf und Fliesstext (15.10.)
   Wix hatte fast jeden Absatz als Zitat abgelegt, darum sahen die
   Beitraege wie eine Wand aus Zitatstrichen aus. Jetzt normaler
   Fliesstext, der erste Absatz als Vorspann.
   ============================================================ */
.blogkopf { max-width: 64rem; width: calc(100% - 10rem); margin: 4rem auto 0; }
.blogkopf h1 {
  /* Normal grosse Rubriken-Ueberschrift, keine riesige Einzelseiten-H1
     mehr - "Alle Beitraege" oben, dann "Herz-Blog" (Ansage 15.10.).
     Beides steht fest, es wechselt nicht mehr beim Filtern. */
  font-family: var(--serif); font-weight: 600; font-size: 1.75rem;
  line-height: 1.25; color: var(--gruen); margin: 0;
}
.blogkopf p {
  font-family: var(--body); font-size: 1.125rem; line-height: 1.7;
  color: rgba(50, 88, 78, .72); margin: .625rem 0 0; max-width: 34rem;
}

.artikel > p { margin-bottom: 1.5rem; }
/* Vorspann nicht mehr groesser als der restliche Fliesstext - alle
   Absaetze im Beitrag gleich gross (Ansage 16.10., widerruft 15.10.). */
.artikel > p.artikel-lead { margin-bottom: 1.75rem; }

@media (max-width: 1023px) {
  .blogkopf { width: calc(100% - 2.5rem); margin-top: 2.5rem; text-align: center; }
  .blogkopf h1 { font-size: 1.5rem; }
  .blogkopf p { margin-left: auto; margin-right: auto; }
}

/* Leerer Blog (EN/RU/AR/DA ohne eigene Beitraege): vorher nur eine
   knappe Kopfzeile direkt vor der Fusszeile, wirkte unfertig. Jetzt ein
   eigener, grosszuegiger Block mit Luft oben/unten und einem kleinen
   Herz-Icon, damit die Seite auch ohne Inhalt fertig gestaltet aussieht
   (Ansage 18.10., "einfach mehr Platz und schoener auch wenn kein
   Inhalt auf einer Sprache"). */
.blog-leer {
  max-width: 64rem; width: calc(100% - 10rem); margin: 0 auto;
  padding: 7rem 1.25rem 8rem; text-align: center;
}
.blog-leer__icon {
  display: inline-flex; width: 3rem; height: 3rem; font-size: 3rem;
  color: var(--teal); margin-bottom: 1.5rem; opacity: .85;
}
.blog-leer h1 {
  font-family: var(--serif); font-weight: 600; font-size: 2.25rem;
  line-height: 1.25; color: var(--gruen); margin: 0 0 1rem;
}
.blog-leer p {
  font-family: var(--body); font-size: 1.1875rem; line-height: 1.7;
  color: rgba(50, 88, 78, .72); margin: 0 auto; max-width: 30rem;
}
@media (max-width: 760px) {
  .blog-leer { width: calc(100% - 2.5rem); padding: 4.5rem 1.25rem 5.5rem; }
  .blog-leer__icon { width: 2.5rem; height: 2.5rem; font-size: 2.5rem; }
  .blog-leer h1 { font-size: 1.75rem; }
}
@media (max-width: 760px) {
  .artikel > p { font-size: 1.1875rem; }
  .artikel > p.artikel-lead { font-size: 1.3125rem; }
}

/* Keine Unterstriche im Blog (Ansage 15.10.). Links tragen Gruen und
   reagieren beim Darueberfahren, gezogene Linien gibt es nicht mehr. */
.artikel-autor a,
.artikel-meta a,
.artikel-zurueck,
.krumen a,
.krumen a:hover,
.artikel .podcast-link a {
  text-decoration: none;
  border-bottom: 0;
}
.artikel-autor a { color: var(--gruen); transition: opacity .2s ease; }
.artikel-autor a:hover { opacity: .62; }
.artikel-meta a:hover { color: var(--gruen); }
.artikel-zurueck { transition: opacity .2s ease; }
.artikel-zurueck:hover { opacity: .62; }
.krumen a:hover { color: var(--gruen); }

/* Keine gezogenen Linien unter den Blogtiteln (Ansage 15.10.). Die Karte
   reagiert weiterhin: sie hebt sich leicht, das Bild zieht sanft naeher und
   die Ueberschrift wechselt die Farbe. Nur eben ohne Strich. */
.blogkarte h3 a,
.blogkarte:hover h3 a {
  background-image: none;
  background-size: 0 0;
  padding-bottom: 0;
  text-decoration: none;
  transition: color .3s ease;
}
.blogkarte:hover h3 a { color: var(--gruen); }

/* ------------------------------------------------------------------
   Blogmenu: eine Reihe Schaltflaechen mit der Anzahl der Beitraege.
   Eckig wie die Rubrik-Pille im Artikel, die geoeffnete Rubrik ist
   gefuellt. Kein Strich, keine Unterstreichung (Ansage 15.10.).
   ------------------------------------------------------------------ */
.blogkopf,
.blogtabs {
  box-sizing: border-box;
  width: 100%; max-width: 64rem;
  margin-left: auto; margin-right: auto;
  padding-left: 1.25rem; padding-right: 1.25rem;
}
.blogkopf { margin-top: 4rem; margin-bottom: 0; }

.blogtabs {
  display: flex; flex-wrap: wrap; gap: 0.625rem;
  justify-content: flex-start; margin-top: 2rem;
}
.blogtabs a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6875rem 1.25rem;
  font-family: var(--body); font-size: 13px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  line-height: 1; color: var(--gruen); background: #fff;
  border: 1px solid rgba(50, 88, 78, .25); border-bottom-color: rgba(50, 88, 78, .25);
  text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.blogtabs a:hover { border-color: var(--gruen); }
.blogtabs a.aktiv {
  background: var(--gruen); color: #fff; border-color: var(--gruen);
}
.blogtabs a:focus-visible { outline: 2px solid var(--gruen); outline-offset: 3px; }
.bt-zahl {
  font-size: 12px; font-weight: 400; letter-spacing: 0.06em;
  opacity: .55; font-variant-numeric: tabular-nums;
}
.blogtabs a.aktiv .bt-zahl { opacity: .8; }

/* Suchfeld zwischen Rubriken-Leiste und den Karten (Ansage 18.10.,
   "noch eine Suchfunktion für die Zukunft"). Filtert client-seitig
   innerhalb der gewaehlten Rubrik, kein Backend noetig (blog.js). */
.blog-suche {
  position: relative; max-width: 64rem; width: calc(100% - 10rem);
  margin: 1.5rem auto 0;
}
.blog-suche__icon {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  color: rgba(50, 88, 78, .5); pointer-events: none;
}
.blog-suche__feld {
  display: block; width: 100%; max-width: 22rem;
  padding: 0.75rem 1.125rem 0.75rem 2.75rem;
  font-family: var(--body); font-size: 1rem; color: var(--gruen);
  background: #fff; border: 1px solid rgba(50, 88, 78, .3);
  transition: border-color .2s ease;
}
.blog-suche__feld::placeholder { color: rgba(50, 88, 78, .5); }
.blog-suche__feld:focus-visible { outline: 2px solid var(--gruen); outline-offset: 2px; }
.blog-suche__feld:hover { border-color: var(--gruen); }
/* Eigene Lupe statt der nativen WebKit-Suchicons/Clear-Kreuze - die
   kaemen sonst doppelt. */
.blog-suche__feld::-webkit-search-cancel-button,
.blog-suche__feld::-webkit-search-decoration { display: none; }
.blog-suche__leer {
  font-family: var(--body); font-size: 1.0625rem; color: rgba(50, 88, 78, .6);
  text-align: center; padding: 3rem 1.25rem;
}
@media (max-width: 760px) {
  .blog-suche { width: calc(100% - 2.5rem); }
  .blog-suche__feld { max-width: none; }
}

/* Die Beitraege ruecken naeher an das Menu heran. */
.blog-suche + .blogband { padding-top: 2rem; }

/* Podcast-Plattformen als Knopfreihe statt unterstrichener Zeilen. */
.podcast-knoepfe {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  margin: 1.75rem 0 0.5rem;
}
.podcast-knoepfe .knopf { font-size: 1rem; padding: 0.75rem 1.5rem; }

@media (max-width: 1023px) {
  .blogkopf, .blogtabs { max-width: none; padding-left: 1.25rem; padding-right: 1.25rem; }
  .blogtabs { width: 100% !important; justify-content: center; margin-top: 1.75rem; }
  .blogband { padding-top: 2.5rem; }
  .podcast-knoepfe { justify-content: center; }
}

/* ------------------------------------------------------------------
   Blog: Zurueck-Schaltflaeche oben und Blaettern unten (Ansage 15.10.)
   ------------------------------------------------------------------ */
.zurueck-leiste {
  box-sizing: border-box;
  max-width: 46rem; margin: 1rem auto 0; padding: 0 1.25rem;
}
.zurueck-knopf {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5625rem 1.125rem;
  font-family: var(--body); font-size: 13px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; line-height: 1;
  color: var(--gruen); background: #fff; text-decoration: none;
  border: 1px solid rgba(50, 88, 78, .25);
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.zurueck-knopf:hover { border-color: var(--gruen); }
.zurueck-knopf:focus-visible { outline: 2px solid var(--gruen); outline-offset: 3px; }
.bl-pfeil { font-size: 1.125em; line-height: 0; position: relative; top: -0.04em; }

.artikel-fuss .knopf.artikel-zurueck {
  padding: 0.75rem 1.75rem; font-size: 1.0625rem; border-bottom: 1px solid rgba(50, 88, 78, .45);
}
.artikel-fuss .knopf.artikel-zurueck:hover { opacity: 1; border-color: var(--gruen); }

.blaettern {
  box-sizing: border-box;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;
  max-width: 46rem; margin: 0 auto; padding: 0 1.25rem 1rem;
}
.bl-ziel {
  display: block; padding: 1.625rem 1.75rem; text-decoration: none;
  border: 1px solid rgba(50, 88, 78, .18); background: #fff;
  transition: border-color .3s ease, transform .3s cubic-bezier(.22,.7,.15,1), box-shadow .3s cubic-bezier(.22,.7,.15,1);
}
.bl-ziel:hover {
  border-color: rgba(50, 88, 78, .3); transform: translateY(-3px);
  box-shadow: 0 0.75rem 1.75rem rgba(50, 88, 78, .12);
}
.bl-wort {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(50, 88, 78, .58);
}
.bl-weiter { text-align: right; }
.bl-weiter .bl-wort { flex-direction: row-reverse; }
.bl-titel {
  display: block; margin-top: 0.625rem;
  font-family: var(--serif); font-weight: 600; font-size: 1.375rem;
  line-height: 1.3; color: var(--gruen);
}
.bl-leer { display: block; }

@media (max-width: 1023px) {
  .zurueck-leiste { margin-top: 0.75rem; text-align: center; }
  .blaettern { grid-template-columns: 1fr; gap: 0.75rem; }
  .bl-weiter { text-align: left; }
  .bl-weiter .bl-wort { flex-direction: row; }
  .bl-leer { display: none; }
}

/* Brotkrumen, Zurueck-Schaltflaeche und Blaettern stehen auf derselben
   Linie wie der Artikeltext. */
@media (min-width: 1024px) {
  .krumen, .zurueck-leiste, .blaettern { max-width: 44rem; }
}

/* Auf dem Handy rueckt der Blogkopf naeher an den Seitenkopf. */
@media (max-width: 1023px) {
  .blogkopf { margin-top: 2.5rem; }
}

/* ══════════════════════════════════════════════════════════════════
   Blogübersicht wie auf der SWA-Seite: Raster oder Liste, die Wahl
   merkt sich der Browser. Die Karten gehen nacheinander auf.
   ══════════════════════════════════════════════════════════════════ */

/* Umschalter am Ende der Rubrikenleiste. */
.bt-umschalter {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-left: auto; padding: 0.625rem 1.125rem;
  font-family: var(--body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; line-height: 1;
  color: var(--gruen); background: #fff; cursor: pointer;
  border: 1px solid rgba(50, 88, 78, .25);
  transition: border-color .18s ease;
}
.bt-umschalter:hover { border-color: var(--gruen); }
.bt-umschalter:focus-visible { outline: 2px solid var(--gruen); outline-offset: 3px; }
.bt-umschalter svg { flex: none; }

/* Auftritt der Karten, nacheinander. */
@keyframes bk-auf { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.blogband .blogkarte {
  animation: bk-auf .55s cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: calc(var(--n, 0) * 0.045s);
}
@media (prefers-reduced-motion: reduce) {
  .blogband .blogkarte { animation: none; }
}

/* ---- Listenansicht ---------------------------------------------- */
:root[data-blogansicht="liste"] .blogband .blogkarten {
  display: block; max-width: 64rem;
}
:root[data-blogansicht="liste"] .blogband .blogkarten .blogkarte {
  display: grid; grid-template-columns: minmax(0, 1fr) 15rem;
  column-gap: 2.5rem; row-gap: 0.75rem; align-items: start;
  border: 0; border-bottom: 1px solid rgba(50, 88, 78, .14);
  padding: 2rem 0; background: transparent;
  transform: none !important; box-shadow: none !important;
}
:root[data-blogansicht="liste"] .blogband .blogkarten .blogkarte:first-child {
  border-top: 1px solid rgba(50, 88, 78, .14);
}
:root[data-blogansicht="liste"] .blogband .blogkarten .bk-bild {
  grid-column: 2; grid-row: 1 / span 2; align-self: start;
}
:root[data-blogansicht="liste"] .blogband .blogkarten .bk-bild img {
  height: 9.5rem; width: 100%; object-fit: cover;
}
:root[data-blogansicht="liste"] .blogband .blogkarten .bk-text {
  grid-column: 1; grid-row: 1; padding: 0;
}
:root[data-blogansicht="liste"] .blogband .blogkarten .bk-text p { max-width: 48ch; }
:root[data-blogansicht="liste"] .blogband .blogkarten .bk-fuss {
  grid-column: 1; grid-row: 2; margin: 0; padding: 0; border: 0;
}

@media (max-width: 760px) {
  :root[data-blogansicht="liste"] .blogband .blogkarten .blogkarte {
    grid-template-columns: 1fr; row-gap: 0.875rem;
  }
  :root[data-blogansicht="liste"] .blogband .blogkarten .bk-bild { grid-column: 1; grid-row: 1; }
  :root[data-blogansicht="liste"] .blogband .blogkarten .bk-text { grid-row: 2; }
  :root[data-blogansicht="liste"] .blogband .blogkarten .bk-fuss { grid-row: 3; }
  :root[data-blogansicht="liste"] .blogband .blogkarten .bk-bild img { height: 11rem; }
  .bt-umschalter { margin-left: 0; }
}

/* In der Liste stehen Datum, Lesezeit und Herz beieinander links,
   statt weit auseinandergezogen zu sein. */
:root[data-blogansicht="liste"] .blogband .blogkarten .bk-fuss {
  justify-content: flex-start; gap: 1.5rem;
}

/* Reiterleiste: Rubriken links, Umschalter rechts, feste Hoehe, damit
   beim Laden nichts verrutscht (Ansage 15.10.). */
.blogtabs { justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: nowrap; }
.bt-reihe { display: flex; flex-wrap: wrap; gap: 0.625rem; min-width: 0; }
.bt-umschalter { margin-left: 0; flex: none; }

/* Das Symbol und das Wort passen sich der gewaehlten Ansicht an:
   der Knopf zeigt immer, wohin er fuehrt. */
.bt-sym--raster, .bt-wort--raster { display: none; }
:root[data-blogansicht="liste"] .bt-sym--liste,
:root[data-blogansicht="liste"] .bt-wort--liste { display: none; }
:root[data-blogansicht="liste"] .bt-sym--raster { display: inline-block; }
:root[data-blogansicht="liste"] .bt-wort--raster { display: inline; }

@media (max-width: 760px) {
  .blogtabs { flex-wrap: wrap; justify-content: center; }
  .bt-reihe { justify-content: center; }
}

/* Rubriken werden an Ort und Stelle gefiltert, nicht durch einen neuen
   Seitenaufbau. Darum bleibt beim Klick alles stehen (Ansage 15.10.). */
.blogkarten[data-rubrik="dasherz"] .blogkarte:not([data-kat="dasherz"]),
.blogkarten[data-rubrik="news"] .blogkarte:not([data-kat="news"]),
.blogkarten[data-rubrik="videos"] .blogkarte,
.blogkarten[data-rubrik="presse"] .blogkarte {
  display: none;
}

/* "Videos folgen in Kuerze": nur sichtbar, solange die Rubrik noch
   keine eigenen Beitraege hat (Ansage 16.10.). */
.blog-bald { display: none; text-align: center; font-size: 1.1875rem; color: rgba(50,88,78,.6); padding: 3rem 1.25rem; }
.blogband:has(.blogkarten[data-rubrik="videos"]) .blog-bald[data-bald="videos"] { display: block; }
.blogband:has(.blogkarten[data-rubrik="presse"]) .blog-bald[data-bald="presse"] { display: block; }
/* In der Liste bleibt die erste sichtbare Karte die mit der Linie oben. */
:root[data-blogansicht="liste"] .blogband .blogkarten .blogkarte { border-top: 0; }
:root[data-blogansicht="liste"] .blogband .blogkarten[data-rubrik="alle"] .blogkarte:first-child,
:root[data-blogansicht="liste"] .blogband .blogkarten[data-rubrik="dasherz"] .blogkarte[data-kat="dasherz"]:first-of-type,
:root[data-blogansicht="liste"] .blogband .blogkarten[data-rubrik="news"] .blogkarte[data-kat="news"]:first-of-type {
  border-top: 1px solid rgba(50, 88, 78, .14);
}


/* ------------------------------------------------------------------
   Biografie: kleine Fakten-Reihe ueber dem Fliesstext, verbindet Foto
   und Text optisch statt beides unverbunden nebeneinander stehen zu
   lassen (Ansage 16.10.). Zahlen stammen 1:1 aus dem Lebenslauf und
   dem Text daneben, nichts dazuerfunden.
   ------------------------------------------------------------------ */
.bio-spalte { min-width: 0; }
@media (min-width: 1024px) { .bio-spalte { align-self: stretch; } }
/* Ueberarbeitet (Ansage 16.10., "cleaner, uebersichtlicher, gerade auf
   mobile"): festes Gitter mit gleich breiten Zellen statt flex-wrap, wo
   jede Batch so breit war wie ihr eigener Text - dadurch wirkten die
   Kanten zackig und die Gruppe nicht wie ein zusammengehoeriges Set.
   Jede Batch stapelt jetzt Wort und Erklaerung statt sie nebeneinander
   zu quetschen - bei langen Woertern wie "Internationaler
   Herzspezialist" blieb sonst zu wenig Platz fuer die Unterzeile. */
.bio-fakten {
  /* minmax(0, 1fr) statt nur 1fr: ohne das setzt Grid die Mindestbreite
     jeder Spalte auf den breitesten Inhalt (Auto-Minimum), dadurch
     wurden die Karten ungleich breit, sobald ein Wort laenger war -
     sichtbar erst bei arabischem Text, lag aber in jeder Sprache
     latent vor (Fehler gefunden 16.10., "Charite Berlin" nicht so breit
     wie die Nachbarkarte). */
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem;
  margin-bottom: 1.75rem;
}
@media (min-width: 1024px) {
  /* Fuellt dieselbe Hoehe wie das Portraet daneben, die vier Zeilen
     ruecken dafuer auseinander statt die Karten zu strecken (Ansage 16.10.). */
  .bio-fakten { height: 100%; align-content: space-between; margin-bottom: 0; }
}
.bio-fakt {
  display: flex; flex-direction: column; gap: 0.375rem;
  padding: 1.125rem 1.25rem;
  background: #fff; border: 1px solid rgba(50, 88, 78, .14);
  border-left: 3px solid var(--gruen);
  box-shadow: 0 0.5rem 1.25rem rgba(50, 88, 78, .08);
  transition: transform .3s cubic-bezier(.22,.7,.15,1), box-shadow .3s cubic-bezier(.22,.7,.15,1);
}
.bio-fakt:hover { transform: translateY(-2px); box-shadow: 0 0.875rem 1.75rem rgba(50, 88, 78, .14); }
.bio-fakt b {
  font-family: var(--serif); font-weight: 700; font-size: 1.5rem;
  color: var(--gruen); line-height: 1.15;
}
/* Woerter statt Zahlen (z.B. "Promotion") duerfen etwas kleiner sein,
   damit lange Begriffe nicht in die zweite Zeile rutschen. */
.bio-fakt__wort { font-size: 1.1875rem; }
.bio-fakt small {
  font-family: var(--body); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: .02em; line-height: 1.4;
  color: rgba(50, 88, 78, .62);
}
.bio-fakt small br { content: ""; }
.bio-fakt small br::after { content: " "; }

@media (max-width: 760px) {
  /* Auf dem Handy eckige Pills in einer fliessenden Reihe statt grosser,
     voller-Breite-Karten - wie die Beschwerden-Pills bei DHS, nur mit
     eckigen statt runden Ecken (Ansage 16.10., "eher pill-like, eckige
     Pill", Desktop bleibt wie es ist). Wort und Erklaerung bleiben
     gestapelt (nicht in einer Zeile) - sonst wird die Pill breiter als
     der Bildschirm und laeuft rechts ab (Fehler gefunden 16.10.). */
  .bio-fakten { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
  .bio-fakt {
    gap: 0.25rem;
    padding: 0.625rem 0.875rem;
    width: auto; flex: none;
  }
  .bio-fakt b { font-size: 0.9375rem; }
  .bio-fakt__wort { font-size: 0.8125rem; }
  .bio-fakt small { font-size: 0.6875rem; line-height: 1.3; }
}

/* Research-Kennzahlen in der zentrierten Sektion mittig anordnen und der
   kurze Text darueber nicht zu breit auf grossen Schirmen (Ansage 16.10.,
   echte Kennzahlen von ResearchGate fuer Besucher und KI-Agenten). */
/* War 34rem (Ansage 16.10., als der Text noch kurz war) - seitdem
   deutlich laenger geworden (mehrere Saetze zur Laufbahn), bei 34rem
   brach das in sehr kurze, "zerfrickelte" Zeilen um (Ansage 18.10.). */
.forschung-text { max-width: 46rem; margin-left: auto; margin-right: auto; }
/* Drei Kennzahlen, drei Spalten - sonst rutscht die dritte allein in
   eine zweite Zeile (Ansage 16.10., "keine Abgebissenen"). */
.forschung-fakten {
  /* justify-content: die drei Spalten sind fest 11rem breit (33rem +
     Gaps = 34.5rem), der Container aber bis zu 38rem - ohne "center"
     haengt Grid den Rest standardmaessig rechts an, die Karten standen
     dadurch sichtbar links von der Mitte (Ansage 18.10., "irgendwas
     ist nicht mittig"). */
  grid-template-columns: repeat(3, 11rem); justify-content: center; max-width: 38rem;
  margin: 1.75rem auto 0;
}
@media (max-width: 760px) { .forschung-fakten { grid-template-columns: 1fr; } }

/* Tagline unter der neuen Biografie-Ueberschrift (Ansage 16.10.). */
.bio-tagline {
  font-family: var(--serif); font-weight: 300; font-size: 2rem; line-height: 1.35;
  color: rgba(50, 88, 78, .72); max-width: 44rem; margin: 0.5rem auto 3rem;
}
/* Die Tagline unter "Wissenschaftliche Tätigkeit" teilt sich die Klasse,
   soll aber klein bleiben (Ansage 18.10., "da nicht richtig groß"). */
.wort-auf { display: inline-block; opacity: .22; filter: blur(3px); transition: opacity .5s ease, filter .5s ease; }
.wort-reveal.on .wort-auf { opacity: 1; filter: none; }
@media (prefers-reduced-motion: reduce) { .wort-auf { opacity: 1; filter: none; } }

.bio-tagline.forschung-tagline {
  font-family: var(--body); font-weight: 400; font-size: 1.0625rem; line-height: 1.5;
  color: rgba(50, 88, 78, .65); max-width: none; margin: -1.25rem 0 3rem;
}

/* ══════════════════════════════════════════════════════════════════
   Kontaktseite: Kacheln, Sprechzeiten-Reihe, Standort-Chips und
   Info-Karten (Ansage 16.10., nach Vorbild die-herzspezialisten.com,
   aber in eigener Schrift/eckigen Formen statt ovalen Pills).
   ══════════════════════════════════════════════════════════════════ */

/* ---- Kontaktkanaele als Kacheln ---------------------------------- */
.kt-kacheln {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem;
  max-width: 44rem; margin: 2.75rem auto 0; text-align: left;
}
.kt-kachel {
  display: block; padding: 1.75rem 1.875rem;
  background: #fff; border: 1px solid rgba(50, 88, 78, .14);
  border-top: 3px solid var(--gruen);
  text-decoration: none; color: var(--gruen);
  box-shadow: 0 0.5rem 1.25rem rgba(50, 88, 78, .07);
  transition: transform .3s cubic-bezier(.22,.7,.15,1), box-shadow .3s cubic-bezier(.22,.7,.15,1);
}
.kt-kachel:hover { transform: translateY(-3px); box-shadow: 0 0.875rem 2rem rgba(50, 88, 78, .13); }
.kt-kachel__label {
  display: block; font-family: var(--body); font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(50, 88, 78, .55);
  margin-bottom: 0.625rem;
}
.kt-kachel__wert {
  display: block; font-family: var(--serif); font-weight: 600; font-size: 1.5rem;
  line-height: 1.25; color: var(--gruen);
}
.kt-kachel__wert--klein { font-size: 1.1875rem; word-break: break-word; }
.kt-kachel__meta {
  display: block; font-family: var(--body); font-size: 0.875rem;
  color: rgba(50, 88, 78, .6); margin-top: 0.5rem;
}

/* ---- Sprechzeiten als Tagesreihe ---------------------------------- */
.kt-tage {
  /* Sechs Spalten (Mo-Sa), damit Samstag nicht allein in eine zweite
     Zeile rutscht und dort wie "angebissen" aussieht (Ansage 16.10.). */
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.75rem;
  max-width: 62rem; margin: 2.75rem auto 0;
}
.kt-tag {
  padding: 1.25rem 0.875rem; background: #fff;
  border: 1px solid rgba(50, 88, 78, .14);
  text-align: center;
  box-shadow: 0 0.5rem 1.25rem rgba(50, 88, 78, .07);
  transition: transform .3s cubic-bezier(.22,.7,.15,1), box-shadow .3s cubic-bezier(.22,.7,.15,1);
}
.kt-tag:not(.ist-heute):not(.kt-tag--zu):hover { transform: translateY(-3px); box-shadow: 0 0.875rem 2rem rgba(50, 88, 78, .13); }
.kt-tag__name {
  display: block; font-family: var(--body); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(50, 88, 78, .6);
  margin-bottom: 0.5rem;
}
.kt-tag__zeit { display: block; font-family: var(--serif); font-size: 1.125rem; color: var(--gruen); }
.kt-tag.ist-heute {
  background: var(--gruen); border-color: var(--gruen);
  box-shadow: 0 0.625rem 1.5rem rgba(50, 88, 78, .22);
}
.kt-tag.ist-heute .kt-tag__name,
.kt-tag.ist-heute .kt-tag__zeit { color: #fff; }
.kt-tag--zu { background: rgba(50, 88, 78, .04); }
.kt-tag--zu .kt-tag__zeit { color: rgba(50, 88, 78, .4); }
.kt-wochenende {
  text-align: center; margin: 1.25rem 0 0;
  font-family: var(--body); font-size: 0.9375rem; color: rgba(50, 88, 78, .55);
}

/* ---- Standort: Adresse, Chips, Hinweis ---------------------------- */
.kt-adresse { text-align: center; margin: 2.5rem auto 0 !important; }
.kt-chips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem;
  margin: 1.75rem 0 0;
}
.kt-chip {
  /* Gleiche Schrift und Groesse wie die uebrigen Knoepfe der Seite
     (.knopf), nur in einer Reihe statt gestapelt - sollen nicht wie ein
     eigenes, kleineres System wirken (Ansage 16.10.). */
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center;
  padding: 0.9375rem 2rem;
  font-family: var(--serif); font-weight: 600; font-size: 1.0625rem; letter-spacing: .02em;
  color: var(--gruen); background: #fff;
  border: 1px solid var(--gruen);
  text-decoration: none; cursor: pointer;
  transition: border-color .18s ease;
}
.kt-chip:hover { border-color: var(--gruen); }
.kt-chip.ist-kopiert { border-color: var(--gruen); background: rgba(50, 88, 78, .06); }
.kt-hinweis { text-align: center; max-width: 36rem; margin: 1.75rem auto 0 !important; font-size: 0.9375rem !important; }

/* ---- Anfahrt, Parken, Umgebung: drei Info-Karten ------------------- */
.kt-info-karten {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem;
  max-width: 64rem; margin: 3rem auto 0; text-align: left;
}
.kt-info {
  /* Gleiche Schwebe-Animation und Schatten wie die Kontaktkacheln
     oben auf der Seite (Ansage 16.10., "genau die gleichen wie bei
     den anderen"). */
  padding: 1.75rem 1.75rem 2rem; background: #fff;
  border: 1px solid rgba(50, 88, 78, .14);
  box-shadow: 0 0.5rem 1.25rem rgba(50, 88, 78, .07);
}
/* .kt-info traegt data-auf fuers Einblenden; dessen eigene Regel
   (.auf-js [data-auf]) hat dieselbe Spezifitaet und ueberschrieb sonst
   die Transform-Dauer mit ihrer langsamen 0.85s-Kurve, auch beim Hover
   - deshalb hier [data-auf] mitgeben, damit diese Regel gewinnt
   (Fehler gefunden 16.10., "nicht so smooth wie bei dem anderen"). */
.kt-info[data-auf] {
  transition: transform .3s cubic-bezier(.22,.7,.15,1), box-shadow .3s cubic-bezier(.22,.7,.15,1);
}
.kt-info:hover { transform: translateY(-3px); box-shadow: 0 0.875rem 2rem rgba(50, 88, 78, .13); }
.kt-info h3 {
  font-family: var(--serif); font-weight: 600; font-size: 1.1875rem;
  color: var(--gruen); margin: 0 0 1.125rem;
}
.kt-info dl { margin: 0; }
.kt-info dt {
  font-family: var(--body); font-size: 10px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(50, 88, 78, .5); margin-top: 0.875rem;
}
.kt-info dt:first-child { margin-top: 0; }
.kt-info dd {
  margin: 0.25rem 0 0; font-family: var(--body); font-size: 0.9375rem;
  line-height: 1.5; color: var(--gruen);
}

@media (max-width: 1023px) {
  .kt-kacheln { grid-template-columns: 1fr; max-width: 26rem; }
  .kt-tage { grid-template-columns: repeat(2, 1fr); max-width: 26rem; }
  .kt-info-karten { grid-template-columns: 1fr; max-width: 26rem; }
}

/* Mehr Abstand zwischen "Fuer Presseanfragen" und dem Knopf darunter
   (Ansage 16.10.). */
.presse-hinweis { margin-bottom: 2.5rem !important; }

/* Die beiden Top-Journale stehen prominent auf eigenen Zeilen statt im
   Fliesstext untergemischt (Ansage 16.10., "dass es mehr wirkt"). */
.forschung-journale {
  font-family: var(--serif); font-weight: 600; font-size: 1.375rem;
  line-height: 1.6; color: var(--gruen); margin: 0.5rem 0 1.25rem;
}
@media (max-width: 480px) {
  /* "Journal of the American College of Cardiology (JACC)" brach sonst
     in zwei Zeilen um (Ansage 18.10., "auf Mobile jeder Name in einer
     Zeile"). */
  .forschung-journale { font-size: 0.8125rem; letter-spacing: -0.005em; }
}
.forschung-journale em { font-style: italic; }
/* Hetzer-Zusatz gehoert zum Fliesstext dazu statt abgesetzt zu stehen
   (Ansage 16.10.) - deshalb normale Schriftgroesse, nicht die grosse
   Journal-Schrift. */
.forschung-journale__zusatz {
  /* Haengt direkt am Satz dran statt in eigener Zeile zu stehen
     (Ansage 16.10., "nicht abgesetzt, sondern im Text"). */
  font-family: var(--body); font-weight: 400; font-size: 0.9375rem;
  color: rgba(50, 88, 78, .6);
}

/* Hetzer-Zusatz schlicht und abgesetzt statt in den Fliesstext
   eingewoben (Ansage 16.10., "nicht so hochziehen, etwas absetzen"). */

/* Presse-Knopf etwas moderner: leichtes Schweben beim Hover, wie die
   Kacheln/Karten auf der Seite (Ansage 16.10., nur dieser eine Knopf,
   nicht alle .knopf ueberall). */
.media .mitte-knopf .knopf {
  box-shadow: 0 0.375rem 1rem rgba(50, 88, 78, .06);
  transition: border-color .3s ease, transform .3s cubic-bezier(.22,.7,.15,1), box-shadow .3s cubic-bezier(.22,.7,.15,1);
}
.media .mitte-knopf .knopf:hover {
  transform: translateY(-3px);
  box-shadow: 0 0.875rem 2rem rgba(50, 88, 78, .13);
}

/* Pressefoto im Selected-Media-Abschnitt (Ansage 16.10., bisher
   ungenutztes Originalbild von der Wix-Quellseite). */
.presse-foto {
  max-width: 16rem; margin: 3rem auto 2.75rem;
}
.presse-foto img { width: 100%; height: auto; display: block; }
.presse-foto figcaption {
  font-family: var(--body); font-size: 0.8125rem; color: rgba(50, 88, 78, .55);
  margin-top: 0.625rem; text-align: center;
}

/* ------------------------------------------------------------------
   Kontakt: echte Karte (MapLibre GL, nachgebaut wie bei Cardio Pulse /
   Die Herzspezialisten), eckig statt rund wie der Rest von DHS, eigene
   Gruentoene statt fremder Farben (Ansage 16.10.).
   ------------------------------------------------------------------ */
.k-mapbox {
  width: 100%; aspect-ratio: 16 / 8; max-height: 30rem;
  background: var(--blatt); border: 1px solid rgba(50, 88, 78, .14);
  overflow: hidden; position: relative; margin-top: 2.5rem;
}
.k-map__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.k-map.is-loading::after { content: ""; position: absolute; inset: 0; background: var(--blatt); }
.k-map .maplibregl-ctrl-group {
  border-radius: 2px; box-shadow: 0 0.5rem 1.25rem rgba(50, 88, 78, .14);
  border: 1px solid rgba(50, 88, 78, .18);
}
.k-map .maplibregl-ctrl-group button { width: 2.25rem; height: 2.25rem; }
.k-map .maplibregl-ctrl-attrib { font-size: 0.625rem; border-radius: 2px; background: rgba(255,255,255,.85); }
.k-map .maplibregl-ctrl-attrib a { color: var(--gruen); }
.k-map .maplibregl-cooperative-gesture-screen { border-radius: 2px; font-size: 0.875rem; }
.k-map .maplibregl-canvas { outline: none; }
.k-map .k-map-pin { z-index: 1; }
.k-map-pin {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem; pointer-events: none;
}
.k-map .maplibregl-marker .k-map-pin { position: static; transform: none; display: flex; }
.k-map-pin__dot {
  position: relative; width: 1.125rem; height: 1.125rem; border-radius: 50%;
  background: var(--gruen); border: 3px solid #fff;
  box-shadow: 0 0.375rem 1.125rem rgba(50, 88, 78, .5);
}
.k-map-pin__dot::after {
  content: ""; position: absolute; inset: -0.875rem; border-radius: 50%;
  border: 2px solid var(--gruen); opacity: 0; animation: k-pin-pulse 2.4s ease-out infinite;
}
@keyframes k-pin-pulse { 0% { opacity: .5; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.6); } }
@media (prefers-reduced-motion: reduce) { .k-map-pin__dot::after { animation: none; } }
.k-map-pin__label {
  order: -1; background: #fff; color: var(--gruen);
  font-family: var(--body); font-size: 0.8125rem; font-weight: 600; letter-spacing: .02em;
  text-align: center; line-height: 1.3; padding: 0.6875rem 1.125rem 0.625rem;
  border: 1px solid rgba(50, 88, 78, .18); box-shadow: 0 0.625rem 1.875rem rgba(50, 88, 78, .2);
  white-space: nowrap;
}
.k-map-pin__label strong { display: block; font-family: var(--serif); font-weight: 600; font-size: 0.9375rem; letter-spacing: .01em; }
.k-map-pin__label small { display: block; font-size: 0.75rem; font-weight: 400; color: rgba(50, 88, 78, .62); margin-top: 0.1875rem; }
@media (max-width: 1023px) {
  .k-mapbox { aspect-ratio: auto; height: min(52vh, 24rem); max-height: none; }
}

/* ------------------------------------------------------------------
   International Patients: alle Sprachen bleiben sichtbar (Ansage
   16.10., "nicht so eine lange Reihe, alle sichtbar, dann durch-
   blinken"), ein Lichtpunkt laeuft der Reihe nach einmal durch.
   Text insgesamt etwas groesser. */
.intl-sprachen { font-size: 1.1875rem !important; }
.sprach-wort {
  display: inline-block; color: rgba(50, 88, 78, .55);
  animation: sprach-blink 6.5s ease-in-out calc(var(--i) * 0.5s) infinite;
}
@keyframes sprach-blink {
  0%, 6%, 100% { color: rgba(50, 88, 78, .55); font-weight: 400; }
  3% { color: var(--gruen); font-weight: 700; }
}
@media (prefers-reduced-motion: reduce) { .sprach-wort { animation: none; color: var(--gruen); } }

/* ------------------------------------------------------------------
   Arabisch (RTL ohne Layout-Spiegelung, 16.10.): das Grundgeruest -
   Grid/Flex-Reihenfolge, Kopf, Fuss - bleibt unveraendert, weil das CSS
   durchgehend feste (nicht logische) Eigenschaften benutzt. Nur die paar
   Stellen, die ausdruecklich links ausgerichtet sind, muessen fuer
   arabischen Text ausdruecklich auf rechts gedreht werden. Telefonnummern
   und E-Mail-Adressen bleiben ueber dir="ltr" im Markup lesbar.
   ------------------------------------------------------------------ */
html[dir="rtl"] .hauptnav .dropdown.sprache > ul a { text-align: right; }
html[dir="rtl"] .kt-chip,
html[dir="rtl"] .kt-info h3 { text-align: right; }
html[dir="rtl"] .bio-fakt,
html[dir="rtl"] .infokarte { text-align: right; }
html[dir="rtl"] .kt-info dl { text-align: right; }

/* Willkommens-Satz unter dem Hero mit Textlinks auf die Kernseiten - damit
   Google die Unterseiten aus dem Fliesstext findet, nicht nur aus dem Menue
   (Search-Console-Befund 21.10.: vier Kernseiten nie gecrawlt). */
.willkommen-zeile { padding: 2.5rem 1.25rem 2.25rem; }
.willkommen-zeile .fliess { max-width: 40rem; margin: 0 auto; }
.willkommen-zeile a, .artikel-schluss a { color: var(--gruen); text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }
.artikel-schluss { margin: 2.5rem 0 1.25rem; }
/* Herzcheck-Block auf der Patienten-Information (21.10.): schlicht, ohne Preis, Link auf herzcheckberlin.de */
.herzcheck-text { max-width: 40rem; margin: 0 auto; }
.herzcheck-text + .infokarten { margin-top: 2.25rem; }
.infokarten + .herzcheck-text { margin-top: 2.5rem; }
/* Herzcheck-Unterseite (21.10.): Blogkarten ohne Link/Fuss als Untersuchungs-Karten */
.herzcheck-karten { max-width: 64rem; }
.herzcheck-karte .bk-text { padding-bottom: 1.75rem; }
.herzcheck-karte h3 { margin: 0 0 .5rem; }
.herzcheck-knopf { margin-bottom: 5.5rem; }
.mitte-knopf.herzcheck-knopf + .pill { margin-top: 0; }
.herzcheck-karte p { display: block; -webkit-line-clamp: unset; overflow: visible; }
.herzcheck-karte { overflow: hidden; } /* Bild beim Hover-Zoom nicht ueber die Karte hinaus (Holger 21.10.) */
.herzcheck-karten--4 { grid-template-columns: repeat(4, 1fr); }
.herzcheck-karten--4 .herzcheck-karte img { height: 11rem; }
.herzcheck-karten--4 .herzcheck-karte h3 { font-size: 1.25rem; }
.herzcheck-karten--4 .herzcheck-karte p { font-size: 1rem; }
.herzcheck-karte .bk-kat { display: block; margin-bottom: .5rem; }
.herzcheck-text + .herzcheck-karten { margin-top: 2.5rem; }
.herzcheck-chips { justify-content: center; max-width: 52rem; margin: 0 auto; }
.herzcheck-chips .kt-chip { cursor: default; }
.herzcheck-chips .kt-chip:hover { border-color: var(--gruen); }
@media (max-width: 980px) { .herzcheck-karten--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .herzcheck-karten--4 { grid-template-columns: 1fr; max-width: 26rem; } }
/* Herzcheck-Umfang als dichter Zeitstrahl: schmale Nummernspalte statt Jahr */
.vita--umfang { max-width: 44rem; }
.vita--umfang::before { left: calc(3.5rem + 0.4375rem); }
.vita--umfang .vita__item { grid-template-columns: 3.5rem 1fr; padding: 1rem 0; }
.vita--umfang .vita__item::before { left: 3.5rem; top: 1.5rem; }
.vita--umfang .vita__year { padding-right: 1.25rem; letter-spacing: .08em; font-size: .9375rem; }
.vita--umfang .vita__body h3 { font-size: 1.25rem; }
@media (max-width: 760px) {
  .vita--umfang::before { left: 0.4375rem; }
  .vita--umfang .vita__item { grid-template-columns: 1fr; }
  .vita--umfang .vita__item::before { left: 0; }
}
/* Herzcheck-Umfang als Karten-Stapel (Vorbild herzcheckberlin.de .stapel):
   sticky Karten legen sich beim Scrollen uebereinander, abwechselnd hell/gruen */
.stapel { margin: 2.75rem auto 0; max-width: 62rem; padding: 0 1.25rem; text-align: left; }
.stapel__karte + .stapel__karte { margin-top: 1.75rem; }
.stapel__karte { position: sticky; will-change: transform; }
.stapel__karte:nth-child(1) { top: 5rem; }
.stapel__karte:nth-child(2) { top: 6rem; }
.stapel__karte:nth-child(3) { top: 7rem; }
.stapel__karte:nth-child(4) { top: 8rem; }
.stapel__karte:nth-child(5) { top: 9rem; }
.stapel__karte:nth-child(6) { top: 10rem; }
.stapel__karte:nth-child(7) { top: 11rem; }
.stapel__karte:nth-child(8) { top: 12rem; }
.stapel__inhalt { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); min-height: 24rem; background: #fff; border: 1px solid rgba(50,88,78,.12); overflow: hidden; isolation: isolate; box-shadow: 0 1.5rem 3.75rem -1.875rem rgba(50,88,78,.28); }
.stapel__text { padding: 2.75rem 3rem; display: flex; flex-direction: column; justify-content: center; }
.stapel__nr { font-family: var(--serif); font-weight: 300; font-size: 1.875rem; line-height: 1; color: var(--gruen); opacity: .6; margin-bottom: 1.125rem; }
.stapel__text h3 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.375rem, 2.2vw, 1.75rem); line-height: 1.25; color: var(--gruen); margin: 0 0 .875rem; }
.stapel__text p { font-family: var(--body); font-size: 1.0625rem; line-height: 1.6; color: rgba(50,50,50,.78); margin: 0; max-width: 40ch; }
.stapel__bild { position: relative; overflow: hidden; }
.stapel__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stapel__karte--gruen .stapel__inhalt { background: var(--gruen); border-color: var(--gruen); }
.stapel__karte--gruen h3 { color: #fff; }
.stapel__karte--gruen p { color: rgba(255,255,255,.82); }
.stapel__karte--gruen .stapel__nr { color: #fff; opacity: .7; }
@media (max-width: 760px) {
  .stapel__karte { position: static; }
  .stapel__inhalt { grid-template-columns: 1fr; min-height: auto; }
  .stapel__bild { aspect-ratio: 16/10; order: -1; }
  .stapel__bild img { position: static; }
  .stapel__text { padding: 1.75rem 1.5rem; }
  .stapel__nr { font-size: 1.375rem; margin-bottom: .625rem; }
}
/* „Auf Anfrage" als Karussell wie bei Cardio Pulse: weiße Karten mit grüner
   Oberkante, Icon-Quadrat, Überzeile (medizinische Gruppe), Titel; Pfeile,
   Ziehen mit Schwung, gestaffeltes Einblenden (karussell.js). Ansage 21.10. */
.karussell { position: relative; max-width: 62rem; margin: 2.5rem auto 0; padding: 0 1.25rem; }
.karussell__track { display: flex; gap: 1rem; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; padding: .375rem .25rem 1rem; cursor: grab; -webkit-overflow-scrolling: touch; text-align: left; }
.karussell__track::-webkit-scrollbar { display: none; }
.karussell__track.wird-gezogen { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.hc-karte { flex: 0 0 min(78vw, 16.5rem); scroll-snap-align: start; display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(50,88,78,.12); border-top: 3px solid var(--gruen); padding: 1.375rem 1.375rem 1.5rem; min-height: 11.5rem; transition: box-shadow .25s ease, transform .25s ease; }
.hc-karte:hover { box-shadow: 0 .75rem 2rem rgba(50,88,78,.10); transform: translateY(-3px); }
.hc-karte .icon { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; background: var(--gruen); color: #fff; margin-bottom: 1rem; }
.hc-karte .icon svg { width: 1.375rem; height: 1.375rem; }
.hc-karte .hc-k { display: block; font-family: var(--body); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gruen); font-weight: 600; margin: 0 0 .5rem; }
.hc-karte h3 { font-family: var(--serif); font-weight: 600; font-size: 1.125rem; line-height: 1.3; color: var(--gruen); margin: 0; }
.karussell__pfeil { position: absolute; top: 50%; transform: translateY(-50%); width: 2.75rem; height: 2.75rem; border: 1px solid var(--gruen); background: #fff; color: var(--gruen); display: grid; place-items: center; cursor: pointer; z-index: 2; padding: 0; transition: opacity .2s ease; }
.karussell__pfeil[data-dir="-1"] { left: -.5rem; }
.karussell__pfeil[data-dir="1"] { right: -.5rem; }
.karussell__pfeil:disabled { opacity: .3; cursor: default; }
.karussell__pfeil svg { width: 1.125rem; height: 1.125rem; }
.ap { opacity: 0; transform: translateY(14px); transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 70ms); will-change: opacity, transform; }
.ap.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ap { opacity: 1; transform: none; transition: none; } }
@media (max-width: 760px) { .karussell__pfeil { display: none; } .karussell { padding: 0 1rem; } }
/* Herzcheck-Seite: Sektionen dichter aufeinander (Ansage 21.10. "näher oben dran") */
.mitte.dicht { padding-top: 1.5rem; }
.mitte.dicht-unten { padding-bottom: 2rem; }
.mitte.dicht h2, .mitte.dicht-unten h2 { margin-bottom: 2.25rem; }
/* "Auf Anfrage": kleine Liste in fünf medizinischen Gruppen, ohne Kästen */
.hc-gruppen { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem 2.5rem; max-width: 62rem; margin: 2.25rem auto 0; padding: 0 1.25rem; text-align: left; }
.hc-gruppe h3 { font-family: var(--body); font-weight: 600; font-size: .6875rem; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: var(--gruen); margin: 0 0 .75rem; padding-bottom: .5rem; border-bottom: 1px solid rgba(50,88,78,.35); min-height: 2.6em; display: flex; align-items: flex-end; }
.hc-gruppe ul { list-style: none; margin: 0; padding: 0; }
.hc-gruppe li { font-family: var(--serif); font-weight: 400; font-size: 1.0625rem; line-height: 1.5; color: var(--gruen); padding: .25rem 0; }
@media (max-width: 980px) { .hc-gruppen { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .hc-gruppen { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
/* Therapiekonzept auf /herzcheck: drei Fakten-Kacheln (Baustein .bio-fakt der Biografie), zentriert */
.herzcheck-fakten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 52rem; margin: 2.25rem auto 0; }
@media (max-width: 700px) { .herzcheck-fakten { grid-template-columns: 1fr; max-width: 22rem; } }
/* "Auf Anfrage": einfache Liste, eine Zeile je Untersuchung, feine Linien */
.hc-liste { list-style: none; margin: 1.5rem auto 0; padding: 0; max-width: 26rem; border-top: 1px solid rgba(50,88,78,.35); }
.hc-liste li { font-family: var(--serif); font-weight: 400; font-size: 1.0625rem; line-height: 1.4; color: var(--gruen); padding: .625rem 0; border-bottom: 1px solid rgba(50,88,78,.18); }
.hc-anfrage { max-width: 44rem; }
/* "Auf Anfrage" als Pillen: Baustein .pill, zentriert umbrechend, ohne Punkt */
.hc-pillen { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; max-width: 56rem; margin: 1.5rem auto 0; padding: 0 1.25rem; }
.hc-pille { display: flex; width: 100%; justify-self: stretch; box-sizing: border-box; margin-bottom: 0; justify-content: center; align-items: center; text-align: center; padding: .625rem .75rem; font-size: .6875rem; letter-spacing: .08em; line-height: 1.35; white-space: normal; min-height: 2.75rem; }
@media (max-width: 760px) { .hc-pillen { grid-template-columns: repeat(2, 1fr); } }
.hc-pille::before { display: none; }
/* Herzmappen-Video im Befund: klein und eingefasst statt vollbreit (Ansage 21.10. "muss kleiner sein") */
.hc-video { max-width: 50rem; margin: 2.5rem auto 0; background: #fff; border: 1px solid rgba(50,88,78,.12); box-shadow: 0 1.5rem 3.75rem -1.875rem rgba(50,88,78,.28); padding: 0; overflow: hidden; } /* Karte: Video oben, weisse Textbox direkt darunter, ohne Luecke (Holger 22.10.) */
.hc-video video { aspect-ratio: 16 / 9; }
.hc-video figcaption { font-family: var(--serif); font-weight: 600; font-size: 1.375rem; color: var(--gruen); margin: 0; padding: 1.5rem 1.5rem 1.625rem; text-align: center; position: relative; background: #fff; }
.hc-video figcaption::before { display: none; }
.hc-video video { display: block; width: 100%; height: 100%; object-fit: cover; } /* weisser Videohintergrund verschmilzt mit dem Blattgrau, kein Kasten (Holger 21.10.) */
.herzcheck-fakten + .herzcheck-text { margin-top: 2.25rem; }
/* Flipkarten "Wie geht es weiter?" auf /herzcheck: drei Anliegen, drehen bei Hover oder Tippen (Ansage 21.10.) */
.flipkarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; max-width: 58rem; margin: 2.5rem auto 0; padding: 0 1.25rem; perspective: 1400px; }
.flipkarte { appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0; cursor: pointer; text-align: center; min-height: 18rem; font: inherit; color: inherit; }
.flipkarte__innen { position: relative; display: block; width: 100%; height: 100%; min-height: 18rem; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.flipkarte:hover .flipkarte__innen, .flipkarte:focus-visible .flipkarte__innen, .flipkarte.ist-gedreht .flipkarte__innen { transform: rotateY(180deg); }
.flipkarte__vorn, .flipkarte__hinten { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2rem 2rem; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid rgba(50,88,78,.12); }
.flipkarte__vorn { background: #fff; }
.flipkarte__hinten { background: var(--gruen); color: #fff; transform: rotateY(180deg); }
.flipkarte__nr { font-family: var(--serif); font-weight: 300; font-size: 1.25rem; color: var(--gruen); opacity: .6; margin-bottom: .75rem; }
.flipkarte__titel { font-family: var(--serif); font-weight: 600; font-size: 1.75rem; line-height: 1.25; color: var(--gruen); }
.flipkarte__hinweis { margin-top: auto; padding-top: 1.25rem; font-family: var(--body); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(50,88,78,.55); }
.flipkarte__text { font-family: var(--serif); font-weight: 600; font-size: 1.625rem; line-height: 1.3; color: #fff; }
.flipkarten + .herzcheck-text { margin-top: 2.5rem; }
@media (max-width: 860px) { .flipkarten { grid-template-columns: 1fr; max-width: 26rem; } .flipkarte, .flipkarte__innen { min-height: 13rem; } }
@media (prefers-reduced-motion: reduce) { .flipkarte__innen { transition: none; } }
.flipkarten + .mitte-knopf { margin-top: 3rem; }
.flipkarten--4 { grid-template-columns: repeat(4, 1fr); max-width: 66rem; gap: 1rem; }
.flipkarten--4 .flipkarte__titel { font-size: 1.5rem; }
.flipkarten--4 .flipkarte__text { font-size: 1.375rem; }
@media (max-width: 1000px) { .flipkarten--4 { grid-template-columns: repeat(2, 1fr); max-width: 40rem; } }
@media (max-width: 600px) { .flipkarten--4 { grid-template-columns: 1fr; max-width: 26rem; } }
/* "Wie geht es weiter?": Verzweigung nach dem Herzcheck, drei Wege nebeneinander, Linien statt Karten (Ansage 21.10. "andere Darstellung") */
.wege { max-width: 60rem; margin: 2.75rem auto 0; padding: 0 1.25rem; }
.wege__start { display: inline-block; font-family: var(--body); font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gruen); border: 1px solid var(--gruen); padding: .625rem 1.25rem; background: #fff; position: relative; }
.wege__start::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 2.5rem; background: var(--gruen); }
.wege__aeste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 2rem; margin-top: 2.5rem; position: relative; padding-top: 2.5rem; }
/* Querlinie laeuft von Astmitte zu Astmitte (inkl. Spaltenabstand), damit die Ecken exakt treffen */
.weg::after { content: ""; position: absolute; top: -2.5rem; left: 50%; width: calc(100% + 2rem); height: 1px; background: var(--gruen); }
.weg:last-child::after { display: none; }
.weg { position: relative; text-align: center; padding: 0 .5rem; }
.weg::before { content: ""; position: absolute; left: 50%; top: -2.5rem; width: 1px; height: 2.5rem; background: var(--gruen); }
.weg__punkt { display: block; width: .875rem; height: .875rem; border-radius: 50%; background: var(--gruen); margin: -0.4375rem auto 1.25rem; position: relative; z-index: 1; }
.weg h3 { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; line-height: 1.25; color: var(--gruen); margin: 0 0 .625rem; }
.weg p { font-family: var(--body); font-size: 1.0625rem; line-height: 1.6; color: rgba(50,50,50,.78); margin: 0; }
.wege + .mitte-knopf { margin-top: 3.5rem; }
@media (max-width: 760px) {
  .wege__aeste { grid-template-columns: 1fr; gap: 2.25rem; padding-top: 0; margin-top: 0; }
  .weg::before, .weg::after { display: none; }
  .wege__start::after { height: 1.75rem; }
  .weg { padding-top: 1.75rem; }
  .weg__punkt { margin-top: 0; }
}
.hc-pille { white-space: normal !important; overflow-wrap: normal; hyphens: manual; font-size: .875rem; letter-spacing: .12em; min-height: 3.5rem; padding: .875rem 1rem; }
@media (max-width: 480px) { .hc-pillen { grid-template-columns: 1fr; max-width: 22rem; } }
/* Wege senkrecht untereinander: eine Linie, drei Stationen, gleich lange Saetze, grosse Schrift (Ansage 21.10.) */
.wege--senkrecht { max-width: 40rem; text-align: center; }
.wege--senkrecht .wege__start::after { height: 2.25rem; }
.wege__liste { list-style: none; margin: 2.25rem auto 0; padding: 0; position: relative; }
.wege__liste::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--gruen); }
.wege--senkrecht .weg { padding: 0 1rem 2.75rem; }
.wege--senkrecht .weg:last-child { padding-bottom: 0; }
.wege--senkrecht .weg::before, .wege--senkrecht .weg::after { display: none; }
.wege--senkrecht .weg__punkt { margin: 0 auto 1rem; }
.wege--senkrecht .weg h3 { font-size: 2rem; margin-bottom: 0; background: var(--blatt); display: inline-block; padding: 0 .75rem .5rem; position: relative; }
.wege--senkrecht .weg p { font-size: 1.25rem; line-height: 1.5; color: var(--gruen); background: var(--blatt); display: inline-block; padding: 0 .75rem; position: relative; max-width: 34rem; }
.wege--senkrecht .weg:last-child { background: var(--blatt); }
@media (max-width: 600px) { .wege--senkrecht .weg h3 { font-size: 1.5rem; } .wege--senkrecht .weg p { font-size: 1.0625rem; } }
/* "Wie geht es weiter?" als Skala: drei Stufen von hell nach dunkel, Titel im Feld, Satz darunter (Ansage 21.10.) */
.skala { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 62rem; margin: 2.75rem auto 0; padding: 0 1.25rem; }
.skala__stufe { background: #fff; border: 1px solid rgba(50,88,78,.12); display: flex; flex-direction: column; transition: box-shadow .25s ease, transform .25s ease; }
.skala__stufe:hover { box-shadow: 0 .75rem 2rem rgba(50,88,78,.12); transform: translateY(-3px); } /* Hover wie die Blogkarten (Holger 22.10.) */
.skala__feld { display: flex; align-items: center; justify-content: center; min-height: 13rem; padding: 2rem 1.5rem; text-align: center; }
.skala__stufe--1 .skala__feld { background: rgba(50,88,78,.22); }
.skala__stufe--2 .skala__feld { background: rgba(50,88,78,.58); }
.skala__stufe--3 .skala__feld { background: var(--gruen); }
.skala__feld h3 { font-family: var(--serif); font-weight: 600; font-size: 1.875rem; line-height: 1.2; margin: 0; color: var(--gruen); }
.skala__stufe--2 .skala__feld h3, .skala__stufe--3 .skala__feld h3 { color: #fff; }
.skala__stufe p { font-family: var(--body); font-size: 1.0625rem; line-height: 1.6; color: rgba(50,50,50,.8); margin: 0; padding: 1.5rem 1.5rem 1.75rem; text-align: center; }
.skala + .mitte-knopf { margin-top: 3.25rem; }
@media (max-width: 760px) { .skala { grid-template-columns: 1fr; gap: 1.75rem; max-width: 26rem; } .skala__feld { min-height: 8rem; } }
/* Grosser Textflipper: Anliegen der Patienten wechseln durch (Ansage 21.10.) */
.textflipper { position: relative; min-height: 10rem; max-width: 62rem; margin: 0 auto; perspective: 1200px; }
.textflipper__satz { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; padding: 0 1rem; font-family: var(--serif); font-weight: 600; font-size: clamp(2.125rem, 4.4vw, 3.75rem); line-height: 1.15; color: var(--gruen); opacity: 0; transform: rotateX(-70deg) translateY(1rem); transform-origin: 50% 100%; transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1); will-change: transform, opacity; }
.textflipper__satz.ist-aktiv { opacity: 1; transform: none; }
.textflipper__satz.geht { opacity: 0; transform: rotateX(70deg) translateY(-1rem); transform-origin: 50% 0; }
.textflipper + .mitte-knopf { margin-top: 2.5rem; }
@media (prefers-reduced-motion: reduce) { .textflipper__satz { transition: none; } }
/* Auf Anfrage zum Aufklappen: Pille als Schalter, Raster erst nach Klick */
.hc-klapp { max-width: 66rem; margin: 0 auto; }
.hc-klapp__pill { list-style: none; cursor: pointer; margin: 0 auto; display: inline-flex; }
.hc-klapp__pill::-webkit-details-marker { display: none; }
.hc-klapp__pill::before { display: none; }
.hc-klapp__pill:hover { border-color: var(--gruen); background: rgba(50,88,78,.12); }
.hc-klapp__auf { display: none; }
.hc-klapp[open] .hc-klapp__zu { display: none; }
.hc-klapp[open] .hc-klapp__auf { display: inline; }
.hc-klapp .hc-pillen { margin-top: 1.75rem; }
.hc-klapp__pill { font-size: .875rem; padding: .875rem 1.75rem; }
/* Untermenue breit genug fuer 'Kardiologischer Herzcheck' in einer Zeile */
.hauptnav .dropdown:not(.sprache) > ul { min-width: 16rem; }
.hauptnav .dropdown:not(.sprache) > ul a { white-space: nowrap; }
.textflipper-sektion { padding-bottom: 0; }
.textflipper-sektion + .willkommen-zeile { padding-top: 1.5rem; }
/* Puzzle-Animation Therapiekonzept: drei Teile fahren beim Scrollen zusammen (Ansage 22.10.) */
.puzzle { position: relative; display: flex; justify-content: center; align-items: center; gap: 0; max-width: 52rem; margin: 2.75rem auto 0; padding: 0 1.25rem 3.5rem; }
.puzzle__teil { position: relative; flex: 0 0 15rem; height: 7rem; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 600; font-size: 1.25rem; color: #fff; background: var(--gruen); transition: transform 1s cubic-bezier(.2,.7,.2,1), opacity .8s ease; will-change: transform; }
.puzzle__teil--1 { background: #5c7f76; transform: translateX(-120%) rotate(-6deg); opacity: 0; z-index: 3; }
.puzzle__teil--2 { transform: translateY(80%) scale(.9); opacity: 0; transition-delay: .15s; z-index: 2; }
.puzzle__teil--3 { background: #436b62; transform: translateX(120%) rotate(6deg); opacity: 0; transition-delay: .3s; z-index: 1; }
/* Nase rechts und Kerbe links wie bei einem Puzzleteil */
.puzzle__teil::after { content: ""; position: absolute; right: -1.1rem; top: 50%; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: inherit; transform: translateY(-50%); z-index: 2; }
.puzzle__teil--3::after { display: none; }
.puzzle__teil::before { display: none; }
.puzzle__teil span { position: relative; z-index: 4; padding: 0 1rem; text-align: center; }
.puzzle__ergebnis { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-family: var(--body); font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gruen); opacity: 0; transform: translateY(.5rem); transition: opacity .6s ease 1.1s, transform .6s ease 1.1s; }
.auf-js .puzzle[data-auf].da .puzzle__teil { transform: none; opacity: 1; }
.auf-js .puzzle[data-auf].da .puzzle__ergebnis { opacity: 1; transform: none; }
.puzzle + .mitte-knopf { margin-top: 1.5rem; }
@media (max-width: 760px) {
  .puzzle { flex-direction: column; gap: .75rem; padding-bottom: 3rem; }
  .puzzle__teil { flex: 0 0 auto; width: 100%; max-width: 18rem; height: 5rem; }
  .puzzle__teil::before, .puzzle__teil::after { display: none; }
  .puzzle__teil--1 { transform: translateX(-40%); } .puzzle__teil--3 { transform: translateX(40%); }
}
@media (prefers-reduced-motion: reduce) { .puzzle__teil, .puzzle__ergebnis { transition: none; transform: none; opacity: 1; } }
.haltung { padding-top: 0; }
/* "Weitere" auf der Vita: Eintraege kommen gestaffelt von links (Holger 22.10. "die auch animieren") */
.auf-js .gruenpanel .cv-eintrag[data-auf] { transform: translateX(-1.5rem); transition-duration: .9s; }
.auf-js .gruenpanel .cv-eintrag[data-auf].da { transform: none; }
.gruenpanel .cv-eintrag[data-auf]:nth-of-type(2) { transition-delay: .18s; }
.gruenpanel .cv-eintrag[data-auf]:nth-of-type(3) { transition-delay: .36s; }
.gruenpanel .cv-eintrag[data-auf]:nth-of-type(4) { transition-delay: .54s; }
/* Puzzle mit Bildern: Foto im Teil, gruener Schleier, Text darueber; Nase als Kreis im Schleierton (Holger 22.10.) */
.puzzle__teil { overflow: visible; height: 9rem; }
.puzzle__teil img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.puzzle__teil::before { content: ""; display: block !important; position: absolute; inset: 0; left: 0; top: 0; width: auto; height: auto; border-radius: 0; transform: none; background: rgba(50,88,78,.62); z-index: 1; }
.puzzle__teil--2::before { background: rgba(50,88,78,.78); }
.puzzle__teil::after { background: rgba(50,88,78,.9); }
.puzzle__teil span { text-shadow: 0 1px 8px rgba(0,0,0,.25); font-size: 1.375rem; }
@media (max-width: 760px) { .puzzle__teil::before { display: block !important; } .puzzle__teil { height: 6rem; } }
.herzkonzept { padding-top: 2rem; }
/* Puzzle groesser (Holger 22.10. "Bilder bigger") */
.puzzle { max-width: 66rem; }
.puzzle__teil { flex: 0 0 20rem; height: 15rem; }
.puzzle__teil span { font-size: 1.625rem; }
.puzzle__teil::after { width: 3rem; height: 3rem; right: -1.5rem; }
@media (max-width: 1100px) { .puzzle__teil { flex: 0 0 15rem; height: 11rem; } }
@media (max-width: 760px) { .puzzle__teil { height: 9rem; max-width: 22rem; } }
/* Herzcheck-Karte auf der Patienten-Information wie "International Patients": weisse Karte im gruenen Panel (Holger 22.10.) */
.herzcheck-panel { padding-bottom: 5rem; }
.herzcheck-panel .intl-karte { text-align: center; }
/* Herzcheck-Panel: gleicher Abstand nach dem Hero wie die Blattgrau-Sektionen */
.gruenpanel.herzcheck-panel.nach-hero { padding-top: var(--luft); }
@media (max-width: 1023px) { .gruenpanel.herzcheck-panel.nach-hero { padding-top: 3.5rem; } }
/* Blog: Suchkasten buendig mit Kopf und Reitern (Holger 22.10. "die Box schaut da raus") */
@media (max-width: 1023px) { .blog-suche { width: calc(100% - 5rem); } }
/* Leistungsspektrum: 24 Pillen in vier Spalten */
.hc-pillen--4 { grid-template-columns: repeat(4, 1fr); max-width: 62rem; margin-top: 2.25rem; }
@media (max-width: 900px) { .hc-pillen--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .hc-pillen--4 { grid-template-columns: 1fr; } }
/* Blog-Suche buendig mit Kopf und Reitern: gleiches Innenpolster wie .blogtabs (Holger 22.10.) */
.blog-suche { box-sizing: border-box; padding-left: 1.25rem; padding-right: 1.25rem; }
.blog-suche__icon { left: 2.25rem; }
/* Leistungsspektrum: alle Pillen gleich hoch */
.hc-pillen--4 { grid-auto-rows: 5rem; }
.hc-pillen--4 .hc-pille { height: 5rem; min-height: 0; padding-top: 0; padding-bottom: 0; }
.hc-klapp .hc-pillen--4 { margin-top: 2rem; }
/* Aufklapp-Pille mit Abstand zum Satz darueber (Holger 22.10.) */
.herzcheck-text + .hc-klapp, .hc-klapp { margin-top: 4rem !important; }
.hc-klapp + .mitte-knopf { margin-top: 4.5rem !important; }
/* Herzcheck-Karte: groesserer Text (Holger 22.10.) */
.herzcheck-panel .intl-karte p { font-size: 1.3125rem; line-height: 1.6; }
.herzcheck-panel .intl-karte h2 { font-size: 3.5rem; line-height: 1.1; margin-bottom: 2rem; }
.herzcheck-panel .intl-karte { max-width: 46rem; }
/* Live-Hinweis im Anruf-Knopf: dezentes Pulsieren, nur in der letzten Stunde vor Schluss
   und der letzten halben Stunde vor Oeffnung (hours.js setzt .ist-live) */
[data-hours="sub"].ist-live { animation: hinweis-puls 2.4s ease-in-out infinite; }
@keyframes hinweis-puls { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { [data-hours="sub"].ist-live { animation: none; } }
/* Untertitel im Anruf-Knopf atmet immer leicht (Holger 22.10.: "ein bisschen mehr Varianz, damit mehr geklickt wird"),
   in der Live-Phase deutlicher */
[data-hours="sub"] { animation: hinweis-atmen 4.5s ease-in-out infinite; }
@keyframes hinweis-atmen { 0%, 100% { opacity: 1; } 50% { opacity: .62; } }
@media (prefers-reduced-motion: reduce) { [data-hours="sub"] { animation: none; } }
/* Journale verlinkt (Holger 22.10.), ruhig: Farbe bleibt, feine Unterstreichung */
.forschung-journale a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: rgba(50,88,78,.4); }
.forschung-journale a:hover { text-decoration-color: var(--gruen); }
/* Textwechsel im Anruf-Knopf und in der Kontakt-Kachel: kurzer, eleganter Flip (Holger 22.10.) */
[data-hours] { display: inline-block; transform-origin: 50% 100%; }
[data-hours].wechselt { animation: text-flip .7s cubic-bezier(.2,.7,.2,1); }
@keyframes text-flip { 0% { opacity: 0; transform: rotateX(-80deg) translateY(.25rem); } 100% { opacity: 1; transform: none; } }
.uf-anruf__t small { perspective: 400px; }
@media (prefers-reduced-motion: reduce) { [data-hours].wechselt { animation: none; } }
/* Untertitel im Anruf-Knopf bleibt einzeilig, Knopf so breit wie sein Inhalt */
.uf-anruf__t small { white-space: nowrap; }
.uf-anruf { max-width: none; width: auto; }
/* Kontakt-Kachel: Status gruen und kraeftiger, in der Live-Phase deutlich mit pulsierendem Punkt (Holger 22.10.) */
.kt-kachel__meta[data-hours] { color: var(--gruen); font-weight: 500; }
.kt-kachel__meta[data-hours].is-closed { color: rgba(50, 88, 78, .7); }
.kt-kachel__meta[data-hours].ist-live { color: #1f8a63; font-weight: 600; font-size: 0.9375rem; }
.kt-kachel__meta[data-hours].ist-live::before { content: ""; display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: #1f8a63; margin-right: .5rem; vertical-align: middle; animation: punkt-puls 1.4s ease-in-out infinite; box-shadow: 0 0 0 0 rgba(31,138,99,.45); }
@keyframes punkt-puls { 0% { box-shadow: 0 0 0 0 rgba(31,138,99,.45); } 70% { box-shadow: 0 0 0 .55rem rgba(31,138,99,0); } 100% { box-shadow: 0 0 0 0 rgba(31,138,99,0); } }
@media (prefers-reduced-motion: reduce) { .kt-kachel__meta[data-hours].ist-live::before { animation: none; } }
/* E-Mail-Kachel (hohe Nachfrage, Antwort in 2-3 Werktagen) im gleichen Kleid wie der Telefon-Status (Holger 22.10.) */
.kt-kachel__meta--live { color: var(--gruen); font-weight: 500; }
.kt-kachel__meta--live::before { content: ""; display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--gruen); margin-right: .5rem; vertical-align: middle; animation: punkt-puls-sanft 2.4s ease-in-out infinite; }
@keyframes punkt-puls-sanft { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .kt-kachel__meta--live::before { animation: none; } }
/* E-Mail-Hinweis exakt wie der Telefon-Status in der Live-Phase */
.kt-kachel .kt-kachel__meta--live, .kt-kachel .kt-kachel__meta--live .kt-zahl, .kt-kachel .kt-kachel__meta--live .kz-z { color: #1f8a63 !important; font-weight: 600; font-size: 0.9375rem; }
.kt-kachel .kt-kachel__meta--live::before { background: #1f8a63 !important; box-shadow: 0 0 0 0 rgba(31,138,99,.45); animation: punkt-puls 1.4s ease-in-out infinite; }
/* "Alle Wege zu uns": Telefon-Status immer im gleichen kraeftigen Gruen wie der E-Mail-Hinweis, mit Punkt (Holger 22.10.) */
.kt-kachel .kt-kachel__meta[data-hours] { color: #1f8a63 !important; font-weight: 600; font-size: 0.9375rem; }
.kt-kachel .kt-kachel__meta[data-hours]::before { content: ""; display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: #1f8a63 !important; margin-right: .5rem; vertical-align: middle; animation: punkt-puls 1.4s ease-in-out infinite; box-shadow: 0 0 0 0 rgba(31,138,99,.45); }
.kt-kachel .kt-kachel__meta[data-hours].is-closed { color: #1f8a63 !important; }
@media (prefers-reduced-motion: reduce) { .kt-kachel .kt-kachel__meta[data-hours]::before { animation: none; } }
/* Status-Zeilen in den Kontakt-Kacheln bleiben einzeilig (Holger 22.10.) */
.kt-kachel .kt-kachel__meta[data-hours], .kt-kachel .kt-kachel__meta--live { white-space: nowrap; font-size: 0.875rem; letter-spacing: 0; }
@media (max-width: 420px) { .kt-kachel .kt-kachel__meta[data-hours], .kt-kachel .kt-kachel__meta--live { font-size: 0.8125rem; } }
/* Ruhiger, redaktionell statt "Status-LED" (Holger 22.10.: "zu KI-artig"): kein Punkt, kein Pulsieren,
   kein Leuchtgruen - einfach eine Zeile in der Hausfarbe, beide Kacheln gleich */
.kt-kachel .kt-kachel__meta[data-hours], .kt-kachel .kt-kachel__meta--live,
.kt-kachel .kt-kachel__meta--live .kt-zahl, .kt-kachel .kt-kachel__meta--live .kz-z { color: var(--gruen) !important; font-weight: 500; font-size: 0.875rem; animation: none; }
.kt-kachel .kt-kachel__meta[data-hours]::before, .kt-kachel .kt-kachel__meta--live::before { display: none !important; content: none; animation: none; }
.kt-kachel .kt-kachel__meta[data-hours].ist-live { color: var(--gruen) !important; font-weight: 600; }
/* Textwechsel als sichtbarer Flip, wie die Ziffern (Holger 22.10.) */
.kt-kachel__meta, .uf-anruf__t small { perspective: 600px; }
[data-hours] { display: inline-block; backface-visibility: hidden; transform-origin: 50% 50%; }
[data-hours].wechselt { animation: text-flip 1s cubic-bezier(.2,.7,.2,1) both; }
@keyframes text-flip {
  0%   { opacity: 0; transform: rotateX(95deg); }
  55%  { opacity: 1; transform: rotateX(-12deg); }
  100% { opacity: 1; transform: rotateX(0); }
}
/* Veroeffentlichungen (Auswahl) unter den Journalen: Journal und Jahr klein, Titel verlinkt (Holger 22.10.) */
.forschung-pub-titel { margin-top: 2.5rem !important; font-weight: 600; }
.forschung-publikationen { list-style: none; margin: 1rem auto 0; padding: 0; max-width: 40rem; text-align: center; }
.forschung-publikationen li { padding: .875rem 0; border-top: 1px solid rgba(50,88,78,.16); }
.forschung-publikationen li:last-child { border-bottom: 1px solid rgba(50,88,78,.16); }
.forschung-publikationen .fp-journal { display: block; font-family: var(--body); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(50,88,78,.65); margin-bottom: .35rem; }
.forschung-publikationen a { font-family: var(--serif); font-weight: 400; font-size: 1.0625rem; line-height: 1.45; color: var(--gruen); text-decoration: none; }
.forschung-publikationen a:hover { text-decoration: underline; text-underline-offset: .2em; }
/* Siegel direkt unter Portraet und Fakten, vor dem Text (Holger 22.10.) */
.siegel-reihe--oben { padding: 2.5rem 1.25rem 1rem; }
/* Siegel gleitet beim Scrollen von unten herein (Holger 22.10.) */
.auf-js .siegel-reihe[data-auf] { transform: translateY(3.5rem); transition-duration: 1.1s; }
.auf-js .siegel-reihe[data-auf].da { transform: none; }
/* Leistungsspektrum: vier exakt gleich breite Spalten, Pillen fuellen die Zelle (Holger 22.10.) */
.hc-pillen--4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.hc-pillen--4 .hc-pille { width: 100%; min-width: 0; box-sizing: border-box; }
@media (max-width: 900px) { .hc-pillen--4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 480px) { .hc-pillen--4 { grid-template-columns: minmax(0, 1fr) !important; } }
/* "Bevorzugte Quelle bei Google" unter dem Blog: stille Zeile, kein fremdes Skript (Ansage 29.10.) */
.quelle-zeile { padding-top: 0; padding-bottom: 4.5rem; }
.quelle-link { font-family: var(--body); font-size: .9375rem; color: rgba(50,88,78,.75); text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; text-decoration-color: rgba(50,88,78,.3); }
.quelle-link:hover { color: var(--gruen); text-decoration-color: var(--gruen); }
/* Gleiche Zeile am Ende jedes Blogbeitrags, dort wo Google sie empfiehlt (29.10.) */
.quelle-artikel { margin: 1.25rem 0 0; }

/* ------------------------------------------------ Blog-Bedienleiste
   Rubriken, Suche und Ansichtswechsel standen in zwei Zeilen, in
   unterschiedlichen Breiten und mit drei verschiedenen Knopfhoehen.
   Jetzt eine Leiste auf derselben Rasterkante wie die Karten, alle
   Bedienelemente exakt gleich hoch (Ansage 3.11., "die Knoepfe auch
   gut, im Raster, nicht rein oder rausragen"). */
.blogkopf,
.blogleiste,
.blogband .blogkarten,
:root[data-blogansicht="liste"] .blogband .blogkarten {
  box-sizing: border-box;
  width: 100%;
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.blogleiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 1.5rem;
  flex-wrap: wrap;
  margin-top: 2.25rem;
}

.blogleiste .blogtabs {
  width: auto !important;
  max-width: none;
  margin: 0;
  padding: 0;
  flex: 1 1 22rem;
  min-width: 0;
}

.blogleiste .bt-reihe { justify-content: flex-start; }

.blogwerkzeug {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex: 0 0 auto;
}

.blogleiste .blog-suche {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}

/* Eine Hoehe fuer alle drei Bedienelemente, sonst springt die Grundlinie */
.blogleiste .blogtabs a,
.blogleiste .bt-umschalter,
.blogleiste .blog-suche__feld {
  box-sizing: border-box;
  height: 2.625rem;
  padding-top: 0;
  padding-bottom: 0;
}

.blogleiste .blog-suche__feld {
  width: 15.5rem;
  max-width: none;
  padding-left: 2.75rem;
  padding-right: 1rem;
  font-size: 0.9375rem;
}

.blogleiste .blog-suche__icon { left: 1rem; }
.blogleiste .bt-umschalter { margin-left: 0; }

.blogleiste + .blog-suche__leer + .blogband,
.blogleiste + .blogband { padding-top: 2.5rem; }

@media (max-width: 60rem) {
  .blogleiste { flex-direction: column; align-items: stretch; gap: 1rem; }
  .blogleiste .bt-reihe { justify-content: center; }
  .blogwerkzeug { justify-content: center; }
  .blogleiste .blog-suche { flex: 1 1 auto; min-width: 0; }
  .blogleiste .blog-suche__feld { width: 100%; }
}

/* Alle fuenf Rubriken sollen neben Suche und Umschalter in eine Zeile
   passen, sonst haengt "Presse" allein unter der Leiste. */
.blogleiste .blogtabs a {
  padding-left: 1rem;
  padding-right: 1rem;
  letter-spacing: 0.12em;
}
.blogleiste .bt-umschalter {
  padding-left: 0.9375rem;
  padding-right: 0.9375rem;
  letter-spacing: 0.12em;
}
.blogleiste .blog-suche__feld { width: 12.5rem; }
.blogleiste .blogtabs a,
.blogleiste .bt-umschalter {
  font-size: 12px;
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  gap: 0.4375rem;
}
.blogleiste .blog-suche__feld { width: 11rem; }

/* Schmale Schirme: die Leiste stapelt, die Rubriken muessen umbrechen
   duerfen, sonst schiebt die Reihe die ganze Seite nach rechts. */
@media (max-width: 60rem) {
  .blogleiste { flex-direction: column; align-items: stretch; gap: 1rem; }
  .blogleiste .blogtabs { flex: 0 1 auto; width: 100% !important; min-width: 0; }
  .blogleiste .bt-reihe { width: 100%; flex-wrap: wrap; justify-content: center; min-width: 0; }
  .blogleiste .blogwerkzeug { width: 100%; justify-content: center; }
  .blogleiste .blog-suche { flex: 1 1 auto; min-width: 0; }
  .blogleiste .blog-suche__feld { width: 100%; }
}