/* ═══════════════════════════════════════════════════════════════
   Money-Pages (Pre-Production, Filmproduktion, Moodboard) — Ergänzungen
   zu fp.css: Workflow-Schritte, Vergleichstabelle, Checkliste,
   Ratgeber-Text, Link-Raster und Abschluss-CTA. Nutzt nur die Tokens
   aus feature.css.
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero: zweiter Button + Kurzfakten ── */
.mp-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.mp-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-top:22px;list-style:none;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-3)}
.mp-facts li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--emerald);margin-right:9px;vertical-align:1px}

/* ── Workflow: nummerierte Schritte, Text neben Bild ── */
.flow{list-style:none;margin-top:clamp(48px,7vh,72px);display:grid;gap:clamp(56px,9vh,96px)}
.flow>li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:center}
.flow>li:nth-child(even) .flow__txt{order:2}
.flow__n{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--emerald);margin-bottom:14px}
.flow h3{font-size:clamp(1.4rem,2.2vw,1.8rem);line-height:1.15;color:var(--ink);margin-bottom:12px}
.flow p{color:var(--ink-2);font-size:1rem;line-height:1.65}
.flow p+p{margin-top:12px}
.flow .lnk{display:inline-block;margin-top:16px;font-size:.92rem;color:var(--ink);border-bottom:1px solid var(--hair);padding-bottom:2px}
.flow .lnk:hover{border-color:var(--ink-2)}
@media (max-width:900px){
  .flow>li{grid-template-columns:1fr}
  .flow>li:nth-child(even) .flow__txt{order:0}
}

/* ── Ratgeber-Text ── */
.prose{max-width:720px;margin:clamp(36px,5vh,52px) auto 0}
.prose h3{font-size:clamp(1.25rem,1.9vw,1.5rem);color:var(--ink);line-height:1.2;margin:38px 0 12px}
.prose h3:first-child{margin-top:0}
.prose p{color:var(--ink-2);font-size:1.02rem;line-height:1.72}
.prose p+p{margin-top:14px}
.prose ul,.prose ol{margin:14px 0 0 20px;color:var(--ink-2);line-height:1.65}
.prose li+li{margin-top:8px}
.prose li strong,.prose p strong{color:var(--ink);font-weight:600}

/* ── Checkliste: Karten mit Häkchen-Liste ── */
.checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(40px,6vh,56px)}
.checks .card h3{display:flex;align-items:baseline;gap:10px}
.checks .card h3 span.n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--emerald)}
.checks ul{list-style:none;margin:14px 0 0}
.checks li{position:relative;padding-left:24px;font-size:.92rem;color:var(--ink-2);line-height:1.55}
.checks li+li{margin-top:8px}
.checks li::before{content:"";position:absolute;left:2px;top:.42em;width:11px;height:11px;border:1.5px solid var(--ink-3);border-radius:3px}
@media (max-width:900px){.checks{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.checks{grid-template-columns:1fr}}

/* ── Phasen (Filmproduktion) ── */
.phases{list-style:none;margin:clamp(40px,6vh,56px) auto 0;max-width:1040px;display:grid;gap:12px}
.phases>li{display:grid;grid-template-columns:200px minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,3vw,36px);padding:24px clamp(18px,2.4vw,28px);border-radius:16px;background:var(--surface);border:1px solid var(--hair-soft)}
.phases h3{font-size:1.2rem;color:var(--ink);line-height:1.2}
.phases .ph__n{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--emerald);margin-bottom:8px}
.phases .ph__lbl{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.phases p{font-size:.93rem;color:var(--ink-2);line-height:1.6}
@media (max-width:820px){.phases>li{grid-template-columns:1fr}}

/* ── Vergleichstabelle ── */
.cmp{margin:clamp(40px,6vh,56px) auto 0;max-width:1040px;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--hair);border-radius:16px;background:var(--surface)}
.cmp table{width:100%;min-width:720px;border-collapse:collapse;font-size:.92rem}
.cmp caption{caption-side:bottom;text-align:left;padding:16px 18px;font-size:.82rem;color:var(--ink-3);line-height:1.55;border-top:1px solid var(--hair)}
.cmp th,.cmp td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--hair-soft)}
.cmp thead th{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:500;background:var(--surface-2)}
.cmp thead th.us{color:var(--emerald)}
.cmp tbody th{color:var(--ink);font-weight:500;width:28%}
.cmp td{color:var(--ink-2)}
.cmp td.us{color:var(--ink);background:rgba(52,211,153,.04)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp-note{max-width:1040px;margin:18px auto 0;font-size:.85rem;color:var(--ink-3);line-height:1.6}
.cmp-note+.cmp-note{margin-top:8px}
.cmp-src{max-width:1040px;margin:10px auto 0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.82rem}
.cmp-src a{color:var(--ink-3);border-bottom:1px solid var(--hair)}
.cmp-src a:hover{color:var(--ink-2)}

/* ── Ehrlich: was TillyBoard nicht macht ── */
.notdo{max-width:1040px;margin:clamp(32px,5vh,44px) auto 0}

/* ── Weiterführend: Link-Karten ── */
.links .card{display:block;transition:border-color .18s ease}
.links .card small{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.links a.card:hover{border-color:var(--ink-3)}

/* ── Abschluss-CTA ── */
.endcta{text-align:center;padding:clamp(48px,7vh,72px) clamp(20px,4vw,48px);border-radius:24px;background:var(--surface);border:1px solid var(--hair-soft)}
.endcta h2{font-size:clamp(2rem,3.9vw,3rem);line-height:1.08;margin-bottom:14px;text-wrap:balance}
.endcta p{color:var(--ink-2);max-width:56ch;margin:0 auto 28px}
.endcta small{display:block;margin-top:16px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-3)}