/* Seitenspezifische Darstellung und vertikaler Rhythmus der beiden Bilder. */
.resolution-infographic,
.resolution-lifestyle-media {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: clamp(20px, 3vw, 32px);
    background: var(--surface);
    box-shadow: var(--shadow-md);
}

/*
 * Die Infografik liegt innerhalb des Rechner-Bereichs. Ihr Abstand wird hier
 * bewusst am Bild selbst definiert, statt von Section-Paddings abzuhängen.
 */
.resolution-infographic {
    max-width: 960px;
    margin: clamp(36px, 4vw, 52px) auto clamp(40px, 4.5vw, 58px);
}

/*
 * Zwischen Editorial-Text und FAQ lagen vorher zwei große Section-Paddings
 * direkt hintereinander. Beide Seiten des Übergangs werden hier reduziert.
 */
.resolution-editorial-section {
    padding-bottom: clamp(22px, 2.5vw, 32px);
}

.resolution-faq-section {
    padding-top: clamp(22px, 2.5vw, 32px);
}

/*
 * Das Foto soll optisch zwischen den Bereichen stehen: oben kein riesiger
 * Leerraum mehr, darunter aber klarer Abstand zur FAQ-Überschrift.
 */
.resolution-lifestyle-media {
    max-width: 920px;
    margin: 0 auto clamp(38px, 4vw, 52px);
}

.resolution-infographic img,
.resolution-lifestyle-media img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto !important;
    object-fit: contain;
}

@media (max-width: 760px) {
    .resolution-infographic,
    .resolution-lifestyle-media {
        max-width: 100%;
        border-radius: 20px;
        box-shadow: var(--shadow-sm);
    }

    .resolution-infographic {
        margin-top: 28px;
        margin-bottom: 34px;
    }

    .resolution-editorial-section {
        padding-bottom: 18px;
    }

    .resolution-faq-section {
        padding-top: 18px;
    }

    .resolution-lifestyle-media {
        margin-bottom: 32px;
    }
}