:root{
    /*Defaults*/
    --mockupScrollerHeight: 600px;
    --mockupMobileBreakpoint: 768;

    /*Neigung*/
    --mockupNeigungY: 30deg;
    --mockupNeigungYScale: 1.5;
    --mockupNeigungZ: 0deg;
    --mockupNeigungZScale: 1;
   
    /* Phone */
    --mockupTranslation: 85%;
    --mockupTranslationScale: 1.7;
    
    /* Tablet*/
    --mockupTranslationTablet: 5%;
    
    /*Colors*/
    --mockupTiefenfarbwert: 70; 
    --mockupColorFrame:#1c1c1c;
    --mockupColorFineBorder:#707070;

    /*Design*/
    --mockupRadius:20px;
    --mockupRadiusInset:10px;
    --mockupFineBorder:2px -1px 0 0 var(--mockupColorFineBorder),inset 0 0 0 var(--mockupColorFrame),;
    --mockupShadowBottom: 8px 0px 10px -4px rgb(0 0 0 / 25%);
    --mockupThickness: -1px 0 -2px;
    --mockupFrameThickness:15px;
    --mockupFrameThicknessTablet:20px;
    --mockupSchlagSchatten:filter: drop-shadow(2px 0px 3px #000000);
}

@media screen and (max-width: 1440px) {
    .mockup-scroller{
        --mockupScrollerHeight: 400px;
    }
}
.mockup-screenshot,
.mockup-scroller {
    height: var(--mockupScrollerHeight);
    transition: none;
    width: 1px;
    margin: 0 auto var(--abstandUntenContainer);
    }
    .mockup-screenshot div.wp-block-group__inner-container,
    .mockup-scroller div.wp-block-group__inner-container {
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        }

        /*Device*/
        .mockup-screenshot div.wp-block-group__inner-container > figure,
        .mockup-scroller .wp-block-group__inner-container > figure {
            transition: all 0.1s linear;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            margin-bottom: 0;
            z-index: 2;  
            width: max-content;
            }
        .mockup-screenshot div.wp-block-group__inner-container > figure,    
        .mockup-scroller .wp-block-group__inner-container > figure {
            height: var(--mockupScrollerHeight);
            -webkit-filter: drop-shadow(4px 2px 5px #00000085);
            filter: drop-shadow(4px 2px 5px #00000085);
            /*Rahmen*/
            background-color: var(--mockupColorFrame);
            border-top: 20px;
            border-bottom: 20px;
            border-left:var(--mockupFrameThickness);
            border-right:var(--mockupFrameThickness);
            border-style: solid;
            border-color:var(--mockupColorFrame);
            border-radius: var(--mockupRadius);

            /*Dicke*/
            -webkit-box-shadow:
                var(--mockupFineBorder),
                0px 0px 0px 0px rgb(var(--mockupTiefenfarbwert), var(--mockupTiefenfarbwert), var(--mockupTiefenfarbwert)),
                var(--mockupShadowBottom);
            box-shadow:
                var(--mockupFineBorder),
                0px 0px 0px 0px rgb(var(--mockupTiefenfarbwert), var(--mockupTiefenfarbwert), var(--mockupTiefenfarbwert)),
                var(--mockupShadowBottom),
                
            }

        /*Ausgangslage Tablet*/
        .mockup-scroller.tablet .wp-block-group__inner-container > figure{
            transform: translateX(-50%) perspective(1555px) rotateY(0deg) scale(0.8)
            }

            /*Bildschirm*/
            .mockup-scroller .wp-block-group__inner-container > figure > img{
                height: 100%;
                width: 100%; 
                max-width:987px;
                border-radius: var(--mockupRadiusInset);
            }
            .mockup-scroller .wp-block-group__inner-container > figure:last-child > img{
                /*max-width:316px;*/
            }

        /*Feiner-Rahmen, 1. Gerät*/
        .mockup-scroller .wp-block-group__inner-container > figure.center{
            -webkit-box-shadow:0 0 0 1px var(--mockupColorFineBorder);
            box-shadow:0 0 0 1px var(--mockupColorFineBorder); 
        }
            

        /* Animation Preview */
        .mockup-scroller .wp-block-group__inner-container > figure.devicecount-1{
            z-index: 1 ;
        }
        .mockup-scroller .wp-block-group__inner-container > figure.devicecount-2{
            z-index: 0 ;
        }
        
        /*mockup Screenshot, WebseitenScroller*/
        .mockup-screenshot.tablet div.wp-block-group__inner-container > figure img,
        .mockup-screenshot.tablet div.wp-block-group__inner-container > figure,
        .mockup-screenshot{
            width:100%
            }
        .mockup-screenshot{
            -webkit-filter: drop-shadow(10px 10px 8px #00000065);
            filter: drop-shadow(10px 10px 8px #00000065);
            }
            .mockup-screenshot.tablet div.wp-block-group__inner-container > figure{
                overflow: hidden;
                -webkit-filter:none;
                filter:none;
            }
            .mockup-screenshot.tablet div.wp-block-group__inner-container > figure:after{
                content:"";
                position: absolute;
                z-index:1;
                top:-10px;
                left:-10px;
                width:calc(100% + 20px);
                height:calc(100% + 20px);
                border-radius: var(--mockupRadiusInset);
                box-shadow: 
                    inset 10px 10px 0px var(--mockupColorFrame), 
                    inset -10px -10px 0px var(--mockupColorFrame), 
                    inset 10px -10px 0px var(--mockupColorFrame),
                    inset -10px 10px 0px var(--mockupColorFrame);
            }
            .mockup-screenshot.tablet div.wp-block-group__inner-container > figure:before{
                content:"";
                position: absolute;
                z-index:1;
                top:-10px;
                left:-10px;
                width:100%;
                height:100%;
                background: linear-gradient(295deg, 
                    #ffffff00 49%, 
                    #ffffff0d 51%,
                    #ffffff05 85%,
                    #ffffff40 95%
                    );
            }

/* *********
    Mobile
* ******* */
/* Mobile view */
.mockup-scroller.mobile-view .wp-block-group__inner-container > figure{
    width: fit-content;
    margin-bottom: 0;
}
/*Neue Animationsart*/
@media screen and (max-width: 768px) {
    .mockup-scroller{
        --mockupScrollerHeight: 75vh;
        width: calc(100% + 40px);
        left: -20px;
        overflow: hidden;
        }
        .mockup-scroller *{
            transition: none
        } 
        .mockup-scroller.phone .wp-block-group__inner-container{
            width: calc(100% * 5);
            position: relative;
            gap:40px;
            justify-content: space-around;
            }
            .mockup-scroller.phone .wp-block-group__inner-container:before{
                content: "";
                width:50vw;
                height:100%;
                display: block;
            }
            .mockup-scroller .wp-block-group__inner-container figure{
                position: relative;
                left: auto;
                transform: inherit;
                z-index: 0;
                width: auto;
                transition: none;
                transform: perspective(1680px) rotateZ(calc(0deg)) rotateY(calc(-30deg)) scale(0.9);
            }
            .mockup-scroller.phone .wp-block-group__inner-container figure:first-child{
                margin-left:40px;
            }

    .mockup-scroller.tablet{
        --mockupScrollerHeight: 650px;
        overflow: inherit;
        z-index: 1;
        }        
        .mockup-scroller.tablet .wp-block-group__inner-container{
            position: relative;
            gap:40px;
            justify-content: space-around;
            }
            .mockup-scroller.tablet .wp-block-group__inner-container figure{
                width: 100%;
                transform: inherit;
                height: fit-content;
                box-shadow: 0 0 0 1px var(--mockupColorFineBorder);
            }
            .mockup-scroller.tablet .wp-block-group__inner-container figure:not(:first-child){
                width:80%
            }
}