/* Der Stern gilt für ALLE Elemente */
* {
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: "tinos-regular", sans-serif;
  background-color: #FBFFE1;
}

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main main right'
    'footer footer footer footer footer footer';
  gap: 10px;
  background-color: #FBFFE1;
  padding: 10px;
}

.grid-container > div {
  padding: 10px;
  font-size: 16px;
}

.item1 h1{
	font-size:50px;
	font-family:"Roboto Condensed"; 
}


.item1  {
  grid-area: header;
  background-color: #EAE2C8;
  text-align: center;
  color: #black;
  font-size:60px;
}

 

.item2 {
  grid-area: menu;
  color:black;
  font-size:60px;
  }
  
  
.item3 {
  grid-area: main;
  color: black;
}
.item3 div {
	
	font-size:40px;
}


.item3 > h1 {
  font-size: 35px;
  margin-bottom: 7px;
  
}

.item3 > p {
  margin-bottom: 7px;
  font-size: 25px;
  font-family:Faustina;
}

.item4 {
  grid-area: right;
   
  padding: 15px;
  color: black;
}

.item4 > h2 {
  font-size: 20px;
  padding-bottom: 10px;
}

.item4 li {
  padding: 5px;
  margin-bottom: 5px;
}

.item5 {
  grid-area: footer;
  background-color:  #897A69;
  color: #black;
  text-align: center;
}

@media only screen and (max-width: 600px) {
  .item1 {grid-area: 1 / span 6;} /* Span 6 => width: 100% */
  .item2 {grid-area: 2 / span 6;}
  .item3 {grid-area: 3 / span 6;}
  .item4 {grid-area: 4 / span 6;}
  .item5 {grid-area: 5 / span 6;}
}

@media only screen and (min-width: 600px) {
  .item1 {grid-area: 1 / span 6;} 
  .item2 {grid-area: 2 / span 2;} /* alles was in einer Zeile erscheinen soll, ist eine grid-area */
  .item3 {grid-area: 2 / span 4;}
  .item4 {grid-area: 3 / span 6;}
  .item5 {grid-area: 4 / span 6;}
}

@media only screen and (min-width: 768px) {
  .item1 {grid-area: 1 / span 6;}
  .item2 {grid-area: 2 / span 1;}
  .item3 {grid-area: 2 / span 4;}
  .item4 {grid-area: 2 / span 1;}
  .item5 {grid-area: 3 / span 6;}
}
.Funktion {color: black;
font-size: 50px;
text-align: center;
  
}
.Stadien {color: black;
font-size: 50px;
text-align: center;
font-family:"Roboto Condensed"; 
}
.Supernova {color:black;
font-size: 50px;
text-align:center;
 
}
 
  .Link2 {
	 font-size:25px;
color:black;
  }
  .Link2:hover{
	  color:#BABABA;
  }
  .video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
 
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  
}
 
li {
  float: left;
}
 
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
li a:hover {
  background-color: #111;
}
 .Impr1 h1{font-size:40px;
 font-family:"Newsreader";}
 
 .Impr1 p {font-size:20px;}
 
 .Impr1 h2{font-size:30px;
 
  font-family:"Newsreader";}
  
 .Link1{color:black;
 font-size:20px;}
 
 .Link1:hover{ color:#BABABA;}
 
 .Fakt {font-size:25px;}
 
  .Link3 {
	  color:black;
  }