/* ==========================================================
   BeKa Autoaufbereitung V2
   Datei: before-after.css
   Bereich: Vorher / Nachher Slider
========================================================== */


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

.beka-before-after{

    padding:150px 0;

    background:#0f1115;

}


/* ==========================================================
   SLIDER
========================================================== */

.beka-before-after-slider{

    position:relative;

    width:100%;

    max-width:1050px;

    aspect-ratio:1400 / 1025;

    margin:65px auto 0;

    overflow:hidden;

    border-radius:24px;

    background:#111318;

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

    box-shadow:
        0 25px 70px rgba(0,0,0,.30);

    user-select:none;

    touch-action:none;

}


/* ==========================================================
   BILDER
========================================================== */

.beka-before-after-slider img{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    object-position:center;

}


/* ==========================================================
   NACHHER
========================================================== */

.beka-before-after-after{

    position:absolute;

    inset:0;

    width:100%;

    overflow:hidden;

    z-index:1;

}


/* ==========================================================
   VORHER
========================================================== */

.beka-before-after-before{

    position:absolute;

    inset:0;

    z-index:2;

    width:100%;
    height:100%;

    overflow:hidden;

    clip-path:inset(0 50% 0 0);

    border-right:2px solid rgba(255,255,255,.9);

}

.beka-before-after-before img{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    max-width:none;

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

}

/* ==========================================================
   LABELS
========================================================== */

.beka-before-label,
.beka-after-label{

    position:absolute;

    top:22px;

    z-index:5;

    padding:9px 15px;

    border-radius:999px;

    font-size:.76rem;

    font-weight:800;

    letter-spacing:.08em;

    color:#fff;

    cursor:pointer;

    user-select:none;

    backdrop-filter:blur(10px);

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

    box-shadow:
        0 8px 25px rgba(0,0,0,.22);

}


.beka-before-label{

    left:22px;

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

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

}


.beka-after-label{

    right:22px;

    background:rgba(200,16,46,.78);

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

}


/* ==========================================================
   SLIDER HANDLE
========================================================== */

.beka-before-after-handle{

    position:absolute;

    top:0;
    bottom:0;

    left:50%;

    z-index:10;

    width:48px;

    padding:0;

    margin:0;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    background:transparent;

    border:0;

    color:#fff;

    cursor:ew-resize;

    touch-action:none;

}


/* ==========================================================
   CENTER LINE
========================================================== */

.beka-before-after-line{

    position:absolute;

    top:0;
    bottom:0;

    left:50%;

    width:2px;

    transform:translateX(-50%);

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

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

}


/* ==========================================================
   HANDLE CIRCLE
========================================================== */

.beka-before-after-handle::before{

    content:"";

    position:absolute;

    left:50%;
    top:50%;

    width:58px;
    height:58px;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:#c8102e;

    border:3px solid #fff;

    box-shadow:
        0 8px 28px rgba(0,0,0,.35);

}


/* ==========================================================
   ARROWS
========================================================== */

.beka-before-after-arrow{

    position:absolute;

    top:50%;

    z-index:2;

    transform:translateY(-50%);

    color:#fff;

    font-size:1.7rem;

    line-height:1;

    font-weight:300;

    pointer-events:none;

}


.beka-before-after-arrow.left{

    left:calc(50% - 19px);

}


.beka-before-after-arrow.right{

    right:calc(50% - 19px);

}


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

.beka-before-after-handle:hover::before{

    background:#e30b2d;

    box-shadow:
        0 10px 32px rgba(0,0,0,.45);

}


/* ==========================================================
   GALERIE
========================================================== */

.beka-gallery{

    padding:150px 0;

    background:#0c0d10;

}


.beka-gallery-grid{

    display:grid;

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

    gap:24px;

    margin-top:65px;

}


.beka-gallery-grid img{

    width:100%;

    aspect-ratio:4 / 3;

    display:block;

    object-fit:cover;

    border-radius:20px;

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

    box-shadow:
        0 14px 35px rgba(0,0,0,.20);

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

}


.beka-gallery-grid img:hover{

    transform:translateY(-6px);

    box-shadow:
        0 20px 45px rgba(0,0,0,.30);

    filter:brightness(1.04);

}


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

@media(max-width:900px){

    .beka-before-after{

        padding:110px 0;

    }

    .beka-gallery{

        padding:110px 0;

    }

    .beka-gallery-grid{

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

    }

}


@media(max-width:768px){

    .beka-before-after{

        padding:90px 0;

    }

    .beka-before-after-slider{

        margin-top:45px;

        border-radius:18px;

        aspect-ratio:4 / 3;

    }

    .beka-before-label,
    .beka-after-label{

        top:15px;

        padding:7px 11px;

        font-size:.68rem;

    }

    .beka-before-label{

        left:15px;

    }

    .beka-after-label{

        right:15px;

    }

    .beka-before-after-handle::before{

        width:50px;
        height:50px;

    }

    .beka-gallery{

        padding:90px 0;

    }

    .beka-gallery-grid{

        gap:16px;

        margin-top:45px;

    }

}


@media(max-width:520px){

    .beka-before-after-slider{

        aspect-ratio:1 / 1;

        border-radius:16px;

    }

    .beka-before-after-handle::before{

        width:46px;
        height:46px;

    }

    .beka-before-after-arrow{

        font-size:1.45rem;

    }

    .beka-gallery-grid{

        grid-template-columns:1fr;

    }

}