/* ==========================================================
   BeKa Autoaufbereitung V2
   Datei: contact-section.css
   Bereich: Kontakt
========================================================== */


/* ==========================================================
   SECTION
========================================================== */

.beka-contact{

    position:relative;

    padding:140px 0;

    background:#0f1115;

}


/* ==========================================================
   HEADER
========================================================== */

.beka-contact-header{

    max-width:760px;

    margin:0 auto 60px;

    text-align:center;

}


.beka-contact-header p{

    max-width:650px;

    margin:22px auto 0;

    color:#cfcfcf;

    font-size:1rem;

    line-height:1.75;

}


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

.beka-contact-grid{

    display:grid;

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

    gap:24px;

    max-width:900px;

    margin:0 auto;

}


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

.beka-contact-card{

    display:flex;

    align-items:center;

    gap:22px;

    min-height:105px;

    padding:24px 28px;

    background:#14171d;

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

    border-radius:20px;

    text-decoration:none;

    box-shadow:
        0 12px 35px rgba(0,0,0,.18);

    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease;

}


.beka-contact-card:hover{

    transform:translateY(-5px);

    border-color:rgba(215,25,63,.55);

    background:#171a20;

    box-shadow:
        0 18px 45px rgba(0,0,0,.28);

}


/* ==========================================================
   ICON
========================================================== */

.beka-contact-icon{

    flex:0 0 54px;

    width:54px;

    height:54px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(215,25,63,.10);

    border:1px solid rgba(215,25,63,.22);

    color:#d7193f;

    font-size:22px;

}


.beka-contact-icon span{

    display:block;

}


/* ==========================================================
   CONTENT
========================================================== */

.beka-contact-content{

    display:flex;

    flex-direction:column;

    gap:6px;

}


.beka-contact-label{

    color:#999;

    font-size:.82rem;

    text-transform:uppercase;

    letter-spacing:.12em;

    font-weight:600;

}


.beka-contact-content strong{

    color:#fff;

    font-size:1.05rem;

    font-weight:600;

}


/* ==========================================================
   SOCIAL AREA
========================================================== */

.beka-social-area{

    display:flex;

    flex-direction:column;

    align-items:center;

    margin-top:65px;

}


.beka-social-title{

    margin-bottom:22px;

    color:#999;

    font-size:.82rem;

    font-weight:600;

    letter-spacing:.14em;

    text-transform:uppercase;

}


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

.beka-social-links{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:12px;

}


.beka-social-link{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:110px;

    padding:12px 20px;

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

    border-radius:999px;

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

    color:#d8d8d8;

    text-decoration:none;

    font-size:.9rem;

    font-weight:600;

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

}


.beka-social-link:hover{

    color:#fff;

    background:#d7193f;

    border-color:#d7193f;

    transform:translateY(-3px);

}


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

@media(max-width:800px){

    .beka-contact{

        padding:110px 0;

    }

    .beka-contact-grid{

        grid-template-columns:1fr;

        max-width:600px;

    }

}


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

@media(max-width:600px){

    .beka-contact{

        padding:90px 0;

    }

    .beka-contact-header{

        margin-bottom:45px;

    }

    .beka-contact-header p{

        font-size:.94rem;

    }

    .beka-contact-card{

        min-height:95px;

        padding:20px;

        gap:17px;

        border-radius:17px;

    }

    .beka-contact-icon{

        flex-basis:48px;

        width:48px;

        height:48px;

        font-size:19px;

    }

    .beka-contact-content strong{

        font-size:.96rem;

        word-break:break-word;

    }

    .beka-social-area{

        margin-top:50px;

    }

    .beka-social-links{

        gap:9px;

    }

    .beka-social-link{

        min-width:100px;

        padding:11px 16px;

        font-size:.86rem;

    }

}


/* ==========================================================
   SEHR KLEINE GERÄTE
========================================================== */

@media(max-width:400px){

    .beka-contact-card{

        padding:18px;

    }

    .beka-social-link{

        min-width:90px;

        padding:10px 13px;

    }

}