@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
html, body{
	margin: 10px 5 0 5;
	padding: 0;
	background-color: #FF5F11;
	font-family: 'Roboto', sans-serif;
	color: White;
	font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320)));
}
.item1 {
	grid-area: headder;
	background-color: #ffd611;
	padding: 6px;
	font-family: 'Roboto', sans-serif;
	font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320)));
}
.item2 {
	grid-area: left;
	background-color: #ffd611;
	padding: 6px;
	font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320)));
	color: black;
}
.item3 {
	grid-area: main;
	background-color: #ffff79;
	padding: 6px;
	font-family: 'Roboto', sans-serif;
	color: black;
	font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320)));
}
.item4 {
	grid-area: right;
	background-color: #ffff79;
	padding: 6px;
	font-family: 'Roboto', sans-serif;
	font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320)));
	color: White;
}
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas:
    'headder headder headder headder headder headder'
	 'left left left left left left'
	  'main main main main main main';
  grid-gap: 10px;
  background-color: #d84700;
  }
  

img{
	max-width: 100%;
	height: auto;
}

h1{
	font-family: 'Roboto', sans-serif;
	font-size: calc(14px + (42 - 14) * ((100vw - 320px) / (1600 - 320)));
	text-align: center;
	color: red;
}
h2{
	font-family: 'Roboto', sans-serif;
	font-size: calc(14px + (32 - 14) * ((100vw - 320px) / (1600 - 320)));
	text-align: center;
	color: black;
}

h3{
	font-family: 'Roboto', sans-serif;
	font-size: calc(14px + (28 - 14) * ((100vw - 320px) / (1600 - 320)));
	text-align: center;
	color: black;
}
a{
	font-family: 'Roboto', sans-serif;
	font-size: calc(14px + (28 - 14) * ((100vw - 320px) / (1600 - 320)));
	text-align: center;
	text-decoration: none;
	background-color: #FDFF4D;
	color: black;
	display: block;
	margin: 3px;
	padding: 3px;
}

.halbe-breite{
	float: left;
	width: 45%;
}
.drei-virtel-breite{
	float: left;
	width: 70%;
}
.ein-virtel-breite{
	float: left;
	width: 20%;
}
.clear{
	clear: both;
}
input{
	width: 80%;
	font-family: 'Roboto', sans-serif;
	font-size: calc(14px + (28 - 14) * ((100vw - 320px) / (1600 - 320)));
	margin-bottom: 5px;
}
textarea{
	width: 80%;
	height: 250px;
	font-family: 'Roboto', sans-serif;
	font-size: calc(14px + (28 - 14) * ((100vw - 320px) / (1600 - 320)));
	margin-bottom: 5px;
}
form{
	width: 98%;
}

@media screen and (max-width: 900px) {
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas:
    'headder headder headder headder headder headder'
	 'left left left left left left'
	  'main main main main main main';
  grid-gap: 10px;
  background-color: #d84700;
  }
 
}