{"product_id":"kalkulator-kosztow-etapow-budowy","title":"Kalkulator kosztów etapów budowy","description":"\u003clink rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"\u003e\n\u003clink href=\"https:\/\/fonts.googleapis.com\/css2?family=Syne:wght@700;800\u0026amp;family=DM+Sans:wght@400;500\u0026amp;display=swap\" rel=\"stylesheet\"\u003e\n\u003cstyle\u003e\n#kalk {\n  --ink: #0d0d0d; --paper: #f5f2ec; --accent: #c8411b;\n  --accent2: #1b4dc8; --muted: #6b6660; --border: #d8d4cc; --success: #1a7a4a;\n  all: initial; display: block;\n  font-family: 'DM Sans', sans-serif; color: var(--ink); background: var(--paper); width: 100%;\n}\n#kalk *, #kalk *::before, #kalk *::after { box-sizing: border-box; font-family: inherit; }\n#kalk input, #kalk select, #kalk button, #kalk a { -webkit-appearance: none; appearance: none; border-radius: 0; }\n#kalk .f { margin-bottom: 16px; }\n#kalk .lb { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }\n#kalk input[type=number], #kalk input[type=email], #kalk select {\n  width: 100%; padding: 12px 14px; border: 2px solid var(--border) !important;\n  background: #fff !important; font-family: 'DM Sans', sans-serif !important;\n  font-size: 0.9375rem; color: var(--ink) !important; outline: none; box-shadow: none !important;\n}\n#kalk input:focus, #kalk select:focus { border-color: var(--ink) !important; }\n#kalk select {\n  background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%230d0d0d' stroke-width='1.5' fill='none'\/%3E%3C\/svg%3E\") !important;\n  background-repeat: no-repeat !important; background-position: right 12px center !important; padding-right: 36px !important; cursor: pointer;\n}\n#kalk .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }\n@media(max-width:580px){ #kalk .g2 { grid-template-columns: 1fr; } }\n#kalk .chks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }\n#kalk .chk { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 2px solid var(--border); cursor: pointer; background: #fff; transition: border-color .15s; user-select: none; }\n#kalk .chk:hover { border-color: var(--ink); }\n#kalk .chk input { display: none; }\n#kalk .cb { width: 16px; height: 16px; border: 2px solid var(--border); background: var(--paper); flex-shrink: 0; position: relative; }\n#kalk .chk.on .cb { background: var(--ink); border-color: var(--ink); }\n#kalk .chk.on .cb::after { content: ''; position: absolute; inset: 2px; background: #fff; clip-path: polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%); }\n#kalk .cl { font-size: 0.8125rem; font-weight: 500; color: var(--ink); }\n#kalk .rv { text-align: right; font-family: 'Syne', sans-serif; font-size: 1.1rem; font-weight: 800; margin-bottom: 6px; }\n#kalk input[type=range] { width: 100%; height: 4px; background: var(--border) !important; border: none !important; padding: 0 !important; cursor: pointer; accent-color: var(--ink); }\n#kalk .btn { width: 100%; padding: 16px; background: #0d0d0d !important; color: #f5f2ec !important; border: none !important; outline: none !important; box-shadow: none !important; font-family: 'Syne', sans-serif !important; font-size: 0.8125rem !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; cursor: pointer; transition: background .2s; margin-top: 8px; display: block; border-radius: 0 !important; }\n#kalk .btn:hover { background: #c8411b !important; color: #fff !important; }\n#kalk .res { display: none; margin-top: 24px; border: 2px solid var(--ink); background: #fff; }\n#kalk .res.on { display: block; animation: ksl .3s ease; }\n@keyframes ksl { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }\n#kalk .rh { background: #0d0d0d; color: #fff; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }\n#kalk .rh h3 { font-family: 'Syne', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.5; margin: 0; color: #fff; }\n#kalk .rv2 { font-family: 'Syne', sans-serif; font-size: 1.75rem; font-weight: 800; color: #fff; line-height: 1.1; }\n#kalk .rb { padding: 18px 20px; }\n#kalk .row { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--border); }\n#kalk .row:last-of-type { border-bottom: none; }\n#kalk .rl { font-size: 0.8125rem; color: var(--muted); }\n#kalk .rr { font-family: 'Syne', sans-serif; font-size: 0.9375rem; font-weight: 700; color: var(--ink); }\n#kalk .row.tot .rl { font-weight: 700; color: var(--ink); }\n#kalk .row.tot .rr { color: var(--accent); font-size: 1rem; }\n#kalk .al { padding: 12px 16px; margin-top: 12px; border-left: 4px solid var(--accent); background: rgba(200,65,27,0.06); }\n#kalk .al.gr { background: rgba(26,122,74,0.06); border-color: var(--success); }\n#kalk .al.bl { background: rgba(27,77,200,0.06); border-color: var(--accent2); }\n#kalk .al p { font-size: 0.8125rem; line-height: 1.6; margin: 0; color: var(--ink); }\n#kalk .risk-lbl { display:flex; justify-content:space-between; font-size:10px; color:var(--muted); margin-bottom:4px; }\n#kalk .risk-bar { height: 6px; background: var(--border); }\n#kalk .risk-fill { height: 100%; transition: width .5s ease; }\n#kalk .lead { margin-top: 16px; border: 2px solid var(--accent); padding: 18px; background: rgba(200,65,27,0.04); }\n#kalk .lead h4 { font-family: 'Syne', sans-serif; font-size: 0.9375rem; font-weight: 800; margin: 0 0 6px; color: var(--ink); }\n#kalk .lead p { font-size: 0.8125rem; color: var(--muted); margin: 0 0 12px; line-height: 1.5; }\n#kalk .lf { display: flex; gap: 8px; flex-wrap: wrap; }\n#kalk .lf input[type=email] { flex: 1; min-width: 160px; }\n#kalk .lbtn { padding: 12px 18px; background: #c8411b !important; color: #fff !important; border: none !important; outline: none !important; box-shadow: none !important; font-family: 'Syne', sans-serif !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; cursor: pointer; white-space: nowrap; transition: background .2s; border-radius: 0 !important; }\n#kalk .lbtn:hover { background: #0d0d0d !important; }\n#kalk .lok { display: none; background: var(--success); color: #fff; padding: 12px 16px; margin-top: 8px; font-family: 'Syne', sans-serif; font-size: 0.8125rem; font-weight: 700; }\n#kalk .up { margin-top: 12px; padding: 16px 18px; background: #0d0d0d; color: #fff; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }\n#kalk .up p { font-size: 0.8125rem; line-height: 1.5; opacity: 0.8; flex: 1; margin: 0; color: #fff; }\n#kalk .up a { display: inline-block; padding: 10px 16px; background: #c8411b !important; color: #fff !important; font-family: 'Syne', sans-serif !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; text-decoration: none !important; white-space: nowrap; border-radius: 0 !important; border: none !important; transition: opacity .2s; }\n#kalk .up a:hover { opacity: 0.8; }\n#kalk .mt12 { margin-top: 12px; }\n#kalk .ph { margin-bottom: 24px; }\n#kalk .ph h2 { font-family: 'Syne', sans-serif; font-size: 1.4rem; font-weight: 800; margin: 0 0 6px; color: var(--ink); }\n#kalk .ph p { font-size: 0.875rem; color: var(--muted); line-height: 1.6; margin: 0; }\n#kalk .main { max-width: 860px; margin: 0 auto; padding: 32px 20px 60px; background: var(--paper); }\n\u003c\/style\u003e\n\n\u003cdiv id=\"kalk\"\u003e\u003cdiv class=\"main\"\u003e\n\u003cdiv class=\"ph\"\u003e\n\u003ch2\u003eKalkulator kosztów etapów budowy\u003c\/h2\u003e\n\u003cp\u003eRozłóż budżet na konkretne etapy — fundamenty, stan surowy, dach, instalacje, wykończenie.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"g2\"\u003e\n\u003cdiv\u003e\n  \u003cdiv class=\"f\"\u003e\n\u003cspan class=\"lb\"\u003eMetraż domu (m²)\u003c\/span\u003e\u003cinput type=\"number\" id=\"em2\" min=\"50\" max=\"500\" placeholder=\"np. 120\" oninput=\"cE()\"\u003e\n\u003c\/div\u003e\n  \u003cdiv class=\"f\"\u003e\n\u003cspan class=\"lb\"\u003eStandard budowy\u003c\/span\u003e\u003cselect id=\"estd\" onchange=\"cE()\"\u003e\u003coption value=\"e\"\u003eEkonomiczny\u003c\/option\u003e\n\u003coption value=\"s\" selected\u003eŚredni\u003c\/option\u003e\n\u003coption value=\"p\"\u003ePremium\u003c\/option\u003e\u003c\/select\u003e\n\u003c\/div\u003e\n  \u003cdiv class=\"f\"\u003e\n\u003cspan class=\"lb\"\u003eSystem realizacji\u003c\/span\u003e\u003cselect id=\"esys\" onchange=\"cE()\"\u003e\u003coption value=\"1.0\"\u003eGeneralny wykonawca\u003c\/option\u003e\n\u003coption value=\"0.85\"\u003eSystem gospodarczy\u003c\/option\u003e\n\u003coption value=\"0.92\"\u003eMieszany\u003c\/option\u003e\u003c\/select\u003e\n\u003c\/div\u003e\n  \u003cdiv class=\"f\"\u003e\n\u003cspan class=\"lb\"\u003eLokalizacja\u003c\/span\u003e\u003cselect id=\"elok\" onchange=\"cE()\"\u003e\u003coption value=\"1.0\"\u003eMałe miasto \/ wieś\u003c\/option\u003e\n\u003coption value=\"1.1\"\u003eŚrednie miasto\u003c\/option\u003e\n\u003coption value=\"1.2\"\u003eDuże miasto\u003c\/option\u003e\n\u003coption value=\"1.35\"\u003eWarszawa \/ Kraków\u003c\/option\u003e\u003c\/select\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv\u003e\n  \u003cdiv class=\"f\"\u003e\n\u003cspan class=\"lb\"\u003eTyp fundamentów\u003c\/span\u003e\u003cselect id=\"efun\" onchange=\"cE()\"\u003e\u003coption value=\"1.0\"\u003ePłyta fundamentowa\u003c\/option\u003e\n\u003coption value=\"0.85\"\u003eŁawy fundamentowe\u003c\/option\u003e\n\u003coption value=\"1.2\"\u003ePiwnica\u003c\/option\u003e\u003c\/select\u003e\n\u003c\/div\u003e\n  \u003cdiv class=\"f\"\u003e\n\u003cspan class=\"lb\"\u003eTyp dachu\u003c\/span\u003e\u003cselect id=\"edch\" onchange=\"cE()\"\u003e\u003coption value=\"1.0\"\u003eDwuspadowy\u003c\/option\u003e\n\u003coption value=\"0.8\"\u003ePłaski\u003c\/option\u003e\n\u003coption value=\"1.3\"\u003eCzterospadowy\u003c\/option\u003e\n\u003coption value=\"1.5\"\u003eMansardowy\u003c\/option\u003e\u003c\/select\u003e\n\u003c\/div\u003e\n  \u003cdiv class=\"f\"\u003e\n\u003cspan class=\"lb\"\u003eOgrzewanie\u003c\/span\u003e\u003cselect id=\"eogr\" onchange=\"cE()\"\u003e\u003coption value=\"gaz\"\u003eGaz\u003c\/option\u003e\n\u003coption value=\"pompa\"\u003ePompa ciepła\u003c\/option\u003e\n\u003coption value=\"pellet\"\u003ePellet\u003c\/option\u003e\n\u003coption value=\"el\"\u003eElektryczne\u003c\/option\u003e\u003c\/select\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cbutton class=\"btn\" onclick=\"cE();show('re')\"\u003eRozłóż budżet na etapy →\u003c\/button\u003e\n\u003cdiv class=\"res\" id=\"re\"\u003e\n  \u003cdiv class=\"rh\"\u003e\n\u003cdiv\u003e\n\u003ch3\u003eCałkowity koszt budowy\u003c\/h3\u003e\n\u003cdiv class=\"rv2\" id=\"etot\"\u003e—\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv style=\"text-align:right\"\u003e\n\u003ch3\u003eKoszt \/ m²\u003c\/h3\u003e\n\u003cdiv class=\"rv2\" id=\"em2v\"\u003e—\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n  \u003cdiv class=\"rb\"\u003e\n    \u003cdiv class=\"row\"\u003e\n\u003cspan class=\"rl\"\u003eFundamenty\u003c\/span\u003e\u003cspan class=\"rr\" id=\"er1\"\u003e—\u003c\/span\u003e\n\u003c\/div\u003e\n    \u003cdiv class=\"row\"\u003e\n\u003cspan class=\"rl\"\u003eStan surowy otwarty\u003c\/span\u003e\u003cspan class=\"rr\" id=\"er2\"\u003e—\u003c\/span\u003e\n\u003c\/div\u003e\n    \u003cdiv class=\"row\"\u003e\n\u003cspan class=\"rl\"\u003eDach + stan surowy zamknięty\u003c\/span\u003e\u003cspan class=\"rr\" id=\"er3\"\u003e—\u003c\/span\u003e\n\u003c\/div\u003e\n    \u003cdiv class=\"row\"\u003e\n\u003cspan class=\"rl\"\u003eInstalacje\u003c\/span\u003e\u003cspan class=\"rr\" id=\"er4\"\u003e—\u003c\/span\u003e\n\u003c\/div\u003e\n    \u003cdiv class=\"row\"\u003e\n\u003cspan class=\"rl\"\u003eWykończenie\u003c\/span\u003e\u003cspan class=\"rr\" id=\"er5\"\u003e—\u003c\/span\u003e\n\u003c\/div\u003e\n    \u003cdiv class=\"row tot\"\u003e\n\u003cspan class=\"rl\"\u003eRAZEM z buforem (+20%)\u003c\/span\u003e\u003cspan class=\"rr\" id=\"etot2\"\u003e—\u003c\/span\u003e\n\u003c\/div\u003e\n    \u003cdiv class=\"al bl mt12\"\u003e\u003cp\u003e\u003cstrong\u003eSzacowany czas budowy:\u003c\/strong\u003e \u003cspan id=\"eczas\"\u003e—\u003c\/span\u003e\u003c\/p\u003e\u003c\/div\u003e\n    \u003cdiv class=\"lead mt12\"\u003e\n      \u003ch4\u003eChcesz harmonogram z podziałem na miesiące?\u003c\/h4\u003e\n      \u003cp\u003ePDF z etapami, kosztami i checklistą do każdego etapu budowy.\u003c\/p\u003e\n      \u003cdiv class=\"lf\"\u003e\n\u003cinput type=\"email\" id=\"eme\" placeholder=\"Twój e-mail\"\u003e\u003cbutton class=\"lbtn\" onclick=\"lead('eme','oke','etapy')\"\u003eWyślij harmonogram →\u003c\/button\u003e\n\u003c\/div\u003e\n      \u003cdiv class=\"lok\" id=\"oke\"\u003eWysłano! Sprawdź skrzynkę.\u003c\/div\u003e\n    \u003c\/div\u003e\n    \u003cdiv class=\"up\"\u003e\n\u003cp\u003eJako Inwestor Zastępczy pilnuję każdego etapu — terminy, jakość, budżet.\u003c\/p\u003e\n\u003ca href=\"\/en\/pages\/konsultacja\"\u003eDowiedz się więcej\u003c\/a\u003e\n\u003c\/div\u003e\n  \u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\u003c\/div\u003e\n\u003cscript\u003e\nconst $  = id =\u003e document.getElementById(id);\nconst gv = id =\u003e parseFloat($(id).value)||0;\nconst sv = (id,v) =\u003e { if($(id)) $(id).textContent=v; };\nconst F  = n =\u003e Math.round(n).toLocaleString('pl-PL')+' zł';\nconst Fn = n =\u003e Math.round(n).toLocaleString('pl-PL');\nfunction show(id){ $(id).classList.add('on'); setTimeout(()=\u003e$(id).scrollIntoView({behavior:'smooth',block:'nearest'}),100); }\nfunction tog(el,id){ el.classList.toggle('on'); $(id).checked=!$(id).checked; }\nfunction rng(i,l,s){ sv(l,$(i).value+s); }\nconst GR_KEY = '4kwer86nxyszjvs2c8ewogcc8tbftv4e';\nlet grCID = null;\nasync function getGRCID(){\n  if(grCID) return grCID;\n  try{ const r=await fetch('https:\/\/api.getresponse.com\/v3\/campaigns?query[name]=kalkulator',{headers:{'X-Auth-Token':'api-key '+GR_KEY}}); const d=await r.json(); if(d\u0026\u0026d[0]) grCID=d[0].campaignId; }catch(e){}\n  return grCID;\n}\nasync function lead(eId,okId,src){\n  const em=$(eId).value;\n  if(!em||!em.includes('@')){ alert('Podaj poprawny adres e-mail.'); return; }\n  const cid=await getGRCID();\n  if(cid){ try{ await fetch('https:\/\/api.getresponse.com\/v3\/contacts',{method:'POST',headers:{'X-Auth-Token':'api-key '+GR_KEY,'Content-Type':'application\/json'},body:JSON.stringify({email:em,campaign:{campaignId:cid}})}); }catch(e){} }\n  $(okId).style.display='block'; $(eId).style.display='none'; $(eId).nextElementSibling.style.display='none';\n}\nfunction fixBtns(){\n  document.querySelectorAll('#kalk .btn').forEach(b=\u003e{ b.style.setProperty('background','#0d0d0d','important'); b.style.setProperty('color','#f5f2ec','important'); b.style.setProperty('border','none','important'); b.style.setProperty('border-radius','0','important'); b.style.setProperty('box-shadow','none','important'); b.onmouseenter=()=\u003eb.style.setProperty('background','#c8411b','important'); b.onmouseleave=()=\u003eb.style.setProperty('background','#0d0d0d','important'); });\n  document.querySelectorAll('#kalk .lbtn').forEach(b=\u003e{ b.style.setProperty('background','#c8411b','important'); b.style.setProperty('color','#fff','important'); b.style.setProperty('border','none','important'); b.style.setProperty('border-radius','0','important'); });\n}\ndocument.addEventListener('DOMContentLoaded',fixBtns);\nsetTimeout(fixBtns,300);\n\u003c\/script\u003e\n\n\u003cscript\u003e\nconst EB={e:3600,s:5200,p:7800};\nconst EO={gaz:18000,pompa:55000,pellet:22000,el:12000};\nfunction cE(){\n  const m2=gv(\"em2\"); if(!m2) return;\n  const std=$(\"estd\").value, sys=parseFloat($(\"esys\").value);\n  const lok=parseFloat($(\"elok\").value), fun=parseFloat($(\"efun\").value);\n  const dch=parseFloat($(\"edch\").value), ogr=$(\"eogr\").value;\n  const base=EB[std]*m2*sys*lok;\n  const r1=base*.13*fun, r2=base*.25, r3=base*.20*dch, r4=base*.18+EO[ogr], r5=base*.24;\n  const tot=r1+r2+r3+r4+r5;\n  const mies=m2\u003c100?14:m2\u003c150?18:m2\u003c200?22:28;\n  const mf=sys\u003c0.9?Math.round(mies*1.3):mies;\n  sv(\"etot\",F(tot)); sv(\"em2v\",F(tot\/m2)+\"\/m\\u00b2\");\n  sv(\"er1\",F(r1)); sv(\"er2\",F(r2)); sv(\"er3\",F(r3)); sv(\"er4\",F(r4)); sv(\"er5\",F(r5));\n  sv(\"etot2\",F(tot*1.2)); sv(\"eczas\",mf+\" miesi\\u0119cy\");\n}\n\u003c\/script\u003e","brand":"actwithsystem.com","offers":[{"title":"Default Title","offer_id":55262596038920,"sku":null,"price":0.0,"currency_code":"PLN","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/1007\/7906\/5608\/files\/KALKALTORBUDZETUBODOWY.jpg?v=1774818548","url":"https:\/\/actwithsystem.com\/en\/products\/kalkulator-kosztow-etapow-budowy","provider":"actwithsystem.com","version":"1.0","type":"link"}