@charset "UTF-8";

@font-face {
	font-family: "Inter"; /* regular font */
	src: url("Schrift/Inter_18pt-Regular.ttf") format('truetype');
	font-weight: normal; font-style: normal; }
@font-face {
	font-family: "Inter"; /* bold font */
	src: url("Schrift/Inter_18pt-Bold.ttf") format('truetype');
	font-weight: 600; font-style: normal; }
  
@font-face {
	font-family: "Inter"; /* medium font */
	src: url("Schrift/Inter_18pt-Medium.ttf") format('truetype');
	font-weight: 500; font-style: normal; }

@font-face {
	font-family: "Inter"; /* medium font */
	src: url("Schrift/Inter_18pt-Italic.ttf") format('truetype');
	font-weight: normal; font-style: italic; }

@font-face {
	font-family: "Inter Light"; /* medium font */
	src: url("Schrift/Inter_18pt-Light.ttf") format('truetype');
	font-weight: normal; font-style: light; }
  

html, body {width: 100%; height: 100%;} 
body {background-color: #fff; font-family: 'Inter'; color: #000; max-width:100%; font-size:18px; line-height:1.2em; font-weight: 400; padding: 0; margin: 0 auto; /* Safari */ /*-moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;*/}
img {max-width: 100%; height: auto;}
a {color:#33a23d;}
a:hover {color:#33a23d; text-decoration:none;}
a:active {color:#33a23d; text-decoration:none;}
li {list-style-type:none;}
header {
    position: fixed;
    width: 100%;
    z-index: 23476438;
    background-color: #fff;
}
main {
    padding-top: 178px;
    margin-top:0px;
}
.ueberschriftH1 h1 {font-size:3em; line-height:1.1em; font-weight:normal; text-align:left; border-bottom:1px solid #000; text-transform:uppercase; margin-top:60px; margin-bottom:20px; padding-bottom:10px;}
.headerNewsDetail h1 {
    line-height: 0.875em;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 2em;
    margin: 40px 0px;
}
.ueberschrift h1 {
    line-height: 0.875em;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 2em;
    margin: 40px 0px;
}
.untergruppe-titel {
    line-height: 0.875em;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 2em;
    margin: 40px 0px;
}
.produktgruppe h1 {
    margin-left: 80px;
    padding-left: 20px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    line-height: 0.875em;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 2em;
}
.projektInfoDiv h1 {
    line-height: 1.1em;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 2em;
    margin: 40px 0px;
}
.sideMiddle h1 {
    line-height: 0.875em;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 2em;
    margin: 40px 0px;
}
.mapsDiv h1 {
    line-height: 0.875em;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 2em;
    margin: 40px 0px;
}
.titleBox h1 {
    font-size:3.2em; line-height:1.1em; font-weight:bold; color:#000;
}
.textTitle h1 {font-size:3.2em; font-family: 'Inter Light';}
.stellenangebote h1 {
    line-height: 0.875em;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 2em;
    margin: 40px 0px;
}
#text462 h1 {margin-top:80px;}
#text462 .divMiddle {margin-top:20px; margin-bottom:40px;}
.produktInfoDiv h1 {
    line-height: 0.875em;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 2em;
    margin: 40px 0px;
    margin-bottom:10px;
}

@media (min-width: 1600px) {
	.container {
		max-width: 1700px;
	}
}

.hiddenProduktgruppe {display:none;}

/*### Navigation ###*/
.navigation {text-transform:uppercase; font-size:17px;}
.navContainer {position:relative;}
.navigation img {width:250px; padding-top:20px; padding-bottom:20px;}
.navigation a {color:#000;}
.mobilmenuPart {margin-right:20px;}
.navigation li {display:inline; margin-right:30px;}
.navigationDiv {position:inherit; cursor:pointer;}
.menuDiv {display:flex; height:100%; align-items:flex-end;}
.menuDiv li {flex-direction: column; justify-content: end; display: flex; padding-bottom:5px;}
.mmp {margin-bottom:20px;}
.mmpWithout {margin-bottom:20px;}
.overNav a {color:#fff; margin-right:60px;}
.overNav a:hover {color:#fff;}
.overNav {background:linear-gradient(to right,#33a23d 0%,#33a23d 40%,#80c52f 60%,#80c52f 100%); padding-top:8px; padding-bottom:8px; font-size:0.9em; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);}
.overNavDiv {text-align:right; width:100%;}
.sprachmenu {display:inline-block;}
.spracheMob {display:none;}
.sprachmenu img {width:23px;}
.sprachmenu a {margin-right:20px;}
.aktlanguage {font-weight:bold;}
.searchForm {display:inline-block; margin-right:60px;}
.searchForm button {background-color:transparent; border:none; color:#fff; font-size:1.2em;}
.searchForm input {border:none; padding:2px 10px;}
.navigationDiv .mobilmenulist {
    display: none;
    overflow-y: auto;
    max-height: calc(100vh - 200px);
    z-index:600;
	text-align:left;
}
.mobilmenulist {
    background-color: #fff;
    position: absolute;
    left: 0%;
    width:100%;
    color:#000;
}
.underMenu {
	background: linear-gradient(to bottom right, #33a23d, #155427);
	box-shadow: 0 0 2px 0 rgb(51 51 51 / 50%), 0 7px 15px 0 rgb(51 51 51 / 50%);
}
.tx-indexedsearch-searchbox {display:none;}
.underMenu {padding: 80px 100px;}
.underMenu a {color:#fff;}
.ebene1 {color:#fff;}
.linkDiv {padding:5px 2px; border-right:2px solid #80c52f;}
.linkDiv i {margin-left:10px;}
.linkDiv:hover {background-color:#80c52f;}
.ebene3Div {position:absolute; right:0; top:0; margin-top:80px;}
.menuPos {position:absolute; top:0;}
.social img {color:#33a23d; width:22px; margin-left:5px; padding:0px; opacity:0.4; cursor:default;}
img.linkedInIcon {color:#33a23d; opacity:1; cursor:pointer;}
.social {margin-bottom:20px; position:absolute; bottom:0; right:0; padding-right:15px;}
.service {font-size: 1.6em; display:none;}
.service a {color:#fff;}
.service i {color:#fff; margin-right:5px;}
.downArrow {display:none; color:#fff;}
.submenu-arrow {
	display: none;
	text-align: center;
	color: #fff;
	transition: transform 0.3s ease;
	position:relative;
	width:100%;
}
.mmp.aktivmmp .submenu-arrow {display: block;}
.mmp.aktivmmp .submenu-arrow i {
	transform: rotate(180deg);
	position:absolute;
	font-size:5em;
	z-index:3000;
	width:100%;
	left:0%;
	margin-top:-12px;
}
.icon-default {transition: opacity .3s, transform .3s; z-index: 13100;}
.icon-hover {transition: opacity .3s, transform .3s; transform: rotate(-180deg) scale(.5); opacity: 0; z-index: 13010;}
.menubutton {display:none;}
.mobilMenu {display:none;}

/*### Sticky Banner ###*/
.stickyBanner img {width:250px;}
.stickyBanner {position:fixed; right:0; z-index:23451; top:20%;}


/*### Main Kopfbild ###*/
.kopfbild {position:relative;}
.desktopPic {display:block;}
.mobilePic {display:none;}
.introImgText {position:absolute; height:100%; top:0; left:0; width:100%; flex-direction:column; justify-content:center; display:flex; color:#fff; font-size:2.5em; line-height:1em; text-transform:uppercase; padding-left:25px;}


/*### Main ###*/
.gradient-box.greentohell {
	background-image: linear-gradient(to right, #33a23d, #80c52f);
	background-repeat: no-repeat;
	color:#fff;
}
.gradient-box.greentodark {
	background-image: linear-gradient(to right, #33a23d, #155427);
	background-repeat: no-repeat;
	color:#fff;
}
.gradient-box.grau {
	background-image: linear-gradient(to right, #6f6f6f, #9d9d9d);
	background-repeat: no-repeat;
	color:#fff;
}
.col-5ths {
	flex: 0 0 20%;
	max-width: 20%;
  }
.gradient-box {background-size: 600% 100%; height:100%;}
.bigBox {padding:40px;}
.box-1 { background-position: 20% 0%; }
.box-2 { background-position: 40% 0%; }
.box-3 { background-position: 50% 0%; }
.box-4 { background-position: 60% 0%; }
.box-5 { background-position: 80% 0%; }
.box-6 { background-position: 100% 0%; }
.kachelklein {margin-bottom:20px;}
.kachel {margin-bottom:20px;}
.gradient-box {
	flex-direction: column;
    justify-content: center;
    display: flex;
}
.kachelBox {margin-top:40px; margin-bottom:40px; text-transform:uppercase;}
.kachelBoldText {font-size:2.5em; color:#fff; font-weight:bold; line-height:1em;}
.kachelBoldText p {margin-bottom:0px;}
.kachelNormalText {font-size:2.5em; color:#fff; line-height:1em; font-family:'Inter Light';}
.kachelNormalText p {margin-bottom:0px;}
.imgHover {text-align:center; display:none;}
.imgFront {text-align:center;}
/*.blendModeOn {mix-blend-mode:multiply;}*/
.boxText {
	font-size:0.8em;
	text-transform:uppercase;
	line-height:1em;
}
.kachelklein img {width:150px; text-align:center;}
.kachelklein p {text-align:center;}
.kachelklein .gradient-box {cursor:pointer;  border: 1px solid transparent;}
.show {display:block;}
.noShow {display:none;}
.downloadBox {padding:20px;}
.downloadBox img {width:100%;}
.downloadBox .boxText {
	font-size:1.4em;
	flex-direction:column;
    justify-content:center;
    display:flex;
	height:100%;
}
.downloadBox .boxText p {text-align:left;}
.downloadText {font-size:0.7em; line-height:1.1em; position:absolute; bottom:0; text-align:left;}
.downloadText p {text-align:left; margin-bottom:0px;}
h1.titleDiv {font-size:3.2em; line-height:1.1em; font-weight:normal;}
.titleDiv {display:inline;}
.titleBox {text-align:center; text-transform:uppercase; padding-bottom:40px; padding-top:40px; line-height:1.4em;}
.titleBox h2 {line-height:1.1em;}
.titleBox h3 {color:#33a23d; margin-top:0px;}
.titleBlack {color:#000; font-family:'Inter Light'}
.titleLeftDiv {text-align:left;}
.titleCenterDiv {text-align:center;}
.titleBox .titleKBlack {color:#000; font-family:'Inter Light'; font-weight:normal; margin-bottom:0px;}
.titleBlackBold {font-weight:bold; color:#000;}
.titleGreen {color:#33a23d; font-weight:bold; font-family:'Inter';}
.breadcrumbs {font-size:0.7em; text-transform:uppercase; font-weight:bold; color:#9d9d9d; margin-top:40px; margin-bottom:20px;}
.breadcrumbs a {color:#80c52f;}
.breadcrumbs i {color:#80c52f; margin:0px 5px;}
.produktIDDiv {font-size:0.7em; font-weight:bold; color:#9d9d9d; margin-bottom:40px;}
.filterButton {font-weight:bold;}
.filterBtn {margin-top:20px; width:100%; background-color:#ececec; color:#000; padding:10px; border:none; text-align:left; font-weight:bold; text-transform:uppercase; font-size:0.8em;}
.activeBtn {background-color:#80c52f; color:#fff;}
.filterBtn:focus {outline:none;}
.producteCol {margin-top:40px;}
.mitarbeiterDiv {position:relative; cursor:pointer;}
.mitarbeiterDBDiv h4 {margin-top:0px; margin-bottom:20px;}
.vertriebDEDiv {position:relative;}
.vertriebDELayer {position:absolute; bottom:0; width:100%; padding:5px; text-align:center; background-color:rgba(236, 236, 236, 0.9);}
.layerDiv {position:absolute; background-color:rgba(236, 236, 236, 0.9); bottom:0; width:100%; padding:5px; text-align:center;}
.headOffLayer {height:98px;}
.lineVertrieb {border-bottom: 1px solid #000; margin-bottom:20px; width:100%; margin-top:20px;}
.bundesland {/*pointer-events: bounding-box;*/ cursor: pointer;}
#mitarbeiterOutput {float:right;}
.vertriebDE {display:inline-block;}
.vertriebDE::after {
    content: "";
    display: block;
    height: 1px;
    background: #33a23d;
    margin-top: 2px;
    margin-bottom: 7px;
}
.lineaboveDiv {border:2px solid #000; margin-top:80px;}

/*NEU*/
/* Wrapper */
.customSelect {
    position: relative;
    background: #80c52f;
    color: #fff;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    font-family: inherit;
    margin-bottom: 30px;
}

/* Pfeil für den geschlossenen Zustand (nach unten) */
.customSelect::after {
    content: "\f0d7"; /* FontAwesome Icon: caret-down */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2.2em;
    color: #fff;
    pointer-events: none;
    transition: transform 0.3s ease;
}

/* Ausgewähltes Element - Platz für den Pfeil rechts freihalten */
.customSelect .selected {
    padding: 12px 40px 12px 14px; /* Rechts 40px damit der Text nicht den Pfeil überlappt */
    color: #fff;
    font-weight: bold;
	text-align:center;
}

/* Optionsliste */
.customSelect .options {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: linear-gradient(to right, #33a23d 0%, #33a23d 67%, #80c52f 122%, #80c52f 100%);
    margin-top: 10px;
    display: none;
    z-index: 20;
    text-transform: none;
    padding-top: 15px;
    padding-bottom: 15px;
}

/* Einzelne Option */
.customSelect .option {
    padding: 3px 30px;
    color: #fff;
}

/* Hover-Effekt */
.customSelect .option:hover {
    background: #80c52f;
}

/* Aktive Option */
.customSelect .option.active {
    background: #80c52f;
    font-weight: bold;
}

/* Pfeil für den geöffneten Zustand (dreht nach oben) */
.customSelect.open::after {
    transform: translateY(-50%) rotate(180deg);
}

/*ENE NEU*/

.externBorder {border:2px solid rgba(236, 236, 236, 0.9);}
.nameDiv {color:#33a23d; text-transform:uppercase; font-weight:bold; font-size:1em;}
.jobtitleDiv {font-size:0.7em; line-height:1.4em;}
.kontaktDaten a {color:#33a23d; text-decoration:underline;}
.kontaktDaten a:hover {color:#33a23d; text-decoration:underline;}
.kontaktDaten {font-size:0.7em; line-height:1.5em;}
.posDiv {font-size:0.9em;}
.ansprechpartner {
	display:inline-block;
	position:relative;
	margin:0px auto;
}
.ansprechpartner::after {
	content:"";
	display:block;
	height:1px;
	background:#33a23d;
	margin-top:2px;
	margin-bottom:7px;
}
.topMargin {margin-top:20px;}
.bottomMargin {margin-bottom:20px;}
.abteilungsWrapper {margin-bottom:30px; border-bottom: 1px solid #000;}
.productSub {margin-bottom:30px;}
.textDiv {padding:40px 0px; text-align:center; width:100%;}
.textDiv h3 {margin-bottom:20px;}
.textDiv.textPaddingNo {padding:10px 0px;}
.textDivBig {font-size:1.2em; line-height:1.3em;}
.textDivSmall {font-size:18px;}
.divMiddle {margin:0px auto; margin-top:60px;}
.nestedDiv {position:relative; padding-bottom:80px;}
.nestedBox {position:absolute; top:0; width:100%;}
.backgroundIMG {text-align:center;}
.nestedDivBox li {position:relative; line-height:1.2em; margin-bottom:5px;}
.nestedDivBox ul {padding-left:23px; line-height:1.6em;}
.nestedDivBox ul li:before {
    content: "\f22d";
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    position: absolute;
    top: 0px;
    left: -20px;
    color: #33a23d;
    font-size: 1.5em;
    width: 0%;
}
.nestedBoxen {height:100%; display:flex; justify-content:center; flex-direction:column;}
.nestedDivBox img {float:right;}
.nestedBox .container {max-width:1200px;}
.nestedBox h3 {margin-bottom:16px; margin-top:0px;}
.nestedDivBox {margin-top:40px; margin-bottom:20px;}
.hintergrundGrau {background-image: linear-gradient(to right, #c6c6c6, #ececec); color:#000; margin-bottom:80px; padding:30px 0px; position:relative;}
.bildwtextDiv {margin-bottom:100px; margin-top:40px;}
.hintergrundGrau li {position:relative;}
.hintergrundGrau ul li:before {
    content: "\f22d";
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    position: absolute;
    top: 0px;
    left: -20px;
    color: #33a23d;
    font-size: 1.5em;
    width: 0%;
}
.hintergrundGrau img {width:320px;}
.bildmittextDiv {
	position: absolute;
    z-index: 400;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
	right:0;
    margin-right: 52px;
}
.boldText {font-weight:bold;}
.hintergrundGreen {background: linear-gradient(to right, #33a23d 0%, #33a23d 40%, #80c52f 60%, #80c52f 100%); color:#fff; padding:40px 40px;}
.hintergrundGreen i {font-size:3em;}
.textZitat {
	text-align:center;
	position: relative;
}
.hintergrundGreen .kachelNormalText {text-transform:uppercase;}
.hintergrundGreen .kachelBoldText {text-transform:uppercase;}
.fa-quote-right {float:left; margin-right:20px;}
.fa-quote-left {float:right;}
.textBlockZitat {margin-top:40px;}
.titleZitat {display:flex; justify-content:center; flex-direction:column; }
.texttLeftSide {text-align:left;}
.legaltext-text-html h1 {font-size:3.2em; color:#33a23d; margin-bottom:20px; margin-top:40px; text-transform:uppercase; font-weight:bold; display:none;}
.legaltext-text-html h2 {color:#000; font-size:2em; margin-top:40px; font-weight:bold; text-transform:uppercase;}
.legaltext-text-html li {list-style-type:disc;}
.datenschutzText {margin:0px auto;}
.zitatZertiDiv img {width:320px;}
.zitatZertiDiv .bildmittextDiv {width:100%; align-items:center;}
.zitatDiv {margin-bottom:40px; margin-top:60px;}
.zertifikatDownload {margin-bottom:8px;}
.zertifikatDownload a {color:#33a23d; text-decoration:none; font-weight:bold;}
.zertifikatDownload a:hover {color:#33a23d;}
.bannerUe {font-family: 'Inter Light';}
.banner h2 {color:#fff; text-transform:uppercase; margin-bottom:0px; line-height:1.1em;}
.bannerUeBold h2 {font-weight:bold;}
.banner a {color:#fff; font-weight:bold; display:flex;}
.banner {background:linear-gradient(to right,#33a23d 0%,#33a23d 40%,#80c52f 60%,#80c52f 100%); padding:40px; margin-top:20px; margin-bottom:80px; color:#fff;}
.banner img {width:90px; margin-right:20px;}
.banner span {display: flex; justify-content: center; flex-direction: column;}
.textTitle {text-transform:uppercase;}
.titleMiddle {text-align:center;}
.titleLeft {text-align:left;}
.textDiv .paddingNone {padding-top:20px;}
.iaNumberDiv {font-size: 2.6em; font-weight: 900; color:#33a23d; display:inline;}
.symbol {font-size: 2.6em; font-weight: 900; color:#33a23d; display:inline;}
.symbol.no-uppercase {text-transform: none;}
.infoText {text-align:center; margin-top:10px;}
.iconText {text-align:center; margin-top:10px;}
.iconTextGreen p {display:inline;}
.iconBox img {width:160px;}
.zahlenBox {text-align:center; margin-bottom:60px; text-transform:uppercase;}
.iaNumberDiv,
.symbol,
.infoText {
    opacity: 0;
    transition: opacity 0.5s;
}
.iconBoxen {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}
.infoanimation {margin-top:60px; margin-bottom:40px;}
.infoanimation h3 {margin-bottom:60px;}
.infoanimation h1 {margin-bottom:60px;}
.stellenDiv {color:#fff; margin-bottom:20px;}
.stelleBold {font-weight:bold; text-transform:uppercase; font-size:1.4em; margin-bottom:5px;}
.stellenLinks a {color:#fff; font-weight:bold; display:block; margin-top:5px;}
.stellenLinksDiv {float:right; text-align:right; margin-top:20px;}
.stellenDiv .greentohell {padding:40px;}
.stellenangebote {margin-top:40px; margin-bottom:40px;}
.greentodarkgreen {
    background-image: linear-gradient(to right, #33a23d, #80c52f);
    background-repeat: no-repeat;
    color: #fff;
}
.stellenLink {margin-top:40px; display:block;}
.greentodarkgreen.box-1 {background-position: 10% 0%;}
.greentodarkgreen.box-2 {background-position: 50% 0%;}
.stellenMerkmal {background-color:#33a23d; color:#fff; padding:5px 10px; font-weight:bold; display:inline-block; margin-right:20px; margin-bottom:30px; text-transform:uppercase; font-size:0.7em;}
.titleKBlack {
    color: #000;
    font-family: 'Inter Light';
    font-weight: normal;
    margin-bottom: 0px;
}
.titleBox h1 .titleKBlack {font-size:0.6em; line-height:1em;}
.titleKBlackForm {
    color: #000;
    font-family: 'Inter';
    font-weight: normal;
    margin-bottom: 0px;
    font-weight:bold;
}
.stellenCol {margin:0px auto;}
.stellenBeschreibung h3 {margin-bottom:0px;}
.stellenInfo {margin-top:20px;}
.stellenInfo li {position:relative; margin-top:10px;}
.stellenInfo ul {padding-left:25px;}
.stellenInfo ul li:before {
    content: "\f22d";
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    position: absolute;
    top: 0px;
    left: -20px;
    color: #fff;
    font-size: 1em;
    width: 0%;
    color:#80c52f;
}
.stellenInfoDiv {margin-top:20px; margin-bottom:60px; color:#000; line-height:1.1em;}
.mapsText {margin-top:20px;}
.mapsIframe iframe {width:100%; height:650px;}
.twoPics {margin-top:20px;}
.mapsDiv {margin-bottom:40px;}
.boxenDivPics {margin-bottom:60px; margin-top:100px;}
.boxenDivPics h3 {margin: 5px 0px;}
.Textblock_zentriert {margin-left:auto; margin-right:auto;}
.textunderPics {margin-top:5px; line-height:1em;}
.textunderPics strong {color:#9d9d9d;}
/*.twoPics:last-of-type::after {
    content: "\f002";
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    font-size:0.9em;
    float:right;
    margin-top:10px;
}*/
.trennstrich {border:1px solid #000;}
.sideMiddle {margin:0px auto;}
.boxDivW:first-of-type {border-top:1px solid #000; padding-top:15px;}
.boxDivW {border-bottom:1px solid #000; margin-bottom:15px; padding-bottom:35px;}
.boxDivW:last-of-type {border-bottom:none; padding-bottom:0px; margin-bottom:0px;}
.bannerPicZertifikat {margin-top:40px; margin-bottom:40px;}
.abstandUnder {margin-bottom:40px;}


/*### Akkordeon ###*/
.akkordeon {margin:0px auto;}
.akkordeonDiv {padding-bottom:40px; color:#33a23d;}
.akkordeon {margin-top:20px; margin-bottom:20px;}
.akkordeonTitel {position:relative; cursor:pointer; margin-top:10px; margin-bottom:10px;}
.akkordeonTitel:after {content:"\f078"; font-family:'Font Awesome 5 Free'; font-weight:900; position:absolute; font-size:1.4em; margin-right:10px; top:10px; right:0; color:#33a23d;}
.akkordeonActTitel:after {content:"\f077";}
.akkordeonText {display:none; padding-top:10px;}
.akkordeonTitel h3 {margin:0px;}
.produktgruppe h3 {margin-left:80px; padding-left:20px; display:flex; justify-content:center; flex-direction:column; height:100%;}
.linkTextBold {font-weight:bold; display:inline-block;}
.akkordeonCol {padding-top:40px; padding-bottom:30px; border-bottom:1px solid #000;}
.akkordeonTextDiv {margin-bottom:2px;}
.akkordeonTextDiv:last-child {margin-bottom:0px;}
.akkordeonTextDiv:nth-last-child(2)  {margin-bottom:0px;}
.akkordeonTextDivOne {margin-bottom:10px;}
.akkordeonTextDivOne:last-child {margin-bottom:0px;}
.produktgruppe::before {
    content: "";
    display:block;
    width:80px;
    height:80px;
    background-image:var(--gruppenbild);
    background-size:contain;
    background-repeat:no-repeat;
    float:left;
}
.loesungGruppeBlock {padding-top:30px; padding-bottom:20px; display:inline-grid;}
.produktgruppe:after {
    content: "\f078";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    font-size: 1.4em;
    margin-right: 10px;
    top: 30px;
    right: 0;
    color: #33a23d;
}
.akkordeonText h4 {border-bottom:1px solid #000; padding-bottom:5px; margin-top:17px; margin-bottom:0px;}
.zwischentitelDiv {margin-bottom:10px; margin-top:15px;}


/*### News ###*/
.news .row.news-list-view > [class*="col-"] {border-left: 2px solid #9d9d9d; margin-bottom: 80px;}
.news .row.news-list-view > [class*="col-"]:nth-child(4n) {border-right: 2px solid #9d9d9d;}
.news .row > .col-md-6.col-lg-4.col-xl-3:last-child {border-right:2px solid #9d9d9d;}
.news img {width:100%; margin-bottom:20px;}
.news-list-date {color:#9d9d9d; font-weight:bold; font-size:0.8em; margin-bottom:8px; display:inline-block;}
.newsheader a {font-weight:bold; color:#000;}
.newsheader {font-size:1.2em; margin-bottom:8px;}
.more {text-transform:uppercase; font-weight:bold;}
.news {padding-bottom:60px;}
.news-backlink-wrap {float:right; text-transform:uppercase; font-weight:bold; margin-top:20px;}
.mediaelement {margin-bottom:60px;}
.news-list-date {display:none;}
.newsPicture {border-right:2px solid #9d9d9d;}
.newsPicture .mediaelement {margin-bottom:0px;}
.news .newsPicture img {margin-bottom:0px;}


/*### Festes Element (Newsletteranmeldung) ###*/
.hGreen h2 {color:#33a23d; font-weight:bold;}
.hBlack h2 {font-family:'Inter Light';}
.newsletterBox h2 {text-transform:uppercase; line-height:1em; margin-bottom:0px;}
.newsletterBox {background-image: linear-gradient(to right, #c6c6c6, #ececec); padding:50px 0px; margin-top:40px;}
.newsletterBox .boxbutton {background-color:#33a23d; color:#fff; border:none; border-radius:0%; height:100%; font-size:2.5em; padding:8px 20px;}
.newsletterBox input {border-radius:0%; padding:20px; padding-top:20px; padding-bottom:20px; width:100%; border:none;}
.hinweisNewsletter {margin-top:20px;}


/*### Slider ###*/
.slider {
    overflow: hidden;
    position: relative;
    width: 100%;
  }
  .sliderInner {
    display: flex;
    transition: transform 0.5s ease;
  }
  .sliderpart, .sliderpartMore {
    flex: 0 0 auto;
    margin-right: 10px;
  }
  @media (max-width: 768px) {
    .sliderpart, .sliderpartMore { flex: 0 0 100%; margin-right: 0; }
  }
  .kSliderContainer .fa-chevron-left, .kSliderContainer .fa-chevron-right {
    position: absolute; top: 50%; transform: translateY(-50%);
    cursor: pointer; z-index: 10; width: 40px; color: #fff;
  }
  .kSliderContainer {margin-bottom:60px;}
  .kSliderContainer .fa-chevron-left { left: 15px; }
  .kSliderContainer .fa-chevron-right { right: 15px; }
  .sliderpart { width: 420px; }
.sliderpartMore { width: 305px; }

/* Mobil: 1 Slide full width */
@media (max-width: 768px) {
  .sliderpart, .sliderpartMore { width: 100%; }
}
.sliderGreen {background:linear-gradient(to right,#33a23d 0%,#33a23d 40%,#80c52f 60%,#80c52f 100%); padding:40px 60px; position:relative; margin-bottom:100px;}
#viewport {width: 1px; height: 1px; display: block;}
@media (min-width:  992px) {#viewport {display: table;}}
@media (min-width: 1200px) {#viewport {display: none;}}
.einsatzPic {position:relative; text-align:center; margin-right:20px; cursor:pointer;}
.einsatzDiv {position:absolute; background-color:rgba(255, 255, 255, 0.7); width:100%; padding:20px; bottom:0; z-index: 600;}
.einsatzNone {display:none;}
.einsatzNone .sliderPLink .fa-chevron-right {position:relative; transform:none; right:auto; width:auto;}
.einsatzShow {color:#33a23d; text-transform:uppercase; font-weight:bold; font-size:1.3em; display:inline-block;}
.einsatzShow p::after {
    content: "";
    display: block;
    height: 1px;
    background: #33a23d;
    margin-top: 5px;
    margin-bottom: 10px;
}
.einsatzShow p {line-height:1.1em;}
.sliderPLink .fa-chevron-right {color:#33a23d; font-size:unset; position:relative; right:0;}
.sliderPLink {text-transform:uppercase; font-weight:bold;}
.zeitstrahl h3 {margin-bottom:25px;}
.history {position: relative; width: 100%; overflow-x: hidden; background-size: 100% auto; background-repeat: no-repeat; background-position: center top;}
.historybgimg {width: 100%; display: none; opacity: 0;}
.historyyear {position: relative; float: left; display: none; width: 100%;}
.historyText {float:right}
.historyImg {padding: 0px; text-align: center;}
.historyImg img {width: 100%;}
.acthistory {display: block;}
.historycontainer {background-color: transparent; position:absolute; width:100%; top:10%; right:10%;}
.historyText .redbg {background: linear-gradient(to right, rgba(51, 162, 61, 0.75) 0%, rgba(51, 162, 61, 0.75) 40%,rgba(128, 197, 47, 0.75) 60%,rgba(128, 197, 47, 0.75) 100%); color:#fff; padding:50px;}
.history {background-size: contain;}
.historybgimg {display: block;}
.historyImg {height: 100%;}
.historyImg img {max-height: 100%; width: auto; float: right;}
.history li {position:relative; margin-top:10px;}
.history ul {padding-left:20px;}
.history ul li:before {
    content: "\f22d";
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    position: absolute;
    top: 0px;
    left: -20px;
    color: #fff;
    font-size: 1em;
    width: 0%;
}
.historyleft, .historyright {position: absolute; top:50px; left: 10px; width: 50px; display: flex; flex-direction: column; justify-content: start;}
.historyright {left: auto; right: 10px; text-align: right;}
.historyleft, .historyright {color: #000;}
.historyleft, .historyright{top: 0px; justify-content: center; height: 100%; left: 20px;}
.historyright {right: 20px; left: auto;}
.historyleft img, .historyright img {cursor: pointer;}
.history area {cursor:pointer;}


/*### Case Studies ###*/
.casestudies {margin-top:60px; margin-bottom:60px;}
.main-image img {width: 100%; height: auto; margin-bottom: 10px;}
.thumbnails { display: flex; gap: 10px; flex-wrap: wrap;}
.thumbnails img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border 0.3s;
	border: 2px solid #000;
}
.casestudies h3 {margin-top:0px; margin-bottom:15px;}
.casestudies h1 {margin-top:0px; margin-bottom:15px;}
.projektInfoDiv {margin-bottom:60px;}
.anforderungDiv {margin-bottom:60px;}
.casestudies li {position:relative;}
.casestudies ul {padding-left:20px;}
.casestudies ul li:before {
    content: "\f22d";
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    position: absolute;
    top: 0px;
    left: -20px;
    color: #33a23d;
    font-size: 1em;
    width: 0%;
}
.anforderungDiv p {margin-bottom:10px;}
.projektText p {
    display: grid;
    grid-template-columns: 150px 1fr;
    column-gap: 10px;
}

/*### Lösungen ###*/
.loesungenDiv img {width:190px; display:block; margin:0px auto; padding:20px 0px;}
.loesungP {font-size:0.8em; text-align:center; font-weight:bold;}
.loesungSub {margin-bottom:40px;}
.loesungenDiv {border:2px solid #6f6f6f; height:100%; padding:5px;}


/*### Powermail ###*/
.powermail_fieldwrap_type_input {margin:20px 0px;}
.powermail_fieldwrap_type_input input {border-radius:0px; border:1px solid #000; padding:25px 20px;}
.powermail_fieldwrap label {font-weight:bold; text-transform:uppercase; font-size:0.9em; margin-left:20px;}
.opacityLabel {opacity:0;}
.kontaktForm {margin-top:5px; margin-bottom:60px;}
input.powermail_file + label.powermail_file_label {
    display: inline-block;
    width: 100%;
    text-align: center;
    border: 1px dashed #000;
    background-color: #ececec;
    color:#9d9d9d;
    padding: 25px 0px;
    cursor: pointer;
    text-transform:none;
    margin-left:0px;
    font-weight:bold;
}
#powermail_field_stellenbezeichnung {display:none;}
input.powermail_file {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}
.powermail_create {margin-top:40px;}
.powermail_fieldwrap_type_textarea {margin-top:20px;}
.powermail_fieldwrap_type_textarea textarea {border:1px solid #000; border-radius:0px;}
.normalText {font-size:0.8em; margin-top:20px; color:#155427;}
.powermail_fieldwrap_type_check {font-size:0.8em; color:#155427; float:left;}
.powermail_fieldwrap_type_check a {font-weight:bold;}
.form-check {
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5em;
    margin-bottom: .125rem;
}
.powermail_checkbox {
    display: none;
}
.powermail_fieldwrap_type_check .powermail_checkmark {
    border: 1px solid #6f6f6f;
    display: table;
    cursor: pointer;
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0px;
    left: 0px;
    margin-right:20px;
}
.powermail_fieldwrap_type_check p {margin-left:5px;}
.powermail_checkmark.checked:after {
    content: "\f00c";
    position: absolute;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    left: 1px;
    font-size: 15px;
    top: -3px;
}
.boxButtonDiv .boxbutton {background-color:#33a23d; color:#fff; border:none; padding:20px 60px; text-transform:uppercase; font-weight:bold;}
.buttonLink {background-color:#33a23d; color:#fff; border:none; padding:20px 60px; text-transform:uppercase; font-weight:bold;}
.buttonLink:hover {color:#fff;}
.buttonLinkDiv {margin-top:40px; margin-bottom:40px; text-align:center;}
.boxButtonDiv {display:inline-block; margin-left:40px;}
.buttonCheckDiv {float:right;}
.buttonCheckHalf .buttonCheckDiv {float:none; display:inline-block;}
.buttonCheckHalf .boxButtonDiv {margin-left:0px; width:89%;}
.buttonCheckHalf .bothDiv {position:absolute; bottom:0; width:100%}
.buttonCheckHalf .form-check {position:unset; padding-left:0rem;}
.buttonCheckHalf .powermail_fieldwrap_type_check p {margin-left:30px;}
.buttonCheckHalf .row {margin-left:0px;}
.buttonCheckHalf .boxButtonDiv .boxbutton {width:100%; padding:15px 60px;}
.lessDiv h3 {margin-bottom:0px;}
.boxTitel {text-transform:uppercase; text-align:center;}
.boxTrennStrich {border-top:2px solid #33a23d; width:100%; padding-bottom:30px;}
.boxenProduct {padding:20px 55px;; border:1px solid #000; height:100%; position: relative; transform: scale(1, 1); transition: transform 0.5s ease;}
.boxenCol {margin-bottom:40px;}
.boxenCol img {padding-left:20px; padding-right:20px;}
.boxenCol a {color:#000;}
.boxenProduct:hover {transform:scale(1.06, 1.06);}
.smallPic {width:150px; margin-top:20px; margin-right:10px;}
.produktIcon {width:150px;}
.productsPic {border:1px solid #000;}
.productTextDiv {position:relative;}
.productsMore {color:#fff; background-color:#33a23d; padding:10px 15px; text-transform:uppercase; font-weight:bold; position:absolute; bottom:0px;}
.productsMore:hover {color:#fff;}
.produktName {font-size:1.8em; line-height:1.1em; margin-bottom:10px; text-transform:uppercase; font-family: 'Inter Light';}
.productsDiv {margin-top:40px;}
.textElement {font-size:0.8em;}
.textElement p {margin-bottom:0px; margin-top:40px;}
.produktListe li {position:relative; line-height:1.2em; margin-bottom:5px;}
.produktListe {padding-left:23px; line-height:1.6em;}
.produktListe li:before {
    content: "\f22d";
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    position: absolute;
    top: 0px;
    left: -20px;
    color: #33a23d;
    font-size: 1em;
    width: 0%;
}
.textspalteDiv p:has(strong) {
    margin-bottom:5px;
}
#productsResults {margin-top:60px; margin-bottom:40px;}
.productsPic img {padding:20px 0px;}
.productsIcons {display:inline-block; margin-right:10px; width:100px;}
.produktinfo {margin-bottom:30px; font-size:22px; line-height:1.2em;}
.produktIMG {margin-bottom:10px;}
.kleinBildRow {margin-top:40px;}
.produktInfoDiv {margin-bottom:40px;}
.sliderIconPro {position:absolute; cursor:pointer; width:5%; color:#33a23d; display:flex; justify-content:center; flex-direction:column; height:100%; top:0;}
#productsPrev {left:0;}
#productsNext {right:0;}
.imgContainer {position:relative;}
.produktIMG img {padding:10px 0px; border:1px solid #000; cursor:pointer;}
.untergruppe-titel {padding-bottom:20px;}
.produktGruppenInner {border-bottom:1px solid #000;}
#productsgruppeResults .productsDiv {margin-top:0px;}
.videoDiv {margin-bottom:20px;}
.videoDiv span {font-weight:bold; margin-bottom:10px; text-transform:uppercase;}
.zubehoerBanner {background-image: linear-gradient(to right, #c6c6c6, #ececec); padding: 20px 0px; margin-top:60px; margin-bottom:60px;}
.zubehoerBanner h3 {margin-top:5px; margin-bottom:15px;}
.zubehoerBanner h3 {text-transform:uppercase;}
.zubehoerItem {margin-top:5px;}
.zubehoerItem img {border:1px solid #000;}
.zubehoerItem a {color:#000;}
.zubehoerText {margin-top:10px; text-align:center;}
.ausfuehrungTitel {text-align:center; margin-top:10px; margin-bottom:30px;}
a .ausfuehrungTitel {color:#33a23d;}
.ausfuehrungDiv {margin-top:40px; margin-bottom:60px;}
.ausfuehrungDiv img {border:1px solid #000; padding:20px 0px;}
.ausfuehrungDiv .produktName {margin-bottom:20px;}
.ausfuehrungDiv a {color:#000;}
.ausfuehrungDiv a:hover {color:#000;}
.projektDiv {margin-bottom:80px; border-right:2px solid #9d9d9d;}
.projektTitle {font-weight:bold; font-size:1.2em; margin-bottom:8px; text-transform:uppercase;}
.projektTitle p {margin-bottom:0px;}
.projektDiv img {margin-bottom:40px;}
.dummyX {font-size:4em; text-align:center; color:red; padding:50px 0px; border:1px solid #000;}
.productsDiv .dummyX {border:none;}
.produktgruppe {margin-bottom:10px;}

.inputSearch {display:inline-block;}
.inputSearchMob {display:none;}
.textRTE {font-weight:bold; margin-top:35px; display:block; font-size:1.2em;}

/*### Zeitstrahl ###*/
/* ==========================================================================
   1. Allgemeine & Globale Inhalt-Styles
   ========================================================================== */
   .timeDiv {
    padding-bottom: 60px;
}
.zeitstrahlDiv {
    background-color: #fff;
}
.content {
    background-color: #ececec;
    color: #000;
    padding: 20px; /* Mobil-First: Weniger Padding spart wertvollen Platz */
}
.date {
    color: #33a23d;
    font-size: 1.8em; /* Mobil-First: Harmonische Größe für Smartphones */
    margin-bottom: 20px;
    font-weight: bold;
}

/* Listen-Styles innerhalb der Timeline-Boxen */
.content ul {
    padding-left: 25px;
    line-height: 1.6em;
    margin-bottom: 0px;
}
.content li {
    position: relative;
    line-height: 1.2em;
    margin-bottom: 5px;
}
.content ul li:before {
    content: "\f22d";
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    position: absolute;
    top: 0px;
    left: -20px;
    color: #33a23d;
    font-size: 1.2em;
    width: 0%;
}

/* ==========================================================================
   2. Timeline Grundgerüst (Mobil zuerst)
   ========================================================================== */
.timeline {
    --col-gap: 1.5rem; /* Mobil etwas kompakterer Abstand zur Linie */
    --row-gap: 3rem;   /* Mobil leicht reduzierter Abstand zwischen den Boxen */
    --line-w: 0.25rem;
    display: grid;
    grid-template-columns: var(--line-w) 1fr;
    grid-auto-columns: max-content;
    column-gap: var(--col-gap);
    margin-inline: auto;
    position: relative;
    margin-top: 100px;
}

/* DIE GLOBALE LINIE - Mit Maske für den perfekten Schnitt */
.timeline::before {
    content: "";
    position: absolute;
    width: var(--line-w);
    background: #33a23d;
    border-radius: calc(var(--line-w) / 2);
    
    top: -40px; 
    height: 100%;
    
    left: calc(var(--line-w) / 2); 
    transform: translateX(-50%);
    z-index: 1;

    /* Schneidet die Linie mobil präzise am letzten Element ab */
    clip-path: inset(0px -10px calc(var(--row-gap) + 11px) -10px);
}

/* DER PFEIL NACH OBEN (CSS-Dreieck) */
.timeline::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 25px solid #33a23d;
    top: -58px;
    left: calc(var(--line-w) / 2);
    transform: translateX(-50%);
    z-index: 2;
}

/* ==========================================================================
   3. Timeline Boxen & Inhaltselemente (Mobil zuerst)
   ========================================================================== */
.timelineDiv:not(:last-child) {
    margin-bottom: var(--row-gap);
}
.timelineDiv {
    grid-column: 2;
    --inlineP: 0.5rem; /* Mobil weniger seitlicher Abstand, um Textplatz zu maximieren */
    margin-inline: var(--inlineP);
    display: grid;
    grid-row: span 2;
    grid-template-rows: min-content min-content min-content;
    position: relative;
    opacity: 0;
}

/* Die Kreise (Punkte) auf der Linie */
.timelineDiv::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    background-color: #33a23d;
    top: 22px;
    border-radius: 50%;
    z-index: 2;
}

/* Sprechblasen-Pfeile - MOBIL-STANDARD (Alle Boxen bekommen linken Pfeil) */
.timelineDiv::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 3;
    left: -24px;
    border: medium solid #ececec;
    border-width: 15px 25px 15px 0px;
    border-color: transparent #ececec transparent transparent;
}

/* Inaktive Standard-Klassen-Pfeile für Mobil überschreiben/deaktivieren */
.left::before, .right::before {
    display: none !important;
}

/* Exakte Kreis-Positionierung für Mobilgeräte */
@media (max-width: 39.99rem) {
    .timelineDiv::after {
        left: calc(-1 * var(--col-gap) - var(--inlineP) - 1px);
    }
}

/* ==========================================================================
   4. Desktop-Ansicht (Ab 40rem / Wechselseitig)
   ========================================================================== */
@media (min-width: 40rem) {
    /* Desktop-Abstände vergrößern */
    .content {
        padding: 40px;
    }
    .date {
        font-size: 2.4em;
        margin-bottom: 30px;
    }
    .timeline {
        --col-gap: 2rem;
        --row-gap: 4rem;
        grid-template-columns: 1fr var(--line-w) 1fr;
    }
    
    /* Elemente rutschen in die Mitte */
    .timeline::before {
        left: 50%;
        clip-path: inset(0px -10px 270px -10px);
    }
    .timeline::after {
        left: 50%;
    }
    
    /* Boxen-Wechsel */
    .timelineDiv {
        --inlineP: 1.5rem;
    }
    .timelineDiv:nth-child(odd) {
        grid-column: 1;
    }
    .timelineDiv:nth-child(even) {
        grid-column: 3;
    }
    .timelineDiv:nth-child(2) {
        grid-row: 2 / 4;
    }

    /* Exakte Kreis-Positionierung für Desktop */
    .timelineDiv.left::after {
        right: calc(-1 * var(--col-gap) - var(--inlineP) - 13px);
        left: auto;
    }
    .timelineDiv.right::after {
        left: calc(-1 * var(--col-gap) - var(--inlineP) - 13px);
        right: auto;
    }

    /* Pfeile für Desktop reaktivieren und wechselseitig ausrichten */
    .timelineDiv::before {
        display: none !important; /* Mobil-Pfeil abschalten */
    }
    .left::before {
        display: block !important;
        content: " ";
        height: 0;
        position: absolute;
        top: 22px;
        width: 0;
        z-index: 3;
        right: -23px;
        left: auto;
        border: medium solid #ececec;
        border-width: 15px 0 15px 25px;
        border-color: transparent transparent transparent #ececec;
    }
    .right::before {
        display: block !important;
        content: " ";
        height: 0;
        position: absolute;
        top: 22px;
        width: 0;
        z-index: 3;
        left: -24px;
        right: auto;
        border: medium solid #ececec;
        border-width: 15px 25px 15px 0px;
        border-color: transparent #ececec transparent transparent;
    }
}

/* ==========================================================================
   5. Sonstige Hilfsklassen & Buttons
   ========================================================================== */
.load-more-arrow {
    cursor: pointer;
    display: flex;
    justify-content: center;
}
.arrow {
    width: 45px;
    height: 45px;
    background-color: #33a23d;
    border-radius: 50%;
    position: relative;
    flex-direction: column;
    justify-content: center;
    display: flex;
}
.arrow i {
    color: #ececec;
    display: flex;
    justify-content: center;
    line-height: 0.4em;
    font-size: 1.6em;
}
.hidden {
    display: none;
}
.timelineDiv.hidden {
    opacity: 0;
}
.entry__specification {display:none !important;}

/*### Popup ###*/
.popup-overlay {
  display: none;
  position: fixed;
  top: 60px;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  justify-content: center;
  align-items: center;
}
.popup-content {
  background-color: #155427;
  padding: 60px;
  position: relative;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  border:4px solid #fff;
  text-align: left;
  color:#fff;
}
.popup-content h3 {color:#fff; line-height:1.1em; margin-top:0px; margin-bottom:20px; font-size:2.3em;}
.close-btn {
  position: absolute;
  top: 25px;
  right: 15px;
  color: #fff;
  cursor: pointer;
  font-size:3em;
  font-family: "Inter Light";
}
.popup-content p:last-child {margin-bottom:0px;}


/*### Tabs ###*/
.downloadsDiv {margin-top:60px;}
.tab {color:#000; text-transform:uppercase; cursor:pointer; flex-direction:column; justify-content:center; display:flex; padding-top:10px; padding-bottom:10px; padding-left:20px; background-color:#ececec;}
.actTab {background-color:#33a23d; color:#fff;}
.coltabcontent.actTabContent {display:block;}
.coltabcontent {display:none; padding-top:20px;}
.desktoptabs {border-bottom:3px solid #33a23d;}
.pdfDiv span {font-weight:bold; display:block; text-transform:uppercase;}
.pdfDiv {display:inline-block; margin-bottom:20px;}


/*### Footer ###*/
footer {background:linear-gradient(to right,#33a23d 0%,#33a23d 40%,#80c52f 60%,#80c52f 100%); height:auto; width:100%; bottom:0; color:#fff; font-size:16px; padding-top:30px; padding-bottom:30px;}
footer a {color:#fff;}
footer a:hover {color:#fff;}
.footerDiv {font-weight:bold;}
.footerDiv ul {float:right; margin-bottom:0px;}
.footerDiv li {display:inline; margin-left:20px; text-transform:uppercase;}
footer span {font-weight:bold;}


/*### Mobile Ansicht ###*/
@media (max-width: 1599px) {
	.social {margin-bottom:52px;}
    .grau .col-lg-5 {max-width:100%; flex:auto;}
    .grau .downloadBox .boxText {display:block; height:auto; margin-top:20px;}
    .grau .downloadText {position:relative;}
	.boxText {font-size:0.7em;}
}
@media (max-width: 1400px) {
	body {font-size:16px; line-height:1.1em;}
	.kachelBoldText {font-size:2.5em;}
	.kachelNormalText {font-size:2.5em;}
    .menuDiv {display:none;}
    .social {display:none;}
    .mmp.aktivmmp .submenu-arrow {display:none;}
    .menubutton {position: relative; flex-direction: column; justify-content: center; display: flex; height:100%;}
    .mobilMenu .mobilmenulist {display:none; background-color:transparent; position:relative; text-align:left;}
    .mobilMenu .underMenu {background:transparent; box-shadow:none; padding:40px 0px;}
    .mobilMenu {position:absolute; width:100%; z-index:600; margin-top:20px; padding-top:100px; padding-bottom:80px; background:linear-gradient(to right,#33a23d 0%,#33a23d 40%,#80c52f 60%,#80c52f 100%); text-align:center; color:#fff; text-transform:uppercase;}
    .mobilMenu a {color:#fff; text-transform:uppercase;}
    .service {display:block;}
    .stickyBanner {display:none;}
    .menubutton i {font-size:3em; position:absolute; right:0; top:0; flex-direction: column; justify-content: center; display: flex; height:100%;}
    .fa-bars {color:#33a23d;}
    .icon-hover {color:#fff;}
    .adressDiv span {display:none;}
    .adressDiv i {font-size:2em;}
    .overNav a {margin-right:10px;}
    #searchButton {font-size:1.5em;}
    .searchForm {display:inline-flex;}
    .mmp {margin-bottom:30px; font-size:1.6em;}
    .mmpWithout {margin-bottom:30px; font-size:1.6em;}
    .socialMobil img {width:45px; margin-right:15px;}
    .menu-text span {cursor:pointer;}
    .ebene3Div {margin-top:40px;}
    .navigation li {display:block; padding: 5px 2px;}
}
@media (max-width: 1200px) {
    .introImgText {position:relative; background-color:#80c52f; padding-left:0px; padding:30px;}
    .introImgText br {display:none;}
    .bildmittextDiv {position:relative;}
    .boxenDivPics h3 {font-size: 1.8em;}
}
@media (max-width: 991px) {
    h1.titleDiv {font-size:2.8em;}
    h2 {font-size:2.5em; line-height:1em;}
    h3 {font-size:1.8em; line-height:1.2em;}
    .kopfbild {padding-bottom:20px;}
    .desktopPic {display:none;}
    .mobilePic {display:block;}
    .timeline::before {left:7%;}
    .timeline::after {left:7%;}
    .timelineDiv p:last-child {margin-bottom:0px;}
    .timeline {margin-top:65px;}
    .timeline {--row-gap: 2rem;}
    .ueberschrift h1 {margin-bottom:0px;}
    .vertriebDEMap {margin-top:10px;}
    .vertriebInternationalWrapper {margin-top:25px;}
    .newsletterBox {text-align:center;}
    .newsletterBox .hBlack h2 {margin-bottom:0px;}
	.popup-content {padding:15px;}
	.boxText {font-size:0.8em;}
    #newsletterForm {margin-top:20px;}
    .newsletterBox .boxbutton {width:100%; padding:8px 0px;}
    .introImgText {font-size:2em;}
    .introImgText p {margin-bottom:0px;}
    .kontaktDaten {font-size:1em; line-height:1.3em;}
    .grau .col-lg-5 {max-width:fit-content;}
    .nameDiv {font-size:1.3em;}
    .jobtitleDiv {font-size:1em;}
    .layerDiv {padding:8px;}
    .kachelNormalText {font-size:2em;}
    .bigBox {padding:15px;}
    .kachelBoldText {font-size:2em;}
    .kleinBildRow {margin-bottom:40px;}
    .produktinfo {font-size:18px;}
    .ebene3Div {position:relative; margin-top:0px; margin-bottom:35px; font-weight:bold;}
    .menuPos {position:relative;}
    .mobilMenu .underMenu {text-align:center; padding-top:0px;}
    .navigation {font-size:14px;}
    .mobilmenuPart {margin-right:0px;}
    .mmp {margin-bottom:20px;}
    .mmpWithout {margin-bottom:20px;}
    .mobilMenu {padding-top:70px; padding-bottom:50px;}
    .linkDiv:hover {background-color:transparent;}
    .navigation li {margin-right:0px;}
    .socialMobil img {width:35px;}
    .sprachmenu {display:none; position: absolute; left: 0; top: 41px; background-color: #155427; padding: 30px; z-index: 95643; width: 100%; text-align:center; font-size:1.6em;}
    .sprachmenu span:not(:last-child) {margin-right:20px;}
    .spracheMob {display:inline-block; margin-right:20px;}
    .spracheMob i {font-size:2em; color:#fff;}
    .sprachmenu img {width:27px;}
    .clickButtonLang {background-color:#155427; padding-top:8px; padding-bottom:8px;}
    .searchForm {margin-right:10px;}
    .inputSearch {display:none;}
    .inputSearchMob {display:none; position:absolute; left:0; top:41px; background-color:#155427; padding:30px; z-index:95643; width:100%;}
    .boxbutton.searchBoxButton {background-color:#33a23d;}
    #searchBegriff {width:100%; margin-right:10px; padding:10px 10px;}
    .searchBoxButton i {font-size:2em;}
    .spracheMob {padding-left: 3px;
        padding-right: 3px;}
    .searchForm .clickButtonSearch {background-color:#155427;}
    #searchButton {padding-top:10px; padding-bottom:10px;}
    .overNav {padding-top:0px; padding-bottom:0px;}
    .searchForm button {border:none; outline:none;}
    .searchForm button:focus {outline:none;}
    .kachelklein img {width:115px;}
    .grau .imgFront {text-align:left;}
    .grau .downloadBox .boxText {display:block; height:auto;}
    .grau .downloadText {position:relative; font-size:unset;}
    .buttonCheckHalf .bothDiv {position:relative; margin-top:20px;}
    .banner img {width:30px;}
    .banner a {margin-top:10px;}
    .casestudies {margin-top:40px;}
    .bannerUeBold {margin-bottom:10px;}
    .banner {padding:20px 30px;}
    .newsletterBox input {padding:15px; padding-top:15px;}
    .newsletterBox {padding:25px 0px; margin-top:0px;}
    .hinweisNewsletter p {margin-bottom:0px;}
    footer {font-size:14px;}
    .productsIcons {margin-bottom:10px; width:75px;}
    .ausfuehrungDiv img {width:245px;}
    .ausfuehrungCol {text-align:center;}
    .news .row > .col-md-6.col-lg-4.col-xl-3 {margin-bottom:0px; padding-bottom:40px; border-right:none; border-bottom:2px solid #9d9d9d;}
    .news .row.news-list-view > [class*="col-"] {border-left:none;}
    .news .row > .col-md-6.col-lg-4.col-xl-3:last-child {border-right:none;}
    .news .row > .col-md-6.col-lg-4.col-xl-3:last-child {border-bottom:none; padding-bottom:0px;}
    .produkteIntroText {margin-top:30px;}
    .produkteIntroText p {margin-bottom:0px;}
    .produktIcon {width:110px;}
    .productsPic {border:none;}
    .productsPic img {border:1px solid #000;}
    .productsPic {margin:0px auto;}
    .productsMore {position:relative;}
    .productTextDiv {margin:0px auto; text-align:center; margin-top:10px;}
    .produktName {text-align:center;}
    .downloadsDiv {margin-top:20px;}
    .produktInfoDiv {margin-bottom:10px;}
    .produktgruppe h3 {font-size:1.1em; margin-left:0px;}
    .produktgruppe::before {width:64px; height:64px;}
    .loesungGruppeBlock {padding-bottom:0px; padding-top:10px;}
    .textElement p {margin-top:0px;}
    .producteCol {margin-top:20px;}
    .loesungenDiv img {padding:10px 10px; padding-top:5px;}
    .projektDiv {border-right:none; border-bottom:2px solid #9d9d9d; margin-bottom:30px; padding-bottom:15px; text-align:center;}
    .projektDiv img {margin-bottom:20px; width:250px;}
    .titleBox {padding-bottom:20px;}
    .breadcrumbs {margin-top:20px; margin-bottom:20px;}
    .textDiv {padding-top:10px; padding-bottom:10px;}
    .infoanimation {margin-top:40px; margin-bottom:0px;}
    .infoanimation h3 {margin-bottom:40px;}
    .zahlenBox {margin-bottom:40px;}
    .nestedDivBox {margin-top:5px;}
    .nestedDiv {padding-bottom:0px;}
    .zitatDiv {margin-top:20px; margin-bottom:20px;}
    .hintergrundGreen i {font-size:2em;}
    .textZitat {margin-top:20px;}
    .zitatZertiDiv img {width:160px;}
    .hintergrundGreen {padding-top:20px; padding-bottom:20px;}
    .zertifikatDownload {margin-bottom:20px;}
    .backgroundIMG {display:none;}
    .nestedBox {position:relative;}
    .bildwtextDiv {margin-top:10px; margin-bottom:20px;}
    .hintergrundGrau img {width:210px; margin:0px auto; padding-bottom:20px;}
    .hintergrundGrau {padding:20px 30px; margin-bottom:20px;}
    .kachelBox {margin-bottom:0px;}
    .einsatzPic {margin-right:0px;}
    .kSliderContainer {margin-bottom:20px;}
    .news {padding-bottom:40px;}
    .ueberschriftH1 h1 {margin-top:35px; margin-bottom:30px; font-size:2.8em;}
    .produkteDivPic {margin-top:20px;}
    .productsDiv {margin-top:30px;}
}
@media (max-width: 767px) {
    body {font-size:14px;}
    h2 {font-size:2.2em; line-height:1em;}
    h3 {font-size:1.6em; margin:20px 0px;}
    .nestedDivBox img {width:160px; margin-bottom:20px; float:none;}
    .nestedDivCol {text-align:center;}
    .footerDiv ul {float:left; padding-left:0px;}
    .footerDiv li {margin-left:0px; margin-right:20px;}
    .footerDiv {margin-top:20px;}
    .introImgText {padding:15px 0px;}
    footer {font-size:12px;}
}