{"id":152,"date":"2026-04-17T16:15:18","date_gmt":"2026-04-17T14:15:18","guid":{"rendered":"https:\/\/dev10.otrmedia.nl\/?page_id=152"},"modified":"2026-07-13T13:57:51","modified_gmt":"2026-07-13T11:57:51","slug":"diensten","status":"publish","type":"page","link":"https:\/\/gerritsbv.nl\/en\/diensten\/","title":{"rendered":"Services"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"152\" class=\"elementor elementor-152\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c1970f2 elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con-boxed e-con e-parent\" data-id=\"c1970f2\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-60aeef7 e-con-full e-flex e-con e-child\" data-id=\"60aeef7\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t<div class=\"elementor-element elementor-element-05c8330 e-grid e-con-boxed e-con e-child\" data-id=\"05c8330\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-c2dd20d e-con-full e-flex elementor-invisible e-con e-child\" data-id=\"c2dd20d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[],&quot;animation&quot;:&quot;fadeInDown&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3abba39 elementor-widget__width-initial elementor-widget elementor-widget-heading\" data-id=\"3abba39\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Diensten<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-489e60c elementor-widget elementor-widget-text-editor\" data-id=\"489e60c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Sinds 1985 is Montagebedrijf Gerrits d\u00e9 specialist in complete magazijnoplossingen. Van montage, demontage en keuringen tot veiligheidsoplossingen en de levering van nieuwe en gebruikte magazijnstellingen: wij verzorgen het volledige traject van A tot Z.<\/p><p>Met VCA-gecertificeerde monteurs, meer dan 10.000 m\u00b2 voorraad, korte communicatielijnen en een flexibele, persoonlijke aanpak zorgen wij voor een veilige, effici\u00ebnte en toekomstbestendige magazijninrichting die perfect aansluit op uw bedrijfsprocessen.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-251647e e-con-full elementor-hidden-mobile e-flex e-con e-child\" data-id=\"251647e\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6dc33b7 e-con-full e-flex e-con e-child\" data-id=\"6dc33b7\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t<div class=\"elementor-element elementor-element-ec07fd5 e-con-full e-flex e-con e-child\" data-id=\"ec07fd5\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dc3d08b elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"dc3d08b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- KNOP 1: Montage -->\r\n<div class=\"gw-montage\" id=\"gw-montage\">\r\n  <div class=\"gc-montage\" id=\"gc-montage\">\r\n    <div class=\"gc-btn-row-montage\" id=\"gbr-montage\">\r\n      <span class=\"gc-label-montage\">Montage<\/span>\r\n    <\/div>\r\n    <div class=\"gc-content-montage\">\r\n      <h3 class=\"gc-titel-montage\">Montage<\/h3>\r\n      <p class=\"gc-tekst-montage\">Een vakkundige montage van uw magazijninrichting<\/p>\r\n      <a href=\"https:\/\/gerritsbv.nl\/diensten\/montage\/\" class=\"gc-knop-montage\"><span class=\"gc-knoplabel-montage\">Montage<\/span><\/a>\r\n    <\/div>\r\n  <\/div>\r\n  <span class=\"gc-arrow-montage\" id=\"ga-montage\">\r\n    <img decoding=\"async\" src=\"https:\/\/gerritsbv.nl\/wp-content\/uploads\/2026\/04\/Arrow-1.svg\" width=\"20\" height=\"20\">\r\n  <\/span>\r\n<\/div>\r\n\r\n<style>\r\n.gw-montage {\r\n  position: relative;\r\n  display: inline-block;\r\n  cursor: pointer;\r\n  width: 100%;\r\n  padding: 0 20px 24px 20px;\r\n  box-sizing: border-box;\r\n}\r\n.gc-montage {\r\n  background: #004B96;\r\n  clip-path: polygon(6% 0%, 100% 0%, 94% 100%, 0% 100%);\r\n  width: 240px; height: 70px;\r\n  overflow: hidden;\r\n  transition: width 0.3s cubic-bezier(0.16,1,0.3,1), height 0.3s cubic-bezier(0.16,1,0.3,1);\r\n}\r\n.gc-btn-row-montage {\r\n  display: flex; align-items: center;\r\n  height: 70px; flex-shrink: 0; overflow: hidden;\r\n  transition: height 0.2s ease, opacity 0.15s ease;\r\n}\r\n.gc-label-montage {\r\n  display: flex; align-items: center; justify-content: center;\r\n  flex: 1; height: 70px; color: #fff;\r\n  font-family: Helvetica, Arial, sans-serif; font-weight: 700;\r\n  font-style: italic; font-size: 20px; text-transform: uppercase;\r\n  padding: 0 32px;\r\n  transition: opacity 0.15s ease, transform 0.15s ease;\r\n}\r\n.gc-arrow-montage {\r\n  position: absolute; top: 16px; left: 230px;\r\n  display: flex; align-items: center; justify-content: center;\r\n  width: 52px; height: 38px; background: #FF7701;\r\n  clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);\r\n  pointer-events: none;\r\n  transition: transform 0.2s cubic-bezier(0.4,0,0.2,1), opacity 0.15s ease;\r\n}\r\n.gc-content-montage {\r\n  padding: 24px 36px 12px;\r\n  display: flex; flex-direction: column; gap: 14px;\r\n}\r\n.gc-titel-montage {\r\n  color: #fff; font-family: Helvetica, Arial, sans-serif;\r\n  font-weight: 700; font-style: italic; font-size: 24px;\r\n  text-transform: uppercase; margin: 0; line-height: 1.1;\r\n  opacity: 0; transform: translateY(10px);\r\n  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16,1,0.3,1);\r\n}\r\n.gc-tekst-montage {\r\n  color: #fff; font-family: 'Poppins', sans-serif;\r\n  font-size: 15px; margin: 0; line-height: 1.4;\r\n  opacity: 0; transform: translateY(10px);\r\n  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16,1,0.3,1);\r\n}\r\n.gc-knop-montage {\r\n  display: inline-flex; text-decoration: none;\r\n  opacity: 0; transform: translateY(10px);\r\n  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16,1,0.3,1);\r\n}\r\n.gc-knoplabel-montage {\r\n  display: flex; align-items: center; justify-content: center;\r\n  padding: 0 28px; height: 46px; background: #FF7701; color: #fff;\r\n  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 16px;\r\n  clip-path: polygon(6% 0%, 100% 0%, 94% 100%, 0% 100%);\r\n  transition: background 0.2s ease;\r\n}\r\n.gc-knop-montage:hover .gc-knoplabel-montage { background: #e56a00; }\r\n<\/style>\r\n\r\n<script>\r\n(function() {\r\n  const wrap = document.getElementById('gw-montage');\r\n  const card = document.getElementById('gc-montage');\r\n  const btnRow = document.getElementById('gbr-montage');\r\n  const arrow = document.getElementById('ga-montage');\r\n  const label = wrap.querySelector('.gc-label-montage');\r\n  const titel = wrap.querySelector('.gc-titel-montage');\r\n  const tekst = wrap.querySelector('.gc-tekst-montage');\r\n  const knop = wrap.querySelector('.gc-knop-montage');\r\n  let isOpen = false, isAnimating = false, timers = [];\r\n  function clearTimers() { timers.forEach(clearTimeout); timers = []; }\r\n  function isMobile() { return window.innerWidth < 768; }\r\n  function open() {\r\n    if (isAnimating || isOpen) return;\r\n    clearTimers(); isAnimating = true;\r\n    wrap.style.transition = 'transform 0.2s cubic-bezier(0.4,0,0.2,1)';\r\n    wrap.style.transform = 'translateX(0px)';\r\n    card.style.transition = 'width 0.3s cubic-bezier(0.16,1,0.3,1)';\r\n    card.style.width = '100%';\r\n    label.style.opacity = '0'; label.style.transform = 'translateX(-20px)';\r\n    arrow.style.transform = 'translateX(100px)'; arrow.style.opacity = '0';\r\n    timers.push(setTimeout(() => {\r\n      card.style.transition = 'width 0.3s cubic-bezier(0.16,1,0.3,1), height 0.3s cubic-bezier(0.16,1,0.3,1)';\r\n      card.style.height = isMobile() ? '190px' : '190px';\r\n      btnRow.style.height = '0'; btnRow.style.opacity = '0';\r\n    }, 200));\r\n    timers.push(setTimeout(() => { titel.style.opacity = '1'; titel.style.transform = 'translateY(0)'; }, 380));\r\n    timers.push(setTimeout(() => { tekst.style.opacity = '1'; tekst.style.transform = 'translateY(0)'; }, 440));\r\n    timers.push(setTimeout(() => { knop.style.opacity = '1'; knop.style.transform = 'translateY(0)'; isOpen = true; isAnimating = false; }, 500));\r\n  }\r\n  function close() {\r\n    if (isAnimating || !isOpen) return;\r\n    clearTimers(); isAnimating = true;\r\n    titel.style.opacity = '0'; titel.style.transform = 'translateY(10px)';\r\n    tekst.style.opacity = '0'; tekst.style.transform = 'translateY(10px)';\r\n    knop.style.opacity = '0'; knop.style.transform = 'translateY(10px)';\r\n    timers.push(setTimeout(() => {\r\n      card.style.transition = 'height 0.25s cubic-bezier(0.4,0,0.2,1)';\r\n      card.style.height = '70px'; btnRow.style.height = '70px'; btnRow.style.opacity = '1';\r\n    }, 150));\r\n    timers.push(setTimeout(() => {\r\n      card.style.transition = 'width 0.25s cubic-bezier(0.4,0,0.2,1)';\r\n      card.style.width = '240px';\r\n      arrow.style.transform = 'translateX(0)'; arrow.style.opacity = '1';\r\n      label.style.opacity = '1'; label.style.transform = 'translateX(0)';\r\n    }, 380));\r\n    timers.push(setTimeout(() => {\r\n      wrap.style.transform = isMobile() ? 'translateX(-30px)' : 'translateX(-50px)';\r\n      isOpen = false; isAnimating = false;\r\n    }, 600));\r\n  }\r\n  wrap.style.transform = isMobile() ? 'translateX(-30px)' : 'translateX(-50px)';\r\n  wrap.addEventListener('mouseenter', open);\r\n  wrap.addEventListener('mouseleave', close);\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-abd0037 e-con-full e-flex e-con e-child\" data-id=\"abd0037\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t<div class=\"elementor-element elementor-element-7151772 e-con-full e-flex e-con e-child\" data-id=\"7151772\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1b9bd76 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"1b9bd76\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- KNOP: Demontage | prefix: gwde -->\r\n<div class=\"gwde-wrap\" id=\"gwde-wrap\">\r\n  <div class=\"gwde-card\" id=\"gwde-card\">\r\n    <div class=\"gwde-btnrow\" id=\"gwde-btnrow\">\r\n      <span class=\"gwde-label\">Demontage<\/span>\r\n    <\/div>\r\n    <div class=\"gwde-content\">\r\n      <h3 class=\"gwde-titel\">Demontage<\/h3>\r\n      <p class=\"gwde-tekst\">Een vakkundige, snelle demontage van uw magazijninrichting<\/p>\r\n      <a href=\"https:\/\/gerritsbv.nl\/diensten\/demontage\" class=\"gwde-knop\"><span class=\"gwde-knoplabel\">Demontage<\/span><\/a>\r\n    <\/div>\r\n  <\/div>\r\n  <span class=\"gwde-arrow\" id=\"gwde-arrow\">\r\n    <img decoding=\"async\" src=\"https:\/\/gerritsbv.nl\/wp-content\/uploads\/2026\/04\/Arrow-1.svg\" width=\"20\" height=\"20\">\r\n  <\/span>\r\n<\/div>\r\n\r\n<style>\r\n.gwde-wrap {\r\n  position: relative;\r\n  display: inline-block;\r\n  cursor: pointer;\r\n  width: 100%;\r\n  padding: 0 20px 24px 20px;\r\n  box-sizing: border-box;\r\n}\r\n.gwde-card {\r\n  background: #004B96;\r\n  clip-path: polygon(6% 0%, 100% 0%, 94% 100%, 0% 100%);\r\n  width: 240px; height: 70px;\r\n  overflow: hidden;\r\n  transition: width 0.3s cubic-bezier(0.16,1,0.3,1), height 0.3s cubic-bezier(0.16,1,0.3,1);\r\n}\r\n.gwde-btnrow {\r\n  display: flex; align-items: center;\r\n  height: 70px; flex-shrink: 0; overflow: hidden;\r\n  transition: height 0.2s ease, opacity 0.15s ease;\r\n}\r\n.gwde-label {\r\n  display: flex; align-items: center; justify-content: center;\r\n  flex: 1; height: 70px; color: #fff;\r\n  font-family: Helvetica, Arial, sans-serif; font-weight: 700;\r\n  font-style: italic; font-size: 20px; text-transform: uppercase;\r\n  padding: 0 32px;\r\n  transition: opacity 0.15s ease, transform 0.15s ease;\r\n}\r\n.gwde-arrow {\r\n  position: absolute; top: 16px; left: 230px;\r\n  display: flex; align-items: center; justify-content: center;\r\n  width: 52px; height: 38px; background: #FF7701;\r\n  clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);\r\n  pointer-events: none;\r\n  transition: transform 0.2s cubic-bezier(0.4,0,0.2,1), opacity 0.15s ease;\r\n}\r\n.gwde-content {\r\n  padding: 24px 36px 12px;\r\n  display: flex; flex-direction: column; gap: 14px;\r\n}\r\n.gwde-titel {\r\n  color: #fff; font-family: Helvetica, Arial, sans-serif;\r\n  font-weight: 700; font-style: italic; font-size: 24px;\r\n  text-transform: uppercase; margin: 0; line-height: 1.1;\r\n  opacity: 0; transform: translateY(10px);\r\n  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16,1,0.3,1);\r\n}\r\n.gwde-tekst {\r\n  color: #fff; font-family: 'Poppins', sans-serif;\r\n  font-size: 15px; margin: 0; line-height: 1.4;\r\n  opacity: 0; transform: translateY(10px);\r\n  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16,1,0.3,1);\r\n}\r\n.gwde-knop {\r\n  display: inline-flex; text-decoration: none;\r\n  opacity: 0; transform: translateY(10px);\r\n  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16,1,0.3,1);\r\n}\r\n.gwde-knoplabel {\r\n  display: flex; align-items: center; justify-content: center;\r\n  padding: 0 28px; height: 46px; background: #FF7701; color: #fff;\r\n  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 16px;\r\n  clip-path: polygon(6% 0%, 100% 0%, 94% 100%, 0% 100%);\r\n  transition: background 0.2s ease;\r\n}\r\n.gwde-knop:hover .gwde-knoplabel { background: #e56a00; }\r\n<\/style>\r\n\r\n<script>\r\n(function() {\r\n  const wrap = document.getElementById('gwde-wrap');\r\n  const card = document.getElementById('gwde-card');\r\n  const btnRow = document.getElementById('gwde-btnrow');\r\n  const arrow = document.getElementById('gwde-arrow');\r\n  const label = wrap.querySelector('.gwde-label');\r\n  const titel = wrap.querySelector('.gwde-titel');\r\n  const tekst = wrap.querySelector('.gwde-tekst');\r\n  const knop = wrap.querySelector('.gwde-knop');\r\n  let isOpen = false, isAnimating = false, timers = [];\r\n  function clearTimers() { timers.forEach(clearTimeout); timers = []; }\r\n  function isMobile() { return window.innerWidth < 768; }\r\n  function open() {\r\n    if (isAnimating || isOpen) return;\r\n    clearTimers(); isAnimating = true;\r\n    wrap.style.transition = 'transform 0.2s cubic-bezier(0.4,0,0.2,1)';\r\n    wrap.style.transform = 'translateX(0px)';\r\n    card.style.transition = 'width 0.3s cubic-bezier(0.16,1,0.3,1)';\r\n    card.style.width = '100%';\r\n    label.style.opacity = '0'; label.style.transform = 'translateX(-20px)';\r\n    arrow.style.transform = 'translateX(100px)'; arrow.style.opacity = '0';\r\n    timers.push(setTimeout(() => {\r\n      card.style.transition = 'width 0.3s cubic-bezier(0.16,1,0.3,1), height 0.3s cubic-bezier(0.16,1,0.3,1)';\r\n      card.style.height = isMobile() ? '190px' : '190px';\r\n      btnRow.style.height = '0'; btnRow.style.opacity = '0';\r\n    }, 200));\r\n    timers.push(setTimeout(() => { titel.style.opacity = '1'; titel.style.transform = 'translateY(0)'; }, 380));\r\n    timers.push(setTimeout(() => { tekst.style.opacity = '1'; tekst.style.transform = 'translateY(0)'; }, 440));\r\n    timers.push(setTimeout(() => { knop.style.opacity = '1'; knop.style.transform = 'translateY(0)'; isOpen = true; isAnimating = false; }, 500));\r\n  }\r\n  function close() {\r\n    if (isAnimating || !isOpen) return;\r\n    clearTimers(); isAnimating = true;\r\n    titel.style.opacity = '0'; titel.style.transform = 'translateY(10px)';\r\n    tekst.style.opacity = '0'; tekst.style.transform = 'translateY(10px)';\r\n    knop.style.opacity = '0'; knop.style.transform = 'translateY(10px)';\r\n    timers.push(setTimeout(() => {\r\n      card.style.transition = 'height 0.25s cubic-bezier(0.4,0,0.2,1)';\r\n      card.style.height = '70px'; btnRow.style.height = '70px'; btnRow.style.opacity = '1';\r\n    }, 150));\r\n    timers.push(setTimeout(() => {\r\n      card.style.transition = 'width 0.25s cubic-bezier(0.4,0,0.2,1)';\r\n      card.style.width = '240px';\r\n      arrow.style.transform = 'translateX(0)'; arrow.style.opacity = '1';\r\n      label.style.opacity = '1'; label.style.transform = 'translateX(0)';\r\n    }, 380));\r\n    timers.push(setTimeout(() => {\r\n      wrap.style.transform = isMobile() ? 'translateX(-30px)' : 'translateX(-50px)';\r\n      isOpen = false; isAnimating = false;\r\n    }, 600));\r\n  }\r\n  wrap.style.transform = isMobile() ? 'translateX(-30px)' : 'translateX(-50px)';\r\n  wrap.addEventListener('mouseenter', open);\r\n  wrap.addEventListener('mouseleave', close);\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-141d024 e-con-full e-flex e-con e-child\" data-id=\"141d024\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t<div class=\"elementor-element elementor-element-cd4ec80 e-con-full e-flex e-con e-child\" data-id=\"cd4ec80\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6f5ffdc elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"6f5ffdc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- KNOP: Magazijnkeuring | prefix: gwmk -->\r\n<div class=\"gwmk-wrap\" id=\"gwmk-wrap\">\r\n  <div class=\"gwmk-card\" id=\"gwmk-card\">\r\n    <div class=\"gwmk-btnrow\" id=\"gwmk-btnrow\">\r\n      <span class=\"gwmk-label\">Magazijnkeuring<\/span>\r\n    <\/div>\r\n    <div class=\"gwmk-content\">\r\n      <h3 class=\"gwmk-titel\">Magazijnkeuring<\/h3>\r\n      <p class=\"gwmk-tekst\">Professionele keuring van uw magazijninrichting op veiligheid en kwaliteit<\/p>\r\n      <a href=\"https:\/\/gerritsbv.nl\/diensten\/magazijnkeuring\/\" class=\"gwmk-knop\"><span class=\"gwmk-knoplabel\">Magazijnkeuring<\/span><\/a>\r\n    <\/div>\r\n  <\/div>\r\n  <span class=\"gwmk-arrow\" id=\"gwmk-arrow\">\r\n    <img decoding=\"async\" src=\"https:\/\/gerritsbv.nl\/wp-content\/uploads\/2026\/04\/Arrow-1.svg\" width=\"20\" height=\"20\">\r\n  <\/span>\r\n<\/div>\r\n\r\n<style>\r\n.gwmk-wrap {\r\n  position: relative;\r\n  display: inline-block;\r\n  cursor: pointer;\r\n  width: 100%;\r\n  padding: 0 20px 24px 20px;\r\n  box-sizing: border-box;\r\n}\r\n.gwmk-card {\r\n  background: #004B96;\r\n  clip-path: polygon(6% 0%, 100% 0%, 94% 100%, 0% 100%);\r\n  width: 280px; height: 70px;\r\n  overflow: hidden;\r\n  transition: width 0.3s cubic-bezier(0.16,1,0.3,1), height 0.3s cubic-bezier(0.16,1,0.3,1);\r\n}\r\n.gwmk-btnrow {\r\n  display: flex; align-items: center;\r\n  height: 70px; flex-shrink: 0; overflow: hidden;\r\n  transition: height 0.2s ease, opacity 0.15s ease;\r\n}\r\n.gwmk-label {\r\n  display: flex; align-items: center; justify-content: center;\r\n  flex: 1; height: 70px; color: #fff;\r\n  font-family: Helvetica, Arial, sans-serif; font-weight: 700;\r\n  font-style: italic; font-size: 20px; text-transform: uppercase;\r\n  padding: 0 32px;\r\n  transition: opacity 0.15s ease, transform 0.15s ease;\r\n}\r\n.gwmk-arrow {\r\n  position: absolute; top: 16px; left: 270px;\r\n  display: flex; align-items: center; justify-content: center;\r\n  width: 52px; height: 38px; background: #FF7701;\r\n  clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);\r\n  pointer-events: none;\r\n  transition: transform 0.2s cubic-bezier(0.4,0,0.2,1), opacity 0.15s ease;\r\n}\r\n.gwmk-content {\r\n  padding: 24px 36px 12px;\r\n  display: flex; flex-direction: column; gap: 14px;\r\n}\r\n.gwmk-titel {\r\n  color: #fff; font-family: Helvetica, Arial, sans-serif;\r\n  font-weight: 700; font-style: italic; font-size: 24px;\r\n  text-transform: uppercase; margin: 0; line-height: 1.1;\r\n  opacity: 0; transform: translateY(10px);\r\n  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16,1,0.3,1);\r\n}\r\n.gwmk-tekst {\r\n  color: #fff; font-family: 'Poppins', sans-serif;\r\n  font-size: 15px; margin: 0; line-height: 1.4;\r\n  opacity: 0; transform: translateY(10px);\r\n  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16,1,0.3,1);\r\n}\r\n.gwmk-knop {\r\n  display: inline-flex; text-decoration: none;\r\n  opacity: 0; transform: translateY(10px);\r\n  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16,1,0.3,1);\r\n}\r\n.gwmk-knoplabel {\r\n  display: flex; align-items: center; justify-content: center;\r\n  padding: 0 28px; height: 46px; background: #FF7701; color: #fff;\r\n  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 16px;\r\n  clip-path: polygon(6% 0%, 100% 0%, 94% 100%, 0% 100%);\r\n  transition: background 0.2s ease;\r\n}\r\n.gwmk-knop:hover .gwmk-knoplabel { background: #e56a00; }\r\n<\/style>\r\n\r\n<script>\r\n(function() {\r\n  const wrap = document.getElementById('gwmk-wrap');\r\n  const card = document.getElementById('gwmk-card');\r\n  const btnRow = document.getElementById('gwmk-btnrow');\r\n  const arrow = document.getElementById('gwmk-arrow');\r\n  const label = wrap.querySelector('.gwmk-label');\r\n  const titel = wrap.querySelector('.gwmk-titel');\r\n  const tekst = wrap.querySelector('.gwmk-tekst');\r\n  const knop = wrap.querySelector('.gwmk-knop');\r\n  let isOpen = false, isAnimating = false, timers = [];\r\n  function clearTimers() { timers.forEach(clearTimeout); timers = []; }\r\n  function isMobile() { return window.innerWidth < 768; }\r\n  function open() {\r\n    if (isAnimating || isOpen) return;\r\n    clearTimers(); isAnimating = true;\r\n    wrap.style.transition = 'transform 0.2s cubic-bezier(0.4,0,0.2,1)';\r\n    wrap.style.transform = 'translateX(0px)';\r\n    card.style.transition = 'width 0.3s cubic-bezier(0.16,1,0.3,1)';\r\n    card.style.width = '100%';\r\n    label.style.opacity = '0'; label.style.transform = 'translateX(-20px)';\r\n    arrow.style.transform = 'translateX(100px)'; arrow.style.opacity = '0';\r\n    timers.push(setTimeout(() => {\r\n      card.style.transition = 'width 0.3s cubic-bezier(0.16,1,0.3,1), height 0.3s cubic-bezier(0.16,1,0.3,1)';\r\n      card.style.height = isMobile() ? '190px' : '190px';\r\n      btnRow.style.height = '0'; btnRow.style.opacity = '0';\r\n    }, 200));\r\n    timers.push(setTimeout(() => { titel.style.opacity = '1'; titel.style.transform = 'translateY(0)'; }, 380));\r\n    timers.push(setTimeout(() => { tekst.style.opacity = '1'; tekst.style.transform = 'translateY(0)'; }, 440));\r\n    timers.push(setTimeout(() => { knop.style.opacity = '1'; knop.style.transform = 'translateY(0)'; isOpen = true; isAnimating = false; }, 500));\r\n  }\r\n  function close() {\r\n    if (isAnimating || !isOpen) return;\r\n    clearTimers(); isAnimating = true;\r\n    titel.style.opacity = '0'; titel.style.transform = 'translateY(10px)';\r\n    tekst.style.opacity = '0'; tekst.style.transform = 'translateY(10px)';\r\n    knop.style.opacity = '0'; knop.style.transform = 'translateY(10px)';\r\n    timers.push(setTimeout(() => {\r\n      card.style.transition = 'height 0.25s cubic-bezier(0.4,0,0.2,1)';\r\n      card.style.height = '70px'; btnRow.style.height = '70px'; btnRow.style.opacity = '1';\r\n    }, 150));\r\n    timers.push(setTimeout(() => {\r\n      card.style.transition = 'width 0.25s cubic-bezier(0.4,0,0.2,1)';\r\n      card.style.width = '280px';\r\n      arrow.style.transform = 'translateX(0)'; arrow.style.opacity = '1';\r\n      label.style.opacity = '1'; label.style.transform = 'translateX(0)';\r\n    }, 380));\r\n    timers.push(setTimeout(() => {\r\n      wrap.style.transform = isMobile() ? 'translateX(-30px)' : 'translateX(-50px)';\r\n      isOpen = false; isAnimating = false;\r\n    }, 600));\r\n  }\r\n  wrap.style.transform = isMobile() ? 'translateX(-30px)' : 'translateX(-50px)';\r\n  wrap.addEventListener('mouseenter', open);\r\n  wrap.addEventListener('mouseleave', close);\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d5fe38d e-con-full e-flex e-con e-child\" data-id=\"d5fe38d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t<div class=\"elementor-element elementor-element-f545a3d e-con-full e-flex e-con e-child\" data-id=\"f545a3d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b864cab elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"b864cab\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- KNOP: Opkoop | prefix: gwok -->\r\n<div class=\"gwok-wrap\" id=\"gwok-wrap\">\r\n  <div class=\"gwok-card\" id=\"gwok-card\">\r\n    <div class=\"gwok-btnrow\" id=\"gwok-btnrow\">\r\n      <span class=\"gwok-label\">Opkoop<\/span>\r\n    <\/div>\r\n    <div class=\"gwok-content\">\r\n      <h3 class=\"gwok-titel\">Opkoop<\/h3>\r\n      <p class=\"gwok-tekst\">Wij kopen uw gebruikte magazijninrichting professioneel op<\/p>\r\n      <a href=\"https:\/\/gerritsbv.nl\/diensten\/Opkoop\/\" class=\"gwok-knop\"><span class=\"gwok-knoplabel\">Opkoop<\/span><\/a>\r\n    <\/div>\r\n  <\/div>\r\n  <span class=\"gwok-arrow\" id=\"gwok-arrow\">\r\n    <img decoding=\"async\" src=\"https:\/\/gerritsbv.nl\/wp-content\/uploads\/2026\/04\/Arrow-1.svg\" width=\"20\" height=\"20\">\r\n  <\/span>\r\n<\/div>\r\n\r\n<style>\r\n.gwok-wrap {\r\n  position: relative;\r\n  display: inline-block;\r\n  cursor: pointer;\r\n  width: 100%;\r\n  padding: 0 20px 24px 20px;\r\n  box-sizing: border-box;\r\n}\r\n.gwok-card {\r\n  background: #004B96;\r\n  clip-path: polygon(6% 0%, 100% 0%, 94% 100%, 0% 100%);\r\n  width: 220px; height: 70px;\r\n  overflow: hidden;\r\n  transition: width 0.3s cubic-bezier(0.16,1,0.3,1), height 0.3s cubic-bezier(0.16,1,0.3,1);\r\n}\r\n.gwok-btnrow {\r\n  display: flex; align-items: center;\r\n  height: 70px; flex-shrink: 0; overflow: hidden;\r\n  transition: height 0.2s ease, opacity 0.15s ease;\r\n}\r\n.gwok-label {\r\n  display: flex; align-items: center; justify-content: center;\r\n  flex: 1; height: 70px; color: #fff;\r\n  font-family: Helvetica, Arial, sans-serif; font-weight: 700;\r\n  font-style: italic; font-size: 20px; text-transform: uppercase;\r\n  padding: 0 32px;\r\n  transition: opacity 0.15s ease, transform 0.15s ease;\r\n}\r\n.gwok-arrow {\r\n  position: absolute; top: 16px; left: 210px;\r\n  display: flex; align-items: center; justify-content: center;\r\n  width: 52px; height: 38px; background: #FF7701;\r\n  clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);\r\n  pointer-events: none;\r\n  transition: transform 0.2s cubic-bezier(0.4,0,0.2,1), opacity 0.15s ease;\r\n}\r\n.gwok-content {\r\n  padding: 24px 36px 12px;\r\n  display: flex; flex-direction: column; gap: 14px;\r\n}\r\n.gwok-titel {\r\n  color: #fff; font-family: Helvetica, Arial, sans-serif;\r\n  font-weight: 700; font-style: italic; font-size: 24px;\r\n  text-transform: uppercase; margin: 0; line-height: 1.1;\r\n  opacity: 0; transform: translateY(10px);\r\n  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16,1,0.3,1);\r\n}\r\n.gwok-tekst {\r\n  color: #fff; font-family: 'Poppins', sans-serif;\r\n  font-size: 15px; margin: 0; line-height: 1.4;\r\n  opacity: 0; transform: translateY(10px);\r\n  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16,1,0.3,1);\r\n}\r\n.gwok-knop {\r\n  display: inline-flex; text-decoration: none;\r\n  opacity: 0; transform: translateY(10px);\r\n  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16,1,0.3,1);\r\n}\r\n.gwok-knoplabel {\r\n  display: flex; align-items: center; justify-content: center;\r\n  padding: 0 28px; height: 46px; background: #FF7701; color: #fff;\r\n  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 16px;\r\n  clip-path: polygon(6% 0%, 100% 0%, 94% 100%, 0% 100%);\r\n  transition: background 0.2s ease;\r\n}\r\n.gwok-knop:hover .gwok-knoplabel { background: #e56a00; }\r\n<\/style>\r\n\r\n<script>\r\n(function() {\r\n  const wrap = document.getElementById('gwok-wrap');\r\n  const card = document.getElementById('gwok-card');\r\n  const btnRow = document.getElementById('gwok-btnrow');\r\n  const arrow = document.getElementById('gwok-arrow');\r\n  const label = wrap.querySelector('.gwok-label');\r\n  const titel = wrap.querySelector('.gwok-titel');\r\n  const tekst = wrap.querySelector('.gwok-tekst');\r\n  const knop = wrap.querySelector('.gwok-knop');\r\n  let isOpen = false, isAnimating = false, timers = [];\r\n  function clearTimers() { timers.forEach(clearTimeout); timers = []; }\r\n  function isMobile() { return window.innerWidth < 768; }\r\n  function open() {\r\n    if (isAnimating || isOpen) return;\r\n    clearTimers(); isAnimating = true;\r\n    wrap.style.transition = 'transform 0.2s cubic-bezier(0.4,0,0.2,1)';\r\n    wrap.style.transform = 'translateX(0px)';\r\n    card.style.transition = 'width 0.3s cubic-bezier(0.16,1,0.3,1)';\r\n    card.style.width = '100%';\r\n    label.style.opacity = '0'; label.style.transform = 'translateX(-20px)';\r\n    arrow.style.transform = 'translateX(100px)'; arrow.style.opacity = '0';\r\n    timers.push(setTimeout(() => {\r\n      card.style.transition = 'width 0.3s cubic-bezier(0.16,1,0.3,1), height 0.3s cubic-bezier(0.16,1,0.3,1)';\r\n      card.style.height = isMobile() ? '190px' : '190px';\r\n      btnRow.style.height = '0'; btnRow.style.opacity = '0';\r\n    }, 200));\r\n    timers.push(setTimeout(() => { titel.style.opacity = '1'; titel.style.transform = 'translateY(0)'; }, 380));\r\n    timers.push(setTimeout(() => { tekst.style.opacity = '1'; tekst.style.transform = 'translateY(0)'; }, 440));\r\n    timers.push(setTimeout(() => { knop.style.opacity = '1'; knop.style.transform = 'translateY(0)'; isOpen = true; isAnimating = false; }, 500));\r\n  }\r\n  function close() {\r\n    if (isAnimating || !isOpen) return;\r\n    clearTimers(); isAnimating = true;\r\n    titel.style.opacity = '0'; titel.style.transform = 'translateY(10px)';\r\n    tekst.style.opacity = '0'; tekst.style.transform = 'translateY(10px)';\r\n    knop.style.opacity = '0'; knop.style.transform = 'translateY(10px)';\r\n    timers.push(setTimeout(() => {\r\n      card.style.transition = 'height 0.25s cubic-bezier(0.4,0,0.2,1)';\r\n      card.style.height = '70px'; btnRow.style.height = '70px'; btnRow.style.opacity = '1';\r\n    }, 150));\r\n    timers.push(setTimeout(() => {\r\n      card.style.transition = 'width 0.25s cubic-bezier(0.4,0,0.2,1)';\r\n      card.style.width = '220px';\r\n      arrow.style.transform = 'translateX(0)'; arrow.style.opacity = '1';\r\n      label.style.opacity = '1'; label.style.transform = 'translateX(0)';\r\n    }, 380));\r\n    timers.push(setTimeout(() => {\r\n      wrap.style.transform = isMobile() ? 'translateX(-30px)' : 'translateX(-50px)';\r\n      isOpen = false; isAnimating = false;\r\n    }, 600));\r\n  }\r\n  wrap.style.transform = isMobile() ? 'translateX(-30px)' : 'translateX(-50px)';\r\n  wrap.addEventListener('mouseenter', open);\r\n  wrap.addEventListener('mouseleave', close);\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e193281 e-con-full e-flex e-con e-child\" data-id=\"e193281\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t<div class=\"elementor-element elementor-element-9337c51 e-con-full e-flex e-con e-child\" data-id=\"9337c51\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9512f4e elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"9512f4e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- KNOP: Reparatie | prefix: gwrp -->\r\n<div class=\"gwrp-wrap\" id=\"gwrp-wrap\">\r\n  <div class=\"gwrp-card\" id=\"gwrp-card\">\r\n    <div class=\"gwrp-btnrow\" id=\"gwrp-btnrow\">\r\n      <span class=\"gwrp-label\">Reparatie<\/span>\r\n    <\/div>\r\n    <div class=\"gwrp-content\">\r\n      <h3 class=\"gwrp-titel\">Reparatie<\/h3>\r\n      <p class=\"gwrp-tekst\">Vakkundige reparatie van uw magazijnstellingen en inrichting<\/p>\r\n      <a href=\"https:\/\/gerritsbv.nl\/diensten\/Reparatie\/\" class=\"gwrp-knop\"><span class=\"gwrp-knoplabel\">Reparatie<\/span><\/a>\r\n    <\/div>\r\n  <\/div>\r\n  <span class=\"gwrp-arrow\" id=\"gwrp-arrow\">\r\n    <img decoding=\"async\" src=\"https:\/\/gerritsbv.nl\/wp-content\/uploads\/2026\/04\/Arrow-1.svg\" width=\"20\" height=\"20\">\r\n  <\/span>\r\n<\/div>\r\n\r\n<style>\r\n.gwrp-wrap {\r\n  position: relative;\r\n  display: inline-block;\r\n  cursor: pointer;\r\n  width: 100%;\r\n  padding: 0 20px 24px 20px;\r\n  box-sizing: border-box;\r\n}\r\n.gwrp-card {\r\n  background: #004B96;\r\n  clip-path: polygon(6% 0%, 100% 0%, 94% 100%, 0% 100%);\r\n  width: 230px; height: 70px;\r\n  overflow: hidden;\r\n  transition: width 0.3s cubic-bezier(0.16,1,0.3,1), height 0.3s cubic-bezier(0.16,1,0.3,1);\r\n}\r\n.gwrp-btnrow {\r\n  display: flex; align-items: center;\r\n  height: 70px; flex-shrink: 0; overflow: hidden;\r\n  transition: height 0.2s ease, opacity 0.15s ease;\r\n}\r\n.gwrp-label {\r\n  display: flex; align-items: center; justify-content: center;\r\n  flex: 1; height: 70px; color: #fff;\r\n  font-family: Helvetica, Arial, sans-serif; font-weight: 700;\r\n  font-style: italic; font-size: 20px; text-transform: uppercase;\r\n  padding: 0 32px;\r\n  transition: opacity 0.15s ease, transform 0.15s ease;\r\n}\r\n.gwrp-arrow {\r\n  position: absolute; top: 16px; left: 220px;\r\n  display: flex; align-items: center; justify-content: center;\r\n  width: 52px; height: 38px; background: #FF7701;\r\n  clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);\r\n  pointer-events: none;\r\n  transition: transform 0.2s cubic-bezier(0.4,0,0.2,1), opacity 0.15s ease;\r\n}\r\n.gwrp-content {\r\n  padding: 24px 36px 12px;\r\n  display: flex; flex-direction: column; gap: 14px;\r\n}\r\n.gwrp-titel {\r\n  color: #fff; font-family: Helvetica, Arial, sans-serif;\r\n  font-weight: 700; font-style: italic; font-size: 24px;\r\n  text-transform: uppercase; margin: 0; line-height: 1.1;\r\n  opacity: 0; transform: translateY(10px);\r\n  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16,1,0.3,1);\r\n}\r\n.gwrp-tekst {\r\n  color: #fff; font-family: 'Poppins', sans-serif;\r\n  font-size: 15px; margin: 0; line-height: 1.4;\r\n  opacity: 0; transform: translateY(10px);\r\n  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16,1,0.3,1);\r\n}\r\n.gwrp-knop {\r\n  display: inline-flex; text-decoration: none;\r\n  opacity: 0; transform: translateY(10px);\r\n  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16,1,0.3,1);\r\n}\r\n.gwrp-knoplabel {\r\n  display: flex; align-items: center; justify-content: center;\r\n  padding: 0 28px; height: 46px; background: #FF7701; color: #fff;\r\n  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 16px;\r\n  clip-path: polygon(6% 0%, 100% 0%, 94% 100%, 0% 100%);\r\n  transition: background 0.2s ease;\r\n}\r\n.gwrp-knop:hover .gwrp-knoplabel { background: #e56a00; }\r\n<\/style>\r\n\r\n<script>\r\n(function() {\r\n  const wrap = document.getElementById('gwrp-wrap');\r\n  const card = document.getElementById('gwrp-card');\r\n  const btnRow = document.getElementById('gwrp-btnrow');\r\n  const arrow = document.getElementById('gwrp-arrow');\r\n  const label = wrap.querySelector('.gwrp-label');\r\n  const titel = wrap.querySelector('.gwrp-titel');\r\n  const tekst = wrap.querySelector('.gwrp-tekst');\r\n  const knop = wrap.querySelector('.gwrp-knop');\r\n  let isOpen = false, isAnimating = false, timers = [];\r\n  function clearTimers() { timers.forEach(clearTimeout); timers = []; }\r\n  function isMobile() { return window.innerWidth < 768; }\r\n  function open() {\r\n    if (isAnimating || isOpen) return;\r\n    clearTimers(); isAnimating = true;\r\n    wrap.style.transition = 'transform 0.2s cubic-bezier(0.4,0,0.2,1)';\r\n    wrap.style.transform = 'translateX(0px)';\r\n    card.style.transition = 'width 0.3s cubic-bezier(0.16,1,0.3,1)';\r\n    card.style.width = '100%';\r\n    label.style.opacity = '0'; label.style.transform = 'translateX(-20px)';\r\n    arrow.style.transform = 'translateX(100px)'; arrow.style.opacity = '0';\r\n    timers.push(setTimeout(() => {\r\n      card.style.transition = 'width 0.3s cubic-bezier(0.16,1,0.3,1), height 0.3s cubic-bezier(0.16,1,0.3,1)';\r\n      card.style.height = isMobile() ? '190px' : '190px';\r\n      btnRow.style.height = '0'; btnRow.style.opacity = '0';\r\n    }, 200));\r\n    timers.push(setTimeout(() => { titel.style.opacity = '1'; titel.style.transform = 'translateY(0)'; }, 380));\r\n    timers.push(setTimeout(() => { tekst.style.opacity = '1'; tekst.style.transform = 'translateY(0)'; }, 440));\r\n    timers.push(setTimeout(() => { knop.style.opacity = '1'; knop.style.transform = 'translateY(0)'; isOpen = true; isAnimating = false; }, 500));\r\n  }\r\n  function close() {\r\n    if (isAnimating || !isOpen) return;\r\n    clearTimers(); isAnimating = true;\r\n    titel.style.opacity = '0'; titel.style.transform = 'translateY(10px)';\r\n    tekst.style.opacity = '0'; tekst.style.transform = 'translateY(10px)';\r\n    knop.style.opacity = '0'; knop.style.transform = 'translateY(10px)';\r\n    timers.push(setTimeout(() => {\r\n      card.style.transition = 'height 0.25s cubic-bezier(0.4,0,0.2,1)';\r\n      card.style.height = '70px'; btnRow.style.height = '70px'; btnRow.style.opacity = '1';\r\n    }, 150));\r\n    timers.push(setTimeout(() => {\r\n      card.style.transition = 'width 0.25s cubic-bezier(0.4,0,0.2,1)';\r\n      card.style.width = '230px';\r\n      arrow.style.transform = 'translateX(0)'; arrow.style.opacity = '1';\r\n      label.style.opacity = '1'; label.style.transform = 'translateX(0)';\r\n    }, 380));\r\n    timers.push(setTimeout(() => {\r\n      wrap.style.transform = isMobile() ? 'translateX(-30px)' : 'translateX(-50px)';\r\n      isOpen = false; isAnimating = false;\r\n    }, 600));\r\n  }\r\n  wrap.style.transform = isMobile() ? 'translateX(-30px)' : 'translateX(-50px)';\r\n  wrap.addEventListener('mouseenter', open);\r\n  wrap.addEventListener('mouseleave', close);\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ba8c85f e-con-full e-flex e-con e-child\" data-id=\"ba8c85f\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t<div class=\"elementor-element elementor-element-c73e15c e-con-full e-flex e-con e-child\" data-id=\"c73e15c\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d4ef817 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"d4ef817\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- KNOP: Inductielijnen | prefix: gwil -->\r\n<div class=\"gwil-wrap\" id=\"gwil-wrap\">\r\n  <div class=\"gwil-card\" id=\"gwil-card\">\r\n    <div class=\"gwil-btnrow\" id=\"gwil-btnrow\">\r\n      <span class=\"gwil-label\">Inductielijnen<\/span>\r\n    <\/div>\r\n    <div class=\"gwil-content\">\r\n      <h3 class=\"gwil-titel\">Inductielijnen<\/h3>\r\n      <p class=\"gwil-tekst\">Effici\u00ebnte inductielijnen voor uw magazijn en logistiek proces<\/p>\r\n      <a href=\"https:\/\/gerritsbv.nl\/diensten\/Inductielijnen\/\" class=\"gwil-knop\"><span class=\"gwil-knoplabel\">Inductielijnen<\/span><\/a>\r\n    <\/div>\r\n  <\/div>\r\n  <span class=\"gwil-arrow\" id=\"gwil-arrow\">\r\n    <img decoding=\"async\" src=\"https:\/\/gerritsbv.nl\/wp-content\/uploads\/2026\/04\/Arrow-1.svg\" width=\"20\" height=\"20\">\r\n  <\/span>\r\n<\/div>\r\n\r\n<style>\r\n.gwil-wrap {\r\n  position: relative;\r\n  display: inline-block;\r\n  cursor: pointer;\r\n  width: 100%;\r\n  padding: 0 20px 24px 20px;\r\n  box-sizing: border-box;\r\n}\r\n.gwil-card {\r\n  background: #004B96;\r\n  clip-path: polygon(6% 0%, 100% 0%, 94% 100%, 0% 100%);\r\n  width: 260px; height: 70px;\r\n  overflow: hidden;\r\n  transition: width 0.3s cubic-bezier(0.16,1,0.3,1), height 0.3s cubic-bezier(0.16,1,0.3,1);\r\n}\r\n.gwil-btnrow {\r\n  display: flex; align-items: center;\r\n  height: 70px; flex-shrink: 0; overflow: hidden;\r\n  transition: height 0.2s ease, opacity 0.15s ease;\r\n}\r\n.gwil-label {\r\n  display: flex; align-items: center; justify-content: center;\r\n  flex: 1; height: 70px; color: #fff;\r\n  font-family: Helvetica, Arial, sans-serif; font-weight: 700;\r\n  font-style: italic; font-size: 20px; text-transform: uppercase;\r\n  padding: 0 32px;\r\n  transition: opacity 0.15s ease, transform 0.15s ease;\r\n}\r\n.gwil-arrow {\r\n  position: absolute; top: 16px; left: 250px;\r\n  display: flex; align-items: center; justify-content: center;\r\n  width: 52px; height: 38px; background: #FF7701;\r\n  clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);\r\n  pointer-events: none;\r\n  transition: transform 0.2s cubic-bezier(0.4,0,0.2,1), opacity 0.15s ease;\r\n}\r\n.gwil-content {\r\n  padding: 24px 36px 12px;\r\n  display: flex; flex-direction: column; gap: 14px;\r\n}\r\n.gwil-titel {\r\n  color: #fff; font-family: Helvetica, Arial, sans-serif;\r\n  font-weight: 700; font-style: italic; font-size: 24px;\r\n  text-transform: uppercase; margin: 0; line-height: 1.1;\r\n  opacity: 0; transform: translateY(10px);\r\n  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16,1,0.3,1);\r\n}\r\n.gwil-tekst {\r\n  color: #fff; font-family: 'Poppins', sans-serif;\r\n  font-size: 15px; margin: 0; line-height: 1.4;\r\n  opacity: 0; transform: translateY(10px);\r\n  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16,1,0.3,1);\r\n}\r\n.gwil-knop {\r\n  display: inline-flex; text-decoration: none;\r\n  opacity: 0; transform: translateY(10px);\r\n  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16,1,0.3,1);\r\n}\r\n.gwil-knoplabel {\r\n  display: flex; align-items: center; justify-content: center;\r\n  padding: 0 28px; height: 46px; background: #FF7701; color: #fff;\r\n  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 16px;\r\n  clip-path: polygon(6% 0%, 100% 0%, 94% 100%, 0% 100%);\r\n  transition: background 0.2s ease;\r\n}\r\n.gwil-knop:hover .gwil-knoplabel { background: #e56a00; }\r\n<\/style>\r\n\r\n<script>\r\n(function() {\r\n  const wrap = document.getElementById('gwil-wrap');\r\n  const card = document.getElementById('gwil-card');\r\n  const btnRow = document.getElementById('gwil-btnrow');\r\n  const arrow = document.getElementById('gwil-arrow');\r\n  const label = wrap.querySelector('.gwil-label');\r\n  const titel = wrap.querySelector('.gwil-titel');\r\n  const tekst = wrap.querySelector('.gwil-tekst');\r\n  const knop = wrap.querySelector('.gwil-knop');\r\n  let isOpen = false, isAnimating = false, timers = [];\r\n  function clearTimers() { timers.forEach(clearTimeout); timers = []; }\r\n  function isMobile() { return window.innerWidth < 768; }\r\n  function open() {\r\n    if (isAnimating || isOpen) return;\r\n    clearTimers(); isAnimating = true;\r\n    wrap.style.transition = 'transform 0.2s cubic-bezier(0.4,0,0.2,1)';\r\n    wrap.style.transform = 'translateX(0px)';\r\n    card.style.transition = 'width 0.3s cubic-bezier(0.16,1,0.3,1)';\r\n    card.style.width = '100%';\r\n    label.style.opacity = '0'; label.style.transform = 'translateX(-20px)';\r\n    arrow.style.transform = 'translateX(100px)'; arrow.style.opacity = '0';\r\n    timers.push(setTimeout(() => {\r\n      card.style.transition = 'width 0.3s cubic-bezier(0.16,1,0.3,1), height 0.3s cubic-bezier(0.16,1,0.3,1)';\r\n      card.style.height = isMobile() ? '190px' : '190px';\r\n      btnRow.style.height = '0'; btnRow.style.opacity = '0';\r\n    }, 200));\r\n    timers.push(setTimeout(() => { titel.style.opacity = '1'; titel.style.transform = 'translateY(0)'; }, 380));\r\n    timers.push(setTimeout(() => { tekst.style.opacity = '1'; tekst.style.transform = 'translateY(0)'; }, 440));\r\n    timers.push(setTimeout(() => { knop.style.opacity = '1'; knop.style.transform = 'translateY(0)'; isOpen = true; isAnimating = false; }, 500));\r\n  }\r\n  function close() {\r\n    if (isAnimating || !isOpen) return;\r\n    clearTimers(); isAnimating = true;\r\n    titel.style.opacity = '0'; titel.style.transform = 'translateY(10px)';\r\n    tekst.style.opacity = '0'; tekst.style.transform = 'translateY(10px)';\r\n    knop.style.opacity = '0'; knop.style.transform = 'translateY(10px)';\r\n    timers.push(setTimeout(() => {\r\n      card.style.transition = 'height 0.25s cubic-bezier(0.4,0,0.2,1)';\r\n      card.style.height = '70px'; btnRow.style.height = '70px'; btnRow.style.opacity = '1';\r\n    }, 150));\r\n    timers.push(setTimeout(() => {\r\n      card.style.transition = 'width 0.25s cubic-bezier(0.4,0,0.2,1)';\r\n      card.style.width = '260px';\r\n      arrow.style.transform = 'translateX(0)'; arrow.style.opacity = '1';\r\n      label.style.opacity = '1'; label.style.transform = 'translateX(0)';\r\n    }, 380));\r\n    timers.push(setTimeout(() => {\r\n      wrap.style.transform = isMobile() ? 'translateX(-30px)' : 'translateX(-50px)';\r\n      isOpen = false; isAnimating = false;\r\n    }, 600));\r\n  }\r\n  wrap.style.transform = isMobile() ? 'translateX(-30px)' : 'translateX(-50px)';\r\n  wrap.addEventListener('mouseenter', open);\r\n  wrap.addEventListener('mouseleave', close);\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-887a33d e-flex e-con-boxed e-con e-parent\" data-id=\"887a33d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-46ff4d9 elementor-widget elementor-widget-html\" data-id=\"46ff4d9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ============================================================\r\n     GERRITS BV \u2014 DIENSTEN BLOK\r\n     E\u00e9n HTML-widget voor het complete blok (intro + 6 tegels).\r\n\r\n     Vervang de 6 losse widgets hierdoor.\r\n     Afbeeldingen + teksten staan onderin in GD_ITEMS.\r\n     ============================================================ -->\r\n\r\n<section class=\"gd\" data-gd>\r\n\r\n  <div class=\"gd__grid\">\r\n\r\n    <!-- Intro (staat links, naast de eerste tegel) -->\r\n    <div class=\"gd__intro\">\r\n      <h2 class=\"gd__title\">Diensten<\/h2>\r\n      <p class=\"gd__lead\">Sinds 1985 is Montagebedrijf Gerrits d\u00e9 specialist in complete magazijnoplossingen. Van montage, demontage en keuringen tot veiligheidsoplossingen en de levering van nieuwe en gebruikte magazijnstellingen: wij verzorgen het volledige traject van A tot Z.<\/p>\r\n      <p class=\"gd__lead\">Met VCA-gecertificeerde monteurs, meer dan 10.000 m\u00b2 voorraad, korte communicatielijnen en een flexibele, persoonlijke aanpak zorgen wij voor een veilige, effici\u00ebnte en toekomstbestendige magazijninrichting die perfect aansluit op uw bedrijfsprocessen.<\/p>\r\n    <\/div>\r\n\r\n    <!-- De 6 tegels worden hier door JS ingeladen -->\r\n    <div class=\"gd__tiles\" data-gd-tiles><\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n\r\n<style>\r\n\/* ============================================================\r\n   TOKENS\r\n   ============================================================ *\/\r\n.gd{\r\n  --gd-blue:    #004B96;\r\n  --gd-orange:  #FF7701;\r\n  --gd-orange-d:#e56a00;\r\n  --gd-ink:     #101010;\r\n  --gd-white:   #ffffff;\r\n\r\n  --gd-font:      Helvetica, \"Helvetica Neue\", Arial, sans-serif;\r\n  --gd-font-body: \"Poppins\", Helvetica, Arial, sans-serif;\r\n\r\n  --gd-pad:      0px;   \/* desktop: marge komt uit de Elementor-container  *\/\r\n  --gd-overhang: 50px;  \/* hoever de dichte tab links buiten de tegel valt *\/\r\n  --gd-tab-w:   240px;   \/* breedte dichte knop  *\/\r\n  --gd-tab-h:   70px;    \/* hoogte dichte knop   *\/\r\n  --gd-open-h:  190px;   \/* hoogte open kaart    *\/\r\n  --gd-skew:    polygon(6% 0%, 100% 0%, 94% 100%, 0% 100%);\r\n\r\n  font-family: var(--gd-font-body);\r\n  color: var(--gd-ink);\r\n  box-sizing: border-box;\r\n\r\n  \/* Even veel ruimte links als rechts. De uitstekende tabs vallen\r\n     gewoon IN die linkermarge; er wordt niets extra's bijgeteld,\r\n     dus foto's en titel lijnen netjes uit.                        *\/\r\n  padding-left: var(--gd-pad) !important;\r\n  padding-right: var(--gd-pad) !important;\r\n}\r\n.gd *, .gd *::before, .gd *::after{ box-sizing: border-box; }\r\n\r\n\/* ============================================================\r\n   GRID\r\n   ============================================================ *\/\r\n.gd__grid{\r\n  display: grid;\r\n  grid-template-columns: repeat(3, 1fr);\r\n  gap: 0;\r\n}\r\n.gd__intro{\r\n  grid-column: span 2;\r\n  padding: 0 48px 48px 0;\r\n  align-self: center;\r\n}\r\n.gd__tiles{\r\n  display: contents;   \/* tegels vallen direct in het grid *\/\r\n}\r\n\r\n.gd h2.gd__title{\r\n  margin: 0 0 24px !important;\r\n  font-family: var(--gd-font) !important;\r\n  font-size: 72px !important;\r\n  line-height: 1 !important;\r\n  font-weight: 700 !important;\r\n  font-style: italic !important;\r\n  text-transform: uppercase !important;\r\n  color: var(--gd-ink);\r\n}\r\n.gd .gd__lead{\r\n  margin: 0 0 18px !important;\r\n  font-family: var(--gd-font-body) !important;\r\n  font-size: 18px !important;\r\n  font-weight: 400 !important;\r\n  line-height: 1.3 !important;\r\n  color: var(--gd-ink);\r\n}\r\n.gd .gd__lead:last-child{ margin-bottom: 0 !important; }\r\n\r\n\/* ============================================================\r\n   TEGEL\r\n   ============================================================ *\/\r\n.gd__tile{\r\n  position: relative;\r\n  overflow: visible;          \/* knop mag links over de tegelrand vallen *\/\r\n  \/* GEEN z-index hier: anders zou de achtergrondfoto van deze tegel\r\n     over de uitstekende tab van de buurtegel heen getekend worden.  *\/\r\n  min-height: 420px;\r\n  display: flex;\r\n  align-items: flex-end;\r\n  background-size: cover;\r\n  background-position: center;\r\n  background-repeat: no-repeat;\r\n  background-color: #dcdcdc;\r\n}\r\n\/* Alleen de kaart zelf gaat naar voren, niet de tegel eromheen. *\/\r\n.gd__wrap.is-open{ z-index: 10; }\r\n\r\n\/* Klikbaar vlak over de hele tegel. Alleen actief op mobiel,\r\n   waar de kaart dicht blijft en er dus geen knop zichtbaar is. *\/\r\n.gd__tilelink{\r\n  display: none;\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 4;\r\n}\r\n\r\n\/* Wrapper waar de kaart in leeft. Steekt links buiten de tegel\r\n   uit als de kaart dicht is (zoals in het ontwerp).            *\/\r\n.gd__wrap{\r\n  position: relative;\r\n  z-index: 2;\r\n  width: 100%;\r\n  padding: 0 20px 24px 20px;\r\n  transform: translateX(calc(var(--gd-overhang) * -1));   \/* steekt links over de foto heen *\/\r\n  transition: transform .2s cubic-bezier(.4,0,.2,1);\r\n  cursor: pointer;\r\n}\r\n\r\n.gd__card{\r\n  position: relative;\r\n  background: var(--gd-blue);\r\n  clip-path: var(--gd-skew);\r\n  \/* --gd-tab-w wordt per kaart door JS gezet: precies zo breed\r\n     als het label nodig heeft, met 240px als minimum.          *\/\r\n  width: var(--gd-tab-w);\r\n  height: var(--gd-tab-h);\r\n  overflow: hidden;\r\n  transition: width .3s cubic-bezier(.16,1,.3,1),\r\n              height .3s cubic-bezier(.16,1,.3,1);\r\n}\r\n\r\n\/* dichte staat: alleen het label *\/\r\n.gd__btnrow{\r\n  display: flex;\r\n  align-items: center;\r\n  height: var(--gd-tab-h);\r\n  flex-shrink: 0;\r\n  overflow: hidden;\r\n  transition: height .2s ease, opacity .15s ease;\r\n}\r\n.gd__label{\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex: 1;\r\n  height: var(--gd-tab-h);\r\n  padding: 0 32px;\r\n  color: var(--gd-white);\r\n  font-family: var(--gd-font);\r\n  font-weight: 700;\r\n  font-style: italic;\r\n  font-size: 20px;\r\n  text-transform: uppercase;\r\n  white-space: nowrap;\r\n  overflow: visible;\r\n  transition: opacity .15s ease, transform .15s ease;\r\n}\r\n\r\n\/* oranje pijl-tab die rechts uitsteekt *\/\r\n.gd__arrow{\r\n  position: absolute;\r\n  top: 16px;\r\n  left: calc(var(--gd-tab-w) - 10px);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 52px;\r\n  height: 38px;\r\n  background: var(--gd-orange);\r\n  clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);\r\n  pointer-events: none;\r\n  transition: opacity .12s ease;\r\n}\r\n.gd .gd__arrow img,\r\n.gd .gd__arrow svg{\r\n  width: 20px !important;\r\n  height: 20px !important;\r\n  display: block !important;\r\n}\r\n\r\n\/* open staat: titel + tekst + knop *\/\r\n\/* Vaste opbouw zodat elke open kaart exact even hoog is:\r\n   titel (1 regel) + tekst (altijd 2 regels) + knop.         *\/\r\n.gd__content{\r\n  height: var(--gd-open-h);\r\n  padding: 24px 36px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  gap: 12px;\r\n}\r\n.gd h3.gd__ctitel{\r\n  margin: 0 !important;\r\n  color: var(--gd-white) !important;\r\n  font-family: var(--gd-font) !important;\r\n  font-weight: 700 !important;\r\n  font-style: italic !important;\r\n  font-size: 24px !important;\r\n  line-height: 1.1 !important;\r\n  text-transform: uppercase !important;\r\n  opacity: 0;\r\n  transform: translateY(10px);\r\n  transition: opacity .2s ease, transform .2s cubic-bezier(.16,1,.3,1);\r\n}\r\n.gd .gd__ctekst{\r\n  margin: 0 !important;\r\n  color: var(--gd-white) !important;\r\n  font-family: var(--gd-font-body) !important;\r\n  font-size: 15px !important;\r\n  line-height: 1.4 !important;\r\n\r\n  \/* altijd 2 regels hoog: korte teksten vullen op, lange kappen af *\/\r\n  height: calc(15px * 1.4 * 2);\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 2;\r\n  -webkit-box-orient: vertical;\r\n  overflow: hidden;\r\n\r\n  opacity: 0;\r\n  transform: translateY(10px);\r\n  transition: opacity .2s ease, transform .2s cubic-bezier(.16,1,.3,1);\r\n}\r\n.gd a.gd__knop{\r\n  display: inline-flex;\r\n  text-decoration: none !important;\r\n  align-self: flex-start;\r\n  opacity: 0;\r\n  transform: translateY(10px);\r\n  transition: opacity .2s ease, transform .2s cubic-bezier(.16,1,.3,1);\r\n}\r\n.gd .gd__knoplabel{\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 46px;\r\n  padding: 0 28px;\r\n  background: var(--gd-orange);\r\n  color: var(--gd-white);\r\n  font-family: var(--gd-font-body);\r\n  font-weight: 700;\r\n  font-size: 16px;\r\n  clip-path: var(--gd-skew);\r\n  transition: background .2s ease;\r\n}\r\n.gd a.gd__knop:hover .gd__knoplabel{ background: var(--gd-orange-d); }\r\n\r\n\/* ---- OPEN STAAT (klasse wordt door JS gezet) ---- *\/\r\n.gd__wrap.is-open{ transform: translateX(0); }\r\n\/* De kaart klapt NIET tot de tegelrand open, maar houdt rechts ruimte\r\n   vrij voor de tab van de buurtegel (die steekt 50px naar binnen).\r\n   Zo overlapt er niets en wordt er niets afgesneden.                 *\/\r\n.gd__wrap.is-open .gd__card{\r\n  width: calc(100% - var(--gd-overhang));\r\n  max-width: calc(100% - var(--gd-overhang));\r\n  height: var(--gd-open-h);\r\n}\r\n.gd__wrap.is-open .gd__btnrow{ height: 0; opacity: 0; }\r\n.gd__wrap.is-open .gd__label{ opacity: 0; transform: translateX(-20px); }\r\n.gd__wrap.is-open .gd__arrow{ opacity: 0; }\r\n\r\n.gd__wrap.is-open .gd__ctitel,\r\n.gd__wrap.is-open .gd__ctekst,\r\n.gd__wrap.is-open .gd__knop{ opacity: 1; transform: translateY(0); }\r\n\r\n\/* gestaffelde vertraging bij openen *\/\r\n.gd__wrap.is-open .gd__ctitel{ transition-delay: .10s; }\r\n.gd__wrap.is-open .gd__ctekst{ transition-delay: .15s; }\r\n.gd__wrap.is-open .gd__knop  { transition-delay: .20s; }\r\n\r\n\/* bij sluiten geen vertraging: content verdwijnt eerst *\/\r\n.gd__wrap .gd__ctitel,\r\n.gd__wrap .gd__ctekst,\r\n.gd__wrap .gd__knop{ transition-delay: 0s; }\r\n\/* de kaart wacht met krimpen tot de content weg is *\/\r\n.gd__wrap .gd__card{ transition-delay: .12s; }\r\n.gd__wrap.is-open .gd__card{ transition-delay: 0s; }\r\n\r\n\/* ============================================================\r\n   TABLET\r\n   ============================================================ *\/\r\n@media (max-width: 1200px){\r\n  .gd h2.gd__title{ font-size: 56px !important; }\r\n  .gd__tile{ min-height: 360px; }\r\n  .gd{ --gd-tab-w: 210px; }\r\n}\r\n\r\n@media (max-width: 1024px){\r\n  .gd{\r\n    --gd-tab-w: 190px;\r\n    --gd-pad: 34px;\r\n    --gd-overhang: 34px;\r\n    --gd-open-h: 180px;\r\n  }\r\n  .gd__grid{ grid-template-columns: repeat(2, 1fr); }\r\n  .gd__intro{ grid-column: span 2; padding: 0 0 40px 0; }\r\n  .gd__tile{ min-height: 320px; }\r\n  .gd__wrap{ padding: 0 16px 18px 16px; }\r\n  .gd__content{ padding: 20px 26px; }\r\n  .gd .gd__label{ font-size: 17px; padding: 0 24px; }\r\n  .gd h2.gd__title{ font-size: 48px !important; }\r\n}\r\n\r\n\/* ============================================================\r\n   MOBIEL \u2014 hover bestaat hier niet, dus kaarten staan open\r\n   ============================================================ *\/\r\n@media (max-width: 767px){\r\n  .gd{\r\n    --gd-pad: 16px;\r\n    --gd-overhang: 0px;     \/* geen uitsteek, dus geen horizontale overloop *\/\r\n    --gd-tab-h: 60px;\r\n  }\r\n  .gd__grid{ grid-template-columns: 1fr; gap: 14px; }\r\n  .gd__intro{ grid-column: 1; padding: 0 0 24px 0; }\r\n  .gd h2.gd__title{ font-size: 42px !important; }\r\n  .gd .gd__lead{ font-size: 16px !important; }\r\n\r\n  .gd__tile{ min-height: 240px; }\r\n\r\n  \/* De hele tegel is de link *\/\r\n  .gd__tilelink{ display: block; }\r\n\r\n  \/* Kaart blijft dicht: compacte tab met label + oranje pijl ernaast,\r\n     precies zoals de dichte staat op desktop.                        *\/\r\n  .gd__wrap{\r\n    transform: none !important;\r\n    padding: 0 0 16px 16px;   \/* ruimte links van de knop *\/\r\n    cursor: default;\r\n    pointer-events: none;\r\n  }\r\n  .gd__card{\r\n    height: var(--gd-tab-h) !important;\r\n    transition: none !important;\r\n  }\r\n  .gd__btnrow{ height: var(--gd-tab-h); opacity: 1; }\r\n  .gd .gd__label{ font-size: 17px; padding: 0 26px; }\r\n\r\n  \/* titel, tekst en knop tonen we niet op mobiel *\/\r\n  .gd__content{ display: none !important; }\r\n\r\n  .gd__arrow{\r\n    \/* overlapt het blauw een stukje en staat verticaal gecentreerd *\/\r\n    top: calc((var(--gd-tab-h) - 34px) \/ 2);\r\n    left: calc(16px + var(--gd-tab-w) - 20px);\r\n    width: 46px;\r\n    height: 34px;\r\n    opacity: 1 !important;\r\n  }\r\n  .gd .gd__arrow img{ width: 18px !important; height: 18px !important; }\r\n}\r\n\r\n\/* ============================================================\r\n   TOEGANKELIJKHEID\r\n   ============================================================ *\/\r\n.gd__wrap:focus-within .gd__card{ outline: 3px solid var(--gd-orange); outline-offset: 3px; }\r\n\r\n@media (prefers-reduced-motion: reduce){\r\n  .gd__wrap, .gd__card, .gd__label, .gd__arrow,\r\n  .gd__ctitel, .gd__ctekst, .gd__knop{ transition: none !important; }\r\n}\r\n<\/style>\r\n\r\n\r\n<script>\r\n(function () {\r\n  \"use strict\";\r\n\r\n  \/* ==========================================================\r\n     >>> HIER PAS JE ALLES AAN <<<\r\n     Vul per dienst de afbeelding-URL in (zonder domein!),\r\n     de titel, de tekst en de link.\r\n     ========================================================== *\/\r\n\r\n  const GD_ARROW = \"\/wp-content\/uploads\/2026\/04\/Arrow-1.svg\";\r\n\r\n  const GD_ITEMS = [\r\n    {\r\n      label: \"Montage\",\r\n      titel: \"Montage\",\r\n      tekst: \"Een vakkundige montage van uw magazijninrichting\",\r\n      link:  \"\/diensten\/montage\/\",\r\n      img:   \"\/wp-content\/uploads\/2026\/04\/Rectangle-47.png\"\r\n    },\r\n    {\r\n      label: \"Demontage\",\r\n      titel: \"Demontage\",\r\n      tekst: \"Een vakkundige, snelle demontage van uw magazijninrichting\",\r\n      link:  \"\/diensten\/demontage\/\",\r\n      img:   \"\/wp-content\/uploads\/2026\/05\/Rectangle-46-1.png\"\r\n    },\r\n    {\r\n      label: \"Magazijnkeuring\",\r\n      titel: \"Magazijnkeuring\",\r\n      tekst: \"Professionele keuring van uw magazijninrichting op veiligheid en kwaliteit\",\r\n      link:  \"\/diensten\/magazijnkeuring\/\",\r\n      img:   \"\/wp-content\/uploads\/2026\/05\/Group-94.png\"\r\n    },\r\n    {\r\n      label: \"Opkoop\",\r\n      titel: \"Opkoop\",\r\n      tekst: \"Wij kopen uw gebruikte magazijninrichting professioneel op\",\r\n      link:  \"\/diensten\/opkoop\/\",\r\n      img:   \"\/wp-content\/uploads\/2026\/05\/Group-96.png\"\r\n    },\r\n    {\r\n      label: \"Reparatie\",\r\n      titel: \"Reparatie\",\r\n      tekst: \"Vakkundige reparatie van uw magazijnstellingen en inrichting\",\r\n      link:  \"\/diensten\/reparatie\/\",\r\n      img:   \"\/wp-content\/uploads\/2026\/05\/Rectangle-47-1.png\"\r\n    },\r\n    {\r\n      label: \"Inductielijnen\",\r\n      titel: \"Inductielijnen\",\r\n      tekst: \"Effici\u00ebnte inductielijnen voor uw magazijn en logistiek proces\",\r\n      link:  \"\/diensten\/inductielijnen\/\",\r\n      img:   \"\/wp-content\/uploads\/2026\/05\/Group-97.png\"\r\n    }\r\n  ];\r\n\r\n  \/* ==========================================================\r\n     Vanaf hier niets meer wijzigen\r\n     ========================================================== *\/\r\n\r\n  const esc = (s) => String(s).replace(\/[&<>\"]\/g, (c) => (\r\n    { \"&\": \"&amp;\", \"<\": \"&lt;\", \">\": \"&gt;\", '\"': \"&quot;\" }[c]\r\n  ));\r\n\r\n  function initBlock(root) {\r\n    if (root.dataset.gdInit === \"1\") return;\r\n    root.dataset.gdInit = \"1\";\r\n\r\n    const wrap = root.querySelector(\"[data-gd-tiles]\");\r\n    if (!wrap) return;\r\n\r\n    wrap.innerHTML = GD_ITEMS.map((it) => `\r\n      <div class=\"gd__tile\" style=\"background-image:url('${esc(it.img)}')\">\r\n        <a class=\"gd__tilelink\" href=\"${esc(it.link)}\" aria-label=\"${esc(it.titel)}\"><\/a>\r\n        <div class=\"gd__wrap\" data-gd-wrap>\r\n          <div class=\"gd__card\">\r\n            <div class=\"gd__btnrow\">\r\n              <span class=\"gd__label\">${esc(it.label)}<\/span>\r\n            <\/div>\r\n            <div class=\"gd__content\">\r\n              <h3 class=\"gd__ctitel\">${esc(it.titel)}<\/h3>\r\n              <p class=\"gd__ctekst\">${esc(it.tekst)}<\/p>\r\n              <a class=\"gd__knop\" href=\"${esc(it.link)}\">\r\n                <span class=\"gd__knoplabel\">${esc(it.label)}<\/span>\r\n              <\/a>\r\n            <\/div>\r\n          <\/div>\r\n          <span class=\"gd__arrow\">\r\n            <img decoding=\"async\" src=\"${esc(GD_ARROW)}\" alt=\"\" aria-hidden=\"true\" width=\"20\" height=\"20\">\r\n          <\/span>\r\n        <\/div>\r\n      <\/div>`).join(\"\");\r\n\r\n    const isDesktop = () => window.matchMedia(\"(min-width: 768px)\").matches;\r\n    const wraps = Array.from(root.querySelectorAll(\"[data-gd-wrap]\"));\r\n\r\n    \/* Meet per kaart hoe breed de dichte tab moet zijn, zodat een lang\r\n       label (\"Magazijnkeuring\") niet afgekapt wordt en de oranje pijl\r\n       er niet overheen valt.\r\n\r\n       LET OP: het label is een flex-item dat de tab vult, dus zijn\r\n       breedte IS de tabbreedte. Die uitlezen en er padding bij optellen\r\n       zou de tab bij elke resize verder laten groeien. We meten de tekst\r\n       daarom los van de layout, met een canvas.                        *\/\r\n    const canvas = document.createElement(\"canvas\");\r\n    const ctx = canvas.getContext(\"2d\");\r\n\r\n    function sizeTabs() {\r\n      wraps.forEach((w) => {\r\n        const label = w.querySelector(\".gd__label\");\r\n        if (!label) return;\r\n\r\n        \/\/ eerst de eigen waarde weghalen, zodat we de CSS-basis uitlezen\r\n        w.style.removeProperty(\"--gd-tab-w\");\r\n        const base = parseFloat(getComputedStyle(w).getPropertyValue(\"--gd-tab-w\")) || 240;\r\n\r\n        const cs = getComputedStyle(label);\r\n        ctx.font = [cs.fontStyle, cs.fontWeight, cs.fontSize, cs.fontFamily].join(\" \");\r\n\r\n        const tekst = label.textContent.trim().toUpperCase();\r\n        const textW = ctx.measureText(tekst).width;\r\n        const pad   = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);\r\n\r\n        \/\/ +10px speling voor letter-spacing en afrondingen\r\n        const needed = Math.ceil(textW + pad + 10);\r\n        w.style.setProperty(\"--gd-tab-w\", Math.max(base, needed) + \"px\");\r\n      });\r\n    }\r\n\r\n    \/\/ fonts laden asynchroon: opnieuw meten zodra Poppins\/Helvetica er zijn\r\n    sizeTabs();\r\n    if (document.fonts && document.fonts.ready) {\r\n      document.fonts.ready.then(sizeTabs);\r\n    }\r\n\r\n    wraps.forEach((w) => {\r\n      const link = w.querySelector(\".gd__knop\");\r\n\r\n      const open  = () => { if (isDesktop()) w.classList.add(\"is-open\"); };\r\n      const close = () => { if (isDesktop()) w.classList.remove(\"is-open\"); };\r\n\r\n      w.addEventListener(\"mouseenter\", open);\r\n      w.addEventListener(\"mouseleave\", close);\r\n\r\n      \/\/ Toetsenbord: openen zodra de knop focus krijgt\r\n      link.addEventListener(\"focus\", open);\r\n      link.addEventListener(\"blur\",  close);\r\n\r\n      \/\/ Touch op tablet-formaat: eerste tik opent, tweede volgt de link\r\n      w.addEventListener(\"touchstart\", (e) => {\r\n        if (!isDesktop()) return;                 \/\/ mobiel staat al open\r\n        if (!w.classList.contains(\"is-open\")) {\r\n          e.preventDefault();\r\n          wraps.forEach((o) => o.classList.remove(\"is-open\"));\r\n          open();\r\n        }\r\n      }, { passive: false });\r\n    });\r\n\r\n    \/\/ Bij schermwissel alles netjes resetten\r\n    let rt;\r\n    window.addEventListener(\"resize\", () => {\r\n      clearTimeout(rt);\r\n      rt = setTimeout(() => {\r\n        sizeTabs();\r\n        if (!isDesktop()) wraps.forEach((w) => w.classList.remove(\"is-open\"));\r\n      }, 150);\r\n    });\r\n  }\r\n\r\n  function boot() {\r\n    document.querySelectorAll(\"[data-gd]\").forEach(initBlock);\r\n  }\r\n\r\n  if (document.readyState !== \"loading\") boot();\r\n  else document.addEventListener(\"DOMContentLoaded\", boot);\r\n\r\n  if (window.jQuery) {\r\n    jQuery(window).on(\"elementor\/frontend\/init\", function () {\r\n      if (window.elementorFrontend && window.elementorFrontend.hooks) {\r\n        elementorFrontend.hooks.addAction(\"frontend\/element_ready\/global\", boot);\r\n      }\r\n    });\r\n  }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4d3d392 e-flex e-con-boxed e-con e-parent\" data-id=\"4d3d392\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-a9bf263 e-con-full scroll-lock e-flex e-con e-child\" data-id=\"a9bf263\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;background_motion_fx_motion_fx_scrolling&quot;:&quot;yes&quot;,&quot;jet_parallax_layout_list&quot;:[],&quot;background_motion_fx_devices&quot;:[&quot;desktop&quot;,&quot;tablet&quot;,&quot;mobile&quot;]}\">\n\t\t<div class=\"elementor-element elementor-element-383223c e-con-full elementor-hidden-tablet elementor-hidden-mobile e-flex e-con e-child\" data-id=\"383223c\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d7c0048 elementor-hidden-desktop elementor-widget elementor-widget-image\" data-id=\"d7c0048\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"539\" height=\"482\" src=\"https:\/\/gerritsbv.nl\/wp-content\/uploads\/2026\/04\/Rectangle-49.png\" class=\"attachment-large size-large wp-image-374\" alt=\"\" srcset=\"https:\/\/gerritsbv.nl\/wp-content\/uploads\/2026\/04\/Rectangle-49.png 539w, https:\/\/gerritsbv.nl\/wp-content\/uploads\/2026\/04\/Rectangle-49-300x268.png 300w\" sizes=\"(max-width: 539px) 100vw, 539px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b119d61 e-con-full e-flex e-con e-child\" data-id=\"b119d61\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-52293cd elementor-widget__width-initial elementor-widget elementor-widget-heading\" data-id=\"52293cd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">over <span class=\"outline-tekst-wit\">ons<\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3004812 elementor-widget elementor-widget-text-editor\" data-id=\"3004812\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>Montagebedrijf J. Th. Gerrits BV is inmiddels een bekende naam in de wereld van de montage van magazijninrichtingen.<\/strong><\/p><p>Montagebedrijf J. Th. Gerrits BV is inmiddels een vertrouwde naam in de wereld van montage van magazijninrichtingen. Al sinds onze oprichting in 1985 zetten wij ons in om onze klanten de hoogste kwaliteit en service te bieden. Ons verhaal begint bij onze directeur en oprichter, dhr. J. Th. Gerrits, die voor hij het bedrijf startte drie jaar als monteur in loondienst werkte. In die periode legde hij de basis voor de normen en waarden die vandaag de dag nog steeds centraal staan in onze onderneming.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-64afa1b e-transform elementor-widget elementor-widget-button\" data-id=\"64afa1b\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_transform_translateX_effect_hover&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:7,&quot;sizes&quot;:[]},&quot;_transform_translateX_effect_hover_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateX_effect_hover_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateY_effect_hover&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateY_effect_hover_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateY_effect_hover_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/gerritsbv.nl\/over-ons\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Lees meer<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-db7e52b elementor-hidden-tablet elementor-hidden-mobile elementor-widget elementor-widget-image\" data-id=\"db7e52b\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;motion_fx_motion_fx_scrolling&quot;:&quot;yes&quot;,&quot;motion_fx_translateX_effect&quot;:&quot;yes&quot;,&quot;motion_fx_translateX_affectedRange&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:{&quot;start&quot;:29,&quot;end&quot;:100}},&quot;motion_fx_translateX_speed&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:4,&quot;sizes&quot;:[]},&quot;motion_fx_devices&quot;:[&quot;desktop&quot;,&quot;tablet&quot;,&quot;mobile&quot;]}\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"432\" height=\"151\" src=\"https:\/\/gerritsbv.nl\/wp-content\/uploads\/2026\/05\/1985.png\" class=\"attachment-large size-large wp-image-1004\" alt=\"\" srcset=\"https:\/\/gerritsbv.nl\/wp-content\/uploads\/2026\/05\/1985.png 432w, https:\/\/gerritsbv.nl\/wp-content\/uploads\/2026\/05\/1985-300x105.png 300w\" sizes=\"(max-width: 432px) 100vw, 432px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6c4211f elementor-widget elementor-widget-html\" data-id=\"6c4211f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<script>\r\nwindow.addEventListener('scroll', function() {\r\n  const el = document.querySelector('.scroll-lock');\r\n  const rect = el.getBoundingClientRect();\r\n  const windowH = window.innerHeight;\r\n  \r\n  \/\/ Bereken hoe ver het element in beeld is (0 = net in beeld, 1 = midden)\r\n  const progress = Math.min(1, Math.max(0, 1 - (rect.top \/ windowH)));\r\n  \r\n  if (!el.dataset.locked) {\r\n    const offset = (1 - progress) * 150;\r\n    el.style.transform = 'translateY(' + offset + 'px)';\r\n    \r\n    if (progress >= 1) {\r\n      el.dataset.locked = 'true';\r\n      el.style.transform = 'translateY(0px)';\r\n    }\r\n  }\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-495441f e-flex e-con-boxed e-con e-parent\" data-id=\"495441f\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4452e9c elementor-widget elementor-widget-template\" data-id=\"4452e9c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"template.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-template\">\n\t\t\t\t\t<div data-elementor-type=\"section\" data-elementor-id=\"2416\" class=\"elementor elementor-2416\" data-elementor-post-type=\"elementor_library\">\n\t\t\t<div class=\"elementor-element elementor-element-c1c0b14 e-flex e-con-boxed e-con e-parent\" data-id=\"c1c0b14\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-eba8469 elementor-widget elementor-widget-html\" data-id=\"eba8469\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ============================================================\r\n     GERRITS BV \u2014 REVIEWS BLOK (logo-slider + reviews carousel)\r\n     Plak dit in Elementor > HTML-widget.\r\n\r\n     Alle afbeeldings-URL's zijn root-relatief (\/wp-content\/...),\r\n     dus ze werken op dev10.otrmedia.nl EN straks op gerritsbv.nl\r\n     zonder aanpassing \u2014 zolang de uploads-map meemigreert.\r\n\r\n     Aanpassen? Alleen de arrays GB_LOGOS en GB_REVIEWS onderin.\r\n     ============================================================ -->\r\n\r\n<div class=\"gb-rev\" data-gb-rev>\r\n\r\n  <!-- ---------- TOP: titel + logo slider ---------- -->\r\n  <div class=\"gb-rev__top\">\r\n\r\n    <div class=\"gb-rev__intro\">\r\n      <h2 class=\"gb-rev__title\">\r\n        Wat zeggen<br>\r\n        <span class=\"gb-rev__title-outline\">de mensen<\/span>\r\n      <\/h2>\r\n\r\n      <p class=\"gb-rev__score\">Gerrits BV wordt beoordeeld met een 5.0<\/p>\r\n\r\n      <div class=\"gb-rev__rating\">\r\n        <img loading=\"lazy\" class=\"gb-rev__google\"\r\n             src=\"\/wp-content\/uploads\/2026\/04\/Google_Favicon_2025.svg-1.png\"\r\n             alt=\"Google\" width=\"26\" height=\"26\" loading=\"lazy\" decoding=\"async\">\r\n        <span class=\"gb-rev__stars\" role=\"img\" aria-label=\"5 van de 5 sterren\">\r\n          <span>\u2605<\/span><span>\u2605<\/span><span>\u2605<\/span><span>\u2605<\/span><span>\u2605<\/span>\r\n        <\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Logo marquee: oneindige loop, pauzeert bij hover -->\r\n    <div class=\"gb-rev__logos\">\r\n      <div class=\"gb-rev__logos-track\" data-gb-logos><\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <!-- ---------- REVIEWS CAROUSEL ---------- -->\r\n  <div class=\"gb-rev__carousel\">\r\n\r\n    <button class=\"gb-rev__arrow gb-rev__arrow--prev\" type=\"button\" data-gb-prev aria-label=\"Vorige reviews\">\r\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\r\n        <path d=\"M15 3.5 6.5 12l8.5 8.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n      <\/svg>\r\n    <\/button>\r\n\r\n    <div class=\"gb-rev__viewport\" data-gb-viewport>\r\n      <ul class=\"gb-rev__track\" data-gb-track><\/ul>\r\n    <\/div>\r\n\r\n    <button class=\"gb-rev__arrow gb-rev__arrow--next\" type=\"button\" data-gb-next aria-label=\"Volgende reviews\">\r\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\r\n        <path d=\"M9 3.5 17.5 12 9 20.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n      <\/svg>\r\n    <\/button>\r\n\r\n  <\/div>\r\n\r\n  <div class=\"gb-rev__dots\" data-gb-dots aria-hidden=\"true\"><\/div>\r\n<\/div>\r\n\r\n\r\n<style>\r\n\/* ============================================================\r\n   1. TOKENS\r\n   ============================================================ *\/\r\n.gb-rev{\r\n  --gb-blue:        #0a58a6;\r\n  --gb-blue-dark:   #0a4d92;\r\n  --gb-blue-light:  #1f6fbd;\r\n  --gb-orange:      #FF7701;\r\n  --gb-ink:         #101010;\r\n  --gb-line:        #d7d7d7;\r\n  --gb-white:       #ffffff;\r\n\r\n  --gb-font:        Helvetica, \"Helvetica Neue\", Arial, sans-serif;   \/* koppen *\/\r\n  --gb-font-body:   \"Poppins\", Helvetica, Arial, sans-serif;          \/* reviewtekst *\/\r\n  --gb-title-size:  85px;\r\n  --gb-gap:         28px;\r\n  --gb-radius:      0px;\r\n\r\n  font-family: var(--gb-font);\r\n  color: var(--gb-ink);\r\n  position: relative;\r\n  box-sizing: border-box;\r\n}\r\n.gb-rev *,\r\n.gb-rev *::before,\r\n.gb-rev *::after{ box-sizing: border-box; }\r\n\r\n\/* ============================================================\r\n   2. TOP: titel + logo slider\r\n   ============================================================ *\/\r\n.gb-rev__top{\r\n  display: grid;\r\n  grid-template-columns: minmax(280px, 42%) 1fr;\r\n  align-items: center;\r\n  gap: 40px;\r\n  margin-bottom: 48px;\r\n}\r\n\r\n.gb-rev h2.gb-rev__title{\r\n  margin: 0 0 18px !important;\r\n  padding: 0 !important;\r\n  font-family: var(--gb-font) !important;\r\n  font-size: var(--gb-title-size) !important;\r\n  line-height: 0.98 !important;\r\n  font-weight: 700 !important;\r\n  font-style: italic !important;\r\n  text-transform: uppercase !important;\r\n  letter-spacing: -0.5px;\r\n  color: var(--gb-ink);\r\n}\r\n\r\n\/* Tweede regel: alleen contour, geen fill *\/\r\n.gb-rev h2.gb-rev__title .gb-rev__title-outline{\r\n  color: transparent !important;\r\n  -webkit-text-stroke: 2px var(--gb-ink);\r\n  text-stroke: 2px var(--gb-ink);\r\n  paint-order: stroke fill;\r\n}\r\n@supports not ((-webkit-text-stroke: 1px #000) or (text-stroke: 1px #000)){\r\n  .gb-rev h2.gb-rev__title .gb-rev__title-outline{ color: var(--gb-ink) !important; opacity: .35; }\r\n}\r\n\r\n.gb-rev .gb-rev__score{\r\n  margin: 0 0 10px !important;\r\n  font-family: var(--gb-font-body) !important;\r\n  font-size: 17px !important;\r\n  font-weight: 700 !important;\r\n  color: var(--gb-ink);\r\n}\r\n\r\n.gb-rev__rating{\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 12px;\r\n}\r\n.gb-rev .gb-rev__google{\r\n  width: 26px !important;\r\n  height: 26px !important;\r\n  max-width: 26px !important;\r\n  flex: none;\r\n  object-fit: contain !important;\r\n  display: block !important;\r\n  margin: 0 !important;\r\n}\r\n\r\n.gb-rev__stars{\r\n  display: inline-flex;\r\n  gap: 6px;\r\n  color: var(--gb-orange);\r\n  font-size: 22px;\r\n  line-height: 1;\r\n}\r\n\r\n\/* ---- Logo marquee ---- *\/\r\n.gb-rev__logos{\r\n  overflow: hidden;\r\n  position: relative;\r\n  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);\r\n          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);\r\n}\r\n.gb-rev__logos-track{\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 70px;\r\n  width: max-content;\r\n  animation: gb-marquee 38s linear infinite;\r\n}\r\n.gb-rev__logos:hover .gb-rev__logos-track{ animation-play-state: paused; }\r\n\r\n\/* Elk logo krijgt een vast vakje. object-fit zorgt dat het\r\n   logo netjes past, ongeacht de originele afmetingen.       *\/\r\n.gb-rev .gb-rev__logo{\r\n  flex: 0 0 auto !important;\r\n  width: 170px !important;\r\n  height: 75px !important;\r\n  max-width: 170px !important;\r\n  max-height: 75px !important;\r\n  min-width: 0 !important;\r\n  object-fit: contain !important;\r\n  object-position: center !important;\r\n  display: block !important;\r\n  margin: 0 !important;\r\n  padding: 0 !important;\r\n}\r\n\r\n@keyframes gb-marquee{\r\n  from{ transform: translate3d(0,0,0); }\r\n  to  { transform: translate3d(-50%,0,0); }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce){\r\n  .gb-rev__logos-track{ animation: none; }\r\n  .gb-rev__logos{ overflow-x: auto; }\r\n}\r\n\r\n\/* ============================================================\r\n   3. CAROUSEL\r\n   ============================================================ *\/\r\n.gb-rev__carousel{\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 20px;\r\n}\r\n\r\n.gb-rev__viewport{\r\n  overflow: hidden;\r\n  flex: 1 1 auto;\r\n  min-width: 0;\r\n  cursor: grab;\r\n}\r\n.gb-rev__viewport.is-dragging{ cursor: grabbing; }\r\n\r\n.gb-rev__track{\r\n  display: flex;\r\n  align-items: stretch;\r\n  gap: var(--gb-gap);\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\r\n  transition: transform .55s cubic-bezier(.22,.61,.36,1);\r\n  will-change: transform;\r\n}\r\n.gb-rev__track.is-dragging{ transition: none; }\r\n\r\n.gb-rev__slide{\r\n  flex: 0 0 calc((100% - (var(--gb-gap) * 2)) \/ 3);\r\n  max-width: calc((100% - (var(--gb-gap) * 2)) \/ 3);\r\n  display: flex;\r\n}\r\n\r\n\/* ---- Kaart ---- *\/\r\n.gb-rev__card{\r\n  position: relative;\r\n  overflow: hidden;\r\n  width: 100%;\r\n  padding: 26px 30px;\r\n  background-color: var(--gb-blue);\r\n  background-image: url(\"\/wp-content\/uploads\/2026\/04\/Frame-8-1.png\");\r\n  background-size: cover;\r\n  background-position: center;\r\n  background-repeat: no-repeat;\r\n  border-radius: var(--gb-radius);\r\n  color: var(--gb-white);\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n.gb-rev__card-head{\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 14px;\r\n  margin-bottom: 20px;\r\n}\r\n.gb-rev__name{\r\n  margin: 0;\r\n  font-size: 20px;\r\n  font-weight: 700;\r\n  font-style: italic;\r\n  text-transform: uppercase;\r\n  letter-spacing: .2px;\r\n  color: var(--gb-white);\r\n}\r\n.gb-rev__card-stars{\r\n  display: inline-flex;\r\n  gap: 6px;\r\n  color: var(--gb-orange);\r\n  font-size: 24px;\r\n  line-height: 1;\r\n  flex: none;\r\n}\r\n\/* Tekstvak is altijd exact 3 regels hoog: korte reviews vullen\r\n   'm op met witruimte, lange worden afgekapt met \"\u2026\"           *\/\r\n.gb-rev .gb-rev__text{\r\n  margin: 0 !important;\r\n  font-family: var(--gb-font-body) !important;\r\n  font-size: 18px !important;\r\n  font-weight: 400 !important;\r\n  font-style: normal !important;\r\n  line-height: 1.3 !important;\r\n  color: var(--gb-white) !important;\r\n\r\n  height: calc(18px * 1.3 * 3);\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 3;\r\n  -webkit-box-orient: vertical;\r\n  overflow: hidden;\r\n}\r\n\r\n\/* ---- Pijlen ---- *\/\r\n\/* Harde reset: het thema styelt <button> (oranje vlak, radius,\r\n   padding, shadow). Dat mag hier allemaal niet doorlekken.     *\/\r\n.gb-rev button.gb-rev__arrow{\r\n  flex: none;\r\n  width: 54px !important;\r\n  height: 54px !important;\r\n  min-width: 0 !important;\r\n  min-height: 0 !important;\r\n  display: grid !important;\r\n  place-items: center;\r\n  padding: 0 !important;\r\n  margin: 0 !important;\r\n  background: none !important;\r\n  background-color: transparent !important;\r\n  background-image: none !important;\r\n  border: 2px solid #1c1c1c !important;\r\n  border-radius: 0 !important;\r\n  box-shadow: none !important;\r\n  text-shadow: none !important;\r\n  color: #1c1c1c !important;\r\n  font: inherit;\r\n  line-height: 1 !important;\r\n  cursor: pointer;\r\n  appearance: none;\r\n  -webkit-appearance: none;\r\n  transition: background-color .2s, border-color .2s, color .2s;\r\n}\r\n.gb-rev .gb-rev__arrow svg{\r\n  width: 26px !important;\r\n  height: 26px !important;\r\n  display: block !important;\r\n  pointer-events: none;\r\n}\r\n.gb-rev button.gb-rev__arrow:hover,\r\n.gb-rev button.gb-rev__arrow:focus{\r\n  background-color: var(--gb-orange) !important;\r\n  border-color: var(--gb-orange) !important;\r\n  color: #ffffff !important;\r\n}\r\n.gb-rev button.gb-rev__arrow:focus-visible{\r\n  outline: 3px solid var(--gb-orange) !important;\r\n  outline-offset: 2px;\r\n}\r\n.gb-rev button.gb-rev__arrow[disabled]{ opacity: .3; cursor: default; }\r\n.gb-rev button.gb-rev__arrow[disabled]:hover,\r\n.gb-rev button.gb-rev__arrow[disabled]:focus{\r\n  background-color: transparent !important;\r\n  border-color: #1c1c1c !important;\r\n  color: #1c1c1c !important;\r\n}\r\n\r\n\/* ---- Dots (mobiel) ---- *\/\r\n.gb-rev__dots{\r\n  display: none;\r\n  justify-content: center;\r\n  gap: 8px;\r\n  margin-top: 22px;\r\n}\r\n.gb-rev button.gb-rev__dot{\r\n  width: 8px !important;\r\n  height: 8px !important;\r\n  min-width: 0 !important;\r\n  min-height: 0 !important;\r\n  padding: 0 !important;\r\n  margin: 0 !important;\r\n  border: 0 !important;\r\n  border-radius: 50% !important;\r\n  background: var(--gb-line) !important;\r\n  background-image: none !important;\r\n  box-shadow: none !important;\r\n  cursor: pointer;\r\n  appearance: none;\r\n  -webkit-appearance: none;\r\n}\r\n.gb-rev button.gb-rev__dot.is-active{\r\n  background: var(--gb-blue) !important;\r\n  width: 22px !important;\r\n  border-radius: 4px !important;\r\n}\r\n\r\n\/* ============================================================\r\n   4. RESPONSIVE\r\n   ============================================================ *\/\r\n@media (max-width: 1200px){\r\n  .gb-rev{ --gb-title-size: 64px; }\r\n}\r\n@media (max-width: 1024px){\r\n  .gb-rev__top{ grid-template-columns: 1fr; gap: 32px; }\r\n  .gb-rev__slide{\r\n    flex-basis: calc((100% - var(--gb-gap)) \/ 2);\r\n    max-width: calc((100% - var(--gb-gap)) \/ 2);\r\n  }\r\n\r\n  \/* Geen pijlen op tablet: swipen + dots *\/\r\n  .gb-rev button.gb-rev__arrow{ display: none !important; }\r\n  .gb-rev__carousel{ gap: 0; }\r\n  .gb-rev__dots{ display: flex; }\r\n}\r\n@media (max-width: 767px){\r\n  .gb-rev{\r\n    --gb-title-size: 42px;\r\n    --gb-gap: 12px;\r\n    padding: 50px 16px;      \/* 50px boven en onder, 16px links\/rechts *\/\r\n  }\r\n  .gb-rev h2.gb-rev__title .gb-rev__title-outline{ -webkit-text-stroke-width: 1.5px; }\r\n\r\n  \/* Pijlen weg op mobiel: swipen + dots *\/\r\n  .gb-rev button.gb-rev__arrow{ display: none !important; }\r\n  .gb-rev__dots{ display: flex; }\r\n\r\n  \/* Carousel loopt door tot buiten de rechterrand, zodat de\r\n     volgende kaart deels in beeld blijft (\"peek\").            *\/\r\n  .gb-rev__carousel{\r\n    gap: 0;\r\n    margin-right: -16px;\r\n  }\r\n  .gb-rev__slide{\r\n    flex: 0 0 78%;\r\n    max-width: 78%;\r\n  }\r\n\r\n  .gb-rev__card{ padding: 22px; }\r\n  .gb-rev .gb-rev__name{ font-size: 18px; }\r\n  .gb-rev .gb-rev__text{\r\n    font-size: 16px !important;\r\n    height: calc(16px * 1.3 * 3);\r\n  }\r\n  .gb-rev__card-stars{ font-size: 20px; gap: 4px; }\r\n\r\n  .gb-rev .gb-rev__logo{\r\n    width: 120px !important;\r\n    height: 55px !important;\r\n    max-width: 120px !important;\r\n    max-height: 55px !important;\r\n  }\r\n  .gb-rev__logos-track{ gap: 44px; }\r\n}\r\n<\/style>\r\n\r\n\r\n<script>\r\n(function () {\r\n  \"use strict\";\r\n\r\n  \/* ==========================================================\r\n     >>> HIER PAS JE ALLES AAN <<<\r\n     ========================================================== *\/\r\n\r\n  \/\/ Vaste basis. Geen domein = werkt op dev \u00e9n live.\r\n  const GB_BASE = \"\/wp-content\/uploads\/2026\/06\/\";\r\n\r\n  \/\/ 1) LOGO'S\r\n  const GB_LOGOS = [\r\n    { src: GB_BASE + \"download-1.png\",                              alt: \"Coolblue\"  },\r\n    { src: GB_BASE + \"postnl-logo-4DA6C08E55-seeklogo.com_.png\",    alt: \"PostNL\"    },\r\n    { src: GB_BASE + \"1751804169067-2.jpeg\",                        alt: \"Manhard\"   },\r\n    { src: GB_BASE + \"logo-van-altena-groothandel-768x337-1.png\",   alt: \"Van Altena\"},\r\n    { src: GB_BASE + \"Image-3.png\",                                 alt: \"bol.com\"   },\r\n    { src: GB_BASE + \"wehkamp-logo-verticaal.png\",                  alt: \"Wehkamp\"   },\r\n    { src: GB_BASE + \"Image-4.png\",                                 alt: \"Amazon\"    },\r\n    { src: GB_BASE + \"Image-2.png\",                                 alt: \"Derks Technische Dienstverlening\" }\r\n  ];\r\n\r\n  \/\/ 2) REVIEWS \u2014 altijd 5 sterren\r\n  const GB_REVIEWS = [\r\n    { name: \"Marc Vlutters\",  text: \"Wat een geweldig en professioneel bedrijf, waar service \u00e9cht nog op nummer \u00e9\u00e9n staat.\" },\r\n    { name: \"Tom van Aal\",    text: \"Top bedrijf en top service! Stellingen besteld en op laten bouwen door Gerrits en erg tevreden.\" },\r\n    { name: \"Bart Derks\",     text: \"Erg tevreden met de gebruikte Stow palletstellingen. Top kwaliteit, snelle service en goede communicatie.\" },\r\n    { name: \"John Adriaans\",  text: \"Een echt familiebedrijf waar service hoog in het vaandel staan. Alles was top geregeld en er werd goed meegedacht!\" }\r\n  ];\r\n\r\n  const GB_AUTOPLAY_MS = 6000;   \/\/ 0 = autoplay uit\r\n\r\n  \/* ==========================================================\r\n     Vanaf hier niets meer wijzigen\r\n     ========================================================== *\/\r\n\r\n  const STARS = [\"\u2605\",\"\u2605\",\"\u2605\",\"\u2605\",\"\u2605\"];\r\n  const esc = (s) => String(s).replace(\/[&<>\"]\/g, (c) => (\r\n    { \"&\": \"&amp;\", \"<\": \"&lt;\", \">\": \"&gt;\", '\"': \"&quot;\" }[c]\r\n  ));\r\n\r\n  function initBlock(root) {\r\n    if (root.dataset.gbInit === \"1\") return;\r\n    root.dataset.gbInit = \"1\";\r\n\r\n    \/* ---------- Logo marquee (2x voor naadloze loop) ---------- *\/\r\n    const logoTrack = root.querySelector(\"[data-gb-logos]\");\r\n    if (logoTrack && GB_LOGOS.length) {\r\n      const html = GB_LOGOS.map((l) =>\r\n        `<img class=\"gb-rev__logo\" src=\"${esc(l.src)}\" alt=\"${esc(l.alt)}\" loading=\"lazy\" decoding=\"async\">`\r\n      ).join(\"\");\r\n      logoTrack.innerHTML = html + html;\r\n    }\r\n\r\n    \/* ---------- Reviews ---------- *\/\r\n    const track    = root.querySelector(\"[data-gb-track]\");\r\n    const viewport = root.querySelector(\"[data-gb-viewport]\");\r\n    const prevBtn  = root.querySelector(\"[data-gb-prev]\");\r\n    const nextBtn  = root.querySelector(\"[data-gb-next]\");\r\n    const dotsWrap = root.querySelector(\"[data-gb-dots]\");\r\n    if (!track) return;\r\n\r\n    track.innerHTML = GB_REVIEWS.map((r) => `\r\n      <li class=\"gb-rev__slide\">\r\n        <article class=\"gb-rev__card\">\r\n          <div class=\"gb-rev__card-head\">\r\n            <h3 class=\"gb-rev__name\">${esc(r.name)}<\/h3>\r\n            <span class=\"gb-rev__card-stars\" role=\"img\" aria-label=\"5 van de 5 sterren\">${STARS.map(s => `<span>${s}<\/span>`).join(\"\")}<\/span>\r\n          <\/div>\r\n          <p class=\"gb-rev__text\">${esc(r.text)}<\/p>\r\n        <\/article>\r\n      <\/li>`).join(\"\");\r\n\r\n    const slides = Array.from(track.children);\r\n    let index = 0, maxIndex = 0, step = 0, maxOffset = 0, timer = null;\r\n\r\n    function measure() {\r\n      if (!slides.length) return;\r\n      const gap = parseFloat(getComputedStyle(track).columnGap) || 0;\r\n      step = slides[0].getBoundingClientRect().width + gap;\r\n      \/\/ hoe ver kan de track maximaal schuiven voor hij de rechterrand raakt\r\n      maxOffset = Math.max(0, track.scrollWidth - viewport.clientWidth);\r\n      maxIndex  = step > 0 ? Math.ceil((maxOffset - 1) \/ step) : 0;\r\n      if (maxIndex < 0) maxIndex = 0;\r\n      if (index > maxIndex) index = maxIndex;\r\n    }\r\n\r\n    function offsetFor(i) {\r\n      return Math.min(i * step, maxOffset);   \/\/ laatste stap klikt vast op de rand\r\n    }\r\n\r\n    function layout() {\r\n      measure();\r\n      buildDots();\r\n      apply();\r\n    }\r\n\r\n    function apply() {\r\n      if (!slides.length) return;\r\n      track.style.transform = `translate3d(${-offsetFor(index)}px,0,0)`;\r\n\r\n      if (prevBtn) prevBtn.disabled = index <= 0;\r\n      if (nextBtn) nextBtn.disabled = index >= maxIndex;\r\n\r\n      if (dotsWrap) Array.from(dotsWrap.children).forEach((d, i) =>\r\n        d.classList.toggle(\"is-active\", i === index));\r\n    }\r\n\r\n    function goTo(i, user) {\r\n      index = Math.max(0, Math.min(i, maxIndex));\r\n      apply();\r\n      if (user) restart();\r\n    }\r\n\r\n    function buildDots() {\r\n      if (!dotsWrap) return;\r\n      dotsWrap.innerHTML = \"\";\r\n      for (let i = 0; i <= maxIndex; i++) {\r\n        const b = document.createElement(\"button\");\r\n        b.type = \"button\";\r\n        b.className = \"gb-rev__dot\" + (i === index ? \" is-active\" : \"\");\r\n        b.setAttribute(\"aria-label\", \"Ga naar review \" + (i + 1));\r\n        b.addEventListener(\"click\", () => goTo(i, true));\r\n        dotsWrap.appendChild(b);\r\n      }\r\n    }\r\n\r\n    if (prevBtn) prevBtn.addEventListener(\"click\", () => goTo(index - 1, true));\r\n    if (nextBtn) nextBtn.addEventListener(\"click\", () => goTo(index + 1, true));\r\n\r\n    \/* ---------- Autoplay ---------- *\/\r\n    const reduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\r\n    function start() {\r\n      if (!GB_AUTOPLAY_MS || reduce || maxIndex === 0 || timer) return;\r\n      timer = setInterval(() => goTo(index >= maxIndex ? 0 : index + 1), GB_AUTOPLAY_MS);\r\n    }\r\n    function stop()    { clearInterval(timer); timer = null; }\r\n    function restart() { stop(); start(); }\r\n\r\n    root.addEventListener(\"mouseenter\", stop);\r\n    root.addEventListener(\"mouseleave\", start);\r\n\r\n    \/* ---------- Swipe \/ drag ---------- *\/\r\n    let startX = 0, delta = 0, dragging = false;\r\n\r\n    const onDown = (e) => {\r\n      dragging = true; delta = 0;\r\n      startX = e.touches ? e.touches[0].clientX : e.clientX;\r\n      track.classList.add(\"is-dragging\");\r\n      viewport.classList.add(\"is-dragging\");\r\n      stop();\r\n    };\r\n    const onMove = (e) => {\r\n      if (!dragging) return;\r\n      const x = e.touches ? e.touches[0].clientX : e.clientX;\r\n      delta = x - startX;\r\n      track.style.transform = `translate3d(${-offsetFor(index) + delta}px,0,0)`;\r\n    };\r\n    const onUp = () => {\r\n      if (!dragging) return;\r\n      dragging = false;\r\n      track.classList.remove(\"is-dragging\");\r\n      viewport.classList.remove(\"is-dragging\");\r\n      if (Math.abs(delta) > 50) goTo(index + (delta < 0 ? 1 : -1));\r\n      else apply();\r\n      start();\r\n    };\r\n\r\n    viewport.addEventListener(\"mousedown\", onDown);\r\n    window.addEventListener(\"mousemove\", onMove);\r\n    window.addEventListener(\"mouseup\", onUp);\r\n    viewport.addEventListener(\"touchstart\", onDown, { passive: true });\r\n    viewport.addEventListener(\"touchmove\", onMove, { passive: true });\r\n    viewport.addEventListener(\"touchend\", onUp);\r\n    viewport.addEventListener(\"dragstart\", (e) => e.preventDefault());\r\n\r\n    \/* ---------- Toetsenbord ---------- *\/\r\n    viewport.setAttribute(\"tabindex\", \"0\");\r\n    viewport.addEventListener(\"keydown\", (e) => {\r\n      if (e.key === \"ArrowLeft\")  { goTo(index - 1, true); e.preventDefault(); }\r\n      if (e.key === \"ArrowRight\") { goTo(index + 1, true); e.preventDefault(); }\r\n    });\r\n\r\n    \/* ---------- Resize ---------- *\/\r\n    let rt;\r\n    window.addEventListener(\"resize\", () => {\r\n      clearTimeout(rt);\r\n      rt = setTimeout(layout, 150);\r\n    });\r\n\r\n    layout();\r\n    start();\r\n  }\r\n\r\n  function boot() {\r\n    document.querySelectorAll(\"[data-gb-rev]\").forEach(initBlock);\r\n  }\r\n\r\n  if (document.readyState !== \"loading\") boot();\r\n  else document.addEventListener(\"DOMContentLoaded\", boot);\r\n\r\n  \/\/ Ook binnen de Elementor-editor\r\n  if (window.jQuery) {\r\n    jQuery(window).on(\"elementor\/frontend\/init\", function () {\r\n      if (window.elementorFrontend && window.elementorFrontend.hooks) {\r\n        elementorFrontend.hooks.addAction(\"frontend\/element_ready\/global\", boot);\r\n      }\r\n    });\r\n  }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2d2db07 e-flex e-con-boxed e-con e-parent\" data-id=\"2d2db07\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[],&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-4d8dede e-con-full e-flex e-con e-child\" data-id=\"4d8dede\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7f77ff4 elementor-widget__width-initial elementor-hidden-mobile elementor-widget elementor-widget-heading\" data-id=\"7f77ff4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">haal meer uit je<br>ruimte met slimme <br><span class=\"outline-tekst-wit\">magazijninrichting<\/span><\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e706309 elementor-widget__width-initial elementor-hidden-desktop elementor-hidden-tablet elementor-widget elementor-widget-heading\" data-id=\"e706309\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">meer ruimte<br>door slimme <br><span class=\"outline-tekst-wit\">magazijnin-<br>rinchting<\/span><\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1a60aaf e-transform elementor-widget elementor-widget-button\" data-id=\"1a60aaf\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_transform_translateX_effect_hover&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:7,&quot;sizes&quot;:[]},&quot;_transform_translateX_effect_hover_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateX_effect_hover_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateY_effect_hover&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateY_effect_hover_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateY_effect_hover_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/gerritsbv.nl\/contact\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Plan een gratis adviesgesprek<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Diensten Sinds 1985 is Montagebedrijf Gerrits d\u00e9 specialist in complete magazijnoplossingen. Van montage, demontage en keuringen tot veiligheidsoplossingen en de levering van nieuwe en gebruikte magazijnstellingen: wij verzorgen het volledige traject van A tot Z. Met VCA-gecertificeerde monteurs, meer dan 10.000 m\u00b2 voorraad, korte communicatielijnen en een flexibele, persoonlijke aanpak zorgen wij voor een veilige, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_angie_page":false,"footnotes":""},"class_list":["post-152","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gerritsbv.nl\/en\/wp-json\/wp\/v2\/pages\/152","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gerritsbv.nl\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gerritsbv.nl\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gerritsbv.nl\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gerritsbv.nl\/en\/wp-json\/wp\/v2\/comments?post=152"}],"version-history":[{"count":111,"href":"https:\/\/gerritsbv.nl\/en\/wp-json\/wp\/v2\/pages\/152\/revisions"}],"predecessor-version":[{"id":2871,"href":"https:\/\/gerritsbv.nl\/en\/wp-json\/wp\/v2\/pages\/152\/revisions\/2871"}],"wp:attachment":[{"href":"https:\/\/gerritsbv.nl\/en\/wp-json\/wp\/v2\/media?parent=152"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}