:root{
  --bg:#f6f5f1; --surface:#ffffff; --ink:#14171a; --soft:#555b63; --faint:#8b9097;
  --line:#e5e3dc; --accent:#0c9a86; --accent-2:#14b8a0; --violet:#7c5cff; --accent-ink:#fff; --chip:#eef3f1;
  --shadow:0 1px 2px rgba(20,23,26,.04),0 8px 24px rgba(20,23,26,.06);
  --font:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0d1012; --surface:#15191c; --ink:#e9ecef; --soft:#a4abb3; --faint:#6f777f;
  --line:#242a2f; --accent:#2fcab5; --accent-2:#5ee0cc; --violet:#9b83ff; --accent-ink:#06120f; --chip:#1c2326;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35);
  color-scheme:dark;
}}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--font);-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(60rem 30rem at 85% -10%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%),
                   radial-gradient(40rem 24rem at -10% 20%,color-mix(in srgb,var(--violet) 9%,transparent),transparent 70%);
  background-repeat:no-repeat}
a{color:var(--accent);text-underline-offset:3px}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}

/* Kopfzeile */
.top{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:12px max(16px,calc((100% - 1120px)/2));background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.top.scrolled{border-bottom-color:var(--line)}
.mark{display:flex;align-items:center;gap:9px;font:600 15px var(--mono);color:var(--ink);text-decoration:none}
.mark img{border-radius:6px}
.mark span{color:var(--accent)}
.top nav{display:flex;gap:6px}
.top nav a{color:var(--soft);text-decoration:none;font-size:15px;padding:6px 10px;border-radius:8px;transition:background .15s,color .15s}
.top nav a:hover,.top nav a.active{color:var(--ink);background:var(--chip)}

main{max-width:1120px;margin:0 auto;padding:0 16px}
section{padding:96px 0 0}
h1,h2,h3{margin:0;letter-spacing:-.02em;line-height:1.12}
h2{font-size:clamp(1.8rem,4vw,2.5rem);margin-bottom:32px;font-weight:750}
h3{font-size:1.2rem}
.eyebrow{font:600 13px var(--mono);color:var(--accent);margin:0 0 8px;letter-spacing:.06em}
.eyebrow::after{content:"";display:inline-block;width:32px;height:2px;background:var(--accent);vertical-align:middle;margin-left:10px;border-radius:2px}

/* Hero */
.hero{display:grid;gap:48px;align-items:center;padding:88px 0 24px}
@media (min-width:920px){.hero{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
.kicker{display:inline-flex;align-items:center;gap:10px;font:500 13px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--soft);
  margin:0 0 18px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 var(--accent);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)}70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
.hero h1{font-size:clamp(2.8rem,7.5vw,5rem);font-weight:800;letter-spacing:-.04em;line-height:1.02}
.grad{background:linear-gradient(100deg,var(--accent) 10%,var(--violet) 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:1.2rem;color:var(--soft);margin:22px 0 0;max-width:58ch}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 0}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--accent-ink);
  text-decoration:none;font-weight:650;font-size:15px;border:1px solid transparent;box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 30%,transparent);
  transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 38%,transparent)}
.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--accent)}
.stats{list-style:none;margin:40px 0 0;padding:0;display:flex;gap:32px;flex-wrap:wrap}
.stats li{display:grid}
.stats b{font-size:1.8rem;font-weight:800;letter-spacing:-.03em}
.stats span{font-size:13px;color:var(--faint)}

.scope svg{width:100%;height:auto;display:block;border-radius:22px;box-shadow:var(--shadow);border:1px solid var(--line)}
.wave{animation:slide 6s linear infinite}
.w-b{animation-duration:9s;animation-direction:reverse}
.w-c{animation-duration:3s}
@keyframes slide{to{transform:translateX(200px)}}
.ring{transform-box:fill-box;transform-origin:center;animation:ring 2.4s ease-out infinite}
.r2{animation-delay:1.2s}
@keyframes ring{from{transform:scale(1);opacity:.9}to{transform:scale(6);opacity:0}}
.lbl{font:600 13px var(--mono);fill:var(--accent)}
.lbl.dim{fill:var(--faint);font-weight:500;font-size:11px}

/* Projekte */
.grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(min(100%,480px),1fr))}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:16px;
  box-shadow:var(--shadow);overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--c),color-mix(in srgb,var(--c) 30%,transparent))}
.card::after{content:"";position:absolute;width:260px;height:260px;right:-120px;top:-120px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--c) 18%,transparent),transparent 70%);pointer-events:none;transition:transform .4s}
.card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c) 45%,var(--line));
  box-shadow:0 14px 40px color-mix(in srgb,var(--c) 18%,transparent)}
.card:hover::after{transform:scale(1.3)}
.card p{margin:0}
.head{display:flex;gap:16px;align-items:center}
.icon{width:64px;height:64px;flex:none;border-radius:16px;box-shadow:0 6px 16px color-mix(in srgb,var(--c) 35%,transparent);transition:transform .3s}
.card:hover .icon{transform:rotate(-4deg) scale(1.05)}
.sub{color:var(--faint);font-size:14px;margin-top:2px !important}
.card > p:not(.tags):not(.links){color:var(--soft);font-size:16px}
.facts{list-style:none;margin:auto 0 0 !important;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.facts li{font-size:13.5px;color:var(--soft);padding:4px 10px;border-radius:8px;background:color-mix(in srgb,var(--c) 10%,transparent)}
.facts b{color:var(--ink)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags span,.chips li{font:500 12.5px var(--mono);background:var(--chip);color:var(--soft);padding:4px 10px;border-radius:999px;border:1px solid var(--line)}
.links a{font-weight:650;font-size:15px;text-decoration:none;color:var(--c)}
.links a span{display:inline-block;transition:transform .15s}
.links a:hover span{transform:translateX(4px)}

/* Lebenslauf */
.cv{display:grid;gap:28px}
@media (min-width:860px){.cv{grid-template-columns:minmax(0,1fr) 360px}}
.cv h3{margin:0 0 18px;font-size:13px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--faint)}
.timeline{list-style:none;margin:0 0 28px;padding:0;border-left:2px solid var(--line)}
.timeline li{position:relative;padding:0 0 10px 24px;display:grid;gap:2px}
.timeline li::before{content:"";position:absolute;left:-8px;top:4px;width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent)}
.when{font:500 13px var(--mono);color:var(--accent)}
.timeline b{font-size:1.1rem}
.where{color:var(--faint);font-size:15px}
.li-card{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:16px;background:var(--surface);border:1px solid var(--line);
  text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:transform .15s,border-color .15s}
.li-card:hover{transform:translateY(-2px);border-color:#0a66c2}
.li-card span{display:grid;font-size:14.5px;color:var(--soft)}
.li-card span b{color:var(--ink);font-size:16px}
.li-card i{margin-left:auto;font-style:normal;font-size:20px;color:#0a66c2;transition:transform .15s}
.li-card:hover i{transform:translateX(4px)}
.side{align-self:start;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:var(--shadow)}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}

/* Kontakt */
.contact{padding-bottom:88px}
.contact-box{border-radius:24px;padding:clamp(28px,5vw,48px);border:1px solid var(--line);box-shadow:var(--shadow);
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,var(--surface)),color-mix(in srgb,var(--violet) 10%,var(--surface)))}
.contact-box h2{margin-bottom:12px}
.contact-box > p:not(.cta):not(.eyebrow){color:var(--soft);margin:0}

footer{max-width:1120px;margin:0 auto;padding:24px 16px 40px;border-top:1px solid var(--line);display:flex;gap:20px;flex-wrap:wrap;font-size:14px;color:var(--faint)}
footer a{color:var(--faint)}
footer a:hover{color:var(--ink)}

/* Einblenden beim Scrollen */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.in{opacity:1;transform:none}
.js .grid .reveal:nth-child(2){transition-delay:.08s}
.js .grid .reveal:nth-child(3){transition-delay:.16s}
.js .grid .reveal:nth-child(4){transition-delay:.24s}

/* Rechtliches */
.legal{max-width:720px;padding-top:56px;padding-bottom:72px}
.legal h1{font-size:2.2rem;margin-bottom:24px}
.legal h2{font-size:1.2rem;margin:28px 0 8px}
.legal p{color:var(--soft)}

@media (max-width:560px){
  .top{padding-block:10px}.mark{font-size:13px}.mark img{display:none}.top nav{gap:0}.top nav a{font-size:13.5px;padding:6px 7px}
  .hero{padding-top:48px}
  section{padding-top:72px}
  .card{padding:22px}
  .stats{gap:22px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .js .reveal{opacity:1;transform:none}
}

/* Kopf-Wortmarke */
.mark b{font-weight:600}

/* Technik-Laufband */
.marquee{margin:64px calc(50% - 50vw) 0;overflow:hidden;border-block:1px solid var(--line);background:color-mix(in srgb,var(--surface) 60%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.track{display:flex;gap:44px;width:max-content;padding:16px 0;animation:marq 40s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.track span{font:500 15px var(--mono);color:var(--soft);white-space:nowrap;display:flex;align-items:center;gap:44px}
.track span::after{content:"✦";color:var(--accent);font-size:11px}
@keyframes marq{to{transform:translateX(-50%)}}

/* Lichtschein, der der Maus folgt */
.card{--mx:50%;--my:0%}
.card .glow{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(420px circle at var(--mx) var(--my),color-mix(in srgb,var(--c) 16%,transparent),transparent 45%)}
.card:hover .glow{opacity:1}

/* Projekt-Grafiken */
.viz{position:relative;height:124px;margin:-28px -28px 4px;border-bottom:1px solid var(--line);overflow:hidden;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 9%,var(--surface)),var(--surface))}
.viz .tag{position:absolute;right:12px;top:14px;font:600 11.5px var(--mono);color:var(--c);background:var(--surface);
  border:1px solid color-mix(in srgb,var(--c) 35%,var(--line));padding:3px 9px;border-radius:999px}
.card::before{z-index:2}

.v-spec{display:flex;align-items:flex-end;gap:4px;padding:0 20px 0}
.v-spec i{flex:1;height:calc(var(--h)*1%);border-radius:4px 4px 0 0;transform-origin:bottom;
  background:linear-gradient(180deg,var(--c),color-mix(in srgb,var(--c) 25%,transparent));animation:eq 1.6s ease-in-out var(--d) infinite alternate}
.v-spec i:nth-child(10){background:linear-gradient(180deg,#ff6b6b,color-mix(in srgb,#ff6b6b 30%,transparent));animation-duration:.9s}
@keyframes eq{from{transform:scaleY(.45)}to{transform:scaleY(1)}}

.v-player{display:grid;justify-items:start;align-content:start;padding:16px 20px 0}
.v-player .screen{width:150px;height:72px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,#7c5cff,#22d3ee);box-shadow:0 8px 20px rgba(124,92,255,.35)}
.v-player .bar{position:absolute;left:20px;right:20px;bottom:14px;height:6px;border-radius:3px;background:var(--line)}
.v-player .bar b{position:absolute;top:0;height:100%;border-radius:3px}
.v-player .sp{background:#00d400}
.v-player .hl{width:4px;background:#ff2fa6}
.v-player .pos{position:absolute;top:-4px;width:14px;height:14px;border-radius:50%;background:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 25%,transparent);
  animation:play 8s linear infinite}
@keyframes play{0%{left:0}12%{left:12%}12.1%{left:21%}58%{left:58%}58.1%{left:65%}100%{left:100%}}

.v-map svg{width:100%;height:100%;display:block;overflow:visible}
.v-map .route{animation:dash 1.2s linear infinite}
@keyframes dash{to{stroke-dashoffset:-18}}

.v-radar{display:flex;align-items:center;gap:24px;padding:0 24px}
.radar{position:relative;width:104px;height:104px;border-radius:50%;flex:none;overflow:hidden;
  background:repeating-radial-gradient(circle,transparent 0 16px,color-mix(in srgb,var(--c) 30%,transparent) 16px 17px),color-mix(in srgb,var(--c) 6%,var(--surface));
  border:1px solid color-mix(in srgb,var(--c) 40%,var(--line))}
.sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,color-mix(in srgb,var(--c) 55%,transparent),transparent 25%);animation:spin 3s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.radar b{position:absolute;left:var(--x);top:var(--y);width:8px;height:8px;margin:-4px;border-radius:50%;background:var(--c);
  animation:blip 3s ease-out var(--dl,0s) infinite}
@keyframes blip{0%,100%{opacity:.15}10%{opacity:1;box-shadow:0 0 0 6px color-mix(in srgb,var(--c) 25%,transparent)}}
.rssi{display:grid;gap:2px}
.rssi span{font:600 11px var(--mono);color:var(--faint);letter-spacing:.08em}
.rssi em{font:700 22px var(--mono);font-style:normal;color:var(--ink)}
.bars{display:flex;align-items:flex-end;gap:4px;height:22px}
.bars i{width:7px;border-radius:2px;background:var(--c);animation:sig 2.4s ease-in-out infinite}
.bars i:nth-child(1){height:30%}.bars i:nth-child(2){height:55%;animation-delay:.2s}.bars i:nth-child(3){height:80%;animation-delay:.4s}.bars i:nth-child(4){height:100%;animation-delay:.6s}
@keyframes sig{0%,100%{opacity:1}50%{opacity:.25}}

/* Oszilloskop folgt der Maus */
.scope{cursor:crosshair}
.scope .cursor-line{stroke:var(--accent);stroke-width:1;stroke-dasharray:3 4;opacity:0;transition:opacity .2s}
.scope:hover .cursor-line{opacity:.8}

@media (max-width:560px){.viz{margin:-22px -22px 4px;height:110px}.v-player .screen{width:110px;height:60px}.viz .tag{font-size:10.5px}.v-radar{gap:16px;padding:0 18px}.radar{width:88px;height:88px}}

/* Lebenslauf, erweitert */
.timeline + h3{margin-top:12px}
.timeline li{padding-bottom:24px}
.timeline li::before{background:var(--surface);border:3px solid var(--accent);box-shadow:none;width:14px;height:14px}
.timeline li.now::before{background:var(--accent);box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent);animation:pulse 2s infinite}
.timeline.edu li::before{border-color:var(--violet)}
.timeline p{margin:6px 0 0;font-size:15px;color:var(--soft)}
.side-stack{display:grid;gap:18px;align-self:start}
.certs,.langs{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.certs li > *{display:flex;gap:12px;align-items:flex-start;text-decoration:none;color:var(--soft);font-size:14px}
.certs a:hover b{color:var(--accent)}
.certs b{display:block;color:var(--ink);font-size:15px;transition:color .15s}
.badge{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-weight:800;font-size:14px;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--violet))}
.langs li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;font-size:14px}
.langs span{color:var(--faint)}
.langs i{grid-column:1/-1;height:5px;border-radius:3px;background:var(--chip);position:relative;overflow:hidden}
.langs i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--l);border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--violet))}
.side-stack .li-card{padding:16px 18px}
.skills-title{margin:56px 0 18px;font-size:13px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--faint)}
.skills{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.skill{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px 22px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.skill::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--c)}
.skill h4{margin:0 0 12px;font-size:1rem;display:flex;align-items:center;gap:8px}
.skill h4::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c)}
.skill .chips li{font-size:12px}
.js .skills .reveal:nth-child(2){transition-delay:.06s}.js .skills .reveal:nth-child(3){transition-delay:.12s}
.js .skills .reveal:nth-child(4){transition-delay:.18s}.js .skills .reveal:nth-child(5){transition-delay:.24s}.js .skills .reveal:nth-child(6){transition-delay:.3s}