/* Responsive */

@media screen and (max-height: 750px){
	#header{height: 90px;}
	#header .mod_randomImage{height: 90px;}
	#header .mod_randomImage a{
		height: 40px;
		width: auto;
		display: inline-block;
        padding: 27px 0px;
    }
	#header .mod_randomImage:after{
		height: 90px; 
        line-height: 90px;
	}
	#header .mod_randomImage a img{
		height: 40px;
		width: auto;
		display: block;
	}
	#header .mod_articleList{line-height: 90px;}
	#footer_social ul{padding: 50px 0;}
    .footer_bottom{
        height: 90px; 
        line-height: 90px;
    }
}

@media screen and (max-height: 650px){
	#header{height: 80px;}
	#header .mod_randomImage{height: 80px;}
	#header .mod_randomImage a{
		height: 40px;
		width: auto;
		display: inline-block;
        padding: 23px 0px;
    }
	#header .mod_randomImage:after{
		height: 80px; 
        line-height: 80px;
	}
	#header .mod_randomImage a img{
		height: 40px;
		width: auto;
		display: block;
	}
	#header .mod_articleList{line-height: 80px;}
	#footer_social ul{padding: 40px 0;}
    .footer_bottom{
        height: 80px; 
        line-height: 80px;
    }
}

/* */

@media screen and (min-width: 1248px){
	.mod_article:nth-child(5) .ce_image{
		left: 50%;
		margin: 0 0 0 -624px;
	}	
}

@media screen and (min-width: 1001px){
	.mod_article:nth-child(5) .ce_accordion .ce_text p{max-width: 50%;}
}

@media screen and (max-width: 1440px){
	#main > .inside > .mod_article.first{
    	padding-top: 148px;
	}
	#main > .inside > .mod_article.first .ce_image,
	#main > .inside > .mod_article.first .ce_image figure{height: 100%;}
	#main > .inside > .mod_article.first .ce_image figure img{
		width: 100%;
    	max-width: none;
		display: block;
	}
	#main > .inside > .mod_article.first .ce_image figure{font-size: 0;}
	#main > .inside > .mod_article.first .ce_image figure img{
		display: inline-block;
		vertical-align: middle;
	}
	#main > .inside > .mod_article.first .ce_image figure:after{
		content: "";
		height: 100%;
		display: inline-block;
		vertical-align: middle;
	}
	.mod_article:nth-child(2) .swiper-container{
		overflow-y: auto;
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
	}
}

@media screen and (max-width: 1200px){
	#header{height: 90px;}
	#header .mod_randomImage{
		height: 90px;
		z-index: 5;
		position: relative;
		background: #FCFCFA;
		-moz-box-shadow: 0 0 3px 0 rgba(0, 1, 2, 0.18);
		-webkit-box-shadow: 0 0 3px 0 rgba(0, 1, 2, 0.18);
		box-shadow: 0 0 3px 0 rgba(0, 1, 2, 0.18);
	}
	#header .mod_randomImage:after{
		height: 90px; 
        line-height: 90px;
		content: "Menu";
		font-size: 20px;
		font-weight: 600;
		position: absolute;
		top: 0;
		right: 32px;
		cursor: pointer;
		padding: 0 24px 0 0;
		background: url(../images/navicon.svg) center right no-repeat;
	}
	#header .mod_randomImage:after{
		-webkit-transition: color 228ms ease-in-out;
		-moz-transition: color 228ms ease-in-out;
		-ms-transition: color 228ms ease-in-out;
		-o-transition: color 228ms ease-in-out;
		transition: color 228ms ease-in-out;
	}
	#header.visible_nav .mod_randomImage{background: url(../images/white_texture.png) bottom repeat #FCFCFA;}
	#header.visible_nav .mod_randomImage:after{
		color: #E2E2E2;
		background: url(../images/navicon_closed.svg) center right no-repeat;
	}
	#header .mod_randomImage a{
		height:40px;
		width:auto;
		display:inline-block;
        padding: 27px 0px;
    }
	#header .mod_randomImage a img{
		height:40px;
		width:auto;
		display:block;
	}
	#header .mod_articleList{
		position: absolute;
		top: 90px;
		right: 0;
		left: 0;
		line-height: inherit;
		/* padding: 16px 0 32px; */
		background: #F3F3F3;
		border-bottom: 1px solid #A0A0A0;
		-moz-box-shadow: 0 0 3px 0 rgba(0, 1, 2, 0.18);
		-webkit-box-shadow: 0 0 3px 0 rgba(0, 1, 2, 0.18);
		box-shadow: 0 0 3px 0 rgba(0, 1, 2, 0.18);
		/* für Animation optimieren */
		-webkit-transform: translateZ(0); 
		-moz-transform: translateZ(0); 
		-ms-transform: translateZ(0); 
		-o-transform: translateZ(0);  
		transform: translateZ(0); 
		-ms-backface-visibility: hidden; 
		-o-backface-visibility: hidden;
		-moz-backface-visibility: hidden; 
		-webkit-backface-visibility: hidden; 
		backface-visibility: hidden;
		-webkit-perspective: 1000;
		-moz-perspective: 1000;
		-ms-perspective: 1000;
		perspective: 1000;
		/* optimieren ende */
		-webkit-transform: translate3d(0,-100%,0) rotate(0deg) scale3d(1,1,1); 
		-moz-transform: translate3d(0,-100%,0) rotate(0deg) scale3d(1,1,1); 
		-ms-transform: translate3d(0,-100%,0) rotate(0deg) scale3d(1,1,1); 
		-o-transform: translate3d(0,-100%,0) rotate(0deg) scale3d(1,1,1); 
		transform: translate3d(0,-100%,0) rotate(0deg) scale3d(1,1,1);
		opacity: 0;
	}
	#header .mod_articleList{
		-webkit-transition: -webkit-transform 255ms ease-in-out 16ms, opacity 263ms ease-in-out 4ms;
		-moz-transition: -moz-transform 255ms ease-in-out 16ms, opacity 263ms ease-in-out 4ms;
		-ms-transition: -ms-transform 255ms ease-in-out 16ms, opacity 263ms ease-in-out 4ms;
		-o-transition: -o-transform 255ms ease-in-out 16ms, opacity 263ms ease-in-out 4ms;
		transition: transform 255ms ease-in-out 16ms, opacity 263ms ease-in-out 4ms;
	}
	#header.visible_nav .mod_articleList{
		-webkit-transform: translate3d(0,0,0) rotate(0deg) scale3d(1,1,1); 
		-moz-transform: translate3d(0,0,0) rotate(0deg) scale3d(1,1,1); 
		-ms-transform: translate3d(0,0,0) rotate(0deg) scale3d(1,1,1); 
		-o-transform: translate3d(0,0,0) rotate(0deg) scale3d(1,1,1); 
		transform: translate3d(0,0,0) rotate(0deg) scale3d(1,1,1);
		opacity: 1;
	}
	#header .mod_articleList ul li{
		width: 100%;
		max-width: 100%;
		display: block;
		padding: 0;
		position: relative;
	}
	#header .mod_articleList ul li:first-child{padding-top:16px;}
	#header .mod_articleList ul li:last-child{padding-bottom:32px;}
	#header .mod_articleList  ul li.active{background:url(../images/grey_texture.png) repeat;}
	#header .mod_articleList  ul li a{
		padding: 0;
    	display: block;
		font-size: 20px;
		line-height: 56px;
		font-weight: normal;
	}
	#header .mod_articleList  ul li:after{
		content: '';
		border-top: 1px solid #FCFCFA;
		border-bottom: 1px solid #A4A4A4;
		display: block;
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		width: auto;
		margin: 0;
		position: relative;
		left: auto;
	}
	#header .mod_articleList  ul li:last-child:after{display:none;}
}

@media screen and (max-width: 1050px){
	#header{height: 90px;}
	#header .mod_randomImage{height: 90px;}
	#header .mod_randomImage a{
		height: 40px;
		width: auto;
		display: inline-block;
        padding: 27px 0px;
    }
	#header .mod_randomImage:after{
		height: 90px; 
        line-height: 90px;
	}
	#header .mod_randomImage a img{
		height: 40px;
		width: auto;
		display: block;
	}
	#header .mod_articleList{top: 90px;}	
	.mod_article{padding:80px 0 100px;}
	.mod_article:nth-child(5) .ce_accordion .ce_text{text-align:center;}
	.mod_article:nth-child(5) .ce_accordion .ce_text p{margin:0 auto;}
	.mod_article:nth-child(5) .ce_accordion .ce_image{display:none;}	
    #footer_social ul{padding: 50px 0;}
    .footer_bottom{
        height: 90px; 
        line-height: 90px;
    }	
	.mod_article:nth-child(2) .montagevarianten  .ce_image{width: 100%;}
	.mod_article:nth-child(2) .montagevarianten  .ce_image img{
		width: 100%;
		max-width: none;
	}
	.mod_article:nth-child(3) .ce_text.last{
		height: auto;
		padding-top: 24px;
		padding-bottom: 24px;
		line-height: 1.66em;
	}
	.mod_article:nth-child(3) .ce_text.last p{line-height: inherit;}
	.mod_article:nth-child(4) #zubehoer-swiper .swiper-slide{width: 50%;}
}

@media screen and (max-width: 900px){
	#main > .inside > .mod_article.first{
		padding-top: 90px;
		background: #F4F4F4;
	}
	#main > .inside > .mod_article.first .ce_text:first-child{
		width: 100%;
		margin: 0 auto;
		padding: 64px;
		text-align: center;
		background: #FFFFFF;
	}
	#main > .inside > .mod_article.first .ce_text:first-child > * {margin: 0 auto;}
	#main > .inside > .mod_article.first .ce_text:first-child > blockquote {margin: 16px auto 0;}
	#main > .inside > .mod_article.first .ce_image:before{
		content: "";
		width: 100%;
		height: 100%;
		display: block;
		top: 0;
		right: -100%;
		position: absolute;
		background: #F4F4F4;
	}
	#main > .inside > .mod_article.first .ce_image{
		position: relative;
		float: left;
	}
	
	#main > .inside > .mod_article.first .ce_image figure{
		padding: 64px 0;
	}
	
	#main > .inside > .mod_article.first .ce_text:last-child{
		padding: 64px 32px 64px 0;
		margin: 0;
		position: relative;
		float: left;
		bottom: auto;
		-ms-transform: translate3d(0,0,0) rotate(0deg) scale3d(1,1,1);
		-o-transform: translate3d(0,0,0) rotate(0deg) scale3d(1,1,1);
		-moz-transform: translate3d(0,0,0) rotate(0deg) scale3d(1,1,1);
		-webkit-transform: translate3d(0,0,0) rotate(0deg) scale3d(1,1,1);
		transform: translate3d(0,0,0) rotate(0deg scale3d(1,1,1));
	}
	
	#detail-swiper .swiper-container{
		margin: 0 auto;
		position: relative;
		float: none;
	}
	
	#detail-swiper .swiper-control{background: none;}
	
	#detail-swiper,
	.mod_article:nth-child(2) .video{
		width: 100%;
		float: none;
		border: none;
	}
	
	#antrieb_details{padding: 48px 0 0;}
	
	.footer_bottom .left > span{display: none;}
	.mod_article:nth-child(4) #zubehoer-swiper .swiper-wrapper{padding: 0 16px 32px;}
}

@media screen and (max-width: 800px){
    .outer_margin{padding: 0 48px;} 
	#header .outer_margin{padding: 0 48px;}
	#header .mod_randomImage:after{right: 48px;}
	.mod_article:nth-child(4) #zubehoer-swiper .swiper-wrapper{padding: 0 32px 48px;}
	.mod_article:nth-child(4) #zubehoer-swiper .swiper-slide{
		width: 100%; 
		max-width: 100%;
		padding-top: 40px;
	}
	.footer_bottom .outer_margin{padding: 0 48px;}
    .footer_bottom .left span{display:none;}	
}

@media screen and (max-width: 750px){
	#main > .inside > .mod_article.first .ce_image{
		width: 100%;
		position: relative;
		height: 500px;
		height: 100vw;
		padding: 48px;
	}
	
	#main > .inside > .mod_article.first .ce_image figure{
    	width: 100%;
		padding: 0;
		text-align: center;
	}
	
	#main > .inside > .mod_article.first .ce_image figure img{
		width: auto;
		height: 100%;
	}
	
	#main > .inside > .mod_article.first .ce_text:last-child{
    	width: 100%;
		padding: 64px 48px;
    	position: relative;
		margin: 0 auto;
		background: #FFFFFF;
	}
	.mod_article:nth-child(2){background: #F4F4F4;}
	.mod_article:nth-child(3) .ce_accordion ul{
		width: 100%;
		float: none;
		padding: 0;
	}
	.mod_article:nth-child(3) .ce_accordion ul:first-child{padding: 0;}
}

@media screen and (max-width: 600px){ 
	#header{height:80px;}
	#header .mod_randomImage{height:80px;}
	#header .mod_randomImage a{
		height:40px;
		width:auto;
		display:inline-block;
        padding:23px 0px;
    }
	#header .mod_randomImage:after{
		height:80px; 
        line-height:80px;
	}
	#header .mod_randomImage a img{
		height:40px;
		width:auto;
		display:block;
	}
	#header .mod_articleList{top:80px;}	
	.mod_article{padding:100px 0 80px 0;}
	#main > .inside > .mod_article.first {padding-top: 80px;}
	#main > .inside > .mod_article.first .ce_image{padding: 32px;}
	#footer_social ul{padding:40px 0;}
    .footer_bottom{
        height:80px; 
        line-height:80px;
    }
    .footer_bottom .right span{display:none;}	
}

@media screen and (max-width: 500px){
    .outer_margin{padding: 0 24px;}  
	#header .mod_randomImage:after{right: 24px;}
	#header .outer_margin{padding: 0 24px;}
	.mod_article{padding:80px 0 60px 0;}
	#main > .inside > .mod_article.first .ce_text:first-child{padding: 64px 24px 64px 24px;}
	#main > .inside > .mod_article.first .ce_image{padding: 24px;}
	#main > .inside > .mod_article.first .ce_text:last-child{padding: 64px 24px;}
	.footer_bottom .outer_margin{padding: 0 24px;}
	.mod_article:nth-child(4) #zubehoer-swiper .swiper-wrapper{padding: 0 8px 48px;}
	.mod_article:nth-child(4) #zubehoer-swiper .swiper-slide{padding-top: 24px;}
}

@media screen and (max-width: 428px){
    .outer_margin{padding: 0 16px;}  
	#header{position: absolute;}
	#header .mod_randomImage:after{right: 16px;}
	#header .outer_margin{padding: 0 16px;}
	#main > .inside > .mod_article.first .ce_text:first-child{padding: 64px 16px 64px 16px;}
	#main > .inside > .mod_article.first .ce_image{padding: 16px;}
	#main > .inside > .mod_article.first .ce_text:last-child{padding: 64px 16px;}
	.footer_bottom .outer_margin{padding: 0 16px;}
	.mod_article:nth-child(4) #zubehoer-swiper .swiper-wrapper{padding: 0 0 48px;}
	.mod_article:nth-child(4) #zubehoer-swiper .swiper-slide{padding-top: 16px;}
}

@media screen and (max-width: 350px){
	.mod_article{padding:60px 0 50px 0;}
}