/*!
Copyright by TwooDoo, Wegberg / Rath-Anhoven - 2026
Dieses Style-Sheet ist individuell entwickelt und handgeschrieben von TwooDoo Webdesign.
Es unterliegt dem Schutz des deutschen Urheberrechts. Jegliche Weiterverwendung, auch in Teilen, ohne unsere schriftliche Zustimmung ist untersagt.
*/:root{--fluid-h-master: clamp(3rem, 12vw, 5rem);--font-h1: max(1.6rem, calc(var(--fluid-h-master) * 0.6));--font-h2: max(1.6rem, calc(var(--fluid-h-master) * 0.6));--font-h3: max(1.2rem, calc(var(--fluid-h-master) * 0.5));--font-h4: max(1.1rem, calc(var(--fluid-h-master) * 0.4));--font-hd-top: max(1.2rem, calc(var(--fluid-h-master) * 0.4));--font-hd-div: max(1.1rem, calc(var(--fluid-h-master) * 0.3));--font-base-big: max(1rem, calc(var(--fluid-h-master) * 0.5));--font-base: max(1.12rem, calc(var(--fluid-h-master) * 0.3))}.skip-link{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.skip-link:focus,.skip-link:focus-visible{position:fixed;top:0;left:0;width:auto;height:auto;margin:0;padding:12px 24px;overflow:visible;clip:auto;white-space:normal;background-color:#009fdf;color:#fff;z-index:10000;text-decoration:none;font-weight:600;font-variation-settings:"wght" 600;border-radius:0 0 8px 8px;box-shadow:0 4px 12px rgba(0,0,0,.2)}.skip-link:focus,.skip-link:focus-visible{top:0;clip-path:inset(0);width:auto;height:auto;overflow:visible;outline:none}.skip-link:hover{background-color:#009fdf}:focus:not(:focus-visible){outline:none}:focus-visible{outline:2px solid #009fdf;outline-offset:2px}*,*::before,*::after{box-sizing:border-box}html{font-size:100%}a{font-weight:inherit;color:inherit}body{margin:0;padding:0;font-family:"Figtree",sans-serif;font-size:1rem;font-size:var(--font-base);font-weight:300;font-variation-settings:"wght" 300;text-rendering:optimizeLegibility;line-height:1.4;color:rgb(0,95.4,133.8);background-color:#fff}.h1{margin:0 0 24px;padding:0;font-size:var(--font-h1);line-height:1.2;font-weight:400;font-variation-settings:"wght" 400}.h2{margin:24px 0 12px;padding:0;font-size:var(--font-h2);line-height:1.2;font-weight:400;font-variation-settings:"wght" 400}.h3{margin:24px 0 12px;padding:0;font-size:var(--font-h3);font-weight:400;font-variation-settings:"wght" 400}.h4{margin:0 0 12px;padding:0;font-size:var(--font-h4)}div{margin:0;padding:0}p{margin:0 0 16px;padding:0}.link{margin:24px 0 16px}img{border:none}strong{font-weight:400;font-variation-settings:"wght" 400}.nowrap{white-space:nowrap}.center{text-align:center}.f400{font-weight:400;font-variation-settings:"wght" 400}.f700{font-weight:700;font-variation-settings:"wght" 700}input,textarea,select{display:block;width:100%;font-size:16px}input,textarea{-webkit-appearance:none;appearance:none}input{box-sizing:border-box}.sanft{scroll-behavior:smooth;overflow-y:scroll}.hd-top{z-index:9;padding:12px;font-size:var(--font-hd-top);line-height:1em;background-color:rgb(0,95.4,133.8);box-shadow:0 0 3px 1px rgba(0,95.4,133.8,.95)}.hd-top .div-hd-top{display:flex;flex-direction:row;flex-wrap:nowrap;gap:9px;justify-content:space-between}.hd-top .div-hd-top div{padding:0 0 6px;align-content:last baseline;color:#e4e4e4}.hd-top .div-hd-top div:first-of-type{flex-grow:0}.hd-top .div-hd-top div:nth-of-type(2){flex-grow:1;text-align:center;font-size:var(--font-hd-div)}.hd-top span{display:block}.main{display:block;margin:0 auto}.main-ref{display:block;margin:0 auto}.art-main{margin:0;padding:0}.hero{font-size:var(--font-base-big)}.sec-main{overflow:hidden;display:flex;flex-direction:column-reverse;gap:48px;min-height:max(466px,72vh);align-content:center;padding:24px}.sec-main .sec-div{max-width:1040px;padding:0 24px 24px 0}.sec-main:nth-of-type(even){color:#fff;background-color:rgb(0,95.4,133.8)}.fig-main{width:calc(100% - 36px);padding:0;margin:0;border:solid 1px rgba(0,95.4,133.8,.99)}.fig-main img{aspect-ratio:1/1;display:block;width:100%;height:100%;object-fit:contain;padding:6px;margin:0}.referenzen{padding:24px 24px 24px 0}.referenzen ul{list-style-type:none;display:flex;flex-direction:row;flex-wrap:wrap;gap:48px;justify-content:center;padding:0;margin:0}.referenzen ul li{width:100%;flex-basis:calc(50% - 48px);flex-grow:1;flex-shrink:1;max-width:600px;padding:0;margin:0;text-align:center}.referenzen ul li .fig-ref-container{aspect-ratio:2/1;display:flex;flex-direction:row;flex-wrap:nowrap;padding:0;margin:0;background-color:hsl(0,0%,94%);border:solid 1px rgb(0,95.4,133.8);box-shadow:0 3px 12px -3px rgba(0,95.4,133.8,.9)}.referenzen ul li .fig-ref-container .ref-item{aspect-ratio:1/1;align-content:flex-end;height:100%;width:100%;display:block;padding:0;margin:0}.referenzen ul li .fig-ref-container img{display:block;object-fit:cover}.referenzen ul li .fig-ref-container .item-logo img{max-width:100%;max-height:30%;margin:0 0 0 auto;padding:6px}.referenzen ul li a{display:block;padding:12px 0;font-size:var(--font-base);white-space:nowrap}.referenzen ul li:nth-of-type(even) .fig-ref-container{flex-direction:row-reverse}.referenzen ul li:nth-of-type(even) .fig-ref-container .item-logo img{margin:0 auto 0 0}.impressum .sec-main:nth-of-type(even){color:rgb(0,95.4,133.8);background-color:#fff}.ft-signatur{display:flex;flex-direction:column;position:relative;width:100%;margin:0 auto;padding:60px 48px 60px 12px;color:#fff;background-color:rgb(0,117.66,165.02);text-align:center}.ft-signatur .ft-impressum{padding:24px 0}.ft-signatur .ft-impressum a{margin:0 12px;text-decoration:none;text-transform:uppercase}.ft-signatur .ft-address{font-style:normal;margin:12px auto}.ft-signatur .ft-copyright{padding:12px 0;font-size:.75em}.ft-signatur a{color:inherit}.impr-logo{display:block;margin:0;padding:0}.impr-logo a{display:block;max-width:300px;margin:0}.impr-logo a img{display:block;width:100%;max-width:300px;padding:6px;margin:0;background-color:#fff}.button-cta{text-align:center}.button-cta a{display:inline-block;margin:48px auto 24px;padding:12px 24px;color:rgb(0,95.4,133.8);background-color:#dedede;border:solid 1px rgb(0,95.4,133.8);text-decoration:none;font-size:var(--font-base);font-weight:600;font-variation-settings:"wght" 600;border-radius:66px;box-shadow:0 3px 12px -3px rgba(0,95.4,133.8,.9);transform:scale(1);transition:all .3s ease-in-out}.button-cta a:hover,.button-cta a:active{box-shadow:0 3px 6px -3px rgba(0,95.4,133.8,.9);background-color:hsl(0,0%,74%);transform:scale(0.96)}.formular{color:rgb(0,95.4,133.8)}.formular .div-haupttext{padding:0 24px 0 0}.formular .div-haupttext .h3{padding:24px;font-size:1.6em}.formular .form-kontakt{box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;width:100%;max-width:600px;padding:12px;margin:48px auto;color:rgb(0,95.4,133.8);background-color:#fff;box-shadow:0 0 12px -3px rgb(0,95.4,133.8)}.formular .form-kontakt .form-gruppe{flex:1 1 0;min-width:0;width:100%;margin:0 auto 12px}.formular .form-kontakt .form-gruppe label{display:block;padding:12px}.formular .form-kontakt .form-gruppe input{box-sizing:border-box;width:100%;padding:12px;border-radius:5px;border:solid 1px rgba(0,95.4,133.8,.8)}.formular .form-kontakt .form-gruppe :focus{background-color:#fff}.formular .form-kontakt .form-gruppe textarea{box-sizing:border-box;width:100%;min-height:120px;padding:12px;border-radius:5px;border:solid 1px rgba(0,95.4,133.8,.8)}.formular .form-kontakt .form-gruppe select{padding:12px;width:100%;box-sizing:border-box}.formular .form-kontakt .submit-btn{box-sizing:border-box;width:100%;padding:12px;margin:0 auto 12px;color:rgb(0,95.4,133.8);background-color:#dedede;border-radius:5px;border:solid 1px rgba(0,95.4,133.8,.8);cursor:pointer}.translateX{position:relative}.hl-point{position:relative}.hl-point span::before{content:"";align-content:center;display:inline-block;width:.2em;height:.2em;margin:0 .2em 0 0;background:#e30018}.nowrap{white-space:nowrap}.zentriert{text-align:center}.hyph{hyphens:auto;hyphenate-limit-chars:6 2 3}.fliess{font-size:var(--font-base)}#formular{scroll-margin-top:120px}.menu{z-index:99;position:fixed;top:6px;right:-112px}.menu ul{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style-type:none}.menu ul li{overflow:hidden;width:156px;padding:0;margin:0;text-align:center;background-color:#009fdf;border-radius:180px 0 0 180px;transform:translateX(0);transition:.6s .1s all ease-in-out}.menu ul li a{position:relative;display:block;height:48px;padding:0;margin:0;color:inherit;background-repeat:no-repeat;text-decoration:none;background-size:36px;background-position:5px center;overflow:hidden}.menu ul li a span{height:100%;width:130px;align-content:center;margin:0 0 0 30px;display:block;color:#fff;font-size:1rem;font-weight:400;font-variation-settings:"wght" 400}.menu ul li a::before{content:"";position:absolute;top:0;left:0;z-index:-1;aspect-ratio:1/1;width:48px;height:48px;background-color:#009fdf;transition:all .4s ease-in-out}.menu ul li .home{background-image:url("images/menu/home-symbol.png")}.menu ul li .webdesign{background-image:url("images/menu/webdesign-symbol.png")}.menu ul li .responsive{background-image:url("images/menu/responsive-symbol.png")}.menu ul li .redesign{background-image:url("images/menu/redesign-symbol.png")}.menu ul li .referenzen{background-image:url("images/menu/referenzen-symbol.png")}.menu ul li .kontakt{background-image:url("images/menu/kontakt-symbol.png")}.menu ul li a:active,.menu ul li a:focus{background-color:inherit;border-radius:50%}.menu ul .aktuell a::before{background-color:rgb(0,63.6,89.2)}.linktop{display:none;position:fixed;bottom:24px;bottom:calc(12px + env(safe-area-max-inset-bottom, 0px));right:0;width:42px;height:42px;aspect-ratio:1/1;padding:0;margin:0;text-align:center;border-radius:180px 0 0 180px;background-color:#009fdf;cursor:pointer;transition:all .4s ease-in-out}.linktop a{display:block;width:100%;height:100%;background-image:url("images/menu/pfeil-hoch.png");background-repeat:no-repeat;background-size:40px;background-position:4px center;cursor:pointer}@media all and (min-width: 600px){.fig-main{width:100%;margin:0 auto}}@media all and (min-width: 768px)and (orientation: landscape){.sec-main{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:center;gap:48px;padding:0}.sec-main .sec-div{flex-basis:50%;flex-grow:1;padding:0 48px;margin:48px 0 0 0}.sec-main .translateX{z-index:5;left:calc(100% + 48px);width:200%;margin:0 0 48px;text-align:center;transform:translateX(-50%)}.sec-main .translateX span{display:inline-block;padding:6px 12px;background-color:hsla(0,0%,100%,.8)}.sec-main .fig-main{flex-basis:50%;flex-grow:0;width:50vw;height:100vh;transform-origin:left center;border:none}.sec-main .fig-main img{width:100%;height:100%;object-fit:cover;padding:0}.sec-main:nth-of-type(even){flex-direction:row-reverse}.sec-main:nth-of-type(even) .translateX{margin-right:0;margin-left:0;left:-48px;transform:translateX(calc(-50% - 48px))}.sec-main:nth-of-type(even) .translateX span{background-color:rgba(0,95.4,133.8,.8)}.sec-main:nth-of-type(even) .fig-main{transform-origin:right center}.separator{margin:120px 60px}.ft-signatur{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:48px;padding:60px 48px 120px 12px}.ft-signatur .h3{margin:0}.ft-signatur .div-logo{text-align:left}.ft-signatur .div-logo .impr-logo a{margin:0 auto}.ft-signatur .div-address{text-align:right}.ft-signatur .div-address .ft-impressum a{margin:0 0 0 24px}.linktop{bottom:calc(24px + env(safe-area-max-inset-bottom, 0px))}.hyph{hyphens:none}}@media all and (min-width: 980px){.sec-main{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:center;gap:48px;padding:0}.sec-main .sec-div{flex-basis:50%;flex-grow:1;padding:0 48px;margin:48px 0 0 0}.sec-main .translateX{z-index:5;position:relative;left:calc(100% + 48px);width:200%;margin:0 0 48px;text-align:center;transform:translateX(-50%)}.sec-main .translateX span{display:inline-block;padding:6px 12px;background-color:hsla(0,0%,100%,.8)}.sec-main .fig-main{flex-basis:50%;flex-grow:0;width:50vw;height:100vh;transform-origin:left center;border:none}.sec-main .fig-main img{width:100%;height:100%;object-fit:cover;padding:0}.sec-main:nth-of-type(even){flex-direction:row-reverse}.sec-main:nth-of-type(even) .translateX{margin-right:0;margin-left:0;left:-48px;transform:translateX(calc(-50% - 48px))}.sec-main:nth-of-type(even) .translateX span{background-color:rgba(0,95.4,133.8,.8)}.sec-main:nth-of-type(even) .fig-main{transform-origin:right center}}@media screen and (min-width: 1600px){.ft-signatur{justify-content:space-around}}@media all and (min-height: 520px){.menu{top:72px;top:min(108px,10vw + 48px)}.hd-top{position:sticky;top:0;left:0}.linktop{display:block}}@media(hover: hover){.menu ul li:hover{transform:translateX(-108px);transition:.6s .1s all ease-in-out}.menu ul li:hover a::before{border-radius:180px}}@media(hover: none){.menu ul li{transition:all .1s linear}.menu ul li:active{transform:scale(0.9)}}.scroll{transition:opacity 1s .1s ease-in-out,transform 1.2s .1s ease-in-out;will-change:opacity,transform;contain:layout style paint}.scrollInitial{opacity:0;transform:translateY(0) scaleX(1);transform-origin:center bottom}.scrollBlenden{opacity:1;transform:translateY(0) scaleX(1)}.color-animation{position:relative;overflow:hidden}.img-animiert{position:absolute;top:0;left:0;opacity:0;animation:12s infinite}img:nth-of-type(2){animation-name:blenden-01}img:nth-of-type(3){animation-name:blenden-02}@keyframes blenden-01{0%{opacity:0}33%{opacity:1}67%{opacity:0}}@keyframes blenden-02{0%{opacity:0}33%{opacity:0}67%{opacity:1}}@keyframes hide-link{0%{opacity:0}75%{opacity:0}100%{opacity:1}}.hide{animation-name:hide-link;animation-duration:1s;animation-iteration-count:1;animation-fill-mode:forwards}/*!
 * Figtree - Variable Font
 * Designed by Erik Kennedy | erikdkennedy.com/projects/figtree.html
 *
 * Copyright 2022 The Figtree Project Authors (https://github.com/erikdkennedy/figtree)
 * This Font Software is licensed under the SIL Open Font License, Version 1.1 . This license is copied below, and is also available with a FAQ at: https://openfontlicense.org SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
 * License URL: https://openfontlicense.org/open-font-license-official-text/
 *
 */@font-face{font-family:"Figtree";font-display:swap;font-style:normal;src:url("fonts/figtree/Figtree[wght].woff2") format("woff2 supports variations"),url("fonts/figtree/Figtree[wght].woff2") format("woff2-variations");font-weight:100 900}@font-face{font-family:"Figtree";font-display:swap;font-style:italic;src:url("fonts/figtree/Figtree-Italic[wght].woff2") format("woff2 supports variations"),url("fonts/figtree/Figtree-Italic[wght].woff2") format("woff2-variations");font-weight:100 900}@media(prefers-reduced-motion: reduce){.scrollInitial,.scrollBlenden{opacity:1;transform:none;transition:none}.linktop{transition:none}}