/* pijplijnlens.css — pijplijn als berekende lens (V3 fase 4) */
.pl-wortel { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 18px; }
.pl-h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin: 2px 0 0; }
.pl-uitleg { color: var(--c-ink-2); font-size: 13.5px; max-width: 72ch; margin: -6px 0 0; }

.pl-funnel { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; }
.pl-fase { display: grid; grid-template-columns: 220px 1fr 150px auto; align-items: center; gap: 14px;
  padding: 11px 12px; border: 1px solid transparent; border-radius: var(--radius); background: none;
  font: inherit; text-align: left; cursor: pointer; color: var(--c-ink);
  transition: background var(--overgang), border-color var(--overgang); }
.pl-fase:hover { background: var(--c-paneel); border-color: var(--c-lijn); }
.pl-fase__naam { font-weight: 700; font-size: 13.5px; display: flex; align-items: baseline; gap: 10px; }
.pl-fase__naam b { font-family: var(--font-mono); font-size: 11px; color: var(--c-ink-3); font-weight: 600; }
.pl-fase__balk { height: 14px; border-radius: var(--radius-pill); background: var(--c-paneel); overflow: hidden; }
.pl-fase__balk i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--c-sage);
  transition: width 180ms ease; }
.pl-fase:nth-child(3) .pl-fase__balk i { background: var(--c-terra); }
.pl-fase:nth-child(4) .pl-fase__balk i { background: var(--c-groen); }
.pl-fase__n { font-size: 13px; font-weight: 700; text-align: right; }
.pl-fase__sub { font-size: 12px; color: var(--c-ink-2); white-space: nowrap; }
.pl-fase:hover .pl-fase__sub { color: var(--c-groen-d); }

.pl-bronnen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 20px; }
.pl-bron { font-size: 12.5px; color: var(--c-ink-2); border: 1px solid var(--c-lijn); border-radius: var(--radius-pill); padding: 4px 12px; }
.pl-bron b { color: var(--c-ink); margin-right: 4px; }
.pl-voetnoot { font-size: 12px; color: var(--c-ink-2); margin: 0; }
.pl-voetnoot a { color: var(--c-groen-d); }

@media (max-width: 900px) {
  .pl-fase { grid-template-columns: 1fr; gap: 6px; }
  .pl-fase__n { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .pl-fase, .pl-fase__balk i { transition: none; }
}

/* ---- delta-beeld (aanvulling 10-08 · CRM-patroon ②) ---- */
.pl-deltagrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px}
.pl-deltablok{padding:14px 16px}
.pl-deltakop{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.pl-deltakop b{font-size:.85rem}
.pl-deltakop span{font-size:.7rem;color:var(--ink3)}
.pl-deltarij{display:flex;align-items:baseline;gap:10px;padding:6px 0;border-bottom:1px solid var(--grijs);font-size:.78rem}
.pl-deltarij:last-child{border-bottom:0}
.pl-deltarij>span:nth-child(2){flex:1;min-width:0}
.pl-ref{font-size:.72rem;text-decoration:none;color:var(--accent-d)}
.pl-ref:hover{text-decoration:underline}
.pl-fijn{font-size:.7rem;color:var(--ink3);padding:6px 0}
/* te lang in de fase: amber, mét het aantal dagen — kleur draagt nooit alleen */
.pl-deltarij.is-hang .pl-hangdagen{background:var(--let-t);color:var(--let);font-weight:700;
  padding:2px 8px;border-radius:99px;font-size:.7rem}