Leidinginhoud Calculator \u2013 Team Infra<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n :root {\n --bg: #f4f6f8;\n --white: #ffffff;\n --border: #dde2e8;\n --accent: #e84e1b;\n --accent-dark: #c43d12;\n --accent-light: #fff1ed;\n --text: #1a2030;\n --muted: #6b7a90;\n --input-bg: #f9fafb;\n --blue: #2563eb;\n --blue-light: #eff6ff;\n --shadow: 0 2px 12px rgba(0,0,0,0.07);\n --radius: 12px;\n }\n\n html, body {\n background: var(--bg);\n color: var(--text);\n font-family: 'Inter', sans-serif;\n min-height: 100vh;\n -webkit-font-smoothing: antialiased;\n }\n\n .header {\n background: var(--white);\n border-bottom: 1px solid var(--border);\n padding: 0 1.25rem;\n display: flex;\n align-items: center;\n gap: 0.75rem;\n height: 56px;\n position: sticky;\n top: 0;\n z-index: 10;\n }\n .header-logo {\n width: 28px; height: 28px;\n background: var(--accent);\n border-radius: 6px;\n display: flex; align-items: center; justify-content: center;\n flex-shrink: 0;\n }\n .header-logo svg { width: 16px; height: 16px; fill: white; }\n .header-title { font-size: 0.9rem; font-weight: 600; }\n .header-sub { font-size: 0.75rem; color: var(--muted); margin-top: 1px; }\n\n .main {\n padding: 1.25rem;\n max-width: 540px;\n margin: 0 auto;\n }\n\n .section-label {\n font-size: 0.7rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.1em;\n color: var(--muted);\n margin: 1.25rem 0 0.6rem;\n }\n .section-label:first-child { margin-top: 0; }\n\n .info-banner {\n background: var(--blue-light);\n border: 1px solid #bfdbfe;\n border-radius: 10px;\n padding: 0.75rem 1rem;\n font-size: 0.78rem;\n color: #1e40af;\n line-height: 1.5;\n margin-bottom: 1rem;\n display: flex;\n gap: 0.5rem;\n align-items: flex-start;\n }\n .info-banner::before { content: '\u2139'; flex-shrink: 0; font-size: 0.9rem; }\n\n .card {\n background: var(--white);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n box-shadow: var(--shadow);\n overflow: hidden;\n margin-bottom: 0.75rem;\n }\n .card-header {\n padding: 0.9rem 1.1rem;\n border-bottom: 1px solid var(--border);\n display: flex;\n align-items: center;\n gap: 0.6rem;\n }\n .card-icon {\n width: 30px; height: 30px;\n background: var(--accent-light);\n border-radius: 7px;\n display: flex; align-items: center; justify-content: center;\n font-size: 0.9rem;\n flex-shrink: 0;\n }\n .card-title { font-size: 0.9rem; font-weight: 600; }\n .card-subtitle { font-size: 0.72rem; color: var(--muted); margin-top: 1px; }\n .card-body { padding: 1.1rem; }\n\n \/* Column headers *\/\n .col-headers {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0.5rem;\n margin-bottom: 0.35rem;\n }\n\n label {\n display: block;\n font-size: 0.72rem;\n font-weight: 600;\n color: var(--muted);\n text-transform: uppercase;\n letter-spacing: 0.06em;\n }\n\n \/* Pipe input row *\/\n .pipe-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0.5rem;\n margin-bottom: 0.55rem;\n align-items: stretch;\n }\n .pipe-row:last-of-type { margin-bottom: 0; }\n\n .pipe-tag {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n background: var(--input-bg);\n border: 1.5px solid var(--border);\n border-radius: 9px;\n padding: 0.55rem 0.75rem;\n min-height: 46px;\n }\n .pipe-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }\n .pipe-name { font-size: 0.85rem; font-weight: 700; }\n .pipe-inner { font-size: 0.65rem; color: var(--muted); margin-top: 1px; }\n\n .input-wrap {\n display: flex;\n border: 1.5px solid var(--border);\n border-radius: 9px;\n overflow: hidden;\n background: var(--input-bg);\n transition: border-color 0.15s, box-shadow 0.15s;\n min-height: 46px;\n }\n .input-wrap:focus-within {\n border-color: var(--accent);\n box-shadow: 0 0 0 3px rgba(232,78,27,0.12);\n background: white;\n }\n input[type=\"number\"] {\n flex: 1;\n background: transparent;\n border: none;\n outline: none;\n font-family: 'Inter', sans-serif;\n font-size: 1rem;\n font-weight: 600;\n color: var(--text);\n padding: 0 0.75rem;\n -moz-appearance: textfield;\n min-width: 0;\n }\n input[type=\"number\"]::-webkit-inner-spin-button,\n input[type=\"number\"]::-webkit-outer-spin-button { -webkit-appearance: none; }\n .unit-badge {\n background: var(--bg);\n border-left: 1.5px solid var(--border);\n padding: 0 0.75rem;\n font-size: 0.75rem;\n font-weight: 600;\n color: var(--muted);\n display: flex;\n align-items: center;\n white-space: nowrap;\n }\n\n .btn {\n width: 100%;\n background: var(--accent);\n color: white;\n border: none;\n border-radius: 10px;\n font-family: 'Inter', sans-serif;\n font-size: 1rem;\n font-weight: 700;\n padding: 0.95rem;\n cursor: pointer;\n transition: background 0.15s, transform 0.1s;\n min-height: 52px;\n box-shadow: 0 2px 8px rgba(232,78,27,0.28);\n margin-top: 0.5rem;\n }\n .btn:hover { background: var(--accent-dark); }\n .btn:active { transform: scale(0.98); }\n\n \/* \u2500\u2500 Result \u2500\u2500 *\/\n .result-wrap { display: none; animation: slideIn 0.3s ease both; }\n .result-wrap.visible { display: block; }\n\n @keyframes slideIn {\n from { opacity: 0; transform: translateY(8px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n .result-hero {\n background: var(--accent);\n border-radius: var(--radius);\n padding: 1.4rem 1.25rem;\n text-align: center;\n color: white;\n margin-bottom: 0.75rem;\n box-shadow: 0 4px 20px rgba(232,78,27,0.25);\n }\n .rh-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.75; margin-bottom: 4px; }\n .rh-value { font-size: 3rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; }\n .rh-value span { font-size: 1.3rem; font-weight: 400; opacity: 0.75; margin-left: 4px; }\n .rh-sub { font-size: 0.78rem; opacity: 0.7; margin-top: 6px; }\n\n \/* Breakdown table *\/\n .breakdown {\n background: var(--white);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n overflow: hidden;\n box-shadow: var(--shadow);\n margin-bottom: 0.75rem;\n }\n .bk-head {\n display: grid;\n grid-template-columns: 1.2fr 0.9fr 0.9fr 1fr;\n background: var(--bg);\n padding: 0.5rem 1rem;\n font-size: 0.68rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.07em;\n color: var(--muted);\n border-bottom: 1px solid var(--border);\n gap: 0.25rem;\n }\n .bk-row {\n display: grid;\n grid-template-columns: 1.2fr 0.9fr 0.9fr 1fr;\n padding: 0.7rem 1rem;\n border-bottom: 1px solid var(--border);\n font-size: 0.82rem;\n gap: 0.25rem;\n align-items: center;\n }\n .bk-row:last-child { border-bottom: none; }\n .bk-pipe { display: flex; align-items: center; gap: 0.4rem; font-weight: 700; }\n .bk-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }\n .bk-muted { color: var(--muted); }\n .bk-accent { font-weight: 700; color: var(--accent); }\n\n \/* Total bar *\/\n .total-bar {\n background: var(--accent-light);\n border: 1.5px solid var(--accent);\n border-radius: 10px;\n padding: 0.85rem 1.1rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 0.75rem;\n }\n .tb-label { font-size: 0.82rem; font-weight: 600; color: var(--accent-dark); }\n .tb-value { font-size: 1rem; font-weight: 700; color: var(--accent); }\n\n \/* Flush card *\/\n .flush-card {\n background: var(--white);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n padding: 1rem 1.1rem;\n box-shadow: var(--shadow);\n }\n .flush-title { font-size: 0.82rem; font-weight: 700; margin-bottom: 0.6rem; }\n .flush-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }\n .fi {\n background: var(--bg);\n border-radius: 7px;\n padding: 0.55rem 0.75rem;\n }\n .fi-label { font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; }\n .fi-val { font-size: 0.88rem; font-weight: 700; color: var(--text); }\n\n .error {\n background: #fff3f0;\n border: 1px solid #fbbcac;\n border-radius: 8px;\n padding: 0.75rem 1rem;\n font-size: 0.82rem;\n color: #c43d12;\n font-weight: 500;\n display: none;\n margin-top: 0.75rem;\n }\n .error.visible { display: block; }\n\n .footer {\n text-align: center;\n font-size: 0.7rem;\n color: var(--muted);\n padding: 1rem 0 2.5rem;\n }\n\n @media (min-width: 480px) {\n .main { padding: 2rem 1.5rem; }\n .rh-value { font-size: 3.5rem; }\n }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"header\">\n <div class=\"header-logo\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z\"\/><\/svg>\n <\/div>\n <div>\n <div class=\"header-title\">Team Infra<\/div>\n <div class=\"header-sub\">Leidinginhoud Calculator<\/div>\n <\/div>\n<\/div>\n\n<div class=\"main\">\n\n <div class=\"info-banner\">\n Dikwandig tyleen (PE, SDR 11 \/ PN16) \u2014 KIWA drinkwaterkeurmerk. Vul per buismaat de totale lengte in. Leidingen die niet gebruikt worden laat je leeg.\n <\/div>\n\n <div class=\"section-label\">Leidinglengtes per buismaat<\/div>\n\n <div class=\"card\">\n <div class=\"card-header\">\n <div class=\"card-icon\">\ud83d\udca7<\/div>\n <div>\n <div class=\"card-title\">Dikwandig PE tyleen<\/div>\n <div class=\"card-subtitle\">SDR 11 \u2014 buitendiameter \u00d7 wanddikte \u2192 binnendiameter<\/div>\n <\/div>\n <\/div>\n <div class=\"card-body\">\n\n <div class=\"col-headers\">\n <label>Buismaat (buiten \u00d8)<\/label>\n <label>Lengte in meters<\/label>\n <\/div>\n\n <div class=\"pipe-row\">\n <div class=\"pipe-tag\">\n <div class=\"pipe-dot\" style=\"background:#3b82f6\"><\/div>\n <div>\n <div class=\"pipe-name\">\u00d8 16 mm<\/div>\n <div class=\"pipe-inner\">binnen \u00d8 13,0 mm \u00b7 wand 1,5 mm<\/div>\n <\/div>\n <\/div>\n <div class=\"input-wrap\">\n <input type=\"number\" id=\"l16\" inputmode=\"decimal\" placeholder=\"0\" min=\"0\" step=\"0.1\">\n <div class=\"unit-badge\">m<\/div>\n <\/div>\n <\/div>\n\n <div class=\"pipe-row\">\n <div class=\"pipe-tag\">\n <div class=\"pipe-dot\" style=\"background:#10b981\"><\/div>\n <div>\n <div class=\"pipe-name\">\u00d8 25 mm<\/div>\n <div class=\"pipe-inner\">binnen \u00d8 20,4 mm \u00b7 wand 2,3 mm<\/div>\n <\/div>\n <\/div>\n <div class=\"input-wrap\">\n <input type=\"number\" id=\"l25\" inputmode=\"decimal\" placeholder=\"0\" min=\"0\" step=\"0.1\">\n <div class=\"unit-badge\">m<\/div>\n <\/div>\n <\/div>\n\n <div class=\"pipe-row\">\n <div class=\"pipe-tag\">\n <div class=\"pipe-dot\" style=\"background:#f59e0b\"><\/div>\n <div>\n <div class=\"pipe-name\">\u00d8 40 mm<\/div>\n <div class=\"pipe-inner\">binnen \u00d8 32,6 mm \u00b7 wand 3,7 mm<\/div>\n <\/div>\n <\/div>\n <div class=\"input-wrap\">\n <input type=\"number\" id=\"l40\" inputmode=\"decimal\" placeholder=\"0\" min=\"0\" step=\"0.1\">\n <div class=\"unit-badge\">m<\/div>\n <\/div>\n <\/div>\n\n <div class=\"pipe-row\">\n <div class=\"pipe-tag\">\n <div class=\"pipe-dot\" style=\"background:#e84e1b\"><\/div>\n <div>\n <div class=\"pipe-name\">\u00d8 75 mm<\/div>\n <div class=\"pipe-inner\">binnen \u00d8 61,4 mm \u00b7 wand 6,8 mm<\/div>\n <\/div>\n <\/div>\n <div class=\"input-wrap\">\n <input type=\"number\" id=\"l75\" inputmode=\"decimal\" placeholder=\"0\" min=\"0\" step=\"0.1\">\n <div class=\"unit-badge\">m<\/div>\n <\/div>\n <\/div>\n\n <div class=\"error\" id=\"error\">Vul minimaal \u00e9\u00e9n buislengte in.<\/div>\n\n <\/div>\n <\/div>\n\n <button class=\"btn\" onclick=\"calculate()\">Bereken leidinginhoud \ud83d\udca7<\/button>\n\n \n <div class=\"result-wrap\" id=\"result-wrap\">\n\n <div class=\"section-label\" style=\"margin-top:1.25rem\">Resultaat<\/div>\n\n <div class=\"result-hero\">\n <div class=\"rh-label\">Totale leidinginhoud<\/div>\n <div class=\"rh-value\" id=\"res-total\">\u2014<span>liter<\/span><\/div>\n <div class=\"rh-sub\" id=\"res-sub\">\u2014<\/div>\n <\/div>\n\n <div class=\"breakdown\">\n <div class=\"bk-head\">\n <div>Buismaat<\/div>\n <div>Lengte<\/div>\n <div>\u00d8 binnen<\/div>\n <div>Inhoud<\/div>\n <\/div>\n <div id=\"bk-rows\"><\/div>\n <\/div>\n\n <div class=\"total-bar\">\n <span class=\"tb-label\">Totaal alle leidingen<\/span>\n <span class=\"tb-value\" id=\"tb-value\">\u2014<\/span>\n <\/div>\n\n <div class=\"flush-card\">\n <div class=\"flush-title\">\ud83d\udeb0 Doorspoeladvies drinkwater<\/div>\n <div class=\"flush-grid\" id=\"flush-grid\"><\/div>\n <\/div>\n\n <\/div>\n\n <div class=\"footer\">Wiki Team Infra \u00b7 Leidinginhoud Calculator \u00b7 Dikwandig PE (SDR 11 \/ PN16)<\/div>\n<\/div>\n\n<script>\n const pipes = [\n { id: 'l16', label: '\u00d8 16 mm', din: 13.0, wall: 1.5, color: '#3b82f6' },\n { id: 'l25', label: '\u00d8 25 mm', din: 20.4, wall: 2.3, color: '#10b981' },\n { id: 'l40', label: '\u00d8 40 mm', din: 32.6, wall: 3.7, color: '#f59e0b' },\n { id: 'l75', label: '\u00d8 75 mm', din: 61.4, wall: 6.8, color: '#e84e1b' },\n ];\n\n \/\/ Liters per meter: \u03c0\/4 \u00d7 (d_in in m)\u00b2 \u00d7 1000\n function lpm(din_mm) {\n const d = din_mm \/ 1000;\n return (Math.PI \/ 4) * d * d * 1000;\n }\n\n function calculate() {\n const errEl = document.getElementById('error');\n errEl.classList.remove('visible');\n\n const rows = pipes.map(p => {\n const len = parseFloat(document.getElementById(p.id).value) || 0;\n const vol = len * lpm(p.din);\n return { ...p, len, vol };\n });\n\n if (rows.every(r => r.len === 0)) {\n errEl.classList.add('visible');\n return;\n }\n\n const totalL = rows.reduce((s, r) => s + r.vol, 0);\n const totalM = rows.reduce((s, r) => s + r.len, 0);\n\n \/\/ Animate result\n const wrap = document.getElementById('result-wrap');\n wrap.classList.remove('visible');\n void wrap.offsetWidth;\n\n \/\/ Hero\n document.getElementById('res-total').innerHTML = totalL.toFixed(2) + '<span>liter<\/span>';\n document.getElementById('res-sub').textContent =\n `${totalM.toFixed(1)} m totale leidinglengte \u00b7 ${(totalL \/ 1000).toFixed(5)} m\u00b3`;\n\n \/\/ Breakdown rows (only used pipes)\n const bkRows = document.getElementById('bk-rows');\n bkRows.innerHTML = '';\n rows.filter(r => r.len > 0).forEach(r => {\n bkRows.innerHTML += `\n <div class=\"bk-row\">\n <div class=\"bk-pipe\">\n <div class=\"bk-dot\" style=\"background:${r.color}\"><\/div>\n ${r.label}\n <\/div>\n <div class=\"bk-muted\">${r.len.toFixed(1)} m<\/div>\n <div class=\"bk-muted\">\u00d8 ${r.din} mm<\/div>\n <div class=\"bk-accent\">${r.vol.toFixed(3)} L<\/div>\n <\/div>`;\n });\n\n \/\/ Total bar\n document.getElementById('tb-value').textContent =\n `${totalL.toFixed(2)} L (${(totalL \/ 1000).toFixed(5)} m\u00b3)`;\n\n \/\/ Flush advice\n const fl3 = totalL * 3;\n const fl5 = totalL * 5;\n document.getElementById('flush-grid').innerHTML = `\n <div class=\"fi\">\n <div class=\"fi-label\">Minimaal (3\u00d7 inhoud)<\/div>\n <div class=\"fi-val\">${fl3.toFixed(0)} liter<\/div>\n <\/div>\n <div class=\"fi\">\n <div class=\"fi-label\">Aanbevolen (5\u00d7 inhoud)<\/div>\n <div class=\"fi-val\">${fl5.toFixed(0)} liter<\/div>\n <\/div>\n <div class=\"fi\">\n <div class=\"fi-label\">Tijd bij 30 L\/min<\/div>\n <div class=\"fi-val\">${(fl3 \/ 30).toFixed(1)} min<\/div>\n <\/div>\n <div class=\"fi\">\n <div class=\"fi-label\">Tijd bij 80 L\/min<\/div>\n <div class=\"fi-val\">${(fl3 \/ 80).toFixed(1)} min<\/div>\n <\/div>`;\n\n wrap.classList.add('visible');\n setTimeout(() => wrap.scrollIntoView({ behavior: 'smooth', block: 'nearest' }), 50);\n }\n\n document.addEventListener('keydown', e => { if (e.key === 'Enter') calculate(); });\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Leidinginhoud Calculator \u2013 Team Infra Team Infra Leidinginhoud Calculator Dikwandig tyleen (PE, SDR 11 \/ PN16) \u2014 KIWA drinkwaterkeurmerk. Vul per buismaat de totale lengte in. Leidingen die niet gebruikt worden laat je leeg. Leidinglengtes per buismaat \ud83d\udca7 Dikwandig PE tyleen SDR 11 \u2014 buitendiameter \u00d7 wanddikte \u2192 binnendiameter Buismaat (buiten \u00d8) Lengte in meters […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,70,4],"tags":[71,49],"class_list":["post-180","post","type-post","status-publish","format-standard","hentry","category-aanvoer","category-calculators","category-water","tag-calculator","tag-water"],"_links":{"self":[{"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=\/wp\/v2\/posts\/180","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=180"}],"version-history":[{"count":1,"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=\/wp\/v2\/posts\/180\/revisions"}],"predecessor-version":[{"id":181,"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=\/wp\/v2\/posts\/180\/revisions\/181"}],"wp:attachment":[{"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=180"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=180"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=180"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":180,"date":"2026-03-09T15:12:12","date_gmt":"2026-03-09T15:12:12","guid":{"rendered":"https:\/\/wiki.teaminfra.nl\/?p=180"},"modified":"2026-03-09T15:12:12","modified_gmt":"2026-03-09T15:12:12","slug":"leiding-inhoud-calculator","status":"publish","type":"post","link":"https:\/\/wiki.teaminfra.nl\/?p=180","title":{"rendered":"Leiding inhoud calculator"},"content":{"rendered":"\n\n\n\n\n\nLeidinginhoud Calculator \u2013 Team Infra<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n :root {\n --bg: #f4f6f8;\n --white: #ffffff;\n --border: #dde2e8;\n --accent: #e84e1b;\n --accent-dark: #c43d12;\n --accent-light: #fff1ed;\n --text: #1a2030;\n --muted: #6b7a90;\n --input-bg: #f9fafb;\n --blue: #2563eb;\n --blue-light: #eff6ff;\n --shadow: 0 2px 12px rgba(0,0,0,0.07);\n --radius: 12px;\n }\n\n html, body {\n background: var(--bg);\n color: var(--text);\n font-family: 'Inter', sans-serif;\n min-height: 100vh;\n -webkit-font-smoothing: antialiased;\n }\n\n .header {\n background: var(--white);\n border-bottom: 1px solid var(--border);\n padding: 0 1.25rem;\n display: flex;\n align-items: center;\n gap: 0.75rem;\n height: 56px;\n position: sticky;\n top: 0;\n z-index: 10;\n }\n .header-logo {\n width: 28px; height: 28px;\n background: var(--accent);\n border-radius: 6px;\n display: flex; align-items: center; justify-content: center;\n flex-shrink: 0;\n }\n .header-logo svg { width: 16px; height: 16px; fill: white; }\n .header-title { font-size: 0.9rem; font-weight: 600; }\n .header-sub { font-size: 0.75rem; color: var(--muted); margin-top: 1px; }\n\n .main {\n padding: 1.25rem;\n max-width: 540px;\n margin: 0 auto;\n }\n\n .section-label {\n font-size: 0.7rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.1em;\n color: var(--muted);\n margin: 1.25rem 0 0.6rem;\n }\n .section-label:first-child { margin-top: 0; }\n\n .info-banner {\n background: var(--blue-light);\n border: 1px solid #bfdbfe;\n border-radius: 10px;\n padding: 0.75rem 1rem;\n font-size: 0.78rem;\n color: #1e40af;\n line-height: 1.5;\n margin-bottom: 1rem;\n display: flex;\n gap: 0.5rem;\n align-items: flex-start;\n }\n .info-banner::before { content: '\u2139'; flex-shrink: 0; font-size: 0.9rem; }\n\n .card {\n background: var(--white);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n box-shadow: var(--shadow);\n overflow: hidden;\n margin-bottom: 0.75rem;\n }\n .card-header {\n padding: 0.9rem 1.1rem;\n border-bottom: 1px solid var(--border);\n display: flex;\n align-items: center;\n gap: 0.6rem;\n }\n .card-icon {\n width: 30px; height: 30px;\n background: var(--accent-light);\n border-radius: 7px;\n display: flex; align-items: center; justify-content: center;\n font-size: 0.9rem;\n flex-shrink: 0;\n }\n .card-title { font-size: 0.9rem; font-weight: 600; }\n .card-subtitle { font-size: 0.72rem; color: var(--muted); margin-top: 1px; }\n .card-body { padding: 1.1rem; }\n\n \/* Column headers *\/\n .col-headers {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0.5rem;\n margin-bottom: 0.35rem;\n }\n\n label {\n display: block;\n font-size: 0.72rem;\n font-weight: 600;\n color: var(--muted);\n text-transform: uppercase;\n letter-spacing: 0.06em;\n }\n\n \/* Pipe input row *\/\n .pipe-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0.5rem;\n margin-bottom: 0.55rem;\n align-items: stretch;\n }\n .pipe-row:last-of-type { margin-bottom: 0; }\n\n .pipe-tag {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n background: var(--input-bg);\n border: 1.5px solid var(--border);\n border-radius: 9px;\n padding: 0.55rem 0.75rem;\n min-height: 46px;\n }\n .pipe-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }\n .pipe-name { font-size: 0.85rem; font-weight: 700; }\n .pipe-inner { font-size: 0.65rem; color: var(--muted); margin-top: 1px; }\n\n .input-wrap {\n display: flex;\n border: 1.5px solid var(--border);\n border-radius: 9px;\n overflow: hidden;\n background: var(--input-bg);\n transition: border-color 0.15s, box-shadow 0.15s;\n min-height: 46px;\n }\n .input-wrap:focus-within {\n border-color: var(--accent);\n box-shadow: 0 0 0 3px rgba(232,78,27,0.12);\n background: white;\n }\n input[type=\"number\"] {\n flex: 1;\n background: transparent;\n border: none;\n outline: none;\n font-family: 'Inter', sans-serif;\n font-size: 1rem;\n font-weight: 600;\n color: var(--text);\n padding: 0 0.75rem;\n -moz-appearance: textfield;\n min-width: 0;\n }\n input[type=\"number\"]::-webkit-inner-spin-button,\n input[type=\"number\"]::-webkit-outer-spin-button { -webkit-appearance: none; }\n .unit-badge {\n background: var(--bg);\n border-left: 1.5px solid var(--border);\n padding: 0 0.75rem;\n font-size: 0.75rem;\n font-weight: 600;\n color: var(--muted);\n display: flex;\n align-items: center;\n white-space: nowrap;\n }\n\n .btn {\n width: 100%;\n background: var(--accent);\n color: white;\n border: none;\n border-radius: 10px;\n font-family: 'Inter', sans-serif;\n font-size: 1rem;\n font-weight: 700;\n padding: 0.95rem;\n cursor: pointer;\n transition: background 0.15s, transform 0.1s;\n min-height: 52px;\n box-shadow: 0 2px 8px rgba(232,78,27,0.28);\n margin-top: 0.5rem;\n }\n .btn:hover { background: var(--accent-dark); }\n .btn:active { transform: scale(0.98); }\n\n \/* \u2500\u2500 Result \u2500\u2500 *\/\n .result-wrap { display: none; animation: slideIn 0.3s ease both; }\n .result-wrap.visible { display: block; }\n\n @keyframes slideIn {\n from { opacity: 0; transform: translateY(8px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n .result-hero {\n background: var(--accent);\n border-radius: var(--radius);\n padding: 1.4rem 1.25rem;\n text-align: center;\n color: white;\n margin-bottom: 0.75rem;\n box-shadow: 0 4px 20px rgba(232,78,27,0.25);\n }\n .rh-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.75; margin-bottom: 4px; }\n .rh-value { font-size: 3rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; }\n .rh-value span { font-size: 1.3rem; font-weight: 400; opacity: 0.75; margin-left: 4px; }\n .rh-sub { font-size: 0.78rem; opacity: 0.7; margin-top: 6px; }\n\n \/* Breakdown table *\/\n .breakdown {\n background: var(--white);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n overflow: hidden;\n box-shadow: var(--shadow);\n margin-bottom: 0.75rem;\n }\n .bk-head {\n display: grid;\n grid-template-columns: 1.2fr 0.9fr 0.9fr 1fr;\n background: var(--bg);\n padding: 0.5rem 1rem;\n font-size: 0.68rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.07em;\n color: var(--muted);\n border-bottom: 1px solid var(--border);\n gap: 0.25rem;\n }\n .bk-row {\n display: grid;\n grid-template-columns: 1.2fr 0.9fr 0.9fr 1fr;\n padding: 0.7rem 1rem;\n border-bottom: 1px solid var(--border);\n font-size: 0.82rem;\n gap: 0.25rem;\n align-items: center;\n }\n .bk-row:last-child { border-bottom: none; }\n .bk-pipe { display: flex; align-items: center; gap: 0.4rem; font-weight: 700; }\n .bk-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }\n .bk-muted { color: var(--muted); }\n .bk-accent { font-weight: 700; color: var(--accent); }\n\n \/* Total bar *\/\n .total-bar {\n background: var(--accent-light);\n border: 1.5px solid var(--accent);\n border-radius: 10px;\n padding: 0.85rem 1.1rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 0.75rem;\n }\n .tb-label { font-size: 0.82rem; font-weight: 600; color: var(--accent-dark); }\n .tb-value { font-size: 1rem; font-weight: 700; color: var(--accent); }\n\n \/* Flush card *\/\n .flush-card {\n background: var(--white);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n padding: 1rem 1.1rem;\n box-shadow: var(--shadow);\n }\n .flush-title { font-size: 0.82rem; font-weight: 700; margin-bottom: 0.6rem; }\n .flush-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }\n .fi {\n background: var(--bg);\n border-radius: 7px;\n padding: 0.55rem 0.75rem;\n }\n .fi-label { font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; }\n .fi-val { font-size: 0.88rem; font-weight: 700; color: var(--text); }\n\n .error {\n background: #fff3f0;\n border: 1px solid #fbbcac;\n border-radius: 8px;\n padding: 0.75rem 1rem;\n font-size: 0.82rem;\n color: #c43d12;\n font-weight: 500;\n display: none;\n margin-top: 0.75rem;\n }\n .error.visible { display: block; }\n\n .footer {\n text-align: center;\n font-size: 0.7rem;\n color: var(--muted);\n padding: 1rem 0 2.5rem;\n }\n\n @media (min-width: 480px) {\n .main { padding: 2rem 1.5rem; }\n .rh-value { font-size: 3.5rem; }\n }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"header\">\n <div class=\"header-logo\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z\"\/><\/svg>\n <\/div>\n <div>\n <div class=\"header-title\">Team Infra<\/div>\n <div class=\"header-sub\">Leidinginhoud Calculator<\/div>\n <\/div>\n<\/div>\n\n<div class=\"main\">\n\n <div class=\"info-banner\">\n Dikwandig tyleen (PE, SDR 11 \/ PN16) \u2014 KIWA drinkwaterkeurmerk. Vul per buismaat de totale lengte in. Leidingen die niet gebruikt worden laat je leeg.\n <\/div>\n\n <div class=\"section-label\">Leidinglengtes per buismaat<\/div>\n\n <div class=\"card\">\n <div class=\"card-header\">\n <div class=\"card-icon\">\ud83d\udca7<\/div>\n <div>\n <div class=\"card-title\">Dikwandig PE tyleen<\/div>\n <div class=\"card-subtitle\">SDR 11 \u2014 buitendiameter \u00d7 wanddikte \u2192 binnendiameter<\/div>\n <\/div>\n <\/div>\n <div class=\"card-body\">\n\n <div class=\"col-headers\">\n <label>Buismaat (buiten \u00d8)<\/label>\n <label>Lengte in meters<\/label>\n <\/div>\n\n <div class=\"pipe-row\">\n <div class=\"pipe-tag\">\n <div class=\"pipe-dot\" style=\"background:#3b82f6\"><\/div>\n <div>\n <div class=\"pipe-name\">\u00d8 16 mm<\/div>\n <div class=\"pipe-inner\">binnen \u00d8 13,0 mm \u00b7 wand 1,5 mm<\/div>\n <\/div>\n <\/div>\n <div class=\"input-wrap\">\n <input type=\"number\" id=\"l16\" inputmode=\"decimal\" placeholder=\"0\" min=\"0\" step=\"0.1\">\n <div class=\"unit-badge\">m<\/div>\n <\/div>\n <\/div>\n\n <div class=\"pipe-row\">\n <div class=\"pipe-tag\">\n <div class=\"pipe-dot\" style=\"background:#10b981\"><\/div>\n <div>\n <div class=\"pipe-name\">\u00d8 25 mm<\/div>\n <div class=\"pipe-inner\">binnen \u00d8 20,4 mm \u00b7 wand 2,3 mm<\/div>\n <\/div>\n <\/div>\n <div class=\"input-wrap\">\n <input type=\"number\" id=\"l25\" inputmode=\"decimal\" placeholder=\"0\" min=\"0\" step=\"0.1\">\n <div class=\"unit-badge\">m<\/div>\n <\/div>\n <\/div>\n\n <div class=\"pipe-row\">\n <div class=\"pipe-tag\">\n <div class=\"pipe-dot\" style=\"background:#f59e0b\"><\/div>\n <div>\n <div class=\"pipe-name\">\u00d8 40 mm<\/div>\n <div class=\"pipe-inner\">binnen \u00d8 32,6 mm \u00b7 wand 3,7 mm<\/div>\n <\/div>\n <\/div>\n <div class=\"input-wrap\">\n <input type=\"number\" id=\"l40\" inputmode=\"decimal\" placeholder=\"0\" min=\"0\" step=\"0.1\">\n <div class=\"unit-badge\">m<\/div>\n <\/div>\n <\/div>\n\n <div class=\"pipe-row\">\n <div class=\"pipe-tag\">\n <div class=\"pipe-dot\" style=\"background:#e84e1b\"><\/div>\n <div>\n <div class=\"pipe-name\">\u00d8 75 mm<\/div>\n <div class=\"pipe-inner\">binnen \u00d8 61,4 mm \u00b7 wand 6,8 mm<\/div>\n <\/div>\n <\/div>\n <div class=\"input-wrap\">\n <input type=\"number\" id=\"l75\" inputmode=\"decimal\" placeholder=\"0\" min=\"0\" step=\"0.1\">\n <div class=\"unit-badge\">m<\/div>\n <\/div>\n <\/div>\n\n <div class=\"error\" id=\"error\">Vul minimaal \u00e9\u00e9n buislengte in.<\/div>\n\n <\/div>\n <\/div>\n\n <button class=\"btn\" onclick=\"calculate()\">Bereken leidinginhoud \ud83d\udca7<\/button>\n\n \n <div class=\"result-wrap\" id=\"result-wrap\">\n\n <div class=\"section-label\" style=\"margin-top:1.25rem\">Resultaat<\/div>\n\n <div class=\"result-hero\">\n <div class=\"rh-label\">Totale leidinginhoud<\/div>\n <div class=\"rh-value\" id=\"res-total\">\u2014<span>liter<\/span><\/div>\n <div class=\"rh-sub\" id=\"res-sub\">\u2014<\/div>\n <\/div>\n\n <div class=\"breakdown\">\n <div class=\"bk-head\">\n <div>Buismaat<\/div>\n <div>Lengte<\/div>\n <div>\u00d8 binnen<\/div>\n <div>Inhoud<\/div>\n <\/div>\n <div id=\"bk-rows\"><\/div>\n <\/div>\n\n <div class=\"total-bar\">\n <span class=\"tb-label\">Totaal alle leidingen<\/span>\n <span class=\"tb-value\" id=\"tb-value\">\u2014<\/span>\n <\/div>\n\n <div class=\"flush-card\">\n <div class=\"flush-title\">\ud83d\udeb0 Doorspoeladvies drinkwater<\/div>\n <div class=\"flush-grid\" id=\"flush-grid\"><\/div>\n <\/div>\n\n <\/div>\n\n <div class=\"footer\">Wiki Team Infra \u00b7 Leidinginhoud Calculator \u00b7 Dikwandig PE (SDR 11 \/ PN16)<\/div>\n<\/div>\n\n<script>\n const pipes = [\n { id: 'l16', label: '\u00d8 16 mm', din: 13.0, wall: 1.5, color: '#3b82f6' },\n { id: 'l25', label: '\u00d8 25 mm', din: 20.4, wall: 2.3, color: '#10b981' },\n { id: 'l40', label: '\u00d8 40 mm', din: 32.6, wall: 3.7, color: '#f59e0b' },\n { id: 'l75', label: '\u00d8 75 mm', din: 61.4, wall: 6.8, color: '#e84e1b' },\n ];\n\n \/\/ Liters per meter: \u03c0\/4 \u00d7 (d_in in m)\u00b2 \u00d7 1000\n function lpm(din_mm) {\n const d = din_mm \/ 1000;\n return (Math.PI \/ 4) * d * d * 1000;\n }\n\n function calculate() {\n const errEl = document.getElementById('error');\n errEl.classList.remove('visible');\n\n const rows = pipes.map(p => {\n const len = parseFloat(document.getElementById(p.id).value) || 0;\n const vol = len * lpm(p.din);\n return { ...p, len, vol };\n });\n\n if (rows.every(r => r.len === 0)) {\n errEl.classList.add('visible');\n return;\n }\n\n const totalL = rows.reduce((s, r) => s + r.vol, 0);\n const totalM = rows.reduce((s, r) => s + r.len, 0);\n\n \/\/ Animate result\n const wrap = document.getElementById('result-wrap');\n wrap.classList.remove('visible');\n void wrap.offsetWidth;\n\n \/\/ Hero\n document.getElementById('res-total').innerHTML = totalL.toFixed(2) + '<span>liter<\/span>';\n document.getElementById('res-sub').textContent =\n `${totalM.toFixed(1)} m totale leidinglengte \u00b7 ${(totalL \/ 1000).toFixed(5)} m\u00b3`;\n\n \/\/ Breakdown rows (only used pipes)\n const bkRows = document.getElementById('bk-rows');\n bkRows.innerHTML = '';\n rows.filter(r => r.len > 0).forEach(r => {\n bkRows.innerHTML += `\n <div class=\"bk-row\">\n <div class=\"bk-pipe\">\n <div class=\"bk-dot\" style=\"background:${r.color}\"><\/div>\n ${r.label}\n <\/div>\n <div class=\"bk-muted\">${r.len.toFixed(1)} m<\/div>\n <div class=\"bk-muted\">\u00d8 ${r.din} mm<\/div>\n <div class=\"bk-accent\">${r.vol.toFixed(3)} L<\/div>\n <\/div>`;\n });\n\n \/\/ Total bar\n document.getElementById('tb-value').textContent =\n `${totalL.toFixed(2)} L (${(totalL \/ 1000).toFixed(5)} m\u00b3)`;\n\n \/\/ Flush advice\n const fl3 = totalL * 3;\n const fl5 = totalL * 5;\n document.getElementById('flush-grid').innerHTML = `\n <div class=\"fi\">\n <div class=\"fi-label\">Minimaal (3\u00d7 inhoud)<\/div>\n <div class=\"fi-val\">${fl3.toFixed(0)} liter<\/div>\n <\/div>\n <div class=\"fi\">\n <div class=\"fi-label\">Aanbevolen (5\u00d7 inhoud)<\/div>\n <div class=\"fi-val\">${fl5.toFixed(0)} liter<\/div>\n <\/div>\n <div class=\"fi\">\n <div class=\"fi-label\">Tijd bij 30 L\/min<\/div>\n <div class=\"fi-val\">${(fl3 \/ 30).toFixed(1)} min<\/div>\n <\/div>\n <div class=\"fi\">\n <div class=\"fi-label\">Tijd bij 80 L\/min<\/div>\n <div class=\"fi-val\">${(fl3 \/ 80).toFixed(1)} min<\/div>\n <\/div>`;\n\n wrap.classList.add('visible');\n setTimeout(() => wrap.scrollIntoView({ behavior: 'smooth', block: 'nearest' }), 50);\n }\n\n document.addEventListener('keydown', e => { if (e.key === 'Enter') calculate(); });\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Leidinginhoud Calculator \u2013 Team Infra Team Infra Leidinginhoud Calculator Dikwandig tyleen (PE, SDR 11 \/ PN16) \u2014 KIWA drinkwaterkeurmerk. Vul per buismaat de totale lengte in. Leidingen die niet gebruikt worden laat je leeg. Leidinglengtes per buismaat \ud83d\udca7 Dikwandig PE tyleen SDR 11 \u2014 buitendiameter \u00d7 wanddikte \u2192 binnendiameter Buismaat (buiten \u00d8) Lengte in meters […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,70,4],"tags":[71,49],"class_list":["post-180","post","type-post","status-publish","format-standard","hentry","category-aanvoer","category-calculators","category-water","tag-calculator","tag-water"],"_links":{"self":[{"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=\/wp\/v2\/posts\/180","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=180"}],"version-history":[{"count":1,"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=\/wp\/v2\/posts\/180\/revisions"}],"predecessor-version":[{"id":181,"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=\/wp\/v2\/posts\/180\/revisions\/181"}],"wp:attachment":[{"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=180"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=180"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=180"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}