/* dsc - 01.09.20221 */
@import url("/css/styles_fonts.css");

:root {
	--black: #000000;
	--white: #ffffff;
	--dark-green: #00594b;
	--light-green: #639991;
	--yellow: #ffbd56;
	--orange:#ffbd56;
	--grey:#f4f4f4; 
	--light-grey:#a3a3a3; 
	--blue: #3898ec;
	--text: #161615;
	--text-hell: #333;
	--button-bg: #9ca6bf;	
	--content-breite:1140px;
	--nav-breite:1655px;
	
	--font-fliesstext:  'Avenir','Open Sans', sans-serif;
	--font-navtext:  'Avenir','Open Sans', sans-serif;
	--font-headline: 'Avenir','Open Sans', sans-serif;
    
}



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


html {background-color:#fff; overflow-x: hidden;}  
/*body {font-family: var(--font-fliesstext); height:100%; width:100%; color:var(--text);  font-size: 16px; line-height: 19px;  background-color:#fff;  margin:0px; padding:0px; cursor: none}*/
body {font-family: var(--font-fliesstext); height:100%; width:100%; color:var(--text);  font-size: 16px; line-height: 19px;  background-color:#fff;  margin:0px; padding:0px;}
body.menuOpen {height: 100vh; overflow: hidden} 
body p, body div {}

.cursor-dot {margin-left: 14px; margin-top: 7px} 


/* 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:20px !important; display: block; width: 100%; height: 0px}
.pt_2{padding-top:50px !important; display: block; width: 100%; height: 0px}
.pt_3{padding-top:70px !important; display: block; width: 100%; height: 0px}
.pt_4{padding-top:120px !important; display: block; width: 100%; height: 0px}
.pt_5{padding-top:160px !important; display: block; width: 100%; height: 0px}
.pt_6{padding-top:240px !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:20px !important; display: block; width: 100%; height: 0px}
.pb_2{padding-bottom:50px !important; display: block; width: 100%; height: 0px}
.pb_3{padding-bottom:70px !important; display: block; width: 100%; height: 0px}
.pb_4{padding-bottom:120px !important; display: block; width: 100%; height: 0px}
.pb_5{padding-bottom:160px !important; display: block; width: 100%; height: 0px}
.pb_6{padding-bottom:240px !important; display: block; width: 100%; height: 0px}
.pb_7{padding-bottom:80px !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)} */

.imgfloatleft {float: left; margin-right: 30px; margin-bottom: 20px}
.imgfloatright {float: right; margin-left: 30px; margin-bottom: 20px}
.buttongreen {display: inline;   width: auto;     padding: 10px;    color: white !important;    border-radius: 5px; outline: none !important; background: linear-gradient(to right, var(--dark-blue) 50%, var(--green) 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: all .5s ease-out; line-height: 50px}
.buttonblue {display: inline;   width: auto;     padding: 10px;    color: white !important;    border-radius: 5px; outline: none !important; background: linear-gradient(to right, var(--green) 50%, var(--dark-blue) 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: all .5s ease-out;  line-height: 50px}
.content a.buttongreen:hover {
	border-bottom:0px solid var(--green);
	background-color:var(--green);
	border-color:var(--green);
	color: var(--white);
	background-position: left bottom;
}
.content a.buttongreen,
.content a.buttonblue{
	white-space:nowrap;
}
.content a.buttonblue:hover {
	border-bottom:0px solid var(--dark-blue);
	background-color:var(--dark-blue);
	border-color:var(--dark-blue);
	color: var(--white);
	background-position: left bottom;

}

/* diverse Divs  ---------------------- */
h1 {font-family: var(--font-headline); font-weight: 900; font-size:80px; text-align:left; margin-bottom:30px; max-width: 100%; line-height: 86px;}
.teamKarteBig h1, h2 {font-family: aktiv-grotesk-extended,sans-serif; color: var(--black); font-size:18px; line-height: 22px; font-weight: 500; letter-spacing: 1px;}
.teamKarteBig h1 {margin-bottom: 0px}
h3 {font-family: aktiv-grotesk-extended,sans-serif; font-size: 18px; line-height: 22px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase;} 
h4 {font-family: aktiv-grotesk-extended,sans-serif; font-size: 18px; line-height: 22px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase;;} 
#adresse h1, #adresse h2, #adresse h3 {color: var(--white)}
.headline-wrap {margin-bottom: 20px; display: flex; align-items: center}
h1.hc_0, h2.hc_0, h3.hc_0 {color: var(--text)}
h1.hc_1, h2.hc_1, h3.hc_1 {color: var(--dark-green)}
h1.hc_2, h2.hc_2, h3.hc_2 {color: var(--white)}
h1.hc_3, h2.hc_3, h3.hc_3 {color: var(--black)}

h1.smallh1 {font-size: 50px; line-height: 60px; margin-bottom: 0}
h1.smallerh1 {font-family: aktiv-grotesk-extended,sans-serif; color: #161615; font-size: 18px; line-height: 22px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 0}

h2.bigHeadline {font-size: 66px; line-height: 74px; text-transform: none; font-weight: 900; font-family: var(--font-headline)}

.c0 {color: var(--text)}
.c1 {color: var(--dark-green)}
.c2 {color: var(--white)}

.black h1 {color: #fff}
.black h2 {color: #fff}
.split h2 {font-size: 50px; line-height: 65px; margin-top: 50px}

p, ul {font-family: Avenir, Verdana, sans-serif; font-size: 20px; line-height: 30px;}
.textpage p, .textpage ul {font-family: Avenir, Verdana, sans-serif; font-size: 18px; line-height: 26px;}

.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}
.white {background-color:var(--white); 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}
#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;}
#logolink {height: 100px; display: block; transform: scale(1); transition: all 700ms; position: relative; left: -15px} 
#logo {display:block; width:auto; height:100%;} 
#logoText {font-weight: bold; color: #fff; font-size: 12px; letter-spacing: 2px;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}
.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")}
.yellowDot {color: var(--yellow)}

.bg_1 {background-color: var(--grey)}
.bg_2 {background-color: var(--dark-green)} 


#baustelle {width: 100vw; height: 100vh;} 
#baustelle .baustelleHead {height: 20%; width: 100%; max-width: 1024px; margin: 0px auto; position: relative} 
#baustelle .baustelleHead .eroffnung {height: 160%; width: auto; position: absolute; left: 0px; top: 10px} 
#baustelle .baustelleHead .logo {height: 80%; width: auto; position: absolute; right: 0px; top: 20px} 
#baustelle .baustelleContent {width: 1024px; max-width: 100%; margin: 0px auto} 
#baustelle .baustelleContent a {color: #000; text-decoration: none}

/* Navigation ----------------------------- */
.logoLink {position: relative; display: inline-block; width: 115px; height: 48px; left: max(20px , calc(((100vw - var(--nav-breite)) / 2 ) + 11px )); top: 36px;}
.logoLink img {height: 100%; width: 100%}

.menuOpener {position: absolute; top: 76px; right: max(30px,calc((100vw - var(--nav-breite)) / 2) + 29px); height: 40px; width: 35px; display: flex; flex-direction: column; justify-content: space-around; align-items: flex-end;} 
.menuOpener .line {height: 7px; background: var(--light-green); width: 7px; border-radius: 20px; transition: width 0.3s ease-in-out}
.start .menuOpener .line {background: var(--dark-green);}
.menuOpener:hover .line {width: 35px}
.menuPoint {position: fixed; right: max(0px,calc((100vw - var(--nav-breite)) / 2) - 16px); width: 0px; height: 0px; border-radius: 100%; background-color: var(--dark-green); transition: 1s ease-in-out; z-index: 110}
.menuPoint.active {height: 500vh; width: 500vh; margin-right: -100vh; margin-top: -100vh}

.menuLayer {height: 0; width: 100vw; overflow: hidden; z-index: 115; position: fixed; margin: 0px auto; display: block; top:0}
.menuLayer .menuLayerInner {height: 100%; width: 100%; max-width: var(--nav-breite); margin: 0px auto; opacity: 0; }
body.menuOpen .menuLayer {height: 100vh;}
body.menuOpen .menuLayer .menuLayerInner {transition: 0.7s ease; transition-delay: 0.2s; opacity: 1;}
.menuLayer .menuTopBar {display: flex; justify-content: space-between; margin-top: 30px; margin-bottom: 70px}
.menuLayer .menuTopBar .search {width: 400px}

.menuLayer .menuCloser {height: 30px; width: 30px; position: relative}
.menuLayer .menuCloser .x-line {height: 28px; width: 2px; transform: rotate(45deg); background-color: var(--white); position: absolute; right: 13px; transition: background-color 0.3s ease}
.menuLayer .menuCloser .x-line:nth-of-type(2) {transform: rotate(-45deg)}
.menuLayer .menuCloser:hover .x-line { background-color: var(--orange); }


#navOuter {max-width:100%;  background-color: var(--dark-blue); color: var(--white); height: 80px; transition: 0.4s ease-in-out; font-weight: bold} 
#nav {clear:both; max-width:100%; width: var(--content-breite); margin: 0px auto; display: flex; z-index:3;left:0px; height:100%; position: relative; justify-content: space-between; align-items: center}
.menu{text-align:left; position:relative; padding-top:0px; background-repeat:repeat; display: block;}
.menu ul {margin:0px; padding:0px;display: flex; flex-direction: column; align-items: flex-start; margin-top: 30px} 
.menu ul li {padding:0px; margin:0px; list-style-type:none; width:auto; text-align:center; display:flex; position:relative; z-index:99; margin-right:80px;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; letter-spacing: 1px; font-size: 48px; line-height: 58px; display: block; width: 100%; float: left; border-bottom: 2px solid transparent; color: #f4f4f4; margin-top: 10px; margin-bottom: 4px; font-family: 'Avenir',Verdana,sans-serif; text-transform: uppercase; font-weight: 900; transition: 0.25s ease;}
.menu ul li a:hover {color: var(--orange)}

.teaserhomeOuter {display: flex; flex-wrap: nowrap; justify-content: center; position: relative; top:-30px}
.teaserHome {display: flex; flex-direction: column; justify-content: center; align-items: center; gap:10px; padding: 70px 20px 40px 20px; width: 33.3333%}
.teaserHome:nth-child(even) {background-color: var(--teaser-hell-bg)}
.teaserHome:nth-child(odd) {background-color: var(--teaser-dunkel-bg)}
.teaserHomeIcon img {height: 80px; width: auto}

/* 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(.greenButton, .formattedLink):hover, #content a:not(.greenButton, .formattedLink):hover {color: var(--orange);}
.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%}

.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}
.headerGallery span[class^="pos_"] {display: flex; position: absolute; font-family: var(--font-headline); font-size: 35px; font-weight: bold; line-height: 1.1em; color: var(--dark-blue);  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}
.headerGallery span.pos_mm div,
.headerGallery span.pos_om div,
.headerGallery span.pos_um div {padding-left: 200px}

.overlay {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #00594b; mix-blend-mode: multiply; z-index: 10; }

#scrollToTop {display: block; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: color .3s; transition: color .3s; color: #639991; text-align: center; position: fixed; right: 30px; bottom: -50px; z-index: 101; opacity: 0; transition: 0.4s ease-out}
#scrollToTop.visible {opacity: 1; bottom: 30px}
#scrollToTop:hover {color: var(--orange)}


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

.contentAfter .einleitung {width: 790px; max-width: 55vw} 

nav {position: fixed; width: 100vw; z-index: 21}
.topbar {background-color: var(--white); width: 100%; height: 36px;}
.start .topbar {background-color: var(--dark-green)}
.topbar .topbarInner {width: 1655px; max-width: 100%; height: 100%; display: flex; justify-content: flex-end; padding: 8px 50px;margin: 0px auto; font-family: aktiv-grotesk-extended,sans-serif; }
.topbar .topbarInner .iconSection {display: flex}
.topbar .topbarInner .iconSection a {display: inline-block; margin-right: 35px; color: var(--dark-green)}
.start .topbar .topbarInner .iconSection a {color: var(--white)}
.topbar .topbarInner .iconSection a:hover, .start .topbar .topbarInner .iconSection a:hover {color: var(--orange)}
.topbar .topbarInner .iconSection a img {height: 20px; position: relative; top: -2px}
.topbar .topbarInner .langChange {height: 100%; display: flex; align-items: center}
.topbar .topbarInner .langChange a {color: var(--dark-green)}
.start .topbar .topbarInner .langChange a {color: var(--white)}
.topbar .topbarInner .langChange a:hover, .start .topbar .topbarInner .langChange a:hover {color: var(--orange)}
.topbar .topbarInner .langChange a:first-of-type {margin-right: 10px}


.point-grid {will-change: opacity; opacity: 0.5; position: relative; z-index: 1;} 
.point-grid .grid {position: fixed; height: 100vh; width: 100vw;} 
.point-grid .grid .dot {position: absolute; width: 2px; height: 2px; background-color: #b3b3b3; border-radius: 100px; transform-origin: center center; transition: transform 0.6s ease;}

/*.juve-wrap {position: absolute; right: 90px; bottom: 125px; display: flex; gap: 17px; z-index: 10} */
.juve-wrap {
  position: relative;
  right: 0px;
  bottom: 400px;
  display: flex;
  gap: 17px;
  z-index: 1;
  margin: 0px auto;
  max-width: var(--nav-breite);
  text-align: right;
  justify-content: end;
padding: 0px 30px;
}

img.juve {height: 150px;}
img.juve-ag {height: 150px;}
.scroller {display: flex; flex-direction: column; justify-content: center; position: absolute; width: 100%; bottom: 50px; font-family: aktiv-grotesk-extended,sans-serif; color: var(--white) !important; font-size: 13px; line-height: 15px; font-weight: 500; padding-right: 40px}
.start .scroller {color: var(--dark-green) !important;}
.scroller .hoverText {margin-bottom: 5px; width: auto; text-align: center; opacity: 0; transition: opacity 0.4s ease-in-out}
.scroller img { height: 40px; transition: transform 0.4s ease-in-out}
.scroller:hover img {transform: translateY(10px)}
.scroller:hover .hoverText {opacity: 1; color: var(--white) !important}
.start .scroller:hover .hoverText {opacity: 1; color: var(--dark-green) !important}

.hauptbild, .hauptbild2, .display-heading {will-change: transform;}
.display-heading-mobile {z-index: 3; -webkit-align-self: flex-end; -ms-flex-item-align: end;  align-self: flex-end; font-family: aktiv-grotesk-extended, sans-serif; color: #a3a3a3; font-size: 46px; line-height: 60px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; display: none}
.formattedLink, a.formattedLink, #content a.formattedLink, .content.formattedLink {position: relative; color: var(--dark-green); font-family: aktiv-grotesk-extended,sans-serif; font-size: 13px; line-height: 15px; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; text-decoration: none; cursor: none; transition: padding-left 0.2s ease-in-out} 
.formattedLink:hover, a.formattedLink:hover, #content a.formattedLink:hover, .content.formattedLink:hover {color: var(--dark-green); padding-left: 13px}
.formattedLink::before {content: ''; position: absolute; display: inline-block; top:3px; left: 0; background-color: var(--dark-green); border-radius: 100%; height: 8px; width: 8px; opacity: 0; transition: opacity 0.2s ease-in-out}
.formattedLink:hover::before {opacity: 1}
.headline-wrap .formattedLink {margin-left: 10px}
.formattedLink.formattedLinkunderline {display: flex; align-items: center; height: 35px; border-bottom: 1px solid var(--dark-green); font-size: 18px; line-height: 22px; font-weight: 500; letter-spacing: 1px; margin-bottom: 25px; width: 100%; max-width: 400px}
.formattedLink.formattedLinkunderline::before {top: 13px}

.greenLink {color: var(--dark-green) !important; transition: 0.3s ease-in-out}
.greenLink:hover {color: var(--orange) !important;}

.greenButton {display: inline-block; background-color: var(--dark-green); color: var(--white); padding: 12px 16px; border: 1px solid var(--dark-green); font-family: aktiv-grotesk-extended,sans-serif; font-size: 14px; line-height: 20px; letter-spacing: 0.98px; margin-top: 20px; transition: 0.3s; text-transform: uppercase} 
.greenButton:hover {background-color: transparent; color: var(--dark-green)}  

section {position: relative; z-index: 20; background: var(--white)}

.layout_0 .contentInnen {width: var(--content-breite); margin: 0px auto; padding: 0 20px; position: relative}
.layout_0 .contentInnen.splitContent {display: grid; grid-template-columns: 1fr 1fr; grid-gap: 30px}
.layout_0 .contentInnen.splitContent p {margin-bottom: 30px; font-size: 18px; line-height: 26px}
.layout_0 .contentInnen .textContent {max-width: 790px}
.start .layout_0 .contentInnen .textContent {max-width: 100%}
.layout_0 .contentInnen .textContent .einleitung {margin-bottom: 30px}
.layout_0.bg_2 .contentInnen {color: var(--white)}
.layout_0 .contentInnen .display-heading {position: absolute; left: -120px; top: 300px}
.layout_0.bg_2 .contentInnen .display-heading {opacity: 0.2}

.layout_1 .contentInnen {width: var(--content-breite); padding: 0 20px; margin: 0px auto;} 
.layout_1 .contentInnen p {font-size: 20px; line-height: 30px; margin-bottom: 0} 
.layout_1 .contentInnen.splitContent {display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); grid-gap: 30px; height: 800px}
.layout_1 .contentInnen.splitContent .left {position: relative; display: flex; align-items: flex-start}
.layout_1 .contentInnen.splitContent .left .display-heading {align-self: flex-start; -webkit-align-self: flex-start; position: relative; bottom: 170px; right: 15px}
.layout_1 .contentInnen.splitContent .left .display-heading-mobile {align-self: flex-start; -webkit-align-self: flex-start;}
.layout_1 .contentInnen.splitContent .left .hauptbild {position: relative; left: -90px}
.layout_1 .contentInnen.splitContent .right {padding-top: 150px}
.layout_1 .contentInnen.splitContent .hauptbild .slickGallery {height: 675px; width: 450px}
.layout_1 .contentInnen.splitContent .hauptbild .slickGallery .slick-list, .layout_1 .contentInnen.splitContent .slickGallery .slick-list .slick-track {height: 100%}
.layout_1 .contentInnen.splitContent .hauptbild .slickGallery .slick-list .slick-slide {height: 100%; object-fit: contain}
.layout_1 .contentInnen.splitContent .hauptbild2 {position: absolute; bottom: 0; right: 0;z-index: 5} 
.layout_1 .contentInnen.splitContent .hauptbild2 .slickGallery {height: 320px; width: 480px}
.layout_1 .contentInnen.splitContent .hauptbild2 .slickGallery .slick-list, .layout_1 .contentInnen.splitContent .slickGallery .slick-list .slick-track {height: 100%}
.layout_1 .contentInnen.splitContent .hauptbild2 .slickGallery .slick-list .slick-slide {height: 100%; object-fit: contain} 


.layout_2 .contentInnen {width: var(--content-breite); padding: 0 20px; margin: 0px auto;}
.layout_2 .contentInnen p {font-size: 20px; line-height: 30px; margin-bottom: 0} 
.layout_2 .contentInnen.splitContent {display:grid; grid-template-columns: 1fr 1fr; grid-gap: 30px; height: 800px}
.layout_2 .contentInnen.splitContent .left {position: relative; order: 2; display: flex; justify-content: flex-end; padding-right: 15px}
.layout_2 .contentInnen.splitContent .right {padding-top: 150px; order: 1; display: flex}
.layout_2 .contentInnen.splitContent .right .display-heading {position: absolute; left: calc(((100vw - var(--content-breite)) / 2) - 120px);}
.layout_2 .contentInnen.splitContent .left .display-heading-mobile {position: absolute; left: 0px}
.layout_2 .contentInnen.splitContent .hauptbild .slickGallery {height: 675px; width: 450px}
.layout_2 .contentInnen.splitContent .hauptbild .slickGallery .slick-list, .layout_1 .contentInnen.splitContent .slickGallery .slick-list .slick-track {height: 100%}
.layout_2 .contentInnen.splitContent .hauptbild .slickGallery .slick-list .slick-slide {height: 100%; object-fit: contain}
.layout_2 .contentInnen.splitContent .hauptbild2 {position: absolute; bottom: 0; right: 110px}
.layout_2 .contentInnen.splitContent .hauptbild2 .slickGallery {height: 320px; width: 480px}
.layout_2 .contentInnen.splitContent .hauptbild2 .slickGallery .slick-list, .layout_1 .contentInnen.splitContent .slickGallery .slick-list .slick-track {height: 100%}
.layout_2 .contentInnen.splitContent .hauptbild2 .slickGallery .slick-list .slick-slide {height: 100%; object-fit: contain} 


.layout_3 .contentInnen {width: var(--content-breite); padding: 0 20px; margin: 0px auto;}
.layout_3 .contentInnen p {font-size: 20px; line-height: 30px; margin-bottom: 0} 
.layout_3 .contentInnen.splitContent {display:grid; grid-template-columns: 1fr 1fr; height: 500px; position: relative; left: 40px} 
.layout_3 .contentInnen.splitContent .left {position: relative;} 
.layout_3 .contentInnen.splitContent .right .display-heading {position: relative; left: 0; bottom: 100px}
.layout_3 .contentInnen.splitContent .left .display-heading-mobile {display: none}
.layout_3 .contentInnen.splitContent .right {padding-top: 150px; display: flex;} 
.layout_3 .contentInnen.splitContent .hauptbild .slickGallery {height: 547px; width: 827px; position: absolute; right: 0}
.layout_3 .contentInnen.splitContent .hauptbild .slickGallery .slick-list, .layout_1 .contentInnen.splitContent .slickGallery .slick-list .slick-track {height: 100%}
.layout_3 .contentInnen.splitContent .hauptbild .slickGallery .slick-list .slick-slide {height: 100%; object-fit: contain}
.layout_3 .contentInnen.splitContent .hauptbild2 {position: absolute; bottom: 0; right: 0;z-index: 5} 
.layout_3 .contentInnen.splitContent .hauptbild2 .slickGallery {height: 320px; width: 480px}
.layout_3 .contentInnen.splitContent .hauptbild2 .slickGallery .slick-list, .layout_1 .contentInnen.splitContent .slickGallery .slick-list .slick-track {height: 100%}
.layout_3 .contentInnen.splitContent .hauptbild2 .slickGallery .slick-list .slick-slide {height: 100%; object-fit: contain} 


.layout_4 .contentInnen {width: var(--nav-breite); padding: 0 20px; margin: 0px auto;}
.layout_4 .contentInnen p {font-size: 20px; line-height: 30px; margin-bottom: 0} 
.layout_4 .contentInnen.splitContent {display:flex; justify-content: flex-start;position: relative;}  
.layout_4 .contentInnen.splitContent .left {position: relative; z-index: 100} 
.layout_4 .contentInnen.splitContent .left .hauptbild {width: 450px; height: 675px}  
.layout_4 .contentInnen.splitContent .left .hauptbild img {height: 100%; width: 100%; object-fit: contain} 
.layout_4 .contentInnen.splitContent .left .display-heading {position: absolute; right: 24px; bottom: -80px}
.layout_4 .contentInnen.splitContent .left .display-heading-mobile {display: none}
.layout_4 .contentInnen.splitContent .right {display: flex; flex-direction: column} 
.layout_4 .contentInnen.splitContent .right .textblock {padding: 60px 0px 60px 60px; width: 846px; max-width: 100%} 
.layout_4 .contentInnen.splitContent .right .textblock.greyBG {width: 800px; max-width: 100%; background: var(--grey); position: relative; left: -36px; padding-left: 60px; padding-right: 60px; font-size: 18px; line-height: 26px; font-weight: 400} 
.layout_4 .contentInnen.splitContent .right .textblock .haupttext {margin-bottom: 25px} 
.layout_4 .contentInnen.splitContent .right .textblock h3 {margin-bottom: 40px} 

.layout_5 .contentInnen {width: var(--content-breite); margin: 0px auto; padding: 0 20px}
.layout_5 .contentInnen p {font-size: 20px; line-height: 30px; margin-bottom: 0} 
.layout_5 .contentInnen .textContent {max-width: 790px}
.layout_5.bg_2 .contentInnen {color: var(--white)}
.layout_5 .contentInnen .display-heading {position: absolute; right: calc(((100vw - var(--content-breite)) / 2) - 10px); bottom: -155px}
.layout_5.bg_2 .contentInnen .display-heading {opacity: 0.2}

.layout_6 .contentInnen {width: var(--content-breite); padding: 0 20px; margin: 0px auto;}
.layout_6 .contentInnen p {font-size: 20px; line-height: 30px; margin-bottom: 0} 
.layout_6 .contentInnen.splitContent {display:grid; grid-template-columns: 1fr 1fr; grid-gap: 30px; height: 800px}
.layout_6 .contentInnen.splitContent .left {position: relative; order: 2; display: flex; justify-content: flex-end; padding-right: 15px}
.layout_6 .contentInnen.splitContent .right {order: 1; display: flex}
.layout_6 .contentInnen.splitContent .left .display-heading {position: absolute; left: 50px; top:-60px; opacity: 0.2}
.layout_6 .contentInnen.splitContent .left .display-heading-mobile {position: absolute; left: 0px}
.layout_6 .contentInnen.splitContent .hauptbild  {position: relative; right: -115px;}
.layout_6 .contentInnen.splitContent .hauptbild img {height: 675px; width: 450px}
.layout_6 .contentInnen.splitContent .hauptbild2 {position: absolute; top: 500px; right: 110px}
.layout_6 .contentInnen.splitContent .hauptbild2 img {height: 320px; width: 480px}

.layout_7 .contentInnen {width: var(--content-breite); margin: 0px auto; padding: 0 20px; text-align: center}
.layout_7 .contentInnen p {font-size: 20px; line-height: 30px; margin-bottom: 0} 
.layout_7 .contentInnen .headline-wrap {justify-content: center} 
.layout_7 .contentInnen .textContent {max-width: 790px; display: flex; justify-content: center; margin: 0px auto}
.layout_7 .contentInnen .textContent .haupttext{text-align: center}
.layout_7.bg_2 .contentInnen {color: var(--white)}
.layout_7 .contentInnen .display-heading {position: absolute; left: calc(((100vw - var(--content-breite)) / 2) - 120px);}
.layout_7.bg_2 .contentInnen .display-heading {opacity: 0.2}
.layout_7.bg_1 .contentInnen .rankingsOuter .ranking img {filter: invert(1)}

.layout_expertise {padding:160px 0; background-color: var(--grey)}
.layout_expertise .contentInnen {width: var(--content-breite); margin: 0px auto; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 30px}
.layout_expertise .contentInnen h1 {font-size: 50px; line-height: 60px; margin-bottom: 0} 
.layout_expertise .contentInnen h4 {margin-bottom: 20px} 
.layout_expertise .contentInnen .display-heading {position: absolute; left: -120px; top: 190px}
.layout_expertise .contentInnen .subline {font-size: 32px; line-height: 36px; font-weight: 400; text-transform: none; margin-bottom: 60px}
.layout_expertise .contentInnen .text p {font-size: 18px; line-height: 26px; margin-bottom: 30px}
.layout_expertise .contentInnen .text ul li {font-size: 18px; line-height: 26px;}
.layout_expertise .contentInnen .right {}
.layout_expertise .contentInnen .right .mitarbeiter {display: grid; grid-template-columns:1fr; grid-gap: 80px}
.layout_expertise .contentInnen .right .zumTeam { display: inline-block; margin-right: 0; padding: 12px 16px; border: 1px solid var(--dark-green); background-color: var(--dark-green); font-family: aktiv-grotesk-extended,sans-serif; color: var(--grey); font-weight: 500; letter-spacing: .07em; text-transform: uppercase; cursor: none;}
.layout_expertise .contentInnen .right .zumTeam:hover {background-color: transparent; transition: color 0.3s, background-color 0.3s; color: var(--dark-green);}

.accord {max-width: 400px}
.accord .accordText {margin-top: 0; margin-bottom: 0; font-family: Avenir,Verdana,sans-serif; font-size: 20px; line-height: 30px; height: auto; max-height: 0; transition: 0.3s ease-in-out; overflow: hidden;}
.accord.active .accordText { max-height: 330px; padding: 20px 0}

.layout_news .contentInnen {width: var(--content-breite);  margin: 0px auto;  display: grid;  grid-template-columns: 1fr 1fr;  grid-gap: 30px; padding-top: 40px}
.newsOuter {display: grid; grid-template-columns: 1fr 1fr 1fr; gap:24px; margin-top: 24px}
.newsOuter.pagination {grid-template-columns: 1fr;}
.newsOuter.pagination .paginationPage .newsInner {display: grid; grid-template-columns: 1fr 1fr 1fr; gap:24px;}
.content:not(.s_news) .newsOuterBig {margin-top: 40px}
.newsOuterBig .news.newsBig {width: 100%; background-color: var(--white); display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 24px}
.newsOuter .news.newsSmall {width: 100%; background-color: var(--white); display: flex; flex-direction: column; overflow: hidden}
.newsOuter .news .block, .newsOuterBig .news .block {padding: 60px 20px 30px; display: flex; flex-direction: column; position: relative}
.newsOuter .news .block a, .newsOuterBig .news .block a {color: var(--black)}
.newsOuter .news .block a:hover, .newsOuterBig .news .block a:hover {color: var(--orange)}
.newsOuter .news .block .top, .newsOuterBig .news .block .top {display: flex; justify-content: space-between} 
.newsOuter .news.newsSmall img {height: 200px; width: 100%; object-fit: cover}
.newsOuter .news.newsSmall .block {padding: 20px; height: calc(100% - 200px)}
.newsOuter .news .block .bereich, .newsOuterBig .news .block .bereich, .content_part_news .cat, .content_part_news .cat a {color: var(--dark-green); font-family: aktiv-grotesk-extended,sans-serif; font-size: 12px; line-height: 15px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase;} 
.content_part_news .cat a {color: var(--light-green)}
.content_part_news .date {color: var(--light-grey); font-family: aktiv-grotesk-extended,sans-serif; font-size: 12px; line-height: 15px; font-weight: 500; letter-spacing: 1.2px;}

.newsOuter .news .block .bereich:hover, .newsOuterBig .news .block .bereich:hover {color: var(--orange);} 
.newsOuter .news .block h3.headline, .newsOuterBig .news .block h3.headline {font-family: Avenir,Verdana,sans-serif; font-weight: 900; letter-spacing: 0.3px; margin-bottom: 5px; text-transform: none}  
.newsOuterBig .news .block h3.headline {text-transform: uppercase}
.newsOuter .news .block .datum, .newsOuterBig .news .block .datum {font-family: aktiv-grotesk-extended,sans-serif; color: #a3a3a3; font-size: 12px; line-height: 15px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase;} 
.newsOuter .news .block .text, .newsOuterBig .news .block .text {margin-bottom: 20px; font-size: 18px; line-height: 26px; letter-spacing: .2px; word-wrap: break-word}  
.newsOuter .news .block .tags, .newsOuterBig .news .block .tags {margin-top: auto; display: flex; flex-direction: column; font-family: aktiv-grotesk-extended,sans-serif; font-size: 12px; line-height: 15px; font-weight: 500; text-transform: uppercase; position: relative; bottom: -10px} 
.newsOuter .news .block .tags a, .newsOuterBig .news .block .tags a {color: #a3a3a3;} 
.newsOuter .news .block .tags a:hover, .newsOuterBig .news .block .tags a:hover {color: var(--orange);}  


.rankingsOuter {display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 24px; height: 250px; margin-top: 70px}
.rankingsOuter .ranking {display: flex; align-items: center; justify-content: center; }
.rankingsOuter .ranking img {width: 250px; transition: transform 0.5s} 
.rankingsOuter .ranking:hover img {transform: scale(1.1);} 

.netzwerkeOuter {display: grid; grid-template-columns: 1fr 1fr; grid-gap: 30px; margin-top: 50px; width: 100%; max-width: 790px}
.netzwerkeOuter .netzwerk {display: flex; flex-direction: column; align-items: flex-start;} 
.netzwerkeOuter .netzwerk img {width: 300px; filter: invert(100%); opacity: 0.3; margin-bottom: 20px} 

.expertiseOuter, .karriereOuter {display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 24px;}
.karriereOuter:not(.karriereOuterSmall) {grid-template-columns: 1fr 1fr}
.expertiseOuter .expertise, .karriereOuter .karriere {height: 250px; display: flex; flex-direction: column; color: var(--white); background-color: var(--dark-green); padding: 20px;  }
.expertiseOuter .expertise .expertiseInner {height: 100%; padding: 20px;  display: flex; flex-direction: column; background-color: var(--dark-green); transition: border-radius 0.5s}
.expertiseOuter .expertise:hover .expertiseInner, .karriereOuter .karriere:hover {border-bottom-right-radius: 40px}
.expertiseOuter .expertise .name {height: 75px}
.karriereOuter .karriere .name {margin-bottom: 25px}
.karriereOuter .karriere, .karriereOuterSmall .karriere .name {margin-bottom: 5px}
.karriereOuter .karriere, .karriereOuterSmall .karriere .text {font-size: 18px; line-height: 26px}
.expertiseOuter .expertise .text {opacity: 0; transition: opacity 0.5s}
.expertiseOuter .expertise:hover .text {opacity: 1;}
.expertiseOuter .expertise .formattedLink, .karriereOuter .karriere .formattedLink {color: var(--white); margin-top: auto} 
.expertiseOuter .expertise .formattedLink:before, .karriereOuter .karriere .formattedLink:before {background-color: var(--white);} 
.expertiseOuter .expertise:hover .formattedLink:before, .karriereOuter .karriere:hover .formattedLink:before {opacity:1} 
.expertiseOuter .expertise:hover .formattedLink, .karriereOuter .karriere:hover .formattedLink {color: var(--white); padding-left: 13px} 
.expertiseOuter .expertise:hover .text, .karriereOuter .karriere:hover .text {color: var(--white);} 

.arrowMobileOnly {display: none} 


.teamOuter {display: grid; grid-template-columns: 1fr 1fr; grid-gap: 30px; grid-row-gap: 80px; opacity: 1; transition: 0.3s opacity; min-height: 400px}
.teamOuter.teamOuterInclude {min-height: 0; margin-top: 50px}
.teamKarte {background-color: var(--white); height: 280px; padding: 20px; position: relative; overflow-x: clip}
.teamKarte.hidden {display: none}
.teamKarte .info {}
.teamKarte .info .titel {font-family: aktiv-grotesk-extended,sans-serif; color: var(--dark-green); font-size: 18px; line-height: 22px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase;}
.teamKarte .info a {color: var(--black)}
.teamKarte .info a.name h2 {transition: color 0.3s; max-width: 340px}
.teamKarte .info a.name:hover h2 {color: var(--orange)}
.teamKarte .info .typ {font-family: aktiv-grotesk-extended,sans-serif; color: var(--light-grey); font-size: 15px; line-height: 22px; font-weight: 500; letter-spacing: .8px; text-transform: uppercase; max-width: 340px}
.teamKarte .info .email {display: block; margin-top: 40px;font-size: 18px; line-height: 26px; letter-spacing: 0.2px}
.teamKarte .info .telefon {display: block; font-size: 18px; line-height: 26px; letter-spacing: 0.2px}
.teamKarte .info .mehr {position: absolute; bottom: 20px; color: var(--dark-green)}
.teamKarte .info .mehr:hover {color: var(--dark-green)}
.teamKarte img.partnerFoto {height: 350px; position: absolute; right: -100px; bottom: 0;} 
.teamKarte img.partnerFoto.newImg {height: 350px; position: absolute; right: 0px; bottom: 0;} 


/*.teamKarteBig {background-color: var(--white); min-height: 630px; padding: 50px; position: relative; transform: translate3d(0,100px,0);opacity: 0; overflow-x: clip}*/
.teamKarteBig {background-color: var(--white); min-height: 630px; padding: 50px; position: relative;}
.teamKarteBig .titel {font-family: aktiv-grotesk-extended,sans-serif; color: var(--dark-green); font-size: 18px; line-height: 22px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase;}
.teamKarteBig .typ {font-family: aktiv-grotesk-extended,sans-serif; color: var(--light-grey); font-size: 16px; line-height: 22px; font-weight: 500; letter-spacing: .8px; text-transform: uppercase;}
.teamKarteBig .infoBlock {margin-top: 40px; display: grid; grid-template-columns: 0.5fr 0.75fr 1fr; grid-gap: 16px;}
.teamKarteBig .info {display: flex; flex-direction: column}
.teamKarteBig .info .subline {margin-bottom: 10px; font-family: aktiv-grotesk-extended,sans-serif; font-size: 16px; line-height: 22px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase}
.teamKarteBig .info a {font-size: 18px; line-height: 26px; color: var(--black); transition: 0.3s color; }
.teamKarteBig .infoRechts .info a {color: var(--dark-green); }
.teamKarteBig .info a:hover {color: var(--orange); }
.teamKarteBig .info .email {display: block; font-size: 18px; line-height: 26px; letter-spacing: 0.2px}
.teamKarteBig .info .telefon {display: block; font-size: 18px; line-height: 26px; letter-spacing: 0.2px}
.teamKarteBig .info .sprachen {display: block; font-size: 18px; line-height: 26px; letter-spacing: 0.2px}
.teamKarteBig .info .vcard {margin-top: 20px}
.teamKarteBig .info .vcard img {width: 20px; margin-right: 8px}
.teamKarteBig .info .mehr {position: absolute; bottom: 20px}
.teamKarteBig img.partnerFoto {height: 780px; position: absolute; right: -230px; bottom: 0;}
.teamKarteBig img.partnerFoto.newImg {right: 0px;} 

@keyframes filterAnim {
  from { z-index: -1; transform: translateY(20px); opacity: 0 }
  to { z-index: 101; transform: translateY(0); opacity: 1; }
}

.expertiseFilterOuter {position: relative; width: 50%; margin-right: 20px;}
.expertiseFilterOpener {display: flex; position: relative; border-bottom: 1px solid var(--dark-green); height: 40px; align-items: center; padding: 8px 0; font-size: 18px; text-transform: uppercase; color: var(--dark-green);}
.expertiseFilterOpener::after {content:""; display: inline-block; position: absolute; background: url("/UserFiles/structure/svg/arrow.svg"); background-repeat: no-repeat; background-size: contain; height: 12px; width: 12px; right: 12px; top: 18px}
.expertiseFilter {background-color: var(--white); width: 100%; position: absolute; padding: 20px; z-index: 102; top: 50px;  z-index: -1; transform: translateY(20px); opacity: 0;}
.expertiseFilter.active {animation: filterAnim 0.2s linear both }
.expertiseFilter .filterItem {padding-left: 25px; margin-bottom: 10px; position: relative}
.expertiseFilter .filterItem::before {content: ''; position: absolute; display: block; height: 12px; width: 12px; border: 1px solid #ccc; left:0; top: 2px}
.expertiseFilter .filterItem.active::before {background-color: var(--blue); border: 1px solid var(--blue); background-image: url("/UserFiles/structure/svg/custom-checkbox-checkmark.svg"); background-position: 50% 50%; background-repeat: no-repeat; background-size: cover}

.filterSection {width: 100%; margin-bottom: 120px;}
.filterSection .typFilter {display: flex; }
.filterSection .typFilter .filterButton {margin-right: 13px; display: flex; text-transform: uppercase; justify-content: center; align-items: center; -webkit-transition: .2s; transition: 0.2s; font-family: aktiv-grotesk-extended,sans-serif; color: var(--dark-green); font-size: 13px; font-weight: 700; cursor: none; }
.filterSection .typFilter .filterButton:hover, .filterSection .typFilter .filterButton.active {color:var(--orange) }

.resetFilter {margin-bottom: 0; font-family: aktiv-grotesk-extended,sans-serif; font-size: 13px; line-height: 20px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; color: var(--light-grey); transition: 0.3s color}
.resetFilter:hover {color: var(--orange)}

.pagination { transition: 0.3s opacity}
.pagination .paginationPage { display: none;}
.pagination .paginationPage.active { display: block;}
.pagination .paginationPage .pubLine { display: flex; padding-bottom: 25px; padding-top: 23px; border-bottom: 1px solid var(--dark-green); font-size: 20px; line-height: 28px; font-weight: 400;}
.pagination .paginationPage .pubLine .year { width: 200px; flex-shrink: 0}
.paginationNav {display: flex; justify-content: space-between; margin-top: 20px }
.paginationNav .pageCounter {width: auto;  margin-top: 0; color: var(--dark-green); font-family: aktiv-grotesk-extended,sans-serif; font-weight: 700; display: flex; align-items: center; gap: 5px}
.paginationNav .buttonSection .greenButton {margin-top: 0; text-transform: uppercase}
.paginationNav .buttonSection .greenButton.hide {display: none} 


.publikationen {overflow: hidden; transition: 1.0s max-height;}
.publikationen .pubLine { display: flex; padding-bottom: 25px; padding-top: 23px; border-bottom: 1px solid var(--dark-green); font-size: 20px; line-height: 28px; font-weight: 400;}
.publikationen .pubLine .year { width: 200px; flex-shrink: 0}
.mehrPublikationen.hide, .wenigerPublikationen.hide {display: none} 

.hideDiv {max-height: 364px; overflow: hidden; position: relative; transition: 1.0s max-height}
.hideGradient { position: absolute; left: 0; top: auto; right: 0; bottom: 0; height: 35px; background-image: -webkit-gradient(linear,left bottom,left top,from(#f4f4f4),to(hsla(0,0%,100%,0))); background-image: linear-gradient(0deg,#f4f4f4,hsla(0,0%,100%,0));}
.mehrAnzeigen {}
.mehrAnzeigen.hide {display:none} 
.wenigerAnzeigen {}
.wenigerAnzeigen.hide {display: none}

.zitateOuter {width: 850px; max-width: 100%; margin: 0px auto} 
.zitatWrapper {display: flex; padding: 15px 25px}
.zitatWrapperInner {position: relative; display: flex; justify-content: center}
.zitatWrapper .zitat {font-size: 26px; line-height: 30px; text-align: center;} 
.zitatWrapper .zitat .text {max-width: 800px;} 
.zitatWrapper .zitat .medium {max-width: 600px; margin-top: 20px; margin-right: auto; margin-left: auto; font-family: aktiv-grotesk-extended,sans-serif; color: var(--dark-green); font-size: 18px; line-height: 26px; font-weight: 700; text-align: center; letter-spacing: .5px; text-transform: uppercase;} 
.zitatWrapper img.leftQuote {position: relative; left: -15px; bottom: -15px;}
.zitatWrapper img.rightQuote {position: relative; top: -40px; right: -15px;}
.slick-dots {bottom:-60px}
.slick-dots li {margin-left: 1px; margin-right: 1px}
.slick-dots li button {cursor: none}
.slick-dots li button:before {content: ""; background-color: rgba(0, 89, 75, .4); width: 15px; height: 15px; border-radius: 15px}
.slick-dots li.slick-active button:before {content: ""; background-color: var(--dark-green); width: 15px; height: 15px; border-radius: 15px}


.content_part_karriere .topline {margin-bottom: 20px; margin-top: 0; padding-bottom: 0; font-family: Avenir,Verdana,sans-serif; font-size: 18px; line-height: 22px; font-weight: 900; letter-spacing: 0; text-transform: uppercase; transition: none}
.content_part_karriere .subline {font-size: 32px; line-height: 36px; font-weight: 400; text-transform: none;}
.content_part_karriere .date {margin-bottom: 0; font-family: aktiv-grotesk-extended,sans-serif; color: #a3a3a3; font-size: 12px; line-height: 15px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase;}
.content_part_karriere .textContent h4 {margin-bottom: 20px;}
.content_part_karriere .textContent p {margin-bottom: 30px; font-size: 18px; line-height: 26px;}
.content_part_karriere .textContent ul{margin-bottom: 25px; font-size: 18px; line-height: 26px;}
.content_part_karriere .textContent ul li {margin-bottom: 5px; font-size: 18px; line-height: 26px;}

.contentsection#projekte, .contentsection#team {min-height: 0px; padding-bottom: 0px}
.imageGrid {display: flex; flex-wrap: wrap; margin: 0px auto; max-width: 2560px}
.imageGrid img {width: calc(100% /3); height: auto; border: 1px solid black; align-self: flex-start}

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

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


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


/* Faqs */
#faqs  {display: flex; flex-wrap: nowrap; justify-content: flex-start;align-items: flex-start; margin-bottom: 20px; background-color: var(--white); width: var(--content-breite); position: relative}
#faqs .faqheadlines {width: 300px;  cursor: pointer}
#faqs .faqheadlines .faqheadline {padding: 10px}
#faqs .faqheadlines .faqheadline.active {background-color: var(--green); display: block; font-weight: bold; border-radius: 5px 0px 0px 5px}
/*#faqs .faqheadlines .faqheadline.active {background-color: rgba(var(--green-rgb),0.8); display: block; font-weight: bold; border-radius: 5px}*/
#faqs .faqtexte {width: calc(100% - 300px);}
#faqs .faqtexte .faqtext {padding: 10px 10px 5px 10px}
#faqs .faqtexte .faqtext.inactive{display: none;}
#faqs .faqtexte .faqtext.active  {display: block; background-color: var(--green); border-radius: 0px 5px 5px 0px}
/*#faqs .faqtexte .faqtext.active  {display: block; background-color: rgba(var(--green-rgb),0.8); border-radius: 5px}*/

footer {z-index: 20}

#adresse {width:100%;height:auto; padding-left:0px; text-align:left; position:relative; margin:0px auto; display: flex; align-items: flex-start; justify-content: center; color: var(--footertext);background-color: var(--dark-blue); padding-top: 90px; padding-bottom:40px; z-index:100}
#adresseInnen {width: var(--content-breite); max-width:100%; margin:0px auto; position:relative; text-align:left; font-size:18px; line-height: 24px; 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 > div {display: flex; flex-direction: column; padding: 0px 10px 0px 10px; font-size: 0.9em}
#adresse #adresseInnen .right {padding-left: 25px; justify-content: space-between}
#adresse #adresseInnen .right .text {font-size: 48px; font-weight: bold; line-height: 48px; text-align: right}
#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 {height: 55px; margin-left: 20px} 
#adresse #adresseInnen .right .socials a.linkedin {height: 50px; margin-left: 33px} 
#adresse .right .footerNav {width: 100%; display: flex; justify-content: space-between}
#adresse .normal {}
#adresse .footerNav a {padding:0px; margin:0px; list-style-type:none; width:auto; float:left; text-align:center; display:block; position:relative; z-index:99; margin-right:23px;color: #fff9f5}
#adresse a {color:var(--footertext);text-decoration: none}
#adresse .footerNav a:last-child {margin-right:0px;}
#adresse ul li {margin-left: 1px; list-style-type: none; margin-bottom: 1rem;   padding: 0px 0 1px 25px; background: url("/UserFiles/structure/svg/point-white.svg") no-repeat left 5px; background-size: 13px}
#newsletterAnmeldung {width: 160px; max-width: 100%}
#newsletterAnmeldung input {color: var(--white)}
#newsletterAnmeldung input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: var(--light-grey);
  opacity: 1; /* Firefox */
}

#newsletterAnmeldung input::-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: var(--light-grey);
}

#newsletterAnmeldung input::-ms-input-placeholder { /* Microsoft Edge */
  color: var(--light-grey);
}
#lastLine {background-color: var(--light-blue); width: 100%; padding-top: 35px; padding-bottom: 35px;}
#lastLine .inner {width: var(--content-breite);  max-width: 100%;  margin: 0px auto; color: var(--white); display: flex; justify-content: space-between}
#lastLine .inner ul {display: flex; justify-content: space-between; list-style-type: none;}
#lastLine .inner ul li {padding-left: 10px}
#lastLine .inner ul li.small {font-size: 0.8em; font-style: italic}
#lastLine a {color: var(--white) !important; text-decoration: none}
.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}
#claim {position:absolute; z-index:99999999999999999; top:305px; left:35px; color:var(--white); font-size:2.25em}


#created {position:absolute; top:50px; left:25px; z-index:1000000; background-color:var(--white); 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 {max-width:1020px; width:100%; text-align:right; margin-top:10px;  margin-left:0px; margin-bottom:10px}


.breadcrumps {position:absolute; top:-25px; width:1020px; text-align:right; background-color:var(--white)}

.nozoom {border:0px}
a.higslide img {border:0px}

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



/* Formularfelder ---------------- */
.formtabelle {margin-top:20px}
input:not([type='checkbox']) {font-family: aktiv-grotesk-extended,sans-serif; font-size:16px; font-weight: 500; letter-spacing: 1.2px; background:transparent; border:none; border-bottom:1px solid var(--white); margin-bottom:30px; height:40px; color:var(--white); width:100%;  outline: none;transition: 0.3s ease-in-out}
input::placeholder {color:var(--white);}
input:focus {border-bottom:1px solid var(--orange)} 

.mainSearch {max-width: 600px; margin-top: 60px} 
.mainSearch input {border-bottom:2px solid var(--dark-green); color: var(--dark-green)} 
.mainSearch input:focus {border-bottom:2px solid var(--orange);} 

.searchResults .result { width: 790px; max-width: 100%}
.searchResults .result a.title { font-family: aktiv-grotesk-extended,sans-serif; font-size: 18px; line-height: 22px; font-weight: 700; text-transform: uppercase; color: var(--dark-green); display: inline-block; margin-bottom: 10px}
.searchResults .result .text {margin-bottom: 30px; font-size: 18px; line-height: 26px;}


.kontaktOuter  {margin-top: 60px;}
.kontaktOuter .split  {display: grid; grid-template-columns: 1fr 1fr; grid-gap: 24px}
.kontaktOuter input:not([type='checkbox']), .kontaktOuter select, .kontaktOuter textarea {background: var(--white); border: none; ; width: 100%; padding: 12px; margin-bottom: 20px; font-family: "Avenir", Verdana, sans-serif; font-size: 16px; font-weight: 400; color: #333; letter-spacing: inherit; cursor: none}
label, input[type='checkbox'] {cursor: none}
.kontaktOuter input:last-of-type {margin-bottom: 0}
.kontaktOuter input::placeholder {color: #333}
.kontaktOuter textarea {height: 100%; margin-bottom: 0; resize: none}
.kontaktOuter textarea:focus {outline: 0}
.kontaktOuter select {appearance:none; -webkit-appearance: none; -moz-appearance: none;}
.kontaktOuter select:focus {outline: 0}
.kontaktOuter .selectWrap {position: relative}
.kontaktOuter .selectWrap::after {content:""; display: inline-block; position: absolute; background: url("/UserFiles/structure/svg/arrow.svg"); background-repeat: no-repeat; background-size: contain; height: 12px; width: 12px; right: 12px; top: 18px}


label {margin-bottom: 0px; font-weight: 300}
button.white {background-color: var(--white); border-radius: 5px; border: 1px solid var(--white); color: var(--black); text-transform: uppercase; font-family: var(--font-headline), Open Sans, sans-serif; font-weight: bold}
.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}
#datenbestimmungUser {margin-right: 10px}
#Senden {display: inline-block; background-color: var(--dark-green); color: var(--white); padding: 12px 16px; border: 1px solid var(--dark-green); font-family: aktiv-grotesk-extended,sans-serif; font-size: 14px; line-height: 20px; letter-spacing: 0.98px; margin-top: 20px; transition: 0.3s; cursor: none} 
#Senden:hover {background-color: transparent; color: var(--dark-green)} 
#formDanke {color:#000000; display:none}

#formularOuter {display: flex; margin-top:20px}
#formularOuter #eform {width: 100%;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{}
.clearer {clear:both}


.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; position:absolute; width:30px; right:10px; margin-top:0px; z-index:101; height:100%; top: 25px}
#navOuterMobile {display:block; width:100%; height:50px; background-color:var(--white)}
#navMobileOpener {display:block;  padding-right:0px; cursor:pointer; width:30px;}
#navMobileOpener .balken {width:30px; height:5px; background-color:var(--green); margin-top:5px}
#navMobileCloser {display:none; padding-right:0px; cursor:pointer; width:30px}
#navMobileCloser .balken {width:30px; height:5px; background-color:#fff9f5; margin-top:5px}
#navMobileMenu {position:absolute; width:100%; height: 100%; left:0px;  min-height:100px; z-index:100000;color:#666; padding:0px; display: block; transform: translateX(100%); transition: .5s ease-in-out} 
#mobileCloser {position: absolute; cursor: pointer; top: 20px; right: 20px; height: 40px; width: 40px; background-image: url("/UserFiles/structure/svg/mobile_closer_white.svg"); background-size: cover}
.menuMobile {
  padding-bottom: 10px;
  padding-top: 10px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

img.highslide {cursor:pointer}

.magenta, div.magenta, strong.magenta, a.magenta, h1.magenta,  h2.magenta,  h3.magenta,  h4.magenta, td.magenta {color:#9d005c}
p.magenta, span.magenta {color:#9d005c}



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

.formtabelle td {padding-bottom:20px}

/* Styles für CMS Editor */

body#tinymce {padding: 20px !important; cursor: default}
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: 30px} 
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}