.rexx-split-01 {
    --rexx-split-01-gap: clamp(32px, 4vw, 72px);
    --rexx-split-01-item-gap: clamp(24px, 3.5vw, 48px);

    width: 100%;
    padding-block: var(--rexx-space-2xl);
    color: var(--rexx-text-color);
}

.rexx-split-01 .rexx-split-01__inner {
    width: min(
        calc(100% - (var(--rexx-page-padding) * 2)),
        var(--rexx-width-container)
    );
    margin-inline: auto;
    box-sizing: border-box;
}

.rexx-split-01 .rexx-split-01__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--rexx-space-2xl, 64px);
    text-align: center;
}

.rexx-split-01 .rexx-split-01__eyebrow,
.rexx-split-01 .rexx-split-01__item-eyebrow {
    margin: 0;
}

.rexx-split-01 .rexx-split-01__headline,
.rexx-split-01 .rexx-split-01__item-headline {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.rexx-split-01 .rexx-split-01__subtext {
    max-width: 760px;
    margin-inline: auto;
    color: var(--rexx-text-color, #505052);
    text-align: center;
}

.rexx-split-01 .rexx-split-01__subtext p {
    margin: 0;
}

.rexx-split-01 .rexx-split-01__items {
    display: flex;
    flex-direction: column;
    gap: var(--rexx-split-01-gap);
}

.rexx-split-01 .rexx-split-01__item {
    --rexx-split-01-text-span: 1fr;
    --rexx-split-01-media-span: 1fr;

    display: grid;
    grid-template-columns:
        minmax(0, var(--rexx-split-01-text-span))
        minmax(0, var(--rexx-split-01-media-span));
    gap: var(--rexx-split-01-item-gap);
    align-items: center;
}

.rexx-split-01 .rexx-split-01__item--ratio-50-50 {
    --rexx-split-01-text-span: 1fr;
    --rexx-split-01-media-span: 1fr;
}

.rexx-split-01 .rexx-split-01__item--ratio-40-60 {
    --rexx-split-01-text-span: 4fr;
    --rexx-split-01-media-span: 6fr;
}

.rexx-split-01 .rexx-split-01__item--ratio-60-40 {
    --rexx-split-01-text-span: 6fr;
    --rexx-split-01-media-span: 4fr;
}

.rexx-split-01 .rexx-split-01__item--reverse .rexx-split-01__text-column {
    order: 2;
}

.rexx-split-01 .rexx-split-01__item--reverse .rexx-split-01__media-column {
    order: 1;
}

.rexx-split-01 .rexx-split-01__text-column,
.rexx-split-01 .rexx-split-01__media-column {
    min-width: 0;
}

.rexx-split-01 .rexx-split-01__text-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rexx-split-01 .rexx-split-01__media-column--text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rexx-split-01 .rexx-split-01__text-body {
    color: var(--rexx-text-color);
}

.rexx-split-01 .rexx-split-01__text-body p {
    margin: 0;
}

.rexx-split-01 .rexx-split-01__text-body p + p {
    margin-top: 12px;
}

.rexx-split-01 .rexx-split-01__text-body ul,
.rexx-split-01 .rexx-split-01__text-body ol {
    margin: 0;
    padding-left: 1.25em;
}

.rexx-split-01 .rexx-split-01__text-body li + li {
    margin-top: 0.35em;
}

.rexx-split-01 .rexx-split-01__text-body p + ul,
.rexx-split-01 .rexx-split-01__text-body p + ol,
.rexx-split-01 .rexx-split-01__text-body ul + p,
.rexx-split-01 .rexx-split-01__text-body ol + p {
    margin-top: 12px;
}

.rexx-split-01 .rexx-split-01__text-body a {
    color: var(--rexx-color-4, #ee8a2f);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.rexx-split-01 .rexx-split-01__text-body a:hover,
.rexx-split-01 .rexx-split-01__text-body a:focus-visible {
    text-decoration-thickness: 2px;
}

.rexx-split-01 .rexx-split-01__list {
    margin: 0;
    padding-left: 1.1em;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--rexx-text-color);
}

.rexx-split-01 .rexx-list--checks {
    padding-left: 0;
    list-style: none;
}

.rexx-split-01 .rexx-split-01__cta {
    margin-top: 4px;
}

.rexx-split-01 .rexx-button {
    color: #ffffff;
    font-family: var(--rexx-font-display);
}

/* Media-Grundlayout */

.rexx-split-01 .rexx-split-01__media-frame,
.rexx-split-01 .rexx-split-01__video {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border-radius: var(--rexx-radius-md, 20px);
}

/* Theme-Gradient für aktivierte Bild- und Videorahmen */

.rexx-split-01 .rexx-split-01__media-frame--framed,
.rexx-split-01 .rexx-split-01__video--framed {
    padding: var(--rexx-space-md);
    border: 0;

    background: linear-gradient(
        to left,
        color-mix(in srgb, var(--rexx-color-2) 85%, white) 0%,
        var(--rexx-color-3) 45%,
        color-mix(in srgb, var(--rexx-color-3) 55%, transparent) 100%
    );
}

.rexx-split-01 .rexx-split-01__media-frame img,
.rexx-split-01 .rexx-split-01__video iframe,
.rexx-split-01 .rexx-split-01__video video {
    display: block;
    width: 100%;
    height: auto;
}

.rexx-split-01 .rexx-split-01__media-frame img {
    object-fit: cover;
    border-radius: inherit;
}

/* Screenshot ohne Rahmen */

.rexx-split-01 .rexx-split-01__media-frame--screenshot {
    background: transparent;
}

/* Screenshot mit aktiviertem Theme-Rahmen */

.rexx-split-01 .rexx-split-01__media-frame--screenshot.rexx-split-01__media-frame--framed {
    padding: var(--rexx-space-md);

    background: linear-gradient(
        to left,
        color-mix(in srgb, var(--rexx-color-2) 85%, white) 0%,
        var(--rexx-color-3) 45%,
        color-mix(in srgb, var(--rexx-color-3) 55%, transparent) 100%
    );
}

.rexx-split-01 .rexx-split-01__media-frame--framed img,
.rexx-split-01 .rexx-split-01__video--framed iframe,
.rexx-split-01 .rexx-split-01__video--framed video {
    border-radius: var(--rexx-radius-sm);
}

.rexx-split-01 .rexx-split-01__media-frame--screenshot img {
    background: #ffffff;
}

/* Video-Grundlayout ohne aktivierten Rahmen */

.rexx-split-01 .rexx-split-01__video {
    position: relative;
    aspect-ratio: 16 / 10;

    background: color-mix(
        in srgb,
        var(--rexx-color-1) 25%,
        white
    );
}

/* Video mit aktiviertem Rahmen: Gradient hat Vorrang */

.rexx-split-01 .rexx-split-01__video.rexx-split-01__video--framed {
    background: linear-gradient(
        to left,
        color-mix(in srgb, var(--rexx-color-2) 85%, white) 0%,
        var(--rexx-color-3) 45%,
        color-mix(in srgb, var(--rexx-color-3) 55%, transparent) 100%
    );
}

.rexx-split-01 .rexx-split-01__video iframe,
.rexx-split-01 .rexx-split-01__video video {
    min-height: 100%;
    border: 0;
    border-radius: inherit;
}

/* Lightbox */

.rexx-split-01 .rexx-lightbox-link {
    display: block;
    overflow: hidden;
    border-radius: var(--rexx-radius-md, 20px);
    text-decoration: none;
}

.rexx-split-01 .rexx-lightbox-link:focus-visible {
    outline: 3px solid var(--rexx-color-3, #f1a15f);
    outline-offset: 4px;
}

/* Mobile */

@media (max-width: 767px) {
    .rexx-split-01 .rexx-split-01__header {
        align-items: flex-start;
        margin-bottom: var(--rexx-space-xl, 48px);
        text-align: left;
    }

    .rexx-split-01 .rexx-split-01__header .rexx-split-01__eyebrow,
    .rexx-split-01 .rexx-split-01__header .rexx-split-01__headline,
    .rexx-split-01 .rexx-split-01__header .rexx-split-01__subtext {
        text-align: left;
    }

    .rexx-split-01 .rexx-split-01__subtext {
        margin-inline: 0;
        align-self: flex-start;
    }

    .rexx-split-01 .rexx-split-01__item {
        grid-template-columns: 1fr;
    }

    .rexx-split-01 .rexx-split-01__item--reverse .rexx-split-01__text-column,
    .rexx-split-01 .rexx-split-01__item--reverse .rexx-split-01__media-column {
        order: initial;
    }
}

/* Reduced Motion */

@media (prefers-reduced-motion: reduce) {
    .rexx-split-01 * {
        transition: none;
    }
}