.elementor-kit-8318{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-8318 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.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);}@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;}}
/* Start custom CSS *//* ==================================================
   DIGIMINGO KNOPPEN — PREMIUM MAT GLAS 3D
   Geldt voor alle CTA-knoppen + formulierknop.
   Uitzondering: widgets met klasse .dm-btn-plain
   (footer-navigatie/juridische links) blijven plat.
   Aanpasbaar: --dm-btn-a/-b (gradient), --dm-btn-glow
   ================================================== */
:root{
  --dm-btn-a: 244,0,185;   /* magenta */
  --dm-btn-b: 154,0,210;   /* paars   */
  --dm-btn-glow: 244,0,185;
  --dm-btn-speed: .28s;
}
.elementor-widget-button:not(.dm-btn-plain) .elementor-button,
.elementor-form button.elementor-button{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-image: linear-gradient(135deg, rgba(var(--dm-btn-a),.94) 0%, rgba(192,0,200,.94) 48%, rgba(var(--dm-btn-b),.94) 100%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  backdrop-filter: blur(10px) saturate(1.15);
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -2px 3px rgba(30,0,45,.35),
    0 10px 24px -8px rgba(var(--dm-btn-glow),.45),
    0 3px 8px rgba(0,0,0,.28);
  transition: transform var(--dm-btn-speed) cubic-bezier(.22,1,.36,1), box-shadow var(--dm-btn-speed) ease, filter var(--dm-btn-speed) ease;
  will-change: transform;
}
.elementor-widget-button:not(.dm-btn-plain) .elementor-button > *,
.elementor-form button.elementor-button > *{
  position: relative;
  z-index: 2;
}
/* glans-sweep bij hover (micro-interactie) */
.elementor-widget-button:not(.dm-btn-plain) .elementor-button::after,
.elementor-form button.elementor-button::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.38) 48%, rgba(255,255,255,.12) 54%, transparent 68%);
  transform: translateX(-130%);
  pointer-events: none;
}
.elementor-widget-button:not(.dm-btn-plain) .elementor-button:hover::after,
.elementor-form button.elementor-button:hover::after{
  transform: translateX(130%);
  transition: transform .7s cubic-bezier(.4,0,.2,1);
}
/* hover: lift + diepere gloed */
.elementor-widget-button:not(.dm-btn-plain) .elementor-button:hover,
.elementor-form button.elementor-button:hover{
  transform: translateY(-2px) scale(1.015);
  filter: brightness(1.06) saturate(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.36),
    inset 0 -2px 3px rgba(30,0,45,.3),
    0 16px 34px -10px rgba(var(--dm-btn-glow),.55),
    0 6px 14px rgba(0,0,0,.3);
}
/* active: ingedrukt (3D press) */
.elementor-widget-button:not(.dm-btn-plain) .elementor-button:active,
.elementor-form button.elementor-button:active{
  transform: translateY(1px) scale(.985);
  filter: brightness(.97);
  box-shadow:
    inset 0 2px 6px rgba(30,0,45,.45),
    0 4px 10px -4px rgba(var(--dm-btn-glow),.4);
  transition-duration: .09s;
}
/* toetsenbord-focus */
.elementor-widget-button:not(.dm-btn-plain) .elementor-button:focus-visible,
.elementor-form button.elementor-button:focus-visible{
  outline: 2px solid #34F6F2;
  outline-offset: 3px;
}
/* light mode: zachtere schaduwen */
html[data-theme="light"] .elementor-widget-button:not(.dm-btn-plain) .elementor-button,
html[data-theme="light"] .elementor-form button.elementor-button{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -2px 3px rgba(90,0,120,.2),
    0 10px 22px -10px rgba(var(--dm-btn-glow),.32),
    0 2px 6px rgba(40,10,60,.14);
}
html[data-theme="light"] .elementor-widget-button:not(.dm-btn-plain) .elementor-button:hover,
html[data-theme="light"] .elementor-form button.elementor-button:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 3px rgba(90,0,120,.18),
    0 14px 30px -12px rgba(var(--dm-btn-glow),.4),
    0 5px 12px rgba(40,10,60,.16);
}
/* respecteer bewegingsvoorkeur */
@media (prefers-reduced-motion: reduce){
  .elementor-widget-button:not(.dm-btn-plain) .elementor-button,
  .elementor-widget-button:not(.dm-btn-plain) .elementor-button::after,
  .elementor-form button.elementor-button,
  .elementor-form button.elementor-button::after{ transition: none !important; }
  .elementor-widget-button:not(.dm-btn-plain) .elementor-button:hover,
  .elementor-form button.elementor-button:hover{ transform: none; }
}

/* ==================================================
   DIGIMINGO KAART-CTA — TEKSTLINK MET PIJL
   Voor knop-widgets met klasse .dm-btn-cta-text
   (+ .dm-btn-plain zodat de pill-stijl niet geldt).
   Verfijnde tekst-CTA: pijl schuift mee, gradient-
   underline groeit bij hover.
   ================================================== */
.dm-btn-cta-text .elementor-button{
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: .35em .1em !important;
  border-radius: 0 !important;
  color: #34F6F2 !important;
  font-weight: 600;
  text-decoration: none !important;
  position: relative;
  overflow: visible;
  transition: color .25s ease;
}
html[data-theme="light"] .dm-btn-cta-text .elementor-button{
  color: #0B8F8C !important;
}
/* groeiende gradient-underline */
.dm-btn-cta-text .elementor-button::before{
  content: "";
  position: absolute;
  left: 0; right: auto; bottom: 0;
  height: 2px; width: 100%;
  background: linear-gradient(90deg, #F400B9, #34F6F2);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.dm-btn-cta-text .elementor-button:hover::before,
.dm-btn-cta-text .elementor-button:focus-visible::before{
  transform: scaleX(1);
}
/* pijl schuift mee */
.dm-btn-cta-text .elementor-button .elementor-button-icon{
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.dm-btn-cta-text .elementor-button:hover .elementor-button-icon,
.dm-btn-cta-text .elementor-button:focus-visible .elementor-button-icon{
  transform: translateX(5px);
}
.dm-btn-cta-text .elementor-button:hover{
  color: #F400B9 !important;
}
html[data-theme="light"] .dm-btn-cta-text .elementor-button:hover{
  color: #C4009A !important;
}
.dm-btn-cta-text .elementor-button:focus-visible{
  outline: 2px solid #34F6F2;
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce){
  .dm-btn-cta-text .elementor-button::before,
  .dm-btn-cta-text .elementor-button .elementor-button-icon{ transition: none !important; }
}

/* Kaart-CTA: pijl volgt tekstkleur bij hover (was wit door oude widget-instelling) */
.dm-btn-cta-text .elementor-button:hover .elementor-button-icon i,
.dm-btn-cta-text .elementor-button:focus-visible .elementor-button-icon i{ color: inherit !important; }
.dm-btn-cta-text .elementor-button:hover .elementor-button-icon svg,
.dm-btn-cta-text .elementor-button:focus-visible .elementor-button-icon svg{ fill: currentColor !important; }

/* ===== Digimingo Global System — toegevoegd via Cowork (2026-07-24) ===== */

/* Merk-gradient tekst (magenta -> cyan) */
.grad-text, .digimingo-grad-text {
  background: linear-gradient(100deg, var(--e-global-color-primary) 0%, var(--e-global-color-accent) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Eyebrow / label (alternatief voor H6) */
.eyebrow {
  font-family: "Poppins", sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--e-global-color-accent);
}

/* Secundaire / ghost pill-knop (voor donkere secties) */
.elementor-button.btn-ghost {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.22); color: #fff;
}
.elementor-button.btn-ghost:hover {
  border-color: var(--e-global-color-accent); color: var(--e-global-color-accent);
}

/* Donkere sectie-helper (radial navy) voor toekomstige secties */
.section-dark { background: radial-gradient(at 100% 0%, #241B33 0%, var(--e-global-color-darkbg) 70%); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4, .section-dark h5 { color: var(--e-global-color-hlight); }
.section-dark p, .section-dark li { color: var(--e-global-color-bmuted); }

/* Toegankelijke focus + selectie in merkkleur */
a:focus-visible, button:focus-visible, .elementor-button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--e-global-color-secondary); outline-offset: 2px;
}
::selection { background: var(--e-global-color-primary); color: #fff; }
/* ===== /Digimingo Global System ===== */

/* Content-links: underline on hover (toegankelijkheid) */
.elementor-widget-text-editor a:hover,
.elementor-widget-theme-post-content a:hover,
article .entry-content a:hover { text-decoration: underline; }

/* ============================================================
   DFX DESIGNSYSTEEM HERSTEL  --  toegevoegd 26/07/2026
   Reden: de .dfx-* klassen stonden wel in de markup maar hadden
   geen enkele stijlregel. Alles hieronder is token-gedreven
   (var(--dm-*)), zodat dark en light mode automatisch kloppen.
   ============================================================ */

/* 1. Secties volgen de theme-token i.p.v. een vaste hex.
      Zonder dit blijft de pagina donker in light mode. */
body.elementor-page-5744 .elementor-5744 > .e-con{
  background-color: var(--dm-page) !important;
}

/* 2. Koppen volgen de tokens + duidelijke stap H1 > H2 > eyebrow */
.dfx-h1 .elementor-heading-title{ color: var(--dm-heading); }
.dfx-h2 .elementor-heading-title{
  color: var(--dm-heading);
  font-size: 40px;
  line-height: 1.14;
  letter-spacing: -.5px;
}
.dfx-center{ text-align: center; }

/* 3. Eyebrow: was 46px in #1B252F (contrast 1,21:1). */
.dfx-eyebrow .elementor-heading-title{
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dm-cyan) !important;
}

/* 4. Gradient-tekst. Bewust --dm-magenta/--dm-cyan: die flippen
      mee met het thema, --dm-grad-* niet. */
.dfx-g{
  background-image: linear-gradient(92deg, var(--dm-magenta), var(--dm-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* 5. Chips onder de hero stonden op #333 (contrast 1,49:1). */
.dfx-chip,
.dfx-chip .elementor-heading-title{ color: var(--dm-muted) !important; }

/* 6. HTML-widgets mogen niet inklappen in een flex-container.
      Vangnet naast de Stretch-instelling op de containers zelf. */
.elementor-5744 .elementor-widget-html{
  align-self: stretch;
  width: 100%;
}

/* 7. Zichtbare focus voor toetsenbordgebruikers (WCAG 2.4.7). */
a:focus-visible,
button:focus-visible,
.elementor-button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: 2px solid var(--dm-focus, #34F6F2);
  outline-offset: 3px;
}

/* ============================================================
   LEESBAARHEIDSBASIS  --  site-breed, token-gedreven
   Hoofdoorzaak: de kit zet tekst op #333333 en koppen op een
   vaste donkere kleur. Dat zijn light-mode-waarden die niet
   meeschakelen, waardoor elke widget zonder eigen kleur
   onleesbaar wordt in dark mode (contrast 1,2 tot 1,5:1).
   Geen !important: een bewuste kleur per widget wint nog steeds.
   ============================================================ */

/* Vangnet-tokens voor templates die het designsysteem niet laden */
:root{
  --dm-text:#131820;
  --dm-heading:#10151C;
  --dm-muted:#4A5666;
}
html[data-theme="dark"]{
  --dm-text:#E8EDF2;
  --dm-heading:#FFFFFF;
  --dm-muted:#B9C4CF;
}

/* Basis tekstkleur van de kit */
.elementor-kit-8318{ color: var(--dm-text); }

/* Tekst- en koptekstwidgets van Elementor */
.elementor-kit-8318 .elementor-widget-text-editor,
.elementor-kit-8318 .elementor-widget-text-editor p,
.elementor-kit-8318 .elementor-widget-text-editor li,
.elementor-kit-8318 .elementor-widget-theme-post-content p,
.elementor-kit-8318 .elementor-widget-theme-post-content li,
.elementor-kit-8318 .elementor-widget-icon-box .elementor-icon-box-description,
.elementor-kit-8318 .elementor-widget-icon-list .elementor-icon-list-text{
  color: var(--dm-text);
}
.elementor-kit-8318 .elementor-widget-heading .elementor-heading-title,
.elementor-kit-8318 .elementor-widget-icon-box .elementor-icon-box-title{
  color: var(--dm-heading);
}

/* Formuliervelden stonden ook op #333333 */
.elementor-kit-8318 input:not([type="button"]):not([type="submit"]),
.elementor-kit-8318 textarea,
.elementor-kit-8318 select{ color: var(--dm-text); }

/* Ondersteunende tekst onder een kop */
.dfx-sub,
.dfx-sub p{ color: var(--dm-muted); }

/* Links in de zoekresultaat-demo: blauw dat in beide modes leest */
:root{ --dm-link:#1A46C8; --dm-link-dim:#5B6B8F; }
html[data-theme="dark"]{ --dm-link:#8FD9FF; --dm-link-dim:#C7D6FF; }

/* ===== DFX-WM-START · /websites-maken/ — hero, live gradient, mobiel ===== */

/* 0 · maatwerk-widgets terug op de dm-tokens (light + dark) */
#dfx-craft .cf-card,#dfx-craft .cf-stage,#dfx-find .fx-toggle,#dfx-find #fxShuffle,
#dfx-find .fx-stage,#dfx-find .fx-q,#dfx-port .pc,#dfx-proc .ps,#dfx-rev .rv,
#dfx-val .vl,#dfx-faq .fq-i,#dfx-cmp .dc-box{ border-color:var(--dm-border) !important; }
#dfx-craft .cf-stage,#dfx-find .fx-stage{ background:var(--dm-surface-2) !important; }
#dfx-port .pc,#dfx-proc .ps,#dfx-rev .rv,#dfx-val .vl,#dfx-faq .fq-i{ background:var(--dm-card-bg) !important; }
#dfx-craft :focus-visible,#dfx-cmp :focus-visible,#dfx-find :focus-visible,
#dfx-port :focus-visible,#dfx-faq :focus-visible{
  outline:3px solid var(--dm-cyan); outline-offset:3px; border-radius:6px;
}

/* 1 · HERO — mobiel eerst */
.elementor-element-5b4bdc5 > .e-con-inner{
  padding-block:clamp(28px,7vw,56px) clamp(24px,6vw,48px);
  row-gap:clamp(12px,3vw,18px);
}
.elementor-element-5b4bdc5 .dfx-h1 .dfx-g{ display:inline-block; }
@media (max-width:480px){
  .elementor-element-5b4bdc5 .elementor-element-5d50598{ width:100%; margin-top:16px; }
  .elementor-element-5b4bdc5 .elementor-element-5d50598 > .elementor-widget-button{ width:100%; }
  .elementor-element-5b4bdc5 .elementor-element-5d50598 .elementor-button{
    width:100%; justify-content:center; min-height:52px;
  }
  .elementor-element-5b4bdc5 .elementor-element-5028e42{ margin-top:14px; }
}

/* 1b · HERO desktop — mockup rechts, alles above the fold */
@media (min-width:1025px){
  .elementor-element-5b4bdc5{
    min-height:calc(100svh - 89px - var(--wp-admin--admin-bar--height, 0px));
    display:flex; align-items:center;
    padding-block:clamp(24px,4vh,56px);
  }
  .elementor-element-5b4bdc5 > .e-con-inner{
    position:relative; width:100%; padding-block:0;
    padding-inline-end:46%;
    row-gap:clamp(10px,1.4vh,18px);
  }
  .elementor-element-5b4bdc5 > .e-con-inner > .elementor-element-5d50598{ margin-top:clamp(8px,1.4vh,20px); }
  .elementor-element-5b4bdc5 > .e-con-inner > .elementor-element-5028e42{ margin-top:clamp(6px,1.2vh,18px); }
  .elementor-element-5b4bdc5 .dfx-herovis{
    position:absolute; top:50%; right:0; width:42%;
    transform:translateY(-50%); margin:0;
  }
}
@media (min-width:1025px) and (max-height:760px){
  .elementor-element-5b4bdc5 .dfx-h1 h1{ font-size:clamp(38px,3.4vw,52px) !important; }
  .elementor-element-5b4bdc5 .dfx-herovis{ width:40%; }
}

/* 2 · voor/na-vergelijker — mobiel bruikbaar */
#dfx-cmp .dc-box{ touch-action:pan-y; -webkit-tap-highlight-color:transparent; }
@media (max-width:900px){ #dfx-cmp .dc-box{ aspect-ratio:4/3 !important; } }
@media (max-width:600px){ #dfx-cmp .dc-box{ aspect-ratio:10/13 !important; } }
#dfx-cmp .dc-knob{ width:56px !important; height:56px !important; touch-action:none; }
#dfx-cmp .dc-knob svg{ width:22px !important; height:22px !important; }
#dfx-cmp .dc-knob svg{ width:22px; height:22px; }

/* 3 · toggle liep buiten het scherm op 390px */
#dfx-find .fx-toggle{ max-width:100%; box-sizing:border-box; }
@media (max-width:640px){
  #dfx-find .fx-toggle{ display:flex; width:100%; }
  #dfx-find .fx-toggle > button{
    flex:1 1 0; min-width:0; padding-inline:8px; font-size:13px;
    white-space:nowrap; justify-content:center;
  }
}

/* 4 · tapdoelen minstens 44px */
#dfx-find .fx-toggle > *,#dfx-find #fxShuffle,#dfx-port .pc-go,#dfx-faq .fq-i > summary{
  min-height:44px; display:flex; align-items:center; gap:8px;
}

/* 5 · beweging beperken op verzoek van de bezoeker */
@media (prefers-reduced-motion:reduce){
  #dfxhv .bw{ animation:none !important; }
  #dfx-craft .cf-tilt,#dfx-craft .cf-mag{ transform:none !important; transition:none !important; }
}
/* ===== DFX-WM-END ===== */

/* ===== DFX-LIVEGRADIENT-START — werkende rand-gradient zonder widget-wijziging ===== */
@property --dfx-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --dfx-hue { syntax: "<number>"; inherits: false; initial-value: 0; }
@keyframes dfx-ring { to { --dfx-ang: 360deg; } }
@keyframes dfx-hue  { to { --dfx-hue: 360; } }

#dfx-craft .cf-card .cf-gbox{
  position:relative; isolation:isolate; overflow:visible;
  border-radius:14px;
  background:var(--dm-surface-1) !important;
  color:var(--dm-heading) !important;
}
/* de rand zelf IS de gradient: conic gradient, uitgesneden met een mask */
#dfx-craft .cf-card .cf-gbox::before{
  content:""; position:absolute;
  top:0; left:0; right:0; bottom:0;
  width:auto; height:auto; transform:none;
  z-index:2; pointer-events:none;
  border-radius:14px; padding:2px;
  background:conic-gradient(from var(--dfx-ang),
    var(--dm-magenta), var(--dm-cyan), var(--dm-purple), #FF8A00, var(--dm-magenta));
  filter:hue-rotate(calc(var(--dfx-hue) * 1deg)) saturate(1.15);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:dfx-ring 5s linear infinite, dfx-hue 14s linear infinite;
}
/* zachte gloed rond de rand */
#dfx-craft .cf-card .cf-gbox::after{
  content:""; position:absolute;
  top:-7px; left:-7px; right:-7px; bottom:-7px;
  width:auto; height:auto; transform:none;
  z-index:1; pointer-events:none;
  border-radius:21px; padding:9px;
  background:conic-gradient(from var(--dfx-ang),
    var(--dm-magenta), var(--dm-cyan), var(--dm-purple), #FF8A00, var(--dm-magenta)) !important;
  filter:hue-rotate(calc(var(--dfx-hue) * 1deg)) blur(9px);
  opacity:.45;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:dfx-ring 5s linear infinite, dfx-hue 14s linear infinite;
}

/* 3D tilt: de gradienthoek draait continu, hover verschuift de tint */
#dfx-craft .cf-stage:has(.cf-tilt){ perspective:700px; }
#dfx-craft .cf-card .cf-tilt{
  background:linear-gradient(var(--dfx-ang), var(--dm-magenta), var(--dm-cyan)) !important;
  animation:dfx-ring 9s linear infinite;
  transition:filter .35s ease, box-shadow .35s ease;
}
#dfx-craft .cf-card .cf-stage:hover .cf-tilt{
  filter:hue-rotate(55deg) saturate(1.25);
  box-shadow:0 24px 46px -18px rgba(0,0,0,.8);
}

@media (prefers-reduced-motion:reduce){
  #dfx-craft .cf-card .cf-gbox::before,
  #dfx-craft .cf-card .cf-gbox::after,
  #dfx-craft .cf-card .cf-tilt{ animation:none; }
}
/* ===== DFX-LIVEGRADIENT-END ===== *//* End custom CSS */