html, body{
	margin: 10px 5 0 5;
	padding: 0;
	background-color: #77a433;
	font-family: 'Roboto', sans-serif;
	color: White;
	font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320)));
}
.item1 {
	grid-area: headder;
	background-color: #b2c3aa;
	padding: 6px;
	font-family: 'Roboto', sans-serif;
	font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320)));
	color: #85a950;
}
.item2 {
	grid-area: left;
	background-color: #b2c3aa;
	padding: 6px;
	font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320)));
	color: #262626;
}
.item3 {
	grid-area: main;
	background-color: #b2c3aa;
	padding: 6px;
	font-family: 'Roboto', sans-serif;
	color: #262626;
	font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320)));
	line-height: 150%;
}
.item4 {
	grid-area: right;
	background-color: #b2c3aa;
	padding: 6px;
	font-family: 'Roboto', sans-serif;
	font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320)));
	color: #262626;
}
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas:
    'main main main main main main';
  grid-gap: 10px;
  background-color: #0080d2;
  }
  .grid-container-index2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas:
  	'headder headder headder headder headder headder'
    'left main main main main main';
  grid-gap: 10px;
  background-color: #0080d2;
  }
 .grid-container-index {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-areas: 'headder headder headder headder headder headder'
    'left main main main main right';
	grid-gap: 10px;
	background-color: #8AD2FF;
}
img{
	max-width: 100%;
	height: auto;
}

h1{
	font-family: 'Roboto', sans-serif;
	font-size: calc(14px + (52 - 14) * ((100vw - 320px) / (1600 - 320)));
	text-align: center;
	color: #124FBC;
}
h2{
	font-family: 'Roboto', sans-serif;
	font-size: calc(14px + (32 - 14) * ((100vw - 320px) / (1600 - 320)));
	text-align: center;
	color: #133D88;
}
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 + (22 - 14) * ((100vw - 320px) / (1600 - 320)));
	text-align: center;
	text-decoration: none;
	background-color: #85a950;
	color: black;
	display: block;
	margin: 3px;
	padding: 3px;
}
a.ohne{
	font-family: 'Roboto', sans-serif;
	font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320)));
	text-align: center;
	text-decoration: none;
	background-color: #85a950;
	color: black;
	display: block;
	margin: 3px;
	padding: 3px;
	width: 50%;
	margin-left: 25%;
}
a.ohne-hintergrund{
	font-family: 'Roboto', sans-serif;
	font-size: calc(14px + (22 - 14) * ((100vw - 320px) / (1600 - 320)));
	text-align: center;
	text-decoration: none;
	background-color: transparent;
	color: black;
	display: block;
	margin: 3px;
	padding: 3px;
}
a.im-text{
	font-family: 'Roboto', sans-serif;
	font-size: calc(14px + (22 - 14) * ((100vw - 320px) / (1600 - 320)));
	text-align: center;
	text-decoration: none;
	background-color: transparent;
	color: black;
	display: inline;
	margin: 3px;
	padding: 3px;
}
a.klein{
	float: left;
	font-family: 'Roboto', sans-serif;
	font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320)));
	text-align: center;
	text-decoration: none;
	background-color: #85a950;
	color: black;
	margin: 3px;
	padding: 3px;
}
a.minni{
	float: none;
	display: block;
	width: 96%;
	font-family: 'Roboto', sans-serif;
	font-size: calc(12px + (12 - 12) * ((100vw - 320px) / (1600 - 320)));
	text-align: center;
	text-decoration: none;
	background-color: #85a950;
	color: black;
	margin: 6px;
	padding: 3px;
}
a.oben-float{
	float: left;
	display: block;
	width: 15%;
	font-family: 'Roboto', sans-serif;
	font-size: calc(12px + (12 - 12) * ((100vw - 320px) / (1600 - 320)));
	text-align: center;
	text-decoration: none;
	background-color: #85a950;
	color: black;
	margin: 6px;
	padding: 3px;
	line-height: 105%; important;
}
a.navibox{
	float: none;
	display: block;
	border: 2px solid #8AD2FF;
	font-family: 'Roboto', sans-serif;
	font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320)));
	text-align: center;
	text-decoration: none;
	background-color: #0405ff;
	color: white;
	margin: 3px;
	padding: 3px;
}
.clear{
	clear: both;
}
input{
	width: 80%;
	font-family: 'Roboto', sans-serif;
	font-size: calc(14px + (28 - 14) * ((100vw - 320px) / (1600 - 320)));
	margin-bottom: 5px;
}
select{
	width: 80%;
	font-family: 'Roboto', sans-serif;
	font-size: calc(14px + (28 - 14) * ((100vw - 320px) / (1600 - 320)));
	margin-bottom: 5px;
}
textarea{
	width: 80%;
	font-family: 'Roboto', sans-serif;
	font-size: calc(14px + (28 - 14) * ((100vw - 320px) / (1600 - 320)));
	margin-bottom: 5px;
}
textarea.banner{
	width: 100%;
	font-family: 'Roboto', sans-serif;
	font-size: calc(12px + (12 - 12) * ((100vw - 320px) / (1600 - 320)));
	margin-bottom: 5px;
	min-height: 100px;
}
form{
	width: 98%;
}
.text-klein{
	font-family: 'Roboto', sans-serif;
	font-size: calc(12px + (12 - 12) * ((100vw - 320px) / (1600 - 320)));
}
.hinweistext{
	font-family: 'Roboto', sans-serif;
	font-size: calc(14px + (14 - 14) * ((100vw - 320px) / (1600 - 320)));
}
.warntext{
	font-family: 'Roboto', sans-serif;
	font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320)));
	color: Red;
}
.regenbogenbalken{
	width: 100%;
	min-height: 10px;
}
.um-herzbild{
	float: left;
}
.um-anzeigenbild{
	float: left;
	font-family: 'Roboto', sans-serif;
	font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1600 - 320)));
	width: 10%;
	margin-right: 6px;
}
.um-anzeige{
	float: none;
	width: 96%;
	margin-left: 1%;
	font-family: 'Roboto', sans-serif;
	font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1600 - 320)));
}
.um-herzbild-rechts{
	float: right;
}
.nebeneiander-zwei{
	float: left;
	width: 47%;
	text-align: center;
	background-color: #b2c3aa;
}
.kleine-herzen{
	background-image: url(../bilder/sep1.gif);
	background-repeat: repeat-x;
	min-height: 100px;
}
.um-horoskop{
	float: left;
	width: 15%;
}
.text-center{
	text-align: center;
}
.text-laender{
	float: left;
	width: 15%;
	background-color: transparent;
	margin: 3px;
	padding: 3px;
}
.eindrittel{
	float: left;
	width: 30%;
	text-align: right;
	padding: 3px;
}
.zweidrittel{
	float: left;
	width: 65%;
	text-align: left;
}
@media screen and (max-width: 800px) {
.grid-container-index {
	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: #8AD2FF;
}
.grid-container-index2 {
  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 left left left';
  grid-gap: 10px;
  background-color: #0080d2;
  }
a.oben-float{
	float: left;
	display: block;
	width: 40%;
	font-family: 'Roboto', sans-serif;
	font-size: calc(12px + (12 - 12) * ((100vw - 320px) / (1600 - 320)));
	text-align: center;
	text-decoration: none;
	background-color: #85a950;
	color: black;
	margin: 6px;
	padding: 3px;
}
.um-horoskop{
	float: left;
	width: 45%;
}
.nebeneiander-zwei{
	float: none;
	width: 96%;
	text-align: center;
}
.um-anzeigenbild{
	float: left;
	width: 30%;
	margin-right: 6px;
}
.text-laender{
	float: left;
	width: 45%;
	background-color: transparent;
	margin: 3px;
	padding: 3px;
}
}

@media screen and (max-width: 500px) {

}