.accordion {
    /* 24px → 32px */
    --accordion-gap: clamp(1.5rem, 1.5rem + (100vw - 24.375rem) * 0.00598, 2rem);

    /* 1119px, the width the design draws the list at, centred in the wide band it stands in. */
    inline-size: min(100%, 69.9375rem);
    /* 48px → 96px, the air the design leaves above the first question; the same below, where
       what follows brings its own and the larger of the two wins by collapsing. */
    margin-block: clamp(3rem, 3rem + (100vw - 24.375rem) * 0.03587, 6rem);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--accordion-gap);
}

.accordion__entries {
    display: flex;
    flex-direction: column;
    gap: var(--accordion-gap);
    margin: 0;
}

.accordion__note {
    /* 430px, where the design breaks the note so the link stands on its own line. */
    max-inline-size: 26.875rem;
}

.accordion__note-link {
    /* Takes the note's colour, which the document otherwise sets for every link. */
    color: inherit;
    text-decoration-line: underline;
    text-decoration-thickness: from-font;
    text-decoration-skip-ink: none;
    text-underline-position: from-font;

    &:hover {
        color: var(--sav-color-dunkelblau-hover);
    }

    &:focus-visible {
        outline: 2px solid var(--sav-color-dunkelblau);
        outline-offset: 2px;
    }
}