.article-teaser,
.article-teaser__article {
    --article-teaser-surface: var(--sav-color-hellgrau);
    --article-teaser-surface-active: var(--sav-color-hellblau);
    --article-teaser-tag: var(--sav-color-hellblau);
    --article-teaser-tag-active: var(--sav-color-hellgrau);

    --article-teaser-padding-block: 2rem;
    --article-teaser-padding-inline: 2rem;
    --article-teaser-gap-title: 2rem;
    --article-teaser-gap-image: 1.5rem;
    --article-teaser-gap-lead: 1.5rem;
    --article-teaser-gap-lead-image: 1.5rem;
    --article-teaser-gap-meta: 1.5rem;
    --article-teaser-gap-section: 1.5rem;

    @media (min-width: 64rem) {
        --article-teaser-padding-block: 3.125rem;
        --article-teaser-padding-inline: 2.8125rem;
        --article-teaser-gap-title: 2.5rem;
        --article-teaser-gap-lead: 2.25rem;
        --article-teaser-gap-lead-image: 2rem;
        --article-teaser-gap-meta: 3.75rem;
        --article-teaser-gap-section: 3rem;
    }
}

/* The Themenbereich's light tone marks the pill, the strong one beside it fills the card. */
.article-teaser__article[data-color] {
    --article-teaser-surface-active: var(--sav-topic-strong);
    --article-teaser-tag: var(--sav-topic-light);
    --article-teaser-tag-active: var(--sav-topic-light);
}

/* Hellblau the design keeps light on the filled card as well, so there the pill steps aside. */
.article-teaser__article[data-color='hellblau'] {
    --article-teaser-surface-active: var(--sav-topic-light);
    --article-teaser-tag-active: var(--sav-color-hellgrau);
}

.article-teaser {
    display: flex;
    flex-direction: column;

    .page-layout > * + & {
        margin-block-start: var(--sav-section-gap);
    }

    .page-layout > &:has(+ *) {
        margin-block-end: var(--sav-section-gap);
    }

    /* 96px → 192px before the title of the next section. */
    &:has(+ .heading) {
        margin-block-end: clamp(6rem, 6rem + (100vw - 24.375rem) * 0.071749, 12rem);
    }
}

.article-teaser__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sav-grid-gutter);
}

.article-teaser__title {
    margin: 0;
    color: var(--sav-color-dunkelblau);
}

.article-teaser__controls {
    display: flex;
    flex: none;
    gap: 1.625rem;
}

.article-teaser__items {
    margin: 0;
    list-style: none;
}

.article-teaser__header + .article-teaser__items {
    margin-block-start: var(--article-teaser-gap-section);
}

.article-teaser--tile {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: var(--sav-grid-gutter);

    /* Under the cards and centred across both columns, the way the teaser's own button already
       stands there — and beside the heading only from the wide breakpoint on, where the row has
       the room for it. */
    & .article-teaser__more {
        grid-column: 1 / -1;
        justify-self: center;
    }

    @media (min-width: 64rem) {
        & .article-teaser__more {
            grid-row: 1;
            grid-column: 2;
            align-self: center;
            margin-block-start: 0;
        }
    }

    & .article-teaser__items {
        grid-column: 1 / -1;
    }
}

.article-teaser--tile .article-teaser__items {
    grid-template-columns: 1fr;
    gap: var(--sav-grid-gutter);
    padding: 0;

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

.article-teaser--slider {
    /* What is left of the screen beside the content band, on one side. */
    --article-teaser-edge: max(0px, calc((100% - var(--sav-band-width)) / 2));

    --slider-slide: calc(var(--sav-band-width) - 2.5rem);
    --slider-gap: var(--sav-grid-gutter);
    --slider-snap: start;
    --slider-edge: var(--article-teaser-edge);
    --slider-step-size: 2.5625rem;
    --slider-step-spent: 0.2;

    /* Below the wide breakpoint the cards stand below one another rather than in a row to swipe
       through — a change of direction, which is what earns the query. The arrows take themselves
       out, there being nothing left to scroll. */
    @media (width < 64rem) {
        --slider-slide: auto;

        & .slider__viewport {
            overflow-x: visible;
            scroll-snap-type: none;
        }

        & .slider__track {
            flex-direction: column;
        }

        /* 60px rather than the 24 the header keeps above the cards: standing under a column of
           cards the link needs the distance to read as the end of the list and not as the foot of
           the last card. */
        & .article-teaser__more {
            margin-block-start: 3.75rem;
        }
    }

    /* 660px of the 1350px content width, two cards and a gutter. */
    @media (min-width: 64rem) {
        --slider-slide: calc((var(--sav-band-width) - var(--sav-grid-gutter)) / 2);
    }

    & .article-teaser__header {
        inline-size: min(100%, var(--sav-band-width));
        margin-inline: auto;
    }

    /* On both sides, or the room the row keeps beside the band takes a centred link off centre. */
    & .article-teaser__more {
        margin-inline: var(--article-teaser-edge);
    }
}

.article-teaser__article {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--article-teaser-padding-block) var(--article-teaser-padding-inline);
    border-radius: var(--sav-radius);
    background-color: var(--article-teaser-surface);
    color: var(--sav-color-dunkelblau);

    /* The same card stands in the packed list of an overview, which leaves each at the height of
       its own content. */
    .article-teaser & {
        block-size: 100%;
    }

    @media (prefers-reduced-motion: no-preference) {
        transition: background-color 0.2s;
    }

    &:hover,
    &:has(.article-teaser__link:focus-visible) {
        background-color: var(--article-teaser-surface-active);

        & .article-teaser__tag--topic {
            background-color: var(--article-teaser-tag-active);
        }
    }

    /* The ring belongs on the card, since the link covers it whole. */
    &:has(.article-teaser__link:focus-visible) {
        outline: 2px solid var(--sav-color-dunkelblau);
        outline-offset: 2px;
    }
}

.article-teaser__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0;
}

.article-teaser__tag {
    display: flex;
    align-items: center;
    min-block-size: 1.875rem;
    padding-inline: 0.625rem;
    background-color: var(--sav-color-weiss);

    @media (prefers-reduced-motion: no-preference) {
        transition: background-color 0.2s;
    }
}

.article-teaser__tag--topic {
    background-color: var(--article-teaser-tag);
}

.article-teaser__article-title {
    margin: 0;
    color: var(--sav-color-dunkelblau);

    :where(.article-teaser__tags) + & {
        margin-block-start: var(--article-teaser-gap-title);
    }
}

.article-teaser__link {
    color: inherit;
    text-decoration: none;

    /* Stretched over the card, so the whole card leads to the article with one link in the tab
       order. Its text stops being selectable, which is the price. */
    &::after {
        position: absolute;
        inset: 0;
        content: '';
    }

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

/* `picture` is what the responsive partial writes around the image, so the room above it and the
   gap below belong to that element. */
.article-teaser__article > picture {
    display: block;
    margin-block-start: var(--article-teaser-gap-image);
}

.article-teaser__image {
    inline-size: 100%;
    border-radius: var(--sav-radius);
    aspect-ratio: 570 / 296;
    object-fit: cover;
}

.article-teaser__lead {
    margin: var(--article-teaser-gap-lead) 0 0;

    :where(.article-teaser__article > picture) + & {
        margin-block-start: var(--article-teaser-gap-lead-image);
    }
}

.article-teaser__meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-block-start: var(--article-teaser-gap-meta);

    /* The padding above is the smallest gap, `auto` puts the line at the lower edge. */
    .article-teaser & {
        margin-block-start: auto;
    }

    @media (min-width: 64rem) {
        flex-direction: row;
        gap: var(--sav-grid-gutter);

        /* At the end of the line whether or not an author stands at its start, which
           `space-between` would leave the date of an article naming nobody at. */
        & .article-teaser__date {
            margin-inline-start: auto;
        }
    }
}

.article-teaser__author,
.article-teaser__date {
    margin: 0;
}

.article-teaser__article--release {
    --article-teaser-gap-title: 2rem;
    --article-teaser-gap-lead: 2rem;
    --article-teaser-gap-meta: 2rem;

    @media (min-width: 64rem) {
        --article-teaser-padding-block: 2.8125rem;
    }
}

/* Hellblau whatever the Themenbereich, and written with the attribute the colours above are named
   by, or theirs would outweigh it. */
.article-teaser__article--release[data-color] {
    --article-teaser-surface-active: var(--sav-color-hellblau);
    --article-teaser-tag-active: var(--sav-color-hellgrau);
}

.article-teaser__more {
    /* Centred under the cards on a narrow screen, at the right edge of the band from the wide
       breakpoint on — a change of side, which is what earns the query. */
    align-self: center;
    margin-block-start: var(--article-teaser-gap-section);

    @media (min-width: 64rem) {
        align-self: flex-end;
    }
}