.heading {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-block-end: 1.5rem;
    color: var(--sav-color-dunkelblau);

    /* Only where something precedes the heading. */
    * + & {
        margin-block-start: 3.75rem;
    }

    &:has(+ .focus-teaser, + .engagement) {
        --heading-band: var(--sav-content-width);
    }

    /* The edge the list below starts on. */
    &:has(+ .accordion, + .download-list) {
        --heading-band: var(--sav-inner-width);
    }

    /* The second selector is the editor, whose own band rule ties on specificity. */
    &:has(+ .focus-teaser, + .engagement, + .accordion, + .download-list),
    .wp-block-post-content > &:has(+ .focus-teaser, + .engagement, + .accordion, + .download-list) {
        max-width: min(100%, var(--heading-band));
    }

    /* 32px → 48px, the distance the section title keeps to the list it introduces. */
    &:has(+ .download-list, + .contents) {
        margin-block-end: clamp(2rem, 2rem + (100vw - 24.375rem) * 0.011958, 3rem);
    }

    /* 24px → 48px, since a Fokus-Teaser keeps no distance of its own. */
    &:has(+ .focus-teaser) {
        margin-block-end: clamp(1.5rem, 1.5rem + (100vw - 24.375rem) * 0.017938, 3rem);
    }
}

.heading__overline {
    font-weight: var(--sav-font-weight-regular);
    font-size: var(--sav-text-m-size);
    line-height: var(--sav-text-m-line);
    letter-spacing: var(--sav-text-m-tracking);
}

.heading__text {
    font-weight: var(--sav-font-weight-regular);
    font-size: var(--sav-text-headline-s-size);
    line-height: var(--sav-text-headline-s-line);
    letter-spacing: var(--sav-text-headline-s-tracking);
    /* Against the blue the document gives every heading. */
    color: var(--sav-color-dunkelblau);
    text-wrap: balance;

    /* Bigger where the title introduces a section instead of running content, and on a page
       at every second level, where a title always opens one. */
    .heading:has(+ .focus-teaser, + .engagement, + .accordion, + .download-list) &,
    .page-layout > .heading:has(> h2) & {
        font-size: var(--sav-text-headline-m-size);
        line-height: var(--sav-text-headline-m-line);
        letter-spacing: var(--sav-text-headline-m-tracking);
    }
}

/* 60px → 192px between the page head and the first section title of a page, and 60px → 148px
   where that section brings a list of its own. Both sit on the title rather than on the head,
   since `:has()` may not be nested inside `:has()`; the narrower case comes second, where it
   wins the tie. */
.page-layout > .hero + .heading {
    margin-block-start: clamp(3.75rem, 3.75rem + (100vw - 24.375rem) * 0.098655, 12rem);
}

.hero + .heading:has(+ .download-list) {
    margin-block-start: clamp(3.75rem, 3.75rem + (100vw - 24.375rem) * 0.06577, 9.25rem);
}

/* Nine of the twelve columns for the title of a section — which on a page is every second
   level heading, whatever stands under it. A third level one stays at the step and the
   measure of the text it belongs to. */
.page-layout > .heading:has(> h2) {
    max-width: min(100%, 62.75rem);
}

/* 16px to the running text below instead of the 24px a title keeps in the reading column. */
.page-layout > .heading:has(+ .wp-block-paragraph, + .wp-block-list) {
    margin-block-end: 1rem;
}

/* A title that introduces a list of its own keeps that list's lane rather than the nine
   columns above, and is centred with it. */
.page-layout > .heading:has(+ .accordion, + .download-list) {
    max-width: min(100%, var(--heading-band));
    margin-inline: auto;
}