/* stylesheet-kara.css */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif, Verdana, Tahoma;
	font-style: normal;
	word-wrap: break-word;
}

html,
body {
	padding: 0px;
	margin: 0px;
	border: 0;
	background-color: grey;
	display: block;
	height: 100%;
	width: 100%;
/*	font-size: 100%; /* * */
}

/* über 1024 Pixel */
@media screen and (min-width: 64em) {
	body {
		font-size: 100%
	}
}

/* bis zu 1024 Pixel */
@media screen and (max-width: 64em) {
	body {
		font-size: 90%
	}
}

/* bis zu 800 Pixel */
@media screen and (max-width: 50em) {
	body {
		font-size: 80%
	}
}

/* bis zu 480 Pixel */
@media screen and (max-width: 30em) {
	body {
		font-size: 70%
	}
}

header {
	text-align: center;
	font-size: 3em;
	background-color: green;
	font-family: Arial, Helvetica, sans-serif, Verdana, Tahoma;
/*	height: 3em; /* * */
	color: red;
/*	margin: 0 auto;	/* Bereich mittig ausrichten */
}

footer {
	width: 100%;
	height: auto;
	background-color: silver;
	opacity: 0.75;
	bottom: 0;	/* immer unten auf der Seite */
	border-color: lightgreen;
	text-align: center;
	clear: both;
	margin: 0 auto;	/* Bereich mittig ausrichten */
}

footer img {
	width: 10em;
	height: 3em;
}

figure {
	width: 100%;
}

figcaption {
	display: inline-block;/* * */
	height: auto;/* * */
	vertical-align: middle;/* * */
	text-align: center;	/* text neben bildern mittig */
}

#kopf {
	background-color: yellow;	
	text-align: center;
	margin: 0 auto;	/* Bereich mittig ausrichten */
}

#navibereich {
	background-color: #F7FFC3;	/* Hintergrundfarbe gelb für die Navigation */
	border-top: 3px solid #668BCC;		/* Rahmenlinie oben */
	border-bottom: 3px solid #668BCC;	/* Rahmenlinie unten */
	border-left: 3px solid #668BCC;	/* Rahmenlinie links */
	border-right: 3px solid #668BCC;	/* Rahmenlinie rechts */
	margin: 0 auto;	/* Bereich mittig ausrichten */
/*	text-align: left; /* * */
	width: 45%;	/* breite der gelben navi leiste */
}

#navibereich a {
	/*	color: blue; /*  Schriftfarbe  */
	text-decoration: none;	/* Unterstreichung entfernen */
	padding: 10px 10px;	/* oben/unten 10px, re/li 10px */
	font-weight: bold;
}

#navibereich img {
	/* Bereich für die Bilder in der Navileiste */
	width: 7em;
	height: 5em;
}