/* build.mjs loest diese @import-Zeilen beim Bauen zu einer dist/assets/main.css auf.
   Deshalb steht @import nur hier, nie in einer der Kategorien.
   Die LP-Stylesheets bleiben ungeschichtet und gewinnen dadurch gegen jede Layer. */

@layer tokens, base, layout, components, utilities;

/* url() ist relativ zur gebauten dist/assets/main.css, nicht zu dieser Datei. */

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/poppins-v24-latin-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/poppins-v24-latin-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/poppins-v24-latin-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/poppins-v24-latin-700.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/ibm-plex-serif-v20-latin-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Serif';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/ibm-plex-serif-v20-latin-500.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Serif';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/ibm-plex-serif-v20-latin-700.woff2') format('woff2');
}
@layer tokens {
/* Eine LP ueberschreibt diese Werte in src/pages/<slug>/style.css per :root. */

:root {
    /* Palette --------------------------------------------------------------- */

    --clr-white: #fff;
    --clr-black: #000;

    --clr-primary: #000;
    --clr-primary-80: #333333;
    --clr-primary-60: #666666;
    --clr-primary-40: #999999;
    --clr-primary-20: #cccccc;

    --clr-secondary: #009fe3;
    --clr-secondary-80: #33b2e9;
    --clr-secondary-60: #66c5ee;
    --clr-secondary-40: #99d9f4;
    --clr-secondary-20: #ccecf9;

    --clr-medium-gray: var(--clr-primary-40);
    --clr-dark-gray: var(--clr-primary-80);
    --clr-accent-color: var(--clr-secondary-60);

    /* Rollen ---------------------------------------------------------------- */

    /* Muss mit --clr-body-bg zusammen umschlagen, sonst rendern Scrollbar, Autofill
       und die native Formular-UI im Light-Stil auf dunklem Grund. */
    color-scheme: dark;

    --clr-body-bg: var(--clr-black);
    --clr-body-color: var(--clr-white);
    --clr-light-gray: var(--clr-primary-60);
    --clr-border-color: var(--clr-primary-60);
    --clr-link-color: var(--clr-secondary);
    --clr-link-hover-color: var(--clr-secondary-60);
    --clr-btn-bg: var(--clr-secondary);
    --clr-btn-color: var(--clr-black);
    --clr-btn-hover-bg: var(--clr-secondary-60);

    /* Typografie ------------------------------------------------------------ */

    /* Stufen aus dem Kampagnen-Design (00_F4M-Landingpages, S. 1), Mobile-Wert bei 320px
       bis Desktop-Wert bei 1440px. Rechenweg und Endpunkte: siehe README. */

    --font-base: 'Poppins', system-ui, sans-serif;
    --font-family-second: 'IBM Plex Serif', Georgia, serif;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;

    --font-size-base: 1.0625rem;
    --font-size-ui: 1.0625rem;
    --font-size-sm: 0.875rem;

    --line-height-base: 1.53;
    --line-height-headings: 1.15;
    --line-height-ui: 1.41;
    --line-height-sm: 1.5;

    --h1-font-size: clamp(2.375rem, 1.9643vw + 1.9821rem, 3.75rem);
    --h2-font-size: var(--h3-font-size);
    --h3-font-size: clamp(1.1875rem, 0.1786vw + 1.1518rem, 1.3125rem);
    --h4-font-size: var(--h3-font-size);
    --h5-font-size: var(--font-size-base);
    --h6-font-size: var(--font-size-base);

    --lead-font-size: clamp(1.0625rem, 0.3571vw + 0.9911rem, 1.3125rem);
    --kicker-font-size: clamp(0.875rem, 0.1786vw + 0.8393rem, 1rem);

    --tracking-display: -0.02em;
    --tracking-sans: -0.005em;
    --tracking-kicker: 0.08em;

    --headings-font-family: var(--font-base);
    --headings-font-weight: var(--font-weight-medium);

    /* Masse ----------------------------------------------------------------- */

    --max-content-width: 2560px;
    --measure: 34rem; /* Lesebreite der Textspalte */
    --radius: 0;
    --radius-pill: 999px;

    /* Abstaende ------------------------------------------------------------- */

    --space-sm: clamp(0.5rem, 0.25vw + 0.45rem, 0.75rem);
    --space-md: clamp(1rem, 0.5vw + 0.9rem, 1.5rem);
    --space-lg: clamp(2rem, 0.5vw + 1.9rem, 2.5rem);
    --space-xl: clamp(2.5rem, 1.5vw + 2.2rem, 4rem);
    --space-xxl: clamp(4rem, 2vw + 3.6rem, 6rem);
    --gutter: clamp(1.5rem, 0.5vw + 1.4rem, 2rem);
}
}
@layer base {
body {
    font-family: var(--font-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-base);
    letter-spacing: var(--tracking-sans);
    color: var(--clr-body-color);
    background: var(--clr-body-bg);
    -webkit-text-size-adjust: 100%;
}

/* Autorierbare Umbrueche -------------------------------------------------- */

/* Ein \n im Config-Wert wird hier zum Umbruch. Wer ein Element ergaenzt, muss dessen
   Template-Zeile einzeilig halten — pre-line erhaelt jeden Umbruch im Quelltext. */

:where(
    .hero__kicker,
    .hero__headline,
    .hero__lead,
    .product__fact-text,
    .signup__legend,
    .signup__subline,
    .signup__label,
    .signup__thanks,
    .signup__done p,
    .choice__label,
    .site-footer__brand,
    .site-footer__disclaimer,
    .backlink,
    .prose h1
) {
    white-space: pre-line;
}

/* Typografie -------------------------------------------------------------- */

/* Kein font-size auf html: alle rem-Werte der fluiden Skala rechnen mit 16px Browser-Default. */

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    font-family: var(--headings-font-family);
    line-height: var(--line-height-headings);
    text-wrap: balance;

    /* Ohne Trim messen die em-Abstaende von der Zeilenbox statt von der Versalhoehe. */
    text-box: trim-both cap alphabetic;

    /* em statt rem: der Abstand haengt an der eigenen fluiden Groesse und waechst mit. */
    margin: 0 0 0.5em;
}

h1, .h1,
h2, .h2,
h3, .h3 {
    overflow-wrap: break-word;

    @media (max-width: 575.98px) {
        hyphens: auto;
    }
}

h1, .h1 {
    font-size: var(--h1-font-size);
    font-weight: var(--headings-font-weight);
    line-height: 1.1;
    letter-spacing: var(--tracking-display);
}

h2, .h2 {
    font-size: var(--h2-font-size);
    font-weight: var(--headings-font-weight);

    @media (min-width: 1440px) {
        &:not(:has(+ h3, + .h3, + span, + .subline)) {
            margin-bottom: 0.75em;
        }
    }
}

h3, .h3 {
    margin-bottom: 0.6em;
    font-size: var(--h3-font-size);
    font-weight: var(--headings-font-weight);
}

h4, .h4 {
    margin-bottom: 0.6em;
    font-size: var(--h4-font-size);
    font-weight: var(--headings-font-weight);
}

h5, .h5 {
    margin-bottom: 0.6em;
    font-size: var(--h5-font-size);
    font-weight: var(--headings-font-weight);
}

h6, .h6 {
    margin-bottom: 0.6em;
    font-size: var(--h6-font-size);
    font-weight: var(--headings-font-weight);
}

h2 + .subline {
    font-size: var(--h3-font-size);
    font-weight: var(--font-weight-normal);
}

h3 + .subline {
    font-size: var(--h4-font-size);
    font-weight: var(--headings-font-weight);
}

h4 + .subline {
    font-size: var(--h5-font-size);
    font-weight: var(--font-weight-normal);
}

/* Abstand nach oben nur, wenn wirklich Inhalt vorausgeht. :where() haelt die
   Spezifitaet bei 0, damit jede Komponente den Wert ohne Kampf ueberschreibt. */

:where(p, ul, ol, dl, figure, blockquote, table) + :where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
    margin-top: 1em;
}

p {
    text-wrap: pretty;
}

p:last-child {
    margin-bottom: 0;
}

p.small {
    font-size: calc(var(--font-size-base) * 0.875);
}

p.big {
    font-size: calc(var(--font-size-base) * 1.25);
}

.text-secondary {
    color: var(--clr-secondary);
}

.font-second {
    font-family: var(--font-family-second);
}

/* line-height: 0 verhindert, dass die hochgestellte Zeile den Zeilenabstand aufreisst. */

sup,
sub {
    line-height: 0;
}

sup {
    vertical-align: super;
}

sub {
    vertical-align: sub;
}
}
@layer base {
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
}

img,
svg,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

/* letter-spacing erben Controls in Safari nicht von selbst. */

input,
button,
textarea,
select {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
}

a {
    color: var(--clr-link-color);
    text-decoration: underline;
    transition: color 0.2s ease-in-out;
}

a:hover,
a:focus-visible {
    color: var(--clr-link-hover-color);
}

:focus-visible {
    outline: 2px solid var(--clr-link-hover-color);
    outline-offset: 2px;
}
}
@layer layout {
.lp__main {
    min-height: 60vh;
    max-width: var(--max-content-width);
    margin-inline: auto;
}

.section {
    padding: var(--space-xxl) var(--gutter);
    margin-inline: auto;
    max-width: var(--container-max-width);
}

.section--narrow {
    max-width: 48rem;
}
}
@layer components {
.lp-logo {
    position: absolute;
    top: var(--space-xl);
    left: var(--space-xl);
    width: 185px;
    max-width: 100%;
    height: var(--logo-height, 2.75rem);
    filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.45));

    @media screen and (width >= 600px) {
        width: auto;
    }
}
}
@layer components {
.hero {
    position: relative;
    align-items: center;
    min-height: 100dvh;

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

.hero__media {
    height: 100%;

    @media screen and (width < 1200px) {
        height: 73dvh;
    }

    @media screen and (width >= 1200px) {
        position: sticky;
        top: 0;
        align-self: start;
        height: 100dvh;
    }
}

.hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__content {
    max-width: 90ch;
    padding: var(--space-lg) var(--space-md) var(--space-xl);

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

    @media screen and (width >= 1200px) {
        padding: var(--space-xxl) calc(var(--space-xxl) * 1.5) var(--space-xxl) var(--space-xxl);
    }

    > * {
        &:where(:not(:first-child)) {
            margin-top: var(--space-xl);
        }
    }
}

.hero__kicker {
    margin: 0 0 var(--space-md);
    font-size: var(--kicker-font-size);
    font-weight: var(--font-weight-semibold);
    line-height: 1.25;
    letter-spacing: var(--tracking-kicker);
    text-transform: uppercase;
    color: var(--clr-secondary);
    text-box: trim-both cap alphabetic;
}

.hero__headline {
    margin: 0 0 0.75em;
}

.hero__lead {
    margin: 0 0 var(--space-lg);
    font-family: var(--font-family-second);
    font-size: var(--lead-font-size);
    font-weight: var(--font-weight-medium);
    line-height: 1.24;
    letter-spacing: normal;
    color: var(--clr-secondary);
    text-box: trim-both cap alphabetic;
}
}
@layer components {
.product__headline,
.truth__headline {
    margin: 0 0 var(--space-md);
    line-height: var(--line-height-headings);
    text-box: trim-both cap alphabetic;
}

.product__subheadline {
    font-weight: var(--font-weight-normal);
}

.product__body:has(.product__media) {
    @media screen and (width >= 600px) {
        display: grid;
        grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
        gap: var(--space-lg);
        align-items: start;
    }
}

.product__facts {
    margin: 0;
}

.product__fact-name {
    font-weight: var(--font-weight-semibold);

    &:first-child {
        /* Offset white space of product image */
        margin-top: 1.25rem;
    }
}

.product__fact-text {
    margin: 0;
}

.product__fact-text + .product__fact-name {
    margin-top: 1.75em;
}

.truth__highlight {
    font-weight: 700;
}
}
@layer components {
.signup {
    --input-spacing-y: 0.75rem;
    --input-spacing-x: 1.5rem;
    /* Abstand des Buttons zur Feldkante, auf allen vier Seiten derselbe. */
    --input-inset: calc(var(--input-spacing-x) / 4);
    margin-top: var(--space-xxl);
}

.signup__legend {
    display: block;
    margin: 0 0 1.25rem;
    font-size: var(--h3-font-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-headings);
    color: var(--clr-secondary);
    text-box: trim-both cap alphabetic;
}

.signup__legend:has(+ .signup__subline) {
    margin-bottom: 1.5rem;
}

.signup__subline {
    margin: 0 0 1.25rem;
    font-size: var(--h3-font-size);
    line-height: var(--line-height-headings);
    text-box: trim-both cap alphabetic;
}

.signup__label {
    display: block;
    margin: 0 0 0.375rem;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-box: trim-both cap alphabetic;
}

.signup__row {
    position: relative;
    max-width: 600px;
}

.signup__input {
    width: 100%;
    padding: var(--input-spacing-y) var(--input-spacing-x);
    font: inherit;
    font-size: var(--font-size-ui);
    line-height: var(--line-height-ui);
    color: var(--clr-black);
    background: var(--clr-white);
    border: 1px solid var(--clr-white);
    border-radius: var(--radius-pill);

    @media screen and (width >= 600px) {
        /* Rechts Platz fuer den ueberlagernden Button freihalten */
        padding: var(--input-spacing-y) 10rem var(--input-spacing-y) var(--input-spacing-x);
    }

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

.signup__input:invalid:not(:placeholder-shown) {
    border-color: #c0392b;
}

/* Ohne Trim sitzt die Beschriftung bei gleichem Padding optisch zu tief,
   weil die Font-Box unten den Unterlaengenraum mittraegt. */

.btn {
    padding: 0.875rem 1.5rem;
    font: inherit;
    font-size: var(--font-size-ui);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-ui);
    text-box: trim-both cap alphabetic;
    color: var(--clr-btn-color);
    cursor: pointer;
    background: var(--clr-btn-bg);
    border: 2px solid var(--clr-btn-bg);
    border-radius: var(--radius-pill);
    transition: all 0.25s ease-in-out;
}

.btn:hover:not(:disabled) {
    background: var(--clr-btn-hover-bg);
    border-color: var(--clr-btn-hover-bg);
}

.btn:disabled {
    cursor: progress;
    opacity: 0.6;
}

/* Ueber inset statt zentriert: der Button waechst mit der Feldhoehe mit und behaelt
   oben, unten und rechts denselben Abstand zur Kante. */

.btn--signup {
    margin-top: var(--space-md);

    @media screen and (width >= 600px) {
        position: absolute;
        inset: var(--input-inset) var(--input-inset) var(--input-inset) auto;
        padding-block: 0;
        margin-top: 0;
    }
}

.signup__notice {
    margin: 0.85rem 0 0;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    color: var(--clr-white);
}

.signup__error {
    margin: 0.75rem 0 0;
    font-size: var(--font-size-sm);
    color: #c0392b;
}

.signup__confirm {
    margin-bottom: var(--space-xl);
}

.signup__question {
    display: block;
    margin: 0 0 var(--space-md);
    font-weight: var(--font-weight-semibold);
}

.signup__thanks {
    margin: 0 0 1rem;
    font-size: var(--h3-font-size);
    text-box: trim-both cap alphabetic;
}

.signup__thanks--big {
    font-size: 2rem;
}

.signup__fieldset {
    padding: 0;
    margin: 0 0 var(--space-md);
    border: 0;
}

.choice {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 0.875rem 1rem;
    margin-bottom: 0.5rem;
    color: var(--clr-black);
    background-color: var(--clr-white);
    cursor: pointer;
}

/* Der native Radio bleibt bedienbar und fokussierbar, sichtbar ist das
   .choice__control daneben. Das umschliessende label uebertraegt den Klick. */

.choice__input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Rand und Fuellung sind derselbe inset-Schatten, der von der Kante nach innen
   waechst: eine echte border liesse auf der Rundung eine weisse Haarlinie zum
   Schatten stehen, weil inset erst an der inneren Randkante beginnt. */

.choice__control {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--clr-white);
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px var(--clr-secondary);
    transition: box-shadow 0.25s ease-in-out;
}

.choice:hover .choice__control {
    box-shadow: inset 0 0 0 0.3rem var(--clr-secondary);
}

.choice__input:checked + .choice__control {
    box-shadow: inset 0 0 0 0.75rem var(--clr-secondary);
}

.choice:has(.choice__input:focus-visible) .choice__control {
    outline: 2px solid var(--clr-black);
    outline-offset: 2px;
}

/* Als Flex-Item ist das span ein Block-Container, das Trim zentriert die
   Beschriftung ueber die Versalhoehe zum Radio statt ueber die Zeilenbox. */

.choice__label {
    text-box: trim-both cap alphabetic;
}

.signup__data-protection {
    color: var(--clr-body-color);
}
}
@layer components {
.site-footer {
    padding: var(--space-lg) var(--space-md);
    max-width: var(--max-content-width);
    margin-inline: auto;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    background-color: var(--clr-white);
    border-top: 1px solid var(--clr-border-color);

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

.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-lg);
    justify-content: space-between;
    margin-inline: auto;
}

.site-footer__disclaimer {
    width: 100%;
    color: var(--clr-light-gray);
}

.site-footer__identity {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-md);
    align-items: center;
}

.site-footer__brand {
    margin: 0;
    color: var(--clr-light-gray);
    text-box: trim-both cap alphabetic;
}

.site-footer__nav {
    display: flex;
    gap: var(--space-md);

    a {
        color: var(--clr-light-gray);
        text-decoration: none;
    }
}
}
@layer components {
.social {
    display: flex;
    gap: var(--space-md);
    align-items: center;
}

.social__link {
    display: block;
    color: var(--clr-body-color);
    text-decoration: none;
}

.social__link:hover,
.social__link:focus-visible {
    color: var(--clr-secondary);
}

.social__icon {
    width: 1.75rem;
    height: 1.75rem;
}
}
@layer components {
.prose {
    max-width: 45rem;
}

.prose h1 {
    font-size: var(--h3-font-size);
    font-weight: var(--font-weight-medium);
}

.prose h2 {
    margin-top: 1.5em;
    margin-bottom: 0.4em;
    font-size: var(--h4-font-size);
}

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

.backlink {
    display: inline-block;
    margin-bottom: var(--space-lg);
    text-box: trim-both cap alphabetic;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
}

.backlink:hover,
.backlink:focus-visible {
    text-decoration: underline;
}

.prose ul {
    margin: 0 0 1em;
    padding-left: 1.2em;
    color: var(--clr-body-color);
    list-style: disc;
}

.prose li {
    margin-bottom: 0.25em;
}
}
@layer components {
/* Wird per JS eingefuegt, nur lokal bzw. bei "dev": true. */

.devbar {
    padding: 0.5rem 1rem;
    font-family: ui-monospace, monospace;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #000;
    background: #ffe680;
    border-bottom: 1px solid #d4b106;
}

.devbar p {
    margin: 0;
}
}
@layer components {
.ccm-cookie-declaration--list,
.ccm-cookie-declaration--purpose,
.ccm-cookie-declaration--embedding {
    margin-top: var(--space-lg);
}
}
@layer utilities {
/* Nimmt das Element visuell aus dem Fluss, laesst es aber im Accessibility-Tree.
   :not(:focus) macht die Klasse auch fuer Skip-Links nutzbar, die beim Fokus sichtbar werden. */

.visually-hidden:not(:focus):not(:active) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.font-second {
    font-family: var(--font-family-second);
    font-weight: var(--font-weight-medium);
    letter-spacing: normal;
}

.lead {
    font-weight: var(--font-weight-semibold);
}

.font-medium {
    font-weight: var(--font-weight-medium);
}
}