.argument {
    /* 25px → 45px */
    --argument-padding-inline: clamp(1.5625rem, 1.5625rem + (100vw - 24.375rem) * 0.01495, 2.8125rem);

    display: flex;
    flex-direction: column;
    /* Or a compound wider than the text column widens the box past the width the row rests on. */
    min-inline-size: 0;

    padding: 2.8125rem var(--argument-padding-inline);
    border-radius: var(--sav-radius);
    background-color: var(--sav-color-dunkelblau);
    color: var(--sav-color-weiss);
}

/* `display` beats the `hidden` attribute, and the box sets one. */
.argument[hidden] {
    display: none;
}

.argument__overline {
    margin: 0;
}

.argument__title {
    margin: 0;
    /* The base stylesheet colours every heading, which outweighs the tone the box passes down. */
    color: inherit;
    /* A heading is the one running text the base stylesheet leaves unbroken, and at this size a
       German compound outgrows the box. */
    hyphens: auto;
    overflow-wrap: break-word;

    :where(.argument__overline) + & {
        margin-block-start: 1rem;
    }
}

.argument__text {
    /* The distance is the minimum; the text itself sits at the bottom edge of the box. */
    margin-block-start: auto;
    padding-block-start: 1.5rem;
}

/* The paragraph draws its link for a light surface, which swallows both its hover tone and its ring.
   Written with the paragraph's own class, or source order would decide between two equal weights. */
.argument__text .wp-block-paragraph a {
    &:hover {
        color: inherit;
    }

    &:focus-visible {
        outline-color: var(--sav-color-weiss);
    }
}