.wp-block-uniplus-rt-ba-container {
    box-sizing: border-box;
    background-color: var( --section-background-color, transparent );
    position: relative;
    width: 100%;
    /*
     * clip statt hidden: beide schneiden Overlays und Hintergrundtext ab,
     * aber hidden macht die Sektion zum Scroll-Container -- position: sticky
     * im Inhalt (z. B. Gruppe mit "Sticky") klebt dann an der Sektion, die
     * nie scrollt, und bleibt wirkungslos. hidden bleibt als Fallback fuer
     * Browser ohne clip.
     */
    overflow: hidden;
    overflow: clip;
}

.wp-block-uniplus-rt-ba-container::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var( --section-background-gradient, none ), var( --section-background-image, none );
    background-size: cover, cover;
    background-position: center, var( --section-background-position, center );
    background-repeat: no-repeat, no-repeat;
    filter: saturate( var( --section-background-saturate, 1 ) );
}

@media (max-width: 782px) {
    .wp-block-uniplus-rt-ba-container::before {
        background-position: center, var( --section-background-position-tablet, var( --section-background-position, center ) );
    }
}

@media (max-width: 480px) {
    .wp-block-uniplus-rt-ba-container::before {
        background-position: center, var( --section-background-position-mobile, var( --section-background-position-tablet, var( --section-background-position, center ) ) );
    }
}

.wp-block-uniplus-rt-ba-container__content {
    z-index: 2;
    position: relative;
    max-width: calc(1440px - var(--section-pad-left, 0px) - var(--section-pad-right, 0px));
    margin-inline: auto;
}

.wp-block-uniplus-rt-ba-container__background-text {
    position: absolute;
    inset: 0;
    /*
     * Die Flaeche geht bis zum Bildschirmrand, Abstand und Zeilen-Einrueckung
     * zaehlen aber wie der Inhalt ab dem 1440px-Raster -- sonst steht der Text
     * im Editor (schmale Arbeitsflaeche) und im Frontend anders zum Inhalt.
     */
    --background-text-gutter: max(0px, (100% - 1440px) / 2);
    padding:
        var(--background-text-padding-top, 0px)
        calc(var(--background-text-padding-right, 0px) + var(--background-text-gutter))
        var(--background-text-padding-bottom, 0px)
        calc(var(--background-text-padding-left, 0px) + var(--background-text-gutter));
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--background-text-line-gap, 0px);
    pointer-events: none;
    overflow: visible;
    font-family: var(--wp--preset--font-family--author), serif;
    font-weight: 700;
    font-size: var(--background-text-size, 220px);
    line-height: 0.65;
    text-transform: uppercase;
    color: var(--wp--preset--color--schnee-base-7);
}

.wp-block-uniplus-rt-ba-container__background-text-line {
    white-space: nowrap;
}

.wp-block-uniplus-rt-ba-container__background-text--clip {
    overflow: hidden;
}

.wp-block-uniplus-rt-ba-container__background-text--align-left {
    align-items: flex-start;
    text-align: left;
}

.wp-block-uniplus-rt-ba-container__background-text--align-center {
    align-items: center;
    text-align: center;
}

.wp-block-uniplus-rt-ba-container__background-text--align-right {
    align-items: flex-end;
    text-align: right;
}

.wp-block-uniplus-rt-ba-container__background-text--valign-top {
    justify-content: flex-start;
}

.wp-block-uniplus-rt-ba-container__background-text--valign-center {
    justify-content: center;
}

.wp-block-uniplus-rt-ba-container__background-text--valign-bottom {
    justify-content: flex-end;
}

.wp-block-uniplus-rt-ba-container__overlay {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: var(--overlay-height, 273px);
    background: var(--wp--preset--color--schnee-base-7);
    clip-path: polygon(
        0 59.4%,
        100% 0,
        100% 100%,
        0 100%
    );
    z-index: 1;
    pointer-events: none;
}

.wp-block-uniplus-rt-ba-container__right-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: calc(494px + max(0px, (100% - 1440px) / 2));
    z-index: 1;
    pointer-events: none;
    background-color: var(--wp--preset--color--schnee-light);
}

.wp-block-uniplus-rt-ba-container__bottom-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: var(--overlay-height, 648px);
    z-index: 3;
    pointer-events: none;
    display: flex;
    align-items: end;
    justify-content: center;
    background: linear-gradient(
        180deg,
        rgba(248, 248, 248, 0) 0%,
        rgba(248, 248, 248, 0.8) 49.52%
    );
}

.wp-block-uniplus-rt-ba-container__bottom-overlay-text {
    padding-bottom: var(--wp--preset--spacing--80);
    position: relative;
}

.wp-block-uniplus-rt-ba-container__bottom-overlay-text > h2 {
    text-align: center;
    font-family: var(--wp--preset--font-family--author), serif;
    font-weight: 700;
    font-size: var(--wp--preset--font-size--h-2);
    line-height: 100%;
    letter-spacing: 0;
    margin: 0;
}

/*
 * Das Icon haengt oberhalb der Textoberkante und ragt rechts ueber deren
 * Kante hinaus. Es haengt per bottom: 100% an der Oberkante statt an einem
 * festen top-Wert: die Schriftgroesse (--wp--preset--font-size--h-2) waechst
 * per clamp mit der Viewportbreite, ein fester Versatz nach oben rutschte
 * dadurch auf schmalen Screens in die erste Zeile hinein.
 */
.wp-block-uniplus-rt-ba-container__bottom-overlay-icon {
    position: absolute;
    right: -22px;
    bottom: 100%;
    rotate: 10deg;
}

.wp-block-uniplus-rt-ba-container__red-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    --overlay-default-height: 333px;
    height: var(--overlay-height, var(--overlay-default-height));
    pointer-events: none;
}

.wp-block-uniplus-rt-ba-container__red-overlay-blur,
.wp-block-uniplus-rt-ba-container__red-overlay-desaturate,
.wp-block-uniplus-rt-ba-container__red-overlay-tint,
.wp-block-uniplus-rt-ba-container__red-overlay-gradient {
    position: absolute;
    inset: 0;
}

.wp-block-uniplus-rt-ba-container__red-overlay-blur {
    background: rgba(248, 248, 248, 0.4);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.wp-block-uniplus-rt-ba-container__red-overlay-desaturate {
    background: #fff;
    mix-blend-mode: saturation;
}

.wp-block-uniplus-rt-ba-container__red-overlay-tint {
    background: #e02416;
    mix-blend-mode: multiply;
}

.wp-block-uniplus-rt-ba-container__red-overlay-gradient {
    background: linear-gradient(180deg, rgba(224, 36, 22, 0) 0%, #e02416 100%);
}

.wp-block-uniplus-rt-ba-container__light-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    --overlay-default-height: 240px;
    height: var(--overlay-height, var(--overlay-default-height));
    pointer-events: none;
}

.wp-block-uniplus-rt-ba-container__light-overlay-blur,
.wp-block-uniplus-rt-ba-container__light-overlay-desaturate,
.wp-block-uniplus-rt-ba-container__light-overlay-tint,
.wp-block-uniplus-rt-ba-container__light-overlay-gradient {
    position: absolute;
    inset: 0;
}

.wp-block-uniplus-rt-ba-container__light-overlay-blur {
    background: rgba(248, 248, 248, 0.4);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.wp-block-uniplus-rt-ba-container__light-overlay-desaturate {
    background: #ffffff;
    mix-blend-mode: saturation;
    opacity: 0.5;
}

.wp-block-uniplus-rt-ba-container__light-overlay-tint {
    background: #f8f8f8;
    mix-blend-mode: multiply;
    opacity: 0.75;
}

.wp-block-uniplus-rt-ba-container__light-overlay-gradient {
    background: linear-gradient(
        180deg,
        rgba(248, 248, 248, 0) 0%,
        rgba(248, 248, 248, 0.436666) 23.08%,
        rgba(248, 248, 248, 0.658683) 41.83%,
        rgba(248, 248, 248, 0.812163) 57.21%,
        rgba(248, 248, 248, 0.894517) 72.12%,
        #f8f8f8 100%
    );
}

.wp-block-uniplus-rt-ba-container__blue-gradient-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    --overlay-default-height: 120px;
    height: var(--overlay-height, var(--overlay-default-height));
    pointer-events: none;
}

.wp-block-uniplus-rt-ba-container__blue-gradient-overlay-blur,
.wp-block-uniplus-rt-ba-container__blue-gradient-overlay-desaturate,
.wp-block-uniplus-rt-ba-container__blue-gradient-overlay-tint,
.wp-block-uniplus-rt-ba-container__blue-gradient-overlay-gradient {
    position: absolute;
    inset: 0;
}

.wp-block-uniplus-rt-ba-container__blue-gradient-overlay-blur {
    background: rgba(248, 248, 248, 0.4);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.wp-block-uniplus-rt-ba-container__blue-gradient-overlay-desaturate {
    background: #ffffff;
    mix-blend-mode: saturation;
    opacity: 0.5;
}

.wp-block-uniplus-rt-ba-container__blue-gradient-overlay-tint {
    background: #3356b0;
    mix-blend-mode: multiply;
    opacity: 0.75;
}

.wp-block-uniplus-rt-ba-container__blue-gradient-overlay-gradient {
    background: linear-gradient(180deg, rgba(51, 86, 176, 0) 0%, #3356b0 100%);
}

@media (max-width: 1100px) {
    .wp-block-uniplus-rt-ba-container__overlay {
        height: var(--overlay-height, 220px);
    }

    .wp-block-uniplus-rt-ba-container__right-overlay {
        width: 380px;
    }

    .wp-block-uniplus-rt-ba-container__bottom-overlay {
        height: var(--overlay-height, 480px);
    }

    .wp-block-uniplus-rt-ba-container__red-overlay {
        --overlay-default-height: 260px;
    }

    .wp-block-uniplus-rt-ba-container__light-overlay {
        --overlay-default-height: 190px;
    }
}

@media (max-width: 600px) {
    .wp-block-uniplus-rt-ba-container__overlay {
        height: var(--overlay-height, 160px);
    }

    .wp-block-uniplus-rt-ba-container__bottom-overlay {
        height: var(--overlay-height, 340px);
    }

    .wp-block-uniplus-rt-ba-container__bottom-overlay-text {
        padding-bottom: var(--wp--preset--spacing--32);
    }

    .wp-block-uniplus-rt-ba-container__bottom-overlay-icon {
        right: -14px;
    }

    .wp-block-uniplus-rt-ba-container__red-overlay {
        --overlay-default-height: 190px;
    }

    .wp-block-uniplus-rt-ba-container__light-overlay {
        --overlay-default-height: 140px;
    }
}

/*
 * Ab hier stapeln die Spalten des Inhalts (WordPress bricht Columns bei
 * 781px um). Das graue Panel steht dann nicht mehr neben dem Inhalt,
 * sondern legt sich als Band unter ihn: volle Breite, und die Hoehe
 * ungefaehr so gross wie das Bild darueber, damit das Bild wie am Desktop
 * ueber den Rand des Panels hinausragt (dort ist das Panel 494px breit,
 * das Bild 616px). Der Wert waechst mit der Viewportbreite, weil die
 * Bildhoehe im gestapelten Layout ebenfalls von der Breite abhaengt.
 */
@media (max-width: 781px) {
    .wp-block-uniplus-rt-ba-container__right-overlay {
        top: auto;
        left: 0;
        right: 0;
        width: auto;
        height: clamp(180px, 65vw, 340px);
    }
}

@media (max-width: 782px) {
    .wp-block-uniplus-rt-ba-container__red-overlay,
    .wp-block-uniplus-rt-ba-container__light-overlay,
    .wp-block-uniplus-rt-ba-container__blue-gradient-overlay {
        height: var(--overlay-height-tablet, var(--overlay-height, var(--overlay-default-height)));
    }
}

@media (max-width: 480px) {
    .wp-block-uniplus-rt-ba-container__red-overlay,
    .wp-block-uniplus-rt-ba-container__light-overlay,
    .wp-block-uniplus-rt-ba-container__blue-gradient-overlay {
        height: var(--overlay-height-mobile, var(--overlay-height-tablet, var(--overlay-height, var(--overlay-default-height))));
    }
}