/* sorgt für die Struktur */
body {
/*	background-color: #DBDBDB; */
	margin: 0 auto;
    max-width: 90em;
	display: flex;
	flex-flow: row wrap;
}
/* Darstellung für ein Smartphone */
@media screen and (max-width: 480px) {
	body {background-color: yellow;}
	header, nav, article, aside, footer {
	flex: 1 100%;
	}
}
/* Dastellung für ein Tablett */
@media screen and (min-width:481px) and (max-width: 950px){
	body {background-color: green;}
	header, nav, footer {
		flex: 1 100%;
	}
	article {
		flex: 3 1 0%;
	}
	aside {
		flex: 1 1 0%;
	}
}
/* Dastellung für einen Bildschirm  */
@media screen and (min-width: 951px){
	body {background-color: #DBDBDB;}
	header, footer {
		flex: 1 100%;
	}
	article {
		flex: 3 1 0%;
	}
	nav, aside {
		flex: 1 1 0%;
	}
}
/* Formatierung der Elemente */
header {
	text-align: center;
	background-color: #FFFFE0;
	max-height: 6em;
}
nav {
	background-color: #FFEA77;
	padding: .5em;
}

article {
	background-color: #ECECEC;
	padding: 1em;
}
aside {
	background-color: #A591D7;
	padding: 1em;
}
footer {
	background-color: #84C5CE;
	max-height: 3em;
	padding: .5em;
}
/* Bild der Bildschirmgröße anpassen */
.bild {
    width: 100%;
    height: auto;
	padding: 1.5em;
}
/* Die Bilder vom Käfer sind sehr groß, deshalb eine spezielle Anweisung */
.bild_kaefer {
    width: 95%;
    height: auto;
	padding: 1.5em;
}
.kaefertext {
	padding: 1em;
}
.mail {
	text-align: end;
}

/**/