/* Schriften lokal (keine Verbindung zu Google) – Dateien liegen im Ordner fonts/ */
@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/BricolageGrotesque-VariableFont_opsz,wdth,wght.ttf") format("truetype");font-weight:200 800;font-display:swap}
@font-face{font-family:"Figtree";src:url("../fonts/Figtree-VariableFont_wght.ttf") format("truetype");font-weight:300 900;font-display:swap}
@font-face{font-family:"Outfit";src:url("../fonts/Outfit-VariableFont_wght.ttf") format("truetype");font-weight:100 900;font-display:swap}
/* Grundgerüst */
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;font-size:17px}
img{max-width:100%}
[hidden]{display:none!important}
/* Konzept "laut denken": Sprechblasen-Ecken als Leitmotiv, große Grotesk-Typo mit kursiver Serif-Stimme,
   vollflächige Farbbänder: dunkel (Praxis), Salbei (Heilbehandlung), Flieder (Selbstzahler) */
:root{
  --bg:#f7f6f3; --bg-glass:rgba(247,246,243,.88); --surface:#ffffff; --fg:#1d1b18; --muted:#63625e; --line:#e3e1dc;
  --ink:#3f5e54; --ink-fg:#f7f3ec; --ink-muted:#d9e4dd; --ink-accent:#c9e3d2; --crisis:#4d3d66;
  --sage:#d2e1da; --accent:#2c5c4e; --lilac:#ddd4ee; --plum:#4d3d66;
  --ph:#fff0b8; --ph-line:#c29400;
  --logo:#1d1b18; --logo-ink:#1d1b18; --logo-green:#7fa996; --logo-lilac:#6c559a;
  --display:"Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --voice:"Instrument Serif", Georgia, serif;
  --body:"Figtree", "Segoe UI", Arial, sans-serif;
  --logo-font:"Outfit", "Helvetica Neue", Arial, sans-serif;
  --bubble:32px 32px 32px 6px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#171716; --bg-glass:rgba(23,23,22,.88); --surface:#212120; --fg:#f0efeb; --muted:#aaa8a3; --line:#343432;
  --ink:#23352f; --ink-fg:#efe9e1; --ink-muted:#b9cbc2; --ink-accent:#a6d3bf; --crisis:#33284a;
  --sage:#1d2b26; --accent:#94cbb6; --lilac:#251f30; --plum:#c4ade6;
  --ph:#4a3b0d; --ph-line:#e0b83a; --logo:#f3eee7; --logo-ink:#141210; --logo-green:#7fae96; --logo-lilac:#a593c9; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#171716; --bg-glass:rgba(23,23,22,.88); --surface:#212120; --fg:#f0efeb; --muted:#aaa8a3; --line:#343432;
  --ink:#23352f; --ink-fg:#efe9e1; --ink-muted:#b9cbc2; --ink-accent:#a6d3bf; --crisis:#33284a;
  --sage:#1d2b26; --accent:#94cbb6; --lilac:#251f30; --plum:#c4ade6;
  --ph:#4a3b0d; --ph-line:#e0b83a; --logo:#f3eee7; --logo-ink:#141210; --logo-green:#7fae96; --logo-lilac:#a593c9; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:17px;line-height:1.65;padding:0 16px;overflow-x:clip}
.wrap{max-width:1120px;margin:0 auto}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.05;letter-spacing:-.025em;text-wrap:balance;margin:0}
h2{font-size:clamp(2rem,4.6vw,3.4rem);margin-bottom:1.1rem}
h3{font-size:1.45rem;letter-spacing:-.015em;margin-bottom:.3rem}
h4{font-family:var(--body);font-size:1rem;font-weight:600;margin:6px 0 0}
p{margin:0}
.voice{font-family:var(--display);font-style:normal;font-weight:300;letter-spacing:-.035em}
a{color:inherit}
a:focus-visible,summary:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:6px}
.prose{display:grid;gap:1em;max-width:62ch}
.ph{background:var(--ph);border-bottom:1.5px dashed var(--ph-line);padding:0 .2em;border-radius:3px;color:var(--fg)}
.draft{margin-top:16px;padding:10px 14px;border:1.5px dashed var(--ph-line);background:var(--ph);border-radius:10px;font-size:.92rem}
.tag{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;margin-bottom:18px}
.tag::before{content:none}
.pill{display:inline-block;font-size:.8rem;font-weight:600;padding:4px 12px;border-radius:999px;background:var(--sage);color:var(--accent);white-space:nowrap}
.pill.self{background:var(--lilac);color:var(--plum)}

/* Startbereich: Foto über die volle Breite, Menü liegt darauf */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hero-full{position:relative;isolation:isolate;margin-inline:calc(50% - 50vw);margin-top:calc(-1 * var(--hh,76px));min-height:clamp(560px,88vh,860px);display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;z-index:-2}
.hero-full::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(20,20,20,.6) 0%,rgba(20,20,20,.28) 45%,rgba(20,20,20,.04) 100%),linear-gradient(0deg,rgba(20,20,20,.45) 0%,rgba(20,20,20,0) 55%),linear-gradient(180deg,rgba(20,20,20,.55) 0%,rgba(20,20,20,.25) 14%,rgba(20,20,20,0) 30%)}
.hero-text{width:100%;max-width:1152px;margin:0 auto;padding:0 16px clamp(40px,7vh,80px)}
.hero-rule{display:block;width:240px;max-width:60%;height:1.5px;background:#fff;opacity:.9}
.hero-svc{list-style:none;margin:20px 0;padding:0;display:grid;gap:2px}
.hero-svc li{display:flex;align-items:center;gap:18px;font-family:var(--logo-font);font-weight:400;letter-spacing:-.02em;font-size:clamp(2.4rem,5.4vw,4.6rem);line-height:1.08}
.hero-svc li::before{content:"";flex:none;width:.34em;height:.34em;border-radius:50%}
.hero-svc li.g::before{background:var(--logo-green)} .hero-svc li.l::before{background:var(--logo-lilac)}
.hero-svc a{color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:.25em;transition:transform .25s ease}
.hero-svc a::after{content:"→";font-weight:300;font-size:.6em;opacity:0;transform:translateX(-8px);transition:opacity .25s,transform .25s}
.hero-svc a:hover,.hero-svc a:focus-visible{transform:translateX(8px)}
.hero-svc a:hover::after,.hero-svc a:focus-visible::after{opacity:1;transform:none}
.hero-svc a:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:8px}
@media (hover:none){.hero-svc a::after{opacity:.6;transform:none}}
.hero-loc{margin:16px 0 0;font-family:var(--logo-font);font-weight:300;font-size:clamp(1.15rem,2vw,1.55rem)}
.hero-who{margin:8px 0 0;font-size:.95rem;opacity:.88}
/* Menü auf dem Foto */
header.top{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;isolation:isolate}
header.top::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);background:var(--bg);opacity:1;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:-1;transition:opacity .3s ease}
header.top.on-hero::before{opacity:0}

header.top.on-hero{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
header.top.on-hero .brand .wordmark,header.top.on-hero nav a{color:#fff}
header.top.on-hero .brand small{color:rgba(255,255,255,.9)}
header.top.on-hero .brand .wordmark,header.top.on-hero .brand small,header.top.on-hero nav a:not(.active){text-shadow:0 1px 10px rgba(0,0,0,.45)}
header.top.on-hero nav a:hover{background:rgba(255,255,255,.16)}
header.top.on-hero nav a.active{background:#fff;color:#1d1b18}
header.top{transition:background .3s ease}
@media (max-width:600px){.hero-full{min-height:max(620px,92svh)}.hero-img{object-position:50% 50%}.hero-full::before{background:linear-gradient(0deg,rgba(20,20,20,.68) 0%,rgba(20,20,20,.25) 55%,rgba(20,20,20,.35) 100%)}}
@media (prefers-reduced-motion:reduce){.hero-svc a,.hero-svc a::after,header.top{transition:none}}
/* Kräftiges Lila als Akzent */
.brand .mono .m2,.foot-dots i+i{mix-blend-mode:normal;opacity:.88}
#coaching-diagnostik h2 .voice,.tile.self h3{color:var(--plum)}
.card .pill.self,.tile .pill.self{background:var(--plum);color:var(--bg)}
.more summary{color:var(--plum)}
.hero-svc li.g::before{background:#9cc9b2} .hero-svc li.l::before{background:#a68cd6}
/* Bänder über die volle Breite */
.band{--band-bg:transparent;position:relative;isolation:isolate;padding-block:88px}
.band::before{content:"";position:absolute;inset:0 calc(50% - 50vw);background:var(--band-bg);z-index:-1}

/* Kopfzeile */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--bg-glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between;padding-block:16px;margin-inline:-16px;padding-inline:16px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand .mono{flex:none;position:relative;width:60px;height:38px}
.brand .mono span{position:absolute;top:0;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:var(--logo-font);font-weight:600;font-size:1.05rem;color:var(--logo-ink)}
.brand .mono .m1{left:0;background:var(--logo-green)}
.brand .mono .m2{right:0;background:var(--logo-lilac);mix-blend-mode:multiply}
.brand .mono .m1,.brand .mono .m2{z-index:0}
.brand .mono .m2 b{font-weight:600;position:relative}
.brand .mono .dot{position:absolute;right:-7px;top:-5px;width:9px;height:9px;border-radius:50%;background:var(--logo)}
.brand .text{display:grid;gap:6px}
.brand .wordmark{font-family:var(--logo-font);font-weight:600;font-size:clamp(1.1rem,2.2vw,1.35rem);text-transform:uppercase;letter-spacing:.2em;line-height:1;color:var(--logo)}
.brand small{font-size:.68rem;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);line-height:1.2}
nav{display:flex;flex-wrap:wrap;gap:4px 6px;font-size:.93rem}
nav a{text-decoration:none;padding:6px 12px;border-radius:999px}
nav a:hover{background:var(--surface)}
nav a.active,nav a.active:hover{background:var(--fg);color:var(--bg)}
nav a{transition:background .2s,color .2s}
section[id]{scroll-margin-top:110px}

/* Hero */
.hero{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:center;padding-block:64px 40px}
.hero>*{min-width:0}
.hero .tag{color:var(--accent)}
.hero .h1-box{background:var(--sage);border-radius:var(--bubble);padding:clamp(20px,3vw,32px) clamp(22px,3.2vw,36px);margin-bottom:22px}
.hero h1{font-size:clamp(2.1rem,4.8vw,3.9rem);font-weight:600;letter-spacing:-.02em;line-height:1.05;margin:0;color:var(--accent)}
.hero .subline{font-family:var(--display);font-weight:300;font-size:clamp(1.6rem,3.4vw,2.7rem);letter-spacing:-.03em;line-height:1.1;color:var(--plum);margin-bottom:26px;text-wrap:balance}
.hero h1 .voice{display:block;color:var(--accent);line-height:1;margin-top:.06em}
.lead{color:var(--muted);font-size:1.15rem;max-width:36em;margin-bottom:30px}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:999px;font-weight:600;text-decoration:none;transition:transform .2s}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:var(--fg);color:var(--bg)}
.btn.primary::after{content:"→"}
.btn.ghost{border:1.5px solid var(--fg)}

.stage{position:relative;aspect-ratio:1/1;max-width:100%;width:100%;max-width:480px;justify-self:end}
.blob{position:absolute;border-radius:58% 42% 47% 53% / 46% 55% 45% 54%}
.blob.a{inset:4% 10% 18% 2%;background:var(--sage);animation:morph 14s ease-in-out infinite}
.blob.b{width:46%;aspect-ratio:1;right:0;top:2%;background:var(--lilac);animation:morph 18s ease-in-out infinite reverse}
.ring{position:absolute;width:30%;aspect-ratio:1;left:4%;bottom:6%;border:2px solid var(--fg);border-radius:50%}
.dots{position:absolute;right:10%;bottom:34%;display:flex;gap:8px}
.dots i{width:12px;height:12px;border-radius:50%;background:var(--fg);animation:think 1.6s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes morph{50%{border-radius:42% 58% 60% 40% / 55% 40% 60% 45%}}
@keyframes think{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
.bubble{position:absolute;left:12%;right:8%;bottom:14%;background:var(--surface);border-radius:var(--bubble);padding:22px 24px;display:grid;gap:12px;box-shadow:0 24px 50px -24px rgba(40,40,35,.28)}
.bubble{margin:0}
.bubble blockquote{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(1.2rem,2.3vw,1.55rem);line-height:1.25;letter-spacing:-.02em;text-wrap:balance}
.bubble .label{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:600}
.bubble .big{font-family:var(--display);font-weight:700;font-size:1.15rem;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.bubble .pills{display:flex;flex-wrap:wrap;gap:6px}


/* Praxis (dunkles Band) */
#praxis{--band-bg:transparent;color:var(--fg)}
#praxis .tag{color:var(--accent)}
#praxis{padding-bottom:0}
#praxis .praxis-gallery{position:relative;isolation:isolate;padding-bottom:clamp(48px,7vw,88px)}
#praxis .praxis-gallery::before{content:"";position:absolute;left:calc(50% - 50vw);right:calc(50% - 50vw);top:45%;bottom:0;background:var(--sage);z-index:-1}
#praxis .grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
#praxis .grid>*{min-width:0}
#praxis h2 .voice{color:var(--accent)}
#praxis .prose{color:var(--muted);font-size:1.08rem}
#praxis .praxis-quote{margin-top:.6em;padding-top:1em;border-top:1px solid var(--line);font-family:var(--display);font-weight:400;font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.3;letter-spacing:-.02em;color:var(--plum)}
#praxis .prose p:first-child{color:var(--fg);font-size:1.2rem}

.praxis-gallery{display:grid;grid-template-columns:2fr 1fr 1.35fr;gap:16px;margin-top:56px}
.praxis-gallery figure{margin:0;height:clamp(240px,30vw,380px);overflow:hidden;border-radius:24px 24px 24px 6px}
.praxis-gallery img{width:100%;height:100%;object-fit:cover;display:block}
.praxis-gallery .g-sofa img{object-position:30% 60%}
.portrait.portrait-circle{aspect-ratio:1/1;border-radius:0;background:transparent;overflow:visible}
.portrait.portrait-circle img{object-fit:contain}
.portrait.has-img{padding:0;border:0;overflow:hidden}
.portrait.has-img img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:760px){.praxis-gallery{grid-template-columns:1fr 1fr}.praxis-gallery .g-raum{grid-column:1/-1}.praxis-gallery figure{height:auto;aspect-ratio:4/3}.praxis-gallery .g-fenster{aspect-ratio:3/4}.praxis-gallery .g-sofa{aspect-ratio:3/4}}
/* Über mich */
#ueber-mich .grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
#ueber-mich .grid>*{min-width:0}
#ueber-mich .um-photo{max-width:380px;width:100%}
#ueber-mich .um-photo img{display:block;width:100%;height:auto;aspect-ratio:1/1;border-radius:50%}
@media (max-width:900px){
  #ueber-mich .grid{grid-template-columns:clamp(96px,26vw,150px) minmax(0,1fr)!important;column-gap:20px!important;row-gap:0!important;align-items:center}
  #ueber-mich .um-text{display:contents}
  #ueber-mich .um-photo{grid-column:1;grid-row:1 / span 2;align-self:center}
  #ueber-mich .um-text>.tag{grid-column:2;grid-row:1;align-self:end;margin-bottom:6px}
  #ueber-mich .um-text>h2{grid-column:2;grid-row:2;align-self:start;margin-bottom:0}
  #ueber-mich .um-text>.prose,#ueber-mich .um-text>.cv{grid-column:1 / -1}
  #ueber-mich .um-text>.prose{margin-top:24px}
}

#ueber-mich .tag{color:var(--accent)}
.portrait-wrap{position:relative;max-width:420px}
.portrait{aspect-ratio:4/5;max-width:100%;border-radius:200px 200px 32px 6px;background:var(--sage);display:grid;place-items:center;color:var(--accent);text-align:center;padding:24px;border:1.5px dashed var(--ph-line)}
.portrait-wrap .ring{width:38%;left:auto;right:-8%;bottom:-6%;bottom:-6%}
.cv{display:grid;gap:0;margin-top:26px;border-top:1.5px solid var(--fg)}
.cv-row{display:grid;grid-template-columns:120px 1fr;gap:16px;padding-block:14px;border-bottom:1px solid var(--line)}
.cv-row.split{border-top:1.5px solid var(--fg);margin-top:22px}
.cv-row:has(+ .cv-row.split){border-bottom:0}
.cv-row.last{border-bottom:1.5px solid var(--fg)}
.cv-row>*{min-width:0}
.cv-row dt{font-family:var(--display);font-weight:700;font-variant-numeric:tabular-nums}
.cv-row dd{margin:0;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{border:1.5px solid var(--fg);border-radius:999px;padding:4px 14px;font-size:.9rem;color:var(--fg)}

/* Bänder für Leistungen */
.track .intro{color:var(--muted);font-size:1.12rem;max-width:58ch;margin-bottom:36px}
#psychotherapie{--band-bg:var(--sage)}
#psychotherapie .tag{color:var(--accent)}
#coaching-diagnostik{--band-bg:var(--lilac)}
#coaching-diagnostik .tag{color:var(--plum)}
.cd-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center}
.cd-art{width:clamp(180px,20vw,240px);height:auto;margin-bottom:36px;overflow:visible}
.cd-art .ring{fill:none;stroke:var(--plum);stroke-width:1.2;opacity:.35}
.cd-art .c1{fill:var(--logo-green);opacity:.8}
.cd-art .c2{fill:var(--logo-lilac);mix-blend-mode:multiply;opacity:.55}
.cd-art .c3{fill:var(--plum)}
.cd-art .c4{fill:var(--logo-green);opacity:.7}
.cd-art .c5{fill:var(--surface)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .cd-art .c2{mix-blend-mode:normal;opacity:.8}}
:root[data-theme="dark"] .cd-art .c2{mix-blend-mode:normal;opacity:.8}
@media (max-width:760px){.cd-head{grid-template-columns:1fr;gap:0}.cd-art{display:none}}
.head-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:18px}

.featured{background:var(--surface);border-radius:var(--bubble);padding:clamp(24px,4vw,44px);display:grid;grid-template-columns:1.3fr 1fr;gap:36px}
.featured>*{min-width:0}
.featured h3{font-size:clamp(1.6rem,3vw,2.2rem)}
.billing{display:grid;gap:12px;align-content:start}
.billing div{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px 14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.billing div:last-child{border-bottom:0}
.billing .gop-note{font-size:.85rem;color:var(--muted);margin-top:2px}
.billing span:last-child{color:var(--muted);font-size:.95rem;text-align:right;line-height:1.35}
@media (max-width:600px){.billing div{grid-template-columns:1fr;gap:6px;justify-items:start}.billing span:last-child{text-align:left}}

.notice{background:var(--surface);border-radius:var(--bubble);padding:22px 26px;display:grid;gap:6px;margin-bottom:28px;max-width:80ch;border-left:0}
.notice strong{color:var(--plum);font-family:var(--display);font-size:1.1rem}
.soon{margin-top:24px;background:var(--surface);border-radius:var(--bubble);padding:clamp(24px,3.4vw,36px);display:grid;gap:12px;max-width:80ch}
.soon .soon-pill{justify-self:start;background:var(--plum);color:var(--bg)}
.soon h3{font-size:clamp(1.5rem,2.6vw,1.9rem)}
.soon p{color:var(--muted)}
.soon a{color:var(--fg);font-weight:600;overflow-wrap:anywhere}

.cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.cards>*{min-width:0}
.card{background:var(--surface);border-radius:var(--bubble);padding:clamp(24px,3.4vw,36px);display:grid;gap:14px;align-content:start;transition:transform .25s}
.card:hover{transform:translateY(-3px)}
.card .pill{justify-self:start}
.card h3{font-size:clamp(1.6rem,2.8vw,2.1rem)}
.card>p{color:var(--muted)}
.card ul{margin:0;padding-left:1.1em;color:var(--muted)}
.price{font-family:var(--display);font-weight:700;font-size:1.5rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--fg)}
.more-body .included{border-top:0;padding-top:0}
.included{border-top:1.5px solid var(--fg);padding-top:16px;display:grid;gap:6px}
.inc-label{font-size:.9rem;color:var(--muted)}

/* Aufklappbereiche */
.more{border-top:1px solid var(--line);padding-top:12px}
.featured .status.full{grid-column:1/-1;background:var(--sage);border-radius:18px 18px 18px 4px;padding:16px 20px;display:grid;gap:4px}
.status strong{color:var(--accent);font-weight:600}
.status p{color:var(--fg);font-size:.97rem}
.featured .more.full{grid-column:1/-1}
.overview .tag{color:var(--accent)}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:12px}
.tiles .tile.heal{grid-column:1/-1}
.tiles .tile.heal p{max-width:60ch}
.tiles>*{min-width:0}
.tile{display:grid;gap:12px;align-content:start;text-decoration:none;border-radius:var(--bubble);padding:clamp(24px,3vw,34px);transition:transform .25s}
.tile:hover{transform:translateY(-4px)}
.tile.heal{background:var(--sage)}
.tile.self{background:var(--lilac)}
.tile .pill{justify-self:start;background:var(--surface)}
.tile h3{font-size:clamp(1.5rem,2.6vw,2rem)}
.tile p{color:var(--muted)}
.tile .go{font-weight:600;display:inline-flex;gap:8px;margin-top:6px}
.tile .go::after{content:"→";transition:transform .2s}
.tile:hover .go::after{transform:translateX(4px)}
.tile.heal .go{color:var(--accent)}
.tile.self .go{color:var(--plum)}
.notice{margin-top:28px;margin-bottom:0}
.more summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:10px;font-weight:600;padding:6px 16px 6px 6px;border-radius:999px;color:var(--plum)}
#psychotherapie .more summary{color:var(--accent)}
#psychotherapie .more summary::before{background:var(--accent)}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:"+";display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--plum);color:var(--surface);font-size:1.1rem;font-weight:600;line-height:1;transition:transform .25s}
.more[open] summary::before{transform:rotate(45deg)}
.more .s-open{display:none}
.more[open] .s-open{display:inline}
.more[open] .s-closed{display:none}
.more-body{display:grid;gap:10px;padding-top:12px}
.more-body ul{display:grid;gap:6px;color:var(--muted)}
.more-body p{color:var(--muted)}
.more-body strong{color:var(--fg);font-weight:600}

.steps{list-style:none;padding:0;margin:8px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s;position:relative}
.steps li{counter-increment:s;display:grid;gap:6px;align-content:start;position:relative}
.steps li::before{content:counter(s);font-family:var(--display);font-weight:800;font-size:1.3rem;width:48px;height:48px;border-radius:16px 16px 16px 3px;background:var(--accent);color:var(--surface);display:grid;place-items:center;margin-bottom:8px;position:relative;z-index:1}
.steps li:not(:last-child)::after{content:"";position:absolute;top:24px;left:56px;right:-12px;border-top:2px dashed var(--accent);opacity:.5}
.steps strong{font-weight:600;color:var(--fg)}
.steps p{font-size:.96rem}
.note{margin-top:18px;font-size:.95rem;max-width:72ch}

/* Häufige Fragen */
#faq .grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:48px;align-items:start}
#faq .tag{color:var(--accent)}
#faq .faq-head{position:sticky;top:120px}
#faq .faq-head p{color:var(--muted);max-width:34ch}
.faq-list{border-top:1.5px solid var(--fg)}
.faq{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px;padding-block:18px;font-family:var(--display);font-weight:600;font-size:1.12rem;letter-spacing:-.01em;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--surface);font-family:var(--body);font-size:1.1rem;font-weight:600;line-height:1;transition:transform .25s}
.faq[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--accent)}
.faq .a{padding:0 46px 20px 0;display:grid;gap:10px}
.faq .a p{color:var(--muted)}
#faq+#kontakt::after{content:"";position:absolute;top:0;left:0;right:0;border-top:1px solid var(--line)}

/* Kontakt */
#kontakt .grid{display:grid;grid-template-columns:1.1fr 1fr;gap:48px}
#kontakt .grid>*{min-width:0}
#kontakt .tag{color:var(--accent)}
.contact-list{margin:0;display:grid;border-top:1.5px solid var(--fg)}
.contact-list div{display:grid;grid-template-columns:120px 1fr;gap:16px;padding-block:14px;border-bottom:1px solid var(--line)}
.contact-list div>*{min-width:0}
.contact-list dt{font-weight:600}
.contact-list dd{margin:0;color:var(--muted);overflow-wrap:anywhere}
.contact-list dd a{color:var(--fg);font-weight:600}
.crisis{background:var(--crisis);color:var(--ink-fg);border-radius:var(--bubble);padding:clamp(24px,3.4vw,36px);display:grid;gap:12px;align-content:start}
.crisis h3{color:var(--ink-fg)}
.crisis>p{color:var(--ink-muted)}
.crisis .num{font-family:var(--display);font-weight:700;font-size:1.35rem;font-variant-numeric:tabular-nums;color:var(--ink-fg)}
.crisis .num small{display:block;font-family:var(--body);font-weight:400;font-size:.88rem;color:var(--ink-muted)}

/* Rechtliche Seiten: nur sichtbar, wenn per Link aufgerufen */
.legal{display:block;padding-block:56px;border-top:1.5px solid var(--fg)}
.legal:target{display:block}
.legal-back{display:inline-block;margin-bottom:22px;font-weight:600;text-decoration:none;color:var(--accent)}
.legal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 48px;margin-top:10px}
.legal h3{font-size:1.05rem;letter-spacing:0;margin-bottom:6px}
.legal p,.legal li{color:var(--muted);overflow-wrap:anywhere}
.legal ul{margin:0 0 6px;padding-left:1.1em}
.legal .haftung{margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
.legal .haftung h4{margin:12px 0 0;font-size:1rem}
.legal-text{max-width:72ch;display:grid;gap:10px}
.legal-text h3{margin-top:18px}
.legal-text ul{display:grid;gap:4px}
.legal .stand{margin-top:20px;font-size:.9rem}
@media (max-width:700px){.legal-grid{grid-template-columns:1fr}}
/* Unterseiten Intelligenztest und Coaching */
.sub .tag{color:var(--accent);display:flex}
.sub .sub-h{font-size:clamp(2rem,4.6vw,3.2rem);margin-bottom:1.4rem;max-width:22ch}
.sub .legal-text p,.sub .legal-text li{color:var(--fg)}
.sub .legal-text .lead{font-size:1.15rem}
.sub .legal-text h3{font-size:clamp(1.3rem,2.4vw,1.6rem);margin-top:28px}
.sub .legal-text h4{margin:12px 0 0;font-size:1.05rem;font-family:var(--display)}
.sub .faq-list{margin-top:6px}
.sub .legal-text .faq .a p{color:var(--muted)}
.sub .sub-cta{margin-top:36px;background:var(--lilac);border-radius:var(--bubble);padding:clamp(22px,3.4vw,34px);display:grid;gap:8px}
.sub .sub-cta h3{margin-top:0;color:var(--plum)}
.sub .sub-cta a{font-weight:600;color:var(--fg);white-space:nowrap}
.sub-link{justify-self:start;font-weight:600;color:var(--plum);text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:1px}
.sub-link:hover{opacity:.8}
footer{padding-block:40px 48px;border-top:1.5px solid var(--fg);display:grid;gap:18px}
.foot-mark{font-family:var(--logo-font);font-weight:600;text-transform:uppercase;letter-spacing:.2em;font-size:clamp(1.4rem,5vw,3rem);line-height:1;color:var(--logo)}
.foot-mark{display:flex;align-items:center;gap:.5em;flex-wrap:wrap}
.foot-dots{display:inline-flex}
.foot-dots i{width:.9em;height:.9em;border-radius:50%;background:var(--logo-green)}
.foot-dots i+i{background:var(--logo-lilac);margin-left:-.3em;mix-blend-mode:multiply}
.foot-row{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:.9rem;color:var(--muted)}

@media (max-width:900px){
  .hero,#praxis .grid,#ueber-mich .grid,.featured,#kontakt .grid,#faq .grid{grid-template-columns:1fr;gap:32px}
  #faq .faq-head{position:static}
  .stage{justify-self:center;max-width:420px}
  .steps{grid-template-columns:1fr 1fr}
  .steps li::after{display:none}
  .band{padding-block:64px}
}
@media (max-width:600px){
  .cards,.steps,.tiles{grid-template-columns:1fr}
  header.top{padding-block:10px;gap:8px}
  header.top .brand small{display:none}
  header.top .brand .mono{width:48px;height:30px}
  header.top .brand .mono span{width:30px;height:30px}
  section[id]{scroll-margin-top:96px}
  nav{gap:0;font-size:.86rem;flex-wrap:nowrap;margin-inline:-7px}
  nav a{padding:4px 7px;white-space:nowrap}
  .cv-row,.contact-list div{grid-template-columns:1fr;gap:2px}
  .bubble{left:4%;right:2%;bottom:6%;padding:18px}
  .portrait-wrap .ring{right:0}
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .brand .mono .m2{mix-blend-mode:normal;opacity:.85}}
:root[data-theme="dark"] .brand .mono .m2{mix-blend-mode:normal;opacity:.85}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .blob,.dots i{animation:none}
  .btn,.card,.tile,.tile .go::after,.more summary::before,.faq summary::after{transition:none}
}