body {
    padding: 0;
    margin: 0;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
header {
    
}

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

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

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



/* Wenn der Bildschirm 800px oder größer ist, soll das Bild teaser 300px groß werden*/
@media screen and (min-width: 800px) {
    #teaser {
        height: 300px;
    }
}

nav {
    position: sticky;
    top: 0px;
    -webkit-backdrop-filter: blur(8px); /* das mit -web kit für den blur effekt nehmen, sonst geht es irgendwie nicht bei der normalen aber dann bei live preview geht nur das normale warum auch immer*/
}

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

nav ul li a, footer ul li a {
    font-weight: 500;
    padding: 16px;  /* padding macht hierbei einen Abstand zwischen den Links und vergrößert sein anklickbares Feld*/
}

section {
    max-width: 1200px; /* Die Sektion soll nur noch maximal 1200px breit sein*/
    margin-left: auto; /* der Platz nach Links / Rechts soll sich automatisch anpassen*/
    margin-right: auto;
    text-align: center;
}