/* Vendtrix — Fallstudie-Seite (#939)
   Ergänzt styles.css nur um Seiten-Bausteine; Tokens aus tokens.css. */

.fs-hero{padding:140px 0 40px}
.fs-hero .lead{max-width:680px}

/* Rahmendaten-Kacheln */
.fs-facts{max-width:840px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.fs-fact{background:var(--bg-tile);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px}
.fs-fact .k{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);font-weight:700}
.fs-fact .v{margin-top:8px;font-size:17px;font-weight:700;color:var(--ink)}
.fs-fact .sub{margin-top:4px;font-size:12.5px;color:var(--ink-soft)}
.fs-facts-note{max-width:840px;margin:12px auto 0;color:var(--ink-faint);font-size:12.5px;line-height:1.5}

/* Artikel */
.fs-article{max-width:720px;margin:0 auto}
.fs-intro{color:var(--ink-soft);font-size:16px;line-height:1.7;margin-bottom:26px}

.fs-case{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r-xl);padding:28px;box-shadow:var(--shadow-card)}
.fs-case + .fs-case{margin-top:18px}
.fs-when{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-green-lt);font-weight:700}
.fs-when::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand-green)}
.fs-case h2{margin-top:10px;color:var(--ink);font-size:clamp(18px,2.6vw,22px);line-height:1.3;font-weight:800}
.fs-case p{margin-top:12px;color:var(--ink-soft);font-size:15px;line-height:1.65}
.fs-case p b{color:var(--ink)}

.fs-takeaway{margin-top:34px;border-left:3px solid var(--brand-green);background:var(--bg-tile);border-radius:0 var(--r-lg) var(--r-lg) 0;padding:24px 28px}
.fs-takeaway .h2{font-size:clamp(20px,3vw,26px)}
.fs-takeaway p{margin-top:12px;color:var(--ink-soft);font-size:15px;line-height:1.65}
.fs-takeaway p b{color:var(--ink)}

.fs-cta{margin-top:34px;text-align:center;background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r-xl);padding:36px 28px;box-shadow:var(--shadow-card)}
.fs-cta p{color:var(--ink-soft);font-size:15px;line-height:1.6;max-width:480px;margin:12px auto 20px}

@media (max-width:720px){
  .fs-hero{padding-top:120px}
  .fs-facts{grid-template-columns:1fr}
  .fs-case{padding:20px}
  .fs-takeaway{padding:18px 20px}
  .fs-cta{padding:26px 20px}
}