.rexx-content-section-01 {
    width: 100%;
    padding-block: var(--rexx-space-2xl);
    color: var(--rexx-text-color);
}

.rexx-content-section-01__inner {
    width: min(
        calc(100% - (var(--rexx-page-padding) * 2)),
        var(--rexx-width-container-narrow)
    );
    margin-inline: auto;
}

.rexx-content-section-01__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--rexx-space-sm);
    margin-bottom: var(--rexx-space-xl);
    text-align: center;
}

.rexx-content-section-01__eyebrow {
    margin: 0;
}

.rexx-content-section-01__headline {
    max-width: 24ch;
    margin: 0;
    overflow-wrap: anywhere;
}

.rexx-content-section-01__subtext {
    width: min(100%, var(--rexx-width-text));
    color: var(--rexx-text-color);
}

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

.rexx-content-section-01__subtext p + p {
    margin-top: var(--rexx-space-sm);
}

.rexx-content-section-01__subtext ul {
    display: table;
    margin-inline: auto;
    padding-left: 0;
    text-align: left;
    list-style-position: outside;
}

.rexx-content-section-01__content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

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

/* Mediengrößen: Das Lightbox-Linkelement darf nicht breiter als das Bild sein.
   Der zusätzliche .rexx-content-section-01-Präfix verhindert, dass die
   weiter unten stehende allgemeine Lightbox-Regel die Größe überschreibt. */
.rexx-content-section-01__content--size-small .rexx-content-section-01__media-frame,
.rexx-content-section-01__content--size-small .rexx-content-section-01__video,
.rexx-content-section-01 .rexx-content-section-01__content--size-small .rexx-lightbox-link {
    max-width: 600px;
}

.rexx-content-section-01__content--size-medium .rexx-content-section-01__media-frame,
.rexx-content-section-01__content--size-medium .rexx-content-section-01__video,
.rexx-content-section-01 .rexx-content-section-01__content--size-medium .rexx-lightbox-link {
    max-width: 900px;
}

.rexx-content-section-01__content--size-large .rexx-content-section-01__media-frame,
.rexx-content-section-01__content--size-large .rexx-content-section-01__video,
.rexx-content-section-01 .rexx-content-section-01__content--size-large .rexx-lightbox-link {
    max-width: var(--rexx-width-wide);
}

/* Bildrahmen mit dynamischem Produkt-Farbtheme */
.rexx-content-section-01__media-frame--framed,
.rexx-content-section-01__video--framed {
    padding: var(--rexx-space-md);

    background: var(--rexx-color-2);
    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-content-section-01__media-frame--screenshot {
    background: transparent;
}

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

.rexx-content-section-01__media-frame img {
    border-radius: inherit;
}

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

.rexx-content-section-01__video {
    position: relative;
    max-width: var(--rexx-width-text);
    aspect-ratio: 16 / 10;

}

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

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

.rexx-content-section-01__text {
    width: min(100%, var(--rexx-width-text));
    color: var(--rexx-text-color);
}

.rexx-content-section-01__text p {
    margin: 0;
}

.rexx-content-section-01__text p + p {
    margin-top: var(--rexx-space-sm);
}

.rexx-content-section-01__text ul,
.rexx-content-section-01__text ol {
    margin: var(--rexx-space-sm) 0 0;
    padding-left: 1.25em;
}

.rexx-content-section-01__text li + li {
    margin-top: 0.35em;
}

.rexx-content-section-01__text a:not(.rexx-button) {
    color: var(--rexx-color-accent-strong);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.rexx-content-section-01__text a:not(.rexx-button):hover,
.rexx-content-section-01__text a:not(.rexx-button):focus-visible {
    text-decoration-thickness: 2px;
}

.rexx-content-section-01__text .rexx-content-section-01__cta {
    margin-top: var(--rexx-space-md);
}

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

.rexx-content-section-01 .rexx-lightbox-link {
    display: block;
    width: 100%;
    max-width: var(--rexx-width-wide);
    margin-inline: auto;
    overflow: hidden;
    border-radius: var(--rexx-radius-md);
    text-decoration: none;
}

.rexx-content-section-01 .rexx-lightbox-link:focus-visible {
    outline: 3px solid var(--rexx-color-focus);
    outline-offset: 4px;
}

@media (max-width: 767px) {
    .rexx-content-section-01 {
        padding-block: var(--rexx-space-xl);
    }

    .rexx-content-section-01__header {
        margin-bottom: var(--rexx-space-lg);
        align-items: flex-start;
        text-align: left;
    }

    .rexx-content-section-01__eyebrow,
    .rexx-content-section-01__headline,
    .rexx-content-section-01__subtext,
    .rexx-content-section-01__text {
        text-align: left;
    }

    .rexx-content-section-01__subtext ul {
        display: block;
        margin-inline: 0;
        padding-left: 1.25em;
    }

    .rexx-content-section-01__media-frame,
    .rexx-content-section-01__video {
        max-width: 100%;
    }
}


/* Sanfter Zoom fuer anklickbare Bilder */
.rexx-content-section-01 .rexx-lightbox-link img {
    transition: transform 0.35s ease;
}

@media (hover: hover) {
    .rexx-content-section-01 .rexx-lightbox-link:hover img {
        transform: scale(1.02);
    }

}

/* Animation bei reduzierter Bewegung deaktivieren */
@media (prefers-reduced-motion: reduce) {
    .rexx-content-section-01 .rexx-lightbox-link,
    .rexx-content-section-01 .rexx-lightbox-link img {
        transition: none;
    }

    .rexx-content-section-01 .rexx-lightbox-link:hover img {
        transform: none;
    }
}