/* ============================================================
   Gemeinsames Stylesheet aller Seiten dieser Website
   ------------------------------------------------------------
   Bis August 2026 stand alles in index.html. Seit die MBST-Seite
   und die Studienübersicht eigene Adressen haben, teilen sich
   drei HTML-Dateien dieses Stylesheet — geändert wird also nur
   noch hier, nicht mehr an drei Stellen.

   Die Schriftdateien werden relativ zu DIESER Datei geladen
   (fonts/…), sie liegen daher im selben Verzeichnis wie das
   Stylesheet. Das gilt auch bei Adressen wie
   /mbst-therapie-deggendorf, die kein echtes Verzeichnis sind.
   ============================================================ */

/* Schriften vom eigenen Server (SIL Open Font License) — kein Nachladen von Google-Servern, keine IP-Uebermittlung an Dritte.
   Liegen als eigene Dateien im Ordner fonts/ und muessen mit hochgeladen werden. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/fraunces-400-700.woff2) format('woff2');}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400 700;font-display:swap;src:url(fonts/fraunces-400-700-italic.woff2) format('woff2');}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/publicsans-400-700.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibmplexmono-400.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibmplexmono-500.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibmplexmono-600.woff2) format('woff2');}

/* ============================================================
   DR. MED. JOACHIM OVERBECK · CHIRURGIE DEGGENDORF
   Design: "Resonanz & Präzision"
   Porzellan-Flächen, tiefes Tannen-Petrol, feine Goldlinien —
   und ein lebendiges Leitmotiv: der Resonanz-Puls der MBST.
   ============================================================ */

:root{
  --ovb-ref:"OVB-5AA1C6";
  color-scheme:light;               /* helle Palette gegen Android/Chrome Auto-Dark schützen */
  --porcelain:#F5F3EB;
  --porcelain-2:#ECE8D9;
  --card:#FBF9F1;
  --pine:#0E2B2E;
  --pine-2:#143B3E;
  --ink-soft:#42585A;
  --gold:#B18A4A;
  --gold-deep:#7E5F2C;              /* 4.8:1 auch auf --porcelain-2: erst damit erreichen die Eyebrows AA */
  --gold-soft:rgba(177,138,74,.12);
  --res:#4FA79A;
  --res-deep:#2E6E64;
  --res-soft:rgba(79,167,154,.14);
  --bone:#FBF9F1;
  --line:#DAD4C0;
  --line-ink:rgba(251,249,241,.16);
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Public Sans',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --container:1180px;
  /* Die Kopfleiste darf etwas breiter laufen als der Lesetext: Logo, fünf
     Menuepunkte, Sprach- und Schriftgroessenregler und die Telefonnummer
     brauchen zusammen rund 1210px. Auf 1180px gequetscht brachen die
     Menuepunkte zweizeilig um. Unterhalb von etwa 1240px Fensterbreite
     reicht auch das nicht mehr — dort uebernimmt der Burger-Knopf
     (siehe .nav-compact). */
  --container-head:1320px;
  --radius:10px;
  --radius-lg:18px;
  --shadow-soft:0 1px 2px rgba(14,43,46,.05),0 6px 16px -6px rgba(14,43,46,.10),0 18px 40px -18px rgba(14,43,46,.16);
  --shadow-lift:0 2px 4px rgba(14,43,46,.06),0 12px 28px -10px rgba(14,43,46,.14),0 34px 64px -22px rgba(14,43,46,.30);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.19,1,.22,1);
}
*,*::before,*::after{box-sizing:border-box;}
html{
  scroll-behavior:smooth;
  overflow-x:hidden;              /* iOS: body allein reicht nicht */
  -webkit-text-size-adjust:100%;  /* iOS: kein Auto-Zoom der Schrift */
}
[id]{scroll-margin-top:calc(var(--header-h,78px) + 26px);}
body{
  margin:0;
  position:relative;
  width:100%;
  -webkit-tap-highlight-color:rgba(79,167,154,.18);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"),
    var(--porcelain);
  color:var(--pine);
  font-family:var(--font-body);
  font-size:1.03125rem; /* 16.5px bei Normalgröße — rem, damit der Schriftgrößen-Regler greift */
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* Waagerecht abschneiden, damit auf Mobilgeraeten nichts seitlich herausragt.
     hidden würde den Body zu einem eigenen Scroll-Container machen — dann
     verliert position:sticky (Inhaltsverzeichnis der Rechts- und MBST-Seiten)
     seinen Bezugspunkt und scrollt einfach mit weg. clip schneidet genauso ab,
     erzeugt aber keinen Scroll-Container. hidden bleibt als Rückfalloption
     für ältere Browser davor stehen. */
  overflow-x:hidden;
  overflow-x:clip;
  /* Notbremse für überlange Wörter — vererbt sich auf alles, auch auf
     div/span/a, die in der Regel unten nicht aufgezählt sind. break-word
     (nicht anywhere) verändert die min-content-Breite nicht, das Layout
     bleibt also identisch. */
  overflow-wrap:break-word;
}
img,svg{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:600;margin:0 0 .6em;line-height:1.08;letter-spacing:-.02em;}
/* Sicherheitsnetz: lange Fachbegriffe (z. B. MBST-KernspinResonanzTherapie)
   dürfen nie aus Karten, Tabellen oder Buttons herauslaufen */
h1,h2,h3,h4,h5,p,li,dd,dt,td,th,summary,strong,figcaption,address,
.legal-note,.mbst-note{
  overflow-wrap:break-word;
  -webkit-hyphens:auto;hyphens:auto;
}
h1,h2{-webkit-hyphens:manual;hyphens:manual;}
/* Wörter, die nie mit Trennstrich zerlegt werden sollen (z. B. „Privatpatienten“) */
.no-hyphen{-webkit-hyphens:none;hyphens:none;}
h2{font-size:clamp(2.05rem,3.8vw,3.05rem);}
h2 em,h1 em{
  font-style:italic;font-weight:500;color:var(--gold-deep);
  background:linear-gradient(115deg,var(--gold-deep) 20%,var(--gold) 40%,#D8B878 50%,var(--gold) 60%,var(--gold-deep) 80%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:goldSheen 7s linear infinite;
}
@keyframes goldSheen{
  from{background-position:0% 0;}
  to{background-position:220% 0;}
}
p{margin:0 0 1em;}
ul,ol{margin:0;padding:0;}
dl,dd{margin:0;}
.container{max-width:var(--container);margin:0 auto;padding-left:max(1.75rem,env(safe-area-inset-left));padding-right:max(1.75rem,env(safe-area-inset-right));}
::selection{background:var(--res);color:var(--pine);}
html{scrollbar-width:thin;scrollbar-color:var(--pine) var(--porcelain-2);}
::-webkit-scrollbar{width:11px;}
::-webkit-scrollbar-track{background:var(--porcelain-2);}
::-webkit-scrollbar-thumb{background:var(--pine);border-radius:99px;border:3px solid var(--porcelain-2);}
::-webkit-scrollbar-thumb:hover{background:var(--pine-2);}

/* ---------- utilities ---------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:.8rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-deep);
  font-weight:600;
  margin-bottom:1.1rem;
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  /* inline-flex schrumpft nicht unter die min-content-Breite seines Textes:
     „Ausführliche Patienteninformation“ blies die Zeile im dunklen Seitenkopf
     bei 320 px auf 313 px auf (24 px über den Rand, von overflow-x:hidden
     unsichtbar gekappt). max-width deckelt, wrap lässt den Text unter den
     Zierstrich rutschen, anywhere ist die Notbremse für Einzelwörter —
     break-word würde hier nicht genügen, es senkt die min-content-Breite nicht. */
  max-width:100%;
  flex-wrap:wrap;
  overflow-wrap:anywhere;
}
.eyebrow::before{
  content:"";
  width:0;height:1px;
  background:currentColor;
  transition:width 1s var(--ease) .15s;
}
.in-view .eyebrow::before,
.eyebrow.in-view::before,
body.is-loaded .hero .eyebrow::before{width:2.2rem;}
/* Etwas heller als --res: auf dem hellen Ende des Verlaufs (--pine-2) kam das
   Türkis nur auf 4.25:1, bei 12,8 px sind 4.5:1 gefordert. Jetzt 4.73:1 dort
   und 5.81:1 auf --pine — optisch praktisch derselbe Ton. */
.eyebrow.on-ink{color:#58B0A3;}
.subhead{font-family:var(--font-body);font-weight:700;font-size:.98rem;color:var(--pine);margin:2.2rem 0 .8rem;letter-spacing:.02em;}
.mbst-section .subhead{color:var(--bone);}
section{padding:clamp(4.5rem,9vw,8.5rem) 0;position:relative;}
.icon{width:1em;height:1em;display:block;}
.icon svg{width:100%;height:100%;}

/* ---------- buttons ---------- */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  /* Die Beschriftung ist ein anonymes Flex-Item (min-width:auto) und der Knopf hat
     overflow:hidden für den Glanz-Effekt — ohne Trennmöglichkeit wurde „Sprechstunden“
     bei A+ im schmalen CTA-Kasten der MBST-Seite abgeschnitten statt umzubrechen.
     Gleiche Behandlung wie bei .legal-body h2: erst sauber trennen, anywhere als Notbremse. */
  -webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere;
  font-family:var(--font-mono);
  font-size:.88rem;
  font-weight:500;
  letter-spacing:.03em;
  text-decoration:none;
  padding:.95rem 1.85rem;
  border-radius:99px;
  border:1px solid var(--pine);
  overflow:hidden;
  isolation:isolate;
  cursor:pointer;
  transition:color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
}
.btn::before{
  content:"";
  position:absolute;inset:0;
  background:var(--gold);
  transform:translateX(-101%);
  transition:transform .45s var(--ease-out);
  z-index:-1;
}
.btn:hover::before,.btn:focus-visible::before{transform:translateX(0);}
.btn::after{
  content:"";position:absolute;top:-4px;bottom:-4px;left:-45%;width:34%;
  background:linear-gradient(105deg,transparent,rgba(251,249,241,.6),transparent);
  transform:skewX(-20deg);opacity:0;z-index:-1;pointer-events:none;
}
.btn:hover::after{animation:btnShine .9s var(--ease-out) .12s;}
@keyframes btnShine{
  0%{left:-45%;opacity:0;}
  18%{opacity:1;}
  100%{left:118%;opacity:0;}
}
.btn .arr{transition:transform .35s var(--ease-out);}
.btn:hover .arr{transform:translateX(4px);}
.btn-primary{background:var(--pine);color:var(--bone);}
.btn-primary:hover{color:var(--pine);border-color:var(--gold);transform:translateY(-2px);box-shadow:var(--shadow-soft);}
.btn-ghost{background:transparent;color:var(--pine);}
.btn-ghost:hover{color:var(--pine);border-color:var(--gold);transform:translateY(-2px);}
.btn-on-ink{border-color:var(--line-ink);color:var(--bone);background:transparent;}
.btn-on-ink::before{background:var(--res);}
.btn-on-ink:hover{color:var(--pine);border-color:var(--res);transform:translateY(-2px);}
.btn-gold{background:var(--gold);border-color:var(--gold);color:var(--pine);}
.btn-gold::before{background:var(--bone);}
.btn-gold:hover{color:var(--pine);transform:translateY(-2px);box-shadow:var(--shadow-soft);}

:focus-visible{outline:3px solid var(--gold-deep);outline-offset:3px;border-radius:2px;}
.skip-link{
  position:absolute;left:-999px;top:0;z-index:200;
  background:var(--pine);color:var(--bone);
  padding:.8rem 1.2rem;font-family:var(--font-mono);font-size:.85rem;
}
.skip-link:focus-visible{left:1rem;top:1rem;}

/* ---------- reveal system ---------- */
.reveal{
  opacity:0;
  transform:translateY(34px);
  filter:blur(10px);
  transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);
  transition-delay:var(--d,0ms);
}
.reveal[data-reveal="left"]{transform:translateX(-40px);}
.reveal[data-reveal="right"]{transform:translateX(40px);}
.reveal[data-reveal="zoom"]{transform:scale(.92);}
.reveal[data-reveal="fade"]{transform:none;}
.reveal.in-view{opacity:1;transform:none;filter:none;}
[data-stagger]>*{
  opacity:0;transform:translateY(28px);filter:blur(8px);
  transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease);
}
[data-stagger].in-view>*{opacity:1;transform:none;filter:none;}

/* ---------- scroll progress ---------- */
.scroll-progress{
  position:fixed;top:var(--vac-h,0px);left:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--gold),var(--res));
  box-shadow:0 0 10px rgba(79,167,154,.55),0 0 3px rgba(177,138,74,.5);
  z-index:120;
  transition:opacity .3s;
}

/* ---------- header ---------- */
.site-header{
  position:fixed;top:var(--vac-h,0px);left:0;right:0;z-index:100;
  transform:translateY(-110%);
  transition:transform .8s var(--ease-out),background .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;
  background:transparent;
}
body.is-loaded .site-header{transform:translateY(0);}
.site-header.nav-open{
  transform:none!important;          /* sonst wird .nav-links am Header
                                        statt am Bildschirm ausgerichtet */
  /* Und der Übergang muss dabei aus sein. Der Header blendet seinen
     transform über 0,8 s ein; solange der Übergang läuft, steht dort
     nicht "none", sondern eine Matrix — und schon ein Einheits-Transform
     macht den Header zum Bezugsrahmen für position:fixed. Das Menü war
     dann auf die Höhe der Kopfleiste zusammengequetscht (74 statt 820 px),
     bis der Übergang durch war. Trat nur auf, wenn beim Klick noch ein
     Übergang lief — also nach dem Scrollen. */
  transition:none!important;
  background:transparent!important;
  -webkit-backdrop-filter:none!important;
          backdrop-filter:none!important;
  box-shadow:none!important;
  border-bottom-color:transparent!important;
}
.site-header.is-scrolled{
  background:transparent;
  border-bottom-color:transparent;
}
/* Kopfleiste in festen Pixeln statt rem: Der Regler A−/A+ vergrößert die
   Schrift über die Grundgröße der Seite (rem). Wuchsen Logo, Knöpfe und
   Telefonnummer mit, verschob sich A+ bei jedem Klick (bei 1440 px um 80 px
   nach links und 4 px nach unten) — der Mauszeiger stand dann daneben.
   Mitwachsen dürfen nur die Kapitel-Links; ihre Abstände schrumpfen dafür
   (siehe „A−/A+ in der Kopfleiste“ weiter unten). Die Pixelwerte sind die
   bisherigen rem-Werte × 16, bei Normalgröße sieht alles aus wie vorher. */
.nav-wrap{
  max-width:var(--container-head);margin:0 auto;
  padding:13.6px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  border:1px solid transparent;border-radius:99px;
  transition:padding .45s var(--ease),margin .45s var(--ease),width .45s var(--ease),
             background .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);
}
.is-scrolled .nav-wrap{
  margin-top:10.4px;
  width:min(calc(100% - 28.8px),calc(var(--container-head) - 64px));
  padding:8.8px 17.6px 8.8px 19.2px;
  background:rgba(245,243,235,.72);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
          backdrop-filter:blur(16px) saturate(1.5);
  border-color:var(--line);
  box-shadow:0 10px 34px -16px rgba(14,43,46,.30);
}
.nav-open .nav-wrap{background:transparent!important;border-color:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;}
body.is-loaded .site-header.is-hidden{transform:translateY(-110%);}
.logo{display:flex;align-items:center;gap:13.6px;text-decoration:none;z-index:110;}
.logo-mark{width:46px;height:46px;flex-shrink:0;transition:width .4s var(--ease),height .4s var(--ease),transform .5s var(--ease);}
.is-scrolled .logo-mark{width:40px;height:40px;}
.logo:hover .logo-mark{transform:rotate(-4deg);}
.logo-mark .lr{transform-origin:32px 32px;opacity:.75;}
.logo-mark .lr-2{opacity:.45;}
.logo-mark .lr-3{opacity:.22;}
.logo-mark .logo-echo{
  fill:none;stroke:var(--res);stroke-width:1.2;
  transform-origin:32px 32px;
  animation:logoEcho 4.5s var(--ease) infinite;
}
.logo-letters{font-family:var(--font-display);font-weight:600;font-size:15px;fill:var(--bone);letter-spacing:.5px;}
.logo-text{font-family:var(--font-display);font-weight:600;font-size:16.96px;line-height:1.1;color:var(--pine);display:flex;flex-direction:column;}
.logo-text small{font-family:var(--font-mono);font-weight:500;font-size:10.24px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:4.8px;}
/* Der Abstand zwischen den Menuepunkten atmet mit der Fensterbreite: auf
   1280px waeren feste 1.9rem zu viel, die Leiste lief dann ueber und die
   Beschriftungen brachen zweizeilig um. */
.nav-links{display:flex;gap:clamp(16px,1.4vw,25.6px);list-style:none;}
.nav-links a{
  position:relative;
  text-decoration:none;font-size:.9rem;font-weight:500;color:var(--pine);
  padding:4.8px 0;
  /* Menuepunkte nie umbrechen oder trennen — „Leistun-gen“ mitten im Wort
     war der auffaelligste Fehler der Leiste. Passt die Zeile trotzdem nicht
     (grosse Schrift, englische Beschriftungen), schaltet das Skript weiter
     unten auf das Menue mit Burger-Knopf um: siehe .nav-compact. */
  white-space:nowrap;-webkit-hyphens:none;hyphens:none;
  transition:color .3s var(--ease);
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--gold);
  transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease-out);
}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1);transform-origin:left;}
.nav-links a.active{color:var(--gold-deep);}
.nav-cta{display:flex;align-items:center;gap:12.8px;z-index:110;}
.nav-phone{
  font-family:var(--font-mono);font-size:13.76px;font-weight:600;text-decoration:none;
  padding:8.8px 16.8px;border:1px solid var(--pine);border-radius:99px;
  display:inline-flex;align-items:center;gap:8px;
  transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
.nav-phone::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--res);animation:dotPulse 2.4s ease infinite;}
.nav-phone:hover{background:var(--pine);color:var(--bone);transform:translateY(-1px);}
/* Nummer als 2909 3308 gegliedert: fester Abstand statt Leerzeichen, weil ein
   schmales Leerzeichen in der Mono-Schrift je nach Browser volle Zellenbreite bekommt.
   Ein normales Leerzeichen ist hier .6em breit, der Blockabstand soll etwas kleiner sein. */
.nav-phone .nr-gap{margin-left:.4em;}

/* ---------- Schriftgrößen-Regler (A− / A+) ---------- */
.font-size-ctl{
  display:inline-flex;align-items:stretch;
  border:1px solid var(--pine);border-radius:99px;overflow:hidden;
}
.font-size-ctl button{
  font-family:var(--font-mono);font-size:13.12px;font-weight:600;letter-spacing:.02em;
  background:transparent;border:none;color:var(--pine);
  padding:8px 12px;min-width:44px;cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease),opacity .3s;
}
.font-size-ctl button+button{border-left:1px solid var(--line);}
.font-size-ctl button:hover{background:var(--pine);color:var(--bone);}
.font-size-ctl button:disabled{opacity:.35;cursor:default;}
.font-size-ctl button:disabled:hover{background:transparent;color:var(--pine);}
.nav-open .font-size-ctl{border-color:rgba(251,249,241,.45);}
.nav-open .font-size-ctl button{color:var(--bone);}
.nav-open .font-size-ctl button+button{border-left-color:rgba(251,249,241,.3);}
.nav-open .font-size-ctl button:hover{background:rgba(251,249,241,.12);color:var(--bone);}

/* ---------- Sprachumschaltung (DE / EN) ---------- */
.lang-ctl{
  display:inline-flex;align-items:stretch;
  border:1px solid var(--pine);border-radius:99px;overflow:hidden;
}
.lang-ctl button{
  font-family:var(--font-mono);font-size:13.12px;font-weight:600;letter-spacing:.02em;
  background:transparent;border:none;color:var(--pine);
  padding:8px 12px;min-width:44px;cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease),opacity .3s;
}
.lang-ctl button+button{border-left:1px solid var(--line);}
.lang-ctl button:hover{background:var(--pine);color:var(--bone);}
.lang-ctl button.is-active{background:var(--pine);color:var(--bone);cursor:default;}
.nav-open .lang-ctl{border-color:rgba(251,249,241,.45);}
.nav-open .lang-ctl button{color:var(--bone);}
.nav-open .lang-ctl button+button{border-left-color:rgba(251,249,241,.3);}
.nav-open .lang-ctl button:hover{background:rgba(251,249,241,.12);color:var(--bone);}
.nav-open .lang-ctl button.is-active{background:rgba(251,249,241,.22);color:var(--bone);}

/* Segmented-Control-Feinschliff (DE/EN & A−/A+): aktive und Hover-Markierung
   liegen als eigene, rundum gleich abgesetzte Kapsel im Rahmen — dadurch sitzt
   der Text (z. B. „EN“) exakt mittig in der farbigen Fläche, statt durch die
   runde äußere Pillenkante nach innen verschoben zu wirken. */
.lang-ctl,.font-size-ctl{padding:3px;gap:2px;overflow:visible;}
.lang-ctl button,.font-size-ctl button{
  border-radius:99px;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;
  /* Untergrenze der Trefffläche. Die Polsterung schrumpft weiter unten auf
     schmalen Displays — ohne diese Zeile fällt der Knopf dort unter 24px
     (WCAG 2.2, 2.5.8) und ist mit dem Daumen kaum zu treffen. */
  min-height:36px;
}
.lang-ctl button+button,.font-size-ctl button+button,
.nav-open .lang-ctl button+button,.nav-open .font-size-ctl button+button{border-left:none;}

/* Hinweis für englischsprachige Besucher auf den (deutschen) Rechtsseiten —
   sichtbar nur, wenn die Seite auf Englisch geschaltet ist */
.lang-note-en{display:none;}
html[lang="en"] .lang-note-en{
  display:block;
  margin:1.1rem 0 0;
  padding:.85rem 1.1rem;
  background:var(--gold-soft);
  border:1px solid rgba(177,138,74,.35);
  border-radius:var(--radius);
  font-size:.92rem;
  line-height:1.55;
}
html[lang="en"] .site-footer .lang-note-en{
  background:rgba(251,249,241,.07);
  border-color:rgba(251,249,241,.22);
  color:rgba(251,249,241,.85);
  margin-bottom:1.4rem;
}
.nav-toggle{
  display:none;
  width:44px;height:44px;border:1px solid var(--pine);border-radius:var(--radius);
  background:transparent;cursor:pointer;position:relative;
}
.nav-toggle span,.nav-toggle::before,.nav-toggle::after{
  content:"";position:absolute;left:11px;right:11px;height:2px;background:var(--pine);
  transition:transform .4s var(--ease),opacity .3s,top .4s var(--ease),background .3s;
}
.nav-toggle::before{top:15px;}
.nav-toggle span{top:21px;}
.nav-toggle::after{top:27px;}
.nav-open .nav-toggle::before{top:21px;transform:rotate(45deg);}
.nav-open .nav-toggle span{opacity:0;}
.nav-open .nav-toggle::after{top:21px;transform:rotate(-45deg);}

/* ---------- announce ---------- */
.announce{
  margin:calc(var(--header-h,78px) + .9rem) auto 0;
  width:fit-content;
  /* Nie breiter als der Inhalt darunter: 100% bezieht sich auf den Body, nicht
     auf den .container — ohne das min() lief die Pille auf großen Bildschirmen
     bis 24px an den Rand, während Überschrift und Fließtext erst bei ~158px
     beginnen. Sie stand damit als einziges Element außerhalb des Seitenrasters. */
  max-width:min(calc(100% - 3rem),var(--container));
  background:rgba(251,249,241,.8);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid var(--line);
  /* Bewusst KEINE 99px-Pille: der wirksame Radius ist immer die halbe Höhe,
     und sobald der Hinweis umbricht (auf dem iPhone 5–6 Zeilen), zieht die
     runde Kante genau dort herein, wo die erste und die letzte Zeile stehen —
     auf Englisch blieb 1px zwischen Text und Kante. --radius-lg ist zugleich
     der Wert der übrigen Karten, die Form bleibt also markentreu. */
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  padding:.7rem 1.4rem;
  text-align:center;
  font-family:var(--font-mono);
  font-size:.84rem;
  letter-spacing:.02em;
  color:var(--pine);
  opacity:0;transform:translateY(-8px);
  transition:opacity .8s var(--ease) .5s,transform .8s var(--ease) .5s;
}
body.is-loaded .announce{opacity:1;transform:none;}
.announce b{color:var(--gold-deep);font-weight:600;}
.announce a{color:var(--gold-deep);text-underline-offset:3px;}

/* ---------- Urlaubs-/Schliessungsband (Laufschrift ganz oben) ----------
   Liegt als eigene feste Leiste über dem Header; der Header und der
   Lesefortschritt rücken um --vac-h nach unten (siehe .site-header).
   --vac-h und --header-h setzt measureHeader() im Hauptskript, das Band
   entfernt sich nach dem Zeitfenster selbst — siehe #vacBar am Seitenanfang. */
.vac-bar{
  position:fixed;top:0;left:0;right:0;z-index:130;
  overflow:hidden;
  background:linear-gradient(100deg,var(--pine),var(--pine-2) 60%,var(--pine));
  border-bottom:1px solid rgba(177,138,74,.45);
  color:var(--bone);
  /* Bewusst so groß wie die Jahreszahl „1996–2026“ in der Karte „Meine
     Praxis auf einen Blick“ (1.5rem): der Hinweis muss auch mit Lesebrille
     aus zwei Metern lesbar sein.
     Hier ausnahmsweise NICHT die Schreibmaschinenschrift der übrigen
     Hinweise: bei gleicher Buchstabenhöhe stehen auf einem iPhone 32 statt
     25 Zeichen gleichzeitig im Bild (gemessen bei 375px Fensterbreite).
     Bei Laufschrift zählt genau das — je weniger Bildausschnitte, desto
     weniger muss sich der Lesende merken. */
  font-family:var(--font-body);font-weight:500;
  font-size:1.5rem;letter-spacing:0;line-height:1.35;
  padding:.6rem 0;
  padding-top:max(.5rem,env(safe-area-inset-top));
  --vac-dur:34s;
}
.vac-track{
  display:flex;width:max-content;
  will-change:transform;
  animation:vacScroll var(--vac-dur) linear infinite;
}
/* Vier gleich breite Wiederholungen: der Sprung um genau ein Viertel der
   Spurbreite fällt deshalb mit dem Ende der ersten Wiederholung zusammen —
   die Schrift läuft ohne sichtbare Naht durch. Vier statt zwei, damit auch
   auf sehr breiten Bildschirmen nie eine Lücke entsteht. */
.vac-item{white-space:nowrap;}
.vac-item::after{
  content:"\00B7";display:inline-block;padding:0 3.2rem;color:var(--gold);
}
.vac-item b{color:var(--gold);font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
@keyframes vacScroll{from{transform:translateX(0);}to{transform:translateX(-25%);}}
/* Zum Mitlesen anhalten — Zeiger daraufhalten oder mit der Tastatur anwählen. */
.vac-bar:hover .vac-track,
.vac-bar:focus-within .vac-track{animation-play-state:paused;}

/* Auf dem iPhone bleibt die Schrifthöhe gleich — nur die Abstände zwischen
   den Wiederholungen rücken zusammen, damit keine leere Fläche durchläuft. */
@media (max-width:560px){
  .vac-bar{padding:.55rem 0;}
  .vac-item::after{padding:0 2rem;}
}

/* Wer Bewegung abbestellt hat, bekommt denselben Satz ruhig und zentriert. */
@media (prefers-reduced-motion: reduce){
  .vac-bar{padding-left:1.2rem;padding-right:1.2rem;}
  .vac-track{animation:none;display:block;width:auto;text-align:center;}
  .vac-item{display:block;white-space:normal;}
  .vac-item::after{display:none;}
  .vac-item ~ .vac-item{display:none;}
}

/* ---------- hero ---------- */
.hero{
  padding:clamp(4rem,8vw,7rem) 0 clamp(3.5rem,6vw,5.5rem);
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(900px 480px at 88% -10%,rgba(79,167,154,.20),transparent 65%),
    radial-gradient(700px 420px at -8% 108%,rgba(177,138,74,.15),transparent 60%),
    var(--porcelain);
}
.hero::before{ /* feines Papier-Raster */
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(14,43,46,.10) .8px,transparent .9px);
  background-size:26px 26px;
  opacity:.35;
  -webkit-mask-image:radial-gradient(720px 480px at 20% 20%,#000,transparent 75%);
          mask-image:radial-gradient(720px 480px at 20% 20%,#000,transparent 75%);
}
.hero::after{ /* Aurora: langsam treibende Farbwolken */
  content:"";position:absolute;inset:-18%;pointer-events:none;z-index:0;
  background:
    radial-gradient(38% 30% at 78% 24%,rgba(79,167,154,.34),transparent 70%),
    radial-gradient(32% 26% at 14% 78%,rgba(177,138,74,.26),transparent 70%);
  filter:blur(58px);
  opacity:.75;
  animation:auroraDrift 17s ease-in-out infinite alternate;
}
.hero .container{position:relative;z-index:1;}
@keyframes auroraDrift{
  from{transform:translate3d(-2.5%,-2%,0) rotate(-1.5deg) scale(1);}
  to{transform:translate3d(3%,2.5%,0) rotate(1.5deg) scale(1.07);}
}
.hero-rings{
  position:absolute;top:50%;right:-190px;width:640px;height:640px;
  transform:translateY(-52%);
  pointer-events:none;
}
.hero-rings circle{
  fill:none;stroke:var(--res);stroke-width:1.1;
  transform-origin:200px 200px;
  animation:ringPulse 8s var(--ease) infinite;
  opacity:0;
}
.hero-rings circle:nth-child(2){animation-delay:2s;}
.hero-rings circle:nth-child(3){animation-delay:4s;}
.hero-rings circle:nth-child(4){animation-delay:6s;}
.hero-rings .static{animation:none;opacity:.18;stroke:var(--gold);}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(320px,.9fr);
  gap:clamp(2.5rem,5vw,4.5rem);
  align-items:center;
  position:relative;
}
/* Grid-Items haben default min-width:auto und können dadurch nicht unter ihre
   Inhaltsbreite schrumpfen — die Praxis-Karte hat den einspaltigen Hero auf
   schmalen Geräten sonst über den Rand geschoben (vgl. .dp-grid weiter unten) */
.hero-grid>*{min-width:0;}
/* Sicherheitsnetz wie in der Regel oben, dort sind <span> nicht erfasst:
   „MBST-KernspinResonanzTherapie“ darf die Karte nicht sprengen */
/* anywhere statt break-word: nur anywhere senkt auch die min-content-Breite,
   auf die das Raster die Spalte aufzieht (englisch „accident-insurance
   physician (D-Arzt)“ bei größter Schrift). */
.hero-fact span{overflow-wrap:anywhere;}
/* … und dasselbe für die Spuren selbst: bei vergrößerter Schrift (A+) wuchs die
   Textspalte der Fakten-Zeilen auf ihre min-content-Breite und schob die
   Praxis-Karte bis zu 74 px über den Rand. */
.hero-fact>*{min-width:0;}
/* Die Wörter der Hero-Überschrift stehen für die Einblend-Animation in
   inline-block-<span>. Die schrumpfen nie unter min-content, und
   overflow-wrap:break-word ändert daran nichts — bei größter Schrift ragte
   „Deggendorf.“ (306 px) 48 px aus der Spalte. anywhere senkt die
   min-content-Breite; die &shy; im Markup sorgen dafür, dass zuerst an
   sinnvollen Stellen mit Trennstrich getrennt wird. */
.hero h1 .w{overflow-wrap:anywhere;}
.hero h1{
  font-size:clamp(2.9rem,6vw,5.1rem);
  font-weight:600;
  letter-spacing:-.03em;
  margin:.2em 0 .45em;
  max-width:14ch;
}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em;}
.hero h1 .w>span{display:inline-block;transform:translateY(115%) rotate(5deg);transform-origin:0 100%;filter:blur(6px);transition:transform 1.05s var(--ease-out),filter 1.05s var(--ease-out);transition-delay:var(--d,0ms);}
body.is-loaded .hero h1 .w>span{transform:translateY(0) rotate(0deg);filter:none;}
.hero [data-hero]{
  opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
  transition-delay:var(--d,0ms);
}
body.is-loaded .hero [data-hero]{opacity:1;transform:none;}
.hero-sub{
  font-family:var(--font-mono);font-size:.9rem;letter-spacing:.05em;
  color:var(--ink-soft);margin-bottom:1.2rem;
}
.hero-lede{font-size:1.08rem;color:var(--ink-soft);max-width:56ch;margin-bottom:2rem;}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;}

.hero-card{
  background:linear-gradient(175deg,var(--card),var(--bone) 55%,rgba(79,167,154,.05));
  border:1px solid var(--line);
  border-top:3px solid var(--gold);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lift);
  padding:2rem 2rem 1.5rem;
  position:relative;
  animation:floatSlow 9s ease-in-out infinite;
  will-change:transform;
}
.hero-card.is-tilting{animation:none;transition:transform .18s ease-out,box-shadow .4s var(--ease);}
.hero-card.tilt-reset{animation:none;transition:transform .6s var(--ease);transform:none;}
.hero-card::after{
  content:"";position:absolute;inset:9px;border:1px solid rgba(177,138,74,.22);
  border-radius:calc(var(--radius-lg) - 7px);pointer-events:none;
}
.hero-card-head{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);display:flex;justify-content:space-between;align-items:center;
  padding-bottom:1rem;border-bottom:1px solid var(--line);margin-bottom:.4rem;
}
.open-status{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-mono);font-size:.78rem;font-weight:600;letter-spacing:.02em;
  color:var(--ink-soft);margin:0;
}
.open-status .dot{width:9px;height:9px;border-radius:50%;background:var(--ink-soft);flex-shrink:0;position:relative;}
.open-status.is-open{color:var(--res-deep);}
.open-status.is-open .dot{background:var(--res);}
.open-status.is-open .dot::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1.5px solid var(--res);opacity:0;
  animation:statusPing 2.2s ease-out infinite;
}
.hero-fact{
  display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:baseline;
  padding:1.05rem 0;
  border-bottom:1px dashed var(--line);
}
.hero-fact:last-of-type{border-bottom:none;}
/* Die Jahreszahl steht in der auto-Spalte und schrumpft nicht: „1996–2026“ ist
   bei den oberen Schriftstufen auf 320-px-Geräten 164 px breit und ließ dem Text
   daneben 14 px — ein Buchstabe je Zeile. Dann lieber untereinander.
   (data-fs setzt applyFontSize(); Media Queries sehen die Vergrößerung nicht.) */
@media (max-width:430px){
  html[data-fs="2"] .hero-fact,
  html[data-fs="3"] .hero-fact{grid-template-columns:1fr;gap:.15rem;}
}
.hero-fact b{
  font-family:var(--font-display);font-weight:600;font-size:2.15rem;line-height:1;
  color:var(--pine);min-width:3.2ch;font-variant-numeric:tabular-nums;
}
.hero-fact b .plus{color:var(--gold-deep);}
/* Nur der Beschreibungstext (direktes Kind) wird klein gesetzt — nicht die
   Zähler-<span> innerhalb des <b>, sonst schrumpft die animierte „30“. */
.hero-fact>span{font-size:.93rem;color:var(--ink-soft);line-height:1.45;}
.hero-scroll{
  margin-top:clamp(2.5rem,5vw,4rem);
  display:flex;justify-content:center;
}
.hero-scroll a{
  display:inline-flex;flex-direction:column;align-items:center;gap:.4rem;
  text-decoration:none;font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);
}
.hero-scroll .chev{animation:chevDrop 2.2s var(--ease) infinite;color:var(--gold-deep);}

/* ---------- ecg divider ---------- */
.ecg{
  height:90px;margin-top:-1px;
  background:var(--porcelain);
  position:relative;overflow:hidden;
}
.ecg svg{width:100%;height:100%;}
.ecg path{
  fill:none;stroke:var(--gold);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1000;stroke-dashoffset:1000;
  transition:stroke-dashoffset 2.6s ease .1s;
}
.ecg.in-view path{stroke-dashoffset:0;}
.ecg path.pulse{
  stroke:var(--res);stroke-width:2.4;
  stroke-dasharray:34 966;stroke-dashoffset:34;
  opacity:0;transition:none;
  filter:drop-shadow(0 0 6px rgba(79,167,154,.85));
}
.ecg.in-view path.pulse{opacity:1;animation:ecgPulse 3.8s linear 2.9s infinite;}
@keyframes ecgPulse{
  from{stroke-dashoffset:34;}
  to{stroke-dashoffset:-966;}
}
.ecg::after{
  content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;
  border-radius:50%;background:var(--res);opacity:0;
  transition:opacity .5s ease 2.2s;
}
.ecg.in-view::after{opacity:1;animation:dotPulse 2.4s ease 2.4s infinite;}

/* ---------- trust strip ---------- */
.trust-strip{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;
}
.trust-item{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.9rem 1.7rem;position:relative;overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease),background .5s var(--ease);
}
.trust-item:hover{background:linear-gradient(180deg,var(--card) 55%,rgba(79,167,154,.06));}
.trust-item::before{
  content:"";position:absolute;top:0;left:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--gold),var(--res));
  transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease-out);
}
.trust-item:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);border-color:transparent;}
.trust-item:hover::before{transform:scaleX(1);}
.trust-item .glow,.service-card .glow,.indication .glow{
  position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  opacity:0;transition:opacity .5s var(--ease);
  background:radial-gradient(230px circle at var(--mx,50%) var(--my,50%),rgba(79,167,154,.17),transparent 65%);
}
.trust-item:hover .glow,.service-card:hover .glow,.indication:hover .glow{opacity:1;}
.trust-item .icon{
  width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line);color:var(--res-deep);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1.1rem;
  transition:background .4s var(--ease),transform .5s var(--ease-out),border-color .4s;
}
.trust-item .icon svg{width:24px;height:24px;}
.trust-item:hover .icon{background:var(--res-soft);border-color:transparent;transform:rotate(-6deg) scale(1.08);}
.trust-item h3{font-size:1.2rem;margin-bottom:.35rem;}
.trust-item p{margin:0;color:var(--ink-soft);font-size:.96rem;}

/* ---------- about ---------- */
.about-grid{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
  gap:clamp(2.5rem,6vw,5.5rem);align-items:start;
}
.about-copy p{color:var(--ink-soft);}
.about-copy p strong{color:var(--pine);}
.about-visual{position:relative;}
.portrait-frame{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-lift);
}
.portrait-frame::after{
  content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 0 1px rgba(14,43,46,.12);
  border-radius:var(--radius-lg);pointer-events:none;
}
.portrait-frame img{width:100%;height:auto;transition:transform 6s var(--ease);}
.about-visual:hover .portrait-frame img{transform:scale(1.035);}
.portrait-caption{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;
  color:var(--ink-soft);margin:.9rem 0 1.6rem;
}
.stamp{
  position:absolute;top:-42px;right:-18px;width:126px;height:126px;
  filter:drop-shadow(0 10px 24px rgba(14,43,46,.3));
  z-index:2;
}
.stamp .stamp-bg{fill:var(--pine);}
.stamp .stamp-ring{fill:none;stroke:var(--res);stroke-width:1.1;opacity:.8;}
.stamp .stamp-ring2{fill:none;stroke:var(--res);stroke-width:.9;opacity:.4;}
.stamp text{
  /* Der Umfang des Textpfades (r=46) sind rund 289px. Seit „& UNFALLCHIRURGIE“
     mit drin ist, sind es 42 Zeichen — Schrift und Sperrung entsprechend kleiner,
     sonst läuft der Anfang in das Ende. Kontrolle im Browser:
     stampCirc.getTotalLength() gegen text.getComputedTextLength(). */
  font-family:var(--font-mono);font-size:8px;font-weight:500;letter-spacing:1.8px;
  fill:var(--bone);
}
.stamp .rot{transform-origin:60px 60px;animation:spinSlow 28s linear infinite;}
.fact-list{
  list-style:none;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-soft);
}
.fact-list li{
  display:flex;justify-content:space-between;gap:1.5rem;
  padding:.85rem 1rem;border-bottom:1px solid var(--line);
  font-size:.9rem;
  transition:background .3s var(--ease),padding-left .3s var(--ease);
}
.fact-list li:last-child{border-bottom:none;}
.fact-list li:hover{background:var(--gold-soft);padding-left:1.45rem;}
.fact-list li span:first-child{color:var(--ink-soft);font-family:var(--font-mono);font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;padding-top:.15rem;
  /* Beschriftung nie umbrechen — sonst zerfällt „Für die BG“ in drei Zeilen */
  white-space:nowrap;flex-shrink:0;}
.fact-list li span:last-child{font-weight:600;text-align:right;}

/* ---------- services ---------- */
.services-section{
  background:
    radial-gradient(760px 420px at 92% 0%,rgba(79,167,154,.10),transparent 65%),
    radial-gradient(640px 380px at 0% 100%,rgba(177,138,74,.09),transparent 62%),
    var(--porcelain-2);
}
/* Leitsatz unter der Abschnittsüberschrift. Bewusst nicht wie .network-quote
   mit dem großen Zierzeichen — hier steht das Anführungszeichen schon im Text;
   der goldene Balken links ist dieselbe Handschrift wie bei den Hinweiskästen. */
.credo{
  margin:1.6rem 0 0;padding-left:clamp(.9rem,2vw,1.2rem);max-width:48ch;
  border-left:2px solid var(--gold);
}
.credo p{
  font-family:var(--font-display);font-style:italic;font-weight:500;
  font-size:clamp(1.1rem,1.9vw,1.38rem);line-height:1.55;color:var(--pine);margin:0;
}
.credo .credo-by{
  font-family:var(--font-mono);font-style:normal;font-weight:500;
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-deep);margin-top:.55rem;
}
.services-grid{
  /* min() deckelt die Spaltenmindestbreite auf die tatsächlich vorhandene:
     die nackten 270px waren auf 320-px-Geräten mit vergrößerter Schrift
     breiter als die Spalte selbst und schoben die Karten über den Rand. */
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));gap:1.4rem;
}
.service-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:2rem 1.8rem;position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s,background .5s var(--ease);
}
.service-card:hover{background:linear-gradient(180deg,var(--card) 60%,rgba(177,138,74,.05));}
.service-card::before{
  content:"";position:absolute;top:0;left:0;height:3px;width:100%;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease-out);
}
.service-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-lift);border-color:transparent;}
.service-card:hover::before{transform:scaleX(1);}
.card-icon-row{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.3rem;}
.service-card .icon{
  width:48px;height:48px;border-radius:50%;border:1px solid var(--line);
  color:var(--res-deep);display:flex;align-items:center;justify-content:center;
  transition:background .4s,transform .5s var(--ease-out),border-color .4s;
}
.service-card .icon svg{width:25px;height:25px;}
.service-card:hover .icon{background:var(--res-soft);border-color:transparent;transform:rotate(-8deg) scale(1.1);}
.service-card .num{
  font-family:var(--font-display);font-style:italic;font-weight:500;
  font-size:2.4rem;line-height:1;color:var(--line);
  transition:color .5s var(--ease);
}
.service-card:hover .num{color:var(--gold);}
.service-card h3{font-size:1.32rem;margin-bottom:.5rem;}
.service-card p{color:var(--ink-soft);font-size:.95rem;margin-bottom:0;flex:1;}
.service-list{
  list-style:none;
  margin:1rem 0 0;
  padding:0;
  flex:1;
}
.service-list li{
  position:relative;
  padding:.42rem 0 .42rem 1.4rem;
  font-size:.93rem;
  color:var(--ink-soft);
  border-bottom:1px dashed var(--line);
  transition:color .3s var(--ease),padding-left .3s var(--ease);
}
.service-list li:last-child{border-bottom:none;}
.service-list li::before{
  content:"";
  position:absolute;left:0;top:.95em;
  width:6px;height:6px;border-radius:50%;
  background:var(--gold);
  transition:transform .35s var(--ease-out),background .3s;
}
.service-card:hover .service-list li::before{background:var(--res);}
.service-list li:hover{color:var(--pine);padding-left:1.7rem;}
.service-list li:hover::before{transform:scale(1.4);}
.service-list .term{
  display:block;
  font-family:var(--font-mono);
  font-size:.76rem;
  letter-spacing:.02em;
  color:var(--gold-deep);
  opacity:.85;
  margin-top:.1rem;
}
.service-foot{
  margin-top:1.1rem!important;
  padding-top:.9rem;
  border-top:1px solid var(--line);
  font-size:.88rem!important;
  font-style:italic;
  flex:0!important;
}
.service-card a{
  margin-top:1.2rem;font-family:var(--font-mono);font-size:.8rem;font-weight:600;
  color:var(--res-deep);text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;
  min-height:24px;   /* eigenständiger CTA, kein Link im Fließtext — Trefffläche nach WCAG 2.5.8 */
}
.service-card a:hover{text-decoration:underline;text-underline-offset:4px;}

/* ---------- mbst (dark) ---------- */
.mbst-section{
  background:
    radial-gradient(820px 560px at 85% 12%,rgba(79,167,154,.16),transparent 62%),
    linear-gradient(160deg,var(--pine-2),var(--pine) 55%);
  color:var(--bone);
  overflow:hidden;
  border-radius:clamp(22px,3vw,36px);
  margin:clamp(1rem,2.5vw,2rem) clamp(.8rem,2.5vw,2rem);
  box-shadow:var(--shadow-lift),inset 0 1px 0 rgba(251,249,241,.08);
  border:1px solid rgba(79,167,154,.18);
}
.mbst-section::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(251,249,241,.06) .8px,transparent .9px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(900px 620px at 15% 15%,#000,transparent 78%);
          mask-image:radial-gradient(900px 620px at 15% 15%,#000,transparent 78%);
}
.mbst-section h2,.mbst-section h3,.mbst-section h5{color:var(--bone);}
.mbst-section .lede{color:rgba(251,249,241,.9);font-size:1.05rem;max-width:60ch;}
.mbst-section p{color:rgba(251,249,241,.84);}
.resonance-rings{
  position:absolute;top:-140px;right:-160px;width:620px;height:620px;pointer-events:none;
}
.resonance-rings circle{
  fill:none;stroke:var(--res);stroke-width:1;
  transform-origin:200px 200px;opacity:0;
  animation:ringPulse 9s var(--ease) infinite;
}
.resonance-rings .r2{animation-delay:2.25s;}
.resonance-rings .r3{animation-delay:4.5s;}
.resonance-rings .r4{animation-delay:6.75s;}
.mbst-grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2.5rem,6vw,5rem);position:relative;
}
/* wie bei .hero-grid und .dp-grid: sonst schiebt „MBST-KernspinResonanzTherapie“
   die Spalte über den Rand und der Fließtext wird rechts abgeschnitten */
.mbst-grid>*{min-width:0;}
.mini-steps{list-style:none;position:relative;margin-top:.4rem;}
.mini-steps::before{
  content:"";position:absolute;left:19px;top:14px;bottom:14px;width:1px;
  background:linear-gradient(var(--res) 60%,transparent);opacity:.4;
}
.mini-steps li{display:flex;gap:1.2rem;padding:.85rem 0;position:relative;}
/* siehe .mbst-stat-row: ohne min-width:0 wächst die Textspalte auf ihre
   min-content-Breite und schiebt den Schritt aus der Karte */
.mini-steps li>*{min-width:0;}
.step-num{
  width:40px;height:40px;flex-shrink:0;border-radius:50%;
  border:1px solid var(--res);color:var(--res);
  font-family:var(--font-mono);font-size:.8rem;font-weight:600;
  display:flex;align-items:center;justify-content:center;
  background:var(--pine);position:relative;z-index:1;
  transition:background .4s,color .4s,transform .4s var(--ease-out);
}
.mini-steps li:hover .step-num{background:var(--res);color:var(--pine);transform:scale(1.08);}
.mini-steps h5{font-family:var(--font-body);font-weight:700;font-size:.98rem;margin:0 0 .25rem;}
.mini-steps p{margin:0;font-size:.94rem;}
.mbst-note{
  margin-top:2.2rem;padding:1.2rem 1.3rem;
  border:1px dashed rgba(177,138,74,.55);border-radius:var(--radius);
  font-size:.86rem;line-height:1.6;color:rgba(251,249,241,.78);
  background:rgba(177,138,74,.06);
}
.indication-grid{display:grid;gap:.9rem;}
/* Einordnungssatz unter den vier Karten (Herstellerindikationen / eigene Erfahrung) */
.ind-note{margin-top:1rem;font-size:.9rem;line-height:1.6;color:rgba(251,249,241,.78);}
.mbst-section p a{color:var(--res);text-underline-offset:3px;}
/* Wie bei .dp-grid/.hero-grid/.mbst-grid: ohne min-width:0 bekommt die Spur die
   min-content-Breite des längsten Begriffs („Knochenödeme/Durchblutungs­störungen“
   = 272px) und ALLE vier Karten laufen bei 320px 28px über den Rand. Der zweite
   Selektor gilt der Textspalte innerhalb der Flex-Karte — sonst schiebt sie die
   Karte trotzdem auf. Erst dadurch greift das globale overflow-wrap:break-word. */
.indication-grid>*,.indication>*{min-width:0;}
.indication{
  display:flex;gap:1.1rem;align-items:flex-start;
  border:1px solid var(--line-ink);border-radius:var(--radius);
  padding:1.05rem 1.15rem;position:relative;
  transition:transform .45s var(--ease),background .45s,border-color .45s;
}
.indication::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--res);transform:scaleY(0);transform-origin:top;
  transition:transform .45s var(--ease-out);
  border-radius:var(--radius) 0 0 var(--radius);
}
.indication:hover{transform:translateX(7px);background:rgba(79,167,154,.08);border-color:rgba(79,167,154,.4);}
.indication:hover::before{transform:scaleY(1);}
.indication .icon{
  width:42px;height:42px;flex-shrink:0;border-radius:50%;
  border:1px solid var(--line-ink);color:var(--res);
  display:flex;align-items:center;justify-content:center;
  transition:background .4s,transform .45s var(--ease-out);
}
.indication .icon svg{width:22px;height:22px;}
.indication:hover .icon{background:var(--res-soft);transform:rotate(-6deg);}
.indication strong{display:block;font-size:.98rem;margin-bottom:.15rem;color:var(--bone);}
.indication p{margin:0;font-size:.9rem;}
.mbst-highlight{
  margin:1.8rem 0 0;padding:1.6rem 1.6rem 1.2rem;
  border:1px solid rgba(79,167,154,.45);border-radius:var(--radius);
  background:rgba(79,167,154,.08);position:relative;overflow:hidden;
}
.mbst-highlight::after{
  content:"";position:absolute;top:-40px;right:-40px;width:150px;height:150px;
  border:1px solid var(--res);border-radius:50%;opacity:.18;
}
.mbst-stat-row{display:flex;align-items:center;gap:1.2rem;margin-bottom:.8rem;}
/* Flex-Items sind von Haus aus min-width:auto: die Zeile „25 · Jahre Erfahrung
   seit November 2001“ konnte nicht umbrechen und lief bei 320 px 26 px (englisch
   35 px, bei vergrößerter Schrift 46 px) aus der Karte. */
.mbst-stat-row>*{min-width:0;}
/* Die große Zahl selbst darf davon nicht erfasst werden — sie soll ihre
   Breite behalten, umbrechen soll allein das Label daneben. */
.mbst-stat-row .stat-num{flex-shrink:0;}
/* Bei den oberen Schriftstufen belegt die Zahl auf 320-px-Geräten fast die
   ganze Zeile und quetscht das Label auf 47 px. Dann darf es darunter.
   (Wie bei .hero-fact und .hours-table: data-fs kommt aus applyFontSize().) */
@media (max-width:430px){
  html[data-fs="2"] .mbst-stat-row,
  html[data-fs="3"] .mbst-stat-row{flex-wrap:wrap;gap:.2rem 1.2rem;}
}
.stat-num{
  font-family:var(--font-display);font-weight:600;font-size:3.4rem;line-height:1;
  color:var(--res);font-variant-numeric:tabular-nums;
  background:linear-gradient(120deg,var(--res) 25%,rgba(251,249,241,.92));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.mbst-highlight p{margin:0;font-size:.92rem;}
.mbst-faq{display:grid;gap:.7rem;}
.mbst-faq details{
  border:1px solid var(--line-ink);border-radius:var(--radius);
  background:rgba(251,249,241,.03);
  transition:border-color .4s,background .4s;
}
.mbst-faq details[open]{border-color:rgba(79,167,154,.5);background:rgba(79,167,154,.06);}
.mbst-faq summary{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.95rem 1.1rem;
  font-weight:600;font-size:1rem;color:var(--bone);
}
.mbst-faq summary::-webkit-details-marker{display:none;}
.mbst-faq .fx{
  width:22px;height:22px;flex-shrink:0;position:relative;color:var(--res);
  transition:transform .45s var(--ease-out);
}
.mbst-faq details[open] .fx{transform:rotate(135deg);}
.mbst-faq .faq-body{padding:0 1.1rem;overflow:hidden;transition:height .45s var(--ease);}
.mbst-faq .faq-body p{margin:0;padding-bottom:1rem;font-size:.94rem;}
/* Überleitung zur ausführlichen MBST-Seite — liegt über beide Spalten */
.mbst-more{
  grid-column:1/-1;margin-top:clamp(2rem,4vw,3.2rem);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.6rem 2rem;
  padding:1.7rem 1.8rem;border-radius:var(--radius-lg);
  border:1px solid rgba(79,167,154,.35);background:rgba(79,167,154,.07);
  position:relative;overflow:hidden;
}
.mbst-more::after{
  content:"";position:absolute;right:-70px;bottom:-90px;width:220px;height:220px;
  border:1px solid var(--res);border-radius:50%;opacity:.2;pointer-events:none;
}
.mbst-more>*{min-width:0;}
.mbst-more-text{flex:1 1 22rem;position:relative;z-index:1;}
.mbst-more h3{font-size:1.45rem;margin:0 0 .35rem;letter-spacing:-.01em;}
.mbst-more p{margin:0;font-size:.95rem;max-width:52ch;}
.mbst-more .btn{flex:0 0 auto;position:relative;z-index:1;}
/* Unter ~560px steht der Knopf ohnehin unter dem Text: dann über die volle
   Breite und mit umbrechender Beschriftung — sonst ist er als ein Stück
   319px breit und läuft aus der Karte heraus (bei 320px vw abgeschnitten). */
@media (max-width:560px){
  .mbst-more{padding:1.4rem 1.25rem;gap:1.2rem;}
  .mbst-more-text{flex-basis:100%;}
  .mbst-more .btn{width:100%;justify-content:center;text-align:center;padding:.95rem 1.15rem;}
}

/* ---------- network ---------- */
.network-section{position:relative;overflow:hidden;text-align:center;}
.network-rings{
  position:absolute;left:50%;top:50%;width:760px;height:760px;
  transform:translate(-50%,-50%);pointer-events:none;opacity:.5;
}
.network-rings circle{fill:none;stroke:var(--line);stroke-width:1;}
.network-inner{position:relative;max-width:820px;}
.network-stat{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(4.2rem,9vw,6.8rem);line-height:1;color:var(--gold);
  display:block;font-variant-numeric:tabular-nums;
  /* hellste Stelle des Verlaufs bewusst dunkler als --gold — erst damit erreicht
     die große Zahl auf Porzellan die 3:1 für großen Text */
  background:linear-gradient(115deg,var(--gold-deep),#A67F40 55%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.network-head h2{margin-top:.2rem;}
.network-quote{
  font-family:var(--font-display);font-style:italic;font-weight:500;
  font-size:clamp(1.25rem,2.4vw,1.7rem);line-height:1.5;color:var(--pine);
  position:relative;margin:1.6rem 0 1.4rem;
}
.network-quote::before{
  content:"„";position:absolute;top:-1.1em;left:50%;transform:translateX(-50%);
  font-size:6.5rem;line-height:1;color:var(--gold);opacity:.18;font-style:normal;
}
.network-section .support{color:var(--ink-soft);max-width:66ch;margin:0 auto;}

/* ---------- ablauf ---------- */
.ablauf-section{
  background:
    radial-gradient(700px 400px at 8% 0%,rgba(177,138,74,.09),transparent 62%),
    radial-gradient(620px 380px at 100% 100%,rgba(79,167,154,.09),transparent 62%),
    var(--porcelain-2);
}
.process-steps{
  list-style:none;counter-reset:step;
  display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;
  margin-top:2.6rem;position:relative;
}
/* Pflichtzeile für jede Rasterfläche (vgl. .hero-grid, .contact-grid): die
   englischen Schritt-Texte sprengten bei vergrößerter Schrift sonst die Spur. */
.process-steps>li,.process-steps li>*{min-width:0;}
.process-steps::before{
  content:"";position:absolute;top:29px;left:10%;right:10%;height:1px;
  background:repeating-linear-gradient(90deg,var(--gold) 0 7px,transparent 7px 15px);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.6s var(--ease) .3s;
}
.process-steps.in-view::before{transform:scaleX(1);}
.process-steps li{
  position:relative;text-align:center;padding:2rem 1.3rem 1.9rem;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.process-steps li:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);}
.process-steps .step-num{
  width:58px;height:58px;margin:0 auto 1.2rem;
  border:1.5px solid var(--pine);color:var(--pine);
  background:var(--card);font-size:.95rem;
}
.process-steps li:hover .step-num{background:var(--pine);color:var(--bone);transform:scale(1.08);}
.process-steps h3{font-size:1.3rem;margin-bottom:.4rem;}
.process-steps p{color:var(--ink-soft);font-size:.95rem;margin:0;}

/* ---------- contact ---------- */
.contact-grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
  gap:clamp(2.5rem,6vw,5rem);align-items:start;
}
/* Pflichtzeile für jede Rasterfläche (siehe .hero-grid, .mbst-grid, .dp-grid):
   ohne sie behalten die Spalten min-width:auto. Fiel bei normaler Schrift nicht
   auf, bei A+ liefen Sprechstunden- und Über-mich-Block über den Rand. */
.contact-grid>*,.about-grid>*{min-width:0;}
.hours-table{
  width:100%;border-collapse:separate;border-spacing:0;margin:1.4rem 0 1rem;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-soft);
}
.hours-table tr{transition:background .3s var(--ease);}
.hours-table tr:hover{background:var(--gold-soft);}
.hours-table td{padding:.95rem 1.1rem;font-size:.97rem;vertical-align:top;border-bottom:1px solid var(--line);}
.hours-table tr:last-child td{border-bottom:none;}
.hours-table td:first-child{padding-right:.8rem;}
.hours-table td:first-child{color:var(--ink-soft);}
.hours-table td:last-child{text-align:right;font-family:var(--font-mono);font-size:.9rem;font-weight:600;white-space:nowrap;}
.hours-table tr.is-today{background:var(--res-soft);}
.hours-table tr.is-today td:first-child{color:var(--pine);font-weight:600;}
.today-chip{
  display:inline-block;margin-left:.6rem;padding:.1rem .5rem;
  border-radius:99px;background:var(--res);color:var(--pine);
  font-family:var(--font-mono);font-size:.62rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;vertical-align:middle;
}
/* Tag und Uhrzeit passen auf schmalen Geräten nur knapp nebeneinander: die
   Zeitspalte darf nicht umbrechen, links steht „Montag, Dienstag, Donnerstag“.
   Schon das enge Zellenpolster verschafft dort rund 40 px Luft. */
@media (max-width:430px){
  .hours-table td{padding:.8rem .55rem;}
  .hours-table td:first-child{padding-right:.45rem;}
}
/* Bei der größten Schriftstufe (A+) reicht auch das auf 320-px-Geräten nicht
   mehr — die Zeiten wären rechts abgeschnitten, weil body overflow-x:hidden
   trägt. Dann Tag und Zeit untereinander statt beschnitten nebeneinander.
   Die Stufe steht als data-fs am <html>, siehe applyFontSize(). */
@media (max-width:400px){
  html[data-fs="2"] .hours-table td,
  html[data-fs="3"] .hours-table td{display:block;border-bottom:none;padding:.7rem .8rem .1rem;}
  html[data-fs="2"] .hours-table td:last-child,
  html[data-fs="3"] .hours-table td:last-child{text-align:left;padding:0 .8rem .7rem;}
  html[data-fs="2"] .hours-table tr:not(:last-child) td:last-child,
  html[data-fs="3"] .hours-table tr:not(:last-child) td:last-child{
    border-bottom:1px solid var(--line);padding-bottom:.7rem;
  }
}
.hours-note{font-size:.9rem;color:var(--ink-soft);}
/* Hinweis auf den ärztlichen Bereitschaftsdienst für den Fall, dass in der
   Praxis niemand ans Telefon geht — steht direkt unter den Sprechzeiten. */
.oncall-note{
  margin:1.1rem 0 0;padding:1rem 1.15rem;
  border:1px solid var(--line);border-left:3px solid var(--res);
  border-radius:var(--radius);background:var(--res-soft);
  font-size:.92rem;line-height:1.6;color:var(--ink-soft);
  display:flex;flex-direction:column;gap:.2rem;
}
.oncall-note strong{color:var(--pine);font-weight:600;}
.oncall-note a{
  font-family:var(--font-mono);font-weight:600;color:var(--res-deep);
  text-decoration:none;border-bottom:1px solid rgba(79,167,154,.5);
  padding-bottom:1px;white-space:nowrap;
}
.oncall-note a:hover{color:var(--pine);border-bottom-color:var(--res);}
.contact-card{
  background:
    radial-gradient(420px 260px at 100% 0%,rgba(79,167,154,.18),transparent 70%),
    linear-gradient(165deg,var(--pine-2),var(--pine) 60%);
  color:var(--bone);border-radius:var(--radius-lg);
  padding:2.2rem 2.1rem;
  box-shadow:var(--shadow-lift),inset 0 1px 0 rgba(251,249,241,.10);
  border:1px solid rgba(79,167,154,.25);
  position:relative;overflow:hidden;
}
.contact-card::before{
  content:"";position:absolute;top:-70px;right:-70px;width:230px;height:230px;
  border:1px solid var(--res);border-radius:50%;opacity:.22;
}
.contact-card::after{
  content:"";position:absolute;top:-40px;right:-40px;width:150px;height:150px;
  border:1px solid var(--res);border-radius:50%;opacity:.35;
}
.contact-card address{
  font-style:normal;font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.08rem,3.2vw,1.3rem);
  line-height:1.75;
  letter-spacing:0;
  margin-bottom:1.9rem;
  padding-right:3.2rem;
  position:relative;z-index:1;
  hyphens:none;
}
.contact-line{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.85rem .2rem;border-top:1px solid var(--line-ink);
  text-decoration:none;font-size:.92rem;position:relative;z-index:1;
  transition:background .3s,padding-left .3s var(--ease);
}
a.contact-line:hover{background:rgba(251,249,241,.05);padding-left:.7rem;}
/* Beschriftung und Wert sind Flex-Items (min-width:auto): bei vergrößerter
   Schrift schob „Telefon“ die Rufnummer aus der Karte. Der Wert selbst soll
   ungeteilt bleiben, nur die Beschriftung darf umbrechen. */
.contact-line>span:first-child{min-width:0;}
.contact-line span:first-child{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(251,249,241,.72);}
.contact-line span:last-child{font-weight:600;text-align:right;}
.contact-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.7rem;position:relative;z-index:1;}

/* ---------- footer & legal ---------- */
.site-footer{background:var(--pine);color:var(--bone);margin-top:0;}
.footer-top{
  display:grid;grid-template-columns:1.3fr .8fr .8fr;gap:2.5rem;
  padding:clamp(3rem,6vw,4.5rem) 1.75rem 2.5rem;
}
.footer-top h5{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--res);margin-bottom:1rem;font-weight:600;}
.footer-top p{color:rgba(251,249,241,.78);font-size:.94rem;max-width:44ch;}
.footer-links{list-style:none;}
.footer-links li{margin-bottom:.1rem;}
/* Die Fußzeile führt zu Impressum, Datenschutz und AGB — die Treffflächen
   müssen auch mit dem Daumen sicher zu erwischen sein: mind. 24px hoch
   (WCAG 2.2, 2.5.8). Die vertikale Polsterung ersetzt den früheren
   li-Abstand, der Zeilenrhythmus bleibt dadurch unverändert. */
.footer-links a{
  color:rgba(251,249,241,.78);text-decoration:none;font-size:.92rem;
  position:relative;transition:color .3s;
  display:inline-block;padding:.3rem 0;min-height:24px;
}
.footer-links a::after{
  content:"";position:absolute;left:0;bottom:.22rem;height:1px;width:100%;
  background:var(--gold);transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease-out);
}
.footer-links a:hover{color:var(--bone);}
.footer-links a:hover::after{transform:scaleX(1);transform-origin:left;}
.legal-section{padding:1.5rem 0 3rem;border-top:1px solid var(--line-ink);}
.legal-section .eyebrow{color:var(--res);}
.legal-details{
  border:1px solid var(--line-ink);border-radius:var(--radius);
  margin-bottom:.8rem;background:rgba(251,249,241,.02);
  transition:border-color .4s,background .4s;
}
.legal-details[open]{border-color:rgba(177,138,74,.5);background:rgba(251,249,241,.04);}
/* „Zur Datenschutzerklärung“, „Zu den AGB“, „Zur Cookie-Richtlinie“: eigenständige
   Schaltflächen, keine Links im Fließtext. Die unsichtbare Fläche vergrößert nur
   den Trefferbereich auf 24px (WCAG 2.5.8) — die feine Unterstreichung bleibt,
   wo sie ist. Die Inline-Styles dieser Links stehen auch im EN-Wörterbuch,
   deshalb hier per Regel statt am Element. */
.legal-section .legal-details>p a{position:relative;}
.legal-section .legal-details>p a::after{
  content:"";position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);height:24px;
}
.legal-details summary{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.1rem 1.25rem;
}
.legal-details summary::-webkit-details-marker{display:none;}
/* min-width:0 — sonst zieht die Überschrift als Flex-Item ihre min-content-Breite
   durch ("Nutzungsbedingungen") und schiebt das +-Symbol bei A+ aus der Karte.
   anywhere statt break-word, weil nur anywhere die min-content-Breite senkt. */
.legal-details summary h2{font-size:1.15rem;margin:0;color:var(--bone);min-width:0;}
/* h1,h2 stehen global auf hyphens:manual — in den schmalen Fußzeilen-Karten brachen
   „Nutzungsbedingungen“ und „Datenschutzerklärung“ dadurch bei A+ hart mitten im Wort,
   und als Flex-Item schob die Überschrift zusätzlich das +-Symbol aus der Karte
   (min-width:0 oben). Hier also sauber trennen, anywhere nur als Notbremse. */
.legal-details h2{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere;}
.toggle-icon{
  width:24px;height:24px;flex-shrink:0;color:var(--gold);
  transition:transform .45s var(--ease-out);
}
.legal-details[open] .toggle-icon{transform:rotate(135deg);}
.legal-details-body{padding:0 1.25rem;overflow:hidden;transition:height .45s var(--ease);}
.legal-section .eyebrow::before{width:2.2rem;}
.legal-details-body>*:last-child{padding-bottom:1.3rem;}
.legal-details-body h3{font-family:var(--font-body);font-weight:700;font-size:.9rem;color:var(--res);margin:1.4rem 0 .5rem;}
.legal-details-body p,.legal-details-body li{font-size:.9rem;color:rgba(251,249,241,.8);}
.legal-details-body ul{padding-left:1.2rem;margin-bottom:1em;}
.legal-details-body li{margin-bottom:.3rem;}
.legal-note{
  margin-top:1.4rem;padding:1rem 1.1rem;
  border:1px dashed rgba(177,138,74,.5);border-radius:var(--radius);
  font-size:.82rem;line-height:1.6;color:rgba(251,249,241,.74);
}
.footer-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem;
  padding:1.4rem 1.75rem 5.5rem;border-top:1px solid var(--line-ink);
  font-family:var(--font-mono);font-size:.78rem;color:rgba(251,249,241,.68);
}
/* Hinweis auf die Erstellerin/den Ersteller der Website: bewusst schlicht, ohne
   Hervorhebung (§ 27 Abs. 3 BO Bayern — keine Werbung für Dritte). */
.footer-credit a{text-decoration:none;border-bottom:1px solid rgba(251,249,241,.3);transition:color .3s var(--ease),border-color .3s var(--ease);}
.footer-credit a:hover{color:var(--res);border-bottom-color:var(--res);}

/* ---------- back to top ---------- */
.back-to-top{
  position:fixed;right:1.4rem;bottom:5.2rem;z-index:90;
  width:54px;height:54px;border-radius:50%;
  background:var(--pine);color:var(--bone);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease),background .3s;
  box-shadow:var(--shadow-lift);
}
.back-to-top:hover{background:var(--gold-deep);}
.back-to-top.visible{opacity:1;transform:none;pointer-events:auto;}
.back-to-top .icon{width:20px;height:20px;position:relative;z-index:1;}
.back-to-top .ring{
  position:absolute;inset:0;width:54px;height:54px;transform:rotate(-90deg);
}
.back-to-top .ring circle{
  fill:none;stroke:var(--gold);stroke-width:2.5;
  stroke-dasharray:151;stroke-dashoffset:151;stroke-linecap:round;
}

/* ---------- mobile bar ---------- */
.mobile-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  display:none;padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(14,43,46,.92);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:1px solid var(--line-ink);
  transform:translateY(110%);
  transition:transform .6s var(--ease-out);
}
body.is-loaded .mobile-bar{transform:translateY(0);}
.mobile-bar-inner{display:flex;gap:.7rem;max-width:520px;margin:0 auto;}
.mobile-bar a{
  flex:1;text-align:center;text-decoration:none;
  font-family:var(--font-mono);font-size:.85rem;font-weight:600;
  padding:.85rem 0;border-radius:99px;
  transition:transform .25s var(--ease),background .3s;
}
.mobile-bar a:first-child{background:var(--gold);color:var(--pine);}
.mobile-bar a:last-child{border:1px solid var(--line-ink);color:var(--bone);}
.mobile-bar a:active{transform:scale(.97);}

/* ---------- keyframes ---------- */
@keyframes ringPulse{
  0%{transform:scale(.45);opacity:0;}
  12%{opacity:.5;}
  100%{transform:scale(1.65);opacity:0;}
}
@keyframes logoEcho{
  0%{transform:scale(1);opacity:.7;}
  70%{transform:scale(2.35);opacity:0;}
  100%{transform:scale(2.35);opacity:0;}
}
@keyframes dotPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(79,167,154,.45);}
  55%{box-shadow:0 0 0 7px rgba(79,167,154,0);}
}
@keyframes statusPing{
  0%{transform:scale(.6);opacity:.9;}
  100%{transform:scale(1.9);opacity:0;}
}
@keyframes floatSlow{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-11px);}
}
@keyframes chevDrop{
  0%,100%{transform:translateY(0);opacity:.9;}
  50%{transform:translateY(7px);opacity:.4;}
}
@keyframes spinSlow{to{transform:rotate(360deg);}}

/* ---------- next level: Intro, Cursor, Punktnav, Resonanzfeld ---------- */
/* Der Vorhang ist der Auftritt beim Betreten der Website — einmal pro Besuch.
   Auf den Fachseiten (body.doc-single) entfällt er: dort ist er kein Auftritt
   mehr, sondern eine Sekunde Wartezeit vor einem Text, den jemand lesen will. */
body.doc-single .intro-veil{display:none;}
.intro-veil{
  position:fixed;inset:0;z-index:300;background:var(--pine);
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;will-change:transform;
  /* kürzer als früher: der Inhalt soll so schnell wie möglich sichtbar sein */
  animation:veilOut .6s var(--ease-out) .25s forwards;
}
.intro-veil svg{width:86px;height:86px;overflow:visible;}
.intro-veil circle{
  fill:none;stroke:var(--res);stroke-width:1.6;
  transform-origin:50px 50px;opacity:0;
  animation:ringPulse 1.5s var(--ease) infinite;
}
.intro-veil circle:nth-child(2){animation-delay:.5s;stroke:var(--gold);}
.intro-veil circle:nth-child(3){animation-delay:1s;}
@keyframes veilOut{to{transform:translateY(-101%);}}

.hero-field{position:absolute;inset:0;z-index:1;pointer-events:none;}

/* Der frühere Sonder-Mauszeiger wurde bewusst entfernt:
   der gewohnte System-Zeiger ist für alle Altersgruppen klarer. */

.section-dots{
  position:fixed;right:1.15rem;top:50%;transform:translateY(-50%);z-index:80;
  display:flex;flex-direction:column;gap:.85rem;
}
.section-dots a{
  width:12px;height:12px;border-radius:50%;display:block;position:relative;
  border:1.5px solid var(--pine);opacity:.35;
  transition:opacity .3s,background .3s,transform .3s var(--ease-out),border-color .3s;
}
/* Der Punkt bleibt optisch 12px, die Trefffläche wächst unsichtbar auf 24px —
   sonst ist er mit unsicherer Hand kaum zu treffen (WCAG 2.5.8). */
/* -7.5px, nicht -6px: der Rahmen von 1.5px zählt beim Containing-Block nicht mit,
   erst so wird die Fläche exakt 24px (die Punkte stehen 25.6px auseinander,
   die Flächen überlappen also nicht). */
.section-dots a::after{content:"";position:absolute;inset:-7.5px;border-radius:50%;}
.section-dots a:hover{opacity:.85;transform:scale(1.2);}
.section-dots a.active{opacity:1;background:var(--gold);border-color:var(--gold-deep);transform:scale(1.3);}
body.doc-mode .section-dots{display:none;}
@media(max-width:1120px){.section-dots{display:none;}}

/* ---------- Cookie-Hinweis (reine Information — die Seite ist cookiefrei) ---------- */
.cookie-note{
  position:fixed;left:50%;bottom:1.1rem;transform:translate(-50%,140%);
  z-index:96;width:min(560px,calc(100% - 1.6rem));
  background:rgba(14,43,46,.94);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:var(--bone);
  border:1px solid rgba(79,167,154,.35);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lift);
  padding:1.1rem 1.25rem;
  display:flex;align-items:center;gap:1rem;
  transition:transform .7s var(--ease-out),opacity .5s var(--ease);
}
/* Muss NACH der display:flex-Regel stehen: das display des Autors schlaegt sonst
   die Browser-Regel [hidden]{display:none}. Ohne diese Zeile bleibt der Hinweis
   auch nach dem Wegklicken in der Tabulator-Reihenfolge und im Screenreader —
   der Fokus landet dann auf einem unsichtbaren Knopf unterhalb des Bildschirms. */
.cookie-note[hidden]{display:none;}
.cookie-note.is-visible{transform:translate(-50%,0);}
.cookie-note.is-leaving{transform:translate(-50%,140%);opacity:0;}
.cookie-note .cn-icon{
  width:40px;height:40px;flex-shrink:0;border-radius:50%;
  border:1px solid rgba(79,167,154,.5);color:var(--res);
  display:flex;align-items:center;justify-content:center;
}
.cookie-note .cn-icon svg{width:21px;height:21px;}
.cookie-note p{margin:0;font-size:.88rem;line-height:1.5;color:rgba(251,249,241,.92);}
.cookie-note p a{color:var(--res);text-underline-offset:3px;}
.cookie-note button{
  flex-shrink:0;cursor:pointer;
  font-family:var(--font-mono);font-size:.78rem;font-weight:600;letter-spacing:.03em;
  color:var(--pine);background:var(--res);border:none;border-radius:99px;
  padding:.6rem 1.15rem;
  transition:background .3s,transform .3s var(--ease);
}
.cookie-note button:hover{background:var(--gold);transform:translateY(-1px);}
body.doc-mode .cookie-note{display:none;}
@media(max-width:860px){
  .cookie-note{bottom:calc(4.6rem + env(safe-area-inset-bottom));flex-wrap:wrap;padding:1rem;}
  .cookie-note p{font-size:.8rem;}
  .cookie-note button{flex:1;text-align:center;}
}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .hero-grid{grid-template-columns:1fr;gap:3rem;}
  .hero h1{max-width:16ch;}
  .hero-card{max-width:560px;}
  .hero-rings{top:8%;right:-260px;transform:none;opacity:.7;}
  .about-grid,.mbst-grid,.contact-grid{grid-template-columns:1fr;}
  .about-visual{max-width:520px;}
  .footer-top{grid-template-columns:1fr 1fr;}
}
/* ---------- Menue als Vollbild-Overlay (Burger-Knopf) ----------
   Diese Regeln haengen bewusst NICHT an einer festen Fensterbreite, sondern
   an der Klasse .nav-compact. Die setzt das Skript (Abschnitt 2), sobald das
   Fenster schmal ist ODER die Beschriftungen in einer Zeile nicht mehr neben
   Logo und Telefonnummer passen — etwa bei vergroesserter Schrift ueber A+,
   bei den laengeren englischen Beschriftungen oder wenn die Hausschrift
   ausnahmsweise nicht laedt und die Ersatzschrift breiter baut.
   Eine reine Media Query kann das nicht: sie kennt nur die Fensterbreite,
   nicht den tatsaechlichen Platzbedarf.
   Ohne JavaScript bleibt die waagerechte Leiste stehen — sie ist dann zwar
   eng, aber alle Menuepunkte sind als normale Anker erreichbar, waehrend ein
   Burger-Knopf ohne Skript gar nicht aufginge. */
.nav-compact .nav-links{
  position:fixed;inset:0;z-index:105;
  background:linear-gradient(170deg,var(--pine-2),var(--pine) 60%);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.6rem;
  opacity:0;visibility:hidden;transform:translateY(-4%);
  /* Tempo: vorher .5s Overlay plus bis .40s gestaffelte Punkte — das Menü
     war erst nach rund 0,9 s lesbar und wirkte wie eingefroren. Jetzt ist
     es nach gut 0,4 s vollständig da. */
  transition:opacity .24s var(--ease),transform .24s var(--ease),visibility 0s .24s;
}
.nav-compact.nav-open .nav-links{opacity:1;visibility:visible;transform:none;transition-delay:0s;}
/* Während app.js die Leiste ausmisst (updateNavCompact), keine Übergänge —
   sonst blitzt das ausgeblendete Menü bei jeder Fenstergrößenänderung auf. */
.nav-measuring .nav-links,.nav-measuring .nav-links a{transition:none!important;}
.nav-compact .nav-links a{
  color:var(--bone);font-family:var(--font-display);font-size:1.7rem;font-weight:500;
  white-space:normal;
  opacity:0;transform:translateY(18px);
  transition:opacity .26s var(--ease),transform .26s var(--ease),color .3s;
}
.nav-compact.nav-open .nav-links a{opacity:1;transform:none;}
.nav-compact.nav-open .nav-links li:nth-child(1) a{transition-delay:.04s;}
.nav-compact.nav-open .nav-links li:nth-child(2) a{transition-delay:.07s;}
.nav-compact.nav-open .nav-links li:nth-child(3) a{transition-delay:.10s;}
.nav-compact.nav-open .nav-links li:nth-child(4) a{transition-delay:.13s;}
.nav-compact.nav-open .nav-links li:nth-child(5) a{transition-delay:.16s;}
.nav-compact.nav-open .nav-links li:nth-child(6) a{transition-delay:.19s;}
.nav-compact .nav-links a::after{background:var(--res);height:2px;bottom:-4px;}
.nav-compact .nav-links a.active{color:var(--res);}
.nav-compact .nav-toggle{display:block;}
.nav-compact.nav-open .nav-toggle{border-color:var(--bone);}
.nav-compact.nav-open .nav-toggle span,
.nav-compact.nav-open .nav-toggle::before,
.nav-compact.nav-open .nav-toggle::after{background:var(--bone);}
.nav-compact.nav-open .logo-text{color:var(--bone);}
.nav-compact.nav-open .logo-text small{color:rgba(251,249,241,.6);}
/* Die Telefonnummer bleibt im Burger-Zustand stehen — sie ist der
   wichtigste Weg in die Praxis. Erst unter 861px weicht sie, dort
   übernimmt die feste Leiste am unteren Bildschirmrand (.mobile-bar). */
.nav-compact.nav-open .nav-phone{display:none;}

@media (max-width:860px){
  .nav-phone{display:none;}
  .trust-strip{grid-template-columns:1fr;}
  .process-steps{grid-template-columns:1fr;gap:2.4rem;max-width:460px;margin-left:auto;margin-right:auto;}
  .process-steps::before{display:none;}
  .process-steps li{text-align:left;display:grid;grid-template-columns:58px 1fr;gap:0 1.3rem;padding:1.5rem 1.3rem;}
  .process-steps .step-num{margin:0;grid-row:1/3;}
  .mobile-bar{display:block;}
  .back-to-top{bottom:6.4rem;right:1rem;}
  .footer-bottom{padding-bottom:7rem;}

  /* Der Blur bleibt etwas schwächer — das sieht man nicht, spart aber
     spürbar Rechenleistung. Alle Animationen laufen normal weiter. */
  .is-scrolled .nav-wrap{
    -webkit-backdrop-filter:blur(11px) saturate(1.3);
            backdrop-filter:blur(11px) saturate(1.3);
    background:rgba(245,243,235,.86);
    width:calc(100% - 19.2px);
    margin-top:8px;
  }
}
@media (max-width:640px){
  body{font-size:.96875rem;} /* 15.5px bei Normalgröße */
  .container{padding-left:max(1.5rem,env(safe-area-inset-left));padding-right:max(1.5rem,env(safe-area-inset-right));}
  .nav-cta{gap:8.8px;}
  .nav-wrap{gap:12.8px;}
  .font-size-ctl button{min-width:38px;padding:7.2px 8.8px;}
  .lang-ctl button{min-width:38px;padding:7.2px 8.8px;}
  .announce{margin-top:calc(var(--header-h,78px) + .7rem);font-size:.72rem;padding:.75rem 1.2rem;}
  .stamp{width:104px;height:104px;top:-36px;right:-14px;}
  .footer-top{grid-template-columns:1fr;gap:2rem;}
  .hero-fact b{font-size:1.8rem;}
  .contact-card{padding:1.9rem 1.5rem;}
  .contact-card address{padding-right:2.2rem;line-height:1.7;}
  .contact-card::before{width:180px;height:180px;top:-55px;right:-55px;}
  .contact-card::after{width:115px;height:115px;top:-30px;right:-30px;}
}

/* ---------- reduced motion ---------- */
/* ---------- Bewegung reduzieren ----------
   Achtung: Safari aktiviert diesen Modus auch automatisch, sobald der
   STROMSPARMODUS läuft. Deshalb wird hier NICHT alles abgeschaltet —
   die dezenten Effekte (Logo-Puls, Resonanz-Ringe, EKG-Linie, sanftes
   Einblenden) laufen weiter. Nur die kräftigen Bewegungen entfallen:
   Parallax, schwebende Karte, rotierender Stempel, weite Verschiebungen. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .hero-card{animation:none;}          /* Schweben aus */
  .stamp .rot{animation:none;}         /* Rotation aus */
  .hero::after{animation:none;}        /* Aurora ruhig */
  .intro-veil{display:none;}           /* Intro überspringen */
  h1 em,h2 em{animation:none;}         /* Goldschimmer aus */
  .ecg .pulse{animation:none!important;opacity:0!important;}
  .btn::after{animation:none!important;}
  .reveal,[data-stagger]>*{
    transform:none!important;          /* kein Verschieben, nur Einblenden */
    filter:none!important;
    transition:opacity .7s ease!important;
  }
  .hero [data-hero]{
    transform:none!important;
    transition:opacity .8s ease!important;
  }
  .hero h1 .w>span{transform:none!important;filter:none!important;transition:none!important;}
}

@media (max-width:480px){
  /* 2rem Innenabstand lässt der Karte auf schmalen Displays zu wenig Textbreite */
  .hero-card{padding:1.5rem 1.25rem 1.15rem;}
  .logo-mark{width:40px;height:40px;}
  .logo{gap:9.6px;}
  .logo-text{font-size:15.2px;}
  .logo-text small{font-size:9.28px;letter-spacing:.09em;}
  .font-size-ctl button{min-width:34px;padding:6.4px 7.2px;font-size:12.48px;}
  .lang-ctl button{min-width:34px;padding:6.4px 7.2px;font-size:12.48px;}
}

/* Sehr schmale Geräte: Kopfleiste zweizeilig — oben Logo und Menü,
   darunter Sprachumschaltung und Schriftgrößen-Regler */
@media (max-width:430px){
  /* Zweizeilig ist die Leiste rund 125 px hoch. Mit der Pillenform (99px)
     schnitt die Rundung in alle vier Ecken — Logo, Menüknopf, DE/EN und
     A−/A+ ragten über den Rand. 28 px = Rundung der Knöpfe (22 px) plus
     etwa der Innenabstand; so laufen innere und äußere Ecken parallel. */
  .nav-wrap{flex-wrap:wrap;padding-top:10.4px;padding-bottom:10.4px;row-gap:8.8px;border-radius:28px;}
  .nav-cta{display:contents;}
  #siteNav{order:3;flex-basis:100%;height:0;min-height:0;}
  /* .nav-cta trägt sonst den z-index über dem Menü-Overlay —
     bei display:contents müssen die Kinder ihn selbst bekommen */
  .nav-toggle{order:2;margin-left:auto;z-index:110;}
  .lang-ctl{order:4;position:relative;z-index:110;}
  .font-size-ctl{order:5;margin-left:8.8px;position:relative;z-index:110;}
}

/* ---------- Mehr Kontrast (Systemeinstellung „Kontrast erhöhen“) ---------- */
@media (prefers-contrast:more){
  :root{--ink-soft:#2C3F41;--line:#B7AF93;}
  .mbst-section p,.mbst-section .lede{color:rgba(251,249,241,.96);}
  .footer-top p,.legal-details-body p,.legal-details-body li{color:rgba(251,249,241,.92);}
  .footer-bottom{color:rgba(251,249,241,.85);}
}

/* ---------- Windows-Kontrastmodus („Hoher Kontrast“) ----------
   Dort ersetzt das System alle Farben und schaltet Hintergrundbilder ab.
   Die drei Stellen mit Verlaufsschrift („Chirurg“ in der Überschrift,
   „Deggendorf“, die 30+) würden dann UNSICHTBAR: der Verlauf verschwindet,
   die Füllfarbe bleibt transparent. Deshalb hier zurück auf normale Schrift. */
@media (forced-colors:active){
  h1 em,h2 em,.network-stat,.network-stat span{
    background:none!important;
    -webkit-text-fill-color:currentColor!important;
    animation:none!important;
  }
  /* Rein dekorative Flächen ohne Bedeutung ausblenden, damit sie im
     Kontrastmodus keine Kästen malen */
  .hero-rings,.resonance-rings,.network-rings,.intro-veil,.stamp{display:none!important;}
  .btn,.nav-toggle,.lang-ctl,.font-size-ctl,.section-dots a{forced-color-adjust:auto;}
}

/* ---------- Druck der Startseite: nur Inhalt, keine Bedienelemente ---------- */
@media print{
  .site-header,.mobile-bar,.back-to-top,.scroll-progress,.section-dots,
  .cookie-note,.intro-veil,.hero-scroll,.announce,.hero-rings,.ecg,
  .vac-bar{display:none!important;}
  .reveal,[data-stagger]>*,.hero [data-hero],.hero h1 .w>span{
    opacity:1!important;transform:none!important;filter:none!important;
  }
  body{background:#fff;}
  .mbst-section,.contact-card,.site-footer{box-shadow:none;}
}

/* ============================================================
   RECHTSSEITEN als eingebettete Ansichten (Datenschutz, AGB,
   Cookies). Sämtliche Regeln sind unter .doc-page gekapselt,
   damit sie nicht in die Hauptseite hineinwirken.
   ============================================================ */
.doc-page{display:none;}
.doc-page.is-active{display:block;}
body.doc-mode main#main,
body.doc-mode .announce{display:none;}

/* --- Seitenkopf --- */
.doc-page .dp-head{
  padding:calc(var(--header-h,78px) + clamp(2.6rem,6vw,4.6rem)) 0 clamp(2rem,4vw,3rem);
  background:linear-gradient(175deg,var(--porcelain) 0%,var(--porcelain-2) 100%);
  border-bottom:1px solid var(--line);position:relative;overflow:hidden;
}
.doc-page .dp-head::after{content:"";position:absolute;right:-140px;top:-90px;width:420px;height:420px;
  border-radius:50%;border:1px solid rgba(177,138,74,.22);pointer-events:none;}
.doc-page .dp-head::before{content:"";position:absolute;right:-40px;top:10px;width:240px;height:240px;
  border-radius:50%;border:1px solid rgba(79,167,154,.22);pointer-events:none;}
.doc-page .dp-head .container{position:relative;z-index:2;}
.doc-page .dp-head h1{font-size:clamp(2.1rem,4.6vw,3.4rem);margin-bottom:.35em;max-width:20ch;}
.doc-page .dp-head .lede{font-size:1.02rem;color:var(--ink-soft);max-width:62ch;margin-bottom:1.4rem;}
.doc-page .dp-head .eyebrow::before{width:2.2rem;}
.doc-page .crumbs{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;color:var(--ink-soft);
  margin-bottom:1.6rem;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;}
.doc-page .crumbs a{text-decoration:none;border-bottom:1px solid rgba(177,138,74,.5);padding-bottom:1px;}
.doc-page .crumbs a:hover{color:var(--gold-deep);}
.doc-page .crumbs span[aria-hidden]{opacity:.45;}
.doc-page .meta-row{display:flex;flex-wrap:wrap;gap:.6rem;}
.doc-page .chip{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.06em;padding:.42rem .8rem;
  border:1px solid var(--line);border-radius:99px;background:var(--card);color:var(--ink-soft);
  display:inline-flex;align-items:center;gap:.45rem;}
.doc-page .chip b{color:var(--pine);font-weight:600;}
.doc-page .chip.res{border-color:rgba(79,167,154,.45);background:var(--res-soft);}
.doc-page .chip.gold{border-color:rgba(177,138,74,.45);background:var(--gold-soft);}

/* --- Layout: Inhaltsverzeichnis + Text --- */
.doc-page .dp-wrap{padding:clamp(2.4rem,5vw,4rem) 0 clamp(3rem,6vw,5rem);}
.doc-page .dp-grid{display:grid;grid-template-columns:250px 1fr;gap:clamp(2rem,4vw,4rem);align-items:start;}
/* Grid-Items dürfen nicht durch breite Inhalte (Tabellen min-width, lange URLs)
   über den Container hinauswachsen — sonst ragt der Text unter den Bildschirmrand.
   min-width:0 hebt die automatische Mindestbreite auf; Tabellen scrollen dann in .tbl-scroll. */
.doc-page .dp-grid>*{min-width:0;}
/* Das Verzeichnis bleibt beim Scrollen links stehen. Laengere Verzeichnisse
   (Datenschutz: 19 Punkte, AGB: 20) sind höher als der sichtbare Bereich —
   ohne Begrenzung wären die untersten Punkte im feststehenden Zustand nicht
   mehr erreichbar. Deshalb: Überschrift und Druckknopf stehen fest, nur die
   Liste dazwischen scrollt bei Bedarf in sich selbst. */
.doc-page .toc{position:sticky;top:calc(var(--header-h,78px) + 1.6rem);
  max-height:calc(100vh - var(--header-h,78px) - 3.2rem);
  display:flex;flex-direction:column;}
.doc-page .toc h2{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:600;margin-bottom:1rem;}
.doc-page .toc ol{list-style:none;counter-reset:toc;border-left:1px solid var(--line);padding:0;margin:0;
  min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;}
.doc-page .toc li{counter-increment:toc;margin:0;}
.doc-page .toc a{display:block;text-decoration:none;font-size:.87rem;line-height:1.4;color:var(--ink-soft);
  padding:.42rem 0 .42rem 1rem;margin-left:-1px;border-left:2px solid transparent;
  transition:color .3s var(--ease),border-color .3s var(--ease);}
.doc-page .toc a::before{content:counter(toc) ". ";font-family:var(--font-mono);font-size:.72rem;opacity:.55;}
.doc-page .toc a:hover{color:var(--pine);}
.doc-page .toc a.active{color:var(--pine);font-weight:600;border-left-color:var(--gold);}
.doc-page .toc-print{flex:none;margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--line);}
.doc-page .toc-print button{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.06em;color:var(--ink-soft);
  background:transparent;border:1px solid var(--line);border-radius:var(--radius);padding:.55rem .9rem;
  cursor:pointer;width:100%;transition:border-color .3s,color .3s,background .3s;}
.doc-page .toc-print button:hover{border-color:var(--gold);color:var(--pine);background:var(--card);}

.doc-page .legal-body{max-width:74ch;counter-reset:sec;}
.doc-page .legal-body>section{padding:0 0 2.4rem;counter-increment:sec;}
.doc-page .legal-body>section+section{padding-top:2.4rem;border-top:1px solid var(--line);}
.doc-page .legal-body h2{font-family:var(--font-display);font-size:clamp(1.35rem,2.4vw,1.75rem);
  margin-bottom:.7em;display:flex;gap:.7rem;align-items:baseline;letter-spacing:-.01em;
  /* Die Abschnittsnummer macht die Überschrift zum Flex-Container; der Text
     daneben ist ein anonymes Flex-Item und damit min-width:auto — lange Wörter
     („Behandlungsverhältnisses“, „Datenschutzbeauftragter“, „Grundlagenforschung“)
     liefen deshalb aus der Spalte, besonders bei vergrößerter Schrift. Das globale
     overflow-wrap:break-word greift hier nicht: es senkt die min-content-Breite
     nicht. hyphens:auto trennt zuerst sauber mit Trennstrich, anywhere ist die
     Notbremse, falls selbst das nicht reicht. */
  -webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere;}
.doc-page .legal-body h2::before{content:counter(sec);font-family:var(--font-mono);font-size:.78rem;
  font-weight:600;color:var(--gold-deep);letter-spacing:.06em;flex-shrink:0;padding-top:.2em;}
.doc-page .legal-body h3{font-family:var(--font-body);font-weight:700;font-size:.98rem;color:var(--res-deep);
  margin:1.8rem 0 .55rem;letter-spacing:.01em;}
.doc-page .legal-body h4{font-family:var(--font-body);font-weight:600;font-size:.9rem;color:var(--pine);margin:1.2rem 0 .4rem;}
.doc-page .legal-body p,.doc-page .legal-body li{font-size:.97rem;color:var(--ink-soft);}
.doc-page .legal-body strong{color:var(--pine);font-weight:600;}
.doc-page .legal-body a{color:var(--gold-deep);text-decoration:none;border-bottom:1px solid rgba(177,138,74,.4);
  transition:border-color .3s,color .3s;}
.doc-page .legal-body a:hover{border-bottom-color:var(--gold);color:var(--pine);}
.doc-page .legal-body ul,.doc-page .legal-body ol{padding-left:1.35rem;margin:0 0 1.1em;}
.doc-page .legal-body ul{list-style:none;padding-left:1.15rem;}
.doc-page .legal-body ul>li{position:relative;padding-left:.35rem;margin-bottom:.45rem;}
.doc-page .legal-body ul>li::before{content:"";position:absolute;left:-.85rem;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--gold);opacity:.75;}
.doc-page .legal-body ol{list-style:decimal;}
.doc-page .legal-body ol>li{margin-bottom:.45rem;padding-left:.2rem;}
.doc-page .legal-body ol>li::marker{font-family:var(--font-mono);font-size:.85em;color:var(--gold-deep);}
.doc-page .legal-body address{font-style:normal;}

/* --- Bausteine --- */
.doc-page .callout{border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--radius);
  background:var(--card);padding:1.15rem 1.3rem;margin:1.4rem 0;box-shadow:var(--shadow-soft);}
.doc-page .callout>*:last-child{margin-bottom:0;}
.doc-page .callout .callout-title{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;color:var(--gold-deep);margin-bottom:.6rem;display:block;}
.doc-page .callout.res{border-left-color:var(--res);background:linear-gradient(180deg,var(--res-soft),var(--card) 60%);}
.doc-page .callout.res .callout-title{color:var(--res-deep);}
.doc-page .callout.key{border-left-color:var(--pine);background:var(--pine);color:rgba(251,249,241,.82);border-color:var(--pine);}
.doc-page .callout.key p,.doc-page .callout.key li{color:rgba(251,249,241,.82);}
.doc-page .callout.key strong{color:var(--bone);}
.doc-page .callout.key .callout-title{color:var(--res);}
.doc-page .callout.key a{color:var(--res);border-bottom-color:rgba(79,167,154,.5);}
.doc-page .callout.key ul>li::before{background:var(--res);}

.doc-page .todo{margin:1.5rem 0;padding:1.1rem 1.25rem;border:1px dashed rgba(177,138,74,.65);
  border-radius:var(--radius);
  background:repeating-linear-gradient(135deg,rgba(177,138,74,.045) 0 10px,transparent 10px 20px);
  font-size:.84rem;line-height:1.62;color:var(--ink-soft);}
.doc-page .todo>*:last-child{margin-bottom:0;}
.doc-page .todo p,.doc-page .todo li{font-size:.84rem;}
.doc-page .todo .todo-title{display:block;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;color:var(--gold-deep);margin-bottom:.55rem;}
.doc-page .ph{font-style:italic;color:var(--gold-deep);background:var(--gold-soft);padding:.05em .35em;border-radius:2px;}

.doc-page .tbl-scroll{overflow-x:auto;margin:1.3rem 0;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--card);-webkit-overflow-scrolling:touch;}
.doc-page table.data{width:100%;border-collapse:collapse;min-width:520px;font-size:.86rem;}
.doc-page table.data th,.doc-page table.data td{text-align:left;padding:.75rem .95rem;
  border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-soft);}
.doc-page table.data th{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pine);font-weight:600;background:var(--porcelain-2);}
.doc-page table.data tr:last-child td{border-bottom:none;}
.doc-page table.data td strong{color:var(--pine);}
.doc-page .tbl-hint{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-soft);opacity:.75;margin:-.6rem 0 1.4rem;}
/* Studientabellen: vier Spalten brauchen mehr Platz als die Rechtstexte.
   Auf dem Desktop passt die Tabelle knapp in die Textspalte, darunter
   schiebt sich .tbl-scroll seitlich — mit lesbaren Spaltenbreiten. */
.doc-page table.data.studies-tbl{min-width:760px;table-layout:fixed;}
.doc-page table.data.studies-tbl th:nth-child(1),
.doc-page table.data.studies-tbl td:nth-child(1){width:16%;}
.doc-page table.data.studies-tbl th:nth-child(2),
.doc-page table.data.studies-tbl td:nth-child(2){width:20%;}
.doc-page table.data.studies-tbl th:nth-child(3),
.doc-page table.data.studies-tbl td:nth-child(3){width:26%;}
.doc-page table.data.studies-tbl th:nth-child(4),
.doc-page table.data.studies-tbl td:nth-child(4){width:38%;}
.doc-page .empty-row td{text-align:center;font-family:var(--font-mono);font-size:.8rem;color:var(--res-deep);
  background:var(--res-soft);padding:1.1rem;}

.doc-page dl.defs{margin:1rem 0 1.2rem;display:grid;grid-template-columns:auto 1fr;gap:.45rem 1.1rem;font-size:.9rem;}
.doc-page dl.defs dt{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.04em;color:var(--pine);
  font-weight:600;padding-top:.15rem;}
.doc-page dl.defs dd{margin:0;color:var(--ink-soft);}

.doc-page .stand{font-family:var(--font-mono);font-size:.74rem;color:var(--ink-soft);opacity:.75;margin-top:2.6rem;
  padding-top:1.2rem;border-top:1px solid var(--line);}
.doc-page .stand a{color:var(--gold-deep);text-decoration:none;border-bottom:1px solid rgba(177,138,74,.4);}
.doc-page .dp-back{margin-top:1.6rem;}
.doc-page .dp-back a{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-mono);
  font-size:.8rem;letter-spacing:.04em;text-decoration:none;color:var(--pine);
  border:1px solid var(--line);border-radius:var(--radius);padding:.7rem 1.15rem;background:var(--card);
  transition:border-color .3s,transform .3s var(--ease),box-shadow .3s;}
.doc-page .dp-back a:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:var(--shadow-soft);}

/* --- responsiv --- */
@media (max-width:1020px){
  .doc-page .dp-grid{grid-template-columns:1fr;gap:2rem;}
  .doc-page .toc{position:static;border:1px solid var(--line);border-radius:var(--radius);
    background:var(--card);padding:1.2rem 1.3rem;box-shadow:var(--shadow-soft);
    /* steht hier oben im Textfluss — darf nicht in sich scrollen */
    display:block;max-height:none;}
  .doc-page .toc ol{columns:2;column-gap:1.6rem;border-left:none;overflow:visible;}
  .doc-page .toc a{padding-left:0;border-left:none;}
  .doc-page .toc a.active{border-left:none;color:var(--gold-deep);}
  .doc-page .toc-print{display:none;}
}
@media (max-width:640px){
  .doc-page .toc ol{columns:1;}
  .doc-page .legal-body h2{gap:.5rem;}
  .doc-page dl.defs{grid-template-columns:1fr;gap:.15rem .6rem;}
  .doc-page dl.defs dd{margin-bottom:.7rem;}
  .doc-page table.data{min-width:440px;}
}

/* --- Druck: nur die geöffnete Rechtsseite --- */
@media print{
  body.doc-mode .site-header,body.doc-mode .mobile-bar,body.doc-mode .back-to-top,
  body.doc-mode .scroll-progress,body.doc-mode .doc-page .toc,body.doc-mode .doc-page .crumbs,
  body.doc-mode .doc-page .dp-back,body.doc-mode .site-footer .footer-top,
  body.doc-mode .site-footer .legal-section{display:none!important;}
  body.doc-mode .doc-page .dp-head{padding:0 0 1rem;background:none;border-bottom:2px solid #000;}
  body.doc-mode .doc-page .dp-head::before,body.doc-mode .doc-page .dp-head::after{display:none;}
  body.doc-mode .doc-page .dp-grid{display:block;}
  body.doc-mode .doc-page .legal-body{max-width:none;}
  body.doc-mode .doc-page .legal-body>section{break-inside:avoid;}
  body.doc-mode .doc-page .legal-body p,body.doc-mode .doc-page .legal-body li{color:#000;}
  body.doc-mode .doc-page .callout,body.doc-mode .doc-page .todo{break-inside:avoid;box-shadow:none;}
  body.doc-mode .doc-page .callout.key{background:#fff;color:#000;border:1px solid #000;}
  body.doc-mode .doc-page .callout.key p,body.doc-mode .doc-page .callout.key li,
  body.doc-mode .doc-page .callout.key strong{color:#000;}
  body.doc-mode .doc-page .tbl-scroll{overflow:visible;}
  body.doc-mode .doc-page table.data{min-width:0;}
}

/* ============================================================
   MBST-VERTIEFUNGSSEITE (#mbst-therapie)
   Nutzt das Gerüst der Rechtsseiten (.doc-page: Umschalten,
   Druck, noscript-Fallback), bekommt aber eine eigene, hellere
   Redaktionsoptik: dunkler Kopf wie der MBST-Block der
   Startseite, darunter Karten statt Paragraphenwüste.
   MERKE: jede neue Grid-Fläche bekommt sofort >*{min-width:0} —
   der Überlauf-Bug ist in dieser Datei schon dreimal aufgetreten.
   ============================================================ */

/* --- Kopf: dunkel wie der MBST-Block der Startseite --- */
.mbst-page .dp-head{
  background:
    radial-gradient(820px 560px at 82% 8%,rgba(79,167,154,.20),transparent 62%),
    linear-gradient(160deg,var(--pine-2),var(--pine) 58%);
  border-bottom:1px solid rgba(79,167,154,.25);
  color:var(--bone);
}
.mbst-page .dp-head::before,.mbst-page .dp-head::after{display:none;}
.mbst-page .dp-head .dp-dots{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(251,249,241,.07) .8px,transparent .9px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(900px 620px at 12% 20%,#000,transparent 78%);
          mask-image:radial-gradient(900px 620px at 12% 20%,#000,transparent 78%);
}
.mbst-page .dp-head h1{color:var(--bone);max-width:16ch;}
.mbst-page .dp-head .lede{color:rgba(251,249,241,.88);max-width:64ch;}
.mbst-page .crumbs{color:rgba(251,249,241,.62);}
.mbst-page .crumbs a{color:rgba(251,249,241,.9);border-bottom-color:rgba(177,138,74,.7);}
.mbst-page .crumbs a:hover{color:var(--res);}
.mbst-page .chip{
  border-color:var(--line-ink);background:rgba(251,249,241,.06);color:rgba(251,249,241,.82);
}
.mbst-page .chip b{color:var(--bone);}
.mbst-page .chip.res{border-color:rgba(79,167,154,.5);background:rgba(79,167,154,.14);color:var(--bone);}
.mbst-page .dp-head .resonance-rings{top:-190px;right:-190px;opacity:.85;}

/* --- Navigationsleiste über dem dunklen Kopf --------------------------
   Die feste Leiste liegt am Seitenanfang durchsichtig über dem Inhalt.
   Auf der Startseite und den Rechtsseiten ist der Grund dort hell, hier
   aber dunkelgrün — die dunkle Schrift der Leiste verschwand darin
   vollständig (User-Meldung 02.08.2026: oben „alles blau, nicht
   sichtbar“). Sobald gescrollt wird, schiebt sich die helle Pille
   (.is-scrolled .nav-wrap) darunter und alles ist wieder lesbar; deshalb
   wird nur der ungescrollte Zustand aufgehellt — mit denselben Farben,
   die das offene Menü über dunklem Grund schon verwendet.
   Die Klasse .head-dark setzt der Router beim Umschalten der Ansicht:
   .mbst-page ist ein Geschwister der Leiste, und CSS kann von dort nicht
   nach oben greifen (:has() kennt altes iOS-Safari nicht).
   --------------------------------------------------------------------- */
.head-dark .site-header:not(.is-scrolled):not(.nav-open) .logo-text{color:var(--bone);}
.head-dark .site-header:not(.is-scrolled):not(.nav-open) .logo-text small{color:rgba(251,249,241,.62);}
.head-dark .site-header:not(.is-scrolled):not(.nav-open) .nav-links a{color:rgba(251,249,241,.88);}
.head-dark .site-header:not(.is-scrolled):not(.nav-open) .nav-links a:hover,
.head-dark .site-header:not(.is-scrolled):not(.nav-open) .nav-links a.active{color:var(--bone);}
.head-dark .site-header:not(.is-scrolled):not(.nav-open) .nav-phone{
  border-color:rgba(251,249,241,.45);color:var(--bone);
}
.head-dark .site-header:not(.is-scrolled):not(.nav-open) .nav-phone:hover{
  background:rgba(251,249,241,.12);color:var(--bone);
}
.head-dark .site-header:not(.is-scrolled):not(.nav-open) .lang-ctl,
.head-dark .site-header:not(.is-scrolled):not(.nav-open) .font-size-ctl{
  border-color:rgba(251,249,241,.45);
}
.head-dark .site-header:not(.is-scrolled):not(.nav-open) .lang-ctl button,
.head-dark .site-header:not(.is-scrolled):not(.nav-open) .font-size-ctl button{color:var(--bone);}
.head-dark .site-header:not(.is-scrolled):not(.nav-open) .lang-ctl button:hover,
.head-dark .site-header:not(.is-scrolled):not(.nav-open) .font-size-ctl button:hover{
  background:rgba(251,249,241,.12);color:var(--bone);
}
.head-dark .site-header:not(.is-scrolled):not(.nav-open) .lang-ctl button.is-active{
  background:rgba(251,249,241,.22);color:var(--bone);
}
.head-dark .site-header:not(.is-scrolled):not(.nav-open) .font-size-ctl button:disabled:hover{
  background:transparent;color:var(--bone);
}
.head-dark .site-header:not(.is-scrolled):not(.nav-open) .nav-toggle{border-color:rgba(251,249,241,.45);}
.head-dark .site-header:not(.is-scrolled):not(.nav-open) .nav-toggle span,
.head-dark .site-header:not(.is-scrolled):not(.nav-open) .nav-toggle::before,
.head-dark .site-header:not(.is-scrolled):not(.nav-open) .nav-toggle::after{background:var(--bone);}

/* --- Inhaltsverzeichnis ohne Nummern (das hier ist kein Vertrag) --- */
.mbst-page .toc a::before{content:none;}
.mbst-page .toc a{padding-left:.85rem;}

/* --- Textkörper --- */
.mbst-page .mt-body{max-width:none;}
.mbst-page .mt-body>section{padding:0 0 2.8rem;}
.mbst-page .mt-body>section+section{padding-top:2.8rem;border-top:1px solid var(--line);}
.mbst-page .mt-body h2{
  font-family:var(--font-display);font-size:clamp(1.55rem,3vw,2.15rem);
  color:var(--pine);margin:0 0 .7rem;
}
.mbst-page .mt-body h3{
  font-family:var(--font-body);font-weight:700;font-size:1rem;color:var(--res-deep);
  margin:2rem 0 .6rem;letter-spacing:.01em;
}
.mbst-page .mt-body p,.mbst-page .mt-body li{color:var(--ink-soft);font-size:.99rem;}
.mbst-page .mt-body p{max-width:68ch;}
.mbst-page .mt-body strong{color:var(--pine);font-weight:600;}
/* :not(.btn) ist hier wesentlich: diese Regel ist spezifischer als .btn-gold /
   .btn-on-ink und hat deren Schriftfarbe überschrieben. Im Kasten am Seitenende
   stand dadurch goldene Schrift auf goldenem Grund (Kontrast 1.85:1) und die
   Rufnummer in Gold auf Dunkelgrün (2.06:1) — beides deutlich unter den
   geforderten 4.5:1. Dieselben Knöpfe auf der Startseite waren korrekt. */
.mbst-page .mt-body a:not(.btn){color:var(--gold-deep);text-decoration:none;
  border-bottom:1px solid rgba(177,138,74,.4);transition:border-color .3s,color .3s;}
.mbst-page .mt-body a:not(.btn):hover{border-bottom-color:var(--gold);color:var(--pine);}
.mbst-page .mt-kicker{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:600;display:block;margin-bottom:.5rem;
}
.mbst-page .mt-lede{font-size:1.06rem;line-height:1.62;color:var(--ink-soft);max-width:66ch;}

/* --- Aufzählungen mit Resonanzpunkt --- */
.mbst-page .mt-list{list-style:none;padding-left:1.15rem;margin:0 0 1.1em;}
.mbst-page .mt-list>li{position:relative;padding-left:.35rem;margin-bottom:.5rem;max-width:66ch;}
.mbst-page .mt-list>li::before{content:"";position:absolute;left:-.85rem;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--res);}

/* --- Gegenüberstellung MRT / MBST --- */
.mbst-page .mt-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.6rem 0 .4rem;}
.mbst-page .mt-split>*{min-width:0;}
.mbst-page .mt-split .sp{
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.3rem 1.35rem;
  background:var(--card);position:relative;overflow:hidden;
}
.mbst-page .mt-split .sp h4{
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--gold-deep);margin:0 0 .6rem;
}
.mbst-page .mt-split .sp p{margin:0;font-size:.93rem;}
.mbst-page .mt-split .sp.is-res{border-color:rgba(79,167,154,.45);
  background:linear-gradient(180deg,var(--res-soft),var(--card) 62%);}
.mbst-page .mt-split .sp.is-res h4{color:var(--res-deep);}
.mbst-page .mt-split .sp b{display:block;font-family:var(--font-display);font-size:1.15rem;
  font-weight:600;color:var(--pine);margin-bottom:.35rem;letter-spacing:-.01em;}

/* --- Wirkprinzip: drei Schritte --- */
.mbst-page .mt-flow{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:1.7rem 0 1.2rem;
  counter-reset:flow;position:relative;
}
.mbst-page .mt-flow>*{min-width:0;}
.mbst-page .mt-flow .fl{
  border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card);
  padding:1.4rem 1.25rem 1.2rem;position:relative;counter-increment:flow;
  transition:transform .45s var(--ease),border-color .45s,box-shadow .45s;
}
.mbst-page .mt-flow .fl:hover{transform:translateY(-3px);border-color:rgba(79,167,154,.45);box-shadow:var(--shadow-soft);}
.mbst-page .mt-flow .fl::before{
  content:"0" counter(flow);
  font-family:var(--font-mono);font-size:.78rem;font-weight:600;color:var(--res-deep);
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(79,167,154,.5);
  background:var(--res-soft);margin-bottom:.85rem;
}
.mbst-page .mt-flow .fl h4{font-family:var(--font-body);font-weight:700;font-size:.97rem;
  color:var(--pine);margin:0 0 .35rem;}
.mbst-page .mt-flow .fl p{margin:0;font-size:.9rem;}

/* --- Wirkprinzip: Animation am MBST OpenSystem -------------------------
   Reine Inline-SVG-Grafik mit CSS-Keyframes. Alle Elemente laufen auf
   derselben 15-Sekunden-Zeitachse, damit die drei Phasen ohne JavaScript
   synchron bleiben:
     Phase 1  Resonanz herstellen    0 %  – 33 %
     Phase 2  Energie aufnehmen     33 %  – 66 %
     Phase 3  Energie abgeben       66 %  – 100 %
   Der Knopf „Animation anhalten“ setzt nur eine Klasse; bei
   prefers-reduced-motion steht die Grafik von vornherein still.
   ------------------------------------------------------------------- */
.mbst-page .mbst-anim{
  margin:1.9rem 0 1.6rem;padding:0;border:1px solid var(--line);
  border-radius:var(--radius-lg);background:var(--card);overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.mbst-page .mba-stage{
  background:
    radial-gradient(120% 90% at 50% 12%,rgba(79,167,154,.10),transparent 62%),
    linear-gradient(180deg,var(--porcelain) 0%,var(--card) 68%);
  padding:.6rem .6rem 0;
}
.mbst-page .mba-svg{display:block;width:100%;height:auto;}

/* Bedienleiste unter der Grafik */
.mbst-page .mba-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1rem;
  padding:.85rem 1.15rem;border-top:1px solid var(--line);
  background:var(--porcelain-2);
}
.mbst-page .mba-steps{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem .5rem;flex:1 1 auto;
  counter-reset:mba;
}
.mbst-page .mba-steps li{
  counter-increment:mba;margin:0;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.03em;
  color:var(--ink-soft);background:var(--card);
  border:1px solid var(--line);border-radius:999px;padding:.34rem .78rem;
  display:flex;align-items:center;gap:.45rem;opacity:.6;
  transition:opacity .4s,border-color .4s,color .4s,background .4s;
}
.mbst-page .mba-steps li::before{
  content:"0" counter(mba);font-weight:600;color:var(--res-deep);opacity:.7;
}
.mbst-page .mba-toggle{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.05em;
  color:var(--ink-soft);background:var(--card);cursor:pointer;
  border:1px solid var(--line);border-radius:999px;padding:.4rem .9rem;
  transition:border-color .3s,color .3s;
}
.mbst-page .mba-toggle:hover{border-color:var(--gold);color:var(--pine);}
.mbst-page .mbst-anim figcaption{
  padding:.9rem 1.15rem 1.05rem;font-size:.82rem;line-height:1.62;color:var(--ink-soft);
  border-top:1px solid var(--line);
}
.mbst-page .mbst-anim figcaption b{color:var(--pine);font-weight:600;}

/* --- Formen ---------------------------------------------------------- */
.mbst-page .mba-shadow{fill:rgba(14,43,46,.13);}
.mbst-page .mba-base{fill:var(--pine);}
.mbst-page .mba-shell{fill:url(#mbaShell);stroke:#CFC8B2;stroke-width:1.1;}
.mbst-page .mba-shell-v{fill:url(#mbaShellV);stroke:#CFC8B2;stroke-width:1.1;}
.mbst-page .mba-arch{fill:url(#mbaArch);stroke:#141D4A;stroke-width:1.2;}
.mbst-page .mba-arch-lip{fill:none;stroke:#111a44;stroke-width:3;opacity:.55;}
.mbst-page .mba-arch-far{fill:none;stroke:#22306F;stroke-width:15;opacity:.5;stroke-linecap:round;}
.mbst-page .mba-arch-gloss{fill:none;stroke:#EAF0FF;stroke-width:9;stroke-linecap:round;opacity:.2;}
.mbst-page .mba-arch-spec{fill:#EAF0FF;opacity:.26;}
.mbst-page .mba-brand{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;
  fill:#FFFFFF;opacity:.9;}
.mbst-page .mba-led-dot{fill:#B6EEFF;}
.mbst-page .mba-panel{fill:#E9E6DC;stroke:#C4BDA6;stroke-width:1;}
.mbst-page .mba-btn{fill:#B9B2A0;}
.mbst-page .mba-foot{fill:#3B3E3B;}
.mbst-page .mba-mat{fill:url(#mbaMat);}
.mbst-page .mba-mat-hi{fill:#D8D3C2;}
.mbst-page .mba-body{fill:url(#mbaBody);stroke:#B6A484;stroke-width:1.2;}
.mbst-page .mba-seam{fill:none;stroke:#B6A484;stroke-width:1;opacity:.65;}
.mbst-page .mba-screen{fill:#12304A;}
.mbst-page .mba-screen-line{fill:rgba(126,200,236,.75);}
.mbst-page .mba-led{fill:var(--res);}
.mbst-page .mba-lens-ring{fill:none;stroke:var(--res);stroke-width:1.6;opacity:.55;}
.mbst-page .mba-lens-bg{fill:#FCFAF3;}
.mbst-page .mba-lens-link{fill:none;stroke:var(--res);stroke-width:1.2;
  stroke-dasharray:4 4;opacity:.5;}
.mbst-page .mba-cell{fill:rgba(79,167,154,.18);stroke:var(--res-deep);stroke-width:1.2;}
.mbst-page .mba-nucleus{fill:var(--res-deep);opacity:.55;}
.mbst-page .mba-label{font-family:var(--font-mono);font-size:13px;fill:var(--ink-soft);}
.mbst-page .mba-label-s{font-family:var(--font-mono);font-size:12px;fill:var(--ink-soft);opacity:.85;}
.mbst-page .mba-b0{fill:none;stroke:var(--res-deep);stroke-width:1.15;
  stroke-dasharray:7 6;opacity:0;}
.mbst-page .mba-field{fill:url(#mbaField);}
.mbst-page .mba-rf{fill:none;stroke:var(--gold);stroke-width:2.2;stroke-linecap:round;opacity:0;}
.mbst-page .mba-halo{fill:var(--res);opacity:.14;}
.mbst-page .mba-core{fill:var(--res-deep);}
.mbst-page .mba-arrow{fill:none;stroke:var(--gold-deep);stroke-width:1.9;stroke-linecap:round;}
.mbst-page .mba-arrow-head{fill:var(--gold-deep);stroke:none;}
.mbst-page .mba-spin{transform-origin:0 0;}
.mbst-page .mba-emit{fill:none;stroke:var(--gold-deep);stroke-width:2.6;
  transform-origin:0 0;opacity:0;}

/* --- Zeitachse ------------------------------------------------------- */
.mbst-page .mba-svg [class*="mba-"]{animation-duration:15s;animation-iteration-count:infinite;}

.mbst-page .mba-field,.mbst-page .mba-aura{animation-name:mbaField;animation-timing-function:ease-in-out;}
@keyframes mbaField{
  0%{opacity:.16}   8%{opacity:.42}  30%{opacity:.48}
  40%{opacity:.92}  62%{opacity:.86} 72%{opacity:.55}
  92%{opacity:.34} 100%{opacity:.16}
}
.mbst-page .mba-b0{animation-name:mbaB0;animation-timing-function:ease-out;}
@keyframes mbaB0{
  0%{opacity:0;stroke-dashoffset:210}
  5%{opacity:.75;stroke-dashoffset:210}
  27%{opacity:.75;stroke-dashoffset:0}
  88%{opacity:.75;stroke-dashoffset:0}
  97%{opacity:0;stroke-dashoffset:0}
  100%{opacity:0;stroke-dashoffset:210}
}
.mbst-page .mba-glowring{animation-name:mbaRing;animation-timing-function:ease-in-out;}
@keyframes mbaRing{
  0%,30%{opacity:0}  38%{opacity:.85}  50%{opacity:.35}
  60%{opacity:.7}   70%{opacity:0}   100%{opacity:0}
}
.mbst-page .mba-scan{fill:rgba(126,200,236,.75);animation-name:mbaScan;animation-timing-function:linear;}
@keyframes mbaScan{
  0%{transform:translateY(0);opacity:.3}
  50%{transform:translateY(44px);opacity:.85}
  100%{transform:translateY(0);opacity:.3}
}
.mbst-page .mba-led,.mbst-page .mba-led-dot{animation-name:mbaLed;animation-timing-function:ease-in-out;}
@keyframes mbaLed{ 0%,100%{opacity:.35} 40%{opacity:1} 70%{opacity:.9} }

/* Hochfrequenz-Impuls: zwei Durchläufe innerhalb von Phase 2 */
.mbst-page .mba-rf1{animation-name:mbaRf1;animation-timing-function:linear;}
@keyframes mbaRf1{
  0%,33%{opacity:0;transform:translateX(0)}
  35%{opacity:.95;transform:translateX(-10px)}
  46%{opacity:.95;transform:translateX(-186px)}
  49%{opacity:0;transform:translateX(-214px)}
  100%{opacity:0;transform:translateX(-214px)}
}
.mbst-page .mba-rf2{animation-name:mbaRf2;animation-timing-function:linear;}
@keyframes mbaRf2{
  0%,47%{opacity:0;transform:translateX(0)}
  49%{opacity:.95;transform:translateX(-10px)}
  61%{opacity:.95;transform:translateX(-186px)}
  64%{opacity:0;transform:translateX(-214px)}
  100%{opacity:0;transform:translateX(-214px)}
}

/* Protonen: ausrichten (Phase 1) — auslenken (Phase 2) — zurückfallen (Phase 3) */
.mbst-page .mba-spin{animation-timing-function:cubic-bezier(.22,.61,.36,1);}
.mbst-page .p1 .mba-spin{animation-name:mbaSpin1;}
.mbst-page .p2 .mba-spin{animation-name:mbaSpin2;}
.mbst-page .p3 .mba-spin{animation-name:mbaSpin3;}
@keyframes mbaSpin1{
  0%,5%{transform:rotate(-54deg)}  27%,33%{transform:rotate(0deg)}
  43%,63%{transform:rotate(64deg)} 78%,90%{transform:rotate(0deg)}
  100%{transform:rotate(-54deg)}
}
@keyframes mbaSpin2{
  0%,5%{transform:rotate(49deg)}   28%,33%{transform:rotate(0deg)}
  45%,64%{transform:rotate(-58deg)} 80%,90%{transform:rotate(0deg)}
  100%{transform:rotate(49deg)}
}
@keyframes mbaSpin3{
  0%,5%{transform:rotate(-126deg)} 26%,33%{transform:rotate(0deg)}
  44%,62%{transform:rotate(71deg)} 76%,90%{transform:rotate(0deg)}
  100%{transform:rotate(-126deg)}
}
.mbst-page .mba-halo{animation-name:mbaHalo;animation-timing-function:ease-in-out;}
@keyframes mbaHalo{
  0%,20%{opacity:.08}  33%{opacity:.16}
  46%,62%{opacity:.34} 74%{opacity:.2} 100%{opacity:.08}
}
/* Energieabgabe: Ringe laufen leicht versetzt aus den Protonen heraus */
.mbst-page .p1 .mba-emit{animation-name:mbaEmit1;animation-timing-function:ease-out;}
.mbst-page .p2 .mba-emit{animation-name:mbaEmit2;animation-timing-function:ease-out;}
.mbst-page .p3 .mba-emit{animation-name:mbaEmit3;animation-timing-function:ease-out;}
@keyframes mbaEmit1{
  0%,66%{opacity:0;transform:scale(.3)}
  70%{opacity:.95;transform:scale(.55)}
  86%{opacity:0;transform:scale(2.6)}
  100%{opacity:0;transform:scale(.3)}
}
@keyframes mbaEmit2{
  0%,69%{opacity:0;transform:scale(.3)}
  73%{opacity:.95;transform:scale(.55)}
  89%{opacity:0;transform:scale(2.6)}
  100%{opacity:0;transform:scale(.3)}
}
@keyframes mbaEmit3{
  0%,72%{opacity:0;transform:scale(.3)}
  76%{opacity:.95;transform:scale(.55)}
  92%{opacity:0;transform:scale(2.6)}
  100%{opacity:0;transform:scale(.3)}
}
/* Zelle in der Lupe: reagiert erst, wenn die Energie abgegeben wird */
.mbst-page .mba-cell{animation-name:mbaCell;animation-timing-function:ease-in-out;
  transform-box:fill-box;transform-origin:center;}
@keyframes mbaCell{
  0%,66%{fill:rgba(79,167,154,.10);stroke-width:1.2;transform:scale(1)}
  80%{fill:rgba(79,167,154,.62);stroke-width:2.1;transform:scale(1.1)}
  100%{fill:rgba(79,167,154,.10);stroke-width:1.2;transform:scale(1)}
}

/* Aktiver Schritt in der Leiste */
.mbst-page .mba-steps li{animation-duration:15s;animation-iteration-count:infinite;}
.mbst-page .mba-steps li:nth-child(1){animation-name:mbaStep1;}
.mbst-page .mba-steps li:nth-child(2){animation-name:mbaStep2;}
.mbst-page .mba-steps li:nth-child(3){animation-name:mbaStep3;}
@keyframes mbaStep1{
  0%,31%{opacity:1;color:var(--pine);border-color:rgba(79,167,154,.6);background:var(--res-soft)}
  34%,100%{opacity:.55;color:var(--ink-soft);border-color:var(--line);background:var(--card)}
}
@keyframes mbaStep2{
  0%,31%{opacity:.55;color:var(--ink-soft);border-color:var(--line);background:var(--card)}
  34%,64%{opacity:1;color:var(--pine);border-color:rgba(79,167,154,.6);background:var(--res-soft)}
  67%,100%{opacity:.55;color:var(--ink-soft);border-color:var(--line);background:var(--card)}
}
@keyframes mbaStep3{
  0%,64%{opacity:.55;color:var(--ink-soft);border-color:var(--line);background:var(--card)}
  67%,97%{opacity:1;color:var(--pine);border-color:rgba(79,167,154,.6);background:var(--res-soft)}
  100%{opacity:.55;color:var(--ink-soft);border-color:var(--line);background:var(--card)}
}

/* Anhalten per Knopf */
.mbst-page .mbst-anim.is-paused [class*="mba-"],
.mbst-page .mbst-anim.is-paused .mba-steps li{animation-play-state:paused;}

@media (max-width:600px){
  .mbst-page .mba-steps li{font-size:.67rem;padding:.3rem .62rem;}
  .mbst-page .mba-bar{padding:.75rem .85rem;}
  .mbst-page .mbst-anim figcaption{padding:.8rem .85rem .95rem;font-size:.79rem;}
}

/* Ohne Bewegung: ruhender Zustand aus Phase 3 (Energie im Gewebe) */
@media (prefers-reduced-motion:reduce){
  .mbst-page .mbst-anim [class*="mba-"],
  .mbst-page .mba-steps li{animation:none!important;}
  .mbst-page .mba-field{opacity:.6;}
  .mbst-page .mba-b0{opacity:.7;stroke-dashoffset:0;}
  .mbst-page .mba-halo{opacity:.22;}
  .mbst-page .mba-cell{fill:rgba(79,167,154,.3);}
  .mbst-page .mba-steps li{opacity:1;}
  .mbst-page .mba-toggle{display:none;}
}

/* --- Anwendungsgebiete (helle Fassung der .indication) --- */
.mbst-page .mt-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.5rem 0 .6rem;}
.mbst-page .mt-cards>*,.mbst-page .mt-card>*{min-width:0;}
.mbst-page .mt-card{
  border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card);
  padding:1.3rem 1.35rem;display:flex;gap:1rem;align-items:flex-start;position:relative;overflow:hidden;
  transition:transform .45s var(--ease),border-color .45s,box-shadow .45s;
}
.mbst-page .mt-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--res);transform:scaleY(0);transform-origin:top;
  transition:transform .45s var(--ease-out);}
.mbst-page .mt-card:hover{transform:translateY(-3px);border-color:rgba(79,167,154,.45);box-shadow:var(--shadow-soft);}
.mbst-page .mt-card:hover::before{transform:scaleY(1);}
.mbst-page .mt-card .icon{
  width:42px;height:42px;flex-shrink:0;border-radius:50%;
  border:1px solid var(--line);color:var(--res-deep);background:var(--res-soft);
  display:flex;align-items:center;justify-content:center;
}
.mbst-page .mt-card .icon svg{width:22px;height:22px;}
.mbst-page .mt-card strong{display:block;font-size:1rem;color:var(--pine);margin-bottom:.2rem;}
.mbst-page .mt-card p{margin:0;font-size:.92rem;}

/* --- Ablauf: drei Phasen --- */
.mbst-page .mt-phases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:1.6rem 0 .6rem;}
.mbst-page .mt-phases>*{min-width:0;}
.mbst-page .mt-phase{
  border:1px solid var(--line);border-top:2px solid var(--gold);border-radius:var(--radius-lg);
  background:var(--card);padding:1.25rem 1.3rem;
}
.mbst-page .mt-phase .ph-label{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:600;display:block;margin-bottom:.7rem;
}
.mbst-page .mt-phase ul{list-style:none;padding:0;margin:0;}
.mbst-page .mt-phase li{position:relative;padding-left:1.1rem;margin-bottom:.55rem;font-size:.91rem;}
.mbst-page .mt-phase li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--res);}
.mbst-page .mt-phase li:last-child{margin-bottom:0;}

/* --- Kennzahlen --- */
.mbst-page .mt-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:1.6rem 0;}
.mbst-page .mt-stats>*{min-width:0;}
.mbst-page .mt-stat{
  border:1px solid rgba(79,167,154,.35);border-radius:var(--radius-lg);
  background:linear-gradient(180deg,var(--res-soft),var(--card) 70%);
  padding:1.25rem 1.3rem;
}
.mbst-page .mt-stat b{
  display:block;font-family:var(--font-display);font-size:2.35rem;line-height:1.05;
  font-weight:600;color:var(--res-deep);font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.mbst-page .mt-stat span{display:block;font-size:.86rem;color:var(--ink-soft);margin-top:.3rem;}

/* --- Studienkarten --- */
.mbst-page .mt-study{
  border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--radius);
  background:var(--card);padding:1.3rem 1.4rem;margin:1.1rem 0;
}
.mbst-page .mt-study.is-mine{border-left-color:var(--res);background:linear-gradient(180deg,var(--res-soft),var(--card) 55%);}
.mbst-page .mt-study .st-badge{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;color:var(--res-deep);background:rgba(79,167,154,.16);
  border:1px solid rgba(79,167,154,.4);border-radius:99px;padding:.28rem .7rem;margin-bottom:.7rem;
}
.mbst-page .mt-study h4{font-family:var(--font-display);font-size:1.12rem;font-weight:600;
  color:var(--pine);margin:0 0 .45rem;letter-spacing:-.01em;}
.mbst-page .mt-study p{margin:0 0 .6rem;font-size:.94rem;}
.mbst-page .mt-study p:last-child{margin-bottom:0;}
/* Quellenangabe — als eigener Absatz unter einer Studienkarte und
   als kurzer Zusatz mitten im Text (dann ohne Trennlinie) */
.mbst-page .st-src{
  font-family:var(--font-mono);font-size:.74rem;line-height:1.5;color:var(--ink-soft);opacity:.85;
}
.mbst-page .mt-study p.st-src{
  padding-top:.6rem;border-top:1px solid var(--line);margin-top:.8rem;max-width:none;
}
.mbst-page .st-src em{font-style:normal;color:var(--pine);font-weight:500;}

/* --- Quellenliste --- */
.mbst-page .mt-refs{list-style:none;padding:0;margin:1.2rem 0 0;border-top:1px solid var(--line);}
.mbst-page .mt-refs li{
  padding:.8rem 0;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:.4rem 1.2rem;align-items:baseline;
}
.mbst-page .mt-refs li>*{min-width:0;}
.mbst-page .mt-refs .rf-t{font-size:.93rem;color:var(--pine);font-weight:600;}
.mbst-page .mt-refs .rf-s{font-family:var(--font-mono);font-size:.74rem;line-height:1.5;color:var(--ink-soft);opacity:.85;}

/* --- Fragen (helle Fassung des MBST-Akkordeons) --- */
.mbst-page .mt-faq{display:grid;gap:.65rem;margin:1.4rem 0 0;}
.mbst-page .mt-faq details{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--card);
  transition:border-color .4s,background .4s;
}
.mbst-page .mt-faq details[open]{border-color:rgba(79,167,154,.5);background:linear-gradient(180deg,var(--res-soft),var(--card) 60%);}
.mbst-page .mt-faq summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.95rem 1.1rem;font-weight:600;font-size:.99rem;color:var(--pine);
}
.mbst-page .mt-faq summary::-webkit-details-marker{display:none;}
.mbst-page .mt-faq .fx{width:22px;height:22px;flex-shrink:0;color:var(--res-deep);
  transition:transform .45s var(--ease-out);}
.mbst-page .mt-faq details[open] .fx{transform:rotate(135deg);}
.mbst-page .mt-faq .faq-body{padding:0 1.1rem;overflow:hidden;transition:height .45s var(--ease);}
.mbst-page .mt-faq .faq-body p{margin:0;padding-bottom:1.1rem;font-size:.93rem;}

/* --- Abschluss-Aufruf --- */
.mbst-page .mt-cta{
  margin:2.4rem 0 0;padding:1.9rem 1.9rem 1.7rem;border-radius:var(--radius-lg);
  background:
    radial-gradient(620px 380px at 88% 10%,rgba(79,167,154,.18),transparent 62%),
    linear-gradient(160deg,var(--pine-2),var(--pine) 58%);
  border:1px solid rgba(79,167,154,.25);color:var(--bone);position:relative;overflow:hidden;
}
.mbst-page .mt-cta h3{color:var(--bone);font-family:var(--font-display);font-size:1.5rem;
  margin:0 0 .5rem;letter-spacing:-.01em;}
.mbst-page .mt-cta p{color:rgba(251,249,241,.84);margin:0 0 1.2rem;max-width:52ch;}
.mbst-page .mt-cta .mt-cta-row{display:flex;flex-wrap:wrap;gap:.8rem;}
.mbst-page .mt-cta a{border-bottom:none;}
.mbst-page .mt-cta a:hover{color:inherit;}
.mbst-page .mt-cta .btn-gold:hover,.mbst-page .mt-cta .btn-on-ink:hover{color:var(--pine);}

/* --- Hinweiskasten nach Heilmittelwerbegesetz --- */
.mbst-page .mt-hwg{
  margin:2.2rem 0 0;padding:1.2rem 1.3rem;
  border:1px dashed rgba(177,138,74,.65);border-radius:var(--radius);
  background:repeating-linear-gradient(135deg,rgba(177,138,74,.045) 0 10px,transparent 10px 20px);
  font-size:.85rem;line-height:1.62;color:var(--ink-soft);
}
.mbst-page .mt-hwg .mt-hwg-title{
  display:block;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--gold-deep);margin-bottom:.55rem;
}
.mbst-page .mt-hwg p{font-size:.85rem;max-width:none;margin:0;}

/* --- responsiv --- */
@media (max-width:900px){
  .mbst-page .mt-flow,.mbst-page .mt-phases,.mbst-page .mt-stats{grid-template-columns:1fr;}
  .mbst-page .mt-cards,.mbst-page .mt-split{grid-template-columns:1fr;}
  .mbst-page .mt-refs li{grid-template-columns:1fr;}
}
@media (max-width:520px){
  .mbst-page .dp-head h1{max-width:none;}
  .mbst-page .mt-cta{padding:1.5rem 1.25rem 1.35rem;}
  .mbst-page .mt-cta .mt-cta-row .btn{width:100%;justify-content:center;}
}

/* --- Druck: Deko weg, Karten flach --- */
@media print{
  body.doc-mode .mbst-page .dp-head{background:none!important;color:#000;}
  body.doc-mode .mbst-page .dp-head h1,body.doc-mode .mbst-page .dp-head .lede{color:#000;}
  body.doc-mode .mbst-page .resonance-rings,body.doc-mode .mbst-page .dp-dots{display:none!important;}
  body.doc-mode .mbst-page .mt-cta{background:none!important;border:1px solid #000;color:#000;}
  body.doc-mode .mbst-page .mt-cta h3,body.doc-mode .mbst-page .mt-cta p{color:#000;}
  body.doc-mode .mbst-page .mt-study,body.doc-mode .mbst-page .mt-card,
  body.doc-mode .mbst-page .mt-phase,body.doc-mode .mbst-page .mt-flow .fl{
    break-inside:avoid;box-shadow:none;background:none;
  }
  body.doc-mode .mbst-page .mt-faq details{break-inside:avoid;}
  body.doc-mode .mbst-page .mt-faq .faq-body{height:auto!important;overflow:visible;}
}

/* ---------- A−/A+ in der Kopfleiste ----------
   Die Kapitel-Links wachsen mit der Schriftstufe (sie stehen in rem), alles
   andere in der Leiste ist fest (px, siehe .nav-wrap). Damit die fünf Links
   trotzdem in die Leiste passen und nicht ins Menü (≡) wandern müssen,
   rücken sie mit jeder Stufe enger zusammen: bei 1440 px Fensterbreite
   20 → 14 → 10 → 7 px Abstand. Nur für die waagerechte Leiste — im
   aufgeklappten Menü (.nav-compact) gelten die dortigen Abstände.
   data-fs setzt applyFontSize() in app.js (0 = 100 %, 3 = 130 %). */
html[data-fs="1"] .site-header:not(.nav-compact) .nav-wrap{gap:16px;}
html[data-fs="2"] .site-header:not(.nav-compact) .nav-wrap{gap:14px;}
html[data-fs="3"] .site-header:not(.nav-compact) .nav-wrap{gap:12px;}
html[data-fs="1"] .site-header:not(.nav-compact) .nav-links{gap:clamp(11px,1vw,18px);}
html[data-fs="2"] .site-header:not(.nav-compact) .nav-links{gap:clamp(8px,.7vw,13px);}
html[data-fs="3"] .site-header:not(.nav-compact) .nav-links{gap:clamp(6px,.5vw,9px);}
/* Bei engen Abständen muss das Leerzeichen INNERHALB eines Punktes („Über
   mich“, „About me“) sichtbar kleiner bleiben als der Abstand zwischen den
   Punkten — sonst liest man „mich Leistungen“ als Einheit. */
html[data-fs="2"] .site-header:not(.nav-compact) .nav-links a{word-spacing:-.06em;}
html[data-fs="3"] .site-header:not(.nav-compact) .nav-links a{word-spacing:-.1em;}