/* =========================================================
   FOOTER
========================================================= */

footer {

    width: 100%;

    padding:
        70px 0 30px;

    background:
        #080b08;

    border-top:
        1px solid
        rgba(255,255,255,0.08);

    box-sizing:
        border-box;
}


/* =========================================================
   FOOTER CONTAINER
========================================================= */

footer .container {

    width:
        min(92%, var(--max-width));

    margin-inline:
        auto;
}


/* =========================================================
   FOOTER GRID
========================================================= */

.footer-grid {

    display:
        grid;

    grid-template-columns:
        2fr 1fr 1fr 1fr;

    gap:
        50px;

    padding-bottom:
        60px;
}


/* =========================================================
   FOOTER BRAND
========================================================= */

.footer-brand p {

    max-width:
        350px;

    color:
        #858d84;

    line-height:
        1.7;

    margin-top:
        20px;
}


/* =========================================================
   FOOTER COLUMNS
========================================================= */

.footer-column h4 {

    margin:
        0 0 20px;

    font-size:
        14px;

    text-transform:
        uppercase;

    letter-spacing:
        1px;

    color:
        #dce1d8;
}


.footer-column a {

    position:
        relative;

    display:
        block;

    color:
        #858d84;

    font-size:
        14px;

    margin-bottom:
        12px;

    text-decoration:
        none;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


.footer-column a:hover {

    color:
        var(--lime);

    transform:
        translateX(4px);
}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.footer-bottom {

    padding-top:
        25px;

    border-top:
        1px solid
        rgba(255,255,255,0.08);

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        20px;

    color:
        #687067;

    font-size:
        12px;

    line-height:
        1.6;
}


/* =========================================================
   RESPONSIVE – TABLET
========================================================= */

@media (max-width: 1050px) {

    .footer-grid {

        grid-template-columns:
            1.5fr 1fr 1fr;
    }

}


/* =========================================================
   RESPONSIVE – MOBILE
========================================================= */

@media (max-width: 800px) {

    footer {

        padding:
            60px 0 25px;
    }


    .footer-grid {

        grid-template-columns:
            repeat(2, 1fr);

        gap:
            40px 25px;

        padding-bottom:
            45px;
    }


    .footer-brand {

        grid-column:
            1 / -1;
    }


    .footer-bottom {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            8px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 500px) {

    .footer-grid {

        grid-template-columns:
            1fr;

        gap:
            35px;
    }


    .footer-brand {

        grid-column:
            auto;
    }


    .footer-brand p {

        max-width:
            100%;
    }

}

/* =========================================================
   AMATH CMS – STRUKTURIERTE KONTAKTDATEN
========================================================= */

.footer-column [data-amath-contact-items] > span {

    display:
        block;

    color:
        #858d84;

    font-size:
        14px;

    line-height:
        1.5;

    margin-bottom:
        12px;

    white-space:
        pre-line;
}

/* =========================================================
   AMATH CMS – SOCIAL MEDIA
========================================================= */

.footer-column [data-amath-social-links] .amath-social-link {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;
}


.footer-column [data-amath-social-links] .amath-social-icon {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        18px;

    height:
        18px;

    flex:
        0 0 18px;
}


.footer-column [data-amath-social-links] .amath-social-icon svg {

    display:
        block;

    width:
        18px;

    height:
        18px;
}