.projects {
    position: relative;
    padding-left: var(--gutter);
    padding-right: var(--gutter);

    .container {

        &.projects__intro, &.projects__button {
            display: flex;
            flex-direction: column;
            align-items: center;
            h2, a {
                width: initial;
            }
            text-align: center;
        }

        &.projects__intro {
            padding-bottom: var(--margin-small);
        }

        &.projects__button {
            padding-top: var(--margin-small);
        }

        position: relative;

        .projects__intro {
            margin-bottom: var(--spacing-12);
            a.btn {
                display: none;
            }
        }

        .splide {
            width: 100%;
           
            * {
                color: #fff;
                border-color: #fff;
            }
            .splide__track {
                overflow: hidden;
                transition: height 0.3s ease;
                .splide__list {
                    display: flex;
                    .splide__slide {
                        display: block;
                        box-sizing: border-box;
                        max-width: 100vw;
                        overflow-x: hidden;
                        height: auto;
                        .projects__teaser {
                            display: block;
                            width: 100%;
                            box-sizing: border-box;
                            background-color: var(--dark-blue);
                            * {
                                color: #fff;
                                border-color: #fff;
                            }    
                            .image_wrapper {

                                figure {
                                    picture {
                                        img {
                                            max-width: 100%;
                                            height: auto;
                                            display: block;
                                        }
                                    }
                                }
                            }                        
                            
                            .projects__teaser__description {
                                height: auto;
                                overflow-wrap: break-word;
                                word-wrap: break-word;
                                padding: var(--gutter);
                            }
                        }
                    }
                }
            }
        }
    }
    .wipe-and-more {
        margin: var(--spacing-06) 0 var(--spacing-12) 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }
    .rex-nav-pagination {
        display: none;
    }
}

.projects.layout-2 {
    background-color: var(--light-gray);
    background-image: url(/theme/public/assets/frontend/img/transparenter-hintergrund.webp);
    background-size: cover;
}

.projects.layout-3 {
    .container {
        .projects__intro {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--gutter);
            align-items: center;
            margin-bottom: var(--margin-small);
            .projects__intro_textwrapper {
                > :last-child {
                    margin-bottom: 0;
                }
            }
            .image_wrapper {
                position: relative;
                padding: var(--picture-padding) var(--picture-padding) 0 0;
                &::after {
                    content: '';
                    background-color: var(--main-color);
                    position: absolute;
                    top: 0px;
                    right: 0px;
                    z-index: -1;
                    bottom: 10%;
                    left: 70%;
                }
                figure {
                    picture {
                        width: 100%;
                        height: 100%;
                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }
                }
            }
        }
        .filter {
            display: flex;
            flex-direction: column;
            margin-bottom: var(--margin-small);
            h3 {
                font-family: var(--font-family-normal);
                font-weight: bold;
                font-size: var(--font-size-p);
                line-height: var(--line-height-p);
                margin-bottom: calc(var(--font-margin-p) / 2);
            }
            ul {
                list-style: none;
                display: flex;
                flex-wrap: wrap;
                column-gap: var(--gutter);
                row-gap: 5px;
                li {
                    position: relative;
                    height: var(--button-height);
                    display: flex;
                    align-items: center;
                    &::after {
                        content: '';
                        width: 1px;
                        background-color: var(--line-gray);
                        position: absolute;
                        right: calc(var(--gutter) / 2 * -1);
                        top: 0px;
                        bottom: 0px;
                    }
                    a {
                        text-transform: uppercase;
                        color: var(--text-color);
                    }
                }
                li:last-child {
                    &::after {
                        display: none;
                    }
                }
                li.active {
                    a {
                        font-weight: bold;
                        color: var(--main-color);
                    }
                }
            }
        }
        .error {
            padding: var(--spacing-06);
            background-color: var(--main-color);
        }
    }
}

@media (min-width: 1024px) {
    .projects {
        .container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--gap);
            .projects__intro {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: center;
                margin-bottom: 0;
                a.btn {
                    display: flex;
                }
            }
            .projects__teaser {
                position: relative;
                overflow: hidden;
                figure {
                    display: block;
                    height: 100%;
                    picture {
                        display: block;
                        height: 100%;

                        img {
                            width: 100%;
                            height: 100%;
                            display: block;
                            object-fit: cover;
                        }
                    }
                }
                .projects__teaser__description,
                &::after {
                    transform: translateY(100%);
                    transition: all ease-in-out 0.3s;
                    position: absolute;
                    top: 0px;
                    right: 0px;
                    bottom: 0px;
                    left: 0px;
                    transition: all ease-in-out 0.3s;
                    z-index: 10;
                    * {
                        position: relative;
                        color: #fff;
                        border-color: #fff;
                        z-index: 10;
                    }
                }
                .projects__teaser__description {
                    padding: var(--spacing-14);
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    justify-content: flex-end;
                }
                &::after {
                    content: '';
                    background-color: var(--dark-blue);
                    opacity: 0.88;
                    /* mix-blend-mode: multiply; */
                    z-index: 0;
                }
            }
            .projects__teaser:hover {
                .projects__teaser__description,
                &::after {
                    transform: translateY(0)
                }
            }
            .projects__teaser.span-2 {
                grid-column: span 2;
            }
        }
        .wipe-and-more {
            display: none;
        }

        .rex-nav-pagination {
            grid-column: 1 / span 3;
            padding: var(--font-margin-p) 0;
            display: flex;
            justify-content: space-between;
            ul.pagination {
                display: flex;
                gap: 10px;
                list-style: none;
                padding: 0;
                li {
                    a {
                        display: flex;
                        height: var(--button-height);
                        min-width: var(--button-height);
                        justify-content: center;
                        align-items: center;
                        border: 1px solid #fff;
                    }
                }
                li.disabled {
                    display: none;
                }
                li.rex-page.active {
                    a {
                        background-color: var(--dark-blue);
                        color: #fff;
                    }
                }
                li.rex-next,
                li.rex-prev {
                    a {
                        border-color: transparent;
                        i {
                            display: block;
                            width: 42px;
                            height: 13px;
                            mask-image: url('data:image/svg+xml,<svg width="42.5" height="13" version="1.1" viewBox="0 0 42.5 13" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-419.5 -2729)" data-name="Gruppe 880"><line transform="translate(419.5 2735.5)" x2="37" fill="none" stroke="%238bd6e6" data-name="Linie 101"/><path transform="translate(462 2729) rotate(90)" d="M6.5,0,13,11H0Z" fill="%238bd6e6" data-name="Polygon 9"/></g></svg>');
                            background-color: var(--main-color);
                        }
                    }
                }
                li.rex-prev {
                    a {
                        i {
                            transform: scaleX(-1);
                        }
                    }
                }
            }
        }
    }
    .projects.layout-3 {
        .container {
            .filter,
            .projects__intro,
            .error {
                grid-column: 1 / span 3;
            }
            .projects__intro {
                grid-template-columns: 35fr 65fr;
            }

        }
    }
}

@media (min-width: 1280px) {
    .projects {
        .container {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: var(--gap);
            .projects__intro {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: center;
                a.btn {
                    display: flex;
                }
            }
            .projects__teaser {
                position: relative;
                overflow: hidden;
                .image_wrapper {

                    left: 0px;
                    height: 100%;
                    figure {
                        display: block;
                        height: 100%;
                        picture {
                            display: block;
                            height: 100%;

                            img {
                                width: 100%;
                                height: 100%;
                                display: block;
                                object-fit: cover;
                            }
                        }
                    }
                }
                
                .projects__teaser__description,
                &::after {
                    transform: translateY(100%);
                    transition: all ease-in-out 0.3s;
                    position: absolute;
                    top: 0px;
                    right: 0px;
                    bottom: 0px;
                    left: 0px;
                    transition: all ease-in-out 0.3s;
                    z-index: 10;
                    * {
                        position: relative;
                        color: #fff;
                        border-color: #fff;
                        z-index: 10;
                    }
                }
                .projects__teaser__description {
                    padding: var(--spacing-14);
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    justify-content: flex-end;
                }
                &::after {
                    content: '';
                    background-color: var(--dark-blue);
                    opacity: 0.88;
                    /* mix-blend-mode: multiply; */
                    z-index: 0;
                }
            }
            .projects__teaser:hover {
                .projects__teaser__description,
                &::after {
                    transform: translateY(0)
                }
            }
            .projects__teaser.span-2 {
                grid-column: span 2;
            }
        }
        .wipe-and-more {
            display: none;
        }
    }
}