/* PF-ICONSET-PRO-20261030 — eigen PandFix-iconenset (duotone, 48-grid). Bron: /root/scripts/pf-iconset-bouw.py */
.pfi{display:block;width:100%;height:100%;overflow:visible}
[data-pfc]{--pfi-d:#93CBEE;--pfi-a:#0E5F8F;--pfi-bg:#EAF4FB}
[data-pfc=warmte]{--pfi-d:#F9B39E;--pfi-a:#E8502E;--pfi-bg:#FDEFEA}
[data-pfc=stroom]{--pfi-d:#FBD38A;--pfi-a:#F5A623;--pfi-bg:#FEF6E7}
[data-pfc=bouw]{--pfi-d:#93DCD3;--pfi-a:#13A89A;--pfi-bg:#E6F6F4}
[data-pfc=gas]{--pfi-d:#FBD38A;--pfi-a:#E8502E;--pfi-bg:#FEF6E7}
/* tegel: 64px op desktop, zachte merktint, fijne rand + schaduw — wint van de oude .si/.ic-regels in de pagina */
html body .pfi-tile{width:64px!important;height:64px!important;min-width:64px;flex:0 0 64px!important;border-radius:18px!important;
  background:var(--pfi-bg)!important;color:#0F3550!important;display:flex!important;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(15,53,80,.06),0 6px 16px -8px rgba(15,53,80,.28)!important;padding:0!important}
html body .pfi-tile>svg.pfi{width:46px!important;height:46px!important;stroke:none!important;fill:none}
html body .svc:hover .pfi-tile,html body .svc-detail:hover .pfi-tile{transform:translateY(-2px)!important}
html body .pfi-tile{transition:transform .25s ease!important}
html body .svc-detail .badge{gap:10px}
@media(max-width:600px){html body .pfi-tile{width:56px!important;height:56px!important;min-width:56px;flex-basis:56px!important;border-radius:16px!important}
  html body .pfi-tile>svg.pfi{width:42px!important;height:42px!important}}
/* belblok 'Direct een loodgieter nodig?': het icoonvak werd door .callout>div{flex:1} een lege balk */
html body .callout>.ci{flex:0 0 56px!important;width:56px!important;height:56px!important;min-width:0!important;margin:0!important;
  border-radius:16px!important;background:#0E5F8F!important;color:#fff!important;display:flex!important;align-items:center;justify-content:center;
  --pfi-d:rgba(255,255,255,.22);--pfi-a:#fff;--pfi-bg:#0E5F8F;box-shadow:0 8px 18px -8px rgba(14,95,143,.55)!important}
html body .callout>.ci>svg{width:36px!important;height:36px!important}
html body .callout a.btn{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
@media(max-width:680px){html body .callout{align-items:center!important;text-align:center}html body .callout a.btn{margin:0 auto!important}}
/* R2 PF-ICONSET-PRO-R2-20261030: homepage-hero 'Waar gaat het om?' — lichte merktegel met duotone icoon op de donkere hero */
html body .pfh-t-ic[data-pfi]{width:46px!important;height:46px!important;border-radius:13px!important;background:var(--pfi-bg)!important;color:#0F3550!important;
  box-shadow:inset 0 0 0 1px rgba(15,53,80,.08),0 8px 18px -8px rgba(0,0,0,.55)!important}
html body .pfh-t-ic[data-pfi]>svg.pfi{width:36px!important;height:36px!important}
@media(max-width:600px){html body .pfh-t-ic[data-pfi]{width:38px!important;height:38px!important;border-radius:11px!important}
  html body .pfh-t-ic[data-pfi]>svg.pfi{width:30px!important;height:30px!important}}
/* kleine iconen (pfs-*): lijnen in de sprite, maat komt van het svg-element zelf */
svg[data-pfs]{overflow:visible}