/* DataGrip · het venster met voorbeelddashboards
   Gedeeld door de twee pagina's achter de QR-codes: mkb.html en partners.html. Het is het venster van de
   homepage (site-definitief, style.css, "Wat je krijgt"), overgenomen met dezelfde maten en kleuren.
   Elke klasse draagt het voorvoegsel vn-, omdat basis.css nog een ouder dashboard kent met dezelfde namen.

   Wat hier staat:
   1. de keuze: een rij tabbladen boven een toneel, met per tabblad een paneel
   2. de conclusie in gewone taal, met het lijntje naar het kerncijfer dat haar bewijst
   3. het dashboard zelf: titel, periode, kerncijfers en de tegels met een grafiek of tabel
   4. het venster met zijbalk, vanaf 1180 pixels (.vn--venster)
   5. de andere beelden van de homepage die in het toneel kunnen staan: het overzicht van het eerste
      scherm, het Excel-blad, het ene cijfer en de rechte lijn (als schema: systemen, platform, stuurinformatie)
   6. zonder script, minder beweging, contrastmodus en afdrukken

   Het gedrag staat in venster.js. Zonder script staan alle panelen onder elkaar, elk met zijn eigen kop.
   Alle cijfers zijn voorbeelddata en dragen het merkje uit de huisstijl (.merkje). */

:root {
  /* de maten en papierkleuren van de homepage die basis.css niet kent */
  --papier: #f0ede6;        /* warm wit papier: het voorstel */
  --papier-oud: #cdd1cd;    /* grijs papier: het Excel-blad */
  --inkt: #001620;
  --inkt-zacht: #44545b;
  --inkt-oud: #27343b;
  --inhoud: min(100vw - 2 * var(--marge), var(--wrap));
  --kop-gat: clamp(24px, 4.2vw, 60px);      /* van een sectiekop naar wat eronder staat */
  --blok-gat: clamp(22px, 3vw, 34px);       /* tussen twee blokken binnen een sectie */
  --kolom-gat: clamp(48px, 7vw, 116px);     /* tussen de twee kolommen van een sectie */
}

/* ===== 1 · De keuze: tabbladen boven een toneel =====
   --vn-vlak is het vlak waar het venster op ligt (het label van de conclusie dekt daarmee de lijn af),
   --vn-vulling de vulling van een dashboard, --vn-spoor de baan achter een balkje.
   Ligt het venster op het verhoogde vlak, dan draait .vn--op-vlak die drie om. */
.vn {
  --vn-vlak: var(--bg);
  --vn-vulling: var(--bg-raised);
  --vn-spoor: var(--bg);
  --rand: 1.5px;            /* rand van het dashboard en van het lijntje */
  --bord-pad: 14px;         /* binnenmarge van het dashboard */
  --bord-kop: 46px;         /* hoogte van titel en periode */
  --bord-gat: 12px;         /* ruimte tussen de tegels */
  --dash-gat: 16px;         /* ruimte tussen conclusie en dashboard */
  --wijs-in: 22px;          /* zover staat het lijntje van de rechterrand van de tegel */
  --wijs-x: calc(var(--rand) + var(--bord-pad) + var(--wijs-in));
  --wijs-diep: calc(var(--dash-gat) + var(--rand) + var(--bord-pad) + var(--bord-kop) + var(--bord-gat));
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--dash-gat);
}
.vn--op-vlak { --vn-vlak: var(--bg-raised); --vn-vulling: var(--bg); --vn-spoor: var(--bg-raised); }

/* de tabbladen: vier korte namen op een rij, of zes keuzes in een rooster */
.vn-kies { min-width: 0; margin-bottom: 4px; }
.vn-tabs { display: grid; gap: 6px; }
.vn-tabs--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vn-tabs--zes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vn-tab {
  position: relative; display: block; width: 100%; min-height: 48px; padding: 0 4px;
  background: none; border: 1.5px solid var(--line-strong); border-radius: var(--radius);
  font: inherit; text-align: center; color: var(--text); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.vn-tab-naam { display: block; font-size: .9375rem; font-weight: 600; line-height: 1.25; color: var(--bright); text-wrap: balance; }
.vn-tab-sub { display: none; }
.vn-tab[aria-selected="true"] { border-color: var(--teal); box-shadow: inset 0 -3px 0 var(--teal); }
/* R8:B02 hover alleen bij een muis (was: @media (hover: hover)) */
@media (hover: hover) and (pointer: fine) { .vn-tab:not([aria-selected="true"]):hover { border-color: var(--bright); } }
.vn-tab:active .vn-tab-naam { opacity: .78; }

/* zes keuzes: links uitgelijnd, genummerd zoals de lijst op de flyer. Het nummer staat in een open cirkel
   (de halte van de lijnen op de site). De gekozen keuze krijgt een teal streep, de vulling van het
   dashboard en een gevulde cirkel. */
.vn-tabs--zes .vn-tab { display: flex; flex-direction: column; justify-content: center; min-height: 60px; padding: 9px 28px 10px 14px; text-align: left; }
.vn-tabs--zes .vn-tab-naam { font-size: .875rem; }
.vn-tabs--zes .vn-tab[aria-selected="true"] { background: var(--vn-vulling); box-shadow: inset 4px 0 0 var(--teal); }
.vn-tab-nr {
  position: absolute; right: 7px; top: 7px; display: grid; place-items: center; width: 19px; height: 19px;
  border: 1.5px solid var(--line-strong); border-radius: 50%;
  font-size: 11.5px; font-weight: 650; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums;
}
.vn-tab[aria-selected="true"] .vn-tab-nr { background: var(--teal); border-color: var(--teal); color: #001620; }
@media (max-width: 359px) {
  .vn-tab-naam, .vn-tabs--zes .vn-tab-naam { font-size: .8125rem; }
  .vn-tabs--vier { gap: 4px; }
  .vn-tabs--zes { gap: 6px; }
  .vn-tabs--zes .vn-tab { padding: 8px 25px 9px 11px; }
  .vn-tab-nr { right: 5px; top: 5px; width: 18px; height: 18px; font-size: 11px; }
}
@media (min-width: 700px) {
  .vn-tabs--zes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vn-tabs--zes .vn-tab { justify-content: flex-start; padding: 12px 38px 14px 16px; }
  .vn-tabs--zes .vn-tab-naam { font-size: .9375rem; }
  .vn-tab-nr { right: 10px; top: 10px; width: 21px; height: 21px; font-size: 12px; }
  .vn-tab-sub { display: block; margin-top: 4px; font-size: .8125rem; line-height: 1.38; color: var(--muted); text-wrap: pretty; }
  .vn-tab[aria-selected="true"] .vn-tab-sub { color: var(--text); }
}
@media (min-width: 1180px) {
  .vn-tabs--zes { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .vn-tabs--zes .vn-tab { padding: 13px 34px 15px 16px; }
}
/* R8:A10 de vier tabbladen van het venster op telefoon en tablet alleen met de naam, zoals op de homepage
   (de vraag eronder kwam vanaf 700 pixels mee en maakte de tabbladen ongelijk hoog). De zes keuzes houden hun zin. */
@media (max-width: 1179px) { .vn-tabs--vier .vn-tab-sub { display: none; } }

/* zes keuzes in twee groepen van drie (.vn-tabs--groepen), elk met een label erboven.
   Smal: de twee groepen naast elkaar, elke groep een kolom (de rijen lopen gelijk door het subraster).
   Vanaf 700 pixels: elke groep een rij van drie. Vanaf 1180 pixels: de twee groepen naast elkaar.
   Een groep met .vn-groep--lijn krijgt vanaf 700 pixels achter het label een dunne lijn met een pijlpunt: een planning. */
.vn-tabs--groepen { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto repeat(3, auto); gap: 8px; }
.vn-groep { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; row-gap: 8px; min-width: 0; }
@supports not (grid-template-rows: subgrid) {
  .vn-groep { grid-template-rows: auto repeat(3, minmax(66px, auto)); }
}
.vn-groep-kop { display: flex; align-items: center; gap: 10px; align-self: end; font-size: .8125rem; font-weight: 600; line-height: 1.3; color: var(--muted); white-space: nowrap; }

@media (max-width: 359px) {
  .vn-tabs--groepen, .vn-groep { gap: 6px; row-gap: 6px; }
  .vn-groep-kop { font-size: .75rem; }
}
@media (min-width: 700px) {
  .vn-tabs--groepen { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 16px; }
  .vn-groep { grid-row: auto; grid-template-rows: auto auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .vn-groep-kop { grid-column: 1 / -1; font-size: .875rem; }
  /* alleen hier, waar een groep een rij is: smal staan de groepen naast elkaar en zou de pijl naar de andere groep wijzen */
  .vn-groep--lijn .vn-groep-kop::after {
    content: ''; flex: 1; min-width: 16px; height: 9px;
    background:
      linear-gradient(var(--line-strong), var(--line-strong)) 0 50% / calc(100% - 6px) 1.5px no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 9'%3E%3Cpath d='M0 0l8 4.5L0 9z' fill='%23527281'/%3E%3C/svg%3E") 100% 50% / 8px 9px no-repeat;
  }
}
@media (min-width: 1180px) {
  .vn-tabs--groepen { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
}
@media (forced-colors: active) {
  .vn-groep--lijn .vn-groep-kop::after { forced-color-adjust: none; background: linear-gradient(CanvasText, CanvasText) 0 50% / 100% 1.5px no-repeat; }
}

/* het toneel en de panelen */
.vn-toneel { min-width: 0; }
/* R8:E05 minder werk bij het opbouwen: tot venster.js de keuze heeft gezet (data-venster-keuze), tekent de browser
   alleen het eerste paneel (het gekozen tabblad in de html) en niet alle zes dashboards onder elkaar.
   Gemeten op 390 met de processor vier keer vertraagd (mediaan van 7 keer laden, stijl plus opmaak):
   mkb.html 2632 naar 1937 ms, partners.html 2962 naar 2257 ms. Valt het script om (.vn-plat), dan staat alles
   er weer. Laadt venster.js helemaal niet, dan blijven paneel 2 tot en met 6 verborgen (zie het logboek).
   Terugdraaien: deze regel weghalen. */
.js [data-venster]:not([data-venster-keuze]):not(.vn-plat) .vn-toneel > .vn-paneel ~ .vn-paneel { display: none; }
.vn-paneel { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--dash-gat); }
/* R8:B01 het paneel bouwt bij elke wissel kort op, op elke breedte. De regel geldt pas als hidden verdwijnt,
   dus ook vanaf 1180 pixels, waar de panelen met visibility op elkaar liggen. Begint bij opacity .4, zodat
   het venster niet even leeg flitst. Kiest iemand met de pijltjes, dan geen opbouw (zie [data-via="toets"]).
   Was: .js .vn-paneel { animation: vn-in .28s ease-out; } met vn-in van opacity 0 en translateY(6px). */
.js .vn-paneel:not([hidden]) { animation: vn-in 220ms cubic-bezier(.23, 1, .32, 1) both; }
@keyframes vn-in { from { opacity: .4; transform: translateY(4px); } to { opacity: 1; transform: none; } }
[data-via="toets"] .vn-paneel, [data-via="toets"] .vn-paneel * { animation: none !important; }

/* onder het toneel: door naar de volgende keuze, zonder terug te scrollen naar de tabbladen.
   Het script vult de naam in en haalt de regel tevoorschijn. */
.vn-kies { scroll-margin-top: calc(var(--kop-h) + 16px); }
.vn-verder { border-top: 1px solid var(--line-mid); }
.vn-volgende {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 54px; padding: 8px 2px 9px 0;
  background: none; border: 0; font: inherit; font-size: .9375rem; line-height: 1.3; text-align: left; color: var(--text); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.vn-volgende-label { flex: none; font-size: .875rem; font-weight: 600; color: var(--muted); }
.vn-volgende-naam { min-width: 0; font-weight: 600; color: var(--bright); text-wrap: balance; }
.vn-volgende::after { content: ''; flex: none; width: 9px; height: 9px; margin: 0 4px 0 auto; border-top: 2px solid var(--teal); border-right: 2px solid var(--teal); transform: rotate(45deg); }
/* R8:B02 hover alleen bij een muis (was: @media (hover: hover)) */
@media (hover: hover) and (pointer: fine) { .vn-volgende:hover .vn-volgende-naam { text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 1.5px; text-underline-offset: 4px; } }
/* R8:B04 drukfeedback op de knop over de volle breedte: een vlak, direct bij indrukken, loslaten in 160 ms.
   Het vlak is de vulling van een dashboard: op het verhoogde vlak (.vn--op-vlak) is dat vanzelf var(--bg). */
.vn-volgende { transition: background-color 160ms ease; }
.vn-volgende:active { background-color: var(--vn-vulling); transition-duration: 0ms; }
@media (min-width: 860px) {
  .vn-volgende { justify-content: flex-end; }
  .vn-volgende::after { margin-left: 6px; }
}

/* de kop van een paneel: alleen zichtbaar als de tabbladen er niet zijn (zonder script, op papier) */
.vn-situatie { display: none; }
.vn-situatie-kop { font-size: clamp(1.15rem, 1.05rem + .45vw, 1.35rem); font-weight: 650; letter-spacing: -0.02em; line-height: 1.25; color: var(--bright); }
.vn-situatie-zin { margin-top: 2px; }

/* ===== 2 · De conclusie =====
   Het lijntje (.vn-uitleg::after) loopt van het label naar rechts en dan het dashboard in, tot op het
   kerncijfer dat de zin bewijst. De maten volgen uit de variabelen van .vn.
   .vn-uitleg--vrij: het beeld eronder is geen dashboard, het lijntje loopt alleen naar rechts. */
.vn-uitleg { position: relative; z-index: 2; padding-right: calc(var(--wijs-x) + 16px); }
.vn-uitleg-label { display: flex; align-items: center; height: 20px; font-size: .875rem; font-weight: 600; line-height: 1; color: var(--muted); }
.vn-uitleg-label span { position: relative; z-index: 1; padding-right: 12px; background: var(--vn-vlak); }
.vn-uitleg::after {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  left: 0; right: var(--wijs-x); top: 9.25px; bottom: calc(-1 * var(--wijs-diep));
  border-top: var(--rand) solid var(--line-teal); border-right: var(--rand) solid var(--line-teal);
  border-top-right-radius: var(--radius);
}
/* het lijntje eindigt in een punt op de rand van het kerncijfer: hetzelfde punt als aan het eind van een lijngrafiek */
.vn-uitleg::before {
  content: ''; position: absolute; z-index: 1; pointer-events: none;
  right: calc(var(--wijs-x) - 3.5px + var(--rand) / 2); bottom: calc(-1 * var(--wijs-diep) - 3.5px);
  width: 7px; height: 7px; border-radius: 50%; background: var(--teal);
}
.vn-uitleg--vrij { padding-right: 0; }
.vn-uitleg--vrij::before { content: none; }
.vn-uitleg--vrij::after { right: 0; bottom: auto; height: 0; border-right: 0; border-radius: 0; }
.vn-antwoord {
  margin-top: 8px; max-width: 24em;
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.9rem); font-weight: 650; letter-spacing: -0.022em; line-height: 1.2;
  color: var(--bright); text-wrap: balance;
}
.vn-antwoord .zin { display: block; }

/* de zin of twee onder het beeld */
.vn-duiding { max-width: 40em; font-size: .9375rem; line-height: 1.5; text-wrap: pretty; }
.vn-duiding strong { color: var(--bright); }

/* ===== 3 · Het dashboard zelf ===== */
.vn-bord {
  min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--bord-gat);
  padding: var(--bord-pad);
  background: var(--vn-vulling); border: var(--rand) solid var(--line-teal); border-radius: var(--radius);
  container-type: inline-size;
  font-size: 13.5px; line-height: 1.35; color: var(--text);
}
.vn-bord-kop { height: var(--bord-kop); display: flex; flex-direction: column; justify-content: center; gap: 4px; padding-right: calc(var(--wijs-in) + 14px); }
.vn-bord-titel { margin: 0; font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.014em; line-height: 1.2; color: var(--bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* het merkje Voorbeelddata staat rechts in de balk, links van het lijntje van de conclusie */
.vn-bord-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; line-height: 1.2; color: var(--muted); white-space: nowrap; }
.vn-bord-meta .merkje { padding-block: 2px; }
.vn-bord-voet { line-height: 1.2; }

/* kerncijfers: op smal het bewijs als tegel bovenaan en de rest als rijen, vanaf 600 vier tegels naast elkaar */
.vn-kpis { display: grid; grid-template-columns: minmax(0, 1fr); }
.vn-kpi { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0 8px; border-top: 1px solid var(--line); }
.vn-kpi:nth-last-child(2) { border-bottom: 1px solid var(--line); }
.vn-kpi dt { font-size: 12.5px; color: var(--muted); }
.vn-kpi dd { font-size: 1rem; font-weight: 600; color: var(--bright); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vn-kpi .vn-kpi-sub { display: none; }
.vn-kpi--bewijs { order: -1; display: block; margin-bottom: 4px; padding: 11px 14px 12px; border: var(--rand) solid var(--line-teal); border-radius: var(--radius); }
.vn-kpi--bewijs dt { color: var(--text); }
.vn-kpi--bewijs dd { margin-top: 3px; font-size: 1.7rem; font-weight: 750; letter-spacing: -0.035em; line-height: 1.1; }
.vn-kpi--bewijs .vn-kpi-sub { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 400; letter-spacing: 0; line-height: 1.3; color: var(--muted); }
@container (min-width: 600px) {
  .vn-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bord-gat); }
  .vn-kpi:first-child { order: -2; }
  .vn-kpi, .vn-kpi--bewijs { order: 0; display: block; margin: 0; padding: 12px 14px 13px; border: 1px solid var(--line-mid); border-radius: var(--radius); }
  .vn-kpi:nth-last-child(2) { border-bottom: 1px solid var(--line-mid); }
  .vn-kpi--bewijs { order: -1; padding: 11.5px 13.5px 12.5px; border: var(--rand) solid var(--line-teal); }
  .vn-kpi dt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vn-kpi dd { margin-top: 3px; font-size: clamp(1.15rem, 2.7cqi, 1.7rem); font-weight: 750; letter-spacing: -0.035em; line-height: 1.1; }
  .vn-kpi .vn-kpi-sub { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 400; letter-spacing: 0; line-height: 1.3; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
}

@container (min-width: 720px) {
  .vn-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vn-kpi:first-child, .vn-kpi--bewijs { order: 0; }
}

/* de tegels met een grafiek of een tabel */
.vn-bord-rij { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bord-gat); }
@container (min-width: 760px) { .vn-bord-rij { grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); } }
.vn-tegel { min-width: 0; display: flex; flex-direction: column; padding: 14px 14px 16px; border: 1px solid var(--line-mid); border-radius: var(--radius); container-type: inline-size; }
.vn-tegel-titel { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; font-size: .9375rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.008em; color: var(--bright); }
.vn-tegel-titel span { font-size: 12.5px; font-weight: 400; letter-spacing: 0; color: var(--muted); white-space: nowrap; }
.vn-legenda { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.vn-legenda i { display: inline-block; width: 10px; height: 10px; margin-right: 7px; }
.vn-kl-teal { background: var(--teal); }
.vn-kl-stil { background: var(--stil); }
.vn-kl-licht { background: var(--licht); }
.vn-kl-wit { background: var(--bright); }

/* dashboard 1: marge per klant, een regel per klant met een staaf rond de nullijn */
.vn-g-marge-kop, .vn-g-marge li { display: grid; grid-template-columns: minmax(10.8em, 1.2fr) 72px minmax(0, 1.5fr) 44px 74px; gap: 12px; align-items: center; }
.vn-g-marge-kop { margin-top: 12px; padding-bottom: 7px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.vn-g-marge-kop span:nth-child(2), .vn-g-marge-kop span:nth-child(5) { text-align: right; }
.vn-g-marge-kop span:nth-child(3) { padding-left: 22.2%; }
.vn-g-marge ol { flex: 1; display: flex; flex-direction: column; }
.vn-g-marge li { flex: 1; padding: 8px 0; border-bottom: 1px solid var(--line); }
.vn-g-marge li:last-child { border-bottom: 0; padding-bottom: 0; }
.vn-m-naam { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vn-m-omzet { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vn-m-baan { position: relative; height: 14px; }
.vn-m-baan::before { content: ''; position: absolute; left: 22.2%; top: -8px; bottom: -8px; border-left: 1px solid var(--line-mid); }
.vn-m-baan i { position: absolute; top: 0; bottom: 0; }
.vn-m-baan .vn-plus { left: 22.2%; width: calc(var(--w) * 2.222%); background: var(--stil); }
.vn-m-baan .vn-min { right: 77.8%; width: calc(var(--w) * 2.222%); background: var(--bright); }
.vn-m-marge { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vn-m-euro { text-align: right; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vn-let-op .vn-m-naam, .vn-let-op .vn-m-euro { color: var(--bright); font-weight: 650; }
.vn-let-op .vn-m-marge { color: var(--bright); }
@container (max-width: 480px) {
  /* smalle tegel: de naam met het bedrag, daaronder de staaf met het percentage dat hij uitbeeldt */
  .vn-g-marge-kop { display: none; }
  .vn-g-marge ol { margin-top: 10px; border-top: 1px solid var(--line); }
  .vn-g-marge li { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 5px 0 7px; }
  .vn-m-naam { grid-column: 1; grid-row: 1; }
  .vn-m-euro { grid-column: 2; grid-row: 1; }
  .vn-m-baan { grid-column: 1; grid-row: 2; height: 8px; align-self: center; }
  .vn-m-marge { grid-column: 2; grid-row: 2; font-size: 12px; line-height: 1; }
  .vn-m-omzet { display: none; }
  .vn-m-baan::before { top: -3px; bottom: -3px; }
}

/* de lijn ernaast: marge per maand */
.vn-trend { flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(92px, 1fr) auto; column-gap: 8px; row-gap: 6px; margin-top: 14px; }
@container (min-width: 520px) { .vn-trend { grid-template-rows: minmax(150px, 1fr) auto; } }
.vn-trend-as-y { display: flex; flex-direction: column; justify-content: space-between; margin-block: -7px; font-size: 11.5px; line-height: 14px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.vn-trend-vlak { position: relative; margin-right: 5px; }
.vn-trend-vlak svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vn-trend-eind { position: absolute; right: 9px; margin-top: 9px; font-size: 12.5px; font-weight: 650; line-height: 1; color: var(--bright); font-variant-numeric: tabular-nums; }
.vn-trend-as-x { grid-column: 2; display: flex; justify-content: space-between; margin-right: 5px; font-size: 11.5px; line-height: 1.2; color: var(--muted); }

/* dashboard 2: voorraad per vestiging, een gestapelde staaf per vestiging */
.vn-v-rijen { flex: 1; margin-top: 14px; display: grid; grid-auto-rows: 1fr; gap: 14px; }
.vn-v-rijen li { display: flex; flex-direction: column; }
.vn-v-kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.vn-v-kop strong { min-width: 5.4em; font-size: .9375rem; color: var(--bright); }
.vn-v-kop span { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vn-v-kop .vn-v-stil { margin-left: auto; }
.vn-let-op .vn-v-stil { color: var(--bright); font-weight: 650; }
.vn-v-staaf { flex: 1; display: flex; gap: 2px; min-height: 22px; max-height: 44px; margin-top: 7px; width: calc(var(--tot) * 1%); }
.vn-v-staaf i { flex: var(--p) 1 0; min-width: 0; }

/* de tabel ernaast */
.vn-mini { width: 100%; margin-top: 8px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.vn-mini th, .vn-mini td { padding: 7px 0; border-bottom: 1px solid var(--line); font-weight: 400; text-align: left; vertical-align: middle; }
.vn-mini td { padding-left: 10px; text-align: right; white-space: nowrap; }
.vn-mini thead th { padding-top: 4px; font-size: 12.5px; color: var(--muted); }
.vn-mini thead th + th { padding-left: 10px; text-align: right; }
.vn-mini tbody th { color: var(--text); }
.vn-mini tbody tr:first-child th, .vn-mini tbody tr:first-child td { color: var(--bright); }
.vn-mini tfoot th, .vn-mini tfoot td { padding-bottom: 0; border-bottom: 0; font-weight: 650; color: var(--bright); }
.vn-g-tabel .vn-mini { flex: 1; }

/* dashboard 3: omzet per kanaal, per kanaal twee liggende staven */
.vn-k-rijen { flex: 1; margin-top: 12px; display: grid; grid-auto-rows: 1fr; gap: 12px; align-items: center; }
.vn-k-kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 14px; }
.vn-k-kop strong { font-size: .9375rem; color: var(--bright); }
.vn-k-pct { color: var(--muted); }
.vn-let-op .vn-k-pct { color: var(--bright); font-weight: 650; }
.vn-k-staaf { display: grid; grid-template-columns: minmax(0, 1fr) 5.4em; align-items: center; gap: 10px; margin-top: 4px; }
.vn-k-staaf i { justify-self: start; width: calc(var(--w) * 1%); min-width: 3px; height: 11px; }
.vn-k-staaf b { font-size: 12.5px; font-weight: 500; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* de ring ernaast: aandeel in de omzet */
.vn-ring { flex: 1; display: grid; grid-template-columns: minmax(0, 132px) minmax(0, 1fr); align-items: center; gap: 18px; margin-top: 12px; }
.vn-ring-beeld { position: relative; aspect-ratio: 1; }
.vn-ring-beeld svg { width: 100%; height: 100%; }
.vn-ring-beeld .vn-r-1 { stroke: var(--stil); }
.vn-ring-beeld .vn-r-2 { stroke: var(--licht); }
.vn-ring-beeld .vn-r-3 { stroke: var(--bright); }
.vn-ring-beeld .vn-r-4 { stroke: var(--line-strong); }
.vn-ring-midden { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 2px; text-align: center; }
.vn-ring-midden strong { font-size: 13px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--bright); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vn-ring-midden span { font-size: 11px; line-height: 1; color: var(--muted); }
.vn-ring-leg li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.vn-ring-leg li:last-child { border-bottom: 0; }
.vn-ring-leg i { width: 10px; height: 10px; }
.vn-ring-leg i.vn-r-1 { background: var(--stil); }
.vn-ring-leg i.vn-r-2 { background: var(--licht); }
.vn-ring-leg i.vn-r-3 { background: var(--bright); }
.vn-ring-leg i.vn-r-4 { background: var(--line-strong); }
.vn-ring-leg span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vn-ring-leg b { font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.vn-ring-leg .vn-let-op span, .vn-ring-leg .vn-let-op b { color: var(--bright); font-weight: 650; }
@container (max-width: 339px) {
  .vn-ring { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 10px; }
  .vn-ring-beeld { width: 144px; }
  .vn-ring-leg { width: 100%; }
}

/* dashboard 4: planning. Het getal staat altijd bovenin, de vulling eronder als eigen balk. */
.vn-g-planning table { flex: 1; width: calc(100% + 12px); margin: 8px -6px -6px; table-layout: fixed; border-collapse: separate; border-spacing: 6px; }
.vn-g-planning th { padding: 0 0 1px; font-size: 12.5px; font-weight: 500; color: var(--muted); text-align: center; }
.vn-g-planning thead th { height: 18px; }
.vn-g-planning th:first-child { width: 4.8em; }
.vn-g-planning th[scope="row"] { padding: 0; text-align: left; color: var(--text); white-space: nowrap; }
/* Na ronde 3: de inhoud bepaalt de hoogte; de rand en de vulling zijn een laag achter de inhoud die de hele cel
   vult. Was: height: 100% op het vakje in een cel met height: 1px. Firefox kent die truc niet: daar werden de
   vakjes 11 pixels hoog en viel het getal erbuiten (zichtbaar bij de witte vakjes boven de 100%). */
.vn-g-planning td { position: relative; z-index: 0; padding: 0; vertical-align: middle; }
.vn-cel { display: grid; gap: 6px; padding: 8px 9px 9px; }
.vn-cel::after { content: ''; position: absolute; inset: 0; z-index: -1; border: 1px solid var(--line-mid); pointer-events: none; }
.vn-cel b { font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--bright); text-align: center; font-variant-numeric: tabular-nums; }
.vn-cel i { display: block; height: 6px; background: var(--vn-spoor); }
.vn-cel i::before { content: ''; display: block; width: calc(var(--p) * 1%); height: 100%; background: var(--stil); }
.vn-cel--over::after { background: var(--bright); border-color: var(--bright); }
.vn-cel--over b { color: #001620; }
.vn-cel--over i { background: #001620; }
.vn-cel--over i::before { background: #001620; }
@container (max-width: 480px) {
  .vn-g-planning table { border-spacing: 4px; width: calc(100% + 8px); margin: 8px -4px -4px; }
  .vn-cel { padding: 7px 4px 7px; gap: 5px; }
  .vn-cel b { font-size: 12px; }
  .vn-g-planning th:first-child { width: 4em; }
  .vn-g-planning th[scope="row"] { font-size: 12px; }
}
@container (max-width: 260px) {
  .vn-g-planning table { border-spacing: 3px; width: calc(100% + 6px); margin: 8px -3px -3px; }
  .vn-g-planning th:first-child { width: 43px; }
  .vn-cel { padding-inline: 3px; }
  .vn-cel b { font-size: 11.5px; letter-spacing: -0.01em; }
}

/* de kolommen ernaast: bezetting per dag, de schaal loopt tot 120% */
.vn-dagen { flex: 1; min-height: 132px; margin-top: 12px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.vn-dagen li { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 6px; text-align: center; }
.vn-dag-baan { position: relative; display: block; border-bottom: 1px solid var(--line-mid); }
.vn-dag-baan::before { content: ''; position: absolute; left: -5px; right: -5px; bottom: 83.333%; border-top: 1px dashed var(--line-strong); }
.vn-dag-baan i { position: absolute; left: 16%; right: 16%; bottom: 0; height: calc(var(--p) / 1.2 * 1%); background: var(--stil); }
.vn-dag-baan b { position: absolute; z-index: 1; left: -4px; right: -4px; bottom: calc(var(--p) / 1.2 * 1% - 19px); font-size: 12.5px; font-weight: 600; line-height: 1; color: var(--bright); font-variant-numeric: tabular-nums; }
.vn-dag-naam { font-size: 12.5px; line-height: 1.2; color: var(--muted); }
.vn-dagen .vn-let-op b { color: #001620; font-weight: 700; }
.vn-dagen .vn-let-op i { background: var(--bright); }

/* de lijnen in een grafiek: het rooster, de lijn zelf en het laatste punt */
.vn-rooster { fill: none; stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.vn-nu { fill: none; stroke: var(--teal); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.vn-lijn-punt { position: absolute; right: -4.5px; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px var(--vn-vulling); }

/* kort (.vn--kort): op een smal scherm staan per dashboard de conclusie, het kerncijfer dat haar bewijst en
   de ene grafiek die haar draagt. De drie andere cijfers en de tweede grafiek of tabel komen erbij met de
   knop "Toon het hele dashboard" (venster.js maakt hem). Heeft het dashboard de breedte, dan staat alles er.
   Zonder script staat alles er altijd. */
.vn-bord-meer { display: none; }
@container (max-width: 599px) {
  .js .vn--kort .vn-bord:not(.is-heel) .vn-kpi:not(.vn-kpi--bewijs),
  .js .vn--kort .vn-bord:not(.is-heel) .vn-bord-rij > .vn-tegel:not(.vn-tegel--hoofd) { display: none; }
  .js .vn--kort .vn-bord:not(.is-heel) .vn-kpi--bewijs { margin-bottom: 0; }
  .js .vn--kort .vn-bord-meer {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 46px; padding: 0 14px;
    background: none; border: 1px solid var(--line-mid); border-radius: var(--radius);
    font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.2; text-align: left; color: var(--bright); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .vn-bord-meer::after { content: ''; flex: none; width: 14px; height: 14px; background: linear-gradient(var(--teal), var(--teal)) 50% 50% / 100% 2px no-repeat, linear-gradient(var(--teal), var(--teal)) 50% 50% / 2px 100% no-repeat; }
  .vn-bord-meer[aria-expanded="true"]::after { background: linear-gradient(var(--teal), var(--teal)) 50% 50% / 100% 2px no-repeat; }
  /* R8:A10 "Toon het hele dashboard" op 15 pixels, zoals op de homepage (was 13,5) */
  .js .vn--kort .vn-bord-meer { font-size: .9375rem; }
  /* R8:B04 drukfeedback: de knop staat in de vulling van het dashboard, dus het vlak is de kleur eronder (var(--vn-vlak)) */
  .js .vn--kort .vn-bord-meer { transition: background-color 160ms ease; }
  .js .vn--kort .vn-bord-meer:active { background-color: var(--vn-vlak); transition-duration: 0ms; }
}

/* het dashboard reageert op een keuze: de balken lopen een keer uit. Alleen met script en met beweging aan. */
/* R8:B01 de balken groeien bij elke wissel, ook in het venster met zijbalk vanaf 1180 pixels: elke selector
   kreeg .vn-paneel:not([hidden]) ervoor (was: .js .vn-m-baan i enzovoort, zonder paneel). */
@media (prefers-reduced-motion: no-preference) {
  .js .vn-paneel:not([hidden]) .vn-m-baan i, .js .vn-paneel:not([hidden]) .vn-k-staaf i, .js .vn-paneel:not([hidden]) .vn-v-staaf, .js .vn-paneel:not([hidden]) .vn-cel i::before { animation: vn-uit .5s cubic-bezier(.2, .7, .2, 1) both; transform-origin: 0 50%; }
  .js .vn-paneel:not([hidden]) .vn-m-baan .vn-min { transform-origin: 100% 50%; }
  .js .vn-paneel:not([hidden]) .vn-dag-baan i { animation: vn-op .5s cubic-bezier(.2, .7, .2, 1) both; transform-origin: 50% 100%; }
  .js .vn-paneel:not([hidden]) .vn-g-marge li:nth-child(n+2) .vn-m-baan i, .js .vn-paneel:not([hidden]) .vn-k-rijen li:nth-child(n+2) .vn-k-staaf i, .js .vn-paneel:not([hidden]) .vn-v-rijen li:nth-child(n+2) .vn-v-staaf { animation-delay: .05s; }
  .js .vn-paneel:not([hidden]) .vn-g-marge li:nth-child(n+4) .vn-m-baan i, .js .vn-paneel:not([hidden]) .vn-k-rijen li:nth-child(n+3) .vn-k-staaf i, .js .vn-paneel:not([hidden]) .vn-v-rijen li:nth-child(n+3) .vn-v-staaf { animation-delay: .1s; }
  .js .vn-paneel:not([hidden]) .vn-g-marge li:nth-child(n+6) .vn-m-baan i, .js .vn-paneel:not([hidden]) .vn-k-rijen li:nth-child(n+4) .vn-k-staaf i { animation-delay: .15s; }
}
@keyframes vn-uit { from { transform: scaleX(0); } to { transform: none; } }
@keyframes vn-op { from { transform: scaleY(0); } to { transform: none; } }

/* ===== 4 · Het venster met zijbalk (.vn--venster) =====
   Tot 1180 pixels: tabbladen als rij, dan de conclusie, dan het dashboard.
   Vanaf 1180 pixels: een venster zoals de klant het krijgt, links de dashboards en rechts het gekozen dashboard.
   Het script zet de conclusie van elk paneel boven het venster. */
.vn-merk, .vn-status { display: none; }
@media (max-width: 1179px) {
  .js .vn--venster .vn-raam { display: contents; }
  .js .vn--venster .vn-zij { grid-row: 1; }
  .js .vn--venster > .vn-uitleg { grid-row: 2; grid-column: 1; }
  .js .vn--venster .vn-toneel { grid-row: 3; }
}
@media (min-width: 700px) {
  /* vanaf hier liggen de conclusies op elkaar: het venster verspringt niet bij wisselen */
  .js .vn--venster > .vn-uitleg[hidden] { display: block !important; visibility: hidden; }
}
@media (min-width: 1180px) {
  /* de vier dashboards liggen op elkaar in hetzelfde vak: het hoogste bepaalt de hoogte, dus niets verspringt */
  .vn--venster { --bord-pad: 22px; --bord-kop: 30px; --bord-gat: 14px; --dash-gat: 22px; --wijs-in: 30px; --zij: 184px; }
  .js .vn--venster > .vn-uitleg { grid-row: 1; grid-column: 1; }
  .js .vn--venster .vn-raam {
    grid-row: 2; display: grid; grid-template-columns: var(--zij) minmax(0, 1fr); overflow: hidden;
    background: var(--vn-vulling); border: var(--rand) solid var(--line-teal); border-radius: var(--radius);
  }
  .js .vn--venster .vn-zij { display: flex; flex-direction: column; margin: 0; padding: 20px 0 18px; background: var(--vn-vlak); border-right: 1px solid var(--line-mid); }
  .js .vn--venster .vn-merk { display: block; padding: 2px 20px 0; }
  .js .vn--venster .vn-merk .merknaam { font-size: 1.3rem; }
  .js .vn--venster .vn-status { display: block; padding: 18px 20px 0; line-height: 1.2; }
  /* de vier tabbladen vullen de kolom: vier gelijke rijen, geen leeg vlak boven de status */
  .js .vn--venster .vn-tabs { flex: 1; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: 0; margin-top: 22px; border-top: 1px solid var(--line-mid); }
  .js .vn--venster .vn-tab { display: flex; flex-direction: column; justify-content: center; min-height: 0; padding: 13px 16px 14px 20px; border: 0; border-bottom: 1px solid var(--line-mid); border-radius: 0; text-align: left; box-shadow: none; }
  /* titel en periode op een regel, het merkje rechts */
  .vn--venster .vn-bord-kop { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 14px; }
  .vn--venster .vn-bord-meta { flex: 1; }
  .js .vn--venster .vn-tab::before { content: ''; position: absolute; left: 0; top: -1px; bottom: -1px; width: 3px; background: var(--teal); opacity: 0; transition: opacity .2s ease-out; }
  /* R8:B02 de hover van de zijbalk alleen bij een muis (was: .js .vn--venster .vn-tab:hover zonder voorwaarde,
     en de hover-kleur van de naam samen met die van het gekozen tabblad in een regel) */
  @media (hover: hover) and (pointer: fine) {
    .js .vn--venster .vn-tab:hover { background: var(--vn-vulling); }
    .js .vn--venster .vn-tab:hover .vn-tab-naam { color: var(--bright); }
  }
  .js .vn--venster .vn-tab[aria-selected="true"] { background: var(--vn-vulling); margin-right: -1px; box-shadow: none; }
  .js .vn--venster .vn-tab[aria-selected="true"]::before { opacity: 1; }
  .js .vn--venster .vn-tab-naam { font-size: 1rem; color: var(--text); }
  .js .vn--venster .vn-tab[aria-selected="true"] .vn-tab-naam { color: var(--bright); }
  .js .vn--venster .vn-tab:focus-visible { outline-offset: -3px; }

  .js .vn--venster .vn-toneel { display: grid; }
  .js .vn--venster .vn-paneel { grid-area: 1 / 1; }
  .js .vn--venster .vn-paneel[hidden] { display: grid !important; visibility: hidden; }
  .js .vn--venster .vn-bord { grid-template-rows: auto auto minmax(0, 1fr); border: 0; border-radius: 0; background: none; }
  .js .vn--venster .vn-bord-voet { display: none; }
  .vn--venster .vn-tegel { padding: 16px 18px 18px; }
  .vn--venster .vn-bord-titel { font-size: 1.2rem; }
}
@media (min-width: 1280px) {
  .vn--venster { --zij: 236px; }
  .js .vn--venster .vn-tab-sub { display: block; margin-top: 3px; font-size: .875rem; line-height: 1.35; color: var(--text); }
}

/* ===== 5 · De andere beelden van de homepage =====
   Het overzicht van het eerste scherm, het Excel-blad, het ene cijfer en de rechte lijn.
   Ze staan in het toneel naast de dashboards, of los op de pagina. */
.vn-beeld { min-width: 0; }

/* het overzicht: een gevuld vlak met een teal rand, zoals het dashboard */
.vn-db {
  min-width: 0; overflow: hidden;
  background: var(--vn-vulling); border: 1.5px solid var(--line-teal); border-radius: var(--radius);
  container-type: inline-size;
  font-size: 13px; line-height: 1.35; color: var(--text);
}
.vn-db-balk { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; border-bottom: 1px solid var(--line); }
.vn-db-label { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.vn-db-hoofd { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; padding: 24px 20px 18px; }
.vn-uitkomst-getal { display: block; margin-top: 6px; font-size: clamp(2.1rem, 9.4cqi, 3.3rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1; color: var(--bright); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vn-uitkomst-zin { display: block; margin-top: 12px; font-size: 13.5px; white-space: nowrap; }
.vn-op { color: var(--teal); font-weight: 700; }
.vn-lijn { min-width: 0; align-self: stretch; display: flex; flex-direction: column; }
.vn-lijn-vlak { position: relative; flex: 1; min-height: 148px; }
.vn-lijn-vlak svg { width: 100%; height: 100%; overflow: visible; }
.vn-vorig { fill: none; stroke: #5f7480; stroke-width: 1.5; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.vn-lijn-vlak .vn-lijn-punt { top: 24.6%; }
.vn-lijn-as { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.vn-lijn-leg i { display: inline-block; width: 14px; height: 0; margin: 0 5px 0 12px; vertical-align: middle; border-top: 2px solid var(--teal); }
.vn-lijn-leg .vn-l-vorig { border-top: 1.5px dashed #5f7480; }
@container (max-width: 470px) {
  .vn-db-hoofd { grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; padding: 18px 16px 14px; }
  .vn-lijn-vlak { flex: none; min-height: 0; height: 80px; }
  .vn-db-balk { padding-inline: 16px; }
}
@container (max-width: 300px) {
  .vn-db-balk { padding-inline: 12px; gap: 8px; }
}

/* het Excel-blad: het grijze papier, tekst in Geist Mono. Het merkje Voorbeelddata staat er direct onder, rechts. */
.vn-blad-kader { display: grid; justify-items: end; row-gap: 8px; width: 100%; max-width: 400px; }
.vn-blad { width: 100%; background: var(--papier-oud); color: var(--inkt-oud); font: 400 12px/1.25 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: -0.01em; }
.vn-blad-balk { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; background: #b7bcb8; color: #1f2b32; white-space: nowrap; }
.vn-blad-balk span:first-child { overflow: hidden; text-overflow: ellipsis; }
.vn-blad-rooster { display: grid; grid-template-columns: 24px minmax(0, 1.08fr) minmax(0, .8fr) minmax(0, 1.12fr); }
.vn-blad-rooster span { padding: 6px 8px; border-right: 1px solid #aeb4b0; border-bottom: 1px solid #aeb4b0; white-space: nowrap; overflow: hidden; }
.vn-blad-rooster .hk { padding-inline: 0; background: #c0c5c1; color: #2b373e; text-align: center; }
.vn-blad-rooster .g { text-align: right; }
.vn-blad-rooster .vet { font-weight: 600; color: #1c282f; }
.vn-blad-rooster .breed { grid-column: 2 / -1; }
.vn-blad-rooster .is-fout { background: #c0c5c1; color: #1c282f; }
.vn-blad-voet { display: flex; align-items: center; gap: 2px; padding: 5px 10px 5px 24px; background: #b7bcb8; }
.vn-blad-tab { padding: 3px 9px; color: var(--inkt-oud); }
.vn-blad-tab--aan { background: var(--papier-oud); color: #1c282f; }
@media (max-width: 359px) {
  /* op de smalste telefoon een stap kleiner, zodat geen cel wordt afgekapt */
  .vn-blad { font-size: 11px; }
  .vn-blad-rooster span { padding-inline: 6px; }
  .vn-blad-rooster .hk { padding-inline: 0; }
  .vn-blad-balk { gap: 8px; padding-inline: 8px; }
}

/* het ene cijfer: vrij op het vlak, tussen twee teal lijnen, geen kader */
.vn-cijfer { display: flex; flex-direction: column; width: 100%; padding-block: 12px 18px; border-block: 1.5px solid var(--line-teal); }
.vn-cijfer-balk { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vn-cijfer-label { margin-top: 14px; font-size: .9375rem; color: var(--muted); }
.vn-cijfer-getal { margin-top: 2px; font-size: clamp(2.6rem, 14vw, 3.5rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1; color: var(--bright); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vn-cijfer-zin { margin-top: 10px; line-height: 1.4; }
.vn-cijfer-zin .nb { display: inline-block; }

/* de pijl tussen twee beelden: de lijn van de site (drie pixels teal met een punt), niet de blokpijl van
   de flyer. Staand wijst hij omlaag, liggend naar rechts. */
.vn-pijl { position: relative; width: 3px; height: 30px; margin: 12px 0 22px; background: var(--teal); }
.vn-pijl::after { content: ''; position: absolute; left: 50%; bottom: -10px; margin-left: -8px; border-style: solid; border-width: 11px 8px 0; border-color: var(--teal) transparent transparent; }

/* van het blad naar het cijfer: onder elkaar, vanaf 960 pixels naast elkaar (smaller past het getal niet naast het blad) */
.vn-paar { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; }
.vn-paar .vn-pijl { margin-left: 28px; }
.vn-paar .vn-cijfer { max-width: 400px; }
@media (min-width: 960px) {
  .vn-paar { grid-template-columns: minmax(0, 400px) 96px minmax(0, 1fr); align-items: center; }
  .vn-paar .vn-pijl { justify-self: center; width: 44px; height: 3px; margin: 0 10px 0 0; }
  .vn-paar .vn-pijl::after { left: auto; right: -10px; bottom: auto; top: 50%; margin: -8px 0 0; border-width: 8px 0 8px 11px; border-color: transparent transparent transparent var(--teal); }
  .vn-paar .vn-cijfer { max-width: 440px; }
}
@media (min-width: 1180px) {
  .vn-paar { grid-template-columns: minmax(0, 440px) 128px minmax(0, 1fr); }
  .vn-paar .vn-pijl { width: 64px; }
  .vn-paar .vn-blad-kader { max-width: 440px; }
  .vn-paar .vn-blad { font-size: 13px; }
  .vn-paar .vn-blad-rooster span { padding-block: 8px; }
  .vn-paar .vn-cijfer { max-width: 520px; padding-block: 16px 24px; }
  .vn-paar .vn-cijfer-getal { font-size: 4.6rem; }
  .vn-paar .vn-cijfer-zin { font-size: 1.125rem; }
}

/* de rechte lijn: van je systemen naar DataGrip, met de zes taken van het platform als haltes.
   Twee cirkels en zes streepjes, zoals de kleine haltes op een lijnkaart. Staand loopt de lijn links
   langs de tekst, vanaf 960 pixels ligt hij. De cirkels krijgen de kleur van het vlak eronder. */
.vn-recht { position: relative; display: grid; gap: 14px; max-width: 30rem; padding: 0 0 34px 52px; }
.vn-recht-punt { position: relative; }
.vn-recht-punt::before { content: ''; position: absolute; left: -51px; top: 4px; z-index: 1; width: 14px; height: 14px; border-radius: 50%; background: var(--vn-vlak); border: 1.5px solid var(--teal); }
.vn-recht-punt--dg::before { background: var(--teal); }
.vn-recht-punt > strong { display: block; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.012em; line-height: 1.3; color: var(--bright); white-space: nowrap; }
.vn-recht-punt > span { display: block; margin-top: 1px; max-width: 24rem; font-size: .9375rem; line-height: 1.42; }
.vn-recht-punt .merknaam { font-size: 1.2rem; line-height: 1.2; }
.vn-taken { display: grid; gap: 9px; margin-top: -2px; }
.vn-taken li { position: relative; font-size: .9375rem; font-weight: 500; line-height: 1.42; color: var(--bright); }
/* het woord van de flyer is het label, de gewone zin staat eronder */
.vn-taken li strong { display: block; font-weight: 600; }
.vn-taken li span { display: block; font-size: .875rem; font-weight: 400; line-height: 1.4; color: var(--text); }
.vn-taken li::before { content: ''; position: absolute; left: -42.5px; top: .71em; width: 12px; height: 3px; margin-top: -1.5px; background: var(--teal); }
.vn-recht-lijn { position: absolute; left: 6.5px; top: 11px; bottom: 13px; width: 3px; }
.vn-recht-lijn i { position: absolute; inset: 0; background: var(--teal); transform-origin: 50% 0; }
.vn-recht-lijn::after { content: ''; position: absolute; left: 50%; bottom: -10px; margin-left: -8px; border-style: solid; border-width: 11px 8px 0; border-color: var(--teal) transparent transparent; }
@media (min-width: 960px) {
  /* de lijn ligt: erboven de twee namen, eronder de zes taken, elk aan een streepje */
  .vn-recht { max-width: none; margin: 0; padding: 0; gap: 0; grid-template-columns: 9.5rem minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .vn-recht-punt { align-self: end; padding-bottom: 18px; }
  .vn-recht-punt--bron { grid-column: 1; grid-row: 1; }
  .vn-recht-punt--dg { grid-column: 2; grid-row: 1; }
  .vn-recht-punt::before { left: 0; top: auto; bottom: -8.5px; }
  .vn-recht-punt > span { max-width: none; }
  .vn-recht-lijn { position: relative; left: auto; top: auto; bottom: auto; grid-column: 1 / -1; grid-row: 2; width: auto; height: 3px; margin-right: 12px; }
  .vn-recht-lijn i { transform-origin: 0 50%; }
  .vn-recht-lijn::after { left: auto; right: -10px; bottom: auto; top: 50%; margin: -8px 0 0; border-width: 8px 0 8px 11px; border-color: transparent transparent transparent var(--teal); }
  .vn-taken { grid-column: 2; grid-row: 3; align-self: start; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin: 0 28px 0 0; }
  .vn-taken li { padding: 20px 14px 0 0; font-size: .9375rem; line-height: 1.35; }
  .vn-taken li span { margin-top: 3px; font-size: .8125rem; line-height: 1.42; text-wrap: pretty; }
  .vn-taken li::before { left: 5.5px; top: 0; width: 3px; height: 11px; margin: 0; }
  .vn-taken li:first-child::before { content: none; }
}
/* het schema van de flyer als een lijn: systemen, platform, stuurinformatie. De pijl van de rechte lijn
   wijst naar het derde deel: staand eronder, liggend ernaast. */
.vn-schema { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
.vn-schema .vn-recht { padding-bottom: 26px; }
.vn-schema-uit strong { display: block; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.012em; line-height: 1.3; color: var(--bright); }
.vn-schema-uit ul { margin-top: 2px; font-size: .9375rem; line-height: 1.5; }
@media (max-width: 959px) {
  .vn-schema-uit ul { display: flex; flex-wrap: wrap; column-gap: 8px; }
  .vn-schema-uit li { white-space: nowrap; }
  .vn-schema-uit li:not(:last-child)::after { content: '\00b7'; margin-left: 8px; color: var(--muted); }
}
@media (min-width: 960px) {
  .vn-schema { grid-template-columns: minmax(0, 1fr) auto; column-gap: 22px; align-items: center; }
  .vn-schema .vn-recht { padding-bottom: 0; }
  .vn-schema .vn-taken { margin-right: 8px; }
  .vn-schema-uit { padding: 0 0 2px 4px; }
  .vn-schema-uit strong { font-size: clamp(1.15rem, 1.05rem + .45vw, 1.35rem); font-weight: 650; letter-spacing: -0.02em; }
  .vn-schema-uit ul { margin-top: 4px; }
}

/* de lijn tekent zich zodra het paneel verschijnt: alleen met script en met beweging aan */
/* R8:B01 ook hier .vn-paneel:not([hidden]) voor elke selector (was: .js .vn-recht-lijn i enzovoort) */
@media (prefers-reduced-motion: no-preference) {
  .js .vn-paneel:not([hidden]) .vn-recht-lijn i { animation: vn-op .9s cubic-bezier(.3, .7, .2, 1) .1s both; }
  .js .vn-paneel:not([hidden]) .vn-recht-lijn::after { animation: vn-toon .2s ease-out .95s both; }
  .js .vn-paneel:not([hidden]) .vn-taken li { animation: vn-toon .35s ease-out both; animation-delay: calc(var(--i, 0) * .08s + .35s); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 960px) {
  .js .vn-paneel:not([hidden]) .vn-recht-lijn i { animation-name: vn-uit; }
}
@keyframes vn-toon { from { opacity: 0; } to { opacity: 1; } }

/* ===== 6 · Zonder script, contrastmodus en afdrukken =====
   Zonder script (of als het script struikelt: .vn-plat) zijn er geen tabbladen. De panelen staan onder
   elkaar, elk met zijn eigen kop en conclusie. */
html:not(.js) .vn-kies, .vn-plat .vn-kies, html:not(.js) .vn-verder, .vn-plat .vn-verder { display: none; }
html:not(.js) .vn-situatie, .vn-plat .vn-situatie { display: block; }
html:not(.js) .vn-paneel + .vn-paneel, .vn-plat .vn-paneel + .vn-paneel { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line-mid); }

@media (forced-colors: active) {
  .vn-m-baan i, .vn-v-staaf i, .vn-k-staaf i, .vn-cel i::before, .vn-dag-baan i, .vn-legenda i, .vn-ring-leg i { forced-color-adjust: none; border: 1px solid CanvasText; }
  .vn-recht-lijn i, .vn-taken li::before { forced-color-adjust: none; background: CanvasText; }
  .vn-recht-lijn::after { forced-color-adjust: none; border-color: CanvasText transparent transparent; }
  .vn-tab[aria-selected="true"], .js .vn--venster .vn-tab[aria-selected="true"] { border: 2px solid Highlight; }
  .vn-cel--over::after { border: 2px solid Highlight; }
  .vn-pijl { forced-color-adjust: none; background: CanvasText; }
  .vn-pijl::after { forced-color-adjust: none; border-color: CanvasText transparent transparent; }
  .vn-tab[aria-selected="true"] .vn-tab-nr { forced-color-adjust: none; background: Highlight; border-color: Highlight; color: HighlightText; }
}
@media (forced-colors: active) and (min-width: 960px) {
  .vn-recht-lijn::after { border-color: transparent transparent transparent CanvasText; }
}
@media (forced-colors: active) and (min-width: 960px) {
  .vn-paar .vn-pijl::after { border-color: transparent transparent transparent CanvasText; }
}

@media print {
  .vn-kies, .vn-verder { display: none !important; }
  .vn-situatie { display: block !important; }
  .js .vn--venster .vn-raam, .js .vn--venster .vn-toneel { display: contents !important; }
  .js .vn--venster > .vn-uitleg, .js .vn--venster > .vn-uitleg[hidden] { display: block !important; visibility: visible !important; grid-row: auto; }
  .vn-paneel, .vn-paneel[hidden], .js .vn--venster .vn-paneel[hidden] { display: grid !important; visibility: visible !important; grid-area: auto; }
  .vn-paneel + .vn-paneel { margin-top: 28px; }
  .js .vn--venster .vn-bord { border: var(--rand) solid var(--line-teal); border-radius: var(--radius); background: var(--vn-vulling); }
  .vn-bord-meer { display: none !important; }
  .vn-uitleg, .vn-bord-kop { break-after: avoid; }
  .vn-db, .vn-blad, .vn-cijfer, .vn-kpis, .vn-tegel { break-inside: avoid; }
}