/* ==========================================================
   BeKa Autoaufbereitung
   Services V6
   Teil 1
========================================================== */

.beka-services{

    padding:155px 0;
    background:#0f1115;

}

.beka-services .beka-section-header{
    margin-bottom:90px;
}

.beka-services-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:34px;

}


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

.beka-service-card{

    perspective:1800px;
    min-height:440px;

}

.beka-service-inner{

    position:relative;

    width:100%;
    height:100%;

    transform-style:preserve-3d;

    transition:
    transform .75s cubic-bezier(.22,.61,.36,1);

}

.beka-service-card.active .beka-service-inner{

    transform:rotateY(180deg);

}


/* ==========================================
   FRONT / BACK
========================================== */

.beka-service-front,
.beka-service-back{

    position:absolute;
    inset:0;

    overflow:hidden;

    border-radius:22px;

    backface-visibility:hidden;

}


/* ==========================================
   IMAGE
========================================== */

.beka-service-image{

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center center;

    transform:scale(1);

    transition:
    transform .55s ease,
    filter .35s ease;

}


/* ==========================================
   GRADIENT
========================================== */

.beka-service-gradient{

    position:absolute;
    inset:0;

    background:

    linear-gradient(

        to top,

        rgba(0,0,0,.68) 0%,

        rgba(0,0,0,.34) 28%,

        rgba(0,0,0,.12) 55%,

        rgba(0,0,0,0) 100%

    );

}


/* ==========================================
   OVERLAY
========================================== */

.beka-service-overlay{

    position:absolute;

    left:28px;
    right:28px;
    bottom:22px;

    border-radius:18px;

    background:
    rgba(15,17,21,.34);

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

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

    box-shadow:
    0 10px 28px rgba(0,0,0,.20);

    transition:
    transform .35s ease,
    background .35s ease,
    box-shadow .35s ease;

}


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

.beka-overlay-content{

    display:flex;

    flex-direction:column;

    gap:12px;

    padding:18px;

}


/* ==========================================
   TITLE
========================================== */

.beka-overlay-content h3{

    margin:0;

    color:#fff;

    font-size:2rem;

    font-weight:700;

    line-height:1.08;

}


/* ==========================================
   TEXT
========================================== */

.beka-overlay-content p{

    margin:0;

    color:#f0f0f0;

    font-size:.98rem;

    line-height:1.65;

}


/* ==========================================
   BUTTON
========================================== */

.beka-card-button{

    margin-top:6px;

    padding:0;

    background:none;

    border:none;

    color:#d7193f;

    font-size:.96rem;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}/* ==========================================================
   BeKa Autoaufbereitung
   Services V6
   Teil 2
========================================================== */


/* ==========================================
   CARD HOVER
========================================== */

.beka-service-card{

    transition:
        transform .35s ease;

}

.beka-service-card:hover{

    transform:translateY(-6px);

}

.beka-service-card:hover .beka-service-image{

    transform:scale(1.02);

    filter:brightness(1.03);

}

.beka-service-card:hover .beka-service-overlay{

    transform:translateY(-4px);

    background:rgba(15,17,21,.30);

    box-shadow:
        0 14px 30px rgba(0,0,0,.22);

}


/* ==========================================
   BUTTON
========================================== */

.beka-card-button:hover{

    color:#ff335c;

    transform:translateX(5px);

}


/* ==========================================
   BACK
========================================== */

.beka-service-back{

    transform:rotateY(180deg);

    display:flex;

    flex-direction:column;

    gap:22px;

    padding:32px;

    background:

    linear-gradient(

        180deg,

        #1a1b20 0%,

        #101114 100%

    );

    border:

        1px solid rgba(255,255,255,.05);

}


/* ==========================================
   BACK TITLE
========================================== */

.beka-service-back h3{

    margin:0;

    color:#fff;

    font-size:1.8rem;

}


/* ==========================================
   TAGS
========================================== */

.beka-tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}

.beka-tags span{

    padding:10px 15px;

    border-radius:999px;

    background:

        rgba(200,16,46,.10);

    border:

        1px solid rgba(200,16,46,.22);

    color:#fff;

    font-size:.88rem;

    transition:.3s;

}

.beka-tags span:hover{

    background:#c8102e;

    transform:translateY(-2px);

}


/* ==========================================
   BACK TEXT
========================================== */

.beka-service-back p{

    margin:0;

    color:#d6d6d6;

    line-height:1.75;

}


/* ==========================================
   BACK BUTTON
========================================== */

.beka-card-back-button{

    margin-top:auto;

    align-self:flex-start;

    padding:12px 22px;

    border-radius:999px;

    border:

        1px solid rgba(255,255,255,.12);

    background:transparent;

    color:#fff;

    cursor:pointer;

    transition:.3s;

}

.beka-card-back-button:hover{

    background:#c8102e;

    border-color:#c8102e;

}


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

@media (max-width:992px){

    .beka-services-grid{

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

    }

}

@media (max-width:768px){

    .beka-services{

        padding:90px 0;

    }

    .beka-services-grid{

        grid-template-columns:1fr;

    }

    .beka-service-card{

        min-height:460px;

    }

    .beka-service-overlay{

        left:20px;
        right:20px;
        bottom:20px;

    }

    .beka-overlay-content{

        padding:18px;

    }

    .beka-overlay-content h3{

        font-size:1.65rem;

    }

}

@media (max-width:480px){

    .beka-service-card{

        min-height:420px;

    }

    .beka-overlay-content{

        padding:16px;

        gap:10px;

    }

    .beka-overlay-content h3{

        font-size:1.45rem;

    }

    .beka-overlay-content p{

        font-size:.9rem;

    }

}


/* ==========================================
   PERFORMANCE
========================================== */

.beka-service-card,
.beka-service-inner,
.beka-service-image,
.beka-service-overlay{

    will-change:transform;

}