/*! 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{--scale-factor: 1;--fluid-h-master-base: clamp(3rem, 12vw, 5rem);--fluid-h-master: calc(var(--fluid-h-master-base) * var(--scale-factor));--font-h1: max(calc(1.6rem * var(--scale-factor)), calc(var(--fluid-h-master) * 0.6));--font-h2: max(calc(1.6rem * var(--scale-factor)), calc(var(--fluid-h-master) * 0.6));--font-h3: max(calc(1.2rem * var(--scale-factor)), calc(var(--fluid-h-master) * 0.5));--font-h4: max(calc(1.1rem * var(--scale-factor)), calc(var(--fluid-h-master) * 0.4));--font-hd-top: max(calc(1.2rem * var(--scale-factor)), calc(var(--fluid-h-master) * 0.4));--font-hd-div: max(calc(1.1rem * var(--scale-factor)), calc(var (--fluid-h-master) * 0.3));--font-base-big: max(calc(1rem * var(--scale-factor)), calc(var(--fluid-h-master) * 0.5));--font-base: max(calc(1.12rem * var(--scale-factor)), calc(var(--fluid-h-master) * 0.3))}@media(min-width: 1600px){:root{--scale-factor: 1.15}}@media(max-height: 640px)and (min-width: 1024px){:root{--scale-factor: 0.7}}.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:rgb(0,50.16,146.08);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:rgb(0,50.16,146.08)}:focus:not(:focus-visible){outline:none}:focus-visible{outline:2px solid rgb(0,50.16,146.08);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,50.16,146.08);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,b{font-weight:500;font-variation-settings:"wght" 500}.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}cite{font-size:var(--font-base);font-style:oblique;padding-right:.25em}.sanft{scroll-behavior:smooth;overflow-y:scroll}.logo-top{z-index:9;aspect-ratio:1/1;position:fixed;top:6px;left:6px;height:72px;transition:all .4s ease-in-out}.logo-top img{aspect-ratio:1/1;height:100%;width:100%;object-fit:contain;padding:3px;background-color:hsla(0,0%,90%,.6);backdrop-filter:blur(3px)}.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:36px;min-height:max(466px,72vh);align-content:center;padding:24px;padding:0}.sec-main .sec-div{max-width:1040px;padding:25px 48px 24px 24px}.sec-main:nth-of-type(even){color:#fff;background-color:rgb(0,50.16,146.08)}.fig-main{width:calc(100% - 0px);padding:0;margin:0}.fig-main img{aspect-ratio:1/1;display:block;width:100%;height:100%;object-fit:contain;padding:0;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,50.16,146.08);box-shadow:0 3px 12px -3px rgba(0,50.16,146.08,.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,50.16,146.08);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,37.1184,108.0992);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{aspect-ratio:1/1;display:block;width:100%;max-width:300px;padding:6px;margin:0}.button-cta{text-align:center}.button-cta a{display:inline-block;margin:48px auto 24px;padding:12px 24px;color:rgb(0,50.16,146.08);background-color:#dedede;border:solid 1px rgb(0,50.16,146.08);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,50.16,146.08,.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,50.16,146.08,.9);background-color:hsl(0,0%,74%);transform:scale(0.96)}.formular{color:rgb(0,50.16,146.08)}.formular .sec-div .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,50.16,146.08);background-color:#fff;box-shadow:0 0 12px -3px rgb(0,50.16,146.08)}.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,50.16,146.08,.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,50.16,146.08,.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,50.16,146.08);background-color:#dedede;border-radius:5px;border:solid 1px rgba(0,50.16,146.08,.8);cursor:pointer}.translateX{position:relative}.hl-point span{display:inline-flex;flex-direction:row;flex-wrap:nowrap;align-items:baseline;text-align:left;hyphens:auto;hyphenate-limit-chars:6 3 3}.hl-point span::before{content:"";aspect-ratio:1/1;width:.2em;height:.2em;margin:0 .2em 0 0;background:#dc281e}.nowrap{white-space:nowrap}.zentriert{text-align:center}.hyph{hyphens:auto;hyphenate-limit-chars:6 3 3}.fliess{font-size:var(--font-base)}#formular{scroll-margin-top:120px}.cta-button{text-align:center}.cta-button a{display:inline-block;margin:48px auto 24px;padding:12px 24px;color:rgb(0,50.16,146.08);background-color:#dedede;border:solid 1px rgb(0,50.16,146.08);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,50.16,146.08,.9);transform:scale(1);transition:all .3s ease-in-out}.cta-button a:hover,.cta-button a:active{box-shadow:0 3px 6px -3px rgba(0,50.16,146.08,.9);background-color:hsl(0,0%,74%);transform:scale(0.96)}.menuinput{display:none;position:absolute}.menu{display:flex;flex-direction:column;justify-content:center;gap:6px;height:100dvh;z-index:99;position:fixed;top:0;right:-112px;transition:all .4s ease-in-out}.menu .menulabel{display:block;height:44px;width:48px;margin-left:0;cursor:pointer;border:solid 2px hsla(0,0%,100%,.99);border-radius:180px 0 0 180px;background-color:rgb(0,50.16,146.08);background-color:rgba(0,50.16,146.08,.9);transition:all .4s ease-in-out}.menu .menulabel .menuburger{position:relative;top:19px;left:1px;margin:auto;display:block;width:20px;height:2px;background-color:#fff;transition:all .4s ease-in-out}.menu .menulabel .menuburger::before{content:"";position:absolute;top:-6px;margin:auto;display:block;width:20px;height:2px;background-color:#fff;transition:all .4s ease-in-out}.menu .menulabel .menuburger::after{content:"";position:absolute;top:6px;margin:auto;display:block;width:20px;height:2px;background-color:#fff;transition:all .4s ease-in-out}.menu .menuframe{position:relative}.menu .menuframe ul{display:flex;flex-direction:column;gap:6px;height:100%;margin:0;padding:0;list-style-type:none}.menu .menuframe ul li{overflow:hidden;height:48px;width:156px;padding:0;margin:0;text-align:center;background-color:rgb(0,50.16,146.08);border-radius:180px 0 0 180px;border:solid 2px hsla(0,0%,100%,.99);transform:translateX(0);transition:.6s .1s all ease-in-out}.menu .menuframe ul li a{position:relative;display:block;height:100%;padding:0;margin:0;color:inherit;background-repeat:no-repeat;text-decoration:none;background-size:36px;background-position:5px center;overflow:hidden}.menu .menuframe 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 .menuframe ul li a::before{content:"";position:absolute;top:0;left:0;z-index:-1;aspect-ratio:1/1;width:48px;height:100%;background-color:rgb(0,50.16,146.08);transition:all .4s ease-in-out}.menu .menuframe ul li .home{background-image:url("images/menu/home-symbol.png")}.menu .menuframe ul li .webdesign{background-image:url("images/menu/webdesign-symbol.png")}.menu .menuframe ul li .responsive{background-image:url("images/menu/responsive-symbol.png")}.menu .menuframe ul li .redesign{background-image:url("images/menu/redesign-symbol.png")}.menu .menuframe ul li .referenzen{background-image:url("images/menu/referenzen-symbol.png")}.menu .menuframe ul li .kontakt{background-image:url("images/menu/kontakt-symbol.png")}.menu .menuframe ul li a:active,.menu .menuframe ul li a:focus{background-color:inherit;border-radius:50%}.menu .menuframe ul li.menu-open{transform:translateX(-108px)}.menu .menuframe ul .aktuell{background-color:rgb(0,80.1505156627,233.4208)}.menu .menuframe ul .aktuell a::before{background-color:rgb(0,80.1505156627,233.4208)}.menuinput:checked~.menulabel .menuburger::before{top:1px;transform:rotate(45deg)}.menuinput:checked~.menulabel .menuburger{background-color:rgba(0,0,0,0)}.menuinput:checked~.menulabel .menuburger::after{top:1px;transform:rotate(-45deg)}.menuinput:checked~.menulabel b::after{opacity:0}.menuinput:checked~.menuframe ul li{transform:translateX(-108px)}.linktop{display:none;position:fixed;bottom:24px;bottom:calc(12px + env(safe-area-max-inset-bottom, 0px));right:-4px;width:52px;height:48px;aspect-ratio:1/1;border-radius:180px 0 0 180px;border:solid 2px hsla(0,0%,100%,.99);background-color:rgb(0,50.16,146.08);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}.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)}.scrolltop.is-scrolled{top:0;transition:all .4s ease-in-out}.logo-top.scrolltop.is-scrolled{left:0}.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}@media all and (min-width: 600px){.sec-main{gap:48px}.sec-main .sec-div{padding:48px}.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{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,50.16,146.08,.8)}.sec-main:nth-of-type(even) .fig-main{transform-origin:right center}.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))}}@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: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{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,50.16,146.08,.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{height:calc(100vh - 80px)}.linktop{display:block}}@media(hover: none){.menu ul li:active{transform:scale(0.9)}}@media all and (min-width: 1280px){.logo-top{top:12px;left:12px}.menu{z-index:99;position:fixed;top:0;right:12px;height:72px}.menu .menulabel{display:none}.menu .menuframe{height:initial;top:0}.menu .menuframe ul{top:12px;gap:12px;position:relative;flex-direction:row;padding:12px;border-radius:180px;background-color:hsla(0,0%,90%,.6);backdrop-filter:blur(3px);transition:all .4s ease-in-out}.menu .menuframe ul li{border-radius:0;transform:translateX(0)}.menu .menuframe ul li:first-of-type{border-radius:180px 0 0 180px}.menu .menuframe ul li:last-of-type{border-radius:0 180px 180px 0}.menuinput:checked~.menuframe ul li{transform:translateX(0)}body nav.scrolltop.is-scrolled{top:0;right:6px}body nav.scrolltop.is-scrolled .menuframe ul{top:0;padding:18px}body .logo-top.scrolltop.is-scrolled{height:120px}}@media(max-height: 640px)and (min-width: 1024px){body nav.scrolltop.is-scrolled{top:0;right:6px;height:48px}body nav.scrolltop.is-scrolled .menuframe ul{padding:6px}body nav.scrolltop.is-scrolled .menuframe ul li{height:36px}body .logo-top.scrolltop.is-scrolled{height:72px}}/*! * 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}}