@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#202020;background:#222;font-synthesis:none}*{box-sizing:border-box}body{margin:0;padding:20px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #111;outline-offset:6px}.skip{position:absolute;top:-100px;background:white;padding:15px;z-index:20}.skip:focus{top:10px}.stage{position:relative;min-height:calc(100svh - 40px);overflow:hidden;border-radius:28px;background:linear-gradient(130deg,#d2d2d0 0%,#b8b8b6 44%,#858583 100%);display:flex;flex-direction:column}header{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:34px 40px}.brand{display:flex;flex-direction:column;line-height:1.04;letter-spacing:-1.3px;font-size:27px}.brand strong{font-weight:800}.brand span{font-weight:300}nav{display:flex;gap:38px;align-items:center}nav a,nav button{border:0;background:none;padding:10px 0;font-size:14px;color:#303030;position:relative}nav a:after,nav button:after{content:'';position:absolute;bottom:1px;height:1px;left:0;right:100%;background:currentColor;transition:right .25s}nav a:hover:after,nav button:hover:after,nav [aria-current]:after{right:0}.hero{position:relative;flex:1;min-height:620px;display:grid;grid-template-columns:1fr 1.95fr 1fr;align-items:center;padding:0 5%}.intro{z-index:2;max-width:230px;padding-bottom:25px}.eyebrow{font-size:12px;font-weight:500;letter-spacing:2px}h1{font-family:'Manrope',sans-serif;font-size:clamp(28px,3.1vw,48px);line-height:1.1;font-weight:500;letter-spacing:-2px;margin:26px 0 20px}.intro-copy{font-size:15px;line-height:1.65;max-width:180px}.line-button{margin-top:22px;padding:12px 0;background:none;border:0;border-top:1px solid #555;border-bottom:1px solid #555;display:flex;justify-content:space-between;gap:35px;width:100%;font-size:14px}.line-button span{font-size:20px;line-height:18px}.composition{position:absolute;inset:0 24%;pointer-events:none}.giant{position:absolute;writing-mode:vertical-rl;transform:rotate(180deg);font-family:'Manrope',sans-serif;font-weight:800;font-size:clamp(100px,12.7vw,196px);line-height:.85;letter-spacing:-9px;color:#f8f8f6;bottom:0;white-space:nowrap}.first{left:1%;font-size:clamp(90px,10.6vw,160px)}.last{right:2%;color:transparent;-webkit-text-stroke:1.5px #f8f8f6;bottom:40px}.portrait{position:absolute;bottom:0;left:50%;transform:translateX(-50%) scaleX(-1);width:115%;height:87%;object-fit:cover;object-position:50% 18%;filter:grayscale(1) contrast(1.08);mix-blend-mode:multiply;mask-image:linear-gradient(to bottom,transparent 0%,#000 20%,#000 78%,transparent 100%),linear-gradient(to right,transparent 0%,#000 22%,#000 78%,transparent 100%);mask-composite:intersect;z-index:1}.last{z-index:2}.index{grid-column:3;z-index:2;width:185px;justify-self:end}.index>.eyebrow{display:block;margin-bottom:23px;font-size:11px;letter-spacing:1.5px}.index button{display:flex;align-items:center;gap:12px;text-align:left;width:100%;border:0;border-top:1px solid #ffffff50;background:none;padding:18px 0;font-size:14px}.index button:last-child{border-bottom:1px solid #ffffff50}.index button span{font-size:11px;opacity:.65}.index button b{margin-left:auto;font-size:19px;font-weight:300;transition:transform .25s}.index button:hover b{transform:rotate(90deg)}footer{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:24px 40px;font-size:12px;letter-spacing:1px}.draft{font-size:10px;letter-spacing:1.4px}.motion{background:none;border:0;font-size:12px;display:flex;align-items:center;gap:10px}.motion span{font-size:26px}dialog{border:0;margin:0 0 0 auto;height:100svh;max-height:100svh;width:min(580px,100%);max-width:100%;padding:36px 45px;background:#eeeeea;color:#202020;box-shadow:-30px 0 90px #0003}dialog[open]{display:flex;flex-direction:column;animation:slide-in .35s ease}dialog::backdrop{background:#15151570;backdrop-filter:blur(8px)}.dialog-top{display:flex;justify-content:space-between;align-items:center}.close{font-size:36px;border:0;background:none;padding:0 5px;font-weight:300}h2{font-family:Manrope,sans-serif;font-size:clamp(42px,6vw,66px);letter-spacing:-3px;line-height:1.1;margin:65px 0 30px}#panel-content{font-size:17px;line-height:1.75}#panel-content .pending{margin-top:35px;padding-top:20px;border-top:1px solid #bbb;color:#62625e;font-size:14px}.dialog-bottom{margin-top:auto;padding-top:70px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.5px}.stage{animation:appear .8s ease}@keyframes appear{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes slide-in{from{transform:translateX(100%)}to{transform:none}}.no-motion *{animation:none!important;transition:none!important}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}@media(min-width:1500px){.hero{min-height:730px}}@media(max-width:900px){nav{gap:18px}header{padding:28px}.brand{font-size:23px}.hero{grid-template-columns:1fr 1.5fr 1fr;padding:0 30px;min-height:580px}.composition{inset:0 22%}.intro{max-width:180px}.index{width:150px}.giant{letter-spacing:-6px}.draft{display:none}footer{padding:22px 28px}}@media(max-width:650px){body{padding:10px}.stage{min-height:calc(100svh - 20px);border-radius:20px}header{padding:24px;align-items:start;gap:22px;flex-direction:column}.brand{font-size:24px}nav{justify-content:space-between;width:100%;gap:10px}nav a,nav button{font-size:13px}.hero{min-height:760px;display:flex;align-items:flex-end;padding:0 24px 22px}.composition{inset:10px 13% 250px}.giant{font-size:110px;letter-spacing:-6px;bottom:0}.first{font-size:88px}.last{bottom:0}.portrait{width:132%;height:84%;object-position:50% 15%}.intro{max-width:100%;width:100%;padding:0}.intro .eyebrow{font-size:10px}h1{font-size:35px;margin:14px 0;letter-spacing:-1.5px}h1 br{display:none}.intro-copy{max-width:none;margin:0;font-size:14px}.line-button{width:230px;margin-top:18px}.index{display:none}footer{padding:18px 24px;border-top:1px solid #ffffff40}dialog{padding:26px}.dialog-bottom{gap:15px}}@media print{body{padding:0;background:white}.stage{background:white;min-height:0}nav,.composition,.motion,.index,.line-button,dialog{display:none}header,footer{padding:20px}.hero{min-height:0;padding:20px}.intro{max-width:none}h1{font-size:30px}}

/* Professional experience */
.experience-role{padding-bottom:22px;border-bottom:1px solid #c9c9c3;margin-bottom:26px}
.experience-role .eyebrow{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;margin:0 0 8px;color:#62625e}
.experience-role h3{font-family:Manrope,sans-serif;font-size:28px;line-height:1.3;letter-spacing:-1px;margin:0;font-weight:600}
.experience-section{border-top:1px solid #c9c9c3;margin-top:30px;padding-top:24px}
.experience-section h3{font-size:18px;line-height:1.4;letter-spacing:-.3px;margin:0 0 12px;font-weight:600}
.experience-section p{margin:0;font-size:16px;line-height:1.8}
.experience-links{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:16px}
.experience-links a{font-size:14px;text-decoration:underline;text-underline-offset:4px}
.dialog-top{flex-shrink:0}
.experience-section .project-subtitle{font-size:13px;letter-spacing:.7px;color:#62625e;margin:-3px 0 16px}
.experience-section .project-pending{font-size:14px;color:#62625e}

/* Navigation accommodates the skills section on smaller screens. */
@media(min-width:651px) and (max-width:1000px){header{gap:24px;flex-wrap:wrap}nav{gap:22px}}
@media(max-width:650px){nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 16px}nav a,nav button{text-align:left;font-size:14px;min-height:44px}}
.certificate-list{list-style:none;padding:0;margin:22px 0 0}
.certificate-list li{padding:18px 0;border-bottom:1px solid #d1d1ca;overflow-wrap:anywhere}
.certificate-list strong{display:block;font-size:16px;font-weight:500;line-height:1.5}
.certificate-list span{display:block;margin-top:7px;font-size:14px;line-height:1.6;color:#62625e}
header{gap:24px;flex-wrap:wrap}nav{flex-wrap:wrap;column-gap:26px}
@media(max-width:650px){nav{column-gap:16px}}

/* Language selection, shared by the home page and detail panels. */
.language-switch{display:flex;align-items:center;gap:4px;flex-shrink:0}
.language-switch a{display:grid;place-items:center;min-width:38px;min-height:40px;padding:6px;font-size:13px;border:1px solid transparent;border-radius:4px;letter-spacing:.5px}
.language-switch a:hover{background:#ffffff35}
.language-switch a[aria-current]{border-color:#555;background:#ffffff25;font-weight:700}
.dialog-languages{margin-top:18px;align-self:flex-start}
.dialog-languages+h2{margin-top:30px}
header .brand{flex-shrink:0}header nav{margin-left:auto}
html[lang="de"] h1{font-size:clamp(28px,2.8vw,43px);letter-spacing:-1.5px}
html[lang="en"] h1{font-size:clamp(28px,2.9vw,44px)}
html[lang="de"] .line-button{gap:12px}
@media(min-width:651px) and (max-width:1250px){header{display:grid;grid-template-columns:1fr auto}header nav{grid-row:2;grid-column:1 / -1;margin:0;justify-content:space-between}header>.language-switch{grid-column:2;grid-row:1}}
@media(max-width:650px){header{position:relative}header>.language-switch{align-self:flex-end;order:-1;margin-bottom:-6px}header nav{margin-left:0}html[lang="de"] h1{font-size:31px}html[lang="en"] h1{font-size:33px}.dialog-top .eyebrow{font-size:11px;letter-spacing:1px}dialog h2{overflow-wrap:anywhere}}

/* Gentle continuous movement complements the portrait and editorial lettering. */
.stage{--pointer-x:0px;--pointer-y:0px;background-size:160% 160%;animation:appear .8s ease both,ambient-shift 22s ease-in-out infinite alternate}
.composition{transform:translate(var(--pointer-x),var(--pointer-y));transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.portrait{animation:portrait-drift 9s ease-in-out infinite}
.giant.first{animation:type-drift 12s ease-in-out infinite}
.giant.last{animation:type-drift 12s ease-in-out -6s infinite reverse}
.index button{transition:padding .25s ease,background-color .25s ease}
.index button:hover{padding-left:7px;background:#ffffff12}
.line-button{transition:background-color .25s ease}
.line-button:hover{background:#ffffff25}
.motion span{display:inline-block;animation:motion-orbit 4s ease-in-out infinite;min-width:18px;text-align:center}
.motion[aria-pressed="false"] span{animation:none;font-size:16px}
dialog[open] #panel-title,dialog[open] #panel-content>p,dialog[open] .experience-section{animation:content-enter .6s ease both}
dialog[open] #panel-content>p{animation-delay:.07s}
dialog[open] .experience-section:nth-child(2){animation-delay:.12s}
dialog[open] .experience-section:nth-child(3){animation-delay:.18s}
dialog[open] .experience-section:nth-child(4){animation-delay:.24s}
@keyframes ambient-shift{from{background-position:0% 30%}to{background-position:100% 70%}}
@keyframes portrait-drift{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes type-drift{0%,100%{translate:0 0}50%{translate:0 9px}}
@keyframes motion-orbit{0%,100%{transform:scale(.8);opacity:.55}50%{transform:scale(1.1);opacity:1}}
@keyframes content-enter{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
.no-motion .composition{transform:none}
.page-hidden *, .stage:has(~dialog[open]) .portrait, .stage:has(~dialog[open]) .giant{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.composition{transform:none}.index button:hover{padding-left:0}}
@media(max-width:650px){.portrait{animation-duration:12s}.giant.first,.giant.last{animation-duration:16s}}
@media print{*{animation:none!important;transition:none!important}}

/* One main navigation; the header introduces the professional focus. */
header{display:grid;grid-template-columns:1fr auto;align-items:center;gap:26px 24px}
header>.brand{grid-column:1;grid-row:1}
header>.language-switch{grid-column:2;grid-row:1;order:0;margin:0;align-self:center}
.professional-intro{grid-column:1 / -1;grid-row:2;display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:20px;border-top:1px solid #ffffff50}
.professional-intro p{margin:0;font-size:14px;line-height:1.6}
.professional-role{font-weight:500}
.professional-intro{flex-wrap:wrap;column-gap:28px;row-gap:8px}
.professional-intro p{max-width:100%;text-wrap:balance}
.professional-focus{color:#41413f}
@media(max-width:650px){
  header{display:flex;flex-direction:row;flex-wrap:wrap;gap:18px;padding:24px}
  header>.brand{flex:1 1 100%;font-size:24px}
  header>.language-switch{order:0;align-self:auto;margin:0}
  .professional-intro{order:1;width:100%;display:block;padding-top:16px}
  .professional-focus{margin-top:5px!important}
  .hero{display:block;min-height:0;padding:0 24px 28px}
  .composition{inset:0 13% auto;height:470px}
  .intro{position:relative;padding-top:495px}
  .index{display:block;width:100%;margin-top:38px}
  .index>.eyebrow{margin-bottom:18px}
  .index button{font-size:16px;padding:16px 0;min-height:54px}
}

/* Keep the photo blended with the stage while moving individual layers.
   Transforming the parent creates a separate blending group and reveals
   the photograph's white background. */
.composition{transform:none;transition:none}
.portrait{transform:translate(calc(-50% + var(--pointer-x)),var(--pointer-y)) scaleX(-1);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.giant{transform:translate(calc(var(--pointer-x) * -.45),calc(var(--pointer-y) * -.45)) rotate(180deg);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.no-motion .portrait{transform:translateX(-50%) scaleX(-1)}
.no-motion .giant{transform:rotate(180deg)}
@media(prefers-reduced-motion:reduce){.portrait{transform:translateX(-50%) scaleX(-1)}.giant{transform:rotate(180deg)}}

/* The portrait and name stay still, independently of other page animations. */
.composition{transform:none;transition:none}
.portrait{animation:none!important;translate:none;transform:translateX(-50%) scaleX(-1);transition:none}
.giant{animation:none!important;translate:none;transform:rotate(180deg);transition:none}

/* Reference-inspired diagonal grayscale gradient. */
.stage{background:linear-gradient(135deg,#c9c9c9 0%,#bcbcbc 26%,#929292 55%,#626262 84%,#5d5d5d 100%);background-size:100% 100%;animation:appear .8s ease both}
.index{color:#fff}
.index button{border-color:#ffffff50}
.index button:last-child{border-color:#ffffff50}
.professional-focus{color:#202020}
footer .motion{color:#fff}

.hobby-list{list-style:none;padding:0;margin:36px 0}
.hobby-list li{display:flex;align-items:center;gap:24px;padding:25px 0;border-top:1px solid #c9c9c3;font-family:Manrope,sans-serif;font-size:26px;line-height:1.4;letter-spacing:-.6px}
.hobby-list li:last-child{border-bottom:1px solid #c9c9c3}
.hobby-list .eyebrow{font-family:'DM Sans',sans-serif;font-size:12px;letter-spacing:1px;color:#62625e}

/* Keep the story button and its rules clear of the portrait lettering. */
.line-button{width:min(100%,180px);gap:12px;text-align:left;line-height:1.45}
.line-button span{flex-shrink:0}
@media(min-width:651px) and (max-width:1000px){.line-button{max-width:155px}}
@media(max-width:650px){.line-button{width:230px;max-width:100%}}

/* Slightly larger portrait, anchored to the bottom of the composition. */
.giant.first{color:#111}
.giant.last{color:transparent;-webkit-text-stroke-color:#111}
.portrait{width:139%;height:106%}
@media(max-width:650px){.portrait{width:160%;height:101%}}

/* Transparent cutout keeps face highlights independent of the gray stage. */
.portrait{mix-blend-mode:normal;filter:grayscale(1) contrast(1.12) brightness(1.05);mask-image:linear-gradient(to bottom,#000 0%,#000 70%,transparent 100%),linear-gradient(to right,transparent 0%,#000 15%,#000 85%,transparent 100%);mask-composite:intersect}

/* Wide screens keep a full portrait, sized by height rather than stretched width. */
html:has(dialog[open]){overflow:hidden}
dialog{overscroll-behavior:contain}
.close{min-width:44px;min-height:44px}
@media(max-width:650px){
  header{padding:22px 24px 18px;gap:14px}
  header>.brand{font-size:clamp(21px,6vw,24px);letter-spacing:-1px}
  .language-switch a{min-width:44px;min-height:44px}
  .professional-intro p{font-size:13px}
  .composition{height:400px;inset:0 10% auto}
  .portrait{width:auto;height:100%;aspect-ratio:1;object-fit:contain}
  .giant.first{font-size:clamp(60px,18vw,78px);left:0;letter-spacing:-4px}
  .giant.last{font-size:clamp(72px,22vw,96px);right:0;letter-spacing:-4px}
  .intro{padding-top:420px}
  h1 br{display:block}
  h1,html[lang="en"] h1,html[lang="de"] h1{font-size:32px;line-height:1.12}
  .index{margin-top:30px}
  dialog{height:100dvh;max-height:100dvh;padding:18px 24px 28px}
  .dialog-top{position:sticky;top:-18px;z-index:5;background:#eeeeea;padding:8px 0;border-bottom:1px solid #d1d1ca}
  dialog h2{font-size:42px;letter-spacing:-2px;overflow-wrap:break-word}
  #panel-content{font-size:16px}
  #panel-content a{overflow-wrap:anywhere}
  .dialog-bottom{flex-wrap:wrap;padding-top:42px;gap:10px}
}
@media(min-width:1100px){
  .stage{max-width:1600px;margin-inline:auto}
  .hero{min-height:clamp(500px,calc(100svh - 300px),780px)}
  .portrait{width:auto;height:106%;aspect-ratio:1;object-fit:contain}
  .giant.first{font-size:clamp(90px,14svh,140px);letter-spacing:-7px}
  .giant.last{font-size:clamp(110px,17svh,170px);letter-spacing:-7px;bottom:24px}
}