/* Header - Banner */
body > header.banner {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-image: url(../img/Lukas-Ruehl-1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    background-attachment: fixed;
}
@supports (-webkit-touch-callout: none) {
    body > header.banner {
        background-attachment: scroll !important;
    }
}

/* Header - Banner Backdrop */
body > header.banner > section {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
}

/* Header - Überschrift, Text und Buttons */
body > header.banner h1 {
    margin: 0px;
    font-size: 6em;
    line-height: 100%;
    color: white;
}
body > header.banner p {
    margin: 0.5em 0px 1em 0px;
    font-size: 2em;
    line-height: 100%;
    color: white;
}
@media screen and (max-width: 1199px) { /* Mobile und Tablet */
    body > header.banner p,
    body > header.banner h1 {
        width: min-content;
        text-align: center;
    }
}

/* Header - Navigation */
body > header.nav {
    width: 100%;
    box-sizing: border-box;
    background-color: antiquewhite;
}
body > header.nav > nav {
    display: flex;
    flex-flow: row wrap;
    justify-content: right;
}
body > header.nav > nav > a {
    margin: 0px 10px;
    text-decoration: none;
    color: black;
}
@media screen and (max-width: 767px) { /* Mobile */
    body > header.nav {
        padding: 25px 15px;
    }
}
@media screen and (min-width: 768px) and (max-width: 1199px) { /* Tablet */
    body > header.nav {
        padding: 25px;
    }
}
@media screen and (min-width: 1200px) { /* Desktop */
    body > header.nav {
        padding: 25px 50px;
    }
}