/* -------------------------------
    Product Slider Styles: Swiper not initialised
   ------------------------------- */

.fl-page{
    overflow: hidden;
}

.section-wrapper .inner-wrapper{
    margin-left: auto;
    margin-right: auto;
    max-width: 77.5rem; /* 1240px */
    padding-left: 1.25rem; /* 20px */
    padding-right: 1.25rem; /* 20px */
}

.section-wrapper .inner-wrapper .text-wrapper{
    max-width: 50rem; /* 800px */
}

.teaser-slider-wrapper + .inner-wrapper{
    padding-top: 1.25rem; /* 20px */
}

.teaser-slider .slider-wrapper{
    list-style: none;
    margin: 0;
    overflow-x: auto;
    overflow-y: unset;
    padding: 0 0 .8rem 1.25rem; /* 20px */
    white-space: nowrap;
}

.section-wrapper.product,
.section-wrapper.producer,
.section-wrapper.blog{
    padding-bottom: 2.5rem; /* 40px */
    padding-top: 2.5rem; /* 40px */
}

.section-wrapper.product,
.section-wrapper.producer,
.section-wrapper.blog,
.teaser-slider-wrapper{
    margin-left: calc(50% - 50vw);
    overflow: hidden;
    position: relative;
    width: 100vw;
}

.teaser-slider .story-teaser .teaser.banane,
.teaser-slider .producer-teaser .teaser.banane,
.section-wrapper.producer.banane .image-wrapper,
.section-wrapper.producer.banane,
.section-wrapper.product.banane{
    background-color: var(--cc-global-gelb, #fff29d);
}

.teaser-slider .producer-teaser .teaser.violett,
.section-wrapper.product.violett{
    background-color: var(--cc-global-violett, #cabfc6);
}

.teaser-slider .story-teaser .teaser.beige,
.teaser-slider .producer-teaser .teaser.beige,
.section-wrapper.producer.beige .image-wrapper,
.section-wrapper.producer.beige,
.section-wrapper.product.beige{
    background-color: var(--cc-global-beige, #d7d2c4);
}

.teaser-slider .story-teaser .teaser.gruen,
.teaser-slider .producer-teaser .teaser.gruen,
.section-wrapper.producer.gruen .image-wrapper,
.section-wrapper.producer.gruen,
.section-wrapper.product.gruen{
    background-color: var(--cc-global-gruen, #bfcfc7);
}

.section-wrapper.product.limoncello{
    background-color: var(--cc-global-limoncello, #effe93);
}

.teaser-slider .story-teaser .teaser.mango,
.teaser-slider .producer-teaser .teaser.mango{
    background-color: var(--cc-global-mango, #ffcd7b);
}

.teaser-slider .story-teaser .teaser.pistazie{
    background-color: var(--cc-global-pistazie, #dced76);
}

.teaser-slider .story-teaser .teaser.orange,
.teaser-slider .producer-teaser .teaser.orange,
.section-wrapper.producer.orange .image-wrapper,
.section-wrapper.producer.orange,
.section-wrapper.product.orange{
    background-color: var(--cc-global-orange, #ff8e6a);
}

.section-wrapper.product .teaser .text-wrapper{
    border: none;
}

.section-wrapper.product.white .teaser.border .text-wrapper{
    border-bottom: 1px solid #d2d2d2;
    border-left: 1px solid #d2d2d2;
    border-right: 1px solid #d2d2d2;
}

.teaser-slider .producer-teaser .image-wrapper,
.section-wrapper.product .teaser,
.section-wrapper.product .teaser.white{
    background-color: #ffffff;
}

.teaser-slider{
    padding: 1.25rem 0 .45rem 0;
}

.teaser-slider .slide{
    display: inline-block;
    padding-right: 1.5rem;
}

.teaser-slider .producer-teaser.slide{
    min-height: 25rem; /* 400px */
}

.teaser-slider .category-link{
    text-decoration: none;
}

.teaser-slider .slider-icon{
    display: none;
    visibility: hidden;
}

.teaser-slider .producer-teaser .image-wrapper{
    border-radius: 50%;
    height: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    padding-bottom: 80%;
    position: relative;
    width: 80%;
}

.teaser-slider .producer-teaser .text-wrapper{
    padding-top: 20px;
}

.teaser-slider .producer-teaser .producer-teaser-image{
    border-radius: 50%;
}

.teaser-slider .story-teaser .teaser-link{
    text-decoration: none;
}

.teaser-slider .story-teaser .teaser-link .story-teaser-image{
    transition: transform .3s ease-in-out;
}

.teaser-slider .story-teaser .teaser-link:hover .story-teaser-image{
    transform: scale(1.1);
}

.teaser-slider .story-teaser .story-teaser-image,
.teaser-slider .producer-teaser .producer-teaser-image{
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    object-fit: cover;
}

.producer-teaser .teaser-title,
.story-teaser .teaser-title,
.section-wrapper .cc-custom-link{
    font-family: 'Archeron Pro';
    font-weight: 500;
    hyphens: auto;
}

.teaser-slider .story-teaser .teaser,
.teaser-slider .producer-teaser .teaser{
    border-radius: .375rem; /* 6px */
}

.teaser-slider .story-teaser .image-wrapper{
    border-top-right-radius: .375rem; /* 6px */
    border-top-left-radius: .375rem; /* 6px */
    height: 0;
    margin-bottom: 0;
    overflow: hidden;
    padding-bottom: 80%;
    position: relative;
    width: 100%;
}

.teaser-slider .story-teaser .text-wrapper{
    padding: 20px 24px;
}

.teaser-slider .producer-teaser .teaser{
    padding: 24px 18px 18px 18px;
}

.story-teaser .teaser-title{
    font-size: 2rem;
    line-height: 1.23;
    margin-bottom: 0;
    padding: 0;
}

.producer-teaser .teaser-title{
    font-size: 2rem;
    line-height: 1.23;
    margin-bottom: .2rem;
    padding: 0;
}

.producer-teaser .teaser-bottom{
    margin-bottom: 0;
}

.producer-teaser .teaser-bottom dt{
    font-weight: normal;
}

.producer-teaser .teaser-bottom dd{
    font-size: 1.2rem;
    margin-bottom: 0;
}

.producer-teaser .producer-info{
    line-height: 1.3;
}

.producer-teaser .teaser-bottom dt,
.producer-teaser .producer-info{
    font-size: 1rem;
}

.section-wrapper .cc-custom-link .icon svg > * {
    fill: var(--cc-global-schrift-dunkel, #141414);
}

.section-wrapper .cc-custom-link .icon.after{
    display: inline-block; 
    margin-left: .5rem;
}

.section-wrapper .cc-custom-link .cc-button-text {
    display: inline-block;    
    text-decoration: underline;
    text-underline-offset: .2em;
    text-decoration-thickness: 0.06em;
}

@media (min-width: 600px) {

    .teaser-slider .producer-teaser.slide{
        min-height: 18.75rem; /* 330px */
    }

    .teaser-slider .story-teaser .text-wrapper{
        padding: 14px 18px;
    }

    .producer-teaser .teaser-title{
        font-size: 1.25rem;
        margin-bottom: .2rem;
    }

    .story-teaser .teaser-title{
        font-size: 1.25rem;
    }

    .producer-teaser .teaser-bottom dt,
    .producer-teaser .producer-info{
        font-size: .72rem;
    }

    .producer-teaser .teaser-bottom dd{
        font-size: .8rem;
    }
    
}

@media (min-width: 768px) {

    .section-wrapper.product,
    .section-wrapper.producer,
    .section-wrapper.blog{
        padding-bottom: 3.125rem; /* 50px */
        padding-top: 3.125rem; /* 50px */
    }

    .teaser-slider .producer-teaser.slide{
        min-height: 25rem; /* 400px */
    }
    .teaser-slider .producer-teaser .teaser{
        padding: 40px 26px 26px 26px;
    }
    .teaser-slider .story-teaser .text-wrapper{
        padding: 22px 26px;
    }
    .teaser-slider .producer-teaser .text-wrapper{
        padding-top: 20px;
    }
    .producer-teaser .teaser-title{
        font-size: 1.625rem;
        margin-bottom: .4rem;
    }
    .story-teaser .teaser-title{
        font-size: 1.625rem;
    }
    .producer-teaser .teaser-bottom dt,
    .producer-teaser .producer-info{
        font-size: .75rem;
    }
    .producer-teaser .teaser-bottom dd{
        font-size: .875rem;
    }
}

@media (min-width: 992px) {

    .section-wrapper.product,
    .section-wrapper.producer,
    .section-wrapper.blog{
        padding-bottom: 3.75rem; /* 60px */
        padding-top: 3.75rem; /* 60px */
    }

    .teaser-slider .producer-teaser.slide{
        min-height: 31.25rem; /* 500px */
    }
    /*
    .category-slider .slider-wrapper{
        margin-left: auto;
        margin-right: auto;
        width: 1240px;
    }
    */
}

@media (min-width: 1200px) {
    .section-wrapper.product,
    .section-wrapper.producer,
    .section-wrapper.blog{
        padding-bottom: 5rem; /* 80px */
        padding-top: 5rem; /* 80px */
    }
}

@media (min-width: 1500px) {
    .section-wrapper.product,
    .section-wrapper.producer,
    .section-wrapper.blog{
        padding-bottom: 6.25rem; /* 100px */
        padding-top: 6.25rem; /* 100px */
    }
}

.fl-module-teaser-post-slider.banane + .fl-module-teaser-post-slider.banane .section-wrapper,
.fl-module-teaser-post-slider.beige + .fl-module-teaser-post-slider.beige .section-wrapper,
.fl-module-teaser-post-slider.gruen + .fl-module-teaser-post-slider.gruen .section-wrapper,
.fl-module-teaser-post-slider.limoncello + .fl-module-teaser-post-slider.limoncello .section-wrapper,
.fl-module-teaser-post-slider.orange + .fl-module-teaser-post-slider.orange .section-wrapper,
.fl-module-teaser-post-slider.violett + .fl-module-teaser-post-slider.violett .section-wrapper,
.fl-module-teaser-post-slider.white + .fl-module-teaser-post-slider.white .section-wrapper{
    padding-top: 0;
}


/* -------------------------------
    Swiper Styles
   ------------------------------- */

   .teaser-slider .story-teaser.swiper-slide,
   .teaser-slider .product-teaser.swiper-slide,
   .teaser-slider .producer-teaser.swiper-slide{
        height: auto;
   }

   .teaser-slider.swiper-slider{
        overflow: hidden;
   }

   .teaser-slider.swiper-slider .slider-wrapper{        
        overflow-x: unset;
        padding-left: 0;
    }

    .teaser-slider.swiper-slider .slide{
        white-space: normal;
    }

    .teaser-slider.swiper-slider .slider-icon .icon{
        background-image: url('../../../../assets/images/icons/icon-category-slider-start.svg');
        background-repeat: no-repeat;
        display: inline-block;
        height: 1rem;
        width: .875rem;
    }


    .section-wrapper.limoncello .teaser-slider.swiper-slider .slider-icon .icon{
        filter: invert(86%) sepia(98%) saturate(266%) hue-rotate(9deg) brightness(94%) contrast(92%);
    }

    .section-wrapper.beige .teaser-slider.swiper-slider .slider-icon .icon{
        filter: invert(83%) sepia(7%) saturate(307%) hue-rotate(5deg) brightness(96%) contrast(82%);
    }

    .section-wrapper.orange .teaser-slider.swiper-slider .slider-icon .icon{
        filter: invert(60%) sepia(53%) saturate(2396%) hue-rotate(327deg) brightness(106%) contrast(88%);
    }


    .section-wrapper.white .teaser-slider.swiper-slider .slider-icon .icon{
        filter: invert(99%) sepia(1%) saturate(541%) hue-rotate(115deg) brightness(101%) contrast(94%);
    }

    .section-wrapper.banane .teaser-slider.swiper-slider .slider-icon .icon{
        filter: invert(81%) sepia(25%) saturate(645%) hue-rotate(7deg) brightness(109%) contrast(87%);
    }

    .section-wrapper.violett .teaser-slider.swiper-slider .slider-icon .icon{
        filter: invert(76%) sepia(15%) saturate(256%) hue-rotate(269deg) brightness(90%) contrast(91%);
    }

    .section-wrapper.gruen .teaser-slider.swiper-slider .slider-icon .icon{
        filter: invert(88%) sepia(15%) saturate(183%) hue-rotate(97deg) brightness(87%) contrast(89%);
    }

    .teaser-slider.swiper-slider .slider-icon.end .icon{
        transform: scaleX(-1) translateY(-50%);
    }

    .teaser-slider.swiper-slider .slider-icon{
        display: inline-block;
        height: auto;
        margin-left: 1rem;
        margin-right: 1rem;
        visibility: visible;
        width: 1.75rem;
    }

    .teaser-slider.swiper-slider .slider-icon.end{
        margin-left: -.5rem;
    }

    .teaser-slider.swiper-slider .slider-icon .icon{
        background-size: cover;
        height: 2rem;
        left: 0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 1.75rem;
    }

    @media (min-width: 992px) {

        .teaser-slider.swiper-slider .slider-wrapper{
            justify-content: unset;
        }

        .teaser-slider.swiper-slider .slider-icon{
            margin-left: 2rem;
            margin-right: 2rem;
            width: 3rem;
        }

        .teaser-slider.swiper-slider .slider-icon.end{
            margin-left: .5rem;
        }

        .teaser-slider.swiper-slider .slider-icon .icon{
            height: 3rem;
            width: 2.625rem;
        }
    }

    @media (min-width: 1500px) {
        .teaser-slider.swiper-slider .slider-icon{
            margin-left: 3rem;
            margin-right: 3rem;
        }

        .teaser-slider.swiper-slider .slider-icon.end{
            margin-left: 1.5rem;
        }
    }

/* ==========================================================================
  Grid-Styles für Product Teaser Slider
  ========================================================================== */

    @supports (display: flex) {
        .teaser-slider .story-teaser .text-wrapper,
        .teaser-slider .producer-teaser .text-wrapper,
        .teaser-slider .product-teaser .text-wrapper{
            display: flex;
            flex: 1;
            flex-direction: column;
            white-space: normal;
        }

        .teaser-slider .product-teaser.swiper-slide,
        .teaser-slider .product-teaser.slide{
            flex: 0 0 auto;
            width: 360px;
        }

        .teaser-slider .story-teaser.swiper-slide,
        .teaser-slider .story-teaser.slide{
            flex: 0 0 auto;
            width: 330px;
        }

        .teaser-slider .producer-teaser.swiper-slide,
        .teaser-slider .producer-teaser.slide{
            flex: 0 0 auto;
            width: 300px;
        }

        .teaser-slider .story-teaser .teaser,
        .teaser-slider .producer-teaser .teaser,
        .teaser-slider .product-teaser .teaser{
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        .teaser-slider .producer-teaser .teaser-bottom,
        .teaser-slider .product-teaser .teaser-bottom{
            margin-top: auto;
            padding-top: 1.25rem;
        }
        .teaser-slider .slider-wrapper{
            display: flex;
            flex-direction: row;
        }

        @media (min-width: 600px) {
            .teaser-slider .product-teaser.swiper-slide,
            .teaser-slider .product-teaser.slide{
                width: 15.625rem; /* 250 px */
            }
            .teaser-slider .story-teaser.swiper-slide,
            .teaser-slider .story-teaser.slide{
                width: 14.375rem; /* 230 px */
            }
            .teaser-slider .producer-teaser.swiper-slide,
            .teaser-slider .producer-teaser.slide{
                width: 13.75rem; /* 220 px */
            }
        }

        @media (min-width: 768px) {
            .teaser-slider .product-teaser.swiper-slide,
            .teaser-slider .product-teaser.slide{
                width: 17.188rem; /* 275 px */
            }
            .teaser-slider .story-teaser.swiper-slide,
            .teaser-slider .story-teaser.slide,
            .teaser-slider .producer-teaser.swiper-slide,
            .teaser-slider .producer-teaser.slide{
                width: 15.625rem; /* 250 px */
            }
        }
        @media (min-width: 992px) {
            .teaser-slider .product-teaser.swiper-slide,
            .teaser-slider .product-teaser.slide{
                width: 18.75rem; /* 300 px */
            }

            .teaser-slider .slider-wrapper{
                justify-content: center;
            }

            .teaser-slider .story-teaser.swiper-slide,
            .teaser-slider .story-teaser.slide,
            .teaser-slider .producer-teaser.swiper-slide,
            .teaser-slider .producer-teaser.slide{
                width: 17.5rem; /* 280 px */
            }
        }
        @media (min-width: 1200px) {
            .teaser-slider .product-teaser.swiper-slide,
            .teaser-slider .product-teaser.slide{
                width: 20.625rem; /* 330 px */
            }
            .teaser-slider .story-teaser.swiper-slide,
            .teaser-slider .story-teaser.slide,
            .teaser-slider .producer-teaser.swiper-slide,
            .teaser-slider .producer-teaser.slide{
                width: 18.75rem; /* 300 px */
            }
        }
        @media (min-width: 1500px) {
            .teaser-slider .product-teaser.swiper-slide,
            .teaser-slider .product-teaser.slide{
                width: 22.5rem; /* 360 px */
            }
            .teaser-slider .story-teaser.swiper-slide,
            .teaser-slider .story-teaser.slide,
            .teaser-slider .producer-teaser.swiper-slide,
            .teaser-slider .producer-teaser.slide{
                width: 20rem; /* 320 px */
            }
        }
    }