body{
	background:#fff;
	border:0;
	margin:0;
	padding:0;
	font-family:'Play';
	color:#1F4F9B;
}

a, a.visited{
	color:#1F4F9B;
	transition: all 0.4s ease 0s;
	o-transition-duration:  all 0.4s ease 0s;
	ms-transition-duration:  all 0.4s ease 0s;
	moz-transition-duration:  all 0.4s ease 0s;
	webkit-transition-duration:  all 0.4s ease 0s;	
	
}

ul, p{
	margin:0;
	padding:0;
}


.section{
	width:100%;
	display:flex;
}

.section.header{
	flex-direction:column;
	background-image:url('../images/DrFenster_HeaderBG4.webp');
	background-size:1920px;
	background-position:50% 0;
	background-repeat:no-repeat;
	height:600px;
}

.section > .content{
	width:1280px;
	max-width:calc(100vw - 20px);
	margin:0 auto;
	height:100%;
	display:flex;
	flex-direction:column;
}

.header .firstcontact{
	display:flex;
	flex-direction:row;
	font-size:1.2em;
	font-weight:700;
	padding:20px 0;
	width:100%;
}

.header .firstcontact a{
	display:flex;
	position:relative;
	flex-direction:row;
	align-items:flex-start;
	margin-right:20px;
	text-decoration:none;
	
}

.header .firstcontact a::before{
	content:"";
	position:absolute;
	bottom:-4px;
	left:0px;
	height:4px;
	width:0;
	background:#F9BC61;
	transition: all 0.4s ease 0s;
	o-transition-duration:  all 0.4s ease 0s;
	ms-transition-duration:  all 0.4s ease 0s;
	moz-transition-duration:  all 0.4s ease 0s;
	webkit-transition-duration:  all 0.4s ease 0s;		
}	

.header .firstcontact a:hover::before{
	width:100%;
}	

.header .firstcontact a svg{
	width:18px;
	height:18px;
}	

.header .firstcontact a .text, .header .firstcontact a:visited .text{
	margin-left:6px;
	color:#1F4F9B !important;
	text-decoration:none;
}	

.header .hero{
	width:100%;
	height:100%;
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:center;
}

.header .hero .block.left{
	width:25%;
	height:100%;
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:center;
}

.header .hero .block.left a{
	text-decoration:none;
}

.header .hero .block.left a:hover{
	transform:scale(1.05);
}	

.header .hero .block.right{
	display:flex;
	flex-direction:row;
	align-items:center;
	width:60%;
}	

.header .hero .block.right img.mobile{
	display:none;
}	
.header .hero .block.right img.desktop{
	display:inline-block;
}	

.header .hero .block.right > div{
	padding-left:40px;
}	

.header .hero .block.right h1{
	font-size:3em;
	font-family:Kalam;
	line-height:0.9;
	margin:0px;
}

.header .hero .block.right h2{
	font-size:1.8em;
	line-height:0.9;
	margin:10px 0 20px 0;
}

.header .hero .block.right ul{
	list-style:none;
}

.header .hero .block.right ul li{
	font-size:1.4em;
	font-weight:700;
	display:flex;
	align-items:center;
}

.header .hero .block.right ul li a{
	display:inline-block;
}

.header .hero .block.right ul li img{	
	width:38px;
	height:auto;
	margin-right:10px;
}

.section.cta{
	background:#1F4F9B;
	margin:20px auto;
	width:1920px;
	max-width:calc(100% - 0px);
	color:#fff;
}
.section.cta .content{
	padding:60px 0;
	background:url(/images/DrFenster_CTA_Map.webp);
	background-size:auto 230px;
	background-repeat:no-repeat;
	background-position:right top;
	max-height: 400px;
	
}	

.section.cta .content .ctacontact{
	display:flex;
	flex-direction:row;
}
.section.cta .content h2{
	color:#F9BC61;
	font-size:3em;
	margin:0px;
}

.section.cta .content p{
	font-size:1.2em;
	font-weight:400;
}
.section.cta .content .ctacontact{
	margin-top:30px;
}

.section.cta .content .ctacontact a{
	display:flex;
	flex-direction:row;
	align-items:center;
	margin-right:30px;
	color:#fff;
	font-size:1.5em;
	font-weight:bold;
	text-decoration:none;
}

.section.cta .content .ctacontact a:hover{
	transform:scale(1.05);
}

.section.cta .content .ctacontact a svg{
	width:40px;
	height:40px;
	margin-right:15px;
}

.section.angebot{
	padding-bottom:60px;
}

.section.angebot h2{
	font-family: Kalam;
	font-size:3em;
	font-weight:700;
	width:100%;
	text-align:center;
}

.section.angebot .artikel{
	width:100%;
	display:flex;
	flex-direction:row;
	justify-content:space-between;
}

.section.angebot  .artikel > a{
	width:calc(33% - 20px);
	box-shadow:0px 0px 20px rgba(0,0,0,0.2);
	text-decoration:none;
}

.section.angebot  .artikel > a:hover{
	transform:scale(1.02);
}

.section.angebot  .artikel > a .image{
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	width:100%;
	height:240px;
}
.section.angebot  .artikel > a.fenster .image{
	background-image:url(/images/angebot/DrFenster_Angebot_Fenster.jpg);
}	

.section.angebot  .artikel > a.eingangstueren .image{
	background-image:url(/images/angebot/DrFenster_Angebot_Eingangstueren.jpg);
}	

.section.angebot  .artikel > a.terrassentueren .image{
	background-image:url(/images/angebot/DrFenster_Angebot_Terrassentueren.jpg);
}	

.section.angebot  .artikel > a .text{
	padding:20px;
	text-align:center;
}

.section.angebot  .artikel > a .text .titel{
	font-size:1.7em;
	font-weight:700;
}

.section.angebot  .artikel > a .text .subtitel{
	font-size:1.1em;
	font-weight:700;
}

.section.fakten{
	padding-top:20px;
	padding-bottom:60px;
}

.section.fakten .content{
	display:flex;
	flex-direction:row;
	justify-content:space-between;
}


.section.fakten .content > div{
	text-align:center;
}

.section.fakten .content .icon{
	background-size:auto 100%;
	background-position:center;
	background-repeat:no-repeat;
	width:100%;
	height:60px;	
}

.section.fakten .content .text{
	font-size:1.2em;
	margin-top:20px;
}	
.section.fakten .content .textmobile{
	display:none;
}	

.section.fakten .content .grosseformate .icon{	background-image:url(/images/icons/DrFenster_icon_grosse_formate.webp); }	
.section.fakten .content .garantie .icon{	background-image:url(/images/icons/DrFenster_icon_6J_garantie.webp); }	
.section.fakten .content .passivhausfenster .icon{	background-image:url(/images/icons/DrFenster_icon_passivhausfenster.webp); }	
.section.fakten .content .schalschutz .icon{	background-image:url(/images/icons/DrFenster_icon_schalschutz.webp); }	
.section.fakten .content .sicherheit .icon{	background-image:url(/images/icons/DrFenster_icon_sicherheit.webp); }	
.section.fakten .content .ugwert .icon{	background-image:url(/images/icons/DrFenster_icon_ug.webp); }	


.section.main .content{
	flex-direction:row;
	padding-bottom:60px;
}

.section.main .content h2{
	font-family: Kalam;
	font-size: 2.4em;
	font-weight: 700;
	margin:0px;
	line-height: 1;
	margin-bottom:20px;
	
}	

.section.main .content h3{
	font-size:1.4em;
	margin:0px;
	margin-bottom:10px;
}

.section.main .content .block{
	font-size:1.2em;
}	
.section.main .content .block .asterisk{
	font-size:0.7em;
	margin-top:15px;
}

.section.main .content .block.left{
	width:55%;
	padding-top:20px;
}
.section.main .content .block.left h3{
	margin-bottom:10px;
}	

.section.main .content .block.left ul{
	padding-left:0px;
	list-style:none;
	margin-bottom:20px;
}	

.section.main .content .block.left ul li{
	margin-bottom:10px;
}	
.section.main .content .block.left ul li::before{
	content:" ";
	display:inline-block;
	width:15px;
	height:15px;
	margin-right:10px;
	background-image: url("../images/check.svg");
	background-repeat:no-repeat;
	background-position:50% 50%;
}	

.section.main .content .block.right{
	width:45%;
	background:#E4EEFA;
	padding:40px;
}

.section.main .content .block.right a{
	display:flex;
	flex-direction:row;
	font-size:1.4em;
	font-weight:700;
	margin-bottom:15px;
	text-decoration:none;
}

.section.main .content .block.right a:hover{
	letter-spacing:0.02em;
}	

.section.main .content .block.right a svg{
	width:34px;
	height:34px;
	margin-right:20px;
}

.section.footer{
	background-color:#1F4F9B;
	padding:60px;
	max-width:100vw;
}

.section.footer .content{
	flex-direction:row;
}	

.section.footer .block.middle{
	color:#fff;
	width:50%;
}

.section.footer .block{
	display:flex;
	flex-direction:column;
	justify-content:center;
}

.section.footer .block.middle{
	padding:0 60px;
}


.section.footer .block.middle h2{
	font-family: Kalam;
	font-size:2.4em;
	color:#fff;
	margin:0;
}


.section.footer .block.middle a{
	display:flex;
	flex-direction:row;
	color:#fff;
	text-decoration:none;
	font-weight:700;
	font-size:1.2em;
	align-items:center;
	padding-bottom:10px;
}
.section.footer .block.middle a svg{
	width:30px;
	margin-right:20px;
}	

.section.footer .block.right{
	color:#fff;
	font-size:1.2em;
	line-height:1.2;
}	

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

	
	.section.header{
		position:relative;
		margin:0 auto;
		background-size:1920px;
		background-position:50% 0;
		background-repeat:no-repeat;
		height:auto;
	}
	
	.header .firstcontact {
		align-items:center;
		justify-content:space-around;
		font-size:2em;
		background:#fff;
	}	
	
	.header .content{
		max-width:100% !important;
	}
	
	.header .firstcontact a{
		margin:0px;
	}
	
	.header .firstcontact a::before{
		display:none;
	}	
	
	.header .firstcontact a svg{
		width:45px;
		height:45px;
		
	}
	.header .firstcontact a	.text{
		display:none;
	}
	
	.header .hero{
		flex-direction:column;
		justify-content:space-around;
		width:calc(100% - 20px) !important;
		margin:0 auto;
	}

	.header .hero .block{
		width:auto !important;
		margin-top:40px;
	}
	
	.header .hero .block.left img{
		width:200px;
	}
	
	.header .hero .block.right > div {
	  padding: 0 20px;
	}	
	
	.header .hero .block.right{
		flex-direction:column;
		justify-content:
	}

	.header .hero .block.right img.mobile{
		display:inline-block;
		width:100%;
	}	
	.header .hero .block.right img.desktop{
		display:none;
	}	
	
	.section.cta{
		margin-top:60px;
	}
	.section.cta .content{
		padding-top: 280px;
		padding-left:20px;
		padding-right:20px;
	}
	
	.section.cta .content .ctacontact{
		flex-direction:column;
	}
	.section.cta .content .ctacontact a{
		padding:5px 0;
	}	
	
	.section.angebot .content .artikel{
		flex-direction:column;
		align-items:center;
	}
	
	.section.angebot .content .artikel > a{
		width:80%;
		margin-top:10px;
		margin-bottom:10px;
	}	
	
	.section.angebot .content .artikel > a .image{
		height:150px;
	}	
	.section.fakten .content{
		flex-wrap: wrap;
	}
	.section.fakten .content > .fakt{
		width:50%;
		margin-top:20px;
		margin-bottom:20px;
	}

	.section.fakten .content > .fakt .text{
		display:none;
	}

	.section.fakten .content > .fakt .textmobile{
		display:block;
		margin-top:10px;
		font-size:1.2em;
	}

	.section.main .content{
		flex-direction:column;
		max-width:100vw !important;
	}
	
	.section.main .content .block.left{
		width:calc(100vw - 40px) !important;
		margin:0 auto;
		padding-bottom:20px;
	}	
	.section.main .content .block.right{
		width:calc(100vw - 40px) !important;
		padding:20px;
	}	
	
	.section.footer{
		
		padding:60px 0px !important;
	}
	
	.section.footer .content{
		flex-direction:column;
	}
	
	.section.footer .block{
		width:calc(100vw - 20px) !important;
		flex-direction:column;
		align-items:center;
		padding:20px 0 !important;
	}
	
	.section.footer h2{
		text-align:center;
	}
	
	.section.footer .footercontact{
		display:flex;
		flex-direction:row;
	}
	
	.section.footer .block.middle a svg{
		width:60px;
		margin:30px;
	}
	
	.section.footer a .text{
		display:none;
	}
}