/* ==========================================================
   BeKa Autoaufbereitung V2
   Datei: gallery.css
   Bereich: Galerie + Lightbox
========================================================== */


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

.beka-gallery{

    position:relative;

    padding:150px 0;

    background:#0c0e12;

}


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

.beka-gallery .beka-section-header{

    margin-bottom:65px;

}


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

.beka-gallery-grid{

    width:100%;

    display:grid;

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

    gap:24px;

}


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

.beka-gallery-item{

    position:relative;

    width:100%;

    aspect-ratio:4 / 3;

    overflow:hidden;

    border-radius:20px;

    background:#14171d;

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

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

}


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

.beka-gallery-item img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    border:0;

    margin:0;

    padding:0;

    cursor:pointer;

    transition:
        transform .4s ease,
        filter .4s ease;

}


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

.beka-gallery-item:hover img{

    transform:scale(1.035);

    filter:brightness(1.04);

}


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

@media(max-width:1000px){

    .beka-gallery{

        padding:120px 0;

    }

    .beka-gallery .beka-section-header{

        margin-bottom:50px;

    }

    .beka-gallery-grid{

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

        gap:20px;

    }

}


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

@media(max-width:600px){

    .beka-gallery{

        padding:90px 0;

    }

    .beka-gallery .beka-section-header{

        margin-bottom:40px;

    }

    .beka-gallery-grid{

        grid-template-columns:1fr;

        gap:18px;

    }

    .beka-gallery-item{

        border-radius:16px;

    }

}


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

@media(max-width:400px){

    .beka-gallery{

        padding:75px 0;

    }

    .beka-gallery-grid{

        gap:14px;

    }

    .beka-gallery-item{

        border-radius:14px;

    }

}


/* ==========================================================
   ==========================================================
   LIGHTBOX
   ==========================================================
========================================================== */


/* ==========================================================
   LIGHTBOX GRUNDLAGE
========================================================== */

.beka-lightbox{

    position:fixed;

    inset:0;

    z-index:9999;

    display:none;

    align-items:center;

    justify-content:center;

    padding:40px;

    background:rgba(0,0,0,.88);

    backdrop-filter:blur(8px);

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

}


/* ==========================================================
   LIGHTBOX AKTIV
========================================================== */

.beka-lightbox.active{

    display:flex;

}


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

.beka-lightbox-content{

    position:relative;

    max-width:min(1400px,90vw);

    max-height:90vh;

    display:flex;

    align-items:center;

    justify-content:center;

}


/* ==========================================================
   LIGHTBOX BILD
========================================================== */

.beka-lightbox-image{

    display:block;

    max-width:90vw;

    max-height:88vh;

    width:auto;

    height:auto;

    object-fit:contain;

    border-radius:14px;

    box-shadow:
        0 25px 80px rgba(0,0,0,.55);

}


/* ==========================================================
   SCHLIESSEN
========================================================== */

.beka-lightbox-close{

    position:absolute;

    top:25px;

    right:30px;

    z-index:10001;

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    border-radius:50%;

    background:rgba(20,22,27,.80);

    color:#fff;

    font-size:32px;

    line-height:1;

    cursor:pointer;

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

}


.beka-lightbox-close:hover{

    background:#d7193f;

    transform:rotate(90deg);

}


/* ==========================================================
   NAVIGATION BUTTONS
========================================================== */

.beka-lightbox-prev,
.beka-lightbox-next{

    position:absolute;

    top:50%;

    z-index:10001;

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    transform:translateY(-50%);

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

    border-radius:50%;

    background:rgba(20,22,27,.80);

    color:#fff;

    font-size:38px;

    line-height:1;

    cursor:pointer;

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

}


/* ==========================================================
   LINKER PFEIL
========================================================== */

.beka-lightbox-prev{

    left:30px;

}


/* ==========================================================
   RECHTER PFEIL
========================================================== */

.beka-lightbox-next{

    right:30px;

}


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

.beka-lightbox-prev:hover{

    background:#d7193f;

    transform:
        translateY(-50%)
        translateX(-3px);

}


.beka-lightbox-next:hover{

    background:#d7193f;

    transform:
        translateY(-50%)
        translateX(3px);

}


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

@media(max-width:700px){

    .beka-lightbox{

        padding:15px;

    }


    .beka-lightbox-content{

        width:100%;

        max-width:100%;

        max-height:85vh;

    }


    .beka-lightbox-image{

        max-width:92vw;

        max-height:78vh;

        width:auto;

        height:auto;

        border-radius:10px;

    }


    /* ------------------------------------------
       CLOSE
    ------------------------------------------ */

    .beka-lightbox-close{

        top:14px;

        right:14px;

        z-index:10002;

        width:44px;

        height:44px;

        font-size:29px;

    }


    /* ------------------------------------------
       NAVIGATION
    ------------------------------------------ */

    .beka-lightbox-prev,
    .beka-lightbox-next{

        top:50%;

        z-index:10002;

        width:46px;

        height:46px;

        font-size:32px;

        transform:translateY(-50%);

    }


    .beka-lightbox-prev{

        left:8px;

    }


    .beka-lightbox-next{

        right:8px;

    }


    .beka-lightbox-prev:hover{

        transform:translateY(-50%);

    }


    .beka-lightbox-next:hover{

        transform:translateY(-50%);

    }

}


/* ==========================================================
   SEHR KLEINE HANDYS
========================================================== */

@media(max-width:400px){

    .beka-lightbox{

        padding:10px;

    }


    .beka-lightbox-image{

        max-width:88vw;

        max-height:74vh;

    }


    .beka-lightbox-prev,
    .beka-lightbox-next{

        width:42px;

        height:42px;

        font-size:29px;

    }


    .beka-lightbox-prev{

        left:5px;

    }


    .beka-lightbox-next{

        right:5px;

    }

}