.overview {

    section {

        margin-bottom: 65px;

    }

}



.carousel-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 32px;



    .carousel-buttons {

        display: flex;

        gap: 16px;

        justify-content: flex-end;

        align-items: center;

    }



    .carousel-prev,

    .carousel-next {

        display: inline-flex;

        align-items: center;

        justify-content: center;

        width: 36px;

        height: 36px;

        border-radius: 50%;

        color: var(--color-white);

        background: var(--color-brand);

        transition: background 0.2s ease-in-out;



        svg {

            width: 22px;

            height: auto;

        }



        &:hover {

            background: var(--color-red-800);

        }

    }



    .carousel-next {

        &:focus-visible {

            outline-color: var(--color-red-600);

        }

    }



    .carousel-prev {

        color: var(--color-gray-800);

        background: var(--color-gray-200);



        &:hover {

            color: var(--color-white);

            background: var(--color-gray-800);

        }

    }



    .carousel-prev,

    .carousel-next {



        &.disabled,

        &:disabled {

            opacity: 0.4;

            pointer-events: none;

            cursor: default;



            &:focus-visible {

                outline: none;

            }

        }

    }

}



.carousel-viewport {

    overflow: visible;

}



.carousel-container {

    display: flex;

    gap: 40px;

}



.carousel-slide {

    position: relative;

    flex: 0 0 312px;

    min-width: 0;

    background-color: var(--color-gray-100);

    padding: 24px 32px 32px 32px;

    border-radius: 12px;



    h3 {

        margin-top: 40px;

        margin-bottom: 16px;

    }



    a {

        color: var(--color-text);

        text-decoration: none;

    }



    img {

        max-width: 100%;

        user-select: none;



        &.werbemittel {

            max-width: 146px;

        }

    }



    .campaign-meta {

        margin-top: 12px;

    }



    .campaign-meta-urls a {

        position: relative;

        z-index: 1;

        word-break: break-all;

    }

}



.carousel-slide-link {

    h2 {

        margin-top: 4px;

    }



    &::after {

        content: "";

        position: absolute;

        inset: 0;

        border-radius: inherit;

    }

}



.campaign-meta {

    .campaign-meta-list {

        display: grid;

        grid-template-columns: max-content 1fr;

        column-gap: 0.5em;

        row-gap: 0;

        margin-bottom: 0.5rem;

        font-size: 15px;



        dt,

        dd {

            user-select: none;

        }



        dt {

            &::after {

                content: ":";

            }

        }



        dd {

            margin: 0;

        }

    }



    .campaign-meta-urls {

        li {

            line-height: 1.2;

        }



        a {

            color: var(--color-brand) !important;

            font-size: 15px;

            text-underline-offset: 3px;

            text-decoration: none;

            transition: color 0.15s ease-in-out;



            &:hover {

                color: var(--color-red-800);

                text-decoration: underline;

            }

        }

    }

}