html, body{
	margin: 10px 5 0 5;
	padding: 0;
	background-color: #767676;
	font-family: 'Roboto', sans-serif;
	color: White;
	font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320)));
}
.item1 {
	grid-area: headder;
	background-color: #565656;
	padding: 6px;
	font-family: 'Roboto', sans-serif;
	font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320)));
}
.item2 {
	grid-area: left;
	background-color: #d8d8d8;
	padding: 6px;
	font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320)));
	color: black;
}
.item3 {
	grid-area: main;
	background-color: #f3f3f3;
	padding: 6px;
	font-family: 'Roboto', sans-serif;
	color: black;
	font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320)));
	margin: 2px;
}
.item4 {
	grid-area: right;
	background-color: #d8d8d8;
	padding: 6px;
	font-family: 'Roboto', sans-serif;
	font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320)));
	color: black;
}
img{
	max-width: 100%;
	height: auto;
}
a{
	font-family: 'Roboto', sans-serif;
	font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320)));
	color: White;
	text-decoration: none;
}
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas:
  	'left headder headder headder headder right'
    'left main main main main right'
	 'left main main main main right'
	 'left main main main main right'
	 'left main main main main right'
	 'left main main main main right'
	 'left main main main main right'
	 'left main main main main right'
	 'left main main main main right'
	 'left main main main main right'
	 'left main main main main right'
	 'left main main main main right'
	  'left main main main main right'
	  'left main main main main right'
	 'left main main main main right'
	 'left main main main main right'
	  'left main main main main right'
	 'left main main main main right'
	 'left main main main main right'
	 'left main main main main right'
	 'left main main main main right'
	  'left main main main main right';
  grid-gap: 10px;
  background-color: #2A2828;
  }
 h1{
	font-family: 'Roboto', sans-serif;
	font-size: calc(16px + (44 - 16) * ((100vw - 320px) / (1600 - 320)));
	text-align: center;
	color: white;
	margin-bottom: 3px;
}
 h2{
 		font-family: 'Roboto', sans-serif;
	font-size: calc(14px + (20 - 14) * ((100vw - 320px) / (1600 - 320)));
	text-align: center;
	color: #FCD2D2;
 }
 .bild{
 	float: left;
	margin: 3px;
	width: 15%;
 }
 .text{
 	float: left;
	margin: 3px;
	font-family: 'Roboto', sans-serif;
	font-size: calc(14px + (20 - 14) * ((100vw - 320px) / (1600 - 320)));
	color: White;
	width: 75%;

 }
 .clear{
	clear: both;
	border-bottom: 1px solid Silver;
}
.halbe_breite{
	float: left;
	width: 47%;
	margin: 3px;
	padding: 3px;
}
input{
	font-family: 'Roboto', sans-serif;
	font-size: calc(14px + (20 - 14) * ((100vw - 320px) / (1600 - 320)));
	width: 90%;
}
a.navi{
	display: block;
	background-color: #b20606;
	float: left;
	width: 18%;
	margin: 3px;
	padding: 3px;
	text-align: center;
	font-family: 'Roboto', sans-serif;
	font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1600 - 320)));
}
a.vorschaubild{
	float: left;
	margin: 3px;
	padding: 3px;
	text-align: center;
	font-family: 'Roboto', sans-serif;
	font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1600 - 320)));
	color: Black;
	width: 100%;
}
.titleleiste{
	background-color: #c33838;
	width: 96%;
	font-family: 'Roboto', sans-serif;
	font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1600 - 320)));
	color: White;
	margin: 3px;
	padding: 3px;
}
.vorschaubild{
	float: left;
	width: 22%;
	font-family: 'Roboto', sans-serif;
	font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1600 - 320)));
	margin: 3px;
	padding: 3px;
}
@media screen and (max-width: 830px) {
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas:
  	'headder headder headder headder headder headder'
    ' main main main main main main'
	 'left left left right right right';
  grid-gap: 10px;
  background-color: #2A2828;
  }
  
 .halbe_breite{
	float: none;
	width: 98%;
	margin: 3px;
	padding: 3px;
}
h2{
 		font-family: 'Roboto', sans-serif;
	font-size: calc(14px + (20 - 14) * ((100vw - 320px) / (1600 - 320)));
	text-align: center;
	color: #FCD2D2;
 }
.vorschaubild{
	float: left;
	width: 43%;
	font-family: 'Roboto', sans-serif;
	font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1600 - 320)));
	margin: 3px;
	padding: 3px;
}
a.navi{
	display: block;
	background-color: #b20606;
	float: left;
	width: 15%;
	margin: 3px;
	padding: 3px;
	text-align: center;
	font-family: 'Roboto', sans-serif;
	font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1600 - 320)));
}
}