@charset "utf-8";
/* CSS DOKUMENT */

/* FOOTER STANDARDGRÖßE */
.footer-background {
    background-image: url('../media/hintergrund/footer-hintergrund-l.png');
    background-position: center;
    background-repeat: no-repeat;
    height: 271px;
    width: 100%;
}

.footer-container {
    height: 100%;
    align-items: center;
    justify-content: center;
}

.footer-container a {
    color: var(--blue);
}

.footer-container a:hover {
    opacity: .65;
}

.logo-footer {
    transition: var(--smooth);
    width: fit-content;
    border: none;
}

.logo-footer:hover {
    border: none;
    transition: var(--smooth);
    scale: .95;
}

.subnavi {
    padding: 8px 40px 9px 40px;
}

.subnavi ul{
    display: flex;
    flex-direction: row;
    gap: var(--space-m);
}

.subnavi a{
    color: var(--blue);
    font-size: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--orange);
    display: block;
}

.subnavi a:hover{
    opacity: .65;
}

.socials {
    margin-top: 16px;
    padding: 0 100px 0 0;
    display: flex;
    flex-direction: row;
    gap: var(--space-m);
}

.socials a {
    border: none;
}

.socials a:hover {
    opacity: .65;
    scale: 1.1;
}

/* FOOTER AB 992PX VIEWPORTBREITE */
/* <= 992 px */
@media screen and (max-width: 992px) {
    .footer-background {
        background-image: url('../media/hintergrund/footer-hintergrund-m.png');
    }
}

/* FOOTER AB 576PX VIEWPORTBREITE */
/* <= 576 px */
@media screen and (max-width: 576px) {
    .footer-background {
        background-image: url('../media/hintergrund/footer-hintergrund-s.jpg');
        padding: var(--space-l) 0;
    }

    .socials {
        flex-direction: column;
    }

    .subnavi ul{
        display: flex;
        flex-direction: column;
        gap: var(--space-m);
    }

    footer .flex-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-m);
    }

    footer .subnavi div ul {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: var(--space-m);
    }

    footer .socials {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: var(--space-m);
        padding: 0;
    }

    footer .subnavi {
        padding: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: var(--space-m);
    }
}