.mb-karussell{
    /* Dots */
    --KarussellColorDots: gainsboro;
    --KarussellColorDotsActive:lightgreen;
    --KarussellSizeDots: 30px;
    --KarussellSpacingDots: 10px; 
    /* Menu */
    --KarussellMenuBG: lightgreen; 
    --KarussellMenuBGHover: rgb(117, 204, 117); 
    /* Arrows */
    --KarussellSizeArrows: 24px;
    --KarussellSpacingArrows: 12.5%;
    --KarussellBGArrow:#626262;
    /* SLIDES */
    --KarussellSizeSlideLeft: 0.7;
    --KarussellSizeSlideCurrent: 1;
    --KarussellSizeSlideRight: 0.7;
    --KarussellIndexSlideLeft: 1;
    --KarussellIndexSlideCurrent: 10;
    --KarussellIndexSlideRight: 1;
    --KarussellWidthSlideLeft: 40%;
    --KarussellWidthSlideRight: 40%;
    --KarussellWidthSlideInactive: 40%;
    --KarussellWidthSlideCurrent: 75%;
 
}

/* ALLGEMEINES */
.mb-karussell{
    display: flex;
    flex-direction: column;
    justify-content: center;
    }
    .mb-karussell *{
        user-select: none;
    }

/* PUNKTE MENU */
.mb-karussell.has-dots-menu{
    flex-direction: column-reverse;
    }
    .mb-karussell.has-dots-menu .karussell-header{
        justify-content: center;
        }
        .mb-karussell .karussell-header .dot{
            background: var(--KarussellColorDots);
            width: var(--KarussellSizeDots);
            height: var(--KarussellSizeDots);
            max-width: var(--KarussellSizeDots);
            max-height: var(--KarussellSizeDots);
            border-radius: 50%;
            margin-left: var(--KarussellSpacingDots);
            margin-right: var(--KarussellSpacingDots);
        }

/* TEXT MENU */
.mb-karussell .karussell-header{
    justify-content: space-evenly;
    display: flex;
    margin-bottom:var(--abstandMenuItem)
    }
    .mb-karussell .karussell-header p{
        /* flex: 1; */
        user-select: none;
        cursor: pointer;
        text-align: center;
        margin-bottom: 0;
        padding: 20px;
    }
    .mb-karussell .karussell-header p.active{
        background: var(--KarussellMenuBG);
    }
    .mb-karussell .karussell-header p:hover{
        background: var(--KarussellMenuBGHover);
    }

/* ARROWS */
.mb-karussell .arrow-left,
.mb-karussell .arrow-right{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(var(--KarussellSizeArrows) * 2);
    height: calc(var(--KarussellSizeArrows) * 2);
    z-index: 11;
    background: var(--KarussellBGArrow);
}
.mb-karussell .arrow-left{
    left: var(--KarussellSpacingArrows);
}

.mb-karussell .arrow-right{
    right: var(--KarussellSpacingArrows);
}

.mb-fawesome .mb-karussell .arrow-left:after,
.mb-fawesome .mb-karussell .arrow-right:after{
    font-family: var(--fontAwesome);
    font-weight: 800;
    font-size: var(--KarussellSizeArrows);
    cursor: pointer;
}
.mb-fawesome .mb-karussell .arrow-left:after{
    content: "\f104";
}
.mb-fawesome .mb-karussell  .arrow-right:after{
    content: "\f105";
}

.mb-bootstrap  .mb-karussell .arrow-left:after,
.mb-bootstrap  .mb-karussell .arrow-right:after{
    font-family: var(--fontBootstrap);
    font-size: var(--KarussellSizeArrows);
    cursor: pointer;
}
.mb-bootstrap  .mb-karussell .arrow-left:after{
    content: "\F284";
}
.mb-bootstrap  .mb-karussell  .arrow-right:after{
    content: "\F285";
}

/* KARUSSELL STYLES */
/* parent der slides*/
.mb-karussell .wp-block-modulbuero-karussell{
    position: relative;
}

/* allgemein für slides */
.mb-karussell .wp-block-modulbuero-karussell > .wp-block-modulbuero-karussell-item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.01);
    opacity: 0;
    transition: unset;
    z-index: -1;
    width: var(--KarussellWidthSlideInactive);
}

/* linke slide */
.mb-karussell .wp-block-modulbuero-karussell > .left {
    left: 0%;
    transform: translate(0%, -50%) scale(var(--KarussellSizeSlideLeft));
    opacity: 1;
    width: var(--KarussellWidthSlideLeft);
    z-index: var(--KarussellIndexSlideLeft);
}

/* mittlere slide */
.mb-karussell .wp-block-modulbuero-karussell > .current {
    opacity: 1;
    transform: translate(-50%, -50%) scale(var(--KarussellSizeSlideCurrent));
    z-index: var(--KarussellIndexSlideCurrent);
    width: var(--KarussellWidthSlideCurrent);
}

/* rechte slide */
.mb-karussell .wp-block-modulbuero-karussell > .right {
    left: 100%;
    transform: translate(-100%, -50%) scale(var(--KarussellSizeSlideRight));
    opacity: 1;
    width: var(--KarussellWidthSlideRight);
    z-index: var(--KarussellIndexSlideRight);
}

.mb-karussell .wp-block-modulbuero-karussell > .left,
.mb-karussell .wp-block-modulbuero-karussell > .right{
   opacity: 0.6;
   filter: blur(4px);
}

/* BACKEND */
div[data-type="modulbuero/karussell"]{
    background: #f2f2f2;
}
.mb-karussell-editor-wrap .karussell-bar{
    display: flex;
}
.mb-karussell-editor-wrap .karussell-bar .block-editor-button-block-appender{
    width: 10%;
}
.mb-karussell-editor-wrap .karussell-bar button.active{
    background: lightblue;
}

.mb-karussell-editor-wrap .karussell-content  > .block-editor-inner-blocks > .block-editor-block-list__layout > div {
    display: none;
}
.mb-karussell-editor-wrap .karussell-content{
    background: #f2f2f2;
}

.mb-karussell-editor-wrap .karussell-content > .block-editor-inner-blocks > .block-editor-block-list__layout > div.is-selected,
.mb-karussell-editor-wrap .karussell-content > .block-editor-inner-blocks > .block-editor-block-list__layout > div.has-child-selected{
    display: block;
}
.mb-karussell-editor-wrap .karussell-content div[data-title="Karussell Item"] > h3{
    font-style: italic;
    opacity: 0.4;
    cursor: default
}
/*Backendende*/

/*Bilder*/
.mb-karussell .wp-block-modulbuero-karussell-item figure{
    margin-bottom: 0;
    display: flex;
    justify-content: center;
}

@media screen and (max-width: 440px) {
    /* KARUSSELL STYLES */
    /* parent der slides*/
    .mb-karussell .wp-block-modulbuero-karussell{
    }

    /* allgemein für slides */
    .mb-karussell .wp-block-modulbuero-karussell > .wp-block-modulbuero-karussell-item {
        width: 100%;
    }

    /* linke slide */
    .mb-karussell .wp-block-modulbuero-karussell > .left {
        left: 50%;
        transform: translate(-50%, -50%) scale(0.7);
        opacity: 0;
    }

    /* mittlere slide */
    .mb-karussell .wp-block-modulbuero-karussell > .current {
    }

    /* rechte slide */
    .mb-karussell .wp-block-modulbuero-karussell > .right {
        left: 50%;
        transform: translate(-50%, -50%) scale(0.7);
        opacity: 0;
    }
    
}