*{
padding: 0;
margin: 0;
}
html{
height: 100%;
}
body{
height: 100%;
font-family: 'Helvetica', 'Arial', sans-serif;
}


.mitte {
display: flex;
justify-content: center;
align-items: center;
}

#teaser {
width: 100%;
height: 300px;
}

#teaser img {
width:100%;
height: 100%;
object-fit: cover;
}

@media screen and (min-width: 800px) {
#teaser {
height: 600px;
}
}



nav ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 24px;
padding-bottom: 24px;
}


nav ul li a {
padding: 16px;
}

section {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 16px;
padding-right: 16px;

}

button {
width: 200px;
padding: 15px;
text-align: center;
margin: 20px 10px;
border-radius: 25px;
font-weight: bold;
border: 2px solid #009688;
background: transparent;
cursor: pointer;
position: relative;
overflow: hidden;
}
span {
background: #009688;
height: 100%;
width: 0;
border-radius: 25px;
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
transition: 0.5s;
}
button:hover span{
width: 100%
}



@media screen and (max-width: 800px) {
button {
width: 130px;
}
}
div button a {
text-decoration: none;
padding: 25px;
}