/* markuscostabiei.com · V7.2 */

@font-face{font-family:"Familjen Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/familjen-grotesk-400.woff2) format("woff2")}
@font-face{font-family:"Familjen Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/familjen-grotesk-500.woff2) format("woff2")}
@font-face{font-family:"Familjen Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/familjen-grotesk-600.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/newsreader-400-italic.woff2) format("woff2")}
/* Layout: einspaltig, großzügig; Hero als Text links und Porträt rechts, nummerierte Abschnitte mit Randspalte */
:root{
  --bg:#F6F6F3; --fg:#111111; --muted:#5E5E5A; --line:#D9D9D4; --card:#FFFFFF; --inv-bg:#111111; --inv-fg:#F6F6F3;
  --f-head:"Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-it:"Newsreader", Georgia, "Times New Roman", serif;
  --max:1180px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#0F0F0F;--fg:#EDEDE8;--muted:#9A9A94;--line:#2A2A28;--card:#171716;--inv-bg:#EDEDE8;--inv-fg:#0F0F0F;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0F0F0F;--fg:#EDEDE8;--muted:#9A9A94;--line:#2A2A28;--card:#171716;--inv-bg:#EDEDE8;--inv-fg:#0F0F0F;color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--f-head);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(24px, env(safe-area-inset-left, 0px));padding-right:max(24px, env(safe-area-inset-right, 0px))}
em,.it{font-family:var(--f-it);font-style:italic;font-weight:400;letter-spacing:-.01em}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
h1,h2,h3{font-weight:600;letter-spacing:-.025em;line-height:1.02;margin:0;text-wrap:balance}

/* Kopfzeile */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:18px}
.brand{display:flex;align-items:center;gap:14px;line-height:1.15;text-decoration:none}.brand .bt{display:flex;flex-direction:column}.brand .mark{width:42px;height:auto;display:block}
.brand b{font-size:17px;font-weight:600;letter-spacing:-.01em}
.brand span{font-size:12px;color:var(--muted)}
nav{display:flex;gap:26px;font-size:14px}
nav a{text-decoration:none;color:var(--muted)}nav a:hover,nav a:focus-visible{color:var(--fg)}
.cta{font-size:14px;font-weight:600;text-decoration:none;border:1px solid var(--fg);padding:8px 16px;border-radius:999px}
.cta:hover{background:var(--fg);color:var(--bg)}
a:focus-visible{outline:2px solid var(--fg);outline-offset:3px}

/* Hero */
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:end;padding-block:72px 64px}
.hero h1{font-size:clamp(52px,8.4vw,112px);margin-top:22px}
.hero h1 em{display:block;font-weight:400}
.hero .lead{font-size:20px;line-height:1.5;max-width:31ch;margin:30px 0 0;color:var(--fg)}
.hero .meta{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:34px;font-size:14px;color:var(--muted)}
.hero .meta a{font-weight:600;color:var(--fg);text-decoration:none;border-bottom:1px solid var(--fg)}
.portrait{position:relative;margin:0}
.portrait img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 12%}
.portrait figcaption{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);padding-top:10px;border-top:1px solid var(--fg);margin-top:14px}

/* Zitat-Band */
.quote{background:var(--inv-bg);color:var(--inv-fg)}
.quote .wrap{padding-block:64px;display:grid;grid-template-columns:160px 1fr;gap:40px}
.quote blockquote{margin:0;font-family:var(--f-it);font-style:italic;font-size:clamp(26px,3.4vw,40px);line-height:1.25;max-width:30ch}
.quote cite{display:block;margin-top:22px;font-family:var(--f-head);font-style:normal;font-size:14px;opacity:.7}

/* Abschnitte */
section.s .wrap{display:grid;grid-template-columns:160px 1fr;gap:40px;padding-block:88px;border-top:1px solid var(--line)}
.num{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.08em;padding-top:10px}
.num b{display:block;font-size:13px;color:var(--fg);letter-spacing:.16em;text-transform:uppercase;margin-top:6px;font-weight:600}
.s h2{font-size:clamp(36px,5vw,60px)}
.s h2 em{font-weight:400}
.s p{max-width:62ch;color:var(--fg)}
.s .muted{color:var(--muted)}
.story{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:40px;align-items:start}
.story figure{margin:0}.story img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover}
.story figcaption{font-size:13px;color:var(--muted);margin-top:10px}
.story p{margin:0 0 16px}

/* Schwerpunkte */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:44px;border-top:1px solid var(--fg)}
.grid article{padding:30px 32px 34px 0;border-bottom:1px solid var(--line)}
.grid article:nth-child(odd){border-right:1px solid var(--line)}
.grid article:nth-child(even){padding-left:32px;padding-right:0}
.grid h3{font-size:26px;margin-top:8px}
.grid p{color:var(--muted);margin:12px 0 0;font-size:16px}
.tag{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* Stationen */
.list{margin-top:40px;border-top:1px solid var(--fg)}
.row{display:grid;grid-template-columns:150px 1fr auto;gap:28px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line)}
.row .when{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.row h3{font-size:22px;letter-spacing:-.015em}
.row p{margin:4px 0 0;font-size:15px;color:var(--muted)}
.row .role{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.now{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;background:var(--fg);color:var(--bg);padding:3px 8px;border-radius:2px}

/* Vorträge */
.talks{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.talks span{border:1px solid var(--line);padding:9px 16px;border-radius:999px;font-size:15px}
.wide{margin-top:48px}.wide img{width:100%;display:block;aspect-ratio:21/8;object-fit:cover;object-position:50% 40%}
.wide figcaption{font-size:13px;color:var(--muted);margin-top:10px}

/* Kontakt */
.contact{background:var(--inv-bg);color:var(--inv-fg)}
.contact .wrap{padding-block:96px 72px;display:grid;grid-template-columns:160px 1fr;gap:40px}
.contact .num{color:inherit;opacity:.6}.contact .num b{color:inherit}
.contact h2{font-size:clamp(44px,7vw,88px)}
.contact h2 em{font-weight:400}
.links{display:flex;flex-wrap:wrap;gap:16px 44px;margin-top:44px;font-size:20px}
.links a,.links span{text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px;user-select:all}
.links small{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin-bottom:6px;border:0}
footer.site{background:var(--inv-bg);color:var(--inv-fg)}
footer.site .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-block:24px 32px;border-top:1px solid color-mix(in srgb,var(--inv-fg) 20%,transparent);font-size:13px;opacity:.75}
footer.site a{text-decoration:none}.fb{display:flex;align-items:center;gap:12px}.fmark{width:30px;height:auto}
.bigmark{position:absolute;right:max(24px,env(safe-area-inset-right,0px));bottom:40px;width:min(34vw,380px);height:auto;opacity:.12}
.contact{position:relative;overflow:hidden}
.stamp-unused{position:fixed;left:max(16px,env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));font-size:11px;background:var(--fg);color:var(--bg);padding:5px 10px;border-radius:999px;z-index:6;opacity:.85}

@media (max-width:900px){
  nav{display:none}
  .hero .wrap{grid-template-columns:1fr;gap:36px;padding-block:48px}
  .portrait{max-width:420px}
  .quote .wrap,section.s .wrap,.contact .wrap{grid-template-columns:1fr;gap:18px}
  section.s .wrap{padding-block:64px}
  .story{grid-template-columns:1fr;gap:28px}
  .grid{grid-template-columns:1fr}
  .grid article,.grid article:nth-child(even){padding:26px 0;border-right:0}
  .row{grid-template-columns:1fr;gap:6px}
}
@media (prefers-reduced-motion:no-preference){
  .hero h1,.hero .lead{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
  .hero .lead{animation-delay:.12s}
  @keyframes rise{from{transform:translateY(14px)}to{transform:none}}
}

body{margin:0}img{max-width:100%;height:auto}
.skip{position:absolute;left:-9999px;top:8px;z-index:20;background:var(--fg);color:var(--bg);padding:8px 14px;border-radius:999px;text-decoration:none}.skip:focus{left:max(16px,env(safe-area-inset-left,0px))}
.hr{display:flex;align-items:center;gap:18px}
.lang{display:flex;gap:2px;font-size:12px;font-weight:600;letter-spacing:.06em}
.lang a{text-decoration:none;color:var(--muted);padding:6px 8px;border-radius:999px}
.lang a[aria-current="true"]{background:var(--fg);color:var(--bg)}
.lang a:hover{color:var(--fg)}.lang a[aria-current="true"]:hover{color:var(--bg)}
.hero .eyebrow,.hero .meta{margin:0}.hero .meta{margin-top:34px}
.num{margin:0}.quote blockquote p{margin:0}
.list,.talks{list-style:none;padding:0}
.talks li{border:1px solid var(--line);padding:9px 16px;border-radius:999px;font-size:15px}
.intro{margin-top:24px}
.links a{text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px}
.legal .wrap{max-width:780px;padding-block:72px 96px}.legal h1{font-size:clamp(40px,6vw,64px);margin:16px 0 28px}.legal h2{font-size:22px;margin:32px 0 8px}.legal p{max-width:65ch}.legal .eyebrow a{text-decoration:none}
.muted{color:var(--muted)}
.e404 .cta{display:inline-block;margin-top:12px}
/* Responsive: Raster-Spalten dürfen schrumpfen, lange Wörter werden getrennt */
.hero .wrap>*,section.s .wrap>*,.quote .wrap>*,.contact .wrap>*,.story>*,.row>*,.grid>*{min-width:0}
h1,h2,h3,.lead,.links a{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
footer.site a{display:inline-block;padding-block:6px}
figure.wide{margin-inline:0;margin-bottom:0}.wide img{object-position:50% 18%}.story img{object-position:50% 30%}
@media (max-width:900px){
  .lang a{padding:5px 7px;min-width:30px;text-align:center}.hr{gap:10px}.cta{padding:7px 12px}.brand .bt span{display:none}
  /* Kopfzeile Handy: feste Höhe, deckend, Menü über Knopf */
  header.site{background:var(--bg);backdrop-filter:none}
  header.site .wrap{flex-wrap:wrap;row-gap:0;padding-block:12px;position:relative}
  header.site .mbtn{display:inline-flex;flex-direction:column;justify-content:center;gap:6px;width:40px;height:40px;padding:0 10px;margin-right:-8px;background:none;border:0;cursor:pointer;color:var(--fg)}
  header.site .mbtn span{display:block;height:2px;background:currentColor;border-radius:2px;transition:transform .2s}
  header.site.open .mbtn span:first-child{transform:translateY(4px) rotate(45deg)}header.site.open .mbtn span:last-child{transform:translateY(-4px) rotate(-45deg)}
  nav{display:flex;flex-wrap:wrap;order:3;width:100%;gap:4px 20px;padding:10px 0 0}
  nav a{white-space:nowrap;padding-block:6px}
  .js nav{display:none;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);padding:4px max(24px,env(safe-area-inset-left,0px)) 12px;max-height:calc(100vh - var(--hh));overflow-y:auto;box-shadow:0 18px 30px rgba(0,0,0,.08)}
  .js header.site.open nav{display:flex}
  .js header.site.open nav a{font-size:22px;letter-spacing:-.01em;color:var(--fg);padding:14px 0;border-top:1px solid var(--line)}
  .hero h1{font-size:clamp(34px,10.5vw,80px)}
  .s h2{font-size:clamp(30px,8.6vw,52px)}
  .contact h2{font-size:clamp(36px,11vw,72px)}
  .row .role{white-space:normal}
  .grid article:nth-child(odd){border-right:0}
  .links{font-size:18px;gap:20px 32px}
  .wide img{aspect-ratio:16/9}
  .bigmark{width:110px;bottom:auto;top:56px;opacity:.1}
}
.mbtn{display:none}
/* Kopfzeile fest oben wie bei solerte.com (position fixed statt sticky, ruhiger auf iOS) */
:root{--hh:77px}
body{padding-top:calc(var(--hh) + env(safe-area-inset-top,0px))}
header.site{position:fixed;left:0;right:0;top:0;padding-top:env(safe-area-inset-top,0px)}
[id]{scroll-margin-top:calc(var(--hh) + 20px)}
@media (max-width:900px){:root{--hh:65px}}
/* Logo: Name verlinkt, Domain nur Text */
.brand .bl{display:block;line-height:0;text-decoration:none}.brand .bt a{text-decoration:none;display:inline-block;padding-block:3px}
.cfl{margin:40px 0 0}.cta.inv{border-color:currentColor;display:inline-block;padding:12px 22px;font-size:15px}.cta.inv:hover{background:var(--inv-fg);color:var(--inv-bg)}
/* Kontaktformular */
.cfpage .wrap{padding-block:64px 96px}.cfpage .eyebrow a{text-decoration:none}
.cfpage h1{font-size:clamp(36px,6.4vw,84px);margin:18px 0 0}.cfpage h1 em{font-weight:400}
.ci{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start;margin-top:48px;padding-top:40px;border-top:1px solid var(--fg)}
.ci-photo{margin:0}.ci-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;max-height:560px}
.ci-name{font-size:clamp(24px,2.4vw,32px);line-height:1.15;margin:0 0 6px}
.ci-list{margin:24px 0 0;padding:0}
.ci-row{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:16px 0;border-top:1px solid var(--line)}
.ci-row:last-child{border-bottom:1px solid var(--line)}
.ci-row dt{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-top:4px}
.ci-row dd{margin:0;font-size:17px;line-height:1.6;min-width:0;overflow-wrap:anywhere}
.ci-row dd a{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--line);padding-block:3px;transition:border-color .2s}
.ci-row dd a:focus-visible,.ci-row dd a:hover{border-bottom-color:var(--fg)}
.ci-row dd a span{color:var(--muted);font-size:.85em}
.ci-cta{margin:32px 0 0}
@media (max-width:900px){.ci{grid-template-columns:minmax(0,1fr);gap:32px;margin-top:32px;padding-top:28px}.ci-photo{max-width:420px}}
@media (max-width:520px){.ci-row{grid-template-columns:minmax(0,1fr);gap:4px}.ci-row dt{padding-top:0}}
/* Publikationen */
.books{display:grid;gap:0;margin-top:40px;border-top:1px solid var(--fg)}
.book{display:grid;grid-template-columns:200px minmax(0,1fr);gap:40px;padding:40px 0;border-bottom:1px solid var(--line)}
.bcover{margin:0}.bcover img{display:block;width:100%;height:auto;box-shadow:0 1px 0 var(--line),0 12px 28px rgba(0,0,0,.12)}
.tcover{aspect-ratio:213/300;background:var(--inv-bg);color:var(--inv-fg);display:flex;flex-direction:column;justify-content:space-between;padding:18px 16px;box-shadow:0 12px 28px rgba(0,0,0,.12)}
.tcover span{font-size:12px;font-weight:600;letter-spacing:.14em;opacity:.7}.tcover b{font-size:15px;line-height:1.2;font-weight:600;letter-spacing:-.01em;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}.tcover i{font-family:var(--f-it);font-size:15px}
.btxt .tag{margin:0}.btxt h3{font-size:clamp(22px,2.4vw,28px);line-height:1.15;margin-top:10px}
.bsub{font-family:var(--f-it);font-style:italic;font-size:19px;line-height:1.35;margin:10px 0 0;color:var(--fg)}
.bdesc{margin:16px 0 0;color:var(--muted)}
.bq{margin:18px 0 0;padding-left:16px;border-left:2px solid var(--fg)}.bq p{margin:0;font-family:var(--f-it);font-style:italic;font-size:17px}.bq cite{display:block;font-style:normal;font-size:13px;color:var(--muted);margin-top:6px}
.bmeta{font-size:14px;color:var(--muted);margin:16px 0 0}
.blink{display:inline-block;margin-top:4px;font-size:14px;font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;padding-block:4px}
@media (max-width:700px){.book{grid-template-columns:minmax(0,1fr);gap:22px}.bcover{max-width:170px}}
/* V3: Unterseiten */
nav a[aria-current="page"]{color:var(--fg);font-weight:600}
nav .nav-c{display:none}
.ptop .wrap{padding-block:72px 40px}
.ptop h1{font-size:clamp(40px,6.6vw,92px);margin-top:20px;max-width:16ch}.ptop h1 em{font-weight:400;display:block}
.ptop .lead,.cfpage .lead{font-size:clamp(19px,1.7vw,22px);line-height:1.5;max-width:52ch;margin:28px 0 0}
.hero h1{font-size:clamp(38px,4.4vw,66px);line-height:1.04}.hero h1 em{display:block}
.story img.tall{aspect-ratio:4/5;object-position:50% 20%}
.hero .lead{max-width:46ch;font-size:clamp(18px,1.5vw,20px)}
.intro.big{font-size:clamp(20px,2vw,26px);line-height:1.45;max-width:46ch;letter-spacing:-.005em}
.ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:40px;border-top:1px solid var(--fg)}
.way{display:flex;flex-direction:column;gap:10px;padding:28px 28px 32px 0;text-decoration:none;border-bottom:1px solid var(--line);position:relative}
.way+.way{padding-left:28px;border-left:1px solid var(--line)}
.way b{font-size:clamp(20px,2vw,26px);line-height:1.2;letter-spacing:-.015em;font-weight:600;padding-right:28px}
.way .arr{position:absolute;right:0;top:28px;font-size:22px;transition:transform .2s}.way:hover .arr{transform:translateX(4px)}.way:hover b{text-decoration:underline;text-underline-offset:4px}
.grid.comp article{min-height:0}.grid.comp h3{font-size:22px}
.cvnote{margin:28px 0 0;font-size:15px;color:var(--muted)}.cvnote a{color:var(--fg);font-weight:600;text-decoration:none;border-bottom:1px solid currentColor}
.pfig .wrap{padding-bottom:24px}.pfig figure.wide{margin-top:8px}
.acts{display:grid;gap:0;margin-top:36px;border-top:1px solid var(--fg)}
.act{padding:30px 0 32px;border-bottom:1px solid var(--line)}.act h3{font-size:clamp(24px,2.4vw,30px);margin-top:6px}.act .tag{display:inline-block;margin-bottom:6px}
.bnote{margin:14px 0 0;padding-left:16px;border-left:2px solid var(--fg)}
.cfpage .cf-r .cf-h{font-size:22px;margin:0 0 18px}
.cfpage .lead{margin-bottom:8px}
@media (max-width:900px){
  .ways{grid-template-columns:minmax(0,1fr)}.way+.way{padding-left:0;border-left:0}
  .ptop .wrap{padding-block:40px 24px}
  .hero h1{font-size:clamp(32px,8.4vw,56px)}
  .js header.site.open nav .nav-c{display:block}
  nav .nav-c{display:inline}
}
/* V3.3 */
.today{margin:32px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:15px;line-height:1.7;max-width:52ch}
.today .tag{display:block;margin-bottom:6px}.today span:not(.tag){display:block}
.act-note{margin:28px 0 0;font-size:15px;color:var(--muted);max-width:62ch}.act-note .tag{display:block;margin-bottom:6px}.act-note b{color:var(--fg);font-weight:600;margin-right:4px}
.wide.w2 img{aspect-ratio:2/1;object-position:50% 30%}
@media (max-width:900px){.wide.w2 img{aspect-ratio:16/10}}
/* V3.9 Engagement wie Entwurf */
.nw{white-space:nowrap}
.s.eng{padding-top:0}.s.eng .wrap{display:block}
.enggrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.engitem{border-top:2px solid var(--fg);padding-top:20px;scroll-margin-top:calc(var(--hh) + 20px)}
.engitem .tag{margin:0 0 10px}.engitem h2{font-size:clamp(20px,1.9vw,24px);line-height:1.2;margin:0}
.engitem p:last-child{margin:14px 0 0;font-size:16px;line-height:1.65;color:var(--muted)}
.books2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:40px}
.book2{display:grid;grid-template-columns:110px minmax(0,1fr);gap:26px;align-items:start;padding:30px;background:var(--card);border:1px solid var(--line)}
.book2 .btxt h3{font-size:clamp(19px,1.8vw,23px)}.book2 .bsub{font-size:17px}.book2 .bdesc{font-size:16px}
.connrow{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;margin-top:32px;align-items:stretch}
.tf{margin:0}.tf img{display:block;width:100%;height:100%;max-height:520px;object-fit:cover;object-position:50% 50%}.tf figcaption{font-size:13px;color:var(--muted);margin-top:8px}
.connection{margin:0;padding:30px 34px;border-left:3px solid var(--fg);background:var(--card);align-self:start}
.connection h3{font-size:clamp(20px,2vw,24px);margin:0}.connection p{margin:14px 0 0;line-height:1.7}
@media (max-width:1000px){.books2{grid-template-columns:minmax(0,1fr)}}
@media (max-width:860px){.enggrid{grid-template-columns:minmax(0,1fr);gap:32px}.connrow{grid-template-columns:minmax(0,1fr)}.tf img{max-height:none;aspect-ratio:4/3;height:auto}}
@media (max-width:520px){.book2{grid-template-columns:minmax(0,1fr);padding:22px}.book2 .bcover{max-width:120px}.connection{padding:24px 22px}}
/* V4.0 ruhigere Einleitungstexte */
.hero .lead,.ptop .lead,.lead,.cfpage .lead{font-size:clamp(17px,1.2vw,18px);line-height:1.7;max-width:62ch;color:var(--muted);font-weight:400;letter-spacing:0}
.intro.big{font-size:clamp(17px,1.3vw,19px);line-height:1.65;max-width:60ch;letter-spacing:0;color:var(--muted)}
/* V4.1 Überschriften eine Stufe dezenter */
.ptop h1{font-size:clamp(34px,4.4vw,62px);max-width:18ch}
.s .engitem h2{font-size:clamp(20px,1.9vw,24px);line-height:1.2}
.hero h1{font-size:clamp(34px,3.7vw,56px)}
.s h2{font-size:clamp(28px,3.7vw,46px)}
.cfpage h1{font-size:clamp(32px,5vw,66px)}
.contact h2{font-size:clamp(34px,5.2vw,66px)}
@media (max-width:900px){.ptop h1{font-size:clamp(30px,8.4vw,50px)}.hero h1{font-size:clamp(29px,7.4vw,46px)}.s h2{font-size:clamp(25px,6.8vw,40px)}.s .engitem h2{font-size:21px}.cfpage h1{font-size:clamp(30px,8vw,50px)}.contact h2{font-size:clamp(30px,8.6vw,54px)}}
/* V4.2 Über mich wie Entwurf */
.s.about2{padding-top:0}.s.about2 .wrap{display:block}
.acols{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:start}
.acopy>p{margin:0 0 19px;max-width:62ch}
.expertise{background:var(--card);border:1px solid var(--line);padding:30px;margin-top:34px}
.s .expertise h2{font-size:clamp(20px,1.9vw,24px);line-height:1.2;margin:0 0 12px}
.expertise p{margin:12px 0 0;color:var(--muted)}
.acopy .cvnote{margin-top:25px;font-size:14px;color:var(--muted)}
.aphoto{margin:0;position:sticky;top:calc(var(--hh) + 24px)}.aphoto img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%}
.aphoto figcaption{font-size:13px;color:var(--muted);margin-top:8px}
@media (max-width:900px){.acols{grid-template-columns:minmax(0,1fr);gap:36px}.aphoto{position:static;max-width:520px}.s .expertise h2{font-size:21px}}
@media (max-width:520px){.expertise{padding:22px}}
/* Mehr lesen */
.more{margin-top:28px;border-top:1px solid var(--line)}
.more summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:16px 0 4px;font-size:14px;font-weight:600}
.more summary::-webkit-details-marker{display:none}
.more summary span{border-bottom:1px solid currentColor;padding-block:2px}
.more summary::after{content:"+";font-weight:400;font-size:18px;line-height:1}
.more[open] summary::after{content:"\2212"}
.more .c{display:none}.more[open] .c{display:inline}.more[open] .o{display:none}
.more summary:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.more .mp{margin:18px 0 0;max-width:62ch}
.mgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 40px;margin-top:28px}
.mgrp h3{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;line-height:1.4}
.mgrp ul{list-style:none;margin:0;padding:0}.mgrp li{font-size:15px;line-height:1.5;padding:8px 0;border-top:1px solid var(--line)}
@media (max-width:640px){.mgrid{grid-template-columns:minmax(0,1fr)}}
/* V4.4 Startseite: Schnellnavigation; Unterseiten: weniger Leerraum */
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.pill{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border:1px solid var(--fg);border-radius:999px;font-size:14px;font-weight:600;text-decoration:none;color:var(--fg);transition:background .2s,color .2s}
.pill:hover{background:var(--fg);color:var(--bg)}
.pill.primary{background:var(--fg);color:var(--bg)}.pill.primary:hover{background:transparent;color:var(--fg)}
.pill:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.hero .actions+.today{margin-top:34px}
.s.about2 .wrap,.s.eng .wrap{border-top:0;padding-top:8px}
@media (max-width:900px){.s.about2 .wrap,.s.eng .wrap{padding-top:4px}}
@media (max-width:420px){.pill{padding:0 16px;font-size:13.5px}}
.ptop.about2 .acols{align-items:start}.ptop.about2 .aphoto{margin-top:6px}
.ptop.about2 .story2{margin-top:36px}.story2>p{margin:0 0 19px;max-width:62ch}
.ptop.about2 .wrap{padding-bottom:88px}
@media (max-width:900px){.ptop.about2 .wrap{padding-bottom:56px}.ptop.about2 .aphoto{margin-top:0}}
@media (max-width:900px){.ptop.about2 .acols{display:flex;flex-direction:column;gap:0}.ptop.about2 .acopy{display:contents}.ptop.about2 .acopy>*{order:3}
.ptop.about2 .acopy>.eyebrow,.ptop.about2 .acopy>h1,.ptop.about2 .acopy>.lead{order:1}.ptop.about2 .aphoto{order:2;margin:32px 0 0}}
.ptop.about2 .acopy>*{min-width:0;max-width:100%}.mgrid,.mgrp{min-width:0}.mgrp li{overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto}
/* V4.5 dezente Organisationslinks */
.olink{color:inherit;text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .2s;padding-block:4px}
.olink span{font-size:.85em;color:var(--muted)}
.olink:hover,.olink:focus-visible{border-bottom-color:var(--fg)}.olink:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
/* V4.6 Über mich in Kapiteln mit mitlaufender Navigation */
.chap .wrap{padding-block:8px 96px}
.cgrid{display:grid;grid-template-columns:200px minmax(0,1fr) 300px;gap:56px;align-items:start}
.cnav{position:sticky;top:calc(var(--hh) + 32px)}
.cnav .tag{margin:0 0 14px}
.cnav ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.cnav a{display:flex;gap:12px;align-items:baseline;padding:7px 0 7px 16px;margin-left:-1px;border-left:2px solid transparent;font-size:14px;line-height:1.35;color:var(--muted);text-decoration:none;transition:color .2s,border-color .2s}
.cnav a span{font-size:11px;font-weight:600;letter-spacing:.08em;min-width:18px}
.cnav a:hover{color:var(--fg)}.cnav a[aria-current]{color:var(--fg);border-left-color:var(--fg);font-weight:600}
.cnav a:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.chapter{scroll-margin-top:calc(var(--hh) + 28px);padding:0 0 40px}
.chapter+.chapter{border-top:1px solid var(--line);padding-top:36px}
.cnum{margin:0 0 8px;font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--muted)}
.chapter h2{font-size:clamp(22px,2vw,28px);line-height:1.2;margin:0 0 14px}
.chapter>p:last-child,.chapter>p:nth-of-type(2){margin:0;max-width:62ch}
.chapter .expertise{margin-top:6px}
.cbody .more{scroll-margin-top:calc(var(--hh) + 28px);margin-top:0}
.aphoto{margin:0;position:sticky;top:calc(var(--hh) + 32px)}.aphoto img,.aphoto-m img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%}
.aphoto figcaption,.aphoto-m figcaption{font-size:13px;color:var(--muted);margin-top:8px}
.aphoto-m{display:none;margin:0 0 40px}
@media (max-width:1180px){.cgrid{grid-template-columns:190px minmax(0,1fr);gap:48px}.aphoto{display:none}.aphoto-m{display:block;max-width:420px}}
@media (max-width:900px){.cgrid{grid-template-columns:minmax(0,1fr);gap:28px}.cnav{position:static}
  .cnav ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-left:0;border-top:1px solid var(--line)}
  .cnav a{border-left:0;padding:11px 8px 11px 0;margin:0;border-bottom:1px solid var(--line);min-height:44px}
  .cnav li:nth-child(odd) a{margin-right:12px}.chap .wrap{padding-bottom:64px}.aphoto-m{max-width:none}}
@media (max-width:420px){.cnav ol{grid-template-columns:minmax(0,1fr)}.cnav li:nth-child(odd) a{margin-right:0}}
/* V4.7 */
.mgrp h3{color:var(--fg)}
.pill{font-weight:500;border-color:var(--line);color:var(--fg)}
.pill:hover{background:transparent;border-color:var(--fg);color:var(--fg)}
.pill.primary{background:var(--line);border-color:var(--line);color:var(--fg)}
.pill.primary:hover{background:transparent;border-color:var(--fg);color:var(--fg)}
.tf{display:flex;flex-direction:column}.tf img{flex:1 1 auto;min-height:280px;height:0}.tf .tfcr{line-height:1.9}.tfcr>span{color:var(--muted)}.tfcr .olink{color:var(--fg)}
.today .olink span{display:inline}.today.quals{margin-top:18px}.today.quals .olink{font-size:14px;color:var(--muted)}
.row>div,.row p{min-width:0;overflow-wrap:anywhere}
.cimg{margin:24px 0 0}.cimg img{display:block;width:100%;height:auto}.cimg figcaption{font-size:13px;color:var(--muted);margin-top:8px}
@media (min-width:901px){header.site nav{font-size:15px;gap:30px}header.site nav a:not([aria-current]){color:color-mix(in srgb,var(--fg) 74%,var(--bg))}header.site nav a:hover{color:var(--fg)}}
.quote.drive h2{color:var(--inv-fg);font-size:clamp(28px,3.4vw,44px);line-height:1.08;margin:0}
.quote.drive .dp{margin:22px 0 0;max-width:58ch;font-size:clamp(17px,1.4vw,20px);line-height:1.65;color:var(--inv-fg);opacity:.86}
.quote.drive .wrap{padding-block:80px}
@media (max-width:900px){.quote.drive .wrap{padding-block:56px}}
.pager{border-top:1px solid var(--line)}
.pager .wrap{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-block:36px}
.pg{display:flex;flex-direction:column;gap:6px;padding:18px 0;text-decoration:none;color:var(--fg);min-height:44px}
.pg .tag{margin:0}.pg b{font-size:clamp(20px,2vw,26px);font-weight:600;letter-spacing:-.015em;transition:opacity .2s}
.pg.next{grid-column:2;text-align:right;align-items:flex-end}
.pg:hover b{opacity:.7}.pg:focus-visible{outline:2px solid var(--fg);outline-offset:4px}
@media (max-width:520px){.pager .wrap{gap:12px;padding-block:24px}.pg b{font-size:19px}}
.cgrid{grid-template-columns:200px minmax(0,1fr)}
@media (max-width:1180px){.cgrid{grid-template-columns:190px minmax(0,1fr)}}
@media (max-width:900px){.cgrid{grid-template-columns:minmax(0,1fr)}}
.chapter>p,.chapter .expertise{max-width:68ch}
.allst{margin:20px 0 0}.allst a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:600;color:var(--fg);text-decoration:none;border-bottom:1px solid currentColor;padding-block:4px}
.allst a:hover{opacity:.7}
/* V6.6 Startseite: Foto bündig mit der Überschrift, Heute und Qualifikationen nebeneinander */
@media (min-width:901px){
  .hero .wrap{align-items:start}
  .hero .portrait{margin-top:var(--pt,58px)}
  .facts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;margin-top:34px;border-top:1px solid var(--line);padding-top:18px}
  .facts .today{margin:0;padding:0;border:0;max-width:none}
  .facts .today.quals{margin:0}
}
/* V6.7 Unterseiten beginnen auf derselben Höhe wie die Startseite */
.ptop .wrap{padding-top:60px}.cfpage .wrap{padding-top:60px}
@media (max-width:900px){.ptop .wrap{padding-top:36px}.cfpage .wrap{padding-top:36px}}
/* V6.8 Desktop: Abstand Menü zu Inhalt rund 56 px */
@media (min-width:901px){.hero .wrap{padding-top:48px}.ptop .wrap,.cfpage .wrap{padding-top:36px}}
.quote .num{color:var(--inv-fg);opacity:.72}
/* V7.1 Handy: Foto nach den Buttons, vor „Heute“ und „Qualifikationen“ */
@media (max-width:900px){
  .hero .wrap{display:flex;flex-direction:column;gap:0;align-items:stretch}
  .hero .wrap>div{display:contents}
  .hero .wrap>div>*{order:1}
  .hero .wrap>.portrait{order:2;margin:36px 0 0}
  .hero .wrap>div>.facts,.hero .wrap>div>.allst{order:3}
  .hero .facts{margin-top:4px}
}
@media (max-width:420px){.brand .bt{display:none}}