:root{
  --paper:#F8E8E8; --navy:#3d5266; --ink:#12283d; --ink2:#33475b;
  --muted:#5c6b78; --line:#dfd7ca; --teal:#0e7c76; --sand:#e9e2d6;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper)}
body{font-family:'IBM Plex Sans',system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;min-height:100vh}
img{max-width:100%;height:auto}
a{color:var(--teal);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ink)}
::selection{background:#cfe6e3}
h1,h2,h3{font-family:'Source Serif 4',Georgia,serif;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,32px)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:40;background:var(--paper);color:var(--ink);padding:10px 14px}

/* ---------- Kopf ---------- */
.site-head{position:sticky;top:0;z-index:20;background:var(--navy);border-bottom:1px solid #33475b;padding:10px clamp(20px,5vw,32px);display:flex;align-items:center;gap:clamp(16px,3vw,40px);flex-wrap:wrap}
.brand{font-family:'Source Serif 4',Georgia,serif;font-size:21px;font-weight:600;letter-spacing:-.01em;color:var(--paper);text-decoration:none;white-space:nowrap}
.brand:hover{color:var(--paper)}
.nav{display:flex;flex-wrap:wrap;gap:8px clamp(10px,2.4vw,26px);margin-left:auto;font-size:clamp(13px,3.2vw,14.5px);letter-spacing:.01em}
.nav a{color:var(--paper);text-decoration:none;padding-bottom:2px;border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover{color:var(--paper);border-bottom-color:var(--paper)}
.nav a[aria-current=page]{border-bottom-color:var(--paper)}
.menu-wrap{display:none;margin-left:auto;position:relative}
.menu-btn{display:flex;align-items:center;gap:9px;list-style:none;border:1px solid var(--paper);color:var(--paper);font-size:14.5px;letter-spacing:.01em;padding:9px 14px;border-radius:2px;cursor:pointer;min-height:44px}
.menu-btn::-webkit-details-marker{display:none}
.menu{display:flex;flex-direction:column;position:absolute;right:0;top:calc(100% + 11px);min-width:210px;background:var(--navy);border:1px solid #5b7085;box-shadow:0 18px 44px rgba(18,40,61,.35);z-index:30}
.menu a{color:var(--paper);text-decoration:none;font-size:15.5px;padding:14px 18px;border-bottom:1px solid #4c6076;min-height:44px;display:flex;align-items:center}
.menu a:last-child{border-bottom:none}
.menu a:hover{background:#4c6076;color:var(--paper)}

/* ---------- Text ---------- */
.kicker{margin:0 0 16px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);font-weight:600}
.kicker.grey{color:var(--muted)}
.lead{margin:0;font-size:17.5px;line-height:1.65;color:var(--ink2);text-wrap:pretty}
.p{margin:0 0 20px;font-size:17px;line-height:1.7;color:var(--ink2);text-wrap:pretty}
.meta{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted)}
h1.big{margin:0;font-size:clamp(38px,5.2vw,66px);line-height:1.03;letter-spacing:-.025em}
h1.mid{margin:0 0 26px;font-size:clamp(34px,4.4vw,52px);line-height:1.06;letter-spacing:-.025em}
h1.doc{margin:0 0 28px;font-size:clamp(30px,3.8vw,44px);line-height:1.08}
h2.sec{margin:0 0 34px;font-size:30px;letter-spacing:-.015em}
h2.book{margin:0 0 6px;font-size:34px;letter-spacing:-.02em;line-height:1.1}
h3.card{margin:0 0 8px;font-size:20px;letter-spacing:-.01em}
.sub{margin:0 0 28px;font-size:19px;line-height:1.35;color:var(--muted)}
.sect{border-top:1px solid var(--line)}
.sect>.wrap{padding-top:56px;padding-bottom:64px}
.btn{display:inline-block;padding:12px 22px;background:var(--ink);color:#f6f3ed;text-decoration:none;font-size:14.5px;font-weight:500;border-radius:2px}
.btn:hover{background:var(--teal);color:#f6f3ed}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn.ghost:hover{background:var(--sand);color:var(--ink)}
.hv-teal:hover{background:var(--teal)!important;color:#f6f3ed}
.hv-sand:hover{background:var(--sand)!important;color:var(--ink)}
.hv-tealtext:hover{color:var(--teal)!important}

/* ---------- Start ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.18fr);align-items:start;overflow-x:clip;position:relative;z-index:2;padding-top:28px}
.hero-copy{grid-column:1/-1;grid-row:1;position:relative;z-index:2;margin-top:75px}
.hero-foto{grid-column:2;grid-row:1;width:92%;height:auto;justify-self:start;margin-left:-6%;margin-top:42px;z-index:0;display:block}
.hero-name{margin:0 0 34px;font-family:'Source Serif 4',Georgia,serif;font-size:clamp(48px,7vw,96px);line-height:.95;letter-spacing:-.035em;font-weight:600}
.hero-claim{margin:0;font-family:'Source Serif 4',Georgia,serif;font-size:clamp(24px,2.9vw,36px);line-height:1.18;letter-spacing:-.02em;font-weight:600;color:var(--ink);white-space:nowrap}
.hero-cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:60px}
.hero-cta .btn{padding:14px 26px;font-size:15.5px}
.hero-lead{max-width:min(26em,40%)}
.intro{display:flex;flex-direction:column;gap:20px;max-width:60rem}
.teaser{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px;align-items:start;max-width:760px}
.teaser-img{aspect-ratio:1/1;width:100%;max-width:190px;overflow:hidden}
.teaser-img img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block}

/* ---------- Schule ---------- */
.schule-text{position:relative;overflow-x:clip;margin:30px 0 56px}
.schule-foto{position:absolute;left:311px;top:-13px;width:965px;height:732px!important;object-fit:cover;z-index:0}
.schule-copy{position:relative;z-index:1;padding-top:44px;hyphens:auto}
.schule-spacer{float:right;width:calc(100% - 311px);height:732px;margin-top:-57px;shape-outside:border-box polygon(100% 0px,965px 0px,530px 28px,498px 56px,488px 84px,488px 113px,491px 141px,498px 169px,519px 197px,532px 225px,487px 253px,428px 282px,412px 310px,400px 338px,390px 366px,382px 394px,372px 422px,383px 450px,369px 479px,360px 507px,345px 535px,335px 563px,440px 591px,0px 619px,0px 732px,100% 732px);shape-margin:40px;pointer-events:none}
.schule-copy p{margin:0 0 20px;font-size:17.5px;line-height:1.65;color:var(--ink2);text-wrap:pretty}
.schule-last{clear:right}
@media(min-width:1001px){.schule-last{margin-top:300px}}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:34px 56px;max-width:920px}
.cards p{margin:0 0 8px;font-size:16px;line-height:1.6;color:var(--ink2);text-wrap:pretty}

/* ---------- Bücher ---------- */
.booklist{display:grid;gap:56px}
.bookrow{display:flex;flex-wrap:wrap;gap:44px;align-items:start;padding-top:44px;border-top:1px solid var(--line)}
.bookrow:first-child{padding-top:0;border-top:none}
.bookside{flex:0 1 200px;min-width:150px}
.bookbody{flex:1 1 340px;min-width:0}
.bookbody p{margin:0 0 20px;font-size:17px;line-height:1.7;color:var(--ink2);text-wrap:pretty;max-width:42em}
.cover{aspect-ratio:2/3;width:100%;max-width:190px;background:var(--line);box-shadow:0 10px 26px rgba(18,40,61,.18);overflow:hidden}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.cover.contain img{object-fit:contain}
dl.facts{margin:22px 0 0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 14px;font-size:13.5px;line-height:1.45}
dl.facts dt{margin:0;color:var(--muted)}
dl.facts dd{margin:0;color:var(--ink)}
.bullets{margin:0 0 26px;padding:0;list-style:none;display:grid;gap:10px;max-width:40em}
.bullets li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;font-size:16.5px;line-height:1.55;color:var(--ink2)}
.bullets li span:first-child{color:var(--teal);font-weight:600}
.bullets-label{margin:30px 0 14px;font-size:15px;font-weight:600}

/* ---------- Texte ---------- */
.postlist{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.postlist li{padding:34px 0;border-bottom:1px solid var(--line)}
.post-tags{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:baseline;margin-bottom:12px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.post-tags .kind{color:var(--teal)}
.post-tags .year{color:var(--muted)}
.postlist h2{margin:0 0 8px;font-size:clamp(26px,3vw,32px);line-height:1.12}
.postlist h2 a{color:var(--ink);text-decoration:none}
.postlist h2 a:hover{color:var(--teal)}
.article{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:48px;align-items:start;padding-top:40px;padding-bottom:72px}
.article-body{max-width:40em}
.article-body h2{margin:40px 0 14px;font-size:26px;letter-spacing:-.015em;line-height:1.15}
.article-body h2:first-of-type{margin-top:0}
.article-body p{margin:0 0 20px;font-size:17.5px;line-height:1.72;color:var(--ink2);text-wrap:pretty}
.article-body blockquote{margin:0 0 20px;padding:18px 22px;background:var(--paper);border-left:3px solid #cfc6b6;font-family:'Source Serif 4',Georgia,serif;font-size:17.5px;line-height:1.6;color:var(--ink)}
.standfirst{margin:0 0 30px!important;padding:20px 24px;background:var(--paper);border-left:3px solid var(--teal);font-family:'Source Serif 4',Georgia,serif;font-size:19px!important;line-height:1.55!important;color:var(--ink)!important}
.article-aside{border-left:1px solid var(--line);padding-left:clamp(20px,5vw,32px);position:sticky;top:92px}
.article-aside p{margin:0 0 22px;font-size:15px;line-height:1.5;color:var(--ink2)}
.article-aside .label{margin:0 0 6px;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}

/* ---------- Material ---------- */
.matgroup{margin-bottom:64px}
.matgroup-head{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline;padding-bottom:14px;margin-bottom:28px;border-bottom:2px solid var(--ink)}
.matgroup-head h2{margin:0;font-size:clamp(24px,2.8vw,32px);line-height:1.15;letter-spacing:-.02em}
.matgroup-head p{margin:0;font-size:15.5px;line-height:1.5;color:var(--muted);max-width:34em}
.matgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.matgrid article{display:flex;flex-direction:column;gap:14px;padding:30px 30px 26px;background:var(--paper)}
.matgrid h3{margin:0;font-size:24px;line-height:1.2;letter-spacing:-.015em}
.matgrid p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink2);text-wrap:pretty}
.matgrid .btn{align-self:start;margin-top:auto;padding:11px 20px}

/* ---------- Über / Kontakt / Dokumente ---------- */
.ueber-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.55fr);gap:48px;align-items:start}
.ueber-grid p{margin:0;font-size:16.5px;line-height:1.65;color:var(--ink2);max-width:36em;text-wrap:pretty}
.ueber-text{display:flex;flex-direction:column;gap:18px;margin-bottom:44px}
.portrait{aspect-ratio:4/5;width:100%;max-width:250px;overflow:hidden;box-shadow:0 14px 36px rgba(18,40,61,.2)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block}
.mailbox{padding:22px 24px;background:var(--paper);border:1px solid var(--line)}
.mailbox p{margin:0;font-size:15.5px}
.doc{max-width:780px;margin:0 auto;padding:84px clamp(20px,5vw,32px) 60px}
.doc-body{font-size:16px;line-height:1.7;color:var(--ink2);text-wrap:pretty}
.doc-body h2{margin:34px 0 10px;font-size:20px;letter-spacing:-.01em}
.doc-body h2:first-child{margin-top:0}
.doc-body p,.doc-body address{margin:0 0 16px}
.doc-body address{font-style:normal;line-height:1.7}
.doc-body ul{margin:0 0 16px;padding-left:1.2em;display:grid;gap:6px}
.doc-body code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14.5px}

/* ---------- Formular ---------- */
.form{max-width:760px;display:flex;flex-direction:column;gap:30px}
.form-honey{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-block{margin:0;padding:0;border:0}
.form-legend{padding:0 0 14px;font-size:15px;font-weight:600;color:var(--ink)}
.form-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.choice{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--paper);font-size:15.5px;line-height:1.4;color:var(--ink2);cursor:pointer;min-height:52px}
.choice:hover{background:var(--sand);color:var(--ink)}
.choice input{accent-color:var(--teal);width:18px;height:18px;flex:0 0 auto;margin:0}
.choice:has(input:checked){background:var(--sand);color:var(--ink);font-weight:500}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px 28px}
.field{margin:0;display:flex;flex-direction:column;gap:8px}
.field label{font-size:14.5px;font-weight:600;color:var(--ink)}
.field .req{color:var(--teal)}
.field input,.field textarea{font-family:inherit;font-size:16px;line-height:1.5;color:var(--ink);background:#fdf6f6;border:1px solid #cfc6b6;border-radius:2px;padding:13px 14px;min-height:50px;width:100%}
.field textarea{min-height:150px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#8b8579}
.field input:focus,.field textarea:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal)}
.consent{margin:0;display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start;max-width:52em}
.consent input{width:18px;height:18px;margin:3px 0 0;accent-color:var(--teal)}
.consent label{font-size:14.5px;line-height:1.55;color:var(--ink2)}
.form-actions{display:flex;flex-wrap:wrap;gap:18px 24px;align-items:center}
.form-actions .btn{border:0;cursor:pointer;font-family:inherit;padding:14px 26px;font-size:15.5px}
.form-note{font-size:14.5px;color:var(--muted)}

/* ---------- Fuß ---------- */
.site-foot{margin-top:72px;border-top:1px solid var(--line)}
.site-foot>.wrap{padding-top:44px;padding-bottom:44px;display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;align-items:baseline}
.site-foot nav{display:flex;flex-wrap:wrap;gap:24px;font-size:14px}
.foot-name{margin:0 0 6px;font-family:'Source Serif 4',Georgia,serif;font-size:18px;font-weight:600}
.foot-claim{margin:0;font-size:14px;color:var(--muted)}

/* ---------- Mobil ---------- */
@media(max-width:1000px){
  .ueber-grid{grid-template-columns:1fr;gap:26px}
  .ueber-aside{order:-1;display:flex;gap:18px;align-items:flex-start}
  .ueber-aside .portrait{max-width:150px;flex:0 0 150px}
  .ueber-aside .mailbox{flex:1 1 auto}
  .schule-text{display:flex;flex-direction:column}
  .schule-foto{position:static;order:1;width:min(100%,460px);height:auto!important;left:auto;top:auto;align-self:flex-end;margin:24px 0 4px}
  .schule-spacer{display:none}
  .article-aside{position:static;border-left:none;border-top:1px solid var(--line);padding-left:0;padding-top:28px}
}
@media(max-width:860px){
  .nav{display:none}
  .menu-wrap{display:block}
  .hero{grid-template-columns:1fr}
  .hero-copy{display:flex;flex-direction:column;grid-column:1;margin-top:0}
  .hero-claim{white-space:normal}
  .hero-lead{max-width:none;order:2}
  .hero-cta{order:3;margin-top:34px}
  .schule-foto{display:none}
  .hero-foto{grid-column:1;grid-row:auto;order:1;width:min(100%,300px);justify-self:end;margin-left:0;margin-top:28px}
  .site-foot>.wrap{gap:24px}
}