/* =====================================================================
   kansen.css — Module 1.4 · Commerciële kansen. Bouwt op tokens +
   bouwstenen.css. Kleurhulpen per kanstype via --kans-kleur.
===================================================================== */

.kans--terra  { --kans-kleur: var(--c-terra);   --kans-tint: var(--c-terra-t); }
.kans--terrad { --kans-kleur: var(--c-terra-d); --kans-tint: var(--c-terra-t); }
.kans--groen  { --kans-kleur: var(--c-groen);   --kans-tint: var(--c-groen-t); }
.kans--groend { --kans-kleur: var(--c-groen-d); --kans-tint: var(--c-groen-t); }
.kans--amber  { --kans-kleur: var(--c-amber);   --kans-tint: var(--c-amber-t); }
.kans--ink    { --kans-kleur: var(--c-ink);     --kans-tint: var(--c-paneel);  }

.kans-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 14px; }
@media (max-width: 560px) { .kans-grid { grid-template-columns: 1fr; } }
.kans-kaart { padding: 0; overflow: hidden; display: flex; flex-direction: column; }

.kans-kop { display: flex; gap: 13px; padding: 16px 18px; background: var(--kans-tint); border-bottom: var(--lijndikte) solid var(--c-lijn); }
.kans-ic { width: 40px; height: 40px; flex: none; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; background: #fff; border: var(--lijndikte) solid var(--c-lijn); color: var(--kans-kleur); }
.kans-kop__tekst { flex: 1; min-width: 0; }
.kans-titel { font-weight: 800; font-size: .92rem; margin-bottom: 3px; }
.kans-trigger { font-size: .72rem; line-height: 1.5; color: var(--c-ink-2); }

.kans-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 18px; flex-wrap: wrap; }
.kans-actiechip { display: inline-flex; align-items: center; gap: 6px; font-size: .7rem; font-weight: 700; padding: 5px 11px; border-radius: var(--radius-pill); color: var(--kans-kleur); background: #fff; border: var(--lijndikte) solid var(--c-lijn-2); }
.kans-tel { font-size: .7rem; font-weight: 700; color: var(--c-ink-3); }

.kans-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 18px; border: 0; border-top: var(--lijndikte) solid var(--c-lijn); background: transparent; cursor: pointer; text-align: left; font-family: var(--font-ui); width: 100%; transition: background var(--overgang); }
.kans-item:hover { background: var(--c-creme); }
.kans-item__naam { font-weight: 700; font-size: .8rem; color: var(--c-ink); }
.kans-item__sub { font-size: .68rem; color: var(--c-ink-3); }
.kans-item__waarde { font-weight: 800; font-size: .82rem; flex: none; }

.kans-voet { padding: 14px 18px; margin-top: auto; }
.kans-knop { width: 100%; padding: 11px; border-radius: 11px; border: 0; background: var(--kans-kleur); color: #fff; font-family: var(--font-ui); font-size: .8rem; font-weight: 700; cursor: pointer; transition: opacity var(--overgang); }
.kans-knop:hover:not(:disabled) { opacity: .88; }
.kans-knop:disabled { background: var(--c-groen-t); color: var(--c-groen-d); cursor: default; }