/* =========================================================================
   Orthopaedische Praxis Farid Raufi
   Schriften selbst gehostet (SIL OFL) - kein CDN-Aufruf im Browser.
   Kein JavaScript. Keine Schatten. Keine Verlaeufe. Kein Radius ausser 2px.
   ========================================================================= */

/* Tuerkisch und Kyrillisch, nachgeladen am 28.09.2026 (Google Fonts, SIL OFL). Der Browser holt
   sie nur, wenn eine Seite Zeichen aus ihrem Bereich enthaelt; Deutsch und Englisch laden sie nie.
   Vor den Grundschnitten deklariert: bei Ueberschneidung gewinnt der zuletzt deklarierte. */
@font-face{
  font-family:"Source Serif 4";
  src:url("../fonts/source-serif-4-latin-ext.woff2?v=155f6e70") format("woff2");
  font-weight:400 600;
  font-stretch:normal;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Source Serif 4";
  src:url("../fonts/source-serif-4-cyrillic.woff2?v=e553fa82") format("woff2");
  font-weight:400 600;
  font-stretch:normal;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:"Instrument Sans";
  src:url("../fonts/instrument-sans-latin-ext.woff2?v=c4fcfea4") format("woff2");
  font-weight:400 600;
  font-stretch:normal;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Source Serif 4";
  src:url("../fonts/source-serif-4-var.woff2?v=3fa2b64d") format("woff2");
  font-weight:400 600;
  font-stretch:normal;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+1E9E, U+2002-2007, U+2009-200B, U+2010, U+2012-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2025-2026, U+202F-2030, U+2032-2033, U+2039-203A, U+203C, U+2044, U+2047-2049, U+20AC, U+2122, U+2190-2193;
}
@font-face{
  font-family:"Instrument Sans";
  src:url("../fonts/instrument-sans-var.woff2?v=503e22bb") format("woff2");
  font-weight:400 600;
  font-stretch:normal;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0020-007E, U+00A0-00A3, U+00A5, U+00A7-00AB, U+00AE-00B0, U+00B4, U+00B6-00B8, U+00BA-00BB, U+00BF-00FF, U+0131, U+0152-0153, U+1E9E, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2030, U+2039-203A, U+20AC, U+2122, U+2190-2193;
}

:root{
  color-scheme:light;   /* sonst zeichnet der Dunkelmodus die Eingabefelder grau */
  /* Sieben Farbtokens, mehr nicht. */
  --paper:#fbf7f1;
  --sand:#f2e9dc;
  --ink-rgb:34 28 22;          /* Kanalwerte der Tinte, einzige Quelle */
  --ink:rgb(var(--ink-rgb));
  --body:#4e463d;
  --petrol:#0b5a53;
  --orange:#f29120;
  --rule:rgb(var(--ink-rgb) / .18);

  --f-serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --f-ui:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;

  /* Abstandsskala aus der 28px-Zeilenbox. Acht Werte, sonst keine. */
  --s1:.4375rem;  /*  7 */
  --s2:.875rem;   /* 14 */
  --s3:1.3125rem; /* 21 */
  --s4:1.75rem;   /* 28 */
  --s5:2.625rem;  /* 42 */
  --s6:3.5rem;    /* 56 */
  --s7:5.25rem;   /* 84 */
  --s8:7rem;      /* 112 */

  --wrap:70rem;
  --wrap-narrow:44rem;
  --flaeche:var(--paper);   /* Flaeche des Abschnitts, fuer ausgesparte Formen */
  --t:120ms cubic-bezier(.2,0,0,1);
}

*,*::before,*::after{box-sizing:border-box}

html{font-size:100%;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--body);
  font:400 1.125rem/1.5556 var(--f-ui);
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{display:block;max-width:100%;width:100%;height:auto}

h1,h2,h3{color:var(--ink);margin:0 0 var(--s2);font-family:var(--f-serif);font-weight:400;
  hyphens:auto;hyphenate-limit-chars:8 4 4;overflow-wrap:break-word}
h1{font-size:clamp(2.25rem,1.749rem + 2.057vw,3.25rem);line-height:1.06;letter-spacing:-.022em;text-wrap:balance}
h2{font-size:clamp(1.625rem,1.312rem + 1.285vw,2.25rem);line-height:1.15;letter-spacing:-.014em;text-wrap:balance}
h3{font-size:1.5rem;line-height:1.3;letter-spacing:-.006em;font-weight:600}

p,ul,dl,table,figure{margin:0 0 var(--s3)}
address{font-style:normal;margin:0}
p,li,.lead{max-width:34em}
p,li,dd,.lead,.v,figcaption{hyphens:auto;hyphenate-limit-chars:7 4 3;text-wrap:pretty}
.hours th,.hours td,dl.wege dt,.label,.linien li,.kz-w,.ftr-wort{hyphens:none}
ul{padding-inline-start:1.1em}
li{margin:0 0 .35em}
strong,b{font-weight:600;color:var(--ink)}

.lead{
  font-family:var(--f-serif);
  font-size:1.375rem;line-height:1.45;letter-spacing:-.004em;
  color:var(--ink);font-weight:400;
}

a{
  color:var(--petrol);
  text-decoration:underline;
  text-decoration-thickness:.07em;
  text-underline-offset:.16em;
  transition:color var(--t),text-decoration-thickness var(--t);
}
a:hover{text-decoration-thickness:.14em}
a[href^="tel:"]{white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
main a[target="_blank"]::after{content:" [extern]";font-family:var(--f-ui);font-size:.85em;text-decoration:none}

:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
/* Kein Abstandsmass, sondern die gemessene Hoehe der klebenden Kopfzeile plus Luft.
   Nur scroll-padding am Wurzelelement, nicht zusaetzlich scroll-margin, sonst
   addieren sich beide. scroll-padding wirkt ausserdem auf den Fokussprung. */
html{scroll-padding-top:88px}
@media(max-width:66rem){html{scroll-padding-top:150px}}
@media(max-width:47.99rem){html{scroll-padding-top:140px}}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- Geruest ------------------------------------------------------ */

.wrap{width:min(100% - 3rem,var(--wrap));margin-inline:auto}
.wrap-narrow{width:min(100% - 3rem,var(--wrap));margin-inline:auto}
.wrap-narrow>*{max-width:var(--wrap-narrow)}
.wrap-narrow h2{margin-top:var(--s6)}
.wrap-narrow .label+h1{margin-top:0}

.sec{padding-block:var(--s8)}
.sec--sand{background:var(--sand);--flaeche:var(--sand)}

.sec-head{max-width:30em;margin-bottom:var(--s5)}
.sec-head p:last-child{margin-bottom:0}

.split{display:grid;grid-template-columns:7fr 5fr;gap:var(--s6);align-items:start}
.split.split--rev{grid-template-columns:5fr 7fr}

.mt{margin-top:var(--s5)}
.sec-head.mt{margin-top:var(--s7)}
.skip{position:absolute;inset-inline-start:0;top:0;transform:translateY(-100%);z-index:99;background:var(--ink);color:var(--paper);padding:var(--s2) var(--s3);text-decoration:none}
.skip:focus{transform:none}
main:focus{outline:none}

/* Kapitaelchen-Rubrik. Quelltext kleingeschrieben, nie text-transform. */
h2.label,h3.label{margin:0 0 var(--s2);letter-spacing:.06em;line-height:1.4}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.sec-head>.label::before,
.auftakt>.label::before,
.split>div>.label::before{
  content:"";display:block;width:2.25rem;height:3px;
  background:var(--orange);margin-bottom:var(--s2);
}

.label{
  display:block;
  font-family:var(--f-serif);font-weight:600;
  font-size:1rem;line-height:1.4;letter-spacing:.06em;
  font-variant-caps:small-caps;
  color:var(--ink);
  margin:0 0 var(--s2);
}

/* ---------- Kopfzeile ---------------------------------------------------- */

.hdr{
  position:sticky;top:0;z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.hdr-in{display:flex;align-items:center;gap:var(--s4);min-height:4.5rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:var(--s2);text-decoration:none;margin-inline-end:auto}
.brand img{width:auto;height:44px;max-width:none}
.brand-tx{display:flex;flex-direction:column}
.brand-tx span{
  font-family:var(--f-serif);font-size:1.25rem;line-height:1.15;letter-spacing:-.01em;
  color:var(--ink);white-space:nowrap;
}
.nav{display:flex;align-items:center;gap:var(--s4)}
.nav a{
  font:500 1rem/1.4 var(--f-ui);letter-spacing:.005em;
  color:var(--ink);text-decoration:none;
  padding-block:calc(1.5rem - 2px) 1.5rem;
  border-bottom:2px solid transparent;
}
.nav a:hover{border-bottom-color:var(--rule)}
.nav a[aria-current]{color:var(--petrol);border-bottom-color:var(--ink)}
.hdr-tel{
  font-family:var(--f-serif);font-weight:500;
  font-size:1.25rem;line-height:1.4;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums lining-nums;
  color:var(--ink);text-decoration:none;white-space:nowrap;
}
.hdr-tel:hover{text-decoration:underline;text-decoration-thickness:.07em}
.nav-m{display:none}

/* ---------- Die orange Bande --------------------------------------------- */

.band{background:var(--orange);color:var(--ink);padding-block:var(--s8)}
.band-in{display:grid;grid-template-columns:7fr 5fr;gap:var(--s6);align-items:start}
.band h2,.band .label,.band caption,.band th,.band td,.band p{color:var(--ink)}
.band a{color:var(--ink);text-decoration-color:var(--ink)}
.band .hours tr+tr th,.band .hours tr+tr td{border-top-color:rgb(var(--ink-rgb) / .28)}
.tel-xl{
  display:inline-block;
  font-family:var(--f-serif);font-weight:400;
  font-size:clamp(2rem,1.499rem + 2.057vw,3rem);
  line-height:1;letter-spacing:-.018em;
  font-variant-numeric:tabular-nums lining-nums;
  color:var(--ink);white-space:nowrap;
  text-decoration:none;
  border-bottom:2px solid rgb(var(--ink-rgb) / .35);
  padding-bottom:.06em;
}
.tel-xl:hover{color:var(--ink);border-bottom-color:var(--ink)}
.band-note{max-width:30em;margin-top:var(--s4)}
.band-note:last-child{margin-bottom:0}
/* Fussnote unter der Preistabelle: klein, wie die uebrigen Anmerkungen der Seite. */
.sec .hours+.band-note{font-size:.9375rem;line-height:1.5;color:var(--body);margin-top:var(--s3)}

/* ---------- Tabellen ------------------------------------------------------ */

.hours{
  width:100%;max-width:26rem;border-collapse:collapse;
  font:400 1.0625rem/1.5 var(--f-ui);
  font-variant-numeric:tabular-nums;
  margin:0 0 var(--s3);
}
.hours caption{
  text-align:left;
  font:600 1rem/1.4 var(--f-serif);
  font-variant-caps:small-caps;letter-spacing:.06em;
  color:var(--ink);padding-bottom:var(--s2);
}
.hours th{text-align:start;font-weight:400;color:var(--ink);padding-block:var(--s2);vertical-align:top}
.hours td{text-align:end;padding-block:var(--s2);vertical-align:top;white-space:nowrap}
.hours tr+tr th,.hours tr+tr td{border-top:1px solid var(--rule)}

/* ---------- Ruled list: ersetzt jede Karte und jedes Icon-Raster ---------- */

.rl{list-style:none;margin:0 0 var(--s3);padding:0;max-width:52rem}
.rl>li{
  display:grid;grid-template-columns:var(--s6) 1fr;column-gap:var(--s4);
  padding-block:var(--s3);border-bottom:1px solid var(--rule);margin:0;max-width:none;
}
.rl>li:first-child{border-top:1px solid var(--rule)}
.rl-num{
  font-family:var(--f-serif);font-weight:600;
  font-size:1rem;line-height:1.5;letter-spacing:.04em;
  font-variant-numeric:lining-nums tabular-nums;
  color:var(--body);
}
.rl h3{margin:0 0 var(--s1);font-family:var(--f-serif);font-weight:600;
  font-size:1.5rem;line-height:1.3;letter-spacing:-.006em}
.rl p{margin:0;font-size:1.0625rem;line-height:1.5;color:var(--body);max-width:38em}


/* ---------- Aufmacher ----------------------------------------------------- *
   Seit die Fotos von 2013 von der Seite sind, traegt der Satz den Einstieg.
   Deshalb eine eigene, groessere Stufe ueber h1 und eine Linie als Abschluss.  */

/* Gemessen bei 1512x790, dem Fenster des Kunden: mit s8/s7 war der Aufmacher
   969 px hoch und passte nicht auf den Bildschirm. Beim ersten Scrollen rutschte
   die Ueberschrift unter die klebende Kopfzeile und wurde mittendurch geschnitten.
   Mit s6 und ohne die Kennzahlenzeile bleibt er darunter. */
.sec--auftakt{padding-block:var(--s5) var(--s4);border-bottom:1px solid var(--rule)}
.sec--zahlen{padding-block:var(--s5) var(--s7)}
.sec--auftakt h1{font-size:clamp(2.5rem,1.754rem + 3.182vw,4.3rem);margin-bottom:var(--s4)}
.sec--auftakt .lead{font-size:clamp(1.25rem,1.146rem + .446vw,1.5rem);max-width:32em}
.sec--auftakt>.wrap>.label{margin-bottom:var(--s4)}
.auftakt>*{max-width:52rem}
.auftakt>.kennzahlen{max-width:none}
.auftakt>.label{margin-bottom:var(--s4)}
.auftakt>p:last-child,.auftakt .pull{margin-bottom:0}

/* Vier Angaben aus den Antworten des Arztes. Sie stehen dort, wo bisher ein
   Aufmacherfoto stand, und sagen mehr, als das Foto gesagt hat. */
.kennzahlen{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:0 var(--s4);
  border-top:1px solid var(--ink);
}
.kennzahlen li{margin:0;max-width:none;padding-top:var(--s3)}
.kz-w{
  display:block;font-family:var(--f-serif);font-weight:400;
  font-size:1.875rem;line-height:1.1;letter-spacing:-.014em;color:var(--ink);
  font-variant-numeric:lining-nums tabular-nums;
}
.kz-k{display:block;margin-top:var(--s1);font-size:1rem;line-height:1.4;color:var(--body)}

/* ---------- Koerperkarte -------------------------------------------------- *
   Eigene Zeichnung: Umriss, darin die Gelenkachsen, darauf sechs nummerierte
   Marken. Die Marken sind Verweise in die Beschwerdenseite.
   Anfassbar ohne JavaScript: wer eine Marke beruehrt, sieht die zugehoerige
   Zeile aufleuchten, und wer eine Zeile beruehrt, sieht die Marke aufleuchten.
   Das traegt :has(), unterstuetzt seit 2023 in allen laufenden Browsern; faellt
   es aus, bleibt die Karte vollstaendig benutzbar, nur ohne die Verbindung.     */

.karte{display:grid;grid-template-columns:16rem 1fr;gap:var(--s7);align-items:start}
.karte-bild{position:sticky;top:7rem}
.kk{display:block;width:100%;max-width:14rem;height:auto;margin-inline:auto}
/* Die Deckkraft sitzt auf der Gruppe, nicht auf den Formen. Sonst dunkeln sich
   Arm und Rumpf dort ab, wo sie einander ueberlappen. */
.kk-koerper{fill:var(--ink);stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round;opacity:.15}
.kk-achse{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.45}
.kk-gelenk{fill:var(--flaeche);stroke:var(--ink);stroke-width:1.5;opacity:.6}
.kk-marke circle{fill:var(--orange);stroke:var(--ink);stroke-width:1.5;
  transition:fill var(--t),r var(--t)}
.kk-marke a{text-decoration:none}
.kk-marke a:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.kk-marke text{
  fill:var(--ink);font:600 12px var(--f-serif);letter-spacing:.03em;
  font-variant-numeric:lining-nums tabular-nums;text-anchor:middle;
  transition:fill var(--t);
}

/* Die Nummer neben der Zeile wird zur Scheibe, damit sie dieselbe Form hat wie
   die Marke auf der Figur. Nur in der Koerperkarte, nicht in den uebrigen Listen. */
.karte .rl-num{
  display:grid;place-items:center;width:var(--s4);height:var(--s4);
  border:1px solid var(--ink);border-radius:50%;
  background:var(--orange);color:var(--ink);
  font-size:.9375rem;line-height:1;
  transition:background-color var(--t),color var(--t);
}

/* Marke beruehrt -> Zeile leuchtet. */
.karte:has(.kk-marke [href$="#r-sport"]:is(:hover,:focus-visible)) [data-r="sport"] .rl-num,
.karte:has(.kk-marke [href$="#r-schulter"]:is(:hover,:focus-visible)) [data-r="schulter"] .rl-num,
.karte:has(.kk-marke [href$="#r-wirbelsaeule"]:is(:hover,:focus-visible)) [data-r="wirbelsaeule"] .rl-num,
.karte:has(.kk-marke [href$="#r-hand"]:is(:hover,:focus-visible)) [data-r="hand"] .rl-num,
.karte:has(.kk-marke [href$="#r-huefte"]:is(:hover,:focus-visible)) [data-r="huefte"] .rl-num,
.karte:has(.kk-marke [href$="#r-knie"]:is(:hover,:focus-visible)) [data-r="knie"] .rl-num,
.karte:has(.kk-marke [href$="#r-fuss"]:is(:hover,:focus-visible)) [data-r="fuss"] .rl-num,
.karte .rl>li:is(:hover,:focus-within,:target) .rl-num{background:var(--ink);color:var(--paper)}

/* Zeile beruehrt -> Marke leuchtet. */
.karte:has([data-r="schulter"]:is(:hover,:focus-within,:target)) .kk-marke [href$="#r-schulter"] circle,
.karte:has([data-r="wirbelsaeule"]:is(:hover,:focus-within,:target)) .kk-marke [href$="#r-wirbelsaeule"] circle,
.karte:has([data-r="hand"]:is(:hover,:focus-within,:target)) .kk-marke [href$="#r-hand"] circle,
.karte:has([data-r="huefte"]:is(:hover,:focus-within,:target)) .kk-marke [href$="#r-huefte"] circle,
.karte:has([data-r="knie"]:is(:hover,:focus-within,:target)) .kk-marke [href$="#r-knie"] circle,
.karte:has([data-r="fuss"]:is(:hover,:focus-within,:target)) .kk-marke [href$="#r-fuss"] circle,
.karte:has([data-r="sport"]:is(:hover,:focus-within,:target)) .kk-marke [href$="#r-sport"] circle,
.kk-marke a:is(:hover,:focus-visible) circle{fill:var(--ink);r:13}

/* Der siebte Punkt meint den ganzen Koerper, nicht ein Gelenk. */
.karte:has([data-r="sport"]:is(:hover,:focus-within,:target)) .kk-koerper,
.karte:has(.kk-marke [href$="#r-sport"]:is(:hover,:focus-visible)) .kk-koerper{opacity:.34}
.kk-koerper{transition:opacity var(--t)}

.karte:has([data-r="schulter"]:is(:hover,:focus-within,:target)) .kk-marke [href$="#r-schulter"] text,
.karte:has([data-r="wirbelsaeule"]:is(:hover,:focus-within,:target)) .kk-marke [href$="#r-wirbelsaeule"] text,
.karte:has([data-r="hand"]:is(:hover,:focus-within,:target)) .kk-marke [href$="#r-hand"] text,
.karte:has([data-r="huefte"]:is(:hover,:focus-within,:target)) .kk-marke [href$="#r-huefte"] text,
.karte:has([data-r="knie"]:is(:hover,:focus-within,:target)) .kk-marke [href$="#r-knie"] text,
.karte:has([data-r="fuss"]:is(:hover,:focus-within,:target)) .kk-marke [href$="#r-fuss"] text,
.karte:has([data-r="sport"]:is(:hover,:focus-within,:target)) .kk-marke [href$="#r-sport"] text,
.kk-marke a:is(:hover,:focus-visible) text{fill:var(--paper)}

/* Der aufklappende Text. Ein Klick auf einen Punkt der Figur oder auf die
   Ueberschrift setzt :target auf die Zeile, und nur dann erscheint der Absatz.
   Kein JavaScript, die Adresse bleibt teilbar, der Zurueck-Knopf funktioniert. */
.karte .mehr{display:none}
.karte .rl>li:target .mehr{display:block;margin-top:var(--s3)}
.karte .rl>li{margin-inline:calc(var(--s2) * -1);padding-inline:var(--s2);
  scroll-margin-top:calc(var(--s7) + 6rem)}
.karte .rl>li:target{background:rgb(var(--ink-rgb) / .045)}
.karte .rl>li:target>div>h3 a{text-decoration-thickness:.14em}
.karte .mehr p{margin:0 0 var(--s2);font-size:1.0625rem;line-height:1.5;max-width:38em}
.karte .mehr p:last-child{margin-bottom:0}
/* Zurueckhaltend: Haarlinie darueber, kleiner Satz, keine Rahmen. Steht in jedem
   Aufklapptext, sichtbar ist aber immer nur der eine, der gerade offen ist. */
.karte .mehr-ruf{
  display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);
  margin-top:var(--s3);padding-top:var(--s2);
  border-top:1px solid var(--rule);
  font-size:1rem;line-height:1.5;
}
.karte .rl h3 a{color:var(--ink);text-decoration-color:var(--rule)}
.karte .rl h3 a:hover{text-decoration-color:var(--ink)}

/* ---------- Bild --------------------------------------------------------- */

.fig{margin:0;max-width:26rem}
.fig img{background:var(--sand)}
.fig figcaption{
  margin-top:var(--s2);
  font:400 .9375rem/1.45 var(--f-ui);letter-spacing:.004em;
  color:var(--body);max-width:32em;
}
/* Das Aufmacherbild stand bisher frei auf dem Papier, und weil der Hintergrund
   der Aufnahme eine leere Wand ist, wirkte die ganze Spalte leer. Es sitzt jetzt
   in einem Sandfeld, das die Bildunterschrift mittraegt: das Bild bekommt eine
   Kante, und aus zwei losen Elementen wird ein Block. */
.sec--auftakt .split>.fig{max-width:none;margin-inline-start:auto}
.fig--held{background:var(--sand);border:1px solid var(--rule)}
.fig--held img{background:none}
.fig--held figcaption{
  margin:0;padding:var(--s3) var(--s4) var(--s4);max-width:none;
  font-size:1rem;line-height:1.5;
}
.fig--held figcaption b{
  display:block;margin-bottom:var(--s1);
  font-family:var(--f-serif);font-weight:400;font-size:1.375rem;
  line-height:1.2;letter-spacing:-.012em;color:var(--ink);
}
.fig--pers{max-width:10rem}
.fig--pers img{aspect-ratio:1300/1400;object-fit:cover}

/* Die Karte ist eine eigene Datei auf unserem Server, kein Fremdrahmen von Google.
   Der Besucher sieht den Pin, sein Browser spricht dabei nur mit uns. Herkunft der
   Kacheln und die Begruendung stehen in src/karte.py. */
.fig--karte{max-width:none;margin-top:var(--s5)}
.fig--karte>a{display:block;border:1px solid var(--rule)}
/* Der Aussenverweis-Hinweis steht im Text darunter, unter dem Bild saehe er aus
   wie eine verrutschte Bildunterschrift. */
/* Der Klick aufs Bild fuehrt zu Google. Das steht im Satz darunter, deshalb
   hier keine zweite Kennzeichnung direkt unter dem Bild. */
.fig--karte>a[target]::after{content:none}
.fig--karte img{aspect-ratio:1400/760;object-fit:cover}
.fig--karte figcaption{max-width:52em}

/* ---------- Handlungsverweise -------------------------------------------- *
   Kartendienste werden verlinkt, nicht eingebettet. Ein eingebetteter Rahmen
   von Google uebertraegt die IP-Adresse des Besuchers, bevor er irgendetwas
   angeklickt hat. Fuer eine Arztpraxis in Deutschland ist das dieselbe Lage wie
   bei den Google-Schriften (LG Muenchen I, 20.01.2022, 3 O 17493/20), und die
   eigene Content-Security-Policy laesst Fremdrahmen ohnehin nicht zu.          */

.aktionen{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s4) 0 var(--s5);max-width:none}
.aktionen:last-child{margin-bottom:0}
.aktion{
  display:inline-block;padding:var(--s2) var(--s3);
  font:500 1.0625rem/1.4 var(--f-ui);
  color:var(--ink);text-decoration:none;
  border:1px solid var(--ink);border-radius:2px;
  transition:background-color var(--t),color var(--t);
}
.aktion:hover{background:var(--ink);color:var(--paper)}
/* Die erste Handlung der Seite: online buchen. Gefuellt statt nur umrandet. */
.aktion--erst{background:var(--ink);color:var(--paper)}
.aktion--erst:hover{background:var(--petrol);border-color:var(--petrol);color:var(--paper)}
.aktion--erst::after,.aktion--erst:hover::after{color:var(--paper)}
/* In der orangen Bande traegt Tinte auf Orange, gefuellt waere zu laut. */
.band .aktion--hell{background:none;border-color:var(--ink);color:var(--ink)}
.band .aktion--hell:hover{background:var(--ink);color:var(--orange)}
.band .aktion--hell:hover::after{color:var(--orange)}
.band .band-note:has(.aktion){margin-top:var(--s3)}
.aktion:hover::after{color:var(--paper)}

/* ---------- Kartenrahmen -------------------------------------------------- *
   Nur auf karte.html. Ein iframe laedt, sobald er im Dokument steht, auch wenn
   CSS ihn verbirgt. Eine Zwei-Klick-Loesung ohne JavaScript geht deshalb nur
   ueber eine eigene Seite: der Aufruf der Seite IST die Einwilligung.          */

.rahmen{border:1px solid var(--rule);margin-bottom:var(--s5);line-height:0}
.rahmen iframe{display:block;width:100%;height:min(70vh,38rem);border:0}

.hinweis-klein{font-size:.9375rem;line-height:1.5;color:var(--body);max-width:44em;margin:0}

/* ---------- Rufzeile im Aufmacher ---------------------------------------- */

.ruf{margin-top:var(--s4);border-top:1px solid var(--ink);padding-top:var(--s3)}
.ruf .aktionen{margin-top:var(--s2);margin-bottom:0}
.ruf>p:last-child{margin-top:var(--s2)}
.ruf .tel-xl{font-size:clamp(1.75rem,1.402rem + 1.429vw,2.5rem)}
.ruf p{margin:var(--s3) 0 0;font-size:1.0625rem;max-width:32em}

/* ---------- Leistungsmarken ---------------------------------------------- *
   Elf gezeichnete Marken, dieselbe Strichsprache wie die Koerperkarte: eine
   Strichstaerke, keine Flaechen ausser dem einen orangen Akzent je Marke.      */

/* Auf der Leistungsseite traegt die erste Spalte Marke und Nummer uebereinander. */
.rl-marke{display:block}
.rl-marke .rl-num{display:block;margin-top:var(--s1);text-align:center;width:2.75rem}
.marke{display:block;width:2.75rem;height:2.75rem;
  fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.marke .akzent{stroke:var(--orange)}
.marke .akzent-f{fill:var(--orange);stroke:var(--ink)}

/* ---------- Sprachen ------------------------------------------------------ */

.sprachen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0 var(--s6)}
.sprachen li{
  margin:0;max-width:none;padding-block:var(--s3);border-bottom:1px solid var(--rule);
  font-family:var(--f-serif);font-weight:400;
  font-size:1.75rem;line-height:1.2;letter-spacing:-.012em;color:var(--ink);
}
.sprachen li:nth-child(-n+4){border-top:1px solid var(--rule)}

/* Wer hier anruft, soll verstanden werden. Deshalb stehen im selben Abschnitt
   die Sprachen und die Gesichter, die sie sprechen. */
/* Gelb markiert: Angabe fehlt noch und muss vor dem Livegang eingetragen werden. */
mark{background:#ffe9a8;color:var(--ink);padding:.1em .35em;border-radius:4px}

.team-reihe{list-style:none;margin:var(--s6) 0 var(--s4);padding:0;
  display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s4)}
.team-reihe li{margin:0;max-width:none}
.team-reihe .fig--pers{max-width:none}
.team-reihe .nm{display:block;margin-top:var(--s2);
  font-family:var(--f-serif);font-size:1.125rem;line-height:1.3;
  letter-spacing:-.008em;color:var(--ink);hyphens:none}
.team-reihe .fn{display:block;font-size:.9375rem;line-height:1.4;color:var(--body)}

/* ---------- Team ---------------------------------------------------------- */

.leute{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 var(--s7)}
.leute>li{display:grid;grid-template-columns:10rem 1fr;column-gap:var(--s4);
  margin:0;max-width:none;padding-block:var(--s4);border-bottom:1px solid var(--rule)}
.leute>li:first-child{grid-column:1/-1;border-top:1px solid var(--rule)}
.leute>li:last-child:nth-child(even){grid-column:1/-1}
.leute h3{margin:0 0 var(--s1);font-weight:400;font-size:1.625rem}
.leute p{margin:0 0 var(--s2);font-size:1.0625rem;max-width:30em}
.leute p:last-child{margin-bottom:0}
.leute .fn{font-family:var(--f-serif);color:var(--ink)}

/* ---------- Anfahrt: Linien und Wegskizze --------------------------------- *
   Die Halte sind Kreise, weil eine Wegskizze Kreise hat. Einzige Ausnahme von
   der 2px-Regel, und sie betrifft eine Zeichnung, kein Bedienelement.         */

.linien{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2);margin:0 0 var(--s6);padding:0}
.linien li{
  margin:0;max-width:none;padding:var(--s1) var(--s2);
  font-family:var(--f-serif);font-weight:600;font-size:1.125rem;line-height:1.3;
  font-variant-numeric:lining-nums tabular-nums;color:var(--ink);
  border:1px solid var(--ink);border-radius:2px;
}

.weg{list-style:none;margin:0;padding:0;counter-reset:halt;max-width:44rem}
.weg>li{position:relative;margin:0;max-width:none;counter-increment:halt;padding:0 0 var(--s5);padding-inline-start:var(--s6)}
.weg>li::before{
  content:counter(halt);
  position:absolute;inset-inline-start:0;top:.1em;width:var(--s4);height:var(--s4);
  background:var(--flaeche);border:1px solid var(--ink);border-radius:50%;
  font:600 .9375rem/calc(var(--s4) - 2px) var(--f-serif);
  font-variant-numeric:lining-nums tabular-nums;
  text-align:center;color:var(--ink);
}
.weg>li::after{
  content:"";position:absolute;inset-inline-start:calc(var(--s4) / 2 - .5px);
  top:calc(var(--s4) + .1em);bottom:0;width:1px;background:var(--ink);
}
.weg>li:last-child{padding-bottom:0}
.weg>li:last-child::after{content:none}
.weg>li:last-child::before{background:var(--orange)}
.weg h3{margin:0 0 var(--s1);font-size:1.25rem;font-weight:600}
.weg p{margin:0;font-size:1.0625rem;line-height:1.5;color:var(--body);max-width:36em}

/* ---------- Werdegang ----------------------------------------------------- */

dl.cv{display:grid;grid-template-columns:5.5rem 1fr;margin:0 0 var(--s4)}
dl.cv dt{
  font-family:var(--f-serif);font-weight:400;
  font-size:1.0625rem;line-height:1.5;
  font-variant-numeric:lining-nums tabular-nums;
  color:var(--body);padding:var(--s3) var(--s4) var(--s3) 0;border-bottom:1px solid var(--rule);
}
dl.cv dd{margin:0;padding-block:var(--s3);border-bottom:1px solid var(--rule);max-width:34em}
dl.cv dd b{display:block;color:var(--ink);font-weight:600}

/* ---------- Zitat --------------------------------------------------------- */

/* Der senkrechte Balken links ist raus. Waagerecht statt senkrecht: eine kurze
   Linie in der Hausfarbe ueber dem Block. Dasselbe Motiv steht ueber jeder
   Abschnittsrubrik, damit die Seiten zusammengehoeren.                         */

.pull{
  margin:var(--s5) 0;
  font-family:var(--f-serif);font-weight:400;
  font-size:1.375rem;line-height:1.4;letter-spacing:-.006em;
  color:var(--ink);max-width:30em;
}
.pull p{margin:0;max-width:none}
.pull::before{
  content:"";display:block;width:2.25rem;height:3px;
  background:var(--orange);margin-bottom:var(--s3);
}

/* ---------- Hinweiskasten ------------------------------------------------ */

/* Hinweiskasten: Sandfeld mit oranger Oberkante statt des frueheren senkrechten
   Balkens. Dasselbe Motiv wie ueber Rubrik und Zitat, hier nur mit Flaeche. */
.hinweis{
  margin-bottom:var(--s5);max-width:38em;
  background:var(--sand);border-top:3px solid var(--orange);
  padding:var(--s3) var(--s4) var(--s4);
}
.hinweis p:last-child{margin-bottom:0}

/* ---------- Anfahrt / Adressdaten ---------------------------------------- */

dl.wege{display:grid;grid-template-columns:auto 1fr;margin:0 0 var(--s3)}
dl.wege dt{
  font-family:var(--f-serif);font-variant-caps:small-caps;letter-spacing:.05em;
  font-size:1rem;line-height:1.75;font-weight:600;color:var(--ink);
  padding:var(--s3) var(--s4) var(--s3) 0;border-bottom:1px solid var(--rule);
}
dl.wege dd{margin:0;padding-block:var(--s3);border-bottom:1px solid var(--rule);max-width:34em}
dl.wege dt:first-of-type,dl.wege dt:first-of-type+dd{border-top:1px solid var(--rule)}

/* ---------- Fusszeile ----------------------------------------------------- */

.ftr{background:var(--sand);border-top:2px solid var(--ink);padding-block:var(--s8)}
.ftr-in{display:grid;grid-template-columns:auto 1fr 1fr auto;gap:var(--s5)}
.ftr .label{margin-bottom:var(--s2)}
.ftr p{margin:0 0 var(--s3);font-size:1.0625rem}
.ftr-brand img{width:96px;max-width:96px;height:auto;margin-bottom:var(--s2)}
.ftr-wort{font-family:var(--f-serif);font-size:1.0625rem;line-height:1.3;color:var(--ink);margin:0}
.ftr-wort b{font-weight:600;font-size:1.25rem;letter-spacing:-.01em}
.ftr-wort span{font-family:var(--f-ui);font-size:.9375rem;line-height:1.4;color:var(--body)}
.ftr-nav{list-style:none;margin:0;padding:0;font-size:1.0625rem}
.ftr-nav li{margin:0 0 var(--s1)}
.ftr-bot{border-top:1px solid var(--rule);margin-top:var(--s6);padding-top:var(--s4);display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
.ftr-bot p{margin:0;font-size:.9375rem}
.notfall{margin:0 0 var(--s3);font-size:1.0625rem}
.notfall b{color:var(--ink)}

/* ---------- Kopfzeile enger, bevor sie umbricht -------------------------- */

@media(max-width:70rem){
  .hdr-in{gap:var(--s3)}
  .nav{gap:var(--s3)}
  .nav a{font-size:.9375rem}
}

/* ---------- Navigation klappt zusammen, sobald die Leiste nicht mehr passt --
   Gemessen: die Leiste traegt bis 1060 px, darunter bricht sie um.          */

@media(max-width:66rem){
  /* Navigation ohne JavaScript */
  .nav{display:none}
  .nav-m{display:block;width:100%;border-top:1px solid var(--rule)}
  .nav-m summary{
    display:flex;justify-content:space-between;align-items:center;
    font:500 1.0625rem/1.5 var(--f-ui);color:var(--ink);
    padding-block:var(--s2);cursor:pointer;list-style:none;
  }
  .nav-m summary::-webkit-details-marker{display:none}
  .nav-m summary::after{content:"+";content:"+" / "";font-family:var(--f-serif);font-size:1.5rem;line-height:1}
  .nav-m details[open] summary::after{content:"–";content:"–" / ""}
  .nav-m a{
    display:block;font:500 1.0625rem/1.5 var(--f-ui);color:var(--ink);
    text-decoration:none;padding-block:var(--s3);border-top:1px solid var(--rule);
  }
  .nav-m a[aria-current]{color:var(--petrol)}
  .hdr-in{min-height:0;padding-top:var(--s2)}
  .brand img{height:36px}
  .brand-tx span{font-size:1.125rem}
}

/* ---------- Bruchstelle 60rem -------------------------------------------- */

@media(max-width:59.99rem){
  .leute{grid-template-columns:1fr}
  .split,.split.split--rev,.band-in{grid-template-columns:1fr;gap:var(--s5)}
  .karte{grid-template-columns:1fr;gap:var(--s6)}
  .karte .rl>li{scroll-margin-top:55vh}
  .karte-bild{position:static}
  .kk{max-width:15rem}
  .kennzahlen{grid-template-columns:repeat(2,1fr);gap:0 var(--s4)}
  .kennzahlen li:nth-child(n+3){border-top:1px solid var(--rule);margin-top:var(--s3)}
  .sprachen{grid-template-columns:repeat(2,1fr)}
  .team-reihe{grid-template-columns:repeat(3,1fr)}
  .sprachen li:nth-child(3),.sprachen li:nth-child(4){border-top:none}
  .ftr-in{grid-template-columns:1fr 1fr}
}

/* ---------- Bruchstelle 48rem -------------------------------------------- */

@media(max-width:47.99rem){
  dl.wege dt:first-of-type+dd{border-top:0}
  .wrap,.wrap-narrow{width:min(100% - 2.5rem,var(--wrap))}
  .brand .b1{display:none}          /* Bildmarke und Name reichen, die Zeile spart 20px Klebehoehe */
  .brand img{height:32px}
  .hdr-tel{font-size:1.125rem}
  h1{line-height:1.14}
  h3{font-size:1.25rem}
  .lead{font-size:1.1875rem}
  .sec,.band,.ftr{padding-block:var(--s6)}
  .ftr-in{grid-template-columns:1fr}
  .rl>li{grid-template-columns:1fr;row-gap:var(--s1)}
  .kz-w{font-size:1.625rem}
  .kz-k{font-size:.9375rem}
  .kk{max-width:10rem}
  .sprachen,.leute{grid-template-columns:1fr}
  .team-reihe{grid-template-columns:repeat(2,1fr);gap:var(--s3)}
  .leute>li{grid-template-columns:7rem 1fr;column-gap:var(--s3)}
  .fig--pers{max-width:7rem}
  .sprachen li{font-size:1.5rem}
  .sprachen li:nth-child(-n+4){border-top:none}
  .sprachen li:first-child{border-top:1px solid var(--rule)}
  .leute>li:first-child{grid-column:auto}
  dl.cv,dl.wege{grid-template-columns:1fr;column-gap:0}
  dl.cv dt,dl.wege dt{border-bottom:0;padding:var(--s3) 0 0}
  dl.cv dt:empty{display:none}
  dl.cv dd,dl.wege dd{padding-top:var(--s1)}
}

@media (forced-colors:active){
  .band,.sec--sand{border-block:1px solid CanvasText}
  .nav a[aria-current],.tel-xl{border-bottom-color:LinkText}
  .hours tr+tr th,.hours tr+tr td,.rl>li,.kennzahlen,.kennzahlen li,.sprachen li,
  .leute>li,dl.cv dt,dl.cv dd,dl.wege dt,dl.wege dd{border-color:CanvasText}
  .kk-koerper{fill:CanvasText;stroke:CanvasText;opacity:.35}
  .kk-achse{stroke:CanvasText;opacity:1}
  .kk-gelenk{fill:Canvas;stroke:CanvasText;opacity:1}
  .kk-marke circle{fill:Canvas;stroke:CanvasText}
  .kk-marke text{fill:CanvasText}
  .marke{stroke:CanvasText}
  .marke .akzent{stroke:CanvasText}
  .marke .akzent-f{fill:Canvas;stroke:CanvasText}
  .rl-marke .rl-num,.weg>li::before{background:Canvas;color:CanvasText;border-color:CanvasText}
}
@media (prefers-contrast:more){:root{--rule:rgb(var(--ink-rgb) / .55)}}

/* ---------- Druck --------------------------------------------------------- */

@media print{
  /* Palette einmal umdefinieren, danach greift das Blatt unveraendert. Ohne --rule:#000
     verschwinden die Haarlinien der Sprechzeitentabelle im Ausdruck bei 18 Prozent Deckkraft. */
  :root{--paper:#fff;--sand:#fff;--orange:#fff;--petrol:#000;--ink:#000;--body:#000;--rule:#000}
  .hdr,.nav-m,.skip{display:none!important}
  body{font-size:10.5pt;line-height:1.35}
  h1{font-size:19pt;line-height:1.15}
  h2{font-size:14pt;line-height:1.2}
  h3{font-size:11.5pt;line-height:1.3}
  .lead{font-size:12pt}
  p,li{orphans:3;widows:3}
  h2,h3{break-after:avoid-page}
  .hours,.wege,figure,dl.cv{break-inside:avoid}
  .band{border:1px solid var(--ink);padding:12pt}
  a{text-decoration:none}
  main a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt}
}

/* ---------- Nachtraege aus der Fehlersuche vom 25.09.2026 ----------------- */
/* Farids Eintrag auf der Teamseite: auf sehr schmalen Telefonen Foto ueber dem
   Text, sonst bleibt fuer die Qualifikationen eine 147 px schmale Spalte. */
@media(max-width:29.99rem){.leute>li:first-child{grid-template-columns:1fr;row-gap:var(--s3)}}
.leute>li:first-child .fn{max-width:40em}
/* Kontakt: Abstand zwischen Kartenhinweis und den Linienkaestchen */
.hinweis-klein+.linien{margin-top:var(--s5)}
/* Bei 320 px passt die Telefonnummer sonst nicht neben die Marke, die klebende
   Kopfzeile wuerde 169 statt 123 px hoch und verdeckte den Tastaturfokus. */
@media(max-width:22.5rem){.hdr-in{column-gap:var(--s2)}}
/* Kein Umbruch an harten Bindestrichen wie in E-Mail oder op-zentren */
.nw{white-space:nowrap}
/* Fokusrahmen von Punkt 07 der Koerperkarte nicht abschneiden */
.kk{overflow:visible}

/* ---------- Sprachen (28.09.2026) ------------------------------------------ */
/* Leiste ueber der Kopfzeile. Nicht klebend: die Kopfzeile mit der Telefonnummer
   bleibt das Einzige, was beim Scrollen stehen bleibt. */
.sprachwahl{background:var(--sand);border-bottom:1px solid var(--rule)}
.sprachwahl ul{list-style:none;margin-block:0;padding-block:0;
  display:flex;flex-wrap:wrap;justify-content:flex-end;column-gap:var(--s3)}
.sprachwahl li{margin:0;max-width:none}
.sprachwahl a{display:inline-block;padding-block:.5rem;
  font:500 .9375rem/1.4 var(--f-ui);color:var(--ink);text-decoration:none}
.sprachwahl a:hover{text-decoration:underline}
.sprachwahl a[aria-current]{color:var(--petrol);font-weight:600;
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.3em}
@media print{.sprachwahl{display:none}}

/* Tuerkisch hat seit dem 28.09.2026 beide Originalschriften. Instrument Sans gibt es nicht
   in Kyrillisch; Russisch setzt Ueberschriften in Source Serif 4 und den Fliesstext ganz in
   einer Systemschrift, damit lateinische Namen und kyrillischer Text nicht gemischt aussehen. */
:root:lang(ru){
  --f-ui:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
/* Arabische Schrift: jedes Betriebssystem bringt eine mit (Segoe UI und Tahoma unter
   Windows, Geeza Pro unter iOS und macOS, Noto unter Android). Kein fremder Server. */
:root:lang(fa),:root:lang(ps),:root:lang(ur){
  --f-serif:"Segoe UI",Tahoma,"Geeza Pro","Noto Naskh Arabic","Noto Sans Arabic",sans-serif;
  --f-ui:"Segoe UI",Tahoma,"Geeza Pro","Noto Sans Arabic","Noto Naskh Arabic",sans-serif;
}
/* Sperrung zerreisst die verbundene Schrift, Kapitaelchen gibt es nicht, und Ober- und
   Unterlaengen brauchen mehr Zeilenabstand. */
[dir="rtl"] *{letter-spacing:0!important;font-variant-caps:normal!important}
[dir="rtl"] body{line-height:1.8}
[dir="rtl"] h1{line-height:1.35}
[dir="rtl"] h2{line-height:1.45}
[dir="rtl"] h3,[dir="rtl"] .kz-w,[dir="rtl"] .rl h3{line-height:1.55}
[dir="rtl"] .lead,[dir="rtl"] .pull p{line-height:1.85}
[dir="rtl"] .label{font-weight:700}

/* SPRACHEN-START (von build.py geschrieben) */
:where(:lang(en)) main a[target="_blank"]::after{content:" [external]"}
:where(:lang(tr)) main a[target="_blank"]::after{content:" [harici]"}
:where(:lang(zza)) main a[target="_blank"]::after{content:" [teberî]"}
:where(:lang(fa)) main a[target="_blank"]::after{content:" [بیرونی]"}
:where(:lang(ps)) main a[target="_blank"]::after{content:" [بهرنۍ پاڼه]"}
:where(:lang(ru)) main a[target="_blank"]::after{content:" [внешняя ссылка]"}
:where(:lang(ur)) main a[target="_blank"]::after{content:" [بیرونی]"}
/* SPRACHEN-ENDE */