@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(fonts/sourceserif.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(fonts/sourceserif-italic.woff2) format("woff2");font-weight:200 900;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/plexmono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/plexmono-500.woff2) format("woff2");font-weight:500;font-display:swap}
html{color-scheme:light}
@media (prefers-color-scheme: dark){html{color-scheme:dark}}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
footer a{color:inherit}
.legal{max-width:68ch; padding-block:48px}
.legal h1{font-family:var(--display); font-weight:800; font-size:clamp(36px,6vw,56px); letter-spacing:-.03em; line-height:1; margin:24px 0 32px}
.legal h2{font-family:var(--display); font-weight:600; font-size:22px; margin:36px 0 8px}
.legal p,.legal li{margin:0 0 12px}
.todo{background:var(--accent-soft); padding:0 4px; border-radius:3px}
:root{
  --bg:#F4F5F8; --surface:#FFFFFF; --ink:#14161C; --muted:#5E6474; --rule:#D8DBE4;
  --accent:#2F4FD0; --accent-ink:#FFFFFF; --accent-soft:#E4E9FB;
  --display:"Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#101218; --surface:#191C24; --ink:#ECEEF3; --muted:#9CA2B3; --rule:#2B2F3B;
    --accent:#8DA3FF; --accent-ink:#0E1330; --accent-soft:#1F2640; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#101218; --surface:#191C24; --ink:#ECEEF3; --muted:#9CA2B3; --rule:#2B2F3B;
  --accent:#8DA3FF; --accent-ink:#0E1330; --accent-soft:#1F2640; color-scheme:dark;
}
html:not(.en) [data-l="en"], html.en [data-l="de"]{display:none!important}
*{box-sizing:border-box}
body{background:var(--bg); color:var(--ink); font:17px/1.6 var(--serif); padding-inline:clamp(16px,4vw,48px); padding-block:0 64px}
.wrap{max-width:1120px; margin-inline:auto}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
.mono{font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; font-variant-numeric:tabular-nums}
.label{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}

/* top bar */
.top{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:20px; border-bottom:1px solid var(--rule)}
.top .brand{font-family:var(--display); font-weight:800; font-size:18px; letter-spacing:-.01em; text-decoration:none; color:var(--ink)}
.top nav{display:flex; gap:22px; align-items:center; flex-wrap:wrap}
.top nav a{font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); text-decoration:none}
.top nav a:hover{color:var(--ink)}
.lang{display:inline-flex; border:1px solid var(--rule); border-radius:999px; overflow:hidden}
.lang button{font:500 12px var(--mono); letter-spacing:.08em; border:0; background:transparent; color:var(--muted); padding:6px 11px; cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
@media (max-width:720px){ .top nav a{display:none} }

/* hero */
.hero{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(24px,5vw,72px); align-items:end; padding-block:clamp(40px,7vw,88px) clamp(32px,5vw,64px)}
.hero h1{font-family:var(--display); font-weight:800; font-size:clamp(52px,9.5vw,128px); line-height:.88; letter-spacing:-.045em; margin:18px 0 28px}
.hero h1 span{display:block}
.hero h1 .ac{color:var(--accent)}
.hero .lede{font-size:clamp(19px,2vw,22px); line-height:1.5; max-width:34ch; margin:0 0 28px; text-wrap:pretty}
.roles{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 32px; padding:0; list-style:none}
.roles li{font:500 12.5px var(--mono); letter-spacing:.04em; padding:6px 12px; border:1px solid var(--rule); border-radius:999px; color:var(--ink); background:var(--surface)}
.cta{display:flex; gap:12px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:8px; font:600 15px var(--display); text-decoration:none; padding:12px 20px; border-radius:6px; border:1px solid var(--ink); color:var(--ink); background:transparent; cursor:pointer}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.portrait{position:relative; margin:0}
.portrait img{display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 20%; border-radius:4px; filter:grayscale(1)}
.portrait figcaption{margin-top:10px; display:flex; justify-content:space-between; gap:12px}
@media (max-width:760px){ .hero{grid-template-columns:1fr} .portrait{max-width:420px; order:-1} }

/* sections */
section{padding-block:clamp(48px,7vw,88px) 0}
.sec-head{display:grid; grid-template-columns:200px minmax(0,1fr); gap:24px; border-top:2px solid var(--ink); padding-top:18px; margin-bottom:36px}
.sec-head h2{font-family:var(--display); font-weight:800; font-size:clamp(32px,4.4vw,52px); line-height:1; letter-spacing:-.03em; margin:0 0 12px; text-wrap:balance}
.sec-head p{margin:0; max-width:60ch; color:var(--muted)}
@media (max-width:760px){ .sec-head{grid-template-columns:1fr; gap:8px} }

/* reels */
.reels{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,2vw,24px)}
@media (max-width:980px){ .reels{grid-template-columns:repeat(2,minmax(0,1fr))} }
.reel{display:flex; flex-direction:column; gap:12px; margin:0}
.reel video{display:block; width:100%; aspect-ratio:9/16; object-fit:cover; background:#000; border-radius:14px; box-shadow:0 1px 0 var(--rule), 0 18px 40px -24px rgba(20,22,28,.45)}
.reel .meta{display:flex; justify-content:space-between; gap:8px; color:var(--muted)}
.reel h3{font-family:var(--display); font-weight:600; font-size:19px; line-height:1.2; letter-spacing:-.01em; margin:0}
.reel p{margin:0; font-size:15px; line-height:1.5; color:var(--muted)}

.playlist{margin-top:clamp(28px,4vw,44px); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center; background:var(--surface); border:1px solid var(--rule); border-radius:8px; padding:clamp(20px,3vw,32px)}
.playlist h3{font-family:var(--display); font-weight:600; font-size:24px; letter-spacing:-.015em; margin:6px 0 6px}
.playlist p{margin:0; color:var(--muted); max-width:58ch}
@media (max-width:640px){ .playlist{grid-template-columns:1fr} }

/* cv */
.cv{display:grid; grid-template-columns:200px minmax(0,1fr); gap:24px}
.cv h3.group{grid-column:1/-1; margin:28px 0 0; font:500 12px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}
.cv h3.group:first-child{margin-top:0}
.cv .when{font-family:var(--mono); font-size:13px; color:var(--muted); padding-top:4px; font-variant-numeric:tabular-nums}
.cv .what{border-bottom:1px solid var(--rule); padding-bottom:20px}
.cv .what h4{font-family:var(--display); font-weight:600; font-size:20px; line-height:1.25; letter-spacing:-.01em; margin:0}
.cv .what .org{color:var(--muted); font-size:15.5px; margin:2px 0 8px}
.cv .what ul{margin:0; padding-left:1.1em; max-width:64ch}
.cv .what li{margin:2px 0}
.cv .what li::marker{color:var(--accent)}
@media (max-width:760px){ .cv{grid-template-columns:1fr; gap:4px} .cv .what{margin-bottom:16px} }

.skills{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
.skills div{border-top:1px solid var(--rule); padding-top:14px}
.skills p{margin:8px 0 0}
@media (max-width:760px){ .skills{grid-template-columns:1fr} }

/* contact */
.contact{background:var(--ink); color:var(--bg); border-radius:8px; padding:clamp(28px,5vw,56px); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:end}
.contact h2{font-family:var(--display); font-weight:800; font-size:clamp(34px,5vw,60px); line-height:.95; letter-spacing:-.035em; margin:0 0 16px}
.contact p{margin:0; max-width:48ch; opacity:.8}
.mail{display:flex; flex-direction:column; gap:10px; align-items:flex-start}
.mail .addr{font:500 clamp(16px,2vw,20px) var(--mono); user-select:all; word-break:break-all}
.mail button{font:600 14px var(--display); padding:10px 16px; border-radius:6px; border:1px solid currentColor; background:transparent; color:inherit; cursor:pointer}
@media (max-width:760px){ .contact{grid-template-columns:1fr} }
footer{margin-top:clamp(56px,8vw,96px); border-top:1px solid var(--rule); padding-top:20px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--muted)}

@media (prefers-reduced-motion:no-preference){
  .hero h1 span{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
  .hero h1 span+span{animation-delay:.08s}
  @keyframes rise{from{transform:translateY(12px); opacity:.2}to{transform:none; opacity:1}}
}