.ce-bild-text-teaser {
    --btt-bg-top: #fff;
    --btt-bg-bottom: #fff;
}

.ce-btt--grad-top-grey    { --btt-bg-top: #e8e8eb; }
.ce-btt--grad-bottom-grey { --btt-bg-bottom: #e8e8eb; }

.ce-bild-text-teaser {
    container-type: inline-size;
    background: linear-gradient(to bottom, var(--btt-bg-top), var(--btt-bg-bottom));
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    position: relative;
    overflow: hidden;
    min-height: 550px;

    @media (max-width: 991px) {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .ce-btt__img-wrap {
        position: relative;
        z-index: 1;
        align-self: stretch;
        overflow: hidden;
        display: flex;
        align-items: center;

        @media (max-width: 991px) {
            display: block;
        }
    }

    .ce-btt__img {
        width: 100%;
        height: auto;
        display: block;
    }

    .ce-btt__box {
        --padding-block: 7cqw;
        background-color: #e61f47;
        color: #fff;
        padding: var(--padding-block) 12% var(--padding-block) 7%;
        position: relative;
        min-height: 20cqw;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        border-top-left-radius: clamp(16px, 2.33cqw, 40px);
        border-bottom-left-radius: clamp(16px, 2.33cqw, 40px);

        @media (max-width: 991px) {
            padding: 48px 5%;
            min-height: auto;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
    }

    .ce-btt__headline {
        font-size: clamp(2rem, 4.3vw, 3.5rem);
        font-weight: 900;
        line-height: 0.9;
        text-transform: uppercase;
        color: #fff;
        margin: 0;
        max-width: 70%;

        @media (max-width: 991px) {
            max-width: 100%;
        }
    }

    .ce-btt__text {
        font-size: clamp(0.8rem, 2.1vw, 1.8rem);
        font-weight: 200;
        line-height: 1.4;
        color: rgba(255, 255, 255, 0.9);
        text-transform: uppercase;
        margin-bottom: 2rem;
        max-width: 70%;

        @media (max-width: 991px) {
            max-width: 100%;
        }

        p {
            margin: 0 0 12px;
            line-height: 1.2;

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

        .rte-contact-icon {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 8px 0;
            color: #fff;
            text-decoration: none;

            svg,
            img {
                width: 20px;
                height: 20px;
                flex-shrink: 0;
            }
        }
    }

    .ce-btt__gradient {
        position: absolute;
        left: 0;
        right: 0;
        height: 40%;
        pointer-events: none;
        z-index: 2;
    }

    .ce-btt__gradient--none {
        display: none;
    }

    .ce-btt__gradient--top {
        top: 0;
    }

    .ce-btt__gradient--bottom {
        bottom: 0;
    }

    .ce-btt__gradient--top.ce-btt__gradient--white {
        background: linear-gradient(to bottom, #fff, transparent);
    }

    .ce-btt__gradient--bottom.ce-btt__gradient--white {
        background: linear-gradient(to top, #fff, transparent);
    }

    .ce-btt__gradient--top.ce-btt__gradient--grey {
        background: linear-gradient(to bottom, #e8e8eb, transparent);
    }

    .ce-btt__gradient--bottom.ce-btt__gradient--grey {
        background: linear-gradient(to top, #e8e8eb, transparent);
    }
}