/* ── Diensten: overzicht ───────────────────────────────────────── */
.dienstenHero{padding:64px 0 40px}
.dienstenIntro{max-width:820px;margin-top:16px;font-size:18px}
.dienstenDisclaimer{max-width:820px;margin-top:22px;padding:18px 22px;border-radius:var(--radius-card);background:var(--background-alt-1);font-size:15px}

.dienstenLijst{padding-top:24px}
.dienstenCategorie{padding-top:48px}
.dienstenCategorieHead h2{font-size:26px}
.dienstenCategorieHead p{max-width:760px;margin-top:8px;font-size:15px;color:var(--font-color-light)}
.dienstenGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:22px}
.dienstKaart{display:flex;flex-direction:column;padding:22px 24px;border:1px solid var(--border-color-1);border-radius:var(--radius-card);background:#fff;transition:var(--transition)}
.dienstKaart:hover{border-color:var(--color-indigo);box-shadow:var(--shadow-card)}
.dienstKaart h3{font-size:17px;margin-bottom:8px}
.dienstKaart h3 a{color:var(--font-color-dark)}
.dienstKaart h3 a:hover{color:var(--color-indigo)}
.dienstKaart p{font-size:14.5px;line-height:1.6;color:var(--font-color-light)}
.dienstKaartCount{margin-top:auto;padding-top:14px;font-size:13px;font-weight:700;color:var(--color-indigo)}
.dienstenBody{padding-top:64px}

/* ── Diensten: één dienst ──────────────────────────────────────── */
.dienstHero{padding:56px 0 36px}
.dienstIntro{max-width:820px;margin-top:14px;font-size:18px}
.dienstDisclaimer{max-width:820px;margin-top:22px;padding:18px 22px;border-radius:var(--radius-card);border-left:3px solid var(--color-indigo);background:var(--background-alt-1);font-size:15px}

.dienstBureaus{padding-top:16px}
.dienstBureauGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.dienstBureauCard{display:flex;flex-direction:column;padding:24px;border:1px solid var(--border-color-1);border-radius:var(--radius-card);background:#fff;transition:var(--transition)}
.dienstBureauCard:hover{border-color:var(--color-indigo);box-shadow:var(--shadow-card)}
.dienstBureauHead{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px}
.dienstBureauHead h2{font-size:19px}
.dienstBureauHead h2 a{color:var(--font-color-dark)}
.dienstBureauHead h2 a:hover{color:var(--color-indigo)}
.dienstBureauMeta{font-size:14px;color:var(--font-color-light)}
.dienstBureauBestFor{margin-top:10px;font-size:14.5px}
.dienstBureauPartial{margin-top:10px;font-size:13px;font-weight:600;color:var(--font-color-light)}
.dienstBureauLink{margin-top:auto;padding-top:16px;font-size:15px;font-weight:700;color:var(--color-indigo)}
.dienstFooterNote{max-width:820px;margin-top:40px;font-size:14.5px;color:var(--font-color-light)}

@media (max-width:768px){
    .dienstenHero,.dienstHero{padding-top:48px}
    .dienstenCategorie{padding-top:36px}
}

/* ── Documentatielabels op de dienstpagina ─────────────────────── */
.dienstBureauSignalen{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.dienstBureauHead{display:flex;flex-direction:column;align-items:flex-start;gap:8px}

/* Doorverwijzing naar het kennisbankartikel over deze dienst. */
.dienstKbLink{margin-top:16px;font-size:15px;font-weight:700}
.dienstKbLink a{display:inline-flex;align-items:center;gap:8px;color:var(--color-indigo)}
.dienstKbLink a::after{content:'→';font-weight:400}
.dienstKbLink a:hover{text-decoration:underline}