:root { --lightgreen:rgba(220,255,240,1); --green:rgba(25,195,155,1); --darkgreen:rgba(15,125,100,1); --black:rgba(5,45,35,1); --darkgrey:#031b15; --signal:rgba(245,140,85,1); --white:rgba(255,255,255,1); --error:#e6004c; } body { position:absolute;top:0;right:0;bottom:0;left:0;margin:0;padding:0px;overflow:hidden; background-color:var(--green); font-family:"Mulish"; scroll-behavior: smooth; margin:0;padding:0; font-family:"Mulish"; color:var(--black); height:100dvh; } .mouse_scroll_wrap { width:60px;position: fixed;left: 50%;margin-left:-30px;top: 62%; } .mouse_scroll { cursor:pointer;display: block; margin-top: 20px; width: 24px; height: 100px; background-color: rgba(0,0,0,0.4); padding:15px; border-radius: 30px; padding-right: 16px; } .m_scroll_arrows { display: block; width: 5px; height: 5px; -ms-transform: rotate(45deg); /* IE 9 */ -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */ transform: rotate(45deg); border-right: 2px solid white; border-bottom: 2px solid white; margin: 0 0 3px 4px; width: 16px; height: 16px; } .unu { margin-top: 1px; } .unu, .doi, .trei { -webkit-animation: mouse-scroll 1s infinite; -moz-animation: mouse-scroll 1s infinite; animation: mouse-scroll 1s infinite; } .unu { -webkit-animation-delay: .1s; -moz-animation-delay: .1s; -webkit-animation-direction: alternate; animation-direction: alternate; animation-delay: alternate; } .doi { -webkit-animation-delay: .2s; -moz-animation-delay: .2s; -webkit-animation-direction: alternate; animation-delay: .2s; animation-direction: alternate; margin-top: -6px; } .trei { -webkit-animation-delay: .3s; -moz-animation-delay: .3s; -webkit-animation-direction: alternate; animation-delay: .3s; animation-direction: alternate; margin-top: -6px; } .mouse { height: 42px; width: 24px; border-radius: 14px; transform: none; border: 2px solid white; top: 170px; } .wheel { height: 5px; width: 2px; display: block; margin: 5px auto; background: white; position: relative; height: 4px; width: 4px; border: 2px solid #fff; -webkit-border-radius: 8px; border-radius: 8px; } .wheel { -webkit-animation: mouse-wheel 0.6s linear infinite; -moz-animation: mouse-wheel 0.6s linear infinite; animation: mouse-wheel 0.6s linear infinite; } @-webkit-keyframes mouse-wheel{ 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(6px); -ms-transform: translateY(6px); transform: translateY(6px); } } @-moz-keyframes mouse-wheel { 0% { top: 1px; } 25% { top: 2px; } 50% { top: 3px;} 75% { top: 2px;} 100% { top: 1px;} } @-o-keyframes mouse-wheel { 0% { top: 1px; } 25% { top: 2px; } 50% { top: 3px;} 75% { top: 2px;} 100% { top: 1px;} } @keyframes mouse-wheel { 0% { top: 1px; } 25% { top: 2px; } 50% { top: 3px;} 75% { top: 2px;} 100% { top: 1px;} } @-webkit-keyframes mouse-scroll { 0% { opacity: 0;} 50% { opacity: .5;} 100% { opacity: 1;} } @-moz-keyframes mouse-scroll { 0% { opacity: 0; } 50% { opacity: .5; } 100% { opacity: 1; } } @-o-keyframes mouse-scroll { 0% { opacity: 0; } 50% { opacity: .5; } 100% { opacity: 1; } } @keyframes mouse-scroll { 0% { opacity: 0; } 50% { opacity: .5; } 100% { opacity: 1; } } #scroller { background-color:var(--green);transform-origin: 0 0; } .bodywrapper { position: relative;height:100dvh;overflow-y: auto;width: 100%;overflow-x: hidden;} .bodywrapper > .shade { position:fixed;left:0;right:0;bottom:0;z-index:0;background: linear-gradient(135deg, rgba(243,255,89,1) 0%,rgba(254,252,234,0.29) 71%,rgba(254,252,234,0) 100%);height:100dvh;opacity: 0.4;} section.full { width:100%;box-sizing:border-box;position:relative;margin: 0 auto;padding-bottom:50px; } .sticky { position: -webkit-sticky; position: sticky; top: 0px; } .header { position:fixed;left:0;right:0;top:0;opacity:0; z-index: 2;overflow:hidden;; } .header .overlay { position:absolute;left:0;right:0;top:0;z-index:1;background-color:var(--darkgrey); } .header .overlay .logo .brandname { color:var(--white); } .header .overlay .logo .brandname font { color:var(--green); } .header .overlay ul.navi li {background-color:var(--darkgrey);} .header .margincontainer { display:flex; } .header .margincontainer > div:nth-child(2) { width:100%;display: flex; justify-content: flex-end; align-items: center; } .header .lft { display:flex;align-items:center; } .my-klaro .cookie-notice { max-width: 600px !important; margin: 0 auto; top: unset !important; bottom: 26px !important; font-size: 18px !important; border-radius: 30px !important; padding: 30px; left: 50% !important; transform: translateX(-50%) translateY(-50%); top: 50% !important; bottom: unset !important; bottom: auto !important; box-sizing: border-box; } .klaro .cookie-modal .cm-list-label .slider { box-shadow:none !important; } .klaro .cm-modal {padding: 27px;box-sizing: border-box;border-radius: 30px !important; } .klaro .cm-btn { padding:10px 20px !important; border-radius:30px !important;font-weight: 900 !important;font-family: "Mulish" !important ;text-transform: uppercase !important;font-size: 16px !important;} .klaro .cm-btn-success { background-color:var(--signal) !important;} .klaro .cn-decline { background-color:var(--darkgreen) !important;} @media screen and (max-width: 700px) { .klaro .cookie-modal .cm-modal.cm-klaro { left: 20px !important; right: 20px !important; width: unset !important;} } @media screen and (max-width: 650px) { .my-klaro .cookie-notice {transform: translateX(0%) translateY(-50%);left: 20px !important;right: 20px !important;width: unset !important; } } @media screen and (max-width: 650px) { .klaro .cookie-modal .cm-modal .cm-footer-buttons { flex-wrap:wrap !important; } .klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn { margin-bottom:5px;} } @media screen and (max-width: 500px) { .klaro .cm-modal {padding: 15px; } .my-klaro .cookie-notice { padding: 15px; } .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cm-btn { width:100% !important; } } .shodowContainer .naviExpanderShadow { width:0px;height:0px; } .naviExpander { display:none;position:relative; display:flex;flex-wrap:wrap;align-items:center;cursor:pointer; transition:0.2s ease-in-out scale 0s; } .naviExpander > div { opacity:1; top:0%;height:15%;position:relative;width:100%;border-radius:10px;background-color:#fff;transition:0.2s ease-in-out all 0s; transform-origin:50% 50%; } .naviExpander:hover { transform:scale(1.1); } body.showSidebar .naviExpander { opacity:1 !important;display:flex !important; } body.showSidebar .naviExpander > div:nth-child(1) { transform:rotate(45deg);top:34%; } body.showSidebar .naviExpander > div:nth-child(3) { transform:rotate(-45deg);top:-34%; } body.showSidebar .naviExpander > div:nth-child(2) { transform:scale(0);opacity:0; } .header ul.navi { opacity:0.2;box-sizing: border-box;display:flex;list-style:none;margin:0;padding:0;align-items:flex-start;padding-top:0px;flex-wrap:wrap;padding-left: 50px;justify-content: flex-end;width: 100%; } .header ul.navi li { overflow:hidden;transition:0.2s ease-in-out all 0s;padding:15px;margin:10px;margin-left:0px;margin-top:0px; font-size: 16pxpx;border-radius: 35px;background-color: var(--darkgreen);color: #fff;font-weight:bold;text-transform: uppercase;font-size: 16px; } .header ul.navi li font { position:relative;z-index:1; } .header ul.navi li a {color: #fff;text-decoration:none; } .header ul.navi li.hover { transform:scale(1.1);cursor:pointer; } .header ul.navi li::after { content:" ";display:block;position:relative;height:0%;position:absolute;bottom:0;left:0;right:0;border-radius:20%;background-color:rgba(0,0,0,0.4);transition:0.2s all 0s; } .header ul.navi li.hover::after { height:100%;border-radius:0%; } .fixedStartGebietsAnalyse { width: 200px;height: 150px;background-color: #fff;position: fixed;left: 50%;transform: translateX(-50%);z-index: 9;padding:20px; bottom:-282px;text-align:center; } .fixedStartGebietsAnalyse::after { content:" ";display:block;position:absolute;height:150px;width:150px;right:0px;transform:translateX(50%) rotate(45deg);background-color: #fff;top:32px } .fixedStartGebietsAnalyse::before { content:" ";display:block;position:absolute;height:150px;width:150px;left:0px;transform:translateX(-50%) rotate(45deg);background-color: #fff;top:32px } .fixedStartGebietsAnalyse button { z-index:2;flex-shrink:0;overflow:hidden;transition:0.2s transform 0s;transform:scale(1);color:#fff;white-space: nowrap;border:0px;background-color:var(--signal);text-transform: uppercase;font-size: 16px;border-radius: 30px;padding: 15px;font-weight: 900;font-family: "Mulish";position:absolute;left:50%;top:30px;transform:translateX(-50%); } .fixedStartGebietsAnalyse button font { position:relative;z-index:1; } .fixedStartGebietsAnalyse button:hover { cursor:pointer;transform:translateX(-50%) scale(1.05); } .fixedStartGebietsAnalyse button::after { content:" ";display:block;position:relative;height:0%;position:absolute;bottom:0;left:0;right:0;border-radius:20%;background-color:rgba(0,0,0,0.2);transition:0.2s all 0s; } .fixedStartGebietsAnalyse button:hover::after { height:100%;border-radius:0%; } @media screen and (max-width: 650px) { .fixedStartGebietsAnalyse { display:none; } } @media screen and (max-width: 500px) { .fixedStartGebietsAnalyse::after, .fixedStartGebietsAnalyse::before, .fixedStartGebietsAnalyse { background-color:transparent; } } .content { width:100vW; } .content .margincontainer { max-width:1400px;margin:0 auto;width: 100%; } .popUpOverlay { background-color:rgba(0,0,0,0.4);position:absolute;top:0;bottom:0;left:0;right:0;width:100%;height:100%;z-index:998;position:fixed; } .popUpWrap { position:absolute;top:0;bottom:0;left:0;right:0;width:100%;height:100%;z-index:999;overflow-y:scroll;position:fixed;padding:0px 0 ;} .popUpWrap .popUp { margin:0 auto;background-color:#fff;box-sizing:border-box;position:relative;padding:40px;max-width:1000px;width:100%;min-height:40px;margin-top:50px;margin-bottom:50px; } .popUpWrap .popUp .close { cursor:pointer;position:absolute;top:20px;height:40px;width:40px;right:20px;background: url(./images/xblack.svg) center center no-repeat transparent;background-size: auto;background-size: 67% auto;} .popUpWrap .popUp .loadHere { position:relative; } .popUpOverlay:not(.show) { display:none; } .popUpWrap:not(.show) { display:none; } @media screen and (max-width: 1040px) { .popUpWrap .popUp { margin:50px 20px;box-sizing:border-box;width:unset;width:auto; } } a.logo { text-decoration:none;} a.logo .brandname { font-size: 100px;font-weight:900;text-transform:uppercase;color:var(--black);margin:0;line-height: 100px; } a.logo .brandname font { color:var(--lightgreen); } #welcome .brandslogan { font-weight:300;margin:0;font-size: 31.7px; } #welcome { position:relative; } #welcome #video { position:absolute;background-color:var(--darkgrey);top:0;left:0;width:100vW;height:100vH;clip-path: inset(0% 0% 0% 0%);display: flex;justify-content: center;align-items: center;width: 100%;transform-origin:0 0;overflow: hidden; } #welcome .counterAnimate { object-fit: cover;position:absolute;top:0;left:0;width:100%;height:100%;transform-origin:0 0;display: flex; } #welcome .counterAnimate #myVideo { z-index:1;object-fit: cover;position:absolute;top:0;left:0;width:100%;height:100%; } #welcome .counterAnimate > div:not(.mobileVidOverlay) { position:relative;z-index:3; } #welcome .counterAnimate .mobileVidOverlay { opacity:0;display:none;z-index:2;position:absolute;left:0;top:0;right:0;bottom:0;z-index:1;background: linear-gradient(135deg, rgba(25,195,155,1) 0%,rgba(15,125,100,1) 100%); } @media (orientation: portrait) { #welcome .counterAnimate .mobileVidOverlay { display:block;}} #welcome .sticky { min-height: 100vH;display: flex;align-items: center; } #welcome.full .welcomeContent { min-height: 100vH;width:400vH;} #welcome .welcomeContent { flex-shrink: 0;} #welcome .welcomeContent .content { position:relative;display:flex;box-sizing:border-box;padding-top:50px;z-index:0; } #welcome .welcomeContent .content strong.subteaser, #welcome .welcomeContent .content h1.teaser { opacity:0;font-size: 18px; max-width: 60%;padding-bottom:25px; } #welcome .welcomeContent .content strong { margin-bottom:25px;display:block; } #welcome .welcomeContent .content ul.features { list-style:none;margin:0;padding:0;max-width: 60%; } #welcome .welcomeContent .content ul.features li { opacity:0;padding:20px;background-color:rgba(255,255,255,0.6);margin-bottom:10px; font-size: 18px;border-radius: 35px;padding-left:70px; } #welcome .welcomeContent .content ul.features li > div { position:absolute;left:10px;top:50%;border-radius:50%;width:50px;height:50px;background-color:#fff;transform:translateY(-50%); } #welcome .welcomeContent .content ul.features li > div::after { content:" ";position:absolute;left:-5px;top:-5px;right:-5px;bottom:-5px;background:url(./images/check.png) 80% 30% no-repeat transparent;background-size: 75% auto;} #welcome .welcomeContent .content .naviWrapper { width: 100%;display:flex;align-items:top;justify-content:flex-end;margin-top: 12px; } #welcome .welcomeContent .content .naviWrapper ul.navi { opacity:0;display:flex;list-style:none;margin:0;padding:0;align-items:center;padding-top:0px;flex-wrap:wrap;padding-left: 50px;justify-content: flex-end;width: 100%;overflow:hidden; } #welcome .welcomeContent .content .naviWrapper ul.navi li { position:relative;overflow:hidden;transition:0.2s ease-in-out all 0s;margin:10px;margin-left:0px;margin-top:0px; background-color: var(--darkgreen);color: #fff; } #welcome .welcomeContent .content .naviWrapper ul.navi li a { color:#fff;text-decoration:none; } #welcome .welcomeContent .content .naviWrapper ul.navi li font { position:relative;z-index:1; } #welcome .welcomeContent .content .naviWrapper ul.navi li.hover { transform:scale(1.1);cursor:pointer; } #welcome .welcomeContent .content .naviWrapper ul.navi li::after { content:" ";display:block;position:relative;height:0%;position:absolute;bottom:0;left:0;right:0;border-radius:20%;background-color:rgba(0,0,0,0.4);transition:0.2s all 0s; } #welcome .welcomeContent .content .naviWrapper ul.navi li.hover::after { height:100%;border-radius:0%; } #welcome .welcomeContent .content .naviWrapper.fixed { opacity:1 !important;transform:translateX(0%) !important;} @media screen and (max-width: 600px) { #welcome .welcomeContent .content h1.teaser { max-width:100%; } } .cryptedmail:before { content: attr(data-name) "\0040" attr(data-domain); } #welcome .welcomeContent #video h1, #welcome .welcomeContent #video h2, #welcome .welcomeContent #video h1 font, #welcome .welcomeContent #video strong.subteaser, #welcome .welcomeContent #video h1.teaser { color:#fff; } #welcome .welcomeContent #video button { background-color:rgba(0,0,0,0.5); } #welcome .welcomeContent .mainClaimWrap { display:flex;position:relative;z-index:1; } #welcome .welcomeContent .mainClaim { transform:scale(1.3);transform-origin:50% 0%;display: inline-block; } #welcome .welcomeContent .mainClaim.fixed { transform:scale(1) !important; } #welcome .welcomeContent .mainClaim .brandname { transform:translateX(-20%);opacity:0;transition:0.5s ease-in-out all 1s;position: relative;left: -3px; } #welcome .welcomeContent .mainClaim .brandslogan { transform:translateX(20%);opacity:0;transition:0.5s ease-in-out all 1.1s; } #welcome .welcomeContent .mainClaim .buttonWrap { transform-origin: 20% 50%; margin:-20px;padding:20px;display: inline-block;max-height:300px;overflow:hidden;box-sizing:border-box; } #welcome .mouse_scroll_wrap, #welcome .welcomeContent .mainClaim .buttonWrap > div { transition:0.5s ease-in-out all 1.6s;transform:scale(0.8);opacity:0; } #welcome .welcomeContent .mainClaim button { transition:0.2s transform 0s;background-color:var(--darkgreen);color:var(--white);border:0px;outline:0px;margin-top:18px;overflow:hidden; } #welcome .welcomeContent .mainClaim button::after { content:" ";display:block;position:relative;height:0%;position:absolute;bottom:0;left:0;right:0;border-radius:20%;background-color:rgba(0,0,0,0.4);transition:0.2s all 0s; } #welcome .welcomeContent .mainClaim button:hover::after { height:100%;border-radius:0%; } #welcome .welcomeContent .mainClaim button:hover { cursor:pointer;transform:scale(1.05); } #welcome .welcomeContent .mainClaim button font { position:relative;z-index:1; } #welcome .welcomeContent .mainClaim.show .brandname, #welcome .welcomeContent .mainClaim.show .brandslogan { transform:translateX(0%);opacity:1; } #welcome .mouse_scroll_wrap.show, #welcome .welcomeContent .mainClaim.show .buttonWrap > div { transform:scale(1);opacity:1; } #welcome .playVideoWrap { transform:scale(1.3);transform-origin:50% 0%;position:absolute;right:50px;bottom:50px; } #welcome .playVideo { padding-left:30px !important;display:none;z-index:0;overflow:hidden;transition:1s max-width 1s,1s padding-left 1s, 0.2s transform 0s;white-space:nowrap;max-width:0px;position:absolute;right:0px;bottom:0px;background-color:rgba(0,0,0,0.5);color:#fff;padding-left:45px; } #welcome .playVideo font { opacity:0;transition:1s ease-in-out all 2s;position:relative;z-index:1; } #welcome .playVideo font font:nth-child(2) { font-weight:100; } #welcome .playVideo div { background:url(./images/play.svg) center center no-repeat #fff;background-size:50% auto;transition:0.3s ease-in-out all 0.5s;transform-origin:50% 0%;transform:scale(1.2) translateY(-50%);position:absolute;left:5px;top:50%;width:35px;height:35px;border-radius:50%; } #welcome .playVideo.show { max-width:400px;padding-left:45px !important; } #welcome .playVideo.show font { opacity:1; } #welcome .playVideo.show div { transform:scale(1) translateY(-50%); } #welcome .playVideo.hover { cursor:pointer;transform:scale(1.05); } #welcome .playVideo span { height:0%;position:absolute;bottom:0;left:0;right:0;border-radius:20%;background-color:rgba(0,0,0,0.4);transition:0.2s all 0s; } #welcome .playVideo.hover span { height:100%;border-radius:0%; } #welcome #video .playVideo { z-index:1;display:block;cursor:pointer; } #content .sticky { min-height: 100vH;display: flex;align-items: center; } #content .sticky-element { width:100%; } #welcome .sogehts.content { position:relative;z-index:3; } #welcome .sogehts .sogehtswrap { position:relative;display:none; } #welcome .sogehts .bg { opacity:0;width:0%;position:relative;min-height:140px;background-color:#fff;transform-origin:50% 50%; } #welcome .sogehts .bg > .rgt, #welcome .sogehts .bg > .lft { height:100px;width:100px;transform:rotate(45deg);background-color:#fff;position:absolute;top:20px;bottom:0; } #welcome .sogehts .bg > .lft { left:-50px; } #welcome .sogehts .bg > .rgt { right:-50px; } #welcome .sogehts .cnt { display:flex;position:absolute;left:0;right:0;top:0;bottom:0;align-items:center;z-index: 1; } #welcome .sogehts .cnt > strong {opacity:0; font-size:70px;font-weight:900;display:inline-block;margin:0px; } #welcome .sogehts .cnt > font { width:20%;opacity:0;font-size: 19px;padding:0px 20px;display:inline-block;} #welcome .sogehts .lsbtn { margin-right:-100px;opacity:0; } .playVideoWrapOverlay { background-color:rgba(0,0,0,0.7);position:absolute;top:0;bottom:0;right:0;left:0;height:100%;width:100%;z-index:999;display:flex;align-items:center;justify-content:center; } .playVideoWrapOverlay:not(.show) { display:none !important; } .playVideoWrapOverlay .inner { position:relative;width:80%; } .playVideoWrapOverlay .inner::after { content:" ";display:block;padding-bottom:56.25%;position:relative;z-index:1; } .playVideoWrapOverlay .inner > video { position:absolute;top:0px;height:100%;width:100%;z-index:2;box-shadow: 0px 0px 0px 20px rgba(0,0,0,0.8); } .playVideoWrapOverlay .inner > .close { width:40px;position:absolute;top:-10px;right:-10px;background-color:#fff;cursor:pointer; height:40px;z-index:3;background: url(./images/xblack.svg) center center no-repeat #fff;background-size: 45% auto;} /* button style: header buttons and call to action button **/ .mobileSideMenu .in ul.navi li , #welcome .welcomeContent .content .naviWrapper ul.navi li { text-transform:uppercase;font-size: 18px; border-radius: 30px;padding:15px;font-weight:900;font-family: "Mulish"; } .mobileSideMenu .in ul.navi li { padding-left:25px; } /** button style: video overlay **/ #welcome .playVideo , #welcome .welcomeContent .mainClaim button { padding:15px;border-radius:30px;font-family: "Mulish"; font-weight:900;font-size:14px; } .lsbtn { display: inline-block;position:relative;flex-shrink:0;overflow:hidden;text-decoration:none;transition:0.2s transform 0s;transform:scale(1);color:#fff;white-space: nowrap;border:0px;background-color:var(--signal);text-transform:uppercase;font-size: 16px;padding:15px;border-radius:30px;font-family: "Mulish"; font-weight:900;} .lsbtn.green { background-color: var(--green); } .lsbtn font { position:relative;z-index:1; } .lsbtn:hover { cursor:pointer;transform:scale(1.05); } .lsbtn:not(:disabled)::after { content:" ";display:block;position:relative;height:0%;position:absolute;bottom:0;left:0;right:0;border-radius:20%;background-color:rgba(0,0,0,0.2);transition:0.2s all 0s; } .lsbtn:not(:disabled):hover::after { height:100%;border-radius:0%; } .lsbtn:disabled { opacity:0.5; } @media screen and (max-width: 600px) { .lsbtn { font-size: 16px;padding:15px; } } @media screen and (max-width: 600px) { .lsbtn { font-size: 16px;padding:15px; } } .mobileSideMenu { z-index:1;position:absolute;top:0;left:0;bottom:0;width:300px;transition:0.2s all 0s;background-color:var(--darkgrey);height:100%; transform:translateX(-100%); } .mobileSideMenu .in ul.navi { list-style:none;display: block !important;margin:0;padding:0; } .mobileSideMenu .in ul.navi li { cursor:pointer;border-radius:0 !important;width:100%;color:#fff;border-bottom:1px solid rgba(255,255,255,0.1);box-sizing:border-box; } .mobileSideMenu .in ul.navi li a { color:#fff;text-decoration: none;} .mobileSideMenu .in .naviExpander { left:20px;top:20px;margin-bottom: 45px;margin-top: 18px; } body.showSidebar .mobileSideMenu { transform:translateX(0%); } .scrollWrapper { transform:translateX(0px);transition:0.2s all 0s;position: absolute;top: 0;left: 0;bottom: 0;right: 0;width: 100%;height:100dvh; } body.showSidebar .scrollWrapper { transform:translateX(300px); } body .scrollWrapper::before { content:" ";display:block;position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%;height:100dvh;background: linear-gradient(135deg, rgba(25,195,155,1) 0%,rgba(254,252,234,0.29) 71%,rgba(254,252,234,0) 100%);transition:0.2s all 0s; z-index:0;opacity:0;} body.showSidebar .scrollWrapper::before { z-index:3;opacity:0.5;} .shodowContainer { height:1px;overflow:hidden; } @media screen and (max-width: 1640px) { #welcome .welcomeContent .content { padding-top:20px;padding-bottom:20px; } #welcome .welcomeContent .mainClaim { transform-origin:0% 0%; } #welcome .sogehts .sogehtswrap { margin:0 -20px; } #welcome .sogehts .cnt { padding:0 20px; } #welcome .sogehts .cnt button { margin-right:0px; } ul.navi { display:none !important; } .shodowContainer .naviExpanderShadow { width:50px;height:50px; } .naviExpander { width:50px;height:50px;display:flex;opacity:0; } } @media screen and (max-width: 1440px) { .content .margincontainer { padding:0 20px;width:100%;box-sizing:border-box; } #welcome .playVideoWrap { right:20px;bottom:20px; } } @media screen and (max-width: 1340px) { #welcome .welcomeContent .content ul.features { max-width:unset;max-width:auto; } /** Claim Sizes **/ a.logo .brandname { font-size: 120px;line-height: 120px; } #welcome .brandslogan { font-size:38px;line-height: 40px; } #welcome .welcomeContent .content strong.subteaser, #welcome .welcomeContent .content p.teaser { max-width:unset;max-width:auto; } #welcome .welcomeContent .content ul.features li { display: inline-block; } #welcome .welcomeContent .content ul.features li, #welcome .welcomeContent .content strong.subteaser, #welcome .welcomeContent .content p.teaser, #welcome .sogehts .cnt > font{ font-size: 18px; } } @media screen and (max-width: 1100px) { /** Claim Sizes **/ a.logo .brandname { font-size: 110px;line-height: 110px; } #welcome .brandslogan { font-size:34px;line-height: 36px; } #welcome .welcomeContent .mainClaim button { margin-top:14px; } #welcome .sogehts .cnt { position:relative;flex-wrap:wrap;padding: 20px 40px;padding-top:10px;border-radius:10px; } #welcome .sogehts .cnt > strong { width:30px } #welcome .sogehts .cnt > font { width:calc(100% - 30px);box-sizing: border-box; } #welcome .sogehts .cnt > strong { font-size:50px; } #welcome .sogehts .bg { position:absolute;left:20px !important;right:20px !important;bottom:0;width: unset;min-height: 0px;border-radius:10px; } #welcome .sogehts .bg .lft, #welcome .sogehts .bg .rgt { display:none; } .shodowContainer .naviExpanderShadow { width:50px;height:50px; } .naviExpander { width:50px;height:50px; } } @media screen and (max-width: 870px) { /** Claim Sizes **/ a.logo .brandname { font-size: 90px;line-height: 90px; } #welcome .brandslogan { font-size:28px;line-height: 28px; } } @media screen and (max-width: 720px) { /** Claim Sizes **/ a.logo h1 { font-size: 70px;line-height: 70px; } #welcome .brandslogan { font-size:22px;line-height: 23px; } #welcome .welcomeContent .mainClaim button { margin-top: 8px;} #welcome .playVideo , #welcome .welcomeContent .mainClaim button { padding:10px 15px;font-size:12px; } #welcome .playVideo div { width:25px;height:25px; } } @media screen and (max-width: 640px) { /** Claim Sizes **/ a.logo .brandname { font-size: 65px;line-height: 65px; } #welcome .brandslogan { font-size:20px;line-height: 22px; } } @media screen and (max-width: 540px) { #welcome .playVideo font font:nth-child(1) { display:none; } #welcome .playVideo font font:nth-child(2) { font-weight:inherit !important; } a.logo .brandname { font-size: 55px;line-height: 55px; } #welcome .brandslogan { font-size:17px;line-height: 18px; } #welcome .welcomeContent .content ul.features li, #welcome .welcomeContent .content strong.subteaser, #welcome .welcomeContent .content p.teaser, #welcome .sogehts .cnt > font { font-size: 15px;} #welcome .welcomeContent .content ul.features li { padding:10px;padding-left: 50px; } #welcome .welcomeContent .content ul.features li > div { width:35px;height:35px;left:5px; } .shodowContainer .naviExpanderShadow { width:35px;height:35px; } .naviExpander { width:35px;height:35px;transform: translateY(-6px); } .header .naviExpander { transform: translateY(0px); } /* font size for header buttons and call to action button **/ .mobileSideMenu .in ul.navi li, #welcome .sogehts .cnt button, #welcome .welcomeContent .content .naviWrapper ul.navi li { font-size: 18px;padding:15px 20px; } } @media screen and (max-width: 450px) { a.logo .brandname { font-size: 45px;line-height: 45px; } #welcome .brandslogan { font-size:14px;line-height: 16px; } } /**************************/ /**** WAS KANN LANDSCAN ***/ /**************************/ #subsite { min-height: 100vH; } #subsite .content { padding-top:100px;font-size: 18px; } #subsite .content .flex { display:flex; } #subsite .content .flex .lft { width:60%;box-sizing:border-box;padding-right:50px; } #subsite .content .flex .rgt { width:40%;box-sizing:border-box; } #subsite .content .flex .rgt > div { background-color: rgba(255,255,255,0.2);padding:30px;border-radius:30px;margin-top:-30px; } @media screen and (max-width: 1050px) { #subsite .content { padding-top:50px; } #subsite .content .flex { flex-wrap:wrap; } #subsite .content .flex .lft { width:100%;padding-right:0px;padding-bottom:40px; } #subsite .content .flex .rgt { width:100%;padding-bottom:40px; } } @media screen and (max-width: 1050px) { #subsite .content .flex .rgt > div { padding:15px; } } #subsite a[gotosite] { position:relative;text-decoration: none;background: url(./images/arrow_right.svg) center right 20px no-repeat var(--darkgreen);background-size:25px;cursor: pointer;display: inline-block;padding: 10px 20px;padding-right:70px;border-radius:30px;color: var(--white);font-weight: bold;margin-bottom:10px; } #subsite table { width:100%;background-color:rgba(255,255,255,0.4);border-radius:10px;overflow:hidden;border:3px solid #fff;} #subsite table tr td {padding: 10px 20px; border: 1px solid #fff; } #subsite table tr td.check { color:#fff;background-color: var(--green);text-align: center; } #subsite table tr td.check div { width: 40px;height: 40px;background: url(./images/checkWhite.svg) center center no-repeat var(--darkgreen);border:3px solid var(--darkgreen);background-size: 54% auto;margin: 0 auto;border-radius: 50%;margin-bottom: 10px;} #subsite table tr td.check.left { position:relative;padding-left:60px;text-align:left;min-height:60%;padding-top:20px;padding-bottom:20px;} #subsite table tr td.check.left div { width:30px;height:30px;position:absolute;top:50%;left:10px;transform:translateY(-50%);} #subsite table tr td.check_tw { color:#fff;background-color: var(--green);text-align: center; } #subsite table tr td.check_tw div { width: 40px;height: 40px;background: url(./images/checkWhite.svg) center center no-repeat transparent;border:3px dashed var(--darkgreen);background-size: 54% auto;margin: 0 auto;border-radius: 50%;margin-bottom: 10px;} #subsite table tr td.x div { width:20px;height:20px;background:none center center no-repeat transparent;background-size: 100% auto;margin:0 auto;} #subsite table tr td.center { text-align:center;} #subsite table tr.bold td { font-weight:bold; } #subsite .responsiveTable { overflow-x:auto;border-radius: 5px; } ul.bulletList { list-style:none;margin:0;padding:0;padding-top:25px; } ul.bulletList li { padding:0; margin-bottom: 10px;display:block;} ul.bulletList li > div { display:inline-block;background-color: rgba(255,255,255,0.6);padding:10px 25px;position:relative;border-radius: 35px;padding-left: 50px; } ul.bulletList li > div > div {position: absolute;left: 10px;top: 50%;border-radius: 50%;width: 30px;height: 30px;background-color: #fff;transform: translateY(-50%);} ul.bulletList li > div > div::after {content: " ";position: absolute;left: -5px;top: -5px;right: -5px;bottom: -5px;background: url(./images/check.png) 80% 30% no-repeat transparent;background-size: auto;background-size: 75% auto;} ul.bulletList.green li > div { background-color: rgba(15,125,100,0.15); } #subsite .pyramid { width:80%;margin:0 auto;display: flex;flex-direction: column;} #subsite .pyramidWrap {background-color:rgba(255,255,255,0.2);border-radius:10px;text-align:center;padding:20px;border:3px solid #fff; } #subsite .pyramid__section {display:inline-block;margin:0 auto;flex: 1 1 100%;padding: 20px 20px;box-sizing: border-box;background-color: green;margin-bottom: 2px;text-align: center;} #subsite .pyramid__section:nth-child(4) { width:90%;background-color:var(--green);color:var(--white);min-width: 275px; } #subsite .pyramid__section:nth-child(3) { width:70%;background-color:var(--green);color:var(--white);min-width: 275px; } #subsite .pyramid__section:nth-child(2) { width:50%;background-color:var(--lightgreen);min-width: 270px; } #subsite .pyramid__section:nth-child(1) { width:30%;background-color:var(--lightgreen);min-width: 167px;} #subsite .pyramid__section div { width: 30px;height: 30px;background: url(./images/checkWhite.svg) center center no-repeat var(--darkgreen);border:3px solid var(--darkgreen);background-size: 54% auto;margin: 0 auto;border-radius: 50%;margin-bottom: 10px;} @media screen and (max-width:600px) { #subsite .pyramid { width:100%;} } @media screen and (max-width:370px) { #subsite .pyramidWrap { background-color:transparent;padding:0px;border:0px; } } #subsite .legend { position:relative;display:flex;justify-content:center;padding-top:20px;font-weight:bold;flex-wrap:wrap;} #subsite .legend > div::after { content:" ";display:block;width:60px;height:30px;position:absolute;top:0px;left:0px;} #subsite .legend > div { position:relative;padding:5px 10px;padding-left:70px;min-width:150px; } #subsite .legend > div:nth-child(1)::after { background-color:var(--green);} #subsite .legend > div:nth-child(2)::after { background-color:var(--lightgreen);} #subsite .productList { list-style:none;margin:0;padding:0; } #subsite .productList li.none { background-color: rgba(255,255,255,0.2);border-radius: 30px;border: 0px solid #fff;color: #737476;font-weight: bold;text-align: center;padding: 20px 30px; } #subsite .productList li:not(.none) {background-color:rgba(255,255,255,0.4);text-align:left;position:relative; border-radius: 30px;margin-bottom: 10px;} #subsite .productList li:not(.none) strong { display:block;color:#000;font-weight: bold; } #subsite .productList li:not(.none) .delete { cursor:pointer;width: 50px;background: url(./images/delete.svg) center center no-repeat rgba(255,255,255,0.4);background-size:50% auto; height: 50px;border-radius:30%;position: absolute;top: 50%;right: 20px;margin-top: -25px; } #subsite .productList li:not(.none) .delete :hover { background-color:rgba(255,255,255,0.6); } #subsite .productList li:not(.none) .top { padding: 20px 30px;padding-right: 80px;position:relative; } #subsite .disclaimer { font-size: 14px;padding-top: 20px;margin-top: 24px;border-top: 2px dotted #000; } #subsite .warenkorb [page="1"] .productList label.checkContainer { font-size:inherit;border: 0px;border-top-left-radius:0px;border-top-right-radius:0px;border-top: 3px dotted #000; } #subsite .warenkorb [page="1"] .productList label.checkContainer font { font-size:14px; } #subsite .warenkorb table.produkte td:nth-child(3) { white-space:nowrap; } #subsite .price, #subsite .deadline { background-color: rgba(255,255,255,0.2);border-radius: 30px;border: 0px solid #fff;color: #737476;padding: 20px 30px;font-weight: bold;text-align: center;} #subsite .deadline { margin-bottom:20px; } #subsite .deadline.set, #subsite .price.set { text-align:right;color:#000;background-color:rgba(255,255,255,0.4); } #subsite .price.set { font-size:20px;} #subsite .price.set font { display:block;font-weight:100; } #subsite .deadline span { display:block;} #subsite .deadline font { font-weight:100; } #subsite .nx { display:flex; } #subsite .nx [name="goToPage3"], #subsite .nx [name="warenkorbNext"] { margin-left:auto; } #subsite .warenkorb { position:relative; } #subsite .warenkorb[page="1"] strong {padding-bottom: 25px;display: block;padding-top: 10px; } #subsite .warenkorb .loader { display:none; } #subsite .warenkorb.loading [page] { opacity:0.4;} #subsite .warenkorb.loading .loader { display:block; } #subsite .warenkorb [page] { display:none; } #subsite .warenkorb[page="1"] [page="1"], #subsite .warenkorb[page="2"] [page="2"], #subsite .warenkorb[page="3"] [page="3"], #subsite .warenkorb[page="4"] [page="4"] { display:block; } #subsite .warenkorb [page="2"] strong { display:block;padding-bottom: 10px; } #subsite .warenkorb [page="2"] select, #subsite .warenkorb [page="2"] input { box-sizing: border-box;width:100%;box-sizing:border-box;background-color: rgba(0,0,0,0.2);padding: 20px;border-radius: 30px;border: 0px;color: #fff;font-weight: bold;font-size: 16px;font-family: inherit;padding-top: 25px;margin-bottom: 10px;} #subsite .warenkorb [page="2"] select option { font-family:inherit; } #subsite .warenkorb [page="2"] .flx { display:flex; } #subsite .warenkorb [page="2"] .flx > div:nth-child(1) { margin-right:5px;width: 100%; } #subsite .warenkorb [page="2"] .flx > div:nth-child(2) { margin-left:5px; } #subsite .warenkorb [page="2"] .error { box-shadow: 0px 0px 0px 5px var(--error) inset; } #subsite .warenkorb [page="2"] .tl { position:relative;margin-top: 10px; } #subsite .warenkorb [page="2"] .tl font { background-color: #fff;padding: 5px 14px;font-size: 12px;position: absolute;z-index: 1;border-radius: 30px;font-weight: bold;right: 11px;top: -10px; } #subsite .warenkorb [page="3"] table { margin-bottom:20px; } #subsite .warenkorb [page="3"] table span { display:block;font-weight:600;} #subsite .warenkorb [page="3"] table, #subsite .warenkorb [page="3"] table tr td { border: 0px;} #subsite .warenkorb table.produkte tr td { border-bottom:3px dashed #68d7af; } #subsite .warenkorb table.produkte tr:last-child td { border-bottom:0px; } #subsite .warenkorb [page="3"] [name="angebotAnfordern"] , #subsite .warenkorb [page="3"] [name="order"], #subsite .warenkorb [page="3"] [name="angebot"] { width:100%;margin-bottom:10px; } #subsite .warenkorb [page="3"] [name="angebot"] { background-color:var(--darkgreen); } #subsite .addProductBox { display:flex;align-items:center;background-color: rgba(255,255,255,0.2);padding: 30px;margin:0 0px;border-radius: 30px;margin-bottom:50px;} #subsite .addProductBox strong { display:block; } #subsite .addProductBox > div { padding-right:30px; } #subsite .addProductBox.disabled { display:none; } @media screen and (max-width: 1450px) { #subsite .addProductBox { margin:0;} #subsite .addProductBox { flex-wrap:wrap; } #subsite .addProductBox > div { padding-right:0px;padding-bottom:20px;} } @media screen and (max-width: 600px) { #subsite .addProductBox { padding:20px; } } #subsite .warenkorb [page="3"] .checkContainer input:checked ~ .label { border:1px solid red; } #subsite .warenkorb [page="3"] .checkContainer { background-color: rgba(255,255,255,0.2);border:0px; } #subsite .warenkorb [page="3"] .checkContainer a { color:#000;text-decoration: underline; } #subsite .warenkorb.anfrage [name="order"], #subsite .warenkorb.anfrage [name="angebot"], #subsite .warenkorb.anfrage .angebotInfo { display:none; } #subsite .warenkorb:not(.anfrage) [name="angebotAnfordern"] { display:none; } #subsite .warenkorb .error { display: block;border-radius: 30px;padding: 10px 20px;color: #fff;box-sizing: border-box;background-color: var(--error);width: 100%;margin-bottom: 10px;} #subsite .warenkorb .angebotInfo { padding: 23px; padding-top: 23px; margin-bottom: 20px; border-bottom-right-radius: 30px; border-bottom-left-radius: 30px; border-top: 0px; margin-top: -40px; padding-top: 42px; font-size: 15px; } .regularContentBox { background-color: rgba(255,255,255,0.4); padding: 50px; box-sizing: border-box; border-radius: 30px; margin: 0 auto; text-align: justify;} @media screen and (max-width: 1000px) { .regularContentBox { padding-right:50px; } } @media screen and (max-width: 500px) { .regularContentBox { padding:50px 30px; } } form.customOffer strong { display:block;padding-bottom: 10px; } form.customOffer select, form.customOffer textarea, form.customOffer input { box-sizing: border-box;width:100%;box-sizing:border-box;background-color: rgba(0,0,0,0.2);padding: 20px;border-radius: 30px;border: 0px;color: #fff;font-weight: bold;font-size: 16px;font-family: inherit;padding-top: 25px;margin-bottom: 10px;} form.customOffer select option { font-family:inherit; } form.customOffer .flx { display:flex; } form.customOffer .flx > div:nth-child(1) { margin-right:5px;width: 100%; } form.customOffer .flx > div:nth-child(2) { margin-left:5px; } form.customOffer .error { box-shadow: 0px 0px 0px 5px var(--error) inset; } form.customOffer .tl { position:relative;margin-top: 10px; } form.customOffer .tl font { background-color: #fff;padding: 5px 14px;font-size: 12px;position: absolute;z-index: 1;border-radius: 30px;font-weight: bold;right: 11px;top: -10px; } form.customOffer .flex > div:nth-child(1) { padding-right:20px; } form.customOffer table, form.customOffer table tr td { border:0px !important; } form.customOffer table { margin-bottom:20px; } form.customOffer .products { border-radius:30px;display:flex;align-items:center; border:3px solid rgba(0,0,0,0.2);margin-bottom:20px;padding:10px 20px;} form.customOffer .products > div { width:50%; } form.customOffer input[readonly] { opacity:0.6;} form.customOffer a { text-decoration:none;color:var(--signal);} form.customOffer input[readonly]:focus { outline:0;border:0; } form.customOffer button { width:100%;margin-bottom:10px; } form.customOffer button[type='submit'] { background-color: var(--darkgreen) !important; } form.customOffer:not(.done) .done { display:none; } form.customOffer.done .done { text-align:center; } form.customOffer.done > .flex { display:none !important; } form.customOffer div.error { text-align:center;display:block;border-radius:30px ;padding:10px 20px;color:#fff;background-color:var(--error);width: 100%;margin-bottom: 20px; } form.customOffer { position:relative; } form.customOffer:not(.loading) .loader { display:none } form.customOffer.loading > div.flex { opacity:0.4; } form.customOffer.loading::after { content:" ";position:absolute;top:0;right:0;left:0;bottom:0; } form.customOffer .done { text-align: center;margin: 0 20x;max-width: 800px;margin: 0 auto;padding: 30px;background-color: rgba(255,255,255,0.3);border-radius: 30px;} form.customOffer .done h1 { margin-bottom:0px !important; } form.acceptOffer { position:relative; } form.acceptOffer button { width:100%;margin-bottom:10px; } form.acceptOffer button[type='submit'] { background-color: var(--darkgreen) !important; } form.acceptOffer:not(.done) .done { display:none; } form.acceptOffer.done .done { text-align: center;margin: 0 20x;max-width: 800px;margin: 0 auto;padding: 30px;background-color: rgba(255,255,255,0.3);border-radius: 30px;} form.acceptOffer.done .done h1 { margin-bottom:0px !important; } form.acceptOffer.done > .form { display:none !important; } form.acceptOffer div.error { text-align:center;box-sizing: border-box; max-width: 800px;margin:0 auto;display:block;border-radius:30px ;padding:10px 20px;color:#fff;background-color:var(--error);width: 100%;margin-bottom: 20px; } form.acceptOffer div.form { box-sizing: border-box; text-align: center;margin: 0 20x;max-width: 800px;margin: 0 auto;padding: 30px;background-color: rgba(255,255,255,0.3);border-radius: 30px;} form.acceptOffer .button { transition:0.2s all 0s;display:block; text-decoration:none;color:#fff;position: relative;cursor:pointer;overflow:hidden;border: 0px;border-radius: 30px;background-color: var(--darkgreen);font-weight: 900;padding:15px;margin-top: 10px;font-size:16px;text-transform:uppercase;margin-bottom: 10px; } form.acceptOffer .button:hover { cursor:pointer;transform:scale(1.05); } form.acceptOffer .button::after { content:" ";display:block;position:relative;height:0%;position:absolute;bottom:0;left:0;right:0;border-radius:20%;background-color:rgba(0,0,0,0.2);transition:0.2s all 0s; } form.acceptOffer .button:hover::after { height:100%;border-radius:0%; } form.acceptOffer:not(.loading) .loader { display:none !important; } form.acceptOffer.loading > div.form { opacity:0.4; } form.acceptOffer.loading::after { content:" ";position:absolute;top:0;right:0;left:0;bottom:0; } form.feedback { position:relative; } form.feedback button { width:100%;margin-bottom:10px; } form.feedback button[type='submit'] { background-color: var(--darkgreen) !important; } form.feedback:not(.done) .done { display:none; } form.feedback.done .done { text-align: center;margin: 0 20x;max-width: 800px;margin: 0 auto;padding: 30px;background-color: rgba(255,255,255,0.3);border-radius: 30px;} form.feedback.done .done h1 { margin-bottom:0px !important; } form.feedback.done > .form { display:none !important; } form.feedback div.error { text-align:center;box-sizing: border-box; max-width: 800px;margin:0 auto;display:block;border-radius:30px ;padding:10px 20px;color:#fff;background-color:var(--error);width: 100%;margin-bottom: 20px; } form.feedback div.form { box-sizing: border-box; text-align: center;margin: 0 20x;max-width: 800px;margin: 0 auto;padding: 30px;background-color: rgba(255,255,255,0.3);border-radius: 30px;} form.feedback .button { transition:0.2s all 0s;display:block; text-decoration:none;color:#fff;position: relative;cursor:pointer;overflow:hidden;border: 0px;border-radius: 30px;background-color: var(--darkgreen);font-weight: 900;padding: 20px 30px;margin-top: 10px;font-size: 20px; } form.feedback .button:hover { cursor:pointer;transform:scale(1.05); } form.feedback .button::after { content:" ";display:block;position:relative;height:0%;position:absolute;bottom:0;left:0;right:0;border-radius:20%;background-color:rgba(0,0,0,0.2);transition:0.2s all 0s; } form.feedback .button:hover::after { height:100%;border-radius:0%; } form.feedback:not(.loading) .loader { display:none !important; } form.feedback.loading > div.form { opacity:0.4; } form.feedback.loading::after { content:" ";position:absolute;top:0;right:0;left:0;bottom:0; } form.feedback textarea { background-color:rgba(0,0,0,0.2);padding:20px;border-radius:20px;color:#fff;font-family:inherit;width:100%;box-sizing:border-box;margin-bottom:20px;border:0px;min-height:50px;font-size:inherit; } .star-wrap { width: max-content; margin: 0 auto; position: relative; margin-bottom:20px; } .star-label.hidden { display: none; } .star-label { display: inline-flex; justify-content: center; align-items: center; width: 4rem; cursor:pointer; height: 4rem; } .star-shape { background-color: gold; width: 80%; height: 80%; clip-path: polygon( 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35% ); } /* make stars *after* the checked radio gray*/ .star:checked + .star-label ~ .star-label .star-shape { background-color: var(--darkgreen); } /*hide away the actual radio inputs*/ .star { position: fixed; opacity: 0; /*top: -90000px;*/ left: -90000px; } .star:focus + .star-label { outline: 0px dotted black; } .exp-link { text-align: center; padding: 1rem 2rem; } .exp-link a{ color: var(--darkgreen); text-decoration:underline; } .skip-button { padding:5px 10px;background-color:rgba(0,0,0,0.2);border-radius:30px;color:#fff;cursor:pointer;font-size: 15px; position: relative; top: -8px; } .overview { position:relative; } .overview:not(.loading) .loader { display:none !important; } .overview.loading > div.margincontainer { opacity:0.4; } .overview.loading::after { content:" ";position:absolute;top:0;right:0;left:0;bottom:0 ; } .overview table tr td { border:0px !important;font-size:14px; } .overview table tr:nth-child(1) td { background-color:#fff;font-weight:bold; } .overview table tr td button { padding: 5px 10px !important; font-size: 12px !important; } .overviewInnerPW { margin:0 auto;border-radius:30px;padding:20px;background-color:rgba(255,255,255,0.2);margin-bottom:40px; } .overviewInnerPW input {text-align:center; box-sizing: border-box;width:100%;box-sizing:border-box;background-color: rgba(0,0,0,0.2);padding: 20px;border-radius: 30px;border: 0px;color: #fff;font-weight: bold;font-size: 16px;font-family: inherit;padding-top: 25px;margin-bottom: 10px;} .overviewInnerPW strong { display: block;padding-bottom: 10px; } .overviewInnerPW.hidden, .overviewInner.hidden { display:none; } .content.regulartext { padding-bottom:150px; } .preisliste tr td { padding:10px;} .preisliste { background-color:rgba(0,0,0,0.05); } .preisliste tr td[colspan] { background-color:rgba(0,0,0,0.05); } .upload-form {display: flex;flex-flow: column;padding:0px;} .upload-form h1 {margin: 0;padding: 15px;font-size: 18px;font-weight: 500;color: #434850;text-align: center;} .upload-form label { text-align:center;flex-shrink:0;overflow:hidden;transition:0.2s transform 0s;transform:scale(1);color:#fff;white-space: nowrap;margin-bottom:10px;border:0px;background-color:var(--signal);text-transform: uppercase;font-size: 16px;border-radius: 35px;padding: 20px;font-weight: 900;font-family: "Mulish" } .upload-form label font { position:relative;z-index:1; } .upload-form label:not(:disabled):hover { cursor:pointer;transform:scale(1.05); } .upload-form label::after { content:" ";display:block;position:relative;height:0%;position:absolute;bottom:0;left:0;right:0;border-radius:20%;background-color:rgba(0,0,0,0.2);transition:0.2s all 0s; } .upload-form label:not(:disabled):hover::after { height:100%;border-radius:0%; } .upload-form label:disabled { opacity:0.5; } .upload-form .progress { display:none;padding: 20px 30px;background-color: rgba(255,255,255,0.4);margin-bottom: 10px;text-align: center;border-radius: 30px;overflow:hidden;position:relative; } .upload-form .progress .txt { position:relative; } .upload-form .progress .bar { position:absolute;left:0;top:0;bottom:0;background-color: rgba(255,255,255,0.4); } .upload-form[state="ready"] label { display:none; } .upload-form[state="ready"] .progress { display:block; } .upload-form input[type="file"] {appearance: none;visibility: hidden;height: 0;width: 0;padding: 0;margin: 0;} .upload-form button { width:100%; } .upload-form button:disabled { opacity:0.5; } .upload-form .result {padding-top: 15px;} .upload-form .error { display:block;border-radius:30px ;padding:10px 20px;color:#fff;box-sizing:border-box;background-color:var(--error);width: 100%;margin-bottom: 20px;margin-bottom: 10px;text-align: center; } .upload-form:not([state="done"]) .final { display:none; } .upload-form[state="done"] label, .upload-form[state="done"] button { display:none; } .upload-form .final { border-radius:30px;padding:20px;padding-right:80px;background-color:rgba(255,255,255,0.4);position:relative;border-top-left-radius: 0px; border-top-right-radius: 0px; } .upload-form .final .delete { cursor:pointer;width: 50px;background: url(./images/delete.svg) center center no-repeat rgba(255,255,255,0.4);background-size:50% auto; height: 50px;border-radius:30%;position: absolute;top: 50%;right: 20px;margin-top: -25px; } .upload-form .final .delete:hover { background-color:rgba(255,255,255,0.6); } .upload-form .geoInfo { text-align:left;padding-top:10px; } .upload-form .geoInfo a[gotosite] { background-image: none !important;padding-right: 20px !important; } .upload-form[state="done"] .geoInfo { display:none; } #leistung { font-size: 18px;color:var(--black);position:relative;overflow:hidden; } #leistung .sticky { align-items:top;} #leistung .sticky .content { background-color:rgba(255,255,255,0.2); } #leistung .flex { display:flex;flex-wrap:wrap; } #leistung .flex .lft { width:33%;box-sizing:border-box;padding-right:50px;position:relative; } #leistung .flex .rgt { width:67%;box-sizing:border-box; } #leistung .flex .rgt strong { font-size:20px;margin-bottom:30px;font-weight: 900;text-align: center;text-transform: uppercase;display:block; } h1.lshead { font-weight: 900;text-transform: uppercase;font-size: 40px;margin-top:0px;} h1.lshead font { display:block;font-size:20px;padding-top:10px;} h2.lshead { font-weight: 900;text-transform: uppercase;font-size: 30px;margin-top:0px;} h2.lshead.centered { text-align:center;} h2.lshead font { font-size:20px;display:block;padding-bottom:30px; } h2.lshead font b { background-color: var(--darkgreen);color: #fff;padding: 5px 20px;} h3.lshead { font-weight: 900;text-transform: uppercase;font-size: 30px;margin-top:0px;} h4.lshead { font-weight: 900;text-transform: uppercase;font-size: 24px;margin-top:0px; } h4.lshead font { overflow:hidden;width:0px;height:0px;opacity:0;display: block;} h1.lshead.npbotpad, h2.lshead.npbotpad, h3.lshead.npbotpad { padding-bottom:0px;margin-bottom:0px; } #leistung .flex .lft .t1 ul { list-style:none;margin:0;padding:0;margin-bottom:20px; } #leistung .flex .lft .t1 ul li { background-color: rgba(255,255,255,0.4);position:relative;padding: 10px 20px;margin-bottom: 10px;margin: 0 0px;margin-bottom: 0px;padding-left: 56px;margin-bottom: 10px;border-radius:30px;font-weight: 100; } #leistung .flex .lft .t1 ul li > div {position: absolute;left: 10px;top: 50%;border-radius: 50%;width: 28px;height: 28px;background-color: #fff;transform: translateY(-50%);} #leistung .flex .lft .t1 ul li > div:after {content: " ";position: absolute;left: -5px;top: -5px;right: -5px;bottom: -5px;background: url(./images/check.png) 80% 30% no-repeat transparent;background-size: auto;background-size: 75% auto;} @media screen and (max-width: 1450px) { #leistung .flex .lft { width:50%; } #leistung .flex .rgt { margin:0 auto;} } @media screen and (max-width: 1000px) { #leistung .flex .lft { width:100%;padding-right:0px; } #leistung .flex .rgt { width:100%; } } #leistung .threeRows { display:flex;margin:0 0px; } #leistung .threeRows > div { width:calc(100% / 3);margin:0 1px;margin-bottom: 10px;padding:20px;background-color:rgba(255,255,255,0.2);color:#333;padding-bottom: 20px; } #leistung .threeRows > div p { margin-bottom:auto;} #leistung .threeRows > div p, #leistung .threeRows > div h1, #leistung .threeRows > div h2 { width:100%;display:block;width:100%;text-align:left;margin-top:0px; } #leistung .threeRows > div p { align-self:flex-start;} #leistung .threeRows > div h2 font { display: block;font-size: 15px;margin-bottom: 8px; } #leistung .threeRows > div p, #leistung .threeRows > div a { margin-top:20px; } #leistung a[gotosite] { position:relative;text-decoration: none;background: url(./images/arrow_right.svg) center right 20px no-repeat var(--darkgreen);background-size:25px;cursor: pointer;display: inline-block;padding: 10px 20px;padding-right:70px;border-radius: 30px;color: var(--white);font-weight: bold; } #leistung .integration { position:relative; } #leistung .integration > div {width:60%;margin:0 auto;text-align:center; } @media screen and (max-width: 750px) { #leistung .threeRows > div { width:calc(100%); } #leistung .integration > div { width:100%; } #leistung .threeRows { flex-wrap:wrap; } } #leistung .threeRows button { font-size: 17px;align-self:flex-end;margin:0;padding: 15px 30px;border-radius:30px;background-color:var(--darkgreen);color:var(--white);font-weight:bold;border:0px;cursor:pointer; } #leistung .artificialBox.content { margin-top:0px;padding-top:0px;overflow:hidden; } #leistung .artificialBox .kiwrap { width:60%; } #leistung .artificialBox .ki { color:#333;background-color:rgba(255,255,255,0.2);padding:50px 20px;margin: 0 -25px;position:relative; } #leistung .artificialBox .ki .kiwrap { position:relative;z-index:1;color:#fff; } #leistung .artificialBox .ki::before { z-index:1;content:" ";position:absolute;top:0;right:0;bottom:0;left:0;background: linear-gradient(135deg, rgba(15,125,100,1) 29%,rgba(15,125,100,0.39) 72%,rgba(15,125,100,0.04) 97%,rgba(15,125,100,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(135deg, rgba(5,45,35,1) 0%,rgba(25,195,155,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */} #leistung .artificialBox .ki > div { position:relative;z-index:2;} #leistung .artificialBox .ki > .bg { z-index:1;position:absolute;top:0;right:0;bottom:0;left:0; background:url(./images/footer-visual.b91d3d54.svg) center center no-repeat transparent; } #leistung .artificialBox a[gotosite] { color:var(--darkgreen);background: url(./images/arrow_right_green.svg) center right 20px no-repeat var(--white);background-size:25px; } @media screen and (max-width: 1450px) { #leistung .artificialBox .ki .kiwrap { margin:0 auto;max-width:600px;width:100%;box-sizing:border-box; } } #leistung .kachelWrap { position:relative;overflow:hidden; } #leistung .kachel { width: calc(1400px * 0.3);position: absolute;background-color: var(--white);border: 2px solid var(--green);transform: translateY(-205px) translateX(-209%) rotate(-34deg) skew(47deg);bottom: 0px;left: 43%;transform-origin: 50% 50%; } #leistung .kachel::after { content:" ";position:relative;padding-bottom:100%;display:block;} #leistung .kachel.k01 { bottom:40px;} #leistung .kachel.k02 { bottom:40px; } #leistung .kachel.k03 { bottom:80px; } #leistung .kachel.k04 { bottom:120px; } #leistung .kachel.k05 { bottom:160px; } #leistung .kachel.k06 { bottom:200px; } #leistung .kachel.k07 { bottom:240px;background-color: var(--green); } @media screen and (max-width: 750px) { #leistung .kachel { opacity:0; } } #produkte ul.productsWrapper { display:flex;list-style:none;margin:0;padding:0;margin-bottom:20px;} #produkte ul.productsWrapper > li:nth-child(1) { width:20%;border-radius:30px;overflow:hidden; } #produkte ul.productsWrapper > li:nth-child(2) { width:60%;margin-left:10px;box-sizing: border-box;border-radius:30px;overflow:hidden; } #produkte ul.productsWrapper > li:nth-child(3) { width:20%;margin-left:10px;box-sizing: border-box;border-radius:30px;overflow:hidden; } #produkte ul.productsWrapper > li:nth-child(1) ul.products > li { width:100% ;background-color:#08493a; } #produkte ul.productsWrapper > li:nth-child(2) ul.products > li { width:100% ;background-color:#08493a; } #produkte ul.productsWrapper > li:nth-child(3) ul.products > li { width:100%;background-color:#08493a; } #produkte ul.productsWrapper > li { display:flex;flex-wrap:wrap;} #produkte ul.productsWrapper > li > .top { background-color: var(--signal);padding: 15px 20px;text-align: center;font-weight: bold;color: #fff;border-top-right-radius: 30px;border-top-left-radius: 30px;text-transform:uppercase;box-sizing:border-box;height:50px;width:100%; } #produkte ul.productsWrapper > li > ul { height:calc(100% - 50px);width: 100%; } @media screen and (max-width: 1450px) { #produkte ul.productsWrapper { flex-wrap:wrap;justify-content: center; } #produkte ul.productsWrapper:not(.qc) > li:nth-child(1) { order:2;width:calc(50% - 10px);margin-left:0px;margin-right:10px;margin-bottom:0px; } #produkte ul.productsWrapper:not(.qc) > li:nth-child(3) { order:3;width:calc(50% - 10px);margin-left:10px;margin-right:0px;margin-bottom:0px; } #produkte ul.productsWrapper:not(.qc) > li:nth-child(2) { order:1; width:100%;margin:0px; margin-bottom:20px;transform: scale(1); box-shadow: 0px 0px 0px rgba(0,0,0,0.6); z-index: 1; } #produkte ul.productsWrapper:not(.qc) > li:nth-child(2) .bod { width:100%; } #produkte ul.productsWrapper:not(.qc) > li:nth-child(2) ul.products > li > div { width:100%; } #produkte ul.productsWrapper > li { margin-bottom:20px;} } @media screen and (max-width: 1050px) { #produkte ul.productsWrapper > li:nth-child(1), #produkte ul.productsWrapper > li:nth-child(2) { width:45%; } #produkte ul.productsWrapper > li:nth-child(3) { width:100%; } #produkte ul.productsWrapper.qc > li > ul.products { flex-wrap:wrap; } #produkte ul.productsWrapper.qc > li > ul.products > li { width:25%; } #produkte ul.productsWrapper.qc > li > ul.products > li:nth-child(1), #produkte ul.productsWrapper.qc > li > ul.products > li:nth-child(2), #produkte ul.productsWrapper.qc > li > ul.products > li:nth-child(3) { width:calc(100% / 3);border-bottom:3px dotted var(--green) } #produkte ul.productsWrapper.qc > li > ul.products > li:nth-child(3) { border-right:0px; } #produkte ul.productsWrapper.qc > li > ul.products > li:nth-child(4) { width:50%; } #produkte ul.productsWrapper.qc > li > ul.products > li:nth-child(5) { width:50%; } } @media screen and (max-width: 670px) { #produkte ul.productsWrapper.qc > li > ul.products > li:nth-child(1), #produkte ul.productsWrapper.qc > li > ul.products > li:nth-child(2), #produkte ul.productsWrapper.qc > li > ul.products > li:nth-child(3), #produkte ul.productsWrapper.qc > li > ul.products > li:nth-child(4), #produkte ul.productsWrapper.qc > li > ul.products > li:nth-child(5) { width:50%;border-right:3px dotted var(--green); } #produkte ul.productsWrapper.qc > li > ul.products > li:nth-child(2), #produkte ul.productsWrapper.qc > li > ul.products > li:nth-child(4) { border-right:0px;border-bottom:3px dotted var(--green); } #produkte ul.productsWrapper.qc > li > ul.products > li:nth-child(5) { width:100%;border-right:0px; } } @media screen and (max-width: 600px) { #produkte ul.productsWrapper > li:nth-child(1), #produkte ul.productsWrapper > li:nth-child(2), #produkte ul.productsWrapper > li:nth-child(3) { width:100%;margin-left:0px;margin-right:0px; } #produkte ul.productsWrapper { margin-bottom:0px; } #produkte ul.productsWrapper:not(.qc) > li:nth-child(1) { order:2;width:100%;margin-left:0px;margin-right:0px;margin-bottom:20px; } #produkte ul.productsWrapper:not(.qc) > li:nth-child(3) { order:3;width:100%;margin-left:0px;margin-right:0px;margin-bottom:0px; } #produkte ul.productsWrapper.qc > li > ul.products > li { width:100%;border-right:0px; border-bottom:3px dotted var(--green); } #produkte ul.productsWrapper.qc > li > ul.products > li:nth-child(5) { border-bottom:0px; } } #produkte ul.products { color:#fff;list-style:none;margin:0;padding:0;display:flex;border-radius:0px;overflow: hidden;} #produkte ul.products > li { padding:0 0px;box-sizing:border-box;color:#fff;display: flex;position:relative;border-right: 3px dotted var(--green); } #produkte ul.products > li:last-child {border:0px; } #produkte ul.products > li p { display:block; width: 100%; } #produkte ul.products > li > div { padding:20px;padding-top:20px;border-radius:0px;text-align:center;padding-bottom:100px;margin:0 auto; } #produkte ul.products > li > div .kachelIcon { margin:0 auto;width:40px;height:40px;position:relative;display:none; } #produkte ul.products > li > div .kachelIcon > div { background-color:#fff;width:100%;height:100%;transform:rotate(-34deg) skew(47deg);position: absolute;border:1px solid var(--darkgreen); } #produkte ul.products > li > div .kachelIcon > div:nth-child(1) { z-index:1;transform:translateY(0px) rotate(-34deg) skew(47deg) } #produkte ul.products > li > div .kachelIcon > div:nth-child(2) { z-index:2;transform:translateY(-10px) rotate(-34deg) skew(47deg) } #produkte ul.products > li > div .kachelIcon > div:nth-child(3) { z-index:2;transform:translateY(-20px) rotate(-34deg) skew(47deg) } #produkte ul.products > li > div .kachelIcon > div:nth-child(4) { z-index:2;transform:translateY(-30px) rotate(-34deg) skew(47deg) } #produkte ul.products > li > div .kachelIcon > div:nth-child(5) { z-index:2;transform:translateY(-40px) rotate(-34deg) skew(47deg) } #produkte ul.products > li > div .kachelIcon > div:nth-child(6) { z-index:2;transform:translateY(-50px) rotate(-34deg) skew(47deg) } #produkte ul.products > li > div .kachelIcon > div:nth-child(7) { z-index:2;transform:translateY(-60px) rotate(-34deg) skew(47deg) } #produkte ul.products > li > div .kachelIcon > div:last-child { background-color:var(--green);border:1px solid var(--green); } #produkte ul.products > li.highlight > div { background-color:var(--darkgrey);transform:scale(1.05);box-shadow:3px 3px 10px rgba(0,0,0,0.5); } #produkte ul.products > li.highlight > div .kachelIcon > div:last-child { background-color:var(--darkgreen);border:1px solid var(--darkgreen); } #produkte ul.products > li h3 { margin-top: 0px;font-size: 22px;text-align:center;width:100%;display:flex;flex-wrap:wrap;align-items:top;min-height: 86px;justify-content:center; } #produkte ul.products > li font.hid { display:none; font-size:15px;color: var(--green);padding-bottom: 7px;padding-top: 18px;font-weight: bold; } #produkte ul.products > li ul { width:100%;list-style:none;margin:0;padding:0;margin-bottom:20px;min-height:145px; } #produkte ul.products > li ul li { padding:5px 10px;width:100%;background-color:rgba(255,255,255,0.05);border-radius:3px;margin:0 -10px;margin-bottom: 7px;text-align:center; } #produkte ul.products > li ul li:last-child { margin-bottom:0px; } #produkte ul.products > li .lsbtn { position: absolute;bottom: 30px;transform: translateX(-50%); } #produkte ul.products > li p { text-align:center;} #produkte ul.products > li p b { color: var(--green); } #produkte ul.products > li .price > font { font-size:40px;display:inline;color: var(--green);padding-bottom: 7px;padding-top: 18px;font-weight: bold; } #produkte ul.products > li .price > font:nth-child(1) { position:relative;font-size: 20px; } #produkte ul.products > li .price > font:nth-child(2) { position:relative;padding-left: 7px; } #produkte ul.products > li .price > font:nth-child(3) { position:relative;font-size: 20px;padding-left: 7px; } @media screen and (max-width: 600px) { #produkte ul.products > li > div { width:100% ; max-width:300px; } #produkte ul.products { flex-wrap:wrap;} #produkte ul.products > li { width:100% !important;border-bottom: 3px dotted var(--green);border-right:0px; } #produkte ul.products > li:last-child {border:0px; } #produkte ul.products > li ul, #produkte ul.products > li h3 { min-height:10px; } } #produkte ul.productsWrapper:not(.qc) { margin-bottom:40px; } #produkte ul.productsWrapper.qc { max-width:100%;margin:0 auto;margin-bottom: 20px; } #produkte ul.productsWrapper.qc ul.products > li h3 { min-height:unset;min-height:auto; } #produkte ul.productsWrapper.qc ul.products > li > div { padding-bottom:70px; } #produkte ul.productsWrapper.qc ul.products > li ul { min-height:170px; } #produkte ul.productsWrapper > li.bs ul.products > li:nth-child(1) >.wrap { border-left: 6px solid var(--signal);border-bottom: 6px solid var(--signal);border-bottom-left-radius: 30px; } #produkte ul.productsWrapper > li.bs ul.products > li:nth-child(2) >.wrap { border-bottom: 6px solid var(--signal); } #produkte ul.productsWrapper > li.bs ul.products > li:nth-child(3) >.wrap { border-right: 6px solid var(--signal);border-bottom: 6px solid var(--signal);border-bottom-right-radius: 30px; } @media screen and (max-width: 600px) { #produkte ul.productsWrapper > li.bs ul.products > li:nth-child(1) >.wrap , #produkte ul.productsWrapper > li.bs ul.products > li:nth-child(2) >.wrap , #produkte ul.productsWrapper > li.bs ul.products > li:nth-child(3) >.wrap { border:0px; } } #produkte ul.productsWrapper > li.bs {transform: scale(1.05);box-shadow: 0px 5px 10px rgba(0,0,0,0.6);z-index: 1;} #produkte ul.productsWrapper > li.bs ul.products > li { background-color:var(--black); } #produkte ul.products > li strong { border:3px solid var(--signal);color:var(--signal);padding:10px 20px;text-align:center; } #produkte .shade { padding:60px 0px;background-color:rgba(0,0,0,0.3); } #produkte .flex { display:flex;padding-left:50px; } #produkte .flex h3 { margin-top:0px;text-transform:uppercase;font-size:30px;font-weight: 900; } #produkte .flex > div { padding-right:20px;position:relative; } #produkte .flex > div .img { position:relative;background-color:#fff;width:120px;position:absolute;top:0;left:0;background: url(./images/example.jpg) center center no-repeat #fff;background-size: 100% auto; } #produkte .flex > div .img::after { content:" ";padding-bottom:125%;display:block; } #produkte .flex > div.expl { padding-left:140px;} #produkte .flex > div span { width:100%;display:block;margin-bottom:20px; } #produkte .flex > div button.dl { background-color:rgba(255,255,255,0.2);border-radius:30px;padding:10px 20px;border:0px;color:#fff;font-weight:bold;position:relative;padding-left:50px;} #produkte .flex > div button.dl::after { content:" ";display:block;background:url(./images/download.svg) center center no-repeat #fff;background-size: 50%;width:30px;height:30px;position:absolute;left:5px;top:50%;transform:translateY(-50%);border-radius:50%; } #produkte .extra { color:#fff;text-align: center;background-color: rgba(15,125,100,0.5);padding: 20px;margin-bottom: 150px;margin: 0 10px;border-radius: 30px;margin-bottom:20px; } #produkte .extra h3 { margin-top:0px; } #produkte .extra > div { width:60%;margin:0 auto; } #produkte a[gotosite] { position:relative;text-decoration: none;background: url(./images/arrow_right.svg) center right 20px no-repeat var(--darkgreen);background-size:25px;cursor: pointer;display: inline-block;padding: 10px 20px;padding-right:70px;border-radius: 30px;color: var(--white);font-weight: bold; } @media screen and (max-width: 600px) { #produkte .extra > div { width:100%; } #produkte .extra { margin-left:0;margin-right:0; } } #sources { background-color:var(--darkgreen);color:#fff; } #sources::before { content:" ";position:absolute;top:0;right:0;bottom:0;left:0; /* Permalink - use to edit and share this gradient. Permalink - Zum Bearbeiten und Teilen dieses Verlaufs verwenden: https://colorzilla.com/gradient-editor/#000000+56,000000+100&0+45,0.65+100 */background: linear-gradient(135deg, rgba(0,0,0,0) 45%,rgba(0,0,0,0.13) 56%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */;opacity:0.5; } #sources .umfang { width:25%; margin:0;padding:0;list-style:none;flex-wrap:wrap; } #sources .rows { display:flex;flex-wrap:wrap; } #sources .umfang h4 { margin-top: 0px;font-size: 20px;background-color: var(--green);padding: 10px;margin-bottom: 5px;border-radius: 3px; } #sources .umfang > li { padding:0 5px;width: 100%; box-sizing: border-box; } #sources .umfang ul { list-style:none;margin:0;padding:0; } #sources .umfang ul > li { background-color:var(--black);padding:5px;border-radius:3px;margin-bottom:1px;text-align:left; } #aufbau { background-color:var(--darkgreen);color:#fff; } #aufbau::before { content:" ";position:absolute;top:0;right:0;bottom:0;left:0; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+56,000000+100&0+45,0.65+100 */ background: linear-gradient(135deg, rgba(0,0,0,0) 45%,rgba(0,0,0,0.13) 56%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ opacity:0.5; } #aufbau .aufbaufull { color:#fff;padding:0 20px; } #aufbau .kacheln { display:flex; } #aufbau .kacheln > .kachel { background-color:var(--black);color:#fff;width:calc(100% / 3);transform:rotate(0deg);display: flex;flex-wrap: wrap;margin: 0 5px;} #aufbau h2 { margin-top:0px; } #aufbau .kacheln > .kachel > div { padding:20px; } #aufbau .kacheln ul li { background-color:rgba(255,255,255,0.3);padding:10px;margin-bottom:3px; } #aufbau .kacheln ul { list-style:none;padding:0; } #aufbau .details { display: flex;flex-wrap: wrap;max-width:80%;margin:0 auto; } #aufbau .details .hd { width:51%; } #aufbau .content { position:relative;z-index:1; } #aufbau .details .txt { width: 50%;margin-left: auto;padding-left: 60px;transform: translateY(-70px);box-sizing: border-box; } #aufbau .details .list { width:50%;padding-left: 80px;box-sizing: border-box; } #aufbau .details ul { margin:0;list-style:none;padding:0; } #aufbau .details ul li { font-size:18px;color: var(--black);position:relative;opacity:1;padding:10px 20px;background-color:rgba(255,255,255,0.6);margin-bottom:10px;border-radius: 35px;padding-left: 56px; } #aufbau .details ul li > div { position:absolute;left:10px;top:50%;border-radius:50%;width:28px;height:28px;background-color:#fff;transform:translateY(-50%); } #aufbau .details ul li > div::after { content:" ";position:absolute;left:-5px;top:-5px;right:-5px;bottom:-5px;background:url(./images/check.png) 80% 30% no-repeat transparent;background-size: 75% auto;} #aufbau .details span { background-color: rgba(255,255,255,0.1);padding:20px;display:block; } @media screen and (max-width: 1000px) { #sources .umfang { width: calc(100% /2);} } @media screen and (max-width: 1000px) { #aufbau .details { max-width:100%; } #aufbau .details .list, #aufbau .details .txt { width: 50%;transform: translateY(0px); } #aufbau .details .list { padding-left:0px; } } @media screen and (max-width: 700px) { #aufbau .details .hd { width:100%; } #aufbau .details .txt { width:100%;padding-left:0px; } #aufbau .details .list { padding-bottom:20px;width:100%; } } @media screen and (max-width: 540px) { #aufbau .details ul li { font-size:15px; } } @media screen and (max-width: 500px) { #sources .umfang { width: calc(100%);} } #aufbau .pics { background-color:rgba(255,255,255,0.1);position:relative; } #aufbau .pics .left { width:38%;text-align:center;padding:30px 0 ;box-sizing: border-box;padding-right:50px; } #aufbau .pics .imgs { padding-left: 100px;overflow:hidden; position:absolute;right:0;top:0;bottom:0;width:calc( ((100vW - 1400px) / 2) + (1400px * 0.62));display: flex;justify-content: flex-end; } #aufbau .img {overflow:hidden; display:none;position:relative;width: 25%;transform: rotate(0deg) scale(1); margin-right:5px;background-color:rgba(255,255,255,0.2); } #aufbau .img1, #aufbau .img2,#aufbau .img3,#aufbau .img4 { display:block; } #aufbau .img a { position:absolute;left:0;top:0;bottom:0;right:0;border:0;transform:scale(1);transition:0.2s ease-in-out all 0s; z-index:1; } #aufbau .img1 a { background:url(./images/image01.png) center center no-repeat transparent;background-size:cover; } #aufbau .img2 a { background:url(./images/image02.png) center center no-repeat transparent;background-size:cover; } #aufbau .img3 a { background:url(./images/image03.png) center center no-repeat transparent;background-size:cover; } #aufbau .img4 a { background:url(./images/image04.png) center center no-repeat transparent;background-size:cover; } #aufbau .img:hover a { transform:scale(1.1); } @media screen and (max-width: 1300px) { #aufbau .pics { padding-bottom:30px;} #aufbau .pics .left { width:100%;padding-right:0px; } #aufbau .pics .imgs {display: flex; position:relative;padding-left:0px;margin:0 auto;width:100%;flex-wrap: wrap;} #aufbau .img::after { content:" ";position:relative;padding-bottom:100%;display:block; } #aufbau .img { margin-right:0px;} } @media screen and (max-width: 600px) { #aufbau .img { width:50%;margin-right:0px;} } #sources .fullkachel { color:#fff;text-align:center; } #sources .fullkachel.list { background-color:transparent; } #sources .fullkachel .title { margin: 0 auto;padding-bottom: 50px;max-width:600px;width:100%; } #forschung { background-color:var(--darkgreen);color:#fff; } #forschung::before { content:" ";position:absolute;top:0;right:0;bottom:0;left:0; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+56,000000+100&0+45,0.65+100 */ background: linear-gradient(45deg, rgba(0,0,0,0) 45%,rgba(0,0,0,0.13) 56%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ opacity:0.5; } #forschung .latestMaps { display:flex;align-items:center;background-color: rgba(255, 255, 255, 0.1);position: relative;padding:20px; } #forschung .latestMaps > div:nth-child(1) { width:60%; } #forschung .latestMaps > div:nth-child(2) { width:40%;align-items:center;} #forschung .latestMaps > div:nth-child(2) > div { display:block;position:relative;background-color:#fff;max-width:200px;margin:0 auto;box-shadow:0px 3px 3px 10px 10px rgba(0,0,0,0.9);box-shadow: 9px 5px 22px 0px rgba(0, 0, 0, 0.4);transform: rotate(5deg); } #forschung .latestMaps > div:nth-child(2) > div::after { content:" ";display:block;position:relative;padding-bottom:140%;background:url(./images/karten/202501.png) center center no-repeat transparent;background-size: cover; } #forschung .latestMaps a { position:relative;text-decoration: none;background: url(./images/arrow_right_green.svg) center right 20px no-repeat var(--white);color:var(--darkgreen);background-size:25px;cursor: pointer;display: inline-block;padding: 10px 20px;padding-right:70px;border-radius: 30px;font-weight: bold; } @media screen and (max-width: 600px) { #forschung .latestMaps { flex-wrap:wrap; } #forschung .latestMaps > div:nth-child(1) { width:100%;order:2; } #forschung .latestMaps > div:nth-child(2) { width:100%;order:1;padding-bottom:40px; } } #faq { background-color:var(--black);color:#fff; } #faq h1 { margin:0;margin-bottom: 30px;font-weight: 900;text-transform: uppercase;font-size: 52px;margin-bottom:0px;text-align: center;padding-bottom: 50px; } #faq p { margin-bottom:20px; } #faq .flex { display:flex; } #faq .flex .faqs { margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap; } #faq .flex .faqs > li { width:calc(50% - 2.5px);cursor:pointer;background-color:rgba(255,255,255,0.1);position:relative;padding:10px 20px;padding-right:38px;margin-bottom:5px;border-radius:3px;box-sizing:border-box; } #faq .flex .faqs > li:nth-child(even) { margin-left:5px; } #faq .flex .faqs > li:hover { background-color:rgba(255,255,255,0.15); } #faq .flex .faqs > li > div:nth-child(1) { font-weight:bold;color:var(--green);font-weight: 600;margin-bottom: 16px; } #faq .flex .faqs > li ul { margin:0 5px;padding:15px 0px; } #faq .flex .faqs > li:not(.expand) > div:nth-child(2) { display:none; } #faq .flex .faqs > li:not(.expand) > div:nth-child(1) { margin-bottom:0px; } #faq .flex .faqs > li::after { content:" ";width:17px;height:17px;background:url(./images/plus.svg) no-repeat center center transparent;background-size:80% auto;position:absolute;top:10px;right:10px; } #faq .flex .faqs > li.expand::after { background:url(./images/minus.svg) no-repeat center center transparent;background-size:80% auto; } @media screen and (max-width: 650px) { #faq .flex .faqs > li { width:calc(100%);margin-left:0px !important; } } #partner { background-color:var(--black);color:#fff;padding:0px 0 ;border-top:3px solid var(--darkgrey); } #partner p { margin-bottom:0px; } #partner .logos { margin:0;padding:0;list-style:none;display:flex;padding-top:30px;align-items: center;justify-content: center; flex-wrap: wrap; } #partner .logos img { position:realtive;margin-right:5px;margin-bottom:5px;border-radius:3px;margin:0 5px;margin-bottom:10px; } #partner .logos img:nth-child(1) { width:150px; } #partner .logos div { position:relative;margin:15px;transition:0.2s ease-in-out all 0s; } #partner .logos div a { position:absolute;left:0;top:0;bottom:0;right:0;border:0px;display:block;z-index:1; } #partner .logos div:hover { transform:scale(1.1); } #partner .logos div::after { content:" ";display:block;position:relative;padding-bottom:30%; } #partner .logos div::before { content:" ";display:block;position:absolute;top:-10px;left:-10px;right:-10px;bottom:-10px;border-radius:10px; } #partner .logos div:hover::before { background-color:rgba(255,255,255,0.1); } #partner .logos div:nth-child(1) { width:250px;background:url(./images/logos/svg_white/baw.svg) 80% 30% no-repeat transparent;background-size: 100% auto; } #partner .logos div:nth-child(1)::after { padding-bottom:22%; } #partner .logos div:nth-child(2) { width:250px;background:url(./images/logos/svg_white/bfg.svg) 80% 30% no-repeat transparent;background-size: 100% auto; } #partner .logos div:nth-child(2)::after { padding-bottom:22%; } #partner .logos div:nth-child(3) { width:110px;background:url(./images/logos/svg_white/bfn.svg) 80% 30% no-repeat transparent;background-size: 100% auto; } #partner .logos div:nth-child(3)::after { padding-bottom:95%; } #partner .logos div:nth-child(4) { width:260px;background:url(./images/logos/svg_white/bgr.svg) 80% 30% no-repeat transparent;background-size: 100% auto; } #partner .logos div:nth-child(4)::after { padding-bottom:29%; } #partner .logos div:nth-child(5) { width:95px;background:url(./images/logos/svg_white/db.svg) 80% 30% no-repeat transparent;background-size: 100% auto; } #partner .logos div:nth-child(5)::after { padding-bottom:70%; } #partner .logos div:nth-child(6) { width:180px;background:url(./images/logos/svg_white/dght.svg) 80% 30% no-repeat transparent;background-size: 100% auto; } #partner .logos div:nth-child(6)::after { padding-bottom:54%; } #partner .logos div:nth-child(7) { width:60px;background:url(./images/logos/svg_white/DWD-Logo_2013.svg) 80% 30% no-repeat transparent;background-size: 100% auto; } #partner .logos div:nth-child(7)::after { padding-bottom:172%; } #partner .logos div:nth-child(8) { width:200px;background:url(./images/logos/svg_white/eea-logo-white.da328514.svg) 80% 30% no-repeat transparent;background-size: 100% auto; } #partner .logos div:nth-child(8)::after { padding-bottom:37%; } #partner .logos div:nth-child(9) { width:200px;background:url(./images/logos/svg_white/EBA-Logo.svg) 80% 30% no-repeat transparent;background-size: 100% auto; } #partner .logos div:nth-child(9)::after { padding-bottom:47%; } #partner .logos div:nth-child(10) { width:230px;background:url(./images/logos/svg_white/Bundesamt_für_Kartographie_und_Geodäsie_logo.svg) 80% 30% no-repeat transparent;background-size: 100% auto; } #partner .logos div:nth-child(10)::after { padding-bottom:39%; } #partner .logos div:nth-child(11) { width:160px;background:url(./images/logos/svg_white/osm.svg) 80% 30% no-repeat transparent;background-size: 100% auto; } #partner .logos div:nth-child(11)::after { padding-bottom:26%; } #partner .logos div:nth-child(12) { width:160px;background:url(./images/logos/svg_white/DEU_Umweltbundesamt_Logo.svg) 80% 30% no-repeat transparent;background-size: 100% auto; } #partner .logos div:nth-child(12)::after { padding-bottom:50%; } #footer { background-color:var(--darkgrey);color:#fff;min-height:100%; } #footer .footerlogo { margin:0;margin-bottom: 30px;font-weight: 900;text-transform: uppercase;font-size: 52px;margin-bottom:0px; } #footer .footerlogo font { color:var(--green); } #footer h2 { font-size: 17px;margin-top: 0px;margin-bottom: 50px;color: var(--green); } #footer .footerFlex { display:flex;flex-wrap:wrap; } #footer .footerFlex > div { width:50%; } #footer .footerFlex ul { list-style:none;margin:0;padding:0; } #footer .footerFlex .fx { display:flex; } #footer .footerFlex .fx > div { width:50%; } #footer .footerFlex strong { display:block;padding-bottom:20px;font-size: 20px;font-weight: bold; } #footer .footerFlex ul a { color: var(--green);text-transform: none;text-decoration: none;padding: 10px 20px;display: inline-block;border-radius: 30px;background-color: rgba(255,255,255,0.1);margin-bottom: 10px;margin-left: -21px; } #footer .footerFlex ul a:hover {background-color: rgba(255,255,255,0.2); } #footer form { position:relative;margin:0;padding:0;display:flex;flex-wrap:wrap; } #footer input { box-sizing: border-box;background-color:rgba(0,0,0,0.5);padding:20px;border-radius:30px;border:0px;color:#fff;font-weight:bold;font-size:16px;font-family:inherit;margin-bottom:10px; } #footer input[name="name"] { width:100%;} #footer input[name="email"] { width:calc(50% - 5px);margin-right:10px; } #footer input[name="tel"] { width:calc(50% - 5px); } #footer textarea { overflow:hidden;min-height:250px;margin-bottom:10px;box-sizing: border-box;background-color:rgba(0,0,0,0.5);width:100%;padding:20px;border-radius:30px;border:0px;color:#fff;font-weight:bold;font-size:16px;font-family:inherit; } #footer h3 {font-size: 39px; } #footer h3 font {display: block;font-weight: 900; } #footer div.done, #footer div.error { display:block;border-radius:30px ;padding:10px 20px;color:#fff;background-color:var(--error);width: 100%;margin-bottom: 20px; } #footer div.done { background-color:var(--green); } #footer input.error, #footer textarea.error { box-shadow:0px 0px 0px 5px var(--error) inset; } #footer .captchawrap { display:flex;width:100%;align-items: center;padding-bottom:10px;} #footer .captchawrap input { margin-bottom:0px;width:100%; } #footer .captchawrap img { margin-right:10px;width: 182px;border-radius: 30px;border:0px;flex-shrink: 0; } #footer form.loading { opacity:0.5;} #footer form.loading::after { content:" ";position:absolute;top:0;left:0;right:0;bottom:0;} #footer form:not(.loading) .loader { display:none; } #footer a.cryptedmail { color: var(--green);text-decoration: none; } @media screen and (max-width:850px) { #footer .footerFlex > div { width:100%;padding-bottom:50px; } } @media screen and (max-width:450px) { #footer .footerFlex .fx { display:flex;flex-wrap:wrap; } #footer .footerFlex .fx > div { width:100%; } } .loader {background: var(--green);width: 48px;height: 48px;position:absolute;left:50%;top:50%;margin-left:-24px;margin-top:-24px;text-align: center;animation: 3s rotate linear infinite;} .loader:before {content: "";position: absolute;top: 0;left: 0;height: 100%;width: 100%;background: #FFFF;animation: 1.5s rotate reverse linear infinite ;} @keyframes rotate {0%{ transform: rotate(0deg)}100%{ transform: rotate(360deg)}} .checkContainer { box-sizing: border-box;border:3px solid rgba(0,0,0,0.5);border-radius:30px;padding:20px;padding-left:69px;margin-bottom:20px;width:100%;font-size: 14px; line-height: 21px; display: block;position: relative;margin-bottom: 12px;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;} .checkContainer input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;} .checkmark {position: absolute;top: 50%;left: 25px;height: 25px;margin-top:-12px;width: 25px;background-color: rgba(0,0,0,0.5);} .checkContainer:hover input ~ .checkmark {background-color: rgba(0,0,0,0.5);} .checkContainer input:checked ~ .checkmark {background-color: var(--green);}.checkmark:after {content: "";position: absolute;display: none;} .checkContainer input:checked ~ .checkmark:after {display: block;} .checkContainer .checkmark:after {left: 9px;top: 5px;width: 5px;height: 10px;border: solid white;border-width: 0 3px 3px 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);} .checkContainer a { color:var(--green);text-decoration: none ;} .checkContainer:hover { background-color:rgba(0,0,0,0.1); } .checkContainer.error { box-shadow:0px 0px 0px 5px var(--error) inset } .mainspacer { height:150px;} @media screen and (max-width:800px) { .mainspacer { height:100px;} #footer .footerlogo { font-size:35px; } #footer .footerlogo font { padding-bottom: 15px !important; } h1.lshead { font-size:30px; } h1.lshead font {font-size:20px; } h2.lshead { font-size:35px; } h2.lshead font { padding-bottom: 15px !important; } } @media screen and (max-width:540px) { .mainspacer { height:50px;} #subsite, #subsite .content, #leistung { font-size: 15px !important;} h1.lshead { font-size:25px; } h1.lshead font {font-size:18px; } #footer .footerlogo { font-size:20px; } #footer .footerlogo font { padding-bottom: 10px; } h2.lshead { font-size:25px !important; } h2.lshead font { padding-bottom: 10px !important; } } #mapbox .latestMaps { display:flex;align-items:center;background-color: rgba(255, 255, 255, 0.2);position: relative;padding:20px;margin-top:20px; } #mapbox .latestMaps > div:nth-child(1) { width:60%; } #mapbox .latestMaps > div:nth-child(2) { width:40%;align-items:center;position:relative; } #mapbox .latestMaps > div:nth-child(2) > div { display:block;position:relative;background-color:#fff;max-width:200px;margin:0 auto;box-shadow:0px 3px 3px 10px 10px rgba(0,0,0,0.9);box-shadow: 9px 5px 22px 0px rgba(0, 0, 0, 0.4);transform: rotate(5deg); } #mapbox .latestMaps > div:nth-child(2) > div::after { content:" ";display:block;position:relative;padding-bottom:140%;background:url(./images/karten/202503.jpeg) center center no-repeat transparent;background-size: cover; } #mapbox .latestMaps > div:nth-child(2) > div:nth-child(2) { transform: rotate(15deg);position:absolute;position: absolute;width: 100%;top: 0;left: 39%; } #mapbox .latestMaps > div:nth-child(2) > div:nth-child(2)::after { background:url(./images/karten/202502.jpeg) center center no-repeat transparent;background-size: cover; } #mapbox .latestMaps > div:nth-child(2) > div:nth-child(3) { transform: rotate(15deg);position:absolute;position:absolute;position: absolute;width: 100%;top: 0;left: 45%; } #mapbox .latestMaps > div:nth-child(2) > div:nth-child(3)::after { background:url(./images/karten/202501.png) center center no-repeat transparent;background-size: cover; } #mapbox .latestMaps a { position:relative;text-decoration: none;background: url(./images/arrow_right_green.svg) center right 20px no-repeat var(--white);color:var(--darkgreen);background-size:25px;cursor: pointer;display: inline-block;padding: 10px 20px;padding-right:70px;border-radius: 30px;font-weight: bold; } @media screen and (max-width: 600px) { #mapbox .latestMaps { flex-wrap:wrap; } #mapbox .latestMaps > div:nth-child(1) { width:100%;order:2; } #mapbox .latestMaps > div:nth-child(2) { width:100%;order:1;padding-bottom:40px; } } #mapbox ul.karten { display:flex;list-style:none;margin:0;padding:0;flex-wrap:wrap; } #mapbox ul.karten li { width:50%;display:flex; } #mapbox ul.karten li > div { display:flex;flex-wrap:wrap;align-items:baseline;background-color: rgba(255, 255, 255, 0.2);position: relative;padding:20px;margin-top:20px; } #mapbox ul.karten li:nth-child(odd) > div { margin-right:10px;} #mapbox ul.karten li:nth-child(even) > div { margin-left:10px;} #mapbox ul.karten li > div > div { display:flex;flex-wrap:wrap;align-items:center; } #mapbox ul.karten li > div > div > div:nth-child(1) { width:60%; } #mapbox ul.karten li > div > div > div:nth-child(2) { width:40%;align-items:center;align-items: center;display: flex;justify-content: center;} #mapbox ul.karten li > div > div > div:nth-child(2) > div { display:block;position:relative;background-color:#fff;max-width:200px;margin:0 auto;box-shadow:0px 3px 3px 10px 10px rgba(0,0,0,0.9);box-shadow: 9px 5px 22px 0px rgba(0, 0, 0, 0.4);transform: rotate(5deg); } #mapbox ul.karten li > div > div > div:nth-child(2) > div::after { content:" ";display:block;position:relative;padding-bottom:140%;background:url(./images/karten/202501.png) center center no-repeat transparent;background-size: cover; } #mapbox ul.karten li > div > div > div:nth-child(2) > img { max-width:200px;transform: rotate(5deg);box-shadow:0px 3px 3px 10px 10px rgba(0,0,0,0.9);box-shadow: 9px 5px 22px 0px rgba(0, 0, 0, 0.4); } #mapbox ul.karten li > div > div > div a { position:relative;text-decoration: none;background: url(./images/arrow_right_green.svg) center right 20px no-repeat var(--white);color:var(--darkgreen);background-size:25px;cursor: pointer;display: inline-block;padding: 10px 20px;padding-right:70px;border-radius: 30px;font-weight: bold; } #mapbox .mapDescription { display:flex;flex-wrap:wrap; } #mapbox .mapDescription > div:nth-child(1) { width:60%; } #mapbox .mapDescription > div:nth-child(2) { width:40%;position:relative;padding-left:50px;text-align:center;box-sizing: border-box;} #mapbox .mapDescription > div > img { width: 100%;box-shadow: 9px 5px 22px 0px rgba(0, 0, 0, 0.4);} ul.maptable ul { margin-bottom:10px; } @media screen and (max-width: 1100px) { #mapbox ul.karten li { width:100%; } #mapbox ul.karten li:nth-child(odd) > div { margin-right:0px;} #mapbox ul.karten li:nth-child(even) > div { margin-left:0px;} #mapbox .mapDescription > div:nth-child(1) { width:100%;order:2;padding-top:50px; } #mapbox .mapDescription > div:nth-child(2) { width:100%;position:relative;padding-left:0px;order:1;text-align:left;} #mapbox .mapDescription > div > img { width: 100%;max-width:400px;box-shadow: 9px 5px 22px 0px rgba(0, 0, 0, 0.4) } @media screen and (max-width: 600px) { #mapbox ul.karten li > div > div > div:nth-child(1) { width:100%;order:2;padding-top:40px;} #mapbox ul.karten li > div > div > div:nth-child(2) { width:100%;align-items:center;order:1;display: flex;justify-content: left;} #mapbox ul.karten li > div > div > div:nth-child(2) > img { transform:rotate(0deg); } } body.light #scroller { background-color:#fff; } body.light .bodywrapper > .shade { display:none; } body.light a.logo .brandname font { color:var(--green); } body.light #subsite .content .flex .rgt > div { background-color: var(--black);color:rgba(255,255,255,0.9)} body.light #subsite .content .warenkorb b, body.light #subsite .content .warenkorb strong{ color:#fff; } body.light #subsite .warenkorb [page="2"] .tl font { color: var(--black); } body.light #subsite .productList li:not(.none) strong { color:#fff; } body.light .upload-form .final, body.light .upload-form .progress, body.light #subsite table, body.light #subsite .productList li:not(.none) { background-color:rgba(255,255,255,0.15); } body.light #subsite .deadline, body.light #subsite .productList li.none, body.light #subsite .price { background-color:rgba(255,255,255,0.05);color:rgba(255,255,255,0.3); } body.light #subsite .deadline.set, body.light #subsite .price.set { background-color:rgba(255,255,255,0.15);color:#fff; } body.light .warenkorb h3.lshead { color:var(--green)} body.light #subsite .warenkorb table.produkte tr td { border-bottom:3px dashed var(--black); } body.light #subsite .warenkorb table.produkte tr:last-child td { border-bottom:0px; } body.light #subsite .warenkorb [page="3"] .checkContainer a { color:var(--green) !important;text-decoration: none; } body.light ul.bulletList li > div { background-color: #f2f2f2; } body.light #subsite table tr td, body.light #subsite table { border-color:#ccc; } body.light #subsite .addProductBox { background-color: var(--black);color:#fff; } body.light #subsite .addProductBox strong { color:#fff !important;margin-bottom:10px; } body.light #subsite table tr td.check, body.light #subsite .content { color:rgba(0,0,0,0.55); } body.light #subsite .content b, body.light #subsite .content strong { color:rgba(0,0,0,1); } body.light #subsite table tr td.check_tw, body.light #subsite table tr td.check { background-color:#f2f2f2; } body.light #subsite table tr td.check_tw div { background: url(./images/checkDarkgreen.svg) center center no-repeat transparent;background-size: 54% auto; } body.light ul.bulletList li > div > div { background-color:var(--darkgreen); } body.light ul.bulletList li > div > div::after { content: " "; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: url(./images/checkWhite.svg) 50% 50% no-repeat transparent; background-size: auto; background-size: auto; background-size: 56% auto; } body.light #subsite h1.lshead { color:var(--green); } body.light #subsite h1.lshead font { color:var(--black); } body.light .header .overlay { background-color:#fff; } body.light .header .overlay .logo .brandname { color:var(--black); } body.light .header .overlay ul.navi li { background-color:var(--darkgreen); } body.light #subsite .productList li:not(.none) .delete { background: url(./images/deleteWhite.svg) center center no-repeat rgba(255,255,255,0.05); background-size: auto; background-size: 50% auto; } body.light #subsite .productList li:not(.none) .delete:hover { background: url(./images/deleteWhite.svg) center center no-repeat rgba(255,255,255,0.15); background-size: auto; background-size: 50% auto; }