/* ---- style.css ---- */

:root{
  --ink:#1A1A1A; --graphit:#6B6B6B; --silber:#969696; --silber2:#A8A8A8; --linie:#E6E6E6; --papier:#FFFFFF; --papier2:#FAFAFA; --tuerkis:#4E706B;
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Montserrat',system-ui,sans-serif;
  --max:1320px; --pad:clamp(20px,5vw,72px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
html,body{overflow-x:clip}
body{font-family:var(--sans);font-weight:300;color:var(--ink);background:var(--papier);line-height:1.7;font-size:15px}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
:focus-visible{outline:1.5px solid var(--tuerkis);outline-offset:4px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.label{font-family:var(--serif);font-size:14px;letter-spacing:.3em;text-transform:uppercase;color:var(--silber);font-weight:500}
.label.dark{color:var(--ink)}
.label.tk{color:var(--tuerkis)}
.serif{font-family:var(--serif);font-weight:400;line-height:1.08}
h1,h2,h3{font-family:var(--sans);font-weight:300;line-height:1.14;letter-spacing:.01em}
h2 strong,h1 strong{font-weight:500}
h2{font-size:clamp(30px,3.6vw,50px)}
h2 em,h1 em{font-style:normal;font-weight:500;color:var(--tuerkis)}
.cta h2 em{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:8px;text-decoration-thickness:1px}
.lead{font-size:17px;line-height:1.85;color:var(--graphit);max-width:56ch}
p+p{margin-top:1em}
.btn{display:inline-flex;align-items:center;gap:14px;padding:18px 30px;border:1px solid var(--tuerkis);color:var(--tuerkis);font-size:11px;letter-spacing:.26em;text-transform:uppercase;font-weight:500;transition:background .3s,color .3s,border-color .3s;white-space:nowrap}
.btn:hover{background:var(--tuerkis);color:#fff}
.btn.solid{background:var(--tuerkis);border-color:var(--tuerkis);color:#fff}
.btn.solid:hover{background:var(--ink);border-color:var(--ink)}
.btn.ghost{border-color:var(--silber2);color:var(--ink)}
.btn.ghost:hover{background:transparent;border-color:var(--tuerkis);color:var(--tuerkis)}
.btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.4;transition:transform .3s}
.btn:hover svg{transform:translateX(4px)}
.textlink{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;border-bottom:1px solid var(--ink);padding-bottom:6px;transition:color .3s,border-color .3s}
.textlink:hover{color:var(--tuerkis);border-color:var(--tuerkis)}
.hr{height:1px;background:var(--linie)}
section{padding:clamp(88px,11vw,160px) 0}
.rule{display:flex;align-items:center;gap:22px;margin-bottom:28px}
.rule .label{white-space:nowrap}
.rule:after{content:"";flex:1;height:1px;background:var(--linie)}

/* ---------- HEADER ---------- */
/* Bei offenem Menue wird body auf overflow:hidden gesetzt. Das bricht sticky:
   der Kopf haengt dann an seiner Dokumentposition und ist nach oben aus dem
   Bild gerutscht, sobald man vorher gescrollt hatte. Deshalb dort fixed. */
body.menue-offen header{position:fixed;top:0;left:0;right:0;width:100%}
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:saturate(160%) blur(12px);-webkit-backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid transparent;transition:border-color .3s}
header.scrolled{border-bottom-color:var(--linie)}
.nav{display:grid;grid-template-columns:auto 1fr auto;align-items:center;height:104px;gap:40px}
.nav nav{justify-self:center}
.brand{display:block}
.brand img{height:76px;width:auto;max-width:none}
.menu{display:flex;gap:38px;list-style:none}
.menu>li{position:relative}
.menu>li>a,.menu>li>button{display:flex;align-items:center;gap:8px;height:104px;font-size:11px;letter-spacing:.26em;text-transform:uppercase;font-weight:500;position:relative}
.menu>li>a:after,.menu>li>button:after{content:"";position:absolute;left:0;right:0;bottom:34px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.menu>li:hover>a:after,.menu>li:hover>button:after,.menu>li.open>button:after{transform:scaleX(1)}
.menu svg.chev{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:1.5;transition:transform .3s}
.menu>li.open svg.chev{transform:rotate(180deg)}
.navright{display:flex;justify-content:flex-end;align-items:center;gap:30px}
.telbox{display:inline-flex;align-items:center;gap:12px;border:1px solid var(--linie);padding:9px 16px;white-space:nowrap;transition:border-color .3s}
.telbox svg{width:15px;height:15px;fill:var(--tuerkis);flex:none}
.telbox span{display:flex;flex-direction:column;line-height:1.3;font-size:13px;letter-spacing:.05em;font-weight:400}
.telbox small{font-size:8.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--silber);font-weight:500}
.telbox:hover{border-color:var(--tuerkis)}
.navright .btn{padding:14px 22px}
.burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;gap:6px}
.burger span{display:block;width:26px;height:1px;background:var(--ink);transition:transform .35s,opacity .3s}
.burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mega */
.mega{position:absolute;left:0;right:0;top:104px;background:#fff;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .3s,transform .35s cubic-bezier(.2,.7,.2,1),visibility 0s .35s;z-index:40}
header.mega-open .mega{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .35s cubic-bezier(.2,.7,.2,1),visibility 0s}
.mega .wrap{display:grid;grid-template-columns:1fr 1fr 1fr 1.5fr;gap:0}
.mega .col{padding:48px 32px 52px 0;border-right:1px solid var(--linie);margin-right:32px}
.mega .col:nth-child(3){border-right:0}
.mega .col .label{display:block;margin-bottom:6px}
.mega .col h4{font-family:var(--sans);font-size:21px;font-weight:400;margin-bottom:24px;line-height:1.3}
.mega .col a{display:block;padding:13px 0;border-bottom:1px solid #EEE;font-size:15.5px;font-weight:400;transition:padding-left .3s,color .3s}
.mega .col a span{display:block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--graphit);font-weight:500;margin-top:4px}
.mega .col a:hover{padding-left:8px;color:var(--tuerkis)}
.mega .feat{padding:48px 0 52px 0;display:grid;grid-template-columns:150px 1fr;gap:30px;align-items:start}
.mega .feat img{aspect-ratio:3/4;object-fit:cover;filter:saturate(.85)}
.mega .feat p{font-size:14.5px;color:var(--graphit);margin:10px 0 24px;line-height:1.8}
.mega .feat .serif{font-family:var(--sans);font-size:19px;font-weight:400;line-height:1.4;margin-top:6px}
.mega-backdrop{position:fixed;inset:0;top:104px;background:rgba(26,26,26,.18);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s;z-index:30}
header.mega-open ~ .mega-backdrop{opacity:1;visibility:visible;transition:opacity .3s,visibility 0s}

/* mobile */
.mobile{position:fixed;inset:0;top:104px;background:#fff;z-index:45;overflow-y:auto;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .35s,transform .4s cubic-bezier(.2,.7,.2,1),visibility 0s .4s}
.mobile.on{opacity:1;visibility:visible;transform:none;transition:opacity .35s,transform .4s cubic-bezier(.2,.7,.2,1),visibility 0s}
.mobile .in{padding:16px var(--pad) 48px;display:flex;flex-direction:column;min-height:100%}
.mobile .ml{list-style:none}
.mobile .ml>li{border-bottom:1px solid var(--linie)}
.mobile .ml>li>a,.mobile .ml>li>button{display:flex;width:100%;justify-content:space-between;align-items:center;padding:22px 0;font-family:var(--sans);font-weight:300;font-size:26px;line-height:1.1;text-align:left}
.mobile .ml>li>a small,.mobile .ml>li>button small{font-family:var(--serif);font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--silber);font-weight:500}
/* Aufklappbares Untermenue. Die Variante ueber grid-template-rows 0fr auf 1fr
   rechnete den Track auf 0 herunter, dadurch blieb das Leistungsmenue auf dem
   Handy leer. max-height ist unelegant, funktioniert dafuer ueberall. */
.mobile .sub{overflow:hidden;max-height:0;transition:max-height .45s cubic-bezier(.2,.7,.2,1)}
.mobile .sub>div{overflow:hidden}
.mobile .ml>li.open .sub{max-height:1400px}
.mobile .sub .g{padding:4px 0 26px;display:grid;gap:18px}
.mobile .sub .label{margin-bottom:6px;display:block}
.mobile .sub a{display:block;padding:8px 0;font-size:15px;border-bottom:1px solid #F2F2F2}
.mobile .mfoot{margin-top:auto;padding-top:36px;display:grid;gap:18px}
.mobile .mfoot .btn{justify-content:center}
.mobile .mfoot .meta{font-size:12px;color:var(--graphit);line-height:1.9}
.mobile .ml>li{opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s}
.mobile.on .ml>li{opacity:1;transform:none}
.mobile.on .ml>li:nth-child(1){transition-delay:.08s}.mobile.on .ml>li:nth-child(2){transition-delay:.14s}.mobile.on .ml>li:nth-child(3){transition-delay:.2s}.mobile.on .ml>li:nth-child(4){transition-delay:.26s}.mobile.on .ml>li:nth-child(5){transition-delay:.32s}

/* ---------- HERO ---------- */
.hero{padding:0;position:relative;overflow:hidden}
.herobg{position:absolute;inset:0;z-index:0}
.herobg img{width:100%;height:100%;object-fit:cover;object-position:right center}
/* Kein zusaetzlicher Verlauf auf dem Desktop: das Startbild bringt seine
   Aufhellung nach links bereits mit, ein zweiter wuerde doppelt aufhellen.
   Auf schmalen Geraeten bleibt der weiche Abschluss nach unten erhalten,
   dort geht das Bild direkt in den Text ueber (siehe Media Query). */
.herotxt{position:relative;z-index:1;min-height:min(80vh,760px);display:flex;flex-direction:column;justify-content:center;padding-top:clamp(60px,8vw,120px);padding-bottom:clamp(60px,8vw,120px);max-width:var(--max)}
.hero h1{font-size:clamp(32px,3.9vw,60px);line-height:1.12;margin:22px 0 30px;letter-spacing:-.01em}
.hero h1 em{color:var(--graphit)}
.hero .lead{margin-bottom:42px;max-width:42ch;color:var(--ink);font-weight:300}
.hero .hcta{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.herotag{margin-top:clamp(40px,6vw,80px)}
.herotag .serif{font-size:22px;margin-top:4px}
.facts{margin-top:0;position:relative;z-index:1;background:#fff;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);display:grid;grid-template-columns:repeat(4,1fr)}
/* Alle vier Spalten haben denselben Innenabstand, auch die erste und die letzte.
   Damit die Leiste trotzdem buendig zum uebrigen Inhalt sitzt, wird das Raster
   um genau diesen Abstand nach aussen gezogen. */
/* Der Versatz nur dort, wo der Seitenabstand groesser als 28px ist. Auf
   schmalen Geraeten waere die Leiste sonst ueber den Rand gelaufen. */
@media (min-width:620px){.facts{margin-left:-28px;margin-right:-28px}}
.facts>div{padding:30px 28px;border-right:1px solid var(--linie)}
.facts>div:last-child{border-right:0}
.facts .serif{font-size:22px;line-height:1.2;margin-top:6px}

/* ---------- NAME / GESCHICHTE ---------- */
.name{background:var(--papier2)}
.name .head{max-width:760px;margin-bottom:clamp(48px,6vw,90px)}
.name .head h2{margin:18px 0 22px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wordscene{padding:clamp(10px,2vw,36px) 0 clamp(30px,4vw,56px)}
.ws-row{display:grid;grid-template-columns:minmax(220px,330px) 1fr;gap:clamp(40px,6vw,110px);align-items:center}
.ws-row.rrev{grid-template-columns:1fr minmax(220px,330px)}
.ws-row .wline{text-align:center}
.wline{overflow:visible}
.wletters{font-family:var(--serif);font-size:clamp(56px,10vw,158px);letter-spacing:.16em;line-height:1.08;display:inline-block;white-space:nowrap;margin-right:-.16em}
.wletters i{font-style:normal;display:inline-block;opacity:0;transform:translateY(.55em) rotate(2deg);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.wordscene.in .wletters i{opacity:1;transform:none}
.wletters.spa i{color:#fff;-webkit-text-stroke:1.2px var(--silber2);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1),color 1s .6s,-webkit-text-stroke-color 1s .6s}
.wordscene.in .wletters.spa i{color:var(--silber2);-webkit-text-stroke-color:transparent}
.ws-note{position:relative}
.ws-note.nright{text-align:right}
.ws-k{display:block;font-size:clamp(23px,2.3vw,31px);font-style:italic;color:var(--tuerkis);margin-bottom:14px}
.ws-note p{font-size:14px;color:var(--graphit);line-height:1.9;max-width:30ch}
.ws-note.nright p{margin-left:auto}
.ws-arrow{position:absolute;width:clamp(110px,11vw,170px);height:auto;pointer-events:none}
.ws-note.nleft .ws-arrow{left:calc(100% - 10px);top:50%;transform:translateY(-42%)}
.ws-note.nright .ws-arrow{right:calc(100% + 14px);bottom:6px}
.ws-arrow path{fill:none;stroke:var(--tuerkis);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ws-arrow .ap{stroke-dasharray:340;stroke-dashoffset:340;transition:stroke-dashoffset 1.3s .9s cubic-bezier(.4,0,.2,1)}
.ws-arrow .ah{opacity:0;transition:opacity .4s 2s}
.wordscene.in .ws-arrow .ap{stroke-dashoffset:0}
.wordscene.in .ws-arrow .ah{opacity:1}
.wmid{display:flex;align-items:center;justify-content:center;gap:26px;margin:clamp(-6px,0vw,4px) 0}
.wmid:before,.wmid:after{content:"";height:1px;width:clamp(46px,10vw,160px);background:var(--linie);transform:scaleX(0);transition:transform 1s .5s cubic-bezier(.2,.7,.2,1)}
.wmid:before{transform-origin:right}.wmid:after{transform-origin:left}
.wordscene.in .wmid:before,.wordscene.in .wmid:after{transform:scaleX(1)}
.wamp{font-size:clamp(26px,3.4vw,46px);font-style:italic;color:var(--tuerkis);opacity:0;transform:scale(.5) rotate(-8deg);transition:opacity .6s .7s,transform .7s .7s cubic-bezier(.2,.7,.2,1)}
.wordscene.in .wamp{opacity:1;transform:none}
.ws-cap{text-align:center;font-size:clamp(15px,1.5vw,19px);font-style:italic;color:var(--silber);margin:8px 0 clamp(10px,2vw,26px)}
@media (max-width:980px){
  .ws-row,.ws-row.rrev{grid-template-columns:1fr;gap:18px}
  .ws-row .ws-note{order:2}
  .ws-note,.ws-note.nright{padding:0 0 0 22px;text-align:left;border-left:1px solid var(--tuerkis);max-width:440px;margin:0 auto}
  .ws-note.nright p{margin-left:0}
  .ws-arrow{display:none}
  .ws-row .wline{margin-bottom:8px}
}
@media (prefers-reduced-motion:reduce){.wletters i,.wletters.spa i{opacity:1;transform:none;color:inherit;-webkit-text-stroke:0}.wmid:before,.wmid:after{transform:none}.wamp{opacity:1;transform:none}.ws-arrow .ap{stroke-dashoffset:0}.ws-arrow .ah{opacity:1}}
.name .sum{margin-top:clamp(40px,5vw,72px);display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(40px,5vw,80px);align-items:center}
.name .sum>div:first-child{max-width:460px}
.sumline{margin-bottom:30px;padding-bottom:26px;border-bottom:1px solid var(--linie)}
.sumline div{font-size:clamp(22px,2.4vw,32px);font-weight:300;line-height:1.4;margin-top:12px}
.sumline em{font-style:normal;font-weight:500;color:var(--tuerkis)}
.name .sum .serif{font-size:clamp(26px,3vw,38px);line-height:1.25}
.name .sum p{color:var(--graphit)}

/* ---------- PERSON ---------- */
.person .grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(44px,7vw,120px);align-items:start}
.person .pic{position:sticky;top:120px}
.person .pic img{aspect-ratio:4/5;object-fit:cover;object-position:center top;width:100%}
.person .pic figcaption{display:flex;justify-content:space-between;padding-top:16px;font-size:12px;color:var(--graphit);letter-spacing:.04em}
.person h2{margin:18px 0 30px}
.vita{border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);margin:34px 0 6px}
.vita summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0;cursor:pointer;font-size:11px;letter-spacing:.26em;text-transform:uppercase;font-weight:500;transition:color .3s}
.vita summary::-webkit-details-marker{display:none}
.vita summary:hover,.vita[open] summary{color:var(--tuerkis)}
.vpl{width:24px;height:24px;border:1px solid var(--silber2);border-radius:50%;position:relative;flex:none;transition:transform .35s,border-color .3s}
.vpl:before,.vpl:after{content:"";position:absolute;background:currentColor;left:50%;top:50%;transform:translate(-50%,-50%)}
.vpl:before{width:9px;height:1px}
.vpl:after{width:1px;height:9px}
.vita[open] .vpl{transform:rotate(45deg);border-color:var(--tuerkis)}
.vbody{padding:6px 0 26px;display:grid;gap:16px}
.vrow{display:grid;grid-template-columns:130px 1fr;gap:22px;align-items:baseline}
.vrow .label{font-size:11.5px;letter-spacing:.2em}
.vrow p{font-size:14px;color:var(--graphit);line-height:1.8}
@media (max-width:560px){.vrow{grid-template-columns:1fr;gap:4px}}
.person .q{font-family:var(--serif);font-size:clamp(24px,2.6vw,32px);line-height:1.35;font-style:italic;margin:40px 0;padding-left:28px;border-left:1px solid var(--tuerkis)}
.person .q small{display:block;font-family:var(--sans);font-style:normal;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--silber);margin-top:16px}
.team{margin-top:clamp(56px,6vw,90px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,56px);padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--linie)}
.team .card{display:grid;grid-template-columns:clamp(180px,16vw,230px) 1fr;gap:clamp(22px,2.6vw,36px);align-items:center}
.team img{aspect-ratio:3/4;object-fit:cover;object-position:top;filter:saturate(.9);width:100%}
.team .serif{font-family:var(--sans);font-weight:400;font-size:clamp(21px,2vw,27px);line-height:1.25;margin-bottom:8px}
.team .label{display:block;margin-bottom:12px}
.team p{font-size:15px;color:var(--graphit);line-height:1.8}

/* ---------- LEISTUNGEN ---------- */
.services{background:var(--papier2)}
.services .head{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:clamp(44px,6vw,84px)}
.services .head h2{margin-top:18px}
.pillar{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(40px,6vw,96px);padding:clamp(48px,6vw,88px) 0;border-top:1px solid var(--linie)}
.pillar:last-of-type{border-bottom:1px solid var(--linie)}
.pillar .intro h3{font-size:clamp(32px,3.6vw,48px);margin:14px 0 18px}
.pillar .intro p{color:var(--graphit);max-width:40ch}
.pillar .intro img{margin-top:32px;aspect-ratio:4/3;object-fit:cover;width:100%;filter:saturate(.9)}
.pillar .num{font-family:var(--serif);font-size:13px;letter-spacing:.3em;color:var(--silber)}
.item{border-bottom:1px solid var(--linie)}
.item:first-child{border-top:1px solid var(--linie)}
.item summary{list-style:none;display:grid;grid-template-columns:1fr auto 28px;gap:24px;align-items:center;padding:24px 0;cursor:pointer}
.item summary::-webkit-details-marker{display:none}
.item summary .t{font-family:var(--sans);font-weight:400;font-size:clamp(19px,1.9vw,25px);line-height:1.2;transition:color .3s}
.item[open] summary .t,.item summary:hover .t{color:var(--tuerkis)}
.item summary .m{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--silber);font-weight:500;text-align:right}
.item summary .pl{width:28px;height:28px;border:1px solid var(--silber2);border-radius:50%;position:relative;transition:transform .35s,border-color .3s}
.item summary .pl:before,.item summary .pl:after{content:"";position:absolute;background:var(--ink);left:50%;top:50%;transform:translate(-50%,-50%)}
.item summary .pl:before{width:11px;height:1px}
.item summary .pl:after{width:1px;height:11px}
.item[open] summary .pl{transform:rotate(45deg);border-color:var(--ink)}
.item .body{padding:0 0 30px;max-width:62ch;color:var(--graphit)}
.item .body .tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.item .body .tags span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--linie);padding:7px 12px;color:var(--ink);font-weight:500}
.item .body .tags span.tk{border-color:var(--tuerkis);color:var(--tuerkis)}
.item .body .textlink{margin-top:24px}
.item .body .textlink+.textlink.mehr{margin-left:26px}
.textlink.mehr{color:var(--tuerkis);border-color:var(--tuerkis)}
.textlink.mehr:hover{color:var(--ink);border-color:var(--ink)}
@media (max-width:640px){.item .body .textlink+.textlink.mehr{margin-left:0;display:flex;width:fit-content}}
.more{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.more p{color:var(--graphit)}

/* ---------- ABLAUF TIMELINE ---------- */
.timeline{position:relative;margin-top:clamp(48px,6vw,84px)}
.tl-line{position:absolute;top:25px;left:0;right:0;height:1px;background:var(--linie);z-index:0}
.tl-line span{display:block;height:100%;width:100%;background:var(--tuerkis);transform:scaleX(0);transform-origin:left;transition:transform 1.9s .2s cubic-bezier(.4,0,.2,1)}
.rv.in .tl-line span{transform:scaleX(1)}
.tl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,48px);position:relative}
.tl-step{opacity:0;transform:translateY(18px);transition:opacity .8s var(--d),transform .8s var(--d) cubic-bezier(.2,.7,.2,1)}
.rv.in .tl-step{opacity:1;transform:none}
.tl-dot{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;border:1px solid var(--silber2);background:#fff;font-family:var(--serif);font-size:20px;position:relative;z-index:1;transition:background .5s calc(var(--d) + .5s),border-color .5s calc(var(--d) + .5s),color .5s calc(var(--d) + .5s)}
.rv.in .tl-dot{background:var(--tuerkis);border-color:var(--tuerkis);color:#fff}
.tl-t{font-size:17px;font-weight:400;line-height:1.45;margin:24px 0 12px}
.tl-step p{font-size:13.5px;color:var(--graphit);line-height:1.8;max-width:30ch}
.tl-cta{margin-top:clamp(36px,4vw,56px)}

/* ---------- PRAXIS ---------- */
.praxis .grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(44px,7vw,120px);align-items:center}
.praxis img{aspect-ratio:4/3.4;object-fit:cover;width:100%;filter:saturate(.9)}
.praxis h2{margin:18px 0 26px}
.praxis dl{display:grid;grid-template-columns:auto 1fr;gap:14px 32px;margin-top:36px;padding-top:30px;border-top:1px solid var(--linie);font-size:14px}
.praxis dt{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--silber);font-weight:500;padding-top:4px}
.praxis dd{line-height:1.8}
.welcome{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.welcome span{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--tuerkis);color:var(--tuerkis);padding:10px 15px;font-weight:500;display:inline-flex;gap:10px;align-items:center}
.welcome svg{width:14px;height:14px;stroke:var(--tuerkis);fill:none;stroke-width:1.4}

/* ---------- FAQ ---------- */
.faq{background:var(--papier2)}
.faq .grid{display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(40px,6vw,100px)}
.faq h2{margin-top:18px}
.faq .grid>div:first-child{position:sticky;top:120px;align-self:start}
.faq details{border-bottom:1px solid var(--linie)}
.faq details:first-child{border-top:1px solid var(--linie)}
.faq summary{list-style:none;display:flex;justify-content:space-between;gap:24px;align-items:center;padding:24px 0;cursor:pointer;font-family:var(--sans);font-weight:400;font-size:clamp(16px,1.5vw,19px);line-height:1.2;transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover,.faq details[open] summary{color:var(--tuerkis)}
.faq summary:after{content:"+";font-family:var(--sans);font-weight:300;font-size:22px;color:var(--silber);flex:none;transition:transform .35s}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq .a{padding:0 0 26px;color:var(--graphit);max-width:64ch}

/* ---------- CTA ---------- */
.cta{background:var(--tuerkis);color:#fff;padding:clamp(80px,10vw,140px) 0}
.cta .grid{display:grid;grid-template-columns:1.3fr 1fr;gap:60px;align-items:end}
.cta .label{color:rgba(255,255,255,.65)}
.cta h2{margin:20px 0 24px;color:#fff;font-size:clamp(28px,3.4vw,46px);line-height:1.25;max-width:22ch}
.cta p{color:rgba(255,255,255,.8);max-width:52ch;font-size:16px}
.cta .btns{display:grid;gap:14px;justify-items:start}
.cta .btn{border-color:#fff;color:#fff}
.cta .btn:hover{background:#fff;color:var(--tuerkis)}
.cta .btn.solid{background:#fff;color:var(--tuerkis)}
.cta .btn.solid:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.cta .small{font-size:12px;color:rgba(255,255,255,.7);margin-top:10px;letter-spacing:.04em}

/* ---------- FOOTER ---------- */
footer{padding:clamp(64px,8vw,110px) 0 40px;background:#fff}
footer .top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:48px;padding-bottom:56px;border-bottom:1px solid var(--linie)}
footer .top img{width:200px;margin-bottom:22px}
footer .top p{font-size:13px;color:var(--graphit);max-width:34ch}
footer .label{display:block;margin-bottom:18px}
footer ul{list-style:none;font-size:13.5px;display:grid;gap:10px}
footer li a{transition:color .3s}
footer li a:hover{color:var(--tuerkis)}
footer .bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:26px;font-size:11px;color:var(--silber);letter-spacing:.06em}

/* karten-titel sans */
.facts .serif,.herotag .serif,.hero .pic .tag .serif{font-family:var(--sans);font-weight:400;line-height:1.5}
.facts .serif{font-size:15px;margin-top:10px}
.steps .serif{font-size:17px}
.herotag .serif{font-size:17px;letter-spacing:.02em}
.words .wt{font-family:var(--sans);font-weight:400}
.name .sum .serif{font-family:var(--sans);font-weight:400;line-height:1.45}
.more .serif{font-family:var(--sans)!important;font-weight:400;line-height:1.5!important;font-size:clamp(19px,2vw,26px)!important}

/* quote band */
.quoteband{text-align:center;padding:clamp(90px,11vw,150px) 0;border-top:1px solid var(--linie)}
.quoteband .qmark{font-size:clamp(70px,8vw,110px);line-height:.8;color:var(--tuerkis);margin-bottom:14px}
.quoteband blockquote{font-size:clamp(24px,2.9vw,40px);line-height:1.5;font-style:italic;max-width:min(1000px,92%);margin:20px auto 48px;font-family:var(--serif);letter-spacing:.005em}
.quoteband blockquote em{color:var(--tuerkis)}
.qsig{display:flex;flex-direction:column;align-items:center;gap:18px}
.qline{width:1px;height:44px;background:var(--linie)}
.qsig img{width:160px;opacity:.9}

/* slider */
.sl-vp{overflow:hidden;cursor:grab}
.sl-vp.drag{cursor:grabbing}
.sl-track{display:flex;gap:20px;transition:transform .65s cubic-bezier(.2,.7,.2,1);will-change:transform}
.sl-track figure{flex:0 0 min(72%,760px);position:relative}
.sl-track img{width:100%;aspect-ratio:16/10;object-fit:cover;user-select:none;-webkit-user-drag:none;filter:saturate(.92)}
/* Die Punktleiste waechst mit der Zahl der Bilder. Ohne Umbruch schiebt sie auf
   schmalen Geraeten die Pfeiltasten aus dem Bild. */
.sl-ui{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:24px;flex-wrap:wrap}
.sl-dots{display:flex;gap:6px;flex-wrap:wrap;flex:1 1 auto;min-width:0}
.sl-btns{flex:0 0 auto}
.sl-dots button{width:34px;height:22px;position:relative}
.sl-dots button:before{content:"";position:absolute;left:4px;right:4px;top:10px;height:2px;background:var(--linie);transition:background .3s}
.sl-dots button.on:before{background:var(--tuerkis)}
.sl-btns{display:flex;gap:12px}
.sl-btns button{width:52px;height:52px;border:1px solid var(--linie);border-radius:50%;display:grid;place-items:center;transition:border-color .3s,background .3s,color .3s}
.sl-btns button:hover{border-color:var(--tuerkis);background:var(--tuerkis);color:#fff}
.sl-btns svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.4}
@media (max-width:560px){.sl-track figure{flex:0 0 88%}}
/* Auf sehr schmalen Geraeten sind sechs Punkte plus zwei Pfeiltasten breiter als
   der Bildschirm. Beides wird hier kleiner, damit die Zeile hineinpasst. */
@media (max-width:420px){
  .sl-ui{gap:10px}
  .sl-dots{gap:2px}
  .sl-dots button{width:20px;height:20px}
  .sl-dots button:before{left:2px;right:2px;top:9px}
  .sl-btns{gap:8px}
  .sl-btns button{width:42px;height:42px}
}

/* sticky call */
.fabs{position:fixed;right:22px;bottom:22px;z-index:60;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.fabs{bottom:calc(22px + env(safe-area-inset-bottom,0px))}
.callfab{position:static;z-index:60;display:inline-flex;align-items:center;gap:12px;background:var(--tuerkis);color:#fff;padding:16px 24px;border-radius:999px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;box-shadow:0 12px 36px rgba(78,112,107,.4);transition:background .3s,transform .3s}
.callfab svg{width:16px;height:16px;stroke:#fff;fill:none}
.callfab:hover{background:var(--ink);transform:translateY(-2px)}

@media (max-width:560px){
  .fabs{right:14px;left:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));gap:8px}
  .callfab{padding:13px 16px;font-size:10px;gap:8px;flex:1;justify-content:center}
}

/* reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.facts>div{transition-delay:calc(var(--i,0)*.12s)}
.rvimg{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.2,.7,.2,1)}
.rv.in .rvimg,.rvimg.in{clip-path:inset(0)}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.tl-step{opacity:1;transform:none;transition:none}.tl-line span{transform:none;transition:none}.tl-dot{transition:none}*{scroll-behavior:auto!important}}

/* ---------- RESPONSIVE ---------- */
/* Die Telefonbox braucht rund 1340px Fensterbreite, sonst schiebt sie Menue und
   Terminbutton ueber den rechten Rand. Der Inhaltsbereich ist 1320px breit. */
@media (max-width:1340px){
  .telbox{display:none}
}
@media (max-width:1180px){
  .menu{gap:30px}.telbox{display:none}
  .mega .wrap{grid-template-columns:1fr 1fr 1fr}.mega .feat{display:none}.mega .col:nth-child(3){border-right:0}
}
/* Zwischen Tablet quer und kleinem Notebook wird es im Kopf eng: Logo, Menue und
   Terminbutton stehen dort noch alle nebeneinander. Ohne diese Stufe laeuft die
   Zeile bei rund 1024px ueber den rechten Rand hinaus. */
@media (max-width:1120px){
  .nav{gap:22px}
  .brand img{height:58px}
  .menu{gap:20px}
  .menu>li>a,.menu>li>button{font-size:10px;letter-spacing:.18em}
  .navright .btn{padding:13px 15px;font-size:9.5px;letter-spacing:.16em}
}
@media (max-width:980px){
  .person .grid figure.pic{order:-1}
  .team .card{grid-template-columns:150px 1fr;gap:20px}
  .nav{grid-template-columns:auto 1fr auto;height:76px}
  .menu,.mega,.navright .btn{display:none}
  .burger{display:flex;justify-self:end}
  .navright{justify-self:end;gap:12px}
  .mobile{top:76px}
  .herobg{position:relative;aspect-ratio:4/3.2}.herobg img{object-position:82% center}.herobg:after{background:linear-gradient(180deg,rgba(255,255,255,0) 75%,#fff 100%)}.herotxt{min-height:0;padding-top:40px;padding-bottom:56px}
  .facts{grid-template-columns:1fr 1fr}.facts>div:nth-child(2){border-right:0;margin-right:0}.facts>div{border-bottom:1px solid var(--linie)}.facts>div:nth-child(n+3){border-bottom:0}
  .words{grid-template-columns:1fr}.words article:first-child{border-right:0;padding-right:0}.words article:last-child{padding-left:0}
  .name .sum,.person .grid,.services .head,.pillar,.praxis .grid,.faq .grid,.cta .grid,.more,.team{grid-template-columns:1fr}
  .person .pic,.faq .grid>div:first-child{position:static}
  .tl-grid{grid-template-columns:1fr;gap:0;padding-left:74px}
  .tl-line{top:0;bottom:26px;left:25px;right:auto;width:1px;height:auto}
  .tl-line span{width:100%;height:100%;transform:scaleY(0);transform-origin:top;transition:transform 1.9s .2s cubic-bezier(.4,0,.2,1)}
  .rv.in .tl-line span{transform:scaleY(1)}
  .tl-step{position:relative;padding-bottom:40px}
  .tl-step:last-child{padding-bottom:0}
  .tl-dot{position:absolute;left:-74px;top:0}
  .tl-t{margin-top:10px}
  footer .top{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  section{padding:64px 0}
  .quoteband{padding:72px 0}
  .cta{padding:72px 0}
  h2{font-size:clamp(26px,7.4vw,34px)}
  .hero h1{font-size:clamp(30px,8.6vw,40px)}
  .lead{font-size:15.5px}
  .wletters{font-size:clamp(48px,15vw,64px)}
  .ws-cap{margin-bottom:2px}
  .sumline div{font-size:20px}
  .quoteband blockquote{font-size:21px;line-height:1.55;max-width:100%}
  .quoteband .qmark{font-size:60px}
  .qsig img{width:130px}
  .cta h2{max-width:none}
  .cta .btns{width:100%}
  .item .body{padding-bottom:26px}
  .pillar .intro img{aspect-ratio:16/10}
  .facts>div{padding:22px 0}
  .facts .serif{margin-top:6px}
  .mega{display:none}
}
@media (max-width:560px){
  .team{grid-template-columns:1fr;gap:34px}
  .team .card{grid-template-columns:1fr;gap:16px}
  .team img{width:200px;aspect-ratio:1/1;object-fit:cover}
  .brand img{height:56px}
  .btn{white-space:normal;text-align:center;justify-content:center;width:100%;padding:18px 22px}.hero .hcta{flex-direction:column;align-items:flex-start}.cta .btns{justify-items:stretch}
  .facts,.steps{grid-template-columns:1fr}.facts>div{border-right:0;margin-right:0;border-bottom:1px solid var(--linie)}.facts>div:last-child{border-bottom:0}
  
  .item summary{grid-template-columns:1fr 28px}.item summary .m{display:none}
  footer .top{grid-template-columns:1fr}
  
  .mobile .ml>li>a,.mobile .ml>li>button{font-size:23px}
}

/* ---- leistung.css ---- */
/* ============================================================
   LEISTUNGSSEITEN – ergänzt style.css
   Gleiche Variablen, gleiche Typo, gleiche Buttons.
   Prefix "l" für alle neuen Klassen, damit die Startseite
   garantiert unberührt bleibt.
   ============================================================ */

:root{ --tuerkis-h:#8FB3AD; }

/* ---------- HERO ---------- */
.lhero{position:relative;padding:0;overflow:hidden;background:var(--ink)}
.lhero .lbg{position:absolute;inset:0;z-index:0}
.lhero .lbg img{width:100%;height:100%;object-fit:cover;object-position:center}
.lhero .lbg:after{content:"";position:absolute;inset:0;background:linear-gradient(94deg,rgba(18,18,18,.94) 0%,rgba(18,18,18,.82) 40%,rgba(18,18,18,.42) 72%,rgba(18,18,18,.3) 100%)}
.lhero .wrap{position:relative;z-index:1;min-height:min(66vh,600px);display:flex;flex-direction:column;justify-content:center;padding-top:clamp(84px,10vw,140px);padding-bottom:clamp(64px,8vw,116px)}
.lhero .label{color:rgba(255,255,255,.55)}
.lhero h1{color:#fff;font-size:clamp(32px,4.3vw,60px);line-height:1.1;letter-spacing:-.01em;margin:22px 0 26px;max-width:19ch}
.lhero h1 em{font-style:normal;font-weight:400;color:var(--tuerkis-h)}
.lhero .lead{color:rgba(255,255,255,.76);max-width:50ch;margin-bottom:42px}
.lhero .hcta{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.lhero .btn{border-color:rgba(255,255,255,.42);color:#fff}
.lhero .btn:hover{background:#fff;border-color:#fff;color:var(--ink)}
.lhero .btn.solid{background:#fff;border-color:#fff;color:var(--ink)}
.lhero .btn.solid:hover{background:var(--tuerkis);border-color:var(--tuerkis);color:#fff}
.lhero .textlink{color:#fff;border-color:rgba(255,255,255,.5)}
.lhero .textlink:hover{color:var(--tuerkis-h);border-color:var(--tuerkis-h)}

/* ---------- BREADCRUMB ---------- */
.crumb{border-bottom:1px solid var(--linie);background:#fff}
/* Der Pfad muss umbrechen duerfen, sonst laeuft ein langer Leistungsname
   auf schmalen Geraeten ueber den rechten Rand hinaus. */
.crumb .wrap{padding-top:15px;padding-bottom:15px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:var(--silber);display:flex;flex-wrap:wrap;align-items:center;row-gap:4px}
.crumb a{transition:color .3s}
.crumb a:hover{color:var(--tuerkis)}
.crumb .sep{margin:0 10px;color:var(--linie)}
.crumb .cur{color:var(--ink)}

/* ---------- WAS IST … ---------- */
.lintro .grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,6vw,96px)}
.lintro .side{position:sticky;top:130px;align-self:start}
.lintro .side h2{margin-top:18px}
.lintro .side .kicker{margin-top:26px;font-family:var(--serif);font-size:clamp(19px,2vw,24px);line-height:1.35;color:var(--graphit);font-style:italic;max-width:22ch}
.lintro p{color:var(--graphit);font-size:16.5px;line-height:1.85;max-width:62ch}
.lintro p:first-child{color:var(--ink);font-size:17.5px}
.lmerkmale{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:13px 34px;margin-top:38px}
.lmerkmale li{display:flex;gap:13px;align-items:flex-start;font-size:14px;line-height:1.6}
.lmerkmale li:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--tuerkis);flex:none;margin-top:8px}
.lhinweis{margin-top:38px;border:1px solid var(--linie);border-left:2px solid var(--tuerkis);background:var(--papier2);padding:22px 26px;font-size:14px;line-height:1.8;color:var(--graphit)}
.lhinweis strong{font-weight:500;color:var(--ink)}

/* ---------- RASTER-SEKTIONEN ---------- */
.lhead{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.lhead h2{margin-top:16px}
.lhead p{color:var(--graphit);max-width:52ch;margin-top:18px;font-size:16px;line-height:1.8}
.lbereiche{background:var(--papier2);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.lgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linie);border:1px solid var(--linie);margin-top:clamp(40px,5vw,62px)}
.lgrid article{background:#fff;padding:34px 30px 38px;transition:background .45s}
.lgrid article:hover{background:var(--papier2)}
.lgrid h3{font-family:var(--serif);font-weight:500;font-size:23px;line-height:1.22;letter-spacing:0}
.lgrid p{margin-top:12px;font-size:14px;color:var(--graphit);line-height:1.8}

/* ---------- VERTRAUEN (dunkel) ---------- */
.lvertrauen{background:var(--ink);color:#fff}
.lvertrauen .label{color:rgba(255,255,255,.45)}
.lvertrauen h2{color:#fff}
.lvertrauen h2 em{color:var(--tuerkis-h)}
.lvertrauen .lhead p{color:rgba(255,255,255,.62)}
.lvgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.13);margin-top:clamp(40px,5vw,62px)}
.lvgrid article{background:var(--ink);padding:36px 32px 40px}
.lvgrid .n{font-family:var(--serif);font-size:14px;letter-spacing:.3em;text-transform:uppercase;color:var(--tuerkis-h);font-weight:500}
.lvgrid h3{font-family:var(--serif);font-weight:500;font-size:24px;line-height:1.25;margin:18px 0 12px;color:#fff}
.lvgrid p{font-size:14px;line-height:1.8;color:rgba(255,255,255,.62)}
.lzitat{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,4vw,56px);align-items:center;border-top:1px solid rgba(255,255,255,.13);padding-top:clamp(40px,5vw,64px)}
.lzitat img{width:96px;height:96px;border-radius:50%;object-fit:cover;filter:saturate(.9)}
.lzitat blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.3vw,30px);line-height:1.45;color:#fff;max-width:38ch}
.lzitat .who{margin-top:16px;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.45);font-weight:500}

/* ---------- ABLAUF ---------- */
.lschritte{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linie);border:1px solid var(--linie);margin-top:clamp(40px,5vw,62px)}
.lschritte article{background:#fff;padding:34px 30px 40px}
.lschritte .nr{font-family:var(--serif);font-size:38px;line-height:1;color:var(--linie);display:block}
.lschritte h3{font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.25;margin:20px 0 12px}
.lschritte p{font-size:14px;color:var(--graphit);line-height:1.8}
.lschritte-cta{margin-top:clamp(36px,4vw,54px)}

/* ---------- LAGE (dunkel) ---------- */
.llage{background:var(--ink);color:#fff}
.llage .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,90px);align-items:center}
.llage .label{color:rgba(255,255,255,.45)}
.llage h2{color:#fff}
.llage p{color:rgba(255,255,255,.66);max-width:44ch;margin-top:24px;font-size:16px;line-height:1.85}
.llage dl{margin-top:36px;display:grid;grid-template-columns:132px 1fr;gap:0}
.llage dt{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.4);font-weight:500;padding:16px 0;border-top:1px solid rgba(255,255,255,.13)}
.llage dd{font-size:14.5px;line-height:1.75;color:rgba(255,255,255,.82);padding:16px 0;border-top:1px solid rgba(255,255,255,.13)}
.llage dd a{border-bottom:1px solid rgba(255,255,255,.28);transition:border-color .3s,color .3s}
.llage dd a:hover{color:var(--tuerkis-h);border-color:var(--tuerkis-h)}
.llage .maplink{margin-top:34px}
.llage .maplink .btn{border-color:rgba(255,255,255,.42);color:#fff}
.llage .maplink .btn:hover{background:#fff;border-color:#fff;color:var(--ink)}
.llage figure img{width:100%;aspect-ratio:4/3.4;object-fit:cover;filter:saturate(.92)}
.llage figcaption{margin-top:14px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.4);font-weight:500}

/* ---------- WEITERE LEISTUNGEN ---------- */
.lweitere .liste{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(30px,5vw,80px);border-top:1px solid var(--linie);margin-top:clamp(36px,4vw,54px)}
.lweitere .liste a{display:flex;align-items:center;gap:20px;padding:21px 0;border-bottom:1px solid var(--linie);transition:padding-left .35s,color .3s}
.lweitere .liste a:hover{padding-left:10px;color:var(--tuerkis)}
.lweitere .t{font-family:var(--serif);font-weight:500;font-size:21px;line-height:1.2}
.lweitere .s{margin-left:auto;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--silber);font-weight:500;white-space:nowrap}
.lweitere .liste svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.4;flex:none;transition:transform .3s}
.lweitere .liste a:hover svg{transform:translateX(4px)}

/* ---------- FAQ (nutzt .faq aus style.css) ---------- */
.faq .grid>div:first-child .lead{margin-top:20px}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1180px){
  .lgrid,.lvgrid{grid-template-columns:1fr 1fr}
  .lschritte{grid-template-columns:1fr 1fr}
}
@media (max-width:980px){
  /* Der waagerechte Verlauf deckt auf schmalen Schirmen zu wenig ab,
     deshalb hier senkrecht und kräftiger. */
  .lhero .lbg:after{background:linear-gradient(180deg,rgba(18,18,18,.86) 0%,rgba(18,18,18,.8) 45%,rgba(18,18,18,.9) 100%)}
  .lintro .grid,.llage .grid{grid-template-columns:1fr}
  .lintro .side{position:static}
  .llage figure{order:-1}
  .lweitere .liste{grid-template-columns:1fr}
  .lhero .wrap{min-height:0;padding-top:clamp(70px,14vw,110px)}
}
/* Auf sehr schmalen Geraeten muss die Zeile "Weitere Leistungen" auch dann
   hineinpassen, wenn die Schrift noch laedt und ersatzweise eine breitere
   Systemschrift greift. Das kleine Zusatzlabel entfaellt dort. */
@media (max-width:430px){
  .lweitere .t{font-size:18px}
  .lweitere .s{display:none}
  .lweitere .liste a{gap:14px}
}
@media (max-width:640px){
  .lgrid,.lvgrid,.lschritte{grid-template-columns:1fr}
  .lmerkmale{grid-template-columns:1fr}
  .llage dl{grid-template-columns:1fr}
  .llage dt{padding-bottom:2px;border-bottom:0}
  .llage dd{padding-top:6px;border-top:0}
  .llage dd{border-bottom:0}
  .lzitat{grid-template-columns:1fr;gap:24px}
  .lzitat img{width:76px;height:76px}
  .crumb .wrap{font-size:9px}
  .lhero h1{font-size:clamp(28px,8.4vw,38px)}
}

/* ============================================================
   RECHTSSEITEN (Impressum, Datenschutz)
   Bewusst schlicht: schmale Spalte, viel Ruhe, gut lesbar.
   ============================================================ */
.lrechtshero{background:var(--ink);color:#fff;padding:0}
.lrechtshero .wrap{padding-top:clamp(76px,9vw,120px);padding-bottom:clamp(48px,6vw,80px)}
.lrechtshero .label{color:rgba(255,255,255,.45)}
.lrechtshero h1{color:#fff;font-size:clamp(30px,3.6vw,50px);line-height:1.14;margin:20px 0 22px}
.lrechtshero p{color:rgba(255,255,255,.7);max-width:58ch;font-size:16px;line-height:1.85}

/* Einspaltig und kompakt. Zweispaltig mit fester Spalte links bricht, sobald
   eine Ueberschrift wie "Berufshaftpflichtversicherung" breiter wird als die Spalte. */
/* Der Wrap bleibt so breit wie ueberall, damit die linke Textkante mit der
   Ueberschrift im Kopf fluchtet. Begrenzt wird nur die Zeilenlaenge. */
.ltext .wrap{max-width:var(--max)}
.ltext .block{max-width:820px}
.ltext .block{padding:clamp(26px,3vw,36px) 0;border-top:1px solid var(--linie)}
.ltext .block:first-child{border-top:0;padding-top:0}
.ltext h2{font-size:clamp(18px,1.6vw,21px);font-weight:500;line-height:1.35;letter-spacing:.005em;margin-bottom:14px;overflow-wrap:break-word}
.ltext .inhalt p{color:var(--graphit);font-size:15.5px;line-height:1.85;max-width:70ch}
.ltext .inhalt p+p{margin-top:1.1em}
.ltext .inhalt ul{list-style:none;margin-top:14px;display:grid;gap:9px}
.ltext .inhalt li{display:flex;gap:13px;align-items:flex-start;color:var(--graphit);font-size:15px;line-height:1.75;max-width:70ch}
.ltext .inhalt li:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--tuerkis);flex:none;margin-top:9px}
.ltext .inhalt a{color:var(--tuerkis);border-bottom:1px solid var(--linie);transition:border-color .3s}
.ltext .inhalt a:hover{border-color:var(--tuerkis)}

@media (max-width:860px){
  .ltext h2{font-size:19px}
}