/* roi-calculator.css — aanvulling op site.css, alleen voor /roi-calculator
   Groen (#4ADE80) is een bewuste, door Bas goedgekeurde uitzondering op de
   zwart/wit/grijs-huisstijl, uitsluitend voor opbrengstcijfers. Zie
   00_foundation/huisstijl/huisstijl.md en 07_docs/roi_calculator_opzet.md 5a.1. */

.roi-groen { --groen: #4ADE80; }

.roi-stappen { display: flex; flex-direction: column; gap: clamp(3rem, 6vw, 4.5rem); }

.roi-stap-kop { display: flex; align-items: baseline; gap: .9rem; margin-bottom: 1.75rem; }
.roi-stap-kop .nr {
  font-weight: 800; font-size: 1.05rem; width: 2.1rem; height: 2.1rem;
  border-radius: 50%; border: 2px solid var(--zwart);
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.roi-stap-kop h2 { font-size: 1.5rem; max-width: none; }

/* ---------- taakkaarten ---------- */
.roi-taken { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .85rem; }
.taak-kaart {
  position: relative;
  display: flex; align-items: flex-start; gap: .75rem;
  border: 1px solid var(--lijn); border-radius: 12px;
  padding: 1.1rem 1.2rem;
  cursor: pointer;
}
.taak-kaart input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.taak-vink {
  flex: none; width: 1.35rem; height: 1.35rem; border-radius: 5px;
  border: 1.5px solid var(--grijs);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 800; color: transparent;
  margin-top: .1rem;
}
@media (prefers-reduced-motion: no-preference) {
  .taak-kaart { transition: border-color .25s var(--uit-quart), background .25s var(--uit-quart); }
  .taak-vink { transition: background .2s var(--uit-quart), border-color .2s var(--uit-quart); }
}
.taak-kaart:has(input:checked) { border-color: var(--zwart); background: var(--zacht); }
.taak-kaart:has(input:checked) .taak-vink { background: var(--zwart); border-color: var(--zwart); color: var(--wit); }
.taak-kaart input:focus-visible ~ .taak-vink { outline: 2px solid var(--zwart); outline-offset: 2px; }
.taak-tekst { font-size: .96rem; font-weight: 600; line-height: 1.4; }

/* ---------- presets ---------- */
.roi-presets { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.75rem; }
.preset-chip {
  font-size: .85rem; font-weight: 700; color: var(--grijs);
  border: 1px solid var(--lijn); border-radius: 99px; padding: .5rem 1rem;
  font-variant-numeric: tabular-nums;
}
.preset-chip:hover { border-color: var(--zwart); color: var(--zwart); background: var(--vlak); }

/* ---------- sliders ---------- */
.roi-sliders { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2rem; }
.roi-slider-veld label { font-weight: 700; font-size: .95rem; display: flex; justify-content: space-between; gap: 1rem; }
.roi-slider-veld .waarde { font-variant-numeric: tabular-nums; color: var(--zwart); }
.roi-slider-veld input[type="range"] {
  width: 100%; margin-top: .9rem;
  -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 99px; background: var(--vlak);
}
.roi-slider-veld input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--zwart); cursor: pointer; border: 3px solid var(--wit);
  box-shadow: 0 0 0 1px var(--lijn);
}
.roi-slider-veld input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: var(--zwart);
  cursor: pointer; border: 3px solid var(--wit); box-shadow: 0 0 0 1px var(--lijn);
}
.roi-hint { font-size: .82rem; color: var(--grijs); margin-top: .5rem; }

/* ---------- resultaatblok ---------- */
.roi-resultaat { border-radius: 20px; padding: clamp(1.75rem, 4vw, 3rem); }
.roi-cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.75rem 2rem; }
.roi-cijfer .label { font-size: .82rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--wit-66); }
.roi-cijfer .getal {
  font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; color: var(--groen); margin-top: .35rem;
  line-height: 1.1;
}
.roi-cijfer .eenheid { font-size: 1rem; font-weight: 600; color: var(--wit-66); margin-left: .35rem; }
.roi-mens-zin { margin-top: 1.5rem; font-size: .98rem; color: var(--wit-66); }
.roi-mens-zin strong { color: var(--wit); }

/* drivers */
.roi-drivers { margin-top: 2.25rem; }
.roi-drivers h3 { font-size: 1rem; color: var(--wit); margin-bottom: 1rem; }
.driver-rij {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 2fr) auto;
  align-items: center; gap: .9rem;
  padding: .55rem 0; font-size: .88rem; color: var(--wit-66);
}
.driver-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.driver-balk-wrap { height: 6px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
/* Schaalt via transform en niet via width: dat animeert op de compositor en veroorzaakt
   geen layout-herberekening. Relevant omdat de team-slider tijdens het slepen continu
   opnieuw rendert. De ronde uiteinden komen van de wrapper (border-radius + overflow
   hidden), dus de balk zelf heeft geen eigen radius nodig. */
.driver-balk {
  display: block; height: 100%; width: 100%;
  background: var(--groen);
  transform-origin: left center;
  transform: scaleX(0);
}
@media (prefers-reduced-motion: no-preference) { .driver-balk { transition: transform .5s var(--uit-quart); } }
.driver-uren { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--wit); white-space: nowrap; }
.driver-leeg { font-size: .9rem; color: var(--wit-66); }

/* grafiek */
.roi-grafiek-wrap { margin-top: 2.25rem; }
.roi-grafiek-wrap h3 { font-size: 1rem; color: var(--wit); margin-bottom: .75rem; }
.roi-grafiek { width: 100%; height: 200px; display: block; }

/* zo rekenen we */
.roi-uitleg { margin-top: 1.75rem; }
.roi-uitleg summary {
  cursor: pointer; list-style: none; font-weight: 700; font-size: .95rem;
  color: var(--wit); display: flex; align-items: center; gap: .5rem;
}
.roi-uitleg summary::-webkit-details-marker { display: none; }
.roi-uitleg summary::after { content: '+'; font-weight: 400; font-size: 1.3rem; margin-left: auto; }
.roi-uitleg[open] summary::after { content: '\2212'; }
.roi-uitleg-inhoud { margin-top: 1.1rem; color: var(--wit-66); font-size: .92rem; }
.roi-uitleg-inhoud p + p { margin-top: .8rem; }
.roi-uitleg .data-tabel { margin-top: 1rem; font-size: .85rem; }
.roi-uitleg .data-tabel th { background: rgba(255,255,255,.08); color: var(--wit); }
.roi-uitleg .data-tabel td { border-top-color: var(--wit-lijn); color: var(--wit-66); }

.roi-acties { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }
.roi-kopieer {
  font-size: .9rem; font-weight: 700; color: var(--wit);
  border: 1px solid var(--wit-lijn); border-radius: 99px; padding: .7rem 1.3rem;
}
.roi-kopieer:hover { background: rgba(255,255,255,.08); }
.roi-kopieer-melding { font-size: .85rem; color: var(--groen); align-self: center; }

/* lead-formulier compact naast elkaar met de CTA */
.roi-cta-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 800px) { .roi-cta-grid { grid-template-columns: 1fr; } }
.roi-lead-form { max-width: none; margin-top: 1.5rem; }
.roi-lead-form .veld-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 480px) { .roi-lead-form .veld-rij { grid-template-columns: 1fr; } }

@media (max-width: 700px) {
  .roi-cijfers { grid-template-columns: 1fr 1fr; }
  .driver-rij { grid-template-columns: minmax(0,1fr) auto; }
  .driver-balk-wrap { display: none; }
}