.news-banner {
    /* 18px → 26px */
    --news-banner-inset: clamp(1.125rem, 1.125rem + (100vw - 24.375rem) * 0.00598, 1.625rem);

    /* What the narrow band leaves between the end of the notice and its next pass. */
    --news-banner-gap: 3rem;

    /* Sticky and not fixed: over the page the band stands at the lower edge, and at the end of
       the page it comes to rest in its own place below the footer, where it covers nothing. */
    position: sticky;
    z-index: 1;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.125rem var(--news-banner-inset);
    background-color: var(--sav-color-dunkelblau);
    color: var(--sav-color-weiss);
}

.news-banner__message {
    /* May fall below the width of its own text, which is what lets the narrow band cut it. */
    flex: 1;
    min-inline-size: 0;
}

/* 16px → 18px on a line the band holds at 24px, which is what keeps it as high as it is drawn
   at both widths. The scale grows the line along with the size and would raise the band. */
.news-banner__run {
    font-size: clamp(1rem, 1rem + (100vw - 24.375rem) * 0.001495, 1.125rem);
    line-height: 1.5rem;
    font-weight: var(--sav-font-weight-light);
    letter-spacing: normal;
}

.news-banner__salutation {
    font-weight: var(--sav-font-weight-regular);
}

/* The text is written as a block and arrives as a paragraph, where the band reads it as the
   rest of the sentence the salutation opens. */
.news-banner__message .wp-block-paragraph {
    display: inline;
}

/* The paragraph draws its link for a light surface, which swallows both its hover tone and its
   ring. */
.news-banner__message .wp-block-paragraph a {
    &:hover {
        color: inherit;
    }

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

/* The second run belongs to the loop below and repeats what the first one says. */
.news-banner__run + .news-banner__run {
    display: none;
}

.news-banner__dismissal {
    display: flex;
}

.news-banner__close {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--sav-radius);
    background: none;
    color: inherit;
    font-size: var(--sav-text-xs-size);
    /* The band's line, not the step's, so the word does not raise it. */
    line-height: 1.5rem;
    font-weight: var(--sav-font-weight-light);
    letter-spacing: normal;
    cursor: pointer;

    > svg {
        inline-size: 1.5rem;
        block-size: 1.5rem;

        @media (width >= 64rem) {
            display: none;
        }
    }

    /* The tone grows outward rather than padding the button, so the sign keeps the inset the
       narrow band draws it at. */
    &:hover {
        background-color: var(--sav-color-dunkelblau-hover);
        box-shadow: 0 0 0 0.5rem var(--sav-color-dunkelblau-hover);
    }

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

.news-banner__close-label {
    display: none;

    @media (width >= 64rem) {
        display: inline;
    }
}

/* The narrow band holds one line and the text outgrows it, so the text passes through: two runs
   behind one another, moved by exactly one of them, which is where the loop closes without a
   seam. Asked for less motion, the band sets the text over as many lines as it needs instead. */
@media (width < 64rem) and (prefers-reduced-motion: no-preference) {
    /* The notice leaves the band at its own edge rather than at the inset, so the window reaches
       into the padding on the way out; and it comes in out of the colour rather than from behind
       the sign, over the last 32px before it. */
    .news-banner__message {
        margin-inline-start: calc(-1 * var(--news-banner-inset));
        overflow: hidden;
        mask-image: linear-gradient(to right, black calc(100% - 2rem), transparent);
    }

    .news-banner__track {
        display: flex;
        gap: var(--news-banner-gap);
        inline-size: max-content;
        animation: news-banner-pass 20s linear infinite;
    }

    .news-banner__run {
        /* Standing still the notice stands at the inset the band draws it at. */
        padding-inline-start: var(--news-banner-inset);
        white-space: nowrap;

        & + & {
            display: block;
        }
    }

    /* Standing still is what makes a link in the text reachable. */
    .news-banner:is(:hover, :focus-within) .news-banner__track {
        animation-play-state: paused;
    }

    /* A notice short enough to stand in the band is read at a glance and stays put; the script
       is what measures that, and without it the band lets every notice pass through. */
    .news-banner--fits .news-banner__track {
        animation: none;
    }

    /* Nothing comes in, so nothing fades — a notice ending near the edge would only lose its
       last word to it. */
    .news-banner--fits .news-banner__message {
        mask-image: none;
    }

    .news-banner--fits .news-banner__run + .news-banner__run {
        display: none;
    }
}

/* One run further along: half the track is one run plus half the distance between the two, so the
   other half of that distance is what closes the seam. */
@keyframes news-banner-pass {
    to {
        translate: calc(-50% - var(--news-banner-gap) / 2) 0;
    }
}