/*
Theme Name: MKG-Praxis Dr. Dr. Haarmann
Theme URI: https://mkg-lp.de
Author: ObviFlow
Description: Theme der MKG-Praxis Dr. Dr. Stephan Haarmann, Lippstadt. Startseite mit Abschnitten, Unterseiten als echte WordPress-Seiten unter eigenen Pfad-URLs. Design unveraendert aus dem Prototyp uebernommen.
Version: 4.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: proprietaer
Text Domain: mkg-haarmann
*/

@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:400 900;font-display:swap;
  src:url(assets/fonts/fraunces.woff2) format('woff2');
}
@font-face{
  font-family:'Fraunces';font-style:italic;font-weight:400 700;font-display:swap;
  src:url(assets/fonts/fraunces-italic.woff2) format('woff2');
}
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(assets/fonts/archivo.woff2) format('woff2');
}


:root{
  /* PRAXISFOTOS — liegen als Dateien unter assets/img/. Zum Austauschen
     die jeweilige Datei ersetzen oder den url(...)-Wert anpassen.
     Einziger verbliebener Platzhalter: --foto-gebaeude (Außenaufnahme fehlt noch). */
  --foto-gebaeude:url(assets/img/foto-gebaeude.webp);
  --foto-warten:url(assets/img/foto-warten.webp);
  --foto-flur:url(assets/img/foto-flur.webp);
  --foto-empfang:url(assets/img/foto-empfang.webp);
  --foto-behandlung:url(assets/img/foto-behandlung.webp);
  --foto-hygiene:url(assets/img/foto-hygiene.webp);
  --foto-steri:url(assets/img/foto-steri.webp);
  --foto-flurdetail:url(assets/img/foto-flurdetail.webp);
  --foto-licht:url(assets/img/foto-licht.webp);
  --kunst-passiflora:url(assets/img/kunst-passiflora.webp);
  --kunst-nymphaea:url(assets/img/kunst-nymphaea.webp);
  --kunst-clematis:url(assets/img/kunst-clematis.webp);
  --kunst-clematis-band:url(assets/img/kunst-clematis-band.webp);
}
.ph{background-size:cover;background-position:center;background-repeat:no-repeat;background-color:var(--sage-tint)}
.ph-geb{background-image:var(--foto-gebaeude)}
.ph-wart{background-image:var(--foto-warten)}
.ph-flur{background-image:var(--foto-flur)}
.ph-empfang{background-image:var(--foto-empfang)}
.ph-behandlung{background-image:var(--foto-behandlung)}
.ph-hygiene{background-image:var(--foto-hygiene)}
.ph-steri{background-image:var(--foto-steri)}
.ph-flurdetail{background-image:var(--foto-flurdetail)}
.ph-licht{background-image:var(--foto-licht);background-position:center 30%}
.ph-k1{background-image:var(--kunst-passiflora)}
.ph-k2{background-image:var(--kunst-nymphaea)}
.ph-k3{background-image:var(--kunst-clematis)}
.ph-k4{background-image:var(--kunst-clematis-band)}



:root{
  --paper:#FAFBF9;
  --ink:#2F3531;
  --body-c:#545B56;
  --sage:#92B79D;        /* Logofarbe – Kernton aus Original gemessen */
  --sage-hover:#83A78E;
  --sage-ink:#566E5F;    /* dunklere Ableitung nur für kleine Texte/Links */
  --sage-tint:#EDF2EE;
  --pine:#2C3831;
  --line:#DFE6E0;
  --radius:14px;
  --maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Archivo",system-ui,sans-serif;
  background:var(--paper);
  color:var(--body-c);
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:var(--sage-ink);text-decoration:none}
a:hover{text-decoration:underline}
/* Fokus: zweifarbiger Ring. Der dunkle Ring traegt auf hellem Grund
   (5,34:1 gegen Paper), der helle Begleitring auf dunklem Grund
   (11,78:1 gegen Pine in der Kontaktleiste). Beide stehen mit 5,34:1
   zueinander — damit ist der Indikator auf jedem Untergrund erkennbar,
   ohne die Farbe je Kontext pflegen zu muessen. (WCAG 1.4.11) */
:focus-visible{
  outline:2px solid var(--sage-ink);outline-offset:3px;border-radius:4px;
  box-shadow:0 0 0 3px var(--paper);
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--pine);color:#fff;padding:12px 20px;border-radius:0 0 10px 0;font-weight:600;
}
.skip-link:focus{left:0;text-decoration:none}

/* ---------- Topbar ---------- */
.topbar{background:var(--pine);color:#DCE6DE;font-size:.84rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:38px;gap:16px}
.topbar a{color:#fff;font-weight:600}
.topbar .loc{opacity:.85}
@media(max-width:640px){.topbar .loc{display:none}}

/* ---------- Header ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(250,251,249,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
header.site .wrap{display:flex;align-items:center;gap:28px;min-height:78px}
.logo svg{height:58px;width:auto;display:block}
@media(max-width:640px){.logo svg{height:48px}}
nav.main{display:flex;gap:26px;margin-left:auto;align-items:center}
nav.main a{
  color:var(--ink);font-weight:500;font-size:.94rem;
  position:relative;padding:6px 0;
}
nav.main a:hover{text-decoration:none;color:var(--sage-ink)}
nav.main a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--sage);transition:right .25s ease;
}
nav.main a:hover::after{right:0}
nav.main a.active{color:var(--sage-ink)}
nav.main a.active::after{right:0}
.btn{
  display:inline-block;background:var(--sage);color:var(--pine);font-weight:600;
  padding:12px 22px;border-radius:999px;border:1px solid var(--sage);
  font-size:.94rem;transition:background .2s ease;
}
.btn:hover{background:var(--sage-hover);text-decoration:none}
.btn.ghost{background:transparent;color:var(--pine)}
.btn.ghost:hover{background:var(--sage-tint)}
.btn.small{padding:9px 18px;font-size:.88rem}
.menu-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);
  border-radius:10px;padding:8px 12px;font:inherit;color:var(--ink);cursor:pointer}
@media(max-width:920px){
  nav.main{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    flex-direction:column;gap:0;padding:8px 24px 16px;
    max-height:calc(100vh - 79px);
    max-height:calc(100dvh - 79px);
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  nav.main.open{display:flex}
  nav.main a{padding:12px 0;width:100%;border-bottom:1px solid var(--line)}
  nav.main a:last-of-type{border-bottom:none}
  nav.main .btn{margin-top:8px;text-align:center}
  .menu-toggle{display:block}
  header.site .cta-head{display:none}
}

/* ---------- Hero ---------- */
.hero{padding:84px 0 56px}
.eyebrow{
  font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--sage-ink);margin-bottom:20px;
}
.hero h1{
  font-family:"Fraunces",serif;font-weight:550;
  font-size:clamp(2.5rem,5.6vw,4.3rem);
  line-height:1.06;color:var(--ink);letter-spacing:-.01em;
  max-width:15ch;
}
.hero h1 em{font-style:italic;color:var(--sage-ink)}
.hero p.lead{max-width:56ch;margin:26px 0 34px;font-size:1.08rem}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero .phone{font-weight:600;color:var(--ink);font-size:1rem}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:38px}
.chip{
  font-size:.8rem;font-weight:500;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 14px;
}
.chip b{color:var(--sage-ink);font-weight:700}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}nav.main a::after{transition:none}details.pillar[open] ul{animation:none}}

/* ---------- Sektionen ---------- */
section{padding:88px 0}
.sec-head{max-width:640px;margin-bottom:44px}
.sec-head h2{
  font-family:"Fraunces",serif;font-weight:550;font-size:clamp(1.8rem,3.4vw,2.5rem);
  color:var(--ink);line-height:1.15;margin-top:14px;
}
.sec-head p{margin-top:14px}

/* Leistungs-Säulen */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:920px){.pillars{grid-template-columns:1fr}}
.pillar{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px}
.pillar .kicker{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--sage-ink);display:block;margin-bottom:8px}
.pillar h3{font-family:"Fraunces",serif;font-weight:550;font-size:1.45rem;color:var(--ink);line-height:1.2;margin-bottom:8px}
.pillar .sum{font-size:.95rem}


/* ---------- Dropdown-Navigation ---------- */
.navitem{position:relative}
.navitem>a{display:inline-block}
.dropdown{
  display:none;position:absolute;top:100%;left:-14px;min-width:270px;z-index:60;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px;
  box-shadow:0 12px 30px rgba(46,58,51,.10);
}
.navitem:hover .dropdown,.navitem:focus-within .dropdown,.navitem .dropdown.open{display:block}
.dropdown a{display:block;padding:9px 12px;border-radius:8px;color:var(--ink);font-size:.9rem;font-weight:500}
.dropdown a::after{display:none}
.dropdown a:hover{background:var(--sage-tint);color:var(--sage-ink);text-decoration:none}
.dropdown .dd-head{font-weight:700}
@media(max-width:920px){
  .navitem{width:100%}
  .dropdown{position:static;display:block;border:none;box-shadow:none;padding:0 0 4px 14px;min-width:0;background:transparent}
  .dropdown a{padding:8px 0;border-bottom:none}
}
/* ---------- Fachbereichs-Panels ---------- */
details.pillar{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:border-color .2s ease;padding:0;
}
details.pillar[open]{border-color:var(--sage)}
details.pillar summary{
  cursor:pointer;list-style:none;padding:26px 24px 20px;
  display:flex;flex-direction:column;gap:6px;position:relative;
}
details.pillar summary::-webkit-details-marker{display:none}
details.pillar summary::after{
  content:"+";position:absolute;top:20px;right:22px;
  font-family:"Fraunces",serif;font-size:1.5rem;color:var(--sage-ink);
  transition:transform .25s ease;
}
details.pillar[open] summary::after{transform:rotate(45deg)}
details.pillar h3{padding-right:36px}
.pillar ul{list-style:none;padding:0 24px 22px;display:flex;flex-direction:column;gap:2px}
.pillar li a{display:block;padding:10px 12px;border-radius:9px;color:var(--ink);font-size:.93rem;font-weight:500}
.pillar li a:hover{background:var(--sage-tint);color:var(--sage-ink);text-decoration:none}
.pillar li a::before{content:"→ ";color:var(--sage)}
.pillar li .nolink{display:block;padding:10px 12px;color:var(--body-c);font-size:.93rem;font-weight:500}
.pillar li .nolink::before{content:"· ";color:var(--sage);font-weight:700}
.dropdown .nolink{display:block;padding:9px 12px;color:var(--body-c);font-size:.9rem;font-weight:500}
details.pillar[open] ul{animation:pillarIn .28s ease}
@keyframes pillarIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* Vertrauensband */
.trust{background:var(--sage-tint)}
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:920px){.trust-grid{grid-template-columns:1fr}}
.trust-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px}
.trust-card h3{font-family:"Fraunces",serif;font-weight:550;font-size:1.25rem;color:var(--ink);margin-bottom:10px}
.trust-card p{font-size:.95rem}
.trust-card .num{
  font-family:"Fraunces",serif;font-size:1rem;color:var(--sage-ink);
  border:1px solid var(--sage);border-radius:999px;
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
}

/* Vita */
.vita-grid{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:start}
@media(max-width:920px){.vita-grid{grid-template-columns:1fr;gap:36px}}
.vita-intro p+p{margin-top:14px}
.vita-intro blockquote{
  font-family:"Fraunces",serif;font-style:italic;font-size:1.25rem;color:var(--ink);
  border-left:3px solid var(--sage);padding-left:18px;margin:24px 0;line-height:1.4;
}
.timeline{list-style:none;border-left:1px solid var(--line);padding-left:28px;display:flex;flex-direction:column;gap:22px}
.timeline li{position:relative}
.timeline li::before{
  content:"";position:absolute;left:-33px;top:8px;width:9px;height:9px;border-radius:50%;
  background:var(--sage);box-shadow:0 0 0 4px var(--sage-tint);
}
.timeline .year{font-weight:700;color:var(--sage-ink);font-size:.86rem;letter-spacing:.04em}
.timeline p{font-size:.94rem;color:var(--ink)}

/* Zuweiser */
.refer{background:var(--pine);color:#C9D6CC}
.refer .wrap{display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.refer h2{font-family:"Fraunces",serif;font-weight:500;font-size:1.6rem;color:#fff;max-width:24ch;line-height:1.25}
.refer p{max-width:52ch;font-size:.95rem;margin-top:10px}
.refer .btn{background:#fff;color:var(--pine);border-color:#fff}
.refer .btn:hover{background:var(--sage-tint)}

/* Kontakt */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:920px){.contact-grid{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px}
.card h3{font-family:"Fraunces",serif;font-weight:550;font-size:1.3rem;color:var(--ink);margin-bottom:16px}
.addr{font-style:normal;line-height:1.9;color:var(--ink)}
.addr b{font-size:1.05rem}
.park-link{
  display:flex;align-items:center;gap:14px;margin:18px 0 6px;padding:14px 16px;
  flex-wrap:wrap;
  background:var(--sage-tint);border:1px solid var(--sage);border-radius:12px;
  color:var(--ink);text-decoration:none;transition:background .2s ease;
}
.park-link:hover{background:#E2EBE4;text-decoration:none}
.park-link svg{width:30px;height:30px;flex:0 0 30px;color:var(--sage-ink)}
.park-link span strong{display:block;font-size:.98rem;color:var(--ink)}
.park-link span{font-size:.86rem;color:var(--body-c);line-height:1.45;min-width:0;overflow-wrap:break-word}
.park-link-arrow{margin-left:auto;color:var(--sage-ink);font-size:1.1rem;font-weight:700}
.hours{width:100%;border-collapse:collapse;font-size:.95rem}
.hours td{padding:9px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.hours td:first-child{font-weight:600;width:64px;color:var(--sage-ink)}
.hours tr:last-child td{border-bottom:none}
.contact-cta{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}
/* Nachsatz unter den drei Schaltern — fuehrt auf die Formularseite, ohne
   ihnen die Aufmerksamkeit zu nehmen. */
.cta-nachsatz{margin-top:12px;font-size:.9rem;color:var(--body-c)}

/* Footer */
footer.site{background:var(--sage-tint);border-top:1px solid var(--line);color:var(--body-c);padding:56px 0 26px;font-size:.92rem}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;align-items:start}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr;gap:30px}}
.foot-col h4{font-family:"Fraunces",serif;font-weight:550;color:var(--ink);font-size:1.05rem;margin-bottom:10px}
.foot-col p{line-height:2}
footer.site a{color:var(--ink)}
.foot-base{margin-top:42px;padding-top:16px;border-top:1px solid var(--line);font-size:.78rem;color:#636C66}


/* ---------- Dropdown-Navigation ---------- */
.navitem{position:relative}
.navitem>a{display:inline-block}
.dropdown{
  display:none;position:absolute;top:100%;left:-14px;min-width:270px;z-index:60;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px;
  box-shadow:0 12px 30px rgba(46,58,51,.10);
}
.navitem:hover .dropdown,.navitem:focus-within .dropdown,.navitem .dropdown.open{display:block}
.dropdown a{display:block;padding:9px 12px;border-radius:8px;color:var(--ink);font-size:.9rem;font-weight:500}
.dropdown a::after{display:none}
.dropdown a:hover{background:var(--sage-tint);color:var(--sage-ink);text-decoration:none}
.dropdown .dd-head{font-weight:700}
@media(max-width:920px){
  .navitem{width:100%}
  .dropdown{position:static;display:block;border:none;box-shadow:none;padding:0 0 4px 14px;min-width:0;background:transparent}
  .dropdown a{padding:8px 0;border-bottom:none}
}
/* ---------- Unterseiten-Ansicht ---------- */
#pageview section.page{padding:56px 0 88px}
.crumbs{font-size:.85rem;color:#636C66;margin-bottom:26px}
.crumbs a{color:var(--sage-ink)}
/* min-width:0 verhindert, dass eine Rasterspalte auf ihre min-content-Breite
   aufgeblasen wird — sonst reisst eine lange Ueberschrift die ganze Spalte
   ueber den Bildschirmrand hinaus. (WCAG 1.4.10) */
.page-grid{display:grid;grid-template-columns:7.2fr 4fr;gap:56px;align-items:start;min-width:0}
.page-grid > *{min-width:0}
@media(max-width:920px){.page-grid{grid-template-columns:1fr;gap:36px}}
.page-body h1:focus{outline:none}
/* Lange Komposita wie "Wurzelspitzenresektionen" sind bei 272 px verfuegbarer
   Breite 378 px lang. hyphens:auto greift, weil <html lang="de"> gesetzt ist. */
.page-body h1{font-family:"Fraunces",serif;font-weight:550;font-size:clamp(1.5rem,3.8vw,2.7rem);color:var(--ink);line-height:1.12;margin:12px 0 22px;
  overflow-wrap:break-word;hyphens:auto}
.page-body h3{font-family:"Fraunces",serif;font-weight:550;font-size:1.3rem;color:var(--ink);margin:28px 0 10px;
  overflow-wrap:break-word;hyphens:auto}
.page-body p{margin-bottom:14px}
/* Fliesstext-Links: die Pillen-Hinterlegung bleibt, dazu eine duenne
   Unterstreichung. Ohne sie waere die Farbe das einzige Unterscheidungs-
   merkmal — der Abstand zur Fliesstextfarbe betraegt nur 1,26:1. (WCAG 1.4.1) */
#pv-content a{
  color:var(--sage-ink);font-weight:500;
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:var(--sage-ink);
  background:var(--sage-tint);padding:2px 6px;border-radius:5px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
  transition:background .18s ease,color .18s ease;
}
#pv-content a:hover{background:var(--sage);color:var(--pine);text-decoration-color:var(--pine)}
#pv-content a:focus-visible{outline:2px solid var(--sage-ink);outline-offset:2px;box-shadow:0 0 0 2px var(--paper)}

#pv-content mark{background:none;color:var(--pine);font-weight:600;padding:0}
.page-body a{color:var(--sage-ink);font-weight:500}
/* Dieselbe Regel fuer Fliesstext-Links auf der Startseite. */
.gal-more a,#praxis p a,#parken p a,#kontakt p a,.trust p a{
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
}
.page-img{border-radius:12px;border:1px solid var(--line);margin:18px 0;max-width:100%}
video.page-img{width:100%;background:#000}
.img-row{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0}
.img-row img{border-radius:10px;border:1px solid var(--line);max-width:calc(33.3% - 8px);min-width:160px;flex:1;object-fit:cover}
.page-cta{margin-top:34px;padding-top:24px;border-top:1px solid var(--line);display:flex;gap:12px;flex-wrap:wrap}
.side-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 22px;margin-bottom:16px}
.side-card h4{font-family:"Fraunces",serif;font-weight:550;font-size:1.05rem;color:var(--ink);margin-bottom:10px}
.side-card ul{list-style:none}
.side-card li a{display:block;padding:8px 10px;border-radius:8px;color:var(--ink);font-size:.9rem;font-weight:500}
.side-card li a:hover{background:var(--sage-tint);color:var(--sage-ink);text-decoration:none}
.side-card li a.current{background:var(--sage-tint);color:var(--sage-ink)}
.side-card .addr{font-size:.9rem;line-height:1.9}

#booking-fallback{
  border:1px solid var(--line);border-radius:var(--radius);padding:30px 30px 26px;
  max-width:420px;background:#fff;color:var(--body-c);box-shadow:0 20px 50px rgba(46,58,51,.18);
}
#booking-fallback::backdrop{background:rgba(44,56,49,.45)}
#booking-fallback h3{font-family:"Fraunces",serif;font-weight:550;font-size:1.3rem;color:var(--ink);margin-bottom:12px}
#booking-fallback p{margin-bottom:12px;font-size:.95rem}
#booking-fallback form{margin-top:8px}




.ovwrap{margin:0 0 26px}
.ovwrap svg.ovmap{width:100%;height:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);display:block}
.ovwrap figcaption{font-size:.82rem;color:#636C66;margin-top:10px;text-align:center}
.sketch{width:100%;height:auto;border:1px solid var(--line);border-radius:10px;margin-bottom:16px;background:var(--paper)}
.feat{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:auto}
.feat li{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;line-height:1.45}
.feat li svg{width:18px;height:18px;flex:0 0 18px;margin-top:2px;color:var(--sage-ink)}
.legend{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:22px;font-size:.86rem;color:#636C66;align-items:center}
.legend span{display:inline-flex;gap:8px;align-items:center}
.legend svg{width:20px;height:20px}
.hint-flex{display:flex;gap:14px;align-items:flex-start}
.hint-ico{width:26px;height:26px;flex:0 0 26px;color:var(--sage-ink);margin-top:2px}


/* ---------- Praxis-Bilder ---------- */
.einblicke{padding:10px 0 0}
.gal{display:grid;grid-template-columns:0.85fr 1fr 1fr;gap:14px}
@media(max-width:820px){.gal{grid-template-columns:1fr}}
.gal-more{margin-top:14px;font-size:.9rem}
.gal-more a{color:var(--sage-ink);font-weight:600;text-decoration:none}
.gal-more a:hover{text-decoration:underline}
.gal.gal-rundgang{grid-template-columns:repeat(2,1fr);margin-top:24px}
@media(max-width:560px){.gal.gal-rundgang{grid-template-columns:1fr}}
/* ---- Filmleiste: langsam durchlaufende Praxisfotos ---- */
.filmleiste{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.filmband{display:flex;width:max-content;animation:bandlauf 75s linear infinite}
.filmband .ph{width:340px;height:230px;flex:0 0 auto;margin-right:14px;
  border-radius:var(--radius);border:1px solid var(--line)}
.filmleiste:hover .filmband{animation-play-state:paused}

/* Schalter zum Anhalten. Der Mauszeiger allein genuegt nicht: auf
   Beruehrgeraeten gibt es kein Hover, und mit der Tastatur war die Leiste
   gar nicht anzuhalten. (WCAG 2.2.2 und 2.1.1, beide Stufe A) */
.filmleiste-huelle{position:relative}
.filmleiste-huelle.pausiert .filmband{animation-play-state:paused}
.filmband-schalter{
  position:absolute;right:18px;bottom:18px;z-index:2;
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;border-radius:999px;cursor:pointer;
  background:var(--paper);color:var(--pine);border:1px solid var(--sage-ink);
  font-family:inherit;font-size:.88rem;font-weight:600;
  transition:background .18s ease;
}
.filmband-schalter:hover{background:var(--sage-tint)}
.filmband-schalter svg{width:14px;height:14px;flex:0 0 14px;fill:currentColor}
@media(max-width:560px){.filmband-schalter{right:12px;bottom:12px;padding:10px 14px}}
@keyframes bandlauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:820px){.filmband .ph{width:260px;height:185px}}
@media(prefers-reduced-motion:reduce){
  .filmband{animation:none}
  .filmleiste{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  /* Nichts laeuft, also gibt es nichts anzuhalten. */
  .filmband-schalter{display:none}}
/* ---- Hero: einzelne Blumen-Grafik rechts, wechselt beim Wiedereintritt ---- */
.hero .wrap{position:relative}
.hero-blume{position:absolute;right:150px;top:0;width:400px;pointer-events:none}
.blume-bild{width:400px;height:400px;border:none;border-radius:0;
  opacity:.95;transition:opacity .8s ease;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),
    linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),
    linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent);
  mask-composite:intersect}
.blume-bild.wechsel{opacity:0}
@media(max-width:1280px){.hero-blume{right:40px}}
@media(max-width:1120px){.hero-blume{display:none}}
@media(min-width:1281px){.hero p.lead{max-width:min(56ch,calc(100% - 580px))}}
@media(min-width:1121px) and (max-width:1280px){.hero p.lead{max-width:min(56ch,calc(100% - 470px))}}
@media(prefers-reduced-motion:reduce){.blume-bild{transition:none}}
.gal figure{margin:0}
.gal .ph{width:100%;height:260px;border-radius:var(--radius);border:1px solid var(--line)}
.gal figcaption{font-size:.82rem;color:#636C66;margin-top:8px}
@media(max-width:820px){.gal .ph{height:220px}}
.vita-foto{width:100%;height:230px;border-radius:var(--radius);border:1px solid var(--line);margin-bottom:16px}
.eingang{display:grid;grid-template-columns:210px 1fr;gap:22px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin-top:22px}
@media(max-width:640px){.eingang{grid-template-columns:1fr}}
.eingang .ph-eingang{width:100%;height:230px;border-radius:10px}
.eingang h4{font-family:"Fraunces",serif;font-weight:550;font-size:1.1rem;color:var(--ink);margin-bottom:8px}
.eingang p{font-size:.93rem}


/* ---------- Jobs ---------- */
.jobs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:26px}
@media(max-width:920px){.jobs-grid{grid-template-columns:1fr}}
.job{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;display:flex;flex-direction:column}
.job.highlight{border-color:var(--sage)}
.job .tag{align-self:flex-start;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sage-ink);background:var(--sage-tint);border-radius:999px;padding:5px 11px;margin-bottom:14px}
.job h3{font-family:"Fraunces",serif;font-weight:550;font-size:1.3rem;color:var(--ink);line-height:1.25;margin-bottom:8px}
.job .meta{font-size:.86rem;color:#636C66;margin-bottom:12px}
.job p{font-size:.93rem;margin-bottom:14px}
.job ul{list-style:none;display:flex;flex-direction:column;gap:7px;margin-top:auto;padding-top:6px}
.job li{font-size:.9rem;display:flex;gap:9px;align-items:flex-start;line-height:1.45}
.job li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sage);flex:0 0 6px;margin-top:7px}

.bieten{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;margin-bottom:26px}
.bieten h3{font-family:"Fraunces",serif;font-weight:550;font-size:1.25rem;color:var(--ink);margin-bottom:16px}
.bieten-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 28px}
@media(max-width:640px){.bieten-grid{grid-template-columns:1fr}}
.bieten-grid div{display:flex;gap:10px;align-items:flex-start;font-size:.93rem;line-height:1.5}
.bieten-grid svg{width:18px;height:18px;flex:0 0 18px;margin-top:3px;color:var(--sage-ink)}

/* Bewerbungsformular */
.bewerbung{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px 30px}
.bewerbung h3{font-family:"Fraunces",serif;font-weight:550;font-size:1.4rem;color:var(--ink);margin-bottom:6px}
.bewerbung .intro{font-size:.94rem;margin-bottom:24px;max-width:62ch}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
@media(max-width:640px){.f-row{grid-template-columns:1fr}}
.f-field{display:flex;flex-direction:column;gap:6px}
.f-field label{font-size:.86rem;font-weight:600;color:var(--ink)}
.f-field .hint{font-size:.8rem;color:#636C66;font-weight:400}
.f-field input,.f-field select,.f-field textarea{
  font-family:inherit;font-size:.95rem;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:10px;padding:11px 13px;width:100%;
}
.f-field textarea{min-height:120px;resize:vertical}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{outline:2px solid var(--sage);outline-offset:1px;border-color:var(--sage)}
.f-field input[type=file]{padding:9px 10px;background:#fff}
.f-field input[type=file]::file-selector-button{
  font:inherit;font-size:.86rem;font-weight:600;color:var(--pine);background:var(--sage-tint);
  border:1px solid var(--line);border-radius:8px;padding:7px 13px;margin-right:12px;cursor:pointer}
.f-check{display:flex;gap:11px;align-items:flex-start;margin:6px 0 20px;font-size:.88rem;line-height:1.5}
.f-check input{margin-top:3px;width:17px;height:17px;flex:0 0 17px;accent-color:var(--sage-ink)}
.f-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.f-note{font-size:.83rem;color:#636C66;margin-top:16px}
#bewerbung-ok{border:1px solid var(--sage);border-radius:var(--radius);padding:26px 28px;max-width:440px;background:#fff}
#bewerbung-ok h4{font-family:"Fraunces",serif;font-weight:550;font-size:1.2rem;color:var(--ink);margin-bottom:10px}
#bewerbung-ok p{font-size:.93rem;margin-bottom:14px}
#bewerbung-ok::backdrop{background:rgba(44,56,49,.45)}
.filelist{font-size:.85rem;color:var(--sage-ink);margin-top:6px}

/* ---------- Parken ---------- */
.park-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1180px){.park-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.park-grid{grid-template-columns:1fr}}
.park-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px;display:flex;flex-direction:column}
.park-card.near{border-color:var(--sage)}
.park-card .badge{
  align-self:flex-start;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sage-ink);background:var(--sage-tint);border-radius:999px;padding:5px 11px;margin-bottom:14px;
}
.park-card h3{font-family:"Fraunces",serif;font-weight:550;font-size:1.2rem;color:var(--ink);line-height:1.25;margin-bottom:6px}
.park-card .street{font-size:.9rem;margin-bottom:12px}
.park-card .walk{font-size:.92rem;color:var(--ink);font-weight:600;margin-bottom:6px}
.park-card .note{font-size:.88rem;margin-top:auto;padding-top:12px}
.park-card .maplink{font-size:.88rem;font-weight:600;margin-top:14px;display:inline-block}
.park-hint{
  background:var(--sage-tint);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;margin-top:22px;display:flex;gap:18px;flex-wrap:wrap;align-items:center;justify-content:space-between;
}
.park-hint p{font-size:.94rem;max-width:64ch}
.park-hint strong{color:var(--ink)}

/* Scroll-Reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}details.pillar[open] ul{animation:none}}

.proto-note{
  text-align:center;font-size:.78rem;color:#636C66;padding:14px 24px;background:var(--paper);
}

/* ---------- Ankerabschnitte (Weitere Behandlungsfelder) ---------- */
.anker-direkt{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin:20px 0 0;font-size:.92rem;color:var(--body-c)}
.anker-kopf{margin-top:48px}
.anker-kopf h2{font-family:"Fraunces",serif;font-weight:550;font-size:1.5rem;color:var(--ink);margin:0 0 12px}
.anker-abschnitt{
  border-top:1px solid var(--line);padding:26px 0 30px;border-radius:10px;
  scroll-margin-top:104px;
  display:grid;grid-template-columns:minmax(0,1fr) 168px;gap:6px 34px;align-items:center;
}
.anker-abschnitt h3{margin:0 0 10px}
.anker-abschnitt p{margin-bottom:0}
.anker-fig{margin:0;justify-self:end;width:100%;max-width:168px}
.anker-fig svg{display:block;width:100%;height:auto}
.anker-fig .fig-blob{fill:var(--sage-tint)}
.anker-fig .fig-ln{fill:none;stroke:var(--sage-ink);stroke-width:2;stroke-linecap:round}
.anker-fig .fig-leaf{fill:#DCE8DF;stroke:var(--sage-ink);stroke-width:1.4}
.anker-fig .fig-petal{fill:#FFFFFF;stroke:var(--sage-ink);stroke-width:1.4}
.anker-fig .fig-dot{fill:var(--sage-ink);opacity:.8}
.anker-ziel{animation:ankerZiel 2.2s ease-out}
@keyframes ankerZiel{0%,55%{background:var(--sage-tint)}100%{background:transparent}}
@media(max-width:700px){
  .anker-abschnitt{grid-template-columns:1fr}
  .anker-fig{justify-self:start;max-width:150px;margin-top:4px}
}
@media(prefers-reduced-motion:reduce){.anker-ziel{animation:none}}

/* Ehemalige nolink-Einträge sind jetzt Anker-Links (Punkt bleibt, Pfeil bei Hover) */
.dropdown a.nolink{color:var(--body-c);padding:10px 12px}
.dropdown a.nolink:hover{background:var(--sage-tint);color:var(--sage-ink)}
.pillar li a.nolink{color:var(--body-c)}
.pillar li a.nolink::before{content:"\00b7  ";color:var(--sage);font-weight:700}
.pillar li a.nolink:hover{background:var(--sage-tint);color:var(--sage-ink)}
.pillar li a.nolink:hover::before{content:"\2192  ";font-weight:500}

/* ---------- Kontaktblock fuer ueberweisende Praxen (/fuer-aerzte/) ---------- */
.ueberweiser-kontakt{
  display:flex;flex-wrap:wrap;gap:10px 56px;
  margin:24px 0 0;padding:20px 24px;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
}
.ueberweiser-kontakt p{margin:0}
.ueberweiser-kontakt strong{
  display:block;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--sage-ink);margin-bottom:4px;
}

/* ---------- Seitenuebersicht (zweiter Auffindungsweg, WCAG 2.4.5) ---------- */
.seitenuebersicht{list-style:none;margin:0;padding:0}
.seitenuebersicht > li{margin:0 0 22px}
.seitenuebersicht > li > a,
.seitenuebersicht > li{font-weight:600;color:var(--ink)}
.seitenuebersicht ul{list-style:none;margin:8px 0 0;padding:0 0 0 18px;border-left:1px solid var(--line)}
.seitenuebersicht ul li{font-weight:400;margin:0 0 6px}
.su-hinweis{font-size:.8rem;color:#636C66}

/* ---------- Einwilligung: schlanke Leiste (Mockup mkg-mockup-einwilligung-leiste) ---------- */
.einwilligung{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:120;
  width:min(760px,calc(100vw - 32px));
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:6px 8px 6px 16px;
  display:flex;align-items:center;gap:12px;
  box-shadow:0 8px 24px rgba(44,56,49,.09);
  animation:einwilligungAuf .45s ease-out both;
}
@keyframes einwilligungAuf{
  from{opacity:0;transform:translate(-50%,8px)}
  to{opacity:1;transform:translate(-50%,0)}
}
.einwilligung svg{width:18px;height:18px;flex:0 0 auto}
.einwilligung p{margin:0;flex:1;font-size:.84rem;line-height:1.35;color:var(--body-c);min-width:0}
.einwilligung p b{
  font-family:"Fraunces",serif;font-weight:550;color:var(--ink);
  font-size:.95rem;margin-right:6px;
}
.einwilligung a{
  color:var(--pine);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:var(--sage-ink);
}
.ew-knoepfe{display:flex;gap:6px;flex:0 0 auto}
.ew-knopf{
  font-family:inherit;font-size:.82rem;font-weight:600;
  min-height:32px;padding:5px 14px;border-radius:999px;cursor:pointer;
  border:1px solid var(--sage);background:#fff;color:var(--pine);
  transition:background .18s ease;
}
.ew-ja{background:var(--sage);border-color:var(--sage)}
.ew-ja:hover{background:var(--sage-hover);border-color:var(--sage-hover)}
.ew-nein:hover{background:var(--sage-tint)}
.ew-knopf:focus-visible{outline:2px solid var(--sage-ink);outline-offset:2px}

@media(max-width:640px){
  .einwilligung{border-radius:16px;flex-wrap:wrap;padding:10px 14px}
  .einwilligung p{flex:1 1 100%}
  /* Groesseres Beruehrziel als im Mockup — ausdrueckliche Vorgabe aus dem Auftrag. */
  .ew-knoepfe{margin-left:auto}
  .ew-knopf{min-height:40px;padding:8px 20px}
}
@media(prefers-reduced-motion:reduce){
  .einwilligung{animation:none}
}

/* ---------- Einwilligung: Statuszeile in der Fusszeile ---------- */
.messung-status{
  display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:.86rem;color:var(--body-c);margin:26px 0 0;
}
.messung-punkt{
  width:8px;height:8px;border-radius:50%;flex:0 0 8px;
  background:#c9cfc8;                    /* abgelehnt oder unentschieden */
}
.messung-status[data-zustand="ja"] .messung-punkt{background:var(--sage)}
.messung-aendern{
  font-family:inherit;font-size:.86rem;background:none;border:0;padding:6px 2px;
  color:var(--sage-ink);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
}
.messung-aendern:hover{color:var(--pine)}

/* ---------- Kontaktformular ----------
   Nutzt die Feldstile des Bewerbungsformulars (.f-field). Hier stehen nur die
   Teile, die es dort nicht gibt: Warnhinweis, Fehlerliste, Honigtopf. */
.kf-huelle{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px 30px;max-width:760px}
.kf-warnung{background:var(--sage-tint);border-left:3px solid var(--sage-ink);
  border-radius:8px;padding:14px 16px;margin-bottom:24px;font-size:.92rem;line-height:1.55}
.kf-formular .f-field{margin-bottom:16px}
.kf-frage{font-size:.92rem;color:var(--body-c)}
.kf-meldung{font-size:.84rem;color:#8A2B2B;font-weight:600}
.kf-falsch input,.kf-falsch select,.kf-falsch textarea{border-color:#8A2B2B}
.kf-fehlerliste{border:1px solid #8A2B2B;border-left-width:3px;border-radius:8px;
  padding:14px 16px;margin-bottom:22px;font-size:.92rem}
.kf-fehlerliste ul{margin:8px 0 0 18px;list-style:disc}
.kf-fehlerliste a{color:#8A2B2B}
.kf-fehlerliste:focus{outline:2px solid var(--sage);outline-offset:2px}
/* Honigtopf: fuer Menschen unsichtbar, fuer Bots ein ausfuellbares Feld.
   Bewusst NICHT display:none — manche Bots ueberspringen versteckte Felder. */
.kf-honigtopf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.kf-hinweis{font-size:.83rem;color:#636C66;margin-top:18px;line-height:1.6;max-width:66ch}
.kf-erfolg{background:#fff;border:1px solid var(--sage);border-radius:var(--radius);
  padding:28px 30px;max-width:620px}
.kf-erfolg h2{font-family:"Fraunces",serif;font-weight:550;font-size:1.4rem;color:var(--ink);margin-bottom:10px}

/* Telefonnummern nie umbrechen.
   Greift ueber das href, nicht ueber eine Klasse — damit sind alle Telefonlinks
   erfasst, auch die Pillen-Schalter und alles, was spaeter dazukommt.
   Gefunden auf der 404-Seite: die Nummer brach mitten im Block um (Andrej, 09.09.2026). */
a[href^="tel:"]{white-space:nowrap}