/* ==========================================================
   BeKa Autoaufbereitung V2
   Datei: footer.css
   Aufgabe: Footer
========================================================== */


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

.beka-footer{

    padding:75px 0 30px;

    background:#0b0d11;

    border-top:
        1px solid var(--beka-border);

}


/* ==========================================================
   HAUPTBEREICH
========================================================== */

.beka-footer-main{

    display:grid;

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

    gap:70px;

    align-items:start;

}


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

.beka-footer-brand{

    max-width:320px;

}


.beka-footer-brand img{

    display:block;

    width:auto;

    height:85px;

    max-width:200px;

    object-fit:contain;

}


.beka-footer-brand p{

    margin:18px 0 0;

    max-width:280px;

    color:#999;

    font-size:.92rem;

    line-height:1.7;

}


/* ==========================================================
   ÜBERSCHRIFTEN
========================================================== */

.beka-footer-contact h3,
.beka-footer-links h3{

    margin:5px 0 22px;

    color:#fff;

    font-size:.9rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.12em;

}


/* ==========================================================
   KONTAKT
========================================================== */

.beka-footer-contact{

    display:flex;

    flex-direction:column;

    gap:14px;

}


.beka-footer-contact a,
.beka-footer-contact > span{

    display:flex;

    align-items:center;

    gap:10px;

    color:#d2d2d2;

    text-decoration:none;

    font-size:.92rem;

    transition:
        color .25s ease;

}


.beka-footer-contact a:hover{

    color:#fff;

}


/* ==========================================================
   ICONS
========================================================== */

.beka-footer-icon{

    width:28px;

    color:var(--beka-primary);

    font-size:.9rem;

}


/* ==========================================================
   LINKS
========================================================== */

.beka-footer-links{

    display:flex;

    flex-direction:column;

    gap:14px;

}


.beka-footer-links a{

    color:#d2d2d2;

    text-decoration:none;

    font-size:.92rem;

    transition:
        color .25s ease,
        transform .25s ease;

}


.beka-footer-links a:hover{

    color:var(--beka-primary);

    transform:translateX(3px);

}


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

.beka-footer-bottom{

    margin-top:65px;

    padding-top:25px;

    border-top:
        1px solid var(--beka-border);

    text-align:center;

}


.beka-footer-bottom p{

    margin:0;

    color:#777;

    font-size:.82rem;

}


/* ==========================================================
   SCROLL TOP
========================================================== */

#beka-scroll-top{

    position:fixed;

    right:30px;

    bottom:30px;

    z-index:1000;

    width:50px;

    height:50px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:0;

    border-radius:50%;

    background:var(--beka-primary);

    color:#fff;

    font-size:20px;

    cursor:pointer;

    box-shadow:
        var(--beka-shadow-medium);

    transition:
        transform .25s ease,
        background .25s ease;

}


#beka-scroll-top:hover{

    transform:translateY(-4px);

    background:var(--beka-primary-hover);

}


/* ==========================================================
   TABLET
========================================================== */

@media(max-width:800px){

    .beka-footer{

        padding:65px 0 28px;

    }


    .beka-footer-main{

        grid-template-columns:
            1fr 1fr;

        gap:45px;

    }


    .beka-footer-brand{

        grid-column:1/-1;

    }

}


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

@media(max-width:600px){

    .beka-footer{

        padding:55px 0 25px;

    }


    .beka-footer-main{

        grid-template-columns:1fr;

        gap:38px;

    }


    .beka-footer-brand{

        grid-column:auto;

    }


    .beka-footer-brand img{

        height:75px;

    }


    .beka-footer-bottom{

        margin-top:45px;

        padding-top:22px;

    }


    #beka-scroll-top{

        right:18px;

        bottom:18px;

        width:46px;

        height:46px;

        font-size:18px;

    }

}

/* ==========================================================
   FOOTER – SVG ICONS
========================================================== */

.beka-footer-icon {
    width: 22px;
    height: 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #d7193f;

    flex-shrink: 0;
}

.beka-footer-icon img {
    width: 20px !important;
    height: 20px !important;

    max-width: 20px !important;
    max-height: 20px !important;

    display: block;
    object-fit: contain;
}