/* Strik · statische content-pagina's (/hoe-werkt-het, /nieuwsbrief, /privacy, /voorwaarden)
   Vereist tokens.css. Shell: pk-nav > pk-kruimel > pk-kop > pk-body > pk-voet. */

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--canvas);color:var(--inkt);line-height:1.55;
     -webkit-font-smoothing:antialiased}
::selection{background:var(--kraft);color:var(--inkt)}
a{color:var(--lint-donker);text-decoration:none}
a:hover{color:var(--lint)}
img{display:block}

.pk-in{max-width:880px;margin:0 auto;padding:0 var(--s6)}

/* --- kop-navigatie: enige rode knop op de pagina --- */
.pk-nav{position:sticky;top:0;z-index:20;background:rgba(250,248,244,.92);
        backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
        border-bottom:1px solid var(--rand)}
.pk-nav .pk-in{display:flex;align-items:center;justify-content:space-between;
               gap:var(--s4);padding-top:var(--s3);padding-bottom:var(--s3)}
.pk-nav img{height:26px;width:auto}
.pk-cta{display:inline-flex;align-items:center;min-height:44px;padding:11px 20px;
        border-radius:var(--r-pill);background:var(--lint);color:#fff;font-size:15px;
        font-weight:700;box-shadow:0 8px 18px rgba(196,42,46,.22)}
.pk-cta:hover{background:var(--lint-donker);color:#fff}

/* --- kruimelpad --- */
.pk-kruimel{padding-top:var(--s4);font-size:13px;color:var(--grijs);
            display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pk-kruimel a{color:var(--grijs)}
.pk-kruimel a:hover{color:var(--inkt)}
.pk-kruimel span[aria-hidden]{color:var(--rand-sterk)}
.pk-kruimel .nu{color:var(--inkt-zacht);font-weight:600}

/* --- paginakop --- */
.pk-kop{padding:var(--s3) 0 var(--s8);border-bottom:1px solid var(--rand);
        margin-bottom:var(--s8)}
.pk-eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
            color:var(--lint-donker);margin-bottom:var(--s3)}
.pk-kop h1{font-family:var(--font-titel);font-size:clamp(30px,5vw,42px);font-weight:600;
           line-height:1.08;letter-spacing:-.015em;max-width:20ch;text-wrap:balance;
           margin-bottom:var(--s4)}
.pk-lede{font-size:19px;line-height:1.5;font-weight:500;color:var(--inkt-zacht);max-width:46ch}
.pk-meta{font-size:13.5px;color:var(--grijs)}

/* --- proza --- */
.pk-body{padding-bottom:var(--s12)}
.pk-body h2{font-family:var(--font-titel);font-size:26px;font-weight:600;
            letter-spacing:-.01em;line-height:1.2;margin:var(--s8) 0 var(--s4)}
.pk-body h3{font-size:17px;font-weight:700;margin:var(--s6) 0 var(--s2)}
.pk-body p,.pk-body li{font-size:16.5px;line-height:1.7;color:var(--inkt-zacht);max-width:62ch}
.pk-body p{margin-bottom:var(--s4)}
.pk-body ul,.pk-body ol{margin:0 0 var(--s6) 20px;display:flex;flex-direction:column;gap:5px}
.pk-body a:not(.pk-cta){text-decoration:underline}
.pk-body>:first-child{margin-top:0}

/* --- stappen (1-2-3) --- */
.pk-stappen{display:flex;flex-direction:column;gap:22px;max-width:640px;margin-bottom:var(--s8)}
.pk-stap{display:flex;gap:18px;align-items:flex-start}
.pk-stap b{flex:none;width:44px;height:44px;border-radius:var(--r-pill);
           border:1.5px solid var(--lint);color:var(--lint);font-family:var(--font-titel);
           font-size:20px;font-weight:600;display:flex;align-items:center;justify-content:center}
.pk-stap h3{margin:3px 0 3px}
.pk-stap p{font-size:15.5px;line-height:1.6;margin:0}

/* --- feitenstrip (3 kolommen) --- */
.pk-strip{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--rand-sterk);
          border-radius:var(--r-md);overflow:hidden;background:var(--papier);
          max-width:640px;margin-bottom:var(--s8)}
.pk-strip div{padding:18px 16px;text-align:center}
.pk-strip div+div{border-left:1px solid var(--rand)}
.pk-strip b{display:block;font-size:14px;line-height:1.3;margin-bottom:4px}
.pk-strip span{font-size:12px;color:var(--grijs);line-height:1.4}

/* --- FAQ --- */
.pk-faq{display:flex;flex-direction:column;gap:var(--s3);max-width:640px;margin-bottom:var(--s8)}
.pk-faq details{border:1px solid var(--rand);border-radius:var(--r-md);
                background:var(--papier);padding:0 20px}
.pk-faq details[open]{border-color:var(--rand-sterk)}
.pk-faq summary{list-style:none;cursor:pointer;padding:17px 0;min-height:44px;font-size:16px;
                font-weight:700;display:flex;align-items:center;justify-content:space-between;
                gap:var(--s4)}
.pk-faq summary::-webkit-details-marker{display:none}
.pk-faq summary::after{content:"+";flex:none;color:var(--lint);font-size:20px;line-height:1}
.pk-faq details[open] summary::after{content:"–"}
.pk-faq details p{padding-bottom:20px;font-size:15.5px;margin:0;max-width:60ch}

/* --- CTA-rust (kraft) --- */
.pk-rust{background:var(--kraft);border:1px solid var(--rand);border-radius:var(--r-lg);
         padding:34px 28px;text-align:center;max-width:640px}
.pk-rust p{font-family:var(--font-titel);font-size:21px;font-weight:600;line-height:1.3;
           color:var(--inkt);max-width:26ch;margin:0 auto var(--s6)}
.pk-rust .pk-cta{min-height:52px;padding:16px 32px;font-size:16px}

/* --- formulier (nieuwsbrief): knop is DONKER, geen tweede rood --- */
.pk-form{background:var(--papier);border:1px solid var(--rand-sterk);border-radius:var(--r-lg);
         padding:28px 30px;max-width:640px;box-shadow:0 16px 40px rgba(22,20,18,.07)}
.pk-form label{display:block;font-size:14px;font-weight:700;margin-bottom:var(--s2)}
.pk-form .rij{display:flex;gap:10px;flex-wrap:wrap}
.pk-form input{flex:1;min-width:240px;min-height:52px;padding:14px 16px;
               border:1px solid var(--rand-sterk);border-radius:var(--r-md);
               background:var(--canvas);font-family:inherit;font-size:16px;color:var(--inkt)}
.pk-form input::placeholder{color:var(--grijs)}
.pk-form button{flex:none;min-height:52px;padding:14px 26px;border:0;border-radius:var(--r-md);
                background:var(--inkt);color:#fff;font-family:inherit;font-size:16px;
                font-weight:700;cursor:pointer}
.pk-form button:hover{background:#000}
.pk-form .klein{font-size:13px;line-height:1.55;color:var(--grijs);margin:var(--s3) 0 0;max-width:56ch}
.pk-form .klein a{color:var(--lint-donker);text-decoration:underline}

/* --- succes (enige plek met groen) --- */
.pk-succes{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;
           color:var(--groen);margin-top:var(--s4)}
.pk-succes span{flex:none;width:26px;height:26px;border-radius:var(--r-pill);
                background:var(--groen);color:#fff;font-size:15px;display:flex;
                align-items:center;justify-content:center}

/* --- juridisch: kader, tabel, inhoudsopgave --- */
.pk-kader{background:var(--kraft);border:1px solid var(--rand);border-radius:var(--r-md);
          padding:18px 22px;max-width:62ch;margin-bottom:var(--s6)}
.pk-kader b{display:block;font-size:13.5px;margin-bottom:5px}
.pk-kader p{font-size:15px;line-height:1.6;margin:0}

.pk-tabel{border:1px solid var(--rand-sterk);border-radius:var(--r-md);overflow:hidden;
          background:var(--papier);max-width:62ch;margin-bottom:var(--s6)}
.pk-tabel div{display:flex;justify-content:space-between;gap:var(--s4);padding:13px 18px;
              font-size:15px;color:var(--inkt-zacht)}
.pk-tabel div+div{border-top:1px solid var(--rand)}
.pk-tabel .kop{background:var(--canvas);font-size:12px;font-weight:700;letter-spacing:.1em;
               text-transform:uppercase;color:var(--grijs)}
.pk-tabel b{color:var(--inkt);font-weight:600}

.pk-kolommen{display:flex;gap:40px;align-items:flex-start}
.pk-kolommen>div{flex:1;min-width:0}
.pk-inhoud{flex:none;width:210px;position:sticky;top:76px;border-left:2px solid var(--rand);
           padding-left:var(--s4)}
.pk-inhoud b{display:block;font-size:11px;font-weight:700;letter-spacing:.13em;
             text-transform:uppercase;color:var(--grijs);margin-bottom:var(--s3)}
.pk-inhoud nav{display:flex;flex-direction:column;gap:9px}
.pk-inhoud a{font-size:13.5px;line-height:1.4;color:var(--inkt-zacht)}
.pk-inhoud a:hover,.pk-inhoud a[aria-current]{color:var(--inkt);font-weight:600}

/* --- voet: donker, identiek aan pSEO --- */
.pk-voet{background:var(--inkt);color:var(--rand-sterk);margin-top:var(--s12)}
.pk-voet .pk-in{padding-top:var(--s8);padding-bottom:var(--s8)}
.pk-voet img{height:22px;width:auto;margin-bottom:var(--s4)}
.pk-voet nav{display:flex;flex-wrap:wrap;gap:10px 22px;margin-bottom:var(--s4)}
.pk-voet a{color:#E7DFD3;font-size:14px}
.pk-voet a:hover{color:#fff;text-decoration:underline}
.pk-voet p{font-size:12.5px;color:#9E948A;line-height:1.6;max-width:70ch}

@media (max-width:720px){
  .pk-in{padding:0 var(--s4)}
  .pk-kop{padding-bottom:var(--s6);margin-bottom:var(--s6)}
  .pk-lede{font-size:16.5px}
  .pk-strip{grid-template-columns:1fr}
  .pk-strip div+div{border-left:0;border-top:1px solid var(--rand)}
  .pk-form{padding:20px}
  .pk-form .rij{flex-direction:column}
  .pk-form input,.pk-form button{width:100%;min-width:0}
  .pk-kolommen{flex-direction:column;gap:var(--s6)}
  .pk-inhoud{position:static;width:100%}
  .pk-rust{padding:26px 20px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{.pk-nav,.pk-cta,.pk-rust,.pk-inhoud{display:none}}