/* ==========================================================================
   De Nieuwe Gids — lay-outlaag bij dng.css

   dng.css draagt de tokens en de componenten en blijft ongewijzigd (SPEC §9).
   Dit bestand draagt de compositie die in de ontwerppagina's inline stond:
   kolomverdeling, volgorde en gap. Geen kleur, font of maat die niet uit een
   token van dng.css komt; waarden zonder token komen letterlijk uit het
   ontwerp en zijn compositie, geen schaal.
   ========================================================================== */

/* dng.css kent twee families; een adres of een technische naam vraagt om een
   derde die niet uitlijnt maar telt. Geen webfont, alleen wat er al staat. */
:root { --mono: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ==== Raamwerk ============================================================ */
/* Zichtbaar verborgen: echt label, niet display:none (SPEC §8). */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: 0; top: -9999px; z-index: 99;
  background: var(--color-accent); color: #fff;
  padding: var(--s-2) var(--s-3); font-size: var(--fs-sm); font-weight: 600;
}
.skip-link:focus { top: 0; }

.nav-brand a { color: var(--color-text); }
.nav-brand a:hover { text-decoration: none; }

/* Menu achter de icoonknop; dng.css verbergt .nav-links onder 560px. */
.nav-menu { display: none; position: relative; }
.nav-menu > summary { list-style: none; cursor: pointer; }
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu-panel {
  position: absolute; right: 0; top: calc(100% + var(--s-1)); z-index: 20;
  display: flex; flex-direction: column; min-width: 220px;
  padding: var(--s-2); gap: var(--s-1);
  background: var(--color-paper); box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-divider);
}
.nav-menu-panel a {
  display: inline-flex; align-items: center; min-height: var(--ctrl-icon);
  padding: 0 var(--s-2); font-size: var(--fs-xs); color: var(--color-neutral-700);
}
.nav-menu-panel a[aria-current] { color: var(--color-text); font-weight: 600; }
/* De knop in de balk is een link; zonder dit wint de grijze linkkleur van
   .nav-links a en staat het label onleesbaar op het accent. */
.nav-links a.btn-primary,
.nav-menu-panel a.btn-primary { color: #fff; font-weight: 600; }

/* ==== Zoeken: balk, filters, resultaten =================================== */
.search-form { display: flex; gap: 10px; margin-top: 32px; max-width: 760px; }
.search-form .input { flex: 1; min-width: 0; }
.search-form .btn { flex: none; padding-inline: 22px; }

.search-layout {
  display: grid; grid-template-columns: 250px 1fr;
  gap: 64px; margin-top: 40px; align-items: start;
}

.filters { display: flex; flex-direction: column; gap: 30px; }
.filters-head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--color-text); padding-top: 10px;
  font-size: var(--fs-2xs); font-weight: 600;
}
.filter-group-label {
  font-size: var(--fs-2xs); font-weight: 600;
  color: var(--color-neutral-700); margin-bottom: 10px;
}
/* Een filter is een link, maar hij hoort zich te gedragen als een vinkje: het
   vakje zegt of hij aanstaat, de hele regel is het raakvlak. */
.filter-list { display: flex; flex-direction: column; font-size: 14.5px; }
.filter-option {
  display: flex; gap: 10px; align-items: center;
  min-height: 32px; padding: 2px 6px 2px 0; margin-left: -6px; padding-left: 6px;
  color: var(--color-text);
}
.filter-option::before {
  content: ""; flex: none; width: 15px; height: 15px;
  border: 1.5px solid var(--color-neutral-500); background: var(--color-paper);
}
.filter-option:hover { background: var(--color-neutral-100); text-decoration: none; }
.filter-option:hover::before { border-color: var(--color-accent); }
.filter-option[aria-current] { font-weight: 600; }
.filter-option[aria-current]::before {
  background: var(--color-accent); border-color: var(--color-accent);
  box-shadow: inset 0 0 0 2px var(--color-paper);
}
.filter-count { margin-left: auto; color: var(--color-neutral-700); font-variant-numeric: tabular-nums; }

/* Uitsluiten is geen vinkje maar het tegendeel ervan: eigen knop achter de rij. */
.filter-row { display: flex; align-items: center; }
.filter-row > .filter-option { flex: 1; }
.filter-exclude {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; min-height: 28px; font-size: var(--fs-xs);
  color: var(--color-neutral-600); border: 1px solid transparent;
}
.filter-exclude:hover { color: var(--color-text); border-color: var(--color-neutral-400); text-decoration: none; }
.filter-exclude[aria-pressed="true"] { color: var(--color-text); border-color: var(--color-text); font-weight: 600; }
.filter-row.is-excluded .filter-option { color: var(--color-neutral-600); }
.filter-row.is-excluded .filter-option span:not(.filter-count) { text-decoration: line-through; }
.filter-row.is-excluded .filter-option::before { border-style: dashed; }

.results-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  border-top: 1px solid var(--color-text); padding-top: 10px; margin-bottom: 10px;
  font-size: var(--fs-2xs); font-weight: 600;
}
.results-sort { font-weight: 400; color: var(--color-neutral-700); }

.results { list-style: none; margin: 0; padding: 0; }
.results .row { display: grid; grid-template-columns: 1fr 150px; gap: 32px; align-items: start; }
.row-title a { color: var(--color-text); }
.row-body { font-size: 15.5px; line-height: 1.6; margin: 0 0 10px; color: var(--color-neutral-900); }
.row-tags { display: flex; gap: var(--s-1); flex-wrap: wrap; }
.row-score { text-align: right; }
.row-score-value { font-family: var(--font-serif); font-size: var(--fs-2); font-weight: 600; line-height: 1; }
.row-score-value--pending { color: var(--color-neutral-700); }
.row-score-label { font-size: var(--fs-2xs); color: var(--color-neutral-700); }

.results-cta { margin-top: var(--s-8); }

/* Samenwerken: dezelfde resultaatrij als de gids, met een datum in de
   rechterkolom in plaats van een cijfer. */
.werk-rij .row-title { margin-bottom: 4px; }
.row-score-datum { font-size: var(--fs-2xs); margin: 2px 0 6px; }
.werk-plaatser { margin: 10px 0 0; font-size: var(--fs-sm); }
.werk-plaatser .meta { margin-left: 4px; }
.agent-note {
  margin: var(--s-6) 0 0; font-size: 14.5px; line-height: 1.65;
  color: var(--color-neutral-700); max-width: 560px;
}

/* ==== Bedrijfsprofiel ===================================================== */
/* Sectiekop op het profiel is de .kicker uit dng.css, maar in het interfacefont
   en in tekstkleur: hij staat boven inhoud, niet boven een kolom. */
h2.kicker, h3.kicker {
  font-family: var(--font-ui); color: var(--color-text);
  margin: 0 0 var(--s-3); letter-spacing: 0;
}

.profile-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 40px; margin-top: 36px;
}
.profile-kicker { font-size: var(--fs-2xs); font-weight: 600; color: var(--color-neutral-700); margin-bottom: var(--s-2); }
.profile-kicker a { color: inherit; }
.profile-head h1 { margin: 0 0 var(--s-2); }
.profile-tags { display: flex; gap: 10px; flex-wrap: wrap; }
.profile-actions { flex: none; display: flex; gap: 10px; }
.profile-actions .btn { min-height: var(--ctrl-icon); }

.profile-layout {
  display: grid; grid-template-columns: 1fr 330px;
  gap: var(--s-9); margin-top: 48px; align-items: start;
}
.profile-main { display: flex; flex-direction: column; gap: 40px; max-width: 660px; }
.profile-side { display: flex; flex-direction: column; gap: var(--s-6); }
.profile-lead {
  font-family: var(--font-serif); font-size: var(--fs-4);
  line-height: 1.45; margin: 0; color: var(--color-neutral-900);
}
.profile-main p { line-height: 1.65; color: var(--color-neutral-900); }

/* Naam links, waarde rechts; de regel eronder doet het scheiden. */
.deflist { margin: 0; font-size: var(--fs-body); }
.deflist > div {
  display: flex; justify-content: space-between; gap: 24px;
  padding: var(--s-2) 0; border-bottom: 1px solid var(--color-divider);
}
.deflist > div:last-child { border-bottom: 0; }
.deflist dt { font-weight: 600; }
.deflist dd { margin: 0; color: var(--color-neutral-700); text-align: right; }

.facts { font-size: 14.5px; }
.facts > div { padding: 9px 0; }
.facts dt { font-weight: 400; color: var(--color-neutral-700); }
.facts dd { color: var(--color-text); }

.validated-count { display: flex; align-items: baseline; gap: 10px; margin-bottom: var(--s-2); }
.validated-count-value {
  font-family: var(--font-serif); font-size: 40px; font-weight: 600;
  line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.validated-count-label { font-size: var(--fs-xs); color: var(--color-neutral-700); }

.agents-box {
  background: var(--color-accent-100); border-left: 3px solid var(--color-accent);
  padding: var(--s-4) 22px;
}
.agents-box .kicker { border-top: 0; padding-top: 0; color: var(--color-accent-ink); }
.agents-box p { font-size: 14.5px; line-height: 1.6; margin: 0 0 var(--s-2); color: var(--color-accent-900); }
.agents-url {
  font-family: var(--mono); font-size: var(--fs-2xs);
  background: var(--color-paper); padding: 9px 11px;
  word-break: break-all; color: var(--color-accent-ink);
}

/* Eigenaarspaneel op het profiel; geen ontworpen scherm, wel bestaande functie.
   Gebruikt .alert als omhulsel, de rest is compositie. */
.invite-row { display: flex; gap: var(--s-1); }
.invite-row .input { flex: 1; min-width: 0; font-size: var(--fs-2xs); }
.invite-row .btn { flex: none; }
.val-search-wrap { position: relative; }
.val-search-dropdown {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
  background: var(--color-paper); border: 1px solid var(--color-neutral-400);
  border-top: 0; box-shadow: var(--shadow-sm); max-height: 200px; overflow-y: auto;
}
.val-search-item { padding: 9px var(--s-2); cursor: pointer; border-bottom: 1px solid var(--color-divider); }
.val-search-item:last-child { border-bottom: 0; }
.val-search-item:hover { background: var(--color-neutral-100); }
.val-search-item__name { font-weight: 600; font-size: var(--fs-sm); }
.val-search-item__meta { font-size: var(--fs-2xs); color: var(--color-neutral-700); }

/* ==== Homepage ============================================================ */
/* Hier zetten de secties zelf hun rand, zodat een band met een eigen
   achtergrond over de volle breedte van het papier kan lopen. */
.bleed { max-width: var(--page-max); margin: 0 auto; }
.nav--bleed { padding: 22px 56px 16px; }
.band { padding: 56px; border-top: 1px solid var(--color-divider); }
/* De navigatiebalk zet zijn eigen streep; een tweede eronder is er één te veel. */
main > .band:first-child { border-top: 0; }
.band--tint { background: var(--color-neutral-100); }
.band > .kicker { border-top: 0; padding-top: 0; margin-bottom: 14px; }
.band h2 { font-size: 38px; margin: 0 0 var(--s-2); }
.band .lead { margin: 0 0 var(--s-6); max-width: 60ch; color: var(--color-neutral-700); }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.duo h2 { font-size: var(--fs-2); margin: 0 0 18px; }

.hero { padding: 64px 56px 56px; max-width: 1000px; }
.hero-kicker {
  font-size: var(--fs-2xs); font-weight: 600; color: var(--color-accent);
  letter-spacing: .04em; text-transform: uppercase; margin-bottom: var(--s-4);
}
.hero h1 { font-size: 68px; line-height: 1.02; letter-spacing: -.025em; margin: 0 0 32px; max-width: 15ch; }
.hero h1 em { font-style: italic; font-weight: 400; }
.hero-pitch { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; max-width: 880px; }
.hero-pitch > div { display: flex; flex-direction: column; gap: var(--s-3); }
.hero-pitch p { font-size: var(--fs-6); line-height: 1.65; margin: 0; color: var(--color-neutral-900); }
.hero-coda { font-family: var(--font-serif); font-size: 22px; line-height: 1.4; }

/* Twee kolommen die langs elkaar heen rollen: van A naar Z en terug. Ze staan
   in een eigen band, zodat de branchenamen een element zijn en geen voetnoot.
   Hoogte en breedte zet het script na meting; hier staat alleen de vorm. */
.ticker-band {
  border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider);
  background: var(--color-neutral-100); padding: 18px 56px;
}
.hero-ticker {
  margin: 0; font-size: var(--fs-5); color: var(--color-neutral-700);
  display: flex; align-items: center; gap: var(--s-2) var(--s-4); flex-wrap: wrap;
}
/* Label en kolom blijven aan elkaar vast als de regel afbreekt. */
.ticker-paar { display: inline-flex; align-items: center; gap: var(--s-2); }
.word-ticker {
  display: inline-block; overflow: hidden; vertical-align: middle; position: relative;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 28%, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 28%, #000 72%, transparent 100%);
}
.word-ticker__track { display: flex; flex-direction: column; will-change: transform; }
.word-ticker__track span {
  font-family: var(--font-serif); font-size: 26px; line-height: 1.45;
  color: var(--color-neutral-800); white-space: nowrap;
}

.hero-actions {
  padding: 44px 56px 56px; display: flex; justify-content: space-between;
  align-items: flex-end; gap: 56px; flex-wrap: wrap;
}
.hero-actions > p { font-size: var(--fs-6); line-height: 1.6; margin: 0; max-width: 52ch; color: var(--color-neutral-900); }
.hero-zoek { position: relative; display: flex; gap: var(--s-2); }
.hero-zoek .input { min-width: 260px; }
.suggesties {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
  background: var(--color-paper); border: 1px solid var(--color-neutral-400);
  box-shadow: var(--shadow-sm); max-height: 320px; overflow-y: auto; text-align: left;
}
.suggesties:empty, .suggesties[hidden] { display: none; }
.suggestie-groep { font-size: var(--fs-3xs); font-weight: 600; color: var(--color-neutral-700); padding: var(--s-1) var(--s-2) 2px; }
.suggestie { display: block; padding: var(--s-1) var(--s-2); border-bottom: 1px solid var(--color-divider); color: var(--color-text); }
.suggestie:last-child { border-bottom: 0; }
/* Als knop hoort hij zich als een rij te gedragen, niet als een knopje. */
button.suggestie { width: 100%; text-align: left; font-family: inherit; background: none;
  border: 0; border-bottom: 1px solid var(--color-divider); cursor: pointer; }
.suggestie:hover { background: var(--color-neutral-100); text-decoration: none; }
.suggestie-naam { font-weight: 600; font-size: var(--fs-sm); }
.suggestie-meta { font-size: var(--fs-2xs); color: var(--color-neutral-700); }

/* Vinklijst met een accentteken, voor beloftes en vergelijkingen. */
.checklist { margin: 0 0 18px; font-size: var(--fs-body); }
.checklist > div { display: flex; gap: var(--s-2); padding: 11px 0; border-top: 1px solid var(--color-divider); }
.checklist > div:last-child { border-bottom: 1px solid var(--color-divider); }
.checklist dt { flex: none; color: var(--color-accent); font-weight: 600; }
.checklist dd { margin: 0; line-height: 1.6; }
.slotzin { font-family: var(--font-serif); font-size: 21px; line-height: 1.4; margin: 0; }

.vergelijk { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; max-width: 940px; margin-bottom: 40px; }
/* Drie kolommen die elk één regel dragen: dan sluit een streep onderaan niets
   af, want de kolommen zijn niet even lang. */
.vergelijk--drie { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); max-width: none; }
.vergelijk--drie div > div:last-child { border-bottom: 0; }
.vergelijk h3 {
  font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 600;
  margin: 0 0 var(--s-3); padding-bottom: 10px;
}
.vergelijk-hun h3 { color: var(--color-neutral-600); border-bottom: 2px solid var(--color-neutral-600); }
.vergelijk-ons h3 { color: var(--color-accent); border-bottom: 2px solid var(--color-accent); }
.vergelijk div > div { padding: 10px 0; border-bottom: 1px solid var(--color-divider); font-size: var(--fs-sm); line-height: 1.55; }
.prijs { font-family: var(--font-serif); font-size: var(--fs-3); font-weight: 600; letter-spacing: -.02em; }

/* Kerncijfers onder een accentstreep. */
.cijfers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin: 0 0 var(--s-6); }
.cijfers > div { border-top: 2px solid var(--color-accent); padding-top: 14px; }
.cijfers dd {
  font-family: var(--font-serif); font-size: 46px; font-weight: 600; line-height: 1;
  letter-spacing: -.025em; margin: 0; font-variant-numeric: tabular-nums;
}
.cijfers dt { font-size: var(--fs-xs); color: var(--color-neutral-700); margin-top: 6px; }
.cijfers--twee { grid-template-columns: repeat(2, 1fr); max-width: 620px; }
.cijfers--drie { grid-template-columns: repeat(3, 1fr); max-width: 820px; }

.cta--rechts { align-items: flex-end; }
.cta--los { margin-top: 36px; }
.balk-blok { max-width: 760px; }
.duo-ruim { margin-bottom: 40px; }
em { font-style: italic; }
h1 em, h2 em, h3 em { font-weight: 400; }

.balk { height: 8px; background: var(--color-neutral-200); position: relative; margin-bottom: var(--s-1); }
.balk-vulling { position: absolute; inset: 0 auto 0 0; background: var(--color-accent); min-width: 2px; }
.balk-merk { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--color-neutral-400); }
.balk-labels { display: flex; justify-content: space-between; font-size: var(--fs-2xs); color: var(--color-neutral-700); margin-bottom: var(--s-3); }

/* Genummerde blokken: redenen en stappen. */
.genummerd { display: grid; gap: 44px; }
.genummerd--drie { grid-template-columns: repeat(3, 1fr); }
.genummerd--twee { grid-template-columns: 1fr 1fr; }
.genummerd > div { border-top: 2px solid var(--color-accent); padding-top: var(--s-3); }
.genummerd-num { font-family: var(--font-serif); font-size: var(--fs-sm); font-weight: 600; color: var(--color-accent); margin-bottom: var(--s-1); }
.genummerd h3 { font-size: 24px; line-height: 1.2; margin: 0 0 10px; }
.genummerd p { font-size: var(--fs-body); line-height: 1.6; margin: 0; color: var(--color-neutral-900); }
.bronregel { display: block; margin-top: 10px; font-size: var(--fs-2xs); color: var(--color-neutral-700); line-height: 1.5; }

/* Bezwaar en weerwoord, open naast elkaar. */
/* Tekstblokken naast elkaar, elk onder een dunne streep: bezwaar en weerwoord,
   maar net zo goed een reeks losse punten. */
.blokken { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }
.blokken--drie { grid-template-columns: repeat(3, 1fr); gap: var(--s-6) var(--s-7); }
.blok { border-top: 1px solid var(--color-divider); padding-top: var(--s-4); }
.blok h3 { font-family: var(--font-serif); font-size: var(--fs-4); line-height: 1.25; margin: 0 0 var(--s-1); }
.blok p { font-size: var(--fs-sm); line-height: 1.6; margin: 0 0 10px; color: var(--color-neutral-900); }
.blok p:last-child { margin-bottom: 0; }

.rekenhulp { max-width: 620px; }
.rekenhulp label { display: block; font-size: var(--fs-sm); margin-bottom: 10px; }
.rekenhulp input[type=range] { width: 100%; accent-color: var(--color-accent); cursor: pointer; }
.rekenhulp-uitkomst {
  font-family: var(--font-serif); font-size: 56px; font-weight: 600; line-height: 1;
  letter-spacing: -.025em; font-variant-numeric: tabular-nums; margin-top: var(--s-4);
}
.rekenhulp-noot { font-size: var(--fs-sm); color: var(--color-neutral-700); margin-top: var(--s-1); }

.footer-wide {
  padding: 44px 56px 36px; border-top: 1px solid var(--color-text);
  display: grid; grid-template-columns: 1fr 200px 200px; gap: 56px; align-items: start;
}
.footer-wide-brand { font-family: var(--font-serif); font-size: 22px; font-weight: 600; margin-bottom: 10px; }
.footer-wide p { font-size: var(--fs-sm); line-height: 1.6; margin: 0; max-width: 44ch; color: var(--color-neutral-700); }
.footer-wide-title { font-size: var(--fs-2xs); font-weight: 600; margin-bottom: 10px; }
.footer-wide nav { display: flex; flex-direction: column; font-size: var(--fs-sm); }
/* De link is een flexregel, dus de spatie voor het label valt weg; gap zet hem
   terug. */
.footer-wide nav a { color: var(--color-neutral-700); display: inline-flex; align-items: center;
  gap: 9px; min-height: 34px; }
.footer-wide-bottom {
  grid-column: 1 / -1; border-top: 1px solid var(--color-divider);
  padding-top: var(--s-3); font-size: var(--fs-2xs); color: var(--color-neutral-700);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
}
.footer-wide-bottom a { color: var(--color-neutral-700); text-decoration: underline; }
/* Binnen de .shell zet die al de zijmarge; daar houdt de voettekst alleen zijn
   eigen lucht boven de streep over. */
.shell > .footer-wide { margin-top: var(--s-9); padding: 34px 0 0; }

/* De zwevende knop is bestaande functie zonder ontworpen vorm; hij volgt de
   primaire knop uit dng.css. */
.sticky-cta__btn {
  background: var(--color-accent); color: #fff; border-radius: 2px;
  font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-sm);
  box-shadow: var(--shadow-sm); min-height: var(--ctrl);
}
.sticky-cta__btn:hover { background: var(--color-accent-hover); }

/* ==== AI-agents =========================================================== */
/* Losse, afgebakende items naast elkaar: dat is waar .card uit dng.css voor is.
   Deze grid zet alleen hoeveel er naast elkaar passen. */
.kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--s-3); }
/* Een kaart die zelf de link is: de tekst blijft tekst, alleen de slotregel
   ziet eruit als de link die de hele kaart al is. */
a.card { display: block; color: var(--color-text); }
a.card:hover { border-color: var(--color-accent); text-decoration: none; }
a.card .card-meta { color: var(--color-accent); }

.agent { display: flex; flex-direction: column; }
.agent-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-2); }
.agent-top .card-title { margin-top: 0; }
.agent-top .tag { flex: none; white-space: nowrap; }
.agent-staat { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-1); margin: 0 0 var(--s-3); }
.agent-signalen { margin-top: auto; padding-top: var(--s-2); }
.agent-signalen > .kicker { border-top-color: var(--color-divider); margin-bottom: 7px; }
.agent-signaal { display: flex; align-items: baseline; gap: 7px; font-size: var(--fs-2xs);
  color: var(--color-neutral-700); line-height: 1.5; margin-bottom: 3px; }
.agent-signaal strong { color: var(--color-accent-ink); }
.agent-signaal code { font-family: var(--mono); font-size: var(--fs-3xs);
  background: var(--color-neutral-100); padding: 1px 6px; color: var(--color-neutral-800); }
.agent-docs { display: inline-block; margin-top: var(--s-2); font-size: var(--fs-2xs); }

/* Adres van een open ingang: naam links in monospace, uitleg eronder. */
.ingangen { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-4) var(--s-6); margin: 0; }
.ingangen > div { border-top: 1px solid var(--color-divider); padding-top: var(--s-2); }
.ingangen dt { font-family: var(--mono); font-size: var(--fs-sm); font-weight: 600; }
.ingangen dd { margin: 6px 0 0; font-size: var(--fs-2xs); line-height: 1.6; color: var(--color-neutral-700); }

/* ==== Betoog: citaat, prijzen, kostentabel =============================== */
/* Een uitspraak die de pagina draagt: serif, ruim, zonder aanhalingsgrafiek. */
.citaat {
  font-family: var(--font-serif); font-size: var(--fs-3); line-height: 1.35;
  border-left: 3px solid var(--color-accent); padding-left: var(--s-4);
  margin: 0 0 var(--s-5); max-width: 34ch;
}
.citaat + p { max-width: var(--measure); }
.citaat-bron { display: block; margin-top: var(--s-2); font-family: var(--font-ui);
  font-size: var(--fs-2xs); color: var(--color-neutral-700); }

/* ==== Brief van de oprichter ============================================= */
/* Afzender links, brief rechts; de brief houdt de leesmaat aan. */
.brief { display: grid; grid-template-columns: 240px 1fr; gap: var(--s-9); align-items: start; }
.brief-afzender > .kicker { margin-bottom: var(--s-2); }
.brief-naam { font-family: var(--font-serif); font-size: var(--fs-5); font-weight: 600; }
.brief-tekst { max-width: var(--measure); }
.brief-tekst h3 { margin: var(--s-7) 0 var(--s-2); }
.brief-tekst p { line-height: 1.65; color: var(--color-neutral-900); }

.tijdlijn { margin: var(--s-4) 0 0; font-size: var(--fs-sm); }
.tijdlijn > div { display: flex; gap: var(--s-2); padding: 7px 0; border-top: 1px solid var(--color-divider); }
.tijdlijn dt { flex: none; width: 3.5em; color: var(--color-neutral-700); font-variant-numeric: tabular-nums; }
.tijdlijn dd { margin: 0; }
.tijdlijn .nu dt, .tijdlijn .nu dd { color: var(--color-accent-ink); font-weight: 600; }

/* ==== Uitnodigingsteksten (beheer op /oprichter) ========================= */
/* De keuze staat in het segment; de panelen volgen de aangevinkte knop, zodat
   er geen script nodig is om er één te tonen. */
.tpl { display: flex; flex-direction: column; gap: var(--s-4); max-width: 720px; margin-top: var(--s-4); }
.tpl-paneel { display: none; flex-direction: column; gap: var(--s-3); }
.tpl:has(#otab-email:checked)    #otpl-email,
.tpl:has(#otab-whatsapp:checked) #otpl-whatsapp,
.tpl:has(#otab-stuur:checked)    #otpl-stuur { display: flex; }
.tpl textarea.input { font-size: var(--fs-2xs); line-height: 1.6; }

/* Prijstrap: drie kaarten waarvan er één de aanbevolen is. Het verschil zit in
   de rand en het gewicht, niet in kleur alleen (SPEC §8). */
.prijzen { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); align-items: stretch; }
.prijs-kaart { display: flex; flex-direction: column; gap: var(--s-2); }
.prijs-kaart--nu { border: 2px solid var(--color-accent); background: var(--color-accent-100); }
.prijs-kaart .card-kicker { color: var(--color-neutral-700); }
.prijs-kaart--nu .card-kicker { color: var(--color-accent-ink); }
.prijs-bedrag { font-family: var(--font-serif); font-size: var(--fs-2); font-weight: 600;
  line-height: 1; letter-spacing: -.02em; }
.prijs-periode { font-size: var(--fs-2xs); color: var(--color-neutral-700); margin-top: 4px; }
.prijs-kaart .checklist { margin: 0; font-size: var(--fs-sm); }
.prijs-kaart .checklist dd { font-size: var(--fs-sm); }
.prijs-kaart > .cta, .prijs-kaart > .btn { margin-top: auto; }
.checklist dt.uit { color: var(--color-neutral-600); }

/* Tabel op de publieke site: geen rijlijnen zoals in beheer, alleen een streep
   onder de kop en boven het totaal. */
.tabel { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); max-width: 760px; }
.tabel th { text-align: left; font-weight: 600; font-size: var(--fs-2xs);
  color: var(--color-neutral-700); padding: 0 var(--s-2) 8px 0;
  border-bottom: 1px solid var(--color-text); }
.tabel td { padding: 10px var(--s-2) 10px 0; vertical-align: top; }
.tabel th + th, .tabel td + td { padding-left: var(--s-4); }
.tabel th.num, .tabel td.num { text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; }
.tabel tfoot td { border-top: 1px solid var(--color-text); font-weight: 600; }
/* Een tabel kan niet smaller dan zijn kolommen. Op een telefoon schuift hij
   daarom in zijn eigen kader, in plaats van de hele pagina mee te trekken. */
.tabel-schuif { overflow-x: auto; max-width: 100%; }

/* ==== Formulier op een publieke pagina ==================================== */
/* dng.css draagt het veld, de knop en de foutstaat; hier staat alleen hoe de
   velden onder elkaar komen en hoe een keuze uit een handvol opties eruitziet. */
.formulier { display: flex; flex-direction: column; gap: var(--s-4); max-width: 560px; margin-top: var(--s-5); }
.alert p:last-child { margin-bottom: 0; }
/* dng.css geeft .alert geen buitenmaat; in een tekstkolom heeft hij lucht
   onder zich nodig, anders raakt hij wat erop volgt. */
.alert { margin-bottom: var(--s-5); }
.alert:last-child { margin-bottom: 0; }
.veldgroep { border: 0; padding: 0; margin: 0; }
.veldgroep > legend { font-size: var(--fs-xs); font-weight: 600; padding: 0; margin-bottom: var(--s-1); }

/* Een keuze is de hele rij, niet het bolletje: raakvlak van 48px, en de rand
   zegt wat er aanstaat (dikker en in accent), niet de kleur alleen. */
.keuzes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-1); }
.keuze {
  display: flex; gap: 10px; align-items: flex-start;
  min-height: var(--ctrl); padding: 11px 13px; cursor: pointer;
  border: 1px solid var(--color-neutral-400); font-size: var(--fs-sm); line-height: 1.4;
}
.keuze:hover { background: var(--color-neutral-100); }
.keuze:has(:checked),
.keuze[aria-pressed="true"] { border: 2px solid var(--color-accent); background: var(--color-accent-100); padding: 10px 12px; }
/* Dezelfde rij als knop in plaats van als label: geen radio, wel dezelfde vorm. */
button.keuze { width: 100%; text-align: left; font-family: inherit; color: inherit; background: none; }
.keuze input { accent-color: var(--color-accent); margin: 3px 0 0; }
.keuze strong { display: block; }
.keuze-note { display: block; font-size: var(--fs-2xs); color: var(--color-neutral-700); }

/* ==== Waardering: stap voor stap ========================================= */
.wiz { max-width: 620px; margin-top: var(--s-5); }
.wiz-kop { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4);
  border-top: 1px solid var(--color-text); padding-top: 10px; font-size: var(--fs-2xs); font-weight: 600; }
.wiz-kop .meta { font-weight: 400; }

/* Vier streepjes: gedaan, bezig, nog te gaan. Ook zonder kleur te lezen aan
   de dikte, en de stap staat er in woorden boven. */
.wiz-progress { display: flex; gap: 6px; margin: var(--s-4) 0 var(--s-5); }
.wiz-dot { flex: 1; height: 3px; background: var(--color-neutral-300); }
.wiz-dot.done { background: var(--color-accent); }
.wiz-dot.active { background: var(--color-accent); height: 5px; margin-top: -1px; }

.wiz-step { display: none; }
.wiz-step.visible { display: block; }
.wiz-step-label { font-size: var(--fs-2xs); font-weight: 600; color: var(--color-neutral-700); margin-bottom: var(--s-1); }
.wiz-step-q { font-family: var(--font-serif); font-size: var(--fs-4); line-height: 1.3; margin-bottom: var(--s-4); }
.wiz-step-q .sub { display: block; font-family: var(--font-ui); font-size: var(--fs-2xs);
  font-weight: 400; color: var(--color-neutral-700); margin-top: 6px; }
.wiz-choices { display: flex; flex-direction: column; gap: var(--s-1); }
.wiz-actions { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-5); flex-wrap: wrap; }

/* Labels om aan te vinken: één vorm, aan of uit te lezen aan rand en gewicht. */
.wiz-tags { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.wiz-tag { font-family: inherit; font-size: var(--fs-sm); cursor: pointer;
  min-height: var(--ctrl-icon); padding: 0 14px; background: none;
  border: 1px solid var(--color-neutral-400); border-radius: 2px; color: var(--color-text); }
.wiz-tag:hover { background: var(--color-neutral-100); }
.wiz-tag[aria-pressed="true"], .wiz-tag.selected {
  border: 2px solid var(--color-accent); background: var(--color-accent-100);
  color: var(--color-accent-ink); font-weight: 600; }
.wiz-tag .tag-x { margin-left: 6px; color: var(--color-neutral-700); }
.tag-add-form { display: none; gap: var(--s-1); align-items: center; width: 100%; }
.tag-add-form .input { flex: 1; min-width: 0; }

/* ==== Aanmelden: de wizard =============================================== */
/* SPEC §10: voor aanmelden en inloggen is geen ontwerp gemaakt. Deze schermen
   volgen daarom de bestaande onderdelen: het veld, de knop, de foutstaat en de
   keuzerij. De klassenamen komen uit het formulierscript en blijven staan; die
   is functionaliteit en die verandert hier niet.

   Het formulier draagt nog inline stijlen die de namen van het oude ontwerp
   gebruiken. Die krijgen hier de waarden van dit ontwerp, net als bij het
   chatvenster hieronder, zodat er geen kleur bij komt die niet in dng.css staat. */
.registratie {
  --ink: var(--color-text);
  --ink-deep: var(--color-text);
  --ink-mid: var(--color-neutral-800);
  --muted: var(--color-neutral-700);
  --border: var(--color-neutral-400);
  --border-light: var(--color-divider);
  --brand: var(--color-accent);
  --brand-pale: var(--color-accent-100);
  --brand-light: var(--color-accent-300);
  --primary: var(--color-accent);
  --primary-dark: var(--color-accent-ink);
  --cream: var(--color-neutral-100);
  --white: var(--color-paper);
  --surface: var(--color-neutral-100);
  --radius: 2px;
  --radius-lg: 2px;
  --font-display: var(--font-serif);
  --font-body: var(--font-ui);
}

.reg-kop { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-3); margin-top: var(--s-5); }
.reg-kop .alert { margin-bottom: 0; }
.reg-kaart { max-width: 720px; margin-top: var(--s-6); }

/* De stappenbalk: een genummerde lijst, waarvan de stand aan gewicht en streep
   te zien is en niet alleen aan kleur. */
.wizard-progress { display: flex; gap: var(--s-1); list-style: none; margin: 0 0 var(--s-6); padding: 0; }
.wizard-step { flex: 1; display: flex; align-items: baseline; gap: 7px;
  border-top: 3px solid var(--color-neutral-300); padding-top: 9px;
  font-size: var(--fs-2xs); color: var(--color-neutral-700); }
.wizard-step__num { font-variant-numeric: tabular-nums; font-weight: 600; }
.wizard-step.done { border-top-color: var(--color-accent); }
.wizard-step.active { border-top-color: var(--color-accent); border-top-width: 5px;
  padding-top: 7px; color: var(--color-text); font-weight: 600; }

.wizard-pane { display: none; }
.wizard-pane.active { display: block; }
.wizard-pane__title { font-family: var(--font-serif); font-size: var(--fs-3);
  font-weight: 600; line-height: 1.15; letter-spacing: -.02em; margin-bottom: var(--s-3); }
.wizard-pane__sub { font-size: var(--fs-sm); line-height: 1.6;
  color: var(--color-neutral-700); margin-bottom: var(--s-5); max-width: var(--measure); }
.wizard-nav { display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-6);
  border-top: 1px solid var(--color-divider); padding-top: var(--s-4); }

/* Veld, label, hint en fout: dezelfde vorm als .field/.input/.hint/.err uit
   dng.css, onder de namen die het script gebruikt. */
.form-group { display: flex; flex-direction: column; margin-bottom: var(--s-4); }
.form-label { font-size: var(--fs-xs); font-weight: 600; margin-bottom: 6px; }
.form-label .req { color: var(--color-accent); }
.form-label .opt, .opt { font-weight: 400; color: var(--color-neutral-700); font-size: var(--fs-2xs); }
.form-input, .form-textarea, .form-select {
  font-family: var(--font-ui); font-size: var(--fs-body); min-height: var(--ctrl);
  padding: 0 12px; background: var(--color-paper); color: var(--color-text);
  border: 1px solid var(--color-neutral-400); border-radius: 2px; width: 100%;
}
.form-textarea { padding: 10px 12px; line-height: 1.5; resize: vertical; min-height: 0; }
.form-select { appearance: auto; }
.form-input::placeholder, .form-textarea::placeholder { color: var(--color-neutral-600); }
/* Een veld dat er wel staat maar niet te wijzigen is, moet dat ook laten zien. */
.form-input:disabled, .form-textarea:disabled, .form-select:disabled {
  background: var(--color-neutral-100); color: var(--color-neutral-700); }
.form-hint { font-size: var(--fs-2xs); color: var(--color-neutral-700); margin-top: 6px; line-height: 1.5; }
.form-input--error, .branch-selector--error { border-color: var(--color-text); border-width: 2px; }
/* Fout is nooit alleen kleur: het teken staat ervoor, de tekst zegt wat er
   moet gebeuren. Het teken komt uit CSS zodat het script alleen tekst zet. */
.form-field-error { display: flex; gap: var(--s-1); align-items: flex-start;
  font-size: var(--fs-xs); font-weight: 600; margin-top: 7px; }
.form-field-error::before {
  content: "!"; flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--color-text); color: var(--color-paper); font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center; margin-top: 1px;
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-4); }
.form-grid .form-full { grid-column: 1 / -1; }

/* Een aanvinkregel: het hele regeltje is het raakvlak. */
.toggle-row { display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  font-size: var(--fs-sm); line-height: 1.5; padding: 5px 0; }
.toggle-row input { accent-color: var(--color-accent); margin: 3px 0 0; flex: none; }

/* Keuzekaarten: dezelfde vorm als .keuze, maar met de opbouw die het formulier
   al had (radio verborgen, kaart als raakvlak). */
.type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s-1); }
.type-option { display: block; cursor: pointer; }
.type-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.type-option__card { display: flex; gap: 10px; align-items: flex-start;
  min-height: var(--ctrl); padding: 11px 13px; height: 100%;
  border: 1px solid var(--color-neutral-400); }
.type-option:hover .type-option__card { background: var(--color-neutral-100); }
.type-option input:focus-visible + .type-option__card { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.type-option input:checked + .type-option__card {
  border: 2px solid var(--color-accent); background: var(--color-accent-100); padding: 10px 12px; }
.type-option__icon { flex: none; }
.type-option__name { font-weight: 600; font-size: var(--fs-sm); }
.type-option__desc { font-size: var(--fs-2xs); color: var(--color-neutral-700); line-height: 1.45; }

.nonprofit-declaration-box { display: flex; gap: var(--s-2); align-items: flex-start;
  background: var(--color-neutral-100); border-left: 3px solid var(--color-text); padding: var(--s-3) var(--s-4); }
.nonprofit-declaration-check { display: flex; gap: 10px; align-items: flex-start;
  cursor: pointer; font-size: var(--fs-sm); line-height: 1.5; }
.nonprofit-declaration-check input { accent-color: var(--color-accent); margin: 3px 0 0; flex: none; }
.contact-methods { display: flex; flex-direction: column; }

/* Branches: dezelfde labelvorm als de waarderingspagina. */
.branch-search-row { display: flex; gap: var(--s-1); flex-wrap: wrap; align-items: center; }
.branch-selector { display: flex; flex-wrap: wrap; gap: var(--s-1);
  max-height: 260px; overflow-y: auto; padding: var(--s-2);
  border: 1px solid var(--color-divider); background: var(--color-neutral-100); }
.branch-toggle { display: inline-flex; align-items: center; cursor: pointer;
  min-height: var(--ctrl-icon); padding: 0 14px; font-size: var(--fs-sm);
  background: var(--color-paper); border: 1px solid var(--color-neutral-400); }
.branch-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.branch-toggle:hover { background: var(--color-neutral-100); }
.branch-toggle.selected { border: 2px solid var(--color-accent); background: var(--color-accent-100);
  color: var(--color-accent-ink); font-weight: 600; }

.selected-branches-bar { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-bottom: var(--s-2); }
.selected-branches-bar:empty { display: none; }
.branch-chip { display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; font-size: var(--fs-2xs);
  background: var(--color-accent-100); color: var(--color-accent-ink); border: 1px solid var(--color-accent); }
.branch-chip--generic { border-style: dashed; }
.branch-chip__refine { background: none; border: 0; cursor: pointer; color: inherit;
  text-decoration: underline; font-size: var(--fs-3xs); font-family: inherit; }
.branch-refine-input { font-family: var(--font-ui); font-size: var(--fs-sm);
  min-height: var(--ctrl-icon); padding: 0 10px;
  border: 1px solid var(--color-neutral-400); background: var(--color-paper); }

/* AI-vragen in stap 2. */
.wizard-ai-loading { display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-sm); color: var(--color-neutral-700); padding: var(--s-4) 0; }
.wizard-ai-spinner { width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 2px solid var(--color-neutral-300); border-top-color: var(--color-accent);
  animation: dng-draai .8s linear infinite; }
@keyframes dng-draai { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wizard-ai-spinner { animation-duration: 3s; } }
.wizard-ai-question { margin-bottom: var(--s-4); }
.wizard-ai-qnum { font-size: var(--fs-2xs); font-weight: 600; color: var(--color-neutral-700); }
.ai-compliment { font-family: var(--font-serif); font-size: var(--fs-4); line-height: 1.35;
  border-left: 3px solid var(--color-accent); padding-left: var(--s-3);
  margin-bottom: var(--s-5); opacity: 0; transition: opacity .3s; }
.ai-compliment--visible { opacity: 1; }
.prequal-q { margin-bottom: var(--s-3); }
.prequal-q__label { font-size: var(--fs-xs); font-weight: 600; margin-bottom: 6px; }
.prequal-opts { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.prequal-radio { display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  min-height: var(--ctrl-icon); padding: 0 12px; font-size: var(--fs-sm);
  background: var(--color-paper); border: 1px solid var(--color-neutral-400); }
.prequal-radio input { accent-color: var(--color-accent); }

/* Samenvatting in stap 5: naam links, waarde rechts. */
.wizard-summary { border-top: 1px solid var(--color-text); }
.wizard-summary-row { display: flex; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-2) 0; border-bottom: 1px solid var(--color-divider); font-size: var(--fs-sm); }
.wizard-summary-label { font-weight: 600; flex: none; }
.wizard-summary-value { color: var(--color-neutral-700); text-align: right; }
.wizard-submit-info { margin-top: var(--s-4); }
.wizard-founding-badge { display: inline-flex; align-items: center; font-size: var(--fs-2xs);
  padding: 3px 9px; background: var(--color-accent-100); color: var(--color-accent-ink); }

/* Het oude formulier gebruikt .form-alert voor meldingen; hier is dat .alert. */
.form-alert { border-left: 3px solid var(--color-text); background: var(--color-neutral-100);
  padding: var(--s-2) var(--s-4); font-size: var(--fs-sm); line-height: 1.6; margin-bottom: var(--s-4); }

/* ==== Inloggen en wachtwoord instellen =================================== */
/* Eén kolom, smal genoeg om in één blik te lezen; het formulier eronder houdt
   dezelfde maat, zodat de knop niet breder is dan het veld. */
.smal { max-width: 420px; }
.smal .formulier { max-width: none; }
.smal-voet { margin-top: var(--s-5); padding-top: var(--s-4);
  border-top: 1px solid var(--color-divider); }
/* Een knop die zich als link gedraagt: hij hoort in de tekst, niet ernaast. */
.knop-als-link { background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: inherit; color: var(--color-accent); text-decoration: underline; }
.knop-als-link:hover { color: var(--color-accent-active); }

/* ==== Welkom na het aanmelden ============================================ */
.welkom-layout { display: grid; grid-template-columns: 1fr 330px; gap: var(--s-9);
  align-items: start; margin-top: var(--s-7); }
.welkom-hoofd, .welkom-zij { display: flex; flex-direction: column; gap: var(--s-6); }
.welkom-hoofd { max-width: 660px; }
.welkom-qa { margin-top: var(--s-3); }
.welkom-qa > summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600;
  display: inline-flex; align-items: center; min-height: var(--ctrl-icon); }
.welkom-qa .deflist { margin-top: var(--s-2); }
.welkom-qa .deflist > div { flex-direction: column; gap: 2px; }
.welkom-qa .deflist dd { text-align: left; }

/* Een adres om te kopiëren: leesbaar, en de knop ernaast doet het werk. */
.kopieerbaar { display: flex; gap: var(--s-1); align-items: stretch; margin-top: var(--s-2); }
.kopieerbaar code { flex: 1; min-width: 0; display: flex; align-items: center;
  font-family: var(--mono); font-size: var(--fs-2xs); word-break: break-all;
  padding: 9px 11px; background: var(--color-paper); border: 1px solid var(--color-divider); }
.kopieerbaar .btn { flex: none; }

/* ==== Deelnemersdashboard ================================================ */
/* Het ontwerp (design/pages/dashboard.html): kop, één volgende stap, en drie
   kolommen met cijfers. Wat daar niet stond maar wel een functie heeft, staat
   eronder in de hoofd-/zijkolom van .profile-layout. */
.dash-kop { display: flex; justify-content: space-between; align-items: flex-end;
  gap: 40px; flex-wrap: wrap; margin-top: 36px; }
.dash-kop h1 { margin: 0 0 10px; }

.volgende-stap { display: flex; justify-content: space-between; align-items: center;
  gap: 40px; flex-wrap: wrap; margin-top: 38px; }
.volgende-stap-tekst { max-width: 620px; }
.volgende-stap h2 { font-family: var(--font-serif); font-size: var(--fs-3); font-weight: 600;
  line-height: 1.18; letter-spacing: -.015em; margin: 0 0 10px; }
.volgende-stap-acties { flex: none; width: 300px; display: flex; flex-direction: column; gap: 10px; }

.dash-cijfers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px;
  margin-top: 56px; align-items: start; }
.dash-cijfer { display: flex; align-items: baseline; gap: 10px; margin-bottom: var(--s-2); }
.dash-cijfer-getal { font-family: var(--font-serif); font-size: 44px; font-weight: 600;
  line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dash-cijfer-label { font-size: var(--fs-xs); color: var(--color-neutral-700); }

/* Een onderdeel van het profiel: naam links, wat eraan te doen is rechts. */
.dash-rij { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: var(--ctrl-icon); padding: 6px 4px; margin: 0 -4px;
  border-bottom: 1px solid var(--color-divider);
  font-size: var(--fs-sm); color: var(--color-text); }
.dash-rij:last-child { border-bottom: 0; }
.dash-rij:hover { background: var(--color-accent-100); color: var(--color-accent-ink); text-decoration: none; }
.dash-rij-actie { flex: none; color: var(--color-accent); }
.dash-rij-klaar { flex: none; color: var(--color-neutral-700); }

/* Weergaven per maand: staafjes zonder assen, de laatste in accent. */
.dash-grafiek { display: flex; align-items: flex-end; gap: 3px; height: 48px; margin-bottom: 22px; }
.dash-grafiek span { flex: 1; background: var(--color-neutral-300); min-height: 3px; }
.dash-grafiek span:last-child { background: var(--color-accent); }

.dash-code { font-family: var(--font-serif); font-size: 27px; font-weight: 600; letter-spacing: .12em; }

/* Twee even brede kolommen onder de cijfers, dezelfde verdeling als bij het
   samenstellen van een uitnodiging. */
.dash-rest { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-9);
  align-items: start; margin-top: 48px; }
.dash-rest .profile-main { max-width: none; }

.dash-voet { margin-top: 60px; padding-top: 18px; border-top: 1px solid var(--color-divider);
  display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
  font-size: var(--fs-xs); color: var(--color-neutral-700); }

/* Een blok tekst om over te nemen: de code zelf leest als code. */
.codeblok { font-family: var(--mono); font-size: var(--fs-2xs); line-height: 1.55;
  white-space: pre-wrap; word-break: break-all; margin: 0 0 var(--s-2);
  padding: var(--s-2) 11px; background: var(--color-neutral-100); }
/* Hetzelfde blok, maar met lopende tekst erin: breken op de spatie, niet
   middenin een woord, en in het leesfont. Alleen een te lange link mag wijken. */
.codeblok--tekst { font-family: var(--font-ui); font-size: var(--fs-sm); line-height: 1.65;
  word-break: normal; overflow-wrap: break-word; }

/* ==== Profiel bewerken: één formulier, met een inhoudsopgave ============= */
/* Bewerken en verrijken waren twee formulieren over hetzelfde profiel. Ze staan
   nu onder elkaar, met dezelfde inhoudsopgave als de voorwaarden gebruiken. */
.profiel-layout { margin-top: 28px; }
.profiel-form { min-width: 0; max-width: 760px; display: flex; flex-direction: column;
  padding-bottom: var(--s-5); }
.profiel-form .beheer-sectie:first-of-type { margin-top: var(--s-6); }
/* De knop blijft in beeld: het formulier is langer dan het venster. */
.profiel-opslaan {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
  margin-top: var(--s-7); padding: var(--s-3) 0;
  border-top: 1px solid var(--color-text); background: var(--color-paper);
}

/* Op het profiel telt de omschrijving; het nummer staat er in kleiner grijs
   achter. Meerdere activiteiten komen onder elkaar. */
.sbi-regels { display: flex; flex-direction: column; gap: 3px; }

/* ==== SBI-code kiezen ==================================================== */
/* De omschrijvingen zijn lang, dus een gekozen code is een regel en geen label:
   code links, omschrijving ernaast, en het kruisje rechts. */
.sbi-lijst { display: flex; flex-direction: column; gap: 4px; max-width: 560px; }
.sbi-suggestie-kop { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3); max-width: 560px; margin-bottom: 6px; }
.sbi-keuze {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  font-family: inherit; font-size: var(--fs-sm); line-height: 1.4; cursor: pointer;
  min-height: var(--ctrl-icon); padding: 7px 11px;
  border: 1px solid var(--color-neutral-400); background: var(--color-paper); color: var(--color-text);
}
.sbi-keuze:hover { background: var(--color-neutral-100); }
.sbi-keuze[aria-pressed="true"] {
  border: 2px solid var(--color-accent); background: var(--color-accent-100);
  color: var(--color-accent-ink); font-weight: 600; padding: 6px 10px;
}
.sbi-keuze .sbi-code { flex: none; font-variant-numeric: tabular-nums; font-weight: 600; }
.sbi-keuze .sbi-label { flex: 1; }
.sbi-keuze .sbi-hoofd { flex: none; font-size: var(--fs-2xs); font-weight: 400; color: var(--color-neutral-700); }
.sbi-keuze .tag-x { flex: none; color: var(--color-neutral-700); }

/* ==== Beheerschermen van de deelnemer ==================================== */
/* Profiel bewerken, verrijken, analyse en samenwerkingen. Geen ontworpen
   scherm, wel bestaande functie: één kolom op leesbreedte, met de
   formulieronderdelen die het aanmelden ook gebruikt. */
.beheer { max-width: 760px; }
.beheer-kop { display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--s-4); flex-wrap: wrap; margin-top: 22px; max-width: 760px; }
.beheer-kop h1 { margin: 0; }
.beheer-sectie { margin-top: var(--s-7); }
.beheer-sectie > .kicker { margin-bottom: var(--s-3); }
.beheer-voet { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  margin-top: var(--s-6); border-top: 1px solid var(--color-divider); padding-top: var(--s-4); }

/* Drie lijsten achter één segment; de aangevinkte knop kiest het paneel, dus
   hier is geen script voor nodig. */
.analyse-paneel { display: none; }
.analyse:has(#atab-vergelijkbaar:checked) #apan-vergelijkbaar,
.analyse:has(#atab-buurt:checked)         #apan-buurt,
.analyse:has(#atab-kansen:checked)        #apan-kansen { display: block; }
.analyse .seg { flex-wrap: wrap; align-self: flex-start; max-width: 100%; }
.analyse .empty { padding-top: var(--s-4); }

/* ==== Uitnodiging samenstellen ========================================== */
/* Links kies je, rechts leest de ontvanger mee. De voorvertoning schuift mee
   omdat de keuzelijst langer is dan het venster. */
.samensteller { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8);
  align-items: start; margin-top: 40px; }
.samensteller-keuzes { display: flex; flex-direction: column; gap: var(--s-7); }
.samensteller-voorbeeld { position: sticky; top: var(--s-5); display: flex;
  flex-direction: column; gap: var(--s-3); }
.samensteller-voorbeeld .codeblok { max-height: 46vh; overflow-y: auto; margin-bottom: 0; }
/* Kop, keuze en telling onder elkaar; de keuzeknoppen raken zo niet de streep
   van de kop, en het segment houdt zijn eigen regel. */
.samensteller-kop { display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-start; }
.samensteller-kop .seg { align-self: flex-start; }

/* ==== Venster over de pagina (voorwaarden bij het aanmelden) ============= */
.modaal { position: fixed; inset: 0; z-index: 2000; overflow-y: auto;
  padding: var(--s-3); background: color-mix(in srgb, #201e1d 55%, transparent); }
.modaal-venster { display: flex; flex-direction: column; max-width: 780px; margin: var(--s-4) auto;
  max-height: calc(100vh - 2 * var(--s-4)); overflow: hidden;
  background: var(--color-paper); box-shadow: var(--shadow-sm); }
.modaal-kop, .modaal-voet { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2); flex-wrap: wrap; flex: none; padding: var(--s-3) var(--s-4); }
.modaal-kop { border-bottom: 1px solid var(--color-divider); }
.modaal-kop h2 { margin: 0 0 4px; }
.modaal-voet { border-top: 1px solid var(--color-divider); }
.modaal-acties { display: flex; gap: var(--s-1); }
.modaal-inhoud { overflow-y: auto; padding: var(--s-4); max-width: none; gap: var(--s-4); }
.modaal-inhoud .terms-body h2 { font-size: var(--fs-5); margin-top: var(--s-5); }
.modaal-inhoud .terms-body > h2:first-child { margin-top: 0; }

/* ==== Voorwaarden ========================================================= */
.kruimels { font-size: var(--fs-2xs); color: var(--color-neutral-700); margin-top: 18px; }
.kruimels a { color: var(--color-neutral-700); }
.kruimels span[aria-hidden] { padding: 0 6px; }

.doc-head { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; margin-top: 22px; }
.doc-head h1 { margin: 0; }
.doc-versie { font-size: var(--fs-xs); color: var(--color-neutral-700); margin-top: var(--s-2); }
.doc-colofon {
  margin-top: 26px; padding: var(--s-3) var(--s-4); background: var(--color-neutral-100);
  font-size: var(--fs-xs); line-height: 1.6; color: var(--color-neutral-900);
}
.doc-layout { display: grid; grid-template-columns: 240px 1fr; gap: var(--s-8); align-items: start; margin-top: 44px; }
.toc-title { border-top: 1px solid var(--color-text); padding-top: 10px; font-size: var(--fs-2xs); font-weight: 600; margin-bottom: var(--s-1); }

/* Opsommingen in een document; dng.css zet alleen alinea's, koppen en de
   genummerde .sub-lijst van de voorwaarden. */
.doc ul, .doc ol:not(.sub) { padding-left: 26px; margin: 0 0 var(--s-3); }
.doc li { font-size: var(--fs-body); line-height: 1.68; color: var(--color-neutral-900); margin-bottom: 4px; }
.doc ul:last-child, .doc ol:last-child { margin-bottom: 0; }
.doc p + p { margin-top: var(--s-3); }

/* Een document met tabellen en roosters erin: die hebben meer breedte nodig
   dan de leesmaat, de lopende tekst niet. */
.doc--breed { max-width: none; }
.doc--breed p, .doc--breed .lead, .doc--breed li { max-width: var(--measure); }

/* De wettekst staat in partials/terms-content.ejs en blijft letterlijk; hier
   krijgt hij alleen de maatvoering van .doc uit dng.css. */
.doc .terms-body h2 { margin-top: var(--s-6); }
.doc .terms-body > h2:first-child { margin-top: 0; }
.doc .terms-body dl { margin: var(--s-2) 0 var(--s-3); }
.doc .terms-body .terms-contact { font-size: var(--fs-body); line-height: 1.68; }

/* ==== Staten (404, leeg, formulier, cookiemelding) ======================== */
.staat-layout {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: var(--s-9); align-items: start; padding: 76px 0 40px;
}
.staat h1 { margin: 22px 0 0; }
.staat p { margin: var(--s-3) 0 0; max-width: 46ch; color: var(--color-neutral-900); }
.staat-acties { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: 30px; }
.staat-lijst { padding-top: var(--s-3); display: flex; flex-direction: column; gap: 2px; }
.staat-lijst .kicker { margin-bottom: var(--s-3); }
.staat-lijst a { display: inline-flex; align-items: center; min-height: 38px; }

/* ==== Chatvenster ========================================================= */
/* partials/chat.ejs is in beide ontwerpen dezelfde markup en dezelfde CSS; die
   CSS werkt met de variabelen van het oude ontwerp. Hier krijgen ze de waarden
   van dit ontwerp, zodat er geen kleur bij komt die niet in dng.css staat.
   De ontworpen vorm (drie standen, streep in accent bovenaan) is nog niet
   gebouwd; dit houdt hem intussen leesbaar. */
.chat-float {
  --white: var(--color-paper);
  --cream: var(--color-neutral-100);
  --ink: var(--color-text);
  --ink-deep: var(--color-accent-900);
  --brand: var(--color-accent);
  --brand-pale: var(--color-accent-100);
  --primary: var(--color-accent);
  --primary-dark: var(--color-accent-active);
  --muted: var(--color-neutral-700);
  --border: var(--color-divider);
  --font-body: var(--font-ui);
  --radius: 2px;
  --radius-lg: 2px;
}
.chat-float .chat-panel { border-top: 2px solid var(--color-accent); }

/* ==== Mobiel ============================================================== */
@media (max-width: 560px) {
  .nav-menu { display: block; }

  .profile-head { flex-direction: column; align-items: stretch; gap: var(--s-4); margin-top: 22px; }
  .profile-actions { flex-direction: column; }
  .profile-actions .btn { width: 100%; min-height: var(--ctrl); }
  .profile-layout { grid-template-columns: 1fr; gap: 30px; margin-top: 30px; }
  .profile-main { gap: 30px; max-width: none; }
  .profile-lead { font-size: 19px; line-height: 1.5; }
  .deflist > div { flex-direction: column; gap: 2px; }
  .deflist dd { text-align: left; }
  .facts { font-size: var(--fs-body); }
  .facts > div { flex-direction: row; padding: 11px 0; }

  .nav--bleed { padding: 14px 20px; }
  .band { padding: 30px 20px; }
  .band h2 { font-size: 26px; }
  .duo, .hero-pitch, .vergelijk, .vergelijk--drie, .blokken, .blokken--drie,
  .genummerd--drie, .genummerd--twee { grid-template-columns: 1fr; gap: 30px; }
  .keuzes, .prijzen, .brief, .form-grid, .type-grid, .reg-kop,
  .welkom-layout { grid-template-columns: 1fr; }
  .welkom-layout { gap: var(--s-6); margin-top: var(--s-5); }

  .dash-kop { margin-top: 24px; gap: var(--s-2); }
  .volgende-stap { margin-top: 28px; align-items: stretch; gap: var(--s-3); }
  .volgende-stap-acties { width: 100%; }
  .dash-cijfers { grid-template-columns: 1fr; gap: 34px; margin-top: 34px; }
  .dash-rij { min-height: 52px; font-size: var(--fs-body); }
  .dash-rest { grid-template-columns: 1fr; gap: 30px; margin-top: 30px; }
  .dash-voet { margin-top: 30px; flex-direction: column; gap: 4px; }

  .samensteller { grid-template-columns: 1fr; gap: var(--s-6); margin-top: 28px; }
  .samensteller-voorbeeld { position: static; }
  .kopieerbaar { flex-direction: column; }
  /* Vijf stappen passen niet naast elkaar: drie en twee, elk even breed, en
     alleen de stap waar je bent draagt zijn naam. */
  .wizard-progress { flex-wrap: wrap; }
  .wizard-step { flex: 0 0 calc(33.333% - var(--s-1)); }
  .wizard-step__label { display: none; }
  .wizard-step.active .wizard-step__label { display: inline; }
  .wizard-nav { flex-direction: column; align-items: stretch; }
  .wizard-nav .btn { width: 100%; }
  .modaal-venster { margin: 0; max-height: calc(100vh - 2 * var(--s-3)); }
  .brief { gap: var(--s-5); }
  .citaat { font-size: var(--fs-4); padding-left: var(--s-3); }
  .tabel { font-size: var(--fs-2xs); }
  .cijfers { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
  .cijfers dd { font-size: 34px; }
  .hero { padding: 30px 20px; }
  .hero h1 { font-size: 38px; }
  .hero-actions { padding: 30px 20px; flex-direction: column; align-items: stretch; gap: var(--s-4); }
  .hero-zoek { flex-direction: column; }
  .hero-zoek .input, .hero-zoek .btn { width: 100%; }
  .ticker-band { padding: 14px 20px; }
  .hero-ticker { font-size: var(--fs-sm); gap: var(--s-1); }
  .word-ticker__track span { font-size: 20px; }
  .rekenhulp-uitkomst { font-size: 40px; }
  .footer-wide { grid-template-columns: 1fr; gap: 26px; padding: 30px 20px; }

  .doc-head { grid-template-columns: 1fr; gap: var(--s-3); margin-top: var(--s-3); }
  .doc-head .cta { align-items: stretch; width: 100%; }
  .doc-head .btn { width: 100%; }
  /* minmax(0,…) en min-width:0: anders duwt de breedste tabel de kolom, en
     daarmee de pagina, breder dan het scherm. */
  .doc-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); margin-top: var(--s-5); }
  .doc-layout > * { min-width: 0; }
  .toc { position: static; }
  .toc a { min-height: 38px; display: flex; align-items: center; }
  .doc-colofon { margin-top: 18px; }
  .staat-layout { grid-template-columns: 1fr; gap: var(--s-6); padding: 30px 0; }
  .staat-acties .btn { width: 100%; }
  .staat-acties { flex-direction: column; }

  .search-form { margin-top: var(--s-4); }
  .search-form .btn { display: none; }   /* enter verstuurt; ontwerp toont alleen het veld */

  .search-layout { grid-template-columns: 1fr; gap: var(--s-4); margin-top: var(--s-3); }
  .filter-option { min-height: var(--ctrl-icon); font-size: var(--fs-body); }
  .filter-exclude { width: var(--ctrl-icon); min-height: var(--ctrl-icon); }

  .filters { margin-top: var(--s-4); }

  .results-head { align-items: center; font-size: var(--fs-sm); }
  .results .row { grid-template-columns: 1fr; gap: var(--s-2); padding: var(--s-4) 0; }
  .results .row-title a { display: inline-flex; align-items: center; min-height: var(--ctrl-icon); }
  .row-body { font-size: var(--fs-body); }
  .row-score { display: none; }          /* het cijfer staat in de metaregel */
}

/* ==== Inklapbaar blok ===================================================== */
/* Onder het breekpunt achter een knop, erboven altijd open en zonder knop.
   Staat `open` in de HTML, zodat er zonder JavaScript niets verborgen blijft;
   het script in dng-footer.ejs klapt hem op telefoon dicht. Een dichtgeklapte
   <details> verbergt zijn inhoud, dus die dwingen we hierboven terug. */
.inklapbaar > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; min-height: var(--ctrl-icon);
}
.inklapbaar > summary::-webkit-details-marker { display: none; }
@media (min-width: 561px) {
  .inklapbaar > summary { display: none; }
  .filters-toggle > .filters { display: flex !important; }
  .toc-toggle > .toc { display: block !important; }
}
.toc-toggle { border-top: 1px solid var(--color-text); padding-top: var(--s-2); }
.toc-toggle > summary { font-size: var(--fs-sm); font-weight: 600; }
/* De <details> is het rasteritem, dus de sticky hoort daar; op .toc alleen is
   het omhulsel precies zo hoog als de lijst en blijft er niets om te schuiven.
   De maxhoogte houdt hem leesbaar op een laag venster. */
@media (min-width: 561px) {
  .toc-toggle {
    position: sticky; top: var(--s-5);
    max-height: calc(100vh - var(--s-8)); overflow-y: auto;
    border-top: 0; padding-top: 0;
  }
}

/* De regel waar de lezer is, staat aan. Verschil in gewicht en een streepje
   ervoor, niet in kleur alleen. */
.toc a { border-left: 2px solid transparent; padding-left: 8px; margin-left: -10px; }
.toc a[aria-current] { color: var(--color-accent-ink); font-weight: 600;
  border-left-color: var(--color-accent); }

/* ==== Beheerschermen ====================================================== */
/* De achttien schermen onder /admin dragen hun opmaak in een <style> per
   pagina, met de namen en variabelen van het oude ontwerp. Die blokken blijven
   staan: het is functionaliteit, geen ontwerp. Hier krijgen ze de waarden van
   dit ontwerp, net als bij .registratie en het chatvenster. Zo verandert de
   hele beheerkant van kleur, font en dichtheid zonder achttien herschrijvingen.

   De .admin-laag onderaan dng.css draagt de dichtheid (rijhoogte 38px,
   werkbalk 34px) en de onderdelen .sidebar, table.a, .st en .stat. */
.admin {
  --ink: var(--color-text);
  --ink-deep: var(--color-text);
  --ink-mid: var(--color-neutral-800);
  --text: var(--color-text);
  --muted: var(--color-neutral-700);
  --muted-light: var(--color-neutral-600);
  --border: var(--color-neutral-300);
  --border-light: var(--color-divider);
  --brand: var(--color-accent);
  --brand-d: var(--color-accent-hover);
  --brand-dark: var(--color-accent-hover);
  --brand-text: var(--color-accent-ink);
  --brand-deep: var(--color-accent-ink);
  --brand-light: var(--color-accent-100);
  --brand-pale: var(--color-accent-100);
  --primary: var(--color-accent);
  --cream: var(--color-neutral-100);
  --bg: var(--color-neutral-100);
  --bg-soft: var(--color-neutral-100);
  --white: var(--color-paper);
  --surface: var(--color-paper);
  --success: var(--color-accent-ink);
  --success-bg: var(--color-accent-100);
  --forest: var(--color-accent-ink);
  --warning: var(--color-text);
  --warning-bg: var(--color-neutral-200);
  --error: var(--color-text);
  --error-bg: var(--color-neutral-200);
  --danger: var(--color-text);
  --radius: 2px;
  --radius-lg: 2px;
  --shadow: none;
  --shadow-md: var(--shadow-sm);
  --font-display: var(--font-serif);
  --font-body: var(--font-ui);
  --max-w: none;

  font-family: var(--font-ui); font-size: var(--a-text); color: var(--color-text);
  background: var(--color-paper);
}

/* ── Raamwerk: vaste zijkolom, inhoud schuift ─────────────────────────────── */
.admin-shell { display: grid; grid-template-columns: 212px 1fr; min-height: 100vh; align-items: start; }
/* Het inlogscherm draagt de laag wel, maar niet het menu. */
.admin-shell--kaal { grid-template-columns: 1fr; }
.admin-shell--kaal .admin-inhoud { display: flex; justify-content: center; padding-top: 60px; }
.admin-zij {
  position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; padding: 18px 0 20px;
  background: var(--color-neutral-100); border-right: 1px solid var(--color-divider);
}
.admin-merk {
  font-family: var(--font-serif); font-size: 17px; font-weight: 600;
  padding: 0 16px 14px; border-bottom: 1px solid var(--color-divider);
}
.admin-merk a { color: var(--color-text); }
.admin-merk a:hover { text-decoration: none; }
.admin-merk span {
  font-family: var(--font-ui); font-size: 11px; font-weight: 600;
  color: var(--color-neutral-700); letter-spacing: .06em;
}
.admin-zij .sidebar { display: flex; flex-direction: column; padding-top: 10px; background: none; border: 0; }
.admin-zij-voet {
  display: flex; flex-direction: column; margin-top: auto; padding: var(--s-3) 16px 0;
  border-top: 1px solid var(--color-divider); font-size: 13px;
}
.admin-zij-voet a { color: var(--color-neutral-700); min-height: 30px; display: inline-flex; align-items: center; }
.admin-inhoud { padding: 20px 26px 40px; min-width: 0; }

/* ── De omhulsels uit de pagina's zelf ────────────────────────────────────── */
/* Elke pagina zet een eigen .X-wrap met achtergrond en 48px lucht. Het
   raamwerk hierboven doet dat al; hier worden ze doorzichtig. */
.admin .admin-wrap, .admin .audit-wrap, .admin .mail-wrap,
.admin .insights-wrap, .admin .admin-login-wrap, .admin .netwerk-wrap,
.admin .sbi-wrap, .admin .uit-wrap {
  padding: 0; background: none; min-height: 0;
}
.admin .container, .admin .container--narrow { width: 100%; max-width: none; margin: 0; padding: 0; }

/* ── Paginakop ────────────────────────────────────────────────────────────── */
.admin .admin-header, .admin .mail-head, .admin .uit-head, .admin .sbi-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4);
  flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 22px;
  border-bottom: 1px solid var(--color-divider);
}
.admin h1 {
  font-family: var(--font-serif); font-size: 26px; font-weight: 600;
  line-height: 1.15; letter-spacing: -.015em; margin: 0;
}
.admin h2 { font-family: var(--font-serif); font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.admin h3 { font-family: var(--font-ui); font-size: 14px; font-weight: 600; }
.admin p { line-height: 1.6; }
/* Alleen de kale link krijgt de accentkleur; een link met een eigen klasse
   houdt de vorm die zijn pagina hem geeft. */
.admin-inhoud a:not([class]) { color: var(--color-accent); }

/* ── Knoppen: de dubbele-streepnamen van het oude ontwerp ─────────────────── */
.admin .btn, .admin button.btn-sm, .admin .btn-sm {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-ui); font-weight: 600; font-size: 13.5px;
  min-height: var(--a-ctrl); padding: 0 12px; border-radius: 2px; cursor: pointer;
  border: 1px solid var(--color-neutral-400); background: var(--color-paper); color: var(--color-text);
  text-decoration: none; white-space: nowrap;
}
.admin .btn:hover, .admin .btn-sm:hover { background: var(--color-neutral-100); text-decoration: none; }
.admin .btn--primary, .admin .btn-primary {
  background: var(--color-accent); border-color: var(--color-accent); color: #fff;
}
.admin .btn--primary:hover, .admin .btn-primary:hover { background: var(--color-accent-hover); }
.admin .btn--ghost, .admin .btn--outline { background: none; }
.admin .btn:disabled, .admin .btn-sm:disabled { opacity: .5; cursor: default; }

/* ── Tabellen ─────────────────────────────────────────────────────────────── */
.admin .admin-table-wrap, .admin .tabel-wrap { overflow-x: auto; border: 1px solid var(--color-divider); background: var(--color-paper); border-radius: 2px; }
.admin table { width: 100%; border-collapse: collapse; font-size: var(--a-text); }
.admin .admin-table th, .admin table th {
  text-align: left; font-weight: 600; font-size: var(--a-small); text-transform: none;
  letter-spacing: 0; color: var(--color-neutral-700); background: var(--color-neutral-100);
  padding: 7px var(--a-pad); border-bottom: 1px solid var(--color-text); white-space: nowrap;
}
.admin .admin-table td, .admin table td {
  padding: 7px var(--a-pad); border-bottom: 1px solid var(--color-divider);
  color: var(--color-text); vertical-align: top;
}
.admin .admin-table tr:hover td { background: var(--color-neutral-100); }

/* ── Labels en badges: één vorm, verschil in rand en gewicht ──────────────── */
.admin .badge, .admin [class*="badge-"], .admin .st, .admin .tag, .admin [class*="tag-"],
.admin .page-chip, .admin .stat-pill, .admin .chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--a-small); font-weight: 600; line-height: 1.5;
  padding: 2px 8px; border-radius: 2px;
  border: 1px solid var(--color-neutral-300); background: var(--color-paper);
  color: var(--color-neutral-800); white-space: nowrap;
}
.admin .badge-verified, .admin .badge-active, .admin .st--live, .admin .tag-ok {
  border-color: var(--color-accent); color: var(--color-accent-ink); background: var(--color-accent-100);
}
.admin .badge-test, .admin .badge-pending, .admin .st--pauze { color: var(--color-neutral-700); }
.admin .btn-test-toggle, .admin .btn-delete {
  font-family: var(--font-ui); font-size: var(--a-small); font-weight: 600;
  padding: 2px 8px; border-radius: 2px; cursor: pointer; line-height: 1.5;
  border: 1px solid var(--color-neutral-400); background: var(--color-paper); color: var(--color-text);
  white-space: nowrap;
}
.admin .btn-test-toggle.is-real { border-color: var(--color-accent); color: var(--color-accent-ink); background: var(--color-accent-100); }
.admin .btn-test-toggle:hover, .admin .btn-delete:hover { background: var(--color-neutral-200); }

/* ── Kaarten en velden ────────────────────────────────────────────────────── */
.admin .card {
  background: var(--color-paper); border: 1px solid var(--color-divider);
  border-radius: 2px; box-shadow: none;
}
.admin input:not([type=checkbox]):not([type=radio]), .admin select, .admin textarea {
  font-family: var(--font-ui); font-size: 13.5px; color: var(--color-text);
  background: var(--color-paper); border: 1px solid var(--color-neutral-400);
  border-radius: 2px; min-height: var(--a-ctrl); padding: 0 10px;
}
.admin textarea { padding: 8px 10px; line-height: 1.5; min-height: 0; }
.admin label { font-size: var(--a-small); font-weight: 600; }
.admin .hint { font-size: var(--a-small); color: var(--color-neutral-700); }
.admin code, .admin pre { font-family: var(--mono); font-size: var(--a-small); }
.admin pre { white-space: pre-wrap; word-break: break-word; }

/* ── Telefoon: de zijkolom wordt een balk boven de inhoud ─────────────────── */
@media (max-width: 860px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-zij { position: static; max-height: none; padding: 14px 0 10px; border-right: 0;
    border-bottom: 1px solid var(--color-divider); }
  .admin-zij .sidebar { flex-direction: row; flex-wrap: wrap; gap: 2px; padding: 10px 12px 0; }
  .admin-zij .sidebar a { border-left: 0; border-bottom: 2px solid transparent; padding: 0 10px;
    min-height: var(--ctrl-icon); }
  .admin-zij .sidebar a[aria-current] { border-left: 0; border-bottom-color: var(--color-accent); background: none; }
  .admin-zij-voet { flex-direction: row; gap: var(--s-3); margin-top: var(--s-2); }
  .admin-inhoud { padding: 18px 16px 32px; }
  .admin .btn, .admin .btn-sm, .admin input, .admin select, .admin textarea { min-height: var(--ctrl-icon); font-size: var(--fs-body); }
  /* Een tabel of grafiek die breder is dan de telefoon schuift in zijn eigen
     kader; de pagina zelf blijft staan. De dichtste analysepagina's houden
     hun eigen breedte, die zijn voor een groot scherm gemaakt. */
  /* Wat op een telefoon toch te breed blijft (de dichtste analyseschermen),
     schuift binnen de inhoudkolom in plaats van de hele pagina mee te trekken. */
  .admin-inhoud { overflow-x: auto; }
  .admin-inhoud table { display: block; overflow-x: auto; max-width: 100%; }
  .admin-inhoud canvas, .admin-inhoud img, .admin-inhoud svg { max-width: 100%; }
}

/* Een handvol knoppen zette een donkere letter op een gekleurd vlak; dat haalde
   ook in het oude ontwerp de leesnorm niet. Op het accent hoort wit. */
.admin.admin .refresh-btn, .admin.admin .save-btn,
.admin.admin .btn-ie-save, .admin.admin .btn-modal-save { color: #fff; }
/* De labels die per pagina een eigen tint kregen, krijgen hier dezelfde vorm
   als de rest: vlak en letter samen, zodat het contrast klopt. */
.admin.admin .branch-chip, .admin.admin .mode-chip, .admin.admin .tier-pill,
.admin.admin .vac-admin-badge, .admin.admin .rec-badge, .admin.admin .ps-badge {
  background: var(--color-paper); color: var(--color-neutral-800);
  border: 1px solid var(--color-neutral-300);
}
.admin.admin .cf-note, .admin.admin .cf-unit, .admin.admin .ts__desc { color: var(--color-neutral-800); }