.elementor-kit-9{--e-global-color-primary:#0A0F1C;--e-global-color-secondary:#2F4059;--e-global-color-text:#F5F4F0;--e-global-color-accent:#C9873F;--e-global-color-8b0d31b:#141C30;--e-global-color-6d47c7e:#111D33;--e-global-color-e8b09b3:#9AA3B5;--e-global-color-6d80bd8:#6C7484;--e-global-color-45d016a:#141C30;--e-global-typography-primary-font-family:"Figtree";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Figtree";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Figtree";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Figtree";--e-global-typography-accent-font-weight:500;background-color:#080808;font-family:"Figtree", Sans-serif;font-size:15px;font-weight:400;}.elementor-kit-9 e-page-transition{background-color:#FFBC7D;}.site-header{background-color:#FFFFFF00;padding-inline-end:0px;padding-inline-start:0px;}.elementor-kit-9 h1{font-family:"Figtree", Sans-serif;font-size:48px;font-weight:900;font-style:italic;}.elementor-kit-9 h2{font-family:"Figtree", Sans-serif;font-size:30px;font-weight:900;}.elementor-kit-9 h3{font-family:"Figtree", Sans-serif;font-size:18px;font-weight:800;}.elementor-kit-9 h5{font-family:"Figtree", Sans-serif;}.elementor-kit-9 h6{font-family:"Figtree", Sans-serif;}.elementor-kit-9 button,.elementor-kit-9 input[type="button"],.elementor-kit-9 input[type="submit"],.elementor-kit-9 .elementor-button{font-family:"Figtree", Sans-serif;font-size:12.5px;font-weight:700;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1600px;}.e-con{--container-max-width:1600px;--container-default-padding-top:0%;--container-default-padding-right:0%;--container-default-padding-bottom:0%;--container-default-padding-left:0%;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;--container-default-padding-top:0%;--container-default-padding-right:8%;--container-default-padding-bottom:0%;--container-default-padding-left:8%;}}/* Start custom CSS *//* ===== Van Dijk Media & Design — site-brede Custom CSS (ronde 11) =====
   Dit vervangt ALLES wat nu in dit veld staat (dus ook het blok van
   ronde 10). Selecteer alles wat er nu staat, verwijder het, en plak dit
   ervoor in de plaats. */

/* ---- Lettertype: bulletproof Figtree overal ---- */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-counter-number,
.elementor-counter-title{
  font-family: 'Figtree', sans-serif !important;
}

/* ---- Knoppen: hover-gloed ---- */
.elementor-button{
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.elementor-button:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -8px rgba(201,135,63,.55);
  filter: brightness(1.06);
}
.elementor-button:active{
  transform: translateY(-1px);
}

/* ---- Kaarten (voordelen + pakketten): rust- én hover-schaduw komen
   uitsluitend uit deze class (Elementor's eigen "Box Shadow"-instelling
   staat hier bewust niet meer naast). Tussenruimte iets ruimer gemaakt
   (28px i.p.v. 24px) — in lichte modus stonden de kaarten er nog te
   "krap" bij (zie ook het lichte-thema-blok verderop, dat de kaarten nu
   een eigen, duidelijk zichtbare witte ondergrond geeft in plaats van
   een kleur die bijna gelijk was aan de paginakleur eromheen).
   RONDE 11: bovenop de bestaande schaduw komt er nu ook een ECHTE gloed
   ACHTER de kaart bij hover — een aparte, vervaagde (blur) kleurlaag via
   ::before, in plaats van alleen een verschoven/vergrote schaduw. Dat
   leest duidelijker als "gloed" dan een schaduw alleen. `position:
   relative` staat er expliciet bij (i.p.v. te vertrouwen op Elementor's
   eigen kolom-CSS) zodat de gloed altijd correct achter de kaart
   positioneert, ongeacht wat Elementor daar zelf aan stijl op zet.
   RONDE 11-CORRECTIE 3 (de daadwerkelijke oorzaak). De achtergrondkleur-
   fix uit correctie 1 loste het probleem niet op — de klant bleef de
   gloed ÓP het kaartvlak zien, en zag het vak bovendien verschuiven zodra
   een tweede kaart dezelfde klasse kreeg. Twee aparte, nu wél echt
   gevonden oorzaken:
   (a) de ":hover"-regel zette OOK "transform: translateY(-6px)" (de
   optil-beweging) op HETZELFDE element als de gloed-laag. Een CSS
   "transform" (zodra niet "none") dwingt een element altijd tot een
   eigen stapel-context ("stacking context"). Zolang dat niet gebeurt,
   tekent de gloed-laag (::before, z-index:-1) zich netjes ACHTER de hele
   kaart — precies zoals bedoeld. Zodra de kaart bij hover WEL een eigen
   stapel-context krijgt (door de transform), verandert de betekenis van
   diezelfde "z-index:-1": de laag tekent zich dan nog wél vóór de eigen
   achtergrond van de kaart, dus zichtbaar boven het vlak. Precies op het
   moment dat de gloed zichtbaar moet worden (bij hover) ontstaat dus ook
   de storing — bevestigd met een geïsoleerde test die exact dit gedrag
   reproduceerde. Fix: de optil-beweging gebeurt nu via "margin" i.p.v.
   "transform" — visueel identiek (de kaart komt evenveel omhoog), maar
   zonder een eigen stapel-context te forceren.
   (b) de regel ".vd-card-glow + .vd-card-glow{ margin-left: 28px }"
   verschoof een kaart met 28px zodra hij een "buurkaart" had die ook de
   klasse "vd-card-glow" draagt — bedoeld voor de vaste rij in het
   oorspronkelijke sjabloon, maar onverwacht (en ongewenst) zodra de
   klasse los, per kaart, handmatig wordt toegevoegd. Verwijderd; voor de
   tussenruimte tussen kaarten kunt u Elementor's eigen kolom/grid-
   afstand (Layout → Gap) gebruiken. ---- */
.vd-card-glow{
  position: relative;
  background-color: #F5F4F0;
  box-shadow: 0 22px 44px -16px rgba(201,135,63,.2);
  transition: margin-top .3s ease, box-shadow .3s ease, background-color .3s ease;
}
.vd-card-glow::before{
  content: '';
  position: absolute;
  inset: -16px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 42%, rgba(201,135,63,.55), transparent 68%);
  opacity: 0;
  filter: blur(22px);
  transition: opacity .35s ease;
  pointer-events: none;
}
.vd-card-glow:hover{
  margin-top: -6px;
  margin-bottom: 6px;
  box-shadow: 0 26px 50px -14px rgba(201,135,63,.38);
}
.vd-card-glow:hover::before{
  opacity: 1;
}
.vd-pkg-card{ display: flex; flex-direction: column; }
.vd-pkg-cta{ margin-top: auto !important; }
.vd-pkg-cta .elementor-button{ width: 100%; text-align: center; }

/* ---- Tellers (vertrouwens-band): gecentreerd + juiste gewichten ---- */
.elementor-widget-counter .elementor-counter{
  text-align: center !important;
}
.elementor-counter-number-wrapper{
  display: flex !important;
  justify-content: center !important;
}
.elementor-counter-number{
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums;
}
.elementor-counter-title{
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .6px;
}

/* ==========================================================================
   LICHT THEMA (v5) — automatisch, geen handmatige CSS-classes per sectie.
   Alle regels hieronder beginnen met "html body.vd-theme-light" i.p.v.
   alleen "body.vd-theme-light" — dat extra type-.elementor-kit-9-voorvoegsel geeft
   ze een fractie meer CSS-specificiteit dan Elementor's EIGEN, per-widget
   gegenereerde regels (die er intern net zo "zwaar" uitzien qua aantal
   classes). Zonder die extra duw kon het verliezen van die "eerlijke"
   specificiteits-wedstrijd verklaren waarom sommige kaarten/koppen in
   lichte modus niet meebewogen — dat blijft ongewijzigd t.o.v. ronde 9.
   ========================================================================== */

/* Sectie-achtergronden — overal behalve header, hero, marquee en footer
   (die vier gebruiken eigen, vast-gecodeerde donkere tekstkleuren die niet
   met de sectie meebewegen, dus zouden onleesbaar worden als de
   achtergrond wél omklapt). */
html body.vd-theme-light .elementor-section:not(:has(.vd-logo)):not(#hero-sectie):not(#marquee-sectie):not(:has(.vd-footer)){
  background: #F6F4EF !important;
  background-image: none !important;
}
html body.vd-theme-light .elementor-section:not(:has(.vd-logo)):not(#hero-sectie):not(#marquee-sectie):not(:has(.vd-footer)):nth-of-type(even){
  background: #EDE9E0 !important;
}
html body.vd-theme-light #vertrouwen{ background: #F6F4EF !important; background-image: none !important; }
html body.vd-theme-light #cta-klaar{ background: #EDE9E0 !important; background-image: none !important; }

/* Tekstkleuren — RONDE 10 FIX. Deze regel miste in ronde 9 dezelfde
   uitsluiting als de achtergrond-regel hierboven, en gold daardoor
   SITE-BREED — ook voor koppen in de hero, die hun eigen, altijd-donkere
   achtergrond gewoon behielden. Het gevolg: de H1 "Een website die staat"
   werd in licht thema gedwongen naar #111D33 (donkerblauw) terwijl zijn
   achtergrond donker bleef — donkerblauwe tekst op een donkere
   achtergrond, vrijwel onleesbaar ("de H1 is nog steeds blauw"). Nu staat
   dezelfde .elementor-section:not(:has(.vd-logo)):not(#hero-sectie):not(#marquee-sectie):not(:has(.vd-footer))-uitsluiting ook hier: de tekstkleur verandert
   voortaan ALLEEN binnen secties die ook echt van achtergrond wisselen. */
html body.vd-theme-light .elementor-section:not(:has(.vd-logo)):not(#hero-sectie):not(#marquee-sectie):not(:has(.vd-footer)) .elementor-heading-title,
html body.vd-theme-light .elementor-section:not(:has(.vd-logo)):not(#hero-sectie):not(#marquee-sectie):not(:has(.vd-footer)) .elementor-widget-text-editor,
html body.vd-theme-light .elementor-section:not(:has(.vd-logo)):not(#hero-sectie):not(#marquee-sectie):not(:has(.vd-footer)) .elementor-widget-text-editor p,
html body.vd-theme-light .elementor-section:not(:has(.vd-logo)):not(#hero-sectie):not(#marquee-sectie):not(:has(.vd-footer)) .elementor-counter-number,
html body.vd-theme-light .elementor-section:not(:has(.vd-logo)):not(#hero-sectie):not(#marquee-sectie):not(:has(.vd-footer)) .elementor-counter-title{
  color: #111D33 !important;
}

/* Knoppen binnen een omgeklapte sectie: sommige knop-varianten (bijv. de
   onderstreepte "Of neem contact op"-link in de CTA, of de link "Bekijk
   de volledige werkwijze") hadden een vast-gecodeerde LICHTE tekstkleur —
   die werd onleesbaar zodra hun sectie-achtergrond licht werd. Nu altijd
   een leesbare, donkere kleur binnen een omgeklapte sectie. */
html body.vd-theme-light .elementor-section:not(:has(.vd-logo)):not(#hero-sectie):not(#marquee-sectie):not(:has(.vd-footer)) .elementor-button,
html body.vd-theme-light #cta-klaar .elementor-button{
  color: #111D33 !important;
  border-color: rgba(17,29,51,.28) !important;
}

/* Kaarten: een duidelijk zichtbare witte ondergrond (i.p.v. het oude
   kalkwit-op-crème, twee tinten die bijna niet van elkaar te
   onderscheiden waren — vandaar de klacht dat de kaarten er "krap"/
   verdrukt bij stonden, want er was nauwelijks nog visueel onderscheid
   tussen kaart en pagina-achtergrond). */
html body.vd-theme-light .vd-card-glow{
  background-color: #FFFFFF !important;
  border: 1px solid rgba(17,29,51,.10);
  box-shadow: 0 18px 36px -16px rgba(17,29,51,.24) !important;
}
html body.vd-theme-light .vd-card-glow:hover{
  box-shadow: 0 22px 42px -14px rgba(17,29,51,.32) !important;
}

.elementor-popup-modal{
  transition: opacity .3s ease, display .3s allow-discrete;
}
.elementor-popup-modal[style*="display: none"]{
  opacity: 0;
}
.elementor-popup-modal .dialog-widget-content{
  transition: transform .32s cubic-bezier(.33,1,.68,1);
}
.elementor-popup-modal[style*="display: none"] .dialog-widget-content{
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,1,1);
}/* End custom CSS */