:root{
  --paper:#FFFFFF; --ink:#231F20; --granite:#5E6166; --mist:#EEF0EF; --cobalt:#1F50B2;
  --gut:clamp(20px,5vw,80px);
  --space:clamp(96px,13vw,200px);
  --f:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.65 var(--f);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;width:100%;height:auto}
figure{margin:0}
figcaption{font-size:13px;line-height:1.4;color:var(--granite);margin-top:10px}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:4px}
a:hover{color:var(--cobalt)}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}
h1,h2,h3{margin:0;font-weight:500;line-height:1.05}
p{margin:0 0 1em}
.year{font-size:14px;color:var(--granite);font-variant-numeric:tabular-nums;margin:0 0 10px;letter-spacing:.01em}
.sec-h{font-size:clamp(40px,5.6vw,92px);font-weight:500;letter-spacing:-.025em;line-height:1;margin:0 0 clamp(48px,6vw,96px)}

/* Kopf */
.top{display:flex;align-items:center;gap:32px;padding:22px var(--gut);font-size:15px;position:relative;z-index:5}
.top.on-image{position:absolute;inset:0 0 auto 0;color:#fff}
.top.on-image a:hover{color:#fff;opacity:.75}
.brand{font-weight:500;text-decoration:none;margin-right:auto;letter-spacing:-.01em}
.nav{display:flex;gap:28px}
.nav a,.tools a{text-decoration:none}
.menu{display:none}
.menu summary{list-style:none;cursor:pointer;font-weight:500;position:relative;z-index:12}
.menu summary::-webkit-details-marker{display:none}
.menu .m-close,.menu[open] .m-open{display:none}
.menu[open] .m-close{display:inline}
.menu[open] summary{color:#fff}
.menu-panel{position:fixed;inset:0;z-index:11;background:var(--ink);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:96px var(--gut) 48px}
.menu-panel>a{font-size:clamp(36px,10vw,64px);font-weight:500;letter-spacing:-.025em;line-height:1.15;text-decoration:none}
.menu-meta{display:flex;gap:24px;margin-top:40px;font-size:16px;opacity:.7}
.menu-meta a{text-decoration:none}
.tools{display:flex;align-items:center;gap:18px}
.social{display:inline-flex}
.lang{font-weight:500;font-size:14px;letter-spacing:.02em}

/* Einstieg: zwei Orte */
.hero{position:relative;display:grid;grid-template-columns:1fr 1fr;height:100svh;min-height:560px;max-height:1100px;overflow:hidden;background:var(--ink)}
.hero-half{position:relative;overflow:hidden}
.hero-half img{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,19,.35) 0%,rgba(20,18,19,0) 22%,rgba(20,18,19,0) 55%,rgba(20,18,19,.55) 100%);pointer-events:none}
.place{position:absolute;left:var(--gut);top:clamp(90px,12vh,140px);color:#fff;font-size:15px;z-index:2}
.hero-half+.hero-half .place{left:clamp(20px,3vw,48px)}
.hero-name{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(28px,5vw,72px);z-index:2;color:#fff;font-size:clamp(52px,10.4vw,200px);font-weight:500;letter-spacing:-.035em;line-height:.95;white-space:nowrap}
.hero-name span{display:inline-block;animation:rise 1.1s cubic-bezier(.2,.7,.1,1) both}
.hero-name span+span{animation-delay:.12s}
@keyframes rise{from{transform:translateY(40%);opacity:0}to{transform:none;opacity:1}}

/* Einleitung */
.intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 24px;padding:var(--space) var(--gut)}
.statement{grid-column:1/11;grid-row:1;font-size:clamp(26px,3.1vw,50px);line-height:1.25;letter-spacing:-.015em;font-weight:300;margin:0 0 clamp(56px,7vw,112px)}
.statement2{grid-column:1/6;grid-row:2;align-self:end;font-size:clamp(19px,1.8vw,28px);line-height:1.45;color:var(--granite);max-width:20em;margin:0}
.intro-portrait{grid-column:7/13;grid-row:2;margin:0 calc(var(--gut) * -1) 0 0}
.intro-portrait img{width:100%;aspect-ratio:5/4;object-fit:cover}

/* Herkunft */
.origin{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 24px;padding:0 var(--gut) var(--space) 0;align-items:center}
.origin-img{grid-column:1/8}
.origin-img figcaption{padding-left:var(--gut)}
.origin-text{grid-column:9/13}
.origin-text h2{font-size:clamp(36px,4vw,64px);letter-spacing:-.02em;margin-bottom:40px}
.origin-text p{font-size:19px;line-height:1.7;max-width:32em}

/* Arbeiten */
.works{padding:0 var(--gut) var(--space)}
.work{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 24px;align-items:center;margin-bottom:var(--space)}
.work h3{font-size:clamp(26px,2.4vw,38px);letter-spacing:-.015em;line-height:1.15;margin-bottom:22px}
.work-text p:not(.year){font-size:18px;line-height:1.7;max-width:30em}
.work-wide .work-pics{grid-column:1/9;margin-left:calc(var(--gut) * -1)}
.work-wide .work-pics figcaption{padding-left:var(--gut)}
.work-wide .work-text{grid-column:10/13}
.work-wide-r .work-pics{grid-column:5/13;grid-row:1;margin-right:calc(var(--gut) * -1)}
.work-wide-r .work-text{grid-column:1/4;grid-row:1}
.work-pair .work-pics{grid-column:1/9;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.work-pair .work-pics img{aspect-ratio:3/2;object-fit:cover}
.work-pair .work-text{grid-column:10/13}
.work-trio{align-items:start}
.work-trio .work-text{grid-column:1/4;grid-row:1;position:sticky;top:40px}
.work-trio .work-pics{grid-column:5/13;grid-row:1;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.work-trio .t-a{grid-column:1/3}
.work-trio .t-b img,.work-trio .t-c img{aspect-ratio:3/2;object-fit:cover}
.more{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 24px}
.more-h{grid-column:1/4;font-size:22px;line-height:1.25}
.more-grid{grid-column:5/13;display:grid;grid-template-columns:1fr 1fr;gap:48px 24px}
.more-item h3{font-size:22px;letter-spacing:-.01em;line-height:1.2;margin-bottom:12px}
.more-item p:not(.year){font-size:17px;color:#3c3a3b}

/* Werdegang */
.cv-sec{background:var(--mist);padding:var(--space) var(--gut)}
.cv{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:44px 48px;max-width:1280px}
.cv li{display:grid;grid-template-columns:110px 1fr;gap:16px}
.cv .year{margin:3px 0 0}
.cv-what{font-size:17px;color:#3c3a3b;line-height:1.5}
.cv-what strong{display:block;color:var(--ink);font-size:20px;font-weight:500;margin-bottom:4px}

/* ARM */
.arm{background:var(--ink);color:var(--paper);padding:var(--space) var(--gut);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 24px}
.arm h2{grid-column:1/13;font-size:clamp(40px,5.6vw,92px);letter-spacing:-.025em;line-height:1;margin-bottom:clamp(40px,5vw,72px)}
.arm-text{grid-column:5/12}
.arm-text p{font-size:clamp(18px,1.5vw,22px);line-height:1.65;color:#e9e7e4;max-width:36em}
.arm a:hover{color:var(--paper)}

/* Knöpfe */
.btn{display:inline-block;margin-top:16px;padding:16px 28px;border-radius:999px;background:var(--paper);color:var(--ink);text-decoration:none;font-weight:500;font-size:16px}
.btn:hover{background:var(--cobalt);color:#fff}
.btn-ink{background:var(--ink);color:var(--paper)}

/* Velo */
.velo{padding:var(--space) var(--gut)}
.velo-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 24px}
.velo-head .sec-h{grid-column:1/13}
.velo-lead{grid-column:1/9;font-size:clamp(22px,2.4vw,36px);line-height:1.35;font-weight:300;max-width:26em}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:clamp(56px,7vw,112px) 0 40px}
.num{display:block;font-size:clamp(44px,5.8vw,100px);font-weight:500;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.lbl{display:block;font-size:15px;color:var(--granite);margin-top:12px}
.velo-cta{margin:0 0 clamp(56px,7vw,112px)}
.mosaic{columns:4;column-gap:16px}
.mosaic figure{break-inside:avoid;margin-bottom:28px}
.velo-foot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 24px;margin-top:clamp(56px,7vw,112px)}
.velo-foot>div:first-child{grid-column:1/7}
.velo-foot>div:last-child{grid-column:8/13}
.velo-foot .more-h{margin-bottom:24px}
.rides{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.rides li{display:grid;grid-template-columns:70px 1fr;gap:4px 16px;font-size:17px}
.rides li .year{grid-row:span 2;margin:3px 0 0}
.rides strong{font-weight:500}
.rides span:last-child{color:var(--granite)}
.mountain{font-size:19px}
.links{display:flex;flex-wrap:wrap;gap:28px;font-size:16px}

/* Kontakt */
.contact{padding:var(--space) var(--gut)}
.contact .sec-h{margin-bottom:28px}
.contact-lead{font-size:20px;color:var(--granite)}
.mail{font-size:clamp(34px,6vw,104px);font-weight:500;letter-spacing:-.03em;line-height:1.05;margin:24px 0 40px}
.mail a{text-decoration:none}

/* Fuss */
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:40px var(--gut) 48px;font-size:14px;color:var(--granite);background:var(--mist)}
.foot-links{display:flex;gap:24px;flex-wrap:wrap}

/* Tagebuch */
.diary-hero{padding:clamp(56px,8vw,120px) var(--gut) var(--space)}
.diary-hero h1{font-size:clamp(40px,5.6vw,92px);letter-spacing:-.025em;line-height:1.02;margin:0 0 48px;max-width:11em}
.diary-hero .velo-lead{max-width:30em;font-size:clamp(20px,2vw,28px)}
.back{font-size:15px;color:var(--granite);margin-bottom:28px}
.note{font-size:15px;color:var(--granite);max-width:44em;margin-top:24px}
.days-sec{padding:0 var(--gut) var(--space)}
.days{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:56px 24px}
.day-card{text-decoration:none;display:block}
.day-card img{aspect-ratio:3/4;object-fit:cover;margin-bottom:14px}
.day-no{display:block;font-size:14px;color:var(--granite)}
.day-t{display:block;font-weight:500;font-size:18px;line-height:1.3;margin-top:4px}
.day{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 24px;padding:clamp(40px,6vw,96px) var(--gut) var(--space);align-items:start}
.day-img{grid-column:1/6}
.day-text{grid-column:7/13}
.day-text h1{font-size:clamp(30px,3vw,48px);letter-spacing:-.02em;line-height:1.1;margin:0 0 40px}
.day-text .prose p{font-size:19px;line-height:1.65;max-width:34em}
.day-text h3{font-size:22px;margin:36px 0 12px}
.day-nav{display:flex;justify-content:space-between;gap:16px;margin-top:56px;font-weight:500}
.day-nav a{text-decoration:none}

/* Rechtliches */
.legal{padding:clamp(56px,8vw,120px) var(--gut) var(--space);max-width:860px}
.legal h1{font-size:clamp(36px,4.4vw,64px);letter-spacing:-.02em;margin-bottom:48px}
.legal h2{font-size:21px;margin:36px 0 10px}

@media (max-width:1100px){
  .nav{display:none}
  .menu{display:block}
  .menu[open]~.tools{visibility:hidden}
  .cv{grid-template-columns:1fr}
}
@media (max-width:900px){
  .intro,.origin,.work,.more,.arm,.velo-head,.velo-foot,.day{grid-template-columns:1fr}
  .velo-head .sec-h{grid-column:1/-1}
  .origin-img,.origin-text,.work .work-pics,.work .work-text,.more-h,.more-grid,.arm h2,.arm-text,.velo-lead,.velo-foot>div,.day-img,.day-text{grid-column:1/-1 !important;grid-row:auto !important}
  .statement,.statement2,.intro-portrait{grid-column:1/-1 !important;grid-row:auto !important}
  .statement{margin-bottom:28px}
  .intro-portrait{margin:56px calc(var(--gut) * -1) 0}
  .origin{padding-right:0}
  .origin-text{padding:48px var(--gut) 0}
  .work .work-pics{margin-left:calc(var(--gut) * -1) !important;margin-right:calc(var(--gut) * -1) !important}
  .work .work-pics figcaption{padding:0 var(--gut)}
  .work-pair .work-pics,.work-trio .work-pics{gap:8px}
  .work-text{margin-top:32px;position:static !important}
  .more-grid{grid-template-columns:1fr;margin-top:32px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
  .mosaic{columns:2;column-gap:10px}
  .mosaic figure{margin-bottom:18px}
  .velo-foot>div+div{margin-top:56px}
  .days{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 14px}
  .day-text{margin-top:40px}
}
@media (max-width:600px){
  body{font-size:17px}
  .hero{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
  .hero-half .place{left:var(--gut)}
  .hero-half:first-child .place{top:84px}
  .hero-half+.hero-half .place{left:var(--gut);top:16px}
  .cv li{grid-template-columns:1fr;gap:4px}
  .work-pair .work-pics{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-name span{animation:none}}
@media print{.top,.foot{display:none}.arm{background:none;color:var(--ink)}}