footer {
    width: calc(100vw - 2*var(--padding-inline) - var(--scrollbarWidth) - 1px);
    padding-bottom: 50px;
    padding-top: 70px;
    padding-inline: var(--padding-inline);
    background-color: var(--light-grey);
    color: var(--mid-grey);
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 110px;
}

footer .copyright {
    float: left;
    display: inline;
}

footer .contact {
    float: right;
    display: inline-flex;
    gap: 20px;
}

footer .contact a {
    color: var(--mid-grey);
    text-decoration: none;
}

footer .contact a:hover {
    text-decoration: underline;
}

footer .copyright br {
    margin-bottom: 17px;
}

footer .copyright .vueste {
    opacity: .6;
}

footer .copyright .vueste a {
    color: var(--text-grey);
}

footer .links {
    display: flex;
    gap: 20px;
    list-style: none;
}

footer .links li a {
    text-decoration: underline;
    cursor: pointer;
    color: var(--mid-grey);
}

@media (max-width: 860px) {
    footer p {
        width: 100%;
    }

    footer .contact {
        margin-top: 25px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}