@import url('https://fonts.googleapis.com/css2?family=Exo:wght@500&display=swap');
body{
	margin: 0px;
	padding: 0px;
	text-align: center;
  background-color: #D6B886;
	font-family: 'Exo', sans-serif;
	font-size: calc(12px + (22 - 12) * ((100vw - 320px) / (1600 - 320)));
}
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas:
  	'header header header header header header'
    'left main main main main right'
    'left main main main main right';
  grid-gap: 10px;
  background-color: #EADAC2;
  }
  .item1 { 
	grid-area: header; 
	background-color: #EADAC2;
	padding: 6px;
	font-family: 'Exo', sans-serif;
	font-size: calc(14px + (24 - 14) * ((100vw - 320px) / (1600 - 320)));
}
  .item2 { 
	grid-area: left; 
	background-color: #F2E8D8;
	padding: 6px;
	font-family: 'Exo', sans-serif;
	font-size: calc(14px + (24 - 14) * ((100vw - 320px) / (1600 - 320)));
}
.item3 { 
grid-area: main; 
	background-color: #D6B886;
	padding: 6px;
	font-family: 'Exo', sans-serif;
	font-size: calc(14px + (24 - 14) * ((100vw - 320px) / (1600 - 320)));
}
.item4 {
	grid-area: right;
	background-color:  #F2E8D8;
	padding: 6px;
	font-family: 'Exo', sans-serif;
	font-size: calc(12px + (24 - 12) * ((100vw - 320px) / (1600 - 320)));
}
img{
	max-width: 100%;
	height: auto;
}
h1{
	background-color: transparent;
	text-align: center;
	font-family: 'Exo', sans-serif;
	font-size: calc(20px + (38 - 20) * ((100vw - 320px) / (1600 - 320)));
	font-style: normal;
	color: Black;
}
h2{
	background-color: transparent;
	text-align: center;
	font-family: 'Exo', sans-serif;
	font-size: calc(12px + (24 - 12) * ((100vw - 320px) / (1600 - 320)));
	font-style: normal;
	color: black;
}
h3{
	background-color: transparent;
	text-align: center;
	font-family: 'Exo', sans-serif;
	font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (1600 - 320)));
	font-style: normal;
	color: black;
}
.platz{
	float: none;
	width: 96%;
	margin-left: 2%;
	margin-bottom: 6px;
	background-color: transparent;
	padding: 4px;
	text-align: center;
	font-family: 'Exo', sans-serif;
	font-size: calc(12px + (16 - 12) * ((100vw - 320px) / (1600 - 320)));
	border-bottom: 1px solid Black;
}
.sternegrafik{
	float: none;
	width: 96%;
	margin-left: 2%;
	margin-bottom: 6px;
	background-color: transparent;
	padding: 4px;
	text-align: center;
	font-family: 'Exo', sans-serif;
	font-size: calc(12px + (16 - 12) * ((100vw - 320px) / (1600 - 320)));
}
.beschreibung{
	border-top: 1px solid Black;
	padding-top: 6px;
	font-family: 'Exo', sans-serif;
	font-size: calc(14px + (22 - 14) * ((100vw - 320px) / (1600 - 320)));
	text-align: justify;
}
.hits{
	float: none;
	width: 96%;
	margin-left: 2%;
	margin-bottom: 6px;
	background-color: transparent;
	padding: 4px;
	text-align: center;
	font-family: 'Exo', sans-serif;
	font-size: calc(12px + (16 - 12) * ((100vw - 320px) / (1600 - 320)));
}
.bewertung-text{
	float: left;
	background-color: transparent;
	margin-left: 35%;
}
.bewertung-bild{
	float: left;
	background-color: transparent;
	padding-top: 7px;
	margin-left: 6px;
}

a.sterne{
	font-size: 16px;
	display: block;
	background-color: transparent;
	float: left;
	width: 25%;
	margin-right: 1%;
	border-right: 1px solid Black;
	font-family: 'Exo', sans-serif;
	font-size: calc(12px + (24 - 12) * ((100vw - 320px) / (1600 - 320)));
	font-style: normal;
}
.um-eintrag{
	background-color: #D6B886;
	margin: 6px;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	border: 1px solid Black;
	padding: 6px;
}
.um-werbung{
	background-color: #B4853C;
	margin: 6px;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	border: 1px solid Black;
	padding: 6px;
}
a{
	font-size: 16px;
	display: block;
	background-color: transparent;
	float: none;
	margin-right: 1%;
	margin-bottom: 10px;
	font-family: 'Exo', sans-serif;
	font-size: calc(12px + (24 - 12) * ((100vw - 320px) / (1600 - 320)));
	font-style: normal;
	text-decoration: none;
	color: Black;
}
a.home{
	font-size: 16px;
	display: block;
	background-color: transparent;
	float: left;
	margin-right: 1%;
	margin-bottom: 10px;
	font-family: 'Exo', sans-serif;
	font-size: calc(12px + (24 - 12) * ((100vw - 320px) / (1600 - 320)));
	font-style: normal;
	text-decoration: none;
	color: Black;
	width: 32%;
}
a.wseiten{
	font-size: 16px;
	display: block;
	background-color: Gray;
	float: left;
	width: 25%;
	margin-right: 1%;
	margin-bottom: 10px;
	border-right: 1px solid Black;
	font-family: 'Exo', sans-serif;
	font-size: calc(12px + (24 - 12) * ((100vw - 320px) / (1600 - 320)));
	font-style: normal;
	text-decoration: none;
	color: Black;
}
a.nav{
	display: block;
	background-color: #EADAC2;
	border-bottom: 1px solid Black;
	text-align: center;
	text-decoration: none;
	color: black;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	margin-bottom: 10px;
}

.clear{
		clear: both;
}


@media screen and (max-width: 800px) {
.grid-container {
  display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas:
  'header header header header header header'
    'main main main main main main'
	 'left left left left left left'
	 'right right right right right right';
}
.beschreibung { 
	text-align: left;
}
a.wseiten{
	font-size: 16px;
	display: block;
	background-color: Gray;
	float: left;
	width: 25%;
	margin-right: 1%;
	margin-left: 1%;
	border-right: 1px solid Black;
	font-family: 'Exo', sans-serif;
	font-size: calc(12px + (24 - 12) * ((100vw - 320px) / (1600 - 320)));
	font-style: normal;
}
.bewertung-text{
	float: left;
	background-color: transparent;
	margin-left: 15%;
}
}