@font-face{font-family:"Montserrat-Regular";src:url("fonts/Montserrat/Montserrat-Regular.ttf") format("truetype");src-font-display:swap}@font-face{font-family:"Montserrat-SemiBold";src:url("fonts/Montserrat/Montserrat-SemiBold.ttf") format("truetype");src-font-display:swap}@font-face{font-family:"Montserrat-Bold";src:url("fonts/Montserrat/Montserrat-Bold.ttf") format("truetype");src-font-display:swap}@font-face{font-family:"Inconsolata";src:url("fonts/Inconsolata/Inconsolata-SemiBold.ttf") format("truetype");src-font-display:swap}*{box-sizing:border-box;transition-duration:.4s;scroll-behavior:smooth;scroll-margin-top:48px}body{color:#fff;background-color:#141414;background-image:url("/res/images/texture.png");font-family:Montserrat-Regular;font-size:17px;width:100%;margin:0;padding:0}@media screen and (min-width: 1200px){body{font-size:20px}}.section{position:relative;width:100%;padding:24px}@media screen and (min-width: 768px){.section{padding:24px 48px}}@media screen and (min-width: 992px){.section{padding:24px calc(50vw - 460px)}}@media screen and (min-width: 1200px){.section{padding:24px calc(50vw - 561px)}}@media screen and (min-width: 1400px){.section{padding:24px calc(50vw - 600px)}}.legal{margin-top:48px}.legal a{text-decoration:underline}.legal p{text-align:left}.legal p ul{text-align:left}h1{font-family:Montserrat-Bold;font-size:30px}@media screen and (min-width: 768px){h1{font-size:36px}}@media screen and (min-width: 1200px){h1{font-size:48px}}h2,h3{font-family:Montserrat-SemiBold}a,a:visited,a:hover{text-decoration:none;color:#fff;cursor:pointer}code{font-family:Inconsolata;font-size:20px}@media screen and (max-width: 768px){code{white-space:normal}}@media screen and (min-width: 1200px){code{font-size:24px}}button{cursor:pointer}.button{cursor:pointer;background-color:#d72;font-family:Montserrat-SemiBold;text-align:center;border-radius:35px;border:4px solid #d72;padding:5px 20px;outline:none}.button:hover{box-shadow:0px 0px 10px 0px #d72}accent{color:#d72}.menu{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;background-color:#212121;box-shadow:0px 0px 4px 2px #000;z-index:3}.menu .mobile-hidden{display:none}@media screen and (min-width: 576px){.menu .mobile-hidden{display:inline-block}}.menu #logo-h2{margin-right:auto;margin-left:0}.menu #logo-h2 img{height:35px;width:auto;vertical-align:middle}@media screen and (min-width: 768px){.menu #logo-h2 img{height:48px}}.menu ul{display:flex;flex-flow:row nowrap;justify-content:flex-end;align-items:center;padding:16px 16px;margin:0;list-style:none}.menu ul li{display:inline-block;margin-left:18px}.menu ul li a{color:#fff}@media screen and (max-width: 576px){.menu ul a{font-size:16px !important}.menu ul .button{padding:4px}}@media screen and (min-width: 576px){.menu ul .hamburger{display:none}.menu ul li:last-child{display:none}}@media screen and (min-width: 768px){.menu ul{padding:16px 24px}}@media screen and (min-width: 1200px){.menu ul{font-size:20px}.menu ul li{margin-left:48px}}.menu-overlay{height:100vh;width:70vw;max-width:320px;z-index:5;transform:translateX(-100%);background-color:#141414;position:fixed;top:0;left:0;font-size:18px}.menu-overlay ul{list-style:none;margin:0;padding:36px}.menu-overlay ul li{margin:8px 0}.menu-overlay ul li a{color:#fff}.menu-overlay #logo-h2-side{margin-right:auto;margin-left:0}.menu-overlay #logo-h2-side img{height:35px;width:auto;vertical-align:middle;margin-bottom:12px}.menu-overlay-active{transform:translateX(0%);box-shadow:2px 0px 4px 0px #000}.menu-hidden{z-index:5;box-shadow:none}.menu-hidden a{opacity:0;cursor:default}.menu-hidden .button{background-color:transparent;border:4px solid #212121;box-shadow:none !important;cursor:default}.footer{background-color:#1C1C1C;width:100%;position:relative;background-image:url("/res/images/h2-webdesign-dark-open.png");background-repeat:no-repeat;background-size:contain;background-position:80% 0}.footer a{color:#fff}.header{background-size:cover;background-position:50% 50%;background-repeat:no-repeat;height:100vh;width:100%;background-image:url("/res/images/background.png")}.header .header-content{padding:24px;position:absolute;bottom:48px;left:0}.header .header-content img{height:60px;width:auto}.header .header-content .button{margin-top:12px;display:inline-block}.header .header-content h1{max-width:700px}@media screen and (min-width: 768px){.header .header-content{bottom:92px;left:48px}.header .header-content img{height:80px}.header .header-content .button{font-size:21px}}@media screen and (min-width: 1200px){.header .header-content{bottom:128px;left:256px}}.header #climate-notice{position:absolute;top:74px;right:52px;font-size:14px;text-align:right}.header #climate-notice a{color:#63C21B;text-decoration:underline;position:relative}.header #climate-notice p:before{background-image:url("/res/icons/leaf-green.png");background-size:36px 36px;height:36px;width:36px;content:"";display:inline-block;position:absolute;top:50%;right:-4px;transform:translate(100%, -50%)}@media screen and (min-width: 768px){.header #climate-notice{font-size:17px;top:calc(100% - 12px);transform:translateY(-100%);right:64px}}@media screen and (min-width: 1200px){.header #climate-notice{font-size:20px}}.header #shake{position:absolute;bottom:16px;left:50%;transform:translateX(-50%)}@media screen and (min-width: 768px){.header #shake{bottom:24px}}.header #shake #scroll{width:auto;height:48px}.header #shake #scroll:hover{transform:translateY(-10px)}#wer p{max-width:700px}@media screen and (min-width: 1200px){#wer p{max-width:900px}}#was .portfolio-slider{transition-duration:0s;max-width:426px}@media screen and (min-width: 576px){#was .portfolio-slider{max-width:496px}}#was .portfolio-slider .portfolio-item{transition-duration:0s;height:200px;width:32px;overflow:hidden;background-size:cover;background-position:42% center;border-radius:12px;box-shadow:5px 5px 11px #000;margin:0 12px 0 0;display:flex;flex-flow:row nowrap;align-items:flex-end}#was .portfolio-slider .portfolio-item a{position:relative;margin:0 0 6px 30px;white-space:nowrap;pointer-events:none}#was .portfolio-slider .portfolio-item a:before{content:"";background-image:url("/res/icons/plus.png");background-size:20px 20px;width:20px;height:20px;position:absolute;top:50%;left:-4px;transform:translate(-100%, -50%)}#was .portfolio-slider .slick-current.portfolio-item{padding-right:250px;box-shadow:5px 5px 11px #000,inset 0px -91px 55px -59px rgba(0,0,0,0.75)}@media screen and (min-width: 576px){#was .portfolio-slider .slick-current.portfolio-item{padding-right:320px}}#was .portfolio-slider .slick-current.portfolio-item a{pointer-events:initial}#was .portfolio-slider .slick-current.portfolio-item a:before{background-image:url("/res/icons/expand.png")}@media screen and (min-width: 992px){#was{display:flex;flex-flow:row nowrap;justify-content:space-between;align-items:flex-start}#was .was-text{flex:0 0 40%}#was .portfolio-slider{flex:0 0 60%;margin-top:96px}}@media screen and (min-width: 1200px){#was{font-size:20px}#was .was-text{flex:0 0 40%}#was .portfolio-slider{flex:0 0 60%;margin-top:128px;max-width:536px}#was .portfolio-slider .portfolio-item{height:240px}#was .portfolio-slider .slick-current.portfolio-item{padding-right:360px}}.detail-box{background-color:#212121;border-radius:12px;box-shadow:5px 5px 11px #000;padding:16px;margin:0 0 16px 0}.detail-box img{width:24px;height:auto;display:inline-block;vertical-align:middle;transform:translateY(-2px)}.detail-box h2{margin:4px 0;padding:0;display:inline-block;font-family:Montserrat-Bold;text-transform:uppercase;vertical-align:middle;font-size:18px}.detail-box p{margin:0;vertical-align:middle;display:inline-block}#wie .detail-box:last-child{position:relative;cursor:pointer;background-repeat:no-repeat;background-size:92px 92px;background-position:80% 10%}#wie .detail-box:last-child img{transition-duration:0s}#wie .detail-box:last-child:before{content:"";position:absolute;top:8px;right:8px;background-size:18px 18px;background-image:url("/res/icons/bulb.png");height:18px;width:18px}#wie .detail-box:last-child:hover,#wie .detail-box:last-child.hovered{background:url("/res/icons/leaf-green-solo.png"),#3E7514;background-repeat:no-repeat;background-size:92px 92px;background-position:80% 10%}@media screen and (min-width: 768px){#wie .detail-box:last-child:hover,#wie .detail-box:last-child.hovered{background-position:80% 50%}}#wie .detail-box:last-child:hover img,#wie .detail-box:last-child.hovered img{-moz-box-sizing:border-box;box-sizing:border-box;background:url("/res/icons/trees-white.png");background-size:24px 28.3px;width:24px;height:28.3px;padding-left:24px}#wie .detail-box:last-child:hover:before,#wie .detail-box:last-child.hovered:before{background-image:url("/res/icons/bulb-green.png")}#wie .detail-box:last-child:hover:after{content:"Wir haben errechnet, dass sich unser Stromverbrauch, Hard- und Software und Verbrauchsmaterial, sowie der Stromverbrauch Ihres Hostings in den nächsten 10 Jahren durch das Pflanzen von im Schnitt 20 Bäumen pro Website kompensiern lassen. Damit werden im Jahr rund 200kg CO₂ gebunden.";display:inline-block;margin-top:12px;margin-left:-4px;background-color:#333;border-radius:12px;box-shadow:5px 5px 11px #000;padding:12px;font-size:90%;max-width:100%}@media screen and (min-width: 576px){#wie .detail-box:last-child:hover:after{position:absolute;top:0;right:36px;transform:translateY(-90%);margin:0;max-width:300px}}@media screen and (min-width: 576px){.details-wrapper{display:flex;flex-flow:row wrap;justify-content:space-between;align-items:stretch}.details-wrapper .detail-box{flex:0 0 49%}}#parallax{background-image:url("/res/images/parallax-background.png");background-position:top center;background-repeat:no-repeat;background-size:cover;position:relative;z-index:4;height:100vw}@media screen and (min-width: 768px){#parallax{height:60vw}}@media screen and (min-width: 992px){#parallax{height:45vw}}@media screen and (min-width: 1200px){#parallax{height:40vw}}#kontakt{position:relative;z-index:4;background-color:#141414}@media screen and (max-width: 768px){#kontakt optional{display:none}}#kontakt .detail-box p{margin:8px 0 0 0;display:inline-block}#kontakt .detail-box p:nth-last-of-type(2){display:block}@media screen and (min-width: 992px){#kontakt .detail-box p{margin:12px 0 0 0}}#kontakt .detail-box a,#kontakt .detail-box a:visited,#kontakt .detail-box a:hover{text-decoration:underline}#kontakt form .name_required{position:absolute;left:-9000px}#kontakt form input,#kontakt form textarea{background-color:#141414;padding:6px;border:3px solid #fff;border-radius:12px;width:100%;margin-bottom:12px;color:#fff;font-family:Montserrat-Regular;font-size:17px;outline:none}#kontakt form input::-webkit-input-placeholder,#kontakt form textarea::-webkit-input-placeholder{color:#fff;font-family:Montserrat-Regular}#kontakt form input:-moz-placeholder,#kontakt form textarea:-moz-placeholder{color:#fff;font-family:Montserrat-Regular}#kontakt form input::-moz-placeholder,#kontakt form textarea::-moz-placeholder{color:#fff;font-family:Montserrat-Regular}#kontakt form input:-ms-input-placeholder,#kontakt form textarea:-ms-input-placeholder{color:#fff;font-family:Montserrat-Regular}@media screen and (min-width: 576px){#kontakt form input{width:calc(50% - 6px)}#kontakt form input:nth-child(2n+1){margin-left:6px}}@media screen and (min-width: 1200px){#kontakt form input,#kontakt form textarea{font-size:20px}}#kontakt form textarea{resize:vertical;height:160px}#kontakt form button{color:#fff}@media screen and (min-width: 576px){#kontakt form button{font-size:17px;margin-bottom:24px}}@media screen and (min-width: 1200px){#kontakt form button{font-size:20px;margin-bottom:24px}}#kontakt form [type="checkbox"]{width:0;display:inline-block;position:relative;opacity:0}#kontakt form [type="checkbox"]+label{position:relative;display:inline-block;cursor:pointer;max-width:51%;padding-left:48px;position:relative;vertical-align:top;margin-bottom:12px;margin-top:5px}@media screen and (min-width: 576px){#kontakt form [type="checkbox"]+label{float:right}}@media screen and (min-width: 1200px){#kontakt form [type="checkbox"]+label{margin-top:7px}}#kontakt form [type="checkbox"]+label:before{width:36px;height:18px;border-radius:30px;border:3px solid #fff;background-color:#141414;content:"";margin-right:12px;z-index:1;position:absolute;left:0px}#kontakt form [type="checkbox"]+label:after{width:13px;height:13px;border-radius:30px;background-color:#fff;border:2px solid #141414;content:"";transition:margin 0.15s linear;position:absolute;left:4px;top:3px;z-index:1}#kontakt form [type="checkbox"]:checked+label:after{background-color:#d72;margin:0 0 0 18px}#kontakt form .response{width:100%;padding:16px;background-color:#212121;border-radius:12px;box-shadow:5px 5px 11px #000;margin:0 0 16px 0;display:none}#kontakt form .response.success{display:block}#kontakt form .response.error{display:block;border:3px solid #cc0000}@media screen and (min-width: 992px){#kontakt p{max-width:700px}#kontakt .kontakt-cols{display:flex;flex-flow:row nowrap;justify-content:space-between;align-items:flex-start}#kontakt .kontakt-cols form{flex:0 0 68%}#kontakt .kontakt-cols .detail-box{flex:0 0 30%}}