/* NS Paarsmenger 1.0.0 — post 13114. Anker: violet uit het onderwerp, neutralen licht naar violet getint, actie in het sitenavy. */
html { overflow-x: clip; }
html body.postid-13114, html body.postid-13114 #main, html body.postid-13114 #content.blog-wrapper { background: #fff !important; }
html body.postid-13114 .blog-wrapper, html body.postid-13114 .entry-content.single-page { padding-top: 0 !important; }
.ns-pa {
  --pa-ink: #1d1a24; --pa-zacht: #575166; --pa-lijn: #e7e3ee; --pa-vlak: #f7f5fa;
  --pa-violet: #5b3a86; --pa-violet-d: #432a66; --pa-navy: #14213d; --pa-wit: #fff;
  --pa-r: 10px; --pa-ease: cubic-bezier(.2, .8, .2, 1);
  color: var(--pa-ink); font-family: Poppins, system-ui, sans-serif; font-size: 17px; line-height: 1.65;
  position: relative; width: 100vw; left: 50%; margin-left: -50vw; background: #fff; padding: 0 20px clamp(40px, 6vw, 80px);
}
.ns-pa .ns-pa-band { width: calc(100% + 40px); left: auto; margin-left: -20px; margin-right: -20px; }
.ns-pa *, .ns-pa *::before, .ns-pa *::after { box-sizing: border-box; }
.ns-pa h1, .ns-pa h2, .ns-pa h3 { font-family: Poppins, system-ui, sans-serif !important; color: var(--pa-ink); letter-spacing: -.015em; text-transform: none !important; }
.ns-pa h2 { font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2rem) !important; line-height: 1.2; font-weight: 700 !important; margin: 0 0 .75rem !important; }
.ns-pa h3 { font-size: 1.12rem; line-height: 1.35; font-weight: 600; margin: 1.6rem 0 .4rem; }
.ns-pa p { margin: 0 0 1rem; }
.ns-pa a { color: var(--pa-violet); text-underline-offset: 3px; }
.ns-pa a:hover { color: var(--pa-violet-d); }
.ns-pa legend, .ns-pa label { text-transform: none !important; letter-spacing: 0 !important; }

/* Volle breedte banden */
.ns-pa-band { position: relative; width: 100vw; left: 50%; margin-left: -50vw; padding: clamp(40px, 6vw, 88px) 20px; background: var(--pa-wit); }
.ns-pa-band.is-vlak { background: var(--pa-vlak); }
.ns-pa-in { max-width: 1160px; margin: 0 auto; }
.ns-pa-tekst { max-width: 700px; }
.ns-pa-sectie { max-width: 700px; margin: 0 auto; padding: clamp(28px, 3.5vw, 48px) 0 0; }

/* Hero */
.ns-pm-hero { padding-top: clamp(28px, 4vw, 56px); padding-bottom: 24px; }
.ns-pm-hero .ns-pa-kicker { font-size: .82rem; font-weight: 600; color: var(--pa-violet); letter-spacing: .06em !important; text-transform: uppercase !important; margin: 0 0 .6rem; }
.ns-pm-hero h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.2rem); line-height: 1.08; font-weight: 700; letter-spacing: -.03em; margin: 0 0 1rem; max-width: 22ch; }
.ns-pm-hero .ns-pa-lead { font-size: clamp(1.05rem, 1rem + .3vw, 1.22rem); max-width: 62ch; color: var(--pa-ink); }
.ns-pm-hero .ns-pa-meta { font-size: .86rem; color: var(--pa-zacht); margin: 0; }

/* De paarsmenger */
.ns-pm-band { padding-top: 8px; }
.ns-pm { max-width: 1160px; margin: 0 auto; }
.ns-pm-tabs { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; background: var(--pa-vlak); border-radius: 999px; padding: 4px; margin-bottom: 20px; --pm-tab: 0; }
.ns-pm-tabs::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--pa-navy); transform: translateX(calc(var(--pm-tab) * 100%)); transition: transform 260ms var(--pa-ease); }
html body .ns-pm-tabs [role="tab"] { position: relative; z-index: 1; background: transparent !important; color: var(--pa-ink) !important; border: 0 !important; border-radius: 999px !important; margin: 0 !important; padding: 9px 18px !important; font: 600 .92rem/1.2 Poppins, system-ui, sans-serif !important; min-height: 0 !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; transition: color 200ms; }
html body .ns-pm-tabs [role="tab"][aria-selected="true"] { color: #fff !important; }
.ns-pm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.ns-pm-set { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.ns-pm-set legend { font-weight: 600; font-size: .95rem; padding: 0; margin: 0 0 8px; color: var(--pa-ink); border: 0 !important; width: auto; }
.ns-pm-keuzes { display: flex; flex-wrap: wrap; gap: 8px; }
.ns-pm-keuze { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border-radius: 999px; background: var(--pa-vlak); cursor: pointer; font-size: .9rem; font-weight: 500; margin: 0 !important; line-height: 1.2; transition: background-color 160ms; }
.ns-pm-keuze:hover { background: #ece8f2; }
.ns-pm-keuze input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ns-pm-keuze:has(input[type="radio"]:checked) { background: var(--pa-navy); color: #fff; }
.ns-pm-keuze:has(input[type="radio"]:focus-visible) { outline: 3px solid var(--pa-violet); outline-offset: 2px; }
.ns-pm-bol { width: 22px; height: 22px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.ns-pm-eigen input[type="color"] { width: 26px; height: 26px; padding: 0 !important; border: 0 !important; border-radius: 50%; background: none !important; cursor: pointer; margin: 0 !important; box-shadow: none !important; }
.ns-pm-eigen input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.ns-pm-eigen input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.ns-pm-sub { font-size: .88rem; color: var(--pa-zacht); margin: 0 0 8px !important; }
.ns-pm-stapper { display: grid; grid-template-columns: 4.5rem 44px 3rem 44px; align-items: center; gap: 6px; margin: 0 0 8px; }
.ns-pm-stap-label { font-weight: 600; font-size: .95rem; }
html body .ns-pm .ns-pm-knop { width: 44px; height: 44px; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border-radius: 50% !important; background: var(--pa-vlak) !important; color: var(--pa-ink) !important; border: 0 !important; font: 600 1.3rem/1 Poppins, system-ui, sans-serif !important; box-shadow: none !important; }
html body .ns-pm .ns-pm-knop:hover { background: #ece8f2 !important; }
.ns-pm-teller { text-align: center; font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
html body .ns-pm .ns-pm-reset { background: transparent !important; color: var(--pa-zacht) !important; border: 0 !important; padding: 6px 0 !important; margin: 10px 0 0 !important; min-height: 0 !important; font: 500 .88rem/1.3 Poppins, system-ui, sans-serif !important; text-decoration: underline; text-underline-offset: 3px; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; }
html body .ns-pm button:focus-visible { outline: 3px solid var(--pa-violet) !important; outline-offset: 2px; }

.ns-pm-out { position: sticky; top: 90px; }
.ns-pm-vlakken { position: relative; }
.ns-pm-vlak { aspect-ratio: 16 / 10; width: 100%; border-radius: 46% 54% 42% 58% / 55% 45% 55% 45%; transition: background-color 240ms var(--pa-ease), border-radius 400ms var(--pa-ease); }
.ns-pm[data-modus="doel"] .ns-pm-vlak { border-radius: 50% 50% 46% 54% / 46% 54% 46% 54%; }
.ns-pm-vlak.is-leeg { background: repeating-linear-gradient(135deg, var(--pa-vlak) 0 12px, #fff 12px 24px) !important; }
.ns-pm-doelvlak { display: none; position: absolute; right: 4%; bottom: -14px; width: 26%; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 5px #fff; transition: background-color 240ms var(--pa-ease); }
.ns-pm-doelvlak span { position: absolute; left: 50%; bottom: -24px; transform: translateX(-50%); font-size: .75rem; color: var(--pa-zacht); }
.ns-pm[data-modus="doel"] .ns-pm-doelvlak { display: block; }
.ns-pm-naam { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 700; line-height: 1.15; margin: 20px 0 4px !important; letter-spacing: -.02em; }
.ns-pm-naam::first-letter { text-transform: uppercase; }
.ns-pm-recept { font-size: 1.02rem; font-weight: 600; color: var(--pa-violet); margin: 0 0 8px !important; }
.ns-pm-afstand, .ns-pm-bron { font-size: .92rem; color: var(--pa-zacht); margin: 0 0 6px !important; }
.ns-pm-afstand:empty, .ns-pm-bron:empty, .ns-pm[data-modus="mengen"] .ns-pm-afstand, .ns-pm[data-modus="mengen"] .ns-pm-bron { display: none; }
.ns-pm-diag { font-size: .95rem; margin: 10px 0 14px !important; }
.ns-pm-melding { background: #fff4e5; color: #6b3a00; border-radius: var(--pa-r); padding: 12px 14px; font-size: .95rem; margin: 14px 0 !important; }
.ns-pm-ref { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--pa-lijn); }
.ns-pm-ref p { margin: 0 !important; font-size: .9rem; color: var(--pa-zacht); }
.ns-pm-refvlak { width: 44px; height: 44px; border-radius: 50%; flex: none; transition: background-color 240ms var(--pa-ease); }
.ns-pm[data-modus="doel"] .ns-pm-ref, .ns-pm[data-modus="doel"] .ns-pm-stroken { display: none; }
.ns-pm-stroken { border-top: 1px solid var(--pa-lijn); padding-top: 12px; }
.ns-pm-strook { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 0 0 14px; }
html body .ns-pm .ns-pm-staal { height: 58px; min-height: 0 !important; margin: 0 !important; padding: 0 0 6px !important; border: 0 !important; border-radius: 8px !important; display: flex; align-items: flex-end; justify-content: center; box-shadow: none !important; cursor: pointer; transition: transform 160ms var(--pa-ease); }
html body .ns-pm .ns-pm-staal span { font: 600 .74rem/1 Poppins, system-ui, sans-serif; color: #fff; background: rgba(0, 0, 0, .38); padding: 3px 6px; border-radius: 999px; text-transform: none; letter-spacing: 0; }
html body .ns-pm .ns-pm-staal[aria-pressed="true"] { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--pa-navy) !important; }
html body .ns-pm .ns-pm-staal:hover { transform: translateY(-2px); }
.ns-pm-noot { font-size: .84rem; color: var(--pa-zacht); max-width: 76ch; margin: 28px 0 0 !important; }

/* Tabel en stappen in de tekst */
.ns-pa-tabel { width: 100%; border-collapse: collapse; font-size: .95rem; margin: 8px 0 20px; }
.ns-pa-tabel th { text-transform: none !important; letter-spacing: 0 !important; text-align: left; font-weight: 600; padding: 10px 10px 10px 0; border-bottom: 1px solid var(--pa-ink); }
.ns-pa-tabel td { padding: 12px 10px 12px 0; border-bottom: 1px solid var(--pa-lijn); vertical-align: top; }
.ns-pa-tabel .ns-pa-sw { display: inline-block; width: 18px; height: 18px; border-radius: 50%; vertical-align: -3px; margin-right: 8px; }
.ns-pa-stappen { counter-reset: st; list-style: none; padding: 0 !important; margin: 0 0 1rem !important; }
.ns-pa-stappen li { counter-increment: st; position: relative; padding: 0 0 14px 48px; margin: 0 !important; }
.ns-pa-stappen li::before { content: counter(st); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--pa-violet); color: #fff; font-weight: 700; font-size: .9rem; display: grid; place-items: center; }
.ns-pa-fouten { list-style: none; padding: 0 !important; margin: 0 !important; }
.ns-pa-fouten li { padding: 12px 0; border-top: 1px solid var(--pa-lijn); margin: 0 !important; }
.ns-pa-fouten li strong { display: block; }
.ns-pa-faq details { border-top: 1px solid var(--pa-lijn); padding: 2px 0; }
.ns-pa-faq summary { cursor: pointer; font-weight: 600; padding: 14px 0; list-style: none; }
.ns-pa-faq summary::-webkit-details-marker { display: none; }
.ns-pa-faq summary::after { content: "+"; float: right; font-weight: 400; transition: transform 200ms var(--pa-ease); }
.ns-pa-faq details[open] summary::after { transform: rotate(45deg); }
.ns-pa-faq details p { margin: 0 0 14px; }
.ns-pa-bron { font-size: .86rem; color: var(--pa-zacht); max-width: 78ch; }

/* Paars in onze ontwerpen */
.ns-po-verdeling { margin: 0 0 36px; max-width: 700px; }
.ns-po-verdeling figcaption { font-size: .92rem; color: var(--pa-zacht); margin: 0 0 12px; }
.ns-po-verdeling ol { list-style: none; padding: 0 !important; margin: 0 !important; }
.ns-po-verdeling li { display: grid; grid-template-columns: 9.5rem 1fr 3.5rem; gap: 10px; align-items: center; margin: 0 0 6px !important; font-size: .9rem; }
.ns-po-balk { height: 14px; background: var(--pa-lijn); border-radius: 999px; overflow: hidden; }
.ns-po-balk span { display: block; height: 100%; background: var(--pa-violet); border-radius: 999px; }
.ns-po-n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.ns-po-grid { list-style: none; padding: 0 !important; margin: 0 0 28px !important; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
.ns-po-item { margin: 0 !important; display: grid; gap: 6px; align-content: start; }
.ns-po-beeld { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--pa-r); background: var(--pa-vlak); }
.ns-po-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 300ms var(--pa-ease); }
.ns-po-beeld:hover img { transform: scale(1.03); }
.ns-po-titel { font-weight: 600; color: var(--pa-ink) !important; text-decoration: none; line-height: 1.3; }
.ns-po-pct { font-size: .86rem; color: var(--pa-zacht); font-variant-numeric: tabular-nums; }
.ns-po-tinten { display: flex; gap: 8px; }
html body .ns-pa .ns-po-tint { width: 40px; height: 40px; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 50% !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12) !important; cursor: pointer; transition: transform 160ms var(--pa-ease); }
html body .ns-pa .ns-po-tint:hover { transform: scale(1.1); }
html body .ns-pa .ns-po-tint:focus-visible { outline: 3px solid var(--pa-violet) !important; outline-offset: 2px; }

.ns-pa-cta { display: inline-block; background: var(--pa-navy); color: #fff !important; text-decoration: none; font-weight: 600; padding: 12px 20px; border-radius: 999px; }
.ns-pa-cta:hover { background: #0b162b; color: #fff !important; }

/* Tabellen in de tekst */
.ns-pa-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 8px; }
.ns-pa-tabel caption { caption-side: top; text-align: left; font-size: .88rem; color: var(--pa-zacht); padding: 0 0 8px; }
.ns-pa-matrix { min-width: 560px; }
.ns-pa-matrix td { font-size: .88rem; white-space: nowrap; }
.ns-pa-matrix th[scope="row"] { font-weight: 600; white-space: nowrap; padding-right: 14px; border-bottom: 1px solid var(--pa-lijn); }
.ns-pa-recepten { min-width: 560px; }
.ns-pa-recepten small { color: var(--pa-zacht); font-size: .8rem; }
.ns-pa-recepten th[scope="row"] { white-space: nowrap; font-weight: 600; border-bottom: 1px solid var(--pa-lijn); padding-right: 14px; }
.ns-pa-faq .ns-pa-sw { width: 16px; height: 16px; margin: 0 0 0 4px; }

@media (max-width: 849px) {
  .ns-pa { font-size: 16px; }
  .ns-pa { padding-left: 24px; padding-right: 24px; }
  .ns-pa .ns-pa-band { width: calc(100% + 48px); margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; }
  .ns-pm-grid { grid-template-columns: 1fr; }
  .ns-pm-in { display: contents; }
  .ns-pm-grid { gap: 0; }
  .ns-pm-in > .ns-pm-set:nth-of-type(1) { order: 1; }
  .ns-pm-in > .ns-pm-set:nth-of-type(2) { order: 2; }
  .ns-pm-out { position: static; order: 3; margin: 6px 0 18px; }
  .ns-pm-paneel { order: 4; }
  .ns-pm-reset { order: 5; justify-self: start; }
  .ns-pa .ns-pa-matrix, .ns-pa .ns-pa-recepten { min-width: 0; }
  .ns-pa .ns-pa-recepten td, .ns-pa .ns-pa-recepten th[scope="row"] { white-space: normal; }
  .ns-pa-matrix td, .ns-pa-matrix th { white-space: normal !important; font-size: .78rem; padding-right: 6px !important; }
  .ns-pa-matrix td .ns-pa-sw { display: block; margin: 0 0 4px; }
  .ns-pa-recepten td, .ns-pa-recepten th { font-size: .84rem; }
  .ns-pm-vlak { aspect-ratio: 16 / 7; }
  .ns-po-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .ns-po-verdeling li { grid-template-columns: 7.2rem 1fr 3rem; font-size: .84rem; }
  html body .ns-pm .ns-pm-staal { height: 50px; }
  html body .ns-pm .ns-pm-staal span { font-size: .68rem; padding: 2px 4px; }
}
@media (prefers-reduced-motion: reduce) {
  body.postid-13114 *, body.postid-13114 *::before, body.postid-13114 *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .ns-pa *, .ns-pa *::before, .ns-pa *::after { transition: none !important; animation: none !important; }
}