.contents {
    /* 24px → 64px below the filter bar. */
    --contents-gap-bar: clamp(1.5rem, 1.5rem + (100vw - 24.375rem) * 0.0299, 4rem);

    /* 48px → 60px below the highlighted post. */
    --contents-gap-lead: clamp(3rem, 3rem + (100vw - 24.375rem) * 0.00897, 3.75rem);

    /* 60px → 100px above «Mehr anzeigen». */
    --contents-gap-list: clamp(3.75rem, 3.75rem + (100vw - 24.375rem) * 0.0299, 6.25rem);

    display: flex;
    flex-direction: column;
    width: min(100% - 2 * var(--sav-page-margin), var(--sav-content-width));
    margin-inline: auto;

    /* On a page the layout already keeps the page margin and would hold the list to the reading
       column, so the list takes the full band there. */
    .page-layout > & {
        max-width: none;
        width: min(100%, var(--sav-content-width));
    }

    /* Without a filter bar the list opens the component, and the block above it sets the
       distance. */
    &:not(:has(.contents__bar)) {
        --contents-gap-bar: 0px;
    }
}

.contents__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
}

.contents__search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 30rem;
    /* 890px, and the pills take the rest of the row. */
    max-inline-size: 55.625rem;
    min-inline-size: 0;
    /* 60px → 64px. */
    min-block-size: clamp(3.75rem, 3.75rem + (100vw - 24.375rem) * 0.00299, 4rem);
    /* 24px → 32px inline. */
    padding-inline: clamp(1.5rem, 1.5rem + (100vw - 24.375rem) * 0.00598, 2rem);
    border-radius: 6.25rem;
    background-color: var(--sav-color-hellgrau);
}

.contents__search-field {
    flex: 1 1 auto;
    min-inline-size: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
    font-size: var(--sav-text-s-size);
    line-height: var(--sav-text-s-line);
    font-weight: var(--sav-font-weight-regular);
    letter-spacing: normal;

    /* The pill shows the focus, so the field itself carries none. */
    &:focus-visible {
        outline: none;
    }

    &::-webkit-search-decoration,
    &::-webkit-search-cancel-button {
        appearance: none;
    }

    &::placeholder {
        color: var(--sav-color-dunkelblau);
        opacity: 1;
    }
}

.contents__search-submit {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--sav-color-dunkelblau);
    cursor: pointer;

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

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

    & svg {
        /* 24px → 26px. */
        inline-size: clamp(1.5rem, 1.5rem + (100vw - 24.375rem) * 0.0015, 1.625rem);
        block-size: clamp(1.5rem, 1.5rem + (100vw - 24.375rem) * 0.0015, 1.625rem);
    }
}

.contents__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;

    @media (min-width: 64rem) {
        margin-inline-start: auto;
    }
}

/* The way to send the bar without a script; the controller hides it. */
.contents__apply {
    display: flex;
    margin: 0;

    &[hidden] {
        display: none;
    }
}

.contents__lead {
    margin-block-start: var(--contents-gap-bar);

    /* Empty on the archive, on a narrowed list and on a later page. It stays in the document,
       since a stream replaces it by name, and only steps out of the column. `:has()` rather
       than `:empty`, which the whitespace around the condition inside defeats. */
    &:not(:has(*)) {
        display: none;

        & + :is(.contents__list, .contents__empty) {
            margin-block-start: var(--contents-gap-bar);
        }
    }
}

/* One link stretched over the whole panel, so the tab key still finds only the title. */
.contents__featured {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
    border-radius: var(--sav-radius);
    background-color: var(--sav-topic-strong);
    color: var(--sav-color-dunkelblau);

    /* 694fr and 655fr, the two bands the design draws — without a picture, one column. */
    @media (min-width: 64rem) {
        &:has(.contents__featured-image) {
            grid-template-columns: 694fr 655fr;
            min-block-size: 32.8125rem;
        }
    }

    /* The ring belongs on the panel, since the panel is what the link covers. */
    &:has(.contents__featured-link:focus-visible) {
        outline: 2px solid var(--sav-color-dunkelblau);
        outline-offset: 2px;
    }

    /* Blau is the one strong tone of the palette that carries no dark text. */
    &[data-color='hellblau'] {
        color: var(--sav-color-weiss);
    }
}

.contents__featured-body {
    display: flex;
    flex-direction: column;
    /* 32px → 50px. */
    padding: clamp(2rem, 2rem + (100vw - 24.375rem) * 0.01345, 3.125rem);
}

.contents__featured-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin: 0;
}

.contents__featured-tag {
    display: flex;
    align-items: center;
    min-block-size: 1.875rem;
    padding-inline: 0.625rem;
    background-color: var(--sav-color-weiss);
    /* Its own, not the panel's, since the pill carries a bright tone of its own. */
    color: var(--sav-color-dunkelblau);
}

.contents__featured-tag--topic {
    background-color: var(--sav-topic-light);
}

.contents__featured-title {
    /* 32px → 40px above the title. */
    margin: clamp(2rem, 2rem + (100vw - 24.375rem) * 0.00598, 2.5rem) 0 0;
}

.contents__featured-link {
    color: inherit;
    text-decoration: none;

    &::after {
        position: absolute;
        inset: 0;
        content: '';
    }

    &:focus-visible {
        outline: none;
    }
}

.contents__featured-lead {
    /* 24px → 36px below the title. */
    margin: clamp(1.5rem, 1.5rem + (100vw - 24.375rem) * 0.00897, 2.25rem) 0 0;
}

.contents__featured-meta {
    display: flex;
    flex-wrap: wrap;
    /* The foot line rests on the panel's bottom edge, whatever the pill beside it is tall. */
    align-items: flex-end;
    gap: 0.5rem 1.5rem;
    margin-block-start: 2rem;

    @media (min-width: 64rem) {
        margin-block-start: auto;
        /* 30px, the space the design keeps above the foot line. */
        padding-block-start: 1.875rem;
    }
}

.contents__featured-date {
    @media (min-width: 64rem) {
        margin-inline-start: auto;
    }
}

.contents__featured-image {
    inline-size: 100%;
    aspect-ratio: 5 / 4;
    object-fit: cover;

    @media (min-width: 64rem) {
        block-size: 100%;
        aspect-ratio: auto;
    }
}

.contents__list {
    grid-template-columns: 1fr;
    gap: var(--sav-grid-gutter);
    margin: var(--contents-gap-lead) 0 0;
    padding: 0;
    list-style: none;

    @media (min-width: 64rem) {
        grid-template-columns: repeat(2, 1fr);
    }
}

.contents__empty {
    margin: var(--contents-gap-lead) 0 0;
}

/* Only where a control follows, the button on to the archive included: on a single page without
   one the wrapper renders empty, since a stream needs something to replace, and the distance
   would trail under the last card. */
.contents > .pagination:has(.pagination__nav, .pagination__more) {
    margin-block-start: var(--contents-gap-list);
}