.ce-mitarbeiterslider {
    position: relative;
    /* max-width: 1200px; */
    margin: 0 auto;
    /* padding: 2rem 1rem; */

    .ce-mitarbeiterslider_items {

        /* Swiper specific */
        overflow: hidden;
        /* Remove padding that shows partial slides */
        padding: 0;

        @media (max-width: 767px) {
            padding: 0;
        }

        &.static-display {
            .swiper-wrapper {
                flex-wrap: wrap;
                gap: 13px;
            }
        }

        /* Swiper wrapper */
        .swiper-wrapper {
            display: flex;
            align-items: stretch;
            justify-content: center;
        }

        .ce-mitarbeiterslider_item {
            /* Swiper slide styles - Fixed width per breakpoint */
            height: auto;
            display: flex;
            flex-direction: column;
            background: white;
            overflow: hidden;

            /* Mobile: 1 slide */
            width: 100%;

            /* Tablet: 2 slides */
            @media (min-width: 768px) {
                width: calc(50% - 10px);
            }

            /* Desktop: 3 slides */
            @media (min-width: 1024px) {
                width: calc(33.333% - 13px);
            }

            /* Large Desktop: 4 slides */
            @media (min-width: 1200px) {
                width: calc(25% - 15px);
            }

            .mitarbeiterslider__image {
                width: 100%;
                aspect-ratio: 1/1.2;
                overflow: hidden;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: center;
                }
            }

            .openModal {
                position: absolute;
                top: 0;
                right: 0;
                color: var(--magenta);
                background: unset;
                border: unset;
                box-shadow: unset;
                cursor: pointer;
                font-size: .9rem;
                font-weight: bold;
                padding: .35rem;

                @media screen and (min-width: 768px) {
                    font-size: 1rem;
                }

                @media screen and (min-width: 1200px) {
                    font-size: .7rem;
                }
            }

            .mitarbeiterslider__content {
                position: absolute;
                bottom: 0;
                left: 0;
                background-color: white;
                max-width: 70%;
                border-top-right-radius: 1rem;
                padding: 1rem 1rem 0 0;
                display: flex;
                flex-direction: column;
                gap: 0.2rem;
                color: var(--blue);

                .mitarbeiterslider__title {
                    font-size: 0.8rem;
                    line-height: 1.2;
                    font-weight: bold;
                }

                .mitarbeiterslider__name {
                    font-weight: bold;
                    font-size: 1rem;
                    line-height: 1.2;
                }

                .mitarbeiterslider__position {
                    font-size: 0.8rem;
                    line-height: 1.2;
                }
            }
        }

        /* Swiper Navigation Buttons */
        .swiper-button-next,
        .swiper-button-prev {
            width: 44px;
            height: 44px;
            margin-top: -22px;
            background: white;
            border-radius: 50%;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
            color: #333;

            &:after {
                font-size: 16px;
                font-weight: 600;
            }

            &.swiper-button-disabled {
                opacity: 0.3;
            }

            @media (max-width: 767px) {
                display: none;
            }
        }

        .swiper-button-next {
            /* right: -60px; */
            /* Position outside slider */
        }

        .swiper-button-prev {
            /* left: -60px; */
            /* Position outside slider */
        }

        /* Swiper Pagination */
        .swiper-pagination {
            position: relative;
            margin-top: 1rem;
            overflow: visible;

            .swiper-pagination-bullet {
                width: 12px;
                height: 12px;
                background: #0f2d69;
                opacity: 1;
                margin: 0 4px;
                transition: all 0.2s ease;

                &.swiper-pagination-bullet-active {
                    background: #5890fe;
                    transform: scale(1.2);
                }
            }
        }

        /* Swiper Scrollbar */
        .swiper-scrollbar {
            background: rgba(0, 0, 0, 0.1);
            border-radius: 4px;
            margin-top: 1rem;

            .swiper-scrollbar-drag {
                background: #007acc;
                border-radius: 4px;
            }

            @media (min-width: 768px) {
                display: none;
            }
        }
    }

    /* Modal Styles */
    dialog {
        padding: 0;
        border: none;
        border-radius: 12px;
        max-width: 90vw;
        max-height: 90vh;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        background: white;
        overflow: visible;
        /* Prevent dialog overflow */

        @media screen and (min-width: 768px) {
            max-width: 900px;
            /* max-height: 500px; */
        }

        &::backdrop {
            /*use --dunkelblau with 0.7 opacity as background*/
            background: rgba(190, 207, 229, 0.7);
            backdrop-filter: blur(2px);
        }

        .mitarbeiterslider__modal-content {
            display: grid;
            grid-template-areas:
                "top top"
                "left right";
            grid-template-columns: 300px 1fr;
            grid-template-rows: auto 1fr;
            height: 100%;
            max-height: 90vh;
            /* overflow: hidden; */
            /* Prevent content overflow */

            gap: 1rem;

            @media (max-width: 768px) {
                overflow: auto;
                grid-template-areas:
                    "top"
                    "left"
                    "right";
                grid-template-columns: 1fr;
                grid-template-rows: auto auto 1fr;
            }

            >.top {
                grid-area: top;
                display: flex;
                justify-content: flex-end;
                padding-inline: .5rem;
                /* border-bottom: 1px solid #eee; */
                flex-shrink: 0;
                /* Don't shrink */

                @media screen and (max-width: 767px) {
                    position: sticky;
                    top: 0;
                    background-color: white;
                    z-index: 1;
                }

                @media screen and (min-width: 768px) {
                    padding: 1rem;
                }
            }

            .left {
                grid-area: left;
                padding-inline: 1rem;
                flex-shrink: 0;
                /* Don't shrink */

                @media (min-width: 768px) {
                    padding: 1rem;
                }

                .mitarbeiterslider__image {
                    width: 100%;
                    /* aspect-ratio: 1; */
                    overflow: hidden;

                    img {
                        width: 100%;
                        height: auto;
                        /* height: 100%; */
                        /* object-fit: cover; */
                    }
                }
            }

            .right {
                grid-area: right;
                padding-inline: 1rem;
                display: flex;
                flex-direction: column;
                gap: 1rem;

                max-height: 100%;
                color: var(--blue);

                @media (min-width: 768px) {
                    padding: 1rem;
                    overflow: auto;
                    /* Enable scrolling for this section only */
                }

                .top {
                    display: flex;
                    flex-direction: column;
                    gap: 0.2rem;
                    padding-right: 0.5rem;

                    .name {
                        font-weight: bold;
                        font-size: 1.5rem;
                        line-height: 1.2;
                    }

                    .position {
                        font-size: 1rem;
                        line-height: 1.2;
                    }
                }


                .mitarbeiterslider__modal-text {
                    flex: 1;
                    font-size: .8rem;
                    line-height: 1.2;
                    color: inherit;
                    padding-right: 0.5rem;

                    @media screen and (min-width: 768px) {
                        overflow-y: auto;
                        /* Scrollable text area */
                        overflow-x: hidden;
                        /* Hide horizontal scroll */
                        padding-right: 0.5rem;
                        /* Force scrolling capability */
                        touch-action: pan-y;
                        /* Allow vertical scrolling on touch */
                        -webkit-overflow-scrolling: touch;
                        /* Smooth scrolling on iOS */
                    }

                    /* Custom scrollbar styling */
                    &::-webkit-scrollbar {
                        width: 8px;
                        background: transparent;
                    }

                    &::-webkit-scrollbar-track {
                        background: #f1f1f1;
                        border-radius: 4px;
                        margin: 4px 0;
                    }

                    &::-webkit-scrollbar-thumb {
                        background: #c1c1c1;
                        border-radius: 4px;
                        border: 1px solid #f1f1f1;
                    }

                    &::-webkit-scrollbar-thumb:hover {
                        background: #a8a8a8;
                    }

                    &::-webkit-scrollbar-thumb:active {
                        background: #999;
                    }

                    p {
                        margin-bottom: 1rem;

                        &:last-child {
                            margin-bottom: 0;
                        }
                    }
                }
            }
        }

        .mitarbeiterslider__modal-close {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            padding: 0.5rem;
            color: #666;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;

            &:hover {
                background: #f5f5f5;
                color: #333;
            }
        }
    }
}

/* Strong prevention of body scroll when modal is open */
body.modal-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
}