/* =========================================================================
   Design_Final — Design_6 „Ordination" als Basis, verbunden mit den
   Elementen aus Design_5, die der Kundin dort besser gefallen haben.

   Aus Design_6 (unverändert):
     .bildpanel     Foto, das zum Seitenrand ausläuft, mit Textspalte darauf
     .zweite-zeile  taupefarbene zweite Zeile der Hauptüberschrift
     .subline       kurzer Strich plus Erläuterung unter der H2
     .icon-kachel   rotes, abgerundetes Quadrat mit weißem Icon
     .uebernahme    die Karten zu „Was bleibt / ändert sich / in Planung"
     Taupe als zweite Markenfarbe: Sekundärbuttons, Bänder, Fußzeile

   Aus Design_5 übernommen (jede Stelle ist unten einzeln kommentiert):
     .btn           roter Logoverlauf statt Volltonfarbe, weicher Farbschatten
     Radien         Buttons 12 px, Karten 18 px, Bilder 22 px
     .marke-text    Wortmarke rechts neben der Bildmarke
     .btn-befunde   „Befunde abrufen" im Seitenkopf — bleibt auch mobil sichtbar
   ========================================================================= */

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-text);
  font-size: var(--fliess);
  line-height: var(--lh-text);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--tinte);
  line-height: var(--lh-eng);
  text-wrap: balance;
}
h1 { font-size: var(--h1); font-weight: 400; letter-spacing: -0.02em; }
h2 { font-size: var(--h2); font-weight: 400; letter-spacing: -0.015em; }
h3 { font-size: var(--h3); font-weight: 700; line-height: 1.35; }
/* h4 sieht aus wie h3 — im Uebernahme-Abschnitt sind die Kartentitel eine
   Ebene unter der Gruppenueberschrift, sollen aber gleich gross wirken. */
h4 { font-size: var(--h3); font-weight: 700; line-height: 1.35; }
p { text-wrap: pretty; }

a { color: var(--akzent-text); text-underline-offset: 0.18em; }

:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 4px; }

/* --- Hilfen -------------------------------------------------------------- */
.wrap { width: min(100% - var(--rand) * 2, var(--breite)); margin-inline: auto; }
.wrap-eng { width: min(100% - var(--rand) * 2, var(--breite-eng)); margin-inline: auto; }

.nur-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: var(--s4); top: var(--s4); z-index: 200;
  transform: translateY(-200%);
  background: var(--verlauf-text); color: #fff;
  padding: var(--s3) var(--s5); border-radius: var(--radius-btn);
  text-decoration: none; font-weight: 700; box-shadow: var(--schatten-rot);
}
.skip:focus { transform: translateY(0); }

section { padding-block: clamp(var(--s7), 5.5vw, var(--s9)); }
.sektion-alt { background: var(--bg-alt); }

/* Versalien mit weiter Sperrung — durchgängiges Merkmal der Vorlage. */
.augenbraue {
  display: block;
  font-size: var(--mikro);
  letter-spacing: var(--sperr-weit);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--taupe-text);
  margin-bottom: var(--s5);
}

/* Abschnittskopf: H2, darunter kurzer Strich plus Erläuterung.
   Der Strich trägt jetzt denselben Verlauf wie die Buttons, damit Rot auf
   der Seite überall dieselbe Handschrift hat. */
.kopfzeile { margin-bottom: var(--s7); max-width: var(--masz); }
/* Seitenköpfe mit H1 dürfen breiter laufen: die große Schrift bräche sonst
   eine zweite Zeile wie „in drei Untersuchungen" noch einmal um. */
.kopfzeile:has(> h1) { max-width: none; }
.kopfzeile:has(> h1) > p { max-width: var(--masz); }
.subline {
  display: flex; align-items: center; gap: var(--s4);
  margin-top: var(--s4);
  color: var(--taupe-text); font-size: var(--klein);
}
/* Die Unterzeile neben dem roten Strich steht einzeilig. Sie darf dafür
   über die Lesebreite des Kopfes hinauslaufen. Auf schmalen Bildschirmen
   passt eine lange Zeile physisch nicht, dort bricht sie weiterhin um. */
@media (min-width: 900px) {
  .kopfzeile .subline { white-space: nowrap; width: max-content; max-width: none; }
}
.subline::before {
  content: ""; width: 34px; height: 3px; border-radius: 2px;
  background: var(--verlauf-linie); flex: none;
}

/* --- Marke: Bildmarke links, Wortmarke rechts daneben (aus Design_5) ----- */
.marke {
  display: inline-flex; align-items: center; gap: var(--s3);
  text-decoration: none; flex: none;
}
.marke img, .marke svg { width: auto; height: 2.75rem; flex: none; }
.marke-text {
  font-family: var(--font-text); font-weight: 700; line-height: 1.08;
  letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8125rem;
  color: var(--tinte); white-space: nowrap;
}
.marke-text span { display: block; font-weight: 400; letter-spacing: 0.145em; }
/* Dritte Zeile: der Ort. Kleiner und in Taupe, damit er als Ortsangabe
   liest und nicht als dritter Teil des Namens. Die Sperrung ist so
   gewählt, dass „NEUNKIRCHEN" etwa so breit läuft wie „DIAGNOSE" - die
   Wortmarke wird dadurch nicht breiter und passt weiter in den Kopf. */
.marke-text .marke-ort {
  margin-top: 0.2em;
  font-size: max(0.72em, 0.5625rem); font-weight: 600; letter-spacing: 0.12em;
  color: var(--taupe);
}
.fuss .marke-text .marke-ort,
.marke-hell .marke-ort { color: #fff; }
.marke-hell { color: #fff; }

/* --- Kopf: Logo links, Navigation mittig, Aktionen rechts --------------- */
.kopf {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--grund) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
}
.kopf-innen {
  display: flex; align-items: center; gap: var(--s4);
  padding-block: var(--s3);
}
.kopf-nav { margin-inline: auto; }
.kopf-nav ul { display: flex; gap: clamp(var(--s3), 1.9vw, var(--s6)); align-items: center; }
.kopf-nav a {
  color: var(--tinte); text-decoration: none;
  font-size: var(--mikro); font-weight: 600;
  letter-spacing: var(--sperr-mit); text-transform: uppercase;
  padding-block: var(--s2);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--tempo) var(--kurve), border-color var(--tempo) var(--kurve);
}
.kopf-nav a:hover { color: var(--akzent-text); border-bottom-color: var(--rot); }
.kopf-nav a[aria-current="page"] { color: var(--akzent-text); border-bottom-color: var(--rot); }
/* Auf den Einzelseiten der Leistungen: der Bereich, zu dem die Seite gehört.
   Bewusst eine Klasse und nicht aria-current="page" — die Seite selbst ist
   ja nicht der Menüpunkt. Screenreader bekommen aria-current="true". */
.kopf-nav a.ist-bereich { color: var(--akzent-text); border-bottom-color: var(--rot); }

.kopf-aktionen { display: flex; align-items: center; gap: var(--s3); flex: none; }
.tel-link {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-weight: 700; text-decoration: none; color: var(--tinte);
  font-size: var(--klein); white-space: nowrap;
}
.tel-link:hover { color: var(--akzent-text); }

.nav-schalter {
  display: none; flex: none;
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius-klein); padding: var(--s2) var(--s3);
  cursor: pointer;
  font-size: var(--mikro); letter-spacing: var(--sperr-mit);
  text-transform: uppercase; font-weight: 600;
  box-shadow: var(--schatten);
}

/* =========================================================================
   Buttons — aus Design_5 kommt der rote Logoverlauf, der weiche Farbschatten
   und der größere Radius (12 px). Aus Design_6 bleibt die Typografie:
   Versalien, weit gesperrt. Dadurch wirkt die Seite weiterhin wie die
   Vorlage der Kundin, die Buttons aber so weich wie in Design_5.

   Der Verlauf ist --verlauf-text, nicht --verlauf-deko: nur er ist dunkel
   genug, um weiße Schrift mit mindestens 4,5:1 zu tragen.
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s6);
  border-radius: var(--radius-btn);
  background: var(--verlauf-text); color: #fff;
  border: 0;
  font-size: var(--mikro); font-weight: 700;
  letter-spacing: var(--sperr-mit); text-transform: uppercase;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: var(--schatten-rot);
  transition: transform var(--tempo) var(--kurve),
              box-shadow var(--tempo) var(--kurve),
              background var(--tempo) var(--kurve);
}
.btn:hover {
  background: var(--verlauf-text-hover);
  transform: translateY(-2px);
  box-shadow: var(--schatten-rot-hoch);
}
.btn:active { transform: translateY(0); }
.btn svg { flex: none; }

/* Umrandet — im Fußband auf Taupe */
.btn-linie {
  background: transparent; border: 1px solid currentColor; color: inherit;
  box-shadow: none;
}
.btn-linie:hover {
  background: rgb(255 255 255 / 0.12); border-color: currentColor;
  box-shadow: none; transform: translateY(-2px);
}

/* Sekundärbutton in Taupe — hier bleibt die zweite Markenfarbe aus Design_6
   sichtbar, damit die Seite nicht nur aus rotem Verlauf besteht. */
.btn-geist {
  background: var(--verlauf-flaeche);
  color: var(--taupe-tief);
  border: 1.5px solid var(--linie);
  box-shadow: var(--schatten);
}
.btn-geist:hover {
  background: var(--taupe-hell);
  border-color: var(--taupe);
  box-shadow: var(--schatten-hoch);
}

.btn-gross { padding: var(--s4) var(--s7); font-size: var(--klein); letter-spacing: var(--sperr-mit); }

/* --- „Befunde abrufen" im Kopf (aus Design_5) ---------------------------
   Der wichtigste wiederkehrende Weg für Bestandspatienten. Er bleibt auf
   dem Handy sichtbar — siehe die Regeln unter „Mobile Navigation". */
.btn-befunde svg { width: 0.875rem; height: 0.875rem; }

/* Der Kopfbutton etwas enger als im Fließtext: die Kopfzeile trägt
   Wortmarke, sechs Navigationspunkte und den Button in 1200 px. */
.kopf-aktionen .btn { padding-inline: var(--s5); }

/* --- Hero: links Text, rechts Foto --------------------------------------
   Das Foto lief in Design_6 bis zum Viewportrand. Auf Wunsch der Kundin
   endet es jetzt an derselben Kante wie alle Abschnitte darunter — der Hero
   nutzt deshalb dieselbe Containerbreite wie .wrap. */
.hero { position: relative; background: var(--grund); overflow: hidden; }
.hero-innen {
  width: min(100% - var(--rand) * 2, var(--breite));
  margin-inline: auto;
  padding-block: clamp(var(--s7), 6vw, var(--s9));
  display: grid; grid-template-columns: 1fr; gap: var(--s7);
}
@media (min-width: 940px) {
  .hero-innen {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(var(--s6), 4vw, var(--s8));
  }
}

.hero-text {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: center;
}
.hero h1 { max-width: 16ch; }
/* Die zweite Zeile in Taupe — großes Schriftbild, deshalb reichen 4,4:1. */
.zweite-zeile { color: var(--taupe); display: block; }
.hero p.lead { margin-top: var(--s5); max-width: 46ch; }
.hero-aktionen { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s7); }

/* Bogenmotiv sehr leise hinter dem Herotext */
.bogen-deko {
  position: absolute; left: -18%; top: 50%; translate: 0 -50%;
  width: min(760px, 74vw); height: auto;
  opacity: 0.05; pointer-events: none; z-index: 0;
}

/* --- Bildpanel: Foto mit überlagerter Textspalte ------------------------
   Das Foto läuft weiterhin zum Seitenrand aus (Merkmal aus Design_6). Weil
   die Ecken jetzt überall weicher sind, bekommt es auf breiten Viewports
   links die runden Ecken aus Design_5 — dort, wo es an die Textspalte
   stößt. Nach rechts bleibt es angeschnitten. */
.bildpanel { position: relative; min-height: 320px; display: grid; }
.bildpanel > .platzhalter,
.bildpanel > img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
/* Das Hero-Foto ist jetzt allseitig gerundet, weil es nicht mehr zum
   Viewportrand ausläuft. */
.hero .bildpanel > .platzhalter,
.hero .bildpanel > img { border-radius: var(--radius-groß); }
@media (min-width: 940px) {
  /* Das Hero-Foto ist ein Hochformat. Im Fluss würde es die Zeile auf seine
     eigene Höhe aufblasen — bei 1200x1800 wären das über 1000 px, und der
     Hero reichte weit unter die Falte. Absolut positioniert nimmt es keine
     Höhe mehr ein: die Zeile richtet sich nach der Textspalte, das Foto
     füllt sie per object-fit. */
  .hero .bildpanel { min-height: 520px; }
  .hero .bildpanel > img { position: absolute; inset: 0; }
}
/* Schmale Viewports: das Foto steht im Fluss, die Textspalte darunter.
   Hier begrenzt ein Seitenverhältnis die Höhe statt der absoluten Lage. */
@media (max-width: 939px) {
  .hero .bildpanel > img { aspect-ratio: 4 / 3; height: auto; }
}
.bildpanel .bild-text {
  position: absolute; right: clamp(var(--s5), 3vw, var(--s7));
  top: 50%; translate: 0 -50%;
  display: grid; gap: var(--s2); text-align: right;
  font-size: var(--mikro); letter-spacing: var(--sperr-weit);
  text-transform: uppercase; font-weight: 600;
  color: var(--tinte);
  /* Damit der Text auch über hellen Fotos sicher lesbar bleibt. */
  background: rgb(250 249 247 / 0.86);
  padding: var(--s4) var(--s5);
  border-radius: var(--radius);
}
.bildpanel .bild-text::after {
  content: ""; display: block; justify-self: end;
  width: 30px; height: 3px; border-radius: 2px;
  background: var(--verlauf-linie); margin-top: var(--s2);
}
/* Im Hero sitzt die Textspalte unten statt mittig: auf halber Höhe läge sie
   sonst über den Gesichtern der beiden Ärzte. */
@media (min-width: 940px) {
  .hero .bildpanel .bild-text {
    top: auto; translate: none;
    bottom: clamp(var(--s5), 3vw, var(--s7));
  }
}

/* --- Fotos --------------------------------------------------------------- */
.bild {
  width: 100%; height: auto;
  border-radius: var(--radius-bild);
  box-shadow: var(--schatten);
}
.karte { margin: 0; }
.bild-quelle {
  margin-top: var(--s3); font-size: var(--mikro); color: var(--taupe-text);
  letter-spacing: 0.04em;
}
/* Im Hero ist das Hochformat auf jeder Breite vertikal angeschnitten.
   Der Ausschnitt sitzt bewusst oben: so bleiben Gesichter und Oberkörper
   im Bild, beschnitten wird unten. */
.hero .bildpanel img { object-position: center 18%; }

/* --- Karten mit Linien-Icon oben (Vorlage: „Was bleibt") ---------------- */
.vertrauen {
  display: grid; gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* --- Die sechs Leistungen ------------------------------------------------
   Hier bewusst kein auto-fit: das ergäbe je nach Breite auch vier oder fünf
   Spalten, und die letzte Reihe bliebe halb leer. Erlaubt sind nur Teiler
   von sechs — eine, zwei oder drei Spalten. Damit steht das Raster immer
   voll: 6x1, 3x2 oder 2x3. */
.modal-grid { display: grid; gap: var(--s5); grid-template-columns: 1fr; }
@media (min-width: 560px) { .modal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .modal-grid { grid-template-columns: repeat(3, 1fr); } }

/* Vorsorge: drei Karten. Dieselbe Regel wie oben — nur Teiler von drei,
   also eine oder drei Spalten. Zwei Spalten ließen einen Platz frei. */
@media (min-width: 560px) { .modal-grid-drei { grid-template-columns: 1fr; } }
@media (min-width: 900px) { .modal-grid-drei { grid-template-columns: repeat(3, 1fr); } }

/* Therapie: eine Karte. Über die volle Breite gezogen wirkte sie wie ein
   Band, deshalb behält sie die Breite einer Spalte aus dem Dreierraster. */
.modal-grid-eins { grid-template-columns: 1fr; justify-content: center; }
@media (min-width: 560px) {
  .modal-grid-eins { grid-template-columns: minmax(0, 380px); }
}
.vertrauen li, .modal-karte {
  background: var(--bg-karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: var(--s6);
  box-shadow: var(--schatten);
}
.vertrauen .icon, .modal-karte .icon {
  color: var(--rot); width: 2.5rem; height: 2.5rem; margin-bottom: var(--s5);
}

/* --- Die gelieferten Modalitäten-Icons ----------------------------------
   Rote Kachel mit weißem Piktogramm, aus den PDFs der Kundin extrahiert.
   Die Ecken sind im PNG transparent, deshalb kein border-radius nötig —
   und deshalb drop-shadow statt box-shadow: box-shadow folgt dem Rahmen
   und legte einen eckigen Schatten hinter die runde Kachel. */
.icon-bild {
  width: 3.5rem; height: 3.5rem; flex: none;
  filter: drop-shadow(0 5px 10px rgb(150 27 32 / 0.32));
}
.modal-karte .icon-bild { margin-bottom: var(--s5); }

/* Auf der Modalitätenseite steht das Icon neben der Überschrift. */
.modalitaet-kopf {
  display: flex; align-items: center; gap: var(--s4);
  margin-bottom: var(--s4);
}
.modalitaet-kopf h2 { margin: 0; }
/* Auf den Einzelseiten trägt die Leistung die H1 — optisch so groß wie
   eine H2, damit der Aufbau dem der Übersicht gleicht. */
.modalitaet-kopf h1 { margin: 0; font-size: var(--h2); letter-spacing: -0.015em; }

/* --- Einzelseite einer Leistung -----------------------------------------
   Kein eigener Menüpunkt. Der Weg zurück läuft über diesen Link, und im
   Menü ist der übergeordnete Bereich (Leistungen, Vorsorge, Therapie)
   hervorgehoben. */
.zurueck {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--mikro); font-weight: 600;
  letter-spacing: var(--sperr-mit); text-transform: uppercase;
  color: var(--taupe-text); text-decoration: none;
  margin-bottom: var(--s5);
}
.zurueck:hover { color: var(--akzent-text); }
.zurueck svg { width: 0.875rem; height: 0.875rem; flex: none; }
.einzelseite .modalitaet { padding-top: 0; border-bottom: 0; align-items: start; }
@media (min-width: 880px) {
  .einzelseite .modalitaet { grid-template-columns: 140px minmax(0, 1fr); }
}


/* Das Icon steht dort, wo früher der Fotoplatzhalter war. Groß genug,
   um als Bildmotiv zu tragen; die PNGs sind 160 px, bei 200 px Anzeige
   also leicht vergrößert — für ein Piktogramm unkritisch. */
.leistung-icon img {
  /* Rund zwei Drittel der ersten Fassung (200 px → 133 px). */
  width: clamp(3.75rem, 15vw, 133px); height: auto;
  filter: drop-shadow(0 8px 14px rgb(150 27 32 / 0.30));
}
.einzelseite .modalitaet h1 {
  font-size: var(--h2); letter-spacing: -0.015em;
}
.leistung-kurz { margin-top: var(--s4); max-width: 60ch; font-size: 1.05rem; }
/* Der ausführliche Text steht direkt sichtbar unter dem Kurztext, ohne
   Aufklapper. Eine feine Linie trennt ihn vom Kurztext. */
.leistung-text {
  margin-top: var(--s5); padding-top: var(--s5);
  border-top: 1px solid var(--linie);
}
.leistung-text p { max-width: 68ch; }
.leistung-text p + p { margin-top: var(--s4); }

/* --- Aufklärungsblätter (CT) --------------------------------------------
   Vorerst ohne Datei: jede Sprache steht als ruhige Kachel mit dem Vermerk
   „in Arbeit". Sobald ein PDF da ist, wird aus dem <span class="blatt"> ein
   <a class="blatt" href="…">; der Hover-Zustand unten gilt dann schon. */
.aufklaerung { margin-top: var(--s7); padding-block: 0; }
.aufklaerung h2 { font-size: var(--h3); font-weight: 700; margin-bottom: var(--s3); }
.aufklaerung > p { font-size: var(--klein); max-width: 60ch; }
.blaetter {
  display: grid; gap: var(--s3); margin-top: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.blatt {
  display: flex; flex-direction: column; gap: var(--s1);
  padding: var(--s4) var(--s5);
  background: var(--bg-karte); border: 1px solid var(--linie);
  border-radius: var(--radius-btn);
  color: var(--tinte); font-weight: 600; text-decoration: none;
}
.blatt small {
  font-size: var(--mikro); font-weight: 600; color: var(--taupe-text);
  letter-spacing: var(--sperr-mit); text-transform: uppercase;
}
a.blatt:hover { border-color: var(--taupe); box-shadow: var(--schatten-hoch); }

/* --- Impressum ----------------------------------------------------------- */
/* Die Blöcke sind <section>, damit jede Überschrift ihren Abschnitt hat —
   den großen Abschnittsabstand der Seite sollen sie aber nicht erben. */
.recht .recht-block { max-width: 72ch; padding-block: var(--s6) 0; }
.recht .recht-block + .recht-block { border-top: 1px solid var(--linie); margin-top: var(--s6); }
.recht h2 { font-size: var(--h3); font-weight: 700; margin-bottom: var(--s3); }
.recht p + p { margin-top: var(--s3); }
.recht .hinweis { max-width: 72ch; }
.vertrauen h3, .vertrauen h4, .modal-karte h3 { margin-bottom: var(--s3); }
.vertrauen p, .modal-karte p { font-size: var(--klein); }

.modal-karte {
  display: flex; flex-direction: column; gap: 0;
  text-decoration: none; color: inherit;
  transition: border-color var(--tempo) var(--kurve),
              box-shadow var(--tempo) var(--kurve),
              transform var(--tempo) var(--kurve);
}
.modal-karte:hover, .modal-karte:focus-visible {
  border-color: var(--taupe); box-shadow: var(--schatten-hoch);
  transform: translateY(-3px);
}
.modal-karte .pfeil {
  margin-top: auto; padding-top: var(--s5);
  font-size: var(--mikro); letter-spacing: var(--sperr-mit);
  text-transform: uppercase; font-weight: 600; color: var(--akzent-text);
}

/* --- Rote Icon-Kachel (Vorlage: „Was sich ändert") ----------------------
   Trägt jetzt denselben Verlauf wie die Buttons. Reine Dekoration, es steht
   kein Text darauf — deshalb darf hier --verlauf-deko stehen. */
.icon-kachel {
  width: 3.25rem; height: 3.25rem; flex: none;
  display: grid; place-content: center;
  background: var(--verlauf-deko); color: #fff;
  border-radius: var(--radius-tile);
  box-shadow: var(--schatten-rot);
}
.icon-kachel svg { width: 1.6rem; height: 1.6rem; }

/* --- Übernahme-Karten --------------------------------------------------- */
.uebernahme { display: grid; gap: var(--s5); grid-template-columns: 1fr; }
@media (min-width: 800px) { .uebernahme { grid-template-columns: 1fr 1fr; } }
/* „Was sich ändert" mit drei Karten: eine Spalte oder drei, nie zwei -
   sonst stünde die dritte Karte allein in einer Reihe. In drei schmalen
   Spalten steht das Icon über dem Text statt daneben. */
.uebernahme.uebernahme-drei { grid-template-columns: 1fr; }
@media (min-width: 1000px) {
  .uebernahme.uebernahme-drei { grid-template-columns: repeat(3, 1fr); }
  .uebernahme.uebernahme-drei article {
    grid-template-columns: 1fr; gap: var(--s4);
    align-content: start; align-items: start;
  }
}
.uebernahme article {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s5);
  background: var(--bg-karte); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: var(--s6);
  box-shadow: var(--schatten);
}
.uebernahme h3, .uebernahme h4 { margin-bottom: var(--s3); }
.uebernahme p { font-size: var(--klein); }
.uebernahme p + p { margin-top: var(--s4); }
.uebernahme-breit { grid-template-columns: 1fr; }

/* --- Zweispalter Text + Bild -------------------------------------------- */
.zweispalt { display: grid; gap: var(--s7); align-items: center; }
@media (min-width: 900px) { .zweispalt { grid-template-columns: 1fr 1fr; gap: var(--s8); } }

/* --- Porträts: zwei Hochformate nebeneinander ---------------------------
   Steht neben dem Text zur ärztlichen Leitung. Zwei Spalten auch auf dem
   Handy: zwei Porträts nebeneinander bleiben dort erkennbar, untereinander
   würde der Abschnitt unnötig lang. */
.portraets { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.portraets img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-bild);
  box-shadow: var(--schatten-hoch);
}
/* Im Hero stehen die beiden Porträts rechts neben dem Text. Die Namen sind
   dort Absätze statt H3 - vor ihnen steht nur die H1, eine H3 würde eine
   Ebene überspringen. Aussehen wie die H3 darunter. */
.hero-portraets { align-self: center; }
.portraets .portraet-name {
  margin-top: var(--s4); font-size: var(--klein); font-weight: 700;
  letter-spacing: var(--sperr-mit); text-transform: uppercase;
  color: var(--tinte); line-height: 1.35;
}

/* Das gemeinsame Foto im Ärzte-Abschnitt: Hochformat, auf 4:5 zugeschnitten,
   Ausschnitt oben, damit die Gesichter im Bild bleiben. Die Textspalte
   „Vertrauen · Diagnostik · Mensch im Mittelpunkt" wandert mit dem Foto. */
.bildpanel-duo { min-height: 0; }
.bildpanel-duo > img {
  height: auto; aspect-ratio: 4 / 5; object-position: center 18%;
  border-radius: var(--radius-bild); box-shadow: var(--schatten-hoch);
}
@media (min-width: 941px) {
  .bildpanel-duo .bild-text {
    top: auto; translate: none;
    bottom: clamp(var(--s5), 3vw, var(--s7));
  }
  /* Nebeneinander richtet sich das Foto nach der Höhe der Textspalte,
     statt mit festem Seitenverhältnis weit über den Text hinauszuragen.
     Absolut positioniert trägt es selbst keine Höhe bei; der Ausschnitt
     bleibt oben bei den Gesichtern. */
  .bildpanel-duo { align-self: stretch; min-height: 420px; }
  .bildpanel-duo > img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; aspect-ratio: auto;
  }
}

.portraets h3 {
  margin-top: var(--s4); font-size: var(--klein);
  letter-spacing: var(--sperr-mit); text-transform: uppercase;
  color: var(--tinte);
}

/* --- Teamseite: Gruppenfoto und Gruppenabschnitte ----------------------- */
.team-gruppe { margin: 0; }
.team-gruppe .bild { border-radius: var(--radius-groß); box-shadow: var(--schatten-hoch); }

/* Bild links, Text rechts — und mit .gruppe-gedreht andersherum, damit die
   Abschnitte im Wechsel stehen und die Seite nicht monoton wirkt. */
.gruppe { display: grid; gap: var(--s7); align-items: center; }
@media (min-width: 900px) {
  .gruppe { grid-template-columns: 1fr 1fr; gap: var(--s8); }
  .gruppe-gedreht .gruppe-bild { order: 2; }
}
.gruppe-bild { margin: 0; }
.gruppe-bild .bild { box-shadow: var(--schatten-hoch); }
.gruppe p { max-width: 54ch; }

/* --- Band: bleibt taupe ------------------------------------------------- */
.band {
  background: var(--taupe-tief); color: #FFFFFF;
  border-radius: var(--radius-groß);
  padding: clamp(var(--s6), 4vw, var(--s8));
  display: grid; gap: var(--s6); align-items: center;
  box-shadow: var(--schatten-hoch);
}
@media (min-width: 860px) { .band { grid-template-columns: 1.6fr auto; } }
.band h2 { color: #fff; max-width: 22ch; }
.band .augenbraue { color: #FFFFFF; }
.band p { max-width: 54ch; margin-top: var(--s4); }
/* Auf dem Taupeband steht der Button weiß mit rotem Text: der rote Verlauf
   auf Taupe wäre weder kontrastreich noch schön. Die Rotfamilie bleibt über
   die Schriftfarbe erhalten (6,8:1). */
.band .btn {
  background: #fff; color: var(--rot-dunkel);
  box-shadow: 0 10px 26px -12px rgb(0 0 0 / 0.5);
}
.band .btn:hover { background: var(--rot-tint); box-shadow: 0 14px 30px -12px rgb(0 0 0 / 0.55); }

/* --- „Mehr auf Klick" ---------------------------------------------------- */
.mehr { border-top: 1px solid var(--linie); margin-top: var(--s5); }
.mehr > summary {
  cursor: pointer; list-style: none; padding-block: var(--s4);
  font-size: var(--mikro); letter-spacing: var(--sperr-mit);
  text-transform: uppercase; font-weight: 600; color: var(--akzent-text);
  display: flex; align-items: center; gap: var(--s3);
}
.mehr > summary::-webkit-details-marker { display: none; }
.mehr > summary::after {
  content: ""; width: 0.5rem; height: 0.5rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  rotate: 45deg; translate: 0 -2px; transition: rotate var(--tempo) var(--kurve);
}
.mehr[open] > summary::after { rotate: -135deg; translate: 0 2px; }
.mehr > summary:hover { text-decoration: underline; }
.mehr-inhalt { padding-bottom: var(--s5); font-size: var(--klein); }
.mehr-inhalt > * + * { margin-top: var(--s3); }
.mehr-inhalt dt { font-weight: 700; color: var(--tinte); }
.mehr-inhalt dd { margin: 0 0 var(--s3); }

/* --- Modalitäten-Seite --------------------------------------------------- */
.modalitaet {
  display: grid; gap: var(--s6);
  padding-block: var(--s7); border-bottom: 1px solid var(--linie);
}
@media (min-width: 880px) { .modalitaet { grid-template-columns: 280px 1fr; gap: var(--s8); } }
.modalitaet:last-of-type { border-bottom: 0; }
.modalitaet .platzhalter { border-radius: var(--radius-bild); }
.modalitaet .fakten {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5);
  font-size: var(--klein); color: var(--taupe-text); margin-top: var(--s4);
}
.modalitaet .fakten b { color: var(--tinte); font-weight: 700; }

/* --- Stimmen --------------------------------------------------------------
   DERZEIT UNGENUTZT. Der Abschnitt „Was Patientinnen und Patienten sagen"
   ist auf Wunsch der Kundin von der Startseite entfernt. Das löst zugleich
   den offenen rechtlichen Punkt zur Verordnung „Arzt und Öffentlichkeit".
   Die Regeln bleiben stehen, falls der Abschnitt zurückkommen soll. */
.stimmen {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(86%, 380px);
  gap: var(--s5); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--s5); scrollbar-width: thin;
}
.stimmen li {
  scroll-snap-align: start; background: var(--bg-karte);
  border: 1px solid var(--linie); border-radius: var(--radius);
  padding: var(--s6); box-shadow: var(--schatten);
}
.stimmen blockquote { color: var(--tinte); font-size: 1.1rem; line-height: 1.5; }
.stimmen figcaption {
  margin-top: var(--s4); font-size: var(--mikro);
  letter-spacing: var(--sperr-mit); text-transform: uppercase; color: var(--taupe-text);
}

/* --- News ----------------------------------------------------------------
   DERZEIT UNGENUTZT. Der News-Abschnitt ist auf Wunsch der Kundin von der
   Startseite entfernt. Diese Regeln bleiben stehen, damit „News und
   Urlaubszeiten" ohne neues CSS zurückkommen kann — sie kosten nichts,
   solange keine Karte die Klasse trägt.

   Die rote Oberkante aus Design_6, als Verlauf. Als Pseudoelement statt
   border-top, weil ein Rahmen keinen Verlauf tragen kann und der größere
   Radius eine harte Kante sonst sichtbar abschneiden würde. */
.news { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.news article {
  position: relative; overflow: hidden;
  background: var(--bg-karte); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: var(--s6); box-shadow: var(--schatten);
}
.news article::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--verlauf-linie);
}
.news time {
  font-size: var(--mikro); letter-spacing: var(--sperr-mit);
  text-transform: uppercase; color: var(--taupe-text); font-weight: 600;
}
.news h3 { margin-block: var(--s3) var(--s2); }
.news p { font-size: var(--klein); }

/* --- Kontakt ------------------------------------------------------------- */
.kontakt-raster { display: grid; gap: var(--s7); }
@media (min-width: 880px) { .kontakt-raster { grid-template-columns: 1fr 1fr; gap: var(--s8); } }
.kontakt-liste { display: grid; gap: var(--s5); }
.kontakt-liste dt {
  font-size: var(--mikro); letter-spacing: var(--sperr-mit);
  text-transform: uppercase; color: var(--taupe-text); font-weight: 600;
}
.kontakt-liste dd { margin: var(--s2) 0 0; font-size: 1.1rem; color: var(--tinte); font-weight: 600; }

/* Die Tabelle läuft nicht mehr über die volle Breite: so stehen die Tage
   nah an ihren Zeiten, statt sie am anderen Ende der Zeile zu suchen. */
.zeiten { width: auto; border-collapse: collapse; margin-top: var(--s5); }
.zeiten th, .zeiten td {
  text-align: left; padding: var(--s4) 0;
  border-bottom: 1px solid var(--linie); font-size: var(--klein);
}
.zeiten th { font-weight: 400; color: var(--taupe-text); }
.zeiten td { text-align: left; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--tinte); }
.zeiten th { padding-right: var(--s7); }
/* Eine Zeitspanne bleibt immer auf einer Zeile. Wenn es eng wird, bricht
   stattdessen der Wochentag um - „Samstag, Sonntag, Feiertag" verträgt das. */
.zeiten td { white-space: nowrap; }
@media (max-width: 520px) {
  .zeiten th { padding-right: var(--s4); }
}

/* --- Taupe-Feld für Öffnungszeiten und Karte ---------------------------
   Deutlich dunkler als der getönte Abschnittsgrund, damit Feld und Karte
   sich abheben. Die Taupe-Schrift käme darauf nur auf 4,0:1; die
   Wochentage stehen im Feld deshalb in der Fließtextfarbe (7,0:1). */
.kontakt-feld {
  background: #E6DED4;
  border-radius: var(--radius);
  padding: clamp(var(--s5), 3vw, var(--s6));
}
.kontakt-feld .zeiten th,
.kontakt-feld .bild-quelle { color: var(--fliesstext); }
.kontakt-feld .zeiten th, .kontakt-feld .zeiten td { border-bottom-color: rgb(119 104 90 / 0.25); }
.kontakt-feld .karte { margin-top: var(--s6); }
.kontakt-feld .karte .bild {
  display: block; width: 100%;
  border: 5px solid #fff;
  box-shadow: var(--schatten-hoch);
}

/* --- Platzhalter --------------------------------------------------------- */
.platzhalter {
  display: grid; place-content: center; text-align: center; gap: var(--s3);
  aspect-ratio: 3 / 2;
  background: linear-gradient(150deg, var(--taupe-hell), #E6E0D8);
  border: 1px dashed var(--taupe);
  border-radius: var(--radius-bild);
  color: var(--taupe-tief); padding: var(--s5);
}
.platzhalter b {
  font-size: var(--mikro); letter-spacing: var(--sperr-weit); text-transform: uppercase;
}
.platzhalter span { font-size: var(--klein); max-width: 34ch; }
.platzhalter-hoch { aspect-ratio: 4 / 5; }

/* --- Hinweis ------------------------------------------------------------- */
.hinweis {
  border: 1px solid var(--linie); border-left: 3px solid var(--taupe);
  background: var(--weiss); border-radius: var(--radius);
  padding: var(--s5); font-size: var(--klein);
  color: var(--taupe-text); margin-top: var(--s5);
}
.hinweis b { color: var(--tinte); }

.gruen-marke { color: var(--gruen); font-weight: 700; }

/* --- Fuß: taupefarbenes Band wie in der Vorlage ------------------------- */
/* Das Fußband ist heller geworden (näher am Screenshot), deshalb steht die
   Schrift hier voll weiß statt bei 86 % — sonst fiele der Kontrast unter AA. */
.fuss {
  position: relative; overflow: hidden;
  background: var(--taupe-tief); color: #FFFFFF;
  padding-block: var(--s8);
}
/* Schmale Verlaufskante als Übergang von der Seite zum Fußband. */
.fuss::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--verlauf-linie); z-index: 2;
}
.fuss::before {
  content: ""; position: absolute; z-index: 0;
  right: -14%; top: 50%; translate: 0 -50%;
  width: min(720px, 78%); aspect-ratio: 1;
  background: radial-gradient(circle, rgb(255 255 255 / 0.10), transparent 62%);
  pointer-events: none;
}
.fuss .wrap { position: relative; z-index: 1; }
.fuss h2, .fuss h3 { color: #fff; }
.fuss a { color: #fff; }
.fuss .marke-text { color: #fff; }
.fuss-kopf { display: grid; gap: var(--s6); align-items: center; }
.fuss-kopf h2 { max-width: 22ch; font-weight: 400; }
.fuss-kopf p { margin-top: var(--s5); max-width: 52ch; font-size: var(--klein); }

.fuss-raster {
  display: grid; gap: var(--s6); margin-top: var(--s8);
  padding-top: var(--s6); border-top: 1px solid rgb(255 255 255 / 0.18);
}
@media (min-width: 760px) { .fuss-raster { grid-template-columns: 1.4fr 1fr 1fr; } }
/* Voll weiß, nicht abgedunkelt: auf dem helleren Band käme selbst 88 % nur
   auf 4,2:1. Die Hierarchie trägt hier die Größe und die weite Sperrung. */
.fuss-raster h3 {
  font-size: var(--mikro); font-weight: 600; color: #FFFFFF;
  letter-spacing: var(--sperr-weit); text-transform: uppercase; margin-bottom: var(--s4);
}
.fuss-raster li + li { margin-top: var(--s2); }
.fuss-adresse {
  font-style: normal; margin-top: var(--s5);
  font-size: var(--klein); line-height: 1.9;
}
.fuss-unten {
  margin-top: var(--s7); padding-top: var(--s5);
  border-top: 1px solid rgb(255 255 255 / 0.18);
  display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between;
  font-size: var(--mikro);
}

/* --- Hinweis-Dialog (Befundsystem nicht erreichbar) --------------------
   Vorübergehend, siehe main.js. Nativer <dialog>, im Stil der Karten. */
.hinweis-dialog {
  /* margin: auto zentriert den Dialog; die globale Regel * { margin: 0 }
     hätte ihn sonst in die linke obere Ecke geschoben. */
  margin: auto;
  width: min(100% - 2 * var(--rand), 30rem);
  padding: clamp(var(--s5), 4vw, var(--s6));
  border: 0; border-top: 4px solid var(--rot);
  border-radius: var(--radius);
  background: var(--bg-karte); color: var(--text);
  box-shadow: var(--schatten-hoch);
}
.hinweis-dialog::backdrop { background: rgb(22 29 48 / 0.45); }
.hinweis-dialog h2 { font-size: var(--h3); font-weight: 700; margin-bottom: var(--s4); }
.hinweis-dialog p + p { margin-top: var(--s3); }
.hinweis-dialog form { margin-top: var(--s6); display: flex; justify-content: flex-end; }

/* --- Reveal ---------------------------------------------------------------
   Der Startzustand hängt bewusst an .js am <html>-Element. Diese Klasse setzt
   ein winziges Inline-Skript im <head> jeder Seite. Stünde die Deckkraft 0
   unbedingt hier, blieben alle so ausgezeichneten Elemente — auf der
   Teamseite sind das sämtliche Gruppenfotos — dauerhaft unsichtbar, sobald
   das JavaScript nicht lädt oder blockiert wird. */
.js .reveal { opacity: 0; transform: translateY(12px); }
.js .reveal.sichtbar {
  opacity: 1; transform: none;
  transition: opacity 520ms var(--kurve), transform 520ms var(--kurve);
}

/* =========================================================================
   Die Kopfzeile über die Breiten

   Im Kopf stehen Wortmarke, sechs Navigationspunkte und ein einziger
   Button: „Befunde abrufen". Er bleibt auf Wunsch der Kundin auf jeder
   Breite sichtbar — er ist der wichtigste wiederkehrende Weg für
   Bestandspatienten und gehört nicht ins eingeklappte Menü. „Termin
   vereinbaren" ist aus dem Kopf entfallen; der Weg dorthin ist der
   Menüpunkt „Kontakt".

     ab 1081 px  Wortmarke · Navigation · „Befunde abrufen"
     ab  521 px  Navigation klappt ins Menü, „Befunde abrufen" bleibt
     darunter    der Button heißt sichtbar nur noch „Befunde"

   Den Umschaltpunkt 1080 px (Menü) muss main.js kennen — steht dort
   ausdrücklich dabei.
   ========================================================================= */

@media (max-width: 1080px) {
  .nav-schalter { display: block; order: 3; }
  .marke { order: 1; }
  .kopf-aktionen { order: 2; margin-left: auto; }
  .kopf-nav { order: 4; }

  .kopf-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--grund); border-bottom: 1px solid var(--linie);
    padding: var(--s5) var(--rand); margin-inline: 0;
    box-shadow: var(--schatten-hoch);
  }
  .kopf-nav[hidden] { display: none; }
  .kopf-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .kopf-nav li + li { border-top: 1px solid var(--linie); }
  .kopf-nav a { display: block; padding-block: var(--s4); border-bottom: 0; }
}

/* Hero und Bildpanel schalten weiterhin bei 940 px um — das hängt an der
   Spaltenbreite des Fotos, nicht an der Navigation. */
@media (max-width: 940px) {
  .bildpanel { min-height: 260px; }
  /* Die Textspalte rutscht unter das Foto. Seitlich bündig mit dem übrigen
     Text: das Foto sitzt jetzt selbst im Container, eine zusätzliche
     Einrückung sähe versetzt aus. */
  .bildpanel .bild-text {
    position: static; translate: none; text-align: left;
    margin: var(--s5) 0 0; padding-inline: 0;
    background: none;
  }
  .bildpanel .bild-text::after { justify-self: start; }
}

/* Die Selektoren hier sind bewusst mit .kopf-aktionen qualifiziert: sonst
   gewinnt die Regel .kopf-aktionen .btn { padding-inline } weiter oben und
   der Button bliebe auf jeder Breite gleich breit. */
@media (max-width: 640px) {
  .kopf-innen { gap: var(--s3); }
  .marke img, .marke svg { height: 2.35rem; }
  .marke-text { font-size: 0.75rem; letter-spacing: 0.06em; }
  .kopf-aktionen .btn-befunde { padding: var(--s3) var(--s4); gap: var(--s2); }
}

@media (max-width: 520px) {
  .marke img, .marke svg { height: 2.1rem; }
  .marke-text { font-size: 0.6875rem; }
  /* Nur das zweite Wort verschwindet; der Button heißt weiterhin
     „Befunde abrufen" — siehe aria-label im Markup. */
  .btn-befunde .wort-lang { display: none; }
  .kopf-aktionen .btn-befunde {
    font-size: 0.6875rem; letter-spacing: 0.08em;
    padding: var(--s2) var(--s3); gap: var(--s2);
  }
  .nav-schalter { font-size: 0.6875rem; letter-spacing: 0.08em; padding: var(--s2) var(--s3); }
}

/* Letzter Rückfall für sehr schmale Geräte (320 px): dort weicht die
   Wortmarke, die Bildmarke bleibt. Der Befundbutton hat Vorrang. */
@media (max-width: 359px) {
  .marke-text { display: none; }
}

/* --- Bewegung reduzieren ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .btn:hover, .modal-karte:hover { transform: none; }
}

/* --- Druck --------------------------------------------------------------- */
@media print {
  .kopf, .nav-schalter, .bogen-deko { display: none; }
  body { background: #fff; }
  .fuss { background: none; color: #000; }
  .fuss h2, .fuss h3, .fuss a, .fuss .marke-text,
  .fuss .marke-text .marke-ort { color: #000; }
  .fuss::after, .fuss::before { display: none; }
  .btn { background: none; color: #000; border: 1px solid #000; box-shadow: none; }
}