/* Gedeelde opmaak voor de contentsecties (.sg-root), overgenomen uit de bestaande pagina's. */
.sg-root{
  --sg-licht:#F3EEE5;
  --sg-beton:#C0BDB7;
  --sg-leisteen:#222226;
  --sg-koper:#A8481A;
  --sg-koper-licht:#C96A3C;
  --sg-rand:#BEBAB3;
  --sg-grijs:#5A554D;
  --sg-zacht:#7D766A;
  --sg-max:1140px;
}

.sg-root,.sg-root *{box-sizing:border-box!important}
.sg-root{font-family:'Inter',system-ui,sans-serif!important;color:var(--sg-leisteen)!important;
  line-height:1.6!important;width:100%!important;margin:0!important}
.sg-root h1,.sg-root h2,.sg-root h3{font-family:'Archivo','Inter',sans-serif!important;
  letter-spacing:-.025em!important;margin:0!important;line-height:1.12!important;color:var(--sg-leisteen)!important}
.sg-root p{margin:0!important}
.sg-root img{max-width:100%!important;display:block!important}
.sg-root a{color:var(--sg-koper)!important;text-decoration:none!important}
.sg-root a:hover{color:var(--sg-koper-licht)!important}
.sg-root ul{margin:0!important;padding:0!important;list-style:none!important}

.elementor-section:has(.sg-root),
.elementor-container:has(.sg-root),
.elementor-widget-wrap:has(.sg-root),
.elementor-widget:has(.sg-root),
.elementor-widget-html:has(.sg-root),
.e-con:has(.sg-root),.e-child:has(.sg-root){margin:0!important;padding:0!important}
.elementor-widget-container:has(.sg-root){margin:0!important;padding:0!important}

.sg-root.sg-sec{width:100%!important;padding:60px 24px!important;margin:0!important;border:0!important}
.sg-root.sg-sec > *{max-width:var(--sg-max)!important;margin:0 auto!important;min-width:0!important}
.sg-root.sg-sec *{min-width:0!important}

.sg-root.sg-bg-licht{background-color:#F3EEE5!important;background-image:none!important}
.sg-root.sg-bg-beton{background-color:#C0BDB7!important;background-image:none!important}
.sg-root.sg-bg-donker{background-color:#222226!important;background-image:none!important;color:#E8E2D8!important}
.sg-root.sg-bg-donker h2,.sg-root.sg-bg-donker h3{color:#fff!important}
.sg-root.sg-bg-donker p{color:#ACA598!important}

.sg-root .sg-eyebrow{font-size:11.5px!important;font-weight:700!important;letter-spacing:.18em!important;
  text-transform:uppercase!important;color:var(--sg-koper)!important}

.sg-root .sg-streek{position:relative!important;white-space:nowrap!important;display:inline-block!important}
.sg-root .sg-streek::after{content:''!important;position:absolute!important;left:-2px!important;right:-4px!important;
  bottom:3px!important;height:9px!important;background:var(--sg-koper)!important;border-radius:5px!important;
  transform:rotate(-1deg)!important;opacity:.92!important}
.sg-root .sg-streek > span{position:relative!important;z-index:1!important}

.sg-root .sg-lead{font-size:17px!important;color:var(--sg-grijs)!important;max-width:36em!important}

.sg-root .sg-btn,.sg-root a.sg-btn{
  background:#A8481A!important;color:#fff!important;border:0!important;
  padding:15px 32px!important;border-radius:10px!important;font-size:15.5px!important;font-weight:700!important;
  font-family:'Inter',sans-serif!important;cursor:pointer!important;display:inline-block!important;
  line-height:1.2!important;text-decoration:none!important;
  box-shadow:0 5px 16px rgba(168,72,26,.36)!important;
  transition:background .15s,transform .12s,box-shadow .15s!important}
.sg-root .sg-btn:hover,.sg-root a.sg-btn:hover{
  background:#8E3B14!important;color:#fff!important;transform:translateY(-2px)!important;
  box-shadow:0 9px 24px rgba(168,72,26,.46)!important}

.sg-root .sg-sechead{margin-bottom:28px!important}
.sg-root .sg-sechead h2{font-size:clamp(23px,2.5vw,29px)!important;font-weight:800!important}
.sg-root .sg-sechead p{margin-top:7px!important;color:var(--sg-grijs)!important;font-size:15px!important}

/* ---- HERO met kerncijfers ---- */
.sg-root .sg-pr-hero{display:grid!important;grid-template-columns:1.1fr .9fr!important;
  gap:44px!important;align-items:center!important}
.sg-root .sg-pr-hero h1{font-size:clamp(28px,4vw,42px)!important;font-weight:800!important;margin:14px 0 0!important}

.sg-root .sg-kern{display:grid!important;grid-template-columns:1fr 1fr!important;gap:14px!important}
.sg-root .sg-kern-b{background:#fff!important;border:1px solid var(--sg-rand)!important;
  border-radius:14px!important;padding:22px 20px!important;
  box-shadow:0 4px 14px rgba(34,34,38,.10)!important}
.sg-root .sg-kern-b .c{font-family:'Archivo',sans-serif!important;font-weight:800!important;
  font-size:26px!important;color:var(--sg-koper)!important;line-height:1.1!important}
.sg-root .sg-kern-b .l{font-size:13px!important;color:#5F5A52!important;margin-top:5px!important;line-height:1.45!important}

/* ---- PRIJSTABEL ---- */
.sg-root .sg-tabelwrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;
  border-radius:14px!important;box-shadow:0 5px 18px rgba(34,34,38,.12)!important}
.sg-root table{width:100%!important;border-collapse:collapse!important;background:#fff!important;
  border:1px solid var(--sg-rand)!important;border-radius:14px!important;overflow:hidden!important;
  min-width:640px!important}
.sg-root th{background:#EFE9DE!important;text-align:left!important;font-size:11px!important;
  letter-spacing:.1em!important;text-transform:uppercase!important;color:var(--sg-grijs)!important;
  font-weight:700!important;padding:15px 18px!important;border-bottom:1px solid var(--sg-rand)!important}
.sg-root td{padding:16px 18px!important;border-bottom:1px solid #E8E1D6!important;font-size:14.5px!important;
  vertical-align:top!important}
.sg-root tr:last-child td{border-bottom:0!important}
.sg-root td:first-child{font-weight:700!important}
.sg-root .sg-pr{white-space:nowrap!important;font-weight:700!important;color:var(--sg-koper)!important}
.sg-root .sg-uitleg{font-size:13px!important;color:#5F5A52!important;line-height:1.45!important}

/* ---- REKENHULP ---- */
.sg-root .sg-reken{background:#fff!important;border:1px solid var(--sg-rand)!important;
  border-radius:16px!important;padding:32px!important;
  box-shadow:0 8px 26px rgba(34,34,38,.13)!important}
.sg-root .sg-reken-rij{display:grid!important;grid-template-columns:1fr 1fr auto!important;
  gap:16px!important;align-items:end!important;margin-top:20px!important}
.sg-root .sg-reken label{display:block!important;font-size:12px!important;font-weight:700!important;
  letter-spacing:.06em!important;text-transform:uppercase!important;color:var(--sg-grijs)!important;
  margin-bottom:7px!important}
.sg-root .sg-reken input,.sg-root .sg-reken select{
  width:100%!important;padding:13px 15px!important;border:1px solid var(--sg-rand)!important;
  border-radius:9px!important;font-size:15px!important;font-family:'Inter',sans-serif!important;
  background:#FAF8F4!important;color:var(--sg-leisteen)!important;height:auto!important;margin:0!important}
.sg-root .sg-reken input:focus,.sg-root .sg-reken select:focus{
  outline:2px solid var(--sg-koper)!important;outline-offset:1px!important;background:#fff!important}
.sg-root .sg-uitkomst{margin-top:22px!important;padding-top:20px!important;
  border-top:1px solid var(--sg-rand)!important;display:flex!important;
  justify-content:space-between!important;align-items:center!important;gap:18px!important;flex-wrap:wrap!important}
.sg-root .sg-uitkomst .bedrag{font-family:'Archivo',sans-serif!important;font-weight:800!important;
  font-size:30px!important;color:var(--sg-leisteen)!important;line-height:1.1!important}
.sg-root .sg-uitkomst .toel{font-size:13px!important;color:var(--sg-zacht)!important;margin-top:4px!important}

/* ---- KOSTENPOSTEN ---- */
.sg-root .sg-posten{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:18px!important}
.sg-root .sg-post{background:#fff!important;border:1px solid var(--sg-rand)!important;
  border-radius:14px!important;padding:24px 22px!important;
  box-shadow:0 4px 14px rgba(34,34,38,.10)!important}
.sg-root .sg-post h3{font-size:16.5px!important;font-weight:800!important}
.sg-root .sg-post p{font-size:13.5px!important;color:#5F5A52!important;margin-top:7px!important;line-height:1.5!important}
.sg-root .sg-post .bedrag{font-size:14px!important;font-weight:700!important;color:var(--sg-koper)!important;
  margin-top:10px!important}

/* ---- FAQ ---- */
.sg-root details{background:#fff!important;border:1px solid var(--sg-rand)!important;
  border-radius:11px!important;margin-bottom:10px!important;
  box-shadow:0 3px 10px rgba(34,34,38,.08)!important}
.sg-root summary{cursor:pointer!important;padding:18px 20px!important;font-weight:600!important;
  font-size:15.5px!important;list-style:none!important}
.sg-root summary::-webkit-details-marker{display:none!important}
.sg-root details .a{padding:0 20px 20px!important;color:var(--sg-grijs)!important;font-size:14.5px!important}

/* ---- SLOT-CTA ---- */
.sg-root .sg-slot{display:flex!important;align-items:center!important;
  justify-content:space-between!important;gap:30px!important;flex-wrap:wrap!important}
.sg-root .sg-slot h2{font-size:clamp(22px,2.6vw,28px)!important;font-weight:800!important}

@media(max-width:900px){
  .sg-root.sg-sec{padding:40px 20px!important}
  .sg-root .sg-pr-hero{grid-template-columns:1fr!important;gap:26px!important}
  .sg-root .sg-reken-rij{grid-template-columns:1fr!important}
  .sg-root .sg-reken{padding:22px 18px!important}
  .sg-root .sg-posten{grid-template-columns:1fr!important}
  .sg-root .sg-btn{width:100%!important;text-align:center!important}
  .sg-root .sg-uitkomst{flex-direction:column!important;align-items:stretch!important}
}
@media(max-width:560px){
  .sg-root .sg-kern{grid-template-columns:1fr!important}
}

/* ---- overgenomen van de dienstpagina's, voor nieuwe pagina's ---- */
/* hero */
.sg-root .sg-d-hero{display:grid!important;grid-template-columns:1.1fr .9fr!important;
  gap:44px!important;align-items:center!important}
.sg-root .sg-d-hero h1{font-size:clamp(27px,3.8vw,40px)!important;font-weight:800!important;margin:14px 0 0!important}
.sg-root .sg-d-foto{border-radius:14px!important;overflow:hidden!important;
  border:1px solid rgba(0,0,0,.08)!important;box-shadow:0 12px 30px rgba(34,34,38,.16)!important}
.sg-root .sg-d-foto img{width:100%!important;height:300px!important;object-fit:cover!important}
/* kaarten */
.sg-root .sg-kaarten{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:18px!important}
/* stappen */
.sg-root .sg-stap{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:16px!important}
/* interne links */
.sg-root .sg-ook{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:12px!important}
.sg-root .sg-ook a{background:#fff!important;border:1px solid var(--sg-rand)!important;border-radius:11px!important;
  padding:16px 18px!important;font-size:14.5px!important;font-weight:700!important;
  color:var(--sg-leisteen)!important;display:block!important;
  box-shadow:0 3px 10px rgba(34,34,38,.08)!important;transition:all .16s ease!important}
.sg-root .sg-ook a:hover{border-color:var(--sg-koper)!important;color:var(--sg-koper)!important;
  transform:translateY(-3px)!important;box-shadow:0 12px 26px rgba(34,34,38,.15)!important}
.sg-root .sg-ook span{display:block!important;font-size:12.5px!important;font-weight:500!important;
  color:var(--sg-zacht)!important;margin-top:3px!important}
@media(max-width:900px) {
.sg-root .sg-d-hero{grid-template-columns:1fr!important;gap:26px!important}
.sg-root .sg-d-foto img{height:220px!important}
.sg-root .sg-kaarten{grid-template-columns:1fr!important}
.sg-root .sg-stap{grid-template-columns:1fr 1fr!important}
.sg-root .sg-ook{grid-template-columns:1fr 1fr!important}
}
@media(max-width:560px) {
.sg-root .sg-stap{grid-template-columns:1fr!important}
.sg-root .sg-ook{grid-template-columns:1fr!important}
}
.sg-root .sg-st{background:#fff!important;border:1px solid var(--sg-rand)!important;border-radius:14px!important;
  padding:22px 20px!important;box-shadow:0 4px 14px rgba(34,34,38,.10)!important}
.sg-root .sg-st .n{font-family:'Archivo',sans-serif!important;font-weight:800!important;
  font-size:26px!important;color:var(--sg-koper)!important;line-height:1!important}
.sg-root .sg-st h3{font-size:15.5px!important;font-weight:800!important;margin-top:9px!important}
.sg-root .sg-st p{font-size:13px!important;color:#5F5A52!important;margin-top:6px!important;line-height:1.5!important}

/* ---------- auteursregel onder de inleiding van een kennisartikel ---------- */
.sg-auteur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--sg-zacht);
}
.sg-auteur .naam {
  font-weight: 600;
  color: var(--sg-tekst);
}
.sg-auteur .punt {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}

/* ---------------- getekende schema's bij de kennisartikelen ---------------- */
.sg-root .sg-schema {
  margin: 30px 0 6px !important;
  max-width: 740px !important;
  background: #fff !important;
  border: 1px solid var(--sg-rand) !important;
  border-radius: 16px !important;
  padding: 24px 22px 18px !important;
}
/* De tekening en de legenda staan naast elkaar op een breed scherm en onder
   elkaar op een telefoon. De legenda is gewone HTML en geen SVG-tekst: anders
   schaalt hij mee met de tekening en wordt hij op een telefoon onleesbaar. */
.sg-root .sg-schema-in {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px 28px !important;
}
.sg-root .sg-schema svg {
  display: block !important;
  flex: 0 0 250px !important;
  width: 250px !important;
  max-width: 100% !important;
  height: auto !important;
  overflow: visible !important;
}
.sg-root .sg-schema-lg {
  flex: 1 1 250px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.sg-root .sg-schema-lg li {
  display: flex !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 10px 0 !important;
  border-top: 1px solid var(--sg-rand) !important;
}
.sg-root .sg-schema-lg li:first-child { border-top: 0 !important; padding-top: 0 !important; }
.sg-root .sg-schema-lg .kleur {
  flex: 0 0 20px !important;
  height: 20px !important;
  margin-top: 2px !important;
  border: 1px solid var(--sg-rand) !important;
  border-radius: 5px !important;
}
.sg-root .sg-schema-lg b { font-size: 14.5px !important; font-weight: 700 !important; }
.sg-root .sg-schema-lg .mm {
  color: var(--sg-koper) !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  white-space: nowrap !important;
}
.sg-root .sg-schema-lg em {
  display: block !important;
  font-style: normal !important;
  font-size: 13.5px !important;
  color: var(--sg-grijs) !important;
  margin-top: 2px !important;
  line-height: 1.45 !important;
}
.sg-root .sg-schema figcaption {
  margin-top: 16px !important;
  padding-top: 13px !important;
  border-top: 1px solid var(--sg-rand) !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: var(--sg-grijs) !important;
}
/* de tekst in de tekening volgt het paginalettertype */
.sg-schema text {
  font-family: 'Inter', system-ui, sans-serif;
  fill: var(--sg-leisteen);
}
.sg-schema .lbl { font-size: 13px; font-weight: 600; }
.sg-schema .nr { font-size: 12.5px; font-weight: 700; fill: #fff; }
.sg-schema .sub { font-size: 11.5px; fill: var(--sg-grijs); font-weight: 500; }
.sg-schema .maat { font-size: 11.5px; fill: var(--sg-koper); font-weight: 700; }
/* fill:none is hier geen detail: een pad met een knik erin wordt anders
   opgevuld en verschijnt als een zwart vlak in de tekening */
.sg-schema .lijn { stroke: var(--sg-rand); stroke-width: 1; fill: none; }
.sg-schema .leider { stroke: var(--sg-zacht); stroke-width: 1; stroke-dasharray: 2 2.5; fill: none; }
.sg-schema .accent { stroke: var(--sg-koper); stroke-width: 1.6; fill: none; }
.sg-schema .vlak { stroke: var(--sg-rand); stroke-width: 1; }

/* ---- genummerde legenda, voor tekeningen met 1/2/3 erin ---- */
.sg-root .sg-schema-lg .nr {
  flex: 0 0 22px !important;
  height: 22px !important;
  margin-top: 1px !important;
  border-radius: 50% !important;
  background: var(--sg-koper) !important;
  color: #fff !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ---- tijdlijn ----
   Bewust geen tekening: een tijdlijn met tekst erin schaalt op een telefoon
   mee naar onleesbaar. Dit blijft altijd op ware grootte staan. */
.sg-root .sg-tijdlijn {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  counter-reset: fase !important;
}
.sg-root .sg-tijdlijn li {
  position: relative !important;
  margin: 0 !important;
  padding: 0 0 22px 34px !important;
  border-left: 2px solid var(--sg-rand) !important;
  margin-left: 7px !important;
}
.sg-root .sg-tijdlijn li:last-child { padding-bottom: 0 !important; border-left-color: transparent !important; }
.sg-root .sg-tijdlijn li::before {
  content: '' !important;
  position: absolute !important;
  left: -8px !important; top: 3px !important;
  width: 14px !important; height: 14px !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 3px solid var(--sg-koper) !important;
}
.sg-root .sg-tijdlijn .wanneer {
  display: block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  color: var(--sg-koper) !important;
  margin-bottom: 3px !important;
}
.sg-root .sg-tijdlijn b { display: block !important; font-size: 15px !important; font-weight: 700 !important; }
.sg-root .sg-tijdlijn p {
  margin: 4px 0 0 !important;
  font-size: 14px !important;
  color: var(--sg-grijs) !important;
  max-width: 60ch !important;
}

/* ---- beslispad ---- */
.sg-root .sg-keuze { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.sg-root .sg-keuze > li { margin: 0 0 14px !important; padding: 0 !important; }
.sg-root .sg-keuze > li:last-child { margin-bottom: 0 !important; }
.sg-root .sg-keuze .vraag {
  display: block !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin-bottom: 9px !important;
}
.sg-root .sg-keuze .paden { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; }
.sg-root .sg-keuze .pad {
  flex: 1 1 210px !important;
  border: 1px solid var(--sg-rand) !important;
  border-left: 3px solid var(--sg-beton) !important;
  border-radius: 10px !important;
  padding: 11px 13px !important;
  background: #FBF9F5 !important;
}
.sg-root .sg-keuze .pad.raak { border-left-color: var(--sg-koper) !important; }
.sg-root .sg-keuze .pad .als {
  display: block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--sg-zacht) !important;
  margin-bottom: 4px !important;
}
.sg-root .sg-keuze .pad .dan { font-size: 14px !important; line-height: 1.5 !important; }

@media (max-width: 560px) {
  .sg-root .sg-schema { padding: 16px 13px 13px !important; border-radius: 13px !important; }
}