/* nieuw.css — eigen stylesheet voor de nieuwe VGR (/nieuw).
 *
 * Volledig los van de oude styles.css: alle klassen dragen het prefix
 * n- zodat report.css (dat de rapportpreview stylet) er nooit mee botst.
 * Huisstijl: VGR-groen #00a651 als accent, inkt #1d2433, rechte hoeken,
 * rustige dichtheid. Desktop-first; de kijkpagina is apart mobielvriendelijk.
 */

:root {
  --n-groen: #00a651;
  --n-groen-donker: #008541;
  --n-groen-zacht: #e6f6ee;
  --n-inkt: #1d2433;
  --n-tekst: #39415a;
  --n-gedempt: #808aa0;
  --n-lijn: #d7dbe7;
  --n-lijn-zacht: #e7eaf3;
  --n-band: #eef0f6;
  --n-vlak: #f5f6fa;
  --n-rood: #e30613;
  --n-oranje: #ff9800;
  --n-focus: rgba(0, 166, 81, 0.18);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.n-body {
  font: 14px/1.5 -apple-system, "Segoe UI", Inter, Roboto, sans-serif;
  color: var(--n-tekst);
  background: var(--n-vlak);
}
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: var(--n-inkt); }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.92em; }

/* ── Topbalk ── */
.n-topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 14px;
  padding: 0 18px; height: 54px;
  background: #fff; border-bottom: 1px solid var(--n-lijn);
}
.n-brand { display: flex; align-items: baseline; gap: 8px; text-decoration: none; }
.n-brand-mark { font-weight: 800; font-size: 17px; color: var(--n-groen); letter-spacing: -0.01em; }
.n-brand-copy { font-size: 13px; color: var(--n-inkt); font-weight: 600; }
.n-topbar-mid { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.n-kruimel { font-size: 13px; color: var(--n-gedempt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-kruimel strong { color: var(--n-inkt); font-weight: 650; }
.n-autosave { font-size: 12px; color: var(--n-gedempt); white-space: nowrap; }
.n-autosave.n-ok { color: var(--n-groen-donker); }
.n-autosave.n-fout { color: var(--n-rood); }
.n-topbar-acties { display: flex; align-items: center; gap: 8px; }
/* Sectiesknop: alleen mobiel-zichtbaar (en dan alleen in de editor, niet
   op het overzicht) — desktop heeft de permanente zijnav al. */
#nSecties { display: none; flex: 0 0 auto; }

/* Help ("?"): een rond icoonknopje i.p.v. een met tekstpadding opgevulde
   rechthoek — die las als een losse, betekenisloze knop in de kopbalk.
   Vlak vóór de accountchip geplaatst: een hulp-icoon naast de accountstatus
   is een herkenbaar duo, i.p.v. ergens los in de vrije ruimte te zweven. */
.n-help-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 28px; height: 28px; padding: 0; border-radius: 50%;
  border: 1px solid var(--n-lijn); background: #fff; color: var(--n-gedempt);
  font-weight: 700; font-size: 13px; line-height: 1;
}
.n-help-btn:hover { border-color: var(--n-groen); background: var(--n-groen-zacht); color: var(--n-groen-donker); }
.n-help-btn:focus-visible { outline: 2px solid var(--n-groen); outline-offset: 1px; }

/* ── Accountchip (Pro-status, altijd zichtbaar naast de schermspecifieke acties) ── */
.n-account { display: flex; align-items: center; }
.n-account-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 6px 4px 10px; border: 1px solid var(--n-lijn); background: var(--n-vlak);
  font-size: 12px; color: var(--n-tekst); white-space: nowrap;
}
.n-account-chip[data-tier="pro"] { border-color: var(--n-groen); background: var(--n-groen-zacht); color: var(--n-groen-donker); font-weight: 650; }
.n-account-chip .n-btn { min-height: 26px; padding: 3px 10px; font-size: 11.5px; }

/* ── Knoppen ── */
.n-btn {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 36px; padding: 7px 14px;
  border: 1px solid var(--n-lijn); background: #fff; color: var(--n-tekst);
  font-weight: 600; font-size: 13px;
}
.n-btn:hover { background: var(--n-band); }
.n-btn:focus-visible { outline: 2px solid var(--n-groen); outline-offset: 1px; }
.n-btn-primair { background: var(--n-groen); border-color: var(--n-groen); color: #fff; }
.n-btn-primair:hover { background: var(--n-groen-donker); border-color: var(--n-groen-donker); }
.n-btn-stil { border-color: transparent; background: transparent; color: var(--n-gedempt); }
.n-btn-stil:hover { background: var(--n-band); color: var(--n-inkt); }
.n-btn-gevaar:hover { background: #fdf2f2; color: #b42318; border-color: #ecc7c3; }
.n-btn:disabled { opacity: 0.55; cursor: default; }

/* ── Overzicht (reeksen + rapportages) ── */
.n-container { max-width: 980px; margin: 0 auto; padding: 28px 20px 80px; }
.n-pagina-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 6px 0 20px; }
.n-pagina-kop h1 { margin: 0; font-size: 22px; color: var(--n-inkt); letter-spacing: -0.01em; }
.n-pagina-kop p { margin: 4px 0 0; color: var(--n-gedempt); font-size: 13px; }

.n-leeg {
  padding: 44px 28px; text-align: center;
  background: #fff; border: 1px dashed var(--n-lijn);
}
.n-leeg h2 { margin: 0 0 6px; font-size: 17px; color: var(--n-inkt); }
.n-leeg p { margin: 0 0 18px; color: var(--n-gedempt); }
.n-leeg .n-btn { justify-content: center; }

.n-reeks { background: #fff; border: 1px solid var(--n-lijn); margin-bottom: 18px; }
.n-reeks-kop {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--n-lijn-zacht); background: #fbfcfe;
}
.n-reeks-kop-info { flex: 1; min-width: 0; }
.n-reeks-kop h2 { margin: 0; font-size: 16px; color: var(--n-inkt); }
.n-reeks-kop .n-reeks-meta { font-size: 12.5px; color: var(--n-gedempt); margin-top: 1px; }
.n-type-chip {
  padding: 2px 8px; border: 1px solid var(--n-lijn); color: var(--n-gedempt);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
}
.n-rapportage-rij {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px; border-bottom: 1px solid var(--n-lijn-zacht);
}
.n-rapportage-rij:last-child { border-bottom: 0; }
.n-rapportage-rij:hover { background: #fbfcfe; }
.n-rap-titel { flex: 1; min-width: 0; }
.n-rap-titel strong { color: var(--n-inkt); font-weight: 650; font-size: 14px; }
.n-rap-titel span { display: block; font-size: 12px; color: var(--n-gedempt); }
.n-badge {
  padding: 2px 8px; font-size: 10.5px; font-weight: 700;
  border: 1px solid var(--n-lijn); color: var(--n-gedempt);
}
.n-badge-definitief { border-color: #a6dcc0; background: var(--n-groen-zacht); color: var(--n-groen-donker); }
.n-reeks-voet { padding: 10px 18px; display: flex; gap: 10px; background: #fbfcfe; border-top: 1px solid var(--n-lijn-zacht); }

/* ── Editorindeling ── */
.n-editor { display: grid; grid-template-columns: 216px minmax(0, 1fr); min-height: calc(100vh - 54px); }
.n-zijnav {
  position: sticky; top: 54px; align-self: start;
  height: calc(100vh - 54px); overflow-y: auto;
  padding: 14px 10px; background: #fff; border-right: 1px solid var(--n-lijn);
}
.n-zijnav-kop { padding: 2px 8px 10px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--n-gedempt); }
.n-zijnav button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; border: 0; border-left: 2px solid transparent;
  background: transparent; color: var(--n-tekst); font-size: 13px; font-weight: 600; text-align: left;
}
.n-zijnav button:hover { background: var(--n-band); }
.n-zijnav button.n-actief { border-left-color: var(--n-groen); background: var(--n-groen-zacht); color: var(--n-inkt); }
/* Ongescoped (niet .n-zijnav .n-nav-rag): dezelfde stip wordt ook gebruikt
   in de mobiele sectiesmodal, buiten de zijnav. Status staat niet alleen op
   kleur (rood/groen is voor kleurenblinde gebruikers niet te onderscheiden):
   elk statusteken heeft ook een eigen vorm (●/▲/✖), zelfde symbolen als in
   het rapport zelf. */
.n-nav-rag { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; width: 12px; height: 12px; border-radius: 999px; flex: 0 0 auto; font-size: 8px; line-height: 1; color: #fff; }
.n-nav-rag.ok { background: var(--n-groen); }
.n-nav-rag.aandacht { background: var(--n-oranje); }
.n-nav-rag.kritiek { background: var(--n-rood); font-weight: 700; }
.n-nav-rag.n-her { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--n-oranje); }

.n-werk { padding: 24px 28px 120px; max-width: 1040px; }

/* ── Sectiekaarten ── */
.n-sectie { background: #fff; border: 1px solid var(--n-lijn); margin-bottom: 18px; scroll-margin-top: 70px; }
.n-sectie-kop {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; background: var(--n-band); border-bottom: 1px solid var(--n-lijn-zacht);
}
.n-sectie-kop h2 { margin: 0; flex: 1; font-size: 15px; color: var(--n-inkt); }
.n-sectie-body { padding: 16px 18px; }
.n-sectie-uitleg { margin: -4px 0 12px; font-size: 12.5px; color: var(--n-gedempt); }

/* RAG-segmented control per sectie */
.n-rag { display: inline-flex; border: 1px solid var(--n-lijn); background: #fff; }
.n-rag button {
  padding: 5px 12px; border: 0; border-left: 1px solid var(--n-lijn);
  background: #fff; font-size: 12px; font-weight: 700; color: var(--n-tekst);
}
.n-rag button:first-child { border-left: 0; }
.n-rag button[aria-pressed="true"].n-rag-ok { background: var(--n-groen); color: #fff; }
.n-rag button[aria-pressed="true"].n-rag-aandacht { background: var(--n-oranje); color: #fff; }
.n-rag button[aria-pressed="true"].n-rag-kritiek { background: var(--n-rood); color: #fff; }

/* Statusvoorstel op basis van inhoud (geld/mijlpalen/risico's/issues) */
.n-rag-hint { margin: -4px 0 12px; font-size: 12px; color: var(--n-gedempt); line-height: 1.5; }
.n-rag-hint strong { color: var(--n-tekst); }
.n-rag-auto-aan {
  border: 0; background: none; padding: 0; margin-left: 2px; font: inherit; font-weight: 700;
  color: var(--n-groen-donker); text-decoration: underline; cursor: pointer;
}

.n-herbeoordeel {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; font-size: 11px; font-weight: 700;
  background: #fff7e8; border: 1px solid #f4c98a; color: #9a5b00;
}
.n-herbeoordeel button { border: 0; background: transparent; color: #9a5b00; font-weight: 700; font-size: 11px; text-decoration: underline; padding: 0; }

/* ── Velden ── */
.n-veld { display: block; margin-bottom: 14px; }
.n-veld > span { display: block; margin-bottom: 5px; font-size: 12.5px; font-weight: 650; color: var(--n-inkt); }
.n-veld input[type="text"], .n-veld input[type="date"], .n-veld input[type="number"], .n-veld select, .n-veld textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--n-lijn); background: #fff;
}
.n-veld textarea { min-height: 92px; resize: vertical; line-height: 1.55; }
.n-veld input:focus, .n-veld select:focus, .n-veld textarea:focus { outline: none; border-color: var(--n-groen); box-shadow: 0 0 0 3px var(--n-focus); }
.n-veld .n-hint { display: block; margin-top: 4px; font-size: 11.5px; color: var(--n-gedempt); }

/* ── Brandpuntkiezer voorbladafbeelding ── */
.n-heropicker {
  position: relative; width: 100%; max-width: 420px; aspect-ratio: 3.4 / 1;
  overflow: hidden; border: 1px solid var(--n-lijn); background: var(--n-vlak);
  cursor: crosshair; touch-action: none; user-select: none;
}
.n-heropicker img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.n-heropicker-kruis {
  position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border: 2px solid #fff; border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.n-veldrij { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.n-veldrij-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0 18px; }

/* ── Itemtabellen (mijlpalen, geld, issues, …) ──
   De tabel zelf mag smaller worden dan haar kolommen willen (min-width
   per kolom); de wrapper scrollt dan horizontaal in plaats van de hele
   pagina breder te maken (kritiek op telefoonbreedte). */
/* Scroll-schaduw (geen JS): twee effen randverloop-lagen scrollen mee met
   de inhoud (attachment: local) en maskeren de schaduw zodra je aan dat
   uiteinde niets meer te scrollen hebt; de schaduw zelf blijft vast aan
   de viewport (attachment: scroll). Zo blijft de brede itemtabel scrollen
   binnen haar wrapper (mobielbescherming hierboven), maar is nu ook
   zichtbaar dát er nog kolommen buiten beeld staan. */
.n-tabel-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 10px;
  background:
    linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left,
    linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right,
    linear-gradient(to right, rgba(29, 36, 51, 0.14), rgba(29, 36, 51, 0) 70%) left,
    linear-gradient(to left, rgba(29, 36, 51, 0.14), rgba(29, 36, 51, 0) 70%) right;
  background-repeat: no-repeat;
  background-size: 24px 100%, 24px 100%, 10px 100%, 10px 100%;
  background-attachment: local, local, scroll, scroll;
}
.n-tabel { width: 100%; border-collapse: collapse; margin-bottom: 0; }
.n-tabel th {
  padding: 6px 8px; text-align: left; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--n-gedempt);
  border-bottom: 1px solid var(--n-lijn);
}
.n-tabel td { padding: 4px 4px 4px 0; vertical-align: top; }
.n-tabel input, .n-tabel select {
  width: 100%; padding: 7px 9px; border: 1px solid var(--n-lijn-zacht); background: #fff;
}
.n-tabel input:focus, .n-tabel select:focus { outline: none; border-color: var(--n-groen); box-shadow: 0 0 0 3px var(--n-focus); }
.n-tabel .n-verwijder {
  min-width: 40px; min-height: 40px; border: 0; background: transparent; color: var(--n-gedempt); font-size: 15px;
}
.n-tabel .n-verwijder:hover { color: var(--n-rood); }
.n-tabel-voet { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.n-tabel-voet .n-teller { font-size: 12px; color: var(--n-gedempt); }
#nDoelTeller.n-teller { font-size: 11.5px; color: var(--n-gedempt); text-align: right; }
#nDoelTeller.n-teller.n-teller-over { color: #9a5b00; }
.n-totaalregel { font-size: 12.5px; color: var(--n-inkt); font-weight: 650; padding: 6px 0; }

/* Stoplicht-select in tabellen */
.n-stoplicht { display: inline-flex; border: 1px solid var(--n-lijn-zacht); }
.n-stoplicht button { width: 30px; height: 32px; border: 0; background: #fff; font-size: 13px; color: #c3cad6; }
.n-stoplicht button[aria-pressed="true"].g { color: var(--n-groen); }
.n-stoplicht button[aria-pressed="true"].o { color: var(--n-oranje); }
.n-stoplicht button[aria-pressed="true"].r { color: var(--n-rood); }

/* Schakelaar (planningpagina/geldpagina aan-uit) */
.n-schakel { display: inline-flex; border: 1px solid var(--n-lijn); }
.n-schakel button { padding: 6px 14px; border: 0; border-left: 1px solid var(--n-lijn); background: #fff; font-size: 12.5px; font-weight: 600; }
.n-schakel button:first-child { border-left: 0; }
.n-schakel button[aria-pressed="true"] { background: var(--n-groen); color: #fff; }

/* Formaatkeuze A3/A4 (PDF-modal): tastbare kaarten i.p.v. een tekstveld. */
.n-formaatkeuze { display: flex; gap: 10px; }
.n-formaatkeuze button {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 12px; border: 1.5px solid var(--n-lijn); border-radius: 2px;
  background: #fff; cursor: pointer; text-align: center;
}
.n-formaatkeuze button[aria-pressed="true"] { border-color: var(--n-groen); background: var(--n-groen-zacht); }
.n-formaatkeuze-icon { display: block; border: 1.5px solid var(--n-gedempt); background: #fff; }
.n-formaatkeuze button[aria-pressed="true"] .n-formaatkeuze-icon { border-color: var(--n-groen); }
.n-formaatkeuze-a3 { width: 46px; height: 32px; }
.n-formaatkeuze-a4 { width: 32px; height: 46px; }
.n-formaatkeuze-label { font-size: 13px; font-weight: 650; color: var(--n-inkt); }
.n-formaatkeuze-hint { font-size: 11px; color: var(--n-gedempt); }
.n-linkregel, .n-versieregel {
  padding: 10px 0; border-bottom: 1px solid var(--n-lijn-zacht); font-size: 12.5px;
}
.n-linkregel:last-child, .n-versieregel:last-child { border-bottom: 0; }
.n-linkregel-kop, .n-versieregel-kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.n-linkregel-kop strong, .n-versieregel-kop strong { color: var(--n-inkt); font-weight: 650; }
.n-linkregel-kop span, .n-versieregel-kop span { color: var(--n-gedempt); font-size: 11.5px; }
.n-linkregel .n-deellink { margin-top: 8px; }

/* ── Preview-overlay ── */
.n-preview {
  position: fixed; inset: 0; z-index: 120; display: none;
  background: #3c4353; overflow: auto;
}
.n-preview.n-open { display: block; }
.n-preview-balk {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px; background: #262c39; color: #fff;
}
.n-preview-balk strong { flex: 1; font-size: 14px; }
.n-preview-canvas { padding: 24px; }
.n-schaalvak { margin: 0 auto; transform-origin: top left; }

/* ── Modals (doorstart, delen, reeks) ── */
.n-modal {
  position: fixed; inset: 0; z-index: 150; display: none;
  align-items: flex-start; justify-content: center;
  padding: 6vh 16px; background: rgba(16, 24, 40, 0.5); overflow-y: auto;
}
.n-modal.n-open { display: flex; }
.n-modal-kaart { width: 100%; max-width: 520px; background: #fff; border: 1px solid var(--n-lijn); }
.n-modal-kop {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 18px; background: var(--n-band); border-bottom: 1px solid var(--n-lijn);
}
.n-modal-kop h3 { margin: 0; font-size: 15px; color: var(--n-inkt); }
.n-modal-sluit {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px;
  border: 0; background: transparent; font-size: 20px; color: var(--n-gedempt);
}
.n-modal-body { padding: 16px 18px; }
.n-modal-voet { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--n-lijn-zacht); }
.n-check { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 10px; font-size: 13px; }
.n-check input { margin-top: 3px; }
.n-deellink { display: flex; gap: 8px; margin-top: 10px; }
.n-deellink input { flex: 1; padding: 8px 10px; border: 1px solid var(--n-lijn); background: var(--n-vlak); font-size: 12.5px; }
.n-melding { margin-top: 10px; padding: 9px 12px; font-size: 12.5px; background: var(--n-groen-zacht); border-left: 3px solid var(--n-groen); color: var(--n-inkt); }
.n-melding.n-fout { background: #fdf2f2; border-left-color: var(--n-rood); }

/* Sync-reekslijst (opt-in per reeks) */
.n-syncregel { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--n-lijn-zacht); font-size: 13px; }
.n-syncregel:last-child { border-bottom: 0; }
.n-syncregel input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 auto; }

/* ── Toast ── */
.n-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 200; padding: 10px 18px; background: var(--n-inkt); color: #fff;
  font-size: 13px; display: none; max-width: min(92vw, 560px);
}
.n-toast.n-zichtbaar { display: block; }

/* ── Feedbackknop + paneel (klankbordgroep) ── */
.n-feedback-knop {
  /* right:4px (i.p.v. 0) zodat de knop niet op de viewportrand plakt, waar
     mobiele edge-swipe-navigatiegebaren worden opgevangen; min-width:40px
     voor een geldig tikdoel (was 34px). */
  position: fixed; right: 4px; bottom: 120px; z-index: 90;
  writing-mode: vertical-rl; padding: 12px 8px; min-width: 40px;
  background: var(--n-groen); color: #fff; border: 0;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
}
.n-feedback-knop:hover { background: var(--n-groen-donker); }
.n-feedback-paneel {
  position: fixed; right: 16px; bottom: 16px; z-index: 160;
  width: 340px; max-width: calc(100vw - 32px);
  background: #fff; border: 1px solid var(--n-lijn); box-shadow: 0 18px 50px rgba(16, 24, 40, 0.25);
  display: none;
}
.n-feedback-paneel.n-open { display: block; }
.n-soorten { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.n-soorten button {
  padding: 4px 10px; border: 1px solid var(--n-lijn); background: #fff; font-size: 12px; font-weight: 600;
}
.n-soorten button[aria-pressed="true"] { background: var(--n-groen); border-color: var(--n-groen); color: #fff; }

/* ── Kijkpagina (bekijk.html) — mobielvriendelijk ── */
.n-kijk-balk {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; background: #fff; border-bottom: 1px solid var(--n-lijn);
}
.n-kijk-balk .n-kijk-titel { flex: 1; min-width: 140px; }
.n-kijk-balk .n-kijk-titel strong { display: block; font-size: 14px; color: var(--n-inkt); }
.n-kijk-balk .n-kijk-titel span { font-size: 11.5px; color: var(--n-gedempt); }
.n-kijk-canvas { padding: 14px; overflow-x: hidden; }
.n-kijk-status { padding: 60px 20px; text-align: center; color: var(--n-gedempt); }

@media (max-width: 900px) {
  /* minmax(0, 1fr), niet kaal "1fr": een grid-track zonder expliciete
     min-width neemt default minmax(auto,1fr) — dan blaast één brede
     tabel (min-width per kolom) de hele kolom en dus de pagina op.
     Zelfde bescherming als de desktop-regel hierboven al had. */
  .n-editor { grid-template-columns: minmax(0, 1fr); }
  .n-zijnav { display: none; }
  #nSecties.n-zichtbaar { display: inline-flex; margin: 4px 0; }
  .n-werk { padding: 16px 14px 120px; }
  .n-veldrij, .n-veldrij-3 { grid-template-columns: 1fr; }
  .n-topbar { flex-wrap: wrap; height: auto; padding: 8px 12px; }
  /* .n-topbar zelf wrapt, maar .n-topbar-mid (kruimel + autosave-tekst)
     en .n-topbar-acties (Versies/Bekijk/Delen/PDF) zijn zelf ook
     niet-wrappende flexrijen — zonder deze regels duwt zo'n rij in zijn
     eentje de pagina breder dan het scherm ("lokaal op dit apparaat" is
     bewust volledig leesbaar, klankbordbesluit — die tekst wordt niet
     ingekort, maar krijgt hier gewoon haar eigen regel). */
  /* flex-basis:100% dwingt een eigen volledige rij af (brand blijft
     anders op dezelfde rij staan en knijpt dit blok tot een paar tientallen
     pixels, waarna de kinderen alsnog overflowen — flex-wrap op de ouder
     wrapt namelijk pas als een item niet kan krimpen, en min-width:0 laat
     het juist wél tot bijna niets krimpen). */
  .n-topbar-mid { flex: 1 1 100%; flex-wrap: wrap; row-gap: 2px; }
  .n-account { flex: 1 1 100%; }
  .n-account-chip { width: 100%; justify-content: space-between; }
  /* Grid i.p.v. wrappende flexrij: anders krijgt elke knop zijn eigen
     content-breedte en -hoogte (Versies/Delen kort en 1 regel, Bekijk
     rapport/Download PDF lang en 2 regels) — onrustig beeld. Vier gelijke
     cellen, één hoogte, tekst blijft op één regel. */
  .n-topbar-acties { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  .n-topbar-acties .n-btn { width: 100%; justify-content: center; white-space: nowrap; padding-left: 8px; padding-right: 8px; }
  .n-formaatkeuze { flex-wrap: wrap; }
  .n-formaatkeuze button { flex: 1 1 130px; }
  /* Zonder wrap knijpt .n-reeks-kop-info (flex:1; min-width:0) helemaal
     dicht zodra de badge/chip/knop-buren niet genoeg krimpen — de titel-
     en opdrachtgeverstekst overflowt dan zichtbaar over die buren heen.
     Titel/meta krijgen op mobiel altijd een eigen volle rij; de rest
     wrapt eronder. */
  .n-reeks-kop { flex-wrap: wrap; row-gap: 6px; }
  .n-reeks-kop-info { flex: 1 1 100%; }
}

/* ── Landingspagina (/nieuw/landing.html) ── */
.n-land-wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.n-land-hero { padding: 56px 0 40px; background: linear-gradient(180deg, #fbfcfe 0%, var(--n-vlak) 100%); border-bottom: 1px solid var(--n-lijn); }
.n-land-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.n-land-hero h1 { margin: 12px 0 14px; font-size: 32px; line-height: 1.2; color: var(--n-inkt); letter-spacing: -0.01em; }
.n-land-hero h1 em { color: var(--n-groen); font-style: normal; }
.n-land-lead { margin: 0 0 20px; font-size: 15px; color: var(--n-tekst); line-height: 1.6; max-width: 560px; }
.n-land-cta-rij { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.n-land-cta { min-height: 44px; padding: 10px 18px; font-size: 14px; }
.n-land-shot-kaart { background: #fff; border: 1px solid var(--n-lijn); box-shadow: 0 12px 28px rgba(29, 36, 51, 0.08); overflow: hidden; }
.n-land-shot-kaart img { display: block; width: 100%; height: auto; }
.n-land-shot-kaart figcaption { padding: 10px 14px; font-size: 12.5px; color: var(--n-gedempt); border-top: 1px solid var(--n-lijn-zacht); }

.n-land-features, .n-land-section { padding: 52px 0; }
.n-land-features h2, .n-land-shots h2, .n-land-prijzen h2, .n-land-slot h2, .n-land-proof h2, .n-land-cta-band h2, .n-land-section h2 { margin: 0 0 24px; font-size: 22px; color: var(--n-inkt); text-align: center; letter-spacing: -0.01em; }
.n-land-section-lead { margin: -14px auto 26px; text-align: center; }
.n-land-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.n-land-feature { padding: 18px; background: #fff; border: 1px solid var(--n-lijn); }
.n-land-feature h3 { margin: 0 0 8px; font-size: 14.5px; color: var(--n-inkt); }
.n-land-feature p { margin: 0; font-size: 13px; color: var(--n-tekst); line-height: 1.55; }

.n-land-shots { padding: 20px 0 52px; text-align: center; }
.n-land-shots .n-land-lead { margin: 0 auto 26px; text-align: center; }
.n-land-shots figure { margin: 0 0 26px; text-align: left; }

.n-land-prijzen { padding: 52px 0; background: #fff; border-top: 1px solid var(--n-lijn); border-bottom: 1px solid var(--n-lijn); text-align: center; }
.n-land-prijzen .n-land-lead { margin: 0 auto 26px; text-align: center; }
.n-land-plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 640px; margin: 0 auto; text-align: left; }
.n-land-plan { padding: 22px; border: 1px solid var(--n-lijn); background: var(--n-vlak); }
.n-land-plan h3 { margin: 0 0 6px; font-size: 14.5px; color: var(--n-inkt); }
.n-land-prijs { font-size: 30px; font-weight: 800; color: var(--n-inkt); margin-bottom: 6px; }
.n-land-plan .n-hint { margin: 0 0 16px; }
.n-land-plan .n-btn { width: 100%; justify-content: center; }

.n-land-slot { padding: 52px 0 64px; text-align: center; }
.n-land-slot .n-land-cta-rij { justify-content: center; }
.n-land-footer { padding: 22px 0 40px; text-align: center; font-size: 12px; color: var(--n-gedempt); }
.n-land-footer a { color: inherit; }
.n-land-footer-links { margin-bottom: 8px; }

/* Kicker: klein groen label boven een koptekst */
.n-land-kicker { display: block; margin-bottom: 10px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--n-groen-donker); }

/* Checklist met vinkjes (hero-bullets) */
.n-land-points { display: flex; flex-direction: column; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.n-land-points span { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--n-tekst); }
.n-land-points span::before {
  content: "✓"; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex: 0 0 auto;
  background: var(--n-groen-zacht); color: var(--n-groen-donker); font-size: 11px; font-weight: 800;
}

/* Twee-koloms vergelijking (zonder structuur / met VGR) */
.n-land-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.n-land-compare-card { padding: 20px; background: #fff; border: 1px solid var(--n-lijn); }
.n-land-compare-card.n-accent { border-color: var(--n-groen); background: var(--n-groen-zacht); }
.n-land-compare-card h3 { margin: 0 0 12px; font-size: 14.5px; color: var(--n-inkt); }
.n-land-compare-card ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--n-tekst); line-height: 1.7; }

/* Genummerde stappenrij */
.n-land-steps { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0 22px; padding: 14px 16px; background: var(--n-vlak); border: 1px solid var(--n-lijn-zacht); font-size: 13px; color: var(--n-tekst); }
.n-land-steps strong { color: var(--n-groen-donker); }

/* Voorbeeld-in-detail sectie: copy + screenshot naast elkaar */
.n-land-proof { padding: 52px 0; }
.n-land-proof-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.n-land-list { margin: 0 0 22px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.n-land-list strong { display: block; font-size: 13.5px; color: var(--n-inkt); margin-bottom: 2px; }
.n-land-list span { display: block; font-size: 13px; color: var(--n-tekst); line-height: 1.55; }

/* Kruislinks naar verwante pagina's */
.n-land-links-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.n-land-links-grid a { display: block; padding: 16px 18px; background: #fff; border: 1px solid var(--n-lijn); text-decoration: none; color: inherit; }
.n-land-links-grid a:hover { border-color: var(--n-groen); }
.n-land-links-grid strong { display: block; margin-bottom: 4px; color: var(--n-groen-donker); font-size: 13.5px; }
.n-land-links-grid span { font-size: 12.5px; color: var(--n-gedempt); }

/* Getinte CTA-band (rustiger dan de primaire eind-CTA op de homepage) */
.n-land-cta-band { padding: 44px 0; background: var(--n-groen-zacht); border-top: 1px solid var(--n-lijn); border-bottom: 1px solid var(--n-lijn); text-align: center; }
.n-land-cta-band .n-land-cta-rij { justify-content: center; margin-bottom: 0; }

@media (max-width: 800px) {
  .n-land-hero-grid { grid-template-columns: 1fr; }
  .n-land-feature-grid { grid-template-columns: 1fr; }
  .n-land-plan-grid { grid-template-columns: 1fr; }
  .n-land-hero h1 { font-size: 26px; }
  .n-land-compare { grid-template-columns: 1fr; }
  .n-land-proof-grid { grid-template-columns: 1fr; }
}

/* ── Zo werkt het (korte instructie) + voorbeeldkiezer ─────────────────── */
.n-uitleg-stappen { margin: 0 0 4px; padding-left: 20px; }
.n-uitleg-stappen li { margin: 0 0 8px; color: var(--n-tekst); font-size: 13.5px; line-height: 1.5; }
.n-uitleg-blok { margin: 14px 0 6px; padding: 12px 14px; background: var(--n-vlak); border: 1px solid var(--n-lijn-zacht); border-radius: 8px; }
.n-uitleg-blok h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--n-gedempt); }
.n-uitleg-blok ul { margin: 0; padding-left: 18px; }
.n-uitleg-blok li { margin: 0 0 6px; font-size: 13px; line-height: 1.5; color: var(--n-tekst); }
.n-kbd {
  display: inline-block; padding: 1px 6px; margin: 0 1px; border: 1px solid var(--n-lijn);
  border-bottom-width: 2px; border-radius: 5px; background: #fff; font: 600 11.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--n-tekst); white-space: nowrap;
}
.n-voorbeeld-lijst { display: flex; flex-direction: column; gap: 10px; }
.n-voorbeeld-kaart {
  display: flex; flex-direction: column; gap: 3px; text-align: left; width: 100%;
  padding: 13px 15px; border: 1px solid var(--n-lijn); border-radius: 10px; background: #fff; cursor: pointer;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.n-voorbeeld-kaart:hover { border-color: var(--n-groen); background: var(--n-groen-zacht); }
.n-voorbeeld-kaart:focus-visible { outline: 2px solid var(--n-groen); outline-offset: 1px; }
.n-voorbeeld-sector { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--n-gedempt); }
.n-voorbeeld-titel { font-size: 15px; color: var(--n-tekst); }
.n-voorbeeld-oms { font-size: 12.5px; color: var(--n-gedempt); line-height: 1.45; }

/* ── Micro-labels bij de statusiconen in de reekskop ───────────────────── */
.n-nav-groep { display: inline-flex; align-items: center; gap: 5px; }
.n-nav-groep-label {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--n-gedempt); line-height: 1;
}