@font-face{font-family:"Space Grotesk";font-weight:400;font-display:swap;src:url(./fonts/sg-400.ttf) format("truetype")}
@font-face{font-family:"Space Grotesk";font-weight:500;font-display:swap;src:url(./fonts/sg-500.ttf) format("truetype")}
@font-face{font-family:"Space Grotesk";font-weight:600;font-display:swap;src:url(./fonts/sg-600.ttf) format("truetype")}
@font-face{font-family:"Space Grotesk";font-weight:700;font-display:swap;src:url(./fonts/sg-700.ttf) format("truetype")}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-display:swap;src:url(./fonts/jbmono-400.ttf) format("truetype")}
@font-face{font-family:"JetBrains Mono";font-weight:600;font-display:swap;src:url(./fonts/jbmono-600.ttf) format("truetype")}

:root{
  color-scheme:dark;
  --radius:.75rem;
  --background:oklch(17% .006 160);
  --foreground:oklch(96% .005 150);
  --card:oklch(21% .007 160);
  --primary:oklch(80% .18 152);
  --primary-foreground:oklch(18% .03 160);
  --muted:oklch(25% .008 160);
  --muted-foreground:oklch(70% .012 155);
  --accent:oklch(30% .05 152);
  --border:oklch(100% 0 0/.09);
  --shadow-card:0 1px 0 oklch(100% 0 0/.04) inset,0 10px 30px -15px oklch(0% 0 0/.6);
  --font-sans:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;background:var(--background);color:var(--foreground);font-family:var(--font-sans);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}

.container{width:100%;max-width:72rem;margin-inline:auto;padding-inline:1.25rem}
.section{padding-block:5rem}
@media(min-width:640px){.section{padding-block:7rem}}

/* header */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;border-bottom:1px solid var(--border);background:oklch(17% .006 160/.75);backdrop-filter:blur(12px)}
.bar{display:flex;align-items:center;justify-content:space-between;height:4rem;gap:1rem}
.logo{font-family:var(--font-mono);font-size:.875rem;font-weight:600;text-decoration:none}
.logo span{color:var(--primary)}
.nav{display:flex;gap:1.25rem;font-size:.875rem}
.nav a{color:var(--muted-foreground);text-decoration:none;transition:color .2s}
.nav a:hover{color:var(--foreground)}
@media(max-width:520px){.nav{gap:.75rem;font-size:.8rem}.nav a:nth-child(n+4){display:none}}

/* hero */
.hero{position:relative;display:flex;align-items:center;min-height:100vh;overflow:hidden}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transform:scale(1.05);filter:blur(2px)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,oklch(17% .006 160/.82),oklch(17% .006 160/.94) 70%,var(--background))}
.grid-lines{position:absolute;inset:0;opacity:.4;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(60% 50% at 50% 0%,#000,transparent 75%);-webkit-mask-image:radial-gradient(60% 50% at 50% 0%,#000,transparent 75%)}
.hero-inner{position:relative;padding-top:6rem;padding-bottom:4rem}
.pill{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1.25rem;padding:.25rem .75rem;border:1px solid var(--border);border-radius:999px;background:oklch(21% .007 160/.6);backdrop-filter:blur(8px);font-family:var(--font-mono);font-size:.75rem;color:var(--muted-foreground)}
.dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--primary);animation:pulse 2s ease-in-out infinite}
.hero h1{font-size:clamp(3rem,9vw,6rem);line-height:1.05;font-weight:700;letter-spacing:-.025em}
.lead{margin-top:1.5rem;max-width:42rem;font-size:clamp(1.05rem,2vw,1.25rem);color:var(--muted-foreground)}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.5rem}
.loc{margin-top:2rem;font-family:var(--font-mono);font-size:.8rem;color:var(--muted-foreground)}

.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;border-radius:.5rem;border:1px solid transparent;font-size:.875rem;font-weight:600;text-decoration:none;transition:opacity .2s,background .2s}
.btn-primary{background:var(--primary);color:var(--primary-foreground)}
.btn-primary:hover{opacity:.9}
.btn-outline{border-color:var(--border);background:oklch(21% .007 160/.5)}
.btn-outline:hover{background:var(--muted)}
.btn-ghost{color:var(--muted-foreground)}
.btn-ghost:hover{color:var(--foreground)}

/* sections */
.sec-head{margin-bottom:2.5rem}
.kicker{margin-bottom:.5rem;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--primary)}
h2{font-size:clamp(1.875rem,4vw,2.25rem);font-weight:700;letter-spacing:-.015em}
.sub-h{margin:4rem 0 1.25rem;font-family:var(--font-mono);font-size:.875rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-foreground)}
.card{border:1px solid var(--border);border-radius:var(--radius);background:var(--card);padding:1.5rem;box-shadow:var(--shadow-card)}
.card h4{margin-bottom:.5rem;font-size:1rem;font-weight:600}
.card p{font-size:.9rem;color:var(--muted-foreground)}
.mono-h{font-family:var(--font-mono);font-size:.75rem!important;letter-spacing:.15em;text-transform:uppercase;color:var(--primary);margin-bottom:1rem!important}
.prose{max-width:48rem;color:var(--muted-foreground)}
.prose p+p{margin-top:1rem}
.meta{margin-top:.75rem;font-family:var(--font-mono);font-size:.8rem;color:var(--muted-foreground)}

.about-grid{display:grid;gap:2.5rem}
@media(min-width:900px){.about-grid{grid-template-columns:1.6fr 1fr}}
.about-text p{color:var(--muted-foreground);font-size:1.05rem}
.about-text p+p{margin-top:1rem}
.facts{display:grid;gap:1rem;align-content:start}
.fact-v{font-size:2rem;font-weight:700;color:var(--primary)}
.fact-l{font-size:.85rem;color:var(--muted-foreground)}

/* timeline */
.timeline{display:grid;gap:1.5rem}
.job{display:grid;gap:.5rem}
@media(min-width:760px){.job{grid-template-columns:11rem 1fr;gap:2rem}.job-date{padding-top:1.5rem;text-align:right}}
.job-date{font-family:var(--font-mono);font-size:.8rem;color:var(--muted-foreground)}
.job h3{font-size:1.125rem;font-weight:600}
.org{margin-bottom:.75rem;color:var(--primary)!important;font-size:.9rem}
.points li{position:relative;padding-left:1.25rem;font-size:.9rem;color:var(--muted-foreground)}
.points li+li{margin-top:.4rem}
.points li::before{content:"›";position:absolute;left:0;color:var(--primary)}
.more summary{cursor:pointer;list-style:none;color:var(--primary);font-weight:500}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"▸";display:inline-block;margin-left:.35rem;transition:transform .2s}
.more details[open] summary::after{transform:rotate(90deg)}
.more summary:hover{text-decoration:underline}
.more summary:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:.25rem}
.more details>p{margin:.6rem 0 0}
.more .more-h{color:var(--foreground);font-weight:600}
.more .points{margin-top:.4rem}

/* project */
.shot{margin-top:2.5rem;overflow:hidden;border:1px solid var(--border);border-radius:1rem;box-shadow:var(--shadow-card)}
.cards{display:grid;gap:1rem}
@media(min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.cards-3{grid-template-columns:repeat(3,1fr)}}
.cards-3{margin-top:1rem}
.diagram-wrap{overflow-x:auto;padding:1rem}
.diagram{min-width:720px;width:100%;height:auto}
.node{fill:var(--card);stroke:var(--border);stroke-width:1.5}
.node-hi{fill:var(--accent);stroke:var(--primary)}
.svg-title{fill:var(--foreground);font:600 13px var(--font-sans)}
.svg-sub{fill:var(--muted-foreground);font:10px var(--font-mono)}
.flow-line{stroke:var(--primary);stroke-width:1.5;stroke-dasharray:5 5;animation:flow 1s linear infinite}
.arrow-head{fill:var(--primary)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips li{padding:.25rem .75rem;border:1px solid var(--border);border-radius:999px;background:var(--muted);font-family:var(--font-mono);font-size:.75rem}
.workflow{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));align-items:stretch}
.workflow-card{position:relative;display:flex;min-height:13rem;flex-direction:column;padding:1.25rem;border:1px solid var(--border);border-radius:1rem;background:var(--card);box-shadow:var(--shadow-card)}
.workflow-card h4{margin-bottom:.65rem;font-size:1.15rem;line-height:1.2}
.workflow-card p{font-size:.9rem;line-height:1.45;color:var(--muted-foreground)}
.workflow-card span{margin-top:auto;padding-top:1rem;font-family:var(--font-mono);font-size:.75rem;color:var(--primary)}
.workflow-card-accent{border-color:oklch(65% .17 152/.8)}
.workflow-card-gate::before{position:absolute;top:-.85rem;right:.9rem;content:"PRÜFPUNKT";padding:.22rem .5rem;border-radius:999px;background:var(--primary);color:var(--primary-foreground);font-family:var(--font-mono);font-size:.62rem;font-weight:600;letter-spacing:.06em}
.workflow-card-todo::before{position:absolute;top:-.85rem;right:.9rem;content:"TODO";padding:.22rem .5rem;border-radius:999px;background:var(--muted-foreground);color:var(--background);font-family:var(--font-mono);font-size:.62rem;font-weight:600;letter-spacing:.06em}
.workflow-card code{font-family:var(--font-mono);font-size:.85em}
@media(min-width:900px){.workflow{grid-template-columns:repeat(4,1fr);gap:1.75rem}.workflow-card{min-width:0;padding:1.1rem}.workflow-card h4{font-size:1.05rem}.workflow-card p{font-size:.82rem}.workflow-card span{font-size:.68rem}.workflow-card:nth-child(5){grid-column:4;grid-row:2}.workflow-card:nth-child(6){grid-column:3;grid-row:2}.workflow-card:nth-child(7){grid-column:2;grid-row:2}.workflow-card:nth-child(8){grid-column:1;grid-row:2}.workflow-card:nth-child(-n+3)::after,.workflow-card:nth-child(5)::after,.workflow-card:nth-child(6)::after,.workflow-card:nth-child(7)::after{position:absolute;z-index:1;width:1rem;height:1rem;content:"";border-top:2px solid var(--muted-foreground);border-right:2px solid var(--muted-foreground)}.workflow-card:nth-child(-n+3)::after{top:50%;right:-1.45rem;transform:translateY(-50%) rotate(45deg)}.workflow-card:nth-child(4)::after{position:absolute;right:50%;bottom:-1.45rem;z-index:1;width:1rem;height:1rem;content:"";border-right:2px solid var(--muted-foreground);border-bottom:2px solid var(--muted-foreground);transform:translateX(50%) rotate(45deg)}.workflow-card:nth-child(5)::after,.workflow-card:nth-child(6)::after,.workflow-card:nth-child(7)::after{top:50%;left:-1.45rem;transform:translateY(-50%) rotate(-135deg)}}
.practices{padding:1.5rem;border:1px solid oklch(80% .18 152/.4);border-radius:1rem;background:oklch(30% .05 152/.4)}
@media(min-width:640px){.practices{padding:2.5rem}}
.practices-intro{margin-bottom:2rem;font-size:1.25rem;font-weight:600}
.practice-list{display:grid;gap:1.5rem}
@media(min-width:760px){.practice-list{grid-template-columns:repeat(2,1fr);gap:2rem 2.5rem}}
.practice-list li{display:flex;gap:1rem}
.num{font-family:var(--font-mono);font-size:.875rem;color:var(--primary)}
.practice-list h4{margin-bottom:.25rem;font-weight:600}
.practice-list p{font-size:.9rem;color:var(--muted-foreground)}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media(min-width:640px){.stats{grid-template-columns:repeat(5,1fr)}}
.stat{padding:1.25rem;text-align:center}
.stat-v{font-size:2rem;font-weight:700;color:var(--primary);font-variant-numeric:tabular-nums}
.stat-l{margin-top:.25rem;font-size:.75rem;color:var(--muted-foreground)}
.links p{max-width:42rem}
.links .actions{margin-top:1.5rem}
#project .lead,#project .prose,#project .links p{max-width:none}
.skill-grid{display:grid;gap:1rem}
@media(min-width:760px){.skill-grid{grid-template-columns:repeat(2,1fr)}}
.contact{padding:2rem}
@media(min-width:640px){.contact{padding:3rem}}
.contact .lead{margin-top:0}

/* footer */
.site-footer{border-top:1px solid var(--border);padding-block:2rem;font-size:.85rem;color:var(--muted-foreground)}
.foot{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between}
.foot nav{display:flex;gap:1.25rem}
.foot a{text-decoration:none}
.foot a:hover{color:var(--foreground);text-decoration:underline}

/* legal pages */
.legal{max-width:48rem;padding-block:4rem;display:grid;gap:1rem}
.legal h1{font-size:1.75rem;font-weight:600;letter-spacing:-.01em}
.legal h2{padding-top:1rem;font-size:1.25rem;font-weight:600}
.legal h3{padding-top:.5rem;font-size:1rem;font-weight:500}
.legal h4{font-size:.875rem;font-weight:500}
.legal p,.legal li{font-size:.875rem;color:var(--muted-foreground)}
.legal ul{list-style:disc;padding-left:1.5rem;display:grid;gap:.25rem}
.legal a{text-underline-offset:4px}
.legal .back{font-size:.875rem;color:var(--muted-foreground)}
.legal .back:hover,.legal a:hover{text-decoration:underline}

/* reveal on scroll (script.js adds .js) */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s,transform .7s}
.js .reveal.is-visible{opacity:1;transform:none}
@keyframes flow{to{stroke-dashoffset:-20}}
@keyframes pulse{50%{opacity:.4}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .flow-line,.dot{animation:none}
}

/* project status */
.badge{display:inline-block;margin-left:.5rem;padding:.2rem .65rem;border:1px solid oklch(80% .18 152/.5);border-radius:999px;background:var(--accent);font-family:var(--font-mono);font-size:.7rem;font-weight:400;letter-spacing:.05em;text-transform:uppercase;color:var(--primary);vertical-align:middle}
.notice{margin-bottom:1.5rem;padding:1rem 1.25rem;border:1px solid oklch(80% .18 152/.4);border-left-width:4px;border-radius:var(--radius);background:oklch(30% .05 152/.35);font-size:.95rem;color:var(--foreground)}