/* KI-Text-Checker-Landingpage: nutzt die geteilten Design-Tokens und Komponenten aus ../style.css (Farben, Radius, .btn, .crumb, .hero-title, .duo, .block, .check-list, .tile-grid, .faq, .footer, ...). Diese Datei enthaelt nur, was auf der Hauptseite kein Gegenstueck hat. */ :root { --gold: #C9A227; --grau-lt: #E8E0D8; --grau-mid: #999090; } /* ── HEADER ── */ .site-header { background: var(--white); border-bottom: 1px solid rgba(0, 0, 0, 0.06); padding: 20px 0; text-align: center; } .site-header__name { font-family: 'Lora', serif; color: var(--accent-a); font-size: 1.3rem; font-weight: 700; text-decoration: none; } .site-header__sub { font-family: 'Mulish', sans-serif; font-variant: small-caps; color: var(--grau-mid); font-size: 0.75rem; letter-spacing: 0.08em; display: block; margin-top: 2px; } /* ── WAS DU BEKOMMST: zweispaltig, Text + nummerierte Schritte ── */ .bekommst-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; text-align: left; margin-top: 36px; } .steps { list-style: none; } .steps li { margin-bottom: 20px; } .steps__num { font-family: 'Lora', serif; color: var(--gold); font-weight: 700; margin-right: 8px; } /* ── BESTAETIGUNG: nummerierte Kreise ── */ .steps-numbered { list-style: none; margin: 32px auto; max-width: 480px; text-align: left; } .steps-numbered li { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 24px; } .steps-numbered__circle { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--dark); color: var(--white); font-family: 'Lora', serif; font-weight: 700; display: flex; align-items: center; justify-content: center; } .wait-box { background: var(--soft); border-radius: var(--radius); padding: 24px; text-align: center; max-width: 480px; margin: 32px auto 0; } /* ── DANKE: Prompt-Box, Kopier-Button, Upsell ── */ .prompt-box { background: var(--soft); border: 2px solid var(--accent-a); border-radius: var(--radius); padding: 32px; margin: 32px 0; white-space: pre-wrap; font-family: 'Mulish', sans-serif; font-size: 0.95rem; color: var(--black); line-height: 1.7; text-align: left; } .btn-outline-gold { display: inline-block; background: transparent; color: var(--accent-b); border: 2px solid var(--accent-b); font-weight: 600; font-size: 1.05rem; padding: 14px 36px; border-radius: 100px; cursor: pointer; text-decoration: none; transition: background 0.2s, color 0.2s; } .btn-outline-gold:hover { background: var(--accent-b); color: var(--white); } .copy-wrap { text-align: center; margin-bottom: 8px; } .copy-feedback { display: block; text-align: center; margin-top: 10px; font-size: 0.85rem; color: var(--accent-a); min-height: 1.2em; } .upsell-card { background: var(--white); border-radius: var(--radius); padding: 46px 40px; margin: 48px auto 0; max-width: 620px; text-align: center; box-shadow: 0 24px 80px rgba(135, 0, 89, 0.14); } .upsell-card h2 { margin: 12px 0 16px; } .upsell-card p { text-align: left; max-width: 480px; margin-left: auto; margin-right: auto; } .upsell-card .check-list { margin-top: 24px; text-align: left; } /* MailerLite-Formular-Styles sind ID-scoped (#mlb2-43306900) direkt im von index.html. */ /* ── RESPONSIVE ── */ @media (max-width: 760px) { .bekommst-grid { grid-template-columns: 1fr; } .upsell-card { padding: 34px 24px; } }