@font-face {
    font-family: 'Avara Bold';
    src: url('../fonts/Avara-Bold.woff2');
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;    /* horizontal zentriert */
    align-items: center;        /* vertikal zentriert */
    overflow: hidden;

    background: linear-gradient(to bottom, 
        #b5b4b4 50%,       /* linke Hälfte */
        #ffffff 50%      /* rechte Hälfte */
    );
}
.content-top,
.content-bottom {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    max-width: 1600px;
    width: 100%;
    padding: 40px;
    font-family: 'Avara Bold';
    color: black;
    font-size: 2.3vw;
}

.content-top {
    top: 25%;                        /* Mitte der oberen Hälfte */
    transform: translate(-50%, -50%);
    color: #ffffff;
}

.content-bottom {
    top: 75%;                        /* Mitte der unteren Hälfte */
    transform: translate(-50%, -50%);
    color: #b5b4b4;
}


.content-bottom-active {
    top: 75%;                        /* Mitte der unteren Hälfte */
    transform: translate(-50%, -50%);
    color: #b5b4b4;
    text-decoration: underline;
    text-decoration-thickness: 0.09em;
}

.content-bottom-active:hover {
    font-style: italic;
    top: 75%;                        /* Mitte der unteren Hälfte */
    transform: translate(-50%, -50%);
    color: #b5b4b4;
    text-decoration: underline;
    text-decoration-thickness: 0.09em;
}

.content-top-active {
    top: 75%;                        /* Mitte der unteren Hälfte */
    transform: translate(-50%, -50%);
    color: #ffffff;
    text-decoration: underline;
    text-decoration-thickness: 0.09em;
}

.content-top-active:hover {
    font-style: italic;
    top: 75%;                        /* Mitte der unteren Hälfte */
    transform: translate(-50%, -50%);
    color: #ffffff;
    text-decoration: underline;
    text-decoration-thickness: 0.09em;
}

@media (max-width: 768px) {

.content-top,
.content-bottom {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    max-width: 1600px;
    width: 100%;
    padding: 40px;
    font-family: 'Avara Bold';
    color: black;
    font-size: 20px;
}

.content-top {
    top: 25%;                        /* Mitte der oberen Hälfte */
    transform: translate(-50%, -50%);
    color: #ffffff;
}

.content-bottom {
    top: 75%;                        /* Mitte der unteren Hälfte */
    transform: translate(-50%, -50%);
    color: #b5b4b4;
}


.content-bottom-active {
    top: 75%;                        /* Mitte der unteren Hälfte */
    transform: translate(-50%, -50%);
    color: #b5b4b4;
    text-decoration: underline;
    text-decoration-thickness: 0.09em;
}    

}