/* ============================================================================
   Öffentliche Seiten: Landingpage, Impressum, Datenschutz, Voranmelde-
   Bestätigung. Stand: Design-Vorlage vom 2026-10-09 (Claude-Design-Export,
   „komplett übernehmen" — Entscheidung David). Gegenüber der Vorlage vom
   2026-09-08 entfallen Intro-Vorhang, Hero-Foto, Vision-Pole, „Inspire ·
   Connect · Grow", „What grows next" und Community; dazu kommen die
   Terrakotta-Akzente und das Matching-Schaubild.

   Warum eigene Werte statt der globalen --sg-*: die Vorlage arbeitet mit einer
   wärmeren, feiner abgestuften Palette als die eingeloggte Anwendung. Sie hier
   lokal zu halten ist ehrlicher, als die App-Tokens zu verbiegen, die hinter
   dem Login weiter gelten.

   Schrift: Archivo trägt die Oberfläche, EB Garamond die großen Aussagen —
   beide über Pages/Shared/_Fonts.cshtml.
   ========================================================================= */

.lp {
    --lp-paper: #f4f2ed;      /* Seitengrund */
    --lp-card: #fcfbf8;       /* hellere Abschnitte, Karten */
    --lp-ink: #14130f;        /* Text primär, dunkle Flächen */
    --lp-ink-2: #4a473f;      /* Fließtext */
    --lp-ink-3: #6e6a5e;      /* Beiwerk */
    --lp-ink-4: #8a867b;      /* Auszeichnungen */
    --lp-line: #e4e1d9;       /* Trennlinien */
    --lp-line-input: #dcd8ce; /* Feldränder */
    --lp-sage: #cbcec2;       /* Beiwerk auf dunklem Grund */
    --lp-terra: #a65a35;      /* Eyebrows, Sparten-Symbole, Drehscheibe */
    --lp-terra-deep: #b5643f; /* Hervorhebung in der Danke-Meldung */
    --lp-terra-light: #e09a76; /* Hervorhebung im Hero, Strichlinien, Hover */
    --lp-serif: 'EB Garamond', Georgia, 'Times New Roman', serif;

    /* Ein Inhaltsband für die ganze Seite wie in der Vorlage: ein 1240px-
       Container, INNEN der Seitenrand — der Text steht also auch auf breiten
       Schirmen noch um den Rand eingerückt (bei 1280 px auf x 53, nicht 40).
       Als padding statt als zentriertes Kind-Element, damit Hintergrundflächen
       und Trennlinien über die volle Breite laufen. */
    --lp-band: 77.5rem;
    --lp-gutter: clamp(1.125rem, 4vw, 2.5rem);

    --lp-section-y: clamp(3rem, 7vw, 6rem);

    background: var(--lp-paper);
    color: var(--lp-ink);
    /* Die Vorlage setzt Archivo auf die ganze Seite. Ohne diese Zeile erbte
       die Landingpage Geist aus site.css — breiter und mit höherer Zeile. */
    font-family: 'Archivo', system-ui, sans-serif;
    overflow-x: hidden;

    /* Kurze Seiten (Impressum, Bestätigung) füllen sonst nicht die Höhe und der
       dunkle Grund der App scheint unter der Fußzeile durch. Die Spalte schiebt
       die Fußzeile dabei ans untere Ende. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.lp > .lp-footer { margin-top: auto; }

/* Der Grund hinter der Seite ist der der Vorlage, nicht das Dunkel der App —
   sichtbar beim Über-den-Rand-Ziehen (macOS, iOS). */
html:has(body .lp),
body:has(.lp) { background: #f4f2ed; }

.lp a { color: inherit; text-decoration: none; }

/* Die eine Regel, die alle Kanten zur Deckung bringt. */
.lp-band {
    padding-inline: calc(max(0px, (100% - var(--lp-band)) / 2) + var(--lp-gutter));
}

.lp img,
.lp video { display: block; max-width: 100%; }

.lp-icon { display: block; width: 100%; height: 100%; }

/* Hervorhebungen in den großen Aussagen: kursiv aus der Serif. */
.lp em { font-style: italic; }

/* Kleine Überzeile in Terrakotta („FÜR", Voranmeldung). */
.lp-eyebrow-terra {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lp-terra);
    margin: 0;
}

/* --- Knöpfe -------------------------------------------------------------- */

.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5625rem;
    border: 0;
    border-radius: var(--sg-radius-pill);
    padding: 0.875rem 1.75rem;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

/* Mit „.lp" davor: sonst gewinnt `.lp a { color: inherit }` gegen die
   Knopffarbe, und der helle Knopf steht farblos im dunklen Hero. */
.lp .lp-btn-ink {
    background: var(--lp-ink);
    color: var(--lp-card);
}

.lp .lp-btn-ink:hover { background: var(--lp-ink-2); color: var(--lp-card); }

.lp .lp-btn-cream {
    background: var(--lp-card);
    color: var(--lp-ink);
}

.lp .lp-btn-cream:hover { background: var(--lp-terra-light); color: var(--lp-ink); }

/* Absende-Knopf der Voranmeldung: Maße der Vorlage (16 / 24 px). */
.lp-btn-block { width: 100%; padding: 1rem 1.5rem; }

/* --- Kopfleiste ---------------------------------------------------------- */

.lp-nav {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgb(252 251 248 / 93%);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--lp-line);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.625rem;
    padding-block: 0.875rem;
    /* Die Leiste der Vorlage hält am Rand 16 statt 18 px wie die Abschnitte. */
    padding-inline: calc(max(0px, (100% - var(--lp-band)) / 2) + clamp(1rem, 4vw, 2.5rem));
}

.lp-nav-logo { display: flex; align-items: center; color: var(--lp-ink); }

/* Maße des Logos in der Vorlage: 44 px hoch bei deren Ausschnitt (viewBox-Höhe
   385 statt 380 unserer Wortmarke) — daraus 122,67 px Breite. Mit „auto" wäre
   das Logo 1,6 px breiter, und die Leiste bräche bei 768 px schon um. */
.lp-nav-logo .sg-logo-svg { width: 7.6667rem; height: 2.75rem; }

/* Die Anker stehen direkt hinter dem Logo, Knopf und Sprachen rechts außen;
   am Phone bricht beides in eigene Zeilen um. */
.lp-nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 1.375rem;
    font-size: 0.84375rem;
    color: var(--lp-ink-2);
}

.lp-nav-links > a:hover { color: var(--lp-ink); }

.lp-nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
}

.lp-btn-nav { padding: 0.6875rem 1.375rem; font-size: 0.84375rem; white-space: nowrap; }

/* Burger-Knopf: erscheint erst unter 768 px; „no-js" nimmt ihn weg, solange
   das Skript nicht gelaufen ist — ohne JavaScript bleibt das Menü offen. */
.lp-nav-toggle {
    display: none;
    margin-left: auto;
    border: 1px solid var(--lp-line-input);
    border-radius: var(--sg-radius-pill);
    background: transparent;
    width: 2.75rem;
    height: 2.75rem;
    cursor: pointer;
    color: var(--lp-ink);
}

.lp-nav-burger,
.lp-nav-burger::before,
.lp-nav-burger::after {
    display: block;
    width: 1.125rem;
    height: 1.5px;
    background: currentColor;
    margin: 0 auto;
    transition: transform 0.16s ease, opacity 0.16s ease;
}

.lp-nav-burger { position: relative; }

.lp-nav-burger::before,
.lp-nav-burger::after { content: ""; position: absolute; left: 0; }

.lp-nav-burger::before { top: -0.375rem; }

.lp-nav-burger::after { top: 0.375rem; }

/* Offen: aus den drei Strichen wird ein Kreuz. */
.lp-nav.open .lp-nav-burger { background: transparent; }

.lp-nav.open .lp-nav-burger::before { transform: translateY(0.375rem) rotate(45deg); }

.lp-nav.open .lp-nav-burger::after { transform: translateY(-0.375rem) rotate(-45deg); }

/* Unter 768 px (die Leiste passt in DE erst ab 766 px in eine Zeile): Logo und
   Burger; Anker und Aktionen klappen als eigene Zeilen unter der Leiste auf,
   linksbündig auf der Logokante. */
@media (max-width: 47.9375rem) {
    .lp-nav:not(.no-js) .lp-nav-toggle { display: block; }

    .lp-nav:not(.no-js) .lp-nav-links,
    .lp-nav:not(.no-js) .lp-nav-actions { display: none; }

    .lp-nav:not(.no-js).open .lp-nav-links {
        display: flex;
        order: 3;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-top: 0.5rem;
        border-top: 1px solid var(--lp-line);
        font-size: 1rem;
    }

    .lp-nav:not(.no-js).open .lp-nav-links > a { padding-block: 0.75rem; }

    .lp-nav:not(.no-js).open .lp-nav-actions {
        display: flex;
        order: 4;
        flex-basis: 100%;
        margin-left: 0;
        justify-content: space-between;
        padding-bottom: 0.25rem;
    }
}

/* --- Sprachumschalter ---------------------------------------------------- */

.lp-langs {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
}

.lp-langs form { display: contents; }

.lp-lang {
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    /* Wie in der Vorlage: Knöpfe erben die Laufweite der Leiste nicht. */
    letter-spacing: normal;
    color: var(--lp-ink-4);
    cursor: pointer;
    text-transform: uppercase;
}

.lp-lang:hover { color: var(--lp-ink); }

.lp-lang.active { color: var(--lp-ink); font-weight: 500; }

/* Trenner als eigenes Flex-Element (die Formulare sind display: contents) —
   der Abstand kommt allein aus dem gap, wie in der Vorlage. */
.lp-langs form + form::before {
    content: "|";
    color: #cfcbc2;
}

/* --- Hero ---------------------------------------------------------------- */

.lp-hero {
    position: relative;
    overflow: hidden;
    background: var(--lp-ink);
    min-height: clamp(35rem, 86vh, 55rem);
    display: flex;
    align-items: center;
}

/* Das Zeichen als Kontur, zur Hälfte aus dem rechten Rand gelaufen. */
.lp-hero-ornament {
    position: absolute;
    top: 50%;
    right: clamp(-35rem, -30vw, -16.25rem);
    width: clamp(26.25rem, 74vw, 70rem);
    max-width: none;
    height: auto;
    transform: translateY(-50%);
    opacity: 0.28;
    pointer-events: none;
}

.lp-hero-inner {
    position: relative;
    width: 100%;
    padding-block: clamp(4rem, 8vw, 7.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--lp-card);
}

.lp-hero-title {
    font-family: var(--lp-serif);
    font-weight: 400;
    font-size: clamp(2.875rem, 8.4vw, 8.25rem);
    line-height: 0.94;
    letter-spacing: -0.03em;
    max-width: 14ch;
    text-wrap: balance;
    margin: 0;
}

.lp-hero-title em { color: var(--lp-terra-light); }

.lp-hero-rule {
    display: block;
    width: 3.5rem;
    height: 1px;
    background: var(--lp-sage);
    opacity: 0.6;
    margin: clamp(1.875rem, 3.6vw, 3rem) 0;
}

.lp-hero-sub {
    font-family: var(--lp-serif);
    font-size: clamp(1.5rem, 2.9vw, 2.625rem);
    line-height: 1.22;
    letter-spacing: -0.01em;
    max-width: 30ch;
    text-wrap: balance;
    margin: 0;
}

.lp-hero .lp-btn {
    margin-top: clamp(2.5rem, 4.4vw, 3.5rem);
    padding: 1.125rem 2.375rem;
    font-size: 0.96875rem;
}

.lp-hero-note {
    margin: 1rem 0 0;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lp-sage);
}

/* --- Intro-Vorhang ------------------------------------------------------
   Liegt beim Laden über der Seite und blendet nach 2,5 s per CSS von selbst
   aus — serverseitig gerendert, damit es ohne JavaScript genauso läuft (nur
   ohne Überspringen). Die Farben sind die des Hero, der Vorhang geht also in
   ihn über statt gegen ihn zu schneiden. Seit 2026-10-09 wieder drin
   (Auftrag David), der Hero-Aufbau darunter folgt dem neuen Hero. */

.lp-intro {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--lp-ink);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    cursor: pointer;
    animation: lp-intro-curtain 2.5s ease forwards;
}

.lp-intro-logo {
    width: clamp(15rem, 34vw, 26rem);
    height: 9rem;
    background-color: #fff;
    -webkit-mask-image: url("../img/logo-wordmark.svg");
    mask-image: url("../img/logo-wordmark.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    animation: lp-intro-logo 0.9s ease both;
}

.lp-intro-line {
    height: 1px;
    width: clamp(9rem, 20vw, 15rem);
    background: rgb(255 255 255 / 45%);
    transform-origin: left center;
    animation: lp-intro-line 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}

.lp-intro-claim {
    font-size: 0.9375rem;
    font-weight: 500;
    text-transform: uppercase;
    animation: lp-intro-claim 1.1s ease 0.45s both;
}

@keyframes lp-intro-curtain {
    0%, 74% { opacity: 1; visibility: visible; }
    100% { opacity: 0; visibility: hidden; }
}

@keyframes lp-intro-logo {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

@keyframes lp-intro-line {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes lp-intro-claim {
    from { opacity: 0; letter-spacing: 0.62em; }
    to { opacity: 0.7; letter-spacing: 0.3em; }
}

/* Gestaffelter Aufbau des Hero unter dem Vorhang. Die Verzögerungen sind auf
   die Vorhangdauer abgestimmt — wird sie geändert, wandern diese Werte mit.
   Die Linie wächst nur (ihre Deckkraft 0,6 aus der Vorlage bleibt). */
.lp-hero-title { animation: lp-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.95s both; }

.lp-hero-rule { animation: lp-grow 0.9s cubic-bezier(0.22, 1, 0.36, 1) 2.1s both; }

.lp-hero-sub { animation: lp-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 2.2s both; }

.lp-hero .lp-btn { animation: lp-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 2.35s both; }

.lp-hero-note { animation: lp-fade 1s ease 2.6s both; }

@keyframes lp-rise {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}

@keyframes lp-grow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes lp-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Überspringen muss auch den Aufbau überspringen: ohne diese Regel klickt man
   den Vorhang weg und sieht zwei Sekunden lang eine leere Fläche. */
.lp-intro-skipped .lp-hero-title,
.lp-intro-skipped .lp-hero-rule,
.lp-intro-skipped .lp-hero-sub,
.lp-intro-skipped .lp-hero .lp-btn,
.lp-intro-skipped .lp-hero-note { animation: none; }

/* Ohne Bewegung: kein Vorhang, kein Aufbau — alles steht sofort. */
@media (prefers-reduced-motion: reduce) {
    .lp-intro { display: none; }

    .lp-hero-title,
    .lp-hero-rule,
    .lp-hero-sub,
    .lp-hero .lp-btn,
    .lp-hero-note { animation: none; }
}

/* --- Sparten + Reel ------------------------------------------------------ */

.lp-scope {
    background: var(--lp-paper);
    border-bottom: 1px solid var(--lp-line);
}

.lp-scope-inner {
    padding-block: clamp(3rem, 6vw, 5rem);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.75rem), 1fr));
    gap: clamp(1.375rem, 3vw, 3rem);
    align-items: center;
}

.lp-scope-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.875rem;
}

.lp-scope-title {
    font-family: var(--lp-serif);
    font-weight: 400;
    font-size: clamp(1.875rem, 3.8vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
    max-width: 16ch;
    text-wrap: balance;
    margin: 0 0 0.625rem;
}

.lp-scope-segments {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.625rem;
    font-size: clamp(0.78125rem, 1.3vw, 0.90625rem);
    font-weight: 500;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.lp-scope-segment {
    display: flex;
    align-items: center;
    gap: 0.5625rem;
    white-space: nowrap;
}

.lp-scope-segment > .lp-icon {
    flex: none;
    width: 1.375rem;
    height: 1.375rem;
    color: var(--lp-terra);
}

/* Reel mit der Blattform der Marke: zwei runde, zwei fast spitze Ecken. */
.lp-scope-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--lp-ink);
    border-radius: clamp(3.5rem, 9vw, 8.75rem) 2px clamp(3.5rem, 9vw, 8.75rem) 2px;
}

.lp-scope-media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Das Reel ist Bildfläche, keine Steuerung: läuft es nicht (iOS-Stromsparen),
   steht sein erstes Bild ruhig da — ohne den Play-Knopf, den iOS sonst
   darüberlegt. */
.lp-scope-media video::-webkit-media-controls,
.lp-scope-media video::-webkit-media-controls-start-playback-button,
.lp-scope-media video::-webkit-media-controls-overlay-play-button {
    display: none !important;
    -webkit-appearance: none;
}

/* --- Für Marken / Für Händler -------------------------------------------- */

.lp-audience {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20.625rem), 1fr));
    gap: 1px;
    background: var(--lp-line);
}

/* Bild links, Text rechts — bei beiden Hälften gleich. Unter 2 × 150 px
   stapeln Bild und Text. */
.lp-audience-half {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.375rem), 1fr));
    align-items: stretch;
}

/* Das <picture> tritt aus dem Raster zurück, das <img> ist selbst die
   Rasterzelle — wie in der Vorlage. Dadurch bestimmt das Seitenverhältnis des
   Fotos die Zeilenhöhe mit (das hochformatige Store-Foto macht die Zeile bei
   1280 px 427 px hoch); als Hülle zählte nur die Texthöhe. */
.lp-audience-photo { display: contents; }

/* Sonst würde das <source> mit der Hülle zur eigenen (leeren) Rasterzelle. */
.lp-audience-photo source { display: none; }

.lp-audience-photo img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 14.375rem;
    object-fit: cover;
}

.lp-audience-photo img { object-position: 30% 50%; }

.lp-audience-half-store .lp-audience-photo img { object-position: 45% 50%; }

.lp-audience-body {
    background: var(--lp-card);
    padding: clamp(1.75rem, 3.4vw, 2.875rem) clamp(1.375rem, 2.6vw, 2.375rem);
}

.lp-audience-title {
    font-size: clamp(1.25rem, 2.1vw, 1.6875rem);
    font-weight: 600;
    /* „HERSTELLER", „MANUFACTURERS" passen in die schmale Spalte nicht (in der
       Vorlage liefen sie bei 320/360 px aus der Fläche). Trennung greift nur,
       wo ein Wort sonst überliefe — sonst bleibt die Zeile wie in der Vorlage. */
    hyphens: auto;
    overflow-wrap: break-word;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin: 0.375rem 0 1.125rem;
}

.lp-audience-text {
    font-family: var(--lp-serif);
    font-size: clamp(1rem, 1.55vw, 1.25rem);
    line-height: 1.4;
    margin: 0;
}

/* --- AI Matching --------------------------------------------------------- */

.lp-matching {
    background: var(--lp-paper);
    border-top: 1px solid var(--lp-line);
    border-bottom: 1px solid var(--lp-line);
}

.lp-matching-inner {
    padding-block: clamp(2.75rem, 6vw, 5.25rem);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.625rem), 1fr));
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: center;
}

.lp-matching-shot {
    display: block;
    width: 100%;
    max-width: 18.75rem;
    aspect-ratio: 1024 / 1348;
    overflow: hidden;
    border-radius: 7.5rem 0.5rem 7.5rem 0.5rem;
}

.lp-matching-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }

.lp-matching-title {
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0;
}

.lp-matching-lead {
    font-family: var(--lp-serif);
    font-size: clamp(1.0625rem, 1.7vw, 1.375rem);
    margin: 0.625rem 0 0;
}

.lp-matching-text {
    font-size: clamp(0.9375rem, 1.3vw, 1.0625rem);
    line-height: 1.6;
    color: var(--lp-ink-2);
    max-width: 46ch;
    text-wrap: pretty;
    margin: 1rem 0 0;
}

/* Das Schaubild misst sich an der Textspalte (Container-Einheiten): ab 350 px
   Spaltenbreite (Viewport 390) gelten exakt die Werte der Vorlage, darunter
   schrumpft es als Ganzes. In der Vorlage brauchte es mindestens 350 px und
   schnitt bei 320/360 px den rechten Kreis ab. Faktor je Maß = Vorlagenwert
   / 350 px. */
.lp-matching-body { container-type: inline-size; }

/* Schaubild: Pol — Strichlinie — Drehscheibe — Strichlinie — Pol. */
.lp-match-diagram {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 32.5rem;
    margin-top: clamp(1.75rem, 3.4vw, 2.75rem);
}

.lp-pole {
    flex: none;
    width: min(clamp(7.75rem, 13vw, 10.5rem), 35.43cqi);
    aspect-ratio: 1;
    border-radius: var(--sg-radius-pill);
    background: var(--lp-card);
    border: 1px solid var(--lp-line);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: min(0.625rem, 2.857cqi);
    text-align: center;
    padding: min(0.625rem, 2.857cqi);
    overflow: hidden;
}

.lp-pole img {
    width: min(clamp(2rem, 3vw, 2.5rem), 9.143cqi);
    height: min(clamp(2rem, 3vw, 2.5rem), 9.143cqi);
}

.lp-pole span {
    font-size: min(0.65625rem, 3cqi);
    font-weight: 500;
    letter-spacing: 0.14em;
    line-height: 1.5;
    text-transform: uppercase;
}

.lp-match-line {
    flex: 1;
    min-width: min(1.125rem, 5.143cqi);
    height: 4px;
    display: block;
}

.lp-match-line line {
    stroke: var(--lp-terra-light);
    stroke-width: 1.5;
    stroke-dasharray: 4 6;
    vector-effect: non-scaling-stroke;
    animation: lp-dash 2.4s linear infinite;
}

.lp-match-hub {
    flex: none;
    width: min(clamp(4.125rem, 7vw, 5.5rem), 18.86cqi);
    aspect-ratio: 1;
    border-radius: var(--sg-radius-pill);
    background: var(--lp-terra);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 10px rgb(224 154 118 / 14%);
}

.lp-match-hub img { width: 56%; height: auto; animation: lp-spin 28s linear infinite; }

@keyframes lp-dash {
    to { stroke-dashoffset: -48; }
}

@keyframes lp-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* --- Voranmeldung -------------------------------------------------------- */

.lp-signup {
    position: relative;
    overflow: hidden;
    background: var(--lp-card);
    border-top: 1px solid var(--lp-line);
}

/* Das Zeichen als helle Kontur, unten links angeschnitten. */
.lp-signup-ornament {
    position: absolute;
    left: clamp(-13.75rem, -12vw, -5rem);
    bottom: clamp(-16.25rem, -16vw, -6.25rem);
    width: clamp(22.5rem, 40vw, 38.75rem);
    max-width: none;
    height: auto;
    opacity: 0.5;
    transform: rotate(18deg);
    pointer-events: none;
}

.lp-signup-inner {
    position: relative;
    padding-block: clamp(3rem, 7vw, 6rem);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}

.lp-signup-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    font-size: 0.71875rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--lp-terra);
}

.lp-signup-spark { width: 1.875rem; height: auto; }

.lp-signup-title {
    font-family: var(--lp-serif);
    font-weight: 400;
    font-size: clamp(1.875rem, 3.8vw, 3.25rem);
    line-height: 1.08;
    max-width: 18ch;
    text-wrap: balance;
    margin: 1.125rem 0 0;
}

.lp-signup-text {
    font-size: clamp(0.96875rem, 1.3vw, 1.09375rem);
    line-height: 1.6;
    color: var(--lp-ink-2);
    max-width: 44ch;
    margin: 1.25rem 0 0;
}

.lp-form {
    border: 1px solid var(--lp-line);
    border-radius: 10px;
    background: var(--lp-paper);
    padding: clamp(1.375rem, 2.6vw, 2.25rem);
}

.lp-form form { display: flex; flex-direction: column; gap: 1.375rem; }

.lp-form-label {
    display: block;
    font-size: 0.71875rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lp-ink-4);
    margin-bottom: 0.6875rem;
}

.lp-field input {
    width: 100%;
    border: 1px solid var(--lp-line-input);
    border-radius: 6px;
    background: var(--lp-card);
    padding: 0.875rem 0.9375rem;
    font: inherit;
    font-size: 0.9375rem;
    color: var(--lp-ink);
}

.lp-field input:focus { outline: none; border-color: var(--lp-ink); }

.lp-field input::placeholder { color: #a7a29a; }

/* Rollenwahl: echte Radios, als Pillen gesetzt. Das Häkchen selbst liegt
   unsichtbar darunter — Tastatur und Formular-POST funktionieren dadurch
   unverändert. */
.lp-segment-options { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.lp-segment-options label { cursor: pointer; }

.lp-segment-options input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.lp-segment-options span {
    display: inline-block;
    border: 1px solid var(--lp-line-input);
    border-radius: var(--sg-radius-pill);
    background: var(--lp-card);
    padding: 0.6875rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--lp-ink-2);
    transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

.lp-segment-options label:hover span { border-color: var(--lp-ink); color: var(--lp-ink); }

.lp-segment-options input:checked + span {
    background: var(--lp-ink);
    border-color: var(--lp-ink);
    color: var(--lp-card);
}

.lp-segment-options input:focus-visible + span { outline: 2px solid var(--lp-ink); outline-offset: 2px; }

.lp-consent {
    display: flex;
    gap: 0.6875rem;
    align-items: flex-start;
    font-size: 0.84375rem;
    line-height: 1.5;
    color: var(--lp-ink-2);
    cursor: pointer;
}

.lp-consent input {
    margin-top: 0.125rem;
    width: 1rem;
    height: 1rem;
    accent-color: var(--lp-ink);
    flex: none;
}

.lp-consent a { color: var(--lp-ink); text-decoration: underline; text-underline-offset: 2px; }

.lp-form-error {
    display: block;
    font-size: 0.8125rem;
    color: var(--sg-accent);
}

.lp-form-error:empty { display: none; }

.lp-form-done { display: flex; flex-direction: column; gap: 0.875rem; padding: 1.25rem 0; }

.lp-form-done-mark {
    width: 2.375rem;
    height: 2.375rem;
    padding: 0.5rem;
    border: 1.5px solid var(--lp-ink);
    border-radius: var(--sg-radius-pill);
    color: var(--lp-ink);
}

.lp-form-done-title {
    font-family: var(--lp-serif);
    font-size: clamp(1.5rem, 2.6vw, 2.125rem);
    line-height: 1.1;
    margin: 0;
}

.lp-form-done-title em { color: var(--lp-terra-deep); }

.lp-form-done-text { font-size: 0.9375rem; line-height: 1.6; color: var(--lp-ink-2); margin: 0; }

.lp-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem 1.125rem;
    margin-top: 0.5rem;
}

.lp-share-btn { padding: 0.8125rem 1.375rem; font-size: 0.875rem; }

.lp-share-btn[hidden] { display: none; }

.lp-share-btn .lp-icon { width: 1rem; height: 1rem; }

.lp-share-links { display: flex; gap: 0.875rem; font-size: 0.84375rem; }

.lp .lp-share-links a {
    color: var(--lp-ink-2);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.lp .lp-share-links a:hover { color: var(--lp-ink); }

/* --- Fußzeile ------------------------------------------------------------ */

.lp-footer {
    background: var(--lp-card);
    border-top: 1px solid var(--lp-line);
    padding-block: 1.625rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.875rem 1.875rem;
}

.lp-footer-logo { display: flex; align-items: center; color: var(--lp-ink); }

.lp-footer-logo .sg-logo-svg { width: auto; height: 3.625rem; }

.lp-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    font-size: 0.84375rem;
    color: var(--lp-ink-2);
}

.lp-footer-links a:hover { color: var(--lp-ink); }

/* --- Rechtstexte und Bestätigungsseite -----------------------------------
   Die Vorlage vom 2026-10-09 hat keine eigenen Rechtsseiten. Die Bausteine
   sprechen deshalb ihre Typo-Stufen: Überzeile wie „FÜR", Seitentitel wie
   „Sei von Anfang an dabei.", Abschnittstitel wie „AI MATCHING", Fließtext wie
   der Matching-Text, Bezeichnungen wie „E-MAIL". Fett 700 kommt in der
   Vorlage nicht vor — höchste Stufe ist 600. */

.lp-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--lp-terra);
}

.lp-display {
    font-family: var(--lp-serif);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.01em;
    text-wrap: balance;
    margin: 0;
}

/* Eine Lesespalte auf hellem Grund — dieselbe Bühne wie die Landingpage,
   aber ohne deren Bildsprache: hier zählt Lesbarkeit. */
/* Der Rechtstext steht auf derselben Kante wie Kopf- und Fußzeile, die
   Zeilenlänge begrenzen die Kinder — eine mittig gestellte Lesespalte hätte
   gegenüber der Leiste darüber sichtbar geflattert. */
.lp-legal {
    padding-block: var(--lp-section-y);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
}

.lp-legal > * { width: 100%; max-width: 46rem; }

.lp-legal-title { font-size: clamp(1.875rem, 3.8vw, 3.25rem); }

.lp-legal-lead {
    margin: 0;
    font-size: clamp(0.96875rem, 1.3vw, 1.09375rem);
    line-height: 1.6;
    color: var(--lp-ink-2);
}

.lp-legal-block {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    border-top: 1px solid var(--lp-line);
    padding-top: 1.75rem;
    margin-top: 1rem;
}

.lp-legal-h {
    margin: 0;
    font-weight: 600;
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lp-legal-text {
    margin: 0;
    font-size: clamp(0.9375rem, 1.3vw, 1.0625rem);
    line-height: 1.6;
    color: var(--lp-ink-2);
}

.lp-legal a { color: var(--lp-ink); text-underline-offset: 3px; }

/* Hervorhebungen im Rechtstext auf der höchsten Stufe der Vorlage (600) statt
   des Browser-Fetts 700. */
.lp-legal strong, .lp-legal b { font-weight: 600; }

.lp-legal-stand {
    margin: 2rem 0 0;
    font-size: 0.71875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--lp-ink-4);
}

/* Anbieter-Block des Impressums: Name, Anschrift, dann die Kennungen als
   Bezeichnung/Wert-Paare. */
.lp-legal-provider {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.5rem;
}

.lp-legal-provider + .lp-legal-provider {
    border-top: 1px dashed var(--lp-line);
    padding-top: 1.25rem;
    margin-top: 0.75rem;
}

.lp-legal-provider-name {
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.lp-legal-facts {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(9rem, auto) 1fr;
    gap: 0.25rem 1.25rem;
    font-size: 0.875rem;
    line-height: 1.6;
}

.lp-legal-facts dt {
    color: var(--lp-ink-4);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.71875rem;
    font-weight: 500;
    align-self: center;
}

.lp-legal-facts dd { margin: 0; color: var(--lp-ink-2); }

/* Bestätigungsseite des Double-Opt-in — dieselbe Lesespalte, mittig gesetzt. */
.lp-confirm { text-align: center; align-items: center; }

.lp-confirm > * { margin-inline: auto; }

.lp-confirm .lp-legal-lead { max-width: 34rem; }

.lp-confirm-btn { width: auto; padding: 1rem 2.125rem; margin-top: 0.5rem; }

/* --- Responsiv ----------------------------------------------------------- */

@media (max-width: 40rem) {
    /* Die Beschriftung darf umbrechen — sonst ist der Knopf breiter als das
       Gerät und läuft aus der Fläche. */
    .lp-btn { white-space: normal; }
}

/* Ohne Bewegung: Strichlinie und Drehscheibe stehen still. */
@media (prefers-reduced-motion: reduce) {
    .lp-match-line line,
    .lp-match-hub img { animation: none; }
}