/* Kreis-Collage mit Texten
   Desktop-Maße in vw nach Vorlage (1920px breit), mobil nach Vorlage
   (360 Einheiten breit). */
:where(.circle-features) {
    --circle-features-bg: var(--color-tertiary);
    --circle-features-color: var(--color-primary);
    --circle-features-deco: color-mix(in srgb, var(--color-mint-deco) 85%, transparent);
    --circle-features-right-start: 55.5%;
    --circle-features-single-size: 26vw;
    --circle-features-text-width: 34vw;
}

.circle-features {
    position: relative;
    overflow: hidden;
    padding-bottom: 5.7vw;
    background: var(--circle-features-bg);
    color: var(--circle-features-color);
}

.circle-features__inner {
    position: relative;
    max-width: var(--max-container-width);
    margin: 0 auto;
}

.circle-features__columns {
    display: grid;
    grid-template-columns: var(--circle-features-right-start) 1fr;
    align-items: start;
}

.circle-features__headline {
    max-width: 10em;
    margin: 4.1vw 0 5.6vw;
}

/* --- Einträge ------------------------------------------------------------ */
.circle-features__item {
    position: relative;
}

.circle-features__content {
    position: relative;
    z-index: 2;
    max-width: var(--circle-features-text-width);
}

.circle-features__kicker {
    margin: 0 0 0.2em;
    color: inherit;
    font-size: var(--font-size-4);
    font-weight: var(--font-weight-h4);
    line-height: var(--line-height-h4);
    letter-spacing: var(--letter-spacing-h4);
}

/* Sieht aus wie H2 (Vorlage), ist aber semantisch H3 unter der Überschrift */
.circle-features__title {
    margin: 0 0 0.75em !important;
    font-size: var(--font-size-2);
    line-height: var(--line-height-h2);
    letter-spacing: var(--letter-spacing-h2);
    text-transform: uppercase;
}

.circle-features__text p {
    color: inherit;
}

.circle-features__text p + p {
    margin-top: 1em;
}

/* Doppelte Klasse: globales .button-Margin lädt später */
.circle-features .circle-features__button {
    margin: 1.6em 0 0;
}

/* --- Collagen ------------------------------------------------------------
   Fertige transparente PNGs, im Maßstab der 1920er-Vorlage gezeichnet:
   --_w = Pixelbreite / 19,2 (per Template), --_scale je Anordnung/Breakpoint.
   Versatz gleicht den transparenten Rand der Grafiken aus. */
.circle-features__image {
    display: block;
    width: calc(var(--_w) * var(--_scale, 1) * 1vw);
    max-width: none;
    height: auto;
}

.circle-features__media {
    position: relative;
    z-index: 1;
}

.circle-features__item--left .circle-features__media {
    margin: 0 0 4vw -2.66vw;
}

.circle-features__item--right .circle-features__media {
    margin: 0 0 1.36vw -17.7vw;
}

/* --- Eintrag über die ganze Breite: Collage links, Text rechts ----------- */
.circle-features__item--row {
    display: grid;
    grid-template-columns: var(--circle-features-right-start) 1fr;
    align-items: start;
    margin-top: -0.8vw;
}

.circle-features__item--row .circle-features__content {
    grid-column: 2;
    grid-row: 1;
}

.circle-features__item--row .circle-features__media {
    grid-column: 1;
    grid-row: 1;
    margin: 6.9vw 0 0 2.66vw;
}

/* Akzent: Grafik am rechten Rand, ragt nach oben in den Eintrag darüber */
.circle-features__image--accent {
    position: absolute;
    z-index: 1;
    top: -29.3vw;
    left: 58vw;
    pointer-events: none;
}

/* --- Claim + Punktreihe -------------------------------------------------- */
.circle-features__footer {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3.9vw;
    margin-top: -19.9vw;
    margin-right: -3.9vw;
}

.circle-features__claim {
    margin: 0 1.5vw 0 0;
}

.circle-features__dots {
    display: flex;
    align-items: center;
    gap: 1.2vw;
}

.circle-features__dot {
    flex: 0 0 auto;
    width: var(--dot-size);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--dot-color);
}

.circle-features__dot--1 { --dot-size: 1.875vw; --dot-color: var(--color-primary); }
.circle-features__dot--2 { --dot-size: 2.29vw;  --dot-color: var(--color-mint-deco); }
.circle-features__dot--3 { --dot-size: 2.29vw;  --dot-color: var(--color-sand); }
.circle-features__dot--4 { --dot-size: 4.375vw; --dot-color: var(--color-primary); }
.circle-features__dot--5 { --dot-size: 1.25vw;  --dot-color: var(--color-mint-deco); }
.circle-features__dot--6 { --dot-size: 2.08vw;  --dot-color: var(--color-primary); }
.circle-features__dot--7 { --dot-size: 2.08vw;  --dot-color: var(--color-lavender); }
.circle-features__dot--8 { --dot-size: 1.04vw;  --dot-color: var(--color-primary); }
/* Großer Kreis ragt aus dem Bild, soll die Reihe aber nicht aufblähen */
.circle-features__dot--9 { --dot-size: 9vw;     --dot-color: var(--color-lavender); margin: -3.5vw -6vw -3.5vw 0.4vw; }

/* ==========================================================================
   Tablet und Mobil: eine Spalte
   ========================================================================== */
@media (max-width: 900px) {
    .circle-features {
        --circle-features-text-width: none;
        padding-bottom: 14vw;
    }

    .circle-features__columns,
    .circle-features__item--row {
        display: block;
    }

    .circle-features__headline {
        margin: 9vw 0 7vw;
    }

    .circle-features__item + .circle-features__item,
    .circle-features__column--right {
        margin-top: 10.5vw;
    }

    /* Mobile Komposition; Tablet verkleinert sie über --_k auf 70 % */
    .circle-features__item {
        --_k: 1;
    }

    .circle-features__item--left,
    .circle-features__item--right {
        --_scale: calc(1.78 * var(--_k));
    }

    .circle-features__item--row {
        --_scale: calc(2.15 * var(--_k));
        margin-top: 9vw;
    }

    .circle-features__item--left .circle-features__media {
        margin: 0 0 6.5vw;
    }

    .circle-features__item--right .circle-features__media {
        margin: 0 0 6.5vw calc(-2.9vw * var(--_k));
    }

    .circle-features__item--row .circle-features__media {
        margin: 0 0 13vw calc(-13.2vw * var(--_k));
    }

    /* Deko-Kreis am rechten Rand neben dem ersten Bild (nur mobile Vorlage) */
    .circle-features__column--left .circle-features__item:first-of-type::before {
        content: '';
        position: absolute;
        z-index: 0;
        top: calc(25.4vw * var(--_k));
        right: calc(-31.7vw * var(--_k));
        width: calc(37.3vw * var(--_k));
        aspect-ratio: 1;
        border-radius: 50%;
        background: var(--circle-features-deco);
        pointer-events: none;
    }

    .circle-features__image--accent {
        --_scale: calc(2.13 * var(--_k));
        top: calc(-18vw * var(--_k));
        left: auto;
        right: calc(-70.2vw * var(--_k));
    }

    .circle-features__footer {
        align-items: flex-start;
        gap: 6.6vw;
        margin: 9.2vw 0 0;
    }

    .circle-features__claim {
        margin: 0;
    }

    .circle-features__dots {
        align-self: flex-start;
        margin-left: 21vw;
        gap: 3.2vw;
    }

    .circle-features__dot--1 { --dot-size: 3.9vw; }
    .circle-features__dot--2 { --dot-size: 4.7vw; }
    .circle-features__dot--3 { --dot-size: 4.7vw; }
    .circle-features__dot--4 { --dot-size: 9vw; }
    .circle-features__dot--5 { --dot-size: 2.6vw; }
    .circle-features__dot--6 { --dot-size: 4.3vw; }
    .circle-features__dot--7 { --dot-size: 4.3vw; }
    .circle-features__dot--8 { --dot-size: 2.2vw; }
    .circle-features__dot--9 { --dot-size: 17vw; margin: -6vw -12vw -6vw 0; }
}

/* Tablet: mobile Komposition, auf 70 % verkleinert */
@media (min-width: 600px) and (max-width: 900px) {
    .circle-features__content {
        max-width: 36em;
    }

    .circle-features__item {
        --_k: 0.7;
    }
}