.pagina-kop-vier{padding-block:clamp(3.5rem,9vw,6rem) clamp(2.5rem,6vw,4rem)}
.pagina-kop-vier h1{margin:.6rem 0 1.4rem}
.pagina-kop-vier-onder{
  display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;
  flex-wrap:wrap;padding-top:1.4rem;border-top:1px solid var(--kleur-lijn);
}
.pagina-kop-vier-onder p{margin:0;max-width:56ch;font-size:1.05rem}



.vergelijk-sectie{background:var(--kleur-achtergrond);padding-top:var(--sp-4)}
.tabel-wrap{
  position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--kleur-lijn);scroll-snap-type:x proximity;
}
.tabel-vergelijk{width:100%;min-width:640px;border-collapse:collapse}
.tabel-vergelijk th,.tabel-vergelijk td{
  padding:.85em .9em;border-bottom:1px solid var(--kleur-lijn);
  font-size:.86rem;text-align:center;
}
.tabel-vergelijk thead th{
  padding:1.1em .9em;text-align:center;scroll-snap-align:start;
}

.tabel-vergelijk .pk-naam{
  display:block;font-family:var(--font-serif);font-size:1.15rem;font-weight:400;
  font-variation-settings:"opsz" 30;
}

.tabel-vergelijk .pk-prijs{
  display:block;margin-top:.3rem;font-family:var(--font-sans);font-size:.72rem;
  font-weight:500;letter-spacing:.03em;opacity:.85;
}
.tabel-vergelijk tbody th{
  text-align:left;font-weight:500;font-size:.86rem;color:var(--kleur-inkt);
  background:var(--kleur-achtergrond);
}
.tabel-vergelijk thead th:first-child{background:var(--kleur-achtergrond)}
.tabel-vergelijk tfoot td:first-child{background:var(--kleur-achtergrond)}
.tabel-vergelijk thead th:first-child,
.tabel-vergelijk tbody th,
.tabel-vergelijk tfoot td:first-child{
  position:sticky;left:0;z-index:2;min-width:12rem;max-width:15rem;
  box-shadow:1px 0 0 var(--kleur-lijn);
}
.tabel-vergelijk tbody tr:last-child th,.tabel-vergelijk tbody tr:last-child td{border-bottom:0}

.vink{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.6em;height:1.6em;border-radius:50%;font-size:.95rem;font-weight:700;
}
.tabel-vergelijk .nee{color:var(--kleur-inkt-2);opacity:.35;font-size:.95rem}
.tabel-vergelijk tfoot td{padding:1rem .6rem}

.tabel-vergelijk tfoot .knop{
  display:flex;width:100%;justify-content:center;border:0;font-size:.78rem;
  padding:1em .7em;
}
.tabel-vergelijk tfoot .knop:hover{filter:brightness(.92)}
.tabel-noot{margin-top:1.2rem;font-size:.85rem;color:var(--kleur-inkt-2)}
@media (min-width:900px){
  .tabel-vergelijk{min-width:0}
  .tabel-vergelijk thead th:first-child,
  .tabel-vergelijk tbody th,
  .tabel-vergelijk tfoot td:first-child{position:static;box-shadow:none;min-width:0}
}

@media (max-width:899px){
  .tabel-wrap{
    background-image:
      linear-gradient(to right, var(--kleur-achtergrond) 50%, rgba(222,222,212,0)),
      linear-gradient(to left, var(--kleur-achtergrond) 50%, rgba(222,222,212,0)),
      linear-gradient(to right, rgba(45,42,38,.28), rgba(45,42,38,0)),
      linear-gradient(to left, rgba(45,42,38,.28), rgba(45,42,38,0));
    background-position:left center, right center, left center, right center;
    background-repeat:no-repeat;
    background-color:var(--kleur-achtergrond);
    background-size:22px 100%, 22px 100%, 16px 100%, 16px 100%;
    background-attachment:local, local, scroll, scroll;
  }
}
@media (prefers-reduced-motion:reduce){
  .tabel-vergelijk tfoot .knop{transition:none}
}


@media (min-width:800px){
  .vergelijk-sectie + .cta-balk .wrap > div:last-child{padding-left:var(--sp-5)}
}