/* INTERACTIVE BG CSS */

.points{
    align-items: center;
    background-clip: padding-box;
    background-color: rgba(var(--colour-static-black, 17, 17, 17), .48);
    border: 2px solid rgba(var(--colour-static-grey, 223, 223, 223), .48);
    border-radius: 64px;
    box-sizing: border-box;
    display: flex;
    height: 2rem;
    justify-content: center;
    line-height: .5;
    opacity: 0;
    padding: 0;
    position: absolute;
    transform: translateX(0rem) translateY(0rem) scale(.999);
    transition: all .25s
    ease-in-out, opacity .25s
    ease-in-out, visibility .25s
    ease-in-out;
    visibility: hidden;
    width: 2rem;
}

.points:hover{
    transform:scale(1.5) !important;
    backdrop-filter:blur(3px) !important;
    background-color:rgba(255,255,255,0.6) !important;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.75)  !important;
}

.points:before {
    bottom: -.5rem;
    content: "";
    display: block;
    left: -.5rem;
    position: absolute;
    right: -.5rem;
    top: -.5rem;
}

.points:after {
    background: rgb(var(--colour-static-white, 255, 255, 255));
    border-radius: 64px;
    box-shadow: 0 1px 4px rgba(var(--colour-static-black, 17, 17, 17), .55);
    content: "";
    display: block;
    height: .75rem;
    position: relative;
    transition: transform .25s
ease-in-out;
    width: .75rem;
}



.interactive_bg.initialized{
    position:relative;
    width:100%;
    /* display:flex; */
    display:block !important;
    justify-content: center;
    opacity:0;
    transition: opacity 1s;
}

.interactive_bg.padding_on_load{
    padding:0 20%;
}


.collage-slider.splide,
.collage-slider .splide__track,
.collage-slider .splide__slide {
    max-height:100vh !important;
}


.interactive_bg.hidden{
    display:flex; justify-content: center;
    opacity:0 !important;
}

.interactive_bg.visible{
    display:flex;
    justify-content: center;
    opacity:1 !important;
}

.interactive_bg:before{
    content: '';
    padding: 0 0 90% 0 !important;
}

.no_padding:before{
    content: '';
    padding: 0 !important;
}

.interactive_bg.initialized{
    padding:0 !important;
    opacity:1;
}

.interactive_bg.force_opacity{
    opacity:1 !important;
}




/* Nur auf Geräten MIT Hover (Desktop/Mouse) */
@media (hover: hover) {
    .interactive_bg:hover .points {
        opacity: 1;
        visibility: visible;
        transform: scale(1.1);
        backdrop-filter: blur(1px);
        box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.75) !important;
    }
}

/* Geräte OHNE Hover (Touch/Mobile) – immer sichtbar */
@media (hover: none) {
    .interactive_bg .points {
        opacity: 1 !important;
        visibility: visible !important;
        transform: scale(1.1);
        backdrop-filter: blur(1px);
        box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.75) !important;
    }
}


.interactive_bg_inner{
    position: relative;
    /* width:100%; */
}


.interactive_bg.layer .interactive_bg_inner{
    position: relative;
    width:100%;
}


.interactive_bg.layer.no_padding,
.interactive_bg.layer.padding_on_load{
    padding:0px !important;
}


.interactive_bg.layer .interactive_bg_inner .crop_collage_image{
    width:100%;
}






.splide__slide .interactive_bg{
    position: relative;


}

.splide__slide  .interactive_bg_inner{
    position: relative;

    /* height: 100vh; */

}


@media (orientation: portrait){
    .splide__slide  .interactive_bg_inner{
        position: relative;
        height: 70vh;
    }
}



.splide__slide .interactive_bg img {
    height: 100%;
}



li.splide__slide.is-active{
    z-index:999 !important;
    transform:scale(1);
}

li.splide__slide{
    overflow:hidden;
    transition:0.5s ease;
    transform:scale(1);
}

li.splide__slide.is-prev,
li.splide__slide.is-next{
    filter:brightnes(0.8);
    filter:blur(0px);
    z-index:99 !important;
    transform:scale(1);
}

.slick .interactive_bg img{
    width:100%;
}

/* INTERACTIVE BG CSS */




/* LAYER COLLAGE */
/* MOBILE */
#layer_collage_wrapper{
    display: flex;
    flex-direction: column;
    overflow:hidden;
    height:100%;
}

#layer_collage_wrapper .main_title{
    font-size: clamp(1.25625rem, -2.229464rem + 4.915179vw, 2.56875rem);
}

#layer_collage_wrapper .height-placeholder{
    min-width:50%;
}



#layer_collage_wrapper .slick_gallery_slinder_content,
#layer_collage_wrapper .interactive_bg_inner
{
    padding: 0px !important;
    margin: 0px !important;
}

#layer_collage_wrapper .layer_collage_product_list{
    overflow-y:scroll !important;
}

#layer_collage_wrapper .layer_collage_preview{
    width:100%;
}

#layer_collage_wrapper .layer_collage_product_list{
    width:100%;
}

#layer_collage_wrapper .layer_collage_item{
    display: flex;
    flex-direction: column;
    padding:0.5em;
}


#layer_collage_wrapper .layer_collage_item_wrapper{
    border-bottom: 1px solid #d2d2d2;
}

#layer_collage_wrapper .layer_collage_item_content{
    display: flex;
    flex-direction: column;
    padding:0.5em;
}

.layer_collage_product_list .height-placeholder > div > a {
    width: auto;
    /* max-height:30vh; */
}


@media screen and (min-width: 539px) {

    #layer_collage_wrapper {
        flex-direction: row;
    }

    #layer_collage_wrapper .layer_collage_preview{
        width:50%;
    }

    #layer_collage_wrapper .layer_collage_product_list{
        width:50%;
    }

    #layer_collage_wrapper .layer_collage_item {
        flex-direction: column;
    }

    #layer_collage_wrapper .layer_collage_preview {
        height: 100%;
        overflow: visible;
    }

    .layer_collage_product_list .height-placeholder > div > a {
        width: auto;
    }

}


@media screen and (min-width: 1024px) {
    #layer_collage_wrapper .layer_collage_item {
        flex-direction: row;
    }

     #layer_collage_wrapper .layer_collage_preview{
        width:60%;
    }

    #layer_collage_wrapper .layer_collage_product_list{
        width:40%;
    }
}


.layer_collage_list{
    display: flex;
    padding-bottom: 50px;
    flex-direction: column;
}

.layer_collage_list > .layer_collage_item{
    padding:0.5em;

}

.image_layer_collage{
    width:100% !important;
    /* max-width:30vw; */
}

.layer_collage_wrapper{
    display:flex;
    flex-direction: row;
    height: 100%;
}

.layer_collage_preview{
    width:70%;
}





.layer_collage_product_list   .height-placeholder > div > a {
    padding: 0.75em;
}

.layer_collage_product_list   .height-placeholder > div > a > img.image_img{
    position: relative !important;
}

.layer_collage_product_list  .height-placeholder > div > a > img.landscape {

    object-fit: contain;
}

.layer_collage_product_list   .height-placeholder > div > a > img.portrait {
    width: auto;

    object-fit: contain;
}

.layer_collage_product_list  button.icon {
    margin:0px !important;
}