@font-face{font-family:"Alegreya";src:url(fonts/alegreya-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Alegreya";src:url(fonts/alegreya-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Figtree";src:url(fonts/figtree.woff2) format("woff2");font-weight:400 600;font-display:swap}
:root{
  --grund:#F8EFF1;--flaeche:#F0DDE2;--salbei:#DCE5DF;--linie:#E3C9D0;
  --marine:#263F5A;--marine-2:#52667A;--himbeere:#C2415E;--himbeere-d:#A3344D;
  --g:40px;--pad:20px;
  --serif:"Alegreya",Georgia,serif;--sans:"Figtree",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{background:var(--grund);color:var(--marine);font:400 17px/1.65 var(--sans);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--himbeere-d);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--marine);color:var(--grund);padding:8px 16px;z-index:50}
.skip:focus{left:8px}
.band{background:var(--marine);color:var(--grund);font-size:12.5px;line-height:1.3;padding:9px 12px;text-align:center;letter-spacing:.02em}
.page{position:relative;max-width:1400px;margin:0 auto}
.wrap{padding:0 var(--pad) 0 calc(var(--g) + var(--pad))}
#spur{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:3;overflow:visible}
#spur .f{opacity:0;transition:opacity .6s ease}
#spur .f.an{opacity:.9}
main,header,footer{position:relative;z-index:2}
/* Kopf */
header.top{position:sticky;top:0;z-index:20;background:rgba(248,239,241,.96);border-bottom:1px solid var(--linie)}
.top .in{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 var(--pad) 0 calc(var(--g) + var(--pad) - 36px);max-width:1400px;margin:0 auto}
.marke{display:flex;align-items:center;gap:12px;text-decoration:none}
.marke img{width:36px;height:36px;border-radius:50%}
.marke b{font:700 20px/1.1 var(--serif);display:block}
.marke small{font-size:12px;color:var(--marine-2);display:block;letter-spacing:.04em}
nav ul{display:flex;gap:28px;list-style:none;padding:0}
nav a{font-size:15px;text-decoration:none;padding:6px 0;border-bottom:1px solid transparent}
nav a:hover{border-color:var(--himbeere)}
.menu{display:none;background:none;border:1px solid var(--marine);color:var(--marine);font:500 14px var(--sans);padding:9px 14px;cursor:pointer}
/* Typo */
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.04;letter-spacing:-.01em}
h1{font-size:clamp(46px,7.4vw,104px);color:var(--marine)}
h2{font-size:clamp(34px,4.6vw,58px);margin-bottom:24px}
h3{font-size:26px;line-height:1.2;margin-bottom:8px}
p{max-width:62ch}p+p{margin-top:16px}
.btn{display:inline-block;background:var(--marine);color:var(--grund);text-decoration:none;font-weight:500;padding:15px 26px;border:1px solid var(--marine);cursor:pointer;font-size:16px;font-family:var(--sans)}
.btn:hover{background:var(--himbeere-d);border-color:var(--himbeere-d)}
.link{font-weight:500;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--himbeere)}
/* Hero */
.hero{display:grid;grid-template-columns:1fr;gap:32px;padding-top:32px;padding-bottom:40px}
.hero .cover{width:min(62%,300px);margin-bottom:48px}
.hero .cover img{width:100%;border:1px solid var(--linie)}
.hero .tit{color:var(--himbeere);font:700 clamp(24px,3vw,34px)/1.15 var(--serif);margin-top:32px}
.hero .rolle{font:500 clamp(22px,2.6vw,30px)/1.25 var(--serif);margin-top:24px;max-width:22ch}
.hero .satz{margin-top:16px;max-width:46ch}
.hero .aktion{margin-top:32px;display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
.hero .ort{margin-top:40px;font-size:15px;color:var(--marine-2)}
@media(min-width:900px){
  :root{--g:120px;--pad:48px}
  .hero{grid-template-columns:minmax(300px,340px) 1fr;gap:64px;align-items:center;padding-top:24px;padding-bottom:190px}
  .hero .cover{width:100%;margin-bottom:0}
}
/* Abschnitte */
section{padding:64px 0}
@media(min-width:900px){section{padding:104px 0}}
.buch{padding-top:40px}
.buch .raster{display:grid;gap:40px}
@media(min-width:900px){.buch .raster{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:80px}}
.buch .sub{font:500 clamp(20px,2.2vw,26px)/1.3 var(--serif);color:var(--himbeere-d);margin:-8px 0 24px;max-width:28ch}
dl.fakten{display:grid;grid-template-columns:auto 1fr;gap:6px 24px;margin:32px 0;font-size:15.5px;border-top:1px solid var(--linie);padding-top:16px;max-width:460px}
dl.fakten dt{color:var(--marine-2)}dl.fakten dd{margin:0}
ol.kap{list-style:none;padding:0;counter-reset:k;border-top:1px solid var(--marine)}
ol.kap li{display:grid;grid-template-columns:44px 1fr;gap:8px;padding:16px 0;border-bottom:1px solid var(--linie)}
ol.kap .n{font:700 34px/1 var(--serif);color:var(--himbeere)}
ol.kap b{font:700 21px/1.25 var(--serif);display:block}
ol.kap span.u{font-size:15px;color:var(--marine-2);display:block;margin-top:2px}
.kapkopf{font:500 15px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--marine-2);margin-bottom:16px}
blockquote{margin-top:40px;padding-left:20px;border-left:2px solid var(--himbeere);max-width:58ch}
blockquote p{font:500 22px/1.4 var(--serif)}
blockquote cite{display:block;font-style:normal;font-size:14px;color:var(--marine-2);margin-top:12px;line-height:1.5}
.buch2{display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;margin-top:80px;padding-top:40px;border-top:1px solid var(--linie);align-items:start}
.buch2 img{border:1px solid var(--linie)}
.buch2 h3{font-size:clamp(20px,5.2vw,24px);overflow-wrap:anywhere;hyphens:auto}.buch2 p{font-size:16px}
@media(min-width:700px){.buch2{grid-template-columns:150px minmax(0,1fr);gap:24px;max-width:720px}}
.paar{background:var(--flaeche)}
.zwei{display:grid;gap:40px;align-items:center}
@media(min-width:900px){
  .zwei{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:80px}
  .zwei.umgekehrt{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
  .zwei.umgekehrt .bild{order:2}
}
.bild img{width:100%;height:100%;object-fit:cover}
.bild.hoch img{aspect-ratio:4/5}
.bild.quer img{aspect-ratio:3/2}
.merk{margin:24px 0;padding:0;list-style:none;border-top:1px solid var(--linie);max-width:46ch}
.merk li{padding:10px 0;border-bottom:1px solid var(--linie);font-size:16.5px}
.autorin{background:var(--salbei)}
.autorin .raster{display:grid;gap:40px}
@media(min-width:900px){.autorin .raster{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:80px}}
.autorin figure.p{margin-bottom:24px}
.autorin figcaption,.bild figcaption{font-size:13.5px;color:var(--marine-2);margin-top:8px}
.praxis .breit img{width:100%;aspect-ratio:16/9;object-fit:cover}
@media(max-width:700px){.praxis .breit img{aspect-ratio:4/3}}
.praxis .cols{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;margin-top:40px}
@media(min-width:900px){.praxis .cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:80px}}
.praxis h3{font-size:clamp(23px,6vw,28px);overflow-wrap:anywhere}
.kontakt{border-top:1px solid var(--linie)}
.kontakt .raster{display:grid;gap:40px}
@media(min-width:900px){.kontakt .raster{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:80px}}
address{font-style:normal;margin:16px 0 24px}
form label{display:block;font-size:14px;color:var(--marine-2);margin-bottom:4px}
form input,form textarea{width:100%;font:400 17px var(--sans);color:var(--marine);background:transparent;border:0;border-bottom:1px solid var(--marine);padding:10px 0;margin-bottom:24px;border-radius:0}
form input:focus,form textarea:focus{outline:none;border-color:var(--himbeere);box-shadow:0 1px 0 var(--himbeere)}
form textarea{min-height:120px;resize:vertical}
.danke{display:none;margin-top:16px;font-weight:500;color:var(--himbeere-d)}
footer.fuss{border-top:1px solid var(--marine);padding:40px 0 64px;font-size:14.5px;color:var(--marine-2)}
footer .cols{display:flex;flex-wrap:wrap;gap:24px 64px}
footer a{margin-right:20px}
/* Handy */
@media(max-width:899px){
  .band{font-size:11px}
  .menu{display:block}
  nav{position:absolute;left:0;right:0;top:64px;background:var(--grund);border-bottom:1px solid var(--linie);display:none;padding:8px var(--pad) 24px calc(var(--g) + var(--pad))}
  nav.open{display:block}
  nav ul{flex-direction:column;gap:0}
  nav a{display:block;padding:14px 0;border-bottom:1px solid var(--linie);font-size:18px}
  #spur .fu{display:block}
  .wrap{padding-left:calc(var(--g) + 12px);padding-right:18px}
  body{font-size:16.5px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}#spur .f{transition:none;opacity:.9}}
/* Erweiterung: Buchseite, Stimmen, Unterseiten */
.hero h1{max-width:12ch}
.hero .unter{font:500 clamp(22px,2.6vw,30px)/1.25 var(--serif);color:var(--himbeere-d);margin-top:24px;max-width:26ch}
.hero .satz strong{font-weight:600}
.lead{font:500 clamp(24px,3vw,36px)/1.3 var(--serif);max-width:30ch}
.mark{border-top:1px solid var(--linie)}
.pagehero{padding:48px 0 24px}
.pagehero h1{font-size:clamp(40px,6.2vw,84px);max-width:16ch}
.pagehero p{margin-top:24px;font-size:19px}
.subnav{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:32px;font-size:15px}
.subnav a{padding:4px 0;border-bottom:1px solid var(--linie);text-decoration:none}
.subnav a:hover{border-color:var(--himbeere)}
.buchkopf{display:grid;gap:32px;padding:40px 0 24px;align-items:start}
.buchkopf .cover{width:min(62%,300px);margin-bottom:48px}
.buchkopf .cover img{width:100%;border:1px solid var(--linie)}
@media(min-width:900px){.buchkopf{grid-template-columns:minmax(300px,340px) 1fr;gap:64px;padding-bottom:190px}.buchkopf .cover{width:100%;margin-bottom:0}}
.kaufbox{border-top:1px solid var(--marine);margin-top:32px;padding-top:24px;max-width:520px}
.kaufbox .btn{margin:8px 0 16px}
.klein{font-size:15px;color:var(--marine-2)}
.stimmen{display:grid;gap:40px}
@media(min-width:900px){.stimmen.zw{grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 80px}}
.stimmen blockquote{margin:0;max-width:none}
.stimmen blockquote p{font-size:21px}
.verz{columns:1;column-gap:80px}
@media(min-width:900px){.verz{columns:2}}
.verz .kp{break-inside:avoid;padding:20px 0;border-bottom:1px solid var(--linie)}
.verz h3{font-size:22px;margin:0 0 4px;display:flex;gap:12px}
.verz h3 i{font-style:normal;color:var(--himbeere);min-width:20px}
.verz ul{list-style:none;padding:0;font-size:15.5px;line-height:1.5}
.verz li{padding:3px 0 3px 32px;color:var(--marine)}
.verz li span{color:var(--marine-2)}
.lese{background:var(--flaeche)}
.platz{border:1px dashed var(--marine-2);padding:24px;max-width:560px;margin-top:24px;font-size:16px}
.platz b{display:block;margin-bottom:6px}
.btn.aus{background:transparent;color:var(--marine-2);border:1px dashed var(--marine-2);cursor:default}
.btn.aus:hover{background:transparent;border-color:var(--marine-2)}
.dreispalt{display:grid;gap:32px}
@media(min-width:900px){.dreispalt{grid-template-columns:repeat(3,minmax(0,1fr));gap:56px}}
.dreispalt h3{font-size:24px}
.pod{max-width:62ch;margin-top:64px;padding-top:32px;border-top:1px solid var(--marine)}