/* Prijstabel (/prijzen/). Stond eerst als <style>-blok in de paginainhoud, maar
   WordPress verwijdert dat bij opslaan voor gebruikers zonder unfiltered_html --
   dan staat de CSS als platte tekst op de pagina. Als stylesheetbestand in het
   thema is het niet alleen veiliger, het wordt ook gecachet en het scheelt 8 KB
   in de database. */
.pp-lead{font-size:1.1rem;line-height:1.6;color:var(--body);max-width:62ch;margin:0 0 2rem}
.pp-h2{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.05rem);color:var(--ink);margin:3.25rem 0 .5rem;letter-spacing:-.01em;line-height:1.2}
.pp-sub{color:var(--body);font-size:1rem;line-height:1.65;max-width:64ch;margin:.4rem 0 1.75rem}
.pp-ic{display:inline-block;vertical-align:-.18em;flex:0 0 auto}
.pp-bouw{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem;margin:2rem 0 3rem;padding:0;list-style:none}
.pp-bouw li{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:.95rem .8rem;text-align:center}
.pp-bouw .pp-ic{color:var(--green);margin-bottom:.45rem}
.pp-bouw b{display:block;font-size:.9rem;color:var(--ink);line-height:1.3;font-weight:700}
.pp-bouw span{display:block;font-size:.79rem;color:var(--body);line-height:1.45;margin-top:.25rem}
.pp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin:0 0 1.25rem;align-items:start}
.pp-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.4rem 1.2rem 1.25rem;display:flex;flex-direction:column;position:relative}
.pp-card--pop{border:2px solid var(--green);box-shadow:var(--shadow-lg);margin-top:-.5rem;padding-top:1.9rem}
.pp-card__badge{position:absolute;top:-.85rem;left:50%;transform:translateX(-50%);background:var(--green);color:#fff;font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:.32rem .75rem;border-radius:var(--r-pill);white-space:nowrap}
.pp-card__naam{font-family:var(--font-display);font-size:1.35rem;color:var(--ink);margin:0 0 .15rem;line-height:1.2}
.pp-card__voor{font-size:.87rem;color:var(--body);line-height:1.45;margin:0 0 1rem;min-height:2.5em}
.pp-card__prijs{font-family:var(--font-display);font-size:2.6rem;color:var(--ink);line-height:1;letter-spacing:-.03em;font-weight:600}
.pp-card__per{font-size:.82rem;color:var(--muted);margin:.4rem 0 0}
.pp-card__basis{font-size:.87rem;color:var(--body);margin:.9rem 0 0;padding-top:.8rem;border-top:1px solid var(--line-soft);line-height:1.55}
.pp-card__basis b{color:var(--ink);font-weight:600}
.pp-card__lijst{list-style:none;margin:1rem 0 0;padding:0;font-size:.89rem;color:var(--body)}
.pp-card__lijst li{display:flex;gap:.5rem;align-items:flex-start;padding:.3rem 0;line-height:1.4}
.pp-card__lijst .pp-ic{color:var(--green);margin-top:.15rem;width:16px;height:16px}
.pp-card__cta{margin-top:auto;padding-top:1.1rem}
.pp-card__cta a{display:inline-block;font-size:.85rem;font-weight:600;color:var(--green);text-decoration:none}
.pp-card__cta a:hover{text-decoration:underline}
.pp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 2rem;border:1px solid var(--line);border-radius:var(--r-md);max-width:100%}
.pp-tabel{width:100%;border-collapse:collapse;font-size:.9rem;min-width:0;table-layout:auto;background:var(--white)}
.pp-tabel caption{text-align:left;padding:.8rem 1rem;font-size:.83rem;color:var(--muted);background:var(--surface);border-bottom:1px solid var(--line)}
.pp-tabel th,.pp-tabel td{padding:.58rem .55rem;border-bottom:1px solid var(--line-soft);text-align:center;vertical-align:middle}
.pp-tabel thead th{background:var(--surface);color:var(--ink);font-weight:600;font-size:.82rem;line-height:1.25}
.pp-tabel thead th:first-child{text-align:left}
.pp-tabel tbody th{text-align:left;font-weight:500;color:var(--body);font-size:.88rem;line-height:1.35;padding-right:.9rem}
.pp-tabel tbody th .pp-ic{color:var(--green);margin-right:.4rem}
.pp-tabel tbody tr:hover{background:var(--bg-warm)}
.pp-tabel .pp-groep th{background:var(--card);color:var(--ink);font-weight:700;font-size:.76rem;text-transform:uppercase;letter-spacing:.09em;text-align:left;padding:.6rem .7rem;border-top:1px solid var(--line)}
.pp-tabel .pp-pop-kol{background:#f3f7f4}
.pp-tabel .pp-prijs{font-weight:700;color:var(--ink);font-size:.94rem;white-space:nowrap}
.pp-tabel .pp-ja{color:var(--green);display:inline-flex;align-items:center;justify-content:center}
/* Het vinkje en het streepje waren lege spans met alleen een kleur: 47 "ja"-cellen en
 * 20 "nee"-cellen hadden een breedte van 0 px. Op de vergelijkingstabel van /prijzen/
 * stond dus een rij lege cellen, en dat leest als ontbrekende inhoud in plaats van als
 * "ja". Inhoud via ::before, niet via het tekstkanaal: dan blijft de cel leeg voor een
 * schermlezer en is het teken puur decoratief -- wat het is. De betekenis staat in de
 * cel, niet in het plaatje. */
.pp-tabel .pp-ja::before{content:"\2713";font-weight:700;font-size:1rem;line-height:1}
.pp-tabel .pp-nee::before{content:"\2013";font-weight:600;font-size:1rem;line-height:1}
.pp-tabel tfoot td{padding:.7rem 1rem;font-size:.8rem;color:var(--muted);background:var(--surface);text-align:left}
.pp-tok{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin:1.25rem 0 1.5rem}
.pp-tok__box{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:1rem 1.1rem}
.pp-tok__box h4{margin:0 0 .25rem;font-family:var(--font-display);font-size:1rem;color:var(--ink)}
.pp-tok__box p{margin:0;font-size:.87rem;color:var(--body);line-height:1.6}
.pp-klein{font-size:.87rem;line-height:1.75;color:var(--body);max-width:80ch}
.pp-klein h3{font-size:.92rem;color:var(--ink);margin:1.5rem 0 .4rem;font-weight:600}
.pp-klein ul{margin:.3rem 0 .9rem;padding-left:1.1rem}
.pp-klein li{margin:.28rem 0}
.pp-h3{font-family:var(--font-display);font-size:1.15rem;color:var(--ink);margin:2rem 0 .4rem;font-weight:600}
.pp-route__kop{margin:1.5rem 0 .5rem;padding-left:.9rem;border-left:3px solid var(--terra)}
.pp-route__kop p{margin:.25rem 0 0;font-size:.92rem;color:var(--body);line-height:1.55;max-width:66ch}
.pp-route__tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--terra)}
.pp-nib-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin:1.25rem 0 2rem}
.pp-nib{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:1.1rem 1.2rem}
.pp-nib h4{display:flex;align-items:center;gap:.5rem;margin:0 0 .7rem;font-size:.95rem;color:var(--ink);font-weight:700}
.pp-nib h4 .pp-ic{color:var(--terra)}
.pp-nib ul{list-style:none;margin:0;padding:0}
.pp-nib li{display:flex;gap:.55rem;align-items:flex-start;padding:.32rem 0;font-size:.88rem;color:var(--body);line-height:1.45}
.pp-nib li .pp-ic{color:var(--muted);margin-top:.18rem;opacity:.55}
.pp-slot{background:var(--beige);border-radius:var(--r-md);padding:1.6rem 1.7rem;margin:3rem 0 0;max-width:70ch}
.pp-slot h3{font-family:var(--font-display);font-size:1.3rem;color:var(--ink);margin:0 0 .5rem}
.pp-slot p{margin:0 0 1.1rem;font-size:.94rem;color:var(--body);line-height:1.65}
.pp-hr{border:none;border-top:1px solid var(--line);margin:3rem 0 0}
@media (max-width:1000px){.pp-cards{grid-template-columns:repeat(2,1fr)}.pp-bouw{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){
.pp-cards{grid-template-columns:1fr;gap:1.2rem}
.pp-bouw{grid-template-columns:repeat(2,1fr)}
.pp-tok{grid-template-columns:1fr}
.pp-nib-grid{grid-template-columns:1fr}
/* Vergelijkingstabel wordt kaart per pakket; de tokenlijst blijft een scrollende
   tabel (30 rijen als kaarten leest niemand). Vandaar .pp-tabel--kaart. */
.pp-scroll--kaart{overflow-x:visible;border:none;border-radius:0}
.pp-tabel--kaart{display:block;background:transparent}
.pp-tabel--kaart caption{display:block;padding:.5rem 0;background:transparent;border:none}
.pp-tabel--kaart thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pp-tabel--kaart tbody{display:block}
.pp-tabel--kaart tbody tr{display:block;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:.8rem;padding:.3rem .9rem}
.pp-tabel--kaart tbody th{display:block;background:var(--card-2);margin:0 -.9rem .35rem;padding:.65rem .9rem;border-radius:var(--r-md) var(--r-md) 0 0;border-bottom:1px solid var(--line);white-space:normal}
.pp-tabel--kaart tbody td{display:flex;justify-content:space-between;gap:1rem;text-align:right;border-bottom:1px solid var(--line-soft);padding:.42rem 0;white-space:normal}
.pp-tabel--kaart tbody td:last-child{border-bottom:none}
.pp-tabel--kaart tbody td::before{content:attr(data-label);color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;text-align:left}
.pp-tabel--kaart .pp-groep{display:block;background:transparent;border:none;padding:.3rem 0}
.pp-tabel--kaart .pp-groep th{background:transparent;margin:0;padding:.5rem 0;border:none;color:var(--muted);font-size:.72rem}
.pp-tabel--kaart tfoot{display:block}
.pp-tabel--kaart tfoot td{display:block}
/* De tokenlijst blijft scrollen; zeg dat erbij, anders lijkt hij afgekapt. */
.pp-scroll:not(.pp-scroll--kaart)::after{content:"\2193  scroll voor meer modellen";display:block;padding:.45rem .7rem;font-size:.74rem;color:var(--muted);background:var(--surface);border-top:1px solid var(--line)}
}