:root{--bg:#090d0d;--panel:#111817;--panel2:#151d1b;--ink:#e7eee9;--muted:#9ba9a2;--line:#35413b;--green:#82f6b7;--green-dim:#529b76;--amber:#d89a4a;--mono:"DM Mono",monospace;--sans:"Manrope",Arial,sans-serif;--max:1240px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:92px}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.55;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}img,video{display:block;max-width:100%}.shell{width:min(var(--max),calc(100% - 80px));margin-inline:auto}.grain{position:fixed;inset:0;pointer-events:none;z-index:10;opacity:.07;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(180,255,211,.13) 4px);mix-blend-mode:screen}
.site-header{height:82px;width:min(var(--max),calc(100% - 80px));margin:auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:relative;z-index:11}.brand{display:flex;align-items:center;gap:10px;font:500 15px var(--mono);letter-spacing:.12em}.brand-mark{color:var(--green);font-size:18px;font-weight:500}.brand-dash{color:var(--amber);padding-inline:2px}.main-nav{display:flex;align-items:center;gap:38px;font-size:13px;color:#c1cbc4}.main-nav a{transition:color .2s}.main-nav a:hover,.text-link:hover{color:var(--green)}.nav-contact{border:1px solid var(--line);padding:10px 15px}.nav-contact span{color:var(--green);margin-left:9px}.menu-toggle{display:none;background:none;border:0;color:var(--ink);font:12px var(--mono)}
.hero{min-height:650px;display:grid;grid-template-columns:.96fr 1.04fr;align-items:center;gap:52px;padding-top:30px;padding-bottom:82px;position:relative}.eyebrow,.section-kicker,.hero-tags,.media-topline,.media-caption,.hero-index,.project-type,.tool-tags,.image-label,.project-number,.site-footer{font-family:var(--mono);letter-spacing:.08em}.eyebrow{font-size:11px;color:var(--muted);margin:0 0 24px}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 12px rgba(130,246,183,.65);vertical-align:1px;margin-right:8px}.eyebrow-sep{color:var(--amber);padding:0 7px}.hero h1{font-size:clamp(42px,5.2vw,70px);letter-spacing:-.065em;line-height:1.04;margin:0;max-width:620px;font-weight:700}.hero h1 span,.intro-grid h2 span,.section-heading h2 span,.profile-copy h2 span,.contact h2 span{color:var(--green)}.hero-lead{color:#aebbb3;font-size:16px;max-width:500px;line-height:1.8;margin:25px 0 29px}.hero-actions{display:flex;align-items:center;gap:28px}.button{min-height:48px;padding:0 18px;display:inline-flex;align-items:center;gap:25px;font-size:12px;font-weight:700;letter-spacing:.03em;transition:transform .2s,background .2s}.button:hover{transform:translateY(-2px)}.button-primary{background:var(--green);color:#0a1510}.button-primary span{font-size:17px}.text-link{font-size:12px;font-weight:700;letter-spacing:.03em;color:#dce7df}.text-link span{color:var(--green);margin-left:8px}.hero-tags{margin-top:34px;display:flex;align-items:center;gap:10px;font-size:9px;color:#829188}.hero-tags i{width:3px;height:3px;background:var(--amber);border-radius:50%}
.hero-media{align-self:center;background:var(--panel);padding:14px;border:1px solid #34423a;box-shadow:14px 14px 0 #101715;position:relative}.media-topline,.media-caption{display:flex;align-items:center;justify-content:space-between;font-size:9px;color:#9aa9a0}.media-topline{height:26px;padding:0 3px 9px}.media-topline .status-dot{width:6px;height:6px}.video-frame{position:relative;background:#050807;overflow:hidden;aspect-ratio:16/9}.video-frame video{width:100%;height:100%;object-fit:cover}.frame-corner{position:absolute;width:18px;height:18px;border-color:var(--green);pointer-events:none}.corner-tl{left:8px;top:8px;border-top:1px solid;border-left:1px solid}.corner-br{right:8px;bottom:8px;border-right:1px solid;border-bottom:1px solid}.media-caption{padding:11px 3px 0}.live-label{color:var(--green)}.hero-index{position:absolute;bottom:25px;left:0;right:0;display:flex;justify-content:space-between;font-size:9px;color:#718078}.hero-index span:last-child{color:var(--green);font-size:16px}
.intro-band{background:#101715;border-block:1px solid #25312b;padding:95px 0 100px}.intro-grid{display:grid;grid-template-columns:.65fr 1.2fr .7fr;gap:35px;align-items:start}.section-kicker{font-size:10px;color:var(--green);margin:7px 0 0;white-space:nowrap}.section-kicker span{color:#75847a;margin-left:12px}.intro-grid h2,.section-heading h2,.profile-copy h2{font-size:clamp(39px,5vw,62px);letter-spacing:-.06em;line-height:1.08;margin:0 0 22px}.intro-text,.profile-copy>p{max-width:610px;font-size:15px;line-height:1.9;color:#aab7af;margin:0}.approach-note{border-left:1px solid var(--line);padding:13px 0 13px 25px;margin-top:6px}.note-symbol{color:var(--amber);font-size:24px}.approach-note p{color:#adbab2;font:12px/1.9 var(--mono);margin:9px 0 0}.approach-note strong{color:var(--ink);font-weight:500}
.projects{padding-top:116px;padding-bottom:122px}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:47px}.section-heading h2{margin:19px 0 0}.section-aside{max-width:330px;font-size:13px;color:var(--muted);line-height:1.8;margin:0 0 5px}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:42px 28px}.project-card{min-width:0}.project-card-large{grid-column:1/-1}.project-image{height:auto;aspect-ratio:16/8.2;background:#141b19;position:relative;overflow:hidden;border:1px solid #303a34}.project-card:not(.project-card-large) .project-image{aspect-ratio:16/9}.project-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s,filter .5s;filter:saturate(.82)}.project-card:hover .project-image img{transform:scale(1.025);filter:saturate(1)}.project-number{position:absolute;top:14px;left:14px;background:rgba(7,12,14,.8);color:var(--green);font-size:10px;padding:6px 9px}.image-label{position:absolute;bottom:0;left:0;background:rgba(7,12,14,.86);color:#d9e7de;font-size:9px;padding:10px 13px}.project-info{display:grid;grid-template-columns:1fr 1.1fr;gap:15px 22px;padding:18px 1px 0}.project-type{font-size:9px;color:var(--amber);margin:0 0 5px}.project-info h3{font-size:21px;letter-spacing:-.03em;margin:0}.project-info>p{font-size:12px;color:var(--muted);line-height:1.7;margin:0}.tool-tags{grid-column:1/-1;display:flex;gap:8px}.tool-tags span{border:1px solid #2b3730;color:#91a097;font-size:8px;padding:5px 8px}
.profile-band{background:#101715;border-block:1px solid #25312b;padding:102px 0}.profile-grid{display:grid;grid-template-columns:.65fr 1fr .85fr;gap:40px}.profile-copy h2{font-size:clamp(39px,4.4vw,55px);margin-bottom:23px}.profile-copy>p{font-size:14px;margin-bottom:24px}.profile-list{border-top:1px solid var(--line);align-self:center}.profile-list div{display:flex;align-items:center;gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}.profile-list span{font:10px var(--mono);color:var(--amber)}.profile-list p{font-size:12px;margin:0;color:#c5d0c8}
.contact{padding-top:112px;padding-bottom:95px}.contact h2{font-size:clamp(64px,10vw,126px);letter-spacing:-.08em;line-height:.88;margin:25px 0 38px}.contact-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:22px}.contact-bottom p{font-size:13px;color:var(--muted);margin:0}.site-footer{border-top:1px solid var(--line);min-height:84px;display:flex;align-items:center;justify-content:space-between;gap:16px;color:#819087;font-size:9px}.site-footer .brand{color:var(--ink);font-size:11px}.site-footer>a:hover{color:var(--green)}
@media(max-width:900px){.shell,.site-header{width:min(100% - 48px,var(--max))}.hero{grid-template-columns:1fr;gap:40px;padding-top:72px;padding-bottom:90px}.hero-copy{max-width:680px}.hero-media{max-width:820px}.hero-index{bottom:24px}.intro-grid{grid-template-columns:.4fr 1fr;gap:25px}.approach-note{grid-column:2}.profile-grid{grid-template-columns:.4fr 1fr}.profile-list{grid-column:2}.section-aside{max-width:260px}.intro-band,.profile-band{padding-block:75px}.projects{padding-block:85px}}
@media(max-width:620px){.shell,.site-header{width:calc(100% - 36px)}.site-header{height:68px}.menu-toggle{display:block;cursor:pointer}.menu-toggle span{color:var(--green);font-size:17px;margin-left:5px}.main-nav{display:none;position:absolute;top:67px;left:-18px;right:-18px;padding:18px;background:#101715;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0}.main-nav.is-open{display:flex}.main-nav a{padding:13px 18px}.nav-contact{margin-top:8px}.hero{padding-top:58px;gap:34px}.hero h1{font-size:clamp(39px,11vw,56px)}.eyebrow{font-size:9px}.hero-lead{font-size:14px}.hero-actions{gap:18px;flex-wrap:wrap}.button{min-height:44px;padding-inline:14px}.hero-tags{font-size:8px;gap:7px}.hero-media{padding:9px;box-shadow:7px 7px 0 #101715}.hero-index{font-size:8px}.intro-band,.profile-band{padding-block:62px}.intro-grid,.profile-grid{grid-template-columns:1fr;gap:26px}.section-kicker{font-size:9px}.intro-grid h2,.section-heading h2,.profile-copy h2{font-size:42px}.approach-note,.profile-list{grid-column:auto}.approach-note{margin-left:8px}.projects{padding-block:68px}.section-heading{display:block;margin-bottom:30px}.section-aside{margin-top:21px;font-size:12px}.project-grid{grid-template-columns:1fr;gap:35px}.project-card-large{grid-column:auto}.project-image{aspect-ratio:16/9}.project-info{grid-template-columns:1fr;gap:8px}.project-info>p{max-width:460px}.tool-tags{grid-column:auto;margin-top:4px}.contact{padding-block:74px}.contact h2{font-size:76px}.contact-bottom{align-items:flex-start;flex-direction:column;gap:20px}.site-footer{padding:20px 0;display:grid;grid-template-columns:1fr 1fr;row-gap:12px;font-size:8px}.site-footer>*:nth-child(even){text-align:right}.site-footer .brand{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}

/* Dezente Bedienelemente im Look eines kleinen Retro-Zukunftsmonitors */
.hero-media{box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.video-frame{box-shadow:inset 0 0 0 4px rgba(9,13,13,.82)}
.monitor-control-strip{min-height:54px;margin-top:10px;padding:7px 11px;display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid #344039;border-radius:4px;background:linear-gradient(110deg,rgba(255,255,255,.045),rgba(0,0,0,.13));box-shadow:inset 0 1px rgba(255,255,255,.04)}
.monitor-tuning{display:flex;align-items:center;gap:9px;position:relative;padding-right:2px}.control-label,.control-readout,.monitor-light small{font:8px var(--mono);letter-spacing:.1em;color:#87968d}.dial-ticks{position:absolute;width:43px;height:43px;left:40px;top:50%;transform:translateY(-50%);border-radius:50%;background:repeating-conic-gradient(from 224deg,rgba(195,216,197,.72) 0deg 1deg,transparent 1deg 17deg);mask:radial-gradient(circle,transparent 65%,#000 68% 72%,transparent 75%)}
.dial-knob{width:34px;height:34px;display:block;position:relative;border:1px solid #77847b;border-radius:50%;background:radial-gradient(circle at 34% 28%,#738078 0,#414b44 38%,#1c2420 72%,#0c110f 100%);box-shadow:inset 0 1px 2px rgba(255,255,255,.26),inset 0 -2px 3px rgba(0,0,0,.5)}.dial-knob i{position:absolute;width:2px;height:9px;top:4px;left:15px;border-radius:2px;background:var(--green);box-shadow:0 0 5px rgba(130,246,183,.45);transform:rotate(28deg);transform-origin:50% 13px}.control-readout{padding:5px 8px;border:1px solid #26332c;background:#0b100e;color:#9cafa2;font-size:7px;white-space:nowrap}
.monitor-lights{display:flex;align-items:center;gap:12px}.monitor-light{display:flex;align-items:center;gap:6px}.monitor-light i{width:6px;height:6px;display:block;border-radius:50%;background:#82f6b7;box-shadow:0 0 8px rgba(130,246,183,.7)}.monitor-light .light-amber{background:#dfa557;box-shadow:0 0 8px rgba(223,165,87,.65)}.monitor-light small{font-size:7px;color:#7e8c83}
@media(max-width:620px){.monitor-control-strip{min-height:49px;padding:6px 8px;gap:8px}.monitor-tuning{gap:6px}.control-label{font-size:7px}.dial-ticks{left:32px;width:38px;height:38px}.dial-knob{width:30px;height:30px}.dial-knob i{left:13px;top:3px}.control-readout{font-size:6px;padding:4px 5px}.monitor-lights{gap:7px}.monitor-light{gap:4px}.monitor-light small{font-size:6px}}


/* Dezenter CRT-/Gaming-Touch am Showreel-Monitor */
.hero-media{background:linear-gradient(145deg,#1a2420 0%,#111817 48%,#0b100f 100%);border:1px solid #526052;border-radius:8px;box-shadow:14px 14px 0 #101715,0 22px 48px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.07)}
.media-topline{color:#a5b4a8;text-shadow:0 0 8px rgba(130,246,183,.12)}
.video-frame{border:1px solid rgba(130,246,183,.35);border-radius:5px;box-shadow:inset 0 0 0 4px rgba(9,13,13,.82),0 0 22px rgba(130,246,183,.08);isolation:isolate}
.video-frame video{position:relative;z-index:0;border-radius:3px;filter:saturate(.94) contrast(1.02)}
.video-frame::after{content:"";position:absolute;z-index:1;inset:0;border-radius:3px;pointer-events:none;background:radial-gradient(ellipse at center,transparent 58%,rgba(0,0,0,.22) 100%),repeating-linear-gradient(0deg,transparent 0 3px,rgba(130,246,183,.035) 4px)}
.frame-corner{z-index:2;filter:drop-shadow(0 0 3px rgba(130,246,183,.24))}
.live-label{padding:3px 7px;border:1px solid rgba(130,246,183,.35);background:rgba(9,13,13,.52);text-shadow:0 0 7px rgba(130,246,183,.22)}

/* Alle Projektkarten zeigen das vollständige 16:9-Bild samt eingeblendeten Titelbändern. */
.project-image{aspect-ratio:16/9;background:#090d0d;border-color:#536052;box-shadow:inset 0 0 0 1px rgba(130,246,183,.08)}
.project-card-large .project-image,.project-card:not(.project-card-large) .project-image{aspect-ratio:16/9}
.project-image img{object-fit:contain}
.project-card:hover .project-image img{transform:none;filter:saturate(1)}