/* Allgemein */ *,*::before,*::after { -webkit-box-sizing: inherit; box-sizing: inherit; } html { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-tap-highlight-color: transparent; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; } html,body,li { margin: 0; padding: 0; font-size: 18px; } img { max-width: 100%; height: auto; } img.lazy { opacity: 0; transition: opacity .5s .5s; } figure { padding: 0; margin: 0; } /* Schriften */ body { scroll-behavior: smooth; font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; font-weight: 400; line-height: 1.5; } body,a { color: #333; } b, strong { font-weight: 500; } p, li { margin: 0; color: #444; } h1 a, h2 a, h3 a, h4 a, .likeh1 a, .likeh2 a, .likeh3 a, .likeh4 a { text-decoration: none; } h1,.likeh1,h2,.likeh2,h3,.likeh3,h4,.likeh4,h5,.likeh5,h6,.likeh6 { font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-weight: 500; line-height: 1.3; margin: 0; color: #333; } h1,.likeh1 { font-size: 42px; line-height: 1.1; } h2,.likeh2 { font-size: 38px; line-height: 1.2; } h3,.likeh3 { font-size: 28px; line-height: 1.4; } h4,.likeh4 { font-size: 22px; } h5,.likeh5 { font-size: 22px; line-height: 1.2; } h6,.likeh6 { font-size: 20px; line-height: 1.2; } .meta { font-size: 18px; color: #A4B7C6; font-weight: 400; line-height: 1; } /* SEO */ .soft { font-size: 18px; line-height: 1; color: #A4B7C6; font-weight: 400; } .soft + * { margin-top: 5px !important; } @media only screen and (max-width: 740px) { html,body,li { font-size: 16px; } h1,.likeh1 { font-size: 32px; line-height: 1; } h2,.likeh2 { font-size: 24px; } h3,.likeh3 { font-size: 20px; } h4,.likeh4 { font-size: 20px; } h5,.likeh5 { font-size: 20px; } h6,.likeh6 { font-size: 18px; } .meta { font-size: 16px; color: #A4B7C6; } h1.soft,h2.soft,h3.soft,h4.soft,h5.soft,h6.soft { font-size: 16px; } } /* Abstände */ * + .likeh2, * + .likeh3, * + .likeh4, * + .likeh5, * + .likeh6, * + .soft, .underline + p, * + h2, * + h3, * + h4, * + h5, * + h6 { margin-top: 30px; } .meta + *, .likeh6 + *, h6 + * { margin-top: 10px; } * + p, * + ul { margin-top: 20px; } h6 + p { margin-top: 5px; } /* Grid */ .s { padding-top: 60px; padding-bottom: 60px; overflow: hidden; position: relative; } .s.no-bg + .s.no-bg { padding-top: 0; } .c { padding: 30px 15px; } .c.double { padding: 45px; } .col-sm-4.bg.gray .c.double { padding-left: 30px; padding-right: 30px; } @media only screen and (max-width: 740px) { .s { padding-top: 40px; padding-bottom: 40px; } .c.double { padding: 30px 25px ; } } /* Background */ .bg.gray { background-color: #F9FAFB; } @media only screen and (max-width: 740px) { /*.bg.image { background-image: none !important; }*/ .underline + img { margin-top: 33px; } } /* Links */ a[href^="tel"],a[href^="mailto"] { text-decoration: none; } /* Header */ #header { position: fixed; width: 100%; left: 0; top: 0; z-index: 3000; background: rgba(255,255,255,.97); padding-top: 4px; } #header:after, #header:before { content: ""; position: absolute; left: 0; top: 0; height: 4px; } #header:after { width: 0%; background-color: #E2523D; transition: width 1s ease-out; } #header:before { width: 100%; background-color: #A4B7C6; } #breadcrumb, #langswitchhead { padding-bottom: 0; } #logo { max-width: 200px; } @media only screen and (min-width: 740px) { #topline { transition: all .5s; max-height: 100px; opacity: 0; } #header .c { padding-top: 0; padding-bottom: 0; } #breadcrumb .c, #langswitchhead .c { padding-top: 10px; overflow: hidden; } #navi { padding: 10px 0; } #header + .s { margin-top: 121px; } } @media only screen and (max-width: 740px) { #header + .s { margin-top: 96px; } .page-id-70 #header + .s, .page-id-77 #header + .s { margin-top: 40px; } } /* Swiper */ .swiper-wrapper { display: flex; } /* Ausblenden */ #s1,#s2 { opacity: 0; transition: opacity .2s .1s; } #langswitchinfo { max-height: 0; opacity: 0; transition: all .5s; } #consent, .swiper, #topcontact, #langswitchhead, #header .menu, #cookie,#breadcrumb { pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .5s; } #header .menu { display: none; } /* Animate */ .js.desktop .preanimated, .js.desktop .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-play-state: paused; -webkit-animation-play-state: paused; } .js.desktop #s1 .preanimated, .js.desktop #s2 .preanimated, .js.desktop .preanimated.animated, .js.desktop .animated { animation-play-state: running; -webkit-animation-play-state: running; } .js.desktop .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .js.desktop #s1 .preanimated.delay-1s, .js.desktop #s2 .preanimated.delay-1s, .animated.delay-1s { -webkit-animation-delay: 1s; animation-delay: 1s; } .js.desktop #s1 .preanimated.delay-2s, .js.desktop #s2 .preanimated.delay-2s, .animated.delay-2s { -webkit-animation-delay: 2s; animation-delay: 2s; } .js.desktop #s1 .preanimated.delay-3s, .js.desktop #s2 .preanimated.delay-3s, .animated.delay-3s { -webkit-animation-delay: 3s; animation-delay: 3s; } .js.desktop #s1 .preanimated.delay-5s, .js.desktop #s2 .preanimated.delay-5s, .animated.delay-5s { -webkit-animation-delay: 5s; animation-delay: 5s; } .js.desktop .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } .js.desktop .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } .js.desktop .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 60px, 0); transform: translate3d(0, 60px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 60px, 0); transform: translate3d(0, 60px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } /* Calc */ [id] { scroll-margin-top: 100px; } #calc { scroll-margin-top: 150px; } #calc .userinput { opacity: 0; transition: opacity 1s; } .later-2000 #calc .userinput { opacity: 1; }