/* Every clamp below reads `clamp(<390px value>, <390px value> + (100vw - 24.375rem) * <rise>,
   <1728px value>)`: 24.375rem is the 390px frame, so the floor holds exactly there, and the rise is
   the difference over the 1338px to the 1728px frame. */

.hero {
    /* 78px → 181px below the logo, less the room the header keeps under it. */
    padding-block-start: clamp(0.5rem, 0.5rem + (100vw - 24.375rem) * 0.09268, 8.25rem);
    /* 60px → 92px; a section that stands further off collapses its own margin into this one. */
    margin-block-end: clamp(3.75rem, 3.75rem + (100vw - 24.375rem) * 0.02392, 5.75rem);

    /* 60px flat where an overview follows, whose bar stands closer than a section. */
    &:has(+ .members, + .committees) {
        margin-block-end: 3.75rem;
    }

    /* 92px → 124px before the contact addresses, whose picture opens the row. */
    &:has(+ .locations) {
        margin-block-end: clamp(5.75rem, 5.75rem + (100vw - 24.375rem) * 0.023917, 7.75rem);
    }

    /* 60px → 192px where the ressort tiles open the page below the search. The second selector
       is the editor: there the tiles arrive inside the wrapper a Vorlage brings along. */
    &:has(+ .topic-teaser),
    &:has(+ .wp-block-block > .topic-teaser) {
        margin-block-end: clamp(3.75rem, 3.75rem + (100vw - 24.375rem) * 0.098655, 12rem);
    }
}

/* The hero gives the page margin back to reach the edge, so the band takes it on top of the
   content width again — 1350px, as in the header. */
.hero__body {
    max-width: calc(var(--sav-content-width) + 2 * var(--sav-page-margin));
    margin-inline: auto;
    padding-inline: var(--sav-page-margin);
}

.hero__text {
    max-width: var(--sav-inner-width);
}

.hero__text--centred {
    margin-inline: auto;
}

.hero__overline {
    color: var(--sav-color-blau);
}

.hero__title {
    font-size: var(--sav-text-headline-l-size);
    line-height: var(--sav-text-headline-l-line);
    letter-spacing: var(--sav-text-headline-l-tracking);
    text-wrap: balance;

    /* 8px → 24px, and none without an overline above. */
    &:not(:first-child) {
        margin-block-start: clamp(0.5rem, 0.5rem + (100vw - 24.375rem) * 0.01196, 1.5rem);
    }
}

/* 28/36 → 65/78: the design draws the start page at the largest step of the scale and, on the
   phone, one step below its floor — so this one pair interpolates instead of following the step. */
.hero__title--search {
    font-size: clamp(1.75rem, 1.75rem + (100vw - 24.375rem) * 0.02766, 4.0625rem);
    line-height: clamp(2.25rem, 2.25rem + (100vw - 24.375rem) * 0.03139, 4.875rem);
    letter-spacing: var(--sav-text-headline-xl-tracking);
}

/* 24px → 32px. */
.hero__lead:not(:first-child) {
    margin-block-start: clamp(1.5rem, 1.5rem + (100vw - 24.375rem) * 0.00598, 2rem);
}

.hero__byline:not(:first-child) {
    margin-block-start: 2rem;
}

.hero__row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    /* 32px → 48px. */
    margin-block-start: clamp(2rem, 2rem + (100vw - 24.375rem) * 0.01196, 3rem);

    /* Links left, meta right, both on the line of the last row of links; stacked below, where the
       meta would leave the links a column too narrow to read. */
    @media (min-width: 64rem) {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
}

.hero__anchors {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.hero__anchor {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-block: 0.75rem;
    /* 24px → 35px. */
    padding-inline: clamp(1.5rem, 1.5rem + (100vw - 24.375rem) * 0.00823, 2.1875rem);
    border-radius: 3.125rem;
    background-color: var(--sav-color-hellgrau);
    color: var(--sav-color-dunkelblau);
    font-size: var(--sav-text-s-size);
    line-height: var(--sav-text-s-line);
    font-weight: var(--sav-font-weight-regular);
    /* The step of the scale carries tracking, the pill of the design does not. */
    letter-spacing: normal;
    text-decoration: none;

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

    &:hover,
    &:active {
        background-color: var(--sav-color-blau);
        color: var(--sav-color-weiss);
    }

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

    & .icon {
        inline-size: 1.25rem;
        block-size: 1.25rem;
        rotate: 90deg;
    }
}

.hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
}

/* The two tags above an article's title. 16px apart, and 26px above the title. */
.hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-block-end: 1.625rem;
}

.hero__tag {
    display: inline-flex;
    align-items: center;
    min-block-size: 1.875rem;
    padding-inline: 0.625rem;
    background-color: var(--sav-color-hellgrau);
    color: var(--sav-color-dunkelblau);
}

/* The Themenbereich is the tag the design tints, the format stays neutral beside it. */
.hero__tag[data-color] {
    background-color: var(--sav-topic-light);
}

.hero__topic {
    display: inline-flex;
    align-items: center;
    padding: 0.1875rem 1.25rem;
    border-radius: 0.625rem;
    background-color: var(--sav-topic-light);
    font-size: 0.875rem;
    line-height: 1.5rem;
    font-weight: var(--sav-font-weight-regular);
    /* The 0.5px the design draws, at the 14px it draws them for. */
    letter-spacing: 0.0357em;
}

.hero__search {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    /* 24px → 48px. */
    margin-block-start: clamp(1.5rem, 1.5rem + (100vw - 24.375rem) * 0.01794, 3rem);

    @media (min-width: 64rem) {
        flex-direction: row;
        align-items: center;
        gap: 2.5rem;
    }
}

/* The input carries no box of its own, so the pill takes its focus ring. Beside the page links it
   takes the 785px of the design and gives way before they do. */
.hero__search-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 1 auto;
    width: min(100%, 49.0625rem);
    min-width: 0;
    /* 15px → 25.5px, measured from the magnifier: it is the taller of the two children. */
    padding-block: clamp(0.9375rem, 0.9375rem + (100vw - 24.375rem) * 0.00785, 1.59375rem);
    /* 30px → 45px before the input, 25px → 38px after the magnifier. */
    padding-inline: clamp(1.875rem, 1.875rem + (100vw - 24.375rem) * 0.01122, 2.8125rem)
        clamp(1.5625rem, 1.5625rem + (100vw - 24.375rem) * 0.00972, 2.375rem);
    border-radius: 6.25rem;
    background-color: var(--sav-color-hellgrau);
}

.hero__search-field {
    flex: 1 1 auto;
    min-width: 0;
    /* The user agent pads a field of its own accord, which would make the pill taller. */
    padding: 0;
    border: 0;
    background-color: transparent;
    font-size: var(--sav-text-l-size);
    line-height: var(--sav-text-l-line);
    font-weight: var(--sav-font-weight-light);
    letter-spacing: normal;

    /* The pill shows the focus, so a second ring inside it would only double it. */
    &:focus-visible {
        outline: none;
    }

    /* Safari draws its own decorations on a search field. */
    &::-webkit-search-decoration,
    &::-webkit-search-cancel-button {
        appearance: none;
    }

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

.hero__search-submit {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    /* 30px → 47px, the glyph 22px → 34px inside it. */
    inline-size: clamp(1.875rem, 1.875rem + (100vw - 24.375rem) * 0.01271, 2.9375rem);
    block-size: clamp(1.875rem, 1.875rem + (100vw - 24.375rem) * 0.01271, 2.9375rem);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    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 {
        inline-size: clamp(1.375rem, 1.375rem + (100vw - 24.375rem) * 0.00897, 2.125rem);
        block-size: clamp(1.375rem, 1.375rem + (100vw - 24.375rem) * 0.00897, 2.125rem);
    }
}

.hero__page-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0;
    padding: 0;

    /* An inline-level pill takes the descender of its text line along and makes every row taller
       than the pill. */
    & > li {
        display: flex;
    }

    /* 13px between the rows, 10px between two pills. */
    @media (min-width: 64rem) {
        flex: 1 1 0;
        gap: 0.8125rem 0.625rem;
    }
}

/* The border counts towards the drawn 30px and towards the 15px between edge and word. */
.hero__page-link {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.875rem;
    border: 1px solid var(--sav-color-dunkelblau);
    border-radius: 2.5rem;
    color: var(--sav-color-dunkelblau);
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: var(--sav-font-weight-regular);
    letter-spacing: normal;
    text-decoration: none;

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

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

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

.hero__figure {
    position: relative;
    /* 16px → 48px, the distance the article draws between the date and the picture. */
    margin-block-start: clamp(1rem, 1rem + (100vw - 24.375rem) * 0.02392, 3rem);
}

/* 48px → 72px, the distance the dossier draws — the one page type showing links and picture. */
.hero__row + .hero__figure,
.hero__figure--full {
    margin-block-start: clamp(3rem, 3rem + (100vw - 24.375rem) * 0.01794, 4.5rem);
}

/* Cropped rather than shown whole: a portrait photograph run across the screen would push the page
   out of view. */
.hero__media {
    width: 100%;
    aspect-ratio: 350 / 306;
    object-fit: cover;

    @media (min-width: 64rem) {
        aspect-ratio: 1350 / 611;
    }
}

.hero__figure--full .hero__media {
    aspect-ratio: 390 / 354;

    @media (min-width: 64rem) {
        aspect-ratio: 1728 / 783;
    }
}

.hero__media--framed {
    border-radius: var(--sav-radius);
}

/* On the phone the box hangs 77px below the picture, which the figure keeps free. */
.hero__figure--full:has(.hero__note) {
    padding-block-end: 4.8125rem;

    @media (min-width: 64rem) {
        padding-block-end: 0;
    }
}

.hero__note {
    position: absolute;
    inset-block-end: 0;
    /* The left edge of the content band, wherever the band happens to start. */
    inset-inline-start: max(var(--sav-page-margin), calc(50% - var(--sav-content-width) / 2));
    width: min(100% - 2 * var(--sav-page-margin), 26.25rem);
    color: var(--sav-color-weiss);

    /* 87px above the lower edge of the picture. */
    @media (min-width: 64rem) {
        inset-block-end: 5.4375rem;
    }
}

/* A tab on top of the box, wide as its own words; both carry the same tone, so it needs no overlap. */
.hero__note-title {
    display: inline-block;
    padding: 0.75rem 1.6875rem 0;
    background-color: var(--sav-color-blau);
    font-size: 1rem;
    line-height: 2rem;
    letter-spacing: 0.125em;
    text-transform: uppercase;
}

.hero__note-body {
    padding: 1.375rem 1.6875rem;
    background-color: var(--sav-color-blau);
}