/* FOOTER - page footer (Page/Partials/Footer.html): the footer links with the quality seal and the cancel-contract
   link, a rule, then the copyright line with address, mail and phone. The band above it (.content-footer) belongs to
   the page templates and stays in the SCSS build. */
#footer {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    color: #d7d8d9;
    background-color: #3f3f3f;

    @media (width >= 992px) { /* lg */
        padding-top: 1.875rem;
    }

    a {
        color: #d7d8d9;
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }

    hr {
        border-color: #303030;
        margin: 20px 0;
        clear: both;
    }
}

/* footer links; the right padding keeps them clear of the quality seal */
#footer .footer-container {
    position: relative;
    padding-right: 5.625rem;

    @media (width >= 992px) { /* lg */
        padding-right: 11.25rem;
    }

    .btn.btn-default {
        color: var(--bs-white);
        border-color: var(--bs-white);

        &:hover {
            background-color: rgba(255, 255, 255, 0.2);
            text-decoration: none;
        }
    }

    ul {
        padding: 0;
        margin-bottom: 1.25rem;

        li {
            display: block;
            list-style-type: none;
            margin-bottom: 5px;
            position: relative;

            @media (width >= 768px) { /* md */
                display: inline-block;
                margin-bottom: 0;

                /* divider between the links */
                &::after {
                    content: "";
                    display: block;
                    width: 1px;
                    background-color: #b6b6b6;
                    position: absolute;
                    top: 4px;
                    bottom: 4px;
                    right: 0.9rem;
                }
            }

            a {
                padding: 0.2rem 2rem 0.2rem 0;
                display: block;
            }
        }

        li:last-child::after {
            content: none;
        }
    }
}

#footer .copyright-container {
    color: #b6b6b6;

    ul {
        margin: 0;
        padding: 0;

        li {
            display: block;
            margin-bottom: 5px;

            @media (width >= 768px) { /* md */
                margin-bottom: 0;
                padding-left: 0.5rem;
                display: inline-block;
            }

            &:first-child {
                padding-left: 0;
            }

            /* mail and phone: own line at md, back in the row from lg */
            &.tel,
            &.mail,
            &.fax {
                @media (width >= 768px) { /* md */
                    margin-top: 5px;
                    display: block;
                }

                @media (width >= 992px) { /* lg */
                    margin-top: 0;
                    margin-left: 1rem;
                    display: inline-block;
                }
            }

            svg {
                width: 2rem;
                height: 2rem;
            }
        }
    }

    /* dot between the address parts */
    .circle {
        position: relative;
        margin-right: 2px;

        &::after {
            content: "";
            display: inline-block;
            width: 0.5rem;
            height: 0.5rem;
            background-color: #b6b6b6;
            border-radius: 50%;
            position: relative;
            top: -2px;
        }
    }
}

/* quality seal, overlapping the band above the footer */
#focus-money-siegel {
    position: absolute;
    top: -3.125rem;
    right: 0.625rem;
    z-index: 2;

    @media (width >= 992px) { /* lg */
        top: -6.125rem;
        right: 0.9375rem;
    }
}

#cancel-contract-link {
    @media (width >= 992px) { /* lg */
        position: relative;
        top: -1.25rem;
        float: right;
    }
}