{"id":33,"date":"2026-09-27T08:17:06","date_gmt":"2026-09-27T08:17:06","guid":{"rendered":"https:\/\/bsolution.me\/nl\/paint-calculator-4\/"},"modified":"2026-09-27T09:00:26","modified_gmt":"2026-09-27T09:00:26","slug":"paint-calculator-2","status":"publish","type":"page","link":"https:\/\/bsolution.me\/nl\/paint-calculator-2\/","title":{"rendered":"\ud83c\udfa8 Geavanceerde Verfcalculator"},"content":{"rendered":"\n\n<style>\n\/* Perfected Futuristic Design System by Bsolution *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Heebo:wght@300;400;500;700;800&display=swap');\n\n:root {\n    --f-bg: #F5F5F7;\n    --f-card: rgba(255, 255, 255, 0.85);\n    --f-text: #1d1d1f;\n    --f-muted: #86868b;\n    --f-accent: #0066cc;\n    --f-border: rgba(0, 0, 0, 0.08);\n    --f-shadow: 0 8px 30px rgba(0,0,0,0.04);\n}\n\n.dark-theme {\n    --f-bg: #000000;\n    --f-card: rgba(28, 28, 30, 0.85);\n    --f-text: #f5f5f7;\n    --f-muted: #86868b;\n    --f-accent: #2997ff;\n    --f-border: rgba(255, 255, 255, 0.12);\n    --f-shadow: 0 8px 40px rgba(0,0,0,0.6);\n}\n\n.futur-layout {\n    max-width: 900px;\n    margin: 0 auto;\n    padding: 60px 20px;\n    font-family: 'Heebo', -apple-system, system-ui, sans-serif;\n    direction: ltr;\n    color: var(--f-text);\n    background-color: transparent;\n    transition: color 0.3s ease;\n}\n\n\/* Global Background override when tool is active *\/\nbody.tool-active {\n    background-color: var(--f-bg) !important;\n}\n\n.futur-glass-card {\n    background: var(--f-card);\n    backdrop-filter: saturate(180%) blur(20px);\n    -webkit-backdrop-filter: saturate(180%) blur(20px);\n    border: 1px solid var(--f-border);\n    border-radius: 22px;\n    padding: 40px;\n    box-shadow: var(--f-shadow);\n    margin-bottom: 40px;\n}\n\n.futur-layout h1.wp-block-heading {\n    font-size: clamp(2.5rem, 5vw, 3.5rem);\n    font-weight: 800;\n    color: var(--f-text);\n    margin-bottom: 12px;\n    letter-spacing: -0.02em;\n    text-align: center;\n}\n\n.futur-layout .tool-card {\n    width: 80%;\n    margin: 0 auto 40px auto;\n}\n@media (max-width: 900px) {\n    .futur-layout .tool-card { width: 100%; }\n}\n\n.futur-layout header {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n    gap: 12px;\n    margin-bottom: 34px;\n    max-width: 800px;\n    margin-left: auto;\n    margin-right: auto;\n}\n.futur-layout header h1, \n.futur-layout header h2.main-title,\n.futur-layout header .title-wrap .main-title {\n    margin: 0;\n    font-size: clamp(2rem, 4vw, 2.7rem);\n    font-weight: 800;\n    letter-spacing: -0.02em;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 10px;\n    color: var(--f-text);\n}\n.futur-layout header h2.main-title span.icon { font-size: 1.25em; }\n.futur-layout header .subtitle,\n.futur-layout header p.subtitle {\n    margin: 0;\n    font-size: 1.05rem;\n    color: var(--f-muted);\n    line-height: 1.6;\n}\n.futur-layout header .badge-local,\n.futur-layout header .free-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 0.78rem;\n    padding: 6px 14px;\n    border-radius: 999px;\n    border: 1px solid var(--f-border);\n    background: var(--f-card);\n    color: var(--f-text);\n    box-shadow: 0 4px 10px rgba(0,0,0,0.02);\n}\n.futur-layout header .badge-dot,\n.futur-layout header .free-dot {\n    width: 8px;\n    height: 8px;\n    border-radius: 999px;\n    background: #22c55e;\n    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.25);\n}\n\n.futur-layout .page-hook {\n    font-size: 1.25rem;\n    color: var(--f-muted);\n    text-align: center;\n    margin-bottom: 50px;\n    max-width: 700px;\n    margin-left: auto;\n    margin-right: auto;\n}\n\n.futur-layout h2.wp-block-heading {\n    font-size: 1.7rem;\n    font-weight: 700;\n    margin: 40px 0 20px;\n}\n\n.futur-layout p {\n    font-size: 1.15rem;\n    color: var(--f-text);\n    opacity: 0.9;\n    margin-bottom: 24px;\n    line-height: 1.7;\n}\n\n\/* Theme Toggle Button *\/\n.theme-toggle-wrap {\n    display: flex;\n    justify-content: flex-end;\n    margin-bottom: 20px;\n}\n.theme-btn {\n    background: var(--f-card);\n    border: 1px solid var(--f-border);\n    color: var(--f-text);\n    padding: 8px 16px;\n    border-radius: 999px;\n    cursor: pointer;\n    font-size: 0.9rem;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    box-shadow: var(--f-shadow);\n}\n\n\/* Input & Button Styles for Tools *\/\n.futur-input {\n    width: 100%;\n    padding: 12px 16px;\n    border-radius: 12px;\n    border: 1px solid var(--f-border);\n    background: rgba(0,0,0,0.03);\n    color: var(--f-text);\n    font-size: 1rem;\n    margin-bottom: 16px;\n    transition: all 0.2s ease;\n}\n.dark-theme .futur-input { background: rgba(255,255,255,0.05); }\n\n.futur-btn {\n    background: var(--f-accent);\n    color: #fff;\n    border: none;\n    padding: 14px 28px;\n    border-radius: 12px;\n    font-weight: 700;\n    font-size: 1.1rem;\n    cursor: pointer;\n    transition: transform 0.2s ease;\n}\n.futur-btn:hover { transform: scale(1.02); }\n\n@media (max-width: 600px) {\n    .futur-layout { padding: 40px 16px; }\n    .futur-glass-card { padding: 24px; }\n}\n<\/style>\n<script>\n(function() {\n    var applyTheme = function(theme) {\n        if (theme === 'dark') {\n            document.documentElement.classList.add('dark-theme');\n        } else {\n            document.documentElement.classList.remove('dark-theme');\n        }\n        localStorage.setItem('bsolution-theme', theme);\n    };\n    \n    \/\/ Apply saved theme immediately\n    document.body.classList.add('tool-active');\n    var saved = localStorage.getItem('bsolution-theme') || 'light';\n    applyTheme(saved);\n    \n    \/\/ Bind theme toggle button (with retry since it may not exist yet)\n    function bindToggle() {\n        var btn = document.getElementById('globalThemeToggle');\n        if (!btn) { setTimeout(bindToggle, 100); return; }\n        if (btn.dataset.bound) return;\n        btn.dataset.bound = '1';\n        btn.addEventListener('click', function() {\n            var isDark = document.documentElement.classList.contains('dark-theme');\n            applyTheme(isDark ? 'light' : 'dark');\n        });\n    }\n    bindToggle();\n})();\n<\/script>\n\n<div class=\"futur-layout\">\n<div class=\"theme-toggle-wrap\"><button class=\"theme-btn\" id=\"globalThemeToggle\">\ud83c\udf19 Donkere Modus<\/button><\/div>\n\n\n\n<header>\n<h2 class=\"main-title\">Geavanceerde Verfcalculator <span class=\"icon pill\">\ud83c\udfa8<\/span><\/h2>\n<p class=\"subtitle\">Bereken eenvoudig de benodigde hoeveelheid verf voor uw project.<\/p>\n<div class=\"free-badge\"><span class=\"free-dot\"><\/span> Volledig gratis<\/div>\n<\/header>\n\n\n\n<div class=\"futur-glass-card tool-card\">\n<div id=\"bnet-tool-paint-calculator\">\n<style>\n    \/* CSS Variables: Light Mode *\/\n    #bnet-tool-paint-calculator {\n      --bg-color: transparent;\n      --text-color: #333333;\n      --border-color: #e5e5e5;\n      --accent-color: #0066cc;\n      --secondary-bg: #f8f9fa;\n      --danger-color: #dc3545;\n      --radius: 12px;\n      font-family: 'Heebo', sans-serif;\n      direction: ltr;\n      color: var(--text-color);\n      max-width: 100%;\n      box-sizing: border-box;\n    }\n    \n    \/* CSS Variables: Dark Mode *\/\n    .dark-theme #bnet-tool-paint-calculator {\n      --text-color: #f5f5f5;\n      --border-color: #444444;\n      --accent-color: #2997ff;\n      --secondary-bg: #1a1a1a;\n    }\n\n    #bnet-tool-paint-calculator * {\n      box-sizing: border-box;\n    }\n\n    \/* Styles scoped only to this tool *\/\n    #bnet-tool-paint-calculator .calculator-container {\n      display: flex;\n      flex-direction: column;\n      gap: 20px;\n    }\n\n    #bnet-tool-paint-calculator .section-title {\n      font-size: 1.1rem;\n      font-weight: bold;\n      margin-bottom: 10px;\n      color: var(--text-color);\n    }\n    \n    #bnet-tool-paint-calculator .section-subtitle {\n      font-size: 0.9rem;\n      color: #666;\n      margin-bottom: 15px;\n    }\n\n    .dark-theme #bnet-tool-paint-calculator .section-subtitle {\n      color: #aaa;\n    }\n\n    #bnet-tool-paint-calculator .input-group {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n      margin-bottom: 15px;\n    }\n\n    #bnet-tool-paint-calculator label {\n      font-size: 0.9rem;\n      font-weight: 600;\n    }\n\n    #bnet-tool-paint-calculator select, \n    #bnet-tool-paint-calculator input[type=\"number\"],\n    #bnet-tool-paint-calculator input[type=\"text\"] {\n      width: 100%;\n      padding: 10px 14px;\n      border: 1px solid var(--border-color);\n      border-radius: 8px;\n      background: var(--secondary-bg);\n      color: var(--text-color);\n      font-family: inherit;\n      font-size: 1rem;\n    }\n    \n    #bnet-tool-paint-calculator select:focus, \n    #bnet-tool-paint-calculator input:focus {\n      outline: none;\n      border-color: var(--accent-color);\n      box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2);\n    }\n    \n    .dark-theme #bnet-tool-paint-calculator select:focus, \n    .dark-theme #bnet-tool-paint-calculator input:focus {\n      box-shadow: 0 0 0 2px rgba(41, 151, 255, 0.2);\n    }\n\n    #bnet-tool-paint-calculator details {\n      background: var(--secondary-bg);\n      border: 1px solid var(--border-color);\n      border-radius: var(--radius);\n      padding: 15px;\n      margin-bottom: 20px;\n    }\n    \n    #bnet-tool-paint-calculator summary {\n      font-weight: bold;\n      cursor: pointer;\n      user-select: none;\n      outline: none;\n    }\n\n    #bnet-tool-paint-calculator .chips {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 8px;\n    }\n\n    #bnet-tool-paint-calculator .chip {\n      background: var(--secondary-bg);\n      border: 1px solid var(--border-color);\n      color: var(--text-color);\n      padding: 8px 12px;\n      border-radius: 20px;\n      cursor: pointer;\n      font-size: 0.9rem;\n      transition: all 0.2s ease;\n    }\n\n    #bnet-tool-paint-calculator .chip.active {\n      background: var(--accent-color);\n      color: #fff;\n      border-color: var(--accent-color);\n    }\n\n    #bnet-tool-paint-calculator .areas-list {\n      display: flex;\n      flex-direction: column;\n      gap: 10px;\n    }\n\n    #bnet-tool-paint-calculator .area-row {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 10px;\n      align-items: center;\n      background: var(--bg-color);\n      padding: 10px;\n      border-radius: var(--radius);\n      border: 1px solid var(--border-color);\n    }\n\n    #bnet-tool-paint-calculator .area-row > div {\n      flex: 1;\n      min-width: 120px;\n    }\n\n    #bnet-tool-paint-calculator .btn {\n      padding: 10px 16px;\n      border: none;\n      border-radius: 8px;\n      font-weight: bold;\n      cursor: pointer;\n      font-family: inherit;\n      transition: background 0.2s ease;\n    }\n\n    #bnet-tool-paint-calculator .btn-primary {\n      background: var(--accent-color);\n      color: #fff;\n      width: 100%;\n      font-size: 1.1rem;\n      padding: 14px;\n      margin-top: 10px;\n    }\n\n    #bnet-tool-paint-calculator .btn-danger {\n      background: rgba(220, 53, 69, 0.1);\n      color: var(--danger-color);\n      border: 1px solid rgba(220, 53, 69, 0.3);\n      padding: 8px 12px;\n    }\n\n    #bnet-tool-paint-calculator .btn-secondary {\n      background: var(--secondary-bg);\n      color: var(--text-color);\n      border: 1px solid var(--border-color);\n    }\n    \n    #bnet-tool-paint-calculator .btn-secondary:hover {\n      background: rgba(0, 0, 0, 0.05);\n    }\n    \n    .dark-theme #bnet-tool-paint-calculator .btn-secondary:hover {\n      background: rgba(255, 255, 255, 0.05);\n    }\n\n    #bnet-tool-paint-calculator .result-panel {\n      background: rgba(0, 102, 204, 0.05);\n      border: 1px dashed var(--accent-color);\n      border-radius: var(--radius);\n      padding: 20px;\n      text-align: center;\n      margin-top: 20px;\n    }\n\n    .dark-theme #bnet-tool-paint-calculator .result-panel {\n      background: rgba(41, 151, 255, 0.1);\n    }\n\n    #bnet-tool-paint-calculator .result-value {\n      font-size: 2.5rem;\n      font-weight: 900;\n      color: var(--accent-color);\n      margin: 10px 0;\n    }\n\n    #bnet-tool-paint-calculator .result-unit {\n      font-size: 1.2rem;\n      font-weight: normal;\n    }\n\n    #bnet-tool-paint-calculator .result-details {\n      font-size: 0.9rem;\n      color: var(--text-color);\n      background: var(--secondary-bg);\n      padding: 10px;\n      border-radius: 8px;\n      margin-top: 15px;\n      text-align: left;\n      line-height: 1.6;\n    }\n\n    #bnet-tool-paint-calculator .error-msg {\n      color: var(--danger-color);\n      font-size: 0.85rem;\n      margin-top: 5px;\n      display: none;\n    }\n    \n    #bnet-tool-paint-calculator .buttons-row {\n      display: flex;\n      gap: 10px;\n      margin-bottom: 15px;\n    }\n    \n    @media (max-width: 600px) {\n      #bnet-tool-paint-calculator .area-row {\n        flex-direction: column;\n        align-items: stretch;\n      }\n      #bnet-tool-paint-calculator .area-row > div {\n        width: 100%;\n      }\n    }\n  <\/style>\n<div class=\"calculator-container\">\n<div>\n<div class=\"section-title\">\ud83e\uddee Basisinstellingen<\/div>\n<p class=\"section-subtitle\">De instellingen hier zijn van toepassing op alle hieronder ingevoerde oppervlakken. Als er oppervlakken zijn met verschillende eigenschappen, wordt aanbevolen deze apart te bereken.<\/p>\n<div class=\"input-group\">\n<label for=\"paint-surface\">Oppervlakte type<\/label>\n<select id=\"paint-surface\">\n<option selected=\"\" value=\"wall_interior\">Binnenmuur \/ plafond (stucwerk\/beton)<\/option>\n<option value=\"wall_exterior\">Ruwe buitenmuur<\/option>\n<option value=\"deck_wood\">Vlonder \/ houten buitenoppervlak<\/option>\n<option value=\"furniture_wood\">Houten kast \/ meubel<\/option>\n<option value=\"metal\">Metalen oppervlak<\/option>\n<option value=\"floor_epoxy\">Vloer (vloerverf \/ epoxy)<\/option>\n<\/select>\n<\/div>\n<div class=\"input-group\">\n<label for=\"paint-type\">Verftype<\/label>\n<select id=\"paint-type\">\n<option selected=\"\" value=\"water_wall\">Watergedragen \/ acrylverf voor muren<\/option>\n<option value=\"oil_wall\">Olieverf<\/option>\n<option value=\"wood_water\">Watergedragen verf \/ lak voor hout<\/option>\n<option value=\"wood_oil\">Oliegedragen verf \/ lak voor hout<\/option>\n<option value=\"metal_enamel\">Emaille \/ metaalverf<\/option>\n<option value=\"epoxy\">Tweecomponenten epoxy<\/option>\n<option value=\"spray_can\">Spuitbus<\/option>\n<\/select>\n<\/div>\n<div class=\"input-group\">\n<label for=\"paint-coats\">Gepland aantal lagen<\/label>\n<input id=\"paint-coats\" inputmode=\"numeric\" min=\"1\" step=\"1\" type=\"number\" value=\"2\"\/>\n<div class=\"error-msg\" id=\"coats-err\">Voer een geldig aantal lagen in (1 of meer).<\/div>\n<\/div>\n<\/div>\n<details>\n<summary>\u2699\ufe0f Geavanceerde instellingen<\/summary>\n<div style=\"margin-top: 15px;\">\n<div class=\"input-group\">\n<label for=\"paint-safety\">Veiligheidsmarge (%)<\/label>\n<input id=\"paint-safety\" inputmode=\"numeric\" min=\"0\" step=\"1\" type=\"number\" value=\"12\"\/>\n<p style=\"margin: 5px 0 0; font-size: 0.8rem; color: #666;\">Aanbevolen om marge te behouden voor reparaties (10%-15%).<\/p>\n<\/div>\n<div class=\"input-group\">\n<label>Absorptie \/ textuur van oppervlak<\/label>\n<div class=\"chips\" id=\"texture-chips\">\n<button class=\"chip active\" data-val=\"smooth\" type=\"button\">Glad \/ niet absorberend<\/button>\n<button class=\"chip\" data-val=\"normal\" type=\"button\">Normaal<\/button>\n<button class=\"chip\" data-val=\"rough\" type=\"button\">Ruw \/ absorberend<\/button>\n<\/div>\n<\/div>\n<div class=\"input-group\">\n<label>Schilder methode<\/label>\n<div class=\"chips\" id=\"method-chips\">\n<button class=\"chip active\" data-val=\"roller\" type=\"button\">Roller<\/button>\n<button class=\"chip\" data-val=\"brush\" type=\"button\">Kwast<\/button>\n<button class=\"chip\" data-val=\"spray_gun\" type=\"button\">Spuitpistool<\/button>\n<button class=\"chip\" data-val=\"spray_can\" type=\"button\">Spuitbus<\/button>\n<\/div>\n<\/div>\n<\/div>\n<\/details>\n<div>\n<div class=\"section-title\">\ud83d\udcd0 Oppervlakken te berekenen<\/div>\n<p class=\"section-subtitle\">Voer alle te schilderen oppervlakken in m\u00b2 in. U kunt verschillende muren en kamers toevoegen.<\/p>\n<div class=\"buttons-row\">\n<button class=\"btn btn-secondary\" id=\"add-area-btn\" type=\"button\">\u2795 Voeg gebied toe<\/button>\n<button class=\"btn btn-secondary\" id=\"clear-areas-btn\" type=\"button\">\ud83d\uddd1\ufe0f Wis alles<\/button>\n<\/div>\n<div class=\"areas-list\" id=\"areas-list\">\n<\/div>\n<div class=\"error-msg\" id=\"areas-err\">Voer ten minste \u00e9\u00e9n geldig gebied in (groter dan 0 m\u00b2).<\/div>\n<\/div>\n<button class=\"btn btn-primary\" id=\"calc-btn\" type=\"button\">Bereken verfhoeveelheid<\/button>\n<div class=\"result-panel\" id=\"result-panel\" style=\"display: none;\">\n<div class=\"section-title\">De aanbevolen hoeveelheid voor u is:<\/div>\n<div class=\"result-value\">\n<span id=\"result-liters\">0.00<\/span>\n<span class=\"result-unit\">liter<\/span>\n<\/div>\n<p id=\"result-subtitle\" style=\"margin: 0;\">Inclusief veiligheidsmarge.<\/p>\n<div class=\"result-details\" id=\"result-details\">\n<\/div>\n<\/div>\n<\/div>\n<script>\n    document.addEventListener(\"DOMContentLoaded\", () => {\n      const container = document.getElementById(\"bnet-tool-paint-calculator\");\n      if (!container) return;\n      \n      \/\/ Elements\n      const surfaceEl = container.querySelector(\"#paint-surface\");\n      const paintEl = container.querySelector(\"#paint-type\");\n      const coatsEl = container.querySelector(\"#paint-coats\");\n      const safetyEl = container.querySelector(\"#paint-safety\");\n      const textureChipsBox = container.querySelector(\"#texture-chips\");\n      const methodChipsBox = container.querySelector(\"#method-chips\");\n      const areasList = container.querySelector(\"#areas-list\");\n      const addAreaBtn = container.querySelector(\"#add-area-btn\");\n      const clearAreasBtn = container.querySelector(\"#clear-areas-btn\");\n      const calcBtn = container.querySelector(\"#calc-btn\");\n      const resultPanel = container.querySelector(\"#result-panel\");\n      \n      let currentTexture = \"smooth\";\n      let currentMethod = \"roller\";\n\n      \/\/ Constants\n      const baseCoverage = {\n        water_wall: 11,\n        oil_wall: 13,\n        wood_water: 10,\n        wood_oil: 9,\n        metal_enamel: 11,\n        epoxy: 8,\n        spray_can: 2\n      };\n      \n      const surfaceFactor = {\n        wall_interior: 1.00,\n        wall_exterior: 0.80,\n        deck_wood: 0.75,\n        furniture_wood: 0.95,\n        metal: 1.00,\n        floor_epoxy: 0.85\n      };\n      \n      const textureFactor = { smooth: 1.00, normal: 0.90, rough: 0.75 };\n      const methodFactor = { roller: 1.00, brush: 0.90, spray_gun: 0.80, spray_can: 0.70 };\n\n      \/\/ Helper for chips\n      function bindChips(box, onChange) {\n        box.addEventListener(\"click\", (e) => {\n          const btn = e.target.closest(\".chip\");\n          if (!btn) return;\n          box.querySelectorAll(\".chip\").forEach(b => b.classList.remove(\"active\"));\n          btn.classList.add(\"active\");\n          onChange(btn.getAttribute(\"data-val\"));\n        });\n      }\n\n      bindChips(textureChipsBox, val => currentTexture = val);\n      bindChips(methodChipsBox, val => currentMethod = val);\n\n      \/\/ Areas Management\n      function createAreaRow(name = \"\", area = \"\") {\n        const row = document.createElement(\"div\");\n        row.className = \"area-row\";\n        row.innerHTML = `\n          <div class=\"input-group\" style=\"margin: 0;\">\n            <label>Naam gebied (optioneel)<\/label>\n            <input type=\"text\" class=\"area-name\" placeholder=\"Bijvoorbeeld: Woonkamer\" value=\"${name}\">\n          <\/div>\n          <div class=\"input-group\" style=\"margin: 0;\">\n            <label>Oppervlakte (m\u00b2)<\/label>\n            <input type=\"number\" class=\"area-val\" min=\"0\" step=\"0.1\" placeholder=\"Bijvoorbeeld: 15.5\" value=\"${area}\">\n          <\/div>\n          <div style=\"flex: 0 0 auto; display: flex; align-items: flex-end; padding-bottom: 2px;\">\n            <button class=\"btn btn-danger del-area-btn\" type=\"button\" aria-label=\"Verwijder gebied\">\u2715 Verwijder<\/button>\n          <\/div>\n        `;\n        \n        row.querySelector(\".del-area-btn\").addEventListener(\"click\", () => {\n          row.remove();\n          if (areasList.children.length === 0) {\n            addAreaRow();\n          }\n        });\n        \n        return row;\n      }\n\n      function addAreaRow() {\n        areasList.appendChild(createAreaRow());\n      }\n\n      addAreaBtn.addEventListener(\"click\", addAreaRow);\n      \n      clearAreasBtn.addEventListener(\"click\", () => {\n        areasList.innerHTML = \"\";\n        addAreaRow();\n        resultPanel.style.display = \"none\";\n      });\n\n      \/\/ Initialize with one empty row\n      addAreaRow();\n\n      \/\/ Calculation logic\n      function calc() {\n        \/\/ Validation\n        let isValid = true;\n        \n        const coats = parseFloat(coatsEl.value);\n        if (isNaN(coats) || coats < 1) {\n          container.querySelector(\"#coats-err\").style.display = \"block\";\n          isValid = false;\n        } else {\n          container.querySelector(\"#coats-err\").style.display = \"none\";\n        }\n\n        let totalArea = 0;\n        let validAreas = 0;\n        \n        areasList.querySelectorAll(\".area-row\").forEach(row => {\n          const val = parseFloat(row.querySelector(\".area-val\").value);\n          if (!isNaN(val) && val > 0) {\n            totalArea += val;\n            validAreas++;\n          }\n        });\n\n        if (validAreas === 0) {\n          container.querySelector(\"#areas-err\").style.display = \"block\";\n          isValid = false;\n        } else {\n          container.querySelector(\"#areas-err\").style.display = \"none\";\n        }\n\n        if (!isValid) return;\n\n        \/\/ Math\n        const safety = parseFloat(safetyEl.value) || 0;\n        const paint = paintEl.value;\n        const surface = surfaceEl.value;\n        \n        const cov = baseCoverage[paint] || 10;\n        const sf = surfaceFactor[surface] || 1;\n        const tf = textureFactor[currentTexture] || 1;\n        const mf = methodFactor[currentMethod] || 1;\n        \n        const effCoverage = cov * sf * tf * mf;\n        const litersRaw = (totalArea * coats) \/ effCoverage;\n        const litersWithSafety = litersRaw * (1 + (safety \/ 100));\n        \n        const litersRounded = Math.ceil(litersWithSafety * 100) \/ 100;\n\n        \/\/ Display\n        container.querySelector(\"#result-liters\").textContent = litersRounded.toFixed(2);\n        \n        const surfaceText = surfaceEl.options[surfaceEl.selectedIndex].text;\n        const paintText = paintEl.options[paintEl.selectedIndex].text;\n        \n        container.querySelector(\"#result-details\").innerHTML = `\n          <strong>Details berekening:<\/strong><br>\n          Totale oppervlakte: <strong>${totalArea.toFixed(1)} m\u00b2<\/strong><br>\n          Aantal lagen: <strong>${coats}<\/strong><br>\n          Type oppervlak: <strong>${surfaceText}<\/strong><br>\n          Type verf: <strong>${paintText}<\/strong><br>\n          Geschatte basisdekking: <strong>${cov.toFixed(1)} m\u00b2\/liter<\/strong><br>\n          Effectieve dekking (na factoren): <strong>${effCoverage.toFixed(1)} m\u00b2\/liter<\/strong><br>\n          Toegevoegde veiligheidsmarge: <strong>${safety}%<\/strong>\n        `;\n        \n        resultPanel.style.display = \"block\";\n        \n        \/\/ Scroll to result smoothly\n        resultPanel.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n      }\n\n      calcBtn.addEventListener(\"click\", calc);\n    });\n  <\/script>\n<\/div>\n<\/div>\n\n\n\n<div class=\"futur-glass-card seo-card\">\n\n\n\n<h2 class=\"wp-block-heading\">Calculator verfverbruik voor oppervlakken: hoe bereken je hoeveel liter je nodig hebt voor het hele huis?<\/h2>\n\n\n\n<p>Wanneer u verschillende gebieden schildert \u2014 bijvoorbeeld een woonkamer, slaapkamers, gang, deuren of kasten \u2014 is de belangrijkste vraag\n    <strong>hoeveel verf u in totaal moet kopen<\/strong>. Met deze calculator kunt u meerdere oppervlakken in vierkante meters toevoegen, ze optellen en een duidelijke schatting krijgen\n    op basis van oppervlaktetype, verftype, schildermethode en aantal lagen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Waarom is het goed om meerdere gebieden samen te berekenen?<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tijdbesparing: u koopt \u00e9\u00e9n keer verf in plaats van midden in het werk terug te moeten naar de winkel.<\/li>\n\n<li>Budgetnauwkeurigheid: u weet van tevoren hoeveel emmers\/liters u nodig heeft.<\/li>\n\n<li>Werkbeheer: het is gemakkelijker om taken per kamer te verdelen en toch de juiste hoeveelheid verf over te houden.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Wat heeft invloed op de hoeveelheid verf?<\/h3>\n\n\n\n<p>Het verfverbruik hangt niet alleen af van de oppervlakte, maar ook van de absorptie en textuur (ruwe muur\/onbehandeld hout), het verftype (water\/olie\/epoxy) en\n    de schildermethode (roller\/kwast\/spuit). Daarom gebruikt de calculator aanpassingsfactoren om een meer realistische schatting te geven.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Tips voor een nauwkeuriger resultaat<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Meet oppervlakken systematisch: lengte \u00d7 hoogte voor elke muur en tel ze op.<\/li>\n\n<li>Kies het juiste aantal lagen: meestal 2 lagen, en bij scherpe kleurovergangen mogelijk 3.<\/li>\n\n<li>Laat een veiligheidsmarge: 10%\u201315% is standaard voor reparatiewerkzaamheden en afwerkingen.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Interne links naar andere handige hulpmiddelen<\/h3>\n\n\n\n<p>Op de site vindt u meer gratis tools die u kunnen helpen bij het plannen van werk en het beheren van taken:\n    <a href=\"\/nl\/Message-Link-Generator\/\">WhatsApp-link generator<\/a>,\n    <a href=\"\/nl\/AC-Calculation\/\">Airconditioning calculator per kamer<\/a>,\n    <a href=\"\/nl\/Emoji-Finder\/\">Emoji-zoeker<\/a>,\n    <a href=\"\/nl\/Country-Flag-Finder\/\">Vlaggenzoeker<\/a>.<\/p>\n\n\n\n<p><strong>Belangrijk om te weten:<\/strong> Het resultaat is slechts een schatting. Het is altijd aan te raden naar boven af te ronden volgens veelvoorkomende verfverpakkingen en een restje over te houden voor toekomstige reparaties. De tool werkt alleen in de browser en zonder gegevens op de server op te slaan.<\/p>\n\n\n\n<\/div>\n\n\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\ud83c\udf19 Donkere Modus Geavanceerde Verfcalculator \ud83c\udfa8 Bereken eenvoudig de benodigde hoeveelheid verf voor uw project. Volledig gratis \ud83e\uddee Basisinstellingen De instellingen hier zijn van toepassing op alle hieronder ingevoerde oppervlakken. Als er oppervlakken zijn met verschillende eigenschappen, wordt aanbevolen deze apart te bereken. Oppervlakte type Binnenmuur \/ plafond (stucwerk\/beton)Ruwe buitenmuurVlonder \/ houten buitenoppervlakHouten kast \/ [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_yoast_wpseo_title":"\ud83c\udfa8 Geavanceerde Verfcalculator | Bsolution","_yoast_wpseo_metadesc":"Bereken eenvoudig de benodigde hoeveelheid verf voor uw project.","footnotes":"","tool_emoji":"\ud83c\udfa8","tool_category":"Rekenmachines","tool_featured":"no"},"class_list":["post-33","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>\ud83c\udfa8 Geavanceerde Verfcalculator | Bsolution<\/title>\n<meta name=\"description\" content=\"Bereken eenvoudig de benodigde hoeveelheid verf voor uw project.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/bsolution.me\/nl\/paint-calculator-2\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\ud83c\udfa8 Geavanceerde Verfcalculator | Bsolution\" \/>\n<meta property=\"og:description\" content=\"Bereken eenvoudig de benodigde hoeveelheid verf voor uw project.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/bsolution.me\/nl\/paint-calculator-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Gratis Zakelijke Tools\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-27T09:00:26+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/bsolution.me\\\/nl\\\/paint-calculator-2\\\/\",\"url\":\"https:\\\/\\\/bsolution.me\\\/nl\\\/paint-calculator-2\\\/\",\"name\":\"\ud83c\udfa8 Geavanceerde Verfcalculator | Bsolution\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/bsolution.me\\\/nl\\\/#website\"},\"datePublished\":\"2026-09-27T08:17:06+00:00\",\"dateModified\":\"2026-09-27T09:00:26+00:00\",\"description\":\"Bereken eenvoudig de benodigde hoeveelheid verf voor uw project.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/bsolution.me\\\/nl\\\/paint-calculator-2\\\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/bsolution.me\\\/nl\\\/paint-calculator-2\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/bsolution.me\\\/nl\\\/paint-calculator-2\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/bsolution.me\\\/nl\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\ud83c\udfa8 Geavanceerde Verfcalculator\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/bsolution.me\\\/nl\\\/#website\",\"url\":\"https:\\\/\\\/bsolution.me\\\/nl\\\/\",\"name\":\"Gratis Zakelijke Tools\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/bsolution.me\\\/nl\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\ud83c\udfa8 Geavanceerde Verfcalculator | Bsolution","description":"Bereken eenvoudig de benodigde hoeveelheid verf voor uw project.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/bsolution.me\/nl\/paint-calculator-2\/","og_locale":"nl_NL","og_type":"article","og_title":"\ud83c\udfa8 Geavanceerde Verfcalculator | Bsolution","og_description":"Bereken eenvoudig de benodigde hoeveelheid verf voor uw project.","og_url":"https:\/\/bsolution.me\/nl\/paint-calculator-2\/","og_site_name":"Gratis Zakelijke Tools","article_modified_time":"2026-09-27T09:00:26+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/bsolution.me\/nl\/paint-calculator-2\/","url":"https:\/\/bsolution.me\/nl\/paint-calculator-2\/","name":"\ud83c\udfa8 Geavanceerde Verfcalculator | Bsolution","isPartOf":{"@id":"https:\/\/bsolution.me\/nl\/#website"},"datePublished":"2026-09-27T08:17:06+00:00","dateModified":"2026-09-27T09:00:26+00:00","description":"Bereken eenvoudig de benodigde hoeveelheid verf voor uw project.","breadcrumb":{"@id":"https:\/\/bsolution.me\/nl\/paint-calculator-2\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/bsolution.me\/nl\/paint-calculator-2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/bsolution.me\/nl\/paint-calculator-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/bsolution.me\/nl\/"},{"@type":"ListItem","position":2,"name":"\ud83c\udfa8 Geavanceerde Verfcalculator"}]},{"@type":"WebSite","@id":"https:\/\/bsolution.me\/nl\/#website","url":"https:\/\/bsolution.me\/nl\/","name":"Gratis Zakelijke Tools","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/bsolution.me\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"}]}},"_links":{"self":[{"href":"https:\/\/bsolution.me\/nl\/wp-json\/wp\/v2\/pages\/33","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bsolution.me\/nl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bsolution.me\/nl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bsolution.me\/nl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bsolution.me\/nl\/wp-json\/wp\/v2\/comments?post=33"}],"version-history":[{"count":1,"href":"https:\/\/bsolution.me\/nl\/wp-json\/wp\/v2\/pages\/33\/revisions"}],"predecessor-version":[{"id":34,"href":"https:\/\/bsolution.me\/nl\/wp-json\/wp\/v2\/pages\/33\/revisions\/34"}],"wp:attachment":[{"href":"https:\/\/bsolution.me\/nl\/wp-json\/wp\/v2\/media?parent=33"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}