/* -------------------------------
    Story Teaser Styles
   ------------------------------- */

.stories-list{
    list-style: none;
    padding: 0;
    margin: 0;
}

.stories-list .story-teaser .teaser.banane{
    background-color: var(--cc-global-gelb, #fff29d);
}

.stories-list .story-teaser .teaser.beige{
    background-color: var(--cc-global-beige, #d7d2c4);
}

.stories-list .story-teaser .teaser.gruen{
    background-color: var(--cc-global-gruen, #bfcfc7);
}

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

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

.stories-list .story-teaser .teaser.orange{
    background-color: var(--cc-global-orange, #ff8e6a);
}

.stories-list .slide{
    display: inline-block;
    padding-right: 1.5rem;
}

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

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

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

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

.story-teaser .teaser-title{
    font-family: 'Archeron Pro';
    font-weight: 500;
    hyphens: auto;
}

.stories-list .story-teaser .teaser{
    border-radius: .375rem; /* 6px */
}

.stories-list .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%;
}

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

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

@media (min-width: 600px) {

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

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

/* ==========================================================================
  Grid-Styles für Story Teaser
  ========================================================================== */


    @supports (display: flex) {
        .stories-list .story-teaser .text-wrapper{
            display: flex;
            flex: 1;
            flex-direction: column;
            white-space: normal;
        }

        .stories-list .story-teaser.blog{
            flex: 0 0 auto;
            width: 100%;
        }

        .stories-list .story-teaser .teaser{
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .stories-list{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 20px 20px;
            justify-content: left;
        }

        .stories-list .story-teaser.blog{
            flex-grow: 1;
        }

        @media (min-width: 440px) {
            .stories-list .story-teaser.blog{
                max-width: 31.25rem; /* 500 px */
            }

        @media (min-width: 600px) {
            .stories-list .story-teaser.blog{
                flex: 0 0 46%;
            }
        }

        @media (min-width: 768px) {
            .stories-list .story-teaser.blog{
                flex: 0 0 30%;
                max-width: 18.75rem; /* 300 px */
            }
        }

        @media (min-width: 900px) {
            
            .stories-list .story-teaser.blog{
                max-width: 25rem; /* 400 px */
                
            }
        }

        @media (min-width: 1200px) {
            .stories-list .story-teaser.blog{
                flex: 0 0 22%;
                max-width: 18.75rem; /* 300 px */
            }
        }

    }