/* montserrat-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/montserrat-v25-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/montserrat-v25-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v25-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/montserrat-v25-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/montserrat-v25-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/montserrat-v25-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/montserrat-v25-latin-italic.eot'); /* IE9 Compat Modes */
  src: url('../fonts/montserrat-v25-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v25-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/montserrat-v25-latin-italic.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/montserrat-v25-latin-italic.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/montserrat-v25-latin-italic.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/montserrat-v25-latin-500.eot'); /* IE9 Compat Modes */
  src: url('../fonts/montserrat-v25-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v25-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/montserrat-v25-latin-500.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/montserrat-v25-latin-500.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/montserrat-v25-latin-500.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/montserrat-v25-latin-500italic.eot'); /* IE9 Compat Modes */
  src: url('../fonts/montserrat-v25-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v25-latin-500italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/montserrat-v25-latin-500italic.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/montserrat-v25-latin-500italic.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/montserrat-v25-latin-500italic.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/montserrat-v25-latin-700.eot'); /* IE9 Compat Modes */
  src: url('../fonts/montserrat-v25-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v25-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/montserrat-v25-latin-700.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/montserrat-v25-latin-700.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/montserrat-v25-latin-700.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/montserrat-v25-latin-700italic.eot'); /* IE9 Compat Modes */
  src: url('../fonts/montserrat-v25-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v25-latin-700italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/montserrat-v25-latin-700italic.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/montserrat-v25-latin-700italic.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/montserrat-v25-latin-700italic.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* caveat-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/caveat-v17-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/caveat-v17-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/caveat-v17-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/caveat-v17-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/caveat-v17-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/caveat-v17-latin-regular.svg#Caveat') format('svg'); /* Legacy iOS */
}

/* caveat-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/caveat-v17-latin-600.eot'); /* IE9 Compat Modes */
  src: url('../fonts/caveat-v17-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/caveat-v17-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/caveat-v17-latin-600.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/caveat-v17-latin-600.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/caveat-v17-latin-600.svg#Caveat') format('svg'); /* Legacy iOS */
}

.bg-lightgray, .bg-gray {
  background-color: rgb(235,233,230) !important;
}
.lightgray{
	color: rgb(235,233,230)!important;
}
.bg-darkgray {
  background-color: rgb(95,95,97) !important;
}
.darkgray{
	color: rgb(95,95,97)!important;
}




/*** OFFCANVAS TOP ***/
#offcanvas-top {
  font-size: 0.7rem;
  line-height: 1.6;
}
#offcanvas-top input{
	font-size: 0.7rem;
}
#offcanvas-top button.submit{
	font-size: 0.7rem;
	height: inherit;	
}
#offcanvas-top h3{
	font-size: 1.2rem;
}
#offcanvas-top .ce_hyperlink a.link-white.outline:hover, #offcanvas-top a.btn.link-white.outline:hover {
  background: rgba(255,255,255,0.3)!important;
  border-color: rgb(255,255,255)!important;
  color: #5f5f61!important;
}
#offcanvas-top .ce_hyperlink{
  width:100%;
}
#offcanvas-top .ce_hyperlink.expand a{
  width: 90%;
}
#offcanvas-top a.email{
	text-decoration:underline;
}

#offcanvas-top a.email:hover{
	text-decoration:none;
}
#offcanvas-top .login{
  align-items: center;
  display: flex;
}



/*** TOP ***/

@media only screen and (min-width: 768px){
	body:not(.home) #fix-wrapper {
	  position: inherit;
	}
}
#top, #top a, #top .mod_socials a i {
   text-transform: uppercase;
   font-weight: 500;   
}
#top .mod_search {
  position: relative;
  float: right;
  padding: 0 8px;
  display: inline-block;
  cursor: pointer;
  margin-left: 45px;
  z-index: 100;
  opacity: .7;
  transition: All 0.3s ease;
}
@media only screen and (max-width: 767px){
	.body_bottom .mod_search .inside  {
		transform: translate3d(0,-50vh,0);
	}
}
#top .mod_search i{
	font-weight:600;
}
#top .top_metanavi li i {
  display: inherit!important;
	padding-right: 5px;
}
#top .top_metanavi li {
  padding: 0 4px 0 20px;
}

#top .mod_socials {
  line-height: 2.5rem;
}
#top .mod_socials a {
  display: block;
  float: left;
  text-align: center;
  line-height: inherit;
}
#top .mod_socials a i {
  width: 1rem;
  line-height: 1rem;
  margin: 0 2px;  
}
#top .mod_login_top {
  padding: 0 4px 0 20px;
  margin-left: 0px;
  font-weight:600;  
}
#header .mod_login_top_link, #stickyheader .mod_login_top_link{
	  display:none;
}
@media only screen and (max-width: 767px){
  #header .mod_login_top_link, #stickyheader .mod_login_top_link {
    display: flex;
    position: absolute;
    right: 80px;
    color: #8ca1c8;
    line-height: 80px;
    cursor: pointer;
    z-index: 1000;
    height: 80px;
    align-items: center;
  }
   #header .mod_login_top_link a:before{ 
    content: "\e62b";
    color: #8ca1c8;  
    font-weight:700;  
   }
}

.mmenu_trigger .label {
  visibility:hidden;
}
.mmenu_trigger {
  right: 25px;
}
#mmenu_middle{
	min-height: calc(100vh - 250px);
}
.mod_customnav{
	margin-top: 30px;
}

body:not(.home) .header .smartmenu .smartmenu-trigger .line, body:not(.home) .header .smartmenu .smartmenu-trigger .line::before, body:not(.home) .header .smartmenu .smartmenu-trigger .line::after {
  background: #000;
}

/*** LOGO ***/
@media only screen and (min-width: 768px){
	body.home:not(.fixed-header) .logo a {
	  background-image: url('/files/cto_layout/img/logos/wtb-Logo-home.png')!important;
	}
}

/*** MENU ***/
@media only screen and (min-width: 768px){
	.header.original .mainmenu {
	  position: absolute!important;
	  top: 0!important;
	  left: inherit!important;
	  transform: none!important;
	  -webkit-transform: none!important;
	  width: inherit!important;
	  right: 40px!important;
	}
	.header .mainmenu ul li a.a-level_1.trail span, .header .mainmenu ul li a.a-level_1.active span {
	  background: #ebe9e6;
	  transition: opacity 0.3s ease;
      -webkit-transition: opacity 0.3s ease;
      border-radius:5px;
	}	
}
body:not(.home) .header .mainmenu ul li a, body:not(.home) .header .mainmenu ul li ul a.active, body:not(.home) .header .ce_search_label i, body:not(.home) .header .mod_langswitcher .mod_langswitcher_inside, body:not(.home) .header .header_metanavi a,body:not(.home) .header .mod_socials a {
  color: #5f5f61;
}
.header.original .mainmenu ul li a.trail, .header.original .mainmenu ul li a.active, .header.cloned .mainmenu ul li a.trail, .header.cloned .mainmenu ul li a.active, .mod_pct_megamenu .mod_navigation a.active {
  color: #5f5f61;
}
.mainmenu ul li a {
  font-weight: 600;
}
.mainmenu ul li a:hover {
  opacity: .6;
}
.mainmenu ul li.active a.active:hover {
  opacity: 1;
}
.mainmenu ul li.active a.a-level_1.active:hover span{
  background:rgba(235,233,230,0.6);
  transition: opacity 0.3s ease;
  -webkit-transition: opacity 0.3s ease;  
}

.mainmenu ul li:not(.click_open):hover > ul{
	margin-top:-1em;
	box-shadow: 3px 3px 6px #5f5f61;  
    border-radius:5px;
}
body.fixed-header .mainmenu ul li:not(.click_open):hover > ul{
	margin-top:0em;
}
.mainmenu ul li:not(.click_open):hover ul li ul{
	margin-top:0;
}
body:not(.home) .mainmenu ul li:not(.click_open):hover > ul{
	border: 1px solid #5f5f61;

}
.mainmenu ul ul li a {
  font-size: .7rem;
}
body:not(.home) .header .mainmenu ul li ul a.active{
	font-weight:600;
}

  @media only screen and (min-width: 768px) and (max-width: 1120px){
	.mainmenu {
	  display: none;
	}
	.smartmenu {
	  display: block;
	}
  }

.mod_navigation.mainmenu li.home{
	display:none;
}
.header .mainmenu ul ul li a.active span::before{
	height:0;
}


#mmenu .mod_customnav li a {
  display: block;
  padding: 4px 40px 4px 0;
}




/*** SLIDER ***/
.ce_revolutionslider #linkToContent {
  z-index: 101;
    bottom: 80px;
}
@media only screen and (min-width: 768px){
	.ce_revolutionslider {
		/*height:80vh;*/
	}
}

/*** STÖRER ***/
.stoerer  {
  position: absolute;
  z-index: 1000;
  width: 320px;
  height: 320px;
  border-radius: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0px 10px #5f5f61;  
}
.stoerer.home-slider {
  right: 50px;
  bottom: 50px;
  text-align: center;
  color: #8ca1c8;
  background-color:#ebe9e6;
}
.stoerer.oekobeton {
  left: 60%;
  bottom: 10px;
  text-align: center;
  color: #ffffff;
  background-color:#a1be47;
}
.stoerer.ausschreibung {
  left: 60%;
  bottom: 10px;
  text-align: center;
  color: #ffffff;
  background-color:#d09301;
}
.stoerer.ausschreibung.home {
  bottom: 150px;
  right: 5%;  
  left:inherit;
}
.stoerer.ausschreibung.left {
  left: 50px;
  bottom: -70px;
  text-align: center;
  color: #ffffff;
  background-color: #d09301;
  transform: rotate(-10deg);
}
.stoerer.ausschreibung.left:hover {
    transform: rotate(-10deg) scale(1.05); 
}

.stoerer.ausschreibung.co2rechner{
	background-color: #8ca1c8;
}

.stoerer.jobs {
  left: 60%;
  bottom: 10px;
  text-align: center;
  color: #ffffff;
  background-color:#8ca1c8;
}
.stoerer.frachtzonenrechner {
  left: 60%;
  bottom: 10px;
  text-align: center;
  color: #ffffff;
  background-color:#8ca1c8;
}
.stoerer.imagefilm-oekobeton {
  left: 62%;
  top: 30px;
  text-align: center;
  color: #8ca1c8;
  background-color:#ebe9e6;
}
.stoerer.lehrlinge {
  left: 61%;
  top: 120px;
  text-align: center;
  color: #8ca1c8;
  background-color:#8ca1c8;
}
.stoerer.top-company {
  left: 61%;
  top: -80px;
  text-align: center;
  color: #8ca1c8;
}
.stoerer.nachhaltigkeit {
  left: 57%;
  top: -20px;
  text-align: center;
  color: #8ca1c8;
  background-color:#ebe9e6;
}
.stoerer.baustofflogistik {
  left: 57%;
  top: 80px;
  text-align: center;
  color: #8ca1c8;
  background-color:#ebe9e6;
}
@media only screen and (max-width: 767px){
	.stoerer.home-slider, .stoerer.oekobeton {
		display:none;
	}
	.stoerer{
		position:inherit;
		margin:0 auto;
		left:inherit!important;
		bottom:inherit!important;
		top:inherit!important;
		right:inherit!important;
	}
}
@media only screen and (min-width: 768px){
	.stoerer-bg{
		background-color:white;
	}
}

.stoerer .ce_hyperlink_lightbox_video p:not(.privacy) a{
	padding:100px;
	transform: scale(1);
}
.stoerer .ce_hyperlink_lightbox_video a:hover{
  transform: scale(1);
}
/*.stoerer .ce_hyperlink_lightbox_video a svg{
	scale:150%;
}*/

.stoerer {
	transition: All 0.3s ease;
	-webkit-transition: All 0.3s ease;
}
.stoerer:hover {
  transform: scale(1.05);
	transition: All 0.3s ease;
	-webkit-transition: All 0.3s ease;
}



.stoerer.zertifikat {
  right: 50px;
  bottom: 10px;
  text-align: center;
  color: #8ca1c8;
  background-color:#ebe9e6;  
  z-index: 1000;
  width: 230px;
  height:325px;
  border-radius: 12px;
  transform: rotate(5deg);
}
.stoerer.zertifikat.platinum_plus {
  background-color:transparent;  
  z-index: 1000;
  width: 173px;
  height:325px;
  border-radius: 12px;
  transform: rotate(5deg);
}

.home-slider.stoerer.zertifikat {
  left: 100px;
  transform: rotate(-5deg);
  bottom: -40px;
}
.beratersuche.stoerer {
  left: 50px;
  transform: rotate(-5deg);
  bottom: -100px;
}
.nachhaltigkeit_linked.stoerer {
  right: 50px;
  transform: rotate(5deg);
  bottom: -70px;
}
.home-slider.stoerer.zertifikat:hover,.beratersuche.stoerer.zertifikat:hover{
  transform: rotate(-5deg) scale(1.05)!important;
}
.nachhaltigkeit_linked.stoerer.zertifikat:hover{
  transform: rotate(5deg) scale(1.05);
}
.beratersuche.stoerer:hover{
  transform: rotate(-5deg) scale(1.05);
}

.stoerer.rotate-5 {
  transform: rotate(5deg);
}
.stoerer.rotate-5:hover {
  transform: rotate(5deg) scale(1.05);
}


/*** HEADERIMAGE ***/
.ce_headerimage_inside h1{
	text-transform:uppercase;
	  font-size: 3.5em;
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;	  
}
.ce_headerimage.hyphens h1{
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}
.ce_headerimage.no_hyphens h1{
	-moz-hyphens: none;
	-o-hyphens: none;
	-webkit-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}
@media only screen and (max-width: 767px){
	.ce_headerimage_inside h1{
		font-size: 2.5em;  
	}
}
body.home .ce_headerimage_inside h1{
	font-size: 7vw;
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;	  
	max-width: 1240px;	
}
@media only screen and (min-width: 1240px){
	body.home .ce_headerimage_inside h1{
		font-size: 4.8em;  
	}
}
@media only screen and (max-width: 767px){
	body.home .ce_headerimage_inside h1{
		font-size: 10vw;  
	}
	body.home .ce_headerimage.valign_middle .ce_headerimage_inside {
	  top: 40%;
	}	
}
.ce_headerimage.valign_middle .ce_headerimage_inside {
  top: 45%;
}
.ce_headerimage .subline {
  font-weight: 600;
  padding-bottom: 10px;
  font-size: 1.5em;    
}

body.home .ce_headerimage_inside .subline{
	font-size: 5vw;
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	text-transform:uppercase;
	padding-top:30px;
}

@media only screen and (min-width: 1240px){
	body.home .ce_headerimage_inside .subline{
		font-size: 3em;  
	}
}

@media only screen and (max-width: 767px){
	body.home .ce_headerimage_inside .subline{
		font-size: 6vw;  
		padding-top:100px;		
	}
}



.ce_headerimage.dark .content .attribute{
	color:#5f5f61!important;
}

.ce_headerimage.oekobeton-k h1 p{
	color: #8ca1c8!important;
	text-shadow: 4px 4px 4px rgb(255, 255, 255);
	line-height: initial;
	font-size:0.9em;
}

.ce_image.header-image{
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 80vw;
  transform: translate(-50%,-70%);
  width: 70vw;
}
.ce_image.header-image h1{
  position: absolute;
  left: -1000px;
}

body.home .ce_headerimage.height_xxlarge {
  height: 90vh;
}
@media only screen and (max-width: 767px){
	body.home .ce_headerimage.height_xxlarge {
	  height: calc(90vh - 80px);
	}
}

body.home .ce_headerimage .ce_headerimage_inside{
  padding-left: 0px;
  padding-right: 0px;
}

body.home .ce_revolutionslider {
  position: unset;
}

body.home .ce_headerimage #linkToContent {
    position: relative;
    width: 32px;
    height: 46px;
    border: 2px solid #fff;
    border-radius: 15px;
    position: absolute;
    bottom: 80px;
    margin: 0 auto;
    left: 0;
    right: 0;
    z-index: 101;
}


/*** FOOTER ***/
#footer .mod_socials a i{
	font-size:1rem;
	height: 2.2rem;
	width: 2.2rem;
}



/*** BOTTOM ***/
#bottom .logos{
	margin: 2rem 0;
}
#bottom .logos img{
	opacity:0.5;
	filter: grayscale(100%);
	transition: filter 0.5s ease;
	transition: opacity 0.5s ease;
    padding-bottom: 20px;	
}
#bottom .logos img:hover{
	filter: grayscale(0%);
	opacity:1;
	transition: filter 0.5s ease;
	transition: opacity 0.5s ease;
}
#bottom  .autogrid_grid.same_height > .column > .attributes{
	align-items: center;
	justify-content: center;
}
#bottom .inside {
  font-size: .55em;
}
@media only screen and (max-width: 767px){
	#bottom .logos img{
		width:50%;
	}
}


/*** DIVERS ***/
#wrapper a:not(.hyperlink_txt){
	text-decoration:underline;
}
#wrapper a:not(.hyperlink_txt):hover{
	text-decoration:none;
}

.autogrid, .autogrid_row > .column{
	margin-bottom:25px;
}
.font1 p{
	font-size:1em;
}
.block.visible{
	overflow:visible;
}


/*** LIGHTBOX ***/

#cboxTitle {
  top: 0px !important;
  font-size: .9rem;
  line-height: 1.2em;
  background: rgba(0,0,0,0.3);
}

/*** CALL TO ACTION ***/

.ce_calltoaction_v2 .ce_hyperlink a {
  border-radius:5px;
  min-width: 270px;  
}
.ce_calltoaction_v2 .ce_calltoaction_content {
  padding-right: 30%;
}
.ce_calltoaction_v2 .ce_calltoaction_content p{
	-moz-hyphens: none;
	-o-hyphens: none;
	-webkit-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}
@media only screen and (max-width: 767px){
	.ce_calltoaction_v2 .ce_hyperlink a {
	  text-decoration: none;
	  margin:30px 0 0 0;
	}
}

@media only screen and (max-width: 1024px){
	.ce_calltoaction_v2 .headline{
		line-height:inherit;
	}
	.ce_calltoaction_v2 .ce_calltoaction_content {
	  padding: 0!important;
	  text-align: center;
	}
	.ce_calltoaction_v2 .ce_hyperlink {
	  position: inherit;
	  right: inherit;
	  top: inherit;
	  -webkit-transform: inherit;
	  transform: inherit;
	}
	.ce_calltoaction_v2 .ce_hyperlink:hover {
	  -webkit-transform: scale(1.05);
	  transform: scale(1.05);
	}
}
@media only screen and (min-width: 1025px){
	.ce_calltoaction_v2 .ce_hyperlink {
	  top: 35%;
	  -webkit-transform: inherit;
	  transform: inherit;
	}
}


body.betonbestellung .ce_calltoaction.mb-0.mb-0-m .ce_calltoaction_inside {
    padding-bottom: 15px;
}
body.betonbestellung .ce_calltoaction.mb-0.mb-0-m .ce_calltoaction_inside h4{
    padding-bottom: 30px;
}
body.betonbestellung .ce_calltoaction.mt-0.mt-0-m .ce_calltoaction_inside{
    padding-bottom: 60px;
    padding-top:15px;
}
body.betonbestellung .ce_calltoaction.mt-0.mt-0-m .ce_hyperlink {
  top: 0%;
  -webkit-transform: translateY(-0%);
  transform: translateY(-0%);
}
body.betonbestellung .ce_calltoaction.mb-0.mb-0-m .ce_hyperlink {
  top: 50%;
}
body.betonbestellung .ce_calltoaction .ce_hyperlink:hover{
  -webkit-transform: translateY(0%) scale(1.05);
  transform: translateY(0%) scale(1.05);
}
body.betonbestellung .ce_calltoaction.mt-0.mt-0-m .ce_hyperlink:hover{
  -webkit-transform: scale(1.05)!important;
  transform: scale(1.05)!important;
}



/*** DOWNLOADLISTE ***/
.ce_headline_w_buttons.download h5{
	font-size:0.95em;
	padding: 20px 0;
}

.ce_headline_w_buttons.download a{
	border-radius:5px;
	text-decoration:none!important;
	color: #5f5f61 !important;
	border-color: rgba(255,255,255,.3) !important;
	box-shadow: 0px 0px 8px rgb(150,150,150);
	margin: 0 20px;
	font-weight:700;
	padding:5px 15px;
	background-color:#ebe9e6!important;
}
.ce_headline_w_buttons.download.karriere a{
	color: #5f5f61!important;
}
.ce_headline_w_buttons.download a i{
	color: #8ca1c8!important;
}
.ce_headline_w_buttons.download a:hover{
	transform: scale(1.05);
}
.ce_headline_w_buttons.download a:hover{
	background-color: #ffffff!important;
}

@media only screen and (max-width: 767px){
	.ce_headline_w_buttons.download h5 {
	  margin-bottom: 0;
	  text-align: center;
	}
	.ce_headline_w_buttons .buttons {
	  margin-bottom: 25px;
	}
}




body.home .ce_countup i {
  font-size: 4rem;
  line-height: normal;
}
@media only screen and (min-width: 1024px){
	.oekobeton-teaser{
		min-height: 500px;
	}
}


/*** BUTTONS ***/
.ce_hyperlink{
	transition: transform 0.5s;
}
.ce_hyperlink:hover{
	transform: scale(1.05);
	transition: transform 0.5s;
	transform-origin: center;
}

.ce_hyperlink.icon-alt i{
  position: absolute;
  bottom: 8px;
  left: calc(50% - 10px);
  font-size: 1.5em;
  color:#8ca1c8!important;
}
.ce_hyperlink.icon i{
    position: absolute;
	left: 20px;
	top: calc(50% - 0.5em);
	font-size: 2.5em;
    color:#8ca1c8!important;  
}
.ce_hyperlink.icon a{
  line-height: 1.5em;
  padding-left: 50px;
}
@media only screen and (max-width: 767px){
	.ce_hyperlink.icon i{
		position:inherit;
		left: inherit;
		top: inherit;
		font-size: 1.5em;
		display:block;
		padding-bottom:5px;
	}
	.ce_hyperlink.icon a{
	    padding-left:15px;
	}
}
.ce_hyperlink a:hover, a.btn:hover {
  opacity: 1;
}

.ce_hyperlink a{
	box-shadow: 0px 0px 8px rgb(150,150,150);
	margin: 10px;
	padding:5px 15px;
}

.ce_hyperlink.grey a{
	background: rgb(235,233,230);
	border-color: rgb(235,233,230);
	color: #5f5f61!important;
}
.ce_hyperlink.grey a:hover{
	background: white;
	border-color: white;
}

.ce_hyperlink.icon2 a{
  line-height: 2em;
}

.ce_hyperlink.btn-size-full a {
	padding: 17px 90px;
	font-size: 1.2em;
}
@media only screen and (max-width: 767px){
	.ce_hyperlink.btn-size-large a, .ce_hyperlink.btn-size-full a, p.back a {
		padding: 17px 50px;
		font-size: 1em;		
	}
	.ce_hyperlink.btn-size-large a span, .ce_hyperlink.btn-size-full a span{
		-moz-hyphens: none;
		-o-hyphens: none;
		-webkit-hyphens: none;
		-ms-hyphens: none;
		hyphens: none;
	}
}


/*** GRID ***/
.autogrid_row > .column > .attributes.p-s {
  padding: 60px;
}



/*** IMAGE TEXT ***/

.ce_text_image_bar.image-white .imagebox {
	background-color:white;
}
.ce_text_image_bar.image-green .imagebox {
	background-color:#a1be47;
}
.ce_text_image_bar.image-blue .imagebox {
	background-color:#8ca1c8;
}
.ce_text_image_bar.contain .imagebox{
	background-size:contain;
	background-origin: content-box;
	padding:60px;
}
.ce_text_image_bar.contain .mobile_image{
	padding:30px;
}

/*** BILTEXT ***/

.bildtext{
	font-size:0.75em;
	line-height:1em;
}


/*** ZITAT ***/

.ce_text.zitat{
	overflow:visible;
	margin-bottom: 0.5em!important;
}
.ce_text.zitat .image_container.float_left img{
	position: relative;
	left: -10px;
	top: -20px;
}
.ce_text.zitat .image_container.float_left{
	margin: 0 10px 0 0;
}
.ce_text.zitat p{
	font-size:1.2em;
	letter-spacing:0.02em;
	line-height:1.2em!important;
	font-style:italic;
	margin-left:110px;
	padding-bottom: 20px;
	-moz-hyphens: none;
	-o-hyphens: none;
	-webkit-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
    text-align:left;
	font-weight: 500;    
}
.ce_text.zitat.no-hyphens p{
	-moz-hyphens: inherit;
	-o-hyphens: inherit;
	-webkit-hyphens: inherit;
	-ms-hyphens: inherit;
	hyphens: inherit;
}

body:not(.home) .ce_text.zitat p{
	color:#8ca1c8;
}
body:not(.home) .ce_text.zitat figure.image_container{
	position:absolute;
}

@media only screen and (max-width: 767px){
	.ce_text.zitat .image_container.float_left img{
		width:75px;
		height:auto;
	}
	.ce_text.zitat p{
		margin-left:90px;
	}
	.ce_text.zitat{
		margin-top:30px;
		margin-bottom: 30px!important;
	}
	.ce_text.zitat .image_container.float_left img{
		left: 0px;
	}	
}

/******************************************/
body:not(.home) .ce_text:not(.noch-fragen).width-l {
  max-width: 750px;
  margin-bottom:2em;
}
.ce_text ul li, .ce_list ul li {
  list-style-type: square;
}
.ce_text ul li::marker, .ce_list ul li::marker  {
	color:#8ca1c8; 
}
.txt-color-white .ce_text ul li::marker, .txt-color-white .ce_text .ce_list ul li::marker, .color-white .ce_text ul li::marker, .ce_list ul li::marker  {
	color:#ffffff; 
}
/*.ce_text.block{
	margin:20px 0;
}*/

/*** ÜBERSCHRIFTEN ***/
body.home h2{
	font-size:3rem;
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;	  
}
h2:not(.schreibschrift), h3:not(.schreibschrift){
	text-transform:uppercase;
}
#footer h4{
	font-size: 1.1rem;
}
h2.schreibschrift{
	font-size:2.5em;
	line-height: 1.1em;	
}



/*** BILDER ***/
.ce_image.hummel2{
	position:absolute;
	bottom:0;
	right:10px;
	transform:scaleX(-1);
	margin-bottom: -105px;
	z-index: 1;
}

.ce_image.hummel3{
	position:absolute;
	top:0;
	left:30px;
	transform:rotate(-90deg);
	margin-top: -100px;
	z-index: 1;
}

.scale05,.ce_image.scale05{
  transition: All 0.3s ease;	
}

.scale05:hover,.ce_image.scale05:hover{
	transform:scale(1.05);
  transition: All 0.3s ease;	
}
.ce_image.scale05:hover{
	transform:scale(1.05);
    transition: All 0.3s ease;	
}
.nachhaltigkeit_linked.stoerer:hover{
	transform:rotate(5deg) scale(1.05);
    transition: All 0.3s ease;		
}
.zertifikat.stoerer.scale05:hover{
	transform:rotate(5deg) scale(1.05);
    transition: All 0.3s ease;		
}


@media only screen and (max-width: 767px){
	.ce_image.hummel2{
		right:40px;
		margin-bottom: -45px;
		z-index: 1;
		width:100px;
	}
		.ce_image.hummel3{
		top:15px;
		margin-bottom: -130px;
		width:120px;
	}
}


.border-grey figure{
	border: 1px solid #5f5f61;
}
.border-white figure{
	border: 1px solid #ffffff;
}


/*** SUCHE STARTSEITE ***/
.ce_form.suche_startseite{
	font-size:0.7em;
}
.ce_form.suche_startseite input, .ce_form.suche_startseite textarea, .ce_form.suche_startseite select {
  font-size: .7rem;
}
.ce_form.suche_startseite form div.widget {
  margin-bottom: 10px;
}
.ce_form.suche_startseite form .widget-submit {
  margin-top: 30px;
}
.ce_form.suche_startseite label {
  font-weight: 700;
}
.ce_form.suche_startseite .line{
	width:100%;
	corder-top:1px solid rgb(95,95,97);
}
.ce_form.suche_startseite button.submit{
	height:auto;
}


/*** FANCYBOX ***/
.ce_fancybox.style2 .overlay {
    height: 100%;
}
/*@media only screen and (max-width: 1024px){
	.ce_fancybox.style2 {
		min-height:100vw;
	}
}*/
.ce_fancybox.style2 .overlay {
  background: linear-gradient(to bottom,rgba(95,95,97,0),rgba(95,95,97,0.8) 100%);
}
.ce_fancybox.style2:hover .overlay {
  background: linear-gradient(to bottom,rgba(0,0,0,0),#8ca1c8 80%)!important;
}
.ce_fancybox hover .headline_wrap {
  transform: translateY( calc(-2 * var(--ce_fancybox_125145)) );
}
.autogrid_row.fancybox > .column {
  padding: 20px;
}
/*** FANCYBOX ÖKOBETON STYLE 3 ***/
.ce_fancybox.style3 .overlay {
  background: rgb(255,255,255);
  opacity: 0.5;
}
.ce_fancybox.style3 p {
  font-size: 1rem;
}
.ce_fancybox.style3, .ce_fancybox.style3 h1, .ce_fancybox.style3 h2, .ce_fancybox.style3 h3, .ce_fancybox.style3 h4, .ce_fancybox.style3 h5, .ce_fancybox.style3 h6, .ce_fancybox.style3 .link_text span::before{
  color: rgb(95,95,97);
}
.ce_fancybox.style3 .link_text span::after {
  background-color: rgb(95,95,97);
}
.ce_fancybox.style3 .link_text span{
	border-color: rgb(95,95,97);
}
/*** FANCYBOX ÖKOBETON STYLE 2 ***/
.ce_fancybox.style2.oekobeton .overlay, .ce_fancybox.style2.oekobeton:hover .overlay {
  background: rgb(255,255,255);
  opacity: 0.5;
  transition:inherit;
}
.ce_fancybox.style2.oekobeton.fancy_box_color_second:hover .overlay {
	background: linear-gradient(to top,rgb(255, 255, 255),rgba(255, 255, 255,0.5) 100%)!important;
	opacity:1;
}
.ce_fancybox.style2.oekobeton .inside {
  align-self: auto;
  width: 100%;
}
.ce_fancybox.style2.oekobeton .inside .headline_wrap {
  transform: inherit;
}

.ce_fancybox.style2.oekobeton .inside .text {
  transform: inherit;
  opacity:1;
  color: rgb(95,95,97);
	bottom: inherit;
	margin-top: 0; 
	position: inherit;	
}
.ce_fancybox.style2.oekobeton .inside .text .link_text{
  padding: 20px 0;	
}
.ce_fancybox.style2.oekobeton .link_text span::before{
  color: rgb(95,95,97);
}
.ce_fancybox.style2.oekobeton .link_text span::after {
  background-color: rgb(95,95,97);
}
.ce_fancybox.style2.oekobeton .link_text span{
	border-color: transparent;
}
.ce_fancybox.style2.oekobeton:hover .link_text span {
  border-color: transparent;
}
.ce_fancybox.style2.oekobeton {
  padding: 7%;
}
.ce_fancybox.style2.oekobeton .link_text span::before {
  right: -10px;
}
.ce_fancybox.style2.oekobeton:hover .link_text span::before {
  transform: inherit;
}
.ce_fancybox.style2.oekobeton .link_text span::after {
	opacity: 1;
	left: 22px;
}
.ce_fancybox.style2.oekobeton:hover .link_text span::after {
	transform: translateX(0px);
	left: -6px;
	transform: inherit;	
}

.ce_fancybox.hyphens h4{
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

/*** SONDERSCHRIFT ***/
.schreibschrift{
	font-family: 'Caveat', sans-serif;
}
@media only screen and (max-width: 767px) {
  .schreibschrift.font-size-l, .schreibschrift.font-size-l p {
    font-size: 2.5rem;
  }
}


/*** NOCH FRAGEN ***/
.noch-fragen h2{
	font-family: 'Caveat', sans-serif;
	color:#8ca1c8;
	text-transform:inherit;
	font-size:2.5rem;
	line-height: 1.1em;		
}


/*** AKKORDEON ***/
.ce_accordion_v2 .toggler, .ce_accordion.style2 .toggler {
	background:white;
}
.ce_accordion_v2 .accordion, .ce_accordion.style2 .accordion {
  padding: 25px;
  background: white;
}

@media only screen and (max-width: 767px){
	.column.kontakt {
	    margin-top:30px;
	}
}


/*** GALERIE ***/
.ce_gallery li:hover .content {
  opacity: 0.7;
}

/*** ÖKOBETON FARBEN ***/

body.oekobeton a:not(.hyperlink_txt), body.oekobeton .ce_hyperlink i, body.oekobeton .ce_accordion .toggler::before, body.oekobeton .ce_hyperlink.icon i {
	color:#a1be47;
}
body.oekobeton .txt-color-white a{
	color:#ffffff;
	text-decoration:none!important;
}
body.oekobeton .ce_hyperlink.icon i {
	color:#a1be47!important;
}
body.oekobeton ce_accordion_v2 .toggler.ui-state-active, body.oekobeton .ce_accordion.style2 .toggler.ui-state-active {
  background: #a1be47;
}
body.oekobeton.plus .bg-accent .ce_bgimage-outer, body.oekobeton.plus .ce_fancy_divider.oekobeton-plus .ce_fancy_divider_inside{
	background: linear-gradient(to right, #a1be47, #8ca1c8)!important;
}
@media only screen and (max-width: 767px){
	body.oekobeton.plus .stoerer-bg.bg-accent {
	    background: linear-gradient(to right, #a1be47, #8ca1c8)!important;
	}
}

body.oekobeton.plus .ce_hyperlink_lightbox_video svg polygon{
	fill:#8ca1c8;
}

body.oekobeton.plus .ce_hyperlink_lightbox_video svg circle{
	stroke:#8ca1c8;
}





/*** IMAGE CONTAINER ***/

.image_container .caption {
  background: #ffffff;
  color: #5f5f61;
  font-size: 60%;  
}

/*** EXTERNER LINK ***/
.externer_link::before {
  content: "\f0da";
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 14px;
  font-size: inherit;
  text-rendering: auto;
  float: left;
  margin-top: 5px;  
}
.externer_link p{
	margin-left:20px;
}


/*** KONTAKT / Noch Fragen ***/
.kontakt a{
	text-decoration:none!important;
	color:#5f5f61;
}
.kontakt a:hover{
	color:#8ca1c8;
}
.kontakt .ce_iconbox.version3.xsmall i {
  font-size: 1.3em;
  width: 35px;
  text-align: right;
  padding-right:10px;
}
@media only screen and (max-width: 767px){
	.kontakt .ce_iconbox.version3 .ce_iconbox_inside {
	    justify-content: center;
	}
}
/*** KONTAKT / Beratersuche ***/
.kontakt .day, .kontakt .time{
	display:inline-block;
}
.kontakt .day{
	width:150px;
	font-weight:500;	
}
.kontakt .contentwrap{
	padding-right:0px;
}

@media only screen and (max-width: 767px){
	.pumpenservice .column.kontakt{
	    margin-top:0;
	}
	.pumpenservice .column{
	    margin-top:30px;
	}
}


/***Switch Tooglle ***/
fieldset.switch input[type=checkbox]{
  height: 0;
  width: 0;
  visibility: hidden;
}

fieldset.switch label {
  cursor: pointer;
  text-indent: -9999px;
  width: 40px;
  height: 20px;
  background: #5f5f61;
  display: block;
  border-radius: 20px;
  position: relative;
}

fieldset.switch label:after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 18px;
  transition: 0.3s;
}

body.home input:checked + label {
  background: #5f5f61;
}

body.home input:checked + label:after {
  left: calc(100% - 1px);
  transform: translateX(-100%);
}

label:active:after {
  width: 130px;
}
form fieldset{
	border:0px;
	padding:0;
	margin-bottom: 0px;
}
body.home fieldset legend{
	display:none;
}
fieldset.switch{
	line-height:0;
}

/*switch styles*/

div.btn-container{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

label.btn-color-mode-switch-inner {
    font-size: 13px;
    color: #424242;
    font-weight: 500;
    line-height:15px;
}

.btn-color-mode-switch{
    display: inline-block;
    margin: 0px;
    position: relative;
    left:0px;
}
@media only screen and (max-width: 767px) {
	.btn-color-mode-switch{
	    left:0px;
	}
}

.btn-color-mode-switch > label.btn-color-mode-switch-inner{
    margin: 0px;
    width: 300px;
    height: 30px;
    background: #E0E0E0;
    border-radius: 26px;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    /*box-shadow: 0px 0px 8px 0px rgba(17, 17, 17, 0.34) inset;*/
    display: block;
}

.btn-color-mode-switch > label.btn-color-mode-switch-inner:before{
    content: attr(data-on);
    position: absolute;
    font-size: 12px;
    font-weight: 500;
    top: 8px;
    right: 30px;

}

.btn-color-mode-switch > label.btn-color-mode-switch-inner:after{
    content: attr(data-off);
    width: 150px;
    height: 16px;
    background: #fff;
    border-radius: 26px;
    position: absolute;
    left: 2px;
    top: 2px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0px 0px 6px -2px #111;
    padding: 5px 0px;
}

.btn-color-mode-switch > .alert{
    display: none;
    background: #FF9800;
    border: none;
    color: #fff;
}

.btn-color-mode-switch input[type="checkbox"]{
    cursor: pointer;
    width: 300px!important;
    height: 30px;
    opacity: 0;
    position: absolute;
    top: 0;
    z-index: 1;
    margin: 0px;
    left:0;
}

.btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner{
    background: #ebe9e6;
    color: #5f5f61;
}

.btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner:after{
    content: attr(data-on);
    left: 298px;
    background: #ffffff;
}

.btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner:before{
    content: attr(data-off);
    right: auto;
    left: 40px;
}

.btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner{
    /*background: #66BB6A; */
    /*color: #fff;*/
}

.btn-color-mode-switch input[type="checkbox"]:checked ~ .alert{
    display: block;
}


/*** Portfolio-List ***/
.mod_portfoliolist_v5 .item .image{
	webkit-transition: transform 0.3s ease;
	transition: transform 0.3s ease;
}
.mod_portfoliolist_v5 .item .image:hover{
	transform: scale(1.1);
}

.mod_portfoliolist_v5 .item .image::after {
  background: rgba(0,0,0,0.3);
}
.mod_portfoliolist_v5 .h5{
	font-size: 1em;
}
/* =============================================================================
 * tabelle energiekostenzuschlage
 * ========================================================================== */
 
 
.ce_table.energiekostenzuschlaege th {
	text-align:left;	
}
.ce_table.energiekostenzuschlaege th, .ce_table.energiekostenzuschlaege td{
	font-size:0.9em;
	line-height: 1.5em;	
}
.ce_table.energiekostenzuschlaege i.fa-info-circle{
	color: #8ca1c8;
}

@media only screen and (max-width: 767px)  {
		
	.ce_table.energiekostenzuschlaege table{
		width:100%;
		font-size:16px;
	}
	.ce_table.energiekostenzuschlaege table tbody {
	    width: 100%;
	    display: block;
	}

	/* Force table to not be like tables anymore */
.ce_table.energiekostenzuschlaege table, .ce_table.energiekostenzuschlaege thead, .ce_table.energiekostenzuschlage tbody, .ce_table.energiekostenzuschlaege th, .ce_table.energiekostenzuschlaege td, .ce_table.energiekostenzuschlaege tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	.ce_table.energiekostenzuschlaege thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	.ce_table.energiekostenzuschlaege tr {
		border: 1px solid #eeeeee;
	}
	
	.ce_table.energiekostenzuschlaege td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 		
		position: relative;
		text-align:left; 
	}
	.ce_table.energiekostenzuschlaege td.col_last { 
		/* Behave  like a "row" */
		border-bottom: 0px; 
	}	
	.ce_table.energiekostenzuschlaege td:before { 
		font-weight:700;
		white-space: pre-wrap;
		margin-right:10px;
	}	

	.ce_table.energiekostenzuschlaege td.col_0 {
		background: #8ca1c8;
		color:white;
		font-weight:700;
	}
	/*
	Label the data
	*/
	
	.ce_table.energiekostenzuschlaege td.col_0:before {
			content: "KW:";
		}
	.ce_table.energiekostenzuschlaege td.col_1:before {
			content: "Lieferdatum:";
		}		
	.ce_table.energiekostenzuschlaege td.col_2:before {
			content: "Beton:";
		}
	.ce_table.energiekostenzuschlaege td.col_3:before {
			content: "Kies:";
		}
	.ce_table.energiekostenzuschlaege td.col_4:before {
			content: "Bodenaushub:";
		}		
	.ce_table.energiekostenzuschlaege td.col_5:before {
			content: "Baurestmasse:";
		}
	.ce_table.energiekostenzuschlaege td.col_6:before {
			content: "Fracht:";
		}
	.ce_table.energiekostenzuschlaege td.col_7:before {
			content: "Dieselpreiskorridor 2022:";
		}
	.ce_table.energiekostenzuschlaege td.col_2:after {
			content: " (€/m3)";
		}
	.ce_table.energiekostenzuschlaege td.col_3:after {
			content: " (€/t)";
		}
	.ce_table.energiekostenzuschlaege td.col_4:after {
			content: " (€/t)";
		}		
	.ce_table.energiekostenzuschlaege td.col_5:after {
			content: " (€/t)";
		}
	.ce_table.energiekostenzuschlaege td.col_6:after {
			content: " (%)";
		}
}

	/*
	Logos "über Wopfinger"
	*/
	
@media only screen and (max-width: 767px) {
  .autogrid_row.logos img{
    padding: 15px !important;
  }
}

	/*
	Order Flex-Box
	*/

@media only screen and (min-width: 768px) {
  .order1{
	    order:1;
  }
    .order2{
	    order:2;
  }
    .order3{
	    order:3;
  }
    .order4{
	    order:4;
  }
    .order5{
	    order:5;
  }
    .order6{
	    order:6;
  }
    .order7{
	    order:7;
  }
    .order8{
	    order:8;
  }
    .order9{
	    order:9;
  }
    .order10{
	    order:10;
  }
    .order11{
	    order:11;
  }
    .order12{
	    order:12;
  }
    .order13{
	    order:13;
  }
    .order14{
	    order:14;
  }
    .order15{
	    order:15;
  }
    .order16{
	    order:16;
  }
    .order17{
	    order:17;
  }
    .order18{
	    order:18;
  }
    .order19{
	    order:19;
  }
    .order20{
	    order:20;
  }
}
	/*
	Logos "über Wopfinger"
	*/
.ce_teambox_wopfinger .teambox_inside {
  background: #ebe9e6!important;
  font-size:0.95em;
}	
.ce_teambox_wopfinger .teambox_inside .function {
  font-size: 0.8em;
  text-transform: uppercase;
  font-weight:600;
  margin-bottom: 0px;  
}
.ce_teambox_wopfinger .teambox_inside .function2 {
  line-height: 1.2em;
  margin-bottom: 20px;  
}
.ce_teambox .name.h5 {
  font-weight: bold;
  margin: 5px 0 5px 0;
  color:#8ca1c8;
  font-size:1.15em;
}
.ce_teambox_wopfinger .teambox_inside i.fa{
  width:25px;
  text-align: center;
}
.ce_teambox_wopfinger .teambox_inside a{
  text-decoration:none!important;
  color:#5f5f61;
}
.ce_teambox_wopfinger .teambox_inside a:hover{
  color:#8ca1c8;
}
.ce_teambox_wopfinger .teambox_inside img {
  border-bottom: 1px solid white;
}
/*** SUCHE ***/
body.suche h3{
	font-size: 1.5em;
	margin-bottom:0;
}
body.suche p.url{
	font-size:0.8em;
}
/*** REFERENZEN ***/
body.referenzen_detail h1{
	  text-shadow: 2px 2px 4px #000000;
	-moz-hyphens: none;
	-o-hyphens: none;
	-webkit-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

body.referenzen_detail h1{
	font-size:2.5em;
}
@media only screen and (max-width: 767px) {
	body.referenzen_detail h1{
		font-size:2em!important;
	}
}

p.back a{
  background: #8ca1c8;
  border-color: #8ca1c8;
  border-radius:5px;
  padding: 17px 90px;
  font-size: 1.2em;
  color:white;
  text-decoration:none!important;
  box-shadow: 0px 0px 8px rgb(150,150,150);
  margin: 10px;
  font-weight:700;
}
p.back{
	text-align:center;
	margin:40px 0;
	transition: transform 0.5s;
}
p.back:hover{
	  transform: scale(1.05);
	  transition: transform 0.5s;
	  transform-origin: center;
}
.ce_portfoliofilter.default a{
	border-radius:5px;
	text-decoration:none!important;
}

@media only screen and (max-width: 767px){
	p.back a {
		padding: 17px 50px;
		font-size: 1em;		
	}
}
/*** Portfoliolist ***/
.mod_portfoliolist_v5 .item .info .title, .mod_portfoliolist_v5 .item .info .subline {
	  margin-left: 0;
	  opacity: 1;
	  text-shadow: 2px 2px 4px #000000;
	  font-weight:500;
}
.mod_portfoliolist_v5 .item .info .subline {
  font-size: 0.55em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background-color: rgba(235,233,230,1);
  display: initial;
  padding: 3px 5px;
  color:rgb(85, 85, 85);
  text-shadow: none;
}

/*** Portfoliolist Akkordeon ***/
.mod_portfoliolist_v5.akkordeon .item a{
	position:relative;
}




@media only screen and (max-width: 767px) {
	.mod_portfoliolist_v5 .item .image::after {
	  opacity: 1;
	}
	.mod_portfoliolist_v5 .item:hover .image::after {
	  opacity: 0.5;
	}	
	.mod_portfoliolist_v5 .item .info .title, .mod_portfoliolist_v5 .item .info .subline {
	  margin-left: 0;
	  opacity: 1;
	  text-shadow:inherit;
	}
}
/*** BERATERSUCHE ***/

body.berater h2{
	text-transform:inherit;
	margin-bottom:0;
	hyphens: initial;
}
body.berater h2 .produkt {
  text-transform: uppercase;
  color: #8ca1c8;
  font-size: 0.4em;
  font-weight: 500;
  display:block;
}
@media only screen and (max-width: 767px) {
	body.berater h2 .produkt {
	  font-size: 0.55em;
	}	
}
body.berater .open{
	margin-top:20px;
}
body.berater .kontakt .buero{
	font-weight:500;
}
body.berater .ansprechpartner h5{
	padding-top:30px;
	border-top: 1px solid white;
	margin-bottom: 0px;
	display:inline-block;
}
body.berater .ansprechpartner p strong{
	font-weight:500;
	font-size:1.1em;
}
body.berater .ansprechpartner .tel, body.berater .ansprechpartner .email{
	font-weight:500;
}

body.berater .ce_hyperlink {
	color:#ffffff;
    margin-bottom: 20px;
    width:fit-content;
}

body.berater .ce_hyperlink a{
	text-decoration:none!important;
	color:#ffffff;
}
body.berater .ce_hyperlink a:hover{
	color:#ffffff;
}


@media only screen and (max-width: 767px) {
	body.berater .ansprechpartner{
		text-align:left;
	}
	body.berater  .kontakt .ce_iconbox.version3 .ce_iconbox_inside {
	    justify-content: left;
    }
}

.mod_customcataloglist.cc_berater_und_standorte .entries {
  margin-left: -15px;
  margin-right: -15px;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.mod_customcataloglist.cc_berater_und_standorte .entry {
  flex: 0 0 50%;
  flex: 0 0 calc((100% / 12) * 6);
  max-width: calc((100% / 12) * 6);
  padding-left: 15px;
  padding-right: 15px;
  flex-grow: 1;
  width: 100%;
  position: relative;
  box-sizing: border-box;
  margin-bottom:25px;
}

.mod_customcataloglist.cc_berater_und_standorte .entry .platin{
	background: url('/files/cto_layout/img/nachhaltigkeit/csc-zertifikate/certified_platinum_small.gif') top 25px right 25px no-repeat;
	background-size: 100px auto;
}
.mod_customcataloglist.cc_berater_und_standorte .entry .gold{
	background: url('/files/cto_layout/img/nachhaltigkeit/csc-zertifikate/certified_gold_small.gif') top 25px right 25px no-repeat;
	background-size: 100px auto;
}
.mod_customcataloglist.cc_berater_und_standorte .entry .silber{
	background: url('/files/cto_layout/img/nachhaltigkeit/csc-zertifikate/certified_silver_small.gif') top 25px right 25px no-repeat;
	background-size: 100px auto;
}
.mod_customcataloglist.cc_berater_und_standorte .entry .bronze{
	background: url('/files/cto_layout/img/nachhaltigkeit/csc-zertifikate/certified_bronze_small.gif') top 25px right 25px no-repeat;
	background-size: 100px auto;
}
.mod_customcataloglist.cc_berater_und_standorte .entry .csc-zertifikat_link{
	position:absolute;
	width:100px;
	height:140px;
	right:25px;
	top:25px;
}


@media only screen and (max-width: 767px) {
	.mod_customcataloglist.cc_berater_und_standorte .entry{
	  flex: 0 0 100%;
	  max-width: 100%
	}
}

.mod_customcataloglist.cc_berater_und_standorte .list-options {
  margin-bottom: 14px;
  display: inline-block;
  border: 1px solid rgb(220,220,220);
  border-radius: 2px;
  overflow: hidden;
}

.mod_customcataloglist.cc_berater_und_standorte .list-options i.fa-th {
  background: rgb(250,250,250);
}
.mod_customcataloglist.cc_berater_und_standorte .list-options i.fa-list {
  background: rgb(240,240,240);
}  
.mod_customcataloglist.cc_berater_und_standorte .list-options i.fa-th {
  border-left: 1px solid rgb(220,220,220);
}
.mod_customcataloglist.cc_berater_und_standorte .list-options i {
  line-height: 35px;
  width: 50px;
  text-align: center;
  cursor: pointer;
  float: left;
}
.mod_customcataloglist.cc_berater_und_standorte.grid-view .list-options i.fa-list {
  background: rgb(250,250,250);
}
.mod_customcataloglist.cc_berater_und_standorte.grid-view .list-options i.fa-th {
  background: rgb(240,240,240);
}
mod_customcataloglist.cc_berater_und_standorte .list-options i {
  line-height: 35px;
  text-align: center;
  cursor: pointer;
}

@media only screen and (min-width: 768px) {
	
	#beraterliste_switch.mod_customcataloglist.cc_berater_und_standorte:not(.grid-view) .entry{
	  flex: 0 0 100%;
	  flex: 0 0 calc((100% / 12) * 12);
	  max-width: calc((100% / 12) * 12);
	  padding-left: 15px;
	  padding-right: 15px;
	  flex-grow: 1;
	  width: 100%;
	  position: relative;
	  box-sizing: border-box;
	  margin-bottom:25px;
	}
	#beraterliste_switch.mod_customcataloglist.cc_berater_und_standorte:not(.grid-view) .grid-block{
		display:inline-grid;
		margin-right:3%;
		font-size:0.9em;
	}
	#beraterliste_switch.mod_customcataloglist.cc_berater_und_standorte:not(.grid-view) .grid-block.first{
		width:34%;
	}
	#beraterliste_switch.mod_customcataloglist.cc_berater_und_standorte:not(.grid-view) .grid-block.second,
	#beraterliste_switch.mod_customcataloglist.cc_berater_und_standorte:not(.grid-view) .grid-block.third{
		width:28%;
	}	
	#beraterliste_switch.mod_customcataloglist.cc_berater_und_standorte:not(.grid-view) .column.mitarbeiterbild{
		display:none;
	}
	#beraterliste_switch.mod_customcataloglist.cc_berater_und_standorte:not(.grid-view) .column{
		flex: 0 0 100%!important;
	    flex-grow: 0;
		max-width: 100%!important;
	}
	#beraterliste_switch.mod_customcataloglist.cc_berater_und_standorte:not(.grid-view) h4,
	#beraterliste_switch.mod_customcataloglist.cc_berater_und_standorte:not(.grid-view) h2{
		display:inline-block;
	}
	#beraterliste_switch.mod_customcataloglist.cc_berater_und_standorte:not(.grid-view) h4{
		font-size:1em;
	}
	#beraterliste_switch.mod_customcataloglist.cc_berater_und_standorte:not(.grid-view) h4:before{
		content: " ( ";
	}	
	#beraterliste_switch.mod_customcataloglist.cc_berater_und_standorte:not(.grid-view) h4:after{
		content: " )";
	}	
	#beraterliste_switch.mod_customcataloglist.cc_berater_und_standorte:not(.grid-view) .ansprechpartner h5{
		border:0px;
		padding-top:0px;
		font-size:inherit;
	}
	#beraterliste_switch.mod_customcataloglist.cc_berater_und_standorte:not(.grid-view) .ansprechpartner h5:after{
		content: ":";
	}	
	#beraterliste_switch.mod_customcataloglist.cc_berater_und_standorte:not(.grid-view) .ansprechpartner p strong{
		font-size:1em;
	}
	
	#beraterliste_switch.mod_customcataloglist.cc_berater_und_standorte:not(.grid-view) .open{
		margin-top:0px
	}
	
	#beraterliste_switch.mod_customcataloglist.cc_berater_und_standorte:not(.grid-view) .ce_hyperlink {
		position:absolute;
	    margin-top:0;
	    margin-right:0;
	    top:30px;
	    right:55px;
	    display:none;
	}
	#beraterliste_switch.mod_customcataloglist.cc_berater_und_standorte:not(.grid-view) .ce_iconbox{
		line-height:initial;
	}
	
	.mod_customcataloglist.cc_berater_und_standorte.grid-view .entry .platin .title,
	.mod_customcataloglist.cc_berater_und_standorte.grid-view .entry .gold .title,
	.mod_customcataloglist.cc_berater_und_standorte.grid-view .entry .silber .title,
	.mod_customcataloglist.cc_berater_und_standorte.grid-view .entry .bronze .title{
		max-width:75%;
	}
}

/*** Suchergebnisse ***/

.suchergebnisse h3{
	text-transform:inherit;
}
.suchergebnisse{
	margin:2em 0;
}

/*** Filter ***/
.mod_customcatalogfilter.cc_berater_und_standorte form div.widget{
  margin: 1%;
  min-width: 23%;
}
.mod_customcatalogfilter.cc_berater_und_standorte .filter_geolocation.standorteingabe .range_wrapper{
	display:none;
}
.mod_customcatalogfilter.cc_berater_und_standorte .filterform form .formbody{
	display:flex;
	align-items: flex-end;
}
.mod_customcatalogfilter.cc_berater_und_standorte form input{
	padding: 13px;
}
.mod_customcatalogfilter.cc_berater_und_standorte form fieldset legend {
  background-color: #fff;
  color: #5f5f61;
  font-weight: 600;
}
.mod_customcatalogfilter.cc_berater_und_standorte form input, .mod_customcatalogfilter.cc_berater_und_standorte form select {
  color: #5f5f61;
}

.mod_customcatalogfilter.cc_berater_und_standorte .filterform form .clearall .fa{
	  color: #8ca1c8;
}
.mod_customcatalogfilter.cc_berater_und_standorte .filterform form button.clearall {
  background-color: transparent;
  color: #8ca1c8;
  font-weight:500;
  padding: 0;
  margin: 0;
  width: auto;  
}
.mod_customcatalogfilter.cc_berater_und_standorte .filterform form button.clearall:before {
  content: '\f00d';
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 14px;
  font-size: inherit;
  text-rendering: auto;  
  color: #8ca1c8;
  margin-right:5px;
}

@media only screen and (max-width: 767px) {
	.mod_customcatalogfilter.cc_berater_und_standorte .filterform form .formbody {
	  display: block;
	  align-items: normal;
	}
}

/*** Kontaktformular ***/

form.kontaktformular label{
	font-weight: 600;
	font-size: 0.8em;
}
form.kontaktformular .explanation p{
	font-size: 0.7em;
	line-height: 1.5em;
}
form.kontaktformular .dsgvo label{
	font-weight: 500;
	font-size: 0.7em;
}
form.kontaktformular select {
  height: 54px;
}
.kontaktsammler a{
	font-weight:500;
}


/*** Interimslösung  ***/
.ausgeblendet{
	display:none;
}

/*** downloads ***/

body.downloads .ce_downloads_box .ce_downloads_box_inside {
  background: #ffffff;
  padding: 15px 30px 0px 30px;
  font-size: 1rem;
}

body.downloads .ce_downloads_box .ce_downloads_box_inside li a{
  text-decoration:none!important;
}

body.downloads .ce_downloads_box .ce_downloads_box_inside li a:hover{
  text-decoration:underline!important;
}

/***privacy_manager***/
.mod_privacy_optin_medium p.privacy, p.privacy {
  color:inherit;
  background: #ebe9e6;
  font-weight: 600;
  padding: 20px;
  text-align: center;
  margin: 20px;
  border: 4px solid #c00;
}
/***privacy_manager***/
.datenschutz .container h2:not(:first-child){
	margin-top:1em;
}

.ce_youtube.short .ce_youtube_inner{
	padding-bottom:178%;
}
/*** co2-rechner ***/
.ce_form.co2-rechner, .auswertung-background{
	background-color:#ededed;
	border-radius:20px;
	padding:1em 2em 2em 2em;
	background-image: url('/files/cto_layout/img/logos/WTB-Logo-OEKOBETON-K.png');
	background-repeat: no-repeat;
    background-position: right 15px top 15px;
    background-size: 150px auto;
}

@media only screen and (max-width: 767px) {
	.co2-rechner, .auswertung-background{
		padding:1em;
	}
}

/* äußeres Container-Element */
/* Grundlayout */
.progress {
  width: 100%;
  max-width: 600px;
  margin: 40px auto;
  position: relative;
}
.progress-bar {
  position: relative;
  height: 18px;
  background-color: #e0e0e0;
  border-radius: 9px;
  border: 1px solid #e0e0e0;  
}
/* gefüllter Fortschritt */
.progress-line {
  --min: 16.667;
  --range: 83.333; /* 100 - 16.667 */
  width: calc(((var(--raw) - var(--min)) / var(--range)) * 100%);
  height: 17px;
  background-color: #8ca1c8;
  border-radius: 8px;
  transition: width .5s ease;
}
.progress-circle {
  --min: 16.667;
  --range: 83.333;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: calc(((var(--raw) - var(--min)) / var(--range)) * 100%);
  width: 50px;
  height: 50px;
  background-color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  transition: left .5s ease;
  border:2px solid #8ca1c8;
}
.numbers {
  font-size: 0.8rem;
  color: #8ca1c8;
  letter-spacing: -1px;
}

.two_col {
  display: flex;
  gap: 1rem; /* Abstand zwischen den Optionen */
  align-items: center;
  margin:0 auto;
}
.two_col span {
  display: flex;
  align-items: center;
}

@media only screen and (max-width: 500px) {
	.two_col {
	  display: block;
	  text-align:center;
	}
}



/* Radio optisch verstecken */
.radio_container.two_col input[type="radio"] {
  position: absolute;
  opacity: 0;
  /* trotzdem klickbar über das Label */
}

/* Labels als „Schaltflächen“ definieren */
.radio_container.two_col label {
  display: inline-block;
  width: 150px;
  height: 150px;
  border:5px solid transparent;
  border-radius: 20px;
  background-size: 85%;
  background-position: center;
  background-color:rgba(140,161,200,0.85);
  background-color:#ffffff;  
  cursor: pointer;
  transition: border-color 0.3s;
  /* optional Text ausblenden, falls nur Bild nötig */
  color: transparent;
}
.radio_container.two_col label:hover, .radio_container.two_col input[type="radio"]:checked + label:hover{
  opacity:0.8;
}

/* Je nach Label-ID ein anderes Bild setzen */
.radio_container.two_col #lbl_968_0 {
  background-image: url('/files/cto_layout/img/co2-rechner/WTB-Icons-Einsparungsrechner-blau-EFH.svg');
}
.radio_container.two_col #lbl_968_1 {
  background-image: url('/files/cto_layout/img/co2-rechner/WTB-Icons-Einsparungsrechner-blau-MFH.svg');
}
.radio_container.two_col input[type="radio"]:checked + label {
  background-color:rgba(140,161,200,1);
  border: 5px solid #ffffff;
}

.radio_container.two_col input[type="radio"]:checked + #lbl_968_0 {
  background-image: url('/files/cto_layout/img/co2-rechner/WTB-Icons-Einsparungsrechner-weiss-EFH.svg');
  background-size: 95%;  
  transition: background-size 0.7s cubic-bezier(0.68, -5, 0.27, 4), background-color 1s linear;
}
.radio_container.two_col input[type="radio"]:checked + #lbl_968_1 {
  background-image: url('/files/cto_layout/img/co2-rechner/WTB-Icons-Einsparungsrechner-weiss-MFH.svg');
  background-size: 95%;    
  transition: background-size 0.7s cubic-bezier(0.68, -5, 0.27, 4), background-color 1s linear;  
}

/*** Range Slider ***/

.range-wrapper {
  display: flex;
  flex-direction: column; /* übereinander anordnen */
  align-items: center;    /* zentriert horizontal */
  position: relative;
}

.range-value {
  display: block;
  text-align: center;
  margin-bottom: 0.5em;
  font-weight: bold;
  font-size:2rem;
}
.range-value::after {
  content: " m³";
}

.range-wrapper {
  position: relative;
  width: 100%;
  margin: 3em 0;
}

/* ===== Spur (liegt genau im Sliderbereich, sichtbar!) ===== */
.range-track {
  position: absolute;
  bottom: 0;
  left: 40px;
  width: calc(100% - 80px);
  height: 16px;
  transform: translateY(-50%);
  border-radius: 8px;
  background: #ddd;        /* Grundfarbe grau, wird per JS verändert */
  z-index: 0;              /* unter dem eigentlichen Input */
  pointer-events: none;    /* blockiert keine Mausereignisse */
  box-shadow: inset 2px 2px 5px rgba(0,0,0,0.4);
}



/* ===== Input selbst, transparent ===== */
input[type="range"].range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 16px;
  background: transparent;
  border-radius: 8px;
  border:0;
  outline: none;
  position: relative;
  z-index: 1;
}

@media only screen and (max-width: 767px) {
	.range-track {
	  left: 0px;
	  width: 100%;
	}
	input[type="range"].range {
	  width: calc(100% + 80px);
	}
}

/* ===== Thumb-Stile ===== */
/* WebKit (Chrome, Edge, Safari) */
input[type="range"].range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,0.25);

  /* Gewölbter Verlauf (hell oben, dunkler unten) */
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #d0d7eb 40%, #8ca1c8 100%);

  /* leichte 3D-Wirkung */
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.6), /* Glanz oben innen */
    inset 0 -3px 5px rgba(0, 0, 0, 0.2),      /* Schattierung unten innen */
    0 2px 5px rgba(0, 0, 0, 0.3);             /* Schatten nach außen */

  transition: box-shadow 0.2s, transform 0.1s;
}

input[type="range"].range::-webkit-slider-thumb:hover {
  transform: scale(1.05);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.8),
    inset 0 -3px 5px rgba(0, 0, 0, 0.25),
    0 3px 8px rgba(0, 0, 0, 0.4);
}

/* Firefox */
input[type="range"].range::-moz-range-thumb {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,0.25);

  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #d0d7eb 40%, #8ca1c8 100%);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.6),
    inset 0 -3px 5px rgba(0, 0, 0, 0.2),
    0 2px 5px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.2s, transform 0.1s;
}

input[type="range"].range::-moz-range-thumb:hover {
  transform: scale(1.05);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.8),
    inset 0 -3px 5px rgba(0, 0, 0, 0.25),
    0 3px 8px rgba(0, 0, 0, 0.4);
}

.range-value {
  display: block;
  text-align: center;
  margin-bottom: .5em;
  font-weight: bold;
}

.widget-pagebreak .submit{
	margin:0 20px;
	border:2px solid transparent;
}
.widget-pagebreak .submit.back{
	background-color:white;
	color:#8ca1c8;
	border-color:#8ca1c8;
}
.widget-pagebreak .submit.back:hover{
	background-color:white;}

.widget-pagebreak button.submit[type="submit"]:hover {
  opacity:0.8;
}

@media only screen and (max-width: 767px) {
	.widget-pagebreak .submit{
		margin:5px 0;
	}
}

.widget-pagebreak{
	text-align:center;
	margin-top:50px;
}
/* Säulen */
 .chart-container {
    display: flex;
    align-items: flex-end;
    gap: 80px;
    height: 100%;
    margin-top: 0px;
    padding-left: 10px;
    justify-content: center;    
  }
 .chart-container .label{
    font-size: 0.7em;
    line-height: 1.3em;
    margin-top: 1em;
    text-align:center;
    margin-bottom: 0.5em
 }

  .bar {
    width: 120px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    font-size:0.9em;
  }
@media only screen and (max-width: 767px) {
  .bar {
    height: 500px;
  }	
}

  .bar-fill {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 5px 5px 0 0;
    overflow: hidden;
  }

  /* Grundbalken */
  .bar-bg {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(136,136,136,1); /* Startwert identisch zur Referenz */
    display: flex;
    align-items: flex-end;
    justify-content: center;
    font-weight: bold;
    color: #fff;
    transition: height 2s ease-out, background-color 2s ease-out; /* gleiche Dauer */
  }

  /* Referenzbalken */
  .conventional .bar-bg {
    background: rgba(136,136,136,1);
    border:2px solid black;
  }

  /* Grüne Einsparung */
  .bar-saved {
    position: absolute;
    top: 0;
    width: 100%;
    height: 0%; /* wächst nach unten */
    background: #ededed;
    transition: height 2s ease-out;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    color: #000;
    font-weight: bold;
    padding-top: 5px;
    box-sizing: border-box;
    border:2px solid #fff;
    border-bottom: 2px solid black;
    
  background-image: repeating-linear-gradient(
    135deg,                                 /* Neigung */
    rgba(255,255,255,0.5) 0,               /* Linienfarbe mit leichter Transparenz */
    rgba(255,255,255,1) 2px,             /* Linienbreite = 1px */
    transparent 2px,                       /* Abstand beginnt hier */
    transparent 20px                       /* Wiederholung alle 20 px */
  );    
   }
  
  /* Ökobeton-K Balken */
  .reduced .bar-bg {
  border:2px solid black;
  transition: height 2s ease-out, background-color 2s ease-out;
}
  .small p{
  	font-size: 0.6em;
  	line-height: 1.5em;
  }
  .co2rechner_breadcrumbs p{
  	text-align:center;
  	font-size:0.6rem;
  }
  /* Tabelle Zusammenfassung */
  table#zusammenfassung td, table#zusammenfassung th{
  	width:13%;
  }
    table#zusammenfassung .col_last{
  	width:25%;
  }
  table#zusammenfassung .col_first{
  	width:62%;
  }
  table#zusammenfassung{
  	background-color: rgb(245,245,245);
  	border:0px;
  }
  table#zusammenfassung td, table#zusammenfassung th{
  	padding:10px!important;
  	font-weight:500;
  	font-size:0.7em;  	
  }
  
@media only screen and (max-width: 767px) {
  table#zusammenfassung td, table#zusammenfassung th {     
  	padding: 5px !important;
	line-height: 1.3em;
  }
}  
  table#zusammenfassung td:not(.col_first), table#zusammenfassung thead th:not(.col_first){
	text-align:right;	
  }
  table#zusammenfassung th:not(.col_last), table#zusammenfassung td:not(.col_last){
  	border-right:1px solid rgb(237,237,237);
  }
  table#zusammenfassung th, table#zusammenfassung td:not([class^="foot_"]){
  	border-bottom:1px solid rgb(237,237,237);
  }  
  table#zusammenfassung td, table#zusammenfassung th {
    padding: 10px !important;
    font-weight: 500;
  }
  table#zusammenfassung tfoot td {
    color: inherit;
    font-weight: 600;
    border-top: 2px solid rgb(237,237,237);
  }
  table#zusammenfassung thead th {
    border-bottom: 3px solid rgb(237,237,237);
    font-weight: 600;    
}