@charset "UTF-8";
:root{--paper:#eeeee7;--ink:#29332f;--muted:#606b64;--accent:#866343;--line:#cbd1c7}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}h1,h2,p{margin:0}.wrap{width:min(1180px,calc(100% - 96px));margin-inline:auto}a:focus-visible{outline:3px solid var(--accent);outline-offset:6px}.skip{position:fixed;top:10px;left:10px;transform:translateY(-150%);background:var(--ink);color:white;padding:12px;z-index:10}.skip:focus{transform:none}
.header{display:flex;align-items:center;justify-content:space-between;min-height:90px;border-bottom:1px solid var(--line)}.wordmark{display:block;position:relative;overflow:hidden;width:100px;aspect-ratio:705/400;flex-shrink:0;mix-blend-mode:multiply}.wordmark img{display:block;position:absolute;top:0;left:0;width:145.25%;height:auto;max-width:none;transform:translate(-15.625%,-30.27%)}.header nav{display:flex;gap:32px;font-size:12px}.header nav a:hover,.footer>a:last-child:hover{color:var(--accent)}.header nav span{margin-left:8px}
.hero{position:relative;isolation:isolate;overflow:hidden;padding-block:100px 110px}.hero::before{content:"";position:absolute;z-index:-2;inset:0 0 0 42%;background:linear-gradient(90deg,var(--paper),transparent 85%),url("assets/elektronik.jpg") center/cover;filter:grayscale(.7);opacity:.16;mask-image:linear-gradient(0deg,transparent,#000 25%,#000 80%,transparent)}.hero::after{content:"";position:absolute;z-index:-1;inset:0;background:url("assets/leiterbahnen.svg") right center/min(68vw,950px) auto no-repeat;opacity:.55;pointer-events:none}.hero-copy{position:relative;min-width:0}.eyebrow{text-transform:uppercase;font-size:10px;font-weight:700;letter-spacing:2px}.hero .eyebrow{display:flex;gap:10px;align-items:center;margin-bottom:30px}.signal{height:9px;width:9px;border:2px solid var(--accent);border-radius:50%}h1{max-width:850px;font-size:clamp(48px,5.8vw,78px);line-height:1.06;letter-spacing:-3.7px;font-weight:700}.accent{color:var(--accent)}.intro{max-width:590px;font-size:17px;line-height:1.8;margin-top:28px;color:var(--muted)}.button{display:inline-flex;gap:30px;align-items:center;border:1px solid var(--ink);padding:17px 21px;margin-top:30px;font-size:13px;font-weight:600;background:var(--paper);transition:background .2s,color .2s;border-radius:2px}.button:hover{background:var(--ink);color:var(--paper)}.button span{font-size:20px}
.about{position:relative;isolation:isolate;overflow:hidden;border-top:1px solid var(--line);padding-block:58px 70px;display:grid;grid-template-columns:1fr 2fr;gap:55px}.about::before{content:none}.about>.eyebrow{padding-top:8px}.about>div{min-width:0}h2{font-size:clamp(30px,3vw,40px);line-height:1.2;letter-spacing:-1.4px}.about p:not(.eyebrow){max-width:650px;font-size:16px;line-height:1.8;color:var(--muted);margin-top:20px}.services{display:flex;flex-wrap:wrap;gap:12px 24px;margin:28px 0 0;padding:0;list-style:none}.services li{position:relative;padding-left:15px;font-size:12px}.services li::before{content:"";position:absolute;left:0;top:3px;width:6px;height:6px;border:1px solid var(--accent);border-radius:50%}
.contact{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:var(--paper)}.contact::before{content:"";position:absolute;z-index:-2;inset:0 0 0 55%;background:linear-gradient(90deg,var(--ink),transparent 80%),url("assets/woogiehouse.jpg") center/cover;filter:grayscale(.7);opacity:.12}.contact::after{content:"";position:absolute;z-index:-1;inset:0;background:url("assets/leiterbahnen.svg") right center/700px auto no-repeat;opacity:.23;pointer-events:none}.contact-inner{display:flex;justify-content:space-between;gap:40px;align-items:center;padding-block:58px}.contact .eyebrow{color:#bac5bb;margin-bottom:18px}.contact h2{font-size:clamp(38px,4.4vw,58px);letter-spacing:-2px}.contact h2 span{color:#ba9874}.contact p:not(.eyebrow){color:#cad1c9;font-size:14px;line-height:1.8;margin-top:20px}.contact-link{display:flex;align-items:center;gap:25px;white-space:nowrap;font-size:clamp(20px,2.1vw,28px);letter-spacing:-.5px;border-bottom:1px solid #839187;padding-bottom:12px}.contact-link span{color:#ba9874;font-size:30px}.contact-link:hover{color:#d5b18c}.footer{padding-block:25px;display:flex;align-items:center;justify-content:space-between;gap:25px}.footer .wordmark{width:76px}.footer p,.footer>a:last-child{font-size:11px;color:var(--muted)}
@media(max-width:1000px){.wrap{width:calc(100% - 56px)}.hero{padding-block:75px 85px}.about{grid-template-columns:1fr 2.5fr;gap:25px}.contact-inner{flex-direction:column;align-items:flex-start;gap:28px}}
@media(max-width:650px){.wrap{width:calc(100% - 40px)}.header{min-height:78px}.wordmark{width:85px}.header nav{gap:22px;font-size:12px}.hero{padding-block:56px 60px}.hero::before{inset:0 0 0 25%;opacity:.1}.hero::after{background-size:600px;background-position:35% center;opacity:.28}.hero .eyebrow{margin-bottom:24px}h1{font-size:clamp(40px,10vw,61px);letter-spacing:-2.4px}.intro{margin-top:22px;font-size:15px}.button{margin-top:24px;padding:15px 17px;font-size:12px;gap:22px}.about{grid-template-columns:minmax(0,1fr);gap:22px;padding-block:35px 40px}.about::before{content:none}.about p:not(.eyebrow){font-size:15px}.services{gap:14px 20px;margin-top:22px}.services li{font-size:11px}.contact-inner{padding-block:40px}.contact h2{font-size:42px}.contact p:not(.eyebrow) br{display:none}.contact-link{font-size:24px}.contact::before{inset:0;opacity:.1;background:linear-gradient(90deg,var(--ink),transparent),url("assets/woogiehouse.jpg") center/cover}.footer{flex-wrap:wrap;padding-block:22px;gap:16px}.footer p{order:3;flex-basis:100%}.footer>a:last-child{margin-left:auto}}
.bio{display:grid;grid-template-columns:1fr 2fr;gap:55px;border-top:1px solid var(--line);padding-block:35px 45px}
.bio h2{font-size:24px;letter-spacing:-.5px}
.bio p{max-width:650px;font-size:16px;line-height:1.8;color:var(--muted)}
@media(max-width:1000px){.bio{grid-template-columns:1fr 2.5fr;gap:25px}}
@media(max-width:650px){.bio{grid-template-columns:minmax(0,1fr);gap:16px;padding-block:30px 35px}.bio p{font-size:15px}}
.arrow{display:inline-block;width:11px;height:11px;flex-shrink:0;vertical-align:-1px}
.header nav .arrow{margin-left:8px}
.button .arrow{width:14px;height:14px}
.contact-link .arrow{width:18px;height:18px;color:#ba9874}
.footer .arrow{width:10px;height:10px;margin-left:4px}
.mosaic{column-count:6;column-gap:6px;width:min(900px,calc(100% - 80px));padding:0;margin:0 auto 45px}
.mosaic img{display:block;width:100%;height:auto;margin-bottom:6px;break-inside:avoid;filter:saturate(.5);opacity:.72}
@media(max-width:650px){.mosaic{width:calc(100% - 40px);column-count:4;column-gap:4px;margin-bottom:30px}.mosaic img{margin-bottom:4px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}