/* NS Beginnersfouten pagina 1.1.0 — post 7492. Beeld-hero, donkere diagnoseband, foutsecties als split met eigen beelden,
   doorschijn-check als app-venster in een lichte band, duo, foutentabel, CTA-band. Geen sidebar, eigen H1, sans-serif koppen. */
html { overflow-x: clip; }
html body.postid-7492, html body.postid-7492 #main, html body.postid-7492 #content.blog-wrapper { background: #fff !important; }
html body.postid-7492 .post-sidebar { display: none !important; }
html body.postid-7492 .row.row-divided > .large-9.col { flex-basis: 100% !important; max-width: 100% !important; border-right: 0 !important; }
html body.postid-7492 .blog-wrapper, html body.postid-7492 .entry-content.single-page { padding-top: 0 !important; }

.ns-bfp { --bf-ink: #1c2422; --bf-zacht: #56615e; --bf-lijn: #e2e7e5; --bf-groen: #23413d; --bf-terra: #b5583a; --bf-vlak: #f1f5f3;
  position: relative; width: 100vw; left: 50%; margin-left: -50vw; background: #fff; padding: 0 24px clamp(40px, 6vw, 80px);
  color: var(--bf-ink); font-family: Poppins, system-ui, sans-serif; font-size: 17px; line-height: 1.65; }
.ns-bfp *, .ns-bfp *::before, .ns-bfp *::after { box-sizing: border-box; }
.ns-bfp h1, .ns-bfp h2, .ns-bfp h3 { font-family: Poppins, system-ui, sans-serif !important; color: var(--bf-ink); text-transform: none !important; letter-spacing: -.015em; }
.ns-bfp h2 { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.9rem) !important; font-weight: 700 !important; line-height: 1.2; margin: 0 0 .7rem !important; }
.ns-bfp h3 { font-size: 1.1rem !important; font-weight: 600 !important; line-height: 1.35; margin: 1.4rem 0 .4rem !important; }
.ns-bfp p { margin: 0 0 1rem; }
.ns-bfp a { color: var(--bf-terra); text-underline-offset: 3px; }
.ns-bfp img { display: block; width: 100%; height: auto; }

/* hero: beeld links, kop rechts */
.ns-bfp-hero { max-width: 1180px; margin: 0 auto; padding: clamp(28px, 4vw, 56px) 0 clamp(36px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4.5vw, 64px); align-items: center; }
.ns-bfp-hero-beeld { margin: 0; border-radius: 14px; overflow: hidden; }
.ns-bfp-hero-beeld img { aspect-ratio: 3 / 2; object-fit: cover; }
.ns-bfp-kicker { font-size: .82rem; font-weight: 600; color: var(--bf-terra); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 .6rem !important; }
.ns-bfp .ns-bfp-hero h1 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); line-height: 1.08; font-weight: 700; letter-spacing: -.03em; margin: 0 0 1rem; }
.ns-bfp-lead { font-size: clamp(1.02rem, 1rem + .25vw, 1.12rem); max-width: 56ch; }
.ns-bfp-lead strong { font-weight: 400; }
.ns-bfp-meta { font-size: .86rem; color: var(--bf-zacht); margin: 0 !important; }

/* diagnoseband */
.ns-bfp-diagnose { position: relative; width: 100vw; left: 50%; margin-left: -50vw; background: var(--bf-groen); color: #dfe9e6; padding: clamp(40px, 5.5vw, 76px) 24px; }
.ns-bfp-diagnose-in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.ns-bfp-diagnose h2 { color: #fff !important; }
.ns-bfp-diagnose ol { list-style: none; counter-reset: bf; margin: 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px clamp(24px, 4vw, 56px); }
.ns-bfp-diagnose li { counter-increment: bf; margin: 0 !important; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.22); }
.ns-bfp-diagnose li::before { content: counter(bf); display: block; color: #f0a07f; font-weight: 700; font-size: 1.5rem; line-height: 1; margin-bottom: 8px; }
.ns-bfp-diagnose li b { display: block; color: #fff; font-weight: 600; font-size: 1.08rem; margin-bottom: 4px; }
.ns-bfp-diagnose li span { display: block; font-size: .95rem; line-height: 1.55; }
.ns-bfp-diagnose a { color: #f6c2ab; }

/* split-secties */
.ns-bfp-split { max-width: 1180px; margin: 0 auto; padding: clamp(48px, 6vw, 88px) 0 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.ns-bfp-om > figure { order: 2; }
.ns-bfp-tekst { max-width: 560px; }
.ns-bfp-tekst h2 + p + h2 { margin-top: 1.8rem !important; }
.ns-bfp-beeld { margin: 0; }
.ns-bfp-beeld img { border-radius: 14px; aspect-ratio: 3 / 2; object-fit: cover; }
.ns-bfp-beeld figcaption { font-size: .86rem; color: var(--bf-zacht); margin-top: 10px; }

/* doorschijnband */
.ns-bfp .ns-bfp-band { position: relative; width: 100vw; max-width: none; left: 50%; margin: clamp(56px, 7vw, 96px) 0 0 -50vw; background: var(--bf-vlak); padding: 0 24px clamp(48px, 6vw, 84px); }
.ns-bfp-split-band { align-items: start; }
.ns-bfp-grafiek { margin: 0; padding-top: clamp(8px, 2vw, 40px); }
.ns-bfp .ns-ds-verdeling { height: 220px; gap: 10px; }
.ns-bfp .ns-ds-verdeling b { background: var(--bf-groen); }
.ns-bfp .ns-ds-verdeling div:nth-child(n+4) b { background: var(--bf-terra); }
.ns-bfp-venster-kop { max-width: 760px; margin: clamp(36px, 5vw, 64px) auto 0; text-align: center; }
.ns-bfp-venster { max-width: 980px; margin: 18px auto 0; background: #fff; border-radius: 14px; box-shadow: 0 24px 60px -30px rgba(28,36,34,.45), 0 0 0 1px rgba(28,36,34,.07); overflow: hidden; }
.ns-bfp-balk { display: flex; align-items: center; gap: 7px; padding: 12px 18px; background: #f7f9f8; border-bottom: 1px solid var(--bf-lijn); font-size: .85rem; }
.ns-bfp-balk i { width: 11px; height: 11px; border-radius: 50%; background: #e07a5f; }
.ns-bfp-balk i:nth-child(2) { background: #e9c46a; } .ns-bfp-balk i:nth-child(3) { background: #81b29a; }
.ns-bfp-balk span { font-weight: 700; margin-left: 8px; }
.ns-bfp-balk em { margin-left: auto; font-style: normal; color: var(--bf-zacht); text-align: right; }
.ns-bfp-venster-in { padding: clamp(18px, 3vw, 36px); }
.ns-bfp-venster-in .ns-ds-tool { margin: 0; }
.ns-bfp-venster-in p:empty { display: none; }
.ns-bfp-split-tabel { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
.ns-bfp-split-tabel h3 { margin-top: 0 !important; }
.ns-bfp .ns-ds-tabel th { border-bottom-color: var(--bf-groen); }
.ns-bfp-slot { max-width: 1180px; margin: clamp(24px, 3vw, 40px) auto 0; padding-top: 22px; border-top: 1px solid var(--bf-lijn); }
.ns-bfp-slot p { max-width: 78ch; margin: 0 !important; }

/* duo */
.ns-bfp-duo { max-width: 1180px; margin: 0 auto; padding: clamp(56px, 7vw, 96px) 0 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); }
.ns-bfp-duo > div + div { border-left: 1px solid var(--bf-lijn); padding-left: clamp(24px, 5vw, 72px); }

/* foutentabel (owner-sectie) */
.ns-bfp-tabelsectie { max-width: 1180px; margin: 0 auto; padding: clamp(56px, 7vw, 96px) 0 0; }
.ns-bfp .ns-owner-section { max-width: none; margin: 0; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); column-gap: clamp(24px, 5vw, 72px); align-items: start; }
.ns-bfp .ns-owner-section > h2 { grid-column: 1 / -1; }
.ns-bfp .ns-owner-table-wrap { grid-column: 1; grid-row: 2 / span 4; overflow-x: auto; }
.ns-bfp .ns-owner-section > h3, .ns-bfp .ns-owner-section > p { grid-column: 2; }
.ns-bfp .ns-owner-section > h3:first-of-type { margin-top: 1rem !important; }
.ns-bfp .ns-owner-section table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .95rem; }
.ns-bfp .ns-owner-section th, .ns-bfp .ns-owner-section td { border: 0; border-bottom: 1px solid var(--bf-lijn); padding: .6rem .7rem .6rem 0; text-align: left; vertical-align: top; background: none; }
.ns-bfp .ns-owner-section th { border-bottom: 2px solid var(--bf-groen); font-weight: 700; }

/* CTA-band */
.ns-bfp-cta { max-width: 1180px; margin: clamp(56px, 7vw, 96px) auto 0; background: #1b302d; color: #dfe9e6; border-radius: 14px; padding: clamp(28px, 4vw, 52px); display: grid; grid-template-columns: minmax(0, 1.3fr) auto; gap: 24px; align-items: center; }
.ns-bfp-cta h2 { color: #fff !important; }
.ns-bfp-cta p { color: #c6d6d2; margin: 0 !important; }
.ns-bfp-knoppen { display: flex; flex-wrap: wrap; gap: 12px; }
.ns-bfp .ns-bfp-knop { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 999px; background: #e9a07f; color: #1e120c; font-weight: 700; text-decoration: none; }
.ns-bfp .ns-bfp-knop-licht { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); }
.ns-bfp .ns-bfp-knop:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (max-width: 849px) {
  .ns-bfp-hero, .ns-bfp-split, .ns-bfp-split-tabel, .ns-bfp-duo, .ns-bfp-cta, .ns-bfp-diagnose-in, .ns-bfp .ns-owner-section { grid-template-columns: minmax(0, 1fr); }
  .ns-bfp-om > figure { order: 0; }
  .ns-bfp .ns-owner-table-wrap, .ns-bfp .ns-owner-section > h3, .ns-bfp .ns-owner-section > p { grid-column: 1; grid-row: auto; }
  .ns-bfp-duo > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--bf-lijn); padding-top: 28px; }
  .ns-bfp-balk em { display: none; }
}
@media (max-width: 560px) {
  .ns-bfp, .ns-bfp-diagnose, .ns-bfp .ns-bfp-band { padding-left: 24px; padding-right: 24px; }
  .ns-bfp-diagnose ol { grid-template-columns: minmax(0, 1fr); }
  .ns-bfp-venster-in { padding: 16px; }
  .ns-bfp .ns-ds-verdeling { height: 170px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  body.postid-7492 *, body.postid-7492 *::before, body.postid-7492 *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}