/* Dr. med. Martin Eigenschink — Umsetzung nach Eigenschink_DesignManual.pdf (März 2023).
   Farben, Typografie, Raster und Bildwelt folgen dem Manual; die Klassennamen sind identisch
   mit site/styles.css, damit dieselben Seiten in beiden Gestaltungen laufen.

   Schrift: Das Manual schreibt "Area" von BlazeType vor (nur Normal Black und Normal Regular).
   Area ist lizenzpflichtig und liegt nicht vor. Bis die Weblizenz gekauft ist, steht hier
   Hanken Grotesk als nächstliegender freier Ersatz — gleiche Anmutung, einstöckiges g,
   gleiche Laufweite. Austausch: die @font-face-Blöcke und --sans ersetzen, sonst nichts. */

@font-face {
  font-family: "Hanken Grotesk";
  src: url(/fonts/hankengrotesk-var.woff2) format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Primärfarben */
  --schiefer: #333F48;
  --beige: #CDA077;
  --orange: #DB8A06;
  /* Neutralfarbe */
  --elfenbein: #F8F7F2;
  /* Sekundärfarben */
  --grau: #75787B;
  --gelb: #FFB81C;
  --hellgelb: #FBD872;

  /* Abgeleitete Werte. Das Manual verlangt ausdrücklich Barrierefreiheit; Orange und Grau
     erreichen als Textfarbe auf Elfenbein keine 4,5:1, deshalb je eine dunklere Textvariante. */
  --weiss: #ffffff;
  --schiefer-tief: #262F36;
  --schiefer-80: rgba(51, 63, 72, .8);
  --orange-text: #9E640A;
  --orange-75: #E2A541;    /* Tonwert 75 % auf Elfenbein — Überfahren der Terminschaltfläche */
  --grau-text: #5B6065;
  --linie: #E2DFD7;
  --linie-dunkel: #46525B;
  --beige-flaeche: #EFE4D8;
  --feld-beige: #CDA077;   /* Vollfläche Beige, trägt nur Schiefer als Text */
  --feld-grau: #E6E5E1;    /* Grau, 14 % über Elfenbein — als Vollton nicht barrierefrei */

  --sans: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --maxw: 1240px;
  /* Höhe der Kopfzeile: 16 px Innenabstand, Inhaltszeile, 16 px. .nav-inner hält die Zeile auf
     dieser Höhe; .hero-media und scroll-padding-top rechnen damit. 108 px mit der großen Marke,
     96 px ab 1460 px abwärts, 88 px ab 1360 px abwärts (siehe die Abfragen). */
  --kopf-hoehe: 108px;
  --pad: clamp(20px, 5vw, 64px);
  --spalte: calc((var(--maxw) - 5 * 32px) / 6);   /* Raster: sechs Spalten, 32px Rinne */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-hoehe) + 18px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.72;                 /* Manual: erhöhter Zeilenabstand */
  color: var(--schiefer);
  background: var(--elfenbein);
  -webkit-font-smoothing: antialiased;
  text-align: left;                  /* Manual: nie rechtsbündig */
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: var(--sans);
  font-weight: 900;                  /* Manual: Überschriften in Area Normal Black */
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(34px, 5.4vw, 62px); }
h2 { font-size: clamp(27px, 3.9vw, 42px); }
h3 { font-size: clamp(19px, 2vw, 22px); }
b, strong { font-weight: 900; }

:focus-visible { outline: 3px solid var(--schiefer); outline-offset: 3px; border-radius: 1px; }
.nav :focus-visible, .skip:focus-visible,
.bg-ink :focus-visible, .footer :focus-visible, .sport :focus-visible,
.focus-band :focus-visible, .mobile-bar :focus-visible { outline-color: var(--gelb); }

/* Die Sprungmarke erscheint über der dunklen Kopfzeile, deshalb hell. */
.skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--elfenbein);
  color: var(--schiefer); padding: 14px 22px; font-weight: 900; }
.skip:focus { left: 12px; top: 12px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
section { padding-block: clamp(64px, 9vw, 124px); }
.bg-cream { background: var(--elfenbein); }
.bg-white { background: var(--weiss); }
.bg-ink { background: var(--schiefer); color: var(--elfenbein); }

/* Auszeichnungszeile mit Orange-Strich — das wiederkehrende Detail der Gestaltung */
.eyebrow { font-size: 12px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase;
  color: var(--orange-text); margin: 0 0 18px; display: flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ""; width: 34px; height: 3px; background: var(--orange); flex: none; }
.bg-ink .eyebrow, .sport .eyebrow, .focus-band .eyebrow { color: var(--gelb); }
.bg-ink .eyebrow::before, .sport .eyebrow::before, .focus-band .eyebrow::before { background: var(--gelb); }

.section-lead { font-size: 19px; color: var(--grau-text); max-width: 62ch; margin: 20px 0 0; }
.bg-ink .section-lead { color: rgba(248, 247, 242, .82); }
.section-head { margin-bottom: clamp(40px, 5vw, 68px); }

/* ---------- Schaltflächen ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans); font-weight: 900; font-size: 14.5px; letter-spacing: .04em;
  padding: 16px 30px; border-radius: 0; border: 2px solid transparent; cursor: pointer;
  min-height: 52px; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.btn-primary { background: var(--schiefer); color: var(--elfenbein); }
.btn-primary:hover { background: var(--schiefer-tief); }
.btn-outline { border-color: var(--schiefer); color: var(--schiefer); }
.btn-outline:hover { background: var(--schiefer); color: var(--elfenbein); }
.btn-light { border-color: rgba(248, 247, 242, .55); color: var(--elfenbein); }
.btn-light:hover { background: var(--elfenbein); color: var(--schiefer); }
/* Terminschaltfläche (Kopfzeile, Mobilmenü, Handyleiste): Orange als Fläche, Schrift in
   Schiefer-tief. Bis 09/2026 Gelb; der Klient wünschte am 31.08.2026 „ein dezenteres Orange“.
   Kontraste nach der WCAG-Formel nachgerechnet:
   · Schrift Schiefer-tief auf Orange 4,96:1 — AA für Text (≥ 4,5:1). Schiefer hielte nur
     3,93:1, Weiß 2,75:1; beides reicht für die 14,5-px-Beschriftung nicht.
   · Orange gegen die Schiefer-Kopfzeile und die Handyleiste 3,93:1 — über den 3:1 für
     Bedienelemente und deutlich ruhiger als Gelb (6,23:1).
   · Überfahren und Tastaturfokus hellen auf Orange 75 % auf: Schrift 6,28:1, gegen Schiefer
     4,98:1. Abdunkeln scheidet aus, jede dunklere Stufe drückt die Schrift unter 4,5:1.
     Der Fokusring ist auf den dunklen Flächen Gelb (6,23:1 gegen Schiefer, siehe oben). */
.btn-camel { background: var(--orange); color: var(--schiefer-tief); }
.btn-camel:hover, .btn-camel:focus-visible { background: var(--orange-75); }

.arrow-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-size: 14px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
  color: var(--orange-text); border-bottom: 2px solid var(--orange); }
.arrow-link svg { width: 16px; height: 16px; transition: transform .25s ease; }
.arrow-link:hover { color: var(--schiefer); border-color: var(--schiefer); }
.arrow-link:hover svg { transform: translateX(4px); }
.bg-ink .arrow-link, .sport .arrow-link { color: var(--gelb); border-color: var(--gelb); }
.bg-ink .arrow-link:hover, .sport .arrow-link:hover { color: var(--elfenbein); border-color: var(--elfenbein); }

.ic { width: 26px; height: 26px; stroke: var(--orange); fill: none; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }


/* ---------- Sprachumschalter ----------
   Pille im Kopf wie auf der Referenzseite: Flagge, Kürzel, feiner Rahmen in der Textfarbe,
   der beim Überfahren aufhellt. Im Mobilmenü ohne Pille, als Zeile mit ausgeschriebenem Ziel.

   Die Selektoren tragen :not(.btn) und den Elementnamen, weil .nav-links > a:not(.btn)
   sonst Schriftgröße und Innenabstand überschreibt — dieselbe Spezifität, aber weiter unten
   in der Datei. Ohne das wird die Pille zum Kreis. */
.nav-links > a.lang-switch:not(.btn),
.nav-mobile > a.lang-switch {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 900; letter-spacing: .06em; white-space: nowrap;
  padding: 7px 14px; min-height: 0;
  border: 1px solid rgba(248, 247, 242, .4); border-radius: 999px; color: var(--elfenbein);
  transition: border-color .2s ease, background .2s ease; }
.nav-links > a.lang-switch:not(.btn):hover {
  border-color: rgba(248, 247, 242, .8); background: rgba(248, 247, 242, .08); }
/* Der Menüstrich der Navigationslinks gehört nicht auf die Pille. */
.nav-links > a.lang-switch:not(.btn)::after { content: none; }
.lang-switch .flag { font-size: 15px; line-height: 1; }
/* Im Mobilmenü keine Pille, sondern eine Zeile wie die übrigen Menüpunkte. */
.nav-mobile > a.lang-switch {
  border: 0; border-radius: 0; padding: 12px 0; min-height: 48px; font-size: 15px; }
.nav-mobile > a.lang-switch:hover { background: none; }

/* ---------- Navigation ----------
   Kopfzeile in Schiefer, in jedem Zustand gleich: oben auf der Startseite, beim Scrollen, auf
   den Unterseiten und mit offenem Mobilmenü — Wunsch des Klienten vom 31.08.2026 („Kopfzeile
   dunkler, wie bei Phil“). Elfenbein auf Schiefer hält 10,1:1. Die Haarlinie unten trennt die
   Leiste von den Schiefer-Bändern, die darunter durchlaufen (Schwerpunkte, Ablauf, Fußzeile). */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 100; padding: 16px var(--pad);
  background: var(--schiefer); color: var(--elfenbein); box-shadow: 0 1px 0 var(--linie-dunkel); }
.nav-inner { max-width: 1360px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: calc(var(--kopf-hoehe) - 32px); }
.brand { display: flex; align-items: center; padding: 4px 0; }
.brand img { height: 68px; width: auto; }   /* Verhältnis 873:181, also rund 328 px breit */
/* Gemessen: das Menü braucht mit der Sprachpille 978 px ohne Umbruch. Daneben passt
   die volle Marke (328 px) erst ab 1458 px Fensterbreite, die kleine (231 px) ab 1361 px.
   Darunter klappt die Navigation auf den Menüschalter — siehe die Abfrage weiter unten. */
@media (max-width: 1460px) {
  :root { --kopf-hoehe: 96px; }   /* kleine Marke; die Terminschaltfläche (61 px) bestimmt die Zeile */
  .brand img { height: 48px; }
}
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links > a:not(.btn) { font-size: 15px; position: relative; padding: 12px 0; }
.nav-links > a:not(.btn)::after { content: ""; position: absolute; left: 0; bottom: 4px; width: 100%; height: 3px;
  background: var(--orange); transform: scaleX(0); transform-origin: left;
  transition: transform .22s ease; }
.nav-links > a:not(.btn):hover::after,
.nav-links > a[aria-current="page"]::after { transform: scaleX(1); }
.nav-social svg { width: 19px; height: 19px; fill: currentColor; opacity: .8; }
.nav-social a { display: inline-flex; padding: 12px 4px; }
.nav-social a:hover svg { opacity: 1; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 12px; color: inherit;
  min-width: 52px; min-height: 52px; align-items: center; justify-content: center; }
.nav-toggle svg { width: 28px; height: 28px; }
.nav-mobile { display: none; }

/* ---------- Startseite: Auftakt ---------- */
.hero { min-height: 100svh; display: grid; grid-template-columns: 3fr 3fr; background: var(--elfenbein); }
.hero-copy { display: flex; align-items: center; justify-content: center; padding: 140px var(--pad) 80px; }
.hero-copy .inner { max-width: 36rem; }
.hero-copy h1 { margin-bottom: 20px; }
.hero-role { font-size: 13px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase;
  color: var(--orange-text); margin: 0 0 26px; display: flex; align-items: center; gap: 12px; }
.hero-role::before { content: ""; width: 34px; height: 3px; background: var(--orange); flex: none; }
.hero-welcome { font-size: clamp(19px, 2.1vw, 25px); font-weight: 400; color: var(--schiefer);
  line-height: 1.42; margin: 0 0 24px; max-width: 30ch; }
.hero-lead { font-size: 17.5px; color: var(--grau-text); margin: 0 0 36px; max-width: 46ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }
.hero-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; font-size: 12.5px;
  font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--grau-text); margin: 0; }
.hero-trust span { display: inline-flex; align-items: center; gap: 9px; }
.hero-trust span::before { content: ""; width: 8px; height: 8px; background: var(--beige); flex: none; }
/* Das Bild beginnt unter der Kopfzeile — sie ist deckend und läge sonst über dem Kopf. */
.hero-media { position: relative; overflow: hidden; background: var(--beige-flaeche); min-height: 46vh;
  margin-top: var(--kopf-hoehe); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }

/* ---------- Kopf der Unterseiten ---------- */
.page-head { background: var(--elfenbein); padding: 136px var(--pad) clamp(52px, 6vw, 80px); }
.page-head .inner { max-width: var(--maxw); margin: 0 auto; }
.crumbs { font-size: 13.5px; color: var(--grau-text); margin: 0 0 26px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.crumbs a { border-bottom: 2px solid var(--linie); padding: 3px 0; }
.crumbs a:hover { border-color: var(--orange); color: var(--schiefer); }
.crumbs span[aria-current] { color: var(--schiefer); font-weight: 900; }
.page-head h1 { font-size: clamp(32px, 4.6vw, 54px); margin-bottom: 22px; }
.page-head .lead { font-size: 19.5px; color: var(--grau-text); max-width: 60ch; margin: 0 0 32px; }
.page-head .cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Hinweisstreifen ---------- */
.notice { background: var(--weiss); border-top: 3px solid var(--orange); border-bottom: 1px solid var(--linie);
  padding: 18px var(--pad); }
.notice-inner { max-width: 920px; margin: 0 auto; display: flex; gap: 14px; align-items: flex-start; }
.notice svg { width: 19px; height: 19px; flex: none; margin-top: 4px; stroke: var(--orange); fill: none; stroke-width: 1.8; }
.notice p { margin: 0; font-size: 14px; line-height: 1.62; color: var(--grau-text); }
.notice strong { font-weight: 900; color: var(--schiefer); }

/* ---------- Schwerpunktband ---------- */
.focus-band { background: var(--schiefer); color: var(--elfenbein); padding: clamp(48px, 6vw, 72px) var(--pad); }
.focus-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.focus-item { display: block; padding: 16px 10px; transition: background .2s ease; }
a.focus-item:hover { background: rgba(248, 247, 242, .08); }
.focus-item .t { font-size: clamp(21px, 2.3vw, 28px); font-weight: 900; color: var(--gelb); margin-bottom: 10px; letter-spacing: -0.01em; }
.focus-item p { margin: 0; font-size: 14px; color: rgba(248, 247, 242, .78); }

/* ---------- Warum ---------- */
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 3.5vw, 52px); }
.why-item { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; }
.why-item h3 { margin-bottom: 10px; }
.why-item p { margin: 0; color: var(--grau-text); font-size: 16px; }

/* ---------- Über mich ---------- */
.about-grid { display: grid; grid-template-columns: 2fr 4fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.about-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 28%; }
.about-photo .cap { font-size: 13.5px; color: var(--grau-text); margin-top: 14px; }
.about-body > p:not(.eyebrow) { color: var(--grau-text); }
.cred { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; padding: 22px 0; border-top: 1px solid var(--linie); }
.cred h3 { font-size: 16.5px; margin: 0 0 5px; letter-spacing: 0; }
.cred p { margin: 0; font-size: 15px; color: var(--grau-text); }
.memberships { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 34px 0 0; }
.memb { border-top: 3px solid var(--beige); padding: 16px 0 0; }
.memb .abbr { font-size: 19px; font-weight: 900; color: var(--schiefer); margin-bottom: 6px; }
.memb p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--grau-text); }
/* Mitgliedschaften auf der Startseite: eigener Block zwischen Einleitung und Laufbahn — mit
   Abstand nach unten, sonst sitzen die Kacheln auf der Linie der ersten Station. Drei Spalten
   für sechs Gesellschaften; darunter gelten die Zwei- und Einspalter des Rasters. */
.memb-block { margin: 36px 0 44px; }
.memb-kicker { font-size: 12px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase;
  color: var(--grau-text); margin: 0 0 16px; }
.memb-block .memberships { margin: 0; }
@media (min-width: 1081px) { .memberships.three { grid-template-columns: repeat(3, 1fr); } }
a.memb { transition: border-color .2s ease; }
a.memb:hover { border-top-color: var(--orange); }
a.memb:hover .abbr { color: var(--orange-text); }

/* ---------- Leistungskarten ---------- */
/* Vier Spalten: die Startseite führt vier Leistungen, die Gelenk-Hubs acht — beide gehen
   damit glatt auf. Seiten mit neun Karten tragen zusätzlich .three (siehe /handchirurgie/). */
.serv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--linie);
  border: 1px solid var(--linie); }
.serv-grid.three { grid-template-columns: repeat(3, 1fr); }
.serv-grid.two { grid-template-columns: repeat(2, 1fr); }   /* vier Karten, zwei Reihen */
.serv { background: var(--weiss); padding: 34px 30px 30px; display: flex; flex-direction: column; gap: 14px;
  transition: background .2s ease; }
.bg-cream .serv { background: var(--elfenbein); }
.serv:hover { background: var(--beige-flaeche); }
.serv h3 { font-size: 21px; }
.serv p { margin: 0; font-size: 15.5px; color: var(--grau-text); flex: 1; }
.chips-intro { margin: 56px 0 18px; font-size: 15.5px; color: var(--grau-text); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
/* Themenchips als Kapseln; Karten und Schaltflächen bleiben eckig. */
.chip { display: inline-flex; align-items: center; min-height: 46px; padding: 11px 22px;
  border: 2px solid var(--linie); border-radius: 999px; background: var(--weiss); font-size: 15px;
  transition: border-color .2s ease, background .2s ease; }
.bg-cream .chip { background: var(--elfenbein); }
.chip:hover { border-color: var(--orange); background: var(--hellgelb); }
.sub-block { margin-top: 72px; padding-top: 52px; border-top: 3px solid var(--beige); }
.sub-block .lead-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 18px; margin-bottom: 36px; }
.sub-block h3 { font-size: clamp(24px, 2.6vw, 32px); }
.sub-block .lead-row p { margin: 0; font-size: 17px; font-weight: 900; color: var(--orange-text); max-width: 34ch; }
/* ---------- Wahlarzt ---------- */
.priv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.priv-card { background: var(--elfenbein); border: 1px solid var(--linie); padding: 30px 28px;
  display: flex; flex-direction: column; gap: 14px; }
.bg-cream .priv-card { background: var(--weiss); }
.priv-card h3 { font-size: 21px; }
.priv-card p { margin: 0; font-size: 15.5px; color: var(--grau-text); }
.tick-list { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 10px; }
.tick-list li { position: relative; padding-left: 26px; font-size: 15px; color: var(--grau-text); }
.tick-list li svg { position: absolute; left: 0; top: 5px; width: 15px; height: 15px; stroke: var(--orange); fill: none; stroke-width: 2.4; }
.priv-cta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 44px; }

/* ---------- Ablauf ---------- */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; list-style: none; padding: 0; margin: 0; }
.step { padding-top: 24px; border-top: 3px solid var(--linie-dunkel); }
.step .num { font-size: 40px; font-weight: 900; color: var(--gelb); line-height: 1; margin-bottom: 16px; }
.step h3 { font-size: 19px; color: var(--elfenbein); margin-bottom: 10px; }
.step p { margin: 0; font-size: 15px; color: rgba(248, 247, 242, .78); }

/* Drei Schritte (Wahlarzt): im Fünferraster blieben sonst zwei Spalten leer; darunter gilt ohnehin das Dreierraster */
@media (min-width: 1081px) { .steps.drei { grid-template-columns: repeat(3, 1fr); } }
/* Ablauf der Startseite: 1, 2, dann 3a oder 3b, dann 4. Operation (3a) und konservative
   Behandlung (3b) sind Alternativen, keine Folge: Sie teilen einen Orange-Strich, und auf dem
   Strich zwischen ihnen sitzt „oder“. Wo Platz ist, stehen beide nebeneinander — am Desktop in
   der Fünferreihe, am Tablet als eigene Zeile unter 1 und 2, darunter 4 über die volle Breite,
   weil beide Wege in die Nachsorge münden. Am Handy untereinander, „oder“ auf der Linie von 3b.
   Setzt die Reihenfolge 1, 2, 3a, 3b, 4 im Markup voraus (index.html, #ablauf). */
#ablauf .steps { --rinne: 28px; column-gap: var(--rinne); }
#ablauf .step { position: relative; }
#ablauf .step:nth-child(3), #ablauf .step:nth-child(4) { border-top-color: var(--orange); }
#ablauf .step:nth-child(4)::before { content: "oder"; position: absolute; top: -1.5px; left: calc(var(--rinne) / -2);
  transform: translate(-50%, -50%); padding: 3px 11px; border: 1px solid var(--orange); border-radius: 999px;
  background: var(--schiefer); color: var(--elfenbein); font-size: 11px; font-weight: 900; line-height: 1.3;
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
html[lang="en"] #ablauf .step:nth-child(4)::before { content: "or"; }
@media (min-width: 721px) and (max-width: 1080px) {
  #ablauf .steps { grid-template-columns: repeat(2, 1fr); }
  #ablauf .step:nth-child(5) { grid-column: 1 / -1; }
  #ablauf .step:nth-child(5) p { max-width: calc(50% - var(--rinne) / 2); }
}
@media (max-width: 720px) {
  #ablauf .step:nth-child(4)::before { left: 0; transform: translateY(-50%); }
}

/* ---------- Krankheitsbilder ---------- */
.cond-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.cond-col h3 { font-size: 20px; padding-bottom: 14px; border-bottom: 3px solid var(--orange); margin-bottom: 6px; }
.cond-col ul { list-style: none; padding: 0; margin: 0; }
.cond-col li { padding: 11px 0; border-bottom: 1px solid var(--linie); font-size: 15.5px; color: var(--grau-text); }
.cond-col li:last-child { border-bottom: 0; }
.cond-col a:hover { color: var(--orange-text); }

/* ---------- Kliniken ---------- */
.clinic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.clinic { background: var(--weiss); border: 1px solid var(--linie); padding: 26px 26px; }
.bg-white .clinic { background: var(--elfenbein); }
.clinic h3 { font-size: 19px; margin-bottom: 8px; }
.clinic p { margin: 0; font-size: 15px; color: var(--grau-text); }

/* ---------- Fragen ---------- */
.faq-list { max-width: 920px; border-top: 1px solid var(--linie); }
.faq-item { border-bottom: 1px solid var(--linie); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 22px;
  padding: 24px 4px; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--sans); font-size: 18.5px; font-weight: 900; color: var(--schiefer); line-height: 1.35; }
.faq-q:hover { color: var(--orange-text); }
.faq-q svg { width: 22px; height: 22px; flex: none; stroke: var(--orange); fill: none; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.faq-q[aria-expanded="true"] svg { transform: rotate(180deg); }
.faq-a { display: none; padding: 0 4px 26px; max-width: 66ch; }
.faq-a p { margin: 0 0 12px; font-size: 16px; color: var(--grau-text); }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a ul { margin: 0 0 12px; padding-left: 22px; font-size: 16px; color: var(--grau-text); }
.faq-item.open .faq-a { display: block; }

/* ---------- Sportband ---------- */
.sport { color: var(--elfenbein); text-align: center;
  background-image: linear-gradient(rgba(51, 63, 72, .9), rgba(51, 63, 72, .93)), url('/assets/sport-kraftsport.webp');
  background-size: cover; background-position: center 32%; }
.sport .wrap { max-width: 900px; }
.sport .eyebrow { justify-content: center; }
.sport p.claim { font-size: clamp(23px, 3vw, 36px); font-weight: 900; line-height: 1.22;
  margin: 0 0 24px; text-wrap: balance; letter-spacing: -0.015em; }
.sport p.sub { margin: 0 auto 32px; max-width: 56ch; font-size: 16.5px; color: rgba(248, 247, 242, .82); }

/* ---------- Kontakt ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); }
.contact-rows { display: flex; flex-direction: column; }
.crow { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--linie); }
.crow .lbl { font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-text); margin-bottom: 4px; }
.crow p { margin: 0; font-size: 17px; }
.crow a { border-bottom: 2px solid var(--orange); }
.crow a:hover { color: var(--orange-text); }
.wahlarzt-note { background: var(--beige-flaeche); padding: 22px 26px;
  font-size: 15.5px; color: var(--schiefer); margin-top: 32px; }
.loc { border: 1px solid var(--linie); background: var(--elfenbein); }
.loc .head { padding: 24px 26px 20px; }
.loc h3 { font-size: 19px; margin-bottom: 8px; }
.loc .head p { margin: 0 0 4px; font-size: 15px; color: var(--grau-text); }
.map-consent { border-top: 1px solid var(--linie); background: var(--weiss); padding: 28px 26px; text-align: center; }
.map-consent .addr { font-size: 15.5px; margin: 0 0 18px; }
.map-consent .hint { font-size: 13px; color: var(--grau-text); margin: 14px 0 0; }

/* E-Mail statt Formular (Wunsch des Arztes, 25.09.2026): Knopf öffnet das eigene Mailprogramm,
   darunter die Adresse zum Kopieren für alle, die im Browser schreiben. */
.mail-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.mail-cta p { margin: 0; }
.mail-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 16.5px; }
.mail-copy span { font-weight: 900; overflow-wrap: anywhere; user-select: all; }
.btn-copy { font: inherit; font-size: 13.5px; font-weight: 900; padding: 7px 16px; border: 2px solid var(--linie);
  border-radius: 999px; background: none; color: var(--schiefer); cursor: pointer; transition: border-color .2s ease; }
.btn-copy:hover { border-color: var(--orange); }
.form-note { font-size: 13.5px; color: var(--grau-text); margin: 0; }

/* ---------- Unterseiten: Inhaltsblöcke ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.split.rev .split-media { order: 2; }
.split-media { overflow: hidden; background: var(--beige-flaeche); aspect-ratio: 5/4; }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
ul.check { list-style: none; padding: 0; margin: 20px 0 0; }
ul.check li { position: relative; padding: 12px 0 12px 30px; border-bottom: 1px solid var(--linie); font-size: 16px; }
ul.check li:last-child { border-bottom: 0; }
ul.check li::before { content: ""; position: absolute; left: 2px; top: 21px; width: 10px; height: 10px; background: var(--beige); }
ul.check li b { font-weight: 900; }
.treat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.treat { background: var(--weiss); border: 1px solid var(--linie); padding: 28px 26px; }
.bg-white .treat { background: var(--elfenbein); }
.treat h3 { font-size: 20px; margin-bottom: 14px; }
.treat ul { list-style: none; padding: 0; margin: 0; }
.treat li { padding: 10px 0; border-bottom: 1px solid var(--linie); font-size: 15.5px; color: var(--grau-text); }
.treat li:last-child { border-bottom: 0; }
.pagenav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 8px; }
.pagenav a { border: 2px solid var(--linie); padding: 22px 24px; background: var(--weiss); transition: border-color .2s ease; }
.bg-cream .pagenav a { background: var(--elfenbein); }
.pagenav a:hover { border-color: var(--orange); }
.pagenav .lbl { font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-text); margin-bottom: 8px; }
.pagenav .t { font-size: 19px; font-weight: 900; }

/* ---------- Fließtext der Landingpages ---------- */
.prose { max-width: 66ch; }
.prose > p { margin: 0 0 18px; font-size: 17px; color: var(--grau-text); }
.prose h2 { margin: 52px 0 16px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 34px 0 12px; font-size: 20px; }
.prose ul, .prose ol { margin: 0 0 20px; padding-left: 22px; color: var(--grau-text); font-size: 17px; }
.prose li { margin-bottom: 9px; }
.prose li b, .prose p b { font-weight: 900; color: var(--schiefer); }
.prose a:not(.btn):not(.arrow-link) { color: var(--orange-text); border-bottom: 2px solid var(--orange); }
.prose a:not(.btn):not(.arrow-link):hover { color: var(--schiefer); border-color: var(--schiefer); }
.prose-wide { max-width: 76ch; }

/* Antwortkasten: die kurze Antwort zuerst. Hellgelb weist als Sekundärfarbe auf den
   wichtigsten unterstützenden Inhalt; Schiefer darauf hält 7,5:1. */
.answer { background: var(--hellgelb); padding: 28px 32px; margin: 0 0 34px; max-width: 68ch; }
.bg-cream .answer, .bg-white .answer { background: var(--hellgelb); }
.answer p { margin: 0 0 12px; font-size: 17.5px; color: var(--schiefer); }
.answer p:last-child { margin-bottom: 0; }
.answer .lbl { font-size: 12px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase;
  color: var(--schiefer); margin: 0 0 12px; display: flex; align-items: center; gap: 12px; }
.answer .lbl::before { content: ""; width: 30px; height: 3px; background: var(--schiefer); flex: none; }

/* ---------- Autorenkasten ---------- */
.author-box { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center;
  border-top: 1px solid var(--linie); padding: 30px 0 0; background: none; max-width: 800px; }
.bg-white .author-box, .bg-cream .author-box { background: none; }
.author-box img { width: 94px; height: 94px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; }
.author-box .nm { font-size: 19px; font-weight: 900; margin: 0 0 5px; }
.author-box .role { font-size: 14px; color: var(--grau-text); margin: 0 0 12px; }
.author-box p { margin: 0; font-size: 15px; color: var(--grau-text); }
.author-box a { color: var(--orange-text); border-bottom: 2px solid var(--orange); }
.meta-line { font-size: 13.5px; color: var(--grau-text); margin: 26px 0 0; }

/* ---------- Medizinische Grafiken ----------
   Der Fließtext bleibt bei 66ch stehen — die Zeilenlänge ist richtig, leer ist nur die Fläche
   daneben. Die Zeichnung füllt sie: .fig nimmt die volle Rasterbreite (--maxw abzüglich
   Innenabstand, also 1112 px am Desktop), .fig-schmal bleibt textbreit.

   Der Ausbruch aus der 66ch-Spalte läuft über eine Container-Abfrage: der Rastercontainer
   (.wrap, .page-head .inner, .legal-wrap) wird zum Größenkontext, und 100cqw ist exakt dessen
   Inhaltsbreite — am Desktop 1112 px, darunter die tatsächlich verfügbare Breite. Bewusst nicht
   über negative Ränder und nicht über 100vw: beide rechnen an der Scrollleiste vorbei und
   erzeugen auf schmalen Fenstern einen Querlauf. Die Figur beginnt ohnehin an der linken
   Rasterkante, sie muss also nur nach rechts wachsen — dafür genügt die Breite allein.

   Fällt die Container-Abfrage aus (Browser ohne :has()), bleibt die Figur textbreit; die
   Grundwerte stehen deshalb außerhalb des @supports-Blocks. Nichts verrutscht.

   .fig-schmal wirkt als Zusatzklasse zu .fig ebenso wie allein. */

.fig,
.fig-schmal {
  --fig-innen: clamp(16px, 2.2vw, 30px);
  width: auto;                       /* Grundzustand: Textbreite */
  margin: 36px 0 42px;
  background: var(--weiss);
  border: 1px solid var(--linie);
}

/* Sektionen wechseln zwischen Weiß und Elfenbein. Die Fläche unter der Zeichnung dreht mit,
   damit eine SVG-Linie nie im Sektionsgrund verschwimmt — dieselbe Logik wie .treat, .clinic. */
.bg-white .fig,
.bg-white .fig-schmal { background: var(--elfenbein); }

.fig img,
.fig-schmal img {
  width: 100%;
  padding: var(--fig-innen);
}

/* Bildunterschrift: kleiner als der Fließtext, Grau-Textvariante, durch eine feine Linie
   abgesetzt und mit dem wiederkehrenden Orange-Strich markiert (wie .eyebrow, .answer .lbl). */
.fig figcaption,
.fig-schmal figcaption {
  margin: 0;
  /* Die Trennlinie läuft über die ganze Figur, die Zeile bleibt trotzdem lesbar kurz:
     der rechte Innenabstand wächst, sobald die Figur breiter als 76 Zeichen wird. */
  padding: 16px max(var(--fig-innen), calc(100% - 76ch)) 20px var(--fig-innen);
  border-top: 1px solid var(--linie);
  font-size: 14px;
  line-height: 1.62;
  color: var(--grau-text);
}
.fig figcaption::before,
.fig-schmal figcaption::before {
  content: "";
  display: block;
  width: 30px; height: 3px;
  background: var(--orange);
  margin: 0 0 12px;
}
.fig figcaption b,
.fig-schmal figcaption b { font-weight: 900; color: var(--schiefer); }

@supports selector(:has(*)) {
  .wrap:has(.fig),
  .page-head .inner:has(.fig),
  .legal-wrap:has(.fig) { container-type: inline-size; }
  .fig:not(.fig-schmal) { width: 100cqw; }
}

/* Unter 700 px läuft alles einspaltig: .prose ist dort ohnehin so breit wie das Raster,
   der Ausbruch wird ausdrücklich zurückgenommen. */
@media (max-width: 700px) {
  .fig:not(.fig-schmal) { width: auto; }
  .fig,
  .fig-schmal { --fig-innen: 16px; margin: 28px 0 32px; }
  .fig figcaption,
  .fig-schmal figcaption { padding-block: 14px 18px; font-size: 13.5px; }
}

/* ---------- A–Z-Liste ---------- */
.az-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 36px; }
.az-col h3 { font-size: 20px; padding-bottom: 14px; border-bottom: 3px solid var(--orange); margin-bottom: 4px; }
.az-col ul { list-style: none; padding: 0; margin: 0; }
.az-col li { border-bottom: 1px solid var(--linie); }
.az-col li:last-child { border-bottom: 0; }
.az-col a, .az-col span { display: block; padding: 12px 0; font-size: 16px; color: var(--grau-text); }
.az-col a:hover { color: var(--orange-text); }

/* ---------- Ratgeber ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.post { background: var(--weiss); border: 1px solid var(--linie); padding: 28px 26px;
  display: flex; flex-direction: column; gap: 12px; }
.bg-white .post { background: var(--elfenbein); }
.post .date { font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-text); }
.post h3 { font-size: 21px; }
.post p { margin: 0; font-size: 15.5px; color: var(--grau-text); flex: 1; }

/* ---------- Fußzeile ---------- */
.footer { background: var(--schiefer); color: rgba(248, 247, 242, .86); padding: clamp(56px, 7vw, 80px) var(--pad) 88px; }
.footer-grid { max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 44px; }
.footer .brand img { height: 32px; }
.footer .intro { margin: 22px 0 0; max-width: 34ch; font-size: 15px; color: rgba(248, 247, 242, .74); }
.footer h2 { font-size: 12px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--gelb); margin: 0 0 16px; }
.footer-col a { display: block; font-size: 15px; padding: 8px 0; color: rgba(248, 247, 242, .84); }
.footer-col a:hover { color: var(--elfenbein); }
.footer-col p { margin: 0 0 8px; font-size: 15px; color: rgba(248, 247, 242, .74); }
.footer-social { display: flex; gap: 8px; margin-top: 18px; }
.footer-social a { display: inline-flex; padding: 10px; }
.footer-social svg { width: 21px; height: 21px; fill: var(--elfenbein); opacity: .85; }
.footer-social a:hover svg { opacity: 1; }
.footer-bottom { max-width: 1360px; margin: 48px auto 0; padding-top: 24px; border-top: 1px solid var(--linie-dunkel);
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; align-items: center;
  font-size: 13.5px; color: rgba(248, 247, 242, .68); }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 4px 22px; align-items: center; }
.footer-bottom a { padding: 8px 0; color: rgba(248, 247, 242, .84); }

/* ---------- fixiert ---------- */
.mobile-bar { display: none; position: fixed; inset: auto 0 0 0; z-index: 90;
  background: var(--schiefer); border-top: 3px solid var(--orange);
  padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom)); gap: 10px; }
.mobile-bar .btn { flex: 1; font-size: 14px; padding: 14px 16px; min-height: 50px; }
.to-top { position: fixed; right: 20px; bottom: 20px; z-index: 91; width: 52px; height: 52px;
  background: var(--schiefer); color: var(--elfenbein); border: 0; cursor: pointer; display: grid; place-items: center;
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease, background .2s ease; }
.to-top.show { opacity: 1; visibility: visible; }
.to-top:hover { background: var(--orange); color: var(--schiefer); }
.to-top svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Rechtsseiten ---------- */
.legal-wrap { max-width: 820px; margin: 0 auto; padding: 140px var(--pad) 96px; }
.legal-wrap h1 { font-size: clamp(32px, 4vw, 48px); margin: 0 0 14px; }
.legal-wrap h2 { font-size: 23px; margin: 46px 0 14px; }
.legal-wrap p, .legal-wrap li { color: var(--grau-text); }
.legal-wrap p { margin: 0 0 14px; }
.legal-wrap ul { padding-left: 22px; }
.legal-wrap a.inl { color: var(--orange-text); border-bottom: 2px solid var(--orange); }
.legal-wrap .placeholder { background: var(--hellgelb); padding: 22px 26px;
  margin: 22px 0; font-size: 15.5px; color: var(--schiefer); }

/* ---------- Bandkomposition nach dem Manual ----------
   Das Manual komponiert seine eigenen Seiten aus ganzflächigen Farbfeldern. Dieselbe Logik
   hier: einzelne Sektionen bekommen die Primärfarbe Beige beziehungsweise ein kühles Graufeld,
   statt dass Farbe nur als Akzent auftritt.

   Zwei Einschränkungen, die die Barrierefreiheit vorgibt:
   · Auf Beige hält allein Schiefer die nötigen 4,5:1 (4,57). Grauer Sekundärtext (2,7) und
     Orange (2,2) fallen durch — innerhalb dieser Felder wird der Akzent deshalb zu Schiefer.
   · Grau #75787B als Vollfläche ist unbrauchbar: weder Schiefer (2,43) noch Elfenbein (4,14)
     noch Weiß (4,44) erreichen 4,5:1. Es steht deshalb als helle Tönung (--feld-grau, 8,6:1). */

#wahlarzt {
  background: var(--feld-grau);
  --orange-text: #8E5A08;    /* das Graufeld ist dunkler als Elfenbein: 4,6:1 statt 3,9:1 */
}
#wahlarzt .priv-card { background: var(--weiss); }

/* ---------- Blocksatz ----------
   Nur für lange Fließtextabsätze, nicht für Karten und kurze Zeilen: Blocksatz braucht Breite,
   sonst reißen die Wortabstände auf. Deutsche Wörter sind lang, deshalb ist die Silbentrennung
   zwingend mitzuliefern. Zurück auf Flattersatz: --satz auf left stellen. */
:root { --satz: justify; }

.prose > p, .prose li,
.legal-wrap p, .legal-wrap li,
.answer p,
.section-lead, .page-head .lead, .hero-lead,
.faq-a p, .faq-a li,
.about-body > p:not(.eyebrow),
.wahlarzt-note,
.sport p.sub {
  text-align: var(--satz);
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 7 4 3;   /* erst ab sieben Zeichen trennen, nie zwei Buchstaben abhängen */
}

/* Die letzte Zeile eines Absatzes bleibt linksbündig — Standardverhalten, hier ausdrücklich. */
.prose > p, .legal-wrap p, .answer p, .faq-a p { text-align-last: auto; }
/* Unter etwa 45 Zeichen Zeilenbreite reißt der Blocksatz auf — dort bleibt es beim Flattersatz. */
@media (max-width: 760px) { :root { --satz: left; } }

/* ---------- Raster: sechs Spalten quer, drei hochkant ---------- */
@media (max-width: 1080px) {
  .serv-grid, .serv-grid.three, .serv-grid.two, .memberships, .cond-grid, .clinic-grid, .treat-grid,
  .pagenav, .az-grid, .post-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: repeat(3, 1fr); row-gap: 36px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1360px) {
  :root { --kopf-hoehe: 88px; }   /* Marke und Menüschalter */
  .brand img { height: 48px; }   /* 231 px breit — passt neben den Schalter */
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-mobile { display: block; max-width: 1360px; margin: 14px auto 0; border-top: 1px solid var(--linie-dunkel); padding: 10px 0 6px; }
  .nav-mobile a { display: block; padding: 15px 0; font-size: 16.5px; border-bottom: 1px solid var(--linie-dunkel); }
  /* Die Menüzeilen-Regel oben würde der Schaltfläche Innenabstand und Zentrierung nehmen. */
  .nav-mobile a.btn { display: flex; margin-top: 16px; padding: 15px 30px; border: 2px solid transparent; }
  .hero { grid-template-columns: 1fr; }
  .hero-media { order: -1; min-height: 44vh; }
  .hero-copy { padding-top: 64px; }
  .focus-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .why-grid, .about-grid, .priv-grid, .contact-grid, .split { grid-template-columns: 1fr; }
  .split.rev .split-media { order: 0; }
  .about-photo { max-width: 440px; }
}
@media (max-width: 720px) {
  body { font-size: 16.5px; }
  .serv-grid, .serv-grid.three, .serv-grid.two, .steps, .memberships, .cond-grid, .clinic-grid,
  .treat-grid, .pagenav, .az-grid, .post-grid { grid-template-columns: 1fr; }
  .sub-block .lead-row { flex-direction: column; align-items: flex-start; }
  .mobile-bar { display: flex; }
  .to-top { bottom: 88px; }
  .footer { padding-bottom: 104px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .page-head { padding-top: 116px; }
  .author-box { grid-template-columns: 1fr; }
}

/* ---------- Behandlungsfinder ---------- */
/* Versteht Beschwerdesaetze statt Fachbegriffe. Die Trefferliste liegt ueber
   dem Inhalt, damit der Abschnitt darunter nicht springt. */
.finder { position: relative; max-width: 640px; margin: 44px auto 0; }
.finder-kicker { margin: 0 0 12px; text-align: center; font-size: 13px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--orange-text); }
.finder-feld { position: relative; }
.finder-feld .lupe { position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; stroke: var(--grau); fill: none; stroke-width: 2;
  stroke-linecap: round; pointer-events: none; }
/* Eckig wie Formularfelder und Karten des Manuals; nur die Themenmarke ist eine Kapsel. */
.finder-feld input { width: 100%; min-height: 56px; padding: 16px 20px 16px 52px;
  border: 1px solid var(--linie); border-radius: 0; background: var(--weiss); color: var(--schiefer);
  font-family: var(--sans); font-size: 16px; transition: border-color .2s ease; }
.finder-feld input::placeholder { color: var(--grau); }
/* Fokus wie bei den Formularfeldern — der frühere Beige-Schein hielt auf Weiß keine 2:1. */
.finder-feld input:focus { outline: 3px solid var(--schiefer); outline-offset: 2px; border-color: var(--schiefer); }
.finder-liste { position: absolute; z-index: 40; left: 0; right: 0; top: 100%; margin-top: 6px;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 0;
  box-shadow: 0 14px 34px rgba(0,0,0,.10); overflow: hidden; }
.finder-liste[hidden] { display: none; }
.finder-treffer { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 18px; font-size: 15px; color: var(--schiefer); border-bottom: 1px solid var(--linie); }
.finder-treffer:last-child { border-bottom: 0; }
.finder-treffer:hover, .finder-treffer.aktiv { background: var(--feld-grau); }
/* Orange-Text auf dem Graufeld: #8E5A08 hält 4,6:1 (--orange-text nur 4,0) — wie in #wahlarzt. */
.finder-marke { flex-shrink: 0; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: #8E5A08; background: var(--feld-grau); padding: 4px 10px; border-radius: 999px; }
.finder-leer { margin: 0; padding: 14px 18px; font-size: 14px; color: var(--grau-text); }
.finder-hinweis { margin: 12px 0 0; text-align: center; font-size: 13px; color: var(--grau-text); }
@media (max-width: 720px) {
  .finder { margin-top: 32px; }
  .finder-treffer { flex-wrap: wrap; gap: 6px; }
}

/* ---------- Operationen unter dem Behandlungsfinder ----------
   Kundenwunsch vom 31.08.2026 nach dem Vorbild Dr. Ghobrial: unter der Suche die häufigen
   Eingriffe als Kacheln mit runden Symbolen. Kacheln eckig wie alle Karten des Manuals, rund
   ist allein das Symbol. Schiefer-Kreis mit Orange-Symbol (3,9:1) — dieselbe Paarung wie
   Kopfzeile und Terminschaltfläche; beim Überfahren und im Fokus kehrt sie sich um
   (Schiefer-tief auf Orange, 5,0:1). Die Symbole sind einfarbige SVG aus Lucide (ISC, siehe
   /assets/icons/LIZENZ.txt), eingefärbt als CSS-Maske: die Farbe kommt aus der Palette. */
.op-block { margin-top: clamp(52px, 6vw, 80px); }
.op-titel { font-size: clamp(22px, 2.4vw, 28px); text-align: center; margin: 0 0 clamp(24px, 3vw, 34px); }
.op-liste { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.op-liste li { display: flex; }                       /* Kacheln einer Reihe gleich hoch */
.op { flex: 1; position: relative; display: flex; align-items: center; gap: 18px; min-height: 94px;
  padding: 18px 48px 18px 20px; background: var(--weiss); border: 2px solid var(--linie);
  transition: border-color .2s ease; }
/* Winkel rechts: die Kachel führt weiter */
.op::after { content: ""; position: absolute; right: 24px; top: 50%; width: 9px; height: 9px; margin-top: -5px;
  border-top: 2.5px solid var(--schiefer); border-right: 2.5px solid var(--schiefer);
  transform: rotate(45deg); transition: transform .2s ease; }
.op:hover, .op:focus-visible { border-color: var(--orange); }
.op:hover::after, .op:focus-visible::after { transform: translateX(3px) rotate(45deg); }
.op-icon { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: var(--schiefer); transition: background .2s ease; }
.op-icon::before { content: ""; width: 26px; height: 26px; background: var(--orange);
  -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain; transition: background .2s ease; }
.op:hover .op-icon, .op:focus-visible .op-icon { background: var(--orange); }
.op:hover .op-icon::before, .op:focus-visible .op-icon::before { background: var(--schiefer-tief); }
.op-name { font-size: 16.5px; font-weight: 900; line-height: 1.28; color: var(--schiefer); text-wrap: pretty;
  hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 5; overflow-wrap: break-word; }
.op-icon[data-icon="arthroskopie"]::before { -webkit-mask-image: url(/assets/icons/arthroskopie.svg); mask-image: url(/assets/icons/arthroskopie.svg); }
.op-icon[data-icon="rotatorenmanschette"]::before { -webkit-mask-image: url(/assets/icons/rotatorenmanschette.svg); mask-image: url(/assets/icons/rotatorenmanschette.svg); }
.op-icon[data-icon="stabilisierung"]::before { -webkit-mask-image: url(/assets/icons/stabilisierung.svg); mask-image: url(/assets/icons/stabilisierung.svg); }
.op-icon[data-icon="sehne"]::before { -webkit-mask-image: url(/assets/icons/sehne.svg); mask-image: url(/assets/icons/sehne.svg); }
.op-icon[data-icon="band"]::before { -webkit-mask-image: url(/assets/icons/band.svg); mask-image: url(/assets/icons/band.svg); }
.op-icon[data-icon="arthrolyse"]::before { -webkit-mask-image: url(/assets/icons/arthrolyse.svg); mask-image: url(/assets/icons/arthrolyse.svg); }
.op-icon[data-icon="daumensattel"]::before { -webkit-mask-image: url(/assets/icons/daumensattel.svg); mask-image: url(/assets/icons/daumensattel.svg); }
.op-icon[data-icon="nerv"]::before { -webkit-mask-image: url(/assets/icons/nerv.svg); mask-image: url(/assets/icons/nerv.svg); }
.op-icon[data-icon="fraktur"]::before { -webkit-mask-image: url(/assets/icons/fraktur.svg); mask-image: url(/assets/icons/fraktur.svg); }
/* Hoher Kontrast unter Windows: dort wird jede Hintergrundfarbe ersetzt, die Maske bliebe leer. */
@media (forced-colors: active) { .op-icon::before { forced-color-adjust: none; background: CanvasText; } }
@media (max-width: 1080px) {
  .op-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Eine ungerade letzte Kachel läuft über beide Spalten, statt allein links zu stehen. */
  .op-liste li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .op-liste { gap: 10px; }
  .op { flex-direction: column; align-items: flex-start; gap: 12px; min-height: 0; padding: 16px 14px 18px; }
  .op::after { top: 39px; right: 18px; }              /* auf Höhe der Symbolmitte */
  .op-icon { width: 46px; height: 46px; }
  .op-icon::before { width: 22px; height: 22px; }
  .op-name { font-size: 15.5px; }
  /* Die überbreite letzte Kachel behält die Zeilenform: Symbol links, Winkel rechts. */
  .op-liste li:last-child:nth-child(odd) .op { flex-direction: row; align-items: center; gap: 14px; padding-right: 48px; }
  .op-liste li:last-child:nth-child(odd) .op::after { top: 50%; }
}

/* Online-Terminbuchung: Button-Reihe und eingebetteter mobimed-Kalender des Orthozentrums Döbling */
.book-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 36px; }
.booking-frame { max-width: 780px; background: var(--weiss); }
.booking-frame iframe { display: block; width: 100%; height: 720px; border: 0; }
@media (max-width: 720px) { .booking-frame iframe { height: 760px; } }
.booking-note { margin: 14px 0 0; font-size: 14px; }

/* Terminbuchung als Dialog (site.js): feste Größe, unabhängig vom Inhalt; das mobimed-Fenster
   scrollt in sich. Die Seite dahinter bleibt stehen, solange der Dialog offen ist. */
html:has(.booking-dialog[open]) { overflow: hidden; }
.booking-dialog { width: min(1100px, calc(100vw - 48px)); height: min(860px, calc(100dvh - 48px));
  max-width: none; max-height: none; padding: 0; border: 0; background: var(--weiss);
  box-shadow: 0 24px 80px rgba(0,0,0,.35); overflow: hidden; }
.booking-dialog[open] { display: flex; flex-direction: column; }
.booking-dialog::backdrop { background: rgba(20,26,31,.6); }
.booking-dialog-bar { display: flex; align-items: center; gap: 20px; padding: 10px 10px 10px 24px;
  background: var(--schiefer); color: var(--elfenbein); }
.booking-dialog-bar h2 { margin: 0 auto 0 0; font-family: var(--sans); font-size: 17px; font-weight: 600; line-height: 1.3; color: inherit; }
.booking-dialog-bar a { color: inherit; font-size: 14px; text-underline-offset: 3px; }
.booking-dialog-close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; background: none; color: inherit; cursor: pointer; }
.booking-dialog-close svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }
.booking-dialog-bar :focus-visible { outline-color: var(--elfenbein); }
.booking-dialog iframe { flex: 1; display: block; width: 100%; min-height: 0; border: 0; }
@media (max-width: 720px) {
  .booking-dialog { width: 100vw; height: 100dvh; }
  .booking-dialog-bar { padding-left: 16px; gap: 12px; }
  .booking-dialog-bar a { display: none; }
}