@charset "utf-8";
/* CSS Document */

body{margin: 0;padding:0;box-sizing: border-box; font-family: sans-serif}
#header{min-height: 3em;}
#logo{width: 75%; height: auto; max-width: 500px;padding: 1em}
#nav{background: #c20e19;padding: 0;color: #fff; font-weight: 600}
#nav a{display: inline-block;padding: 0.6em;margin: 0 0.5em;color: #fff;text-decoration: none;box-sizing: border-box;border-bottom: 4px solid #c20e19}
#nav a:hover{border-bottom: 4px solid #fff}
#screen{width: 100%;height: 300px;background: rgb(72,175,233);
background: linear-gradient(180deg, rgba(72,175,233,1) 0%, rgba(72,139,232,1) 100%);; border-bottom: 4px solid #c20e19;margin: 0;padding: 0}
main{min-height: 80vh;background: rgb(148,219,247);
background: linear-gradient(0deg, rgba(148,219,247,1) 0%, rgba(225,245,252,1) 100%);;padding: 0;margin: 0}
header, nav, footer,#text{width: 100%;max-width: 1280px;margin: 0 auto;font-size: 1.25em}
#text{margin: 0em auto;padding: 1em 7em;background: #fff;box-sizing: border-box}
.screen_img{margin: 0em auto;padding: 0;background: #fff;box-sizing: border-box;width: 100%;max-width: 1280px;height: 100%}
.screen_jochen_guenther{background: url("screens/Heizung_Jochen_Guenther_Muelheim.jpg") top center no-repeat;;background-size: cover}
.screen_starter{background: url("screens/JochenGuentherStartseite.jpg") top center no-repeat;;background-size: cover}
header{background: url("bg_header.png") bottom right no-repeat}
.screen_leistungen{background: url("screens/test.jpg") center center no-repeat;;background-size: cover}
#text h1,#text h2{color: #c20e19;font-weight: 800}
#text h1{font-size: 2em;}#text h2{font-size: 1.35em}
#text p{color: #19519f}
#footer{background: #48afe9; color: #fff;padding: 0 0.75em;text-align: right;position: fixed;bottom: 0;width: 100%}
footer a{display: inline-block;padding: 0.4em;margin: 0 0.2em;color: #fff;text-decoration: none;box-sizing: border-box;border-bottom: 4px solid #48afe9}
footer a:hover{border-color: #fff}
.red{color: #c20e19}
.boxes{
  display: flex;;align-items: stretch;
}
.box{;padding: 1em ; box-sizing:border-box;text-align: center;margin: 1em 0;flex-grow: 3;}
.box img{width: 100%;max-width: 200px;height: auto;border-radius: 60em;border:5px solid #c20e19 }
.box a span{font-weight: 800;color: #fff;padding: 0.3em;background: #c20e19;width: 80%;display: inline-block;box-sizing: border-box; border-radius: 3em}
.box a:hover span{background: #86020a}
.box a:hover img{background: #fcc}
#Leistungen{text-align: left}
section#heizung, section#bad, section#solar{margin: 1em auto 2em auto;padding: 1em 0}
section#heizung h2, section#bad h2, section#solar h2{font-size: 2em;border-bottom: 1px solid #c20e19}
section#heizung h3, section#bad h3, section#solar h3{color: #c20e19}
#datenschutz{font-size: 0.85em;padding: auto auto 10em auto;margin: auto auto 2em auto;box-sizing: border-box;}
#datenschutz h1, #datenschutz h2, #datenschutz h3, #datenschutz h4, #datenschutz p, #datenschutz ul{max-width: 600px}
#datenschutz h3{font-size: 1.15em;color:#c20e19}
#team{text-align: center}
#team img{width: 98%;;max-width: 600px;background: #ccc;display: block;margin: 2em auto 0 auto}
#fotos,  #fotos2{text-align: center}
#fotos img{width: 31%;height: auto;border: 1px solid #c20e19;margin: 0.5%}
#fotos2 img{width: 48%;height: auto;border: 1px solid #c20e19;margin: 0.5%}
#text.imp{background: #fff url('logo_kreise_50pro.png') right 2em no-repeat;}
@media only screen and (max-width: 900px){
header{background: none}	
}
@media only screen and (max-width: 800px){
	#screen{height: 200px}
	body{font-size: 0.85em}
#text{margin: 0em auto;padding: 1em 1em;;box-sizing: border-box;}
	.boxes{
  display: block;;
}
	#header,nav,footer{text-align:center}
	footer{font-size: 0.95em}#footer{padding:0}
	section#heizung, section#bad, section#solar{margin: 0.75em auto 0.75em auto;padding: 0.25em 0}
	#text.imp{background: #fff url('logo_kreise_50pro.png') right 2em no-repeat;background-size: 40%}
	#fotos2 img{width: 98%}
}