.feature-image {
    background-color: #f6f6f6;
    padding: 2rem;
}

.feature[class*="feature--"] .row {
    border: 1px solid rgba(47, 52, 58, 0.12);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    margin-left: 0;
    margin-right: 0;
}

.feature[class*="feature--"] .feature-image {
    border-left: 1px solid rgba(47, 52, 58, 0.08);
}

.feature__content--dark {
    background-color: #2a2b2d;
    color: #fff;
}

.feature__content--dark h1,
.feature__content--dark h2,
.feature__content--dark h3,
.feature__content--dark h4,
.feature__content--dark h5,
.feature__content--dark h6,
.feature__content--dark p,
.feature__content--dark li,
.feature__content--dark div {
    color: #fff;
}

/* v1: dunkle Textflaeche + helle Visual-Seite */
.feature--v1 .row {
    background-color: #fff;
    border: none;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.feature--v1 .feature__content {
    background-color: #2a2b2d;
    color: #fff;
}

.feature--v1 .feature__content h2,
.feature--v1 .feature__content p,
.feature--v1 .feature__content li,
.feature--v1 .feature__content div {
    color: #fff;
}

.feature--v1 .feature__visual {
    border-left: 0;
    background-color: #f2f2f2;
}

/* v2: gruener Akzent links + heller Hintergrund */
.feature--v2 .row {
    border-left: 6px solid #23947f;
    background-color: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.feature--v2 .feature__visual {
    border-left: 1px solid rgba(47, 52, 58, 0.08);
    background-color: rgba(35, 148, 127, 0.05);
}

/* v3: gelber Top-Akzent (Warning-Farbe) + sachlich weisser Hintergrund */
.feature--v3 .row {
    border-top: 5px solid #f1c447;
    border-left: none;
    box-shadow: none;
    background-color: #fff;
    border-color: rgba(47, 52, 58, 0.2);
    border-top-color: #f1c447;
}

.feature--v3 .feature__visual {
    border-left: 1px solid rgba(47, 52, 58, 0.1);
    background-color: transparent;
}

/* v4: soft grüner Verlauf */
.feature--v4 .row {
    border-color: rgba(35, 148, 127, 0.24);
    background: linear-gradient(180deg, rgba(35, 148, 127, 0.08) 0%, rgba(35, 148, 127, 0.02) 45%, #f7f9fa 100%);
}

.feature--v4 .feature-image {
    background-color: rgba(35, 148, 127, 0.04);
}

/* v5 + dark: dunkle Textflaeche im Soft-Glass-Rahmen */
.feature--v5 .feature__content--dark {
    background-color: #2a2b2d;
    color: #fff;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.feature--v5 .feature__content--dark h1,
.feature--v5 .feature__content--dark h2,
.feature--v5 .feature__content--dark h3,
.feature--v5 .feature__content--dark h4,
.feature--v5 .feature__content--dark h5,
.feature--v5 .feature__content--dark h6,
.feature--v5 .feature__content--dark p,
.feature--v5 .feature__content--dark li,
.feature--v5 .feature__content--dark div {
    color: #fff;
}

/* v5: Soft Glass */
.feature--v5 .row {
    border-color: rgba(47, 52, 58, 0.12);
    background-color: rgba(255, 255, 255, 0.94);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(2px);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature--v5 .row:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.14);
}

/* v6: gespiegelt – Bild links, Text rechts */
.feature--v6 .row {
    flex-direction: row-reverse;
    background-color: #fff;
}

.feature--v6 .feature-image {
    background-color: transparent;
    border-left: 0;
    border-right: 1px solid rgba(47, 52, 58, 0.08);
}

/* v7: Text 42% / Visual 58% nebeneinander, optimiert fuer breite Grafiken */
.feature--v7 .row {
    display: flex;
    gap: 0;
    background-color: #fff;
}

.feature--v7 .feature__content {
    order: 1;
    flex: 0 0 42%;
    max-width: 42%;
}

.feature--v7 .feature__visual {
    order: 2;
    flex: 0 0 58%;
    max-width: 58%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    border-left: 1px solid rgba(47, 52, 58, 0.08);
    background-color: transparent;
    align-items: center;
}

.feature--v7 .feature__visual img {
    width: 100% !important;
    max-width: none;
    height: auto;
    max-height: 210px;
    object-fit: contain;
}

/* dump: Elementor-inspired product feature layout */
.feature--dump .container {
    max-width: 1123px;
}

.feature--dump {
    padding-bottom: 1rem;
}

.feature.feature--dump .row {
    margin-left: 7px;
    margin-right: 7px;
    padding-left: 43px;
    padding-right: 43px;
    border: 0;
    box-shadow: none;
    background-color: transparent;
}

.feature.feature--dump .row>[class*="col-"]:not(.feature__content):not(.feature__visual) {
    padding: 0 !important;
}

.feature.feature--dump .feature__content {
    padding-right: 3rem !important;
}

.feature--dump .feature__content h2,
.feature--dump .feature__visual-title {
    font-size: 2rem;
    font-weight: 300;
    line-height: 2rem;
    color: #000;
}

.feature--dump .feature__content,
.feature--dump .feature__content p {
    font-weight: 300;
    color: #000;
}

.feature--dump .feature-link {
    display: inline-flex;
    align-items: center;
    width: auto;
    min-height: 55px;
    margin: 0;
    padding: 7.5px 10px;
    color: #23947f;
    font-size: 1.375rem;
    font-weight: 300;
    line-height: 2.5rem;
    text-decoration: none;
}

.feature--dump .feature-link--arrow {
    gap: 5px;
}

.feature--dump .feature-link--arrow .feature-link__icon {
    width: 1em;
    height: 1em;
    flex: 0 0 1em;
    margin-top: -4px;
}

.feature--dump .feature-link--play {
    min-height: 50px;
    padding: 0;
    gap: 8px;
    color: #000;
    line-height: 50px;
}

.feature--dump .feature-link--play .feature-link__icon {
    font-size: 2.8125rem;
}

.feature.feature--dump .feature__visual {
    flex: 0 0 calc(66.666667% - 7px);
    max-width: calc(66.666667% - 7px);
    padding: 19.75px 53px 0 !important;
    border: 0;
    background-color: #f6f6f6;
}

.feature.feature--dump .feature__visual img {
    width: 100% !important;
}

@media (min-width: 1600px) {
    .feature--dump .container {
        max-width: 1288px;
        padding-left: 0;
        padding-right: 0;
    }

    .feature--dump {
        padding-bottom: 14px;
    }

    .feature.feature--dump .row {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .feature.feature--dump .feature__content {
        padding-right: 64px !important;
    }

    .feature.feature--dump .feature__visual {
        flex-basis: calc(66.666667% - 9px);
        max-width: calc(66.666667% - 9px);
        padding: 25.5px 68px 0 !important;
    }

    .feature--dump .feature-link--arrow {
        width: max-content;
        white-space: nowrap;
    }
}

@media (max-width: 991.98px) {
    .feature[class*="feature--"] .feature-image {
        border-left: 0;
        border-top: 1px solid rgba(47, 52, 58, 0.08);
    }

    .feature--v6 .feature-image {
        border-right: 0;
    }

    .feature--v7 .feature__content,
    .feature--v7 .feature__visual {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .feature--v7 .feature__visual {
        border-left: 0;
        border-top: 1px solid rgba(47, 52, 58, 0.08);
    }

    .feature--v7 .feature__visual img {
        max-height: 180px;
    }

    .feature.feature--dump .row {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .feature.feature--dump .feature__content {
        padding: 0 0 1.5rem !important;
    }

    .feature.feature--dump .feature__content h2 {
        font-size: 1.625rem;
        line-height: 1.625rem;
    }

    .feature.feature--dump .feature__visual {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 1.125rem 1.125rem 1.5rem !important;
        margin-bottom: 1.0rem;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .feature.feature--dump .feature__visual img {
        width: 100% !important;
    }

    .feature.feature--dump .feature__visual-title {
        display: block;
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 1.25rem !important;
        font-size: 1.625rem;
        line-height: 1.625rem;
        text-align: left;
    }

    .feature--dump .feature-link {
        font-size: 1.125rem;
        line-height: 1.125rem;
    }

    .feature--dump .feature-link--play {
        line-height: 2.375rem;
    }

    .feature--dump .feature-link--play .feature-link__icon {
        font-size: 2.375rem;
    }
}

.feature+.feature {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
}

.feature+.hero-block {
    border-top: 1px solid #000;
    margin-top: 2rem;
    padding-top: 2rem;
}

.feature-image {
    background-color: #f2f2f2;
}