/* Opmaak voor de gidspagina's van watkosteenwarmtepomp.be.
   Kleuren komen uit de Elementor Kit, met eigen fallbacks. Koppen in
   Nunito Sans, lopende tekst in Lato. De banden koud -> warm zijn dezelfde
   als in de tool (wkw.css), want het is letterlijk dezelfde as. */

/* De variabelen staan op :root. Een klasse die je in Elementor op een
   container zet, komt niet in de HTML terecht; stonden ze daarop, dan was
   elke var() ongeldig en viel de hele opmaak weg. */
:root{

  --g-ink:      #1E1E1C;
  --g-muted:    #55606A;
  --g-line:     #DCE5EB;
  --g-primary:  #0387BE;
  --g-deep:     #006189;
  --g-deeper:   #00394F;
  --g-accent:   #BE151F;
  --g-accent-2: #EF1B28;
  --g-tint:     #E7EFF8;
  --g-sunken:   #F4F8FA;
  --g-offwhite: #FBF9F9;

  --g-a: #006189;   /* klaar          */
  --g-b: #0387BE;   /* bijna klaar    */
  --g-c: #C98A00;   /* hybride        */
  --g-d: #B4552E;   /* eerst isoleren */

  --g-head: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --g-body: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --g-ease: cubic-bezier(.16,1,.3,1);
  --g-r: 10px;

}

.wkw-gids,
.wkw-sectie{
  color: var(--g-ink);
  font-family: var(--g-body);
  font-size: 17px;
  line-height: 1.65;
}
.wkw-gids *, .wkw-sectie *{box-sizing:border-box}
.wkw-sectie{scroll-margin-top:84px}

/* browservlakken die we anders aan de browser laten */
.wkw-sectie ::selection{background:var(--g-tint);color:var(--g-ink)}
.wkw-sectie--diep ::selection{background:rgba(255,255,255,.22);color:#fff}
.wkw-sectie :focus-visible{outline:2px solid var(--g-primary);outline-offset:3px;border-radius:4px}
.wkw-sectie--diep :focus-visible{outline-color:#9FC6D9}

/* ---------- koppen en tekst ---------- */
.wkw-sectie h1,.wkw-sectie h2,.wkw-sectie h3,.wkw-sectie h4,
.wkw-gids h1,.wkw-gids h2,.wkw-gids h3,.wkw-gids h4{
  font-family:var(--g-head);color:var(--g-ink);line-height:1.18;
  text-wrap:balance;letter-spacing:-.018em}
.wkw-sectie h2,.wkw-gids h2{font-size:clamp(25px,3.6vw,33px);font-weight:900;margin:0 0 18px}
.wkw-sectie h3,.wkw-gids h3{font-size:clamp(19px,2.4vw,21px);font-weight:800;margin:34px 0 8px;
  letter-spacing:-.01em}
.wkw-sectie h3:first-child,.wkw-gids h3:first-child{margin-top:0}

.wkw-sectie p,.wkw-gids p{margin:0 0 17px;max-width:64ch}
.wkw-sectie p:last-child,.wkw-gids p:last-child{margin-bottom:0}
.wkw-sectie a,.wkw-gids a{color:var(--g-deep);text-underline-offset:3px;
  text-decoration-thickness:1px;transition:color .15s var(--g-ease)}
.wkw-sectie a:hover,.wkw-gids a:hover{color:var(--g-primary)}
.wkw-sectie strong,.wkw-gids strong{font-weight:700}

/* ---------- secties ---------- */
.wkw-sectie--diep,
.wkw-sectie--diep h2,.wkw-sectie--diep h3,
.wkw-sectie--diep p,.wkw-sectie--diep li{color:#fff}
.wkw-sectie--diep a{color:#BBDCEC;text-decoration-color:rgba(187,220,236,.5)}
.wkw-sectie--diep a:hover{color:#fff}
.wkw-sectie--diep .wkw-sub{color:#B9D9E8}

.wkw-sub{color:var(--g-muted);font-size:15.5px}

/* ---------- gidspagina's zonder secties (296, 298) ---------- */
/* Daar staan de koppen als losse widgets onder elkaar, dus die hebben
   zelf wat lucht boven zich nodig. */
.wkw-gids h2{margin-top:44px}
.wkw-gids h3{margin-top:30px}
.wkw-gids h2:first-child,.wkw-gids h3:first-child{margin-top:0}

/* openingsblok bovenaan een gidspagina */
.antwoordblok{
  font-size:18.5px;line-height:1.55;color:var(--g-ink);
  background:var(--g-tint);border:1px solid #CFE0EE;border-radius:12px;
  padding:22px 26px;margin:0 0 32px;max-width:72ch}
.antwoordblok strong{display:block;margin-bottom:8px;
  font-family:var(--g-head);font-weight:800;font-size:20px;
  line-height:1.3;letter-spacing:-.018em}

/* ---------- hero ---------- */
.wkw-hero h1{
  font-size:clamp(32px,5.4vw,52px);font-weight:900;color:#fff;
  margin:0 0 20px;letter-spacing:-.03em;max-width:16ch}
.wkw-hero .wkw-lead{font-size:clamp(17px,1.9vw,20px);line-height:1.65;
  color:#fff;margin:0 0 34px;max-width:54ch}
.wkw-hero .wkw-lead strong{color:#fff;font-weight:700}

/* knop */
.wkw-knop{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--g-head);font-weight:800;font-size:18px;letter-spacing:-.005em;
  background:var(--g-accent);color:#fff;text-decoration:none;
  padding:16px 28px;border-radius:8px;border:0;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,30,45,.28);
  transition:background .16s var(--g-ease), transform .16s var(--g-ease),
             box-shadow .16s var(--g-ease)}
.wkw-knop:hover{background:var(--g-accent-2);color:#fff;transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(0,30,45,.34)}
.wkw-knop:active{transform:translateY(0);box-shadow:0 4px 12px rgba(0,30,45,.28)}
.wkw-knop svg{width:17px;height:17px;flex:none}
.wkw-knop--licht{background:var(--g-deep);box-shadow:0 6px 18px rgba(0,60,90,.18)}
.wkw-knop--licht:hover{background:var(--g-primary)}
.wkw-naknop{margin:14px 0 0;font-size:14.5px;color:#B9D9E8;max-width:40ch}

/* ---------- de schaal met de vier banden ---------- */
.wkw-schaal{
  background:#fff;border-radius:14px;padding:26px 26px 22px;
  box-shadow:0 18px 44px rgba(0,30,45,.26), 0 2px 6px rgba(0,30,45,.14)}
.wkw-schaal-kop{
  font-family:var(--g-head);font-weight:800;font-size:13px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--g-muted);margin:0 0 18px !important}
.wkw-banden{margin:0;padding:0;display:grid;gap:18px}
.wkw-banden .band{display:grid;grid-template-columns:10px 1fr;
  column-gap:16px;row-gap:0;align-items:start;margin:0;padding:0}
.wkw-banden .t,.wkw-banden .n,.wkw-banden .d{grid-column:2}

/* De balk is een echt element. Een ::before zou door de Kit overschreven
   worden met een Font Awesome-vinkje. */
.wkw-banden .balk{grid-column:1;grid-row:1 / 4;align-self:stretch;
  width:10px;min-height:46px;border-radius:5px;
  background:linear-gradient(to bottom, var(--band), var(--band-licht))}

.wkw-banden .t{justify-self:start;display:inline-block;
  background:var(--band-tint);color:var(--band-ink);
  padding:3px 10px;border-radius:999px;
  font-family:var(--g-head);font-weight:800;font-size:12.5px;
  letter-spacing:.02em;font-variant-numeric:tabular-nums}
.wkw-banden .n{font-family:var(--g-head);font-weight:900;font-size:19px;
  color:var(--g-ink);letter-spacing:-.015em;line-height:1.2;margin-top:7px}
.wkw-banden .d{font-size:14.5px;line-height:1.5;color:var(--g-muted);margin-top:4px;
  max-width:40ch}

.wkw-banden .b-a{--band:#006189;--band-licht:#2E86AC;--band-tint:#E2EEF4;--band-ink:#006189}
.wkw-banden .b-b{--band:#0387BE;--band-licht:#49ABD6;--band-tint:#E3F1F8;--band-ink:#01638C}
.wkw-banden .b-c{--band:#C98A00;--band-licht:#E0AE3C;--band-tint:#FBF1DC;--band-ink:#8A5F00}
.wkw-banden .b-d{--band:#B4552E;--band-licht:#CE7D5A;--band-tint:#F8E9E2;--band-ink:#8F4223}

.wkw-schaal-voet{margin:22px 0 0 !important;padding-top:16px;
  border-top:1px solid var(--g-line);font-size:13.5px;color:var(--g-muted)}

/* het ene gestuurde moment: de balken groeien uit bij het laden */
@keyframes wkw-groei{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion:no-preference){
  .wkw-banden .balk{transform-origin:top;animation:wkw-groei .7s var(--g-ease) backwards}
  .wkw-banden .b-a .balk{animation-delay:.10s}
  .wkw-banden .b-b .balk{animation-delay:.18s}
  .wkw-banden .b-c .balk{animation-delay:.26s}
  .wkw-banden .b-d .balk{animation-delay:.34s}
}

/* ---------- tweeluik ---------- */
.wkw-duo h3{margin-top:0}
.wkw-duo p{max-width:46ch}

/* ---------- stappen ---------- */
.wkw-stappen{margin:30px 0 4px;padding:0;display:grid;gap:22px}
.wkw-stappen .stap{display:grid;grid-template-columns:34px 1fr;
  column-gap:16px;row-gap:0;align-items:start;margin:0;padding:0}
.wkw-stappen b,.wkw-stappen > .stap > span:not(.nr){grid-column:2}
.wkw-stappen .nr{grid-column:1;grid-row:1 / 3;
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--g-head);font-weight:800;font-size:15px;line-height:1;
  background:rgba(255,255,255,.16);color:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
.wkw-stappen b{display:block;color:#fff;font-family:var(--g-head);font-weight:800;font-size:18px;
  letter-spacing:-.01em;margin-bottom:4px}
.wkw-stappen .stap > span:not(.nr){display:block;font-size:16px;line-height:1.6;
  color:#fff;max-width:54ch}

/* ---------- genuanceerde opmerking ---------- */
.wkw-noot{background:var(--g-sunken);border:1px solid var(--g-line);
  border-radius:var(--g-r);padding:18px 22px;margin:26px 0 0}
.wkw-noot p{font-size:15.5px;color:var(--g-muted);max-width:62ch}
.wkw-sectie--diep .wkw-noot{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.wkw-sectie--diep .wkw-noot p{color:#CFE4EE}

/* ---------- lijsten ---------- */
.wkw-sectie ul:not([class]),.wkw-gids ul:not([class]),
.wkw-sectie ol:not([class]),.wkw-gids ol:not([class]){margin:0 0 18px;padding-left:22px;max-width:66ch}
.wkw-sectie li,.wkw-gids li{margin-bottom:8px}
.wkw-sectie ul:not([class]) li::marker,.wkw-gids ul:not([class]) li::marker{color:var(--g-primary)}

/* ---------- tabel ---------- */
.wkw-tabel{
  overflow-x:auto;-webkit-overflow-scrolling:touch;margin:26px 0;
  border:1px solid var(--g-line);border-radius:12px;background:#fff;
  box-shadow:0 1px 2px rgba(0,30,45,.05)}
.wkw-tabel table{display:table;width:100%;margin:0;font-size:16px;
  border-collapse:separate;border-spacing:0;border:0}
.wkw-tabel thead th{
  background:var(--g-tint);color:var(--g-ink);font-family:var(--g-head);
  font-weight:800;font-size:13px;letter-spacing:.05em;text-transform:uppercase;
  text-align:left;padding:13px 18px;white-space:nowrap;
  border-bottom:1px solid var(--g-line)}
.wkw-tabel tbody td{padding:13px 18px;border-bottom:1px solid var(--g-line);
  vertical-align:top;font-variant-numeric:tabular-nums}
.wkw-tabel tbody tr:last-child td{border-bottom:0}
.wkw-tabel tbody tr:hover td{background:rgba(231,239,248,.55)}
.wkw-tabel::-webkit-scrollbar{height:8px}
.wkw-tabel::-webkit-scrollbar-track{background:var(--g-sunken)}
.wkw-tabel::-webkit-scrollbar-thumb{background:var(--g-line);border-radius:8px}
.wkw-tabel{scrollbar-width:thin;scrollbar-color:var(--g-line) var(--g-sunken)}

/* ---------- accordeon (Elementor nested-accordion) ----------
   Elementor stuurt deze widget volledig met eigen variabelen aan:

     .elementor-widget-n-accordion .e-n-accordion-item-title{
       justify-content:var(--n-accordion-title-justify-content);
       padding:var(--n-accordion-padding); ... }

   Een eigen justify-content of order verliest het van die regel, of wint
   alleen per toeval op volgorde. Daarom zetten we de variabelen zelf. De
   standaard icon-order is -1, dus het plusje staat vóór de titel en de titel
   wordt naar rechts geduwd. Met order 2 en flex-grow 1 staat de titel links
   en het icoon rechts.

   Dit geldt voor elke accordeon op de site, niet alleen op deze pagina. */
.elementor-widget-n-accordion{
  --n-accordion-title-justify-content:flex-start;
  --n-accordion-title-flex-grow:1;
  --n-accordion-item-title-flex-grow:1;
  --n-accordion-title-icon-order:2;
  --n-accordion-title-font-size:17.5px;
  --n-accordion-padding:18px 22px;
  --n-accordion-item-title-space-between:14px;
  --n-accordion-item-title-distance-from-content:0px;
  --n-accordion-border-width:1px;
  --n-accordion-border-style:solid;
  --n-accordion-border-color:var(--g-line);
  --n-accordion-border-radius:10px;
  --n-accordion-icon-size:15px;
  --n-accordion-icon-gap:14px;
  --n-accordion-icon-normal-color:var(--g-primary);
  --n-accordion-icon-hover-color:var(--g-deep);
  --n-accordion-icon-active-color:var(--g-deep);
  --n-accordion-title-normal-color:var(--g-ink);
  --n-accordion-title-hover-color:var(--g-deep);
  --n-accordion-title-active-color:var(--g-ink)}

.elementor-widget-n-accordion .e-n-accordion-item{background:#fff;border-radius:10px}
.elementor-widget-n-accordion .e-n-accordion-item-title{
  cursor:pointer;text-align:left;
  transition:border-color .18s var(--g-ease), background .18s var(--g-ease)}
.elementor-widget-n-accordion .e-n-accordion-item-title:hover{background:var(--g-sunken)}
.elementor-widget-n-accordion .e-n-accordion-item-title::-webkit-details-marker{display:none}
.elementor-widget-n-accordion .e-n-accordion-item-title::marker{content:""}
.elementor-widget-n-accordion .e-n-accordion-item-title-text,
.elementor-widget-n-accordion .e-n-accordion-item-title-header{
  text-align:left;
  font-family:var(--g-head) !important;font-weight:800 !important;
  line-height:1.35;letter-spacing:-.012em;margin:0}
.elementor-widget-n-accordion .e-n-accordion-item-title-icon{
  /* het icoon naar de rechterkant duwen, los van de flex-grow-variabelen */
  margin-inline-start:auto;transition:transform .22s var(--g-ease)}
.elementor-widget-n-accordion .e-n-accordion-item[open] .e-n-accordion-item-title-icon{
  transform:rotate(180deg)}
.elementor-widget-n-accordion .e-n-accordion-item > .e-con,
.elementor-widget-n-accordion .e-n-accordion-item > .e-con > .e-con-inner{
  padding:4px 22px 20px}
.elementor-widget-n-accordion .e-n-accordion-item p{
  font-size:16px;line-height:1.65;color:var(--g-muted);max-width:66ch;text-align:left}

/* ---------- slotblok ---------- */
.wkw-slot p{max-width:56ch}

@media (max-width:767px){
  .wkw-sectie,.wkw-gids{font-size:16px}
  .wkw-schaal{padding:22px 20px 18px}
  .wkw-banden .n{font-size:18px}
  .wkw-knop{width:100%;justify-content:center}
  .wkw-knop-el .elementor-button{width:100%;justify-content:center}
  .wkw-stappen{margin-top:24px}
  .wkw-naknop{max-width:none}
}

/* =====================================================================
   Elementor-overrides

   De Elementor Kit en de paginastijl zetten zelf een lettertype, korps en
   kleur op koppen, lopende tekst en knoppen. Die selectors zijn specifieker
   dan een gewone h2 of p:

     .elementor-widget-heading .elementor-heading-title   kleur + font + korps
     .elementor-kit-8 h2                                  Playfair Display
     .elementor-widget-text-editor                        Lato 16px
     .elementor-kit-8 button:hover                        witte knop, witte tekst

   Daarom staan onze eigen waarden hieronder nog eens, diep genoeg om te
   winnen. Pas je hier iets aan, pas het dan ook hierboven aan.
   ===================================================================== */

/* koppen in heading-widgets */
.wkw-sectie .elementor-widget-heading .elementor-heading-title,
.wkw-gids .elementor-widget-heading .elementor-heading-title,
.wkw-sectie .elementor-widget-text-editor :is(h1,h2,h3,h4),
.wkw-gids .elementor-widget-text-editor :is(h1,h2,h3,h4){
  font-family:var(--g-head);color:var(--g-ink);
  line-height:1.18;letter-spacing:-.018em;text-wrap:balance}

.wkw-sectie .elementor-widget-heading h1.elementor-heading-title,
.wkw-gids .elementor-widget-heading h1.elementor-heading-title,
.wkw-sectie .elementor-widget-text-editor h1,
.wkw-gids .elementor-widget-text-editor h1{
  font-size:clamp(30px,4.4vw,40px);font-weight:900;letter-spacing:-.028em}

.wkw-sectie .elementor-widget-heading h2.elementor-heading-title,
.wkw-gids .elementor-widget-heading h2.elementor-heading-title,
.wkw-sectie .elementor-widget-text-editor h2,
.wkw-gids .elementor-widget-text-editor h2{
  font-size:clamp(25px,3.6vw,33px);font-weight:900}

.wkw-sectie .elementor-widget-heading h3.elementor-heading-title,
.wkw-gids .elementor-widget-heading h3.elementor-heading-title,
.wkw-sectie .elementor-widget-text-editor h3,
.wkw-gids .elementor-widget-text-editor h3{
  font-size:clamp(19px,2.4vw,21px);font-weight:800;letter-spacing:-.01em}

/* de hero-kop is het enige echt grote korps op de pagina */
.wkw-hero .elementor-widget-heading h1.elementor-heading-title{
  font-size:clamp(32px,5.4vw,52px);font-weight:900;color:#fff;
  letter-spacing:-.03em;max-width:16ch;margin:0 0 20px}

/* witte koppen op de donkere secties */
.wkw-sectie--diep .elementor-widget-heading .elementor-heading-title,
.wkw-sectie--diep .elementor-widget-text-editor :is(h1,h2,h3,h4){color:#fff}

/* lopende tekst: korps en lettertype van de tekstwidget zelf */
.wkw-sectie .elementor-widget-text-editor,
.wkw-gids .elementor-widget-text-editor{
  font-family:var(--g-body);font-size:17px;line-height:1.65;color:var(--g-ink)}
.wkw-sectie--diep .elementor-widget-text-editor{color:#fff}
.wkw-hero .elementor-widget-text-editor,
.wkw-hero .elementor-widget-text-editor .wkw-lead,
.wkw-hero .wkw-lead{font-size:clamp(17px,1.9vw,20px);line-height:1.65;color:#fff}

/* de witte kaart in de hero houdt haar eigen kleuren */
.wkw-sectie--diep .elementor-widget-text-editor .wkw-schaal p,
.wkw-sectie--diep .elementor-widget-text-editor .wkw-schaal .d{color:var(--g-muted)}
.wkw-sectie--diep .elementor-widget-text-editor .wkw-schaal .n{color:var(--g-ink)}
.wkw-sectie--diep .elementor-widget-text-editor .wkw-schaal .t{color:var(--band)}

/* knopwidget: de Kit maakt hem bij hover wit op wit */
.wkw-sectie .wkw-knop-el a.elementor-button{
  background-color:var(--g-accent);color:#fff;
  font-family:var(--g-head);font-weight:800;font-size:18px;
  border-radius:8px;padding:16px 28px;
  box-shadow:0 6px 18px rgba(0,30,45,.28);
  transition:background-color .16s var(--g-ease), transform .16s var(--g-ease),
             box-shadow .16s var(--g-ease)}
.wkw-sectie .wkw-knop-el a.elementor-button:hover,
.wkw-sectie .wkw-knop-el a.elementor-button:focus{
  background-color:var(--g-accent-2);color:#fff;transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(0,30,45,.34)}
.wkw-slot .wkw-knop-el a.elementor-button{
  background-color:var(--g-deep);box-shadow:0 6px 18px rgba(0,60,90,.18)}
.wkw-slot .wkw-knop-el a.elementor-button:hover,
.wkw-slot .wkw-knop-el a.elementor-button:focus{
  background-color:var(--g-primary);box-shadow:0 10px 24px rgba(0,60,90,.24)}

@media (max-width:767px){
  .wkw-sectie .elementor-widget-text-editor,
  .wkw-gids .elementor-widget-text-editor{font-size:16px}
  .wkw-sectie .wkw-knop-el a.elementor-button{width:100%;justify-content:center}
}

/* het thema zet li::before op position:absolute voor zijn eigen opsommings-
   tekens; onze banden en stappen tekenen hun eigen kolom, dus die moet
   gewoon in de grid blijven staan */
/* De Custom CSS van de Kit zet op elk li in een tekstblok een Font
   Awesome-vinkje met !important. Daarom gebruiken de banden en de stappen
   geen ul/ol meer maar divs met role=list. Voor gewone opsommingen in de
   lopende tekst laten we die vinkjes staan, dat is de stijl van de site. */
/* tekst onder de hero-knop */
.wkw-sectie--diep .elementor-widget-text-editor p.wkw-naknop{
  color:#B9D9E8;font-size:14.5px;margin:14px 0 0;max-width:46ch}

/* ---------- lucht in de hero ----------
   De kop, de inleiding, de knop en het regeltje eronder zijn vier aparte
   Elementor-widgets. De tussenruimte zetten we hier, niet in de builder,
   zodat ze samen blijft met de rest van de opmaak. */
.wkw-hero .elementor-widget-heading{margin-bottom:26px}
.wkw-hero .elementor-widget-text-editor.wkw-lead{margin-bottom:34px}
.wkw-hero .wkw-knop-el{margin:0}
.wkw-hero .elementor-widget-text-editor p.wkw-naknop{margin-top:22px}
.wkw-sectie--diep .elementor-widget-text-editor .wkw-lead,
.wkw-hero .elementor-widget-text-editor p{color:#fff}
.wkw-sectie--diep .elementor-widget-text-editor p.wkw-naknop{color:#B9D9E8}

/* =====================================================================
   De Custom CSS in de Elementor Kit gebruikt !important op koppen in
   tekstblokken en op knoppen:

     .elementor-widget-text-editor h2 { font-family: ... !important }
     .elementor-widget-text-editor h3 { font-family: ... !important }

   Zolang dat zo staat, moeten onze regels daar hetzelfde doen. Wordt de
   Custom CSS ooit opgeruimd, dan mag dit blok weg.
   ===================================================================== */
.wkw-sectie .elementor-widget-text-editor h2,
.wkw-gids .elementor-widget-text-editor h2{
  font-family:var(--g-head) !important;
  font-size:clamp(25px,3.6vw,33px) !important;font-weight:900 !important}
.wkw-sectie .elementor-widget-text-editor h3,
.wkw-gids .elementor-widget-text-editor h3{
  font-family:var(--g-head) !important;
  font-size:clamp(19px,2.4vw,21px) !important;font-weight:800 !important}

/* witte tekst op de donkere secties, ook tegen !important in */
.wkw-sectie--diep .elementor-widget-heading .elementor-heading-title,
.wkw-sectie--diep .elementor-widget-text-editor h2,
.wkw-sectie--diep .elementor-widget-text-editor h3,
.wkw-sectie--diep .elementor-widget-text-editor p,
.wkw-sectie--diep .elementor-widget-text-editor b,
.wkw-sectie--diep .elementor-widget-text-editor span{color:#fff !important}
.wkw-sectie--diep .elementor-widget-text-editor p.wkw-naknop{color:#B9D9E8 !important}
.wkw-sectie--diep .wkw-stappen .stap > span:not(.nr){color:#CFE4EE !important}
.wkw-sectie--diep .wkw-noot p{color:#CFE4EE !important}

/* de witte kaart in de hero houdt haar eigen kleuren */
.wkw-sectie--diep .wkw-schaal p,
.wkw-sectie--diep .wkw-schaal .d{color:var(--g-muted) !important}
.wkw-sectie--diep .wkw-schaal .n{color:var(--g-ink) !important}
.wkw-sectie--diep .wkw-schaal .t{color:var(--band-ink) !important}
.wkw-sectie--diep .wkw-schaal .wkw-schaal-kop{color:var(--g-muted) !important}

/* De klassen op een Elementor-container komen niet in de HTML terecht, dus
   een blok dat op een donkere grond staat draagt zijn eigen modifier. */
.wkw-noot--diep{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.wkw-noot--diep p{color:#fff}