/* Boxing-Modell: 
Gesamtbreite = border + padding + width + padding + border */
	
/* damit Möglichkeit, Floats zu umschließen = clear fix ??? */
.cf:after {
	content: " ";
	display: table;
}
.cf:after {
	clear: both;
}
body {
	background-color: #fff;/* #3CF */
	color: #08136F;
	line-height: 1.3;
	font-family: sans-serif;
	font-size: 100%; /* 100% entspricht 1em. Siehe .kopf padding. Abstände zwischen Zeilen werden größer, wenn Schrift größer wird. */
}
.border {
	border-width:1px;
	border-style:solid;
	border-color:blue;
	padding:1.0em;
	text-align:justify;
}

img {
	max-width: 100%;
}
.container {
	background-color: #fff;
	/*width: 960px; */	/* Gesamtbreite = .navigation + .inhalt */
	width: 100%; /* width-Hauptbezug */
	margin: auto;/* Zentrierung */
	/* min-width: 500px; */ /* unterhalb nicht fluessig. Dafür Rollbalken */
    max-width: 1200px;  /* oberhalb nicht fluessig. Danach Zentrierung, trotz width: 100% */
}
.kopf {
	background-color: #fff;
	color: white;
	text-align: center;
	/* Padding: innerer Abstand von Schrift zum Rahmen des Bereichs */
	/* padding: 20px 0px; */ /* 1.Wert: oben/unten // 2.Wert: links/rechts */
	/* padding: 2.08333333% 0px; */	/* vertikales Padding bezieht sich auch auf Breite!! 20/960=0,0208333*/
	padding: 2%;                    /* em für vertikale Abstände. Ausgehend von Schriftgröße. 1em=16px, weil Schriftgröße 100%. 20px/16px=1,25.  */
						
}
.kopf h1 {
	font-weight: normal;
}
.navigation {
	/* width: 360px; */  /* Bereich 1 links */
	width: 14%; /* 360px / 960px(ContainerBezugspunkt) = 0.375 */
	float: right; 
	padding: 3%; 
	
}
.navigation ul {
		padding-left: 0%; /* linker Abstand der Menü-Liste entfernen */
	}
.navigation li { 
		display: block;  /* nav-Elemente untereinander */
		list-style: none;  /* Anführungszeichen von li weg */
		padding: 0.5em 6%;  /* Abstand untereinander. Abstand zwischen nav-Elementen links und rechts */ 
		-webkit-box-shadow: 0px 5px 5px -5px #000;
		box-shadow: 0px 5px 5px -5px #000;
	} 
.inhalt {
	float: left;
	/* width: 600px; */  /* Bereich 2 rechts */
	width: 70%; /* 600px / 960px(ContainerBezugspunkt) = 0.625 */
	padding: 0% 3% ;
	background-color: #fff;
}



a:link, a:visited {
	color: #0c78db;
	text-decoration: none;
}

.artikel {
	padding: 1%;
	background-color: #08136F;
	color: #fff;
}

.step {
	padding: 2%;
	border: solid 1px #fff;
	background-color: #0c78db;
}

.fetter {
	font-weight: bolder;
}

.offen {
	color: red;
}

/* für Smartphones */
@media only screen and (max-width: 480px) { /* only: damit IE8 das nicht interpretiert. Bei Desktop-First-Ansatz */
	.navigation, .inhalt {
		float: none;
		width: auto;
	}
	
	.navigation li {
		
		list-style: none; /* Anführungszeichen von li weg */
		padding: 1.25em 40%; /* Abstand zwischen nav-Elementen links und rechts */
		background-color:#0c78db;
	}
	
	a:link, a:visited {
	color: #fff;
}