{"id":32,"date":"2026-09-27T08:16:58","date_gmt":"2026-09-27T08:16:58","guid":{"rendered":"https:\/\/bsolution.me\/de\/paint-calculator-4\/"},"modified":"2026-09-27T09:00:00","modified_gmt":"2026-09-27T09:00:00","slug":"paint-calculator-2","status":"publish","type":"page","link":"https:\/\/bsolution.me\/de\/paint-calculator-2\/","title":{"rendered":"\ud83c\udfa8 Erweiterter Farbrechner"},"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 Dunkelmodus<\/button><\/div>\n\n\n\n<header>\n<h2 class=\"main-title\">Erweiterter Farbrechner <span class=\"icon pill\">\ud83c\udfa8<\/span><\/h2>\n<p class=\"subtitle\">Berechnen Sie einfach die ben\u00f6tigte Farbmenge f\u00fcr Ihr Projekt.<\/p>\n<div class=\"free-badge\"><span class=\"free-dot\"><\/span> Komplett kostenlos<\/div>\n<\/header>\n\n\n\n<div class=\"futur-glass-card tool-card\">\n<div dir=\"ltr\" id=\"bnet-tool-paint-calculator\" lang=\"de\">\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 Grundeinstellungen<\/div>\n<p class=\"section-subtitle\">Die Einstellungen hier gelten f\u00fcr alle unten eingegebenen Fl\u00e4chen. Wenn es verschiedene Oberfl\u00e4chentypen gibt, empfiehlt es sich, diese separat zu berechnen.<\/p>\n<div class=\"input-group\">\n<label for=\"paint-surface\">Oberfl\u00e4chentyp<\/label>\n<select id=\"paint-surface\">\n<option selected=\"\" value=\"wall_interior\">Innenwand \/ Decke (Putz\/Beton)<\/option>\n<option value=\"wall_exterior\">Raue Au\u00dfenwand<\/option>\n<option value=\"deck_wood\">Terrasse \/ Au\u00dfenholzfl\u00e4che<\/option>\n<option value=\"furniture_wood\">Schrank \/ Holzm\u00f6bel<\/option>\n<option value=\"metal\">Metalloberfl\u00e4che<\/option>\n<option value=\"floor_epoxy\">Boden (Bodenfarbe \/ Epoxid)<\/option>\n<\/select>\n<\/div>\n<div class=\"input-group\">\n<label for=\"paint-type\">Farbtyp<\/label>\n<select id=\"paint-type\">\n<option selected=\"\" value=\"water_wall\">Wasser- \/ Acrylfarbe f\u00fcr W\u00e4nde<\/option>\n<option value=\"oil_wall\">\u00d6lfarbe<\/option>\n<option value=\"wood_water\">Farbe \/ Lack auf Wasserbasis f\u00fcr Holz<\/option>\n<option value=\"wood_oil\">Farbe \/ Lack auf \u00d6lbasis f\u00fcr Holz<\/option>\n<option value=\"metal_enamel\">Emaille \/ Metallfarbe<\/option>\n<option value=\"epoxy\">2-Komponenten-Epoxid<\/option>\n<option value=\"spray_can\">Spr\u00fchfarbe (Dose)<\/option>\n<\/select>\n<\/div>\n<div class=\"input-group\">\n<label for=\"paint-coats\">Geplante Anzahl von Schichten<\/label>\n<input id=\"paint-coats\" inputmode=\"numeric\" min=\"1\" step=\"1\" type=\"number\" value=\"2\"\/>\n<div class=\"error-msg\" id=\"coats-err\">Bitte eine g\u00fcltige Anzahl von Schichten eingeben (1 oder mehr).<\/div>\n<\/div>\n<\/div>\n<details>\n<summary>\u2699\ufe0f Erweiterte Einstellungen<\/summary>\n<div style=\"margin-top: 15px;\">\n<div class=\"input-group\">\n<label for=\"paint-safety\">Sicherheitsmarge (%)<\/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;\">Es wird empfohlen, einen Puffer f\u00fcr Ausbesserungen einzuplanen (10%-15%).<\/p>\n<\/div>\n<div class=\"input-group\">\n<label>Saugf\u00e4higkeit \/ Oberfl\u00e4chenstruktur<\/label>\n<div class=\"chips\" id=\"texture-chips\">\n<button class=\"chip active\" data-val=\"smooth\" type=\"button\">Glatt \/ Nicht saugend<\/button>\n<button class=\"chip\" data-val=\"normal\" type=\"button\">Normal<\/button>\n<button class=\"chip\" data-val=\"rough\" type=\"button\">Rau \/ Saugend<\/button>\n<\/div>\n<\/div>\n<div class=\"input-group\">\n<label>Auftragsmethode<\/label>\n<div class=\"chips\" id=\"method-chips\">\n<button class=\"chip active\" data-val=\"roller\" type=\"button\">Rolle<\/button>\n<button class=\"chip\" data-val=\"brush\" type=\"button\">Pinsel<\/button>\n<button class=\"chip\" data-val=\"spray_gun\" type=\"button\">Spr\u00fchen (Pistole)<\/button>\n<button class=\"chip\" data-val=\"spray_can\" type=\"button\">Spr\u00fchdose<\/button>\n<\/div>\n<\/div>\n<\/div>\n<\/details>\n<div>\n<div class=\"section-title\">\ud83d\udcd0 Fl\u00e4chen zur Berechnung<\/div>\n<p class=\"section-subtitle\">Geben Sie alle zu streichenden Fl\u00e4chen in m\u00b2 ein. Sie k\u00f6nnen verschiedene W\u00e4nde und R\u00e4ume hinzuf\u00fcgen.<\/p>\n<div class=\"buttons-row\">\n<button class=\"btn btn-secondary\" id=\"add-area-btn\" type=\"button\">\u2795 Fl\u00e4che hinzuf\u00fcgen<\/button>\n<button class=\"btn btn-secondary\" id=\"clear-areas-btn\" type=\"button\">\ud83d\uddd1\ufe0f Alles l\u00f6schen<\/button>\n<\/div>\n<div class=\"areas-list\" id=\"areas-list\">\n<\/div>\n<div class=\"error-msg\" id=\"areas-err\">Bitte mindestens eine g\u00fcltige Fl\u00e4che eingeben (\u00fcber 0 m\u00b2).<\/div>\n<\/div>\n<button class=\"btn btn-primary\" id=\"calc-btn\" type=\"button\">Farbmenge berechnen<\/button>\n<div class=\"result-panel\" id=\"result-panel\" style=\"display: none;\">\n<div class=\"section-title\">Die empfohlene Menge f\u00fcr Sie ist:<\/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;\">Inklusive Sicherheitsmarge.<\/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>Bereichsname (Optional)<\/label>\n            <input type=\"text\" class=\"area-name\" placeholder=\"Zum Beispiel: Wohnzimmer\" value=\"${name}\">\n          <\/div>\n          <div class=\"input-group\" style=\"margin: 0;\">\n            <label>Fl\u00e4che (m\u00b2)<\/label>\n            <input type=\"number\" class=\"area-val\" min=\"0\" step=\"0.1\" placeholder=\"Zum Beispiel: 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=\"Fl\u00e4che l\u00f6schen\">\u2715 L\u00f6schen<\/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>Berechnungsdetails:<\/strong><br>\n          Gesamtfl\u00e4che: <strong>${totalArea.toFixed(1)} m\u00b2<\/strong><br>\n          Anzahl Schichten: <strong>${coats}<\/strong><br>\n          Oberfl\u00e4chentyp: <strong>${surfaceText}<\/strong><br>\n          Farbtyp: <strong>${paintText}<\/strong><br>\n          Gesch\u00e4tzte Basisabdeckung: <strong>${cov.toFixed(1)} m\u00b2\/Liter<\/strong><br>\n          Effektive Abdeckung (nach Faktoren): <strong>${effCoverage.toFixed(1)} m\u00b2\/Liter<\/strong><br>\n          Hinzugef\u00fcgte Sicherheitsmarge: <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\">Farbrechner f\u00fcr Oberfl\u00e4chen: Wie berechnet man, wie viele Liter man f\u00fcr das ganze Haus braucht?<\/h2>\n\n\n\n<p>Wenn man verschiedene Bereiche streicht \u2014 zum Beispiel Wohnzimmer, Schlafzimmer, Flure, T\u00fcren oder Schr\u00e4nke \u2014 ist die Hauptfrage,\n    <strong>wie viel Farbe man insgesamt kaufen sollte<\/strong>. Dieser Rechner erm\u00f6glicht es Ihnen, mehrere Fl\u00e4chen in m\u00b2 hinzuzuf\u00fcgen, diese zu summieren und eine klare Sch\u00e4tzung\n    basierend auf Oberfl\u00e4chentyp, Farbtyp, Auftragsmethode und Anzahl der Schichten zu erhalten.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Warum sollten mehrere Fl\u00e4chen zusammen berechnet werden?<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Zeitersparnis: Sie kaufen die Farbe einmal, anstatt mitten in der Arbeit zum Laden zur\u00fcckkehren zu m\u00fcssen.<\/li>\n\n<li>Budgetgenauigkeit: Sie wissen im Voraus, wie viele Eimer\/Liter ben\u00f6tigt werden.<\/li>\n\n<li>Arbeitsmanagement: Es ist einfacher, Aufgaben nach R\u00e4umen aufzuteilen und trotzdem die richtige Farbmenge zu haben.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Was beeinflusst die Farbmenge?<\/h3>\n\n\n\n<p>Der Farbverbrauch h\u00e4ngt nicht nur von der Fl\u00e4che ab, sondern auch von der Saugf\u00e4higkeit und Struktur (raue Wand\/unbehandeltes Holz), vom Farbtyp (Wasser\/\u00d6l\/Epoxid)\n    und von der Auftragsmethode (Rolle\/Pinsel\/Spr\u00fchen). Deshalb verwendet der Rechner Anpassungsfaktoren, um eine realistischere Sch\u00e4tzung zu liefern.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Tipps f\u00fcr ein genaueres Ergebnis<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Messen Sie die Fl\u00e4chen sorgf\u00e4ltig: L\u00e4nge \u00d7 H\u00f6he f\u00fcr jede Wand und summieren Sie diese.<\/li>\n\n<li>W\u00e4hlen Sie die richtige Anzahl von Schichten: Normalerweise 2 Schichten, und bei starken Farb\u00fcberg\u00e4ngen m\u00f6glicherweise 3.<\/li>\n\n<li>Lassen Sie eine Sicherheitsmarge: 10%\u201315% sind Standard f\u00fcr Ausbesserungen und Nacharbeiten.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Interne Links zu weiteren n\u00fctzlichen Tools<\/h3>\n\n\n\n<p>Auf der Website finden Sie weitere kostenlose Tools, die bei der Arbeitsplanung und Aufgabenverwaltung helfen k\u00f6nnen:\n    <a href=\"\/de\/Message-Link-Generator\/\">WhatsApp-Link-Generator<\/a>,\n    <a href=\"\/de\/AC-Calculation\/\">Klimaanlagen-Rechner f\u00fcr R\u00e4ume<\/a>,\n    <a href=\"\/de\/Emoji-Finder\/\">Emoji-Finder<\/a>,\n    <a href=\"\/de\/Country-Flag-Finder\/\">Flaggen-Finder<\/a>.<\/p>\n\n\n\n<p><strong>Wichtig zu wissen:<\/strong> Das Ergebnis ist nur eine Sch\u00e4tzung. Es wird immer empfohlen, basierend auf den g\u00e4ngigen Farbverpackungsgr\u00f6\u00dfen aufzurunden und einen Rest f\u00fcr zuk\u00fcnftige Ausbesserungen aufzubewahren. Das Tool funktioniert nur im Browser und speichert keine Daten auf dem Server.<\/p>\n\n\n\n<\/div>\n\n\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\ud83c\udf19 Dunkelmodus Erweiterter Farbrechner \ud83c\udfa8 Berechnen Sie einfach die ben\u00f6tigte Farbmenge f\u00fcr Ihr Projekt. Komplett kostenlos \ud83e\uddee Grundeinstellungen Die Einstellungen hier gelten f\u00fcr alle unten eingegebenen Fl\u00e4chen. Wenn es verschiedene Oberfl\u00e4chentypen gibt, empfiehlt es sich, diese separat zu berechnen. Oberfl\u00e4chentyp Innenwand \/ Decke (Putz\/Beton)Raue Au\u00dfenwandTerrasse \/ Au\u00dfenholzfl\u00e4cheSchrank \/ Holzm\u00f6belMetalloberfl\u00e4cheBoden (Bodenfarbe \/ Epoxid) Farbtyp Wasser- \/ [&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 Erweiterter Farbrechner | Bsolution","_yoast_wpseo_metadesc":"Berechnen Sie einfach die ben\u00f6tigte Farbmenge f\u00fcr Ihr Projekt.","footnotes":"","tool_emoji":"\ud83c\udfa8","tool_category":"Rechner","tool_featured":"no"},"class_list":["post-32","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 Erweiterter Farbrechner | Bsolution<\/title>\n<meta name=\"description\" content=\"Berechnen Sie einfach die ben\u00f6tigte Farbmenge f\u00fcr Ihr Projekt.\" \/>\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\/de\/paint-calculator-2\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\ud83c\udfa8 Erweiterter Farbrechner | Bsolution\" \/>\n<meta property=\"og:description\" content=\"Berechnen Sie einfach die ben\u00f6tigte Farbmenge f\u00fcr Ihr Projekt.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/bsolution.me\/de\/paint-calculator-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Kostenlose Tools f\u00fcr Unternehmen\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-27T09:00:00+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=\"3\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/bsolution.me\\\/de\\\/paint-calculator-2\\\/\",\"url\":\"https:\\\/\\\/bsolution.me\\\/de\\\/paint-calculator-2\\\/\",\"name\":\"\ud83c\udfa8 Erweiterter Farbrechner | Bsolution\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/bsolution.me\\\/de\\\/#website\"},\"datePublished\":\"2026-09-27T08:16:58+00:00\",\"dateModified\":\"2026-09-27T09:00:00+00:00\",\"description\":\"Berechnen Sie einfach die ben\u00f6tigte Farbmenge f\u00fcr Ihr Projekt.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/bsolution.me\\\/de\\\/paint-calculator-2\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/bsolution.me\\\/de\\\/paint-calculator-2\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/bsolution.me\\\/de\\\/paint-calculator-2\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/bsolution.me\\\/de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\ud83c\udfa8 Erweiterter Farbrechner\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/bsolution.me\\\/de\\\/#website\",\"url\":\"https:\\\/\\\/bsolution.me\\\/de\\\/\",\"name\":\"Kostenlose Tools f\u00fcr Unternehmen\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/bsolution.me\\\/de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\ud83c\udfa8 Erweiterter Farbrechner | Bsolution","description":"Berechnen Sie einfach die ben\u00f6tigte Farbmenge f\u00fcr Ihr Projekt.","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\/de\/paint-calculator-2\/","og_locale":"de_DE","og_type":"article","og_title":"\ud83c\udfa8 Erweiterter Farbrechner | Bsolution","og_description":"Berechnen Sie einfach die ben\u00f6tigte Farbmenge f\u00fcr Ihr Projekt.","og_url":"https:\/\/bsolution.me\/de\/paint-calculator-2\/","og_site_name":"Kostenlose Tools f\u00fcr Unternehmen","article_modified_time":"2026-09-27T09:00:00+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/bsolution.me\/de\/paint-calculator-2\/","url":"https:\/\/bsolution.me\/de\/paint-calculator-2\/","name":"\ud83c\udfa8 Erweiterter Farbrechner | Bsolution","isPartOf":{"@id":"https:\/\/bsolution.me\/de\/#website"},"datePublished":"2026-09-27T08:16:58+00:00","dateModified":"2026-09-27T09:00:00+00:00","description":"Berechnen Sie einfach die ben\u00f6tigte Farbmenge f\u00fcr Ihr Projekt.","breadcrumb":{"@id":"https:\/\/bsolution.me\/de\/paint-calculator-2\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/bsolution.me\/de\/paint-calculator-2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/bsolution.me\/de\/paint-calculator-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/bsolution.me\/de\/"},{"@type":"ListItem","position":2,"name":"\ud83c\udfa8 Erweiterter Farbrechner"}]},{"@type":"WebSite","@id":"https:\/\/bsolution.me\/de\/#website","url":"https:\/\/bsolution.me\/de\/","name":"Kostenlose Tools f\u00fcr Unternehmen","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/bsolution.me\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"}]}},"_links":{"self":[{"href":"https:\/\/bsolution.me\/de\/wp-json\/wp\/v2\/pages\/32","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bsolution.me\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bsolution.me\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bsolution.me\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bsolution.me\/de\/wp-json\/wp\/v2\/comments?post=32"}],"version-history":[{"count":1,"href":"https:\/\/bsolution.me\/de\/wp-json\/wp\/v2\/pages\/32\/revisions"}],"predecessor-version":[{"id":33,"href":"https:\/\/bsolution.me\/de\/wp-json\/wp\/v2\/pages\/32\/revisions\/33"}],"wp:attachment":[{"href":"https:\/\/bsolution.me\/de\/wp-json\/wp\/v2\/media?parent=32"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}