.elementor-kit-485{--e-global-color-primary:#008028;--e-global-color-secondary:#001FC9;--e-global-color-text:#0A0A0A;--e-global-color-accent:#E3E7FF;--e-global-color-c83e7a7:#005E1D;--e-global-color-4133bab:#001773;--e-global-color-6ad41b4:#FFFFFF;--e-global-color-361cfb9:#F2F4FF;--e-global-color-2c4d358:#333333;--e-global-color-75f32e8:#666666;--e-global-color-cbde1fd:#DDDDDD;--e-global-typography-primary-font-family:"Nunito";--e-global-typography-primary-font-weight:700;--e-global-typography-text-font-family:"Noto Sans";--e-global-typography-text-font-weight:400;}.elementor-kit-485 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.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-header{padding-inline-end:0px;padding-inline-start:0px;}.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;}}:root { --primair:#008028; --secundair:#001FC9; --tekst:#0A0A0A; --accent:#E3E7FF; --primair-donker:#005E1D; --secundair-donker:#001773; --achtergrond:#FFFFFF; --vlak-alt:#F2F4FF; --tekst-zacht:#333333; --tekst-meta:#666666; --rand:#DDDDDD; --kop:Nunito; --tekst_1:Noto Sans; --primair_1:#008028; --secundair_1:#001FC9; --tekst_2:#0A0A0A; --accent_1:#E3E7FF; --primair-donker_1:#005E1D; --secundair-donker_1:#001773; --achtergrond_1:#FFFFFF; --vlak-alt_1:#F2F4FF; --tekst-zacht_1:#333333; --tekst-meta_1:#666666; --rand_1:#DDDDDD; --kop_1:Nunito; --tekst_3:Noto Sans; }
/* Start custom CSS *//* SYSTEEMBLOK · v7 · Werkcentrum Midden-Brabant — staat op ÉÉN plek (Site-instellingen → Aangepaste CSS).
   Alleen wat Elementor niet zelf kan. Kleuren en fonts wijzig je in Elementor (variabele én kit-kleur), niet hier.
   Bewust weggelaten tot ze nodig zijn: FAQ, Contact Form 7, tekstblok, icoon (staan in de skill-basis). */
body {
  --lv-primair: var(--e-global-color-primary);
  --lv-secundair: var(--e-global-color-secondary);
  --lv-tekst: var(--e-global-color-text);
  --lv-accent: var(--e-global-color-accent);
  --lv-primair-donker: var(--e-global-color-c83e7a7);
  --lv-secundair-donker: var(--e-global-color-4133bab);
  --lv-achtergrond: var(--e-global-color-6ad41b4);
  --lv-vlak-alt: var(--e-global-color-361cfb9);
  --lv-tekst-zacht: var(--e-global-color-2c4d358);
  --lv-tekst-meta: var(--e-global-color-75f32e8);
  --lv-rand: var(--e-global-color-cbde1fd);
  --lv-font-kop: var(--e-global-typography-primary-font-family), sans-serif;
  --lv-font-tekst: var(--e-global-typography-text-font-family), sans-serif;
  --lv-tekst-s: 14px;
  --lv-tekst-m: 16px;
  --lv-tekst-l: 18px;
  --lv-radius-veld: 12px;
  --lv-radius-kaart: 40px;
  --lv-radius-paneel: 40px;
  --lv-knop-hoogte: 48px;
  --lv-knop-px: 24px;
  --lv-knop-radius: 999px;
  --lv-schaduw-1: 0 16px 32px -12px rgb(0 31 201 / .18);
  --lv-transitie: 150ms cubic-bezier(.4,0,.2,1);
  --lv-transitie-traag: 500ms cubic-bezier(.4,0,.2,1);
  --lv-header-hoogte: 136px;
  --lv-container: 1200px;
}

/* ── BASIS (alleen wat gebruikt wordt) ── */
/* 1. Knoppen — button-widget met _css_classes "lv-knop" (+ lv-knop--outline / --licht / --klein) */
body:not(#lv) .lv-knop .elementor-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--lv-knop-hoogte); padding: 0 var(--lv-knop-px);
  border: 1px solid transparent; border-radius: var(--lv-knop-radius);
  background-color: var(--lv-primair); color: var(--lv-achtergrond);
  font-family: var(--lv-font-tekst); font-size: var(--lv-tekst-s); line-height: 20px; font-weight: 600;
  text-decoration: none; box-shadow: none;
  transition: background-color var(--lv-transitie), border-color var(--lv-transitie), color var(--lv-transitie), transform var(--lv-transitie);
}
body:not(#lv) .lv-knop .elementor-button:is(:hover, :focus-visible) { background-color: var(--lv-primair-donker); color: var(--lv-achtergrond); }
body:not(#lv) .lv-knop .elementor-button-content-wrapper { gap: 8px; align-items: center; }
body:not(#lv) .lv-knop .elementor-button-icon { display: flex; }
body:not(#lv) .lv-knop .elementor-button-icon svg { width: 16px; height: 16px; fill: currentColor; }
body:not(#lv) .lv-knop--outline .elementor-button { background-color: transparent; border-color: var(--lv-rand); color: var(--lv-primair-donker); }
body:not(#lv) .lv-knop--outline .elementor-button:is(:hover, :focus-visible) { background-color: var(--lv-accent); border-color: var(--lv-primair); color: var(--lv-primair-donker); }
body:not(#lv) .lv-knop--licht .elementor-button { background-color: var(--lv-achtergrond); color: var(--lv-primair-donker); }
body:not(#lv) .lv-knop--licht .elementor-button:is(:hover, :focus-visible) { background-color: var(--lv-accent); color: var(--lv-primair-donker); }

/* 2. Pijllink — button-widget met _css_classes "lv-pijllink": tekstlink met pijl, geen vlak */
body:not(#lv) .lv-pijllink .elementor-button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 0; padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; color: var(--lv-primair-donker);
  font-family: var(--lv-font-tekst); font-size: var(--lv-tekst-s); line-height: 20px; font-weight: 600;
}
body:not(#lv) .lv-pijllink .elementor-button:is(:hover, :focus-visible) { background: none; color: var(--lv-primair); }
body:not(#lv) .lv-pijllink .elementor-button-icon { display: flex; transition: transform var(--lv-transitie); }
body:not(#lv) .lv-pijllink .elementor-button-icon svg { width: 16px; height: 16px; fill: currentColor; }
body:not(#lv) .lv-pijllink .elementor-button:hover .elementor-button-icon,
body:not(#lv) .lv-linkkaart:hover .lv-pijllink .elementor-button-icon { transform: translateX(4px); }

/* 3. Kruimelpad — html-widget met _css_classes "lv-kruimel" (markup: references/html-widget.md) */
body:not(#lv) .lv-kruimel ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: var(--lv-tekst-s); line-height: 20px; color: var(--lv-tekst-zacht); }
body:not(#lv) .lv-kruimel li { display: flex; align-items: center; margin: 0; }
body:not(#lv) .lv-kruimel a { color: inherit; text-decoration: none; transition: color var(--lv-transitie); }
body:not(#lv) .lv-kruimel a:hover { color: var(--lv-primair); }
body:not(#lv) .lv-kruimel svg { width: 16px; height: 16px; opacity: .5; }
body:not(#lv) .lv-kruimel [aria-current] { font-weight: 500; color: var(--lv-primair-donker); }

/* 4. Anker — html-widget met _css_classes "lv-anker" en alleen <span id="…"></span> */
body:not(#lv) .lv-anker span[id] { display: block; scroll-margin-top: var(--lv-header-hoogte); }
body:not(#lv) .elementor-widget.lv-anker { margin: 0; }

/* 7. Secties — twee lichte vlakken direct onder elkaar: de tweede zonder bovenruimte (Provero L10) */
body:not(#lv) .lv-bg-vlak:is(.lv-sectie, .lv-sectie-sub, .lv-sectie-compact) + .lv-bg-vlak:is(.lv-sectie, .lv-sectie-sub, .lv-sectie-compact) { padding-top: 0 !important; }

/* ── PROJECT ── */
/* Werkcentrum Midden-Brabant — projectdeel. Merkhoek = linksonder recht (zoals de pointer in het logo). */
body {
  --lv-radius-merk: 40px 40px 40px 0;
  --lv-focus: var(--lv-secundair);
}

/* Toegankelijkheid: zichtbare focus overal (WCAG 2.4.7), wit op donkere vlakken */
body:not(#lv) :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--lv-focus); outline-offset: 3px; border-radius: 4px;
}
body:not(#lv) :is(.lv-bg-groen, .lv-bg-blauw, .lv-bg-donker) :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: #FFFFFF; }

/* Skiplink van Hello Elementor: verborgen tot hij focus krijgt (WCAG 2.4.1) */
body:not(#lv) .skip-link:focus {
  clip: auto; clip-path: none; width: auto; height: auto; position: fixed; top: 12px; left: 12px; z-index: 100000;
  padding: 12px 20px; border-radius: 999px; background: var(--lv-secundair); color: #FFFFFF;
  font-family: var(--lv-font-tekst); font-size: var(--lv-tekst-m); font-weight: 600; text-decoration: none;
}

/* Sticky header mag de focus nooit bedekken (WCAG 2.4.11) */
html { scroll-padding-top: calc(var(--lv-header-hoogte) + 16px); }

/* Knoppen: pil, 48 px hoog (klikdoel ≥ 24 px), hover donkerder i.p.v. lichter */
body:not(#lv) .lv-knop--blauw .elementor-button { background-color: var(--lv-secundair); }
body:not(#lv) .lv-knop--blauw .elementor-button:is(:hover, :focus-visible) { background-color: var(--lv-secundair-donker); }
body:not(#lv) :is(.lv-bg-groen, .lv-bg-blauw) .lv-knop--licht .elementor-button:is(:hover, :focus-visible) { background-color: var(--lv-accent); color: var(--lv-tekst); }

/* Modifiers op merkkleur: winnen altijd */
body:not(#lv) .lv-bg-groen { background-color: var(--lv-primair) !important; }
body:not(#lv) .lv-bg-blauw { background-color: var(--lv-secundair) !important; }

/* Minder beweging als de bezoeker dat heeft ingesteld (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  body:not(#lv) *, body:not(#lv) *::before, body:not(#lv) *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; scroll-behavior: auto !important; }
  body:not(#lv) .lv-linkkaart:hover, body:not(#lv) .lv-beeldtegels > *:hover { transform: none !important; }
}

/* Direct regelen — html-widget met _css_classes "lv-acties": lijst met links, icoon + tekst (homepage, later contact) */
body:not(#lv) .lv-acties ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
body:not(#lv) .lv-acties li { margin: 0; }
body:not(#lv) .lv-acties a {
  display: flex; align-items: center; gap: 16px; height: 100%; padding: 20px 24px; border-radius: 20px 20px 20px 0;
  background-color: var(--lv-vlak-alt); color: var(--lv-tekst-zacht); text-decoration: none;
  font-family: var(--lv-font-tekst); font-size: var(--lv-tekst-s); line-height: 20px; transition: background-color var(--lv-transitie);
}
body:not(#lv) .lv-acties a:is(:hover, :focus-visible) { background-color: var(--lv-accent); }
body:not(#lv) .lv-acties svg { flex: 0 0 40px; width: 40px; height: 40px; color: var(--lv-secundair-donker); }
body:not(#lv) .lv-acties strong { display: block; margin-bottom: 2px; font-family: var(--lv-font-kop); font-size: 18px; line-height: 24px; font-weight: 700; color: var(--lv-secundair); }
body:not(#lv) .lv-acties a:hover strong { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1024px) { body:not(#lv) .lv-acties ul { grid-template-columns: minmax(0, 1fr); } }

/* Partnerlogo's — basisgalerij (image-gallery) met _css_classes "lv-logos": vast raster, geen slider (WCAG 2.2.2) */
body:not(#lv) .lv-logos .gallery { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin: 0 !important; }
body:not(#lv) .lv-logos .gallery br { display: none; }
body:not(#lv) .lv-logos .gallery-item { display: flex; align-items: center; justify-content: center; width: auto !important; max-width: none !important; float: none; margin: 0 !important; padding: 16px !important; min-height: 104px; border-radius: 20px 20px 20px 0; background-color: var(--lv-achtergrond); }
body:not(#lv) .lv-logos .gallery-icon { display: flex; align-items: center; justify-content: center; width: 100%; }
body:not(#lv) .lv-logos img { display: block; width: auto; max-width: 100%; max-height: 64px; height: auto; object-fit: contain; border: 0 !important; }
@media (max-width: 1024px) { body:not(#lv) .lv-logos .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px)  { body:not(#lv) .lv-logos .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── HEADER (Theme Builder → Koptekst) ──
   Opmaak van menu, zoeken, topbalk en logo staat in de widget-instellingen in Elementor.
   Hier alleen wat Elementor niet kan: de header plakkerig maken (de wrapper is geen element in de editor). */
body:not(#lv) .elementor-location-header { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 100; }

/* ── FOOTER (Theme Builder → Voettekst) ── */
body:not(#lv) .elementor-location-footer .lv-bg-groen {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 622 622'%3E%3Cpath fill='%23005e1d' d='M311 0c171.783 0 311 139.217 311 311S482.725 622 311 622H-.001V311C-.001 139.217 139.275 0 311 0Zm0 156.779c-85.206 0-154.279 69.074-154.279 154.28 0 85.205 69.073 154.278 154.279 154.278s154.278-69.073 154.278-154.278c0-85.206-69.072-154.28-154.278-154.28Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left -80px bottom -120px; background-size: 560px;
}
body:not(#lv) :is(.lv-footerlijst, .lv-linklijst, .lv-social) ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
body:not(#lv) :is(.lv-footerlijst, .lv-linklijst) a { display: inline-flex; align-items: flex-start; gap: 12px; min-height: 32px; padding-block: 4px; color: #FFFFFF; font-family: var(--lv-font-tekst); font-size: var(--lv-tekst-m); line-height: 24px; font-weight: 500; text-decoration: none; }
body:not(#lv) :is(.lv-footerlijst, .lv-linklijst) a:hover { text-decoration: underline; text-underline-offset: 4px; }
body:not(#lv) .lv-footerlijst svg { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 1px; color: #FFFFFF; }
body:not(#lv) .lv-social ul { flex-direction: row; gap: 8px; }
body:not(#lv) .lv-social a { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 999px; color: #FFFFFF; transition: background-color var(--lv-transitie); }
body:not(#lv) .lv-social a:is(:hover, :focus-visible) { background-color: rgb(255 255 255 / .16); }
body:not(#lv) .lv-social svg { width: 24px; height: 24px; fill: currentColor; }
body:not(#lv) .lv-woordmerk p { margin: 0; font-family: var(--lv-font-kop); font-size: min(12vw, 176px); line-height: .9; font-weight: 800; letter-spacing: -.02em; color: #FFFFFF; text-align: center; }


/* V4-modifiers: global classes renderen met hun naam als class; deze winnen altijd */
body:not(#lv) .lv-tekst-licht { color: var(--e-global-color-6ad41b4) !important; }
body:not(#lv) .lv-bg-donker { background-color: var(--e-global-color-c83e7a7) !important; }
body:not(#lv) .lv-bg-vlak { background-color: var(--e-global-color-361cfb9) !important; }
body:not(#lv) .lv-bg-wit { background-color: var(--e-global-color-6ad41b4) !important; }
body:not(#lv) .lv-midden { align-items: center !important; text-align: center !important; }/* End custom CSS */