/* Hilfen START ----------------------------------------- */

#med1  { background-color:darkcyan}
#med2  { background-color:orange}
#med3  { background-color:violet}
#med4  { background-color:aqua}
#med1, #med2, #med3, #med4  { padding: 0px; color: #fff }
#med2, #med3, #med4 { display: none }
/* Hilfen ENDE ------------------------------------------ */
/* Hilfen START ----------------------------------------- 
#med1, #med2, #med3, #med4  { display: none }
/* Hilfen ENDE ------------------------------------------ */

/* CSS-Webseite große Bildschirme ENDE ------------------ */
html { height: 100%; margin: 0; padding: 0 }

body {
	margin: 0; padding: 0;
	min-height: 100%;
	font-family: Roboto, arial, sans-serif;
	display: grid;
	grid-template-rows: 100px 1fr auto; 
	grid-template-areas: 
		"header"
		"content"
		"footer";
}

a{
	text-decoration: none;
	color: #fff;
}

#header, #content, #footer, #headerimage, #headerimagebiogas {
	display: grid; 
	grid-template-columns: 1fr 980px 1fr; 
}

#header {
	grid-template-areas: 
		". headercontent .";
	grid-area: header;
}

#headerbiogas {
	grid-area: headercontent;
}

#logotop {
	grid-area: headercontent;
}

.logooben {	height: 60px; width: auto; padding-top: 20px }

#content {
	grid-template-rows: 850px 1fr;
	grid-template-areas: 
		"headerbild headerbild headerbild"
		". bannertext .";
	grid-area: content;
	background-color: #26192a;
}

#headerimage{
	background: url("../images/background.jpg") no-repeat right bottom;
	background-size: cover;
	grid-template-columns: 1fr 245px 245px 245px 245px 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	grid-template-areas: 
		". . . . . ."
		". . . imagetext . ."
		". . . . . .";
	grid-area: headerbild;
}

#imagetext{
	color: #26192a;
    font-size: 1.3rem;
	grid-area: imagetext;
}

#headerimagebiogas{
	background: url("../images/Biogasanlage.jpg") no-repeat center;
	background-size: cover;
	grid-template-columns: 1fr 245px 245px 245px 245px 1fr;
	grid-template-rows: 50px 1fr 1fr;
	grid-template-areas: 
		". . . . . ."
		". hibg hibg hibg . ."
		". . . . . .";
	grid-area: headerbild;
}

#imagetextbiogas{
	color: #26192a;
    font-size: 1.3rem;
	grid-area: hibg;
}

#bannertext{
	grid-area: bannertext;
	color: #ffffff;
    font-size: 1.3rem;
}

#footer {
	grid-template-rows: 1fr auto;
	grid-template-areas:
		"footercontent footercontent footercontent"
		"footermenu footermenu footermenu";
	grid-area: footer;
	background-color: #333;
}

	#footercontent {
		display: grid;
		grid-template-columns: 1fr 400px 580px 1fr;
		grid-template-areas:
			". footerkontakt footerkarte .";
		grid-area: footercontent;
	}

	#footerkontakt {
		grid-area: footerkontakt;
		color: #fff;
	}
	#footerkarte {
		grid-area: footerkarte;
	}
	#footerkarte div.karte {
		text-align: right;
	}

	#footermenu {
		color: #fff;
		background-color: #222;
		grid-area: footermenu;
		text-align: center
	}
	#footermenu a:hover {
		color: #80ba27;
	}


/* CSS-Webseite große Bildschirme ENDE ------------------ */

/* CSS-Überschreibung kleine Handys START --------------- */
@media screen and (max-width: 499px) {
	
/* Hilfen START ----------------------------------------- */
#med1, #med3, #med4 { display: none; }
#med2 { display: block }
/* Hilfen ENDE ------------------------------------------ */
	
	#header, #content, #footer {
		grid-template-columns: 1fr 320px 1fr; 
	}
	
	#content { grid-template-rows: 400px 1fr; }
	
	#headerimage{
		grid-template-columns: 1fr 160px 160px 1fr; 
		grid-template-areas: 
			". . . ."
			". . imagetext ."
			". . . .";
	}
	
	#imagetext{
		width: 220px;
		left: 75px;
		top: 30px;
		font-size: 1.1rem;
	}
	
	#headerimagebiogas{
		grid-template-columns: 1fr 320px 1fr;
		grid-template-rows: 20px 1fr 1fr;
		grid-template-areas: 
			". . ."
			". hibg ."
			". . .";
	}
	
	#imagetextbiogas{
		font-size: 1.0rem;
	}
	
	#footercontent {
		grid-template-columns:  1fr 320px 1fr;
		grid-template-rows: 350px 1fr;
		grid-template-areas:
			"footerkarte footerkarte footerkarte"
			". footerkontakt .";
		grid-area: footercontent;
	}
}
/* CSS-Überschreibung kleine Handys ENDE ---------------- */

/* CSS-Überschreibung Tablets START --------------------- */
@media screen and (min-width: 500px) and (max-width: 767px) {
	
/* Hilfen START ----------------------------------------- */
#med1, #med2, #med4 { display: none; }
#med3 { display: block }
/* Hilfen ENDE ------------------------------------------ */
	
	#header, #content, #footer {
		grid-template-columns: 1fr 499px 1fr; 
	}
	
	#content { grid-template-rows: 450px 1fr; }
	
	#headerimage{
		grid-template-columns: 1fr 249.5px 249.5px 1fr; 
		grid-template-areas: 
			". . . ."
			". . imagetext ."
			". . . .";
	}
	
	#imagetext{
		width: 250px;
		left: 250px;
		top: 30px;
		font-size: 1.2rem;
	}
	
	#headerimagebiogas{
		grid-template-columns: 1fr 499px 1fr;
		grid-template-rows: 20px 1fr 1fr;
		grid-template-areas: 
			". . ."
			". hibg ."
			". . .";
	}
	
	#imagetextbiogas{
		font-size: 1.2rem;
	}
	
	#footercontent {
		grid-template-columns:  1fr 499px 1fr;
		grid-template-rows: 350px 1fr;
		grid-template-areas:
			"footerkarte footerkarte footerkarte"
			". footerkontakt .";
		grid-area: footercontent;
	}
}
/* CSS-Überschreibung Tablets ENDE ---------------------- */

/* CSS-Überschreibung Displays START -------------------- */
@media screen and (min-width: 768px) and (max-width: 1024px) {
	
/* Hilfen START ----------------------------------------- */
#med1, #med2, #med3 { display: none; }
#med4 { display: block }
/* Hilfen ENDE ------------------------------------------ */
	
	#header, #content, #footer {
		grid-template-columns: 1fr 750px 1fr; 
	}
	
	#content { grid-template-rows: 550px 1fr; }
	
	#headerimage{
		grid-template-columns: 1fr 187.5px 187.5px 187.5px 187.5px 1fr; 
		grid-template-areas: 
			". . . . . ."
			". . . imagetext imagetext ."
			". . . . . .";
	}
	
	#imagetext{
		font-size: 1.3rem;
	}
	
	#headerimagebiogas{
		grid-template-columns: 1fr 750px 1fr;
		grid-template-rows: 20px 1fr 1fr;
		grid-template-areas: 
			". . ."
			". hibg ."
			". . .";
	}
	
	#imagetextbiogas{
		font-size: 1.3rem;
	}
	
	#footercontent {
		display: grid;
		grid-template-columns: 1fr 350px 400px 1fr;
		grid-template-areas:
			". footerkontakt footerkarte .";
		grid-area: footercontent;
	}
}
/* CSS-Überschreibung Displays ENDE --------------------- */