/* ============================================================
   Almuth Braun — Praxis-Website
   Tokens aus dem Designsystem "Praxis für Psychologie", Direction V2
   ============================================================ */

/* --- Schriften, lokal eingebunden (keine externen Anfragen) --- */
@font-face{font-family:Newsreader;font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/newsreader-400-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Newsreader;font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/newsreader-400-normal-ext.woff2) format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Newsreader;font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/newsreader-500-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Newsreader;font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/newsreader-500-normal-ext.woff2) format('woff2');
  unicode-range:U+0100-02AF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Newsreader;font-style:italic;font-weight:400;font-display:swap;
  src:url(/assets/fonts/newsreader-400-italic.woff2) format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/sourcesans3-400-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/sourcesans3-400-normal-ext.woff2) format('woff2');
  unicode-range:U+0100-02AF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/sourcesans3-600-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/sourcesans3-600-normal-ext.woff2) format('woff2');
  unicode-range:U+0100-02AF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* --- Tokens --- */
:root{
  --paper:#F4F0E9; --paper-2:#ECE5D9; --card:#FBF8F2;
  --line:#DAD2C3; --line-strong:#C2B8A5;
  --ink:#2A2824; --ink-2:#504C44; --ink-3:#7E786C;
  --ink-muted:#6A6459;               /* abgedunkelt für Kleintext, s. Übergabe */
  --terra-600:#6E2B23; --terra-700:#571F19; --terra-100:#EBDCD4;
  --focus:#6E2B23;
  --font-display:Newsreader,Georgia,'Times New Roman',serif;
  --font-body:'Source Sans 3','Segoe UI',system-ui,sans-serif;
  --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --r-s:4px; --r-m:8px; --r-l:12px;
  --maxw:1120px; --maxw-text:68ch;
}

/* --- Grundlagen --- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--paper); color:var(--ink-2);
  font-family:var(--font-body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
h1,h2,h3{color:var(--ink); font-family:var(--font-display); font-weight:400; margin:0; letter-spacing:-.01em}
h1{font-size:clamp(32px,5.2vw,52px); line-height:1.12}
h2{font-size:clamp(26px,3.6vw,40px); line-height:1.16}
h3{font-size:21px; line-height:1.35; font-weight:500}
p{margin:0 0 var(--s-4)}
p:last-child{margin-bottom:0}
a{color:var(--terra-600); text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:3px; text-decoration-color:var(--line-strong);
  transition:text-decoration-color .2s ease,color .2s ease}
a:hover{color:var(--terra-700); text-decoration-color:var(--terra-600)}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:2px}
::selection{background:var(--terra-100); color:var(--ink)}

.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,40px)}
.narrow{max-width:var(--maxw-text)}
.skip{position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--paper);
  padding:12px 18px; z-index:100; text-decoration:none}
.skip:focus{left:12px; top:12px}

/* --- Kopfbereich --- */
.head{position:sticky; top:0; z-index:40; background:rgba(244,240,233,.94);
  backdrop-filter:saturate(140%) blur(6px); border-bottom:1px solid var(--line)}
@supports not (backdrop-filter:blur(1px)){.head{background:var(--paper)}}
.head-in{display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding-top:clamp(12px,1.8vw,18px); padding-bottom:clamp(12px,1.8vw,18px)}
.brand{display:flex; align-items:center; gap:16px; text-decoration:none; flex-shrink:0}
.brand img{height:clamp(26px,3.2vw,34px); width:auto}
.brand-txt{border-left:1px solid var(--line); padding-left:16px; line-height:1.35}
.brand-txt b{display:block; font-weight:600; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink)}
.brand-txt span{display:block; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-muted)}
@media (max-width:520px){.brand-txt{display:none}}
.nav{display:flex; align-items:center; gap:clamp(14px,2vw,26px)}
.nav a.lnk{font-size:15px; color:var(--ink-2); text-decoration:none; white-space:nowrap;
  padding:6px 0; border-bottom:1px solid transparent}
.nav a.lnk:hover{color:var(--ink); border-bottom-color:var(--line-strong)}
.nav a.lnk[aria-current=page]{color:var(--ink); border-bottom-color:var(--terra-600)}
.burger{display:none; background:none; border:1px solid var(--line); border-radius:var(--r-s);
  padding:9px 12px; cursor:pointer; color:var(--ink); font:inherit; font-size:14px; line-height:1}
@media (max-width:900px){
  .nav .lnk{display:none}
  .burger{display:inline-flex; align-items:center; gap:8px}
  .head-in{gap:12px}
}
.menu{display:none; border-top:1px solid var(--line); background:var(--card)}
.menu[hidden]{display:none !important}
.menu.open{display:block}
/* Ab 901 px gibt es keine Klappnavigation — dort niemals einblenden */
@media (min-width:901px){.menu, .menu.open{display:none !important}}
.menu ul{list-style:none; margin:0; padding:8px 0 20px}
.menu a{display:block; padding:13px 0; font-size:17px; color:var(--ink-2);
  text-decoration:none; border-bottom:1px solid var(--line)}
.menu a:last-child{border-bottom:0}

/* --- Schaltflächen --- */
.btn{display:inline-block; font-family:var(--font-body); font-size:16px; font-weight:600;
  line-height:1.2; padding:14px 24px; border-radius:var(--r-s); border:1px solid transparent;
  background:var(--terra-600); color:#FBF8F2; text-decoration:none; cursor:pointer;
  transition:background .2s ease}
.btn:hover{background:var(--terra-700); color:#FBF8F2}
.btn.s{font-size:14px; padding:9px 16px}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line-strong)}
.btn.ghost:hover{background:var(--paper-2); color:var(--ink)}

/* --- Abschnitte: Linie, Nummer, Label --- */
section{border-top:1px solid var(--line)}
section.tinted{background:var(--card)}
section.plain{border-top:0}
.sec{padding-top:clamp(56px,8vw,96px); padding-bottom:clamp(56px,8vw,96px)}
.label{display:flex; align-items:baseline; gap:14px; margin-bottom:var(--s-6);
  font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-muted)}
.label .num{font-family:var(--font-display); font-size:13px; font-weight:500;
  letter-spacing:.06em; color:var(--terra-600)}
.lede{font-size:clamp(18px,2vw,20px); line-height:1.55; color:var(--ink-2); max-width:58ch}
.body{max-width:62ch}
.body p{margin-bottom:var(--s-4)}
.small{font-size:15px; color:var(--ink-muted); max-width:72ch}

/* --- Hero --- */
.hero{padding-top:clamp(56px,9vw,104px); padding-bottom:clamp(56px,9vw,104px)}
.hero .eyebrow{font-size:13px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-muted); margin-bottom:clamp(20px,3vw,30px)}
.hero h1{max-width:18ch}
.hero .body{margin-top:var(--s-5)}
.hero .cta{margin-top:var(--s-7); display:flex; gap:16px; flex-wrap:wrap; align-items:center}
.hero .avail{font-size:15px; color:var(--ink-muted)}

/* --- Zwei Wege: editorial, keine Karten --- */
.wege{display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(36px,6vw,80px); margin-top:var(--s-7)}
@media (max-width:800px){.wege{grid-template-columns:1fr; gap:0}}
.weg{display:flex; flex-direction:column; text-decoration:none; color:inherit;
  border-top:1px solid var(--line-strong); padding:var(--s-5) 0 0;
  transition:border-top-color .25s ease}
@media (max-width:800px){.weg{padding-bottom:var(--s-7)}}
.weg .lbl{font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-muted); margin-bottom:var(--s-5); transition:color .25s ease}
.weg h3{font-family:var(--font-display); font-weight:400; letter-spacing:-.01em;
  font-size:clamp(21px,2.3vw,27px); line-height:1.22; color:var(--ink); margin-bottom:14px}
.weg p{color:var(--ink-2); margin:0}
.weg .more{margin-top:auto; padding-top:var(--s-6); font-size:16px; font-weight:600;
  color:var(--terra-600); transition:color .25s ease}
.weg .more span{border-bottom:1px solid var(--line-strong); padding-bottom:2px;
  transition:border-color .25s ease}
.weg:hover{border-top-color:var(--terra-600)}
.weg:hover .lbl{color:var(--ink-2)}
.weg:hover .more{color:var(--terra-700)}
.weg:hover .more span{border-bottom-color:var(--terra-600)}
.weg:focus-visible{outline:2px solid var(--focus); outline-offset:8px}

/* --- Kompass: vier Schritte --- */
.kompass{display:grid; grid-template-columns:repeat(4,1fr); gap:0 clamp(24px,3vw,44px);
  margin-top:var(--s-6)}
@media (max-width:860px){.kompass{grid-template-columns:1fr 1fr; gap:0 40px}}
@media (max-width:520px){.kompass{grid-template-columns:1fr}}
.schritt{border-top:1px solid var(--line-strong); padding:var(--s-5) 0 var(--s-6)}
@media (max-width:520px){.schritt{padding-bottom:var(--s-5)}}
.schritt .n{font-family:var(--font-display); font-size:13px; letter-spacing:.06em;
  color:var(--terra-600); display:block; margin-bottom:10px}
.schritt h3{font-size:19px; margin-bottom:8px}
.schritt p{font-size:15px; color:var(--ink-2)}

/* --- Ablauf: nummerierte Folge mit Trennlinien --- */
.ablauf{margin-top:var(--s-6); max-width:820px; border-top:1px solid var(--line-strong)}
.stufe{display:grid; grid-template-columns:56px 1fr; gap:0 20px; align-items:baseline;
  border-bottom:1px solid var(--line); padding:20px 0}
@media (max-width:560px){.stufe{grid-template-columns:1fr; gap:6px}}
.stufe .n{font-family:var(--font-display); font-size:13px; letter-spacing:.06em;
  color:var(--terra-600)}
.stufe h3{font-size:19px; margin-bottom:6px}
.stufe p{font-size:15px; color:var(--ink-2); max-width:56ch}

/* --- Listen mit Trennlinien --- */
.liste{margin-top:var(--s-5); max-width:820px}
.liste.zwei{columns:2; column-gap:48px}
@media (max-width:760px){.liste.zwei{columns:1}}
.liste .it{border-top:1px solid var(--line); padding:13px 0; font-size:17px;
  color:var(--ink-2); break-inside:avoid}

/* --- Über-Block --- */
.ueber{display:grid; grid-template-columns:320px 1fr; gap:clamp(28px,5vw,64px);
  align-items:start; margin-top:var(--s-6)}
@media (max-width:860px){.ueber{grid-template-columns:1fr; gap:28px}
  .ueber .pic{max-width:280px}}
.pic img{border-radius:var(--r-l); border:1px solid var(--line)}
.pic figcaption{font-size:13px; color:var(--ink-muted); margin-top:10px}

/* --- Modell: Fundament + drei Säulen --- */
.modell{margin-top:var(--s-6); max-width:820px}
.saeulen{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media (max-width:700px){.saeulen{grid-template-columns:1fr}}
.saeule{background:var(--card); border:1px solid var(--line-strong); border-radius:var(--r-s);
  padding:20px 18px; min-height:120px}
.saeule b{display:block; font-family:var(--font-display); font-size:19px; font-weight:500;
  color:var(--ink); margin-bottom:8px; min-height:2.7em}
@media (max-width:700px){.saeule b{min-height:0}}
.saeule span{font-size:15px; color:var(--ink-2)}
.fundament{margin-top:12px; background:var(--paper-2); border:1px solid var(--line-strong);
  border-radius:var(--r-s); padding:18px; text-align:center}
.fundament b{font-family:var(--font-display); font-size:19px; font-weight:500; color:var(--ink)}
.fundament span{display:block; font-size:15px; color:var(--ink-2); margin-top:6px}

/* --- Honorar --- */
.preis{margin-top:var(--s-5); border-top:1px solid var(--line-strong); max-width:640px}
.preis .z{display:flex; justify-content:space-between; align-items:baseline; gap:24px;
  border-bottom:1px solid var(--line); padding:16px 0}
.preis .z dt{font-size:17px; color:var(--ink-2)}
.preis .z dd{margin:0; font-family:var(--font-display); font-size:22px; color:var(--ink);
  white-space:nowrap}
.preis dl{margin:0}

/* --- Fragen (native details) --- */
.fragen{margin-top:var(--s-6); max-width:820px; border-top:1px solid var(--line)}
.frage{border-bottom:1px solid var(--line)}
.frage summary{list-style:none; cursor:pointer; padding:20px 40px 20px 0; position:relative;
  font-family:var(--font-display); font-size:19px; color:var(--ink); font-weight:400}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{content:"+"; position:absolute; right:6px; top:50%;
  transform:translateY(-50%); font-family:var(--font-body); font-size:22px;
  color:var(--terra-600); line-height:1}
.frage[open] summary::after{content:"–"}
.frage summary:hover{color:var(--terra-700)}
.frage .a{padding:0 40px 24px 0; max-width:62ch}
.frage .a p{font-size:16px}

/* --- Formular --- */
.form{margin-top:var(--s-6); max-width:600px}
.feld{margin-bottom:var(--s-5)}
.feld label{display:block; font-size:13px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-muted); margin-bottom:8px}
.feld input,.feld select,.feld textarea{width:100%; font-family:var(--font-body); font-size:17px;
  color:var(--ink); background:var(--card); border:1px solid var(--line-strong);
  border-radius:var(--r-s); padding:12px 14px; transition:border-color .2s ease}
.feld textarea{resize:vertical; min-height:130px; line-height:1.55}
.feld input:hover,.feld select:hover,.feld textarea:hover{border-color:var(--ink-3)}
.feld .hint{font-size:14px; color:var(--ink-muted); margin-top:7px}
.feld .err{font-size:14px; color:var(--terra-600); margin-top:7px; display:none}
.feld.invalid input,.feld.invalid textarea,.feld.invalid select{border-color:var(--terra-600);
  background:#FCF6F4}
.feld.invalid .err{display:block}
.zwei-sp{display:grid; grid-template-columns:1fr 1fr; gap:20px}
@media (max-width:620px){.zwei-sp{grid-template-columns:1fr}}
.check{display:flex; gap:12px; align-items:flex-start; margin-bottom:var(--s-6)}
.check input{width:19px; height:19px; margin-top:3px; flex-shrink:0; accent-color:var(--terra-600)}
.check label{font-size:15px; color:var(--ink-2); text-transform:none; letter-spacing:0;
  font-weight:400; margin:0; line-height:1.5}
.danke{background:var(--card); border:1px solid var(--line-strong); border-left:3px solid var(--terra-600);
  border-radius:var(--r-m); padding:24px; max-width:600px; margin-top:var(--s-6)}

/* --- Kontaktdaten --- */
.kontakt{margin-top:var(--s-7); display:grid; grid-template-columns:repeat(3,auto);
  gap:var(--s-6) var(--s-8); justify-content:start; border-top:1px solid var(--line);
  padding-top:var(--s-6)}
@media (max-width:700px){.kontakt{grid-template-columns:1fr; gap:var(--s-5)}}
.kontakt dt{font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-muted); margin-bottom:7px}
.kontakt dd{margin:0; font-size:17px; color:var(--ink-2)}
.kontakt a{color:var(--ink-2)}
.kontakt a:hover{color:var(--terra-600)}

/* --- Bildband über die volle Breite --- */
.band{display:block; margin:0; border-top:1px solid var(--line)}
.band img{width:100%; height:clamp(170px,24vw,360px); object-fit:cover; display:block}
@media (min-width:1500px){.band img{height:400px}}

/* --- Bildplatzhalter --- */
.ph{background:var(--paper-2); border:1px dashed var(--line-strong); border-radius:var(--r-l);
  display:grid; place-items:center; text-align:center; padding:32px; min-height:220px}
.ph.l{place-items:start; text-align:left}
.ph b{display:block; font-size:12px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-muted); margin-bottom:8px}
.ph span{font-size:15px; color:var(--ink-2); max-width:44ch; display:block}

/* --- Fußbereich --- */
.foot{border-top:1px solid var(--line-strong); background:var(--paper-2)}
.foot-in{padding-top:var(--s-8); padding-bottom:var(--s-7);
  display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:var(--s-7)}
@media (max-width:800px){.foot-in{grid-template-columns:1fr; gap:var(--s-6)}}
.foot img{height:30px; width:auto; margin-bottom:16px}
.foot .fname{font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); margin-bottom:4px}
.foot .frole{font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-muted); margin-bottom:18px}
.foot h4{font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-muted); margin:0 0 14px}
.foot ul{list-style:none; margin:0; padding:0}
.foot li{margin-bottom:10px; font-size:16px}
.foot a{color:var(--ink-2); text-decoration:none}
.foot a:hover{color:var(--terra-600); text-decoration:underline; text-underline-offset:3px}
.foot address{font-style:normal; font-size:16px; color:var(--ink-2); line-height:1.65}
.foot-bottom{border-top:1px solid var(--line-strong); padding:22px 0;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:14px; color:var(--ink-muted)}

/* --- Fließtext-Seiten (Impressum, Datenschutz) --- */
.text-seite{max-width:var(--maxw-text)}
.text-seite h2{font-size:26px; margin:var(--s-7) 0 var(--s-4)}
.text-seite h3{margin:var(--s-6) 0 var(--s-3)}
.text-seite ul{padding-left:22px}
.text-seite li{margin-bottom:8px}

/* --- Einblenden beim Scrollen (nur mit JS, sonst sichtbar) --- */
.js .rv{opacity:0; transform:translateY(22px)}
.js .rv.in{opacity:1; transform:none;
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1 !important; transform:none !important; transition:none !important}
}

/* --- Große Bildschirme --- */
@media (min-width:1500px){
  body{font-size:18px}
  .schritt p, .stufe p, .small, .frage .a p{font-size:16px}
  .liste .it, .weg p{font-size:18px}
}

.seite[hidden]{display:none !important}
.menu{display:none}
.menu.open{display:block}
@media (min-width:901px){.menu, .menu.open{display:none !important}}



body{padding-bottom:52px;background:#F4F0E9}






/* Bildstreifen über den vier Schritten */
.schritt-bild{margin:0 0 var(--s-4)}
.schritt-bild img{display:block;width:100%;height:auto;aspect-ratio:4/1;object-fit:cover;border-radius:2px}
.kompass .schritt{border-top:0;padding-top:0}
.kompass .schritt .n{border-top:1px solid var(--line-strong);padding-top:14px}

/* Zur Person: Bild und Text bündig */
@media (min-width:861px){
  #s-ueber-mich .ueber{align-items:stretch;grid-template-columns:400px 1fr}
  #s-ueber-mich .ueber .pic{max-width:none;height:100%;display:flex}
  #s-ueber-mich .ueber .pic img{width:100%;height:100%;object-fit:cover;object-position:58% 20%}
  #s-ueber-mich .ueber h1{margin-top:-0.14em;line-height:1.05}
  #s-ueber-mich .ueber .body p:last-child{margin-bottom:0}
}
/* BDP-Siegel im Fußbereich */
.foot .bdp{display:flex;align-items:center;gap:14px;margin-top:26px;max-width:300px}
.foot .bdp img{height:64px;width:64px;margin:0;flex:none}
.foot .bdp span{font-size:13px;line-height:1.45;color:var(--ink-muted)}
.foot a.bdp:hover{text-decoration:none}.foot a.bdp:hover span{color:var(--terra-600)}
/* Leitsatz Startseite */
.hero .leitsatz{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:clamp(17px,1.9vw,23px);line-height:1.4;color:var(--ink-2);margin:0 0 clamp(22px,3vw,32px)}
.hero .leitsatz span{display:block}

/* Startseite: Einstieg zweispaltig ab breiten Bildschirmen */
@media (min-width:1000px){
  .hero-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(48px,6vw,104px);grid-template-areas:"leit leit" "titel text" "titel cta";align-items:start}
  .hero-split .leitsatz{grid-area:leit}
  .hero-split h1{grid-area:titel;max-width:none!important;margin:0}
  .hero-split .body{grid-area:text;margin-top:0;max-width:none}
  .hero-split .body p:first-child{margin-top:0!important}
  .hero-split .cta{grid-area:cta;margin-top:var(--s-6)}
}
/* Beratung: Hero mit Bild */
.hero-bild{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,380px);gap:clamp(40px,6vw,96px);align-items:center}
.hero-pic{margin:0}
.hero-pic img{display:block;width:100%;height:auto;border-radius:var(--r-l);border:1px solid var(--line)}
@media (max-width:860px){.hero-bild{grid-template-columns:1fr}.hero-pic{max-width:340px}}