/* =====================================================================
   /naamkompas.css — NaamKompas als stuk gereedschap.

   Ontwerpintentie (25 okt 2026, naar de referentie van Steven): een
   product, geen formulier. Een donkere kop met een echt voorbeeld van
   een controle, daaroverheen één brede invoerbalk, en daaronder een
   werkplek in drie kolommen: menu, naamkaarten, detailpaneel. Het ene
   beeldmiddel is de naamkaart: monogram, naam, kenmerken, de status per
   domein met bron en tijd, en één scorering. Lime is de knop die iets
   start ("Genereer namen"); de rest is donker, crème en wit. Weggelaten:
   verzonnen prijzen, "beschikbaar" waar het register dat niet zegt,
   handschrift en een tweede letter.
   ===================================================================== */

.nk-pagina {
  --nk-kaart: #FFFEFB; --nk-wit: #FFFFFF; --nk-zacht: #EEE9DE; --nk-zacht-2: #E6E0D2;
  --nk-lijn: rgba(26,26,24,0.10); --nk-lijn-2: rgba(26,26,24,0.17);
  --nk-fg: #1A1A18; --nk-dim: rgba(26,26,24,0.64);
  --nk-donker: #1A1A18; --nk-donker-2: #25251F; --nk-donker-3: #303029; --nk-creme: #F2EEE4; --nk-creme-dim: rgba(242,238,228,0.72);
  --nk-goed: #1F7A4D; --nk-bezet: #B3361F; --nk-let: #A86A12; --nk-grijs: #77736A;
  --nk-lime: #D4FF3D; --nk-lime-2: #C4F02E;
  --nk-uit: cubic-bezier(0.23, 1, 0.32, 1);
}
.nk-pagina main { overflow-x: clip; }

/* ── Kop ──────────────────────────────────────────────────────────── */
.nk-hero { margin: 88px 16px 0; background: var(--nk-donker); color: var(--nk-creme); border-radius: 28px; overflow: hidden; }
.nk-hero-binnen { max-width: 1400px; margin: 0 auto; padding: 28px clamp(20px, 4vw, 56px) 132px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px 48px; align-items: center; }
.nk-kruimels { grid-column: 1 / -1; font-size: 12px; letter-spacing: 0.06em; color: var(--nk-creme-dim); display: flex; flex-wrap: wrap; gap: 8px; }
.nk-kruimels a { color: var(--nk-creme-dim); text-decoration: none; }
.nk-kruimels a:hover { color: var(--nk-creme); }
.nk-kruimels [aria-current] { color: var(--nk-creme); }
.nk-labels { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 22px; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nk-creme-dim); }
.nk-label-wit { background: var(--nk-creme); color: var(--nk-fg); border-radius: 100px; padding: 5px 11px; letter-spacing: 0.1em; }
.nk-hero h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(34px, 4.6vw, 60px); line-height: 1.03; letter-spacing: -0.03em; color: var(--nk-creme); margin-bottom: 22px; max-width: 17ch; }
.nk-hero h1 .nk-h1-zacht { color: rgba(242,238,228,0.62); }
.nk-hero-lead { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--nk-creme-dim); max-width: 52ch; margin-bottom: 26px; }
.nk-hero-punten { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 15px; }
.nk-hero-punten li { display: inline-flex; align-items: center; gap: 9px; }
.nk-hero-punten svg { width: 20px; height: 20px; color: var(--nk-donker); background: var(--nk-creme); border-radius: 50%; padding: 4px; flex-shrink: 0; }

/* Het voorbeeld rechts: een echte controle van 25 okt 2026, als één
   samenhangend productbeeld. Eén hoek voor het geheel (niet per laag),
   het witte detailkaartje komt naar voren, en een zacht licht erachter
   maakt het donkere venster los van de donkere kop. */
.nk-voorbeeld { margin: 0; position: relative; display: grid; justify-items: end; padding-bottom: 34px; }
.nk-voorbeeld::before { content: ''; position: absolute; inset: -12% -18% 0 4%; background: radial-gradient(closest-side, rgba(242,238,228,0.09), transparent 72%); pointer-events: none; }
.nk-buhne { position: relative; width: 580px; height: 470px; transform: perspective(1900px) rotateY(-12deg) rotateX(5deg); transform-style: preserve-3d; transform-origin: 65% 50%; animation: nk-op 0.8s cubic-bezier(0.23, 1, 0.32, 1) both; }
@keyframes nk-op { from { opacity: 0; translate: 0 16px; } }
.nk-app-venster { position: absolute; top: 0; left: 0; width: 440px; background: #22221D; border: 1px solid rgba(242,238,228,0.10); border-radius: 22px; overflow: hidden; box-shadow: 0 60px 110px -24px rgba(0,0,0,0.65), 0 2px 0 rgba(242,238,228,0.04) inset; }
.nk-av-balk { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid rgba(242,238,228,0.08); }
.nk-av-balk svg { width: 18px; height: 18px; color: var(--nk-creme); flex-shrink: 0; }
.nk-av-zoek { flex: 1; min-width: 0; background: rgba(242,238,228,0.06); border: 1px solid rgba(242,238,228,0.08); border-radius: 12px; padding: 8px 12px; font-size: 13px; color: var(--nk-creme); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nk-av-knop { font-size: 12.5px; font-weight: 600; color: var(--nk-donker); background: var(--nk-creme); border-radius: 100px; padding: 7px 12px; white-space: nowrap; }
.nk-av-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 20px 6px; }
.nk-av-kop strong { font-size: 15.5px; color: var(--nk-creme); letter-spacing: -0.01em; }
.nk-av-kop span { font-size: 12px; color: var(--nk-creme-dim); }
.nk-av-lijst { list-style: none; padding: 4px 10px 12px; }
.nk-av-lijst li { display: grid; grid-template-columns: minmax(0, 1fr) auto 40px; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 14px; }
.nk-av-lijst li + li { margin-top: 2px; }
.nk-av-lijst li.aan { background: rgba(242,238,228,0.07); box-shadow: 0 0 0 1px rgba(242,238,228,0.10) inset; }
.nk-av-naam { min-width: 0; }
.nk-av-naam b { display: block; font-size: 14.5px; font-weight: 600; color: var(--nk-creme); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nk-av-naam small { font-size: 12px; color: var(--nk-creme-dim); }
.nk-av-lijst .nk-status { background: rgba(242,238,228,0.08); color: var(--nk-creme); font-size: 12.5px; padding: 3px 10px 3px 8px; }
.nk-voorbeeld .nk-av-lijst .nk-s-goed .nk-stip, .nk-av-balk + * .nk-s-goed .nk-stip { background: #5CD69B; }
.nk-voorbeeld .nk-av-lijst .nk-s-bezet .nk-stip { background: #F0705B; }
.nk-av-lijst .nk-ring { width: 38px; height: 38px; font-size: 13px; --ring-spoor: rgba(242,238,228,0.14); --ring-kleur: var(--nk-creme); color: var(--nk-creme); }
.nk-av-lijst .nk-ring circle { stroke-width: 4; }
.nk-dk { position: absolute; right: 0; bottom: 0; width: 272px; background: var(--nk-kaart); color: var(--nk-fg); border-radius: 20px; padding: 18px 18px 14px; transform: translateZ(80px); box-shadow: 0 46px 90px -18px rgba(0,0,0,0.6); }
.nk-dk-kop { display: flex; align-items: center; gap: 12px; }
.nk-dk-kop strong { display: block; font-size: 18px; letter-spacing: -0.015em; line-height: 1.2; }
.nk-dk-kop small { font-size: 12px; color: var(--nk-dim); }
.nk-dk-kop .nk-ring { width: 42px; height: 42px; font-size: 13.5px; margin-left: auto; }
.nk-dk-tabs { display: flex; gap: 14px; font-size: 12px; color: var(--nk-dim); border-bottom: 1px solid var(--nk-lijn); margin: 14px 0 4px; }
.nk-dk-tabs span { padding-bottom: 8px; }
.nk-dk-tabs span:first-child { color: var(--nk-fg); font-weight: 600; box-shadow: 0 2px 0 var(--nk-fg); }
.nk-dk-rij { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; font-weight: 500; }
.nk-dk-rij + .nk-dk-rij { border-top: 1px solid var(--nk-lijn); }
.nk-dk-rij .nk-status { font-size: 12px; padding: 3px 9px 3px 7px; }
.nk-dk-bron { font-size: 11.5px; color: var(--nk-dim); margin-top: 6px; }
.nk-voorbeeld figcaption { position: absolute; right: 0; bottom: 0; font-size: 12px; color: var(--nk-creme-dim); }
@media (max-width: 1240px) { .nk-buhne { zoom: 0.86; } }
@media (max-width: 1100px) { .nk-buhne { zoom: 0.76; } }

/* ── De invoerbalk ────────────────────────────────────────────────── */
.nk-balk {
  position: relative; z-index: 2; max-width: 1368px; margin: -96px auto 0; margin-inline: max(32px, calc((100% - 1368px) / 2));
  background: var(--nk-wit); border: 1px solid var(--nk-lijn); border-radius: 22px;
  box-shadow: 0 1px 2px rgba(26,26,24,0.05), 0 18px 48px rgba(26,26,24,0.10);
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.9fr) minmax(0, 0.55fr) minmax(0, 1.4fr) auto;
  padding: 22px 6px;
}
.nk-balk > * { padding: 0 18px; min-width: 0; }
.nk-balk > * + * { border-left: 1px solid var(--nk-lijn); }
.nk-balk fieldset { border: 0; margin: 0; }
.nk-balk legend, .nk-balk-kop { font-size: 14px; font-weight: 600; margin-bottom: 12px; padding: 0; display: flex; align-items: center; gap: 6px; }
.nk-balk legend span, .nk-balk-kop span { font-weight: 400; color: var(--nk-dim); }
.nk-balk-idee { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0 16px; }
.nk-balk-ico { width: 48px; height: 48px; border-radius: 14px; background: var(--nk-zacht); display: grid; place-items: center; grid-row: 1 / 4; }
.nk-balk-ico svg { width: 24px; height: 24px; color: var(--nk-fg); }
.nk-balk-idee label { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.nk-pagina textarea, .nk-pagina input[type="text"], .nk-pagina input[type="search"], .nk-pagina select {
  font: inherit; font-size: 16px; color: var(--nk-fg); background: var(--nk-wit); width: 100%;
  border: 1px solid var(--nk-lijn-2); border-radius: 14px; padding: 11px 14px; min-height: 46px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.nk-pagina textarea { resize: vertical; line-height: 1.5; min-height: 84px; border-radius: 16px; }
.nk-pagina select { appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A18' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.nk-pagina textarea:focus, .nk-pagina input:focus, .nk-pagina select:focus { outline: none; border-color: var(--nk-fg); box-shadow: 0 0 0 3px rgba(26,26,24,0.08); }
.nk-pagina :focus-visible { outline: 2px solid var(--nk-fg); outline-offset: 2px; }
.nk-voorbeelden { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; color: var(--nk-dim); }
.nk-voorbeelden button { font: inherit; font-size: 13px; color: var(--nk-fg); background: var(--nk-zacht); border: 0; border-radius: 100px; padding: 6px 11px; cursor: pointer; min-height: 32px; }
@media (hover: hover) { .nk-voorbeelden button:hover { background: var(--nk-zacht-2); } }

.nk-keuzes { display: flex; flex-wrap: wrap; gap: 8px; }
.nk-keuze { position: relative; }
.nk-keuze input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.nk-keuze span { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--nk-lijn-2); border-radius: 100px; font-size: 14px; font-weight: 500; background: var(--nk-wit); transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; }
.nk-keuze input:checked + span { background: var(--nk-fg); color: var(--nk-creme); border-color: var(--nk-fg); }
.nk-keuze input:focus-visible + span { outline: 2px solid var(--nk-fg); outline-offset: 2px; }
@media (hover: hover) { .nk-keuze:hover input:not(:checked) + span { border-color: var(--nk-fg); } }

.nk-vinkjes { display: grid; gap: 4px; }
.nk-vinkje { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; min-height: 36px; cursor: pointer; }
.nk-vinkje input { width: 20px; height: 20px; accent-color: #1A1A18; margin: 0; }
.nk-meer summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--nk-dim); border: 1px solid var(--nk-lijn-2); border-radius: 100px; padding: 6px 12px; margin-top: 6px; min-height: 34px; }
.nk-meer summary::-webkit-details-marker { display: none; }
.nk-meer summary svg { width: 14px; height: 14px; transition: transform 0.2s var(--nk-uit); }
.nk-meer[open] summary svg { transform: rotate(180deg); }
.nk-meer .nk-extra { margin-top: 8px; }
.nk-meer[open] summary { margin-bottom: 6px; }

.nk-extra { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.nk-extra label { display: grid; gap: 5px; font-size: 13px; color: var(--nk-dim); min-width: 0; }
.nk-extra input, .nk-extra select { min-height: 42px; padding: 9px 11px; font-size: 15px; }
.nk-extra select { padding-right: 28px; background-position: right 9px center; }

.nk-balk-actie { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 10px; min-width: 184px; }
.nk-start { font: inherit; font-size: 16px; font-weight: 600; color: var(--nk-fg); background: var(--nk-lime); border: 0; border-radius: 100px; min-height: 54px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; transition: transform 160ms var(--nk-uit), background-color 0.2s ease; }
.nk-start svg { width: 18px; height: 18px; }
.nk-start:active:not(:disabled) { transform: scale(0.97); }
.nk-start:disabled { opacity: 0.55; cursor: progress; }
@media (hover: hover) { .nk-start:not(:disabled):hover { background: var(--nk-lime-2); } }
.nk-balk-actie p { font-size: 12.5px; color: var(--nk-dim); text-align: center; }
.nk-balk-zoek { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0 16px; }
.nk-balk-zoek input { font-size: 18px; min-height: 56px; }
.nk-balk-wat { list-style: none; display: grid; gap: 8px; font-size: 14px; }
.nk-balk-wat li { display: flex; gap: 9px; align-items: center; }
.nk-balk-wat svg { width: 16px; height: 16px; color: var(--nk-goed); flex-shrink: 0; }

/* ── De werkplek ──────────────────────────────────────────────────── */
.nk-app { max-width: 1400px; margin: 28px auto 0; padding: 0 16px; display: grid; grid-template-columns: 232px minmax(0, 1fr) 392px; gap: 18px; align-items: start; }
.nk-vlak { background: var(--nk-wit); border: 1px solid var(--nk-lijn); border-radius: 20px; }

.nk-menu { padding: 12px; position: sticky; top: 92px; }
.nk-menu-knop { display: none; }
.nk-menu ul { list-style: none; display: grid; gap: 2px; }
.nk-menu-kop { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--nk-dim); margin: 18px 12px 6px; }
.nk-menu-item { font: inherit; width: 100%; display: flex; align-items: center; gap: 11px; padding: 9px 12px; min-height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--nk-fg); font-size: 14.5px; font-weight: 500; text-align: left; cursor: pointer; transition: background-color 0.18s ease; }
.nk-menu-item svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.8; }
.nk-menu-item .nk-tel { margin-left: auto; }
.nk-menu-item[aria-current="true"] { background: var(--nk-zacht); font-weight: 600; }
@media (hover: hover) { .nk-menu-item:not([aria-current="true"]):hover { background: rgba(26,26,24,0.04); } }
.nk-tel { font-size: 12px; font-weight: 600; background: var(--nk-zacht); border-radius: 100px; padding: 2px 8px; min-width: 26px; text-align: center; }
.nk-menu-item[aria-current="true"] .nk-tel { background: var(--nk-wit); }

.nk-midden { min-width: 0; display: grid; gap: 14px; }
.nk-midden-kop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; padding: 4px 2px 2px; }
.nk-midden-kop h2 { font-family: var(--serif); font-weight: 600; font-size: 30px; letter-spacing: -0.02em; line-height: 1.1; }
.nk-midden-kop h2 small { font-family: var(--sans); font-size: 20px; font-weight: 500; color: var(--nk-dim); letter-spacing: 0; }
.nk-midden-kop p { font-size: 14px; color: var(--nk-dim); margin-top: 6px; }
.nk-gereedschap { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nk-gereedschap label { font-size: 13px; color: var(--nk-dim); display: inline-flex; align-items: center; gap: 8px; }
.nk-gereedschap select { width: auto; min-height: 40px; padding: 7px 32px 7px 12px; font-size: 14px; }

/* De naamkaart */
.nk-kaarten { list-style: none; display: grid; gap: 12px; }
.nk-kaart { display: grid; grid-template-columns: auto minmax(0, 1fr) 198px 84px; grid-template-rows: auto auto; gap: 12px 18px; padding: 18px 20px; background: var(--nk-wit); border: 1px solid var(--nk-lijn); border-radius: 18px; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.nk-kaart[aria-current="true"] { border-color: var(--nk-fg); box-shadow: 0 0 0 1px var(--nk-fg); }
.nk-kaart-links { grid-row: 1 / 3; display: flex; align-items: flex-start; gap: 12px; }
.nk-rang { font-size: 12px; font-weight: 600; color: var(--nk-dim); background: var(--nk-zacht); border-radius: 100px; padding: 3px 8px; margin-top: 2px; min-width: 34px; text-align: center; }
.nk-kaart-tekst { grid-row: 1 / 3; min-width: 0; }
.nk-kaart.zonder-rang { grid-template-columns: minmax(0, 1fr) 198px 84px; }
.nk-kaart.zonder-rang .nk-kaart-dom { grid-column: 2; }
.nk-kaart.zonder-rang .nk-kaart-score { grid-column: 3; }
.nk-kaart.zonder-rang .nk-kaart-acties { grid-column: 2 / 4; }
.nk-kaart-naam { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.nk-kaart-naam h3 { font-size: 19px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.25; overflow-wrap: anywhere; }
.nk-beste { font-size: 12px; font-weight: 600; background: var(--nk-lime); color: var(--nk-fg); border-radius: 100px; padding: 3px 10px; }
.nk-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.nk-tag { font-size: 12.5px; color: var(--nk-fg); background: var(--nk-zacht); border-radius: 100px; padding: 3px 10px; }
.nk-kaart-tekst p { font-size: 14.5px; color: var(--nk-dim); margin-top: 8px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nk-kaart-dom { grid-column: 3; grid-row: 1; display: grid; gap: 8px; align-content: start; border-left: 1px solid var(--nk-lijn); padding-left: 18px; }
.nk-domrij { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 2px 8px; }
.nk-domrij .nk-tld { font-weight: 600; font-size: 14px; grid-row: 1 / 3; align-self: start; padding-top: 4px; }
.nk-domrij .nk-bron { grid-column: 2; }
.nk-kaart-score { grid-column: 4; grid-row: 1; display: grid; justify-items: center; gap: 4px; align-content: start; }
.nk-kaart-score span { font-size: 12px; color: var(--nk-dim); text-align: center; line-height: 1.2; }
.nk-kaart-acties { grid-column: 3 / 5; grid-row: 2; display: flex; justify-content: flex-end; align-items: center; gap: 8px; }

/* Status: stip + woord, nooit alleen kleur */
.nk-status { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 500; line-height: 1.25; padding: 4px 11px 4px 9px; border-radius: 100px; background: var(--nk-zacht); color: var(--nk-fg); white-space: nowrap; justify-self: start; }
.nk-stip { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--nk-grijs); }
.nk-s-goed { background: rgba(31,122,77,0.10); }
.nk-s-goed .nk-stip { background: var(--nk-goed); }
.nk-s-bezet { background: rgba(179,54,31,0.09); }
.nk-s-bezet .nk-stip { background: var(--nk-bezet); }
.nk-s-let { background: rgba(168,106,18,0.11); }
.nk-s-let .nk-stip { background: var(--nk-let); }
.nk-s-fout .nk-stip { background: transparent; border: 2px solid var(--nk-bezet); }
.nk-bron { font-size: 12px; color: var(--nk-dim); }
.nk-wacht { font-size: 12.5px; color: var(--nk-dim); }

/* Scorering */
.nk-ring { --ring-spoor: var(--nk-zacht-2); --ring-kleur: var(--nk-fg); position: relative; width: 52px; height: 52px; display: grid; place-items: center; font-weight: 650; font-size: 16px; }
.nk-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.nk-ring circle { fill: none; stroke-width: 4.5; }
.nk-ring .spoor { stroke: var(--ring-spoor); }
.nk-ring .boog { stroke: var(--ring-kleur); stroke-linecap: round; }
.nk-ring.groot { width: 64px; height: 64px; font-size: 19px; }

/* Knoppen */
.nk-knop { font: inherit; font-size: 14.5px; font-weight: 500; color: var(--nk-fg); background: var(--nk-wit); border: 1px solid var(--nk-lijn-2); border-radius: 100px; padding: 9px 16px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform 160ms var(--nk-uit), border-color 0.2s ease, background-color 0.2s ease; }
.nk-knop svg { width: 16px; height: 16px; }
.nk-knop:active:not(:disabled) { transform: scale(0.97); }
.nk-knop:disabled { opacity: 0.5; cursor: not-allowed; }
@media (hover: hover) { .nk-knop:not(:disabled):hover { border-color: var(--nk-fg); } }
.nk-knop-donker { background: var(--nk-donker); color: var(--nk-creme); border-color: var(--nk-donker); }
@media (hover: hover) { .nk-knop-donker:not(:disabled):hover { background: #2E2E2A; } }
.nk-knop-klein { font-size: 13.5px; padding: 6px 13px; min-height: 36px; }
.nk-knop-breed { width: 100%; min-height: 48px; }
.nk-hart { width: 42px; height: 42px; padding: 0; border-radius: 50%; }
.nk-hart svg { width: 18px; height: 18px; }
.nk-hart[aria-pressed="true"] { background: var(--nk-donker); color: var(--nk-creme); border-color: var(--nk-donker); }
.nk-link { color: var(--nk-fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; white-space: nowrap; }

/* Lege staat, meldingen */
.nk-leeg { padding: clamp(28px, 4vw, 44px); display: grid; gap: 18px; }
.nk-leeg h3 { font-size: 20px; font-weight: 650; letter-spacing: -0.01em; }
.nk-leeg p { color: var(--nk-dim); max-width: 56ch; }
.nk-stappen-kort { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: stap; }
.nk-stappen-kort li { counter-increment: stap; background: var(--nk-kaart); border: 1px solid var(--nk-lijn); border-radius: 16px; padding: 16px; font-size: 14px; color: var(--nk-dim); }
.nk-stappen-kort li::before { content: counter(stap); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--nk-donker); color: var(--nk-creme); font-weight: 600; font-size: 13px; margin-bottom: 10px; }
.nk-stappen-kort strong { display: block; color: var(--nk-fg); margin-bottom: 4px; }
.nk-melding { padding: 14px 16px; border-radius: 16px; border: 1px solid var(--nk-lijn-2); background: var(--nk-wit); font-size: 14.5px; }
.nk-melding-fout { border-color: rgba(179,54,31,0.5); }
.nk-klein { font-size: 13.5px; color: var(--nk-dim); line-height: 1.55; }
.nk-laden { padding: 32px; display: flex; align-items: center; gap: 14px; color: var(--nk-dim); }
.nk-draai { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--nk-zacht-2); border-top-color: var(--nk-fg); animation: nk-draai 0.8s linear infinite; }
@keyframes nk-draai { to { transform: rotate(360deg); } }

/* Formulieren in het midden (domein, naam checken, bulk) */
.nk-werk { padding: 22px; display: grid; gap: 16px; }
.nk-werk-rij { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.nk-veld { display: grid; gap: 6px; min-width: 0; }
.nk-veld > span:first-child, .nk-werk legend { font-size: 14px; font-weight: 600; }
.nk-werk fieldset { border: 0; margin: 0; padding: 0; }
.nk-werk legend { margin-bottom: 10px; }

/* Tabellen */
.nk-tabel { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.nk-tabel th, .nk-tabel td { text-align: left; vertical-align: top; padding: 13px 14px; border-bottom: 1px solid var(--nk-lijn); }
.nk-tabel thead th { font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nk-dim); padding-top: 14px; padding-bottom: 10px; }
.nk-tabel tbody th { font-weight: 600; overflow-wrap: break-word; }
.nk-tabel tr:last-child td, .nk-tabel tr:last-child th { border-bottom: 0; }
.nk-tabel .nk-uitleg-cel { display: block; font-size: 13px; color: var(--nk-dim); margin-top: 6px; max-width: 44ch; }
.nk-tabel input[type="text"] { min-height: 38px; padding: 7px 11px; font-size: 15px; min-width: 120px; }
.nk-tabelkader { overflow-x: auto; }

/* Blokken (naamcheck) */
.nk-blokken { display: grid; gap: 14px; }
.nk-blok { padding: 20px 22px; }
.nk-blok-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-bottom: 12px; }
.nk-blok h3 { font-size: 17px; font-weight: 650; }
.nk-blok h4 { font-size: 14.5px; font-weight: 600; margin: 12px 0 6px; }
.nk-lijst { list-style: none; display: grid; }
.nk-lijst li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--nk-lijn); font-size: 14.5px; }
.nk-lijst li:first-child { border-top: 0; }
.nk-lijst .nk-klein { grid-column: 1 / -1; }

/* Detailpaneel */
.nk-detail { position: sticky; top: 92px; max-height: calc(100vh - 108px); overflow: auto; overscroll-behavior: contain; }
.nk-detail-kop { display: flex; align-items: center; gap: 12px; padding: 20px 20px 0; }
.nk-detail-kop h2 { font-size: 23px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.15; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.nk-sluit { display: none; }
.nk-detail-tabs { display: flex; justify-content: space-between; gap: 0; padding: 0 12px; border-bottom: 1px solid var(--nk-lijn); margin-top: 14px; overflow-x: auto; scrollbar-width: none; }
.nk-detail-tab { font: inherit; font-size: 13.5px; font-weight: 500; color: var(--nk-dim); background: none; border: 0; border-bottom: 2px solid transparent; padding: 12px 6px 10px; min-height: 44px; cursor: pointer; white-space: nowrap; }
.nk-detail-tab[aria-selected="true"] { color: var(--nk-fg); border-bottom-color: var(--nk-fg); font-weight: 600; }
.nk-detail-inhoud { padding: 18px 20px 22px; display: grid; gap: 18px; }
.nk-detail h3 { font-size: 15px; font-weight: 650; }
.nk-detail-tekst { font-size: 14.5px; color: var(--nk-dim); line-height: 1.55; }
.nk-tegels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.nk-tegel { background: var(--nk-kaart); border: 1px solid var(--nk-lijn); border-radius: 14px; padding: 10px 12px; display: grid; gap: 2px; }
.nk-tegel span { font-size: 12px; color: var(--nk-dim); }
.nk-tegel strong { font-size: 14.5px; font-weight: 600; }
.nk-tegel small { font-size: 11px; color: var(--nk-dim); letter-spacing: 0.04em; }
.nk-scoreblok { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; }
.nk-balkjes { display: grid; gap: 8px; font-size: 13px; }
.nk-balkje { display: grid; grid-template-columns: 116px minmax(0, 1fr) 30px; gap: 8px; align-items: center; }
.nk-balkje i { height: 6px; border-radius: 6px; background: var(--nk-zacht-2); position: relative; overflow: hidden; }
.nk-balkje i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--nk-fg); border-radius: 6px; }
.nk-balkje b { text-align: right; font-weight: 600; }
.nk-domtabel { display: grid; }
.nk-domtabel-rij { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--nk-lijn); font-size: 14px; }
.nk-domtabel-rij:first-child { border-top: 0; }
.nk-domtabel-rij strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nk-rond { width: 34px; height: 34px; min-height: 34px; padding: 0; border-radius: 50%; }
.nk-rond svg { width: 15px; height: 15px; }
.nk-domtabel-rij .nk-bron { grid-column: 1 / -1; }
.nk-merk-kleuren { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.nk-kleur { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: start; margin: 0; font-size: 13.5px; }
.nk-vlakje { width: 48px; height: 48px; border-radius: 14px; border: 1px solid var(--nk-lijn-2); }
.nk-label-ai { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid var(--nk-fg); border-radius: 100px; padding: 3px 9px; white-space: nowrap; }
.nk-scherm { display: none; }

/* Bulk */
.nk-voortgang { height: 6px; border-radius: 100px; background: var(--nk-zacht-2); overflow: hidden; }
.nk-voortgang span { display: block; height: 100%; background: var(--nk-fg); transform-origin: left; transform: scaleX(0); transition: transform 0.25s var(--nk-uit); }
.nk-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.nk-filter { font: inherit; font-size: 13.5px; border: 1px solid var(--nk-lijn-2); background: var(--nk-wit); border-radius: 100px; padding: 7px 13px; min-height: 38px; cursor: pointer; }
.nk-filter[aria-pressed="true"] { background: var(--nk-fg); color: var(--nk-creme); border-color: var(--nk-fg); }

.nk-verborgen { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Uitleg onder de werkplek */
.nk-uitleg-sectie { max-width: 880px; margin: clamp(56px, 7vw, 96px) auto 0; padding: 0 24px clamp(56px, 7vw, 96px); }
.nk-uitleg-sectie h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(26px, 3.2vw, 34px); letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 14px; }
.nk-uitleg-sectie h3 { font-size: 18px; font-weight: 650; margin: 28px 0 8px; }
.nk-uitleg-sectie p + p { margin-top: 12px; }
.nk-uitleg-sectie ul { margin: 10px 0 0 20px; display: grid; gap: 6px; }
.nk-uitleg-sectie ul + p { margin-top: 14px; }
.nk-bronnen { font-size: 14px; color: var(--nk-dim); margin-top: 22px; }
.nk-bronnen a { color: var(--nk-fg); }
.nk-verwant { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* ── Breedtes ─────────────────────────────────────────────────────── */
.nk-balk.nk-balk-drie { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.15fr) auto; }
.nk-hero-klein .nk-hero-binnen { grid-template-columns: 1fr; padding-bottom: 44px; }
.nk-app-gedeeld { grid-template-columns: minmax(0, 960px); justify-content: center; }
@media (max-width: 1320px) {
  .nk-balk:not(.nk-balk-drie) { grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr) minmax(230px, 0.9fr); row-gap: 22px; }
  .nk-balk:not(.nk-balk-drie) > :nth-child(1) { grid-column: 1 / 3; }
  .nk-balk:not(.nk-balk-drie) > :nth-child(2) { grid-column: 3; }
  .nk-balk:not(.nk-balk-drie) > :nth-child(3) { grid-column: 1; border-left: 0; }
  .nk-balk:not(.nk-balk-drie) > :nth-child(4) { grid-column: 2; }
  .nk-balk:not(.nk-balk-drie) > :nth-child(5) { grid-column: 3; }
}
@media (max-width: 1240px) {
  .nk-app { grid-template-columns: 224px minmax(0, 1fr); }
  /* Het detailpaneel wordt een lade die binnen het scherm openklapt. */
  .nk-detail { display: none; position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%); max-height: none; border-radius: 0; border-width: 0 0 0 1px; z-index: 1001; }
  .nk-detail.open { display: block; }
  .nk-scherm.open { display: block; position: fixed; inset: 0; background: rgba(26,26,24,0.42); z-index: 1000; }
  .nk-sluit { display: inline-flex; }
  body.nk-lade-open { overflow: hidden; }
  body.nk-lade-open #aiFab, body.nk-lade-open .ai-fab { display: none !important; }
}
@media (max-width: 980px) {
  .nk-hero-binnen { grid-template-columns: 1fr; padding-bottom: 116px; }
  .nk-voorbeeld { display: none; }
  .nk-balk { margin-inline: 16px; grid-template-columns: 1fr; padding: 18px 4px; }
  .nk-balk > * { grid-column: 1 / -1 !important; border-left: 0 !important; padding: 0 16px; }
  .nk-balk > * + * { border-top: 1px solid var(--nk-lijn); padding-top: 16px; margin-top: 16px; }
  .nk-app { grid-template-columns: 1fr; }
  .nk-menu { position: static; padding: 6px; }
  .nk-menu-knop { display: flex; width: 100%; align-items: center; justify-content: space-between; font: inherit; font-size: 15px; font-weight: 600; background: none; border: 0; padding: 10px 12px; min-height: 48px; cursor: pointer; color: var(--nk-fg); }
  .nk-menu-knop svg { width: 18px; height: 18px; transition: transform 0.2s var(--nk-uit); }
  .nk-menu.open .nk-menu-knop svg { transform: rotate(180deg); }
  .nk-menu-lijst { display: none; padding: 0 0 6px; }
  .nk-menu.open .nk-menu-lijst { display: block; }
  .nk-stappen-kort { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .nk-hero { margin: 80px 12px 0; border-radius: 24px; }
  .nk-balk { margin-inline: 12px; }
  .nk-app { padding: 0 12px; }
  .nk-balk-idee, .nk-balk-zoek { grid-template-columns: 1fr; }
  .nk-balk-ico { display: none; }
  .nk-extra { grid-template-columns: 1fr 1fr; }
  .nk-kaart, .nk-kaart.zonder-rang { grid-template-columns: minmax(0, 1fr) auto; padding: 16px; gap: 12px 14px; }
  .nk-kaart-links { display: none; }
  .nk-kaart-tekst { grid-row: 1; grid-column: 1; }
  .nk-kaart-score, .nk-kaart.zonder-rang .nk-kaart-score { grid-column: 2; grid-row: 1; }
  .nk-kaart-dom, .nk-kaart.zonder-rang .nk-kaart-dom { grid-column: 1 / -1; grid-row: 2; border-left: 0; padding-left: 0; border-top: 1px solid var(--nk-lijn); padding-top: 12px; }
  .nk-kaart-acties, .nk-kaart.zonder-rang .nk-kaart-acties { grid-column: 1 / -1; grid-row: 3; justify-content: stretch; }
  .nk-kaart-acties .nk-knop-donker { flex: 1; }
  .nk-werk-rij { grid-template-columns: 1fr; }
  .nk-tabel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .nk-tabel, .nk-tabel tbody, .nk-tabel tr, .nk-tabel th, .nk-tabel td { display: block; width: 100%; }
  .nk-tabel tr { padding: 12px 0; border-bottom: 1px solid var(--nk-lijn); }
  .nk-tabel th, .nk-tabel td { border: 0; padding: 3px 14px; }
  .nk-tabel td[data-kop]::before { content: attr(data-kop); display: block; font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nk-dim); margin-bottom: 3px; }
  .nk-tabel td[data-kop=""]::before { content: none; }
  .nk-midden-kop h2 { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .nk-start, .nk-knop, .nk-voortgang span, .nk-menu-knop svg { transition: none; }
  .nk-draai { animation-duration: 2.4s; }
  .nk-buhne { animation: none; }
}