/* =========================================================
   DR. MED. UWE TRINKS - Privatpraxis Saarbrücken
   Contemporary Private Medical Practice. Waldgrün als einzige
   Markenfarbe, weiße Flächen, ruhiges Editorial-Layout statt
   Card-Grid. Wenig Radius, wenig Schatten, kein Blur als
   Grundsprache. Zurückhaltende Bewegung statt Effekt-Schau.
   ========================================================= */

:root{
  /* --- Neutrale Basis: helles Praxisweiß + Salbeigrün ---
     --grund ist das warme Haupt-Hintergrundweiß (Seiten-/Body-Ebene);
     --papier bleibt reines Weiß für Flächen darüber (Header, Karten,
     Formulare, Buttons). Beide waren zuvor identisch (#FFFFFF) und
     wurden hier bewusst getrennt, siehe Farb-/Kontrastpass-Notiz oben. */
  --grund:#FAFBF8;
  --papier:#FFFFFF;
  --nebel:#EEF4EF;
  --silber:#EEF4EF;
  --silber-2:#D5E3D8;
  --linie:#D5E3D8;

  /* --- Tinte: weiche dunkle Typografie statt Schwarz ---
     Funktionale Rollen (Farbhierarchie-Pass):
     --tinte       Headlines, Markennamen, aktive Nav/Zustände, dunkle
                    Marken-Flächen (Footer, CTA-Band, mobiles Menü)
     --tinte-2     Fließtext-Standardfarbe (body-Default), Formulareingaben,
                    Options-/Checkbox-Beschriftungen – bewusst NICHT grün,
                    damit Grün für Headlines/Aktionen reserviert bleibt
     --tinte-leise /
     --tinte-matt  Sekundärtext, Meta-Angaben, ruhige Werte (Tabellenspalten,
                    reine Info-Werte ohne eigene Aktion) */
  --tinte:#1D5C3A;
  --tinte-2:#202823;
  --tinte-leise:#636D62;
  --tinte-matt:#636D62;

  /* --- Einziger Akzent: Waldgrün --- */
  --akzent:#356247;
  --akzent-tief:#244C35;
  --akzent-hell:#8FC7A9;
  --akzent-blass:#EEF4EF;

  --rot:#C0483F;
  --gelb:#D9A441;

  --breite:1240px;
  --r-s:10px; --r-m:16px; --r-l:22px; --r-pill:999px;
  --s1:8px; --s2:12px; --s3:18px; --s4:28px; --s5:40px; --s6:56px; --s7:80px; --s8:112px;
  --tipp:46px;

  --sd:'Familjen Grotesk','Plus Jakarta Sans',system-ui,sans-serif;
  --sx:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --sm:'JetBrains Mono',ui-monospace,Menlo,monospace;

  /* --- Typografie-Skala: wenige, klar benannte Schritte statt Zufallswerte ---
     2xs  Eyebrows, Meta, Bildunterschriften, Legal
     xs   Form-Labels, kleine Buttons, Footer-Links
     sm   Sekundärer Text, Navigation, Karten-Text
     base UI: Buttons, Sub-Navigation, Listen
     md   Fließtext / Body
     lg   Lead-Texte, Artikel-Body, größere Absätze
     xl   kleine hervorgehobene Zahlen/Fakten
     H1-H4 bleiben responsive clamp()-Werte, siehe h1..h4 unten. */
  --text-2xs:12.5px;
  --text-xs:13.5px;
  --text-sm:14.5px;
  --text-base:15.5px;
  --text-md:16.5px;
  --text-lg:18px;
  --text-xl:20px;

  --leading-tight:1.15;
  --leading-snug:1.35;
  --leading-normal:1.5;
  --leading-relaxed:1.65;

  --measure:68ch;
  --measure-lead:60ch;

  --kurve:cubic-bezier(0.16,1,0.3,1);
  --nav-h:88px;

  --schatten-s:0 2px 10px rgba(29,92,58,.08);
}

body.spr-zh{
  --sx:'Plus Jakarta Sans','PingFang SC','Noto Sans SC','Microsoft YaHei',system-ui,sans-serif;
  --sd:'Plus Jakarta Sans','PingFang SC','Noto Sans SC',sans-serif;
}
body.spr-zh p, body.spr-zh li, body.spr-zh .k-zeile span{line-height:1.9}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;scroll-padding-top:120px;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sx);font-size:var(--text-md);line-height:var(--leading-relaxed);color:var(--tinte-2);
  background:var(--grund);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
  hyphens:none;-webkit-hyphens:none;-ms-hyphens:none;word-break:normal;overflow-wrap:normal;
}
h1,h2,h3,h4{font-family:var(--sd);font-weight:700;line-height:var(--leading-tight);letter-spacing:-.025em;color:var(--tinte);text-wrap:balance;word-break:normal;overflow-wrap:normal;hyphens:none;-webkit-hyphens:none;-ms-hyphens:none}
body.spr-zh h1,body.spr-zh h2,body.spr-zh h3,body.spr-zh h4{letter-spacing:0;line-height:var(--leading-snug);font-weight:700}
h1{font-size:clamp(2.1rem,6vw,4rem)}
.h1-lang{font-size:clamp(1.35rem,6.2vw,4rem)}
.h2-lang{font-size:clamp(1.15rem,5.2vw,2.6rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem)}
h3{font-size:clamp(1.15rem,2.1vw,1.4rem)}
p{text-wrap:pretty}
strong{font-weight:600;color:var(--tinte-2)}
h1 strong,h2 strong,h3 strong,h4 strong{font-weight:700;color:inherit}
a{color:var(--akzent);text-underline-offset:3px}
a:hover{color:var(--akzent-tief)}
img{max-width:100%;display:block}
ul{list-style:none}
button{font-family:inherit}

/* Wiederkehrende Lead-Absätze unter Seiten-H1/H2 (vormals pro Seite inline dupliziert) */
.seiten-intro{color:var(--tinte-leise);font-size:var(--text-lg);line-height:var(--leading-normal);margin-top:14px;max-width:var(--measure-lead)}
.abschnitt-intro{color:var(--tinte-leise);font-size:var(--text-lg);line-height:var(--leading-relaxed);margin-top:16px}
.abschnitt-intro + .abschnitt-intro{margin-top:14px}
.brotkrumen{display:flex;gap:6px;font-size:var(--text-xs);color:var(--tinte-matt);margin-bottom:18px}
.brotkrumen a{color:inherit}
:focus-visible{outline:3px solid var(--akzent);outline-offset:3px;border-radius:6px}
.dunkel :focus-visible{outline-color:var(--akzent-hell)}
::selection{background:var(--akzent);color:#fff}

/* ---------- Sanfte Seitenübergänge (Cross-Document View Transitions) ---------- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:seite-raus .32s var(--kurve) both}
  ::view-transition-new(root){animation:seite-rein .38s var(--kurve) both}
  @keyframes seite-raus{to{opacity:0;transform:translateY(-6px)}}
  @keyframes seite-rein{from{opacity:0;transform:translateY(10px)}}
}
.h{padding:0 22px;max-width:var(--breite);margin:0 auto}
section{padding:var(--s7) 0}
/* Abschnitte, die direkt an den vorangehenden Block anschließen sollen, statt
   den vollen Sektionsabstand zu setzen. Ersetzt frühere style="padding-top:0". */
.ohne-oben{padding-top:0}
/* Schliesst direkt an den Seitenkopf an, laesst aber Luft: noetig ueberall dort,
   wo gleich ein Bild folgt und sonst zwei Fotos aneinanderstossen wuerden. */
.oben-knapp{padding-top:var(--s5)}
/* Schlichter Seitenkopf ohne Villa-Motiv (Impressum, Datenschutz). */
.seiten-kopf-schlicht{padding-bottom:var(--s5)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a.sr:focus{position:fixed;top:10px;left:10px;width:auto;height:auto;clip:auto;z-index:130;background:var(--tinte);
  color:#fff;padding:12px 18px;border-radius:9px;font-weight:600;text-decoration:none}

.mono{font-family:var(--sm)}

/* ---------- Piktogramme: eine einzige Icon-Sprache ----------
   Alle Symbole sind schlichte Outline-Zeichnungen in einem 24er-viewBox,
   einfarbig über currentColor, ohne Flächen, Verläufe oder Schatten.

   Strichstärke: optisch einheitlich ~1,6 CSS-Pixel. Wird ein Icon kleiner
   als 24px gezeichnet, wird die Strichstärke im Markup gegengerechnet
   (z.B. 20px Kantenlänge -> stroke-width 1.9), damit alle Symbole gleich
   schwer wirken.

   Größenskala:
     12-13px  Pfeile in Links und Buttons
     18-20px  Ablauf-Schritte, Kontaktzeilen
     24px     Kartenplatzhalter
   Größer wird bewusst nicht verwendet: Piktogramme bleiben die zweite
   Ebene hinter Typografie, Zahlen und echten Fotos. */
.sym{flex:none;display:block;color:var(--akzent)}
.sym-20{width:20px;height:20px}
.eyebrow{
  font-family:var(--sx);font-size:var(--text-2xs);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--akzent-tief);margin-bottom:16px;display:inline-block
}
.dunkel .eyebrow{color:var(--akzent-hell)}
.hero .eyebrow{color:#4F765C;margin-bottom:14px}

/* ---------- Kopfleiste (ruhig, ohne Blur/Pill) ---------- */
.kopf-huelle{position:sticky;top:0;z-index:90;padding:18px 22px 0}
.kopf{
  max-width:var(--breite);margin:0 auto;display:flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.97);
  border:1px solid var(--linie);border-radius:var(--r-l);padding:8px 8px 8px 22px;height:64px;
  transition:box-shadow .3s var(--kurve),background .3s var(--kurve)
}
.kopf.tief{box-shadow:var(--schatten-s)}
.marke{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto;flex:none}
.marke-signet{width:34px;height:34px;flex:none;border-radius:8px;display:block}
.marke-text{display:flex;flex-direction:column;line-height:1.05}
.marke b{font-family:var(--sd);font-weight:700;font-size:var(--text-md);color:var(--tinte);letter-spacing:-.02em}
.marke span{font-family:var(--sm);font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tinte-matt);margin-top:3px}
.nav-gross{display:none}
.nav-gross a{position:relative;font-family:var(--sx);font-size:var(--text-sm);font-weight:600;color:var(--tinte-leise);
  text-decoration:none;padding:10px 10px;transition:color .2s}
.nav-gross a:hover{color:var(--tinte)}
.nav-gross a[aria-current="page"]{color:var(--tinte)}
.nav-gross a[aria-current="page"]::after{content:'';position:absolute;left:10px;right:10px;bottom:2px;height:2px;background:var(--akzent)}
.kopf > .sprachwahl{display:none}
.sprachwahl{position:relative;display:flex;align-items:center;gap:2px;flex:none}
.sprachwahl .schieber{display:none}
.sprachwahl button{position:relative;background:none;border:none;padding:6px 5px;min-height:34px;
  display:inline-flex;align-items:center;gap:5px;
  font-size:var(--text-2xs);font-family:var(--sx);font-weight:600;cursor:pointer;color:var(--tinte-matt);transition:color .2s}
.sprachwahl button:not(:last-child)::after{content:'/';position:absolute;right:-3px;color:var(--linie);font-weight:400}
.sprachwahl button.aktiv{color:var(--tinte);font-weight:700}
/* Flagge als zusätzliche Orientierung, nie als alleinige Information: das
   Sprachkürzel bleibt sichtbar und trägt den Zugänglichkeitsnamen, die Flagge
   ist aria-hidden. Kreisform über border-radius, das clippt das Inline-SVG:
   gleiche Silhouette für alle drei, damit die einfarbig rote chinesische
   Flagge nicht optisch schwerer wirkt als die gegliederten anderen beiden.
   14px bleibt deutlich unter der Schaltflächenhöhe von 34px, die Kopfzeile
   wächst dadurch nicht. */
.flagge{width:14px;height:14px;flex:none;display:block;border-radius:50%;
  box-shadow:0 0 0 1px rgba(32,40,35,.16)}
.schicht .sprachwahl{gap:8px;margin-top:18px}
.schicht .sprachwahl button{color:rgba(255,255,255,.62);padding:12px 20px;min-height:46px;
  font-size:var(--text-md);border-radius:var(--r-pill);transition:color .2s,background .2s}
.schicht .sprachwahl button.aktiv{color:var(--akzent-hell);background:rgba(255,255,255,.12)}
.schicht .sprachwahl button:not(:last-child)::after{content:none}
.schicht .flagge{width:18px;height:18px;box-shadow:0 0 0 1px rgba(255,255,255,.3)}

.kopf-cta{display:none;align-items:center;gap:8px;background:var(--akzent);color:#fff;text-decoration:none;
  font-family:var(--sx);font-weight:700;font-size:var(--text-md);line-height:1.2;padding:11px 13px;border-radius:var(--r-m);
  transition:background .2s;white-space:nowrap;flex:none}
.kopf-cta .pfeil{display:flex;align-items:center;justify-content:center;transition:transform .25s var(--kurve)}
.kopf-cta .pfeil svg{width:12px;height:12px}
.kopf-cta:hover{background:var(--akzent-tief)}
.kopf-cta:hover .pfeil{transform:translate(2px,-2px)}
.menue-tab{background:var(--silber);border:none;border-radius:50%;width:44px;height:44px;
  cursor:pointer;color:var(--tinte);display:flex;align-items:center;justify-content:center;flex:none;position:relative}
.menue-tab span{position:absolute;left:14px;width:16px;height:1.6px;background:currentColor;border-radius:2px;
  transition:transform .3s var(--kurve),opacity .2s}
.menue-tab span:nth-child(1){top:19px}
.menue-tab span:nth-child(2){top:25px}
.menue-tab[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menue-tab[aria-expanded="true"] span:nth-child(2){transform:translateY(-6px) rotate(-45deg)}

/* ---------- Menü-Vollbild (mobil) ---------- */
.schicht{position:fixed;inset:0;z-index:110;background:var(--tinte);display:flex;flex-direction:column;
  justify-content:center;padding:0 30px;opacity:0;pointer-events:none;transition:opacity .35s var(--kurve);overflow-y:auto}
.schicht.offen{opacity:1;pointer-events:auto}
.schicht nav{max-width:520px;width:100%;margin:auto}
.schicht a{display:flex;align-items:baseline;gap:14px;font-family:var(--sd);font-weight:600;
  font-size:clamp(21px,6vw,28px);color:#fff;text-decoration:none;padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.12);opacity:0;transform:translateY(10px);
  transition:opacity .4s var(--kurve),transform .4s var(--kurve)}
.schicht a::after{content:'→';margin-left:auto;color:var(--akzent-hell);opacity:0;transform:translateX(-6px);
  transition:opacity .2s var(--kurve),transform .2s var(--kurve)}
.schicht a:hover::after,.schicht a:focus-visible::after{opacity:1;transform:none}
.schicht.offen a{opacity:1;transform:none}
.schicht.offen a:nth-child(1){transition-delay:.05s}.schicht.offen a:nth-child(2){transition-delay:.09s}
.schicht.offen a:nth-child(3){transition-delay:.13s}.schicht.offen a:nth-child(4){transition-delay:.17s}
.schicht.offen a:nth-child(5){transition-delay:.21s}
.schicht a.schicht-cta{display:flex;width:fit-content;max-width:100%;margin:16px auto 0;padding:15px 30px;border:none;border-radius:var(--r-m);
  background:var(--akzent);color:#fff;font-size:var(--text-lg);font-weight:700;line-height:1.25;
  align-items:center;justify-content:center;gap:10px;text-align:center}
.schicht-cta::after{content:none}
/* Derselbe Pfeil wie bei allen anderen Termin-Buttons: der CTA im mobilen
   Menü war bisher der einzige ohne. */
.schicht-cta .pfeil{display:flex;align-items:center;justify-content:center;flex:none;
  transition:transform .25s var(--kurve)}
.schicht-cta .pfeil svg{width:13px;height:13px}
.schicht-cta:hover .pfeil{transform:translate(2px,-2px)}
/* Auf sehr schmalen Displays reicht der Platz sonst knapp nicht für eine
   Zeile, und "Termin anfragen" bricht um. */
@media (max-width:360px){.schicht a.schicht-cta{padding:15px 20px}}
.schicht-cta:hover{background:var(--akzent-tief)}
.schicht-fuss{margin-top:6px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);opacity:.9}
.schicht-fuss a{border:none;font-family:var(--sx);font-weight:600;font-size:var(--text-base);color:var(--akzent-hell);padding:5px 0}
.schicht-fuss a::after{content:''}
.schicht-zu{position:absolute;top:24px;right:24px;background:rgba(255,255,255,.08);border:none;
  color:#fff;border-radius:50%;width:46px;height:46px;font-size:17px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}

/* ---------- Knöpfe: Primary / Secondary / Icon-Action ---------- */
.kv,.kl{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-align:center;text-decoration:none;
  font-weight:700;font-size:var(--text-md);font-family:var(--sx);line-height:1.2;border:none;cursor:pointer;white-space:nowrap;
  border-radius:var(--r-m);transition:background .2s,border-color .2s,color .2s}
.kv{background:var(--akzent);color:#fff;padding:14px 22px}
.kv .pfeil{display:flex;align-items:center;justify-content:center;transition:transform .25s var(--kurve);flex:none}
.kv .pfeil svg{width:13px;height:13px}
.kv:hover{background:var(--akzent-tief)}
.kv:hover .pfeil{transform:translate(2px,-2px)}
.kv:active{transform:scale(.98)}
.kl{border:1.5px solid var(--linie);color:var(--tinte);background:var(--papier);padding:12.5px 22px}
.kl:hover{border-color:var(--tinte);background:var(--silber)}
.kl:active{transform:scale(.98)}
/* Auf dunklem Grund (Markengrün) liegt der grüne Akzent-Button zu nah an der
   Hintergrundfarbe und verliert an Sichtbarkeit – dort daher als heller
   Button mit dunkler Schrift statt grün-auf-grün. */
.schicht a.schicht-cta,.cta-band .kv{background:#fff;color:var(--tinte)}
.schicht a.schicht-cta:hover,.cta-band .kv:hover{background:var(--akzent-blass)}
.dunkel .kl{border-color:rgba(255,255,255,.25);color:#fff;background:transparent}
.dunkel .kl:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4)}
.kl.klein{padding:9px 16px;font-size:var(--text-sm);display:inline-flex;align-items:center;gap:8px}

/* ---------- Status (Punkt + Text, keine Pille) ---------- */
.status{display:inline-flex;align-items:center;gap:9px;font-size:var(--text-xs);font-weight:600;
  color:rgba(255,255,255,.85);margin-bottom:26px}
.status.hell{color:var(--tinte-leise)}
.punkt{width:7px;height:7px;border-radius:50%;background:var(--akzent-hell);flex:none}
.status.hell .punkt{background:var(--akzent)}
.punkt.zu{background:var(--gelb)}

/* ---------- Hero (helle Praxisfläche, Villa als erkennbarer Ortsbezug) ---------- */
.hero{position:relative;background:var(--grund);color:var(--tinte);overflow:hidden;isolation:isolate;padding-top:calc(var(--s8) + 20px)}
.hero-textur{position:absolute;inset:0;z-index:-2;
  background-image:radial-gradient(rgba(53,98,71,.05) 1px,transparent 1.5px),
             linear-gradient(170deg,rgba(250,251,248,.42) 10%,rgba(250,251,248,.28) 50%,rgba(250,251,248,.46) 100%),
             url('../img/villa-aussenansicht.webp');
  background-size:26px 26px,cover,cover;
  background-position:0 0,center,center 60%;
  background-repeat:repeat,no-repeat,no-repeat}
/* Gezielter, weicher Schleier hinter dem Textblock statt einer Vollabdunkelung:
   sorgt für sicheren Kontrast bei Headline/Subline/CTA, während die Villa
   im übrigen Hero klar erkennbar bleibt. Ausrichtung wechselt mit dem
   Grid (oben->unten gestapelt auf Mobile, links->rechts ab Desktop). */
.hero-schleier{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(250,251,248,.97) 0%,rgba(250,251,248,.94) 58%,rgba(250,251,248,0) 88%)}
.hero-gitter{display:grid;gap:var(--s6);align-items:center}
.hero h1{margin-bottom:20px;max-width:15ch}
.hero h1 i{font-style:normal;color:var(--akzent)}
/* Fokuszeile: die drei Hauptschwerpunkte als ruhige Textanker direkt unter der
   Headline. Mobil gestapelt mit feiner Markenlinie, ab Tablet als eine Zeile
   mit dezenten Trennpunkten - bewusst Typografie statt Badges. */
.hero-fokus{display:flex;flex-direction:column;gap:9px;margin-bottom:24px;max-width:44ch;
  border-left:2px solid var(--akzent);padding-left:16px}
.hero-fokus a{font-family:var(--sx);font-weight:700;font-size:var(--text-md);color:var(--akzent-tief);
  text-decoration:none;line-height:var(--leading-snug);transition:color .2s}
.hero-fokus a:hover{color:var(--tinte);text-decoration:underline;text-underline-offset:3px}
/* Vertrauenszeile direkt unter der Headline: Name und Qualifikation früh
   sichtbar, aber als ruhige Typografie, nicht als Karte oder Badge-Reihe.
   Größen bewusst identisch zur .arzt-plakette weiter unten auf der Seite. */
.hero-arzt{margin:18px 0 22px;line-height:var(--leading-snug)}
.hero-arzt b{display:block;font-family:var(--sd);font-weight:700;font-size:var(--text-md);color:var(--tinte)}
.hero-arzt-titel{display:block;color:var(--tinte-leise);font-size:var(--text-sm);margin-top:3px}
.hero-arzt-zusatz{display:block;color:var(--tinte-leise);font-size:var(--text-xs);margin-top:4px}
.hero-unter{font-size:var(--text-base);color:var(--tinte-leise);margin-bottom:30px;max-width:46ch;line-height:var(--leading-relaxed)}
.knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:var(--s6)}
.hero-visual{position:relative;max-width:min(72vw,440px);margin:0 auto}
.hero-visual::before{content:'';position:absolute;inset:-28px -20px;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(250,251,248,.94) 0%,rgba(250,251,248,.74) 55%,rgba(250,251,248,0) 85%)}
.hero-visual svg{width:100%;height:auto;display:block}
.hero-visual .hv-track{fill:#FFFFFF;stroke:var(--linie);stroke-width:1.5}
.hero-visual .hv-fill{fill:none;stroke:var(--tinte-leise);stroke-width:1.5;transform-origin:left center;transform:scaleX(0);transition:transform .7s var(--kurve) .1s}
.hero-visual .hv-fill.bio{fill:var(--akzent);stroke:none;transition-delay:.3s}
.hero-visual.sichtbar .hv-fill{transform:scaleX(1)}
.hero-visual .hv-verbindung{stroke:var(--tinte-leise);stroke-width:1;stroke-dasharray:3 5;opacity:0;transition:opacity .5s var(--kurve) .7s}
.hero-visual.sichtbar .hv-verbindung{opacity:.6}
.hero-visual .hv-marker{fill:var(--tinte-leise);opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.5);
  transition:opacity .5s var(--kurve) .5s,transform .5s var(--kurve) .5s}
.hero-visual .hv-marker.bio{fill:var(--akzent);transition-delay:.7s}
.hero-visual.sichtbar .hv-marker{opacity:1;transform:scale(1)}
.hero-visual .beschriftung{font-family:var(--sm);font-size:11px;font-weight:600;letter-spacing:.08em;fill:var(--tinte-leise)}
.hero-visual .beschriftung.bio{fill:var(--akzent)}
.hero-visual .hv-value{font-family:var(--sd);font-size:20px;font-weight:700;fill:var(--tinte-leise);opacity:0;transition:opacity .4s var(--kurve) .6s}
.hero-visual .hv-value.bio{fill:var(--akzent);transition-delay:.8s}
.hero-visual.sichtbar .hv-value{opacity:1}
.hero-visual .hv-delta{font-family:var(--sd);font-size:15px;font-weight:700;fill:var(--akzent);opacity:0;transition:opacity .4s var(--kurve) .9s}
.hero-visual.sichtbar .hv-delta{opacity:1}
.hero-visual-legende{margin-top:16px;font-size:var(--text-2xs);color:var(--tinte-leise);text-align:center;
  line-height:var(--leading-normal);max-width:34ch;margin-left:auto;margin-right:auto}

/* ---------- Seitenkopf mit Villa-Außenansicht (wiederkehrendes Ortsmotiv) ---------- */
.seiten-kopf-villa{position:relative;overflow:hidden;isolation:isolate;padding-bottom:var(--s5)}
/* Zwei Ausnahmen vom Standardabstand, damit der Seitenkopf zum jeweiligen
   Folgeelement passt: -luftig auf blog.html und ueber-uns.html (direkt
   folgender Textblock), -kompakt auf leistungen.html (direkt folgendes
   Sprachband und die klebende Sprungnavigation). */
.seiten-kopf-villa.kopf-villa-luftig{padding-bottom:var(--s6)}
.seiten-kopf-villa.kopf-villa-kompakt{padding-top:var(--s6);padding-bottom:var(--s6)}
.seiten-kopf-villa .kopf-textur{position:absolute;inset:0;z-index:-2;
  background-image:radial-gradient(rgba(53,98,71,.05) 1px,transparent 1.5px),
             linear-gradient(170deg,rgba(250,251,248,.42) 10%,rgba(250,251,248,.28) 50%,rgba(250,251,248,.46) 100%),
             url('../img/villa-aussenansicht.webp');
  background-size:26px 26px,cover,cover;
  background-repeat:repeat,no-repeat,no-repeat}
.seiten-kopf-villa .kopf-schleier{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(250,251,248,.92) 0%,rgba(250,251,248,.87) 55%,rgba(250,251,248,.68) 82%,rgba(250,251,248,.32) 100%)}
.seiten-kopf-villa.pos-leistungen .kopf-textur{background-position:0 0,center 35%,center 35%}
.seiten-kopf-villa.pos-ueber-uns .kopf-textur{background-position:0 0,center 68%,center 68%}
.seiten-kopf-villa.pos-kontakt .kopf-textur{background-position:0 0,right 30% top 50%,right 30% top 50%}
.seiten-kopf-villa.pos-blog .kopf-textur{background-position:0 0,left 25% top 60%,left 25% top 60%}
/* Intro-Absatz auf hellerem Villa-Schleier: dunklerer Neutralton statt --tinte-leise,
   damit der Kontrast trotz sichtbarerem Gebäude sicher AA-konform bleibt. */
.seiten-kopf-villa .seiten-intro{color:var(--tinte-2)}

/* ---------- Statleiste (keine Karten, Trennlinien) ---------- */
.statleiste{border-bottom:1px solid var(--linie);padding:0}
/* Auf ueber-uns.html steht die Leiste nicht direkt unter dem Seitenkopf. */
.statleiste.statleiste-abgesetzt{margin-top:var(--s5)}
.sg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.sf{padding:var(--s5) var(--s3);border-top:1px solid var(--linie);border-right:1px solid var(--linie)}
.sf:nth-child(2n){border-right:none}
.sf b{display:block;font-family:var(--sd);font-weight:700;font-size:clamp(1.35rem,3.6vw,2.3rem);color:var(--tinte);
  letter-spacing:-.02em;line-height:1.1}
.sf span{display:block;font-size:var(--text-xs);color:var(--tinte-leise);margin-top:8px;line-height:var(--leading-snug)}

/* ---------- Abschnittsrahmen ---------- */
.sp-kopf{max-width:60ch;margin-bottom:var(--s6)}
.sp-kopf p{color:var(--tinte-leise);font-size:var(--text-lg);margin-top:14px;line-height:var(--leading-relaxed)}
/* Ruhigerer Abschnittskopf fuer nachgeordnete Bereiche: bewusst kleiner als der
   Kopf der Hauptschwerpunkte, damit die Rangfolge auch ohne Farbe lesbar ist. */
.sp-kopf-klein{margin-bottom:var(--s5)}
.sp-kopf-klein h2{font-size:clamp(1.25rem,2.4vw,1.55rem)}
.sp-kopf-klein p{font-size:var(--text-base);margin-top:10px;max-width:58ch}
.sp-fuss{margin-top:var(--s6)}
.sp-fuss.sp-fuss-weit{padding-bottom:var(--s7)}
/* Einleitender Rahmentext der Leistungsseite. */
.leist-rahmentext{max-width:70ch;margin-bottom:var(--s6)}

/* ---------- Leistungsübersicht (Startseite): editorial statt Bento ---------- */
.leist-feature-gitter{display:grid;gap:0;border-top:2px solid var(--akzent);background:var(--nebel);
  border-radius:var(--r-m);padding:var(--s3) var(--s4) 0}
.leist-feature{display:block;text-decoration:none;color:inherit;padding:var(--s5) 0;
  border-bottom:1px solid var(--linie)}
.leist-feature-gitter .leist-feature:last-child{border-bottom:none}
/* Bewusst ohne Piktogramm: Nummer und ausgeschriebene Überschrift benennen
   das Thema eindeutig. Getestete Symbole (Helix, Verlaufskurve, Regelkreis)
   waren bei 26px nicht zuverlässig lesbar und wurden wieder entfernt. */
.leist-feature-zahl{display:block;font-family:var(--sd);font-size:clamp(1.4rem,3vw,1.9rem);font-weight:700;
  color:var(--akzent);letter-spacing:-.01em;margin-bottom:10px}
.leist-feature h3{font-size:clamp(1.3rem,2.6vw,1.65rem);margin-bottom:12px;max-width:22ch}
.leist-feature p{color:var(--tinte-leise);font-size:var(--text-md);line-height:var(--leading-relaxed);max-width:52ch;margin-bottom:18px}
.leist-feature-link{display:inline-flex;align-items:center;gap:8px;color:var(--tinte);font-weight:700;font-size:var(--text-sm)}
.leist-feature-link svg{width:12px;height:12px;flex:none;transition:transform .25s var(--kurve)}
.leist-feature:hover .leist-feature-link svg{transform:translate(2px,-2px)}
.leist-feature:hover h3{color:var(--akzent-tief)}

.leist-liste{border-top:1px solid var(--linie);margin-top:0}
.leist-zeile{display:flex;align-items:baseline;gap:18px;padding:20px 4px;text-decoration:none;color:inherit;
  border-bottom:1px solid var(--linie);transition:background .2s}
.leist-zeile:hover{background:var(--nebel)}
.leist-zeile:hover .leist-zeile-titel{color:var(--akzent-tief)}
.leist-zeile:hover .leist-zeile-pfeil{transform:translate(2px,-2px)}
.leist-zeile-zahl{font-family:var(--sm);font-size:var(--text-xs);color:var(--tinte-matt);flex:none;width:22px}
.leist-zeile-titel{font-family:var(--sd);font-weight:700;font-size:var(--text-md);color:var(--tinte);flex:1 1 auto;min-width:0;transition:color .2s}
.leist-zeile-text{color:var(--tinte-leise);font-size:var(--text-sm);line-height:var(--leading-normal);flex:1;display:none}
.leist-zeile-pfeil{margin-left:auto;flex:none;color:var(--tinte-matt);transition:transform .25s var(--kurve)}
.leist-zeile-pfeil svg{width:12px;height:12px}

/* ---------- Farbflächen (sehr sparsam: ruhige Salbei-Abschnitte, feine Akzentlinie) ---------- */
.abschnitt-nebel{background:var(--nebel)}
.rahmen-akzent{border-left:3px solid var(--akzent);padding-left:22px}

/* ---------- Editorial Split (Über uns / Person) ---------- */
.split{display:grid;gap:var(--s6);align-items:start}
.split-medien{position:relative}
.platzhalter-bild{background:var(--nebel);border:1px solid var(--linie);border-radius:var(--r-l);
  aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;text-align:center;padding:36px;overflow:hidden}
.platzhalter-bild p{color:var(--tinte-matt);font-size:var(--text-xs);line-height:1.6;max-width:20ch}
.platzhalter-bild.foto{padding:0}
.platzhalter-bild.foto img{width:100%;height:100%;object-fit:cover;object-position:40% center}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .platzhalter-bild.foto img{transition:transform .5s var(--kurve)}
  .platzhalter-bild.foto:hover img{transform:scale(1.015)}
}
.arzt-plakette{margin-top:16px}
.arzt-plakette-name{font-family:var(--sd);font-weight:700;font-size:var(--text-md);color:var(--tinte)}
.arzt-plakette-titel{color:var(--tinte-leise);font-size:var(--text-sm);margin-top:3px}
.arzt-plakette-zusatz{color:var(--tinte-leise);font-size:var(--text-xs);margin-top:5px}
.arzt-plakette-seit{color:var(--tinte-matt);font-size:var(--text-2xs);letter-spacing:.02em;
  margin-top:9px;padding-top:9px;border-top:1px solid var(--linie)}
.split-liste{display:grid;gap:15px;margin-top:24px}
.split-liste li{position:relative;padding-left:20px;font-size:var(--text-base);color:var(--tinte-leise);line-height:var(--leading-normal)}
.split-liste li::before{content:'';position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:50%;background:var(--akzent)}
.zitat{font-family:var(--sd);font-weight:600;font-size:clamp(1.3rem,2.6vw,1.7rem);color:var(--tinte);
  line-height:var(--leading-snug);margin:26px 0;letter-spacing:-.01em;padding-left:20px;border-left:3px solid var(--akzent)}
.zitat span{color:var(--akzent-tief)}

/* ---------- Die Praxis / Ambiente ---------- */
.galerie{display:grid;gap:14px}
.galerie-bild{position:relative;border-radius:var(--r-m);overflow:hidden;
  background:var(--nebel);border:1px solid var(--linie);
  aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--tinte-matt);
  text-align:center;padding:18px;font-size:var(--text-2xs);line-height:var(--leading-normal)}
.galerie-bild svg{width:28px;height:28px;color:var(--tinte-matt);margin-bottom:12px;flex:none}
.galerie-bild span{position:relative}
.galerie-bild.gross{aspect-ratio:16/10}
.galerie-bild.foto{padding:0}
.galerie-bild.foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- Ablauf / Timeline ---------- */
.zeitachse{position:relative;display:grid;gap:0}
.zr{position:relative;padding:0 0 var(--s6) 60px;border-left:2px solid var(--linie)}
.zr:last-child{border-color:transparent;padding-bottom:0}
.zr-marke{position:absolute;left:-23px;top:0;width:46px;height:46px;border-radius:50%;background:var(--papier);
  border:2px solid var(--tinte);color:var(--tinte);display:flex;align-items:center;justify-content:center;
  font-family:var(--sd);font-weight:700;font-size:var(--text-md);transition:background .3s,color .3s,border-color .3s}
.zr.da .zr-marke{background:var(--akzent);color:#fff;border-color:var(--akzent)}
.zr h3{margin-bottom:9px}
/* Ablauf-Schritte: Symbol begleitet die Überschrift, die Nummer im Kreis
   bleibt das führende Orientierungselement. Auf schmalen Displays etwas
   kleiner, damit lange Begriffe die Textspalte behalten. */
/* flex-start statt center: bei zweizeiligen Überschriften stünde das Symbol
   sonst zwischen den Zeilen. Der kleine Versatz zentriert es optisch auf der
   ersten Zeile. */
.zr-h3{display:flex;align-items:flex-start;gap:9px}
.zr-h3 .sym{width:18px;height:18px;margin-top:4px;color:var(--akzent);opacity:.85}
@media (min-width:760px){.zr-h3 .sym{width:20px;height:20px;margin-top:5px}}
.zr p{color:var(--tinte-leise);font-size:var(--text-base);max-width:56ch;line-height:var(--leading-relaxed)}

/* ---------- Leistungen: Sub-Navigation (sticky Leiste, prägnant, auf allen Bildschirmgrößen horizontal) ---------- */
.unter-nav-huelle{position:sticky;top:var(--nav-h);z-index:60;background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--linie);margin-bottom:var(--s6)}
.unter-nav{position:relative;max-width:var(--breite);margin:0 auto;padding:0 22px;display:flex;gap:26px;
  overflow-x:auto;scrollbar-width:none}
.unter-nav::-webkit-scrollbar{display:none}
/* Dezenter Fade-Hinweis: signalisiert auf Mobile, dass die Leiste horizontal
   weitergeht, ohne die Navigation selbst zu verändern. */
.unter-nav-huelle::after{content:'';position:absolute;top:0;right:0;bottom:0;width:28px;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.97));pointer-events:none}
@media (min-width:900px){.unter-nav-huelle::after{display:none}}
.unter-nav a{position:relative;font-size:var(--text-base);font-weight:700;color:var(--tinte-leise);text-decoration:none;
  padding:16px 0;transition:color .2s;flex:none;white-space:nowrap}
.unter-nav a:hover{color:var(--tinte)}
.unter-nav a.aktiv{color:var(--tinte)}
.unter-nav a.aktiv::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;
  border-radius:2px;background:var(--akzent)}

/* ---------- Leistungen: Detailblöcke ---------- */
.leist-block{border-bottom:1px solid var(--linie);padding:var(--s7) 0;display:grid;gap:var(--s5);
  grid-template-columns:1fr}
.leist-block:first-of-type{padding-top:var(--s4)}
.leist-block:last-of-type{border-bottom:none}
.leist-block-marke{display:flex;align-items:center}
.leist-block-marke .zahl{font-family:var(--sm);font-size:var(--text-base);color:var(--tinte-matt);letter-spacing:.06em}
/* Hauptschwerpunkte (01-03): stärkere Zahl als ruhiges Orientierungssignal,
   Trenner oben markiert Beginn der drei Kernleistungen. */
.leist-block.hauptschwerpunkt:first-of-type{border-top:2px solid var(--akzent);padding-top:var(--s5)}
.leist-block.hauptschwerpunkt .leist-block-marke{flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.leist-block.hauptschwerpunkt .leist-block-marke .zahl{font-family:var(--sd);font-size:clamp(1.5rem,2.6vw,1.9rem);
  font-weight:700;color:var(--akzent);letter-spacing:-.01em}
.marke-label{font-family:var(--sx);font-size:var(--text-2xs);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--akzent-tief);background:var(--akzent-blass);
  border-radius:var(--r-pill);padding:4px 11px}
/* Terminlink am Ende einer Hauptleistung: klarer Leistungsbezug, aber sichtbar
   schwächer als der primäre Termin-Button, damit es keine CTA-Konkurrenz gibt. */
.leist-termin-link{display:inline-flex;align-items:center;gap:8px;margin-top:22px;
  font-family:var(--sx);font-weight:700;font-size:var(--text-sm);color:var(--akzent);text-decoration:none;
  border-bottom:1.5px solid var(--silber-2);padding-bottom:4px;transition:color .2s,border-color .2s}
.leist-termin-link svg{width:12px;height:12px;transition:transform .25s var(--kurve)}
.leist-termin-link:hover{color:var(--akzent-tief);border-color:var(--akzent)}
.leist-termin-link:hover svg{transform:translate(2px,-2px)}
.leist-trenner{padding-top:var(--s6)}
.leist-lesen{margin-top:12px;font-size:var(--text-sm);line-height:var(--leading-normal)}
.leist-lesen a{color:var(--tinte-leise);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--silber-2);transition:color .2s}
.leist-lesen a:hover{color:var(--akzent-tief);text-decoration-color:var(--akzent)}
.leist-block-text{max-width:var(--measure)}
.leist-block-text p{color:var(--tinte-leise);margin-bottom:15px;font-size:var(--text-md);line-height:var(--leading-relaxed)}
.leist-block-text h3{margin:34px 0 12px;font-size:19px;font-weight:700;color:var(--tinte);line-height:1.3}
.punktliste{display:grid;gap:12px;margin:8px 0 8px}
.punktliste li{position:relative;padding-left:20px;font-size:var(--text-base);color:var(--tinte-leise);line-height:var(--leading-normal)}
.punktliste li::before{content:'';position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--akzent)}
.unterpunkte{display:grid;gap:14px;margin-top:22px}
.unterpunkt{background:var(--nebel);border:1px solid var(--linie);border-radius:var(--r-m);padding:20px 22px}
.unterpunkt h3{margin:0 0 8px;font-size:17px;font-weight:700}
.unterpunkt p{color:var(--tinte-leise);font-size:var(--text-sm);margin:0;line-height:var(--leading-normal)}

/* ---------- Buch-Vorstellung (Abnehmen Plus Ratgeber) ---------- */
.buch{display:grid;gap:22px;background:var(--nebel);border:1px solid var(--linie);border-radius:var(--r-l);
  padding:22px;margin-top:28px}
.buch-cover{width:132px;height:auto;border-radius:var(--r-s);border:1px solid var(--linie);justify-self:start}
.buch-label{display:inline-block;font-family:var(--sx);font-size:var(--text-2xs);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--akzent-tief);margin-bottom:10px}
.buch-info p{color:var(--tinte-leise);font-size:var(--text-base);line-height:var(--leading-relaxed);margin-bottom:14px}
.buch-info h3{margin:0 0 8px}
.buch-info a.kl{white-space:normal;text-align:left;max-width:100%;margin-top:16px}
.buch-aktionen{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.buch-preis{font-family:var(--sd);font-weight:700;font-size:var(--text-xl);color:var(--tinte)}
.buch-hinweis{font-size:var(--text-xs);color:var(--tinte-matt)}

.leist-block-text p.lead{font-family:var(--sx);font-weight:600;font-size:var(--text-lg);line-height:var(--leading-normal);color:var(--tinte-2);margin-bottom:20px}
.leist-block-text .kernaussage{background:var(--akzent-blass);border-radius:var(--r-m);padding:24px 26px;margin:24px 0;text-align:center}
.leist-block-text .kernaussage p{color:var(--tinte-2);font-family:var(--sd);font-weight:700;font-size:var(--text-xl);line-height:1.45;margin:0 auto;max-width:46ch}
.leist-block-text .zeitachse{margin:28px 0 6px}
.leist-block-text .zr{padding-left:54px}
.leist-block-text .zr-marke{width:40px;height:40px;left:-20px;font-size:var(--text-sm)}
.leist-block-text .zr h3{margin:0 0 6px;font-size:var(--text-base);font-weight:700}
.leist-block-text .zr p{font-size:var(--text-sm);max-width:52ch}
.leist-block-text .notiz-klein{font-size:var(--text-xs);color:var(--tinte-matt);margin-top:-6px;line-height:var(--leading-normal)}

.leist-foto{margin:26px 0;border-radius:var(--r-m);overflow:hidden;background:var(--nebel)}
.leist-foto img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.leist-foto figcaption{font-family:var(--sm);font-size:var(--text-2xs);color:var(--tinte-matt);padding:10px 2px 0;letter-spacing:.02em}
.leist-foto-galerie{margin:26px 0}
.leist-foto-galerie-grid{display:grid;grid-template-columns:repeat(3,minmax(90px,140px));gap:10px;justify-content:center}
.leist-foto-galerie-grid img{display:block;width:100%;height:auto;aspect-ratio:4/7;object-fit:cover;object-position:center 12%;border-radius:var(--r-m);background:var(--nebel)}
.leist-foto-galerie figcaption{font-family:var(--sm);font-size:var(--text-2xs);color:var(--tinte-matt);padding:10px 2px 0;letter-spacing:.02em;text-align:center}

/* ---------- Hinweiskasten ---------- */
.hinweis{background:var(--nebel);border:1px solid var(--linie);border-radius:var(--r-m);padding:22px 24px;
  margin-top:var(--s4);position:relative;padding-left:28px}
.hinweis::before{content:'';position:absolute;left:0;top:22px;bottom:22px;width:3px;border-radius:3px;background:var(--akzent)}
.hinweis.hinweis-abstand{margin:var(--s6) 0}
.hinweis.hinweis-abstand-unten{margin-bottom:var(--s6)}
.hinweis.warnung::before{background:var(--gelb)}
.hinweis strong{display:block;font-family:var(--sd);font-weight:700;font-size:var(--text-base);color:var(--tinte);margin-bottom:7px}
.hinweis p{font-size:var(--text-sm);color:var(--tinte-leise);line-height:var(--leading-relaxed)}

/* ---------- CTA-Band (dunkles Waldgrün) ---------- */
.cta-band{background:var(--tinte);color:#fff;position:relative;overflow:hidden;isolation:isolate}
.cta-band::before{content:'';position:absolute;inset:0;z-index:-1;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.5px);
  background-size:26px 26px}
.cta-gitter{display:flex;flex-direction:column;gap:26px;align-items:flex-start}
.cta-band h2{color:#fff;max-width:16ch}
.cta-band p{color:rgba(255,255,255,.72);font-size:var(--text-lg);max-width:48ch;margin-top:12px}

/* ---------- Kontakt ---------- */
.k-liste{display:grid;gap:0;border-top:1px solid var(--linie)}
.k-zeile{display:flex;gap:14px;padding:20px 0;border-bottom:1px solid var(--linie)}
.k-icon{flex:none;width:34px;height:34px;border-radius:50%;background:var(--silber);color:var(--akzent-tief);
  display:flex;align-items:center;justify-content:center}
/* Das Symbol war mit 16px in der 34er-Fläche zu klein und mit 1,07px Strich
   deutlich dünner als jedes andere Icon der Seite. 20px bei 1,9 im 24er-viewBox
   ergibt wieder die einheitlichen ~1,6px Strichstärke (siehe Icon-Skala). */
.k-icon svg{width:20px;height:20px}
.k-icon svg [stroke-width]{stroke-width:1.9}
.k-zeile-text{min-width:0}
.k-zeile b{display:block;font-family:var(--sx);font-weight:700;font-size:var(--text-xs);letter-spacing:.03em;color:var(--tinte-matt);margin-bottom:6px}
.k-zeile a{color:var(--akzent);font-size:var(--text-md);text-decoration:none;line-height:var(--leading-relaxed);font-weight:600}
.k-zeile span{color:var(--tinte-2);font-size:var(--text-md);line-height:var(--leading-relaxed)}
.k-zeile a:hover{color:var(--akzent-tief);text-decoration:underline}
.stunden{width:100%;border-collapse:collapse;margin-top:2px}
.stunden td{padding:7px 0;font-size:var(--text-base);color:var(--tinte-leise)}
.stunden td:first-child{font-weight:600;color:var(--tinte-2);width:42%}

.kontakt-block-titel{font-size:clamp(1.3rem,2.6vw,1.65rem);margin-bottom:20px}

/* ---------- Anfahrtsskizze ---------- */
.anfahrt-skizze{margin-top:26px}
.anfahrt-titel{font-size:clamp(1.3rem,2.6vw,1.65rem);margin-bottom:14px}
.anfahrt-grafik{height:clamp(220px,66vw,300px);border-radius:var(--r-m);background:var(--nebel);border:1px solid var(--linie);overflow:hidden}
.anfahrt-grafik iframe{width:100%;height:100%;display:block;border:0;filter:grayscale(.15) contrast(.97)}
.karten-platzhalter{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:var(--s4);text-align:center}
/* flex:none, sonst staucht die Spalte den Pin auf schmalen Displays
   vertikal zusammen und die Strichstärke wird ungleichmäßig. */
.karten-pin{width:24px;height:24px;flex:none;color:var(--tinte-leise)}
.karten-platzhalter p{font-size:var(--text-xs);color:var(--tinte-leise);max-width:26ch;line-height:var(--leading-normal)}
.karten-platzhalter .karten-adresse{font-family:var(--sd);font-weight:700;font-size:var(--text-md);
  color:var(--tinte-2);max-width:none;margin-top:2px}
.karten-platzhalter .karten-ort{margin-top:-4px;margin-bottom:4px}
.karten-laden-btn{font-family:var(--sx);font-weight:600;font-size:var(--text-sm);color:#fff;background:var(--akzent);
  border:none;border-radius:var(--r-pill);padding:10px 22px;cursor:pointer;transition:background .2s var(--kurve)}
.karten-laden-btn:hover{background:var(--akzent-tief)}
.karten-laden-btn:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.anfahrt-adresse-kurz{display:none}
.anfahrt-legende{margin-top:14px;font-size:var(--text-sm);color:var(--tinte-leise);line-height:var(--leading-relaxed)}
.anfahrt-route{margin-top:16px;width:fit-content;max-width:100%}

/* ---------- Formular (eine ruhige Zone statt Card-in-Card) ---------- */
.formular{background:var(--nebel);border:1px solid var(--linie);border-radius:var(--r-l);padding:28px 24px}
.feld{margin-bottom:18px}
.feld label{display:block;font-size:var(--text-sm);font-weight:700;color:var(--tinte-2);margin-bottom:8px}
.feld input,.feld select,.feld textarea{
  width:100%;border:1.5px solid var(--linie);border-radius:var(--r-s);padding:13px 15px;font-size:16px;
  font-family:var(--sx);color:var(--tinte-2);background:var(--papier);transition:border-color .2s;min-height:var(--tipp)
}
.feld textarea{min-height:108px;resize:vertical}
.feld input:focus,.feld select:focus,.feld textarea:focus{border-color:var(--akzent);outline:none}
.feld.fehler input,.feld.fehler textarea{border-color:var(--rot)}
.feld-fehler{display:none;color:var(--rot);font-size:var(--text-2xs);margin-top:7px}
.feld.fehler .feld-fehler{display:block}
.feld-hinweis{font-size:var(--text-2xs);color:var(--tinte-matt);margin-top:8px;line-height:var(--leading-normal)}
.leistungs-feld{border:none;padding:0;margin:0 0 18px;min-width:0}
.leistungs-feld legend{display:block;width:100%;padding:0;font-size:var(--text-sm);font-weight:700;color:var(--tinte-2);margin-bottom:8px}
.vorauswahl-hinweis{font-size:var(--text-2xs);color:var(--akzent-tief);background:var(--akzent-blass);
  border-radius:var(--r-s);padding:9px 12px;margin-bottom:10px;line-height:var(--leading-normal)}
.leistungs-checks{border:1.5px solid var(--linie);border-radius:var(--r-s);overflow:hidden;background:var(--papier)}
.leistungs-check{display:flex;align-items:center;gap:12px;padding:13px 15px;min-height:var(--tipp);cursor:pointer;
  font-size:var(--text-sm);color:var(--tinte-2);border-bottom:1px solid var(--linie);transition:background .15s}
.leistungs-check:last-child{border-bottom:none}
.leistungs-check:hover{background:var(--nebel)}
.leistungs-check:has(input:checked){background:var(--akzent-blass)}
.leistungs-check:focus-within{outline:2px solid var(--akzent);outline-offset:-2px}
.leistungs-check input[type=checkbox]{width:18px;height:18px;min-width:18px;flex:none;accent-color:var(--akzent);
  cursor:pointer;border:1.5px solid #AFC3B4;border-radius:4px}
/* Spamschutz ohne externen Dienst: das Feld ist vollstaendig ausgeblendet,
   zusaetzlich traegt es aria-hidden und tabindex="-1" im HTML. Es erreicht
   damit weder Maus, Tastatur noch Screenreader — nur Bots fuellen es aus. */
.koeder{display:none}
.formular-datenschutz{font-size:var(--text-2xs);color:var(--tinte-matt);
  line-height:var(--leading-normal);margin:0 0 16px}
.formular-datenschutz a{color:var(--akzent-tief);font-weight:600;text-decoration:underline}
.absenden{width:100%;background:var(--akzent);color:#fff;border:none;border-radius:var(--r-m);
  padding:16px 24px;font-weight:700;font-size:var(--text-md);font-family:var(--sx);cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;transition:background .2s}
.absenden:hover{background:var(--akzent-tief)}
.absenden:disabled{opacity:.7;cursor:default}
.spinner{width:16px;height:16px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);
  border-top-color:#fff;display:none;animation:drehen .7s linear infinite}
.laedt .spinner{display:inline-block}
.laedt .absenden-text{opacity:.85}
@keyframes drehen{to{transform:rotate(360deg)}}
.meldung{display:none;background:var(--akzent-blass);border-radius:var(--r-m);padding:16px 18px;margin-top:16px;
  font-size:var(--text-sm);color:var(--akzent-tief);border:1px solid rgba(46,107,76,.2)}
.meldung.an{display:block;animation:rein .3s var(--kurve)}
.formular-fehler{display:none;background:#FBEEEC;border-radius:var(--r-m);padding:16px 18px;margin-top:16px;
  font-size:var(--text-sm);color:var(--tinte-2);line-height:var(--leading-relaxed);border:1px solid rgba(192,72,63,.25)}
.formular-fehler a{color:var(--rot);font-weight:600}
.formular-fehler.an{display:block;animation:rein .3s var(--kurve)}
@keyframes rein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.hinweistext{font-size:var(--text-2xs);color:var(--tinte-matt);margin-top:16px;line-height:1.6}
.hinweistext.hinweistext-anschluss{margin-top:0;margin-bottom:16px}
.dunkel .hinweistext{color:rgba(255,255,255,.55)}

/* ---------- Behandlungssprache ----------
   Der Hinweis ist eine Sachinformation, keine Warnung: ruhige Salbeifläche,
   linke Akzentkante, kein Rot, kein Ausrufezeichen-Symbol. Die Box steht auf
   der Kontaktseite in jeder Sprachfassung; das schmale Band und die
   Fußzeile erscheinen nur in der englischen und chinesischen Fassung
   (Klassen body.spr-en / body.spr-zh aus site.js). Vorgabe ist ausdrücklich,
   NICHT zu behaupten, die Praxis stelle Dolmetscher bereit. */
.sprach-hinweis{background:var(--akzent-blass);border-left:3px solid var(--akzent);
  border-radius:var(--r-s);padding:16px 18px;margin:0 0 20px}
.sprach-hinweis-kopf{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.sprach-hinweis-kopf .sym{width:18px;height:18px;color:var(--akzent)}
.sprach-hinweis-kopf b{font-family:var(--sx);font-size:var(--text-sm);font-weight:700;color:var(--tinte)}
.sprach-hinweis p{font-size:var(--text-xs);color:var(--tinte-2);line-height:var(--leading-relaxed);margin:0}
.sprach-hinweis p + p{margin-top:8px}

/* Nur in der englischen und chinesischen Fassung sichtbar. Standard ist
   ausgeblendet, damit ohne JavaScript (= deutsche Fassung) nichts aufblitzt. */
.nur-fremdsprache{display:none}
body.spr-en .nur-fremdsprache,body.spr-zh .nur-fremdsprache{display:block}

.sprach-band{background:var(--nebel);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);padding:0}
.sprach-band .h{display:flex;align-items:flex-start;gap:11px;padding-top:15px;padding-bottom:15px}
.sprach-band .sym{width:18px;height:18px;margin-top:2px;color:var(--akzent)}
.sprach-band p{font-size:var(--text-xs);color:var(--tinte-2);line-height:var(--leading-normal);margin:0;max-width:82ch}

/* ---------- Blog: Kartenraster (Weiterlesen-Widgets) ---------- */
.blog-gitter{display:grid;gap:22px}
.blog-karte{display:block;text-decoration:none;color:inherit;background:var(--papier);border:1px solid var(--linie);
  border-radius:var(--r-l);overflow:hidden;transition:border-color .2s}
.blog-karte:hover{border-color:var(--tinte)}
.blog-bild{aspect-ratio:16/10;background:linear-gradient(155deg,var(--nebel),var(--akzent-blass));position:relative;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.blog-bild::before{content:'';position:absolute;inset:0;
  background-image:radial-gradient(rgba(53,98,71,.06) 1px,transparent 1.5px);
  background-size:22px 22px}
.blog-bild svg{width:44%;height:44%;position:relative;color:var(--akzent)}
.blog-karte-info{position:relative;padding:24px 22px 26px}
.blog-kategorie{display:inline-flex;align-items:center;gap:8px;font-family:var(--sx);font-size:var(--text-2xs);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--akzent-tief);margin-bottom:14px}
.blog-kategorie::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}
.blog-karte-info h2{font-size:var(--text-xl);margin-bottom:10px;line-height:1.3}
.blog-karte-info p{color:var(--tinte-leise);font-size:var(--text-base);line-height:var(--leading-relaxed);margin-bottom:16px}
.blog-meta{font-family:var(--sm);font-size:var(--text-2xs);color:var(--tinte-matt);letter-spacing:.02em}

/* ---------- Blog: redaktionelle Hauptauswahl ---------- */
.blog-gitter.liste{gap:0;border-top:1px solid var(--linie)}
.blog-gitter.liste .blog-karte{border-radius:0;border-left:0;border-right:0;border-top:0;
  border-bottom:1px solid var(--linie);display:flex;flex-direction:column}
.blog-gitter.liste .blog-karte:hover{border-color:var(--linie);background:var(--nebel)}
.blog-gitter.liste .blog-bild{aspect-ratio:16/9}
.blog-gitter.liste .blog-karte-info{padding:28px 4px}

/* ---------- Blog: Artikel ---------- */
.artikel-kopf{max-width:70ch}
.artikel-meta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:18px;margin-bottom:6px}
.artikel-meta span{font-family:var(--sm);font-size:var(--text-2xs);color:var(--tinte-matt)}
.artikel-inhalt{max-width:70ch}
.artikel-inhalt h2{font-size:clamp(1.3rem,2.6vw,1.65rem);margin:var(--s6) 0 16px;line-height:1.3}
.artikel-inhalt h2:first-child{margin-top:0}
.artikel-inhalt p{color:var(--tinte-leise);font-size:var(--text-lg);line-height:1.7;margin-bottom:18px}
.artikel-inhalt .zitat{font-size:clamp(1.15rem,2.2vw,1.4rem)}
.weitere-artikel{border-top:1px solid var(--linie);margin-top:var(--s7);padding-top:0}
/* Nur die Abschnittsüberschrift, nicht die h3 in den Karten darunter. */
.weitere-artikel > .h > h3{margin-bottom:22px}
/* Piktogramme mit 24er-viewBox brauchen weniger Fläche als die 48er. */
.blog-bild svg.blog-sym-klein{width:38%;height:38%}

/* ---------- Impressum ---------- */
.rechtstext{max-width:var(--measure)}
.rechtstext h2{margin-top:var(--s6);margin-bottom:14px;font-size:clamp(1.3rem,2.6vw,1.65rem)}
.rechtstext h2:first-child{margin-top:0}
.rechtstext p{color:var(--tinte-leise);margin-bottom:13px;line-height:var(--leading-relaxed)}

/* ---------- Footer (dunkles Waldgrün, mit Marken-Claim) ---------- */
footer{background:var(--tinte);color:rgba(255,255,255,.7);padding:var(--s7) 0 var(--s5)}
.fuss-gitter{display:grid;gap:34px}
.fuss-marke-kopf{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.fuss-marke-kopf .marke-signet{width:28px;height:28px}
.fuss-marke b{font-family:var(--sd);font-size:var(--text-xl);color:#fff}
.fuss-marke p{font-size:var(--text-xs);line-height:1.6;max-width:38ch}
.fuss-claim{font-family:var(--sd);font-weight:600;font-size:var(--text-base);color:var(--akzent-hell);
  margin-top:14px;letter-spacing:-.005em}
.fuss-spalte b{display:block;font-size:var(--text-2xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.6);margin-bottom:14px}
.fuss-spalte ul{display:grid;gap:10px}
.fuss-spalte a{color:rgba(255,255,255,.75);text-decoration:none;font-size:var(--text-sm);transition:color .2s}
.fuss-spalte a:hover{color:var(--akzent-hell)}
/* Opazität .6 ergab auf dem Markengrün nur 4,0:1 und lag damit unter WCAG AA
   für Fließtext. .72 hebt die Rechts- und Sprachhinweise auf 5,0:1, ohne die
   Fußzeile optisch nach vorn zu holen. */
.fuss-unten{border-top:1px solid rgba(255,255,255,.14);margin-top:var(--s6);padding-top:22px;
  display:flex;flex-direction:column;gap:10px;font-size:var(--text-2xs);color:rgba(255,255,255,.72)}

/* ---------- Scroll-Reveal (ruhig, kein Blur, kurze Ketten) ---------- */
.auf{opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--kurve),transform .5s var(--kurve)}
.auf.da{opacity:1;transform:none}
.staffel > *{opacity:0;transform:translateY(8px);
  transition:opacity .45s var(--kurve),transform .45s var(--kurve)}
.staffel.da > *{opacity:1;transform:none}
.staffel.da > *:nth-child(2){transition-delay:.05s}
.staffel.da > *:nth-child(3){transition-delay:.1s}
.staffel.da > *:nth-child(n+4){transition-delay:.15s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .auf,.staffel>*{opacity:1;transform:none;transition:none}
  .hero-visual .hv-marker{transition:none;opacity:1;transform:none}
  .hero-visual .hv-fill{transition:none;transform:scaleX(1)}
  .hero-visual .hv-value,.hero-visual .hv-delta{transition:none;opacity:1}
  .hero-visual .hv-verbindung{transition:none;opacity:.6}
}

/* ---------- Zurück nach oben ---------- */
.nach-oben{position:fixed;right:20px;bottom:20px;z-index:70;width:46px;height:46px;border-radius:50%;
  background:var(--akzent);color:#fff;border:none;display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:var(--schatten-s);opacity:0;pointer-events:none;
  transform:translateY(8px);transition:opacity .25s,transform .25s var(--kurve)}
.nach-oben.an{opacity:1;pointer-events:auto;transform:none}
.nach-oben.an.verdeckt{opacity:0;pointer-events:none;transform:translateY(8px)}
.nach-oben svg{width:18px;height:18px}

/* ============ ab Tablet ============ */
@media (min-width:760px){
  .h{padding:0 32px}
  .kopf-huelle{padding:22px 32px 0}
  .kopf{padding:8px 8px 8px 26px}
  .knoepfe{flex-wrap:nowrap}
  /* Ab Tablet passt die Fokuszeile in eine Zeile: Trennpunkte statt Linie. */
  .hero-fokus{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:2px 10px;
    border-left:none;padding-left:0;max-width:none}
  .hero-fokus a:not(:last-child)::after{content:'·';margin-left:10px;color:var(--silber-2);font-weight:400}
  .sg{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sf{border-right:1px solid var(--linie)}
  .sf:nth-child(2n){border-right:1px solid var(--linie)}
  .sf:nth-child(4n){border-right:none}
  .leist-feature-gitter{grid-template-columns:repeat(3,minmax(0,1fr))}
  .leist-feature{padding:var(--s5) var(--s4) var(--s5) 0;border-bottom:none}
  .leist-feature-gitter .leist-feature:not(:last-child){border-right:1px solid var(--linie);padding-right:var(--s5)}
  .leist-feature-gitter .leist-feature:not(:first-child){padding-left:var(--s4)}
  .leist-zeile-text{display:block}
  .split{grid-template-columns:.85fr 1.15fr}
  /* Tablet bleibt einspaltig: die Kontaktseite hat mit der Anfahrtsskizze
     ein drittes Grid-Kind, das sonst per Auto-Placement fälschlich neben
     Kontakt in Spalte 2 rutscht und das Formular in eine eigene, halbierte
     Zeile verdrängt. Die echte zweispaltige Anordnung gilt erst ab Desktop. */
  #formular-abschnitt .split{grid-template-columns:1fr}
  .anfahrt-grafik{height:auto;aspect-ratio:16/9}
  .galerie{grid-template-columns:repeat(3,1fr)}
  .galerie .galerie-bild:first-child{grid-column:span 2}
  .cta-gitter{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--s5)}
  .cta-gitter .kv{flex:none}
  .leist-block{grid-template-columns:.85fr 1.15fr}
  .buch{grid-template-columns:132px 1fr;align-items:start}
  .blog-gitter{grid-template-columns:repeat(2,1fr)}
  .blog-gitter.liste{grid-template-columns:1fr}
  .blog-gitter.liste .blog-karte{flex-direction:row;align-items:stretch}
  .blog-gitter.liste .blog-bild{flex:0 0 280px;aspect-ratio:auto;border-radius:var(--r-m);margin:24px 0 24px 4px}
  .blog-gitter.liste .blog-karte-info{flex:1;padding:24px 24px 24px 32px;display:flex;flex-direction:column;justify-content:center}
  .blog-gitter.liste .blog-karte-info h2{font-size:23px}
}

/* ============ ab Desktop ============ */
@media (min-width:1100px){
  .nav-gross{display:flex;align-items:center;gap:2px}
  .nav-gross a{white-space:nowrap}
  .kopf > .sprachwahl{display:flex}
  .kopf-cta{display:inline-flex}
  .menue-tab{display:none}
  /* Das mobile Vollbild-Menü ist ab Desktop kein gültiger Navigationszustand,
     unabhängig davon, ob .offen noch gesetzt ist (siehe site.js) */
  .schicht{display:none}
  .hero-gitter{grid-template-columns:1.1fr .9fr}
  .hero h1{max-width:13ch}
  .hero-schleier{background:linear-gradient(100deg,rgba(250,251,248,.96) 0%,rgba(250,251,248,.9) 38%,rgba(250,251,248,.5) 54%,rgba(250,251,248,.14) 74%,rgba(250,251,248,.06) 100%)}
  section{padding:var(--s8) 0}

  /* Lage & Anfahrt: eigene, horizontale Desktop-Anordnung statt der
     hochskalierten Mobile-Komponente. Die verschachtelte Aufteilung
     innerhalb der schmalen linken Split-Spalte ließ die Skizze zu klein
     werden, darum bekommt der Block hier eine eigene volle Zeile unter
     Kontakt/Formular statt in die 0.85fr-Spalte gequetscht zu werden. */
  #formular-abschnitt .split{grid-template-areas:"kontakt formular" "anfahrt anfahrt";row-gap:var(--s4)}
  #formular-abschnitt .split > .auf:first-child{grid-area:kontakt}
  #formular-abschnitt .split > .auf:last-child{grid-area:formular}
  .anfahrt-skizze{grid-area:anfahrt;margin-top:0}
  .anfahrt-inhalt{display:grid;grid-template-columns:2fr 3fr;column-gap:48px;align-items:start}
  .leistungs-checks{display:grid;grid-template-columns:1fr 1fr}
  .leistungs-check:nth-child(odd){border-right:1px solid var(--linie)}
  .leistungs-check:nth-last-child(-n+2){border-bottom:none}
  .anfahrt-grafik{grid-column:2;grid-row:1;height:auto;aspect-ratio:21/9;max-width:640px}
  .anfahrt-text{grid-column:1;grid-row:1;max-width:360px}
  .anfahrt-adresse-kurz{display:block;font-family:var(--sd);font-weight:700;font-size:var(--text-lg);color:var(--tinte);margin-bottom:8px}
  .anfahrt-legende{margin-top:0}
  .anfahrt-route{margin-top:20px}
}