/* ═══════════════════════════════════════════════════════════════
   Money-Pages (Storyboard-, Drehplan-, Callsheet-Software) —
   ergänzt fp.css um die Bausteine, die die Feature-Seiten nicht haben:
   „In drei Schritten" mit App-Aufnahmen, Ratgeber-Text, fairer
   Vergleichstabelle und den Kacheln „Weiterführend".
   ═══════════════════════════════════════════════════════════════ */

.fhero .fnote{margin-top:16px}

/* ── Drei Schritte ── */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,2.6vw,36px);margin-top:clamp(44px,6vh,64px)}
.steps li{display:flex;flex-direction:column;gap:20px}
.steps .win{padding:6px;border-radius:16px}
.steps .win img{border-radius:11px;aspect-ratio:16/10;object-fit:cover;object-position:left top}
.steps .num{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--emerald);margin-bottom:10px}
.steps h3{font-size:1.3rem;line-height:1.2;margin-bottom:8px}
.steps p{font-size:.95rem;color:var(--ink-2);line-height:1.6}

/* ── Ratgeber-Text ── */
.guide{max-width:760px;margin:clamp(40px,6vh,56px) auto 0}
.guide h3{font-size:clamp(1.25rem,2vw,1.5rem);line-height:1.25;margin:44px 0 12px}
.guide h3:first-child{margin-top:0}
.guide p{color:var(--ink-2);line-height:1.7}
.guide p+p{margin-top:14px}
.guide ol,.guide ul{margin:16px 0 0 1.25em;color:var(--ink-2);line-height:1.65}
.guide li+li{margin-top:10px}
.guide li b{color:var(--ink);font-weight:600}
.guide .tip{margin-top:24px;padding:18px 22px;border-radius:14px;background:var(--surface);border:1px solid var(--hair-soft)}

/* ── Vergleichstabelle ── */
.mcmp-wrap{max-width:1040px;margin:clamp(40px,6vh,56px) auto 0;overflow-x:auto;border:1px solid var(--hair-soft);border-radius:16px;-webkit-overflow-scrolling:touch}
.mcmp{width:100%;min-width:720px;border-collapse:collapse;font-size:.93rem;line-height:1.5}
.mcmp th,.mcmp td{padding:15px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--hair-soft);color:var(--ink-2)}
.mcmp thead th{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);background:var(--surface)}
.mcmp tbody th{color:var(--ink);font-weight:500;width:22%}
.mcmp .us{color:var(--ink);background:rgba(16,185,129,.045)}
.mcmp thead .us{color:var(--emerald)}
.mcmp tr:last-child>*{border-bottom:0}
.mnote{max-width:760px;margin:18px auto 0;font-size:.82rem;color:var(--ink-3);text-align:center;line-height:1.55}

/* ── Abschluss ── */
.endcta{text-align:center}
.endcta .pbtn{margin-top:30px}

/* ── Weiterführend ── */
.grid-c a.card{display:block;transition:border-color .18s ease}
.grid-c a.card h3{font-size:1.05rem}

@media (max-width:900px){
  .steps{grid-template-columns:1fr}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}