/* DKS - 25.09.2023 */
@import url("/css/styles_fonts.css");

:root {
	--black: #000000;
	--white: #ffffff; 
	--text: #000000;
	--green-bg: #aecf3d;
	--green: #AFCA0B;
	--green-50: rgba(175, 202, 11, 0.5);
	--accent: #5fa840;
	--gray: #6B6C7C;
	--gray-2: #828282;
	--gray-3: #333333;
	--gray-4: #D9D9D9;
	--gray-20: rgba(107, 108, 124, 0.2);
	--gray-50: rgba(107, 108, 124, 0.5);
	--gray-light:#ebebeb;
	--gray-light-1:#e0e0e0;
	--gray-light-2: #F2F2F2;
	--content-breite:1180px;
	--nav-breite:1180px; 
	
	--app-height: 100%;
	
	--font-fliesstext:  'Roboto','Open Sans', sans-serif;
	--font-display: 'Roboto','Open Sans', sans-serif;
	--font-display-2: 'Playfair Display','Open Sans', sans-serif;
}


* {
	margin:0px;
	padding:0px;
	box-sizing:border-box;
}


html {overflow-x: hidden; overscroll-behavior: none}  
body {font-family: var(--font-fliesstext); height:100%; width:100%; color:var(--text);  font-size: 16px; line-height: 26px;  background-color:var(--white);  margin:0px; padding:0px; }
body.white {color:var(--black); background-color: var(--white);}
body.menuOpen {height: 100vh; overflow: hidden} 
body p, body div {}

/* BAUSTELLE ------------- */
body.baustelle {font-family: var(--font-fliesstext); height:100%; width:100%; color:var(--text);  font-size: 16px; line-height: 22px;  background-color:var(--green-bg);  margin:0px; padding:0px; }
#baustelle {width: 100vw; height: 100vh; height: var(--app-height); display: flex; justify-content: center; align-items: center; background-color: var(--green-bg); position: relative; overflow: hidden; padding: 0; margin: 0}
#baustelle .baustelleInner {width: 800px; max-width: 100%; height: 100vh; display: flex; flex-direction: column; justify-content: space-between; position: relative; padding: 30px}
#baustelle .baustelleHead {width: 100%; display: flex; justify-content: flex-start; height: 20%}
#baustelle .baustelleHead .logo {width: 25%;}
#baustelle .baustelleContent {height: 50%; color: var(--accent); font-weight: 900; font-size: 36px; line-height: 48px; display: flex; flex-direction: column; gap: 30px; position: relative}
#baustelle .baustelleContent img {position: absolute; z-index: 1; padding: 30px; width: 100%; right: -50px; top: 130px} 
#baustelle .baustelleFooter  {height: 20%; display: flex; flex-direction: column; justify-content: flex-end}   
#baustelle .baustelleFooter a {text-decoration: none; color: var(--text)} 
#baustelle .baustelleBG {position: absolute; bottom: -90vh; right: -30vh; height: 180vh; mix-blend-mode: multiply}

@media(max-width: 754px){
	#baustelle .baustelleInner {justify-content: space-around; padding: 30px}
	#baustelle .baustelleHead .logo {width: 30%;}
	#baustelle .baustelleContent {font-size: 28px; line-height: 36px}
	#baustelle .baustelleContent img {right: 0; left: 0; width: 90%}
	#baustelle .baustelleBG {bottom: 0; right: -15vh; height: 75vh;}
}
@media(max-width: 400px){
	#baustelle .baustelleHead {height: 20%}
	#baustelle .baustelleHead .logo {width: auto; height: 100%}
	#baustelle .baustelleContent {font-size: 22px; line-height: 28px}
	#baustelle .baustelleContent img {padding: 0 20px}
	#baustelle .baustelleFooter {font-size: 14px; line-height: 18px}
}

/* Klassen ---------------------------- */
.abstand {clear: both;}
.abstand::after {content: " "; display: block; clear: both}
.pt_0{padding-top:0px !important; display: block; width: 100%; height: 0px}
.pt_1{padding-top:30px !important; display: block; width: 100%; height: 0px}
.pt_2{padding-top:60px !important; display: block; width: 100%; height: 0px}
.pt_3{padding-top:90px !important; display: block; width: 100%; height: 0px}
.pt_4{padding-top:120px !important; display: block; width: 100%; height: 0px}
.pt_5{padding-top:150px !important; display: block; width: 100%; height: 0px}
.pt_6{padding-top:180px !important; display: block; width: 100%; height: 0px}
.abstand.pt_0 {display: none}

.pb_0{padding-bottom:0px !important; display: block; width: 100%; height: 0px}
.pb_1{padding-bottom:30px !important; display: block; width: 100%; height: 0px}
.pb_2{padding-bottom:60px !important; display: block; width: 100%; height: 0px}
.pb_3{padding-bottom:90px !important; display: block; width: 100%; height: 0px}
.pb_4{padding-bottom:120px !important; display: block; width: 100%; height: 0px}
.pb_5{padding-bottom:150px !important; display: block; width: 100%; height: 0px}
.pb_6{padding-bottom:180px !important; display: block; width: 100%; height: 0px}
.abstand.pb_0{display: none}
.uppercaser {text-transform: uppercase}
.cmstext p{margin-bottom: 30px; font-size: 18px; line-height: 26px;}

.fs14, .fs14 * {font-size: 14px}
.fs18, .fs18 * {font-size: 18px; line-height: 26px}
/*.texthell, .texthell * {color: var(--text-hell)} */

/* diverse Divs  ---------------------- */
h1, .h1like {font-family: var(--font-display); font-weight: 400; font-size:30px; text-align:left; margin-bottom:10px; max-width: 100%; line-height: 37.5px; color: var(--gray-3)} 
h2, .h2like {font-family: var(--font-fliesstext); color: var(--green); font-size:48px; line-height: 53px; font-weight: 700; letter-spacing: 1px;}
h3, .h3like {font-family: var(--font-display); color: var(--gray);  font-weight: 700; letter-spacing: 1px } 
h4, .h4like {font-family: var(--font-display); font-size: 18px; line-height: 24px; font-weight: 500; letter-spacing: 1px; }  
#adresse h1, #adresse h2, #adresse h3 {color: var(--white)}
.headline-wrap { display: flex; align-items: center}

.c0 {color: var(--text)}

.bg_1 {background-color: var(--green-50)} 
.bg_2 {background-color: var(--gray-20)}  
.bg_3 {background-color: var(--green); color: var(--white)}

.bg_3 h1, .bg_3 .h1_like, .bg_3 h2, .bg_3 .h2_like, .bg_3 h3, .bg_3 .h3_like, .bg_3 h4, .bg_3 .h4_like {color: var(--white)}

.contentAfter .block {margin-top: 126px; margin-left: 7px}  
.contentAfter .block .line { width: 180px; height: 3px; margin-top: 30px; margin-bottom: 30px; border-radius: 20px; background-color: var(--white)}
.contentAfter .flipText  {margin-left: 1px; margin-top: 190px; transition: none !important}  
body.loaded .contentAfter .flipText  {transition: 1s !important}  
.start .contentAfter .flipText  {margin-top: 103px}  
.contentAfter .flipText svg {font-family: aktiv-grotesk-extended,sans-serif; text-transform: uppercase; letter-spacing: .11em; font-weight: 700; fill: rgb(22,22,21); line-height: 20px; font-size: 17px; color: var(--black); margin-right: 20px}  
.contentAfter .flipTextMobile svg {font-family: aktiv-grotesk-extended,sans-serif; text-transform: uppercase; letter-spacing: 1.92px; font-weight: bold; fill: rgb(22,22,21); line-height: 18px; font-size: 14px; color: var(--black);}  
.contentAfter .flipTextMobile {display: none}  

/* FIXING Animation on Load */
[data-aos][data-aos][data-aos-duration="1000"], body[data-aos-duration="1000"] [data-aos] {transition-duration: 0s !important ; opacity: 0}
body.loaded [data-aos][data-aos][data-aos-duration="1000"], body[data-aos-duration="1000"] [data-aos] {transition-duration: 1s !important}

.boxOuter {display: flex; justify-content: center}
.work {font-family: var(--font-fliesstext); font-weight: 400}
.cblack {color: #000000}
.bold {font-weight: bold}
.normal {font-weight: normal}
.tac {text-align: center}
.mb10 {margin-bottom: 10px}
.mb20 {margin-bottom: 20px}
.mb30 {margin-bottom: 30px}
.mb40 {margin-bottom: 40px}
.mb60 {margin-bottom: 60px}
.mb80 {margin-bottom: 80px}
.mt10 {margin-top: 10px}
.mt20 {margin-top: 20px}
.mt30 {margin-top: 30px}
.mt40 {margin-top: 40px}
.mt60 {margin-top: 60px}
.mt80 {margin-top: 80px}
.flex {display: flex}
.flex.justifyAround {justify-content: space-around}
.flex.justifyBetween {justify-content: space-between}
.flex.alignCenter {align-items: center}
.flex.gap15 {gap: 15px}
.text-center {text-align: center}
#obenOuter {z-index:1000; position:fixed;height:230px;width:100%; margin:0px auto; background-color:var(--white); margin-bottom: 20px; top: 0px;transition: height 0.5s ease;}
#balkenoben {z-index:1; width: var(--content-breite); max-width:100%;   margin:0px auto; position:relative;}
#langChange {width:auto; text-align:right; float:right; margin-top:0px; position:absolute; right:20px; top:10px; text-transform:uppercase; display:none}
#langChange a {display:block; height:20px;float:left; width:auto; text-align:center; margin-right:10px}
#langChange a:hover {color:#009ee0;}
#langChange a.langChange:hover {color:#009ee0;}
#langChange a.langChange.aktiv {color:#009ee0;}
/*#navMobile {display:none} */
#logoMobile {display:none}
#langChangeMobile {display:none}
.topline {margin-top: 35px; padding-bottom: 30px; display: flex;  justify-content: flex-start; align-items: center; color: var(--headertext); transform: scale(1); transition: all 700ms;}
.topline a {color: var(--headertext); text-decoration: none}
.topline .icon {width: auto; display: flex; align-items: center}
.topline .icon-tel {background-image: url("/UserFiles/structure/svg/phone-call-green.svg"); background-size: 30px; padding-left: 40px; background-repeat: no-repeat; background-position: left center; height: 80px; margin-right: 80px; margin-left: 80px; transform: scale(1); transition: all 700ms;}
.topline .icon-email {background-image: url("/UserFiles/structure/svg/email-green.svg"); background-size: 30px; padding-left: 40px; background-repeat: no-repeat; background-position: left center; height: 80px; transform: scale(1); transition: all 700ms;}
.topline .icon-tel.mobile {display: none}
.topline .icon-email.mobile {display: none}
.socialMedia {display: flex}
.socialMedia div[class^="icon-"] {width: 20px; height: 20px; background-size: 100%; background-repeat: no-repeat; margin-left: 15px}
.socialMedia .icon-linkedin {background-image: url("/UserFiles/structure/svg/linkedin-white.svg")}
.socialMedia .icon-xing {background-image: url("/UserFiles/structure/svg/xing-wihte.svg")}


/* Navigation ----------------------------- */
nav {position: fixed; width: 100vw; z-index: 21; height: 120px; transition: .4s ease-out; background-color: var(--green) }
body.sticky nav {height: 70px;}
nav .navInner {height: 100%; padding: 20px 0; width: var(--nav-breite); max-width: 100%; margin: 0px auto; display: flex; justify-content: space-between; align-items: flex-end; transition: 0.3s ease;}

.kontaktTop {position: relative; height: 40px; display: flex; align-items: center; gap: 15px; bottom: -5px} 
.kontaktTop img {height: 100%;}
.kontaktTop a {font-weight: 700; font-size: 20px; line-height: 30px; color: var(--black); text-decoration: none}

.logoLink {position: relative; display: inline-block; height: 100%}  
.logoLink img {height: 100%; position: absolute; transition: 0.4s ease}
.logoLink img.logo-white {opacity: 0}


.menuOuter {display: flex} 
.menu{text-align:left; position:relative; padding-top:0px; background-repeat:repeat; display: block;}
.menu ul {margin:0px; padding:0px;display: flex; align-items: center; gap: 50px} 
.menu ul li {padding:0px; margin:0px; list-style-type:none; width:auto; text-align:center; display:flex; position:relative; z-index:99; flex-direction: column}

.menu ul li.aktiv {} 
.menu ul li a {text-decoration: none; letter-spacing: 1px; display: block; width: 100%; padding-top: 3px; color: var(--white); font-family: var(--font-display); text-transform: uppercase; font-weight: 500; transition: 0.5s ease; font-size: 20px; line-height: 30px}
.menu ul li a:after {content: '';position: absolute;width: 100%;transform: scaleX(0);height: 3px;top: 0;left: 0;background-color: var(--accent);transform-origin: bottom right;transition: transform 0.25s ease-out;}
.menu ul li:hover a:after, .menu ul li.aktiv a:after {transform: scaleX(1); transform-origin: bottom left;}


a.animatedLink {position: relative}
a.animatedLink:after {content: '';position: absolute;width: 100%;transform: scaleX(0);height: 3px;top: 0;left: 0;background-color: var(--accent);transform-origin: bottom right;transition: transform 0.25s ease-out;}
a.animatedLink:hover:after, #adresse .footerNav a.aktiv:after {transform: scaleX(1); transform-origin: bottom left;} 

.langChange {display: flex; align-items: center}
.langChange a {color: var(--accent); text-decoration: none; text-transform: uppercase}

/* Sticky */
#obenOuter.sticky {height: 100px}
#obenOuter.sticky #navOuter {height: 40px}
#obenOuter.sticky .topline{margin: 0px 0; transform: scale(1); padding-bottom: 0px}
#obenOuter.sticky .topline #logolink {height: 80px; left: -10px}
#obenOuter.sticky .topline .icon-tel, #obenOuter.sticky .topline .icon-email {height: 30px; background-size: 25px}
/* CONTENT */
#contentOuter {width:100%; height:auto; min-height:200px;}
#contentHome {width:auto;  z-index:1; max-height:680px; margin:0px auto; position:relative; overflow: hidden; max-width: 1000px; margin-top: 40px;}
#contentHome img {width:100%;}
#content , .content {width:auto;}
.content a, #content a {text-decoration: none;}
.content a:not(.formattedLink, .buttonInner):hover, #content a:not(.formattedLink, .buttonInner):hover {color: var(--accent);}
.content:last-of-type {margin-bottom: 0px}
.content.fullpage {margin-top: 245px}
.content.black {background-color:#000000}
.content.black .contentsection .inhalt {color:#fff}
.contentAfter {height: 100vh; width: 100vw; max-width: var(--nav-breite); padding: 0 20px; display: flex; align-items: center; justify-content: flex-start; position: relative; z-index: 10; margin: 0px auto; padding-bottom: 63px}
.contentAfter h1 {width: auto;}
#content .contentAfter {margin-top: 0px; width: 100%}

.noHeader {display: block; width: 100%; height: 120px}

header {height: 100vh; width: 100vw}
.headerbild {width: 100%; }
.headerGallery {position: absolute; height: 100vh; width: 100vw; top: 0; left: 0}
.headerGallery .flexslider {height: 100%;}
.headerGallery ul.slides {position: relative; height: 100%}
.headerGallery ul.slides li { height: 100%}
.headerGallery ul.slides li .inhaltsbild{ height: 100%; object-fit: cover; object-position: center} 
.headerGallery span[class^="pos_"] {display: flex; position: absolute; font-family: var(--font-display); font-size: 48px; font-weight: bold; line-height: 1.1em; color: var(--white);  width: 100%; height: 100%; top: 0px; left: 0px; padding: 20px}

.headerGallery span.pos_ol {justify-content: flex-start; align-items: baseline}
.headerGallery span.pos_om {justify-content: center; align-items: baseline}
.headerGallery span.pos_or {justify-content: flex-end; align-items: baseline}
.headerGallery span.pos_ml {justify-content: flex-start; align-items: center}
.headerGallery span.pos_mm {justify-content: center; align-items: center}
.headerGallery span.pos_mr {justify-content: end; align-items: center}
.headerGallery span.pos_ul {justify-content: flex-start; align-items: end}
.headerGallery span.pos_um {justify-content: center; align-items: end}
.headerGallery span.pos_ur {justify-content: end; align-items: end}

.overlay {position: absolute; bottom: 100px; left: calc(max(0px,calc((100vw - 1440px) / 2)) + 100px); z-index: 10; background: rgba(255,255,255,0.9); width: 850px;}
.overlay .overlayInner {display: flex; gap: 5px;}
.overlay .overlayInner .logo {padding: 50px 40px; width: 280px} 
.overlay .overlayInner .logo img {width: 100%}
.overlay .overlayInner .textOverlay {padding: 35px; max-width: 580px}
.overlay .overlayInner .textOverlay .sub {font-size: 20px; font-weight: 900; line-height: 22px; color: var(--gray)} 
.overlay .overlayInner .textOverlay h1 {font-size: 60px; font-weight: 700; line-height: 66px; color: var(--green); margin-top: 25px; margin-bottom: 60px} 

#scrollToTop {display: block; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: color .3s; transition: color .3s; text-align: center; position: fixed; right: 30px; bottom: -50px; z-index: 1001; opacity: 0; transition: 0.4s ease-out; cursor: pointer}
#scrollToTop.visible {opacity: 1; bottom: 30px}
#scrollToTop path.scrollToTopArrow {color: var(--white); fill:currentColor}
#scrollToTop:hover path.scrollToTopArrow {color: var(--green);}

#contentInnen { text-align:left; max-width:1020px; width:auto; padding-bottom:20px; margin-top:75px}
#content .flexslider ul li, #contentInnen .flexslider ul li {margin:0px; left: 0px; max-width: 100%}

section {position: relative;}

.buttonOuter {display: flex; margin-top: 20px}
.buttonOuter a.buttonInner, .buttonOuter button.buttonInner {background-color: var(--green); padding: 15px 20px; display: flex; gap: 10px; align-items: center; color: var(--black); border: 1px solid var(--black); text-decoration: none; font-size: 14px; line-height: 13.5px; font-weight: 400; transition: 0.3s ease; cursor: pointer}  
.buttonOuter a.buttonInner:hover, .buttonOuter button.buttonInner:hover {}
 .buttonOuter button.buttonInner[disabled] {opacity: 0.4; cursor: not-allowed; pointer-events: none}

.contentInnen ul li {list-style-type: none; position: relative; display: flex; align-items: center}
.contentInnen ul li:before {content: ""; position: relative; display: block; left: 0; width: 8px; height: 3px; background-color: var(--green); margin-left: 2px; margin-right: 5px}

.smallTextblock {font-size: 14px; line-height: 18px; margin-bottom: 5px;}

.slick-dots {bottom:-60px}
.slick-dots li {margin-left: 1px; margin-right: 1px; display: inline-block !important; }
.slick-dots li::before {display: none !important}
.slick-dots li button {}
.slick-dots li button:before {content: ""; background-color: var(--black); width: 10px; height: 10px; border-radius: 15px; opacity: 1}
.slick-dots li.slick-active button:before, .slick-dots li:hover button:before {content: ""; background-color: var(--green); width: 10px; height: 10px; border-radius: 15px}

.slick-initialized .slick-slide {display: flex !important; justify-content: center}
.slick-prev {left: 10px !important; background-image: none; width: 20px; height: 20px;  z-index: 1}
.slick-next {right: 10px !important; background-image: none; width: 20px; height: 20px;}
.slick-prev::before {position: relative; display: block; content: ""; background-image: url("/UserFiles/structure/arrow-right.svg"); width: 20px; height: 20px; background-size: contain; transform: rotate(180deg)}
.slick-next::before {position: relative; display: block; content: ""; background-image: url("/UserFiles/structure/arrow-right.svg"); width: 20px; height: 20px; background-size: contain}

#inhaltsbildouter {width:100%; display:block; }
.inhaltsbild {max-width:100%; width:100%; display: block}
.flexslider {padding-bottom:0px; width:100%; max-width:100%; height: 100%; overflow: hidden}
.flexslider .slides img {display: block;width: 100%;}
.flex-control-nav {z-index: 1000}
#spruch {font-size: 21px; color: #663333; text-align: center; padding: 70px 0px;}
.teaserMenu {display: flex; justify-content: space-between; cursor: pointer}
.teaserMenu .menuBox {display: block}
.teaserMenu .menuBox .menuBoxName {text-align: center; margin-top: 15px; font-family:  var(--font-fliesstext); font-size: 16px; font-weight: normal;}
.hr {border: 1px solid #cccccc}
.contentBox {margin-top: 50px; display: flex; justify-content: space-between}
.contentBox .contentText {width: 50%}
.contentBox .contentText .text, .contentBox .contentText .text span{font-family: var(--font-fliesstext); font-size: 16px !important}
.contentBox .contentImg {max-width: 520px}
.hidden {display:none;  transition: all 0.2s ease}
.visible {display:flex; transition: all 0.2s ease}

.kontakt {text-align: center; padding-top: 100px; margin-bottom: 80px;}
.kontakt .anfragen {color: #b40e32}

/* LAYOUTS */
.layout_0 .contentInnen {width: var(--content-breite); max-width: 100%; margin: 0px auto;} 
.layout_0 .contentInnen .textContent .headline-wrap {display: block; position: relative} 
.layout_0 .contentInnen .textContent .headline-wrap h1 {position: relative; right: 8%; margin-bottom: 60px}  

.layout_1 .contentInnen {width: var(--content-breite); max-width: 100%; margin: 0px auto; display: flex; justify-content: space-between; gap: 20px}
.layout_1 .contentInnen .left {width: 50%}
.layout_1 .contentInnen .left .hauptbild img {width: 100%;}
.noHeaderBelow .layout_1 .contentInnen .left .hauptbild img {max-height: 250px}
.layout_1 .contentInnen .right {width: 50%; display: flex; align-items: center}
.layout_1 .contentInnen .headline-wrap {margin-bottom: 25px; flex-direction: column; align-items: flex-start}
.layout_1 .contentInnen .right .haupttext {padding-right: 60px}

.layout_2 .contentInnen {width: var(--content-breite); max-width: 100%; margin: 0px auto; display: flex; justify-content: space-between; flex-direction: row-reverse; gap: 20px}
.layout_2 .contentInnen .left {width: 50%}
.layout_2 .contentInnen .left .hauptbild img {width: 100%}
.layout_2 .contentInnen .right {width: 50%; display: flex; align-items:center} 
.layout_2 .contentInnen .headline-wrap {margin-bottom: 25px}
.layout_2 .contentInnen .right .haupttext {padding-right: 60px}

.layout_3 .contentInnen {width: var(--content-breite); max-width: 100%; margin: 0px auto;} 
.layout_3 .contentInnen .sliderOuter {display: flex; align-items: center; margin: 40px 0}
.layout_3 .contentInnen .sliderOuter .slickOuter {width: 100%; margin: 0px auto; height:225px}
.layout_3 .contentInnen .sliderOuter .slickOuter .slickGallery, .layout_3 .contentInnen .sliderOuter .slickOuter .slickGallery .slick-list, .layout_3 .contentInnen .sliderOuter .slickOuter .slickGallery .slick-list .slick-track {height: 100%;}
.layout_3 .contentInnen .sliderOuter .slickOuter .slide {padding: 0 10px; height: 100%; display: flex; flex-direction: column} 
.layout_3 .contentInnen .sliderOuter .slickOuter .slide img {height: 100%; width: 100%; object-fit: cover}

.layout_4 .contentInnen {width: var(--content-breite); max-width: 100%; margin: 0px auto;} 
.layout_4 .contentInnen .textContent .headline-wrap {display: block; position: relative} 
.noHeaderBelow .layout_4 .contentInnen .textContent .headline-wrap {margin-bottom: 30px} 
.layout_4 .contentInnen .textContent .headline-wrap h1 {position: relative; right: 8%; margin-bottom: 60px}  
.layout_4 .contentInnen .textContent a {color: var(--text)}  
.layout_4 .contentInnen .textContent a:hover {color: var(--green)}  
.layout_4 .contentInnen .buttonOuter {justify-content: center}  

.layout_5 .contentInnen {width: var(--content-breite); max-width: 100%; margin: 0px auto;text-align: center} 
.layout_5 .contentInnen .textContent .headline-wrap {justify-content: center} 
.layout_5 .contentInnen .textContent .haupttext {font-size: 22px; line-height: 36px; font-weight: 700; color: var(--gray)} 
.layout_5 .contentInnen .textContent .haupttext .bigText {font-size: 70px; line-height: 70px; font-weight: 700;} 
.layout_5 .contentInnen .textContent h2 {text-align: center} 
.layout_5 .contentInnen .textContent h3 {text-align: center} 
.layout_5 .contentInnen .buttonOuter {justify-content: center; margin-top: 100px; margin-bottom: 100px}  

.layout_6 .contentInnen {width: var(--content-breite); max-width: 100%; margin: 0px auto;text-align: center} 
.layout_6 .contentInnen .hauptbild {width: 100%;} 
.layout_6 .contentInnen .hauptbild img {width: 100%;} 

.layout_7 .contentInnen {width: calc(var(--content-breite) * 1.16); max-width: 100%; margin: 0px auto;} 
.layout_7 .contentInnen .kontaktformular .split {display: flex; justify-content: space-between}
.layout_7 .contentInnen .kontaktformular .split .half {width: 49%}
.layout_7 .contentInnen .kontaktformular .labelinput label {opacity: 0; font-size: 14px; line-height: 15px; color: var(--gray); transition: 0.3s ease; padding-left: 10px}  
.layout_7 .contentInnen .kontaktformular .labelinput label.show {opacity: 1; } 
.layout_7 .contentInnen .kontaktformular input {background-color: var(--gray-light); outline: none; border: none; margin-bottom: 3px;} 
.layout_7 .contentInnen .kontaktformular textarea {background-color: var(--gray-light); outline: none; border: none; resize: none; min-height: 200px;} 
.layout_7 .contentInnen .kontaktformular .formularTop, .layout_7 .contentInnen .kontaktformular .formularBottom {position: relative; left: 8%}  
.layout_7 .contentInnen .kontaktformular .formularTop h3 {color: var(--gray); margin-bottom: 60px; font-size: 38px; line-height: 47.5px; font-weight: 700;}  
.layout_7 .contentInnen .kontaktformular .formularTop .formularText {margin-left: 58px; margin-bottom: 40px; font-weight: 700;} 
.layout_7 .contentInnen .kontaktformular .formularTop .radiogroup > div {display: flex; gap: 30px; margin-bottom: 20px; align-items: center} 
.layout_7 .contentInnen .kontaktformular .formularTop .radiogroup > div input[type='radio'] {width: 28px; height: 28px;} 
.layout_7 .contentInnen .kontaktformular .formularTop .radiogroup > div input[type='radio']:checked {appearance: none; -webkit-appearance: none; border-radius: 50%; background: var(--white); border: 7px solid var(--green); box-shadow: 0 0 0 1px var(--green);} 
.layout_7 .contentInnen .kontaktformular .formularTop .selectGroup {display: flex; align-items: center; gap: 5px; margin-bottom: 90px; margin-left: 58px} 
.layout_7 .contentInnen .kontaktformular .formularTop .selectGroup select {width: auto; background-color: var(--gray-light); outline: none; border: none; margin: 0} 
.layout_7 .contentInnen .kontaktformular .info {margin:5px 0 20px 0; padding: 0 8%; text-align: end} 
.layout_7 .contentInnen .kontaktformular .fileArea {width: 100%; height: 150px; position: relative}
.layout_7 .contentInnen .kontaktformular .fileArea #dropZone {position: absolute; width: 100%; height: 100%; border: 2px dotted var(--gray-2); transition: 0.2s ease}
.layout_7 .contentInnen .kontaktformular .fileArea #dropZone.hover {border: 2px dotted var(--green)}
.layout_7 .contentInnen .kontaktformular .fileArea .chooseFile {position: absolute; top: 50%; transform: translateY(-50%); left: 8%; margin: 0}
.layout_7 .contentInnen .kontaktformular .fileArea .uploadInfo {position: absolute; top: 50%; transform: translateY(-50%); left: 52%; margin: 0; color: var(--gray-2)}
.layout_7 .contentInnen .kontaktformular .formularBottom .datenschutzOuter {display: flex; align-items: center; gap:15px; margin-top:30px; font-weight: 400}
.layout_7 .contentInnen .kontaktformular .formularBottom .datenschutzOuter a {color: var(--green); text-decoration: underline}

.layout_9 .contentInnen {width: var(--content-breite); max-width: 100%; height: 420px; margin: 0px auto; display: flex; justify-content: space-between; gap: 20px}
.layout_9 .contentInnen .left {width: 30%;}
.layout_9 .contentInnen .left .hauptbild {height: 100%; position: relative}
.layout_9 .contentInnen .left .hauptbild img {height: 130%; position: absolute; bottom: 0; left: 0}
.layout_9 .contentInnen .right {width: 65%; display: flex; align-items: center; color: var(--black); padding: 10px 0}
.layout_9 .contentInnen .right .quote {width:100px; margin-bottom: 30px;}
.layout_9 .contentInnen .right .zitat {font-size: 36px; line-height: 45px; font-family: var(--font-display-2)}
.layout_9 .contentInnen .right .name {font-size: 18px; line-height: 25px; font-weight: 700; margin-top: 30px}

.layout_15 .contentInnen {width: var(--content-breite); max-width: 100%; margin: 0px auto; font-size: 22px; line-height: 35px}


.widgetOuter {position: fixed; bottom: 0; left: 0; z-index: 99; color: var(--white); font-size: 30px; line-height: 36px; height: 45px; overflow: hidden}
.widgetOuter .widgetInner {transition: 0.3s ease; color: var(--white); text-decoration: none; position: relative; top: 0} 
.widgetOuter .widgetInner .info {padding: 5px 10px;} 
.widgetOuter .widgetInner.moveUp {top: -47px}

.vorteileOuter {display: grid; grid-template-columns: repeat(3,1fr); gap: 100px}
.vorteileOuter img {width:100%; padding: 50px}
.vorteileOuter .vorteilHeadline {font-size: 22px; line-height: 36px; font-weight: 700; color: var(--gray); margin-bottom: 10px}

.kontaktSmall {display: flex; flex-direction: column; gap: 20px; align-items: center; color: var(--black); margin: 75px 0}
.kontaktSmall .kontaktLine {display: flex; align-items: center; gap:35px;}
.kontaktSmall .kontaktLine a {color: var(--black); font-size: 30px; line-height: 37.5px; font-weight: 700}

.referenz {background-color: var(--gray-20); padding: 100px; display: flex; justify-content: space-between}
.referenz img {width: 50%}
.referenz .referenzTextBox {width: 50%; padding-left: 100px; display: flex; flex-direction: column; justify-content: center;}
.referenz .referenzTextBox .referenzHeadline {font-weight: 700; font-size: 38px; line-height: 47.5px; color: var(--green)} 

.sanierung {width: 100%;}
.sanierung .kreislauf {width: var(--content-breite); max-width: 100%; margin: 0px auto;}
.sanierung .kreislauf .kreislaufBild {display: block}
.sanierung .kreislauf .kreislaufSteps {display: none}
.sanierung h2 {width: var(--content-breite); margin: 50px auto; color: var(--gray)}
.sanierung .textSteps {}
.sanierung .textSteps .sanierungsRow {background-color: var(--green-50); padding: 40px 0}
.sanierung .textSteps .sanierungsRow.row_gray {background-color: var(--gray-light-1);}
.sanierung .textSteps .sanierungsRowInner {width: var(--content-breite); max-width: 100%; margin: 0px auto; display: flex;}
.sanierung .textSteps .sanierungsRowInner .zahl {font-size: 150px; line-height: 150px; font-weight: 700; color: var(--green); width: 10%; flex-shrink: 0}
.sanierung .textSteps .sanierungsRow.row_gray .zahl {color: var(--gray); }
.sanierung .textSteps .sanierungsRowInner .headline {font-size: 22px; line-height: 36px; font-weight: 700; color: var(--gray); margin-bottom: 20px; margin-top: 10px}

footer {position: relative; z-index: 110; background-color: var(--gray-50); overflow: hidden}

#adresse {width: var(--content-breite); max-width: 100%; height:auto; padding-left:0px; text-align:left; position:relative; margin:0px auto; display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 50px; align-items: flex-end; justify-content: space-between; padding-top: 40px; padding-bottom:20px; z-index:100; color: var(--white)}
#adresse .block {display: flex; flex-direction: column;}
#adresse .block.centerblock {display: flex; flex-direction: column; align-items: center}
#adresse .block.rightblock {display: flex; flex-direction: column; align-items: flex-end}
#adresse .block.logoblock {position: relative; max-width: 150px;}
#adresse .block.logoblock img.logo-footer {width: 100%;}
#adresse .block .logoblock img.logo-footer-white {display: none}
#adresse .block .claim, #adresse .block .headline {font-family: var(--font-display); font-size: 30px; line-height: 48px;}

#adresse a {text-decoration: none; color: var(--white); display: inline-flex; align-items: center;}
#adresse .footerNav {display: flex; flex-direction: column; list-style-type: none}
#adresse .footerNav li {}
#adresse .footerNav a {position: relative}
#adresse .footerNav a:after {content: '';position: absolute;width: 100%;transform: scaleX(0);height: 3px;top: 0;left: 0;background-color: var(--accent);transform-origin: bottom right;transition: transform 0.25s ease-out;}
#adresse .footerNav a:hover:after, #adresse .footerNav a.aktiv:after {transform: scaleX(1); transform-origin: bottom left;} 

.socials {display: flex; justify-content: space-between; column-gap: 25px; margin-right: 5px}
.socials.flexStart {justify-content: flex-start;}
.socials .socialLink {position: relative; height: 35px; width: 35px}
.socials .socialLink .icon {position: absolute; top: 0; height: 100%;}
.socials .socialLink .iconActive {opacity: 0}
.socials .socialLink:hover .icon {opacity: 0}
.socials .socialLink:hover .iconActive {opacity: 1; filter: none !important}
 
.copyright-wrapper {padding: 5px 0;}
.copyright-wrapper p {font-size: 14px; line-height: 18px; color: var(--white)}

.imprintNavigation { background-color: var(--gray); padding: 20px 0}
.imprintNavigation .imprintNavigationInner {width: var(--content-breite); max-width: 100%; margin: 0px auto; display: flex; gap: 50px; font-weight: 500; background-color: var(--gray)}
.imprintNavigation .imprintNavigationInner a {color: var(--white); text-decoration: none}

#bottom {max-width:1020px; width:100%; text-align:right; margin-top:10px;  margin-left:0px; margin-bottom:10px}


.platzhalter {color:var(--white)}

.no-aos-animation {
    animation: none !important;
    transition: none !important;
	opacity: 1 !important;
    transform: none !important;
}


/* Formularfelder ---------------- */
.formtabelle {margin-top:20px}
input:not([type='checkbox'],[type='radio']), select {font-family: var(--font-fliesstext); font-size:18px; font-weight: 400; line-height: 27px; margin-bottom:20px; height:50px; color:var(--black); width:100%; padding: 5px 15px; outline: none;transition: 0.3s ease-in-out}
input::placeholder {color:var(--black);}
textarea {font-family: var(--font-fliesstext); font-size:18px; font-weight: 400; line-height: 27px; width: 100%; resize: none; padding: 15px; height: 100px}
textarea::placeholder {color:var(--black);}

button.white {background-color: var(--white); border-radius: 5px; border: 1px solid var(--white); color: var(--black); text-transform: uppercase; font-family: var(--font-display), Open Sans, sans-serif; font-weight: bold}
#datenbestimmungUser {margin-right: 10px}
#Senden {display: inline-block; background-color: var(--black); color: var(--white); padding: 12px 16px; border: 1px solid var(--black); font-family: var(--font-fliesstext); font-size: 14px; line-height: 20px; letter-spacing: 0.98px; margin: 0px auto; margin-top: 20px; transition: 0.3s; cursor: pointer} 
#Senden:hover {background-color: transparent; color: var(--blacj)} 

#formularOuter {display: flex; margin: 0px auto; margin-top: 20px; width: 700px; max-width: 100%; text-align: left}
#formularOuter #eform {width: 100%;display: flex;flex-direction: column;}
#formularOuter .kontaktDaten {padding-left: 50px; padding-top: 20px; color: #000000; margin-bottom: 50px}
img {border:0px;}

.checkmark {display:inline-block; width: 22px; height:22px; -ms-transform: rotate(45deg); /* IE 9 */ -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */   transform: rotate(45deg); position: relative; top: 5px; margin-right:10px;}
.checkmark.inaktiv span.checkmark_stem, .checkmark.inaktiv span.checkmark_kick  {visibility:hidden}
.checkmark.aktiv span.checkmark_stem, .checkmark.aktiv span.checkmark_kick  {visibility:visible}
.checkmark_circle.inaktiv { position: absolute; width:22px; height:22px; background-color: var(--green); border-radius:11px; left:0; top:0;}
.checkmark_circle.aktiv {position: absolute; width:22px; height:22px; background-color: var(--green); border-radius:11px; border: 1px solid red; left:0; top:0;}
.checkmark_stem {position: absolute; width:3px; height:9px; background-color:#fff; left:11px; top:6px;}
.checkmark_kick {position: absolute; width:3px; height:3px; background-color:#fff; left:8px; top:12px;}

.mobileOnly {display: none}
.phoneOnly {display: none}

.fancybox-skin {background: none repeat scroll 0 0 #333;}
.fancybox-title {color:var(--white); padding-left:10px;}

.downImg {width:20px; margin-right:10px}

/*mobile Nav*/

#mobileOpenerOuter {display:none; width:30px; margin-top:0px; z-index:101; height:100%; top: 25px}
#navOuterMobile {display:block; width:100%; height:50px; background-color:var(--black)}
#navMobileOpener {display:block;  padding-right:0px; cursor:pointer; width:30px;}
#navMobileOpener .balken {width:30px; height:3px; background-color:var(--black); margin-top:5px}
#navMobileOpener .balken:first-child {margin-top:0px}
#navMobileCloser {display:none; padding-right:0px; cursor:pointer; width:30px}
#navMobileCloser .balken {width:30px; height:3px; background-color:#fff9f5; margin-top:5px}
#navMobileMenu {display: none} 
#mobileCloser {position: absolute; cursor: pointer; top: 25px; right: 10px; height: 20px; width: 20px; background-image: url("/UserFiles/structure/svg/closer_dks.svg"); background-size: cover; z-index: 1}
.menuMobile {padding-bottom: 10px; padding-top: 10px; height: 100%; display: flex; justify-content: center; align-items: center;}

img.highslide {cursor:pointer}

.formtabelle td {padding-bottom:20px}

/* Styles für CMS Editor */
 
body#tinymce {padding: 20px !important; cursor:text; background-color: var(--white); color: var(--black)} 
body#tinymce ul {margin-left: 20px}
body#tinymce p, body#tinymce ul {line-height: 22px; font-size: 16px; font-family: var(--font-fliesstext); margin-bottom: 3px} 
body#tinymce .buttonblue {background-color: var(--dark-blue) }
body#tinymce .buttongreen {background-color: var(--green)}
body#tinymce .formattedLink.formattedLinkunderline {cursor: default}

body#tinymce .accord .accordText {max-height: none; font-size: 18px; line-height: 26px; margin-bottom: 30px}