@font-face{font-family:Manrope;src:url('assets/Manrope.ttf') format('truetype');font-weight:200 800;font-display:swap}
@font-face{font-family:Barlow;src:url('assets/BarlowCondensed-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
*{box-sizing:border-box}
body{margin:0;color:#121519;background:#fff;font:clamp(15px,1.18vw,20px)/1.48 Manrope,Arial,sans-serif}
a{color:inherit;text-underline-offset:.18em}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid #4982a8;outline-offset:4px}
header{background:#15191d;color:white}
.bar,footer,.services,.contact{padding-inline:clamp(20px,2.1vw,80px)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:22px;padding-block:.28em}
.brand,nav a,.cta,.contactintro a{text-decoration:none}
.brand{display:flex;align-items:center;gap:1.25em}
.brand b{display:block;font-size:clamp(21px,2.02vw,67px);line-height:1.15}
.brand small{display:block;font-size:clamp(12px,1.3vw,43px);letter-spacing:.018em}
.slashes{color:#83bee6;font:italic 900 clamp(34px,3.5vw,110px)/1 Arial;letter-spacing:-.1em}
nav{display:flex;gap:clamp(18px,5vw,160px);font-weight:650}
.hero{position:relative;isolation:isolate;background:linear-gradient(120deg,#101416,#1d2022 54%,#292a2a);color:white;min-height:35.4vw;display:flex;align-items:center}
.photo{position:absolute;z-index:-1;right:0;inset-block:0;width:60%;background:url('assets/arbeitsplatz.png') center right/100% 100% no-repeat;mask-image:linear-gradient(to right,transparent,#000 13%)}
.intro{padding:4vw 0 4.5vw 5.5vw;width:45%}
h1,h2,p{margin:0}
.intro h1{font-size:clamp(32px,3.05vw,116px);line-height:1.13;letter-spacing:-.035em;margin-bottom:1.28vw}
.intro p{font-size:clamp(17px,1.58vw,62px);max-width:35vw;line-height:1.43;margin-top:.65em}
.cta,button{display:inline-flex;align-items:center;gap:1em;border:0;border-radius:4px;font:700 1em Manrope,Arial;cursor:pointer}
.cta{margin-top:2.45vw;background:white;color:#111;padding:.44em 1.12em;font-size:clamp(17px,1.6vw,60px)}
.cta span{font-size:1.35em;line-height:1}
.services{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding-block:2.65vw;gap:1.65vw}
.services article{display:flex;gap:1.45vw}
.services article+article{border-left:1px solid #d9dde0;padding-left:1.45vw}
.services svg{width:2.8vw;height:2.8vw;flex:none;fill:none;stroke:#335e7a;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.services h2,.contact h2{font:700 clamp(22px,1.95vw,75px)/1.1 Barlow,Arial,sans-serif}
.services p{margin-top:.56em;font-size:clamp(14px,1.13vw,42px);line-height:1.45}
.contact{display:grid;grid-template-columns:36% 1fr;gap:2.45vw;padding-block:1.8vw;background:#f6f7f8}
.contactintro{border-right:1px solid #cbd1d5;padding:2.4vw 1vw 0 0}
.contact h2{font-size:clamp(28px,2.65vw,100px)}
.contactintro p,.contactintro a{font-size:clamp(16px,1.49vw,54px);margin-top:.7em}
.contactintro a{display:inline-block;margin-top:1.6em;overflow-wrap:anywhere}
.contactintro a span{color:#395f78}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:1.4vw}
label{display:block;font-weight:700;font-size:clamp(14px,1.06vw,38px)}
input,textarea{display:block;width:100%;margin:.34em 0 .65em;background:#fff;border:1px solid #99a4b0;border-radius:5px;padding:.65em .9em;font:400 1em/1.5 Manrope,sans-serif;color:#161a1e}
textarea{min-height:9vw;resize:vertical}
.send{display:flex;justify-content:space-between;align-items:center;gap:16px}
.send p,#form-status{font-size:clamp(12px,.91vw,32px)}
button{background:#202428;color:white;padding:.7em 1.25em;white-space:nowrap}
button:disabled{opacity:.6}
#form-status:not(:empty){margin-top:12px}
footer{display:flex;justify-content:space-between;gap:22px;padding-block:1.5vw;border-top:1px solid #cbd0d4;font-size:clamp(12px,1vw,37px)}
footer nav{gap:3vw;font-weight:400}
.skip,.trap{position:absolute;left:-10000px}.skip:focus{left:10px;z-index:5;background:white;padding:10px}
.legal{max-width:760px;margin:auto;padding:clamp(30px,5vw,76px) 24px;font-size:16px;line-height:1.7}
.legal h1{font-size:clamp(32px,5vw,48px);margin:22px 0;overflow-wrap:anywhere}
.legal h2{font-size:22px;margin:26px 0 8px}.legal p{margin:10px 0}.legal address{font-style:normal}
@media(max-width:840px){.services{grid-template-columns:1fr 1fr;gap:24px}.services article+article{border:0;padding:0}.services svg{width:32px;height:32px}.contact{grid-template-columns:1fr 1.45fr}.intro{width:50%;padding-left:4vw}.intro p{max-width:39vw}}
@media(max-width:620px){.bar{padding-block:12px;gap:8px}.brand{gap:10px}.brand b{font-size:17px}.brand small{font-size:10px}.slashes{font-size:30px}nav{font-size:12px;gap:14px}.hero{display:flex;flex-direction:column;align-items:stretch}.intro{order:0;width:100%;padding:32px 22px 22px}.intro h1{font-size:34px;margin-bottom:16px}.intro p{max-width:33em;font-size:16px}.cta{margin-top:20px}.photo{order:1;position:relative;inset:auto;width:100%;aspect-ratio:2.5;background-size:cover;mask-image:none;background-position:center 34%}.services{padding-block:24px}.services article{gap:8px}.services svg{width:22px;height:22px}.services h2{font-size:21px}.services p{font-size:13px}.contact{grid-template-columns:1fr;padding-block:26px;gap:20px}.contactintro{border-right:0;padding:0}.contactintro a{margin-top:10px}.pair{gap:12px}.send{align-items:flex-start;flex-direction:column}input,textarea{font-size:16px}footer{padding-block:18px}}
@media(max-width:360px){.services{grid-template-columns:1fr}.pair{grid-template-columns:1fr}.brand small{letter-spacing:0}}