:root {
    color-scheme: light;

    --clr-body-bg: var(--clr-white);
    --clr-body-color: var(--clr-black);
    --clr-border-color: var(--clr-primary-20);

    /* Schriftstufen des Entwurfs vom 02.09.2026. Er nennt je Stufe genau einen Wert,
       bezogen auf seinen Canvas von 1280px — deshalb feste Groessen statt clamp(). */

    --font-size-h1: 2rem; /* 32/42 */
    --font-size-h2: 1.1875rem; /* 19/27 */
    --font-size-body: 0.9375rem; /* 15/22 */
    --font-size-ui: 0.9375rem;
}

.hero {
    @media screen and (width >= 768px) {
        display: grid;
        grid-template-columns: 0.7fr 1fr;
    }

    @media screen and (width >= 1200px) {
        grid-template-columns: 0.8fr 1fr;
        grid-template-rows: 1fr auto auto 1fr;
    }
}

.hero__media {
    @media screen and (width < 768px) {
        height: 55dvh;
    }

    @media screen and (width >= 768px) {
        position: relative;
        grid-area: 1 / 1 / 2 / 2;
        align-self: stretch;
        height: 100%;
    }

    @media screen and (width >= 1200px) {
        grid-area: 1 / 1 / -1 / 2;
    }
}

.hero__image {
    @media screen and (width >= 768px) {
        position: absolute;
        inset: 0;
    }
}

.hero__content {
    padding-bottom: 0;

    @media screen and (width >= 768px) {
        grid-area: 1 / 2 / 2 / 3;
        padding-inline: var(--space-lg);
    }

    @media screen and (width >= 1200px) {
        grid-area: 2 / 2 / 3 / 3;
        padding-inline: var(--space-xxl);
    }
}

.hero__extra {
    align-self: start;
    padding-inline: var(--space-md);
    padding-bottom: var(--space-xl);

    @media screen and (width >= 600px) {
        padding-inline: var(--space-xxl);
    }

    @media screen and (width >= 768px) {
        max-width: 56rem;
        padding-inline: var(--space-lg);
        grid-area: 2 / 1 / 3 / 3;
    }

    @media screen and (width >= 1200px) {
        max-width: none;
        padding-inline: var(--space-xxl);
        padding-bottom: 0;
        grid-area: 3 / 2 / 4 / 3;
    }
}

.lp-logo {
    position: static;
    width: min(568px, 100%);
    height: auto;
    filter: none;
}

.hero__text {
    margin-top: 3.25rem;
}

.hero__headline {
    margin-bottom: 0.8em;
    font-family: var(--font-family-second);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-medium);
    line-height: 1.3125;
    letter-spacing: normal;
    color: var(--clr-secondary);
}

.hero__body {
    margin-top: var(--space-md);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    line-height: 1.4667;
    letter-spacing: -0.005em;

    h3 {
        margin-top: 1.25em;
        margin-bottom: 0.2em;
        font-size: var(--font-size-h2);
        line-height: 1.4211;
    }

    h3 + p {
        margin-top: 0;
    }

    /* Umbruch aus truth.text. .hero__body gibt es nur auf dieser LP, deshalb hier
       und nicht in der Liste in css/typography.css. */
    p {
        white-space: pre-line;
    }
}

/* Nur im Hero-Text: im Truth-Block ist die erste Zeile Fliesstext, keine Zwischenueberschrift. */

p.hero__body .lead {
    font-size: var(--font-size-h2);
    line-height: 1.4211;
}

.signup {
    margin-top: clamp(2.5rem, 1vw + 2rem, 3.25rem);

    @media screen and (width >= 600px) {
        --input-spacing-y: 1.25rem;
    }
}

.hero__extra {
    max-width: 90ch;
}

.signup__legend,
.signup__subline {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-medium);
    line-height: 1.2105;
    letter-spacing: -0.005em;
}

.signup__legend {
    color: var(--clr-body-color);
}

.signup__subline {
    font-family: var(--font-family-second);
    letter-spacing: normal;
    color: var(--clr-secondary);
}

.signup__input,
.signup__row .btn {
    font-size: var(--font-size-ui);
}

.signup__legend:has(+ .signup__subline) {
    margin-bottom: 0.75em;
}

.signup__input {
    border-color: var(--clr-black);

    &::placeholder {
        color: var(--clr-black);
    }
}

.signup__notice {
    /* 11/13 aus dem Entwurf. Nicht ueber --font-size-sm, sonst schrumpfen auch die
       Rechtstexte im Footer mit — die sind im Entwurf nicht ausgezeichnet. */
    font-size: 0.6875rem;
    font-weight: var(--font-weight-normal);
    line-height: 1.1818;
    color: var(--clr-body-color);
}

.signup__data-protection {
    color: var(--clr-body-color);
}

.site-footer {
    font-size: var(--font-size-sm);
    border-top: 0;
}