/* A value the design gives twice interpolates with the viewport:
   `clamp(<390px value>, <390px value> + (100vw - 24.375rem) * <rise per px>, <1728px value>)`
   — 24.375rem is the 390px of the Figma mobile frame, so the added term is zero there and the
   floor holds exactly, and the factor is the difference between the two frames over the
   1338px between them. */

.newsletter {
    display: grid;

    /* The band the page keeps for its content, whatever width the block itself is given. */
    grid-template-columns: minmax(0, min(100% - 2 * var(--sav-page-margin), var(--sav-content-width)));
    justify-content: center;
    row-gap: clamp(2rem, 2rem + (100vw - 24.375rem) * 0.020927, 3.75rem); /* 32px → 60px */

    /* The box the design draws is 606px tall around 408px of content, so the block brings its
       own room along wherever it stands. 48px → 98px. */
    padding-block: clamp(3rem, 3rem + (100vw - 24.375rem) * 0.037369, 6.125rem);
    color: var(--sav-color-dunkelblau);
}

/* A tone makes the edge of the box visible, so the band stands off what comes before and
   after it: 92px → 192px above, 96px → 192px below, and whatever brings more of its own
   keeps it by collapsing. */
.newsletter.has-background {
    margin-block: clamp(5.75rem, 5.75rem + (100vw - 24.375rem) * 0.074738, 12rem)
        clamp(6rem, 6rem + (100vw - 24.375rem) * 0.071749, 12rem);
}

/* The footer holds the page margin free itself and lays its bands out on the content width,
   so the block measures against what it is given rather than against the screen. */
.newsletter--footer {
    grid-template-columns: minmax(0, min(100%, var(--sav-content-width)));
    margin-block-end: var(--footer-lead);

    /* Inside the footer the block opens the band itself — 48px, which the design draws as 51px
       on the wide frame — and keeps more room below than a band on a page does: 56px → 146px,
       with the footer's own distance after it. */
    padding-block: 3rem clamp(3.5rem, 3.5rem + (100vw - 24.375rem) * 0.067265, 9.125rem);
}

.newsletter__body {
    max-width: min(100%, var(--sav-narrow-width));
}

.newsletter__title {
    color: var(--sav-color-dunkelblau);
}

/* Title and text share the step and differ by their weight, so no distance separates them. */
.newsletter__text {
    font-weight: var(--sav-font-weight-light);

    /* Running text, so its lines fill rather than balance the way the headline step does. */
    text-wrap: pretty;
}

.newsletter__frame {
    --newsletter-content: min(100%, 66.75rem); /* 1068px */
    --newsletter-form: min(100%, 49.0625rem); /* 785px */

    display: block;

    /* The form ends where the content box does and is pushed off the left edge by whatever
       is left over — on a narrow screen both caps fall away and it stands flush. */
    width: var(--newsletter-form);
    margin-inline-start: calc(var(--newsletter-content) - var(--newsletter-form));
}

.newsletter__form {
    display: flex;
    flex-direction: column;

    /* 24px → 17px: the fine print moves closer to the field as the screen grows. */
    gap: clamp(1.0625rem, 1.5rem - (100vw - 24.375rem) * 0.005232, 1.5rem);
}

.newsletter__field {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 1rem + (100vw - 24.375rem) * 0.003737, 1.3125rem); /* 16px → 21px */

    /* 8px → 15px around the button, which is what gives the pill its height. */
    padding-block: clamp(0.5rem, 0.5rem + (100vw - 24.375rem) * 0.005232, 0.9375rem);

    /* 24px → 40px before the address, 8px → 15px after the button. */
    padding-inline: clamp(1.5rem, 1.5rem + (100vw - 24.375rem) * 0.011958, 2.5rem)
        clamp(0.5rem, 0.5rem + (100vw - 24.375rem) * 0.005232, 0.9375rem);
    border-radius: 100px;
    background-color: var(--sav-color-hellgrau);

    /* A tone under the block would swallow the grey, so there the field is white. */
    .newsletter.has-background & {
        background-color: var(--sav-color-weiss);
    }
}

.newsletter__input {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
    color: inherit;

    /* The design writes the prompt in the same tone as an entered address. */
    &::placeholder {
        color: inherit;
        opacity: 1;
    }

    &:focus-visible {
        outline: none;
    }

    &[aria-invalid='true'] {
        color: var(--sav-color-signalrot);
    }
}

.newsletter__submit {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;

    /* 44px → 57px; the field adds its own padding to that. */
    min-block-size: clamp(2.75rem, 2.75rem + (100vw - 24.375rem) * 0.009716, 3.5625rem);
    padding-block: 0;
    padding-inline: clamp(1.375rem, 1.375rem + (100vw - 24.375rem) * 0.006726, 1.9375rem); /* 22px → 31px */
    border: 0;
    border-radius: 50px;
    background-color: var(--sav-color-dunkelblau);
    color: var(--sav-color-hellgrau);
    font-size: clamp(0.875rem, 0.875rem + (100vw - 24.375rem) * 0.004484, 1.25rem); /* 14px → 20px */
    line-height: clamp(1.375rem, 1.375rem + (100vw - 24.375rem) * 0.007474, 2rem); /* 22px → 32px */
    font-weight: var(--sav-font-weight-regular);
    cursor: pointer;

    /* Motion is the enhancement, so it is asked for rather than taken away. */
    @media (prefers-reduced-motion: no-preference) {
        transition: background-color 0.2s;
    }

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

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

/* The message takes the place of the consent, so both stand at the same step inside the
   field: nothing on a narrow screen, 32px from the content width on. */
.newsletter__consent,
.newsletter__error {
    max-width: min(100%, 44.375rem); /* 678px of text behind the 32px step */
    padding-inline-start: clamp(0rem, (100vw - 24.375rem) * 0.023916, 2rem);

    /* Held at 14px on both frames rather than grown with the scale; the line 20px → 22px. */
    font-size: 0.875rem;
    line-height: clamp(1.25rem, 1.25rem + (100vw - 24.375rem) * 0.001495, 1.375rem);
}

.newsletter__consent-link {
    color: inherit;
    text-decoration-line: underline;
    text-decoration-thickness: from-font;
    text-decoration-skip-ink: none;
    text-underline-position: from-font;

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

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

.newsletter__error {
    color: var(--sav-color-signalrot);
}

.newsletter__done {
    --newsletter-check: clamp(1.5rem, 1.5rem + (100vw - 24.375rem) * 0.008969, 2.25rem); /* 24px → 36px */
    --newsletter-check-gap: clamp(0.75rem, 0.75rem + (100vw - 24.375rem) * 0.001495, 0.875rem); /* 12px → 14px */

    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.newsletter__done-title {
    display: flex;
    align-items: center;
    gap: var(--newsletter-check-gap);
    color: var(--sav-color-dunkelblau);

    & svg {
        flex: none;
        inline-size: var(--newsletter-check);
        block-size: var(--newsletter-check);
    }
}

/* The text lines up under the title, not under the check standing beside it. */
.newsletter__done-text {
    padding-inline-start: calc(var(--newsletter-check) + var(--newsletter-check-gap));
}