/* ======================================================================== Schnell-Check — Anpassung an das V2-System Wird NACH lp.css geladen und gilt ausschließlich unter . lp.css trägt weiterhin 404, ueber-nicholas und branchenreport; deshalb wird dort nichts geändert, sondern hier überschrieben. tests/schnell-check.test.js erzwingt den Namespace. Die Seite hat einen Sonderfall gegenüber dem übrigen Auftritt: Der Quiz bleibt eine abgegrenzte Fläche. Er ist ein Werkzeug, kein Textabschnitt — eine zusammenhängende Eingabestrecke braucht einen Rahmen, sonst schwebt sie im Nichts. Die Kartenoptik wird nur zurückgenommen. ======================================================================== */ .check-v2 { --rail: 1128px; } .check-v2 .container--narrow { max-width: var(--rail); padding: 0 24px; } /* ── 1. Hero: ruhige weiße Fläche, linke Achse ───────────────────────── */ .check-v2 .lp-hero { padding: clamp(56px, 7vw, 88px) 0 clamp(40px, 5vw, 56px); background: var(--bg-light); } .check-v2 .lp-hero__eyebrow { display: block; margin-bottom: 20px; padding: 0; border-radius: 0; background: none; color: var(--text-gray); font-size: 12px; letter-spacing: .18em; } .check-v2 .lp-hero h1 { max-width: 820px; margin-bottom: 24px; font-family: var(--font-heading); font-size: clamp(34px, 4vw, 52px); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; overflow-wrap: break-word; hyphens: auto; } .check-v2 .lp-hero h1 .highlight { color: var(--secondary-color); } .check-v2 .lp-hero__sub { max-width: 620px; margin-bottom: 34px; font-size: 18px; line-height: 1.6; } .check-v2 .lp-hero__note { margin-top: 16px; color: var(--text-gray); font-size: 14px; } /* ── 2. Die drei Zusagen als Haarlinienzeile ─────────────────────────── */ /* Die drei Zusagen stehen neben der Eingabestrecke statt darüber: dort füllen sie den freien Raum und bleiben sichtbar, während man antwortet. */ .check-v2 .why-section { margin: 0; } .check-v2 .why-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; } .check-v2 .why-item { display: block; padding: 22px 0; border: 0; border-top: 1px solid var(--border-subtle); border-radius: 0; background: none; box-shadow: none; } .check-v2 .why-item__icon { width: 20px; height: 20px; margin: 0 0 14px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--primary-color); } .check-v2 .why-item__icon svg { width: 20px; height: 20px; } .check-v2 .why-item h2 { margin: 0 0 6px; font-family: var(--font-heading); font-size: 18px; font-weight: 700; letter-spacing: -.01em; } .check-v2 .why-item p { margin: 0; color: var(--text-gray); font-size: 16px; line-height: 1.55; } /* ── 3. Quiz: Fläche bleibt, Kartenoptik geht ────────────────────────── */ .check-v2 .quiz-section { padding: clamp(64px, 8vw, 104px) 0 clamp(80px, 9vw, 128px); background: var(--surface-muted); } .check-v2 .quiz-wrap { display: grid; grid-template-columns: minmax(0, 720px) minmax(0, 1fr); align-items: start; gap: clamp(40px, 6vw, 88px); max-width: var(--rail); margin: 0 auto; padding: 0 24px; } .check-v2 .quiz-card { max-width: 720px; padding: clamp(32px, 4vw, 48px); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); box-shadow: none; } .check-v2 .quiz-progress__label { color: var(--primary-color); letter-spacing: .12em; text-transform: uppercase; } /* ── 4. Responsive ───────────────────────────────────────────────────── */ @media (max-width: 900px) { .check-v2 .quiz-wrap { grid-template-columns: 1fr; gap: 40px; } .check-v2 .quiz-card { max-width: 720px; } } @media (max-width: 560px) { .check-v2 .lp-hero { padding: 40px 0 32px; } .check-v2 .lp-hero h1 { font-size: clamp(28px, 8vw, 36px); } .check-v2 .quiz-section { padding: 48px 0 72px; } .check-v2 .quiz-card { padding: 24px 20px; } } @media (prefers-reduced-motion: reduce) { .check-v2 *, .check-v2 *::before, .check-v2 *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }