/* NedStaff, ontwerpvoorstel 27-10-2026, ronde 5: één strak systeem.
   Raster: 12 kolommen met een vaste goot; alles staat op die lijnen (kwarten, derden, helften).
   Maten: koppen 64 / 52 / 44 / 22 / 18, tekst 16, klein 14, label 13. Knoppen 48, klein 40. Afronding 8 / 12 / 16.
   Kleur: turkoois bepaalt de uitstraling (opening, hoofdknoppen, actief, slotblok), navy voor tekst, voet en één fotoband.
   Responsief via container queries op .ns-doek, zodat de keuring elke pagina op 1440 en 390 kan meten. */
:root {
  --ns-navy: #002C46; --ns-navy2: #0B4366; --ns-navy-zacht: #E6EEF3;
  --ns-turk: #08C3CD; --ns-turk-hover: #2CD0D8; --ns-turk2: #3FD3DB; --ns-turk-zacht: #E3F6F7; --ns-turk-tekst: #00717A;
  --ns-op-turk: #002C46; --ns-op-turk-sub: #0B3A51; --ns-op-turk-lijn: rgba(0, 44, 70, .18);
  --ns-op-navy: #FFFFFF; --ns-op-navy-sub: #B9CCD9;
  --ns-ef: #FFF3D1; --ns-ef-inkt: #6E4300; --ns-ef-rand: #D9A033; --ns-nieuw: #EEE9FF; --ns-nieuw-inkt: #45358A; --ns-nieuw-rand: #9C8CE0;
  --ns-inkt: #0E1F2C; --ns-sub: #4D5F6C; --ns-zwak: #627280;
  --ns-lijn: #DCE4E9; --ns-lijn2: #EAF0F3; --ns-vlak: #FFFFFF; --ns-grond: #F3F7F8; --ns-grond2: #E7EEF1;
  --ns-goed: #0C7550; --ns-goed-zacht: #E1F3EA; --ns-let: #9A5300; --ns-let-zacht: #FCF0DE; --ns-fout: #B3302A; --ns-fout-zacht: #FBE9E7;
  --ns-kop: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --ns-tekst: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --ns-r: 8px; --ns-r2: 12px; --ns-r3: 16px;
  --ns-ster: #9A6700;
  --ns-schaduw: 0 1px 2px rgba(0, 44, 70, .05), 0 12px 32px rgba(0, 44, 70, .08);
  --ns-schaduw-klein: 0 1px 2px rgba(0, 44, 70, .08);
  --mk-grond: #0F1A23; --mk-inkt: #E8EEF2; --mk-sub: #9FB0BD; --mk-lijn: #24333F; --mk-aan: #08C3CD;
  color-scheme: light;
}
body { margin: 0; background: var(--ns-vlak); color: var(--ns-inkt); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--mk-grond); }

/* ───────── de mockupbalk (hoort niet bij de site) ───────── */
.mk-balk { background: var(--mk-grond); color: var(--mk-inkt); font: 500 13px/1.3 var(--ns-tekst); }
.mk-balk-in { display: flex; align-items: center; gap: 14px; min-height: 44px; padding-block: 6px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); max-width: 1440px; margin-inline: auto; }
.mk-naam { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.mk-naam b { font-weight: 700; }
.mk-naam span { color: var(--mk-sub); }
.mk-merk { width: 8px; height: 8px; border-radius: 2px; background: var(--mk-aan); transform: skewX(-16deg); }
.mk-delen { display: flex; gap: 2px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.mk-deel { appearance: none; border: 0; background: transparent; color: var(--mk-sub); font: inherit; padding: 7px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.mk-deel:hover { color: var(--mk-inkt); background: var(--mk-lijn); }
.mk-deel.is-aan { color: var(--mk-grond); background: var(--mk-aan); font-weight: 600; }
.mk-alles { position: relative; }
.mk-alles > button { appearance: none; border: 1px solid var(--mk-lijn); background: transparent; color: var(--mk-inkt); font: inherit; padding: 6px 10px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.mk-lijst { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 80; width: 300px; max-height: 70vh; overflow: auto; background: var(--mk-grond); border: 1px solid var(--mk-lijn); border-radius: 10px; padding: 8px; box-shadow: 0 20px 40px rgba(0, 0, 0, .35); }
.mk-lijst.is-open { display: grid; gap: 2px; }
.mk-lijst p { margin: 8px 8px 4px; color: var(--mk-sub); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.mk-lijst button { appearance: none; border: 0; background: transparent; color: var(--mk-inkt); font: inherit; text-align: left; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.mk-lijst button:hover, .mk-lijst button.is-aan { background: var(--mk-lijn); }
.mk-ef { appearance: none; border: 1px dashed #D9A033; background: transparent; color: #F3C566; font: inherit; padding: 6px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.mk-ef.is-aan { background: #FFF3D1; color: #6E4300; border-style: solid; }
@media (max-width: 1100px) { .mk-delen { display: none; } .mk-ef { margin-left: auto; } .mk-naam span { display: none; } }

/* ───────── basis ───────── */
.ns-doek { --ns-goot: 32px; --ns-sectie: 120px; --ns-kopruimte: 56px; container: ns / inline-size; background: var(--ns-vlak); color: var(--ns-inkt); font: 400 16px/1.6 var(--ns-tekst); -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
.ns-doek *, .ns-doek *::before, .ns-doek *::after { box-sizing: border-box; }
.ns-doek img { max-width: 100%; display: block; }
:where(.ns-doek) a { color: inherit; text-decoration: none; }
:where(.ns-doek) button { font: inherit; color: inherit; }
.ns-doek :focus-visible { outline: 2px solid var(--ns-turk-tekst); outline-offset: 2px; border-radius: 6px; }
.ns-pagina { display: flex; flex-direction: column; flex: 1; min-height: 100vh; }
.ns-binnen { width: 100%; max-width: 1280px; margin-inline: auto; padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); }
.ns-lijf { flex: 1; }
.ns-i { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 20px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 0, 'wght' 400, 'opsz' 24; flex: none; overflow: hidden; width: 1em; }
.ns-i.is-vol { font-variation-settings: 'FILL' 1, 'wght' 400, 'opsz' 24; }

/* letters: één schaal */
.ns-h1 { font: 800 52px/1.04 var(--ns-kop); font-stretch: 88%; letter-spacing: -.015em; margin: 0; text-wrap: balance; color: var(--ns-navy); }
.ns-h2 { font: 800 44px/1.08 var(--ns-kop); font-stretch: 90%; letter-spacing: -.01em; margin: 0; text-wrap: balance; color: var(--ns-navy); }
.ns-h3 { font: 700 22px/1.25 var(--ns-kop); letter-spacing: -.005em; margin: 0; color: var(--ns-navy); text-wrap: balance; }
.ns-h4 { font: 700 18px/1.3 var(--ns-kop); margin: 0; color: var(--ns-navy); }
.ns-lead { font-size: 19px; line-height: 1.6; color: var(--ns-sub); margin: 0; max-width: 34em; text-wrap: pretty; }
.ns-p { margin: 0; color: var(--ns-sub); max-width: 62ch; text-wrap: pretty; }
.ns-klein { font-size: 14px; color: var(--ns-sub); }
.ns-oog { display: block; font: 700 13px/1.2 var(--ns-tekst); letter-spacing: .12em; text-transform: uppercase; color: var(--ns-turk-tekst); }
.ns-getal { font-variant-numeric: tabular-nums; }
/* lange woorden (Hongaars, Pools) breken netjes af in plaats van uit hun vak te lopen */
.ns-doek :is(h1, h2, h3, h4, b, p, li, dd, .ns-keuze, .ns-vinktegel, .ns-tab) { overflow-wrap: break-word; }
html:not([lang="nl"]) .ns-doek :is(.ns-h1, .ns-h2, .ns-h3, .ns-h4, .ns-spec b, .ns-fototegel b, .ns-stap4 b) { hyphens: auto; }

/* knoppen: één hoofdknop per vlak; turkoois op wit, navy op turkoois */
.ns-knop { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 6px 22px; border-radius: var(--ns-r); border: 1px solid var(--ns-turk); background: var(--ns-turk); color: var(--ns-op-turk); font: 600 16px/1.2 var(--ns-tekst); text-align: center; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
/* een lange vertaling loopt binnen de knop om in plaats van eruit */
.ns-knop.is-blok, :is(.ns-banner-knoppen, .ns-slot-knoppen, .ns-knoppen, .ns-band-knoppen, .ns-pagknoppen, .ns-tweeluik-voet, .ns-formvoet, .ns-lade-voet) .ns-knop { white-space: normal; }
.ns-knop:hover { background: var(--ns-turk-hover); border-color: var(--ns-turk-hover); }
.ns-knop .ns-i { font-size: 20px; }
.ns-knop.is-klein { min-height: 40px; padding: 4px 16px; font-size: 15px; }
.ns-knop.is-klein .ns-i { font-size: 18px; }
.ns-knop.is-blok { width: 100%; }
.ns-knop-donker { background: var(--ns-navy); border-color: var(--ns-navy); color: var(--ns-op-navy); }
.ns-knop-donker:hover { background: var(--ns-navy2); border-color: var(--ns-navy2); }
.ns-knop-licht { background: var(--ns-vlak); color: var(--ns-navy); border-color: var(--ns-lijn); }
.ns-knop-licht:hover { background: var(--ns-grond); border-color: #C9D4DB; }
.ns-knop-stil { background: transparent; border-color: transparent; color: var(--ns-navy); padding: 0 12px; }
.ns-knop-stil:hover { background: var(--ns-grond); border-color: transparent; }
.ns-knop-turk { background: var(--ns-turk); border-color: var(--ns-turk); color: var(--ns-navy); }
.ns-knop-turk:hover { background: var(--ns-turk-hover); border-color: var(--ns-turk-hover); }
.ns-knop-rand { background: transparent; color: var(--ns-op-navy); border-color: rgba(255, 255, 255, .35); }
.ns-knop-rand:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .6); }
.ns-knop-goed { background: var(--ns-goed); border-color: var(--ns-goed); color: var(--ns-op-navy); }
.ns-knop-goed:hover { background: #0A6545; border-color: #0A6545; }
.ns-knop-goed.is-licht { background: var(--ns-goed-zacht); border-color: var(--ns-goed-zacht); color: var(--ns-goed); }
.ns-knop-goed.is-licht:hover { background: #CDEBDC; border-color: #CDEBDC; }
.ns-knop[disabled] { opacity: .45; cursor: not-allowed; }
.ns-knop.is-aan .ns-i { color: var(--ns-turk-tekst); }
.ns-icoonknop { appearance: none; width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: var(--ns-r); border: 1px solid var(--ns-lijn); background: var(--ns-vlak); color: var(--ns-navy); cursor: pointer; flex: none; }
.ns-icoonknop:hover { background: var(--ns-grond); }
.ns-icoonknop.is-groot { width: 48px; height: 48px; }
.ns-icoonknop.is-aan { color: var(--ns-turk-tekst); border-color: var(--ns-turk); background: var(--ns-turk-zacht); }
.ns-icoonknop[disabled] { opacity: .4; cursor: not-allowed; }
.ns-link { color: var(--ns-turk-tekst); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; background: none; border: 0; padding: 0; font-size: inherit; }
.ns-link .ns-i { font-size: 18px; transition: transform .15s; }
.ns-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.ns-link:hover .ns-i { transform: translateX(2px); }
.ns-knoppen { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* velden */
.ns-groep { display: grid; gap: 8px; min-width: 0; align-content: start; }
.ns-label { font: 600 14px/1.3 var(--ns-tekst); color: var(--ns-inkt); }
.ns-label small { font-weight: 400; color: var(--ns-zwak); font-size: 14px; }
.ns-veld { appearance: none; width: 100%; min-width: 0; height: 48px; padding: 0 14px; border: 1px solid var(--ns-lijn); border-radius: var(--ns-r); background: var(--ns-vlak); color: var(--ns-inkt); font: 400 16px/1.2 var(--ns-tekst); transition: border-color .15s, box-shadow .15s; }
.ns-veld:hover { border-color: #C6D1D8; }
.ns-veld:focus { outline: none; border-color: var(--ns-navy); box-shadow: 0 0 0 3px var(--ns-navy-zacht); }
.ns-veld[disabled] { background: var(--ns-grond); color: var(--ns-zwak); }
select.ns-veld { padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--ns-sub) 50%), linear-gradient(135deg, var(--ns-sub) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; }
textarea.ns-veld { height: auto; min-height: 112px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.ns-veld.is-klein { height: 40px; font-size: 15px; }
select.ns-veld.is-klein { background-position: calc(100% - 20px) 17px, calc(100% - 15px) 17px; }
.ns-hulp { font-size: 14px; color: var(--ns-zwak); margin: 0; }
.ns-hulp .ns-i { font-size: 18px; vertical-align: -4px; }
.ns-hulp.is-fout { color: var(--ns-fout); display: flex; gap: 6px; align-items: center; }
.ns-samen { display: flex; min-width: 0; }
.ns-samen > .ns-veld:first-child { width: 112px; flex: none; border-radius: var(--ns-r) 0 0 var(--ns-r); border-right: 0; }
.ns-samen > .ns-veld:last-child { border-radius: 0 var(--ns-r) var(--ns-r) 0; }
.ns-vink { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--ns-inkt); cursor: pointer; line-height: 1.45; }
.ns-vink input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ns-navy); flex: none; }
.ns-vink small { color: var(--ns-zwak); font-size: 14px; }
.ns-formraster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; align-items: start; }
.ns-formraster .is-breed { grid-column: 1 / -1; }

/* keuzes: altijd tegels van gelijke breedte in een raster */
.ns-keuzes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ns-keuzes.is-twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ns-keuzes.is-vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ns-keuze { appearance: none; text-align: left; display: grid; gap: 2px; padding: 12px 16px; border: 1px solid var(--ns-lijn); border-radius: var(--ns-r); background: var(--ns-vlak); cursor: pointer; min-height: 48px; align-content: center; min-width: 0; }
.ns-keuze:hover { border-color: #C2CDD5; }
.ns-keuze b { font-size: 15px; font-weight: 600; color: var(--ns-inkt); }
.ns-keuze span { font-size: 14px; color: var(--ns-sub); }
.ns-keuze:is(.is-aan, :has(input:checked)) { border-color: var(--ns-turk-tekst); box-shadow: inset 0 0 0 1px var(--ns-turk-tekst); background: var(--ns-turk-zacht); }
.ns-keuze-i { grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; }
.ns-keuze-i .ns-i { grid-row: span 2; color: var(--ns-turk-tekst); align-self: center; }
.ns-vinktegels { display: grid; grid-template-columns: repeat(var(--kol, 4), minmax(0, 1fr)); gap: 8px; }
.ns-vinktegel { appearance: none; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 14px; border: 1px solid var(--ns-lijn); border-radius: var(--ns-r); background: var(--ns-vlak); cursor: pointer; text-align: left; font: 500 15px/1.3 var(--ns-tekst); color: var(--ns-inkt); min-width: 0; }
.ns-vinktegel:hover { border-color: #C2CDD5; }
.ns-vinktegel::before { content: ""; width: 18px; height: 18px; flex: none; border: 1.5px solid #9AAAB5; border-radius: 4px; background: var(--ns-vlak) center / 14px no-repeat; }
.ns-vinktegel:is(.is-aan, :has(input:checked)) { border-color: var(--ns-turk-tekst); background: var(--ns-turk-zacht); box-shadow: inset 0 0 0 1px var(--ns-turk-tekst); }
.ns-vinktegel:is(.is-aan, :has(input:checked))::before { border-color: var(--ns-turk-tekst); background-color: var(--ns-turk-tekst); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6L21 7.5l-1.4-1.4z' fill='%23fff'/%3E%3C/svg%3E"); }
.ns-dagkeuze { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ns-dagtegel { appearance: none; display: grid; gap: 2px; justify-items: center; align-content: center; height: 64px; border: 1px solid var(--ns-lijn); border-radius: var(--ns-r); background: var(--ns-vlak); cursor: pointer; }
.ns-dagtegel span { font-size: 13px; color: var(--ns-sub); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.ns-dagtegel b { font-size: 16px; color: var(--ns-inkt); font-weight: 700; }
.ns-dagtegel:hover { border-color: #C2CDD5; }
.ns-dagtegel:is(.is-aan, :has(input:checked)) { border-color: var(--ns-turk); background: var(--ns-turk); }
.ns-dagtegel:is(.is-aan, :has(input:checked)) :is(span, b) { color: var(--ns-op-turk); }
.ns-tijdkeuze { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.ns-tijdtegel { appearance: none; height: 48px; border: 1px solid var(--ns-lijn); border-radius: var(--ns-r); background: var(--ns-vlak); cursor: pointer; font: 600 15px/1 var(--ns-tekst); color: var(--ns-inkt); font-variant-numeric: tabular-nums; }
.ns-tijdtegel:hover { border-color: #C2CDD5; }
.ns-tijdtegel:is(.is-aan, :has(input:checked)) { border-color: var(--ns-turk); background: var(--ns-turk); color: var(--ns-op-turk); }

/* chips (alleen voor actieve filters) en labels */
.ns-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ns-chip { appearance: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--ns-lijn); background: var(--ns-vlak); color: var(--ns-inkt); font: 500 14px/1 var(--ns-tekst); cursor: pointer; white-space: nowrap; }
.ns-chip:hover { border-color: #C2CDD5; }
.ns-chip .ns-i { font-size: 18px; }
.ns-tag { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 6px; background: var(--ns-grond); color: var(--ns-sub); font: 500 13px/1 var(--ns-tekst); white-space: nowrap; }
.ns-tag .ns-i { font-size: 16px; }
.ns-tag.is-turk { background: var(--ns-turk-zacht); color: var(--ns-turk-tekst); }
.ns-pil { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font: 600 13px/1 var(--ns-tekst); white-space: nowrap; background: var(--ns-grond); color: var(--ns-sub); }
.ns-pil::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ns-pil.is-goed { background: var(--ns-goed-zacht); color: var(--ns-goed); }
.ns-pil.is-let { background: var(--ns-let-zacht); color: var(--ns-let); }
.ns-pil.is-fout { background: var(--ns-fout-zacht); color: var(--ns-fout); }
.ns-pil.is-turk { background: var(--ns-turk-zacht); color: var(--ns-turk-tekst); }
.ns-pil.is-navy { background: var(--ns-navy-zacht); color: var(--ns-navy); }
.ns-ef { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 10px; border-radius: 6px; border: 1px dashed var(--ns-ef-rand); background: var(--ns-ef); color: var(--ns-ef-inkt); font: 600 13px/1.25 var(--ns-tekst); vertical-align: middle; max-width: 100%; }
.ns-ef .ns-i { font-size: 16px; }
.ns-ef.is-nieuw { border-color: var(--ns-nieuw-rand); background: var(--ns-nieuw); color: var(--ns-nieuw-inkt); }

.ns-kaart { background: var(--ns-vlak); border: 1px solid var(--ns-lijn); border-radius: var(--ns-r2); min-width: 0; }
.ns-kaart-in { padding: 24px; display: grid; gap: 16px; align-content: start; }
.ns-kaart-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--ns-lijn2); min-height: 64px; }
.ns-kaart-kop .ns-h3 { font-size: 18px; }
.ns-kaart-voet { border-top: 1px solid var(--ns-lijn2); }
.ns-vinklijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ns-vinklijst li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; line-height: 1.55; color: var(--ns-inkt); }
.ns-vinklijst li::before { content: "check"; font-family: 'Material Symbols Outlined'; font-size: 22px; line-height: 1.1; color: var(--ns-turk-tekst); font-variation-settings: 'wght' 600; }
.ns-vinklijst b { font-weight: 700; }
.ns-vinklijst.is-klein { gap: 10px; font-size: 15px; }

/* ───────── kop van de site ───────── */
.ns-pre { background: var(--ns-grond); color: var(--ns-sub); border-bottom: 1px solid var(--ns-lijn); font-size: 14px; }
.ns-pre .ns-binnen { display: flex; align-items: center; gap: 20px; min-height: 40px; }
.ns-doelgroep { display: flex; gap: 4px; height: 40px; }
.ns-doelgroep a { display: inline-flex; align-items: center; padding: 0 12px; color: var(--ns-sub); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; }
.ns-doelgroep a:first-child { padding-left: 0; }
.ns-doelgroep a:hover { color: var(--ns-inkt); }
.ns-doelgroep a.is-aan { color: var(--ns-navy); border-bottom-color: var(--ns-turk); }
.ns-doelgroep .ns-kort { display: none; }
.ns-pre-rechts { margin-left: auto; display: flex; align-items: center; gap: 24px; }
.ns-pre-rechts > span, .ns-pre-rechts > a { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ns-pre-rechts > a { color: var(--ns-inkt); font-weight: 600; }
.ns-pre-rechts > a:hover { color: var(--ns-turk-tekst); }
.ns-pre-rechts .ns-i { font-size: 18px; color: var(--ns-turk-tekst); }
.ns-taal { position: relative; }
.ns-taal > button { appearance: none; background: transparent; border: 0; color: var(--ns-inkt); display: inline-flex; align-items: center; gap: 6px; height: 40px; cursor: pointer; font-weight: 600; font-size: 14px; padding: 0; }
.ns-taal-lijst { display: none; position: absolute; right: 0; top: 100%; z-index: 40; background: var(--ns-vlak); color: var(--ns-inkt); border: 1px solid var(--ns-lijn); border-radius: var(--ns-r); box-shadow: var(--ns-schaduw); padding: 6px; width: 220px; }
.ns-taal-lijst.is-open { display: grid; }
.ns-taal-lijst :is(a, button) { appearance: none; border: 0; background: transparent; text-align: left; padding: 10px 12px; border-radius: 6px; cursor: pointer; display: flex; justify-content: space-between; font-size: 15px; color: var(--ns-inkt); }
.ns-taal-lijst :is(a, button):hover { background: var(--ns-grond); }
.ns-taal-lijst :is(a, button).is-aan { font-weight: 700; background: var(--ns-turk-zacht); }
.ns-taal-lijst :is(a, button) span { color: var(--ns-zwak); font-size: 14px; }
.ns-kop { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--ns-vlak); border-bottom: 1px solid var(--ns-lijn); }
.ns-kop-rij { display: flex; align-items: center; gap: 40px; height: 80px; }
.ns-logo { display: block; flex: none; cursor: pointer; }
.ns-logo img { height: 32px; width: auto; }
.ns-nav { display: flex; gap: 4px; height: 100%; }
.ns-nav a, .ns-navknop { display: inline-flex; align-items: center; gap: 2px; padding: 0 12px; font: 600 16px/1 var(--ns-tekst); color: var(--ns-inkt); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.ns-navknop { appearance: none; background: none; border-top: 0; border-left: 0; border-right: 0; height: 100%; }
.ns-nav a:hover, .ns-navknop:hover { color: var(--ns-turk-tekst); }
.ns-nav a.is-aan, .ns-navknop.is-aan { border-bottom-color: var(--ns-turk); color: var(--ns-navy); }
.ns-navknop .ns-i { transition: transform .2s; }
.ns-navknop.is-aan .ns-i { transform: rotate(180deg); }
.ns-kop-rechts { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.ns-kop-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ns-navy); white-space: nowrap; }
.ns-kop-link:hover { color: var(--ns-turk-tekst); }
.ns-kop-link .ns-i { color: var(--ns-turk-tekst); }
.ns-menuknop { display: none; }
.ns-mobmenu { display: none; }
.ns-mega { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--ns-vlak); border-top: 1px solid var(--ns-lijn); border-bottom: 1px solid var(--ns-lijn); box-shadow: 0 28px 48px rgba(0, 44, 70, .12); }
.ns-mega.is-open { display: block; }
.ns-mega-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ns-goot); padding-block: 36px 40px; }
.ns-mega-intro { grid-column: span 4; display: grid; gap: 16px; align-content: start; justify-items: start; padding: 8px var(--ns-goot) 8px 0; border-right: 1px solid var(--ns-lijn); }
.ns-mega-intro .ns-p { font-size: 15px; }
.ns-mega-lijst { grid-column: 5 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; align-content: start; }
/* elk specialisme: icoon, naam met de uitleg eronder, pijl bij aanwijzen; alle regels even hoog */
.ns-mega-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) 20px; gap: 16px; align-items: center; min-height: 72px; padding: 12px 16px; border-radius: var(--ns-r2); transition: background .15s; }
.ns-mega-item > .ns-i:first-child { font-size: 26px; color: var(--ns-turk-tekst); font-variation-settings: 'FILL' 0, 'wght' 300, 'opsz' 40; }
.ns-mega-item > span { display: grid; gap: 2px; min-width: 0; }
.ns-mega-item b { font: 700 16px/1.3 var(--ns-kop); color: var(--ns-navy); }
.ns-mega-item small { font-size: 14px; line-height: 1.4; color: var(--ns-sub); }
.ns-mega-item > .ns-i:last-child { font-size: 20px; color: var(--ns-turk-tekst); opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; }
.ns-mega-item:hover, .ns-mega-item.is-aan { background: var(--ns-turk-zacht); }
.ns-mega-item:hover > .ns-i:last-child, .ns-mega-item.is-aan > .ns-i:last-child { opacity: 1; transform: none; }

/* ───────── opening: foto met het turkoois schuine vlak uit de NedStaff-banners ───────── */
.ns-banner { --uit: calc(max(0px, (100cqw - 1280px) / 2) + 32px); position: relative; background: var(--ns-turk); overflow: hidden; }
.ns-banner-foto { position: absolute; top: 0; bottom: 0; right: 0; left: 40%; background: var(--ns-navy2); }
.ns-banner.is-rechts .ns-banner-foto { left: 0; right: 40%; }
.ns-banner-foto img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 70%) center; }
.ns-banner-in { position: relative; display: flex; min-height: 600px; }
.ns-banner-vlak { width: calc(var(--uit) + 720px); margin-left: calc(-1 * var(--uit)); padding: 80px 136px 88px var(--uit); background: var(--ns-turk); color: var(--ns-op-turk); clip-path: polygon(0 0, 100% 0, calc(100% - 120px) 100%, 0 100%); display: grid; align-content: center; gap: 24px; }
.ns-banner.is-rechts .ns-banner-in { justify-content: flex-end; }
.ns-banner.is-rechts .ns-banner-vlak { margin-left: 0; margin-right: calc(-1 * var(--uit)); padding: 80px var(--uit) 120px 128px; clip-path: polygon(120px 0, 100% 0, 100% 100%, 0 100%); }
.ns-banner.is-laag .ns-banner-in { min-height: 480px; }
.ns-banner .ns-h1 { font-size: 60px; color: var(--ns-op-turk); }
.ns-banner.is-laag .ns-h1 { font-size: 52px; }
.ns-banner .ns-oog { color: var(--ns-op-turk); }
.ns-banner .ns-lead { color: var(--ns-op-turk-sub); max-width: 30em; }
.ns-banner .ns-kruimel { padding: 0; color: var(--ns-op-turk-sub); }
.ns-banner .ns-kruimel a:hover { color: var(--ns-op-turk); }
.ns-banner-knoppen { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; }
.ns-banner-knoppen .ns-knop-licht { border-color: var(--ns-vlak); }

/* keurmerken onder de opening: vier vakken op de kwartlijnen */
.ns-bewijs { background: var(--ns-vlak); border-bottom: 1px solid var(--ns-lijn); }
.ns-bewijs .ns-binnen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ns-goot); padding-block: 28px; }
.ns-bewijs-item { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: center; min-width: 0; }
.ns-bewijs-logo { height: 44px; display: flex; align-items: center; }
.ns-bewijs-logo img { max-height: 44px; max-width: 72px; width: auto; object-fit: contain; }
.ns-bewijs-item > span:last-child { display: grid; gap: 2px; min-width: 0; }
.ns-bewijs-item b { font-size: 15px; font-weight: 700; color: var(--ns-inkt); line-height: 1.3; }
.ns-bewijs-item small { font-size: 14px; color: var(--ns-sub); line-height: 1.35; }
.ns-letterlogo { font: 800 24px/1 var(--ns-kop); font-stretch: 88%; color: var(--ns-navy); letter-spacing: .02em; }

/* ───────── secties ───────── */
.ns-sectie { padding-block: var(--ns-sectie); }
.ns-sectie.is-grond { background: var(--ns-grond); }
.ns-sectie.is-krap { padding-block: 72px; }
.ns-sectie.is-slot { padding-top: 0; }
.ns-sectie-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ns-goot); margin-bottom: var(--ns-kopruimte); }
.ns-sectie-kop > div { display: grid; gap: 16px; min-width: 0; max-width: 760px; }
.ns-sectie-kop > .ns-link { flex: none; margin-bottom: 6px; }
.ns-raster12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ns-goot); }

/* stelling: kop links, uitleg rechts (helften) */
.ns-stelling { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ns-goot); align-items: start; }
.ns-stelling > div:first-child { display: grid; gap: 16px; padding-right: 40px; }
.ns-stelling-rechts { display: grid; gap: 28px; justify-items: start; }
.ns-stelling-rechts .ns-lead { font-size: 18px; }

/* plekken voor klantlogo's: zes vakken op het raster */
.ns-logostrook { display: grid; gap: 24px; margin-top: 96px; padding-top: 48px; border-top: 1px solid var(--ns-lijn); }
.ns-logostrook > p { margin: 0; font: 700 13px/1.3 var(--ns-tekst); letter-spacing: .12em; text-transform: uppercase; color: var(--ns-sub); }
.ns-logorij { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--ns-goot); }
.ns-logoplek { height: 72px; border: 1px dashed #C3CFD7; border-radius: var(--ns-r); display: grid; place-items: center; color: var(--ns-zwak); font-size: 13px; font-weight: 600; text-align: center; padding: 0 8px; }

/* specialismen: kaarten op de kwartlijnen */
.ns-specraster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ns-goot); }
.ns-spec { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 28px; background: var(--ns-vlak); border: 1px solid var(--ns-lijn); border-radius: var(--ns-r2); transition: border-color .15s, box-shadow .15s; min-width: 0; }
.ns-spec:hover { border-color: var(--ns-turk); box-shadow: var(--ns-schaduw); }
.ns-spec > .ns-i { font-size: 32px; color: var(--ns-turk-tekst); font-variation-settings: 'FILL' 0, 'wght' 300, 'opsz' 40; margin-bottom: 8px; }
.ns-spec b { font: 700 20px/1.25 var(--ns-kop); color: var(--ns-navy); }
.ns-spec-tekst { font-size: 15px; color: var(--ns-sub); line-height: 1.55; }
.ns-spec-pijl { margin-top: auto; padding-top: 12px; color: var(--ns-turk-tekst); display: flex; }
.ns-spec-pijl .ns-i { font-size: 22px; transition: transform .2s; }
.ns-spec:hover .ns-spec-pijl .ns-i { transform: translateX(4px); }
.ns-spec.is-klein { flex-direction: row; align-items: center; gap: 14px; padding: 18px 20px; }
.ns-spec.is-klein > .ns-i { font-size: 26px; margin: 0; }
.ns-spec.is-klein b { font-size: 16px; }
.ns-spec.is-klein .ns-spec-pijl { margin: 0 0 0 auto; padding: 0; }
.ns-spec.is-aan { border-color: var(--ns-turk); background: var(--ns-turk-zacht); }

/* chauffeurs in de pool: kaarten op de kwartlijnen, knop onderaan op één lijn */
.ns-tabsrij { display: flex; flex-wrap: wrap; gap: 4px 2px; border-bottom: 1px solid var(--ns-lijn); margin-bottom: 32px; }
.ns-tabsrij button { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; height: 48px; padding: 0 14px; font: 600 15px var(--ns-tekst); color: var(--ns-sub); cursor: pointer; white-space: nowrap; }
.ns-tabsrij button:first-child { padding-left: 0; }
.ns-tabsrij button:hover { color: var(--ns-inkt); }
.ns-tabsrij button.is-aan { color: var(--ns-navy); border-bottom-color: var(--ns-turk); }
.ns-poolraster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ns-goot); }
.ns-profiel { background: var(--ns-vlak); border: 1px solid var(--ns-lijn); border-radius: var(--ns-r2); padding: 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ns-profiel-kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; }
.ns-profiel-code { color: var(--ns-zwak); font-weight: 600; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.ns-beschikbaar { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; color: var(--ns-goed); white-space: nowrap; }
.ns-beschikbaar::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ns-goed); box-shadow: 0 0 0 3px var(--ns-goed-zacht); }
.ns-profiel-titel { display: grid; gap: 6px; }
.ns-profiel-titel b { font: 800 26px/1.1 var(--ns-kop); font-stretch: 90%; color: var(--ns-navy); }
.ns-profiel-titel span { font-size: 15px; font-weight: 600; color: var(--ns-turk-tekst); }
.ns-profiel dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 12px; font-size: 14px; padding-top: 16px; border-top: 1px solid var(--ns-lijn2); }
.ns-profiel dl div { display: contents; }
.ns-profiel dt { color: var(--ns-sub); }
.ns-profiel dd { margin: 0; color: var(--ns-inkt); }
.ns-profiel > .ns-knop { margin-top: auto; }
.ns-poolvraag { grid-column: span var(--span, 1); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; padding: 32px; border-radius: var(--ns-r2); background: var(--ns-turk-zacht); }
.ns-poolvraag b { font: 700 22px/1.25 var(--ns-kop); color: var(--ns-navy); }
.ns-poolvraag p { margin: 0; color: var(--ns-sub); max-width: 40ch; }

/* fotoband */
.ns-fotoband { position: relative; color: var(--ns-op-navy); background: var(--ns-navy); }
.ns-fotoband > img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 60%) center; }
.ns-fotoband::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0, 44, 70, .96) 0, rgba(0, 44, 70, .92) 40%, rgba(0, 44, 70, .35) 72%, rgba(0, 44, 70, .05) 100%); }
.ns-fotoband .ns-binnen { position: relative; z-index: 2; padding-block: var(--ns-sectie); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ns-goot); }
.ns-fotoband-tekst { display: grid; gap: 24px; justify-items: start; }
.ns-fotoband .ns-h2 { color: var(--ns-op-navy); }
.ns-fotoband .ns-oog { color: var(--ns-turk); }
.ns-fotoband :is(.ns-p, .ns-lead) { color: var(--ns-op-navy-sub); }
.ns-checkraster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px var(--ns-goot); margin: 8px 0; width: 100%; }
.ns-checkraster div { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 12px; }
.ns-checkraster .ns-i { grid-row: span 2; font-size: 24px; color: var(--ns-turk); }
.ns-checkraster b { font-size: 16px; line-height: 1.3; }
.ns-checkraster span { font-size: 15px; color: var(--ns-op-navy-sub); line-height: 1.5; }

/* werkwijze: vier stappen met een lijn erboven */
.ns-stappen4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ns-goot); }
.ns-stap4 { position: relative; display: grid; gap: 12px; align-content: start; padding-top: 28px; border-top: 2px solid var(--ns-lijn); }
.ns-stap4::before { content: ""; position: absolute; left: 0; top: -2px; width: 48px; height: 2px; background: var(--ns-turk); }
.ns-stap4 > span:first-child { font: 700 13px/1.2 var(--ns-tekst); letter-spacing: .12em; text-transform: uppercase; color: var(--ns-turk-tekst); }
.ns-stap4 b { font: 700 22px/1.25 var(--ns-kop); color: var(--ns-navy); }
.ns-stap4 > span:last-child { color: var(--ns-sub); font-size: 15px; line-height: 1.6; }

/* stappen met foto (werknemers) */
.ns-stappen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ns-goot); }
.ns-stap { display: grid; gap: 12px; align-content: start; }
.ns-stap-foto { aspect-ratio: 4 / 3; border-radius: var(--ns-r2); overflow: hidden; background: var(--ns-grond2); margin-bottom: 12px; }
.ns-stap-foto img { width: 100%; height: 100%; object-fit: cover; }
.ns-stap > span:nth-child(2) { font: 700 13px/1.2 var(--ns-tekst); letter-spacing: .12em; text-transform: uppercase; color: var(--ns-turk-tekst); }
.ns-stap b { font: 700 22px/1.25 var(--ns-kop); color: var(--ns-navy); }
.ns-stap > span:last-child { color: var(--ns-sub); font-size: 15px; }

/* praktijkvoorbeelden */
.ns-uitgelicht { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; background: var(--ns-vlak); border: 1px solid var(--ns-lijn); border-radius: var(--ns-r3); overflow: hidden; }
.ns-uitgelicht-foto { min-height: 440px; position: relative; background: var(--ns-grond2); }
.ns-uitgelicht-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) center; }
.ns-uitgelicht-tekst { padding: 56px; display: flex; flex-direction: column; gap: 20px; justify-content: center; }
.ns-uitgelicht-tekst .ns-h3 { font-size: 32px; font-weight: 800; font-stretch: 90%; line-height: 1.1; }
.ns-kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-top: 24px; margin-top: 8px; border-top: 1px solid var(--ns-lijn); }
.ns-kpi div { display: grid; gap: 4px; align-content: start; }
.ns-kpi b { font: 800 36px/1 var(--ns-kop); font-stretch: 88%; color: var(--ns-turk-tekst); font-variant-numeric: tabular-nums; }
.ns-kpi span { font-size: 14px; color: var(--ns-sub); line-height: 1.35; }
.ns-cases2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ns-goot); margin-top: var(--ns-goot); }
.ns-casekort { display: flex; flex-direction: column; gap: 14px; padding: 40px; border: 1px solid var(--ns-lijn); border-radius: var(--ns-r3); background: var(--ns-vlak); }
.ns-casekort .ns-kpi { grid-template-columns: minmax(0, 1fr); margin-top: auto; }
.ns-casekort .ns-kpi div { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 12px; }

/* tarief en kennismaking naast elkaar: knoppen onderaan op één lijn */
.ns-tweeluik { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ns-goot); }
.ns-tweeluik > div { border-radius: var(--ns-r3); padding: 48px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ns-tweeluik .ns-h3 { font-size: 32px; font-weight: 800; font-stretch: 90%; line-height: 1.1; }
.ns-tweeluik-voet { margin-top: auto; padding-top: 8px; }
.ns-tweeluik-tarief { background: var(--ns-grond); border: 1px solid var(--ns-lijn); }
.ns-minireken { display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: 16px; }
.ns-miniuit { display: grid; gap: 6px; padding-top: 20px; border-top: 1px solid var(--ns-lijn); }
.ns-miniuit span { font-size: 14px; color: var(--ns-sub); }
.ns-miniuit b { font: 800 44px/1 var(--ns-kop); font-stretch: 88%; color: var(--ns-navy); font-variant-numeric: tabular-nums; }
.ns-tweeluik-kennis { background: var(--ns-turk); color: var(--ns-op-turk); }
.ns-tweeluik-kennis .ns-h3, .ns-tweeluik-kennis .ns-oog { color: var(--ns-op-turk); }
.ns-tweeluik-kennis .ns-p { color: var(--ns-op-turk-sub); }
.ns-vormen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.ns-vormen a { display: grid; grid-template-columns: 24px minmax(0, 1fr) 20px; gap: 14px; align-items: center; min-height: 56px; padding: 12px 18px; border-radius: var(--ns-r); background: var(--ns-vlak); color: var(--ns-navy); font-weight: 600; font-size: 15px; line-height: 1.3; }
.ns-vormen a .ns-i { color: var(--ns-turk-tekst); }
.ns-vormen a .ns-i:last-child { color: var(--ns-navy); font-size: 20px; transition: transform .2s; }
.ns-vormen a:hover .ns-i:last-child { transform: translateX(3px); }
.ns-vormen a:hover { box-shadow: inset 0 0 0 2px var(--ns-navy); }

/* foto-tegels met tekst erop */
.ns-fototegels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ns-goot); }
.ns-fototegels.is-drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ns-fototegel { position: relative; aspect-ratio: 4 / 5; border-radius: var(--ns-r2); overflow: hidden; display: block; color: var(--ns-op-navy); background: var(--ns-navy); min-width: 0; }
.ns-fototegels.is-drie .ns-fototegel { aspect-ratio: 16 / 10; }
.ns-fototegel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ns-fototegel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 44, 70, 0) 38%, rgba(0, 44, 70, .88) 100%); z-index: 1; }
.ns-fototegel:hover > img { transform: scale(1.04); }
.ns-fototegel > div { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ns-fototegel > div > span:first-child { display: grid; gap: 2px; min-width: 0; }
.ns-fototegel b { font: 800 22px/1.15 var(--ns-kop); font-stretch: 92%; }
.ns-fototegel small { font-size: 14px; color: var(--ns-op-navy-sub); font-weight: 600; }
.ns-fototegel > div > .ns-i { font-size: 22px; color: var(--ns-turk); transition: transform .2s; }
.ns-fototegel:hover > div > .ns-i { transform: translateX(4px); }

/* vragen: helften */
.ns-vragen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ns-goot); align-items: start; }
.ns-vragen-links { display: grid; gap: 20px; justify-items: start; padding-right: 40px; }
.ns-belkaart { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 2px 14px; align-items: center; padding: 20px 24px; border-radius: var(--ns-r2); background: var(--ns-grond); margin-top: 8px; }
.ns-belkaart > .ns-i { grid-row: span 2; font-size: 24px; color: var(--ns-turk-tekst); }
.ns-belkaart b { font: 800 22px/1.2 var(--ns-kop); font-stretch: 92%; color: var(--ns-navy); }
.ns-belkaart span { font-size: 14px; color: var(--ns-sub); }
.ns-faq { display: grid; border-top: 1px solid var(--ns-lijn); }
.ns-faq details { border-bottom: 1px solid var(--ns-lijn); }
.ns-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 22px 0; font: 600 17px/1.4 var(--ns-tekst); color: var(--ns-inkt); }
.ns-faq summary::-webkit-details-marker { display: none; }
.ns-faq summary .ns-i { transition: transform .2s; color: var(--ns-sub); }
.ns-faq details[open] summary .ns-i { transform: rotate(45deg); }
.ns-faq details p { margin: 0 0 22px; color: var(--ns-sub); max-width: 62ch; }

/* slotblok */
.ns-slot { position: relative; background: var(--ns-turk); color: var(--ns-op-turk); border-radius: var(--ns-r3); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--ns-goot); align-items: center; padding: 64px; }
.ns-slot::after { content: ""; position: absolute; right: -60px; top: -40px; bottom: -40px; width: 380px; background: var(--ns-turk2); transform: skewX(-18deg); }
.ns-slot > * { position: relative; z-index: 1; }
.ns-slot-tekst { display: grid; gap: 16px; }
.ns-slot .ns-h2 { color: var(--ns-op-turk); }
.ns-slot .ns-p { color: var(--ns-op-turk-sub); font-size: 18px; }
.ns-slot-knoppen { display: grid; gap: 12px; }
.ns-slot-bel { text-align: center; font-weight: 700; font-size: 15px; }

/* keurmerken als kaarten */
.ns-keur { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ns-goot); }
.ns-keur-item { display: grid; grid-template-rows: 48px auto 1fr; gap: 12px; padding: 28px; border: 1px solid var(--ns-lijn); border-radius: var(--ns-r2); background: var(--ns-vlak); align-content: start; }
.ns-keur-item > img { height: 48px; width: auto; max-width: 140px; object-fit: contain; object-position: left center; }
.ns-keur-item > .ns-letterlogo { align-self: center; font-size: 30px; }
.ns-keur-item b { font-size: 17px; color: var(--ns-navy); }
.ns-keur-item span:last-child { font-size: 15px; color: var(--ns-sub); line-height: 1.5; }

/* drie kolommen met een lijn erboven (specialisme, over ons) */
.ns-kolommen3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ns-goot); }
.ns-kolommen3 > div { display: grid; gap: 20px; align-content: start; padding-top: 28px; border-top: 2px solid var(--ns-lijn); position: relative; }
.ns-kolommen3 > div::before { content: ""; position: absolute; left: 0; top: -2px; width: 48px; height: 2px; background: var(--ns-turk); }
.ns-kolommen3 b { font: 700 22px/1.25 var(--ns-kop); color: var(--ns-navy); }
.ns-kolommen3 span { color: var(--ns-sub); }

/* ───────── werknemers ───────── */
.ns-zoek { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 140px auto; background: var(--ns-vlak); border: 1px solid var(--ns-lijn); border-radius: var(--ns-r2); padding: 8px; }
.ns-zoek-vak { display: flex; align-items: center; gap: 10px; padding: 0 14px; min-width: 0; border-right: 1px solid var(--ns-lijn2); }
.ns-zoek-vak:nth-child(3) { border-right: 0; }
.ns-zoek-vak .ns-i { color: var(--ns-zwak); }
.ns-zoek-vak input, .ns-zoek-vak select { appearance: none; border: 0; outline: none; background: transparent; width: 100%; min-width: 0; height: 48px; font: 400 16px var(--ns-tekst); color: var(--ns-inkt); }
.ns-zoek-vak select { cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--ns-sub) 50%), linear-gradient(135deg, var(--ns-sub) 50%, transparent 50%); background-position: calc(100% - 10px) 21px, calc(100% - 5px) 21px; background-size: 5px 5px; background-repeat: no-repeat; }
.ns-zoekover { position: relative; z-index: 2; margin-top: -40px; display: grid; gap: 16px; }
.ns-zoekover .ns-zoek { box-shadow: var(--ns-schaduw); border-color: transparent; }
.ns-populair { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; font-size: 15px; color: var(--ns-sub); }
.ns-populair a { font: 600 15px var(--ns-tekst); color: var(--ns-turk-tekst); cursor: pointer; }
.ns-populair a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ns-vacs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ns-goot); }
.ns-vac { position: relative; display: flex; flex-direction: column; background: var(--ns-vlak); border: 1px solid var(--ns-lijn); border-radius: var(--ns-r2); cursor: pointer; transition: border-color .15s, box-shadow .15s; min-width: 0; overflow: hidden; }
.ns-vac:hover { border-color: #C3CFD7; box-shadow: var(--ns-schaduw); }
.ns-vac-foto { aspect-ratio: 16 / 9; overflow: hidden; background: var(--ns-grond2); }
.ns-vac-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ns-vac:hover .ns-vac-foto img { transform: scale(1.03); }
.ns-vac-lijf { flex: 1; display: flex; flex-direction: column; gap: 16px; padding: 24px; min-width: 0; }
.ns-vac-kop { display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 12px; align-items: start; }
.ns-vac-kop > div { display: grid; gap: 4px; min-width: 0; }
.ns-vac-titel { font: 700 18px/1.3 var(--ns-kop); color: var(--ns-navy); margin: 0; min-height: 2.6em; text-wrap: balance; }
.ns-vac-plaats { display: flex; align-items: center; gap: 4px; color: var(--ns-sub); font-size: 14px; }
.ns-vac-plaats .ns-i { font-size: 17px; }
.ns-vac-feiten { display: grid; gap: 8px; }
.ns-vac-feit { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 15px; color: var(--ns-inkt); min-width: 0; }
.ns-vac-feit .ns-i { color: var(--ns-zwak); font-size: 19px; }
.ns-vac-loon { font-weight: 700; color: var(--ns-navy); }
.ns-vac-plus { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: auto; }
.ns-vac-plus span { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ns-turk-tekst); }
.ns-vac-plus .ns-i { font-size: 18px; }
.ns-vac-voet { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--ns-lijn2); font-size: 14px; color: var(--ns-zwak); }
.ns-vac-voet .ns-i { color: var(--ns-turk-tekst); font-size: 20px; transition: transform .2s; }
.ns-vac:hover .ns-vac-voet .ns-i { transform: translateX(3px); }
.ns-vac-plus + .ns-vac-voet { margin-top: 0; }
.ns-vac-feiten + .ns-vac-voet { margin-top: auto; }
.ns-bewaar { appearance: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ns-lijn); background: var(--ns-vlak); display: grid; place-items: center; color: var(--ns-sub); cursor: pointer; flex: none; }
.ns-bewaar:hover { color: var(--ns-navy); border-color: #C3CFD7; }
.ns-bewaar.is-aan { color: var(--ns-turk-tekst); border-color: var(--ns-turk); background: var(--ns-turk-zacht); }
.ns-bewaar.is-aan .ns-i { font-variation-settings: 'FILL' 1, 'wght' 400, 'opsz' 24; }
/* vacature als rij in de zoeklijst */
.ns-vac.is-rij { flex-direction: row; }
.ns-vac.is-rij .ns-vac-foto { position: relative; width: 240px; flex: none; aspect-ratio: auto; min-height: 184px; }
.ns-vac.is-rij .ns-vac-foto img { position: absolute; inset: 0; }
.ns-vac.is-rij .ns-vac-titel { min-height: 0; }
.ns-vac.is-rij .ns-vac-feiten { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.ns-vac.is-rij .ns-vac-feit { display: inline-flex; gap: 8px; }
.ns-vac.is-rij .ns-vac-plus { margin-top: 0; }
.ns-vac.is-rij .ns-vac-voet { margin-top: auto; }

/* wat wij regelen */
.ns-twee { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ns-goot); align-items: center; }
.ns-twee > * { grid-column: 1 / span 6; min-width: 0; }
.ns-twee > .ns-twee-tekst:last-child { grid-column: 8 / -1; }
.ns-twee > .ns-twee-tekst:first-child { grid-column: 1 / span 5; }
.ns-twee > .ns-twee-tekst:first-child + * { grid-column: 7 / -1; }
.ns-twee-tekst { display: grid; gap: 20px; min-width: 0; justify-items: start; }
.ns-twee.ns-contact { align-items: start; }
.ns-contact .ns-twee-tekst > .ns-kaart { width: 100%; }
.ns-schuin { position: relative; border-radius: var(--ns-r2); overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 100%, 72px 100%, 0 calc(100% - 72px)); background: var(--ns-grond2); }
.ns-schuin img { width: 100%; height: 100%; object-fit: cover; }
.ns-beeld-staand { aspect-ratio: 4 / 4.4; }
.ns-regels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; margin-top: 8px; width: 100%; }
.ns-regel { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 14px; align-items: start; }
.ns-regel .ns-i { grid-row: span 2; font-size: 24px; color: var(--ns-turk-tekst); }
.ns-regel b { font: 700 16px/1.35 var(--ns-tekst); color: var(--ns-inkt); }
.ns-regel span { font-size: 15px; color: var(--ns-sub); line-height: 1.5; }

/* de app */
.ns-appblok { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ns-goot); align-items: center; background: var(--ns-turk); color: var(--ns-op-turk); border-radius: var(--ns-r3); padding: 64px 64px 0; overflow: hidden; }
.ns-appblok .ns-h2, .ns-appblok .ns-oog { color: var(--ns-op-turk); }
.ns-appblok .ns-p { color: var(--ns-op-turk-sub); }
.ns-appblok-tekst { display: grid; gap: 22px; padding-bottom: 64px; min-width: 0; justify-items: start; }
.ns-appblok-lijst { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ns-appblok-lijst li { display: flex; gap: 12px; align-items: center; font-size: 16px; }
.ns-appblok-lijst .ns-i { color: var(--ns-op-turk); }
.ns-toestel { align-self: end; width: 320px; justify-self: center; background: var(--ns-vlak); color: var(--ns-inkt); border-radius: 36px 36px 0 0; padding: 14px 14px 0; border: 8px solid #10364F; border-bottom: 0; }
.ns-toestel-scherm { border-radius: 24px 24px 0 0; background: var(--ns-grond); padding: 16px 14px 18px; display: grid; gap: 10px; }
.ns-toestel-kop { display: flex; justify-content: space-between; align-items: center; font: 700 15px/1.2 var(--ns-kop); color: var(--ns-navy); }
.ns-mini-dag { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 8px; align-items: center; background: var(--ns-vlak); border-radius: 10px; padding: 10px 12px; font-size: 14px; border: 1px solid var(--ns-lijn2); }
.ns-mini-dag b { font-weight: 700; }
.ns-mini-dag span { color: var(--ns-sub); font-variant-numeric: tabular-nums; }
.ns-mini-dag em { font-style: normal; font-weight: 700; color: var(--ns-navy); font-variant-numeric: tabular-nums; }
.ns-mini-totaal { display: flex; justify-content: space-between; font-size: 14px; font-weight: 700; padding: 4px 4px 0; }

/* band voor werkgevers (op de werknemerskant) */
.ns-wgband { background: var(--ns-turk); color: var(--ns-op-turk); }
.ns-wgband .ns-binnen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ns-goot); align-items: stretch; }
.ns-wgband-tekst { display: grid; gap: 20px; align-content: center; justify-items: start; padding-block: 88px; padding-right: 40px; }
.ns-wgband .ns-h2, .ns-wgband .ns-oog { color: var(--ns-op-turk); }
.ns-wgband .ns-p { color: var(--ns-op-turk-sub); }
.ns-wgband-foto { position: relative; min-height: 400px; clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%); background: var(--ns-navy2); margin-right: calc(-1 * max(0px, (100cqw - 1280px) / 2) - 32px); }
.ns-wgband-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.ns-band { background: var(--ns-turk); color: var(--ns-op-turk); }
.ns-band .ns-binnen { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--ns-goot); align-items: center; padding-block: 64px; }
.ns-band .ns-h2 { color: var(--ns-op-turk); }
.ns-band .ns-p { color: var(--ns-op-turk-sub); }
.ns-band-knoppen { display: flex; gap: 12px; flex-wrap: wrap; }

/* voet */
.ns-voet { background: var(--ns-navy); color: var(--ns-op-navy-sub); font-size: 15px; margin-top: auto; }
.ns-voet-boven { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ns-goot); padding-block: 80px 64px; }
.ns-voet-boven > div { grid-column: span 2; min-width: 0; }
.ns-voet-boven > .ns-voet-merk { grid-column: span 4; display: grid; gap: 20px; align-content: start; padding-right: 32px; }
.ns-voet-merk img { height: 32px; width: auto; }
.ns-voet-merk p { margin: 0; line-height: 1.6; max-width: 32ch; }
.ns-voet h4 { margin: 0 0 16px; color: var(--ns-op-navy); font: 700 15px/1.3 var(--ns-tekst); }
.ns-voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ns-voet ul a { cursor: pointer; }
.ns-voet ul a:hover { color: var(--ns-op-navy); }
.ns-voet-contact li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; }
.ns-voet-contact .ns-i { color: var(--ns-turk); font-size: 18px; margin-top: 3px; }
.ns-voet-keur { display: flex; flex-wrap: wrap; gap: 8px; }
.ns-voet-keur span { height: 40px; min-width: 56px; padding: 0 10px; border-radius: 6px; background: var(--ns-vlak); display: inline-flex; align-items: center; justify-content: center; }
.ns-voet-keur img { height: 26px; width: auto; }
.ns-voet-keur b { font: 800 16px var(--ns-kop); color: var(--ns-navy); }
.ns-voet-onder { border-top: 1px solid rgba(255, 255, 255, .12); }
.ns-voet-onder .ns-binnen { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 24px; font-size: 14px; }
.ns-voet-onder span { display: inline-flex; gap: 24px; flex-wrap: wrap; }
.ns-voet-onder a:hover { color: var(--ns-op-navy); }

/* ───────── paginakop zonder foto ───────── */
.ns-paginakop { padding-block: 64px 48px; border-bottom: 1px solid var(--ns-lijn); }
.ns-paginakop .ns-binnen { display: grid; gap: 16px; justify-items: start; }
.ns-paginakop .ns-lead { font-size: 18px; }

/* ───────── vacatures zoeken ───────── */
.ns-zoekkop { background: var(--ns-grond); border-bottom: 1px solid var(--ns-lijn); padding-block: 48px 40px; }
.ns-zoekkop .ns-binnen { display: grid; gap: 20px; }
.ns-zoekkop .ns-zoek { border-color: var(--ns-lijn); }
.ns-zoeklayout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ns-goot); padding-block: 40px 96px; align-items: start; }
.ns-filters { grid-column: span 3; display: grid; gap: 0; position: sticky; top: 104px; }
.ns-zoeklayout > section { grid-column: span 9; min-width: 0; }
.ns-filters-kop { display: flex; justify-content: space-between; align-items: center; min-height: 40px; padding-bottom: 12px; }
.ns-filters-kop .ns-h3 { font-size: 18px; }
.ns-filtergroep { border-top: 1px solid var(--ns-lijn); padding-block: 18px; display: grid; gap: 8px; }
.ns-filtergroep > b { font: 700 15px/1.3 var(--ns-tekst); margin-bottom: 4px; }
.ns-check { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 15px; cursor: pointer; min-height: 32px; }
.ns-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--ns-navy); }
.ns-check em { font-style: normal; color: var(--ns-zwak); font-size: 14px; font-variant-numeric: tabular-nums; }
.ns-resbalk { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 40px; margin-bottom: 20px; flex-wrap: wrap; }
.ns-resbalk .ns-h3 { font-size: 20px; }
.ns-resbalk-rechts { display: flex; gap: 10px; align-items: center; }
.ns-resbalk-rechts .ns-veld { width: 200px; }
.ns-filterknop { display: none; }
.ns-actief { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.ns-actief:empty { display: none; }
.ns-actief .ns-chip { background: var(--ns-navy-zacht); border-color: transparent; color: var(--ns-navy); }
.ns-resultaten { display: grid; gap: 16px; }
.ns-alarm { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 20px 24px; border-radius: var(--ns-r2); background: var(--ns-turk-zacht); }
.ns-alarm > .ns-i { font-size: 24px; color: var(--ns-turk-tekst); }
.ns-alarm b { font: 700 17px/1.3 var(--ns-kop); color: var(--ns-navy); }
.ns-alarm p { margin: 2px 0 0; color: var(--ns-sub); font-size: 15px; }
.ns-leeg { padding: 56px 24px; text-align: center; display: grid; gap: 12px; justify-items: center; border: 1px dashed var(--ns-lijn); border-radius: var(--ns-r2); grid-column: 1 / -1; }

/* ───────── vacature ───────── */
.ns-kruimel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; color: var(--ns-sub); padding-block: 24px 0; }
.ns-kruimel a { cursor: pointer; }
.ns-kruimel a:hover { color: var(--ns-navy); text-decoration: underline; }
.ns-kruimel .ns-i { font-size: 16px; }
.ns-detailkop { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ns-goot); padding-block: 24px 40px; border-bottom: 1px solid var(--ns-lijn); align-items: start; }
.ns-detailkop > div:first-child { grid-column: span 8; display: grid; gap: 16px; min-width: 0; }
.ns-detailkop .ns-h1 { font-size: 44px; }
.ns-detailkop-knoppen { grid-column: span 4; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.ns-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 16px; color: var(--ns-inkt); }
.ns-meta span { display: inline-flex; align-items: center; gap: 8px; }
.ns-meta .ns-i { color: var(--ns-turk-tekst); }
.ns-detail { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ns-goot); padding-block: 48px 96px; align-items: start; }
.ns-inhoud { grid-column: span 8; display: grid; gap: 40px; min-width: 0; padding-right: 40px; }
.ns-inhoud section { display: grid; gap: 16px; }
.ns-inhoud ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ns-inhoud li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; color: var(--ns-inkt); line-height: 1.55; }
.ns-inhoud li::before { content: ""; width: 6px; height: 6px; margin: 10px 0 0 4px; background: var(--ns-turk); border-radius: 50%; }
.ns-inhoud p { margin: 0; color: var(--ns-inkt); max-width: 68ch; }
.ns-detail-foto { aspect-ratio: 21 / 9; border-radius: var(--ns-r2); overflow: hidden; background: var(--ns-grond2); }
.ns-detail-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 70%; }
.ns-zij { grid-column: span 4; position: sticky; top: 104px; display: grid; gap: 16px; }
.ns-loonblok { padding: 24px; display: grid; gap: 18px; }
.ns-loonblok-bedrag { display: grid; gap: 2px; }
.ns-loonblok-bedrag b { font: 800 30px/1.15 var(--ns-kop); font-stretch: 92%; color: var(--ns-navy); font-variant-numeric: tabular-nums; }
.ns-loonblok-bedrag span { color: var(--ns-sub); font-size: 15px; }
.ns-feitlijst { display: grid; margin: 0; }
.ns-feitlijst > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--ns-lijn2); font-size: 15px; }
.ns-feitlijst dt { color: var(--ns-sub); }
.ns-feitlijst dd { margin: 0; font-weight: 600; text-align: right; }
.ns-recruiter { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 20px 24px; }
.ns-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--ns-navy-zacht); color: var(--ns-navy); display: grid; place-items: center; font: 700 17px/1 var(--ns-kop); grid-row: span 2; flex: none; }
.ns-avatar.is-klein { width: 36px; height: 36px; font-size: 14px; grid-row: auto; }
.ns-avatar.is-turk { background: var(--ns-turk-zacht); color: var(--ns-turk-tekst); }
.ns-recruiter b { font-size: 16px; }
.ns-recruiter span { color: var(--ns-sub); font-size: 14px; }
.ns-recruiter-knoppen { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.ns-vertaal { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: var(--ns-r); background: var(--ns-grond); color: var(--ns-sub); font-size: 15px; }
.ns-vertaal .ns-i { color: var(--ns-turk-tekst); }
.ns-werkgever { display: grid; gap: 6px; padding: 24px; border-radius: var(--ns-r2); background: var(--ns-grond); }
.ns-werkgever p { color: var(--ns-sub); font-size: 15px; }
.ns-mobiel-cta { display: none; }

/* ───────── formulieren: kop over de volle breedte, daaronder formulier (8) en samenvatting (4) ───────── */
.ns-flow { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px var(--ns-goot); padding-block: 56px 96px; align-items: start; }
.ns-flow-kop { grid-column: 1 / span 8; display: grid; gap: 16px; }
.ns-flow-kop .ns-h1 { font-size: 44px; }
.ns-flow-hoofd { grid-column: 1 / span 8; display: grid; gap: 24px; min-width: 0; }
.ns-flow-kop ~ .ns-flow-hoofd, .ns-flow-kop ~ .ns-samenvat { grid-row: 2; }
.ns-samenvat { grid-column: 9 / -1; position: sticky; top: 104px; display: grid; gap: 16px; }
.ns-voortgang { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.ns-vstap { display: grid; gap: 10px; font-size: 14px; color: var(--ns-zwak); font-weight: 600; }
.ns-vstap::before { content: ""; height: 4px; border-radius: 2px; background: var(--ns-lijn); }
.ns-vstap.is-klaar::before, .ns-vstap.is-aan::before { background: var(--ns-turk); }
.ns-vstap.is-aan { color: var(--ns-navy); font-weight: 700; }
.ns-vstap.is-klaar { color: var(--ns-inkt); }
.ns-formkaart { padding: 40px; display: grid; gap: 28px; }
.ns-formkaart-kop { display: grid; gap: 8px; justify-items: start; }
.ns-formvoet { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding-top: 24px; border-top: 1px solid var(--ns-lijn2); flex-wrap: wrap; }
.ns-drop { display: grid; justify-items: center; gap: 10px; padding: 40px 24px; border: 2px dashed #C6D1D9; border-radius: var(--ns-r2); background: var(--ns-grond); text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.ns-drop:hover, .ns-drop.is-sleep { border-color: var(--ns-turk); background: var(--ns-turk-zacht); }
.ns-drop > .ns-i { font-size: 34px; color: var(--ns-turk-tekst); }
.ns-drop b { font-size: 17px; }
.ns-drop span { color: var(--ns-sub); font-size: 15px; }
.ns-drop input { display: none; }
.ns-bestand { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 18px; border: 1px solid var(--ns-lijn); border-radius: var(--ns-r); }
.ns-bestand > .ns-i { font-size: 24px; color: var(--ns-goed); }
.ns-bestand div { display: grid; gap: 2px; min-width: 0; }
.ns-bestand b { overflow-wrap: anywhere; }
.ns-bestand span { color: var(--ns-sub); font-size: 14px; }
.ns-uitgelezen { display: grid; gap: 20px; padding: 24px; border-radius: var(--ns-r2); background: var(--ns-grond); }
.ns-uitgelezen-kop { display: flex; gap: 10px; align-items: center; font-weight: 700; }
.ns-uitgelezen-kop .ns-i { color: var(--ns-turk-tekst); }
.ns-of { display: flex; align-items: center; gap: 14px; color: var(--ns-zwak); font-size: 14px; }
.ns-of::before, .ns-of::after { content: ""; flex: 1; height: 1px; background: var(--ns-lijn); }
.ns-samenvat-vac { display: grid; gap: 16px; padding: 24px; }
.ns-samenvat-vac .ns-vac-titel { font-size: 18px; min-height: 0; }
.ns-samenvat-vac .ns-vac-feiten { gap: 6px; }
.ns-geruststel { display: grid; gap: 12px; padding: 24px; border-radius: var(--ns-r2); background: var(--ns-grond); justify-items: start; }
.ns-geruststel > div { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: 15px; color: var(--ns-inkt); }
.ns-geruststel .ns-i { color: var(--ns-turk-tekst); font-size: 20px; }
.ns-klaar { display: grid; gap: 24px; justify-items: start; }
.ns-klaar-vink { width: 64px; height: 64px; border-radius: 50%; background: var(--ns-goed-zacht); color: var(--ns-goed); display: grid; place-items: center; }
.ns-klaar-vink .ns-i { font-size: 34px; overflow: visible; }
.ns-klaar > .ns-kaart { width: 100%; }
.ns-tijdlijn { display: grid; width: 100%; }
.ns-tl { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; position: relative; padding-bottom: 22px; }
.ns-tl::before { content: ""; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: var(--ns-lijn); }
.ns-tl:last-child { padding-bottom: 0; }
.ns-tl:last-child::before { display: none; }
.ns-tl-punt { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--ns-lijn); background: var(--ns-vlak); display: grid; place-items: center; color: var(--ns-zwak); }
.ns-tl-punt .ns-i { font-size: 18px; }
.ns-tl.is-klaar .ns-tl-punt { background: var(--ns-goed); border-color: var(--ns-goed); color: var(--ns-op-navy); }
.ns-tl.is-nu .ns-tl-punt { border-color: var(--ns-turk); color: var(--ns-turk-tekst); }
.ns-tl > div:last-child { display: grid; gap: 2px; padding-top: 4px; }
.ns-tl b { font-size: 16px; }
.ns-tl > div:last-child span { color: var(--ns-sub); font-size: 15px; }

/* ───────── werken in Nederland ───────── */
.ns-diensten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ns-goot); }
.ns-dienst { display: grid; gap: 12px; align-content: start; }
.ns-dienst-foto { aspect-ratio: 4 / 3; border-radius: var(--ns-r2); overflow: hidden; background: var(--ns-grond2); margin-bottom: 8px; }
.ns-dienst-foto img { width: 100%; height: 100%; object-fit: cover; }
.ns-dienst .ns-h3 { font-size: 20px; }
.ns-dienst .ns-p { font-size: 15px; }

/* ───────── tarief ───────── */
.ns-reken { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ns-goot); padding-block: 48px 96px; align-items: start; }
.ns-reken > form { grid-column: span 8; }
.ns-uitkomst { grid-column: span 4; position: sticky; top: 104px; background: var(--ns-turk); color: var(--ns-op-turk); border-radius: var(--ns-r3); padding: 32px; display: grid; gap: 20px; }
.ns-uitkomst-bedrag { display: grid; gap: 4px; }
.ns-uitkomst-bedrag span { color: var(--ns-op-turk-sub); font-size: 15px; }
.ns-uitkomst-bedrag b { font: 800 48px/1.05 var(--ns-kop); font-stretch: 88%; font-variant-numeric: tabular-nums; }
.ns-opbouw { display: grid; }
.ns-opbouw > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--ns-op-turk-lijn); font-size: 15px; }
.ns-opbouw span { color: var(--ns-op-turk-sub); }
.ns-opbouw small { display: block; font-size: 14px; }
.ns-opbouw b { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.ns-opbouw > div.is-som { border-top-color: rgba(0, 44, 70, .45); }
.ns-opbouw > div.is-som span, .ns-opbouw > div.is-som b { color: var(--ns-op-turk); font-weight: 700; }
.ns-uitkomst .ns-klein { color: var(--ns-op-turk-sub); }
.ns-schuif { width: 100%; accent-color: var(--ns-navy); height: 28px; }
.ns-schuif-rij { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 16px; align-items: center; }
.ns-melding { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: var(--ns-r); background: var(--ns-turk-zacht); color: var(--ns-inkt); font-size: 15px; }
.ns-melding .ns-i { color: var(--ns-turk-tekst); }
.ns-melding.is-let { background: var(--ns-let-zacht); }
.ns-melding.is-let .ns-i { color: var(--ns-let); }
.ns-melding.is-goed { background: var(--ns-goed-zacht); }
.ns-melding.is-goed .ns-i { color: var(--ns-goed); }
.ns-melding > div { display: grid; gap: 2px; min-width: 0; }

/* ───────── over ons en contact ───────── */
.ns-lijst { display: grid; }
.ns-rij { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 24px; border-top: 1px solid var(--ns-lijn2); min-height: 68px; }
.ns-rij:first-child { border-top: 0; }
.ns-rij > .ns-i { font-size: 22px; color: var(--ns-navy); }
.ns-rij > .ns-i.is-let { color: var(--ns-let); }
.ns-rij > .ns-i.is-goed { color: var(--ns-goed); }
.ns-rij > .ns-i.is-turk { color: var(--ns-turk-tekst); }
.ns-rij > div { display: grid; gap: 2px; min-width: 0; }
.ns-rij b { font-size: 15px; font-weight: 600; }
.ns-rij span { color: var(--ns-sub); font-size: 14px; }
.ns-rij-acties { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.ns-rij.is-klik { cursor: pointer; }
.ns-rij.is-klik:hover { background: var(--ns-grond); }

/* ───────── inloggen ───────── */
.ns-inlog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: calc(100vh - 121px); }
.ns-inlog-form { display: grid; align-content: center; justify-items: center; padding: 64px 32px; }
.ns-inlog-kaart { width: 100%; max-width: 440px; display: grid; gap: 22px; }
.ns-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; background: var(--ns-grond); border-radius: 12px; }
.ns-tab { appearance: none; border: 0; background: transparent; height: 44px; border-radius: 9px; font: 600 15px var(--ns-tekst); color: var(--ns-sub); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ns-tab.is-aan { background: var(--ns-vlak); color: var(--ns-navy); box-shadow: var(--ns-schaduw-klein); }
.ns-inlog-beeld { position: relative; background: var(--ns-navy); overflow: hidden; }
.ns-inlog-beeld img { width: 100%; height: 100%; object-fit: cover; }
.ns-inlog-beeld-tekst { position: absolute; left: 40px; right: 40px; bottom: 40px; background: var(--ns-vlak); border-radius: var(--ns-r2); padding: 24px; display: grid; gap: 8px; box-shadow: var(--ns-schaduw); }
.ns-inlog-beeld-tekst b { font: 700 19px/1.3 var(--ns-kop); color: var(--ns-navy); }
.ns-inlog-beeld-tekst span { color: var(--ns-sub); font-size: 15px; }

/* ───────── beeldbank ───────── */
.ns-beeldbank { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px var(--ns-goot); }
.ns-bb { margin: 0; display: grid; gap: 12px; align-content: start; min-width: 0; }
.ns-bb-foto { aspect-ratio: 4 / 3; border-radius: var(--ns-r2); overflow: hidden; background: var(--ns-grond2); }
.ns-bb-foto img { width: 100%; height: 100%; object-fit: cover; }
.ns-bb figcaption { display: grid; gap: 6px; justify-items: start; }
.ns-bb b { font-size: 15px; }

/* ───────── de portalen ───────── */
.ns-app { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; background: var(--ns-grond); flex: 1; }
.ns-zijbalk { position: sticky; top: env(safe-area-inset-top, 0px); height: 100vh; display: flex; flex-direction: column; gap: 6px; background: var(--ns-vlak); border-right: 1px solid var(--ns-lijn); padding: 24px 16px 16px; overflow-y: auto; }
.ns-zb-logo { padding: 0 12px 16px; cursor: pointer; }
.ns-zb-logo img { height: 28px; width: auto; }
.ns-zb-soort { margin: 0 12px 10px; font: 700 13px/1.3 var(--ns-tekst); letter-spacing: .06em; text-transform: uppercase; color: var(--ns-turk-tekst); }
.ns-zb-wie { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 12px; align-items: center; padding: 12px; margin-bottom: 8px; border-radius: var(--ns-r2); background: var(--ns-grond); }
.ns-zb-wie .ns-avatar { width: 40px; height: 40px; font-size: 15px; }
.ns-zb-wie b { font-size: 15px; line-height: 1.25; }
.ns-zb-wie span { font-size: 13px; color: var(--ns-sub); line-height: 1.3; }
.ns-zb-nav { display: grid; gap: 2px; }
.ns-zb-nav a { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; height: 40px; padding: 0 12px; border-radius: var(--ns-r); font-weight: 600; font-size: 15px; color: var(--ns-sub); cursor: pointer; }
.ns-zb-nav a:hover { background: var(--ns-grond); color: var(--ns-inkt); }
.ns-zb-nav a.is-aan { background: var(--ns-turk); color: var(--ns-op-turk); }
.ns-zb-nav a.is-aan .ns-i { color: var(--ns-op-turk); }
.ns-zb-nav em { font-style: normal; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--ns-navy); color: var(--ns-op-navy); font: 700 13px/22px var(--ns-tekst); text-align: center; }
.ns-zb-voet { margin-top: auto; display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid var(--ns-lijn2); }
.ns-zb-voet :is(a, .ns-zb-uit) { display: flex; gap: 12px; align-items: center; height: 40px; padding: 0 12px; border-radius: var(--ns-r); color: var(--ns-sub); font-size: 15px; cursor: pointer; }
.ns-zb-voet :is(a, .ns-zb-uit):hover { background: var(--ns-grond); color: var(--ns-inkt); }
.ns-mtop { display: none; }
.ns-onderbalk { display: none; }
.ns-hoofd { min-width: 0; padding: 40px 40px 64px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-content: start; max-width: 1320px; width: 100%; }
.ns-pagkop { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 8px; }
.ns-pagkop > div:first-child { display: grid; gap: 6px; min-width: 0; }
.ns-pagtitel { font: 800 34px/1.15 var(--ns-kop); font-stretch: 90%; color: var(--ns-navy); margin: 0; }
.ns-pagsub { color: var(--ns-sub); margin: 0; font-size: 16px; }
.ns-pagknoppen { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ns-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.ns-k4 { grid-column: span 4; } .ns-k5 { grid-column: span 5; } .ns-k6 { grid-column: span 6; } .ns-k7 { grid-column: span 7; } .ns-k8 { grid-column: span 8; } .ns-k12 { grid-column: 1 / -1; }
.ns-tegels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.ns-tegels.is-drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ns-tegel { background: var(--ns-vlak); border: 1px solid var(--ns-lijn); border-radius: var(--ns-r2); padding: 24px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ns-tegel > span { color: var(--ns-sub); font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.ns-tegel > span .ns-i { font-size: 18px; color: var(--ns-turk-tekst); }
.ns-tegel > b { font: 800 34px/1.1 var(--ns-kop); font-stretch: 90%; color: var(--ns-navy); font-variant-numeric: tabular-nums; margin-top: 4px; }
.ns-tegel > small { color: var(--ns-sub); font-size: 14px; }
.ns-tegel .ns-link { font-size: 15px; margin-top: auto; padding-top: 10px; }
.ns-tegel .ns-ef { align-self: flex-start; margin-top: 6px; }
.ns-tegel.is-actie { border-color: var(--ns-turk); box-shadow: inset 0 0 0 1px var(--ns-turk); }
.ns-paren { display: grid; margin: 0; padding: 0 24px 8px; }
.ns-paren > div { display: grid; grid-template-columns: minmax(min-content, 1fr) minmax(min-content, auto); gap: 12px; padding: 12px 0; border-top: 1px solid var(--ns-lijn2); font-size: 15px; }
.ns-paren > div:first-child { border-top: 0; }
.ns-paren dt { color: var(--ns-sub); }
.ns-paren dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: break-word; }
.ns-balkje { height: 8px; border-radius: 4px; background: var(--ns-lijn2); overflow: hidden; }
.ns-balkje i { display: block; height: 100%; width: var(--p, 0%); background: var(--ns-turk); border-radius: 4px; }

/* uren invullen */
.ns-week { display: flex; align-items: center; gap: 8px; }
.ns-week b { font: 600 16px/1.2 var(--ns-tekst); min-width: 216px; text-align: center; font-variant-numeric: tabular-nums; }
.ns-dagen { display: grid; }
.ns-dagkop, .ns-dag { display: grid; grid-template-columns: 128px 150px 118px 118px 120px 84px minmax(0, 1fr); gap: 12px; align-items: center; padding: 0 24px; }
.ns-dagkop { min-height: 44px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ns-zwak); border-bottom: 1px solid var(--ns-lijn2); }
.ns-dagkop span:nth-child(6) { text-align: right; }
.ns-dag { min-height: 68px; border-bottom: 1px solid var(--ns-lijn2); }
.ns-dag.is-weekend { background: var(--ns-grond); }
.ns-dag-naam { display: grid; gap: 0; }
.ns-dag-naam b { font-size: 15px; }
.ns-dag-naam span { font-size: 14px; color: var(--ns-sub); }
.ns-dag .ns-veld { height: 40px; font-size: 15px; padding: 0 10px; }
.ns-dag select.ns-veld { padding-right: 30px; background-position: calc(100% - 16px) 17px, calc(100% - 11px) 17px; }
.ns-dag-uren { font: 700 16px/1 var(--ns-tekst); font-variant-numeric: tabular-nums; color: var(--ns-navy); text-align: right; }
.ns-dag-noot { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.ns-dag-mob { display: none; }
.ns-urentotaal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 20px; align-items: center; padding: 20px 24px; }
.ns-urentotaal > div { display: grid; gap: 2px; }
.ns-urentotaal span { color: var(--ns-sub); font-size: 14px; }
.ns-urentotaal b { font: 800 24px/1.2 var(--ns-kop); font-stretch: 92%; color: var(--ns-navy); font-variant-numeric: tabular-nums; }
.ns-urentotaal .ns-pagknoppen { justify-content: flex-end; }
.ns-extra { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 20px 24px 24px; border-top: 1px solid var(--ns-lijn2); }

/* tabellen */
.ns-tabelvak { overflow-x: auto; }
.ns-tabel { width: 100%; border-collapse: collapse; font-size: 15px; }
.ns-tabel th { text-align: left; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ns-zwak); padding: 12px 10px; border-bottom: 1px solid var(--ns-lijn); white-space: normal; background: var(--ns-vlak); vertical-align: bottom; }
.ns-tabel td { padding: 12px 10px; border-bottom: 1px solid var(--ns-lijn2); vertical-align: middle; white-space: nowrap; }
.ns-tabel tr:last-child td { border-bottom: 0; }
.ns-tabel th:first-child, .ns-tabel td:first-child { padding-left: 24px; }
.ns-tabel th:last-child, .ns-tabel td:last-child { padding-right: 24px; }
.ns-tabel .is-getal { text-align: right; font-variant-numeric: tabular-nums; }
.ns-tabel .is-midden { text-align: center; }
.ns-tabel .ns-rij-acties { flex-wrap: nowrap; }
.ns-tabel tfoot td { font-weight: 700; border-top: 1px solid var(--ns-lijn); border-bottom: 0; background: var(--ns-grond); }
.ns-tabel tbody tr.is-klik { cursor: pointer; }
.ns-tabel tbody tr.is-klik:hover td { background: var(--ns-grond); }
.ns-tabel tbody tr.is-gekozen td { background: var(--ns-turk-zacht); }
.ns-tabel input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--ns-navy); margin: 0; vertical-align: middle; }
.ns-tabel td.is-wrap { white-space: normal; min-width: 200px; }
.ns-tabel td.is-omloop { white-space: normal; overflow-wrap: anywhere; }
.ns-wiecel { display: grid; grid-template-columns: auto minmax(min-content, auto); gap: 0 12px; align-items: center; }
.ns-wiecel span, .ns-wiecel b { white-space: normal; }
.ns-wiecel b { min-width: 0; }
.ns-wiecel .ns-avatar { grid-row: span 2; }
.ns-wiecel b { font-weight: 600; }
.ns-wiecel span { color: var(--ns-sub); font-size: 14px; }
.ns-uurcel { font-variant-numeric: tabular-nums; color: var(--ns-inkt); }
.ns-uurcel.is-leeg { color: var(--ns-zwak); }
.ns-uurcel.is-anders { color: var(--ns-let); font-weight: 700; }
.ns-kaarten-mob { display: none; }
.ns-mobkaart { display: grid; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--ns-lijn2); }
.ns-mobkaart:first-child { border-top: 0; }
.ns-mobkaart-kop { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.ns-mobkaart .ns-wiecel { grid-template-columns: 36px minmax(0, 1fr); min-width: 0; }
.ns-mobkaart-uren { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; font-size: 13px; max-width: 560px; }
.ns-mobkaart-uren span { color: var(--ns-sub); }
.ns-mobkaart-uren b { font-variant-numeric: tabular-nums; font-size: 14px; }
.ns-mobkaart-voet { display: flex; gap: 8px; max-width: 560px; }
.ns-mobkaart-voet .ns-knop { flex: 1; }
.ns-filterbalk { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 14px 24px; border-bottom: 1px solid var(--ns-lijn2); }
.ns-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--ns-grond); border-radius: 10px; flex-wrap: wrap; }
.ns-seg button { appearance: none; border: 0; background: transparent; height: 34px; padding: 0 12px; border-radius: 8px; font: 600 14px var(--ns-tekst); color: var(--ns-sub); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ns-seg button.is-aan { background: var(--ns-vlak); color: var(--ns-navy); box-shadow: var(--ns-schaduw-klein); }
.ns-seg em { font-style: normal; color: var(--ns-zwak); font-weight: 500; font-variant-numeric: tabular-nums; }

/* rooster */
.ns-rooster { display: grid; grid-template-columns: 110px repeat(7, minmax(0, 1fr)); gap: 8px; padding: 20px 24px 24px; }
.ns-rooster-kop { font-size: 14px; color: var(--ns-sub); text-align: center; display: grid; }
.ns-rooster-kop b { color: var(--ns-inkt); font-size: 15px; }
.ns-rooster-deel { font-size: 14px; color: var(--ns-sub); display: flex; align-items: center; font-weight: 600; }
.ns-blok { appearance: none; height: 48px; border-radius: var(--ns-r); border: 1px dashed #C6D1D9; background: var(--ns-vlak); color: var(--ns-zwak); font: 600 13px/1.2 var(--ns-tekst); cursor: pointer; display: grid; place-items: center; padding: 0 4px; text-align: center; }
.ns-blok.is-aan { border: 1px solid var(--ns-turk); background: var(--ns-turk-zacht); color: var(--ns-turk-tekst); }
.ns-blok.is-dienst { border: 1px solid var(--ns-navy); background: var(--ns-navy); color: var(--ns-op-navy); cursor: default; }
.ns-legenda { display: flex; gap: 18px; flex-wrap: wrap; padding: 0 24px 20px; font-size: 14px; color: var(--ns-sub); }
.ns-legenda span { display: inline-flex; align-items: center; gap: 8px; }
.ns-legenda i { width: 16px; height: 16px; border-radius: 4px; border: 1px dashed #C6D1D9; }
.ns-legenda i.is-aan { border: 1px solid var(--ns-turk); background: var(--ns-turk-zacht); }
.ns-legenda i.is-dienst { background: var(--ns-navy); border-color: var(--ns-navy); }

/* loonstrook */
.ns-strook { display: grid; padding: 4px 24px 20px; }
.ns-strook-groep { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ns-zwak); padding: 18px 0 6px; }
.ns-strookregel { display: grid; grid-template-columns: minmax(0, 1fr) max-content 110px; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--ns-lijn2); font-size: 15px; }
.ns-strookregel span:nth-child(2), .ns-strookregel span:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; }
.ns-strookregel span:nth-child(2) { color: var(--ns-sub); }
.ns-strookregel.is-som { font-weight: 700; border-bottom: 0; border-top: 1px solid var(--ns-inkt); }
.ns-strookregel.is-netto { font: 700 19px/1.3 var(--ns-kop); color: var(--ns-navy); border-bottom: 0; padding-top: 14px; }

/* documenten */
.ns-doc { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 16px 24px; border-top: 1px solid var(--ns-lijn2); min-height: 72px; }
.ns-doc:first-child { border-top: 0; }
.ns-doc > .ns-i { font-size: 22px; color: var(--ns-navy); }
.ns-doc > div { display: grid; gap: 2px; min-width: 0; }
.ns-doc b { font-size: 15px; }
.ns-doc span { font-size: 14px; color: var(--ns-sub); }

/* kantoor: bord met sollicitaties */
.ns-bord { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 16px; overflow-x: auto; padding-bottom: 6px; }
.ns-kolom { background: var(--ns-grond2); border-radius: var(--ns-r2); padding: 12px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.ns-kolom-kop { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 2px; font-weight: 700; font-size: 15px; }
.ns-kolom-kop span { color: var(--ns-sub); font-weight: 600; font-variant-numeric: tabular-nums; }
.ns-kkaart { background: var(--ns-vlak); border-radius: var(--ns-r2); padding: 14px; display: grid; gap: 8px; border: 1px solid var(--ns-lijn); cursor: pointer; }
.ns-kkaart:hover { border-color: #C3CFD7; box-shadow: var(--ns-schaduw-klein); }
.ns-kkaart-kop { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.ns-kkaart-kop b { font-size: 15px; line-height: 1.3; }
.ns-kkaart > span { font-size: 14px; color: var(--ns-sub); }
.ns-kkaart .ns-vac-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ns-kkaart .ns-vac-tags .ns-tag { height: 26px; }
.ns-kkaart-voet { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--ns-zwak); }
.ns-vac-tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* lade en dialoog (buiten het doek, op het scherm) */
.ns-laag { position: fixed; inset: 0; z-index: 70; background: rgba(0, 20, 34, .42); display: flex; justify-content: flex-end; animation: ns-in .18s ease; }
.ns-laag.is-midden { justify-content: center; align-items: center; padding: 24px; }
@keyframes ns-in { from { background: rgba(0, 20, 34, 0); } }
.ns-lade { width: min(560px, 100%); height: 100%; background: var(--ns-vlak); display: flex; flex-direction: column; box-shadow: -20px 0 50px rgba(0, 20, 34, .18); animation: ns-lade .22s ease; font: 400 16px/1.55 var(--ns-tekst); color: var(--ns-inkt); }
.ns-laag.is-midden .ns-lade { height: auto; max-height: calc(100vh - 48px); width: min(560px, 100%); border-radius: var(--ns-r3); animation: ns-dlg .2s ease; }
@keyframes ns-lade { from { transform: translateX(40px); opacity: .4; } }
@keyframes ns-dlg { from { transform: translateY(12px); opacity: .4; } }
.ns-lade * { box-sizing: border-box; }
.ns-lade-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 22px 24px 18px; border-bottom: 1px solid var(--ns-lijn2); padding-top: max(22px, env(safe-area-inset-top, 0px)); }
.ns-laag.is-midden .ns-lade-kop { padding-top: 22px; }
.ns-lade-kop > div { display: grid; gap: 4px; min-width: 0; }
.ns-lade-lijf { flex: 1; overflow-y: auto; padding: 20px 24px; display: grid; gap: 18px; align-content: start; }
.ns-lade-voet { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--ns-lijn2); flex-wrap: wrap; padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
.ns-lade .ns-strook, .ns-lade .ns-paren { padding-left: 0; padding-right: 0; }
.ns-lade .ns-filtergroep:first-of-type { border-top: 0; }
.ns-teken { height: 150px; border: 1px dashed #C6D1D9; border-radius: var(--ns-r); background: var(--ns-grond); touch-action: none; width: 100%; cursor: crosshair; display: block; }
.ns-toast { position: fixed; left: 50%; bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 16px)); transform: translate(-50%, 12px); z-index: 90; background: var(--ns-navy); color: var(--ns-op-navy); padding: 14px 18px; border-radius: var(--ns-r2); font: 500 15px/1.4 var(--ns-tekst); display: flex; gap: 10px; align-items: center; box-shadow: var(--ns-schaduw); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: calc(100vw - 32px); }
.ns-toast.is-zicht { opacity: 1; transform: translate(-50%, 0); }
.ns-toast .ns-i { color: var(--ns-turk); }

/* tekst op een turkoois vlak */
:is(.ns-banner, .ns-band, .ns-appblok, .ns-wgband, .ns-slot, .ns-tweeluik-kennis, .ns-uitkomst) :is(.ns-p, .ns-lead) { color: var(--ns-op-turk-sub); }

/* op een turkoois vlak is de hoofdknop navy, de randknop navy omlijnd */
:is(.ns-banner, .ns-band, .ns-appblok, .ns-wgband, .ns-uitkomst, .ns-slot, .ns-tweeluik-kennis) .ns-knop:not(.ns-knop-licht):not(.ns-knop-rand):not(.ns-knop-stil) { background: var(--ns-navy); border-color: var(--ns-navy); color: var(--ns-op-navy); }
:is(.ns-banner, .ns-band, .ns-appblok, .ns-wgband, .ns-uitkomst, .ns-slot, .ns-tweeluik-kennis) .ns-knop:not(.ns-knop-licht):not(.ns-knop-rand):not(.ns-knop-stil):hover { background: var(--ns-navy2); border-color: var(--ns-navy2); }
:is(.ns-banner, .ns-band, .ns-appblok, .ns-wgband, .ns-uitkomst, .ns-slot, .ns-tweeluik-kennis) .ns-knop-rand { background: transparent; color: var(--ns-op-turk); border-color: rgba(0, 44, 70, .4); }
:is(.ns-banner, .ns-band, .ns-appblok, .ns-wgband, .ns-uitkomst, .ns-slot, .ns-tweeluik-kennis) .ns-knop-rand:hover { background: rgba(255, 255, 255, .25); border-color: var(--ns-op-turk); }
:is(.ns-banner, .ns-slot) .ns-knop-licht { border-color: var(--ns-vlak); }
.ns-banner .ns-zoek .ns-knop, .ns-zoekover .ns-zoek .ns-knop { background: var(--ns-turk); border-color: var(--ns-turk); color: var(--ns-op-turk); }

/* ───────── laptop (1280) ───────── */
@container ns (max-width: 1280px) {
  .ns-kop-rij { gap: 28px; }
  .ns-nav a, .ns-navknop { padding: 0 8px; }
  .ns-app { grid-template-columns: 232px minmax(0, 1fr); }
  .ns-hoofd { padding: 32px 28px 56px; }
  .ns-tabel th, .ns-tabel td { padding-left: 10px; padding-right: 10px; }
  .ns-tabel .is-kolom-status { display: none; }
  .ns-stelling > div:first-child, .ns-vragen-links, .ns-wgband-tekst { padding-right: 16px; }
  .ns-inhoud { padding-right: 0; }
}
/* ───────── tablet liggend (1180) ───────── */
@container ns (max-width: 1180px) {
  .ns-doek { --ns-goot: 24px; --ns-sectie: 96px; --ns-kopruimte: 48px; }
  .ns-kop-rij { gap: 24px; }
  .ns-nav a, .ns-navknop { font-size: 15px; padding: 0 9px; }
  .ns-kop-link { display: none; }
  .ns-pre-rechts > .is-bel { display: none; }
  .ns-bewijs-item { grid-template-columns: 60px minmax(0, 1fr); gap: 12px; }
  .ns-bewijs-logo img { max-width: 60px; }
  .ns-specraster, .ns-poolraster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ns-poolvraag { grid-column: 1 / -1; }
  .ns-keur, .ns-diensten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ns-uitgelicht-tekst { padding: 40px; }
  .ns-tweeluik > div { padding: 40px; }
  .ns-casekort { padding: 32px; }
  .ns-slot { padding: 48px; }
  .ns-voet-boven > div { grid-column: span 3; }
  .ns-voet-boven > .ns-voet-merk { grid-column: 1 / -1; padding-right: 0; }
  .ns-app { grid-template-columns: 232px minmax(0, 1fr); }
  .ns-hoofd { padding: 28px 28px 56px; }
  .ns-dagkop, .ns-dag { grid-template-columns: 112px 130px 104px 104px 110px 70px minmax(0, 1fr); gap: 10px; padding: 0 20px; }
  .ns-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ns-k4, .ns-k5, .ns-k7, .ns-k8 { grid-column: 1 / -1; }
  .ns-k6 { grid-column: span 6; }
  .ns-tabel-breed { display: none; }
  .ns-kaarten-mob { display: grid; }
  .ns-tabel .is-tablet-weg { display: none; }
  .ns-bord { grid-template-columns: repeat(5, 230px); }
  .ns-zij, .ns-samenvat, .ns-uitkomst { top: 96px; }
}
/* ───────── tablet staand (1040) ───────── */
@container ns (max-width: 1040px) {
  .ns-nav, .ns-kop-rechts .is-breed { display: none; }
  .ns-menuknop { display: inline-grid; }
  .ns-mobmenu.is-open { display: grid; gap: 2px; padding: 8px 32px 20px; border-top: 1px solid var(--ns-lijn2); background: var(--ns-vlak); }
  .ns-mobmenu a { display: flex; align-items: center; justify-content: space-between; height: 52px; font-weight: 600; font-size: 17px; border-bottom: 1px solid var(--ns-lijn2); cursor: pointer; }
  .ns-mega { display: none !important; }
  .ns-banner-in { min-height: 520px; }
  .ns-banner-vlak { width: calc(var(--uit) + 540px); padding-right: 112px; }
  .ns-banner .ns-h1 { font-size: 48px; }
  .ns-banner.is-laag .ns-h1 { font-size: 44px; }
  .ns-banner.is-rechts .ns-banner-vlak { padding-right: var(--uit); padding-left: 112px; }
  .ns-bewijs .ns-binnen { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .ns-stelling, .ns-vragen, .ns-uitgelicht, .ns-tweeluik, .ns-twee, .ns-fotoband .ns-binnen, .ns-appblok, .ns-wgband .ns-binnen { grid-template-columns: minmax(0, 1fr); }
  .ns-stelling { gap: 32px; }
  .ns-stelling > div:first-child, .ns-vragen-links, .ns-wgband-tekst { padding: 0; }
  .ns-twee > *, .ns-twee > .ns-twee-tekst:last-child, .ns-twee > .ns-twee-tekst:first-child, .ns-twee > .ns-twee-tekst:first-child + * { grid-column: 1 / -1; }
  .ns-vragen { gap: 40px; }
  .ns-twee { gap: 48px; }
  .ns-logorij { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ns-uitgelicht-foto { min-height: 320px; }
  .ns-stappen4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .ns-fototegels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ns-fototegels.is-drie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ns-cases2 { grid-template-columns: minmax(0, 1fr); }
  .ns-slot { grid-template-columns: minmax(0, 1fr); }
  .ns-slot::after { width: 200px; }
  .ns-slot-knoppen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ns-slot-bel { grid-column: 1 / -1; text-align: left; }
  .ns-kolommen3 { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ns-vacs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ns-stappen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ns-appblok { padding: 48px 40px 0; gap: 8px; }
  .ns-appblok-tekst { padding-bottom: 24px; }
  .ns-wgband-tekst { padding-block: 64px 40px; }
  .ns-wgband-foto { min-height: 300px; clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%); margin-inline: calc(-1 * max(0px, (100cqw - 1280px) / 2) - 32px); }
  .ns-zoeklayout { grid-template-columns: minmax(0, 1fr); }
  .ns-filters { display: none; }
  .ns-zoeklayout > section { grid-column: 1 / -1; }
  .ns-filterknop { display: inline-flex; }
  .ns-detailkop, .ns-detail, .ns-flow, .ns-reken { grid-template-columns: minmax(0, 1fr); }
  .ns-detailkop > div:first-child, .ns-detailkop-knoppen, .ns-inhoud, .ns-zij, .ns-flow-kop, .ns-flow-hoofd, .ns-samenvat, .ns-reken > form, .ns-uitkomst { grid-column: 1 / -1; }
  .ns-detailkop-knoppen { justify-content: flex-start; }
  .ns-flow-kop ~ .ns-flow-hoofd, .ns-flow-kop ~ .ns-samenvat { grid-row: auto; }
  .ns-zij, .ns-samenvat, .ns-uitkomst { position: static; }
  .ns-inlog { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ns-inlog-beeld { display: none; }
  .ns-beeldbank { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ns-app { grid-template-columns: minmax(0, 1fr); }
  .ns-zijbalk { display: none; }
  .ns-mtop { display: flex; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; align-items: center; justify-content: space-between; gap: 12px; height: 60px; background: var(--ns-vlak); border-bottom: 1px solid var(--ns-lijn); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .ns-mtop img { height: 24px; width: auto; }
  .ns-mtop-rechts { display: flex; gap: 8px; align-items: center; }
  .ns-mtop .ns-avatar { width: 36px; height: 36px; font-size: 14px; }
  .ns-onderbalk { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--ns-vlak); border-top: 1px solid var(--ns-lijn); padding-bottom: env(safe-area-inset-bottom, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
  .ns-onderbalk :is(a, button) { appearance: none; border: 0; background: transparent; font-family: inherit; display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 64px; padding: 8px 2px; font-size: 13px; line-height: 1.15; font-weight: 600; color: var(--ns-sub); cursor: pointer; position: relative; min-width: 0; }
  .ns-onderbalk :is(a, button) > span { max-width: 100%; text-align: center; overflow-wrap: anywhere; hyphens: auto; }
  .ns-onderbalk :is(a, button).is-aan { color: var(--ns-navy); }
  .ns-onderbalk :is(a, button).is-aan .ns-i { color: var(--ns-turk-tekst); font-variation-settings: 'FILL' 1, 'wght' 500, 'opsz' 24; }
  .ns-onderbalk em { position: absolute; top: 8px; left: calc(50% + 6px); font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--ns-turk); color: var(--ns-navy); font: 700 13px/20px var(--ns-tekst); text-align: center; }
  .ns-hoofd { padding: 24px 24px 104px; }
  .ns-dagkop { display: none; }
  .ns-dag { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "naam naam uren" "begin eind pauze" "soort soort soort"; gap: 10px; padding: 16px 20px; }
  .ns-dag-naam { grid-area: naam; }
  .ns-dag-uren { grid-area: uren; }
  .ns-dag > .is-begin { grid-area: begin; } .ns-dag > .is-eind { grid-area: eind; } .ns-dag > .is-pauze { grid-area: pauze; } .ns-dag > .is-soort { grid-area: soort; }
  .ns-dag-noot { display: none; }
  .ns-dag-mob { display: block; font-size: 13px; color: var(--ns-sub); font-weight: 600; margin-bottom: 4px; }
  .ns-urentotaal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ns-urentotaal .ns-pagknoppen { grid-column: 1 / -1; justify-content: stretch; }
  .ns-urentotaal .ns-pagknoppen .ns-knop { flex: 1; }
  .ns-extra { grid-template-columns: minmax(0, 1fr); }
  .ns-k6 { grid-column: 1 / -1; }
}
/* ───────── telefoon liggend en klein tablet (860) ───────── */
@container ns (max-width: 860px) {
  .ns-banner { --uit: 32px; }
  .ns-banner-in { display: block; min-height: 0; }
  .ns-banner-foto, .ns-banner.is-rechts .ns-banner-foto { position: relative; left: auto; right: auto; aspect-ratio: 16 / 10; }
  .ns-banner-vlak { width: auto; margin: -28px calc(-1 * var(--uit)) 0; padding: 48px var(--uit) 56px; clip-path: polygon(0 28px, 100% 0, 100% 100%, 0 100%); }
  .ns-banner.is-rechts .ns-banner-vlak { margin: -28px calc(-1 * var(--uit)) 0; padding: 48px var(--uit) 80px; clip-path: polygon(0 0, 100% 28px, 100% 100%, 0 100%); }
  .ns-banner.is-laag .ns-banner-in { min-height: 0; }
  .ns-stappen { grid-template-columns: minmax(0, 1fr); }
  .ns-stap { grid-template-columns: 200px minmax(0, 1fr); column-gap: 24px; }
  .ns-stap-foto { grid-row: span 3; margin: 0; }
}
/* ───────── telefoon (640) ───────── */
@container ns (max-width: 640px) {
  .ns-doek { --ns-goot: 16px; --ns-sectie: 64px; --ns-kopruimte: 32px; }
  .ns-binnen { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .ns-banner { --uit: 16px; }
  .ns-pre .ns-binnen { gap: 8px; }
  .ns-pre-rechts { gap: 16px; }
  .ns-pre-rechts > span { display: none; }
  .ns-doelgroep a { padding: 0 8px; }
  .ns-doelgroep .ns-lang { display: none; }
  .ns-doelgroep .ns-kort { display: inline; }
  .ns-kop-rij { height: 64px; gap: 12px; }
  .ns-logo img { height: 26px; }
  .ns-kop-rechts { gap: 8px; }
  .ns-mobmenu.is-open { padding: 8px 16px 20px; }
  .ns-h1, .ns-banner .ns-h1, .ns-banner.is-laag .ns-h1 { font-size: 40px; line-height: 1.04; }
  .ns-h2 { font-size: 32px; }
  .ns-h3 { font-size: 20px; }
  .ns-lead { font-size: 17px; }
  .ns-banner-knoppen .ns-knop { flex: 1 1 100%; }
  .ns-bewijs .ns-binnen { grid-template-columns: minmax(0, 1fr); row-gap: 16px; padding-block: 24px; }
  .ns-sectie.is-krap { padding-block: 48px; }
  .ns-sectie-kop { flex-direction: column; align-items: flex-start; gap: 16px; }
  .ns-sectie-kop > .ns-link { margin: 0; }
  .ns-logostrook { margin-top: 56px; padding-top: 32px; }
  .ns-logorij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ns-specraster, .ns-poolraster, .ns-keur, .ns-diensten, .ns-vacs { grid-template-columns: minmax(0, 1fr); }
  .ns-poolvraag { grid-column: 1 / -1; padding: 24px; }
  .ns-spec { padding: 20px; display: grid; grid-template-columns: 32px minmax(0, 1fr) 24px; gap: 4px 14px; align-items: start; }
  .ns-spec > .ns-i { grid-row: span 2; font-size: 28px; margin: 0; }
  .ns-spec-pijl { grid-column: 3; grid-row: 1 / span 2; margin: 0; padding: 0; align-self: center; }
  .ns-spec b { font-size: 18px; }
  .ns-spec.is-klein { display: flex; }
  .ns-tabsrij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border-bottom: 0; margin-bottom: 24px; }
  .ns-tabsrij button, .ns-tabsrij button:first-child { height: 40px; padding: 0 12px; border: 1px solid var(--ns-lijn); border-radius: var(--ns-r); margin: 0; }
  .ns-tabsrij button.is-aan { background: var(--ns-turk); border-color: var(--ns-turk); color: var(--ns-op-turk); }
  .ns-checkraster { grid-template-columns: minmax(0, 1fr); }
  .ns-fotoband::before { background: rgba(0, 44, 70, .88); }
  .ns-stappen4 { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .ns-uitgelicht-tekst { padding: 28px 24px; }
  .ns-uitgelicht-tekst .ns-h3, .ns-tweeluik .ns-h3 { font-size: 26px; }
  .ns-uitgelicht-foto { min-height: 240px; }
  .ns-kpi b { font-size: 30px; }
  .ns-casekort { padding: 28px 24px; }
  .ns-tweeluik > div { padding: 32px 24px; }
  .ns-minireken { grid-template-columns: minmax(0, 1fr); }
  .ns-miniuit b { font-size: 38px; }
  .ns-fototegels, .ns-fototegels.is-drie { grid-template-columns: minmax(0, 1fr); }
  .ns-fototegel, .ns-fototegels.is-drie .ns-fototegel { aspect-ratio: 16 / 9; }
  .ns-fototegel > div { left: 20px; right: 20px; bottom: 18px; }
  .ns-fototegel b { font-size: 20px; }
  .ns-slot { padding: 32px 24px; }
  .ns-slot::after { width: 120px; right: -80px; }
  .ns-slot-knoppen { grid-template-columns: minmax(0, 1fr); }
  .ns-slot-bel { text-align: center; }
  .ns-belkaart b { font-size: 20px; }
  .ns-voet-boven { padding-block: 56px 40px; row-gap: 32px; }
  .ns-voet-boven > div { grid-column: span 6; }
  .ns-voet-boven > .ns-voet-contact { grid-column: 1 / -1; }
  .ns-voet-onder .ns-binnen { flex-direction: column; }
  .ns-zoek { grid-template-columns: minmax(0, 1fr); padding: 6px; }
  .ns-zoek-vak { border-right: 0; border-bottom: 1px solid var(--ns-lijn2); }
  .ns-zoek-vak:nth-child(3) { border-bottom: 0; }
  .ns-zoek .ns-knop { margin-top: 6px; width: 100%; }
  .ns-zoekover { margin-top: -24px; }
  .ns-stap { grid-template-columns: minmax(0, 1fr); }
  .ns-stap-foto { grid-row: auto; margin-bottom: 4px; }
  .ns-regels { grid-template-columns: minmax(0, 1fr); }
  .ns-appblok { padding: 32px 20px 0; border-radius: var(--ns-r2); }
  .ns-toestel { width: 100%; max-width: 300px; }
  .ns-band .ns-binnen { grid-template-columns: minmax(0, 1fr); padding-block: 48px; gap: 24px; }
  .ns-wgband-tekst { padding-block: 48px 32px; }
  .ns-wgband-foto { min-height: 220px; margin-inline: -16px; }
  .ns-schuin { clip-path: polygon(0 0, 100% 0, 100% 100%, 48px 100%, 0 calc(100% - 48px)); }
  .ns-paginakop { padding-block: 40px 32px; }
  .ns-zoekkop { padding-block: 32px 24px; }
  .ns-zoeklayout { padding-block: 24px 64px; }
  .ns-resbalk-rechts .ns-veld { width: 160px; }
  .ns-vac.is-rij { flex-direction: column; }
  .ns-vac.is-rij .ns-vac-foto { width: auto; aspect-ratio: 16 / 9; min-height: 0; }
  .ns-vac-lijf { padding: 20px; }
  .ns-alarm { grid-template-columns: 24px minmax(0, 1fr); }
  .ns-alarm > :last-child { grid-column: 1 / -1; justify-self: start; }
  .ns-detailkop .ns-h1, .ns-flow-kop .ns-h1 { font-size: 32px; }
  .ns-detailkop-knoppen .ns-knop:not(.ns-knop-licht) { display: none; }
  .ns-meta { gap: 8px 18px; font-size: 15px; }
  .ns-detail { padding-block: 32px 120px; }
  .ns-detail-foto { aspect-ratio: 16 / 9; }
  .ns-mobiel-cta { display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--ns-vlak); border-top: 1px solid var(--ns-lijn); padding: 12px max(16px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
  .ns-mobiel-cta .ns-knop:first-child { flex: 1; }
  .ns-flow { padding-block: 32px 64px; row-gap: 24px; }
  .ns-formkaart { padding: 24px 20px; gap: 24px; }
  .ns-formraster { grid-template-columns: minmax(0, 1fr); }
  .ns-keuzes, .ns-keuzes.is-twee, .ns-keuzes.is-vier { grid-template-columns: minmax(0, 1fr); }
  .ns-keuzes.is-kort { grid-template-columns: repeat(var(--kol, 2), minmax(0, 1fr)); }
  .ns-keuzes.is-vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ns-vinktegels { --kol: 2 !important; }
  .ns-tijdkeuze { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ns-voortgang .ns-vstap span { display: none; }
  .ns-inlog-form { padding: 40px 16px; }
  .ns-uitkomst { padding: 24px; }
  .ns-uitkomst-bedrag b { font-size: 40px; }
  .ns-beeldbank { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .ns-hoofd { padding: 20px 16px 104px; gap: 18px; }
  .ns-pagtitel { font-size: 26px; }
  .ns-pagkop { align-items: flex-start; }
  .ns-pagknoppen { width: 100%; }
  .ns-pagknoppen .ns-knop { flex: 1; }
  .ns-tegels, .ns-tegels.is-drie { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ns-tegel > b { font-size: 28px; }
  .ns-rij { grid-template-columns: 24px minmax(0, 1fr); padding: 14px 16px; }
  .ns-rij-acties { grid-column: 2; justify-content: flex-start; }
  .ns-kaart-kop { padding: 16px; }
  .ns-paren { padding: 0 16px 8px; }
  .ns-week { width: 100%; justify-content: space-between; }
  .ns-week b { min-width: 0; font-size: 15px; }
  .ns-dag { padding: 14px 16px; }
  .ns-urentotaal { padding: 16px; }
  .ns-extra { padding: 16px; }
  .ns-filterbalk { padding: 12px 16px; }
  .ns-rooster { grid-template-columns: 64px repeat(7, minmax(0, 1fr)); gap: 4px; padding: 16px; }
  .ns-rooster-kop { font-size: 13px; }
  .ns-rooster-kop span { display: none; }
  .ns-rooster-deel { font-size: 13px; }
  .ns-blok { height: 44px; font-size: 13px; }
  .ns-blok span { display: none; }
  .ns-legenda { padding: 0 16px 16px; }
  .ns-strook { padding: 0 16px 16px; }
  .ns-strookregel { grid-template-columns: minmax(0, 1fr) max-content 96px; }
  .ns-doc { grid-template-columns: 24px minmax(0, 1fr); padding: 14px 16px; }
  .ns-doc > .ns-pil, .ns-doc > .ns-knop, .ns-doc > .ns-rij-acties { grid-column: 2; justify-self: start; }
  .ns-bord { grid-template-columns: repeat(5, 260px); }
}
@media (max-width: 640px) {
  .ns-laag.is-midden { padding: 0; align-items: flex-end; }
  .ns-laag.is-midden .ns-lade { border-radius: 20px 20px 0 0; max-height: 92vh; }
}
@media (prefers-reduced-motion: reduce) {
  .ns-doek *, .ns-laag, .ns-lade { animation: none !important; transition: none !important; }
}

/* ───────── kantoor: gereedschappen ───────── */
.ns-zb-groep { margin: 14px 12px 4px; font: 700 13px/1.2 var(--ns-tekst); letter-spacing: .08em; text-transform: uppercase; color: var(--ns-zwak); }
.ns-zb-groep:first-child { margin-top: 4px; }
.ns-stapel { display: grid; gap: 24px; align-content: start; min-width: 0; }
.ns-rij.is-aan { background: var(--ns-turk-zacht); box-shadow: inset 3px 0 0 var(--ns-turk); }
.ns-rij > div > span + span { display: block; }
.ns-lijst-kaart { border: 1px solid var(--ns-lijn); border-radius: var(--ns-r2); }
/* instellingen: rijen met een schakelaar */
.ns-instel { display: grid; }
.ns-instel-kop, .ns-instel-rij { display: grid; grid-template-columns: 44px minmax(0, 1fr) 140px 140px; gap: 16px; align-items: center; padding: 0 24px; }
.ns-instel-kop { min-height: 40px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ns-zwak); border-bottom: 1px solid var(--ns-lijn2); }
.ns-instel-rij { min-height: 64px; border-bottom: 1px solid var(--ns-lijn2); }
.ns-instel-rij:last-child { border-bottom: 0; }
.ns-instel-rij > b { font-size: 15px; }
.ns-instel-uit { grid-column: span 2; font-size: 14px; color: var(--ns-zwak); }
.ns-instel-rij > .ns-instel-uit:nth-child(4) { grid-column: auto; }
.ns-instel-naam { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: center; min-width: 0; }
.ns-instel-naam .ns-i { color: var(--ns-turk-tekst); }
.ns-instel-naam span { display: grid; gap: 1px; }
.ns-instel-naam b { font-size: 15px; }
.ns-instel-naam small { font-size: 14px; color: var(--ns-sub); }
.ns-instel-rij.is-uit b, .ns-instel-rij.is-uit .ns-instel-naam small { color: var(--ns-zwak); }
.ns-schakel { position: relative; display: inline-block; width: 44px; height: 26px; flex: none; }
.ns-schakel input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.ns-schakel span { position: absolute; inset: 0; border-radius: 13px; background: #B8C5CE; transition: background .15s; }
.ns-schakel span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--ns-vlak); box-shadow: 0 1px 2px rgba(0, 20, 34, .25); transition: transform .15s; }
.ns-schakel input:checked + span { background: var(--ns-turk-tekst); }
.ns-schakel input:checked + span::after { transform: translateX(18px); }
.ns-schakel input:focus-visible + span { outline: 2px solid var(--ns-navy); outline-offset: 2px; }
.ns-formraster3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ns-dichtform { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 16px; align-items: end; }
.ns-seg-breed { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); width: 100%; }
.ns-seg-breed button { justify-content: center; }
/* matchen */
.ns-matchkop { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 16px; border-bottom: 1px solid var(--ns-lijn2); }
.ns-matchkop > span:first-child { font-weight: 700; }
.ns-matcheisen { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--ns-sub); }
.ns-matcheisen span { display: inline-flex; align-items: center; gap: 4px; }
.ns-matcheisen .ns-i { font-size: 16px; color: var(--ns-turk-tekst); }
.ns-match { display: grid; grid-template-columns: 36px minmax(0, 1.2fr) minmax(0, 1.5fr) 96px 120px; gap: 16px; align-items: center; padding: 16px 24px; border-top: 1px solid var(--ns-lijn2); }
.ns-match:first-child { border-top: 0; }
.ns-match-wie { display: grid; gap: 2px; min-width: 0; }
.ns-match-wie b { font-size: 15px; }
.ns-match-wie > span { font-size: 14px; color: var(--ns-sub); }
.ns-match-eisen { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; }
.ns-match-eisen span { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.ns-match-eisen .ns-i { font-size: 16px; }
.ns-match-eisen .is-ja { color: var(--ns-goed); }
.ns-match-eisen .is-nee { color: var(--ns-let); }
.ns-match-score { display: grid; gap: 6px; }
.ns-match-score b { font: 800 20px/1 var(--ns-kop); color: var(--ns-navy); font-variant-numeric: tabular-nums; }
.ns-match-actie { display: flex; justify-content: flex-end; }
.ns-rij-pil { display: block; margin-top: 6px; }
.ns-koptabel { table-layout: fixed; }
.ns-koptabel .is-wat { width: 30%; } .ns-koptabel .is-hoe { width: 36%; } .ns-koptabel .is-richting { width: 14%; } .ns-koptabel .is-stand { width: 20%; }
.ns-koptabel td { white-space: normal; }
@container ns (max-width: 1180px) { .ns-koptabel { table-layout: auto; } .ns-koptabel .is-richting { width: auto; } }
/* planning */
.ns-plantabel { table-layout: fixed; }
.ns-plantabel th:first-child, .ns-plantabel td:first-child { width: 23%; }
.ns-plantabel td { vertical-align: middle; }
.ns-plantabel th:not(:first-child), .ns-plantabel td:not(:first-child) { padding-left: 6px; padding-right: 6px; }
.ns-plantabel .ns-wiecel { grid-template-columns: 36px minmax(0, 1fr); }
.ns-plantabel td:first-child { white-space: normal; }
.ns-plancel { display: grid; gap: 1px; width: 100%; padding: 6px 8px; border-radius: var(--ns-r); background: var(--ns-turk-zacht); color: var(--ns-turk-tekst); font-size: 13px; line-height: 1.25; }
.ns-plancel b { font-size: 14px; color: var(--ns-navy); }
.ns-plancel.is-vrij { background: transparent; border: 1px dashed #C3CFD7; color: var(--ns-zwak); font-weight: 600; text-align: center; }
.ns-plancel.is-weg { text-align: center; }
.ns-plancel.is-weg { background: var(--ns-let-zacht); color: var(--ns-let); font-weight: 600; }
.ns-groep-smal { min-width: 120px; }
/* leads: vier kolommen */
.ns-bord.ns-bord-vier { grid-template-columns: repeat(4, minmax(180px, 1fr)); }
/* berichten */
.ns-inbox { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 24px; align-items: start; }
.ns-inbox-lijst .ns-rij { grid-template-columns: 36px minmax(0, 1fr) auto; }
.ns-inbox-lijst .ns-avatar .ns-i, .ns-inbox-gesprek .ns-avatar .ns-i { font-size: 18px; }
.ns-teller { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--ns-turk); color: var(--ns-navy); font: 700 13px/22px var(--ns-tekst); text-align: center; }
.ns-gesprek { display: grid; gap: 12px; padding: 24px; background: var(--ns-grond); min-height: 320px; align-content: start; }
.ns-bericht { display: grid; gap: 6px; max-width: 78%; padding: 12px 16px; border-radius: 4px 14px 14px 14px; background: var(--ns-vlak); border: 1px solid var(--ns-lijn2); justify-self: start; }
.ns-bericht.is-wij { justify-self: end; border-radius: 14px 4px 14px 14px; background: var(--ns-turk-zacht); border-color: transparent; }
.ns-bericht p { margin: 0; font-size: 15px; color: var(--ns-inkt); }
.ns-bericht > span { font-size: 14px; color: var(--ns-sub); }
.ns-bericht small { font-size: 13px; color: var(--ns-zwak); justify-self: end; }
.ns-schrijf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; padding: 16px 24px 4px; border-top: 1px solid var(--ns-lijn2); }
.ns-schrijf textarea.ns-veld { min-height: 48px; height: 48px; }
.ns-schrijf-hulp { padding: 0 24px 16px; }
@container ns (max-width: 1180px) {
  .ns-instel-kop, .ns-instel-rij { grid-template-columns: 44px minmax(0, 1fr) 120px 120px; padding: 0 20px; }
  .ns-match { grid-template-columns: 36px minmax(0, 1fr) 96px 120px; }
  .ns-match-eisen { grid-column: 2 / -1; grid-row: 2; }
  .ns-inbox { grid-template-columns: minmax(0, 1fr); }
  .ns-bord.ns-bord-vier { grid-template-columns: repeat(4, 230px); }
}
@container ns (max-width: 640px) {
  .ns-plantabel { table-layout: auto; }
  .ns-instel-kop { display: none; }
  .ns-instel-rij { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr); padding: 12px 16px; gap: 10px 12px; }
  .ns-instel-rij > b, .ns-instel-rij > .ns-instel-naam { grid-column: 2 / -1; }
  .ns-instel-rij > .ns-veld:nth-of-type(1) { grid-column: 2; }
  .ns-instel-rij > .ns-instel-uit { grid-column: 2 / -1; }
  .ns-formraster3, .ns-dichtform { grid-template-columns: minmax(0, 1fr); }
  .ns-match { grid-template-columns: 36px minmax(0, 1fr) auto; padding: 14px 16px; }
  .ns-match-eisen { grid-column: 2 / -1; grid-row: auto; }
  .ns-match-score { grid-column: 2; }
  .ns-match-actie { grid-column: 3; grid-row: 3; }
  .ns-bericht { max-width: 92%; }
  .ns-gesprek { padding: 16px; }
  .ns-schrijf { padding: 12px 16px 4px; }
  .ns-schrijf-hulp { padding: 0 16px 12px; }
  .ns-bord.ns-bord-vier { grid-template-columns: repeat(4, 260px); }
}

/* ───────── kantoor tot de max: zoeken, dossiers, papieren, instellingen, mailing ───────── */
.ns-zb-zoek { appearance: none; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; height: 40px; padding: 0 8px 0 12px; margin-bottom: 8px; border: 1px solid var(--ns-lijn); border-radius: var(--ns-r); background: var(--ns-vlak); color: var(--ns-sub); font: 500 15px var(--ns-tekst); text-align: left; cursor: pointer; }
.ns-zb-zoek:hover { border-color: var(--ns-navy); color: var(--ns-inkt); }
.ns-zb-zoek kbd { min-width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; border: 1px solid var(--ns-lijn); background: var(--ns-grond); font: 600 13px/1 var(--ns-tekst); color: var(--ns-zwak); }
.ns-zoekveld { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--ns-lijn); border-radius: var(--ns-r); background: var(--ns-vlak); flex: 0 1 320px; min-width: 0; cursor: text; }
.ns-zoekveld .ns-i { color: var(--ns-zwak); font-size: 20px; }
.ns-zoekveld input { appearance: none; border: 0; outline: none; background: transparent; width: 100%; min-width: 0; height: 100%; font: 400 15px var(--ns-tekst); color: var(--ns-inkt); }
.ns-zoekveld.is-groot { height: 52px; flex: none; width: 100%; padding: 0 16px; }
.ns-zoekveld.is-groot input { font-size: 17px; }
.ns-zoekgroep { display: grid; gap: 8px; }
.ns-keurrij { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 16px; align-items: start; padding: 16px 24px; border-top: 1px solid var(--ns-lijn2); }
.ns-keurrij:first-child { border-top: 0; }
.ns-keurrij > div:first-child { display: grid; gap: 6px; min-width: 0; }
.ns-keurrij textarea.ns-veld { min-height: 72px; }
.ns-duim { width: 72px; height: 48px; object-fit: cover; border-radius: var(--ns-r); display: block; }
@container ns (max-width: 860px) { .ns-keurrij { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; } }
.ns-kandkop { display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.ns-kandkop .ns-wiecel { gap: 2px 16px; }
.is-kijk .ns-laag.is-midden .ns-lade.is-palet { max-height: none; }
.ns-juridisch { display: grid; gap: 40px; max-width: 820px; }
.ns-juridisch-blok { display: grid; gap: 14px; }
.ns-paginakop .ns-insteltabs { margin-top: 8px; }
.ns-koptabel .ns-klein[translate=no] { overflow-wrap: anywhere; }
button.ns-rij { appearance: none; width: 100%; border: 0; border-top: 1px solid var(--ns-lijn2); background: transparent; text-align: left; font: inherit; color: inherit; }
.ns-lade.is-breed { width: min(720px, 100%); }
.ns-lade.is-palet { width: min(680px, 100%); }
.ns-laag.is-midden .ns-lade.is-palet { max-height: calc(100vh - max(10vh, 24px) - 24px); }
.ns-laag.is-zelfde, .ns-laag.is-zelfde .ns-lade { animation: none; }
.ns-paletrij { min-height: 56px; padding-top: 10px; padding-bottom: 10px; }
.ns-zoekveld input:focus, .ns-zoekveld input:focus-visible { outline: none; box-shadow: none; }
.ns-laag.is-midden:has(.ns-lade.is-palet) { align-items: flex-start; padding-top: max(10vh, 24px); }
.ns-paletrij.is-aan b { color: var(--ns-navy); }
.ns-kbd { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--ns-lijn); background: var(--ns-grond); font: 600 13px/1 var(--ns-tekst); color: var(--ns-sub); }
.ns-palethulp { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-right: auto; font-size: 13px; color: var(--ns-zwak); }
.ns-palethulp span { display: inline-flex; align-items: center; gap: 4px; }
.ns-ladetabs { justify-self: start; }
.ns-seg.ns-seg-los { justify-self: start; background: var(--ns-vlak); border: 1px solid var(--ns-lijn); }
.ns-meer { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; padding: 16px 24px; border-top: 1px solid var(--ns-lijn2); }
.ns-filterkeus { width: auto; min-width: 220px; max-width: 100%; }
.ns-blokkop { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.ns-match-actie { gap: 8px; flex-wrap: wrap; align-items: center; }
.ns-menu-nav a { height: 48px; }
/* papieren: één teken per document, met de maand waarin het verloopt */
.ns-docstand { display: inline-grid; justify-items: center; gap: 2px; white-space: nowrap; font-size: 13px; color: var(--ns-sub); }
.ns-doctabel th:not(:first-child), .ns-doctabel td:not(:first-child) { text-align: center; }
.ns-doctabel th { hyphens: auto; overflow-wrap: break-word; }
.ns-docstand .ns-i { font-size: 20px; }
.ns-docstand.is-goed .ns-i { color: var(--ns-goed); }
.ns-docstand.is-let .ns-i { color: var(--ns-let); }
.ns-docstand.is-fout .ns-i { color: var(--ns-fout); }
.ns-docstand.is-nvt .ns-i { color: var(--ns-zwak); }
.ns-docstand small { font-size: 13px; }
.ns-legenda.ns-legenda-los { padding: 0; gap: 14px; }
.ns-tabel .is-midden { text-align: center; }
.ns-recht { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ns-grond); color: var(--ns-zwak); vertical-align: middle; }
.ns-recht .ns-i { font-size: 18px; }
.ns-recht.is-ja { background: var(--ns-goed-zacht); color: var(--ns-goed); }
/* instellingen: vier tabbladen boven elk scherm */
.ns-insteltabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--ns-vlak); border: 1px solid var(--ns-lijn); border-radius: var(--ns-r2); justify-self: start; max-width: 100%; }
.ns-insteltabs a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--ns-r); font: 600 15px var(--ns-tekst); color: var(--ns-sub); }
.ns-insteltabs a:hover { background: var(--ns-grond); color: var(--ns-inkt); }
.ns-insteltabs a.is-aan { background: var(--ns-turk-zacht); color: var(--ns-turk-tekst); }
.ns-sjablonen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.ns-sjabloon { display: flex; flex-direction: column; }
.ns-sjabloon > .ns-kaart-in { flex: 1; grid-template-rows: 1fr auto; }
.ns-sjabloon-tekst { margin: 0; padding: 14px 16px; border-radius: var(--ns-r); background: var(--ns-grond); color: var(--ns-inkt); font-size: 15px; line-height: 1.55; }
.ns-sjabloon-tekst mark { background: var(--ns-turk-zacht); color: var(--ns-turk-tekst); font-weight: 600; border-radius: 4px; padding: 0 3px; }
.ns-sjabloon.is-uit .ns-sjabloon-tekst { color: var(--ns-zwak); }
.ns-sjabloon-voet { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ns-pctveld { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ns-sub); }
.ns-pctveld .ns-veld { width: 96px; text-align: right; }
.ns-somregel { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 24px; }
.ns-somregel span { color: var(--ns-sub); font-size: 15px; }
.ns-somregel b { font: 800 24px/1 var(--ns-kop); color: var(--ns-navy); }
.ns-sterren { display: flex; gap: 4px; }
.ns-sterren button { appearance: none; border: 0; background: transparent; width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--ns-r); color: var(--ns-zwak); cursor: pointer; }
.ns-sterren .ns-i { font-size: 34px; }
.ns-sterren button.is-aan { color: var(--ns-ster); }
.ns-sterren button.is-aan .ns-i { font-variation-settings: 'FILL' 1; }
.ns-schrijf.ns-schrijf-los { padding: 0; border-top: 0; }
/* mailing: het voorbeeld is de mail zelf, 640 breed; op de telefoon alles onder elkaar */
.ns-mailtekst { min-height: 176px; }
.ns-mailvak { display: grid; justify-items: center; padding: 16px; border-radius: var(--ns-r2); background: var(--ns-grond2); }
.ns-mail { container: mail / inline-size; width: 100%; max-width: 640px; background: var(--ns-vlak); border: 1px solid var(--ns-lijn); border-radius: var(--ns-r); overflow: hidden; color: var(--ns-inkt); }
.ns-mailvak.is-telefoon .ns-mail { max-width: 375px; }
.ns-mail-kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 20px 28px; border-bottom: 1px solid var(--ns-lijn2); }
.ns-mail-kop img { height: 26px; width: auto; }
.ns-mail-kop span { font-size: 13px; color: var(--ns-zwak); }
.ns-mail-band { display: grid; gap: 8px; padding: 28px; background: var(--ns-turk); }
.ns-mail-band h3 { margin: 0; font: 800 26px/1.2 var(--ns-kop); color: var(--ns-op-turk); text-wrap: balance; }
.ns-mail-band p { margin: 0; font-size: 15px; color: var(--ns-op-turk-sub); }
.ns-mail-lijf { display: grid; gap: 16px; padding: 28px; }
.ns-mail-lijf > p { margin: 0; font-size: 15px; line-height: 1.6; }
.ns-mail-profielen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ns-mail-profiel { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--ns-lijn); border-radius: var(--ns-r2); min-width: 0; }
.ns-mail-per { font: 700 13px/1.2 var(--ns-tekst); letter-spacing: .06em; text-transform: uppercase; color: var(--ns-turk-tekst); }
.ns-mail-profiel b { font-size: 16px; color: var(--ns-navy); }
.ns-mail-profiel > span:not(.ns-mail-per) { font-size: 14px; color: var(--ns-sub); }
.ns-mail-profiel dl { display: grid; gap: 4px; margin: 6px 0 8px; font-size: 14px; }
.ns-mail-profiel dl div { display: flex; justify-content: space-between; gap: 12px; }
.ns-mail-profiel dt { color: var(--ns-zwak); }
.ns-mail-profiel dd { margin: 0; text-align: right; font-weight: 600; }
.ns-mail-knop { appearance: none; display: inline-flex; justify-content: center; align-items: center; min-height: 44px; margin-top: auto; padding: 8px 18px; border: 1px solid var(--ns-turk); border-radius: var(--ns-r); background: var(--ns-turk); color: var(--ns-op-turk); font: 700 15px var(--ns-tekst); text-align: center; cursor: pointer; }
.ns-mail-knop.is-rand { margin-top: 0; background: transparent; border-color: var(--ns-navy); color: var(--ns-navy); }
.ns-mail-stappen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px; border-radius: var(--ns-r2); background: var(--ns-grond); }
.ns-mail-stappen div { display: grid; gap: 4px; align-content: start; }
.ns-mail-stappen span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--ns-navy); color: var(--ns-op-navy); font: 700 14px/1 var(--ns-tekst); }
.ns-mail-stappen b { font-size: 15px; color: var(--ns-navy); }
.ns-mail-stappen p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ns-sub); }
.ns-mail-afzender { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding-top: 16px; border-top: 1px solid var(--ns-lijn2); }
.ns-mail-av { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--ns-navy-zacht); color: var(--ns-navy); font: 700 16px/1 var(--ns-kop); }
.ns-mail-afzender div { display: grid; gap: 2px; min-width: 0; }
.ns-mail-afzender b { font-size: 15px; }
.ns-mail-afzender span { font-size: 14px; color: var(--ns-sub); }
.ns-mail-voet { display: grid; gap: 4px; padding: 20px 28px; background: var(--ns-grond); font-size: 13px; color: var(--ns-zwak); text-align: center; }
.ns-mail-voet b { font-size: 14px; color: var(--ns-navy); }
.ns-mail-voet a { color: var(--ns-turk-tekst); text-decoration: underline; }
@container mail (max-width: 480px) {
  .ns-mail-kop, .ns-mail-band, .ns-mail-lijf, .ns-mail-voet { padding-left: 20px; padding-right: 20px; }
  .ns-mail-band h3 { font-size: 22px; }
  .ns-mail-profielen, .ns-mail-stappen { grid-template-columns: minmax(0, 1fr); }
  .ns-mail-afzender { grid-template-columns: 48px minmax(0, 1fr); }
  .ns-mail-afzender .ns-mail-knop { grid-column: 1 / -1; }
}
@container ns (max-width: 860px) {
  .ns-sjablonen { grid-template-columns: minmax(0, 1fr); }
  .ns-mailvak { padding: 0; background: transparent; }
}
@container ns (max-width: 640px) {
  .ns-mailkeus { display: none; }
  .ns-lade-voet:has(.ns-palethulp) { display: none; }
  .ns-zoekveld { flex: 1 1 100%; }
  .ns-filterkeus { flex: 1 1 100%; }
  .ns-insteltabs a { padding: 0 12px; }
}

/* brede tabellen als kaarten op een smal scherm */
@container ns (max-width: 860px) {
  .ns-tabelvak:has(> .ns-tabel.is-kaartbaar) { overflow: visible; }
  .ns-tabel.is-kaartbaar, .ns-tabel.is-kaartbaar tbody, .ns-tabel.is-kaartbaar tfoot, .ns-tabel.is-kaartbaar tr { display: block; width: 100%; }
  .ns-tabel.is-kaartbaar thead, .ns-tabel.is-kaartbaar colgroup { display: none; }
  .ns-tabel.is-kaartbaar tr { padding: 14px 20px; border-bottom: 1px solid var(--ns-lijn2); }
  .ns-tabel.is-kaartbaar tbody tr:last-child { border-bottom: 0; }
  .ns-tabel.is-kaartbaar tfoot tr { background: var(--ns-grond); border-top: 1px solid var(--ns-lijn); }
  .ns-tabel.is-kaartbaar td, .ns-tabel.is-kaartbaar td.is-tablet-weg, .ns-tabel.is-kaartbaar td.is-kolom-status { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 12px; align-items: center; padding: 5px 0; border: 0; white-space: normal; text-align: left; background: none; min-width: 0; }
  .ns-tabel.is-kaartbaar td, .ns-tabel.is-kaartbaar th { width: auto; }
  .ns-tabel.is-kaartbaar td::before { content: attr(data-label); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ns-zwak); }
  .ns-tabel.is-kaartbaar td:first-child { grid-template-columns: minmax(0, 1fr); padding-bottom: 8px; }
  .ns-tabel.is-kaartbaar td:first-child::before, .ns-tabel.is-kaartbaar td[data-label=""]::before { display: none; }
  .ns-tabel.is-kaartbaar td[data-label=""] { grid-template-columns: minmax(0, 1fr); }
  .ns-tabel.is-kaartbaar td:empty { display: none; }
  .ns-tabel.is-kaartbaar td:first-child, .ns-tabel.is-kaartbaar td:last-child { padding-left: 0; padding-right: 0; }
  .ns-tabel.is-kaartbaar .ns-rij-acties { justify-content: flex-start; }
  .ns-tabel.is-kaartbaar .ns-plancel { width: auto; justify-self: start; min-width: 120px; }
}

/* De keuring zet elke pagina op 1440 en 390 neer; wat vast aan het scherm hangt, staat dan in het doek. */
.is-kijk .mk-kijk { overflow-x: auto; }
.is-kijk .ns-doek { min-height: 0; margin: 0 auto 80px; outline: 1px solid #c8d0d6; }
.is-kijk .ns-doek.is-w1440 { width: 1440px; }
.is-kijk .ns-doek.is-w390 { width: 390px; }
.is-kijk .ns-onderbalk, .is-kijk .ns-mobiel-cta { position: static; }
.is-kijk .ns-kop, .is-kijk .ns-zijbalk, .is-kijk .ns-mtop { position: static; }
.is-kijk .ns-zijbalk { height: auto; }
.is-kijk .ns-app { min-height: 0; }
.is-kijk .ns-pagina { min-height: 0; }
.is-kijk .ns-mega { position: static; }
.is-kijk .ns-laag { position: static; background: none; animation: none; display: block; padding: 0; }
.is-kijk .ns-lade { height: auto; width: 100%; box-shadow: none; animation: none; max-height: none; }

/* startlijst van een nieuwe medewerker en tekenen in de app */
.ns-startstap { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 16px; padding: 16px 24px; border-top: 1px solid var(--ns-lijn2); }
.ns-startstap:first-child { border-top: 0; }
.ns-startstap > .ns-i { font-size: 22px; color: var(--ns-navy); }
.ns-startstap > .ns-i.is-goed { color: var(--ns-goed); }
.ns-startstap > div { display: grid; gap: 8px; min-width: 0; justify-items: start; }
.ns-startstap b { font-size: 15px; font-weight: 600; }
.ns-startstap span { color: var(--ns-sub); font-size: 14px; }
.ns-startform { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; width: 100%; }
.ns-startform .ns-veld { flex: 1 1 140px; width: auto; min-width: 0; }
.ns-startform .ns-veld.ns-getal { flex: 0 1 96px; }
.ns-contracttekst { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--ns-lijn2); border-radius: var(--ns-r); background: var(--ns-grond); }
.ns-contracttekst p { margin: 4px 0 0; }
@media (max-width: 640px) { .ns-startstap { padding: 16px; } }

/* beheer: bekijk als, rechtenvakjes, acties in het commandocentrum */
.ns-alsbalk { margin-bottom: 24px; align-items: center; }
.ns-alsbalk > div { flex: 1 1 auto; }
.ns-alskeus { display: flex; align-items: center; gap: 8px; }
button.ns-recht { border: 0; font: inherit; cursor: pointer; }
.ns-recht.is-tekst { width: auto; min-width: 56px; padding: 0 10px; border-radius: 14px; font-size: 13px; font-weight: 600; }
.ns-rechten tr.is-tussenkop td { background: var(--ns-grond); }
.ns-paletacties { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 24px 16px 64px; border-top: 1px solid var(--ns-lijn2); background: var(--ns-turk-licht, var(--ns-grond)); }
@media (max-width: 640px) { .ns-paletacties { padding: 12px 16px; } }
.ns-rechten th, .ns-rechten td { padding-left: 8px; padding-right: 8px; }
.ns-rechten th { text-transform: none; letter-spacing: 0; white-space: nowrap; }
.ns-rechten td:first-child { white-space: normal; min-width: 150px; }
.ns-recht.is-tekst { min-width: 0; padding: 0 8px; }
.ns-zb-zoek { flex-shrink: 0; height: auto; min-height: 40px; padding: 8px 10px; gap: 2px 10px; grid-template-columns: 20px minmax(0, 1fr); font-size: 15px; text-align: left; }
.ns-zb-zoek > span { line-height: 1.25; }
.ns-zb-zoek kbd { grid-column: 2; justify-self: start; min-width: 22px; height: 22px; padding: 0 6px; font-size: 13px; }
/* knoppen in de laatste kolom vallen onder elkaar als er geen plek is (lange woorden in pl en hu) */
.ns-tabel td:last-child:has(.ns-knop) { white-space: normal; }
.ns-tabel td:last-child .ns-rij-acties, .ns-tabel td:last-child .ns-knoppen { flex-wrap: wrap; }
.ns-rechten th { white-space: normal; }
.ns-tag.is-goed { display: inline-flex; align-items: center; gap: 4px; background: var(--ns-goed-zacht); color: var(--ns-goed); }
.ns-tag.is-goed .ns-i { font-size: 16px; }
.ns-kandlijst { display: grid; gap: 16px; }
.ns-voet-wa { appearance: none; border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ns-schakelmelding { align-items: center; margin-bottom: 24px; }
.ns-schakelmelding > div { flex: 1 1 auto; }