/* Produkt-Theme: wird nach dem Standard-CSS geladen. */
:root {
  --bg: #f8fafc;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --accent: #6d28d9;
  --accent-hover: #5b21b6;
  --accent-text: #ffffff;
  --radius: 14px;
  --hero-from: #0f172a;
  --hero-to: #3b0764;
}

.site-header { background: rgba(255, 255, 255, .85); backdrop-filter: saturate(180%) blur(10px); }
.brand { letter-spacing: -.02em; }
.site-main { overflow-x: clip; }
.landing > :first-child { margin-top: 0; }

/* Abschnitte */
.lp-wrap { max-width: var(--max); margin: 0 auto; padding: 0 16px; }
.lp-narrow { max-width: 760px; }
.lp-center { text-align: center; }
.lp-section { padding: 72px 0; }
.lp-section h1 { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -.02em; }
.lp-section h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); letter-spacing: -.02em; margin: 0 0 32px; text-align: center; }
.lp-alt { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.lp-lead { font-size: 1.2rem; color: var(--muted); max-width: 680px; }
.lp-center .lp-lead { margin-left: auto; margin-right: auto; }

/* Hero */
.lp-hero {
  background: radial-gradient(1200px 500px at 80% -10%, rgba(167, 139, 250, .35), transparent 60%),
              linear-gradient(160deg, var(--hero-from), var(--hero-to));
  color: #f8fafc; padding: 96px 0 104px; text-align: center;
}
.lp-hero h1 { font-size: clamp(2.4rem, 7vw, 4.4rem); line-height: 1.05; letter-spacing: -.035em; max-width: 900px; margin: 0 auto 20px; }
.lp-hero .lp-lead { color: #cbd5e1; margin: 0 auto 32px; }
.lp-eyebrow { display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #ddd6fe; font-size: .85rem; font-weight: 600; margin-bottom: 20px; }
.lp-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.lp-hero .button-ghost { color: #f8fafc; border-color: rgba(255, 255, 255, .4); }
.lp-hero .button-ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.lp-note { margin-top: 24px; color: #94a3b8; font-size: .9rem; }
.lp-buy { padding: 14px 26px; font-size: 1.05rem; }

/* Funktionen */
.lp-features { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.lp-feature { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.lp-alt .lp-feature { background: var(--bg); }
.lp-feature h3 { margin: 0 0 8px; font-size: 1.1rem; }
.lp-feature p { margin: 0; color: var(--muted); }

/* Vergleich */
.lp-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.lp-compare { width: 100%; border-collapse: collapse; min-width: 640px; }
.lp-compare th, .lp-compare td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--border); }
.lp-compare tr:last-child td { border-bottom: 0; }
.lp-compare th { font-size: .85rem; color: var(--muted); }
.lp-compare td:first-child { font-weight: 600; }
.lp-compare th:last-child, .lp-compare td:last-child { background: #f5f3ff; color: var(--accent); font-weight: 700; }

/* Preis */
.lp-price-card { display: inline-block; text-align: left; background: var(--surface); border: 2px solid var(--accent); border-radius: 20px; padding: 32px 36px; max-width: 420px; width: 100%; box-shadow: 0 20px 50px -20px rgba(109, 40, 217, .35); }
.lp-price { font-size: 3.4rem; font-weight: 800; letter-spacing: -.03em; margin: 0; }
.lp-price-note { color: var(--muted); font-size: .9rem; margin: 0 0 20px; }
.lp-price-card ul { list-style: none; padding: 0; margin: 0 0 24px; }
.lp-price-card li { padding: 6px 0 6px 28px; position: relative; }
.lp-price-card li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 800; }
.lp-price-card .lp-buy { display: block; text-align: center; }

/* FAQ */
.lp-faq { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 0 20px; margin-bottom: 10px; }
.lp-faq summary { cursor: pointer; font-weight: 600; padding: 16px 0; list-style-position: outside; }
.lp-faq p { margin: 0 0 16px; color: var(--muted); }

/* Abschluss */
.lp-cta { padding: 80px 0; background: linear-gradient(160deg, var(--hero-from), var(--hero-to)); color: #f8fafc; }
.lp-cta h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 8px; }
.lp-cta p { color: #cbd5e1; margin: 0 0 24px; }
.lp-cta .button-ghost { color: #f8fafc; border-color: rgba(255, 255, 255, .4); }

@media (max-width: 640px) {
  .lp-section { padding: 52px 0; }
  .lp-hero { padding: 64px 0 72px; }
  .lp-price-card { padding: 24px; }
}