/* Design-Tokens: schlicht, weiß, Grautöne; Kreise in Portraitfarben (Sand-Gold, Blaugrau) */
:root{--ink:#1a1a1a;--text:#3d3d3d;--soft:#8a8a8a;--line:#dcdcdc;
--head:var(--sans);
--sans:"Avenir Next","Avenir","Nunito Sans",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;--s:clamp(1.5rem,6vw,4rem)}
/* Alles in einer Schrift (Avenir-Stack); keine Schriftdatei nötig */
*{box-sizing:border-box}html{scroll-behavior:smooth;background:#fff}
body{margin:0;background:#fff;color:var(--text);font:400 1rem/1.9 var(--sans)}
a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
p{margin:0 0 1.2rem}p a{border-bottom:1px solid var(--line)}p a:hover{border-bottom-color:var(--ink)}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:#fff;padding:.5rem 1rem;z-index:99}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
h1,h2{font:400 clamp(1.4rem,2.4vw,1.8rem)/1.3 var(--head);letter-spacing:.01em;color:var(--ink);margin:0 0 1.5rem}h2{font-size:clamp(1.15rem,1.8vw,1.35rem);margin-top:0}
.txt h2{margin-top:2.5rem}.txt h2:first-child,.txt h1+p{margin-top:0}
.eyebrow,.nav a,.toc a,.flinks a{font:400 .68rem/1.7 var(--sans);letter-spacing:.22em;text-transform:uppercase}
.eyebrow{color:var(--soft);margin:1.6rem 0 .1rem}
/* Kopfzeile: nur Navigation, mittig */
.hdr{max-width:1100px;margin:0 auto;padding:2rem var(--s) 1rem}
.nav{display:flex;justify-content:center;gap:clamp(1.5rem,4vw,3rem)}
.nav a{color:var(--soft);padding:.4rem 0;transition:color .3s}.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.burger,.ov{display:none}
/* Inhalt: feiner kurzer Strich als Übergang */
main{max-width:1100px;margin:0 auto}
main>*+*{background:linear-gradient(var(--line),var(--line)) top center/44px 1px no-repeat}
.panel{padding:clamp(3rem,7vw,5.5rem) var(--s)}
.wrap.narrow,main>.panel>.rv,.txt{max-width:46rem}.wrap.narrow,main>.panel>.rv{margin:0 auto}
.hero{padding:clamp(3rem,7vw,5rem) var(--s) clamp(3rem,7vw,5rem);text-align:center}
.sym{display:block;height:auto}.sym.mini{width:10rem;margin:0 auto 3rem}
.hero-t{max-width:40rem;margin:0 auto}
.hero blockquote{margin:0}.hero blockquote p{font:400 1rem/1.9 var(--sans);color:var(--text);margin:0 0 .6rem}
.hero blockquote footer{font:400 1rem/1.9 var(--sans);letter-spacing:0;text-transform:none;color:var(--soft)}
.lead p{font-size:1.05rem}
.btn{display:inline-block;font:400 .68rem/1.7 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:.2rem;transition:border-color .3s}.btn:hover{border-bottom-color:var(--ink)}
.toc{display:flex;flex-wrap:wrap;gap:.3rem 2rem;margin-top:1.5rem}.toc a{color:var(--soft);transition:color .3s}.toc a:hover{color:var(--ink)}
/* Zur Person: Portrait links, Text rechts */
.row{display:grid;gap:2.5rem;padding:clamp(3rem,7vw,5.5rem) var(--s)}.row>.panel{padding:0}.row .txt{max-width:46rem}
.inset img{display:block;width:100%;max-width:19rem;height:auto;aspect-ratio:3/4;object-fit:cover}
@media(min-width:48em){.row{grid-template-columns:1fr 1fr;gap:clamp(3rem,7vw,6rem)}.row:has(img[src*="elma"]){grid-template-columns:19rem minmax(0,46rem);justify-content:center}.row:has(img[src*="elma"]) .inset img{max-width:none}}
/* Fußzeile: © links, Datenschutz/Impressum mittig, Ort rechts, alles ganz klein */
.ftr{max-width:1100px;margin:0 auto;padding:clamp(3rem,6vw,4.5rem) var(--s) 2.5rem;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;background:linear-gradient(var(--line),var(--line)) top center/44px 1px no-repeat}
.ftr p{margin:0;font:400 .62rem/1.6 var(--sans);letter-spacing:.14em;color:var(--soft)}.fr{text-align:right}
.flinks{display:flex;justify-content:center;gap:1.6rem}.flinks a{font:400 .7rem/1.6 var(--sans);letter-spacing:.04em;text-transform:none;color:var(--soft);transition:color .3s}.flinks a:hover{color:var(--ink)}
@media(max-width:47.99em){.ftr{grid-template-columns:1fr;text-align:center;justify-items:center}.fr{text-align:center}}
/* Einblenden */
.js .rv{opacity:0;transform:translateY(10px);transition:opacity .9s ease,transform .9s ease}.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}
/* Mobil: Burger + Vollbild-Menü */
@media(max-width:47.99em){.hdr{position:relative;padding:1rem 1.25rem;min-height:3.5rem}.hdr>.nav{display:none}
.burger{display:block;background:none;border:0;width:2.75rem;height:2.75rem;position:absolute;right:.6rem;top:.6rem;cursor:pointer;z-index:12}
.burger i{position:absolute;left:.6rem;right:.6rem;height:1px;background:var(--ink);transition:transform .3s}.burger i:first-of-type{top:1.1rem}.burger i:last-of-type{top:1.6rem}
.burger[aria-expanded=true] i:first-of-type{transform:translateY(.25rem) rotate(45deg)}.burger[aria-expanded=true] i:last-of-type{transform:translateY(-.25rem) rotate(-45deg)}
.ov:not([hidden]){display:flex;position:fixed;inset:0;background:#fff;z-index:10;align-items:center;justify-content:center}
.ov nav{display:flex;flex-direction:column;gap:1.6rem;text-align:center}.ov a{font:400 1.8rem var(--head);letter-spacing:0;text-transform:none;color:var(--ink)}}

/* Startseite: Name zuerst, Zitat auf blasser Textur */
.quote-s{display:flex;align-items:center;justify-content:center;min-height:clamp(15rem,36vw,24rem);padding:clamp(2.5rem,6vw,4rem) var(--s);background:#fff}
.quote-s blockquote{margin:0}
/* Skizze zwei Kreise (Psychotherapie) */
.sketch{display:block;width:min(100%,11rem);height:auto;margin:0 auto 3rem}

/* Impressum und Datenschutz: kleinere Schrift */
.legal{font-size:.82rem;line-height:1.75}.legal p{font-size:inherit;margin-bottom:1rem}
.legal h1{font-size:clamp(1.25rem,2vw,1.5rem)}.legal h2{font-size:1rem;margin-top:2rem}
/* Zur Person: zweiter Abschnitt bündig mit dem Portrait */
main>.panel>.wide-left{max-width:none;margin:0 auto;width:min(100%,calc(19rem + clamp(3rem,7vw,6rem) + 46rem))}
.wide-left>*{max-width:46rem}
/* Kontakt: Telefon, E-Mail, Adresse nebeneinander */
main>.panel>.contact3{max-width:46rem;margin:0 auto;display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:2rem 3rem}
.contact3 .eyebrow{margin-top:0}.contact3 p:last-child{margin-bottom:0}
@media(max-width:40em){main>.panel>.contact3{grid-template-columns:1fr;gap:1.5rem}}

/* Impressum zentriert */
.center,.center h1{text-align:center}

/* Startseite: Name links, Portrait rechts, darunter Zitat auf Textur */
@font-face{font-family:"Cormorant Garamond";src:local("Cormorant Garamond"),local("CormorantGaramond-Regular"),url(../fonts/CormorantGaramond-Regular.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
:root{--name:"Cormorant Garamond","Cormorant","EB Garamond","Garamond","Apple Garamond",Georgia,"Times New Roman",serif}
.intro{display:grid;gap:2.5rem;align-items:center;padding:clamp(2.5rem,6vw,4.5rem) var(--s) clamp(2.5rem,6vw,4.5rem)}
.intro h1{font:400 clamp(2.6rem,5.2vw,4rem)/1.08 var(--name);letter-spacing:.01em;color:var(--ink);margin:0 0 1.4rem}
.intro .who{margin:0;font-size:1.2rem;line-height:1.7;color:var(--text)}
.portrait{display:block;width:100%;max-width:19rem;height:auto;aspect-ratio:3/4;object-fit:cover}
@media(min-width:48em){.intro{grid-template-columns:minmax(0,1fr) 19rem;gap:clamp(3rem,8vw,7rem)}.portrait{justify-self:end}}
/* Kontakt: Überschrift in Größe der Überschriften auf Psychotherapie */
.txt:not(.legal) h1{font-size:clamp(1.15rem,1.8vw,1.35rem)}

.hero blockquote p{font-size:1.05rem;color:var(--text)}
.hero blockquote footer{font-size:1.05rem}
.quote-s{min-height:0;padding-bottom:1.5rem}
main>.quote-s+.panel{background:none;padding-top:1.5rem}
.nm{color:var(--ink);font:400 clamp(2.1rem,3.6vw,2.8rem)/1.1 var(--name)!important;letter-spacing:.01em;margin:0 0 .8rem}
.sub{margin:0 0 2rem;color:var(--text)}
h1,h2,.legal h1,.legal h2,.txt:not(.legal) h1{font-family:var(--name);font-weight:500;letter-spacing:.01em}
h2{font-size:clamp(1.5rem,2.4vw,1.8rem)}.txt:not(.legal) h1{font-size:clamp(1.6rem,2.6vw,2rem)}.legal h1{font-size:clamp(1.6rem,2.6vw,2rem)}.legal h2{font-size:1.3rem}
.nm,.intro h1{font-weight:400}
.hero blockquote p,.hero blockquote footer{font-family:var(--name);font-weight:500;font-size:clamp(1.3rem,2.2vw,1.6rem);line-height:1.6}
.ov a{font-family:var(--sans)}
main>.panel>.wide2{max-width:62rem}
.split{display:block}.duo{display:block;width:min(100%,17rem);height:auto;margin:2.5rem auto 0}
@media(min-width:48em){.split{display:grid;grid-template-columns:minmax(0,1fr) 17rem;gap:clamp(2.5rem,6vw,5rem);align-items:center}.duo{margin:0}.st{max-width:46rem}}

.duo{width:min(100%,24rem)!important}
@media(min-width:48em){.split{grid-template-columns:minmax(0,1fr) 24rem}}
.intro{align-items:end}.intro-t{padding-bottom:.2rem}
.hero blockquote footer{font-size:1.05rem}

.legal h2{font-size:1.15rem;margin:2.6rem 0 .6rem}.legal h1+h2{margin-top:2.2rem}.legal p{margin-bottom:0}
.nav a:hover,.flinks a:hover{color:var(--ink)}
.deco{display:block;width:min(100%,13rem);height:auto;margin:0 auto}
.hero blockquote footer{font-family:var(--sans);font-weight:400;font-size:1rem;line-height:1.9;color:var(--text)}
.sub{font-size:1.2rem;line-height:1.7;color:var(--text)}
@media(min-width:56em){
main>.panel>.cols{max-width:62rem}
.cols{column-count:2;column-gap:clamp(2.5rem,5vw,4.5rem)}
.cols>h1,.cols>h2,.cols>.sub,.cols>p:has(.btn){column-span:all}
.cols>p{margin-top:0}
.st.cols{max-width:none}
}
.cols>p{break-inside:avoid}
.intro{align-items:start}
.intro-t blockquote{margin:2.2rem 0 0;max-width:34rem;text-align:left}
.intro-t blockquote p{margin:0 0 .5rem}
.intro .who{margin-bottom:0}
@media(max-width:47.99em){.intro-t blockquote{margin-top:1.8rem}}
.intro-t blockquote p{font:500 clamp(1.25rem,2vw,1.55rem)/1.55 var(--name);color:var(--text)}
.intro-t blockquote footer{font:400 1rem/1.9 var(--sans);color:var(--text)}
.weiter{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 2.2rem;margin:2.5rem auto 0;padding:0;list-style:none;font:400 .68rem/1.6 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.weiter a{color:var(--soft);text-decoration:none;border:0}.weiter a:hover{color:var(--ink)}
.has-weiter{padding-bottom:clamp(2rem,4vw,3rem)!important}
.anf{margin-top:0}main>.panel>.wrap.narrow:has(h2:only-child){margin-bottom:1.5rem}
.contact3 .erreich{margin-top:1.8rem}.contact3 .anf-s{font-size:.82rem;line-height:1.8;color:var(--text)}