body {
	/* Betrifft ganzes Dokument, alle Texte */
    font-family: 'Obviously', Helvetica, sans-serif;
    padding: 0;
    margin: 0;
    background-color: tomato;
  }

header {

    display: flex;
    justify-content: center;
    height: calc(100vh/7);
    align-items: center;
    padding: 0 70px;
}

.zentrum:hover + .versteckt{
    display: grid;
    place-items: center;
    transition: 200ms;
}


main {

  background-color: tomato;
  height: calc(100vh/7*6);
  padding: 10px 0;
}

.rahmen {
    width: 16%;
    letter-spacing: 8px;
    position: relative;
    z-index: 5;
    
}

.zentrum {
    background-color: antiquewhite;
    border-radius: 50px;
    width: 68%;
    position: relative;
    z-index: 5;
    transition: 200ms;
}

.versteckt {
position: absolute;
bottom: 50%;
display: none;



}
.blur {
    background-color: rgba(0, 0, 0, 0.5);
    width: 100vw;
    height: 100vh;
    position: absolute;
    z-index: 1;
    backdrop-filter: blur(5px);
    transition: 200ms;

}

.hero {
    width: 600px;
    height: 600px;
    position: absolute;
    object-fit: cover;
    z-index: 4;
    margin-left: 20%;
    transition: 200ms;

}

/* Titel */
header h1 { 
    font-variation-settings: 'wdth' 200, 'wght' 700;
    font-size: 3.2rem;
    line-height: 0.5;
    letter-spacing: -2px;
    color: tomato;
    text-align: center;
}

h2 {
    font-variation-settings: 'wdth' 60, 'wght' 600;
    font-size: 3rem;
    text-align: center;
    color: antiquewhite;
}
  
/* Navigation, ganze Liste */
ul {
  list-style: none; /*  Listenpunkte abschalten */
  padding: 0; /* Kein Einzug */
  margin: 0;
  display: grid;
  grid-template: repeat(5, 1fr) / repeat(10, 1fr);
  justify-items: center;
  overflow: hidden;
}

/* Navigation, einzelner Listenpunkt */
ul li {
    font-size: 7rem;
    line-height: 8rem;
    font-family: 'Obviously', Helvetica, sans-serif;
    font-variation-settings: 'wdth' 80, 'wght' 200;
}

/* Links */
li a {
  color: antiquewhite;
  text-decoration: none;
  transition: 600ms;


}

/* Link unter dem Cursor*/
li a:hover {
  font-variation-settings: 'wdth' 90, 'wght' 800;
  transition: 600ms;
}