/* NS Fotoproef 1.0.0 — post 27297. Kleuren via --zw-* van de pagina-wrapper. */
.ns-fp { --zw-ink: #221b2e; --zw-zacht: #5f5769; --zw-lijn: #e9e5f0; --zw-vlak: #f7f5fb; --zw-accent: #5b3a86; --zw-donker: #241838; --zw-knop: #c9b3ec; --zw-knop-ink: #1d1236; font-family: Poppins, system-ui, sans-serif; position: relative; width: 100vw; left: 50%; margin-left: -50vw; padding-inline: max(24px, calc((100vw - 1160px) / 2)); }
.ns-fp h2, .ns-fp h3 { font-family: Poppins, system-ui, sans-serif !important; }

/* Hero: donkere band over de volle breedte van de wrapper */
.ns-fp-hero { background: var(--zw-donker); color: #ece8f6; margin-inline: calc(-1 * max(24px, calc((100vw - 1160px) / 2))); padding: clamp(40px, 5vw, 72px) max(24px, calc((100vw - 1160px) / 2)) clamp(44px, 5vw, 80px); }
.ns-fp-hero .ns-zw-split { padding: 0; max-width: none; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
.ns-fp-hero .ns-zw-tekst { max-width: 540px; }
.ns-fp-kruimel { font-size: .85rem; margin: 0 0 14px; color: #b9aed3; }
.ns-fp-kruimel a { color: #d9cdf2; text-decoration: none; }
.ns-fp-kruimel a:hover { text-decoration: underline; }
.ns-fp-hero h1 { color: #fff !important; font-size: clamp(1.7rem, 1.05rem + 1.9vw, 2.6rem) !important; line-height: 1.16; margin: 0 0 16px !important; }
.ns-fp-lead { font-size: clamp(1rem, .97rem + .2vw, 1.12rem); line-height: 1.6; color: #d6d0e6; margin: 0 0 22px; }
.ns-fp-knop { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--zw-knop); color: var(--zw-knop-ink) !important; font-weight: 700; text-decoration: none; }
.ns-fp-knop:hover { filter: brightness(1.05); }
.ns-fp-knop:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.ns-fp-meta { font-size: .84rem; color: #a99fc6; margin: 14px 0 0; }

.ns-fp-app { margin: 0; }
.ns-fp-appbalk { display: flex; align-items: center; gap: 6px; background: #3a2c58; border-radius: 12px 12px 0 0; padding: 10px 14px; }
.ns-fp-appbalk span { width: 10px; height: 10px; border-radius: 50%; background: #6b5a93; display: inline-block; }
.ns-fp-appbalk em { font-style: normal; font-size: .8rem; color: #cfc4ea; margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ns-fp-schuif { position: relative; background: #fff; border-radius: 0 0 12px 12px; overflow: hidden; line-height: 0; }
.ns-fp-schuif img { width: 100%; height: auto; display: block; }
.ns-fp-schuif .ns-fp-na { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--fp-x, 55%)); }
.ns-fp-schuif input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ns-fp-schuif input[type="range"]:focus-visible { opacity: 1; background: linear-gradient(to right, transparent 49.8%, #fff 49.8%, #fff 50.2%, transparent 50.2%); outline: 3px solid var(--zw-knop); outline-offset: -3px; }
.ns-fp-lijn { position: absolute; top: 0; bottom: 0; left: var(--fp-x, 55%); width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(36,24,56,.35); pointer-events: none; }
.ns-fp-label { position: absolute; bottom: 12px; font-size: .78rem; font-weight: 600; letter-spacing: .02em; background: rgba(36,24,56,.82); color: #fff; padding: 5px 10px; border-radius: 999px; line-height: 1.2; pointer-events: none; }
.ns-fp-label-voor { left: 12px; }
.ns-fp-label-na { right: 12px; background: var(--zw-accent); }
.ns-fp-app figcaption { font-size: .84rem; color: #b3a9cd; padding: 12px 2px 0; line-height: 1.5; }

/* Kerncijfers */
.ns-fp-kern { max-width: 1160px; margin: 0 auto; padding: clamp(36px, 4.5vw, 64px) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); }
.ns-fp-kern div { border-top: 2px solid var(--zw-accent); padding-top: 12px; }
.ns-fp-kern strong { display: block; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem); color: var(--zw-ink); line-height: 1.1; }
.ns-fp-kern span { display: block; font-size: .9rem; color: var(--zw-zacht); margin-top: 6px; line-height: 1.5; }

/* Proeftabel */
.ns-fp-tabel-wrap { overflow-x: auto; }
.ns-fp-tabel { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ns-fp-tabel th, .ns-fp-tabel td { text-align: left; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--zw-lijn); vertical-align: top; line-height: 1.45; }
.ns-fp-tabel thead th { color: var(--zw-zacht); font-weight: 600; font-size: .84rem; }
.ns-fp-tabel td strong { color: var(--zw-ink); }
.ns-fp-tabel .ns-fp-omhoog { color: var(--zw-accent); font-weight: 700; white-space: nowrap; }

/* Splits binnen secties */
.ns-fp .ns-zw-split figure { margin: 0; }
.ns-fp .ns-zw-split img { border-radius: 12px; display: block; width: 100%; height: auto; }
.ns-fp figcaption { font-size: .84rem; color: var(--zw-zacht); padding-top: 10px; line-height: 1.5; }
.ns-fp-smal { max-width: 700px; margin: 0 auto; }
.ns-fp .ns-zw-smal { padding-top: clamp(44px, 5.5vw, 76px); }
.ns-fp-h2tussen { max-width: 1160px; margin: clamp(44px, 5.5vw, 76px) auto 0; }

/* Stappenrij hergebruikt ns-zw-stappen; CTA ns-zw-cta. FAQ via details. */
.ns-fp-faq { max-width: 760px; margin: clamp(44px, 5.5vw, 76px) auto 0; }
.ns-fp-faq details { border-bottom: 1px solid var(--zw-lijn); }
.ns-fp-faq details:first-of-type { border-top: 1px solid var(--zw-lijn); }
.ns-fp-faq summary { cursor: pointer; padding: 16px 0; font-weight: 600; color: var(--zw-ink); list-style: none; position: relative; padding-right: 34px; }
.ns-fp-faq summary::-webkit-details-marker { display: none; }
.ns-fp-faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--zw-accent); font-weight: 400; }
.ns-fp-faq details[open] summary::after { content: "−"; }
.ns-fp-faq details p { margin: 0 0 16px !important; color: var(--zw-zacht); line-height: 1.6; }

/* Methodenoot */
.ns-fp-methode { max-width: 760px; margin: clamp(44px, 5.5vw, 76px) auto 0; background: var(--zw-vlak); border-radius: 12px; padding: clamp(20px, 3vw, 32px); font-size: .88rem; color: var(--zw-zacht); line-height: 1.6; }
.ns-fp-methode h2 { font-size: 1.05rem !important; color: var(--zw-ink); margin: 0 0 10px !important; }
.ns-fp-methode p { margin: 0 0 10px !important; }
.ns-fp-methode a { color: var(--zw-accent); }

@media (max-width: 849px) {
  .ns-fp-hero .ns-zw-split { grid-template-columns: minmax(0, 1fr); }
  .ns-fp-hero .ns-zw-tekst { max-width: none; }
  .ns-fp-kern { grid-template-columns: minmax(0, 1fr); }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Contrast op de donkere band: theme-linkkleuren en figcaption leesbaar forceren. */
.ns-fp .ns-zw-cta p a, .ns-fp-hero .ns-fp-tekst a:not(.ns-fp-knop) { color: #dccdf5 !important; }
.ns-fp .ns-fp-app figcaption { color: #d3cbe8 !important; }
.ns-fp .ns-fp-knop, .ns-fp .ns-zw-knop { color: var(--zw-knop-ink) !important; }
.ns-fp .ns-fp-knop, .ns-fp .ns-zw-knop { background: var(--zw-knop) !important; border: 0 !important; }