/* ══════════════════════════════════════════════════════════════
   FairTransition – Fallstudie (Scrollytelling)
   Vanilla, nutzt Tokens aus style.css (Navy #152238 / Ocker #C9A96E).
   ══════════════════════════════════════════════════════════════ */

/* ── Illustrations-Hinweisband ── */
.fc-note{background:#fbf6ea;border-block:1px solid #e6d3a8;color:#6b5320;
  font-size:.85rem;line-height:1.5;text-align:center;padding:12px 20px}
.fc-note strong{color:#5a4415}
.fc-note.fc-note-bottom{margin-top:0}

/* ── Kapitel-Rhythmus ── */
.fc-chapter{padding:clamp(64px,10vh,120px) 20px;position:relative}
.fc-chapter .container{max-width:960px}
.fc-narrow{max-width:680px}
.fc-num{display:inline-block;font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-size:.82rem;font-weight:700;letter-spacing:.16em;color:var(--ochre);
  text-transform:uppercase;margin-bottom:12px}
.fc-h{font-size:clamp(1.5rem,3.2vw,2.3rem);line-height:1.2;font-weight:760;
  margin-bottom:16px;font-family:"Bricolage Grotesque",system-ui,sans-serif}
.fc-lead{font-size:clamp(1rem,1.5vw,1.15rem);line-height:1.7;color:var(--gray)}
.fc-dark{background:linear-gradient(170deg,#152238,#0f1a2c);color:#fff}
.fc-dark .fc-lead{color:rgba(255,255,255,.8)}
.fc-dim{background:#eef1f5}
.fc-q{margin-top:22px;font-size:clamp(1.05rem,1.8vw,1.3rem);line-height:1.5;
  font-weight:600;border-left:3px solid var(--ochre);padding-left:20px;max-width:560px}
.fc-dark .fc-q{color:#fff}

/* ── Hero der Fallstudie ── */
.fc-hero{background:
   radial-gradient(760px 460px at 82% 4%,rgba(201,169,110,.12),transparent 62%),
   linear-gradient(168deg,#152238,#0f1a2c 60%,#0c1524);color:#fff;
  padding:clamp(56px,10vh,120px) 20px}
.fc-hero .fc-h{font-size:clamp(1.9rem,4.4vw,3rem)}
.fc-hero .fc-lead{color:rgba(255,255,255,.82);max-width:620px}
.fc-persona{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.fc-persona span{border:1px solid rgba(255,255,255,.22);border-radius:999px;
  padding:8px 16px;font-size:.85rem;color:rgba(255,255,255,.85)}

/* ── Reveal ── */
html.js .fc-reveal{opacity:0;transform:translateY(20px);
  transition:opacity .7s ease,transform .7s ease}
html.js .fc-reveal.in-view{opacity:1;transform:none}

/* ── Kapitel 1: Frühsignal-Kurve (SVG) ── */
.fc-signal{margin:34px 0 0;background:var(--white);border:1px solid #e3e7ec;
  border-radius:18px;padding:24px}
.fc-dark .fc-signal{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
.fc-signal svg{width:100%;height:auto;display:block}
.fc-signal .lbl{font-size:.75rem;fill:var(--gray)}
.fc-dark .fc-signal .lbl{fill:rgba(255,255,255,.6)}
.fc-signal path.line{fill:none;stroke:var(--ochre);stroke-width:2.5;
  stroke-dasharray:var(--l,600);stroke-dashoffset:var(--l,600);
  transition:stroke-dashoffset 1.8s ease}
.fc-signal.in-view path.line{stroke-dashoffset:0}

/* ── Kapitel 2: Weggabelung ── */
.fc-fork{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,32px);margin-top:32px}
.fc-path{border-radius:18px;padding:clamp(20px,3vw,30px);border:1px solid transparent}
.fc-path h3{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.fc-path ol{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.fc-path li{position:relative;padding-left:22px;line-height:1.5;font-size:.95rem}
.fc-path-a{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.72)}
.fc-path-a h3{color:rgba(255,255,255,.65)}
.fc-path-a li::before{content:"·";position:absolute;left:6px;opacity:.6}
.fc-path-b{background:#fff;border-color:#e3e7ec;color:#2b3442;box-shadow:0 18px 46px rgba(10,18,32,.22)}
.fc-path-b h3{color:var(--ochre-ink,#7E6130)}
.fc-path-b li::before{content:"→";position:absolute;left:0;color:var(--ochre-ink,#7E6130)}

/* ── Prozess-Schritte (Kapitel 3–6) ── */
.fc-step-badge{display:inline-flex;align-items:center;gap:10px;margin-bottom:8px}
.fc-step-badge .n{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:rgba(201,169,110,.15);border:2px solid var(--ochre);color:var(--ochre-ink,#7E6130);
  font-weight:700;font-family:"Bricolage Grotesque",system-ui,sans-serif}
.fc-dark .fc-step-badge .n{color:var(--ochre)}
.fc-result{margin-top:18px;background:var(--white);border:1px solid #e3e7ec;border-radius:14px;
  padding:16px 20px;font-size:.95rem;line-height:1.6}
.fc-result strong{color:var(--ochre-ink,#7E6130)}

/* ── Vertraulichkeit (Kapitel 4) ── */
.fc-conf{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,32px);margin-top:28px}
.fc-conf-col{border-radius:16px;padding:22px}
.fc-conf-open{background:var(--white);border:1px solid #e3e7ec}
.fc-conf-closed{background:#152238;color:#fff}
.fc-conf-col h4{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px}
.fc-conf-open h4{color:var(--ochre-ink,#7E6130)}
.fc-conf-closed h4{color:rgba(255,255,255,.7)}
.fc-conf-col ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fc-conf-col li{position:relative;padding-left:20px;font-size:.9rem;line-height:1.5}
.fc-conf-open li::before{content:"→";position:absolute;left:0;color:var(--ochre-ink,#7E6130)}
.fc-conf-closed li{color:rgba(255,255,255,.82)}
.fc-conf-closed li::before{content:"·";position:absolute;left:5px;color:rgba(255,255,255,.5)}

/* ── Doppel-Zeitachse (Kapitel 5) ── */
.fc-dual{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,32px);margin-top:32px}
.fc-track h4{font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ochre-ink,#7E6130);margin-bottom:16px}
.fc-track ol{list-style:none;margin:0;padding:0 0 0 26px;position:relative}
.fc-track ol::before{content:"";position:absolute;left:7px;top:4px;bottom:4px;width:2px;background:#d8dde4}
.fc-track li{position:relative;padding-bottom:18px;line-height:1.55;font-size:.92rem;color:var(--gray)}
.fc-track li::before{content:"";position:absolute;left:-24px;top:5px;width:12px;height:12px;
  border-radius:50%;background:#fff;border:3px solid var(--ochre)}
.fc-track li:last-child{padding-bottom:0}

/* ── Business Impact (Kapitel 7) ── */
.fc-impact{background:#0f1a2c;color:#fff}
.fc-impact .fc-lead{color:rgba(255,255,255,.8)}
.fc-compare{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,28px);margin-top:32px}
.fc-card{border-radius:18px;padding:clamp(20px,3vw,28px)}
.fc-card h3{font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px}
.fc-card-a{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14)}
.fc-card-a h3{color:rgba(255,255,255,.6)}
.fc-card-b{background:rgba(201,169,110,.1);border:1px solid rgba(201,169,110,.4)}
.fc-card-b h3{color:var(--ochre)}
.fc-row{display:flex;justify-content:space-between;gap:14px;padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.1);font-size:.92rem;line-height:1.4}
.fc-row:last-child{border-bottom:0}
.fc-row .v{font-weight:700;white-space:nowrap;font-family:"Bricolage Grotesque",system-ui,sans-serif}
.fc-card-a .v{color:#e88}
.fc-card-b .v{color:var(--ochre)}
.fc-net{margin-top:24px;background:rgba(201,169,110,.14);border:1px solid rgba(201,169,110,.45);
  border-radius:16px;padding:22px;text-align:center}
.fc-net .big{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:clamp(1.6rem,3.4vw,2.4rem);
  font-weight:780;color:var(--ochre);line-height:1.1}
.fc-net small{display:block;margin-top:8px;color:rgba(255,255,255,.7);font-size:.85rem;line-height:1.5}
.fc-foot{margin-top:20px;font-size:.78rem;line-height:1.55;color:rgba(255,255,255,.55)}
.fc-foot strong{color:rgba(255,255,255,.75)}

/* ── Interaktive Mini-Rechnung ── */
.fc-calc{margin-top:34px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);
  border-radius:18px;padding:clamp(20px,3vw,30px)}
.fc-calc h3{font-size:1.05rem;margin-bottom:6px;color:#fff}
.fc-calc p.hint{font-size:.82rem;color:rgba(255,255,255,.6);margin-bottom:20px}
.fc-field{margin-bottom:20px}
.fc-field label{display:block;font-size:.9rem;margin-bottom:8px;color:rgba(255,255,255,.85)}
.fc-field .val{color:var(--ochre);font-weight:700;font-family:"Bricolage Grotesque",system-ui,sans-serif}
.fc-field input[type=range]{width:100%;accent-color:var(--ochre);height:6px}
.fc-calc-out{margin-top:8px;background:rgba(201,169,110,.12);border:1px solid rgba(201,169,110,.4);
  border-radius:14px;padding:20px;text-align:center}
.fc-calc-out .res{font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-size:clamp(1.4rem,3vw,2rem);font-weight:760;color:var(--ochre)}
.fc-calc-out small{display:block;margin-top:8px;font-size:.8rem;color:rgba(255,255,255,.65);line-height:1.5}

/* ── Realismus + CTA (Kapitel 8) ── */
.fc-real{background:var(--white);border:1px solid #e3e7ec;border-radius:16px;
  padding:clamp(20px,3vw,28px);margin-top:8px}
.fc-real h3{font-size:1.05rem;margin-bottom:12px}
.fc-real p{line-height:1.7;color:var(--gray)}
.fc-ctas{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}

/* ── Responsive ── */
@media (max-width:760px){
  .fc-fork,.fc-conf,.fc-dual,.fc-compare{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html.js .fc-reveal{opacity:1!important;transform:none!important;transition:none!important}
  .fc-signal path.line{stroke-dashoffset:0!important;transition:none!important}
}