/* dieguteluise -  14.02.2024 */


:root {
	--accent: #ff4637;
	--black: #000000;
	--white: #ffffff;
	--text: #343a1c;
	--serif: "cabazon", serif;
	--sans-serif: "bd-supper", sans-serif;
}

/*
FONTS
font-family: cabazon, serif; 400
font-family: bd-supper, sans-serif; 400, 700
*/

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


html {background-color:#fff; overflow-x: hidden; scroll-behavior: smooth} 
body {font-family: var(--sans-serif); line-height: 0.47px; height:100%; width:100%; color:var(--text);  font-size: 19px; line-height: 27px;background-color:#ffffff;  margin:0px; padding:0px}
body p, body div {}

/* Baustelle */
.baustelleOuter {width: 100%; height: 100vh; height: 100dvh; display: flex; justify-content: center; align-items: center; font-family: bd-supper, sans-serif; font-size: 19px; line-height: 19px}
.baustelleOuter .baustelleInner {width: 600px; text-align: center}
.baustelleOuter .baustelleInner .logo {width: 100%;}
.baustelleOuter .baustelleInner .coming {font-family:; font-size: 125px; line-height: 125px; color: var(--accent)}
.baustelleOuter .baustelleInner .socials {display: flex; height: 60px; justify-content: center; column-gap: 30px; margin-top: 30px}
.baustelleOuter .baustelleInner .socials img {height: 100%;}
.baustelleOuter .baustelleInner .apply {display: inline-block; margin-top: 30px; font-size: 65px; line-height: 65px; color: var(--accent)}

/* diverse Divs  ---------------------- */
h1, .h1like {font-size:65px; text-align:left; margin-bottom:30px; font-weight:500; max-width: 100%; line-height: 66px; letter-spacing: 1.6px; width: 100%; font-family: var(--sans-serif);}
h2, .h2like {font-size: 20px; font-weight: bold; margin-bottom: 20px; }
h3, .h3like {font-size: 18px; font-weight: normal;margin-bottom: 30px;} 
h1 span {display:block}


.boxOuter {display: flex; justify-content: center}

.mobileOnly {display: none}
.cblack {color: #000000}
.bold {font-weight: bold}
.normal {font-weight: normal}
.tac {text-align: center}
.mb5 {margin-bottom: 5px}
.mb10 {margin-bottom: 10px}
.mb20 {margin-bottom: 20px}
.mb40 {margin-bottom: 40px}
.mb60 {margin-bottom: 60px}
.mb80 {margin-bottom: 80px}
.mt5 {margin-top: 5px}
.mt10 {margin-top: 10px}
.mt20 {margin-top: 20px}
.mt40 {margin-top: 40px}
.mt60 {margin-top: 60px}
.mt80 {margin-top: 80px}
.db {display: block}
.white {background-color:#FFF; border:1px solid #fff}
.pink {background-color:#efdfdf;  min-height:150px; max-height:469px; overflow:hidden}
.pinklinks {float:left; display:block; position:relative}
.pinkrechts {float:left; display:block; position:relative}
.contentsection ol li, .contentsection  ul li {margin-left: 20px; padding-bottom: 20px}
#obenOuter {z-index:1000;text-align:center; position:fixed;width:100%; margin:0px auto; top: 0px; background: var(--white)}
#balkenoben {height:120px; width:1440px; max-width: 100%;  z-index:1; max-width:100%; margin:0px auto; padding: 0px 5%;  position:relative; transition: height 0.5s ease; display: flex;justify-content: center; align-items: center; gap: 100px} 
#logolink { height:80%; position:relative; z-index:999; transition: height 0.5s ease;width: auto;display: block;} 
#logolinkMobile { width: auto; height: 100%; position:relative; z-index:999; transition: height 0.5s ease; display: none; padding: 5px 0; } 
body.sticky #balkenoben {height: 100px}
#logo {display:block; height:100%; transition: width 0.5s ease;} 
body.sticky #logo {} 
#logoText {font-weight: bold; color: #fff; font-size: 12px; margin-left:40px}

#name {position:relative; float:left; text-align:left; margin-left:0px; margin-top:38px}

#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}

.lineLong {border-bottom: 2px solid white;width: 100%; margin-bottom: 30px}

.lineTop {position: absolute;top: 0px;height: 30px;width: 1px; left: 50%; background-color: var(--accent)}
.beige .lineTop {background-color: #fff}
.lineBottom {position: absolute;bottom: 0px;height: 30px;width: 1px; left: 50%; background-color: var(--accent)}
.beige .lineBottom {background-color: #fff}

.content ul li {margin-left: 20px}

/* Navigation ----------------------------- */
/* empty.png in menu, damit der hover - effekt nicht rüttelt */


.menu{text-align:left; position:relative; padding-top:0px; /*color:#676767;*/ }
.menu ul {margin:0px; padding:0px;display: flex; gap: 85px} 
.menu ul li {padding:0px; margin:0px; list-style-type:none; width:170px; max-width: 100%; text-align:center; display:flex; position:relative; z-index:99; flex-direction: column}
.menu ul li:last-child {border-right:0px; margin-right:0px}

.menu ul li.aktiv {}
.menu ul li a {text-decoration:none; font-size:20px; letter-spacing: 2px; line-height: 21px;  display:block; border-bottom:1px solid transparent; color: var(--text); cursor:pointer; padding-top: 2px; transition: 0.2s ease-in-out; text-transform: uppercase }
.menu ul li a:hover {color: var(--accent)}
.menu ul li .hoverline {width: 0px;height: 1px;background-color: var(--accent); transition: 0.2s ease-in-out; position: absolute; bottom: 0}
.menu ul li:hover .hoverline {width: 100%}
.menu ul li.active .hoverline {width: 100%}

#slider {width:1000px; max-width:100%;  height:100%;  position:relative; margin:0px auto; text-align:center; max-height:470px; float:left; overflow:hidden;padding:0px}

#startvideo {position: absolute;top: 0px;z-index: 1;opacity: 0.1; width: 100%}
/* Disable Default video control overlay */
.videocontrols {display:none !important}

.backgroundImage {position: absolute; width: 100%; height: 100%; top: 0px; opacity: 1; object-fit: cover; object-position: top}


/* CONTENT */
#contentOuter {width:100%; height:auto; min-height:200px; margin-top: 120px}
#contentHome {width:100px;  z-index:1; max-height:680px; margin:0px auto; position:relative; overflow: hidden; max-width: 100%; margin-top: 40px;}
#contentHome img {width:100%;}
#content , .content {width:auto; z-index:100; height:auto;clear: both;position: relative;text-align:left;font-size:16px;padding-left:0px;padding-top:0px;padding-right:0px;box-sizing:border-box;overflow: hidden; min-height: 300px}
.content:last-of-type {margin-bottom: 0px}
.content.fullpage {margin-top: 170px}
.content#start.black {background-color:#000000}
.content.black {background-color:#ffffff}
.content.black a {color: var(--accent) !important;}
.content.black .contentsection .inhalt {}
.contentAfter {margin-top: 40px;}
#content .contentAfter {margin-top: 0px; width: 100%}
#content a {color:#000000}
.content.fullpage {width: 1200px !important; max-width: 100%}

.modul_impressum #contentOuter {margin-block: 120px;}

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

.contentsection {padding: 0px; position: relative; width: 1440px; max-width: 100%; margin: 80px auto; z-index: 100;}
.contentsection.emptySection {display: none}
.contentsection .inhalt {color: #000000; line-height: 1.6em; }
.content#home .contentsection {padding: 120px 0px 100px 0px; margin-top: 0}
.content#projekte {min-height: 0}

.content.c_1 {color: var(--white); background-color: var(--accent)} 
.content.c_2 {color: var(--white); background-color: var(--text)} 

.content.small .contentsection {min-height: 0px}

.contentsection.layout_0 {display: flex; flex-direction: column; align-items: center; text-align: center}
.contentsection.layout_0 h1 {text-align: center; margin-bottom: 5px}
.contentsection.layout_0 .h1like {text-align: center; font-weight: bold; margin-bottom: 0}
.contentsection.layout_0 .hauptbild {height: 550px; width: auto; }
.contentsection.layout_0 .hauptbild img {height: 100% } 

.contentsection.layout_0 img.iconFlower {position: absolute; top: 0; left: 0; height: 70px; width: 70px;}
.contentsection.layout_0 img.iconFlower:nth-of-type(2) {top: 0; bottom:unset; left:unset; right: 0; transform: rotate(90deg)}
.contentsection.layout_0 img.iconFlower:nth-of-type(3) {top: unset; bottom:0; left:0; right: unset; transform: rotate(-90deg)}
.contentsection.layout_0 img.iconFlower:nth-of-type(4) {top: unset; bottom:0; left:unset; right: 0; transform: rotate(180deg)}

.contentsection.layout_1 {display: flex; justify-content: space-between;} 
.contentsection.layout_1 .left {width: 45%; color: var(--accent)} 
.contentsection.layout_1 .left h1 {font-size: 225px; line-height: 225px; position: absolute; top: -75px; font-family: var(--serif)} 
.contentsection.layout_1 .right {width: 45%;} 
.contentsection.layout_1 .right img {width: 100%;} 
.contentsection.layout_1 .left .headline-wrap {position: relative;}
.contentsection.layout_1 .left .headline-wrap .hauptbild {margin-left: 200px;}
.contentsection.layout_1 .left .headline-wrap .hauptbild img {width: 100%}
.contentsection.layout_1 .left h2 {font-size: 65px; line-height: 65px; letter-spacing: 1.6px; font-weight: 400}

.contentsection.layout_2 .haupttext {width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 70px;}
.contentsection.layout_2 .haupttext .info .infoInner {display: flex; flex-direction: column; align-items: center}
.contentsection.layout_2 .haupttext .info .infoInner .number {font-family: var(--serif); font-size: 120px; line-height: 120px; color: var(--accent); margin-bottom: 15px}
.contentsection.layout_2 .haupttext .info .infoInner .infotext {font-size: 36px; line-height: 40px; color: var(--black); margin-bottom: 25px; text-align: center}

.contentsection.layout_3 {} 
.contentsection.layout_3 h1 {text-align: center} 
.contentsection.layout_3 .gallery {width: 100%;}
.contentsection.layout_3 .gallery .galleryInner {
	width: 100%;
	display: grid;
	gap: 20px;
	min-height: 900px;
	grid-template-areas: 
    "img1 img3 img4"
	"img2 img3 img4";
}
.contentsection.layout_3 .gallery .galleryInner .galleryImg {position: relative}
.contentsection.layout_3 .gallery .galleryInner .galleryImg img {width: 100%; height:100%; object-fit: cover; object-position: bottom; position: absolute; left: 0}
.contentsection.layout_3 .gallery .galleryInner .galleryImg:nth-child(1) {grid-area:img1;}
.contentsection.layout_3 .gallery .galleryInner .galleryImg:nth-child(2) {grid-area:img2;}
.contentsection.layout_3 .gallery .galleryInner .galleryImg:nth-child(3) {grid-area:img3;}
.contentsection.layout_3 .gallery .galleryInner .galleryImg:nth-child(4) {grid-area:img4;}

.contentsection.layout_4 {display: flex; justify-content: space-between;} 
.contentsection.layout_4 .left {width: 48%; color: var(--accent)} 
.contentsection.layout_4 .left img {width: 100%;} 
.contentsection.layout_4 .right {width: 48%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 60px; text-align: center} 
.contentsection.layout_4 .right h1 {text-align: center; color: var(--accent); margin-bottom: 0} 
.contentsection.layout_4 .right .headline-wrap, .contentsection.layout_4 .right .haupttext {width: 650px; max-width: 100%;}

.contentsection.layout_5 {display: flex; justify-content: space-between; flex-direction: row-reverse} 
.contentsection.layout_5 .left {width: 48%; color: var(--accent)} 
.contentsection.layout_5 .left img {width: 100%;} 
.contentsection.layout_5 .right {width: 48%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 60px; text-align: center} 
.contentsection.layout_5 .right h1 {text-align: center; color: var(--accent); margin-bottom: 0} 
.contentsection.layout_5 .right .headline-wrap, .contentsection.layout_5 .right .haupttext {width: 650px; max-width: 100%;}

.contentsection.layout_6 {display: flex; flex-direction: column; align-items: center; text-align: center}
.contentsection.layout_6 h1 {text-align: center; margin-bottom: 5px}
.contentsection.layout_6 .h1like {text-align: center; font-weight: bold;}
.contentsection.layout_6 .haupttext {text-align: center; width: 800px; max-width: 100%}


.backgroundImage {width: 100%; height: 100%}
.headergal {width: 100vw; height: 100vh; position: absolute; top: 60px;z-index: 0; opacity: 0.5}
.headergalimage {width:100%; height:100%; overflow:hidden}	
.headergalimage img {width: 100%; height: auto}
.content ul.slicker li {margin-left: 0px !important}


.imageGrid.team-img img {width: 25%; height: auto}

.videoBanner {height: 400px; overflow:hidden; display: flex; flex-direction: column}
#projektevideo {opacity: 0.5}

.buttonLink {padding: 5px 10px; padding-top: 8px; border: 1px solid var(--accent); background-color: var(--accent); color: var(--white); font-size: 20px; line-height: 24px; text-transform: uppercase; transition: 0.3s ease}
.buttonLink:hover {color: var(--accent); background-color: transparent; }

/*
.slick-prev::before, .slick-next::before {content:""}
.slick-prev, .slick-next {top:47%; width: 100px; height: 30px;}
.slick-prev, .slick-prev:hover, .slick-prev:focus {background-image: url("/UserFiles/structure/arrow_long_left.png"); left: -150px; background-size: cover}
.slick-next, .slick-next:hover, .slick-next:focus {background-image: url("/UserFiles/structure/arrow_long_right.png"); right: -150px; background-size: cover}
*/
.slick-prev::before {content: "←"; color: black}
.slick-next::before {content: "→"; color: black}

#carouselcontainer ul li {margin-left:0px}
#inhaltsbildouter {width:100%; display:block; }
/*.inhaltsbild {max-width:100%; display:block;}*/
.inhaltsbild {width:1020px; max-width: 100%; overflow:hidden; width:1020px; border-left:1px solid #FFF; border-right:1px solid #FFF; }

.flexslider {padding-bottom:0px; width:1020px; max-width:100%}
.flexslider .slides img {display: block;width: 100%;}
.flex-control-nav {z-index: 1000}

.hr {border: 1px solid #cccccc}

.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}


#adresse {width:100%;height:auto; padding-left:0px; background-color:var(--accent); position:relative; margin:0px auto; text-align:center; display: flex; flex-direction: column; color: var(--white); z-index:99;padding-top: 80px; padding-bottom:70px; }
#adresseInnen {width:1440px; max-width:100%; margin:0px auto; position:relative; text-align:left; display:flex; align-items: stretch; justify-content: space-between} 

#nav_unten {height:20px; border-top:2px solid #eee; padding-top:20px; padding-bottom:20px;  width:950px; padding-left:30px;}
#nav_unten a {display:block; float:left; margin-right:40px; font-size:20px;}
#nav_unten a:hover {color:#000;}
#adresse #adresseInnen .left, #adresse #adresseInnen .right {width: 40%; display: flex; flex-direction: column; padding-top: 20px}
#adresse #adresseInnen .left .text {font-size: 20px; line-height: 21px; letter-spacing: 2px}
#adresse #adresseInnen .center {width: 40%; display: flex; flex-direction: column;align-items: center;}
#adresse #adresseInnen .center .logo {width: 150px; max-width: 100%}
#adresse #adresseInnen .right {justify-content: flex-start; text-align: right}
#adresse #adresseInnen .right .text {text-align: right; font-size: 20px; line-height: 21px; letter-spacing: 2px}
#adresse #adresseInnen .right .socials  {display: flex; align-items: center; width: 100%; justify-content: flex-end}
#adresse #adresseInnen .right .socials a {height: 60px; display: block}
#adresse #adresseInnen .right .socials a img {height: 100%}
#adresse #adresseInnen .right .socials a.insta {margin-left: 20px} 
#adresse #adresseInnen .adresseLink {font-size: 45px; line-height: 45px; letter-spacing: 1.6px} 
#adresse .footerNav {width: 100%; display: flex; justify-content: center; gap 80px; margin-top: 40px}
#adresse .footerNav a {padding:0px; margin:0px; width:auto; text-align:center; display:block; position:relative; z-index:99; margin-right:23px;color: var(--white); text-transform: uppercase} 
#adresse a {color: var(--white); transition: 0.3s ease}
#adresse a:hover {color: var(--text)}
.adresseUnten {margin-top: 50px}

.subnav {width:125px; float:left; position:relative}
.subnav a:hover, .subnav a.aktiv {color:#990066}
.subnavContent {border-right:1px solid #edecec; margin-right:15px; float:left}
.subnavContent .subnav {border-top:1px solid #edecec; border-bottom:1px solid #edecec; margin-left:-30px; padding-left:25px; height:35px; padding-top:5px; clear:both}
.subnavContent .subnav:first-child {border-bottom:0px}
.contentAfterSubnav {float:none; position:relative; margin-left:140px; width:auto}
#content .subnavOuter {float:left; width:auto; position:relative}
#content .subnavOuter .subnavContent .subnav a.subnavlink   {color:#7f7e7e; font-size:13px}
#content .subnavOuter .subnavContent .subnav a.subnavlink:hover {color:#990066; font-size:13px}
#content .subnavOuter .subnavContent .subnav.aktiv a.subnavlink {color:#990066; font-size:13px}

.content .text {margin-top: 100px}


#claim {position:absolute; z-index:99999999999999999; top:305px; left:35px; color:#FFF; font-size:2.25em}


#created {position:absolute; top:50px; left:25px; z-index:1000000; background-color:#FFF; width:900px; border:1px solid #999; border-radius:5px; display:none; padding:30px; box-shadow:  1px 1px 5px 5px #eee; }
#created a {text-decoration:underline;}
#createdcloser {position:absolute; top:-15px; left:980px; background-image:url(/UserFiles/structure/close.png); width:30px; height:30px; text-indent:-10000px; cursor:pointer}


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

a.higslide img {border:0px}

.platzhalter {color:#FFF}



/* Formularfelder ---------------- */

div.zeile {display: flex}
div.zeile div.left {width: 30%}
div.zeile div.rechts {width: 70%}

.formtabelle {margin-top:20px}
input,button, select{font-family: 'Raleway','Helvetica'; font-size:16px; background:transparent; border:none; border-bottom:1px solid rgba(48,48,48,0.4); margin-bottom:30px; height:40px; color:#000; padding-left:10px; width:100%;  outline: none;transistion: 0.3s ease-in-out}
input:focus {border-bottom:1px solid rgba(48,48,48,1)}
label {margin-bottom: 5px}
.anabmelden {float:left; margin-right:10px; border:0px }
#newslettersubmit {width:162px; text-align:center}
#password {width:123px; margin-top:5px; color:#87888a; padding-left:3px}
#commentsUser {font-family: 'Raleway','Helvetica'; font-size:16px; overflow:auto;  font:100%;  padding-left:10px; padding-top:10px; white-space: pre-wrap; width:100%; height:170px; border:1px solid rgba(48,48,48,0.4); border-radius:2px; background:transparent; resize: none;  outline: none;}
#commentsUser:focus {border: 1px solid rgba(48,48,48,1)}
#Senden {cursor:pointer; width:100%; color:#000000; position:relative; z-index:100000; height:40px; margin-top:30px; margin-bottom:20px; font-size:16px; font-weight:bold; padding-left: 0px; border: 1px solid rgba(48,48,48,0.4); display: flex; justify-content: center; align-items: center}
#Senden .arrow {margin-left: 10px; transition: 0.3s ease-in-out}
#Senden:hover .arrow {margin-left: 25px}
#formDanke {color:#000000; display:none}

#formularOuter {display: flex; margin-top:100px}
#formularOuter #eform {width: 50%;display: flex;flex-direction: column;}
#formularOuter .kontaktDaten {padding-left: 50px; padding-top: 20px; color: #000000; margin-bottom: 50px}

.socialLink {position: fixed; bottom: 0; right: 0; background-color: #000000; color: #fff; height: 50px; width: 150px; overflow: hidden; z-index:99} 
.socialLink .sl {display: flex; height: 100%; align-items: center; padding:8px; transition: 0.6s ease-in-out; justify-content: space-evenly}
.socialLink a {color:#fff}
.socialLink .sl img {height: 100%}  
.socialLink .facebook.sl {background-color: #4267B2}
.socialLink .instagram.sl {background:linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);}


img {border:0px;}
.highslide > img{border:10px solid #F00;}
.image {border:0px}
.emailcodierung{color:#000}
.emailcodierung  > a{}
a {outline:none; text-decoration:none; color:var(--text); transition: 0.3s ease color}
a:hover {color:var(--accent)}
.clearer {clear:both}



/*mobile Nav*/
#mobileOpenerOuter {display:none; width:35px; right:0px; margin-top:0px; z-index:101;}
#navOuterMobile {display:block; width:100%; height:50px; background-color:#FFF}
#navMobileOpener {display:block;  padding-right:0px; cursor:pointer; width:35px;}
#navMobileOpener .balken {width:35px; height:2px; background-color:var(--accent); margin-top:5px}
#navMobileCloser {display:none; padding-right:0px; cursor:pointer; width:35px}
#navMobileCloser .balken {width:35px; height:2px; background-color:var(--accent); margin-top:5px}
#navMobileMenu {position:absolute; width:100%; height: 100%; left:0px;  height:100%; min-height:100px; z-index:100000;color:#666; padding:0px; display: block; transform: translateX(100%); transition: .5s ease-in-out} 
.menuMobile {padding-bottom:10px; padding-top: 10px;height: 100%; display: flex; justify-content: center; align-items: center}
#navMobileMenu #mobileCloser {position: absolute; cursor: pointer; top: 20px; right: 20px; height: 40px; width: 40px; background-image: url("/UserFiles/structure/mobile_closer_white.png"); background-size: cover}

.fancybox-opened .fancybox-skin { background-color:#ffffff !important}

.formtabelle td {padding-bottom:20px}