/*
 * /seo-autopilot/ (Auftrag Marcus 24.10., Briefing SEO). Bestehender Look:
 * Landing-Kit (--pl-*), Bausteine wie /shopify/ (Bühne, dunkles Band,
 * Karten mit Linien-Icons, Vergleich). Keine Preise.
 */
:root { --sa-ok: #1D6B3A; --sa-ok-soft: #E1F2EA; --sa-ink: #10191D; --sa-ink-2: #18252A; --sa-ink-line: #2A3A41; --sa-ink-text: #E9EEF0; --sa-ink-muted: #A5B3B8; }
@media (prefers-color-scheme: dark) {
  :root { --sa-ok: #6FD39A; --sa-ok-soft: rgba(0, 128, 96, .2); --sa-ink: #0E171B; --sa-ink-2: #142026; --sa-ink-line: #26353C; }
}
.sa-hero { position: relative; isolation: isolate; }
.sa-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 70% at 92% 12%, color-mix(in srgb, var(--pl-accent) 14%, transparent), transparent 70%); }
.sa-lead { margin: 0; max-width: 36em; font-size: 18px; line-height: 1.6; color: var(--pl-muted); }
.sa-lead b { color: var(--pl-text); }
.sa-trust { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--pl-muted); }
.sa-trust li::before { content: "✓ "; color: var(--sa-ok); font-weight: 700; }

/* Bühne: Wochenlauf mit 5 Vorschlägen (Beispieldaten) */
.sa-stage { margin: 0; border-radius: 20px; background: var(--pl-surface); border: 1px solid var(--pl-border); box-shadow: var(--pl-shadow); overflow: hidden; }
.sa-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--pl-sunken); border-bottom: 1px solid var(--pl-border); font-size: 14px; }
.sa-bar b { font-weight: 700; }
.sa-bar em { margin-left: auto; font-style: normal; font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--pl-border); color: var(--pl-muted); }
.sa-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 14px 16px 4px; }
.sa-kpis p { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--pl-sunken); font-size: 12px; color: var(--pl-muted); }
.sa-kpis b { display: block; font-size: 17px; color: var(--pl-text); }
.sa-kpis i { font-style: normal; color: var(--sa-ok); font-weight: 700; }
.sa-list { list-style: none; margin: 0; padding: 10px 16px 16px; display: grid; gap: 8px; }
.sa-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--pl-border); font-size: 14px; }
.sa-list small { grid-column: 1 / -1; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--pl-accent-text); }
.sa-list .sa-go { padding: 4px 12px; border-radius: 999px; background: var(--sa-ok); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; }
@media (prefers-color-scheme: dark) { .sa-list .sa-go { color: #0A0E10; } }
.sa-list .sa-done { padding: 4px 12px; border-radius: 999px; background: var(--sa-ok-soft); color: var(--sa-ok); font-size: 12px; font-weight: 700; white-space: nowrap; }
.sa-list .sa-diff { grid-column: 1 / -1; display: grid; gap: 2px; font-size: 13px; color: var(--pl-muted); }
.sa-list .sa-diff s { color: var(--pl-muted); }
.sa-list .sa-diff ins { text-decoration: none; color: var(--pl-text); }
.sa-cap { margin: 10px 4px 0; font-size: 13px; color: var(--pl-muted); }

/* Ablauf einer Woche */
.sa-steps { list-style: none; counter-reset: s; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--pl-grid-gap); }
.sa-steps li { counter-increment: s; padding: 20px; border-radius: 16px; background: var(--pl-surface); border: 1px solid var(--pl-border); display: grid; gap: 6px; align-content: start; }
.sa-steps li::before { content: counter(s); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--pl-accent-soft); color: var(--pl-accent-text); font-weight: 700; }
.sa-steps b { font-size: 17px; }
.sa-steps span { font-size: 15px; color: var(--pl-muted); }
.sa-note { margin: 16px 0 0; font-size: 15px; color: var(--pl-muted); max-width: 70ch; }

/* Dunkles Band: was geprüft wird */
.sa-dark { background: var(--sa-ink); color: var(--sa-ink-text); }
.sa-dark .pl-eyebrow { color: #F59A78; }
.sa-dark .pl-lead, .sa-dark .sa-note { color: var(--sa-ink-muted); }
@media (prefers-color-scheme: dark) { .sa-dark { border-block: 1px solid var(--sa-ink-line); } }
.sa-checks { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sa-checks li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 14px; padding: 18px; border-radius: 14px; background: var(--sa-ink-2); border: 1px solid var(--sa-ink-line); }
.sa-checks .sa-ic { grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, #F59A78 16%, transparent); color: #F59A78; }
.sa-checks b { color: var(--sa-ink-text); font-size: 17px; }
.sa-checks span { color: var(--sa-ink-muted); font-size: 14.5px; }

/* Karten (CMS, Branchen, Bericht) */
.sa-cards { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pl-grid-gap); }
.sa-cards li { display: grid; align-content: start; gap: 8px; padding: 22px; border-radius: 16px; background: var(--pl-surface); border: 1px solid var(--pl-border); }
.sa-cards li.is-main { border: 2px solid var(--pl-accent); }
.sa-cards h3 { margin: 0; font-family: var(--pl-serif); font-size: 21px; font-weight: 600; }
.sa-cards p { margin: 0; color: var(--pl-muted); font-size: 15.5px; }
.sa-cards .sa-tag { justify-self: start; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--sa-ok-soft); color: var(--sa-ok); }
.sa-cards .sa-tag.is-manual { background: var(--pl-sunken); color: var(--pl-muted); }
.sa-cards .sa-ex { padding: 8px 10px; border-radius: 10px; background: var(--pl-sunken); color: var(--pl-text); font-size: 14px; font-style: italic; }

/* Vergleich ohne Namen */
.sa-vs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pl-grid-gap); margin: 28px 0 0; }
.sa-vs > div { padding: 22px; border-radius: 16px; background: var(--pl-surface); border: 1px solid var(--pl-border); display: grid; gap: 8px; align-content: start; }
.sa-vs > div.is-us { border: 2px solid var(--pl-accent); box-shadow: var(--pl-shadow); }
.sa-vs h3 { margin: 0; font-size: 18px; }
.sa-vs p { margin: 0; color: var(--pl-muted); font-size: 15px; }
.sa-vs ul { margin: 4px 0 0; padding: 0 0 0 18px; color: var(--pl-text); font-size: 15px; display: grid; gap: 4px; }

/* Monatsbericht */
.sa-report { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.sa-pdf { padding: 22px; border-radius: 16px; background: var(--pl-surface); border: 1px solid var(--pl-border); box-shadow: var(--pl-shadow); font-size: 14px; }
.sa-pdf h3 { margin: 0 0 4px; font-family: var(--pl-serif); font-size: 20px; }
.sa-pdf > small { color: var(--pl-muted); }
.sa-pdf dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; margin: 14px 0; }
.sa-pdf dt { color: var(--pl-muted); }
.sa-pdf dd { margin: 0; font-weight: 700; text-align: right; }
.sa-pdf dd i { font-style: normal; color: var(--sa-ok); }
.sa-pdf ul { margin: 0; padding: 0 0 0 18px; color: var(--pl-text); display: grid; gap: 3px; }

/* Abschluss-CTA dunkel */
.sa-final { text-align: center; }
.sa-final .pl-h2 { color: var(--sa-ink-text); max-width: 22em; margin-inline: auto; }
.sa-final .pl-lead { margin-inline: auto; color: var(--sa-ink-muted); }
.sa-final .pl-cta-row { justify-content: center; }
.sa-final .pl-btn-outline { color: var(--sa-ink-text); box-shadow: inset 0 0 0 2px var(--sa-ink-line); }

/* FAQ */
.sa-faq { max-width: 820px; margin-top: 18px; display: grid; gap: 10px; }
.sa-faq details { padding: 14px 18px; border-radius: 12px; background: var(--pl-surface); border: 1px solid var(--pl-border); }
.sa-faq summary { cursor: pointer; font-weight: 700; }
.sa-faq p { margin: 10px 0 0; color: var(--pl-muted); }

@media (max-width: 1080px) { .sa-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .sa-checks, .sa-cards, .sa-vs, .sa-report { grid-template-columns: minmax(0, 1fr); } .sa-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .sa-steps { grid-template-columns: minmax(0, 1fr); } .pl-hero .pl-cta-row { flex-direction: column; align-items: stretch; } .sa-kpis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .sa-kpis p:last-child { display: none; } }

/* Audit-Formular im dunklen Abschluss (Muster demo-form.css, eigenes Absenden in page.js) */
.sa-form { max-width: 680px; margin: 26px auto 0; text-align: left; }
.sa-form select { width: 100%; min-height: 46px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--df-border); background: var(--df-bg); color: var(--df-text); font: inherit; font-weight: 400; font-size: 16px; }
.sa-form select:focus-visible { outline: 3px solid var(--df-accent); outline-offset: 1px; border-color: var(--df-accent); }
.sa-form [aria-invalid="true"] { border-color: var(--df-accent-text); }
.sa-alt { margin: 16px 0 0; color: var(--sa-ink-muted); }
.sa-alt a { color: #F59A78; font-weight: 700; }
@media (prefers-color-scheme: dark) { .sa-form { --df-border: #3A4A52; } }

/* Hub /marketing-autopilot/: Bausteine mit Link, Kennzahlen-Dashboard (Beispiel) */
.sa-cards a.sa-more { margin-top: auto; padding-top: 6px; font-weight: 700; color: var(--pl-accent-text); }
.sa-dash { display: grid; gap: 12px; padding: 18px; border-radius: 18px; background: var(--sa-ink-2); border: 1px solid var(--sa-ink-line); }
.sa-dash-top { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--sa-ink-muted); }
.sa-dash-top b { color: var(--sa-ink-text); font-size: 15px; }
.sa-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sa-tiles p { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--sa-ink); border: 1px solid var(--sa-ink-line); font-size: 12px; color: var(--sa-ink-muted); }
.sa-tiles b { display: block; font-size: 18px; color: var(--sa-ink-text); }
.sa-tiles i { font-style: normal; font-weight: 700; }
.sa-tiles .up { color: #6FD39A; } .sa-tiles .down { color: #FF8A8A; }
.sa-chart { width: 100%; height: auto; display: block; border-radius: 10px; background: var(--sa-ink); border: 1px solid var(--sa-ink-line); }
.sa-insight { padding: 12px 14px; border-radius: 12px; border: 2px solid var(--pl-accent); background: var(--sa-ink); font-size: 14px; color: var(--sa-ink-text); }
.sa-insight small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #F59A78; margin-bottom: 4px; }
.sa-insight .sa-go { display: inline-block; margin-top: 8px; padding: 4px 12px; border-radius: 999px; background: #6FD39A; color: #0A0E10; font-size: 12px; font-weight: 700; }
.sa-link { font-size: 13px; color: var(--sa-ink-muted); }
.sa-link code { color: #F59A78; background: none; }
.sa-kpi-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.sa-kpi-grid ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; color: var(--sa-ink-muted); }
.sa-kpi-grid li b { color: var(--sa-ink-text); }
@media (max-width: 900px) { .sa-kpi-grid { grid-template-columns: minmax(0, 1fr); } .sa-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sa-cards.sa-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .sa-cards.sa-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sa-cards.sa-cards-4 { grid-template-columns: minmax(0, 1fr); } }