@charset "utf-8";

:root {
		
	--ci-color-orange: #FF5E30;
	--ci-color-orange-rgb: 255,94,48;
	
	--ci-color-red: #C60713;
	--ci-color-red-rgb: 198,7,19;
		
	--ci-color-blue: #265EA8;
	--ci-color-blue-rgb: 38,94,168;
	
	--ci-color-yellow:#FFBD59;
	--ci-color-yellow-rgb: 255,189,89;
	
	--ci-color-dark: #282D37;
	--ci-color-dark-rgb :40,45,55;
	
	--ci-color-lightgrey: #D7DCE2;
	--ci-color-lightgrey-rgb :215,220,226;
	
	--ci-color-headlines: #1C222B;
	--ci-color-headlines-rgb: 28,34,43;
	
	--ci-color-text: #000000;
	--ci-color-text-rgb: 0,0,0;
		
}
@media only screen and (min-width: 120px) and (max-width:480px) {
		
	header,
	#container #box,
	nav#nav,
	footer div#block,
	#content{
		display:block;
		float:none;
		margin:0;
		padding:0;
		width:auto;
	}
	
	#container {
		margin-top:24px;
	}
	
	#content {
		width:auto;
		float:none;
		margin:0;
	}
	
		
	#content .contentbox {
		width:calc(100% - 40px);
		padding:0 20px 24px 20px;
	}
	
	#content .contentbox.full {
		width:100%;
		max-width:100% !important;
		padding:0;
	}
	

	section,
	article  {
		width:auto;
		max-width:460px;
	}

	
	#content section h1, 
	#content section h2.h1 {
		font-size:340%;
	}
	
	
	#content .flex-container.leistungen h2 {
		font-size: 230% !important;
	}
	
	
	
}



@media only screen and (min-width: 481px) and (max-width: 960px) {
	
	header,
	#container #box,
	nav#nav,
	footer div#block,
	#content  {
		display:block;
		float:none;
		margin:0;
		padding:0;
		width:auto;
	}
	

	#container #box,
	footer div#block {
		margin:0;
		padding:0;
	}

	
	#content {
		width:auto;
		float:none;
		margin:0;
	}
	
	#content .contentbox {
		width:calc(100% - 40px);
		padding:0 20px 24px 20px;
	}
	
	#content .contentbox.full {
		width:100%;
		max-width:100% !important;
		padding:0;
	}
	
}


@media only screen and (max-width: 768px) {
	
	footer .flex-container {
		margin-left:0;
		width:100%;
	}
	
	footer .flex-container .flexbox {
		padding:0 20px 0 0;
		display: flex;	
		flex-flow: column nowrap;
		text-align:left;
	}
	
	footer .flex-container .box66,
	footer .flex-container .box33,
	footer .flex-container .box25,
	footer .flex-container .box20	{
		width:calc(100% - 41px);
		margin:0 0 20px 0;		
	}
	
	footer .flexbox p,
	footer .flexbox ul li {
		line-height:140%;
		margin:6px 0;
	}
	
	footer .flexbox ul.subnavi,
	footer .flexbox p.subnavi	{
		margin-left:-3px;
	}
	
	footer .flexbox ul.subnavi li {
		line-height:100%;
		margin:0;
		word-wrap: break-word;
	}
	
	footer .flexbox ul li a,
	footer .flexbox p.subnavi a,
	footer .flexbox a[href*="kontakt"] {
		display:inline-block;
		padding:5px !important;
		word-wrap: break-word;
	}
	
	footer p.space_top {
		margin-top:6px !important;
	}
	
	footer p.icons a {
		display:inline-block;
		padding:6px 0;
		margin-bottom:4px;
	}
	
	
}


@media only screen and (max-width: 960px) {

	#content img.responsive {
		width:98%;
		height:auto;
	}
	
	#content img.responsive_pic {
		width:100%;
		height:auto;
	}
	
	#content img.responsive_pic.rand {
		width:auto;
		max-width:calc(100% - 2px);
		height:auto;
	}
	
	#content img.responsive_pic_50 {
		display:block;
		width:100% !important;
		max-width:702px !important;
		height:auto;
		float:none !important;
		margin: 2px auto 12px auto !important;
	}
	
	#content img.pic_r.responsive_pic_50 {
		float:none !important;
		margin: 2px auto 12px auto !important;
	}

}


@media only screen and (max-width: 960px) {
		
	#content .flex-container .order1 {
		order:1;
	}

	#content .flex-container .order2 {
		order:2;
	}
	
	#content .flex-container {
		align-items: flex-start !important;
		align-content: flex-start !important;
		justify-content: flex-start !important;
	}
	
	#content .flex-container .box_text,
	#content .flex-container .box_subnav {
		width:100%;
		margin-right:0 !important;
		margin-left:0 !important;
	}
	
	#content .content-container .box_text,
	#content .content-container .box_subnav {
		width:100%;
		margin-right:0 !important;
		margin-left:0 !important;
		float:none;
	}
		
	
	#content .flex-container .box75,
	#content .flex-container .box75_25,
	#content .flex-container .box25_75,
	#content .flex-container .box66_33,
	#content .flex-container .box33_66,	
	#content .flex-container .box66,	
	#content .flex-container .box50, 
	#content .flex-container .box45,
	#content .flex-container .box40,
	#content .flex-container .box35,
	#content .flex-container .box33,
	#content .flex-container .box30,
	#content .flex-container .box25,
	#content .flex-container .box20 {
		width:calc(100% - 20px) !important;	
		margin-right:0 !important;
		margin-left:0 !important;
	}
	
	#content .flex-container.leistungen .box50,
	#content .flex-container.leistungen .box50:nth-child(2n) {
		width:calc(100% - 0px) !important;	
		margin-right:0 !important;
		margin-left:0 !important;
		
	}
	
	
	#content .flex-container.team .box50, 
	#content .flex-container.team .box45,
	#content .flex-container.team .box40,
	#content .flex-container.team .box35,
	#content .flex-container.team .box33,
	#content .flex-container.team .box30,
	#content .flex-container.team .box25,
	#content .flex-container.team .box20 {
		width:calc(50% - 20px) !important;	
	}
	
	
	
	#content .flex-container.link_buttons_block .box33 {
		width:100% !important;	
		margin-right:0 !important;
	}
	
	#content .flex-container.link_buttons_block .box33:nth-child(2n),
	#content .flex-container.link_buttons_block .box33:nth-child(3n) {
		margin-right:0 !important;
	}
	
	
	
	#content .flex-container.leistungen .box33,
	#content .flex-container.leistungen .box33:nth-child(3n + 1) {
		margin-left:0 !important;	
		margin-right:0 !important;	
	}
	
	
	#content .flex-container.leistungen .flexbox {
		margin-bottom:12px;
		margin-top:12px;
	}
	
	#content .flex-container.leistungen .flexbox .space_top {
		margin-top:0 !important;
		padding-top:0 !important;
	}
	
	#content .flex-container.leistungen .flexbox.order2 {
		margin-bottom:24px !important;
	}
	
	
	#content .flex-container.leistungen figure.flex_max480 {
		width:100%;
		max-width:480px;
		margin-left:auto;
		margin-right:auto;
		text-align:center;
	}
	
}


@media only screen and (max-width: 580px) {
	
	#content .flex-container .box33 {
		width:100%;
		margin-right:0 !important;
	}
	
	
	#content .flex-container.leistungen .box33,
	#content .flex-container.leistungen .box33:nth-child(3n + 1) {
		margin-left:0 !important;	
		margin-right:0 !important;	
	}
		
}


@media only screen and (max-width: 460px) {
	
	#content .flex-container.team .box50, 
	#content .flex-container.team .box45,
	#content .flex-container.team .box40,
	#content .flex-container.team .box35,
	#content .flex-container.team .box33,
	#content .flex-container.team .box30,
	#content .flex-container.team .box25,
	#content .flex-container.team .box20 {
		width:calc(100% - 20px) !important;	
		margin-right:0 !important;
	}
	
}


@media only screen and (max-width:768px){
	
	#content .flex-container.fahrzeuge figure.fahrzeug_box {
		margin-bottom:60px;
	}
	
	#content .flex-container.fahrzeuge figure.fahrzeug_box figcaption {
		padding:60px 10px 30px 10px;
		bottom:-30px;
	}
	
	
	#content .flex-container.fahrzeuge figure.fahrzeug_box img {
		max-height:250px;
	}

}


@media only screen and (min-width: 120px) and (max-width:600px) {
	
	#content ul.niederlassungen {
		text-align:center;
		width:100%;
		margin-left:auto;
		margin-right:auto;
	}
	
	#content ul.niederlassungen li {
		width:calc(50% - 20px);
	}
	#content ul.niederlassungen li:nth-child(2n - 1) {
		clear:left;
	}
	
	#content ul.downloads li {
		max-width:calc(33% - 20px);
	}
	#content ul.downloads li:nth-child(3n - 2) {
		clear:left;
	}
	
}


@media only screen and (max-width: 640px) {
	#content ul.niederlassungen.laender li {
		float:none;
		margin:0 0 30px 0;
		width:100%;
	}
}



/* ### BILDHERADER START ### */

@media only screen and (min-width: 481px) and (max-width:960px) {
	
	/* SLIDE HOME 1 START */
	
	body #bildheader_slider .slider_text.home1 {		
		left:50px;
		bottom:20px;
		width:calc(66% - 50px);
	}
	
	body #bildheader_slider .slider_text.home1 p.txt {
		font-size: 1.8vw;
		line-height:190%;
		margin:0;
	}

	body #bildheader_slider .slider_text.home1 p.slider_headline {
		font-size: 2vw;	
		line-height:170%;
		width:60%;
	}	
	
	body #bildheader_slider .slider_text.home1 .color_orange {
		color:#fff !important;
	}
	
	/* SLIDE HOME 1 ENDE */
	
	
	
	/* START SLIDE HOME Finanzierung */
		
	body #bildheader_slider .slider_text.home_finanzierung {
		left:50px;
		top:20px;
		width:90%;
		max-width:54%;
	}

	body #bildheader_slider .slider_text.home_finanzierung p.txt {
		font-size: 2vw;
		line-height:150%;
		margin:0 0 20px 0;
	}

	body #bildheader_slider .slider_text.home_finanzierung p.slider_headline {
		font-size: 3.1vw;
		line-height:130%;
		margin:0;
	}

	body #bildheader_slider .slider_text.home_finanzierung p.finanzierung {
		font-size: 2vw;
		line-height:130%;
		text-transform:uppercase;			
		margin:10px 0;
	}

	body #bildheader_slider .slider_text.home_finanzierung p.finanzierung .icon {
		float:left;
		margin: 0 12px 12px 0;
		width:4.8vw;
		max-width:50px;
		height:auto;
	}
	
	/* END SLIDE HOME Finanzierung */
	
	
	
	/* START SLIDE FAHRZEUGE */

	body #bildheader_slider .slider_text.fahrzeuge {
		left:30px;
		top:40px;
	}

	body #bildheader_slider .slider_text.fahrzeuge p.txt {
		font-size:1.4vw;
		line-height:200%;
		margin:12px 0 0 0;
	}

	body #bildheader_slider .slider_text.fahrzeuge p.txt.bold {
		font-size:1.6vw;
		line-height:200%;
		font-weight:600;
		margin-bottom:24px;
	}

	body #bildheader_slider .slider_text.fahrzeuge p.slider_headline {
		font-size:2.8vw;
		line-height:150%;
		margin-bottom:24px;
	}

	/* END SLIDE FAHRZEUGE */
	
	
	
	
	
	/* START SLIDE FAHRZEUGE LKW 1 */

	body #bildheader_slider .slider_text.fahrzeuge.lkw1 {
		
		right:20px !important;
		bottom:20px !important;
		left:auto;
		top:auto;
	}


	/* END SLIDE FAHRZEUGE LKW 1 */
	
	
	/* START SLIDE Unternehmen */
	
	
	
	body #bildheader_slider .slider_text.unternehmen {
		bottom:90px;
		right:40px;
		width:55%;
	}
	
	body #bildheader_slider .slider_text.unternehmen p.slider_headline {
		font-size:2.6vw;
		line-height:130%;
		margin-bottom:10px;
	}	

	/* END SLIDE FAHRZEUGE */
	
	
	
	body #bildheader_slider .slider_text.kanalreinigungsfahrzeuge {
		left:30px;
		top:30px;
	}
	
	body #bildheader_slider .slider_text.kanalreinigungsfahrzeuge p.slider_headline {
		margin-bottom:12px;
	}
	
	body #bildheader_slider .slider_text.kanalreinigungsfahrzeuge p.txt {
		font-size:2vw;
	}
	
}



@media only screen and (min-width:481px) and (max-width:640px) {
	
	body #bildheader_slider .slider_text.home1 {
		left:35px;
	}
	
	/* START SLIDE HOME Finanzierung */
		
	body #bildheader_slider .slider_text.home_finanzierung {
		left:35px;
		top:20px;
		width:90%;
		max-width:54%;
	}

	body #bildheader_slider .slider_text.home_finanzierung p.txt {
		font-size: 2vw;
		line-height:150%;
		margin:0 0 20px 0;
	}

	body #bildheader_slider .slider_text.home_finanzierung p.slider_headline {
		font-size: 2.8vw;
		line-height:130%;
		margin:0;
	}

	body #bildheader_slider .slider_text.home_finanzierung p.finanzierung {
		font-size: 1.8vw;
		line-height:130%;
		text-transform:uppercase;			
		margin:10px 0 6px 0;
	}

	body #bildheader_slider .slider_text.home_finanzierung p.finanzierung .icon {
		float:left;
		margin: 0 12px 6px 0;
		width:4.4vw;
		max-width:50px;
		height:auto;
	}
	
	/* END SLIDE HOME Finanzierung */
	
	
	body #bildheader_slider .slider_text.fahrzeuge p.txt.bold {
		font-size:2vw;
		line-height:200%;
		font-weight:600;
		margin-bottom:24px;
	}
	
	
	body #bildheader_slider .slider_text.fahrzeuge.lkw1 p.slider_headline {
		line-height:170%;
	}
	
	
	
	
	body #bildheader_slider .slider_text.unternehmen {
		bottom:50px;
		right:40px;
		width:55%;
	}
	

}


@media only screen and (max-width:480px) {

	/* SLIDE HOME 1 START */
	
	body #bildheader_slider .slider_text.home1 {
		width:calc(100% - 80px);
		bottom:10px;
		left:35px;
	}
	
	body #bildheader_slider .slider_text.home1 p.txt {
		font-size: 2.1vw;
		line-height:2.3vh;
		margin:0;
	}
	
	body #bildheader_slider .slider_text.home1 p span.bg {
		padding:4px 6px;
	}
	
	body #bildheader_slider .slider_text.home1 p.slider_headline {
		font-size: 2.4vw;
		line-height:2.5vh;
		margin-bottom:1vh;
		max-width:50%;
	}
		
	body #bildheader_slider .slider_text.home1 .color_orange {
		color:#fff !important;
	}
	
	/* SLIDE HOME 1 ENDE */
	
	
		
	/* START SLIDE HOME Finanzierung */
		
	body #bildheader_slider .slider_text.home_finanzierung {
		left:35px;
		top:20px;
		width:90%;
		max-width:54%;
	}

	body #bildheader_slider .slider_text.home_finanzierung p.txt {
		font-size: 2vw;
		line-height:150%;
		margin:0 0 10px 0;
	}

	body #bildheader_slider .slider_text.home_finanzierung p.slider_headline {
		font-size: 2.8vw;
		line-height:130%;
		margin:0;
	}
	
	body #bildheader_slider .slider_text.home_finanzierung p.slider_headline br.only_big {
		display:none;
	}

	body #bildheader_slider .slider_text.home_finanzierung p.finanzierung {
		font-size: 1.8vw;
		line-height:130%;
		text-transform:uppercase;			
		margin:10px 0 6px 0;
	}

	body #bildheader_slider .slider_text.home_finanzierung p.finanzierung .icon {
		float:left;
		margin: 0 12px 6px 0;
		width:3.8vw;
		max-width:50px;
		height:auto;
	}
	
	/* END SLIDE HOME Finanzierung */
	
	
	
	/* START SLIDE FAHRZEUGE */

	body #bildheader_slider .slider_text.fahrzeuge {
		left:20px;
		top:20px;
	}

	body #bildheader_slider .slider_text.fahrzeuge p.txt {
		font-size:1.4vw;
		line-height:200%;
		margin:12px 0 0 0;
	}

	body #bildheader_slider .slider_text.fahrzeuge p.txt.bold {
		font-size:2vw;
		line-height:200%;
		font-weight:600;
		margin-bottom:0px;
	}

	body #bildheader_slider .slider_text.fahrzeuge p.slider_headline {
		font-size:2.8vw;
		line-height:200%;
		margin-bottom:12px;
	}

	/* END SLIDE FAHRZEUGE */
	
	
	body #bildheader_slider .slider_text.fahrzeuge.lkw1 {
		right:20px !important;
		bottom:20px !important;
		left:auto;
		top:auto;
	}

	body #bildheader_slider .slider_text.fahrzeuge.lkw1 p.slider_headline {
		line-height:190%;
	}
	
	
	
	body #bildheader_slider .slider_text.unternehmen {
		bottom:40px;
		right:20px;
		width:60%;
	}
	
	body #bildheader_slider .slider_text.unternehmen p.slider_headline {
		margin-bottom:0;
	}
	
	body #bildheader_slider .slider_text.unternehmen p.txt {
		margin-top:6px;
		margin-bottom:0;
		font-size:2.4vw;
	}
	
	
	
	
	body #bildheader_slider .slider_text.kanalreinigungsfahrzeuge {
		left:20px;
		top:30px;
	}
	
	body #bildheader_slider .slider_text.kanalreinigungsfahrzeuge p.slider_headline {
		margin-bottom:12px;
	}
	
	body #bildheader_slider .slider_text.kanalreinigungsfahrzeuge p.txt {
		font-size:2.2vw;
	}
	
}

/* ### BILDHERADER ENDE ### */






@media only screen and (max-width: 639px) {

	/* GALERIE START */

	#content ul.galerie {
		list-style:none;
		margin:16px auto 24px auto;
		text-align:center;
	}

	#content ul.galerie li {
		float:none;	
		margin:0 auto 30px auto;
		width:100%;
		max-width:480px;
	}	

	#content ul.galerie li:nth-child(2n) {
		margin-right:auto;
	}

	#content ul.galerie li a img {
		border:1px solid #f5a034;
		max-width:calc(100% - 2px);
		
	}

	/* GALERIE ENDE */
	
	
	
	
	#content section h1, 
	#content section h2.h1 {
		font-size:280%;
		text-align:left;
		text-transform:uppercase;
		margin:0 auto 24px auto;
	}

	#content section h1.h4 {
		font-size:200%;
	}

	#content section span.smaller {
		font-size: 70% !important;
		font-weight:500;
	}

	#content section h2,
	#content section h3.h2,
	#content section .h2 {
		font-size:240%;
		margin:22px auto 16px auto;
	}

	#content section h2.h4 {
		font-size:180%;
		margin:22px auto 16px auto;
	}
	
	
	#content .flex-container.leistungen .h1 {
		font-size:280%;
		line-height: 120%;
		margin: 0 0 16px 0;
		text-transform: uppercase;
	}
	
	
	
}


@media only screen and (min-width: 481px) and (max-width: 1024px) {
	
	#container {
		margin-top:24px;
	}
	
}



@media only screen and (min-width: 961px) and (max-width: 1024px) {

	header,
	#container #box,
	nav#nav,
	footer div#block,
	#content {
		display:block;
		float:none;
		margin:0;
		padding:0;
		width:auto;
		height:auto;
	}
		
	
	#content {
		width:auto;
		float:none;
		margin:0;
	}
		
	#content .contentbox {
		width:calc(100% - 40px);
		padding:0 20px 24px 20px;
	}
	
	#content .contentbox.full {
		width:100%;
		max-width:100% !important;
		padding:0;
	}

	
	#container #box,
	footer div#block {
		margin:0;
		padding:0;
	}

	
	nav#nav {
		width:auto;
		text-align:center;
		display:block;
	}

	nav#nav ul#mainnav {
		float:none;
		margin:10px auto;
		padding:0;
		width:auto;
		display:inline-block;
	}

	nav#nav p.logo {
		display:block;
		float:none;
		margin:0 auto;
		width:auto;
		text-align:center;
	}

	#breadcrumb {
		width:auto;
	}


	#content section,
	#content section article {
		width:auto;
		display:block;
	}

}


footer .nowrap {
	white-space: normal !important;
}