/* ===================================================================
   BASIS -- bouwstenen en raamwerk van het nieuwe binnenportaal
   ===================================================================
   DESIGN.md §2 (componenten) en §3 (layout), op de tokens van tokens.css.
   Elk component bestaat in één vorm; er zijn geen varianten per pagina.

   Twee soorten namen:
   - De ALGEMENE klassen houden hun oude naam (btn, card, badge, form-input,
     table, modal, alert, kv, chip, flex, gap-md …). Die staan in tientallen
     sjablonen en -- belangrijker -- in de scripts die zelf HTML opbouwen
     (Resultaten, de PvE-stappen, de rapportwerkplek; zie onderzoek O2 in
     docs/redesign/onderzoek/O2-klassen.md). Met dezelfde naam krijgen die
     schermen vanzelf het nieuwe uiterlijk, zonder dat hun script verandert.
   - Wat NIEUW is in het ontwerp (menu, contextbalk, lint, statuslabel,
     zijpaneel …) krijgt het voorvoegsel v-, zodat het nooit botst met een
     oude regel in een stijlblad dat nog meeloopt (projectpagina.css enz.).
   =================================================================== */

/* ---------- basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: var(--fs-4); line-height: var(--lh-4);
  color: var(--c-text); background: var(--c-canvas); -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
img, svg { vertical-align: middle; }
a { color: var(--c-primary); text-underline-offset: 2px; }
a:hover { color: var(--c-primary-hover); }
h1, h2, h3, h4 { margin: 0; font-weight: var(--fw-semibold); }
h1 { font-size: var(--fs-2); line-height: var(--lh-2); }
h2 { font-size: var(--fs-3); line-height: var(--lh-3); }
h3, h4 { font-size: var(--fs-4); line-height: var(--lh-4); }
p { margin: 0; }
b, strong { font-weight: var(--fw-semibold); }
/* §2 Knop: focusring van 2 px navy met 2 px ruimte, op elk element. */
:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.tabular, td.num, .num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- hulpklassen (namen uit portal.css, waarden op de schaal van 4) ---------- */
.flex { display: flex; } .inline-flex { display: inline-flex; } .grid { display: grid; } .block { display: block; }
.flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1; min-width: 0; }
.items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; }
.justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; }
.gap-xs { gap: var(--sp-1); } .gap-sm { gap: var(--sp-2); } .gap-md { gap: var(--sp-2); } .gap-lg { gap: var(--sp-3); }
.gap-xl { gap: var(--sp-4); } .gap-2xl { gap: var(--sp-5); } .gap-3xl { gap: var(--sp-5); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mt-xs { margin-top: var(--sp-1); } .mt-sm, .mt-md { margin-top: var(--sp-2); } .mt-lg { margin-top: var(--sp-3); }
.mt-xl { margin-top: var(--sp-4); } .mt-2xl, .mt-3xl { margin-top: var(--sp-5); } .mt-4xl { margin-top: var(--sp-6); }
.mb-xs { margin-bottom: var(--sp-1); } .mb-sm, .mb-md { margin-bottom: var(--sp-2); } .mb-lg { margin-bottom: var(--sp-3); }
.mb-xl { margin-bottom: var(--sp-4); } .mb-2xl, .mb-3xl { margin-bottom: var(--sp-5); } .mb-4xl { margin-bottom: var(--sp-6); }
.text-xs { font-size: var(--fs-6); line-height: var(--lh-6); }
.text-sm { font-size: var(--fs-5); line-height: var(--lh-5); }
.text-base { font-size: var(--fs-4); line-height: var(--lh-4); }
.text-md, .text-lg { font-size: var(--fs-3); line-height: var(--lh-3); }
.text-xl, .text-2xl { font-size: var(--fs-2); line-height: var(--lh-2); }
.text-3xl { font-size: var(--fs-1); line-height: var(--lh-1); }
.text-primary { color: var(--c-text); } .text-secondary { color: var(--c-text-2); } .text-tertiary { color: var(--c-text-3); }
.font-regular, .font-medium { font-weight: var(--fw-regular); }
.font-semibold, .font-bold { font-weight: var(--fw-semibold); }
.text-center { text-align: center; } .text-right { text-align: right; }
.w-full { width: 100%; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- §2 Knop ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: var(--h-md); padding: 0 16px; border-radius: var(--r-md);
  border: 1px solid var(--c-line-strong); background: var(--c-surface); color: var(--c-text);
  font-size: var(--fs-5); line-height: var(--lh-5); font-weight: var(--fw-regular);
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.btn:hover { background: var(--c-primary-tint); border-color: var(--c-disabled); color: var(--c-text); }
.btn svg { flex: none; }
/* Primair: hooguit één per scherm of paneel, voor de volgende stap. */
.btn-primary { background: var(--c-primary); border-color: var(--c-primary); color: #FFFFFF; font-weight: var(--fw-semibold); }
.btn-primary:hover { background: var(--c-primary-hover); border-color: var(--c-primary-hover); color: #FFFFFF; }
/* Stil: annuleren en acties in een rij. */
.btn-ghost, .btn-stil { border-color: transparent; background: transparent; color: var(--c-primary); padding: 0 12px; }
.btn-ghost:hover, .btn-stil:hover { background: var(--c-primary-tint); border-color: transparent; color: var(--c-primary); }
/* Gevaar: secundair met rode tekst. */
.btn-danger, .btn-gevaar { color: var(--st-blok-fg); }
.btn-danger:hover, .btn-gevaar:hover { background: var(--st-blok-bg); color: var(--st-blok-fg); }
.btn-secondary { /* de standaard */ }
.btn-sm { height: var(--h-sm); padding: 0 12px; }
.btn-lg { height: var(--h-lg); }
.btn-icoon { width: var(--h-md); padding: 0; }
.btn-sm.btn-icoon { width: var(--h-sm); }
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--c-canvas); border-color: var(--c-line-soft); color: var(--c-disabled); cursor: not-allowed;
}
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

/* ---------- §2 Formulierveld (het model van de BuitenApp) ---------- */
.form-group, .v-veld { display: flex; flex-direction: column; gap: 6px; max-width: 560px; }
/* Witruimte, één regel voor de hele app (keuze van Paul, 5 okt 2026). Een veld
   -- of een rij velden naast elkaar -- houdt `--veld-afstand` tot wat eronder
   volgt; het laatste in zijn kader niet. Tot de overstap deed portal.css dat met
   een marge onder elk veld; zonder die regel plakten de velden in de oude inhoud
   (de werkplek van het rapport, alle pop-ups) aan elkaar. Een veld IN een rij of
   raster dat zijn tussenruimte zelf regelt (gap) krijgt niets: anders valt de
   ruimte daar dubbel. */
.form-group:not(:last-child), .v-veld:not(:last-child),
:is(.pp-twee, .pp-formrij, .grid):has(> :is(.form-group, .v-veld)):not(:last-child) { margin-bottom: var(--veld-afstand); }
:is(.pp-twee, .pp-formrij, .up-velden, .grid, .flex) > :is(.form-group, .v-veld) { margin-bottom: 0; }
/* Een veld direct onder een stuk tekst (een uitleg in een pop-up) krijgt dezelfde
   ruimte erboven; met de marge van de tekst valt die samen, niet erbij op. */
p + :is(.form-group, .v-veld) { margin-top: var(--veld-afstand); }
/* Een hulptekst hoort bij zijn eigen veld: vlak eronder (de 6 px van het veld),
   niet halverwege naar het volgende -- ook als de oude inhoud er mt-md bij zette. */
:is(.form-group, .v-veld) > :is(.v-hulp, .text-xs) { margin-top: 0; }
/* Een rij knoppen onder tekst of gegevens (Inplannen onder Uitgevoerd door ·
   Voortgang) krijgt dezelfde ruimte erboven. Waar een kader zijn inhoud al met
   een tussenruimte (gap) stapelt, regelt dat kader het zelf. */
:is(p, dl, ul, ol, .v-kv, .kv, .table-container, .v-tabelkader) + :is(.pp-acties, .btn-row) { margin-top: var(--veld-afstand); }
:is(.pp-onderdeel, .pp-nu, .flex) > :is(.pp-acties, .btn-row) { margin-top: 0; }
.form-label, .v-veld > label, .v-veld-label {
  font-size: var(--fs-5); line-height: var(--lh-5); font-weight: var(--fw-semibold); color: var(--c-text);
}
.v-optioneel { font-weight: var(--fw-regular); color: var(--c-text-3); }
.form-input, .form-select, .form-textarea, .v-invoer {
  width: 100%; min-height: var(--h-veld); padding: 0 12px;
  border: 1.5px solid var(--c-line-strong); border-radius: var(--r-lg); background: var(--c-surface);
  font-size: var(--fs-4); line-height: var(--lh-4); color: var(--c-text);
}
.form-textarea, textarea.v-invoer { padding: 10px 12px; resize: vertical; }
.form-select { appearance: none; padding-right: 36px; cursor: pointer;
  background: var(--c-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A5468' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; }
/* Dezelfde focusring als overal (2 px navy, 2 px ruimte); de rand kleurt mee. */
.form-input:focus, .form-select:focus, .form-textarea:focus, .v-invoer:focus { border-color: var(--c-primary); }
/* Kleinere velden alleen in een tabel of filterrij; de tekst blijft 16 zodat
   een telefoon er niet op inzoomt (DESIGN.md §1.2). */
.form-input-sm, .form-select-sm { min-height: var(--h-sm); border-radius: var(--r-md); font-size: var(--fs-5); padding-left: 10px; }
.form-hint, .v-hulp { font-size: var(--fs-6); line-height: var(--lh-6); color: var(--c-text-3); }
.v-fout .form-input, .v-fout .form-select, .v-fout .v-invoer, .form-input.is-fout { border-color: var(--st-blok-fg); }
.v-foutregel { font-size: var(--fs-6); line-height: var(--lh-6); color: var(--st-blok-fg); }
/* In de onderbalk van een pop-up staat de foutregel links van de knoppen (B203). */
.modal-foot > .v-foutregel { flex: 1; margin: 0; align-self: center; }
.v-foutregel[hidden] { display: none; }
/* Een verborgen veld (een vervolgvraag die nog niet geldt) is echt weg: `display:
   flex` van het veld won anders van het attribuut hidden. Volgen er alleen nog
   verborgen velden, dan is het veld erboven het laatste, zonder ruimte eronder. */
:is(.form-group, .v-veld)[hidden] { display: none; }
:is(.form-group, .v-veld):not(:has(~ :not([hidden]))) { margin-bottom: 0; }
/* Een naam met de productnaam er vast voor (B171; Instellingen › Naam en
   instellingen, Nieuw project, en de pop-up bij Starten van een PvE, B203). */
.v-naamveld { display: flex; align-items: stretch; }
.v-naam-vast { display: flex; align-items: center; flex: none; padding: 0 12px; border: 1.5px solid var(--c-line-strong); border-right: 0; border-radius: var(--r-lg) 0 0 var(--r-lg); background: var(--c-canvas); color: var(--c-text-2); white-space: nowrap; }
.v-naam-vast + .v-invoer { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.v-invoer--datum { max-width: 220px; }
.v-vink { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--h-veld); font-size: var(--fs-4); cursor: pointer; }
.v-vink input { width: 20px; height: 20px; margin: 0; accent-color: var(--c-primary); flex: none; }

/* ---------- Keuzelijst (static/js/v2/keuzelijst.js, B171) ----------
   De vorm van de keuzelijst in de BuitenApp (.bp-kies): de lijst hangt aan het
   veld, regels van 48 hoog, de gekozen regel gekleurd, ruim vier regels in
   beeld. Anders dan daar ZWEEFT de lijst over wat eronder staat (keuze van
   Paul). De <select> zelf blijft onzichtbaar staan als bron van de waarde.
   De open lijst ligt los van zijn omgeving (B197): position fixed, en het script
   zet left, width en top (of bottom) op de plek van het veld op het scherm --
   zo knipt geen schuifvlak hem af en valt hij in een pop-up over de onderbalk. */
.v-kies { position: relative; width: 100%; }
.v-kies-bron { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.v-kies-knop {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--h-veld); padding: 0 12px;
  border: 1.5px solid var(--c-line-strong); border-radius: var(--r-lg); background: var(--c-surface);
  font-size: var(--fs-4); line-height: var(--lh-4); color: var(--c-text); text-align: left; cursor: pointer;
}
.v-kies-knop:focus-visible { border-color: var(--c-primary); }
.v-kies-knop:disabled { background: var(--c-canvas); border-color: var(--c-line); color: var(--c-disabled); cursor: not-allowed; }
.v-kies-waarde { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Nog niets gekozen: grijs en schuin, zodat het zichtbaar geen antwoord is. */
.v-kies-leeg { color: var(--c-text-3); font-style: italic; }
.v-kies-pijl { flex: none; display: grid; place-items: center; color: var(--c-text-2); transition: transform .15s ease; }
.v-kies.open .v-kies-pijl { transform: rotate(180deg); }
.v-kies.open .v-kies-knop { border-color: var(--c-primary); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.v-kies-lijst {
  position: fixed; z-index: 25; overflow: hidden;
  border: 1.5px solid var(--c-primary); border-top: 0; border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: var(--c-surface); box-shadow: var(--shadow-overlay);
}
.v-kies-lijst[hidden] { display: none; }
/* Geen plek onder het veld: de lijst klapt naar boven, en de randen draaien mee. */
.v-kies.boven .v-kies-lijst { border-top: 1.5px solid var(--c-primary); border-bottom: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.v-kies.open.boven .v-kies-knop { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.v-kies-zoek { padding: 8px; border-bottom: 1px solid var(--c-line-soft); }
.v-kies-zoek[hidden] { display: none; }
.v-kies-zoekveld { width: 100%; min-height: 40px; padding: 0 12px; border: 1.5px solid var(--c-line-strong); border-radius: var(--r-md); font-size: var(--fs-4); background: var(--c-surface); }
/* De rand kleurt navy bij focus; een tweede ring eromheen past niet in de lijst. */
.v-kies-zoekveld:focus, .v-kies-zoekveld:focus-visible { border-color: var(--c-primary); outline: none; }
/* Vier en driekwart regel hoog: dat stukje regel onderaan laat zien dat er meer is. */
.v-kies-opties { max-height: 228px; overflow-y: auto; overscroll-behavior: contain; }
.v-kies-optie {
  display: flex; flex-direction: column; justify-content: center; gap: 2px; width: 100%; min-height: 48px; padding: 12px;
  border: 0; border-bottom: 1px solid var(--c-line-soft); background: transparent;
  font-size: var(--fs-4); line-height: var(--lh-4); color: var(--c-text); text-align: left; cursor: pointer;
}
.v-kies-optie:last-of-type { border-bottom: 0; }
.v-kies-optie[hidden] { display: none; }
.v-kies-optie:hover, .v-kies-optie:focus-visible { background: var(--c-primary-tint); outline: none; }
.v-kies-optie.gekozen { background: var(--c-primary-soft); color: var(--c-primary); font-weight: var(--fw-semibold); }
.v-kies-optie:disabled { color: var(--c-disabled); cursor: not-allowed; background: transparent; }
.v-kies-optie-meta { font-size: var(--fs-6); line-height: var(--lh-6); font-weight: var(--fw-regular); color: var(--c-text-3); }
.v-kies-optie:disabled .v-kies-optie-meta { color: var(--c-text-3); }
.v-kies-groep { padding: 10px 12px 4px; font-size: var(--fs-6); line-height: var(--lh-6); font-weight: var(--fw-semibold); color: var(--c-text-3); text-transform: uppercase; letter-spacing: .04em; }
.v-kies-niets { padding: 14px 12px; font-size: var(--fs-5); color: var(--c-text-3); font-style: italic; }
.v-kies-niets[hidden] { display: none; }
/* Sinds B200 is ELKE select in het portaal deze keuzelijst; de vorm volgt de select
   (keuzelijst.js). De kleine maat (form-select-sm), in een tabel of balk: */
.v-kies--klein .v-kies-knop { min-height: var(--h-sm); padding: 0 10px; border-radius: var(--r-md); font-size: var(--fs-5); line-height: var(--lh-5); gap: 8px; }
.v-kies--klein.open .v-kies-knop { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.v-kies--klein.open.boven .v-kies-knop { border-radius: 0 0 var(--r-md) var(--r-md); }
.v-kies--klein .v-kies-optie { min-height: 40px; padding: 9px 12px; font-size: var(--fs-5); line-height: var(--lh-5); }
/* Zo breed als de langste keuze (width: auto, form-select--inhoud): het script zet
   de breedte van de knop; een min- of max-breedte van het omhulsel gaat voor. */
.v-kies--inhoud { display: inline-block; width: auto; max-width: 100%; vertical-align: middle; }
.v-kies--inhoud .v-kies-knop { min-width: 100%; max-width: 100%; }
/* Een keuze midden in een zin (data-kies-vorm="woord"): een woord, geen veld. */
.v-kies--woord { display: inline; width: auto; position: relative; }
.v-kies--woord .v-kies-knop, .v-kies--woord.open .v-kies-knop {
  display: inline; width: auto; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none;
  font: inherit; color: inherit; cursor: pointer;
}
.v-kies--woord .v-kies-waarde { overflow: visible; white-space: normal; }
.v-kies--woord .v-kies-pijl { display: none; }
.v-kies--woord .v-kies-lijst { width: max-content; max-width: min(360px, calc(100vw - 16px)); border-top: 1.5px solid var(--c-primary); border-radius: var(--r-lg); margin-top: 4px; }
.v-kies--woord.boven .v-kies-lijst { margin-top: 0; margin-bottom: 4px; }
/* Verplicht en nog leeg bij versturen, of in een veld met een fout. */
.v-kies-knop.is-fout, .v-fout .v-kies-knop { border-color: var(--st-blok-fg); }

/* ---------- Keuzeknoppen (o.keuzeknoppen, B171) ----------
   Een keuze uit een paar mogelijkheden als knoppen naast elkaar, waarvan er één
   aan staat; daaronder verschijnen de vervolgvragen van die keuze. Een echt
   keuzerondje eronder, zodat toetsenbord en schermlezer het kennen. De tekst
   wordt bij de gekozen knop niet vet: dan zou de rij verspringen. */
.v-keuzeknoppen { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.v-keuzeknop { position: relative; display: inline-flex; }
.v-keuzeknop[hidden] { display: none; }
.v-keuzeknop input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.v-keuzeknop > span {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--h-md); padding: 0 16px;
  border: 1.5px solid var(--c-line-strong); border-radius: var(--r-md); background: var(--c-surface);
  font-size: var(--fs-5); line-height: var(--lh-5); color: var(--c-text); cursor: pointer; white-space: nowrap;
}
.v-keuzeknop:hover > span { background: var(--c-primary-tint); }
.v-keuzeknop input:checked + span { border-color: var(--c-primary); background: var(--c-primary-soft); color: var(--c-primary); }
.v-keuzeknop input:focus-visible + span { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.v-keuzeknop input:disabled + span { border-color: var(--c-line); background: var(--c-canvas); color: var(--c-disabled); cursor: not-allowed; }

/* ---------- §1.1 Statuslabel: vijf betekenissen, altijd tekst plus stip ---------- */
.v-status, .badge {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: var(--r-sm);
  font-size: var(--fs-6); line-height: var(--lh-6); font-weight: var(--fw-semibold); white-space: nowrap;
  background: var(--st-open-bg); color: var(--st-open-fg);
}
.v-status::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: currentColor; flex: none; }
/* Tekst met een label ernaast (B200, keuze van Paul): past het label niet meer
   naast de tekst, dan zakt het ERONDER, in plaats van de tekst af te knippen of
   te bedekken. De tekst neemt zijn eigen breedte op één regel (nooit meer dan de
   rij), en pas als het label daarnaast geen plek meer heeft, breekt de rij.
   `space-between` zet het label rechts zolang het ernaast past, en links onder de
   tekst als het eronder staat. Een eigen rij met een label krijgt `v-naamlabel`
   (tekst eerst, label erna); de lijsten hieronder deden het al zo. */
.v-naamlabel, .v-rij, .pp-rij, .pp-substap-kop { flex-wrap: wrap; justify-content: space-between; }
.v-naamlabel { display: flex; align-items: center; gap: 4px 8px; flex: 1; min-width: 0; }
.v-naamlabel > :first-child, .v-rij > .v-rij-tekst, .pp-rij > .pp-rij-naam, .pp-substap-kop > :first-child { flex: 1 0 auto; max-width: 100%; }
.v-status--klaar, .badge-success { background: var(--st-klaar-bg); color: var(--st-klaar-fg); }
.v-status--bezig, .badge-primary, .badge-info { background: var(--st-bezig-bg); color: var(--st-bezig-fg); }
.v-status--wacht, .badge-warning { background: var(--st-wacht-bg); color: var(--st-wacht-fg); }
.v-status--blok, .badge-error, .badge-danger { background: var(--st-blok-bg); color: var(--st-blok-fg); }
.v-status--open, .badge-gray { background: var(--st-open-bg); color: var(--st-open-fg); }
/* Klaar en Bezig hebben een ronde stip, de drie andere een vierkante. */
.v-status--klaar::before, .v-status--bezig::before { border-radius: 50%; }
.badge-dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* ---------- §2 Kaart (blok) ---------- */
.card, .v-blok { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 20px 24px; min-width: 0; }
.card-header, .v-blok-kop { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.v-blok-koptekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.card-title, .v-blok-titel { font-size: var(--fs-3); line-height: var(--lh-3); font-weight: var(--fw-semibold); }
.card-subtitle, .v-blok-meta { font-size: var(--fs-6); line-height: var(--lh-6); color: var(--c-text-3); }
.v-blok--kaal { padding: 0; overflow: hidden; }
.v-blok-kop--rand { padding: 16px 16px 16px 24px; margin: 0; border-bottom: 1px solid var(--c-line-soft); }

/* ---------- §2 Tabel en lijstrij ---------- */
/* Altijd in een eigen kader, 24 px binnen de rand van de kaart (aanvulling 28 sep). */
.table-container, .v-tabelkader { border: 1px solid var(--c-line); border-radius: var(--r-md); overflow-x: auto; background: var(--c-surface); }
.table, .v-tabel { width: 100%; border-collapse: collapse; font-size: var(--fs-5); line-height: var(--lh-5); }
.table th, .v-tabel th {
  height: 40px; padding: 0 16px; text-align: left; background: var(--c-canvas); color: var(--c-text-2);
  font-size: var(--fs-6); line-height: var(--lh-6); font-weight: var(--fw-semibold); border-bottom: 1px solid var(--c-line); white-space: nowrap;
}
.table td, .v-tabel td { height: 48px; padding: 8px 16px; border-bottom: 1px solid var(--c-line-soft); vertical-align: middle; }
.table tbody tr:last-child td, .v-tabel tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td, .v-tabel tbody tr:hover td { background: var(--c-primary-soft); }
.table tr.clickable, .v-tabel tr[data-href] { cursor: pointer; }
.v-tabel tr[aria-selected="true"] td { background: var(--c-primary-soft); }
.v-tabel tr[aria-selected="true"] td:first-child { box-shadow: inset 3px 0 0 var(--c-primary); }
.v-tabel td.v-cel-naam, .table td.v-cel-naam { font-weight: var(--fw-semibold); }
.v-tabel tfoot td { font-weight: var(--fw-semibold); background: var(--c-canvas); border-top: 1px solid var(--c-line); }

/* ---------- Sleutel en waarde ----------
   .v-kv: een lijst van paren, het label links en de waarde rechts (een
   paspoort, de details van een fase). .kv is één paar, het label klein
   boven de waarde: zo gebruikt alle bestaande inhoud het, meestal in een
   raster van een paar kolommen naast elkaar. */
.v-kv { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: 8px 16px; margin: 0; font-size: var(--fs-5); line-height: var(--lh-5); }
.v-kv .k, .v-kv dt { color: var(--c-text-2); }
.v-kv .v, .v-kv dd { margin: 0; color: var(--c-text); min-width: 0; overflow-wrap: anywhere; }
.kv { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kv .k { font-size: var(--fs-6); line-height: var(--lh-6); color: var(--c-text-3); }
.kv .v { font-size: var(--fs-5); line-height: var(--lh-5); color: var(--c-text); overflow-wrap: anywhere; }

/* ---------- Chip, melding, pop-up (algemene namen) ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--c-line); border-radius: var(--r-full); font-size: var(--fs-6); color: var(--c-text-2); background: var(--c-surface); }
.alert { display: flex; gap: var(--sp-3); padding: 12px 16px; border-radius: var(--r-md); font-size: var(--fs-5); line-height: var(--lh-5); background: var(--st-open-bg); color: var(--c-text); }
.alert-info { background: var(--st-bezig-bg); }
.alert-warning { background: var(--st-wacht-bg); }
.alert-error, .alert-danger { background: var(--st-blok-bg); color: var(--st-blok-fg); }
.alert-success { background: var(--st-klaar-bg); }

/* ---------- §2 Lege staat: wat ontbreekt, wanneer het komt, hooguit één actie ---------- */
.empty-state, .v-leeg {
  border: 1px dashed var(--c-line-strong); border-radius: var(--r-lg); padding: 32px 24px;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); text-align: center;
}
.v-leeg-icoon { width: 40px; height: 40px; border-radius: 50%; background: var(--c-primary-tint); color: var(--c-primary); display: flex; align-items: center; justify-content: center; }
.v-leeg-titel { font-size: var(--fs-4); line-height: var(--lh-4); font-weight: var(--fw-semibold); }
.v-leeg-tekst { font-size: var(--fs-5); line-height: var(--lh-5); color: var(--c-text-2); max-width: 360px; }

/* ---------- §2 Laadstaat: grijze vlakken in de maten van de inhoud, geen spinner ---------- */
.v-laad { display: block; background: var(--c-line-soft); border-radius: 4px; height: 12px; }
.v-laad--rij { height: 48px; border-radius: 0; background: none; border-bottom: 1px solid var(--c-line-soft); position: relative; }
.v-laad--rij::after { content: ''; position: absolute; left: 16px; top: 18px; width: 60%; height: 12px; border-radius: 4px; background: var(--c-line-soft); }
.v-laad--vlak { border-radius: 0; }

/* ---------- §2 Slotregel: waarom iets niet kan en wie het wel kan ---------- */
.v-slot { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-6); line-height: var(--lh-6); color: var(--c-text-2); }
.v-slot svg { flex: none; color: var(--c-text-3); margin-top: 0; }

/* ---------- §2 Navigatielint: de secties van één object ---------- */
.v-lint { display: flex; align-items: center; gap: var(--sp-4); height: 48px; padding: 0 var(--rand); background: var(--c-surface); border-bottom: 1px solid var(--c-line); overflow-x: auto; scrollbar-width: none; }
.v-lint-groep { display: flex; align-items: stretch; height: 100%; }
/* De tweede groep (Documenten … Instellingen) staat tegen de rechterrand, met
   de scheidingsstreep ervoor. Op een smal scherm schuift het lint door en is er
   geen ruimte over: dan staat de groep gewoon achter de eerste. */
.v-lint-scheiding { width: 1px; height: 24px; background: var(--c-line); flex: none; margin-left: auto; }
.v-lint-scheiding ~ .v-lint-rechts { margin-left: 0; }
.v-lint a {
  display: flex; align-items: center; height: 100%; padding: 0 16px; margin-bottom: -1px;
  border-bottom: 2px solid transparent; color: var(--c-text-2); font-size: var(--fs-5); text-decoration: none; white-space: nowrap;
}
.v-lint a:hover { color: var(--c-primary); }
.v-lint a[aria-current="page"] { color: var(--c-primary); font-weight: var(--fw-semibold); border-bottom-color: var(--c-primary); }
.v-lint-rechts { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); flex: none; }
/* §2 Vaste breedte: elk item neemt de breedte van zijn VETTE tekst in, zodat
   er niets verschuift bij het wisselen. De vette tekst staat onzichtbaar
   onder de gewone (zelfde truc als in de ontwerpen). */
.v-vast { display: inline-grid; }
.v-vast > span { grid-area: 1 / 1; }
.v-vast > span:first-child { font-weight: var(--fw-semibold); visibility: hidden; height: 0; overflow: hidden; }

/* ---------- §2 Tabs: weergaven binnen één blok ---------- */
.v-tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--c-line); overflow-x: auto; scrollbar-width: none; }
.v-tabs a, .v-tabs button {
  display: flex; align-items: center; height: 40px; padding: 0 12px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent;
  background: transparent; color: var(--c-text-2); font-size: var(--fs-5); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.v-tabs a:hover, .v-tabs button:hover { color: var(--c-primary); }
.v-tabs [aria-current="page"], .v-tabs [aria-selected="true"] { color: var(--c-primary); font-weight: var(--fw-semibold); border-bottom-color: var(--c-primary); }

/* ---------- §2 Schakelaar: twee of drie weergaven van dezelfde gegevens ---------- */
.v-schakel, .seg { display: inline-flex; padding: 2px; gap: 2px; border: 1px solid var(--c-line-strong); border-radius: var(--r-md); background: var(--c-surface); }
.v-schakel a, .v-schakel button, .seg a, .seg button, .seg .seg-btn {
  display: flex; align-items: center; height: 34px; padding: 0 14px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--c-text-2); font-size: var(--fs-5); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.v-schakel [aria-pressed="true"], .v-schakel [aria-current="page"], .seg .on, .seg .aan, .seg [aria-pressed="true"] {
  background: var(--c-primary-soft); color: var(--c-primary); font-weight: var(--fw-semibold);
}

/* ---------- Aan/uit-schakelaar: iets meenemen of niet (o.aanuit) ----------
   Een echt aankruisvakje met role="switch" eronder, zodat toetsenbord en
   schermlezer het gewoon kennen; wat je ziet is de baan met het bolletje.
   Aan is navy, net als de knop die aan staat in een schakelaar hierboven.
   Het vakje heeft position:absolute binnen het label, en het label daarom
   position:relative -- anders hangt het onzichtbare vakje aan de pagina en
   schuift een klik het venster weg (zelfde valkuil als .rw-schakel). */
.v-aanuit { position: relative; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; cursor: pointer; font-size: var(--fs-5); line-height: var(--lh-5); color: var(--c-text); }
.v-aanuit[hidden] { display: none; }
.v-aanuit input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.v-aanuit-baan { position: relative; flex: none; width: 34px; height: 20px; border-radius: 10px; background: var(--c-line-strong); transition: background .15s; }
.v-aanuit-baan::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--c-surface); box-shadow: 0 1px 2px rgba(16, 24, 40, .2); transition: left .15s; }
.v-aanuit input:checked + .v-aanuit-baan { background: var(--c-primary); }
.v-aanuit input:checked + .v-aanuit-baan::after { left: 16px; }
.v-aanuit input:focus-visible + .v-aanuit-baan { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.v-aanuit-meta { font-size: var(--fs-6); line-height: var(--lh-6); color: var(--c-text-3); white-space: nowrap; }

/* ---------- Sorteerbare kolomkop: elke tabel in het portaal ----------
   Keuze van Paul (2 okt 2026): geen dicht driehoekje meer in elke kolom. Een kop
   waarop je kunt sorteren draagt een LEEG `<span class="pijl" aria-hidden="true">`,
   en de pagina zet `data-richting="op"` of `"neer"` op de kop waarop gesorteerd
   is. Zonder sortering is het pijltje onzichtbaar; wijs je de kop aan, dan
   verschijnt vaag een dubbel pijltje (hier kun je sorteren). De gesorteerde
   kop wordt donker, met één pijltje omhoog of omlaag -- een dunne lijn, net als
   de andere iconen, getekend als masker in de kleur van de tekst.
   ⚠️ Het pijltje houdt ALTIJD zijn plek (10 + 4 = 14 beeldpunten): de pagina's
   die de kolombreedtes meten rekenen er al mee (`SORTEERPIJL`), en zo
   verspringt er niets als je sorteert. */
table thead th:has(> .pijl) { cursor: pointer; user-select: none; }
table thead th:has(> .pijl):hover, table thead th[data-richting] { color: var(--c-text); }
.pijl {
  --pijl-beide: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9l5-5 5 5M7 15l5 5 5-5'/%3E%3C/svg%3E");
  --pijl-op: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E");
  --pijl-neer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  display: inline-block; width: 10px; height: 10px; margin-left: 4px; vertical-align: -1px;
  background-color: currentColor; opacity: 0; transition: opacity .12s;
  -webkit-mask: var(--pijl-beide) center / contain no-repeat; mask: var(--pijl-beide) center / contain no-repeat;
}
th:hover > .pijl { opacity: .45; }
th[data-richting] > .pijl { opacity: 1; }
th[data-richting="op"] > .pijl { -webkit-mask-image: var(--pijl-op); mask-image: var(--pijl-op); }
th[data-richting="neer"] > .pijl { -webkit-mask-image: var(--pijl-neer); mask-image: var(--pijl-neer); }

/* ---------- Kengetaltegels (Start, klant, project) ---------- */
.v-tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-4); }
.v-tegel, .kpi { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); text-decoration: none; color: var(--c-text); min-width: 0; }
a.v-tegel:hover { background: var(--c-primary-tint); color: var(--c-text); }
.v-tegel-waarde, .kpi-val { font-size: var(--fs-1); line-height: var(--lh-1); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.v-tegel-label, .kpi-lab { font-size: var(--fs-6); line-height: var(--lh-6); color: var(--c-text-2); }

/* ---------- Blokken naast elkaar (Start, klant, projectgebied) ----------
   Twee kolommen op desktop; een blok met .v-breed beslaat de hele rij. */
.v-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); align-items: start; }
.v-raster > .v-breed { grid-column: 1 / -1; }
.v-blok--lijst { padding: 0; overflow: hidden; }
.v-blok--lijst > .v-blok-kop { padding: 20px 24px 12px; margin: 0; }
.v-blok--lijst > .v-blok-inhoud { padding: 0 24px 20px; }
.v-blok-link { flex: none; font-size: var(--fs-5); line-height: var(--lh-5); color: var(--c-primary); text-decoration: none; }
.v-blok-link:hover { text-decoration: underline; }

/* ---------- Filterbalk boven een lijst (Projecten, Projectgebieden, Klanten, Offertes) ---------- */
.v-filterbalk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: var(--sp-4); }
.v-filter-zoek { flex: 1 1 260px; max-width: 420px; }
.v-filter-keuze { width: auto; min-width: 150px; flex: 0 1 auto; }
.v-blok-inhoud > .v-filterbalk:last-child { margin-bottom: 0; }
.v-filter-telling { margin-left: auto; font-size: var(--fs-6); line-height: var(--lh-6); color: var(--c-text-3); white-space: nowrap; }
.v-lijsttabel tbody tr[data-href] { cursor: pointer; }
.v-cel-link { display: block; color: var(--c-text); font-weight: var(--fw-semibold); text-decoration: none; }
.v-cel-link:hover { color: var(--c-primary); }
/* Een hele regel als link, niet vet (Projecten, BuitenApp; B200). */
.v-cel-link--gewoon { font-weight: var(--fw-regular); }
.v-cel-sub { display: block; font-size: var(--fs-6); line-height: var(--lh-6); color: var(--c-text-3); }

/* ---------- Kaartjes (Projectgebieden): één per object, in een raster ---------- */
.v-weergavebalk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.v-kaartjes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-4); }
.v-kaartje { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 16px; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); color: var(--c-text); text-decoration: none; }
a.v-kaartje:hover { background: var(--c-primary-tint); color: var(--c-text); }
.v-kaartje-label { font-size: var(--fs-6); line-height: var(--lh-6); color: var(--c-text-2); }
.v-kaartje-titel { font-size: var(--fs-3); line-height: var(--lh-3); font-weight: var(--fw-semibold); }
.v-kaartje-meta { font-size: var(--fs-6); line-height: var(--lh-6); color: var(--c-text-2); }
.v-kaartje-statussen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
/* ---------- Projectgebied: producten links, het gebied rechts ---------- */
.gb-overzicht { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.gb-rechts { min-width: 0; }
.v-rij--stil { min-height: 60px; }
.gb-product-leeg { font-weight: var(--fw-regular); color: var(--c-text-2); }
.gb-actie { margin: 0; }
/* Projectgebied › Instellingen: archiveren of verwijderen, per handeling een knop
   met de reden ernaast als hij niet kan (tot dan op de kaart van Projectgebieden). */
.gb-beheer { display: flex; flex-direction: column; gap: var(--sp-3); }
.gb-beheer-regel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.gb-beheer-regel form { margin: 0; }
.gb-beheer-regel .v-hulp { max-width: 60ch; }
.gb-melding { margin: var(--sp-4) 0; }
@media (max-width: 1023px) { .gb-overzicht { grid-template-columns: minmax(0, 1fr); } }
/* Het label van een veld is tekst, geen uitgeschakelde kleur (DESIGN.md §2:
   14/600); gebiedsverkenner.css gaf het grijs 400, contrast 2,6. */
.v-inhoud .gv-veld-label { color: var(--c-text); font-weight: var(--fw-semibold); }


/* ---------- §2 Kaartkader: kop met titel en knoppen, de kaart tot de randen ----------
   o.kaartkader() in onderdelen.html (Projectpagina.dc.html). De hoogte van de
   kaart zet de pagina met --kaart-h op het kader; het kaartvlak
   (.v-kaartkader-kaart) vult het lijf, zodat het vanzelf meegroeit als het
   kader groot wordt. */
.v-kaartkader { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.v-kaartkader-kop { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; padding: 12px 12px 12px 24px; background: var(--c-surface); border-bottom: 1px solid var(--c-line-soft); }
.v-kaartkader-knoppen { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; }
/* Een knop naast Vergroten is even hoog als Vergroten, ook als hij btn-sm is
   (keuze van Paul, B171): twee hoogtes in één kop staan rommelig. */
.v-kaartkader-knoppen > .btn { height: var(--h-md); }
/* De titel neemt wat er over is, maar zakt pas onder de knoppen als hij minder
   dan 240 zou krijgen: zo blijft Vergroten naast een lange ondertitel staan. */
.v-kaartkader-kop > .v-blok-koptekst { flex: 1 1 240px; }
.v-kaartkader-balk { flex: none; border-bottom: 1px solid var(--c-line-soft); }
/* Een balk waarin alles verborgen is (tekenknoppen buiten het tekenen) valt weg, net als de voet. */
.v-kaartkader-balk:not(:has(> :not([hidden]))) { display: none; }
.v-kaartkader-voet { flex: none; border-top: 1px solid var(--c-line-soft); }
.v-kaartkader-voet:not(:has(> :not([hidden]))) { display: none; }
.v-kaartkader-lijf { position: relative; height: var(--kaart-h, 360px); background: var(--c-canvas); }
.v-kaartkader-kaart { position: absolute; inset: 0; }

/* ---------- Een vergrote kaart: over de hele pagina, met bovenin alleen een kop ----------
   Keuze van Paul (29 sep 2026): ook over het menu en de balk met het
   kruimelpad, en op de telefoon over de onderbalk. GribKaart
   (static/js/shared/grib-kaart.js) zet .gk-groot op wat er groot wordt en meet
   de kop (--kaart-kop). Een kaartkader gaat in zijn geheel, met zijn eigen kop
   als balk; een andere kaart krijgt een kop van het script (.gk-grootkop).
   Laag 35: boven de balk (26) en de onderbalk (30), onder het paspoort dat van
   rechts inschuift (38) en de pop-ups (50).
   ⚠️ Alles begint met `body.kaart-groot`: de bladen en <style>-blokken van een
   pagina laden NA dit blad, en een regel daar die de kaart een plaats, marge
   of rand geeft (een marge op Tijdlijn, de rand op Resultaten) won van één
   klasse -- dan
   bleef de kaart staan, of liet hij een streep van de pagina zien.
   ⚠️ De twee !important blijven: een paar kaarten hebben hun hoogte in hun
   style-attribuut (PvE, Tijdlijn, Projectgebied), en alleen zo vullen ze het
   scherm. */
body.kaart-groot .gk-groot {
  position: fixed; z-index: 35; top: var(--kaart-kop, 0px); left: 0; right: 0; bottom: 0;
  width: auto !important; height: auto !important; margin: 0; border-width: 0; border-radius: 0;
  background: var(--c-canvas);
}
body.kaart-groot .v-kaartkader.gk-groot { top: 0; }
body.kaart-groot .v-kaartkader.gk-groot > .v-kaartkader-lijf { flex: 1 1 auto; height: auto; min-height: 0; }
/* Een kader dat de pagina meegeeft (maximaliseerDoel): wat er naast de kaart
   in staat houdt zijn hoogte, de kaart neemt de rest. */
body.kaart-groot .gk-groot:not(.v-kaartkader):has(> .gk-groot-kaart) { display: flex; flex-direction: column; }
body.kaart-groot .gk-groot > .gk-groot-kaart { flex: 1 1 auto; min-height: 0; height: auto !important; }
body.kaart-groot .gk-groot [data-gk-groot] { display: none; }
.gk-grootkop { position: fixed; z-index: 35; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 24px; background: var(--c-surface); border-bottom: 1px solid var(--c-line); }
/* Het paspoort begint onder die kop, ook onder die van de 3D-kaart. */
body.kaart-groot .zijpaspoort { top: var(--kaart-kop, 0px); }
body.o3d-open .zijpaspoort { top: var(--o3d-kop, 0px); }

/* ---------- Lijstrij: titel, meta eronder, status rechts (DESIGN.md §2) ---------- */
.v-rijen { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-line-soft); }
.v-rij { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 10px 24px; border-bottom: 1px solid var(--c-line-soft); color: var(--c-text); text-decoration: none; }
.v-rijen > li:last-child > .v-rij { border-bottom: 0; }
a.v-rij:hover { background: var(--c-primary-soft); color: var(--c-text); }
.v-rij-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v-rij-titel { font-size: var(--fs-5); line-height: var(--lh-5); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-rij-meta { font-size: var(--fs-6); line-height: var(--lh-6); color: var(--c-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-rij-rechts { display: flex; align-items: center; gap: 8px; flex: none; }
.v-rijen-leeg { margin: 0; padding: 16px 24px 20px; border-top: 1px solid var(--c-line-soft); font-size: var(--fs-5); line-height: var(--lh-5); color: var(--c-text-2); }
.v-tegel-sub { font-size: var(--fs-6); line-height: var(--lh-6); color: var(--c-text-3); }

/* ===================================================================
   §3 HET RAAMWERK
   =================================================================== */
.v-app { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }
.v-rechts { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.v-hoofd { flex: 1; min-height: 0; overflow-y: auto; position: relative; }

/* ---------- §3.1 Hoofdmenu: 240 breed, in te klappen tot 80 ---------- */
.v-menu { width: var(--menu-w); flex: none; background: var(--c-surface); border-right: 1px solid var(--c-line); display: flex; flex-direction: column; }
.v-menu-logo { height: 64px; flex: none; display: flex; align-items: center; padding: 0 16px; border-bottom: 1px solid var(--c-line-soft); }
.v-menu-logo img { display: block; width: auto; }
.v-menu-logo .v-logo-vol { height: 34px; }
.v-menu-logo .v-logo-merk { height: 28px; display: none; }
.v-menu nav { flex: 1; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 2px; padding: 12px; }
.v-menu-kop { margin-top: 8px; padding: 10px 10px 4px; border-top: 1px solid var(--c-line-soft); font-size: var(--fs-6); line-height: var(--lh-6); font-weight: var(--fw-semibold); color: var(--c-text-3); }
.v-menu-item {
  display: flex; align-items: center; gap: 12px; height: 40px; flex: none; padding: 0 10px; border-radius: var(--r-md);
  color: var(--c-text-2); font-size: var(--fs-5); line-height: 16px; text-decoration: none; white-space: nowrap;
}
.v-menu-item:hover { background: var(--c-primary-tint); color: var(--c-text); }
.v-menu-item[aria-current="page"] { background: var(--c-primary-soft); color: var(--c-primary); font-weight: var(--fw-semibold); }
.v-menu-item svg { flex: none; }
.v-menu-item .v-kort { display: none; }
.v-menu-inklap { height: 40px; margin: 0 12px 8px; display: flex; align-items: center; gap: 12px; padding: 0 10px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--c-text-2); font-size: var(--fs-5); cursor: pointer; }
.v-menu-inklap:hover { background: var(--c-primary-tint); }
.v-menu-inklap .v-uitklap-ic { display: none; }
.v-menu-wie { height: 64px; flex: none; border-top: 1px solid var(--c-line-soft); padding: 0 16px; display: flex; align-items: center; gap: 10px; }
.v-avatar, .avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--c-primary-soft); color: var(--c-primary); font-size: var(--fs-6); font-weight: var(--fw-semibold); display: inline-flex; align-items: center; justify-content: center; }
.v-menu-wie-tekst { display: flex; flex-direction: column; min-width: 0; }
.v-menu-wie-naam { font-size: var(--fs-5); line-height: var(--lh-5); font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-menu-wie-rol { font-size: var(--fs-6); line-height: var(--lh-6); color: var(--c-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* De smalle strook van 80 px: ingeklapt op desktop, altijd op tablet. */
.v-smal .v-menu { width: var(--menu-w-smal); }
.v-smal .v-menu-logo { justify-content: center; padding: 0 12px; }
.v-smal .v-menu-logo .v-logo-vol { display: none; }
.v-smal .v-menu-logo .v-logo-merk { display: block; }
.v-smal .v-menu nav { padding: 12px 4px; }
.v-smal .v-menu-kop { font-size: 0; padding: 0; margin: 8px 12px 4px; }
.v-smal .v-menu-item { flex-direction: column; justify-content: center; gap: 4px; height: 60px; padding: 0; font-size: var(--fs-6); white-space: normal; text-align: center; }
.v-smal .v-menu-item .v-lang { display: none; }
.v-smal .v-menu-item .v-kort { display: inline; }
.v-smal .v-menu-inklap { justify-content: center; }
.v-smal .v-menu-inklap span, .v-smal .v-menu-inklap .v-inklap-ic { display: none; }
.v-smal .v-menu-inklap .v-uitklap-ic { display: inline; }
.v-smal .v-menu-wie { justify-content: center; padding: 0 12px; }
.v-smal .v-menu-wie-tekst { display: none; }

/* ---------- §3.1 Contextbalk van 56: kruimelpad links, klantkeuze, Uitleg en Zoeken rechts ---------- */
.v-balk { height: var(--balk-h); flex: none; position: relative; z-index: 26; background: var(--c-surface); border-bottom: 1px solid var(--c-line); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 var(--rand); }
.v-kruimels { display: flex; align-items: center; gap: 2px; min-width: 0; }
.v-kruimel { display: flex; align-items: center; min-width: 0; position: relative; }
.v-kruimel > a, .v-kruimel > span {
  height: 32px; padding: 0 6px; border-radius: var(--r-sm); display: inline-flex; align-items: center;
  color: var(--c-text-2); font-size: var(--fs-5); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px;
}
.v-kruimel > a:hover { background: var(--c-primary-tint); color: var(--c-text); }
.v-kruimel [aria-current="page"] { color: var(--c-text); font-weight: var(--fw-semibold); }
.v-kruimel-scheiding { flex: none; margin: 0 4px; color: var(--c-disabled); }
.v-kruimel-wissel { height: 28px; width: 24px; flex: none; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--c-text-2); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.v-kruimel-wissel:hover, .v-kruimel-wissel[aria-expanded="true"] { background: var(--c-primary-tint); }
.v-balk-rechts { display: flex; align-items: center; gap: 8px; flex: none; }
.v-balkknop { height: 36px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid var(--c-line-strong); border-radius: var(--r-md); background: var(--c-surface); color: var(--c-text-2); font-size: var(--fs-5); cursor: pointer; white-space: nowrap; text-decoration: none; }
.v-balkknop:hover, .v-balkknop[aria-expanded="true"] { background: var(--c-primary-tint); }
.v-balkknop--uitleg { color: var(--c-primary); }
.v-vraagteken { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid currentColor; font-size: 12px; line-height: 1; font-weight: var(--fw-semibold); display: inline-flex; align-items: center; justify-content: center; }
.v-balkknop-label { color: var(--c-text-3); }
/* De klantkeuze krimpt niet: anders schuift zijn knop over Uitleg heen. De
   rolkeuze is een testhulp tot er echte gebruikers zijn, dus bescheiden. */
.v-balkkeuze { flex: none; }
.v-rolkeuze { width: 180px; }
/* Rollen én medewerkers (B201): de open lijst is hoger dan de gewone, zodat
   onder de rollen ook het begin van de medewerkers in beeld is. */
.v-rolkeuze .v-kies-opties { max-height: 412px; }
/* Meekijken als een medewerker (B201, met inloggen): een oogje vóór de naam,
   in de kleur van 'wacht', zodat zichtbaar is dat opslaan nu niet kan. */
.v-rolkeuze--meekijken .v-kies-knop { border-color: var(--st-wacht-fg); background: var(--st-wacht-bg); color: var(--st-wacht-fg); }
.v-rolkeuze--meekijken .v-kies-pijl { color: var(--st-wacht-fg); }
.v-rolkeuze--meekijken .v-kies-knop::before {
  content: ''; flex: none; width: 16px; height: 16px; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Telefoon: één terugknop en een zoekknop. */
.v-balk-terug { display: none; height: 44px; align-items: center; gap: 4px; padding: 0 8px 0 4px; border-radius: var(--r-md); color: var(--c-primary); font-size: var(--fs-5); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ---------- §2 Uitklaplijst (kruimelwisselaar, klantkeuze, producten in dit gebied) ---------- */
.v-uitklap { position: absolute; top: 40px; left: 0; z-index: 30; width: 300px; max-width: calc(100vw - 32px); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--shadow-overlay); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.v-uitklap--rechts { left: auto; right: 0; top: 44px; }
.v-uitklap--breed { width: 380px; }
/* Een lange lijst (de acht producten van een gebied, B161) schuift binnen het
   venster in plaats van onder de rand van het scherm te verdwijnen. */
.v-uitklap--breed { max-height: calc(100vh - 72px); overflow-y: auto; }
.v-uitklap-titel { padding: 8px 10px 6px; font-size: var(--fs-6); line-height: var(--lh-6); font-weight: var(--fw-semibold); color: var(--c-text-3); }
.v-uitklap-optie { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--c-text); text-align: left; text-decoration: none; cursor: pointer; }
.v-uitklap-optie:hover { background: var(--c-primary-tint); color: var(--c-text); }
.v-uitklap-optie[aria-current="true"] { background: var(--c-primary-soft); }
.v-uitklap-optie-naam { display: block; font-size: var(--fs-5); line-height: var(--lh-5); }
.v-uitklap-optie[aria-current="true"] .v-uitklap-optie-naam { font-weight: var(--fw-semibold); }
.v-uitklap-optie-meta { display: block; font-size: var(--fs-6); line-height: var(--lh-6); color: var(--c-text-3); }
/* Een regel die (nog) geen link is -- een product dat er in dit gebied niet
   is, met Starten, Aanvragen of Toevoegen ernaast (B161). */
.v-uitklap-optie--erbij { cursor: default; }
.v-uitklap-optie--erbij:hover { background: transparent; }
.v-uitklap-optie--erbij .v-uitklap-optie-naam { color: var(--c-text-2); }
.v-uitklap-optie--erbij form { margin: 0; flex: none; }
.v-uitklap-optie--erbij > .btn { flex: none; }
.v-uitklap-alles { height: 40px; margin-top: 4px; border: 0; border-top: 1px solid var(--c-line-soft); border-radius: 0 0 var(--r-md) var(--r-md); background: transparent; color: var(--c-primary); font-size: var(--fs-5); display: flex; align-items: center; padding: 0 10px; text-decoration: none; }

/* ---------- §3.0 Paginakop van de menupagina's: zonder kader, op het canvas ---------- */
.v-paginakop { padding: 28px var(--rand) 0; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.v-paginakop-tekst { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 240px; }
.v-paginakop h1 { font-size: var(--fs-2); line-height: var(--lh-2); }
.v-paginakop-sub { font-size: var(--fs-5); line-height: var(--lh-5); color: var(--c-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-paginakop-acties { display: flex; gap: 8px; flex: none; }
/* Het eerste kader staat 24 px onder de kop; de inhoud loopt over de volle breedte. */
.v-inhoud { padding: 24px var(--rand) 48px; display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }

/* ---------- §3.1 Kop van een object (klant, projectgebied, project): wit, met het lint eronder ---------- */
.v-objectkop { background: var(--c-surface); border-bottom: 1px solid var(--c-line); position: relative; z-index: 20; }
.v-objectkop-binnen { padding: 28px var(--rand) 24px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.v-objectkop-label { font-size: var(--fs-6); line-height: var(--lh-6); font-weight: var(--fw-semibold); color: var(--c-text-3); }
.v-objectkop h1 { font-size: var(--fs-2); line-height: var(--lh-2); }
.v-objectkop-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 4px; font-size: var(--fs-5); line-height: var(--lh-5); color: var(--c-text-2); }
.v-objectkop + .v-lint { position: sticky; top: 0; z-index: 19; }

/* ===================================================================
   LAGEN BOVEN DE PAGINA: zijpaneel, dialoog, melding, uitklap
   =================================================================== */
/* §2 Zijpaneel: 400 breed, onder de contextbalk, kop blijft staan. */
.v-paneel { position: fixed; top: var(--balk-h); right: 0; bottom: 0; z-index: 40; width: var(--paneel-w); max-width: 100vw; background: var(--c-surface); border-left: 1px solid var(--c-line); box-shadow: var(--shadow-overlay); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 200ms ease-out; visibility: hidden; }
.v-paneel.open { transform: none; visibility: visible; }
.v-paneel-kop { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 16px 16px 24px; border-bottom: 1px solid var(--c-line-soft); }
.v-paneel-kop h2 { font-size: var(--fs-3); line-height: var(--lh-3); }
.v-paneel-soort { font-size: var(--fs-6); line-height: var(--lh-6); font-weight: var(--fw-semibold); color: var(--c-text-3); }
.v-paneel-sprong { flex: none; display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 24px; border-bottom: 1px solid var(--c-line-soft); }
.v-paneel-lijf { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 24px 24px; font-size: var(--fs-4); line-height: var(--lh-4); }
.v-paneel-voet { flex: none; display: flex; justify-content: flex-end; gap: 8px; padding: 12px 24px; border-top: 1px solid var(--c-line-soft); }
@media (prefers-reduced-motion: reduce) { .v-paneel { transition: none; } }

/* Dialoog van 480: Annuleren plus één primaire knop (KNOPPEN.md). */
.v-scherm { position: fixed; inset: 0; z-index: 50; background: rgba(22, 33, 59, .32); display: flex; align-items: center; justify-content: center; padding: 16px; }
.v-dialoog { width: var(--dialoog-w); max-width: 100%; max-height: calc(100vh - 32px); background: var(--c-surface); border-radius: var(--r-lg); box-shadow: var(--shadow-overlay); display: flex; flex-direction: column; }
.v-dialoog-kop { padding: 20px 24px 8px; font-size: var(--fs-3); line-height: var(--lh-3); font-weight: var(--fw-semibold); }
.v-dialoog-lijf { padding: 0 24px 16px; overflow-y: auto; font-size: var(--fs-4); line-height: var(--lh-4); color: var(--c-text-2); }
.v-dialoog-voet { padding: 12px 24px 20px; display: flex; justify-content: flex-end; gap: 8px; }

/* De oude pop-up (.modal) krijgt dezelfde vorm: die maken scripts zelf aan. */
.modal-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(22, 33, 59, .32); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { width: var(--dialoog-w); max-width: 100%; max-height: calc(100vh - 32px); background: var(--c-surface); border-radius: var(--r-lg); box-shadow: var(--shadow-overlay); display: flex; flex-direction: column; overflow: hidden; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px 8px; font-size: var(--fs-3); line-height: var(--lh-3); font-weight: var(--fw-semibold); }
.modal-body { padding: 0 24px 16px; overflow-y: auto; }
.modal-foot { padding: 12px 24px 20px; display: flex; justify-content: flex-end; gap: 8px; }
.sluit-kruis { width: 40px; height: 40px; flex: none; border: 0; border-radius: var(--r-md); background: transparent; color: var(--c-text-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; }
.sluit-kruis:hover { background: var(--c-primary-tint); }

/* Melding: rechtsonder, na ± 2,5 s weg (KNOPPEN.md). */
.v-meldingen { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.v-melding { pointer-events: auto; max-width: 360px; padding: 12px 16px; border-radius: var(--r-md); background: var(--c-text); color: #FFFFFF; font-size: var(--fs-5); line-height: var(--lh-5); box-shadow: var(--shadow-overlay); }
.v-melding--fout { background: var(--st-blok-fg); }

/* ---------- Wie je bent, onderaan het menu: opent je instellingen ---------- */
button.v-menu-wie { width: 100%; border: 0; border-top: 1px solid var(--c-line-soft); background: transparent; text-align: left; cursor: pointer; color: var(--c-text); }
button.v-menu-wie:hover { background: var(--c-primary-tint); }
.v-keuzegroep { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.v-keuzegroep legend { padding: 0; margin-bottom: 4px; }

/* ---------- De Uitleg: tekst, wat je kunt doen, begrippen ---------- */
.v-uitleg { display: flex; flex-direction: column; gap: var(--sp-3); }
.v-uitleg h3 { margin-top: var(--sp-3); font-size: var(--fs-5); line-height: var(--lh-5); }
.v-uitleg ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.v-uitleg dl { margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.v-uitleg dt { font-weight: var(--fw-semibold); }
.v-uitleg dd { margin: 0; color: var(--c-text-2); }

/* ---------- Zoeken: een venster boven de pagina (Shell.dc.html) ---------- */
.v-zoek { width: 640px; max-width: 100%; align-self: flex-start; margin-top: 64px; background: var(--c-surface); border-radius: var(--r-lg); box-shadow: var(--shadow-overlay); display: flex; flex-direction: column; max-height: calc(100vh - 128px); }
.v-zoek-veld { display: flex; align-items: center; gap: var(--sp-3); padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--c-line-soft); color: var(--c-text-3); }
.v-zoek-invoer { flex: 1; min-width: 0; height: 48px; border: 0; background: transparent; font-size: var(--fs-4); color: var(--c-text); }
.v-zoek-invoer:focus { outline: none; }
.v-zoek-uitkomst { overflow-y: auto; padding: 8px; }
.v-zoek-groep { padding: 8px 10px 4px; font-size: var(--fs-6); line-height: var(--lh-6); font-weight: var(--fw-semibold); color: var(--c-text-3); }
.v-zoek-leeg { padding: 24px 16px; text-align: center; font-size: var(--fs-5); color: var(--c-text-2); }

/* ---------- Admin › Rollen en rechten ---------- */
.v-matrix th.v-matrix-groep { text-align: center; border-left: 1px solid var(--c-line); }
.v-matrix th.v-matrix-rol { text-align: center; white-space: normal; min-width: 88px; vertical-align: bottom; padding-top: 8px; padding-bottom: 8px; height: auto; }
.v-matrix td:first-child { position: sticky; left: 0; background: var(--c-surface); min-width: 240px; }
.v-matrix tr.v-matrix-kop td { height: 40px; background: var(--c-canvas); font-size: var(--fs-6); font-weight: var(--fw-semibold); color: var(--c-text-2); }
.v-matrix-cel { text-align: center; }
/* Admin › Rollen en rechten (B198): het vinkje vult de cel, zodat de hele cel klikt. */
.v-matrix td.v-matrix-cel:has(.v-matrix-klik) { padding: 0; }
.v-matrix-klik { display: flex; align-items: center; justify-content: center; min-height: 44px; cursor: pointer; }
.v-matrix-klik:hover { background: var(--c-primary-tint); }
.v-matrix-vink { width: 20px; height: 20px; margin: 0; accent-color: var(--c-primary); cursor: pointer; }
.v-ja { color: var(--st-klaar-fg); }
.v-nee { color: var(--c-disabled); }
.v-rolkaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-4); }
.v-rechtenlijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-5); line-height: var(--lh-5); }
.v-rechtenlijst li { display: flex; align-items: flex-start; gap: var(--sp-2); }
.v-rechtenlijst svg { color: var(--st-klaar-fg); margin-top: 2px; }

/* ---------- Telefoon: onderbalk met vijf items en Meer ---------- */
.v-tabbalk { display: none; }

/* ===================================================================
   BREEKPUNTEN 640 · 1024 · 1440 (DESIGN.md §1.6)
   =================================================================== */
@media (min-width: 1440px) {
  .v-inhoud--lees { max-width: 1440px; }
}
@media (max-width: 1023px) {
  /* Tablet: altijd de strook van 80, niet in te klappen. */
  .v-menu-inklap { display: none; }
  .v-raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
  .v-menu { display: none; }
  .v-balk { padding: 0 4px 0 8px; gap: 8px; }
  .v-kruimels, .v-balkknop-tekst, .v-balkknop--uitleg { display: none; }
  .v-balk-terug { display: inline-flex; }
  .v-balk-rechts { gap: 4px; min-width: 0; }
  .v-rolkeuze { width: 116px; }
  .v-balkkeuze .v-balkknop-label { display: none; }
  .v-balkkeuze-naam { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .v-balk-merk { display: block; }
  .v-paneel { width: 100vw; top: 0; }
  .v-zoek { margin-top: 0; border-radius: 0; height: 100%; max-height: none; }
  .v-scherm:has(.v-zoek) { padding: 0; }
  .v-paginakop { padding-top: 16px; }
  .v-paginakop-acties { width: 100%; }
  .v-objectkop-binnen { padding: 16px; }
  .v-inhoud { padding: 16px 16px 96px; }
  .v-tabbalk {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: 64px;
    background: var(--c-surface); border-top: 1px solid var(--c-line); padding-bottom: env(safe-area-inset-bottom);
  }
  .v-tabbalk a, .v-tabbalk button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 0; background: transparent; color: var(--c-text-2); font-size: var(--fs-6); text-decoration: none; }
  .v-tabbalk [aria-current="page"] { color: var(--c-primary); font-weight: var(--fw-semibold); }
  .grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns: minmax(0, 1fr); }
  .v-rij { padding: 10px 16px; }
  .v-blok--lijst > .v-blok-kop { padding: 16px 16px 12px; }
  .v-blok--lijst > .v-blok-inhoud { padding: 0 16px 16px; }
  .v-kaartkader-kop, .gk-grootkop { padding: 8px 8px 8px 16px; }
  .v-rijen-leeg { padding: 16px; }
}
@media (min-width: 640px) {
  .v-balk-merk { display: none; }
}
@media (pointer: coarse) {
  .v-menu-item { min-height: 44px; }
}

/* Verborgen is verborgen: staat als laatste, zodat hij wint van .flex en
   .grid hierboven zonder !important (PROJECTPAGINA.md §6). */
[hidden] { display: none; }

/* Een e-mailadres blijft heel; past de tabel niet, dan schuift hij binnen zijn kader. */
.v-breek { word-break: normal; white-space: nowrap; }