/*
|--------------------------------------------------------------------------
| THORIUM Supportportal – Footer
|--------------------------------------------------------------------------
|
| CSS-Struktur aus dem Standard-Template der THORIUM REDAXO Website.
| Nur technisch für das Serviceportal angepasst:
| - footer.png wird direkt von thorium-systems.com geladen
| - .container-Breite wird im Footer lokal mitgeführt
|
|--------------------------------------------------------------------------
*/


/* REDAXO hat diese Klasse global. Im Portal führen wir sie nur
   innerhalb des Footers mit, damit der Footer 1:1 dieselbe Geometrie hat. */

.site-footer .container {

    width:
        min(
            1180px,
            calc(100% - 48px)
        );

    margin:
        0 auto;

}


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

.site-footer {

    position:
        relative;

    flex-shrink:
        0;

    margin-top:
        auto;

    overflow:
        hidden;

    color:
        #ffffff;

    background-color:
        #05090d;

    background-image:
        linear-gradient(
            90deg,
            rgba(5,9,13,1) 0%,
            rgba(5,9,13,1) 48%,
            rgba(5,9,13,.94) 61%,
            rgba(5,9,13,.47) 76%,
            rgba(5,9,13,.08) 100%
        ),
        url('https://thorium-systems.com/media/footer.png');

    background-repeat:
        no-repeat;

    background-size:
        cover;

    background-position:
        center right;

    border-top:
        2px solid
        var(--thorium-blue, #246da5);

}


.footer-main {

    min-height:
        175px;

    display:
        grid;

    grid-template-columns:
        minmax(260px,1fr)
        minmax(330px,1fr)
        minmax(300px,.85fr);

    gap:
        55px;

    align-items:
        center;

    padding:
        28px 0 24px;

}


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

.footer-logo {

    display:
        block;

    width:
        250px;

    max-width:
        100%;

    line-height:
        0;

}


.footer-logo img {

    display:
        block;

    width:
        100%;

    height:
        auto;

}


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

.footer-heading {

    margin-bottom:
        14px;

    color:
        #8abde1;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .16em;

    text-transform:
        uppercase;

}


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

.footer-buttons {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        10px;

}


.footer-buttons--brands {

    display:
        grid;

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

    align-items:
        stretch;

    width:
        100%;

    max-width:
        390px;

}


.footer-buttons--brands .footer-button {

    width:
        100%;

    white-space:
        nowrap;

}


.footer-button {

    min-height:
        38px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 14px;

    color:
        #ffffff;

    background:
        rgba(255,255,255,.07);

    border:
        1px solid
        rgba(255,255,255,.19);

    border-radius:
        4px;

    font-size:
        12px;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        transform .2s ease,
        background .2s ease,
        border-color .2s ease;

}


.footer-button:hover {

    transform:
        translateY(-2px);

    background:
        var(--thorium-racing-blue, #3545b0);

    border-color:
        var(--thorium-racing-blue, #3545b0);

}


.footer-button-primary {

    background:
        #283674;

    border-color:
        #35458f;

}


.footer-button-primary:hover {

    background:
        var(--thorium-racing-blue, #3545b0);

    border-color:
        var(--thorium-racing-blue, #3545b0);

}


/* =========================================
   LINKEDIN
========================================= */

.footer-linkedin {

    gap:
        8px;

}


.footer-linkedin-icon {

    width:
        23px;

    height:
        23px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #ffffff;

    background:
        #0a66c2;

    border-radius:
        3px;

    font-size:
        12px;

    font-weight:
        800;

}


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

.footer-bottom {

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

}


.footer-bottom-inner {

    min-height:
        44px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

}


.footer-copyright {

    color:
        #808b94;

    font-size:
        10px;

}


.footer-legal {

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

}


.footer-legal a {

    color:
        #a4adb4;

    font-size:
        10px;

    text-decoration:
        none;

}


.footer-legal a:hover {

    color:
        #ffffff;

}


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

@media (max-width: 900px) {


    .site-footer {

        background-position:
            70% center;

    }


    .footer-main {

        grid-template-columns:
            1fr 1fr;

        gap:
            35px;

    }


    .footer-brand {

        grid-column:
            1 / -1;

    }

}


@media (max-width: 650px) {


    .site-footer .container {

        width:
            min(
                100% - 32px,
                1180px
            );

    }


    .site-footer {

        background-image:
            linear-gradient(
                rgba(5,9,13,.94),
                rgba(5,9,13,.94)
            ),
            url('https://thorium-systems.com/media/footer.png');

        background-position:
            center right;

    }


    .footer-main {

        grid-template-columns:
            1fr;

        gap:
            28px;

        padding:
            30px 0;

    }


    .footer-brand {

        grid-column:
            auto;

    }


    .footer-logo {

        width:
            220px;

    }


    .footer-buttons--brands {

        grid-template-columns:
            1fr;

        max-width:
            none;

    }


    .footer-bottom-inner {

        padding:
            12px 0;

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            8px;

    }

}