body {
	color: #505050;
        background-color: #F5F5F5;
        font-family: sans-serif;
	padding-left: 20px;
	padding-right: 20px;
	max-width: 950px;
	margin-left: auto;
	margin-right: auto;
}
h1 { 
	font-family: Georgia, serif;
	font-weight: bold;
}
						/* font-size according to screen size, wie im html abgefragt */
@media screen and (min-width: 600px) {
  h1 {
    font-size: 4.2em;
  }
}

@media screen and (max-width: 600px) {
  h1 {
    font-size: 2.2em;
  }
}


h2 { 
	font-family: Georgia, serif;
	font-size: 1.2em;
	font-weight: bold; 
}
						/* Abschnitte, teils mit horizontaler Trennlinie	*/
header {
	border-bottom: 4px #008B8B solid;
}
.main {
	padding-top: 20px;
	padding-bottom: 20px;
}
.footer {
	border-top: 4px #008B8B solid;
}
.referenzen {
	border-top: 4px #008B8B solid;
	padding-top: 20px;
}
						/* Flexboxen = jeweils Box & Item  			*/
						/* NaviBox ist einfach		   			*/
						/* Fokus/RefBox geschachtelt, damit es nicht 3:1 flext	*/
.NaviBox {
	display: flex;
	flex-wrap: wrap;
	float:right;
}
.NaviItem {
	background-color: lightgray;
        font-size: 0.8em;
	border-radius: 5px;
	margin: 5px;
	padding: 5px;
	text-align: center;
}
.NaviItem a {
	color: #505050;
	text-decoration: none;
}
.FokusBox {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.FokusItem {
	border: 1pt solid lightgray;
	border-radius: 5px;
	margin: 5px;
	padding: 5px;
	text-align: center;
	min-width: 340px;
	max-width: 340px;
} 
.picbox {
	padding: 20px;
	text-align: center;
	items-align: center;
}
.RefBox {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
.RefItem {
	border: 1pt solid lightgray;
	border-radius: 5px;
	margin: 5px;
	padding: 5px;
	text-align: left;
	min-width: 200px;
	max-width: 200px;
}