/** * landing.css — the campaign landing pages (/betreiber, /haendler). * * WHY THESE PAGES EXIST AT ALL * relaunch.html is 266 KB of story with a 3D scene and ten sections, built to * be read. Someone arriving from a search advert has a problem and wants an * answer, and every extra second of loading and scrolling is paid for by the * click. So these pages are deliberately small: no 3D, no shell navigation, one * message and one form. * * They reuse the site's own tokens (copied from relaunch.html's :root, both * themes) rather than inventing a palette, so a visitor who later reaches the * main site does not feel handed to a different company. The theme is applied * the same way — [data-theme="dark"] on , set inline before first paint. */ :root { --paper-0: #FFFFFF; --paper-1: #F5F7FA; --paper-2: #EBEEF3; --ink-0: #0D0F12; --ink-1: #2B3138; --ink-2: #5A626C; --ink-3: #8A939E; --blue-0: #1656E0; --blue-2: #D4E4FF; --green: #2F8F4E; --line: rgba(13, 15, 18, .12); --line-soft: rgba(13, 15, 18, .07); --shadow-1: 0 1px 2px rgba(13, 15, 18, .06), 0 8px 24px rgba(13, 15, 18, .07); } [data-theme="dark"] { color-scheme: dark; --paper-0: #0D0F12; --paper-1: #13161B; --paper-2: #1A1E24; --ink-0: #F0F2F5; --ink-1: #CDD3DB; --ink-2: #98A0AB; --ink-3: #6A737E; --blue-0: #4C8BFF; --blue-2: #14273F; --green: #4FC97A; --line: rgba(240, 244, 250, .12); --line-soft: rgba(240, 244, 250, .07); --shadow-1: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .30); } * { box-sizing: border-box; } body { margin: 0; background: var(--paper-0); color: var(--ink-1); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-size: 1.05rem; line-height: 1.6; -webkit-font-smoothing: antialiased; } .lp { max-width: 62rem; margin-inline: auto; padding: clamp(28px, 6vw, 72px) clamp(20px, 5vw, 40px) 80px; } /* ── Head ─────────────────────────────────────────────────────────────── */ .lp-brand { display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; margin-bottom: clamp(32px, 7vw, 64px); } .lp-brand-mark { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .82rem; letter-spacing: .34em; text-transform: uppercase; color: var(--ink-0); font-weight: 500; } .lp-brand-sub { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); } .lp-eyebrow { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--blue-0); display: flex; align-items: center; gap: 12px; } .lp-eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--blue-0); flex: none; } h1 { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.04; letter-spacing: -.01em; color: var(--ink-0); margin: 18px 0 0; text-wrap: balance; max-width: 20ch; } h1 em { font-style: italic; color: var(--blue-0); } .lp-lead { font-size: clamp(1.1rem, 2.2vw, 1.35rem); color: var(--ink-1); max-width: 46ch; margin: 20px 0 0; } /* ── Figures — the numbers that carry the argument ────────────────────── */ .lp-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; margin: clamp(36px, 6vw, 56px) 0 0; } .lp-figure { background: var(--paper-0); padding: 22px 24px; } .lp-figure-value { font-family: 'Instrument Serif', Georgia, serif; font-size: 2.1rem; line-height: 1; color: var(--ink-0); font-variant-numeric: tabular-nums; } .lp-figure-unit { font-size: .95rem; color: var(--ink-3); font-family: 'Inter', sans-serif; } .lp-figure-label { margin-top: 10px; font-size: .88rem; color: var(--ink-2); line-height: 1.45; } /* ── Body sections ────────────────────────────────────────────────────── */ section { margin-top: clamp(40px, 7vw, 64px); } h2 { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: clamp(1.6rem, 3.4vw, 2.1rem); line-height: 1.15; color: var(--ink-0); margin: 0 0 14px; text-wrap: balance; } p { margin: 0 0 16px; max-width: 62ch; } strong { color: var(--ink-0); font-weight: 600; } .lp-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; } .lp-points li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; max-width: 62ch; } .lp-points li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue-0); margin-top: .62em; } /* ── Honesty note — required, never decorative ────────────────────────── */ .lp-note { margin-top: clamp(36px, 6vw, 56px); padding: 18px 22px; background: var(--paper-1); border: 1px solid var(--line); border-left: 3px solid var(--ink-3); border-radius: 3px; font-size: .93rem; color: var(--ink-2); max-width: 62ch; } .lp-note p { margin: 0; } /* ── Call to action ───────────────────────────────────────────────────── */ .lp-cta { margin-top: clamp(40px, 7vw, 64px); padding: clamp(28px, 5vw, 40px); background: var(--paper-1); border: 1px solid var(--line); border-radius: 6px; } .lp-cta h2 { margin-top: 0; } .lp-cta p { color: var(--ink-2); } .lp-btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; padding: 14px 26px; font: inherit; font-weight: 600; color: #fff; background: var(--blue-0); border: 1px solid var(--blue-0); border-radius: 4px; cursor: pointer; text-decoration: none; transition: transform .12s ease, box-shadow .12s ease; } .lp-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); } .lp-btn:focus-visible { outline: 2px solid var(--ink-0); outline-offset: 3px; } .lp-btn-note { display: block; margin-top: 12px; font-size: .85rem; color: var(--ink-3); } /* The second way out, for a visitor who wants the numbers before a conversation. Styled as a link rather than a button on purpose: two buttons of equal weight make the page ask a question instead of making a request. */ .lp-btn-alt { display: inline-block; margin-top: 10px; padding: 0; font: inherit; font-size: .88rem; background: none; border: 0; color: var(--ink-2); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .lp-btn-alt:hover { color: var(--ink-0); } .lp-btn-alt:focus-visible { outline: 2px solid var(--ink-0); outline-offset: 3px; } /* ── Foot ─────────────────────────────────────────────────────────────── */ .lp-foot { margin-top: clamp(48px, 8vw, 80px); padding-top: 22px; border-top: 1px solid var(--line); font-size: .85rem; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; } .lp-foot a { color: var(--ink-2); text-decoration: none; } .lp-foot a:hover { color: var(--ink-0); text-decoration: underline; } .lp-foot-spacer { margin-left: auto; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }