/* =========================================================
   Praxis an der Sportklinik — Kopfbereich
   Graustufensystem, kein Farbakzent
   ========================================================= */
:root{
  --head:92px;
  --paper:#FFFFFF;
  --ground:#FFFFFF;
  --shade:#F4F6F6;
  --ink:#14171A;
  --g-700:#3C4347;
  --g-600:#4E565B;
  --g-500:#5E666B;
  --g-300:#C2C7CA;
  --g-200:#DBDFE1;
  --g-100:#E9ECED;
  --on-dark:#FFFFFF;
  --on-dark-2:#D3D7D9;
  --lift:0 26px 64px rgba(20,23,26,.17);
  --plate:transparent;
  --plate-pad:0px;
  --cue-up:rgba(20,23,26,.45);
  --cue-low:rgba(20,23,26,.85);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#1B1F21; --ground:#1B1F21; --shade:#15181A; --shade:#171B1D;
    --ink:#ECEEEF; --g-700:#C3C9CC; --g-600:#AFB6BA; --g-500:#9AA2A6;
    --g-300:#3A4144; --g-200:#2C3134; --g-100:#242A2C;
    --lift:0 26px 64px rgba(0,0,0,.5);
    --plate:#FFFFFF; --plate-pad:9px;
    --cue-up:rgba(20,23,26,.45); --cue-low:rgba(236,238,239,.7);
  }
}
:root[data-theme="dark"]{
  --cue-up:rgba(20,23,26,.45); --cue-low:rgba(236,238,239,.7);
  --paper:#1B1F21; --ground:#0E1113;
  --ink:#ECEEEF; --g-700:#C3C9CC; --g-600:#AFB6BA; --g-500:#9AA2A6;
  --g-300:#3A4144; --g-200:#2C3134; --g-100:#242A2C;
  --lift:0 26px 64px rgba(0,0,0,.5);
  --plate:#FFFFFF; --plate-pad:9px;
}

html{scroll-behavior:smooth}
*{box-sizing:border-box}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:"Familjen Grotesk","Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
:where(a,button,[tabindex]):focus-visible{outline:3px solid currentColor;outline-offset:3px}
.hero :where(a,button):focus-visible{outline-color:#14171A}
.vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:16px;top:-140px;z-index:120;background:var(--ink);color:var(--paper);
  padding:14px 22px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.wrap{max-width:1320px;margin:0 auto;padding-inline:clamp(20px,4.4vw,60px)}

/* Kleinlabel mit Marke */
.label{font-size:12.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;line-height:1.5}
.tick{display:inline-block;width:5px;height:5px;background:currentColor;
  vertical-align:.14em;margin-right:12px;flex:none}

/* ---------------- Kopf ---------------- */
.masthead{background:var(--paper);border-bottom:1px solid var(--g-300);
  position:sticky;top:0;z-index:80}
.masthead .wrap{display:flex;align-items:center;gap:26px;min-height:var(--head)}
.brand{flex:none;display:block;line-height:0}
.brand img{height:66px;width:auto;object-fit:contain;background:var(--plate);padding:var(--plate-pad)}
.topnav{margin-left:auto;align-self:stretch;display:flex;align-items:center;gap:2px}
.dd{position:relative;align-self:stretch;display:flex;align-items:center}
.dd__btn{font:inherit;font-size:15.5px;font-weight:500;color:var(--ink);background:none;border:0;
  cursor:pointer;display:inline-flex;align-items:center;gap:10px;padding:12px 16px;
  min-height:46px;position:relative}
.dd__btn::after{content:"";position:absolute;left:16px;right:16px;bottom:4px;height:1.5px;
  background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.dd__btn:hover::after,.dd__btn[aria-expanded="true"]::after,
.dd__btn[data-aktiv="true"]::after{transform:scaleX(1)}
.dd__btn[data-aktiv="true"]{font-weight:600}
.caret{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .22s ease}
.dd__btn[aria-expanded="true"] .caret{transform:translateY(1px) rotate(225deg)}
.dd__panel{display:none;position:absolute;top:100%;left:0;min-width:244px;background:var(--paper);
  border:1px solid var(--g-200);border-top:0;padding:7px 0;box-shadow:var(--lift)}
.dd__panel[data-open="true"]{display:block}
.dd__panel a{display:block;text-decoration:none;font-size:15px;padding:12px 22px;min-height:46px}
.dd__panel a:hover{background:var(--g-100)}
.jobs{margin-left:14px;text-decoration:none;border:1.5px solid var(--ink);color:var(--ink);
  font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  padding:15px 24px;min-height:46px;display:inline-flex;align-items:center;
  transition:background .2s ease,color .2s ease}
.jobs:hover{background:var(--ink);color:var(--paper)}
.burger{display:none}

/* ---------------- Hero ---------------- */
.hero{
  position:relative;overflow:hidden;
  height:84svh;
  min-height:540px;max-height:880px;
  background:#DCDFE0;color:#14171A;
}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero__inner{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;
  justify-content:center;padding-bottom:0}
.hero__grid{
  display:grid;grid-template-columns:minmax(0,1fr) 352px;
  gap:clamp(20px,2.4vw,34px);align-items:start;
}
.panel{background:var(--paper);border-top:3px solid var(--ink);box-shadow:0 22px 54px rgba(20,23,26,.26)}

/* Linke Tafel */
.hero__eyebrow{
  align-self:flex-start;display:flex;flex-wrap:wrap;gap:4px;
  padding:0;margin:0 0 30px;color:var(--ink);
}
.hero__eyebrow b{
  font-weight:600;font-size:13.5px;letter-spacing:.18em;
  background:var(--ink);color:#FFFFFF;
  padding:14px 20px;display:inline-block;
}
h1 span{
  background:var(--paper);color:var(--ink);
  padding:.08em .26em .17em;display:inline-block;
}
h1{
  font-family:Marcellus,"Hoefler Text",Georgia,serif;font-weight:400;
  font-size:clamp(36px,4.6vw,66px);line-height:1.06;letter-spacing:.002em;
  margin:0 0 34px;color:var(--ink);
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
}

/* Vertikale Schiene am linken Rand */
.rail{position:absolute;z-index:3;left:clamp(16px,2.1vw,30px);top:50%;
  transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;
  background:var(--paper);border:1px solid var(--g-300);
  padding:20px 7px;color:#14171A;pointer-events:none}
.rail span{writing-mode:vertical-rl;font-size:11.5px;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;white-space:nowrap}
.hero__lede{margin:0 0 36px;max-width:40ch;font-size:clamp(15.5px,1.15vw,17px);
  line-height:1.64;color:#3C4347}
.hero__cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:14px;text-decoration:none;
  font-size:12.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  padding:18px 30px;min-height:54px;background:#14171A;color:#FFFFFF;
  transition:background .2s ease,color .2s ease}
.btn:hover{background:#3C4347}
.btn .ar,.lnk .ar{transition:transform .22s ease}
.btn:hover .ar{transform:translateX(5px)}
.lnk{display:inline-flex;align-items:center;gap:12px;text-decoration:none;
  font-size:12.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  padding:18px 28px;min-height:54px;color:#14171A;
  background:var(--paper);border:1.5px solid #14171A;
  transition:background .2s ease,color .2s ease}
.lnk:hover{background:#14171A;color:var(--paper)}
.lnk:hover .ar{transform:translateX(5px)}

/* Rechte Tafel, drei Standorte als Liste */
.panel--orte{padding:0}
.panel--orte h2{
  font-size:14.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  font-family:inherit;color:var(--ink);
  margin:0;padding:22px clamp(20px,1.9vw,26px) 18px;
  display:flex;align-items:center;gap:14px;
}
.panel--orte h2 .tick{width:7px;height:7px;margin:0;vertical-align:baseline}
.panel--orte h2::after{content:"";height:2px;flex:1;background:var(--ink)}
.olist{list-style:none;margin:0;padding:0 clamp(20px,1.9vw,26px) 8px}
.olist li+li{border-top:1px solid var(--g-200)}
.oitem{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 16px;
  text-decoration:none;color:var(--ink);padding:15px 0 17px;
  transform:translate(0,0);
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.oitem b{font-family:Marcellus,Georgia,serif;font-weight:400;font-size:19px;line-height:1.2;
  -webkit-text-stroke:.35px currentColor}
.oitem span{grid-column:1/2;font-size:13.5px;line-height:1.45;color:var(--g-500)}
.oitem .ar{grid-column:2/3;grid-row:1/-1;align-self:center;
  font-family:inherit;font-size:15px;font-weight:400;color:var(--g-500);
  -webkit-text-stroke:0;transition:transform .22s ease,color .22s ease}
.oitem:hover{transform:translate(7px,-3px)}
.oitem:hover .ar{transform:translateX(4px);color:var(--ink)}
.hero .oitem:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
.oitem b.otag{display:block;grid-column:1/2;font-family:inherit;font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--g-600);margin-bottom:7px;
  -webkit-text-stroke:0;line-height:1.3}

/* Bildnachweis */
.credit{position:absolute;z-index:3;right:0;bottom:0;
  background:rgba(14,16,18,.96);color:var(--on-dark-2);
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:10px 18px 10px 20px}


/* ---------------- Der Verbund ---------------- */
.verbund{
  position:relative;z-index:6;background:var(--paper);
  margin-top:0;border-top:2px solid var(--ink);
  padding-block:clamp(40px,4.4vw,64px) clamp(48px,5.2vw,76px);
  scroll-margin-top:calc(var(--head) + 24px);
}
.sect-label{color:var(--g-500);margin:0 0 clamp(28px,3vw,42px);display:flex;align-items:center;gap:18px}
.sect-label::after{content:"";height:1px;flex:1;background:var(--g-200)}
.verbund__grid{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(30px,4vw,66px);align-items:center;
}
.verbund__media{margin:0;position:relative}
.verbund__media img{
  width:100%;height:auto;display:block;
  border:8px solid var(--paper);outline:1px solid var(--g-200);
  box-shadow:0 18px 40px rgba(20,23,26,.20);
}
.verbund__media figcaption{
  margin-top:18px;font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--g-500);
  display:flex;align-items:center;gap:12px;
}
.verbund__media figcaption::before{content:"";width:22px;height:1px;background:var(--ink);flex:none}
.claim-h{
  font-family:Marcellus,"Hoefler Text",Georgia,serif;font-weight:400;
  font-size:clamp(28px,2.7vw,42px);line-height:1.14;letter-spacing:.002em;
  margin:0;max-width:23ch;text-wrap:balance;color:var(--ink);
}
.claim-h::after{
  content:"";display:block;width:46px;height:2px;background:var(--ink);
  margin:clamp(20px,2.2vw,28px) 0 0;
}
.claim{
  margin:clamp(20px,2.2vw,28px) 0 clamp(28px,3vw,38px);
  font-size:17px;line-height:1.72;color:var(--g-700);max-width:52ch;
}

/* ---------------- Standorte, ragen in den Hero ---------------- */
.orte{position:relative;z-index:6;margin-top:0;scroll-margin-top:calc(var(--head) + 24px)}
.orte__panel{background:var(--shade);border-top:1px solid var(--g-200);max-width:none;margin:0;
  padding-inline:max(0px, calc(max(0px,(100% - 1320px)/2) + clamp(20px,4.4vw,60px) - 30px))}
.orte__head{display:flex;align-items:center;gap:18px;color:var(--g-500);padding:clamp(46px,4.8vw,72px) 30px 0}
.orte__head::after{content:"";height:1px;flex:1;background:var(--g-200)}
.orte__grid{display:grid;grid-template-columns:repeat(3,1fr)}
.ort{position:relative;display:flex;flex-direction:column;padding:clamp(26px,2.8vw,38px) 30px clamp(46px,4.8vw,72px);
  border-left:1px solid var(--g-200);transition:background .22s ease}
.ort:first-child{border-left:0}
.ort:hover{background:var(--paper)}
.ort::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.ort:hover::before,.ort:focus-within::before{transform:scaleX(1)}
.ort__tag{color:var(--g-500);margin:0 0 16px;display:flex;align-items:center}
.ort--haupt .ort__tag{color:var(--ink)}
.ort__name{font-family:Marcellus,Georgia,serif;font-weight:400;
  font-size:clamp(23px,1.9vw,29px);line-height:1.14;margin:0 0 16px}
.ort__img{width:100%;aspect-ratio:16/9;object-fit:cover;margin:0 0 18px;background:var(--g-100)}
.ort__name a{text-decoration:none}
.ort__name a::after{content:"";position:absolute;inset:0}
.ort p{margin:0 0 22px;color:var(--g-500);font-size:15.5px;line-height:1.58;max-width:33ch}
.ort__go{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:11px;font-size:12.5px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink)}
.ort:hover .ar{transform:translateX(5px)}
.ar{transition:transform .22s ease;display:inline-block}

/* ---------------- Leistungen ---------------- */
.leist{background:var(--paper);padding-block:clamp(58px,6.2vw,96px)}
.leist__head{
  display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);
  gap:clamp(26px,3.4vw,60px);align-items:end;
  margin-bottom:clamp(34px,3.8vw,54px);
}
.leist h2{
  font-family:Marcellus,"Hoefler Text",Georgia,serif;font-weight:400;
  font-size:clamp(27px,2.6vw,40px);line-height:1.16;margin:0;max-width:17ch;
}
.leist__aside{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.leist__aside p{margin:0;color:var(--g-500);max-width:44ch;font-size:16px}
.lnk--dark{
  display:inline-flex;align-items:center;gap:12px;text-decoration:none;
  font-size:12.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  padding:16px 26px;min-height:52px;color:var(--ink);
  background:var(--paper);border:1.5px solid var(--ink);
  transition:background .2s ease,color .2s ease;
}
.lnk--dark:hover{background:var(--ink);color:var(--paper)}

.leist__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(26px,2.8vw,44px) clamp(22px,2.4vw,38px);
}
.lcard{display:flex;flex-direction:column;position:relative}
.lcard__main{display:block;text-decoration:none;color:var(--ink)}
.lcard__media{
  display:block;position:relative;overflow:hidden;background:var(--shade);
  aspect-ratio:16/9;
}
.lcard__media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.lcard:hover .lcard__media img,.lcard:focus-visible .lcard__media img{transform:scale(1.04)}
.lcard__body{
  display:block;border-top:1px solid var(--g-300);margin-top:18px;padding-top:16px;position:relative;
}
.lcard__body::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .34s ease;
}
.lcard:hover .lcard__body::before,.lcard:focus-visible .lcard__body::before{transform:scaleX(1)}
.lcard__t{
  font-family:Marcellus,Georgia,serif;font-weight:400;
  font-size:clamp(21px,1.65vw,25px);line-height:1.16;margin:0;
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
}
.lcard__t .ar{font-size:15px;color:var(--g-500);transition:transform .22s ease}
.lcard:hover .lcard__t .ar{transform:translateX(5px)}
.lcard__o{
  margin:2px 0 0;font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--g-500);display:flex;align-items:center;flex-wrap:wrap;gap:0 4px;
}
.lcard__o::before{content:"";width:14px;height:1px;background:var(--g-300);flex:none;margin-right:7px}
.lcard__o a{
  color:var(--g-700);text-decoration:none;
  padding:8px 3px;display:inline-block;
  box-shadow:inset 0 -1px 0 var(--g-300);
  transition:color .18s ease,box-shadow .18s ease;
}
.lcard__o a:hover{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
.lcard__o span{color:var(--g-500);padding:0 2px}

/* ---------------- Gemeinsame Sektionsbausteine ---------------- */
.sec{padding-block:clamp(58px,6.2vw,96px);scroll-margin-top:calc(var(--head) + 24px)}
.sec--shade{background:var(--shade);border-top:1px solid var(--g-200)}
.sec--paper{background:var(--paper)}
.sec h2{
  font-family:Marcellus,"Hoefler Text",Georgia,serif;font-weight:400;
  font-size:clamp(27px,2.6vw,40px);line-height:1.16;margin:0;max-width:25ch;
  text-wrap:balance;color:var(--ink);
}
.sec__intro{margin:clamp(18px,1.9vw,24px) 0 0;color:var(--g-700);font-size:16.5px;
  line-height:1.7;max-width:56ch}
.sec__head{margin-bottom:clamp(34px,3.8vw,54px)}

/* Ärzte und Expertise */
.exp__top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(28px,3.4vw,60px);align-items:start;margin-bottom:clamp(34px,3.8vw,54px)}
.docs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.4vw,22px);margin:0}
.doc{margin:0}
.doc img{width:100%;height:auto;display:block;background:var(--paper);
  border:1px solid var(--g-200)}
.doc figcaption{margin-top:13px;padding-top:11px;border-top:2px solid var(--ink)}
.doc b{display:block;font-family:Marcellus,Georgia,serif;font-weight:400;font-size:17px;
  line-height:1.2;color:var(--ink)}
.doc span{display:block;margin-top:5px;font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--g-600)}
.exp__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,2.6vw,42px)}
.exp__col{border-top:2px solid var(--ink);padding-top:18px}
.exp__col h3{font-family:Marcellus,Georgia,serif;font-weight:400;font-size:clamp(20px,1.6vw,24px);
  line-height:1.18;margin:0 0 12px;color:var(--ink)}
.exp__col p{margin:0;color:var(--g-700);font-size:15.5px;line-height:1.62}

/* Patienteninfo, vier Schritte */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--paper);
  border-top:2px solid var(--ink);list-style:none;margin:0;padding:0}
.step{padding:clamp(22px,2.2vw,30px) clamp(18px,1.8vw,26px) clamp(26px,2.6vw,36px);
  border-left:1px solid var(--g-200)}
.step:first-child{border-left:0}
.step b{display:block;font-family:Marcellus,Georgia,serif;font-weight:400;
  font-size:clamp(19px,1.6vw,23px);line-height:1;letter-spacing:.02em;color:var(--g-600);
  margin-bottom:15px}
.step h3{font-family:inherit;font-weight:600;font-size:16.5px;line-height:1.3;
  letter-spacing:.01em;margin:0 0 10px;color:var(--ink)}
.step p{margin:0;color:var(--g-700);font-size:14.5px;line-height:1.6}

/* Stellen */
.jobs__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(28px,3.4vw,60px);align-items:start}
.jobs__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(26px,2.8vw,36px)}
.einstiege{background:var(--paper);border-top:3px solid var(--ink);padding:0}
.einstiege h3{font-size:13.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  font-family:inherit;color:var(--ink);margin:0;padding:20px clamp(20px,1.9vw,26px) 16px;
  display:flex;align-items:center;gap:14px}
.einstiege h3 .tick{width:7px;height:7px;margin:0}
.einstiege h3::after{content:"";height:2px;flex:1;background:var(--ink)}
.einstiege ul{list-style:none;margin:0;padding:0 clamp(20px,1.9vw,26px) 22px}
.einstiege li{padding:13px 0;font-size:15.5px;color:var(--g-700);border-top:1px solid var(--g-200)}
.einstiege li:first-child{border-top:0}

/* Kontakt */
.kon__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,2.6vw,40px)}
.kon{position:relative;display:flex;flex-direction:column;background:var(--paper)}
.kon__media{overflow:hidden;background:var(--shade);aspect-ratio:16/9}
.kon__media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.kon:hover .kon__media img{transform:scale(1.04)}
.kon__body{border-top:1px solid var(--g-300);margin-top:18px;padding-top:16px;position:relative;
  display:flex;flex-direction:column;flex:1}
.kon__body::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .34s ease}
.kon:hover .kon__body::before,.kon:focus-within .kon__body::before{transform:scaleX(1)}
.kon h3{font-family:Marcellus,Georgia,serif;font-weight:400;font-size:clamp(21px,1.65vw,25px);
  line-height:1.16;margin:0 0 12px;color:var(--ink)}
.kon p{margin:0 0 20px;color:var(--g-700);font-size:15.5px;line-height:1.6}
.kon__go{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:11px;
  font-size:12.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;padding:10px 0;min-height:44px}
.kon__go::after{content:"";position:absolute;inset:0}
.kon:hover .kon__go .ar{transform:translateX(5px)}

/* ---------------- Fuß ---------------- */
.foot{background:#14171A;color:#FFFFFF;padding-block:clamp(40px,4.2vw,60px) clamp(24px,2.4vw,32px)}
.foot__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);
  gap:clamp(26px,3vw,52px);padding-bottom:clamp(28px,3vw,42px)}
.foot h2{font-family:Marcellus,Georgia,serif;font-weight:400;font-size:clamp(21px,1.8vw,26px);
  line-height:1.2;margin:0 0 14px;color:#FFFFFF}
.foot p{margin:0;color:#D3D7D9;font-size:15px;line-height:1.66;max-width:38ch}
.foot h3{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  font-family:inherit;color:#FFFFFF;margin:0 0 14px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li+li{margin-top:2px}
.foot a{color:#D3D7D9;text-decoration:none;font-size:15px;display:inline-flex;align-items:center;
  min-height:44px;padding:2px 0;box-shadow:inset 0 0 0 rgba(255,255,255,0);
  transition:color .18s ease,box-shadow .18s ease}
.foot a:hover{color:#FFFFFF;box-shadow:inset 0 -1px 0 #FFFFFF}
.foot :where(a):focus-visible{outline:3px solid #FFFFFF;outline-offset:3px}
.foot__base{border-top:1px solid #3C4347;padding-top:clamp(16px,1.6vw,22px);
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 26px}
.foot__base p{color:#D3D7D9;font-size:13.5px;margin:0}
.foot__base nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:0 26px}
.foot__base a{font-size:13.5px}

/* ---------------- Entwurfshinweis ---------------- */
.note{background:var(--shade);border-top:1px solid var(--g-200);padding-block:34px 54px;font-size:13.5px;color:var(--g-500)}
.note h2{font-size:12px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink);
  margin:0 0 12px;font-weight:600;font-family:inherit}
.note ul{margin:0;padding-left:18px;display:grid;gap:6px;max-width:80ch}

/* ---------------- Schmaler ---------------- */
@media (max-width:1180px){
  .hero__grid{grid-template-columns:minmax(0,1fr)}
  .panel--orte{display:none}
}
@media (max-width:1120px){
  .dd__btn{padding:12px 11px;font-size:14.5px}
  .rail{display:none}
}
@media (max-width:880px){
  :root{--head:76px}
  .masthead .wrap{gap:14px;position:relative;padding-block:10px}
  .brand img{height:48px}
  .burger{display:inline-flex;align-items:center;gap:11px;margin-left:auto;background:none;
    border:1.5px solid var(--ink);color:var(--ink);font:inherit;font-size:11px;font-weight:600;
    letter-spacing:.2em;text-transform:uppercase;padding:14px 16px;min-height:46px;cursor:pointer}
  .burger:hover{background:var(--ink);color:var(--paper)}
  .burger i{display:grid;gap:4px}
  .burger i b{width:16px;height:1.5px;background:currentColor;display:block}
  .topnav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);
    border-bottom:1px solid var(--g-200);flex-direction:column;align-items:stretch;gap:0;
    padding:4px 0 20px;box-shadow:var(--lift);max-height:calc(100svh - var(--head));overflow-y:auto}
  .topnav[data-open="true"]{display:flex}
  .dd{position:static;align-self:auto;display:block}
  .dd__btn{width:100%;justify-content:space-between;padding:16px clamp(20px,4.4vw,60px);
    font-size:17px;border-bottom:1px solid var(--g-100)}
  .dd__btn::after{display:none}
  .dd__panel{position:static;border:0;border-top:0;box-shadow:none;background:var(--g-100);padding:4px 0 10px;min-width:0}
  .dd__panel a{padding:13px clamp(32px,7vw,74px)}
  .jobs{margin:16px clamp(20px,4.4vw,60px) 0;justify-content:center}

  .hero{min-height:520px;max-height:none}
  .hero__inner{justify-content:flex-end;padding-bottom:26px}
  h1{font-size:clamp(33px,9vw,40px)}
  h1{gap:6px;font-size:clamp(29px,8.2vw,38px)}
  .hero__eyebrow{margin-bottom:20px;font-size:10.5px;letter-spacing:.13em}
  .hero__eyebrow b{padding:10px 12px}
  .rail{display:none}
  h1{font-size:clamp(29px,8.2vw,38px);gap:6px}
  .hero__lede{margin-bottom:26px}
  .hero__cta{display:grid;gap:10px}
  .btn,.lnk{justify-content:center;width:100%}
  .lnk{padding-inline:18px}
  .credit{display:none}

  .verbund{margin-top:0;padding-block:30px 40px}
  .verbund__grid{grid-template-columns:1fr;gap:26px}
  .orte{margin-top:0}
  .orte__panel{padding-inline:0}
  .orte__head{padding:38px clamp(20px,4.4vw,32px) 0}
  .orte__head{padding:22px clamp(20px,4.4vw,32px) 0}
  .orte__grid{grid-template-columns:1fr}
  .ort{border-left:0;border-top:1px solid var(--g-200);padding:24px clamp(20px,4.4vw,32px) 34px}
  .ort:first-child{border-top:0}
  .ort p{max-width:none;margin-bottom:18px}


  .leist__head{grid-template-columns:1fr;gap:22px;align-items:start}
  .exp__top{grid-template-columns:1fr;gap:26px;align-items:start}
  .exp__grid{grid-template-columns:1fr;gap:26px}
  .steps{grid-template-columns:1fr}
  .step{border-left:0;border-top:1px solid var(--g-200)}
  .step:first-child{border-top:0}
  .jobs__grid{grid-template-columns:1fr;gap:28px}
  .jobs__cta{display:grid;gap:10px}
  .kon__grid{grid-template-columns:1fr;gap:30px}
  .foot__grid{grid-template-columns:1fr;gap:26px}
  .foot__base{gap:4px 20px}
  .foot__base nav{margin-left:0;width:100%}
  .leist__grid{grid-template-columns:1fr;gap:30px}
  .lnk--dark{width:100%;justify-content:center}
}

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

/* ==========================================================================
   Ergänzungen für die Kirby-Blöcke: Fließtext, Text mit Bild, Fragen
   ========================================================================== */

.prose{max-width:68ch;color:var(--g-700);font-size:16.5px;line-height:1.72}
.prose > * + *{margin-top:1.1em}
.prose h3{margin-top:1.6em;color:var(--ink);font-family:var(--serif,inherit);font-weight:400}
.prose ul,.prose ol{padding-left:1.25em}
.prose li + li{margin-top:.5em}
.prose a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

.verbund--rechts .verbund__media{order:2}

.faq{margin-top:clamp(26px,3vw,40px);border-top:1px solid var(--g-300)}
.faq__item{border-bottom:1px solid var(--g-300)}
.faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:44px;padding:18px 2px;cursor:pointer;color:var(--ink);
  font-size:17px;font-weight:500;list-style:none}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.faq__item summary .caret{flex:0 0 auto;transition:transform .2s ease}
.faq__item[open] summary .caret{transform:rotate(180deg)}
.faq__a{padding:0 2px 22px;color:var(--g-700);font-size:16.5px;line-height:1.72}
.faq__a p{margin:0;max-width:68ch}
@media (prefers-reduced-motion:reduce){
  .faq__item summary .caret{transition:none}
}

/* ==========================================================================
   Standortleiste, Seitenkopf, Flaechenwechsel und die neuen Bausteine
   ========================================================================== */

/* Flaechenwechsel: die Bausteine bekommen ihre Flaeche vom Template */
.verbund.is-shade{background:var(--shade)}
.verbund:not(.is-first){border-top:1px solid var(--g-200)}
.leist.is-shade{background:var(--shade);border-top:1px solid var(--g-200)}
.orte.is-paper .orte__panel{background:var(--paper)}

/* Startseiten-Link, nur im Handy-Menue */
.navhome{display:none}

/* Standortleiste */
.ortsleiste{position:relative;z-index:8;background:var(--ink);color:var(--paper)}
.ortsleiste__inner{display:flex;align-items:center;gap:clamp(18px,2.4vw,38px);
  min-height:52px;flex-wrap:wrap}
.ortsleiste__ort{display:flex;align-items:center;gap:10px;margin:0;flex:none;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.ortsleiste__ort .tick{width:8px;height:8px;background:currentColor;flex:none}
.ortsleiste__label{color:rgba(255,255,255,.66)}
.ortsleiste__ort b{font-weight:600;letter-spacing:.1em}
.ortsleiste__links{display:flex;flex-wrap:wrap;gap:0 4px;list-style:none;margin:0;padding:0;
  margin-left:auto}
.ortsleiste__links li{display:flex;align-items:center}
.ortsleiste__links a{display:inline-flex;align-items:center;min-height:36px;
  margin:4px 0;padding:0 14px;color:rgba(255,255,255,.82);text-decoration:none;font-size:15px;
  transition:background .18s ease,color .18s ease}
.ortsleiste__links a:hover{color:var(--paper);background:rgba(255,255,255,.12)}
.ortsleiste__links a[aria-current="page"]{background:var(--paper);color:var(--ink);font-weight:600}
.ortsleiste__links a[aria-current="page"]:hover{background:var(--paper);color:var(--ink)}
.ortsleiste a:focus-visible{outline:2px solid var(--paper);outline-offset:-2px}

/* Seitenkopf der Unterseiten */
.seitenkopf{background:var(--paper);padding-block:clamp(38px,4.4vw,68px) clamp(26px,3vw,40px);
  border-bottom:1px solid var(--g-200)}
.seitenkopf h1{font-family:Marcellus,"Hoefler Text",Georgia,serif;font-weight:400;
  font-size:clamp(30px,4.2vw,54px);line-height:1.1;margin:14px 0 0;max-width:24ch;
  color:var(--ink);text-wrap:balance;display:block}
.seitenkopf__intro{margin:clamp(16px,1.8vw,22px) 0 0;max-width:62ch;
  color:var(--g-700);font-size:17px;line-height:1.66}

/* Galerie */
.galerie{list-style:none;margin:clamp(26px,3vw,40px) 0 0;padding:0;display:grid;
  gap:clamp(14px,1.6vw,22px)}
.galerie[data-spalten="zwei"]{grid-template-columns:repeat(2,1fr)}
.galerie[data-spalten="drei"]{grid-template-columns:repeat(3,1fr)}
.galerie[data-spalten="vier"]{grid-template-columns:repeat(4,1fr)}
.galerie__item{margin:0}
.galerie__item img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;
  outline:1px solid var(--g-200)}

/* Team-Karten */
.teamliste{list-style:none;margin:clamp(26px,3vw,40px) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.2vw,30px)}
.teamliste[data-spalten="zwei"]{grid-template-columns:repeat(2,1fr)}
.teamliste[data-spalten="drei"]{grid-template-columns:repeat(3,1fr)}
.teamliste[data-spalten="vier"]{grid-template-columns:repeat(4,1fr)}
.tcard{display:flex;flex-direction:column;gap:6px;background:var(--paper);
  outline:1px solid var(--g-200);padding-bottom:20px}
.tcard__img{width:100%;aspect-ratio:3/4;object-fit:cover;margin-bottom:14px}
.teamliste[data-spalten="zwei"] .tcard__img{aspect-ratio:4/3}
.tcard__name,.tcard__rolle,.tcard p{padding-inline:20px}
.tcard__name{font-weight:600;font-size:17px;color:var(--ink)}
.tcard__rolle{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--g-500)}
.tcard p{margin:8px 0 0;color:var(--g-700);font-size:15.5px;line-height:1.6}

/* Aerzte-Karten */
.aerzte{list-style:none;margin:clamp(26px,3vw,40px) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.4vw,34px)}
.acard{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  background:var(--paper);outline:1px solid var(--g-200)}
.acard::before{content:"";grid-column:1 / -1;height:2px;background:var(--ink)}
.acard__img{width:100%;height:100%;aspect-ratio:3/4;object-fit:cover}
.acard__body{padding:clamp(20px,2.2vw,30px)}
.acard__name{display:block;font-family:Marcellus,"Hoefler Text",Georgia,serif;font-weight:400;
  font-size:clamp(20px,1.7vw,25px);line-height:1.2;color:var(--ink)}
.acard__rolle{display:block;margin-top:8px;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--g-500)}
.acard__fach{margin:14px 0 0;color:var(--g-700);font-size:15.5px;line-height:1.6}
.acard__sp{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.acard__sp li{border:1px solid var(--g-300);padding:6px 10px;font-size:13px;color:var(--g-700)}
.acard__kontakt{margin:18px 0 0;display:flex;flex-direction:column;gap:4px}
.acard__kontakt a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);
  text-decoration:underline;text-underline-offset:3px;font-size:15.5px}

/* Oeffnungszeiten */
.zeiten{margin:clamp(26px,3vw,40px) 0 0;max-width:640px;border-top:1px solid var(--g-300)}
.zeiten__row{display:flex;justify-content:space-between;gap:20px;
  padding:15px 2px;border-bottom:1px solid var(--g-200)}
.zeiten dt{font-weight:500;color:var(--ink);font-size:16.5px;margin:0}
.zeiten dd{margin:0;color:var(--g-700);font-size:16.5px;text-align:right}
.zeiten__hinweis{margin:20px 0 0;max-width:62ch;color:var(--g-600);font-size:15.5px;line-height:1.6}

/* Sprechstunden */
.sprech{list-style:none;margin:clamp(26px,3vw,40px) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.sprech__item{display:flex;flex-direction:column;gap:8px;background:var(--paper);
  outline:1px solid var(--g-200);border-top:2px solid var(--ink);padding:clamp(20px,2.2vw,28px)}
.sprech__item b{font-size:17px;color:var(--ink)}
.sprech__zeit{font-family:Marcellus,"Hoefler Text",Georgia,serif;font-size:clamp(19px,1.6vw,23px);color:var(--ink)}
.sprech__hinweis{font-size:14px;color:var(--g-500)}

/* Anfahrt und maskierte Karte */
.anfahrt{margin-top:clamp(26px,3vw,40px);display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,3vw,48px);align-items:start}
.anfahrt__adresse{font-style:normal;font-size:17px;line-height:1.66;color:var(--ink)}
.anfahrt__weg{margin-top:26px}
.anfahrt__weg h3{margin:0 0 6px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--g-500);font-weight:600}
.anfahrt__weg p{margin:0;color:var(--g-700);font-size:15.5px;line-height:1.66;max-width:52ch}
.karte{position:relative;background:var(--shade);outline:1px solid var(--g-200);
  min-height:340px;display:flex}
.karte__platzhalter{margin:auto;padding:clamp(22px,3vw,40px);max-width:46ch;text-align:center}
.karte__platzhalter p{margin:0 0 14px;color:var(--g-700);font-size:15.5px;line-height:1.6}
.karte__links a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;font-size:14.5px}
.karte iframe{width:100%;min-height:340px;border:0;display:block}

/* Notfallhinweis */
.notfall{border:2px solid var(--ink);background:var(--paper);
  padding:clamp(22px,2.6vw,36px);display:grid;gap:12px;
  grid-template-columns:minmax(0,1fr) auto;align-items:center}
.notfall__h{grid-column:1;font-family:Marcellus,"Hoefler Text",Georgia,serif;font-weight:400;
  font-size:clamp(21px,2vw,29px);margin:0;color:var(--ink)}
.notfall__text{grid-column:1;grid-row:2;margin:0;color:var(--g-700);font-size:16.5px;
  line-height:1.66;max-width:58ch}
.notfall__tel{grid-column:2;grid-row:1 / span 2;margin:0;display:flex;flex-direction:column;
  align-items:flex-end;gap:2px;text-align:right}
.notfall__tel span{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--g-500)}
.notfall__tel a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);
  font-family:Marcellus,"Hoefler Text",Georgia,serif;font-size:clamp(22px,2.4vw,32px);
  text-decoration:none;border-bottom:2px solid var(--ink)}

@media (max-width:1100px){
  .aerzte{grid-template-columns:1fr}
  .teamliste[data-spalten="drei"],.teamliste[data-spalten="vier"]{grid-template-columns:repeat(2,1fr)}
  .teamliste .tcard__img{aspect-ratio:4/3}
  .sprech{grid-template-columns:repeat(2,1fr)}
  .anfahrt{grid-template-columns:1fr}
}

@media (max-width:880px){
  .navhome{display:flex;align-items:center;min-height:52px;
    padding:16px clamp(20px,4.4vw,60px);font-size:17px;font-weight:500;
    color:var(--ink);text-decoration:none;border-bottom:1px solid var(--g-100)}
  .navhome[aria-current="page"]{box-shadow:inset 3px 0 0 var(--ink)}
  .dd__btn[data-aktiv="true"]{box-shadow:inset 3px 0 0 var(--ink)}

  .ortsleiste__inner{flex-direction:column;align-items:stretch;gap:0;padding-block:6px}
  .ortsleiste__ort{padding-block:12px;border-bottom:1px solid rgba(255,255,255,.18)}
  .ortsleiste__links{margin-left:0;gap:0;overflow-x:auto;flex-wrap:nowrap;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ortsleiste__links::-webkit-scrollbar{display:none}
  .ortsleiste__links a{white-space:nowrap;margin:8px 0}
  .ortsleiste__links li:first-child a{margin-left:0}

  .galerie[data-spalten="drei"],.galerie[data-spalten="vier"]{grid-template-columns:repeat(2,1fr)}
  .teamliste,.teamliste[data-spalten="zwei"],.teamliste[data-spalten="drei"],.teamliste[data-spalten="vier"]{grid-template-columns:1fr}
  .sprech{grid-template-columns:1fr}
  .zeiten__row{gap:12px}
  .notfall{grid-template-columns:1fr}
  .notfall__tel{grid-column:1;grid-row:auto;align-items:flex-start;text-align:left;margin-top:8px}
}

@media (max-width:560px){
  .galerie[data-spalten="zwei"],.galerie[data-spalten="drei"],.galerie[data-spalten="vier"]{grid-template-columns:1fr}
  .acard{grid-template-columns:1fr}
  .acard__img{aspect-ratio:4/3}
}

/* ==========================================================================
   Galerie mit Lightbox und angedeutete Karte im Platzhalter
   ========================================================================== */

.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.galerie__btn{display:block;position:relative;width:100%;padding:0;border:0;background:none;
  cursor:pointer;outline-offset:3px}
.galerie__btn img{transition:opacity .2s ease}
.galerie__btn:hover img{opacity:.88}
.galerie__btn:focus-visible{outline:2px solid var(--ink)}
.galerie__lupe{position:absolute;right:12px;bottom:12px;width:34px;height:34px;
  background:var(--paper);outline:1px solid var(--g-300);opacity:0;transition:opacity .2s ease}
.galerie__lupe::before,.galerie__lupe::after{content:"";position:absolute;background:var(--ink)}
.galerie__lupe::before{left:9px;top:16px;width:16px;height:2px}
.galerie__lupe::after{left:16px;top:9px;width:2px;height:16px}
.galerie__btn:hover .galerie__lupe,.galerie__btn:focus-visible .galerie__lupe{opacity:1}

.lb{width:100%;max-width:100%;max-height:100%;height:100%;margin:0;padding:0;border:0;
  background:rgba(12,14,16,.94);color:#fff}
.lb::backdrop{background:rgba(12,14,16,.94)}
.lb__buehne{display:flex;align-items:center;justify-content:center;
  height:100%;padding:clamp(56px,7vw,96px) clamp(16px,6vw,110px)}
.lb__bild{max-width:100%;max-height:100%;width:auto;height:auto;display:block;
  outline:1px solid rgba(255,255,255,.14)}
.lb__unten{position:absolute;left:0;right:0;bottom:0;margin:0;
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:16px clamp(16px,4vw,40px);background:rgba(12,14,16,.72);
  font-size:14.5px;line-height:1.5}
.lb__text{color:rgba(255,255,255,.88);max-width:80ch}
.lb__zaehler{flex:none;color:rgba(255,255,255,.6);font-size:12px;letter-spacing:.14em}
.lb__zu,.lb__pfeil{position:absolute;display:inline-flex;align-items:center;justify-content:center;
  min-width:48px;min-height:48px;border:1.5px solid rgba(255,255,255,.4);background:none;
  color:#fff;font:inherit;font-size:22px;line-height:1;cursor:pointer;
  transition:background .18s ease,border-color .18s ease}
.lb__zu:hover,.lb__pfeil:hover{background:rgba(255,255,255,.14);border-color:#fff}
.lb__zu:focus-visible,.lb__pfeil:focus-visible{outline:2px solid #fff;outline-offset:3px}
.lb__zu{top:clamp(10px,2vw,20px);right:clamp(10px,2vw,20px)}
.lb__pfeil{top:50%;transform:translateY(-50%)}
.lb__pfeil--zurueck{left:clamp(8px,1.6vw,20px)}
.lb__pfeil--vor{right:clamp(8px,1.6vw,20px)}
.lb[data-einzeln="true"] .lb__pfeil{display:none}

.karte{position:relative;overflow:hidden}
.kartenbild{position:absolute;inset:0;width:100%;height:100%;
  color:var(--g-500);opacity:.14;pointer-events:none}
.karte__platzhalter{position:relative;z-index:2}
.karte__platzhalter p,.karte__links{background:var(--shade);box-shadow:0 0 0 8px var(--shade)}
.karte iframe{position:relative;z-index:3}

@media (max-width:880px){
  .lb__buehne{padding:64px 12px 84px}
  .lb__pfeil{top:auto;bottom:calc(100% - 100vh + 96px);transform:none}
  .lb__unten{flex-direction:column;gap:4px}
  .galerie__lupe{opacity:1}
}

/* ==========================================================================
   Seiten-Hero, Leistungskacheln und Leistungsdetails
   ========================================================================== */

.shero{position:relative;overflow:hidden;background:#DCDFE0;color:#14171A;
  display:flex;align-items:center}
.shero--klein{min-height:340px;height:46svh;max-height:520px}
.shero--mittel{min-height:380px;height:58svh;max-height:640px}
.shero--gross{min-height:440px;height:70svh;max-height:760px}
.shero__schleier{position:absolute;inset:0;z-index:2;
  background:linear-gradient(90deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.34) 52%,rgba(255,255,255,0) 82%)}
.shero__inner{position:relative;z-index:3;width:100%}
.shero__say{max-width:82%}
.shero__eyebrow{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 18px;padding:0}
.shero__eyebrow b{font-weight:600;font-size:12px;letter-spacing:.18em;
  background:var(--ink);color:#FFFFFF;padding:11px 16px;display:inline-block}
.shero h1{font-family:Marcellus,"Hoefler Text",Georgia,serif;font-weight:400;
  font-size:clamp(30px,4.4vw,56px);line-height:1.14;margin:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.shero h1 .zeile{display:inline-block;max-width:100%;white-space:nowrap;
  background:var(--paper);color:var(--ink);padding:.1em .26em .17em}
.shero__cta{margin-top:clamp(20px,2.4vw,30px);display:flex;gap:12px;flex-wrap:wrap}
.shero .rail{background:var(--paper)}
.shero :where(a,button):focus-visible{outline-color:#14171A}

/* Kacheln der Leistungsuebersicht, kleiner als auf der Startseite */
.lkacheln{list-style:none;margin:clamp(26px,3vw,40px) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.lkacheln[data-spalten="zwei"]{grid-template-columns:repeat(2,1fr)}
.lkacheln[data-spalten="drei"]{grid-template-columns:repeat(3,1fr)}
.lkacheln[data-spalten="vier"]{grid-template-columns:repeat(4,1fr)}
.lkachel{display:block;text-decoration:none;color:var(--ink);background:var(--paper);
  outline:1px solid var(--g-200);transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.lkachel:hover{transform:translateY(-4px)}
.lkachel__media{display:block;overflow:hidden}
.lkachel__media img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block}
.lkachel__t{display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:56px;padding:14px 18px;font-size:16.5px;font-weight:500}
.lkachel:hover .ar{transform:translateY(3px)}
.lkachel:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* Eine Leistung ausfuehrlich */
.ldetail{padding-block:clamp(46px,5vw,78px);scroll-margin-top:calc(var(--head) + 64px)}
.ldetail.sec--shade{background:var(--shade);border-top:1px solid var(--g-200)}
.ldetail.sec--paper{background:var(--paper)}
.ldetail__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(24px,3.4vw,54px);align-items:center}
.ldetail--links .ldetail__media{order:2}
.ldetail__media{margin:0}
.ldetail__media img{width:100%;height:auto;display:block;
  border:8px solid var(--paper);outline:1px solid var(--g-200);
  box-shadow:0 14px 34px rgba(20,23,26,.16)}
.ldetail__body h2{font-family:Marcellus,"Hoefler Text",Georgia,serif;font-weight:400;
  font-size:clamp(24px,2.4vw,36px);line-height:1.16;margin:0 0 16px;color:var(--ink)}
.ldetail__punkte{margin:20px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.ldetail__punkte li{border:1px solid var(--g-300);padding:8px 12px;font-size:14px;color:var(--g-700)}
.ldetail__zurueck{margin:22px 0 0}
.ldetail__zurueck a{display:inline-flex;align-items:center;gap:10px;min-height:44px;
  color:var(--g-600);text-decoration:none;font-size:12.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase}
.ldetail__zurueck a:hover{color:var(--ink)}

@media (max-width:1100px){
  .lkacheln[data-spalten="vier"]{grid-template-columns:repeat(3,1fr)}
  .ldetail__grid{grid-template-columns:1fr;gap:24px}
  .ldetail--links .ldetail__media{order:0}
}

@media (max-width:880px){
  .shero--klein,.shero--mittel,.shero--gross{height:auto;max-height:none;
    min-height:0;padding-block:clamp(34px,8vw,56px)}
  .shero__schleier{background:linear-gradient(180deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.62) 70%,rgba(255,255,255,.5) 100%)}
  .shero .rail{display:none}
  .shero__say{max-width:none}
  .shero h1{line-height:1.2}
  .shero h1 .zeile{white-space:normal}
  .shero__cta .btn{width:100%;justify-content:center}
  .lkacheln,.lkacheln[data-spalten="zwei"],.lkacheln[data-spalten="drei"],.lkacheln[data-spalten="vier"]{grid-template-columns:1fr}
}


/* ==========================================================================
   Standortseiten: der Kopf scrollt weg, die Standortleiste bleibt oben
   ========================================================================== */

.im-standort .masthead{position:static}
.im-standort .ortsleiste{position:sticky;top:0;z-index:80}
.im-standort .ortsleiste::after{content:"";position:absolute;left:0;right:0;top:100%;
  height:14px;background:linear-gradient(rgba(12,14,16,.16),rgba(12,14,16,0));
  pointer-events:none;opacity:0;transition:opacity .2s ease}
.im-standort .ortsleiste[data-haftet="true"]::after{opacity:1}
.im-standort :target,
.im-standort [id]{scroll-margin-top:calc(52px + 24px)}

@media (max-width:880px){
  .im-standort .ortsleiste{position:sticky;top:0}
  .im-standort [id]{scroll-margin-top:calc(104px + 16px)}
}