@property --gradientColor1{syntax:'<color>';initial-value:rgba(68,92,119,0.75);inherits:false}@property --gradientColor2{syntax:'<color>';initial-value:rgba(64,85,111,0.75);inherits:false}*{box-sizing:border-box}@font-face{font-family:'Outfit';font-style:normal;font-weight:1 999;font-display:swap;src:url("../fonts/Outfit-VariableFont.woff2") format("woff2")}@keyframes fadeIn{from{opacity:0}to{opacity:1}}html{scroll-behavior:smooth;background-color:#42405b}body{font-family:"Outfit", Arial, Helvetica, sans-serif;font-size:16px;font-weight:250;line-height:1.5;margin:0;color:#333146;background-color:#42405b}body>header{position:fixed;z-index:100;width:100%;padding:2rem;top:0;transition:transform .4s ease-out}body>header #logo{width:16rem;transform:translateX(calc(-10rem + 50vw));position:relative;color:white;transition:opacity .4s ease-in-out}.scrolled #logo{opacity:0}.scrolled header{transform:translateY(-100%);transition:transform .8s ease-in}body>header #logo svg path{opacity:0;transition:.2s opacity ease-in-out}body>header #logo svg path.barely-visible{opacity:.05}body>header #logo svg path.visible{opacity:.3;transition:0.2s opacity cubic-bezier(0.4, 0.27, 0.14, 5)}body>header #logo svg path.hover{opacity:1 !important;color:oklch(92% 0.1654 147);filter:drop-shadow(0px 0px 7px rgba(255,255,255,0.7))}body>header img{height:100%}body>section{--dividerAngle: 5vw;min-height:calc(100vh + var(--dividerAngle));padding:4rem 2rem;display:flex;flex-direction:column;justify-content:center;text-align:center;overflow-x:hidden}body>section:not(:first-child){margin-top:calc(var(--dividerAngle) * -1);clip-path:polygon(0 var(--dividerAngle), 100% 0, 100% 100%, 0 100%)}h1,h2,h3{opacity:.95}.dark{color:#FFF}.grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));grid-gap:8rem}.columns{display:flex;flex-wrap:wrap}.columns>*{flex-grow:1}.slider{overflow-x:scroll;scroll-snap-type:x mandatory;display:flex;scrollbar-width:none}.slider+nav{margin-top:5rem}.slider+nav button{border:none;background:none;line-height:0;color:inherit;border-radius:10px;padding:10px 25px;transition:all .2s ease-in-out;cursor:pointer}.slider+nav button img{position:relative;transition:all .1s ease-in-out;left:0}.slider+nav button:hover{background-color:rgba(51,49,70,0.1)}.slider+nav button:hover img{transition:all 0.4s cubic-bezier(0.2, 0.07, 0, 5)}.slider+nav button:active{background-color:rgba(51,49,70,0.2)}.slider+nav button.prev{color:blue;padding-right:15px}.slider+nav button.prev img{transform:rotate(180deg)}.slider+nav button.prev:hover img{left:-5px}.slider+nav button.next{padding-left:15px}.slider+nav button.next:hover img{left:5px}.slider>div{flex-shrink:0;max-width:calc(100% - 8rem);min-width:2rem;padding:0 calc(max(min(2vw, 4rem), 1rem));opacity:.3;transition:.3s all ease-out;filter:blur(3px);cursor:pointer}.slider>div.spacer{width:50%}.slider>div:not(.spacer){scroll-snap-align:center}.slider>div.large{width:80%}.slider>div.active{opacity:1;filter:blur(0);cursor:unset}.slider::-webkit-scrollbar{display:none}#hero{background-image:linear-gradient(135deg, #49617e, #36485E);color:#FFF}#hero h1{font-size:min(16vw, 10rem);margin:6rem 0 0;opacity:0;animation:fadeIn 1.5s ease-in-out forwards}#hero p{opacity:0;text-align:justify;margin:0 auto 1.5rem;font-size:calc(max(min(2vw, 1.3rem), 16px));max-width:calc(max(min(65vw, 41rem), 6rem));transition:all .5s ease-in-out;transform:translateY(-10px);color:#b4c3d6}.scrolled #hero p,.timeout #hero p{opacity:1 !important;transform:translateY(10px)}#hero #scrollDown{position:absolute;bottom:2.8vw;right:20px;display:block;transition:opacity .2s ease-in-out;width:15px;height:15px;border-top:2px solid #FFF;border-right:2px solid #FFF;transform:rotate(135deg)}@media (max-width: 1150px){#hero #scrollDown{display:none}}.scrolled #hero #scrollDown{opacity:0}#hero #scrollDown::after{content:"";display:block;width:2px;height:25px;background-color:#FFF;transform:rotate(45deg) translate(-0.5px, -6px);left:0;top:0}.timeout:not(.scrolled) #hero #scrollDown{animation:scrollDownTextAnimation 5s ease infinite}@keyframes scrollDownTextAnimation{0%,0.5%,100%{bottom:2.8vw}4%{bottom:0}35%{bottom:0.75vw}80%{bottom:0.75vw;opacity:0}7.75%{bottom:1.75vw}}#technologies{background-image:linear-gradient(135deg, #d1ffd6, oklch(92% 0.1654 147));padding:4rem 0}.timeout:not(.scrolled) #technologies{animation:scrollDownAnimation 5s ease infinite}@keyframes scrollDownAnimation{0%,40%,100%{margin-top:-5vw;clip-path:polygon(0 5vw, 100% 0, 100% 100%, 0 100%)}3.5%,10.5%,30%{margin-top:0;clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%)}7%{margin-top:-1.2vw;clip-path:polygon(0 1.2vw, 100% 0, 100% 100%, 0 100%)}}#technologies h2{font-size:calc(min(11vw, 4rem));margin:0}#technologies h3{margin:0 auto 2rem;min-height:4rem;max-width:28rem;font-weight:500}#technologies p{font-size:1.1rem;margin:0 auto;max-width:28rem;text-align:justify;color:#36485E;opacity:.5}#technologies .preHeadline{text-align:center;font-size:2rem}#technologies .preHeadline:after{content:"";display:block;width:3rem;height:0.5rem;background-color:#29252c;margin:0.5rem auto}#contact{background:url(../img/dortmund-vector-map.svg) no-repeat,linear-gradient(#455c78, #3f546e);background-size:auto 100%;position:relative;overflow:hidden}#contact #contact_overlay{background:linear-gradient(var(--gradientColor1), var(--gradientColor2));position:absolute;right:0;height:100%;width:100%;display:flex;justify-content:center;flex-direction:column;font-size:1.3rem;padding:4rem 2rem;text-align:left;transition:0.5s all cubic-bezier(0.4, 0, 0.2, 1),--gradientColor1 0.5s,--gradientColor2 0.5s,padding 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s}@media (min-width: 680px){#contact #contact_overlay{right:-2%;width:50%;box-shadow:-3px 0px 0 #34465c;padding:1% 8% 1% 5%;--gradientColor1: #455c78;--gradientColor2: #3f546e}#contact #contact_overlay:hover{right:0;box-shadow:-5px 0px 0 #34465c;padding-left:4%;padding-right:9%}}@media (min-width: 1280px){#contact #contact_overlay{width:40%}}#contact #contact_overlay .intro{margin-top:0;font-weight:150;font-size:1.1rem;color:#b4c3d6;max-width:600px}#contact #contact_overlay h1{font-size:1.5rem;font-weight:400;margin:50px 0 0 0}#contact #contact_overlay h2{font-size:calc(min(11vw, 4rem));font-weight:600;margin-bottom:0}#contact #contact_overlay .columns{gap:25px;align-items:center}#contact #contact_overlay .columns>p{flex-grow:0}#contact #contact_overlay .columns a{opacity:.2}#contact #contact_overlay p{margin:5px 0;color:#b4c3d6}#contact #contact_overlay a{color:#b4c3d6;transition:.2s all ease-in-out;white-space:nowrap;cursor:pointer}#contact #contact_overlay a:hover{opacity:1;color:#FFF}#socket{background-color:#0d131b;min-height:calc(70px + var(--dividerAngle));color:rgba(255,255,255,0.9);padding:1.5rem 2rem;justify-content:end;text-align:left;font-size:clamp(12px, 2.2vw, 16px)}#socket .divider{color:rgba(255,255,255,0.2);padding:0 .5em;display:inline-block}#socket a{color:inherit;text-decoration:none;transition:.2s opacity;white-space:nowrap}#socket a.link-icon{display:inline-block;font-size:0;line-height:0;opacity:.9}#socket a:hover{text-decoration:underline;opacity:.7}#socket .columns{align-items:end}#socket .columns div{max-width:90%}#socket .columns div:last-of-type{text-align:right;line-height:0}#hero strong,#contact a{font-weight:inherit;position:relative;display:inline-block;text-decoration:none}#hero strong svg.underline,#contact a svg.underline{position:absolute;top:100%;left:0;overflow:hidden;margin:0;width:100%;height:20px;transition:all 0.5s ease-out;transform:translateY(-65%) rotate(-1deg);fill:none;stroke:rgba(255,255,255,0.07);stroke-width:5;stroke-dasharray:300px;stroke-dashoffset:0}#hero strong svg.underline.rotated,#contact a svg.underline.rotated{rotate:-4deg}#hero strong:hover svg.underline,#contact a:hover svg.underline{stroke-dashoffset:300px;stroke:rgba(255,255,255,0.15)}.svg-wrap{display:none}