/*header*/
    
    body {
        margin: 0;
        padding: 0;
        text-align: center;
    }
    
    .wrapper {
        width: 100%;
        margin: 0 auto;
    }
    
    header {
        height: 100px;
        background: black;
        width: 100%;
        z-index: 12;
        position: fixed;
        display: flex;
    }
    
    .headertext {
        font-size: clamp(1.5em, 1.9vw, 4em);
        width: 90%;
        height: auto;
        margin: auto auto;
    }
    
    @media only screen and (max-width: 503px) {
        .headertext {
            font-size: 0.45cm
        }
    }
    
    .buttonleiste {
        display: flex;
        justify-content: center;
        width: 90%;
        padding-top: 2%;
        margin: 0 auto;
        border-bottom: 1px solid transparent;
        transition: border-bottom 0.5s;
        z-index: 1;
    }
    
    .buttonleiste a {
        font-variant: small-caps;
        font-size: clamp(1em, 1.3vw, 3em);
        margin: 0 40px;
        color: white;
        display: flex;
        text-decoration: none;
        text-align: end;
        transition: 0.5s;
    }
    
    .buttonleiste a:hover {
        border-bottom: 1px solid #5f5f5f;
        color: #5f5f5f;
    }
    
    .banner-area {
        width: 100%;
        height: 500px;
        position: fixed;
        top: 100px;
        -webkit-background-size: cover;
        background-size: cover;
        background-position: center center;
        background-color: #e2e1e1;
    }
    
    .banner-area h2 {
        padding-top: 8%;
        font-size: 70px;
        font-family: poppins;
        text-transform: uppercase;
        color: black;
    }
    
    .logo {
        position: absolute;
        margin: 50px 0 0 15px;
        font-size: clamp(1em, 1.3vw, 3em);
        z-index: 200;
    }
    
    .logo a {
        color: white;
    }
    
    .content-area {
        width: 100%;
        top: 481px;
        position: relative;
        height: auto;
        background-color: #e2e1e1;
        padding-top: 25px;
    }
    
    @media only screen and (max-width: 1080px) {
        .banner-area img {
            height: 300px;
            width: auto;
        }
        .content-area {
            top: 400px;
        }
    }
    
    @media only screen and (max-width: 834px) {
        .banner-area img {
            height: 200px;
            width: auto;
        }
        .content-area {
            top: 300px;
        }
    }
    
    @media only screen and (max-width: 570px) {
        .logo {
            margin: 10px auto;
            left: 50%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
        }
        .banner-area img {
            height: 150px;
            width: auto;
        }
        .content-area {
            top: 250px;
        }
    }
    
    @media only screen and (max-width: 340px) {
        .buttonleiste a {
            font-variant: small-caps;
            font-size: clamp(1.2em, 1.3vw, 3em);
            margin: 0 0.7em;
            color: white;
            display: flex;
            text-decoration: none;
            text-align: end;
            transition: 0.5s;
        }
        header {
            height: 70px;
        }
        .banner-area {
            top: 70px;
        }
        .banner-area img {
            height: 100px;
            width: auto;
        }
        .content-area {
            top: 170px;
        }
    }
    /*Inhalt*/
    
    .kiste {
        height: auto;
        width: 900px;
        background-color: white;
        box-shadow: -30px 30px 20px rgba(0, 0, 0, 0.3);
        margin: 0 auto 25px auto;
        text-align: center;
    }
    
    .inhalt {
        width: 90%;
        height: 100%;
        display: flex;
        margin: 0 auto;
    }
    
    .foto {
        width: 50%;
        margin: 5% auto;
    }
    
    .foto img {
        height: auto;
        max-height: 98%;
        max-width: 98%;
    }
    
    .beschreibung {
        width: 50%;
        margin: auto;
        color: #5f5f5f;
    }
    
    .beschreibung h2 {
        margin: -100px 0 50px 0;
    }
    /*gallerie*/
    
    .überschrift {
        color: #5f5f5f;
        padding-top: 10px;
    }
    
    #container {
        overflow-x: hidden;
        width: 800px;
        margin: 5% auto;
        padding-bottom: 20px;
    }
    
    #content {
        display: flex;
    }
    
    #content .item {
        margin: 0;
    }
    
    .item img {
        position: relative;
        height: 300px;
        width: auto;
    }
    
    .buttons {
        position: absolute;
        width: 900px;
        display: flex;
        justify-content: space-between;
        margin: -230px 0;
    }
    
    .buttons button {
        height: 30px;
        width: 30px;
        background-color: white;
        border-radius: 15px;
        color: #797979;
        transition: 0.5s;
    }
    
    .buttons button:hover {
        cursor: pointer;
        color: black;
    }
    /*Kontakt*/
    
    .image {
        position: relative;
        width: 900px;
        height: 554px;
        display: inline-block;
    }
    
    .image__img {
        display: block;
        width: 100%;
    }
    
    .image__img2 {
        display: block;
        width: 100%;
    }
    
    .image__overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: 0.5s;
    }
    
    .image__title {
        font-size: 2em;
        font-weight: bold;
    }
    /*links*/
    /*impressum*/
    
    .impressum {
        margin-top: 50px;
        height: 50px;
        background-color: black;
        color: white;
        text-align: right;
    }
    
    .impressum a {
        font-variant: small-caps;
        font-size: clamp(1em, 1vw, 2em);
        color: white;
        text-decoration: none;
        transition: 0.5s;
        margin: 0 10px;
    }
    
    .impressum a:hover {
        color: #5f5f5f;
    }
    
    .smartphone {
        display: none;
    }
    
    @media only screen and (max-width: 1080px) {
        .kiste {
            width: 700px;
        }
        .image {
            width: 700px;
            height: 431px;
        }
        #container {
            width: 600px;
        }
        .buttons {
            width: 700px;
        }
    }
    
    @media only screen and (max-width: 780px) {
        .kiste {
            width: 600px;
        }
        .image {
            width: 600px;
            height: 369px;
        }
        #container {
            width: 500px;
        }
        .buttons {
            width: 600px;
        }
        .inhalt h2 {
            padding-top: 30px;
        }
    }
    
    @media only screen and (max-width: 635px) {
        .kiste {
            width: 500px;
        }
        .image {
            width: 500px;
            height: 308px;
        }
        #container {
            width: 400px;
            overflow: auto;
        }
        .buttons {
            display: none;
        }
        .inhalt h2 {
            padding-top: 60px;
        }
    }
    
    @media only screen and (max-width: 503px) {
        .smartphone {
            display: block;
        }
        .box-area {
            display: none;
        }
        .headertext {
            font-size: 0.45cm
        }
        #container {
            width: 80%;
        }
    }
    /*inhalt smartphone (503px)*/
    
    .smart {
        padding-top: 10px;
    }
    
    .smart .image {
        position: relative;
        width: 95%;
        height: auto;
        display: inline-block;
    }
    
    .smart .image__img {
        display: block;
    }
    
    .smart .image__img2 {
        display: block;
        width: 100%;
    }
    
    .smart .image__overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: 0.5s;
    }
    
    .smart .image__title {
        font-size: 1.3em;
        font-weight: bold;
    }