/* ============================================
   Rekentool met resultatentabel (component rekentool-tabel; eigen HTML-widget "calc-wrap" /
   calc-left + calc-right): schuifjes links, donker kader met uitkomsten rechts. De widget gebruikt 768px als
   mobiele grens; op /website-laten-maken/vakman/ (twee Elementor-widgets in een container) 767px.
   ============================================ */
.rekentool-tabel {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
  font-family: var(--font-ui);
}
.rekentool-tabel__sliders { display: flex; flex-direction: column; gap: 28px; }
.rekentool-tabel__label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.rekentool-tabel__naam {
  display: block; font-family: var(--font-ui); font-size: 15px; font-weight: 600; line-height: inherit; vertical-align: baseline;
  color: var(--color-white);
}
.rekentool-tabel__waarde { font-family: var(--font-heading); font-size: 20px; font-weight: 800; color: var(--color-accent); }
.rekentool-tabel__range { width: 100%; height: 6px; accent-color: var(--color-accent); cursor: pointer; }
.rekentool-tabel__bereik {
  display: flex; justify-content: space-between;
  margin-top: 6px;
  font-family: var(--font-ui); font-size: 12px; color: rgba(255, 255, 255, 0.7);
}
.rekentool-tabel__notitie { padding: 16px 20px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); }
.rekentool-tabel__notitie p { margin: 0; font-size: 12px; line-height: 1.6; color: rgba(255, 255, 255, 0.4); }

.rekentool-tabel__resultaat {
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}
.rekentool-tabel__rij {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.rekentool-tabel__rij:last-of-type { border-bottom: 0; }
.rekentool-tabel__rij-label { font-family: var(--font-ui); font-size: 13px; color: rgba(255, 255, 255, 0.7); }
.rekentool-tabel__rij-waarde { font-family: var(--font-heading); font-size: 22px; font-weight: 800; color: var(--color-accent); }
.rekentool-tabel__rij-waarde--groot { font-size: 28px; }
.rekentool-tabel__voetnoot { margin: 16px 0 0; font-family: var(--font-ui); font-size: 11px; line-height: 1.6; color: rgba(255, 255, 255, 0.4); }

@media (max-width: 768px) {
  .rekentool-tabel { grid-template-columns: 1fr; }
}

/* vakman: vakmanpagina's — zonder breedte: in de kolom zo breed als de inhoud (max. de container) */

/* leadgen: /lokale-leadgeneratie/ — volle breedte, lichtere min/max, ruimere rijen, notitie onder de schuifjes */
.rekentool-tabel--leadgen { width: 100%; }
.rekentool-tabel--leadgen .rekentool-tabel__bereik { color: rgba(255, 255, 255, 0.5); }
.rekentool-tabel--leadgen .rekentool-tabel__rij { padding: 16px 0; }

/* branche: /website-laten-maken/vakman/ — 30px tussen de delen, schuifjes als blok, label in de kit-labelstijl */
.rekentool-tabel--branche { gap: 30px; width: 100%; margin-top: 20px; }
.rekentool-tabel--branche > * { min-width: 0; }
.rekentool-tabel--branche .rekentool-tabel__slider { display: flex; flex-direction: column; }
.rekentool-tabel--branche .rekentool-tabel__naam { font-family: var(--font-heading); line-height: 1.08; vertical-align: middle; }
.rekentool-tabel--branche .rekentool-tabel__waarde,
.rekentool-tabel--branche .rekentool-tabel__rij-waarde { line-height: 1.5; }
.rekentool-tabel--branche .rekentool-tabel__range { display: block; margin: 0; }
.rekentool-tabel--branche .rekentool-tabel__bereik,
.rekentool-tabel--branche .rekentool-tabel__rij-label { font-weight: 500; line-height: 1.5; }
.rekentool-tabel--branche .rekentool-tabel__voetnoot { font-weight: 500; }
@media (max-width: 768px) {
  .rekentool-tabel--branche { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .rekentool-tabel--branche { grid-template-columns: 1fr; }
}