.pf {
  --pf-kop: var(--font-heading);
  --pf-kopgewicht: 600;
  --line: var(--haar);
  background: var(--navy-50);
  color: var(--ink-900);
}
.pf-wrap { max-width: var(--breed); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.pf-sectie { padding-top: 96px; padding-bottom: 96px; border-top: 1px solid var(--haar); }
.pf-sectie--wit { background: var(--white); }
.pf-sectie--plat { border-top: 0; }
.pf-sectie#product { padding-top: 96px; padding-bottom: 96px; }
.pf-sectie#product::before { content: none; }

.pf-h1, .pf-h2, .pf-h3 { font-family: var(--pf-kop); font-weight: var(--pf-kopgewicht); letter-spacing: -0.03em; color: var(--navy-900); text-wrap: balance; }
.pf-h1 { font-size: 60px; line-height: 1.05; }
.pf-h1 .pf-amber { color: var(--caution); }
.pf-h2 { font-size: 40px; line-height: 1.1; }
.pf-h3 { font-family: var(--font-sans); font-size: 17px; font-weight: 500; line-height: 1.35; letter-spacing: -0.005em; color: var(--ink-900); }
.pf-sub { margin-top: 16px; max-width: 36em; font-size: 19px; line-height: 1.55; color: var(--ink-600); text-wrap: balance; }
.pf-alinea { margin-top: 16px; max-width: 34em; font-size: 16px; line-height: 1.6; color: var(--ink-600); }
.pf-alinea strong { font-weight: 600; color: var(--ink-900); }
.pf-midden { text-align: center; }
.pf-verborgen { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pf-midden .pf-sub, .pf-midden .pf-alinea { margin-left: auto; margin-right: auto; }
.pf-kopblok { max-width: 760px; }
.pf-kopblok.pf-midden { margin-left: auto; margin-right: auto; }

.pf-label { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 15px; font-weight: 500; color: var(--ink-900); }
.pf-midden .pf-label { justify-content: center; }

.pf-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }
.pf-midden .pf-knoppen { justify-content: center; }
.pf-knoppen .btn { min-height: 48px; padding: 0 22px; font-size: 16px; }
.pf-noot { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--ink-600); }
.pf-meer { margin-top: 28px; }
.pf-regel { margin-top: 24px; font-size: 16px; line-height: 1.55; color: var(--ink-600); }
.pf-regel a { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

.pf-hero { padding-top: 80px; padding-bottom: 96px; }
.pf-hero--twee { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.pf-punten { display: inline-flex; flex-direction: column; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; text-align: left; }
.pf-punten li { display: flex; align-items: baseline; gap: 12px; font-size: 17px; line-height: 1.5; color: var(--ink-600); }
.pf-punten li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--navy-500); transform: translateY(-2px); }
.pf-punten strong { font-weight: 600; color: var(--ink-900); }
.pf-hero__beeld { margin-top: 56px; }
.pf-hero--twee .pf-hero__beeld { margin-top: 0; }

figcaption.vb-voorbeeld { margin: 0 0 8px; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--ink-600); text-align: left; }
figcaption.vb-voorbeeld sup { margin-left: 1px; font-size: 0.75em; }
figcaption.vb-voorbeeld sup a { color: inherit; }

.pf-raam { margin: 0 auto; max-width: 1100px; }
.pf-raam__kader { overflow: hidden; background: var(--white); border: 1px solid var(--haar); border-radius: var(--r-kaart); box-shadow: var(--shadow-2); }
.pf-raam__balk { display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 14px; border-bottom: 1px solid var(--haar); background: var(--white); }
.pf-raam__stippen { display: flex; gap: 6px; }
.pf-raam__stippen span { width: 10px; height: 10px; border-radius: 50%; background: var(--haar); }
.pf-raam__adres { flex: 0 1 280px; margin: 0 auto; padding: 3px 10px; border-radius: var(--r-bedien); background: var(--navy-50); font-size: 12.5px; color: var(--ink-600); text-align: center; }
.pf-app { container-type: inline-size; padding: 24px; background: var(--navy-50); text-align: left; }
.pf-app__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pf-app__titel { font-family: var(--font-heading); font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink-900); overflow-wrap: anywhere; }
.pf-app__sub { margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--ink-600); }
.pf-app__periode { display: flex; flex: none; padding: 3px; background: var(--white); border: 1px solid var(--haar); border-radius: var(--r-scherm); font-size: 13px; line-height: 1.4; color: var(--ink-600); }
.pf-app__periode span { padding: 4px 10px; border-radius: var(--r-bedien); }
.pf-app__periode .is-gekozen { background: var(--navy-100); font-weight: 500; color: var(--navy-700); }
.pf-app__tegels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.pf-app__tegel { min-width: 0; padding: 16px; background: var(--white); border: 1px solid var(--haar); border-radius: var(--r-kaart); }
.pf-app__tegel p { font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--ink-600); }
.pf-app__tegel b { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink-900); }
.pf-app__tegel svg { display: block; width: 100%; height: 28px; margin-top: 12px; color: var(--navy-500); }
.pf-app__kaart { margin-top: 12px; padding: 16px 20px 8px; background: var(--white); border: 1px solid var(--haar); border-radius: var(--r-kaart); }
.pf-app__kop + .pf-app__kaart { margin-top: 20px; }
.pf-app__kaartkop { padding-bottom: 6px; font-size: 15px; font-weight: 600; color: var(--ink-900); }
.pf-app__voet { padding: 12px 0 8px; border-top: 1px solid var(--haar); font-size: 13px; line-height: 1.5; color: var(--ink-600); }
.pf-app .pf-tabel td { height: 46px; }
.pf-app .pf-pad { color: var(--ink-600); }
.pf-app .pf-twee .pf-grijs { font-size: 12.5px; overflow-wrap: anywhere; }
@container (max-width: 760px) {
  .pf-app__tegels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pf-app__tegel:nth-child(n+4) { display: none; }
}
@container (max-width: 520px) {
  .pf-app__periode { display: none; }
  .pf-app__tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pf-app__tegel:nth-child(3) { grid-column: 1 / -1; }
  .pf-app__tegel { padding: 12px; }
  .pf-app__tegel b { font-size: 21px; }
  .pf-app__kaart { padding: 12px 14px 6px; }
  .pf-app__titel { font-size: 17px; }
  .pf-app .pf-twee .pf-grijs { display: none; }
  .pf-app .pf-tabel th.pf-app__staat { width: 36%; }
  .pf-app .pf-tabel th.pf-app__bedrag { width: 26%; }
  .pf-app .pf-tabel th.pf-app__waarde { width: 56px; }
}
@container (max-width: 250px) {
  .pf-app .pf-tabel .pf-nauw { display: none; }
  .pf-app .pf-tabel th.pf-nauw:first-child + th { width: 38%; }
}

.pf-strook { padding-top: 32px; padding-bottom: 32px; border-top: 1px solid var(--haar); }
.pf-strook__rij { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; }
.pf-strook__label { font-size: 14px; font-weight: 500; color: var(--ink-600); }
.pf-strook__logo { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 500; color: var(--ink-600); }
.pf-strook__logo img { width: 20px; height: 20px; filter: grayscale(1); opacity: 0.75; }
.pf-strook__noot { flex-basis: 100%; font-size: 13px; color: var(--ink-600); text-align: center; }
.pf-strook a { color: var(--navy-700); font-weight: 500; }

.pf-pijler { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.pf-pijler--om > .pf-pijler__tekst { order: 2; }
.pf-vinkjes { display: grid; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.pf-vinkjes li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.45; color: var(--ink-900); }
.pf-vink { flex: none; width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--positive); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pf-kaartjes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.pf-kaartje { position: relative; display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 16px 36px 16px 16px; background: var(--white); border: 1px solid var(--haar); border-radius: var(--r-kaart); }
.pf-kaartje:hover { border-color: var(--navy-500); text-decoration: none; }
.pf-kaartje__naam { font-size: 15px; font-weight: 600; color: var(--ink-900); }
.pf-kaartje__regel { font-size: 13.5px; line-height: 1.45; color: var(--ink-600); }
.pf-kaartje__regel sup { margin-left: 1px; font-size: 0.75em; line-height: 0; }
.pf-kaartje__pijl { position: absolute; top: 16px; right: 14px; color: var(--navy-700); font-size: 15px; }
div.pf-kaartje { padding-right: 16px; }

.pf-paneel { margin: 0; min-width: 0; }
.pf-scherm { container-type: inline-size; min-width: 0; padding: 18px 20px 20px; background: var(--white); border: 1px solid var(--haar); border-radius: 16px; }
.pf-scherm__kop { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--haar); }
.pf-scherm__titel { font-size: 14px; font-weight: 600; color: var(--ink-900); }
.pf-scherm__meta { margin-left: auto; font-size: 13px; color: var(--ink-600); white-space: nowrap; }
.pf-scherm__voet { margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: var(--ink-600); }
.pf-tabel { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 14px; }
.pf-k14 { width: 14%; } .pf-k16 { width: 16%; } .pf-k18 { width: 18%; } .pf-k20 { width: 20%; } .pf-k22 { width: 22%; } .pf-k24 { width: 24%; }
.pf-k26 { width: 26%; } .pf-k28 { width: 28%; } .pf-k30 { width: 30%; } .pf-k32 { width: 32%; }
.pf-k34 { width: 34%; } .pf-k36 { width: 36%; } .pf-k40 { width: 40%; } .pf-k44 { width: 44%; }
.pf-tabel th { padding: 10px 8px; font-size: 12.5px; font-weight: 500; line-height: 1.3; color: var(--ink-600); text-align: left; vertical-align: bottom; }
.pf-tabel td { height: 44px; padding: 8px; border-top: 1px solid var(--haar); color: var(--ink-900); line-height: 1.35; vertical-align: middle; }
.pf-tabel th:first-child, .pf-tabel td:first-child { padding-left: 0; }
.pf-tabel th:last-child, .pf-tabel td:last-child { padding-right: 0; }
.pf-tabel .num { text-align: right; white-space: nowrap; }
.pf-tabel th.num { white-space: normal; }
.pf-tabel td.num { font-family: var(--font-mono); font-size: 13px; }
.pf-tabel tfoot td, .pf-tabel tfoot th { border-top: 1px solid var(--haar); font-weight: 600; }
.pf-tabel--stapel, .pf-tabel--stapel tbody, .pf-tabel--stapel tr, .pf-tabel--stapel td { display: block; }
.pf-tabel--stapel thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pf-tabel--stapel tr { padding: 9px 0; border-top: 1px solid var(--haar); }
.pf-tabel--stapel tr:first-child { border-top: 0; }
.pf-tabel.pf-tabel--stapel td { height: auto; padding: 0; border-top: 0; }
.pf-tabel--stapel td:first-child { font-weight: 600; }
.pf-tabel--stapel td + td { margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--ink-600); }
.pf-tabel .pf-grijs { color: var(--ink-600); }
.pf-naam { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 500; line-height: 1.3; }
.pf-naam img, .pf-naam__ikoon { flex: none; width: 18px; height: 18px; }
.pf-naam__ikoon { color: var(--ink-600); }
.pf-naam small { font-size: 12.5px; font-weight: 400; color: var(--ink-600); }
.pf-mono { font-family: var(--font-mono); font-size: 13px; }
.pf-twee { display: grid; gap: 3px; padding: 3px 0; }
.pf-twee__boven { font-weight: 500; }
.pf-twee .pf-naam { font-size: 12.5px; font-weight: 400; color: var(--ink-600); }
.pf-twee .pf-naam img, .pf-twee .pf-naam__ikoon { width: 15px; height: 15px; }
.pf-pad { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-900); }

.pf-stip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; line-height: 1.3; color: var(--ink-900); white-space: nowrap; }
.pf-tabel .pf-stip { white-space: normal; }
.pf-stip::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--positive); }
.pf-stip--amber::before { background: var(--caution); }
.pf-stip--grijs::before { background: var(--ink-400); }
.pf-tag { display: inline-block; padding: 2px 7px; border-radius: var(--r-tag); background: var(--navy-50); font-size: 12px; font-weight: 500; color: var(--navy-700); white-space: nowrap; }
.pf-tag--groen { background: #E8F3EE; color: var(--positive); }

.pf-paneel .feed { max-width: none; margin: 0; box-shadow: none; border-radius: 16px; }
.pf-paneel .feed__event { white-space: normal; overflow: visible; text-overflow: clip; }
.pf-paneel__voet { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--ink-600); }

.pf-balken { display: grid; gap: 10px; margin-top: 14px; }
.pf-balk { display: grid; grid-template-columns: 92px minmax(0, 1fr) 44px; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-900); }
.pf-balk__baan { height: 8px; border-radius: var(--r-balk); background: var(--navy-50); overflow: hidden; }
.pf-balk__vul { display: block; height: 100%; border-radius: var(--r-balk); background: var(--navy-700); }
.pf-balk__vul--amber { background: var(--caution); }
.pf-balk__getal { font-family: var(--font-mono); font-size: 12.5px; text-align: right; }
.pf-w90 { width: 90%; } .pf-w78 { width: 78%; } .pf-w64 { width: 64%; } .pf-w56 { width: 56%; }
.pf-w44 { width: 44%; } .pf-w38 { width: 38%; } .pf-w30 { width: 30%; } .pf-w22 { width: 22%; } .pf-w18 { width: 18%; }

.pf-keus { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pf-keus span { padding: 6px 10px; border: 1px solid var(--haar); border-radius: var(--r-bedien); font-size: 13px; color: var(--ink-900); }
.pf-keus .is-gekozen { border-color: var(--positive); background: #E8F3EE; color: var(--positive); font-weight: 600; }
.pf-bel { max-width: 260px; margin: 16px 0 0 auto; padding: 10px 12px; border-radius: 12px 12px 4px 12px; background: #E7F6EA; font-size: 14px; line-height: 1.45; color: var(--ink-900); }
.pf-bel span { display: block; margin-top: 4px; font-size: 11.5px; color: var(--ink-600); text-align: right; }
.pf-code { display: grid; gap: 8px; margin-top: 14px; }
.pf-zoek { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 9px 12px; border: 1px solid var(--haar); border-radius: var(--r-bedien); background: var(--white); font-size: 13.5px; }
.pf-zoek .pf-naam__ikoon { flex: none; color: var(--ink-600); }
.pf-zoek__label { color: var(--ink-600); }
.pf-zoek__veld { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--ink-900); }
.pf-zoek--veld { flex-direction: column; align-items: stretch; gap: 4px; }
.pf-zoek--veld .pf-zoek__label { font-size: 12.5px; }
.pf-zoek + .pf-tabel { margin-top: 10px; }
.pf-knopje { margin-top: 12px; }
.pf-knopje span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: var(--r-bedien); background: var(--navy-700); color: var(--white); font-size: 14px; font-weight: 500; }
.pf-code div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--haar); border-radius: var(--r-bedien); font-size: 13.5px; }
.pf-code b { font-weight: 500; }
.pf-code span { color: var(--navy-700); font-weight: 500; }
.pf-reis { margin: 14px 0 0; padding: 0; list-style: none; }
.pf-reis li { position: relative; display: flex; justify-content: space-between; gap: 10px; padding: 8px 0 8px 20px; font-size: 13.5px; color: var(--ink-900); }
.pf-reis li::before { content: ""; position: absolute; left: 3px; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: var(--navy-500); }
.pf-reis li::after { content: ""; position: absolute; left: 6.5px; top: 25px; bottom: -9px; width: 1px; background: var(--haar); }
.pf-reis li:last-child::after { content: none; }
.pf-reis li:last-child::before { background: var(--positive); }
.pf-reis small { font-family: var(--font-mono); font-size: 12px; color: var(--ink-600); white-space: nowrap; }
.pf-logorij { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pf-logorij span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid var(--haar); border-radius: var(--r-bedien); font-size: 13px; }
.pf-logorij img { width: 16px; height: 16px; }
.pf-tegel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.pf-tegel div { padding: 12px; border: 1px solid var(--haar); border-radius: var(--r-scherm); }
.pf-tegel p { font-size: 12.5px; color: var(--ink-600); }
.pf-tegel b { display: block; margin-top: 4px; font-family: var(--font-heading); font-size: 26px; font-weight: 700; letter-spacing: -0.03em; color: var(--navy-900); }
.pf-tegel b.pf-grijs { color: var(--ink-600); }
.pf-kies { display: grid; gap: 6px; margin-top: 14px; }
.pf-kies span { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--haar); border-radius: var(--r-bedien); font-size: 13.5px; }
.pf-kies span::before { content: ""; flex: none; width: 12px; height: 12px; border: 1.5px solid var(--ink-400); border-radius: 50%; }
.pf-kies .is-gekozen { border-color: var(--navy-500); }
.pf-kies .is-gekozen::before { border: 4px solid var(--navy-700); }

.pf-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 40px 0 0; padding: 0; list-style: none; }
.pf-kaart { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; min-width: 0; padding: 24px; background: var(--white); border: 1px solid var(--haar); border-radius: var(--r-kaart); }
.pf-kaart__tekst { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--ink-600); }
.pf-kaart__beeld { align-self: start; margin: 0; padding-top: 20px; }
.pf-kaart .pf-scherm { padding: 14px 14px 16px; border-radius: var(--r-kaart); background: var(--navy-50); border-color: var(--haar); }
.pf-kaart .pf-tabel td { height: 38px; }
.pf-kaart .pf-tabel--stapel td { height: auto; }
.pf-kaart .pf-kies { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.pf-plak { position: sticky; top: 64px; z-index: 10; background: var(--white); border-bottom: 1px solid var(--haar); }
@media (min-width: 1180px) {
  .pf-met-plak [id] { scroll-margin-top: 137px; }
}
.pf-plak__rij { display: flex; gap: 4px; overflow-x: auto; padding-top: 8px; padding-bottom: 8px; scrollbar-width: none; }
.pf-plak a { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-bedien); font-size: 14px; font-weight: 500; color: var(--ink-900); white-space: nowrap; }
.pf-plak a:hover { background: var(--navy-50); text-decoration: none; }
.pf-plak__rij > a:first-child { margin-left: -12px; }
.pf-plak .ikoon { width: 28px; height: 28px; }
.pf-plak .ikoon svg { width: 16px; height: 16px; }

.pf-vergelijk { margin-top: 40px; overflow: hidden; background: var(--white); border: 1px solid var(--haar); border-radius: var(--r-kaart); }
.pf-vergelijk table { width: 100%; border-collapse: collapse; }
.pf-vergelijk th, .pf-vergelijk td { padding: 16px 20px; text-align: left; vertical-align: top; font-size: 15px; line-height: 1.45; }
.pf-vergelijk thead th { font-size: 14px; font-weight: 600; color: var(--ink-900); border-bottom: 1px solid var(--haar); }
.pf-vergelijk tbody th { font-weight: 500; color: var(--ink-900); }
.pf-vergelijk tbody tr + tr > * { border-top: 1px solid var(--haar); }
.pf-vergelijk .pf-pixel { color: var(--ink-600); }
.pf-vergelijk .pf-wij { background: var(--navy-50); color: var(--ink-900); }
.pf-vergelijk thead .pf-wij { color: var(--navy-900); }
.pf-vergelijk td.pf-wij { font-weight: 500; }
.pf-vergelijk .pf-vink { display: inline-block; vertical-align: -4px; margin-right: 6px; }
.pf-vergelijk sup { font-size: 0.7em; }
.pf-vergelijk sup a { color: var(--ink-600); }
.pf-kruis { display: inline-block; vertical-align: -4px; width: 18px; height: 18px; margin-right: 6px; fill: none; stroke: var(--ink-400); stroke-width: 2; stroke-linecap: round; }

.pf-claim { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: start; margin-top: 40px; }
.pf-claim .vb-telt { margin-top: 0; gap: 16px; }
.pf-claim .vb-attributie__beeld { grid-column: auto; margin: 0; }
.pf-claim .vb-scherm { border-color: var(--haar); }
.pf .vb-attributie__slot { margin-top: 16px; font-size: 15px; color: var(--ink-600); }
.pf-pijllink { font-weight: 500; color: var(--navy-700); }

.pf-stappen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 40px 0 0; padding: 0; list-style: none; }
.pf-stap { padding: 28px; background: var(--white); border: 1px solid var(--haar); border-radius: var(--r-kaart); }
.pf-stap__num { font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--navy-700); }
.pf-stap .pf-h3 { margin-top: 16px; font-size: 19px; }
.pf-stap__tekst { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--ink-600); }
.pf-stap__tekst sup { font-size: 0.7em; }
.pf-stap__tekst sup a { color: var(--ink-600); }

.pf-logoblok { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.pf-logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.pf-logos li { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; background: var(--white); border: 1px solid var(--haar); border-radius: var(--r-kaart); }
.pf-logos img { width: 32px; height: 32px; }

.pf-alles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.pf-alles details { padding: 20px; background: var(--white); border: 1px solid var(--haar); border-radius: var(--r-kaart); }
.pf-alles summary { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--ink-900); }
.pf-alles summary .menu__pijl { display: none; }
.pf-alles ul { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.pf-alles li a { display: flex; align-items: flex-start; gap: 8px; font-size: 14.5px; line-height: 1.4; color: var(--ink-900); }
.pf-alles li a:hover { color: var(--navy-700); }
.pf-alles .pf-vink { width: 18px; height: 18px; }
@supports selector(::details-content) {
  @media (min-width: 721px) {
    .pf-alles details::details-content { content-visibility: visible; }
    .pf-alles summary { pointer-events: none; }
  }
}
@supports not selector(::details-content) {
  .pf-alles summary { cursor: pointer; }
  .pf-alles summary .menu__pijl { display: block; margin-left: auto; }
  .pf-alles details[open] summary .menu__pijl { transform: rotate(180deg); }
}

.pf-voorbeeldnoot { margin-top: -64px; padding-bottom: 44px; font-size: 13px; line-height: 1.5; color: var(--ink-600); text-align: center; }

.pf-vragen { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: start; }
.pf-vragen .faq__list { margin-top: 0; }
.pf-vragen .faq__q { font-size: 17px; }

.pf-slot { padding: 64px 48px; border-radius: 16px; background: var(--navy-900); text-align: center; }
.pf-slot .pf-h2 { color: var(--white); }
.pf-slot__regel { margin-top: 14px; font-size: 17px; color: var(--navy-100); }
.pf-slot .pf-knoppen { justify-content: center; }
.pf-slot .btn--secondary { background: transparent; border-color: var(--navy-500); color: var(--white); }
.pf-slot .btn--secondary:hover { border-color: var(--white); color: var(--white); }

.pf-hub { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1; margin: 0 auto; }
.pf-hub svg.pf-hub__lijnen { position: absolute; inset: 0; width: 100%; height: 100%; }
.pf-hub__lijnen line { stroke: var(--haar); stroke-width: 1.5; }
.pf-hub__punt { position: absolute; display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; margin: -38px 0 0 -38px; background: var(--white); border: 1px solid var(--haar); border-radius: 16px; }
.pf-hub__punt img { width: 36px; height: 36px; }
.pf-hub__midden { left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; color: var(--navy-900); }
.pf-hub__midden svg { width: 44px; height: 44px; }
.pf-hub__1 { left: 50%; top: 10%; } .pf-hub__2 { left: 88%; top: 38%; } .pf-hub__3 { left: 74%; top: 86%; }
.pf-hub__4 { left: 26%; top: 86%; } .pf-hub__5 { left: 12%; top: 38%; }

.pf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.pf-chips a { padding: 7px 12px; background: var(--white); border: 1px solid var(--haar); border-radius: var(--r-bedien); font-size: 14px; font-weight: 500; color: var(--ink-900); }
.pf-chips a:hover { border-color: var(--navy-500); text-decoration: none; }
.pf-chips span { margin-left: 6px; color: var(--ink-600); font-weight: 400; }
.pf-groep { margin-top: 56px; scroll-margin-top: 88px; }
.pf-groep .pf-h2 { font-size: 28px; }
.pf-groep .integrations__line { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--ink-600); }

.pf-ints { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.pf-ints > li { min-width: 0; }
.pf-ints .integration { position: relative; height: 100%; padding: 18px; border-color: var(--haar); }
.pf-ints .integration__name { font-size: 16px; }
.pf-ints .integration__head { padding-right: 46px; }
.pf-ints .integration__head .pf-stip { position: absolute; top: 7px; right: 0; }
.pf-int__regel { display: block; margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--ink-600); }
.pf-int__meer { margin-top: 10px; }
.pf-int__meer summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: 13.5px; font-weight: 500; color: var(--navy-700); cursor: pointer; }
.pf-int__meer summary::after { content: "+"; font-size: 15px; }
.pf-int__meer[open] summary::after { content: "\2212"; }
.pf-int__meer .integration__text { margin-top: 6px; font-size: 14px; }
.pf-ints--roadmap .integration { padding: 14px 16px; background: transparent; }
.pf-ints--roadmap .integration__name { font-size: 15px; color: var(--ink-600); }
.pf-ints--roadmap .integration .logo { filter: grayscale(1); opacity: 0.6; }
.pf-ints--roadmap .integration__text { margin-top: 6px; font-size: 13px; }
.pf-ints--roadmap .integration__head { padding-right: 0; }
.pf + .site-footer .site-footer__inner, .pf .vb-noten > .container { max-width: var(--breed); }

.pf-ints--roadmap .pf-int__meer summary { color: var(--ink-600); }
.pf-roadmap > summary { display: flex; align-items: center; gap: 12px; padding: 18px 20px; background: var(--white); border: 1px solid var(--haar); border-radius: var(--r-kaart); cursor: pointer; list-style: none; }
.pf-roadmap > summary::-webkit-details-marker { display: none; }
.pf-roadmap > summary .pf-h2 { font-size: 19px; letter-spacing: -0.01em; }
.pf-roadmap__aantal { font-size: 15px; color: var(--ink-600); }
.pf-roadmap > summary .menu__pijl { margin-left: auto; color: var(--ink-600); }
.pf-roadmap[open] > summary .menu__pijl { transform: rotate(180deg); }
.pf-roadmap > .integrations__line { margin-top: 16px; }
.pf-hero--hub { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }

@media (max-width: 1180px) {
  .pf-h1 { font-size: 52px; }
  .pf-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-claim { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pf-pijler { gap: 40px; }
  .pf-hero--twee { gap: 40px; }
  .pf-ints { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pf-alles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .pf-pijler, .pf-hero--twee, .pf-logoblok, .pf-vragen { grid-template-columns: minmax(0, 1fr); }
  .pf-pijler--om > .pf-pijler__tekst { order: 0; }
  .pf-stappen { grid-template-columns: minmax(0, 1fr); }
  .pf-logos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pf-ints { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1179px) {
  .pf-plak { position: static; }
}
@media (max-width: 720px) {
  .pf-sectie, .pf-sectie#product { padding-top: 64px; padding-bottom: 64px; }
  .pf-voorbeeldnoot { margin-top: -36px; padding-bottom: 32px; }
  .pf-paneel .feed__list { height: auto; min-height: 0; }
  .pf-paneel .feed__list > .feed__row:nth-child(n+4) { display: none; }
  .pf-kaart { padding: 20px 16px; }
  .pf-kaart .pf-scherm { padding: 12px 12px 14px; }
  .pf-plak__rij { flex-wrap: wrap; gap: 2px 4px; overflow-x: visible; }
  .pf-plak a { gap: 5px; padding: 5px 6px; font-size: 13.5px; }
  .pf-plak__rij { padding-left: calc(var(--gutter) - 6px); }
  .pf-plak__rij > a:first-child { margin-left: 0; }
  .pf-plak .ikoon { width: 22px; height: 22px; }
  .pf-plak .ikoon svg { width: 13px; height: 13px; }
  .pf-hero { padding-top: 40px; padding-bottom: 64px; }
  .pf-h1 { font-size: 38px; line-height: 1.08; }
  .pf-h2 { font-size: 30px; }
  .pf-sub { font-size: 17px; }
  .pf-punten li { font-size: 16px; }
  .pf-knoppen .btn { flex: 1 1 100%; }
  .pf-hero__beeld { margin-top: 40px; }
  .pf-raam__balk { height: 28px; }
  .pf-raam__adres { display: none; }
  .pf-app { padding: 14px; }
  .pf-kaartjes, .pf-raster, .pf-ints, .pf-alles { grid-template-columns: minmax(0, 1fr); }
  .pf-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pf-strook__rij { gap: 12px 20px; }
  .pf-vergelijk thead { display: none; }
  .pf-vergelijk table, .pf-vergelijk tbody, .pf-vergelijk tr, .pf-vergelijk th, .pf-vergelijk td { display: block; }
  .pf-vergelijk tbody tr + tr > * { border-top: 0; }
  .pf-vergelijk tbody tr + tr { border-top: 1px solid var(--haar); }
  .pf-vergelijk tbody th { padding: 16px 16px 8px; font-size: 15px; font-weight: 600; }
  .pf-vergelijk td { padding: 8px 16px; font-size: 14px; }
  .pf-vergelijk td:last-child { padding-bottom: 16px; }
  .pf-vergelijk td::before { content: attr(data-kop); display: block; margin-bottom: 2px; font-size: 12px; font-weight: 500; color: var(--ink-600); }
  .pf-vergelijk td.pf-wij { margin: 0 8px 8px; padding: 10px 12px; border-radius: var(--r-bedien); }
  .pf-scherm { padding: 14px 14px 16px; }
  .pf-alles summary { pointer-events: auto; cursor: pointer; }
  .pf-alles summary .menu__pijl { display: block; margin-left: auto; }
  .pf-alles details[open] summary .menu__pijl { transform: rotate(180deg); }
  .pf-slot { padding: 48px 20px; }
  .pf-hub__punt { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
  .pf-hub__punt img { width: 28px; height: 28px; }
  .pf-hub__midden { width: 76px; height: 76px; margin: -38px 0 0 -38px; }
}
@media (max-width: 480px) and (max-height: 700px) {
  .pf-punten { gap: 8px; margin-top: 16px; }
  .pf-punten + .pf-knoppen { flex-wrap: nowrap; gap: 8px; margin-top: 16px; }
  .pf-punten + .pf-knoppen .btn { flex: 1 1 0; min-width: 0; padding: 0 8px; font-size: 15px; }
  .pf-punten ~ .pf-noot { margin-top: 10px; }
}
@container (max-width: 420px) {
  .pf-tabel .pf-breed { display: none; }
  .pf-tabel { font-size: 13px; }
  .pf-tabel th { font-size: 12px; }
  .pf-tabel td.num, .pf-tabel .pf-mono { font-size: 12.5px; }
  .pf-tag { font-size: 11.5px; }
}
@container (max-width: 300px) {
  .pf-tabel .pf-smal { display: none; }
  .pf-tabel { font-size: 12.5px; }
  .pf-tabel th { font-size: 11.5px; }
  .pf-tabel th, .pf-tabel td { padding-left: 6px; padding-right: 6px; }
  .pf-tabel th:first-child, .pf-tabel td:first-child { padding-left: 0; }
  .pf-tabel th:last-child, .pf-tabel td:last-child { padding-right: 0; }
  .pf-tabel .pf-naam { gap: 6px; }
  .pf-tabel .pf-naam img, .pf-tabel .pf-naam__ikoon { display: none; }
  .pf-tabel .pf-tag { padding: 2px 5px; white-space: normal; }
  .pf-tabel .pf-stip { gap: 5px; font-size: 12px; }
}
@container (max-width: 230px) {
  .pf-tabel .pf-smalst { display: none; }
}
.pf-alles-blok { margin-top: 56px; }
.pf-alles__kop { font-size: 19px; font-weight: 600; }

.pf-hero--kort { padding-top: 64px; padding-bottom: 40px; }
.pf-kruimel { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 14.5px; color: var(--ink-600); }
.pf-kruimel a { font-weight: 500; }
.pf-hulp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 0 32px; align-items: start; padding: 0 max(var(--gutter), calc((100% - var(--breed)) / 2 + var(--gutter))) 96px; }
.pf-hulp > .pf-hero { grid-column: 1 / -1; }
.pf-hulp__fout { max-width: 36em; margin-top: 20px; color: var(--caution-text); font-weight: 500; line-height: 1.5; }
.pf-hulp__fout a { color: var(--navy-950); text-decoration: underline; text-underline-offset: 3px; }
.pf-hulp__spring { display: none; }
.pf-hulp__spring a { display: inline-flex; align-items: center; min-height: 44px; }
.pf-hulp__lijst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.pf-hulp__kaart { min-width: 0; padding: 22px 24px 6px; background: var(--white); border: 1px solid var(--haar); border-radius: var(--r-kaart); }
.pf-hulp__kop { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-family: var(--font-sans); font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink-900); }
.pf-hulp__kaart details { border-top: 1px solid var(--haar); }
.pf-hulp__kaart .faq__q { padding: 14px 0; gap: 12px; font-size: 15.5px; line-height: 1.4; }
.pf-hulp__kaart .faq__a { max-width: none; padding-bottom: 16px; font-size: 15px; }
.pf-hulp__kaart .faq__a a, .pf-hulp__stappen a { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.pf-hulp__stappen { margin: 0; padding: 0 0 12px 20px; font-size: 15px; line-height: 1.6; color: var(--ink-600); }
.pf-hulp__stappen li + li { margin-top: 6px; }
.pf-hulp__links { margin: 0; padding: 0; list-style: none; }
.pf-hulp__links li { border-top: 1px solid var(--haar); }
.pf-hulp__links a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 0; font-size: 15.5px; font-weight: 500; line-height: 1.4; color: var(--navy-900); }
.pf-hulp__links a:hover { color: var(--navy-600); text-decoration: none; }
.pf-hulp__links a::after { content: "\2192"; flex: none; font-weight: 400; color: var(--ink-600); }
.pf-contact { max-width: none; margin: 0; padding: 28px; border-color: var(--haar); }
.pf-contact .pf-h2 { font-size: 24px; letter-spacing: -0.02em; }
.pf-contact__regel { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--ink-600); }
.pf-contact__regel a { font-weight: 500; }
.pf-contact .form { margin-top: 22px; gap: 14px; }
.pf-contact__bel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--haar); font-size: 15px; font-weight: 500; color: var(--ink-900); }

.pf-doc-blok { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 280px); gap: 32px; align-items: start; padding-bottom: 96px; }
.pf-doc { min-width: 0; padding: 32px 36px 36px; background: var(--white); border: 1px solid var(--haar); border-radius: var(--r-kaart); }
.pf-doc .page__text { max-width: none; }
.pf-doc > .page__text:first-child { margin-top: 0; }
.pf-doc__h2 { margin-top: 36px; font-family: var(--pf-kop); font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; color: var(--navy-900); }
.pf-doc pre { margin: 14px 0 0; padding: 16px 18px; background: var(--navy-50); border: 1px solid var(--haar); border-radius: var(--r-scherm); font-size: 13.5px; line-height: 1.6; color: var(--ink-900); }
.pf-doc__zij { position: sticky; top: 88px; padding: 20px; background: var(--white); border: 1px solid var(--haar); border-radius: var(--r-kaart); font-size: 15px; line-height: 1.5; }
.pf-doc__zij-kop { font-size: 13.5px; font-weight: 500; color: var(--ink-600); }
.pf-doc__zij ul { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.pf-doc__zij a { font-weight: 500; }
.pf-doc__zij-vraag { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--haar); color: var(--ink-600); }

@media (min-width: 961px) and (max-width: 1179px) {
  .pf-hulp { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 0 24px; }
  .pf-hulp__lijst { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .pf-hulp { grid-template-columns: minmax(0, 1fr); }
  .pf-hulp__spring { display: flex; }
  .pf-contact { margin-top: 16px; }
  .pf-doc-blok { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pf-doc__zij { position: static; }
}
@media (max-width: 720px) {
  .pf-hero--kort { padding-top: 32px; padding-bottom: 24px; }
  .pf-hulp { padding-bottom: 64px; }
  .pf-hulp__lijst { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pf-hulp__kaart { padding: 18px 16px 4px; }
  .pf-hulp__spring { gap: 6px; }
  .pf-hulp__spring a { padding: 0 9px; font-size: 13px; }
  .pf-contact { padding: 22px 16px; }
  .pf-doc-blok { padding-bottom: 64px; }
  .pf-doc { padding: 22px 16px 24px; }
  .pf-doc pre { padding: 14px; font-size: 12.5px; }
}