*,*::after,*::before{box-sizing:border-box}:root{font-size:16px;--color-text:#010101;--color-bg:#f8f8f8;--color-link:#00a3da;--color-link-hover:#007cba;--page-padding:1.5rem;--color-link-works:#00a3da;--color-link-works-hover:#00a3da;--color-link-works-current:#00a3da;--color-title:#00a3da}body{margin:0;color:var(--color-text);background-color:var(--color-bg);font-family:"Haskoy",-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Helvetica Neue","Noto Sans",Arial,sans-serif;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;line-height:1.5;font-size:clamp(1rem, 0.4vw + 0.8rem, 1.1rem)}@font-face{font-family:"Haskoy";src:url(../fonts/Haskoy-variable.woff2) format("woff2-variations");font-weight:125 950;font-stretch:75% 125%;font-display:swap}.js .loading::before,.js .loading::after{content:'';position:fixed;z-index:10000}.js .loading::before{top:0;left:0;width:100%;height:100%;background:var(--color-bg)}.js .loading::after{top:50%;left:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;opacity:.4;background:var(--color-link);animation:loaderAnim 0.7s linear infinite alternate forwards}@keyframes loaderAnim{to{opacity:1;transform:scale3d(.5,.5,1)}}a{color:var(--color-link)}a:focus{outline:none;background:lightgrey}a:focus:not(:focus-visible){background:#fff0}a:focus-visible{outline:2px solid red;background:#fff0}.frame{grid-column:1 / 12;grid-row:5 / 7;position:relative;min-height:100vh;display:grid;z-index:1000;grid-row-gap:1rem;grid-column-gap:2rem;justify-items:start;height:100%;width:100%;grid-template-columns:repeat(12,1fr);grid-template-rows:1fr 1fr 1fr;align-content:space-between;grid-template-areas:'tagline content content content content' 'contact content content content content' 'works content content content content' 'title title links links links'}.frame__works{grid-area:contact;display:flex;flex-direction:column}.frame__works span{margin-bottom:1.5rem}.frame__works a{pointer-events:auto;padding:.25rem 0;position:relative;text-decoration:none;color:var(--color-text)}.frame__works a:hover{color:var(--color-link-works-hover)}.frame__works a:visited{color:var(--color-link-works-hover)}.frame__works a.active{text-decoration:underline;color:var(--color-link-works)}.frame a{pointer-events:auto}.frame__title{grid-area:title;display:flex;flex-direction:column;gap:.5rem;align-self:end}.frame__content{width:100%;height:100%;grid-column:1 / 12;grid-row:5 / 7;z-index:1000}.content{pointer-events:none;position:relative;opacity:0;grid-area:content-item;display:grid;grid-template-columns:subgrid;grid-template-rows:repeat(10,1fr);width:100%;height:100%;z-index:0;padding-top:8%;grid-column:1 / 12;grid-row:5 / 7;z-index:1000}.content--current{opacity:1}.content__title{position:relative;z-index:10;opacity:0;grid-area:1 / 2 / -1 / -2;width:100%;height:100%;align-content:center;margin:0}.content__title img{max-width:80%}.no-js .content__title{opacity:1}.content__img{position:relative;will-change:clip-path,filter}.content__img-inner{background-size:contain;background-repeat:no-repeat;width:100%;height:100%}.size-2 img{max-width:50%}.pos-1{grid-area:1 / 3 / 5 / 7}.pos-2{grid-area:4 / 8 / 10 / 11}.pos-3{grid-area:7 / 3 / 11 / 6}.pos-3-1{grid-area:1 /9 / 5 / 11}.pos-3-3{grid-area:1 /8 / 11 / 11}.pos-3-2{grid-area:8 /7 / 10 / 10}.pos-4{grid-area:3 / 6 / 8 / 12}.pos-5{grid-area:7 / 3 / 11 / 7}.pos-6{grid-area:1 / 4 / 4 / 7}.pos-5-1{grid-area:8 / 8 / 11 / 11}.pos-7{grid-area:8 / 2 / 11 / 5}.pos-8{grid-area:2 / 8 / 8 / 11}.pos-9{grid-area:3 / 3 / 6 / 6}.background{grid-column:1 / 13;grid-row:5 / 7;width:100%;height:80vh;display:grid;z-index:-1;grid-template-areas:'background';grid-template-columns:100%;grid-template-rows:100%;pointer-events:none;place-items:center;padding-top:6%}.background__image{position:relative;z-index:0;grid-area:background;background-size:cover;filter:brightness(.2);width:100%;height:100%;opacity:0}.sec-spacing{width:100%;padding-top:1%;padding-right:6%;padding-left:6%;padding-bottom:3%}.base-grid{display:grid;grid-template-columns:repeat(12,1fr)}#logo{grid-column:1 / 3;grid-row:1 / 2}.logo-img{height:50px}header nav{grid-column:4 / 9;grid-row:1 / 2;margin-top:0;align-items:flex-end;display:flex;flex-direction:row;padding:0;padding-bottom:8px}header nav a{text-decoration:none;font-size:.8em;color:var(--color-text)}header nav a:hover{color:var(--color-link)}dd,ol,ul{margin:0;padding:0;list-style-type:none}nav ul{justify-content:space-between;gap:5vW;align-items:center;flex-direction:row;display:flex;width:100%}nav ul li{position:relative}.academics{grid-column:1 / 2;grid-row:1 / 2;font-size:.8em}.innovation{grid-column:3 / 12;grid-row:1 / 2;align-items:center;justify-content:center;display:flex;flex-direction:column}.innovation h2{z-index:6;color:var(--color-title);font-weight:400;font-size:10vw;line-height:1}.bg-animator{grid-column:4 / 12;grid-row:1 / 2;height:100%;max-height:800px;min-height:80vH;width:100%}.subtitel{grid-column:6 / 12;grid-row:2 / 3;font-size:1.2em;font-weight:400;padding-top:6%;padding-bottom:14%}#tun{grid-column:1 / 3;grid-row:3 / 4}#tun h2,.branding h3,.ux h3,.implement h3,#arbeiten h2{font-weight:400;font-size:clamp(1.5rem, 1.1vw + 1rem, 1.8rem);display:block;margin-block-start:.83em;margin-block-end:.83em;margin-inline-start:0;margin-inline-end:0;unicode-bidi:isolate}.branding{grid-column:3 / 6;grid-row:3 / 4}.ux{grid-column:6 / 9;grid-row:3 / 4}.implement{grid-column:9 / 12;grid-row:3 / 4}.services{margin-bottom:1.2em;width:90%;font-size:.8em}.services li{padding-top:calc(1em / 2);padding-bottom:calc(1em / 2);border-bottom:1px solid #000;line-height:1.5}#arbeiten{grid-column:1 / 12;grid-row:5 / 7;padding-top:8%;z-index:3}#kontakt{grid-column:3 / 12;grid-row:8/ 8;font-size:clamp(1.5rem, 1rem + 2.5vw, 3.5rem);font-weight:320;line-height:1.3;padding-bottom:10%;padding-top:8%}.ansprache{grid-column:3 / 9;grid-row:9/ 9;padding-bottom:1%}#gradient{height:100%;max-height:800px;min-height:80vH;width:100%}footer{padding-top:3%;font-size:.8em;width:100%;padding-top:4%;padding-right:6%;padding-left:6%}.bottom{border-color:var(--color-text);border-width:1px 0 0;border-style:solid;width:100%;grid-column:1 / 13;display:grid;grid-template-columns:subgrid;padding:16px}.up{bottom:24px;right:48px;font-size:0;position:fixed}.up svg{height:24px;width:24px}.copyright{grid-column:1 / 6;grid-row:1 / 2}.imprint{grid-column:6 / 13;display:flex;justify-content:flex-end}.bg-video{width:100%;height:100%;object-fit:cover;pointer-events:none}@media screen and (max-width:1280px){.academics{grid-column:1 / 3}}@media screen and (max-width:1024px){.sec-spacing{padding-right:2%;padding-left:2%;padding-top:2%}#kontakt{padding-top:0}footer{padding-right:2%;padding-left:2%}}@media screen and (max-width:1000px){.bg-animator{grid-column:4 / 12;max-height:500px;min-height:50vH}#gradient{max-height:500px;min-height:50vH}.up{bottom:12px;right:12px}#tun{padding-right:6px}.frame{min-height:60vH}}@media screen and (max-width:480px){.academics{display:none}.bg-animator{grid-column:3 / 12}.innovation{grid-column:1 / 12}.innovation h2{font-size:14vw}.subtitel{grid-column:3 / 12;grid-row:2 / 2;font-size:1.2em;padding-bottom:6%}#tun{grid-column:1 / 12;grid-row:3 / 3}.branding{grid-column:3 / 12;grid-row:4 / 4}.ux{grid-column:3 / 12;grid-row:5 / 5}.implement{grid-column:3 / 12;grid-row:6 / 6}#arbeiten{grid-row:7 / 7}.frame{grid-row:8 / 9;min-height:50vH}.frame__works{grid-area:tagline}.pos-1{grid-area:1 / 6 / 5 / 12}.pos-2{grid-area:4 / 1 / 9 / 9}.pos-3{display:none}.pos-3-2{display:none}.pos-3-1{display:none}.pos-3-3{grid-area:4 / 1 / 7 / 9}.pos-6{grid-area:1 / 8 / 4 / 12}.pos-4{grid-area:4 / 1 / 7 / 9}.pos-5{display:none}.pos-5-1{grid-area:5 / 8 / 8 / 12}.content__title{grid-area:3 / 3 / 3 / 11;padding-top:12%}.content{grid-row:8 / 9;padding-top:1%;grid-template-rows:none}#kontakt{grid-row:10/10;grid-column:1 / 12}.ansprache{grid-row:11/11;grid-column:1 / 12}.bottom{padding-left:0;padding-right:0}.copyright{grid-column:1 / 12;grid-row:1 / 1}.imprint{grid-column:1 / 12;grid-row:2 / 2;justify-content:flex-start}h2,h3{margin-block-start:0}header nav ul li:first-child{display:none}header nav ul{justify-content:flex-end}header #logo{grid-column:1 / 5}header nav{grid-column:6 / 12}.bottom{display:flex;flex-direction:column-reverse;padding:0;padding-top:1rem}.imprint{justify-content:flex-start;padding-bottom:1rem}}