/* Copyright (c) 2026 Rajesh Krishnasing. Alle rechten voorbehouden. */
/* PrimaPress, voorkant: de stijl van de kern (PrimaPress 2.0, docs/DESIGNSYSTEEM.md).
 * Een navy schil (navigatie links, bovenbalk) met een licht werkblad erin; vlak en scherp zoals de stijl van Xerox:
 * geen verlopen, schaduw alleen onder wat zweeft, rood voor de actie en voor wat gekozen is.
 * Alle kleuren, maten, schaduwen en duren komen uit tokens.css (dat laadt eerder): hier staat geen kleurcode en geen
 * verloop. De klassen en hun opbouw zijn het klassencontract van DESIGNSYSTEEM.md hoofdstuk 8; de stijl van elk
 * component komt uit componenten.css van het prototype. Wat alleen de kern heeft (calculatie, regelvenster, brief,
 * dashboard, support), staat onderaan en gebruikt dezelfde tokens.
 * De pagina zelf schuift (niet het werkblad): de navigatie en de bovenbalk blijven staan met position: sticky, zodat
 * schermen die window.scrollY gebruiken gewoon blijven werken. */

/* ---------------------------------------------------------------- basis */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--pp-schil); }
body {
  margin: 0; background: var(--pp-schil); color: var(--pp-tekst);
  font: var(--pp-gewicht) var(--pp-maat-basis)/var(--pp-regel) var(--pp-letter);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
#app { min-height: 100vh; min-height: 100dvh; }
#app > .laden { color: var(--pp-schil-tekst-2); padding: var(--pp-r-6); }
body.venster-open { overflow: hidden; }
[hidden] { display: none !important; }
h1, h2, h3, h4, h5 { margin: 0; color: var(--pp-kop); font-family: var(--pp-letter-kop); line-height: var(--pp-regel-kop); overflow-wrap: anywhere; }
p { margin: 0 0 var(--pp-r-2); }
a { color: var(--pp-link); text-underline-offset: 2px; }
strong, b { color: var(--pp-tekst); font-weight: var(--pp-gewicht-half); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--pp-ring); border-radius: var(--pp-straal-s); }
/* optimalisatie 2.0 (ONTW-01, WCAG 2.4.11): een veld met de focus valt nooit onder de vaste balken. De pagina laat boven
 * de bovenbalk en de titelbalk vrij en onder de knoppenrij; de hoogtes zijn tokens (tokens.css, laag 3). kern.js schuift
 * na de focus nog bij als een balk hoger is dan zijn token (een titelbalk op twee regels). */
html { scroll-padding-top: calc(var(--pp-balk) + var(--pp-focus-marge)); scroll-padding-bottom: var(--pp-focus-marge); }
html:has(.scherm > .titelbalk) {
  scroll-padding-top: calc(var(--pp-balk) + var(--pp-titelbalk-hoogte) + var(--pp-focus-marge));
  scroll-padding-bottom: calc(var(--pp-knoppenrij-hoogte) + var(--pp-focus-marge));
}
/* samenvoegen 2 (10-10-2026): een vak dat de focus alleen krijgt om er de lezer heen te zetten (tabindex -1: het werkblad,
 * de inhoud van een scherm, een blok van Support), is zelf niet te bedienen en krijgt geen ring om het hele vak */
main[tabindex="-1"]:focus-visible, section[tabindex="-1"]:focus-visible, article[tabindex="-1"]:focus-visible,
.scherminhoud[tabindex="-1"]:focus-visible { box-shadow: none; }
/* zo'n vak krijgt ook geen (doorzichtige) lijn: in een contrastthema stond anders een lijn om het hele werkblad */
main[tabindex="-1"]:focus-visible, section[tabindex="-1"]:focus-visible, article[tabindex="-1"]:focus-visible,
.scherminhoud[tabindex="-1"]:focus-visible { outline: none; }
::selection { background: var(--pp-selectie-vlak); color: var(--pp-selectie-tekst); }
.verborgen {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.sub { color: var(--pp-tekst-3); font-size: var(--pp-maat-s); }
.sub.blok, .blok { display: block; }
.nowrap { white-space: nowrap; }
.rechts { margin-left: auto; }
.breekbaar { word-break: break-word; overflow-wrap: anywhere; }
.tekstblok { white-space: pre-line; }
.uitleg-boven { color: var(--pp-tekst-3); font-size: var(--pp-maat-m); margin: 0 0 var(--pp-r-3); max-width: 900px; }
.bedrag, .getal { font-variant-numeric: tabular-nums; }
.icoon {
  width: var(--pp-icoon); height: var(--pp-icoon); flex: none; fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: middle;
}
.icoon.klein { width: var(--pp-icoon-klein); height: var(--pp-icoon-klein); }
.icoon.groot { width: var(--pp-icoon-groot); height: var(--pp-icoon-groot); }
.spring {
  position: absolute; left: var(--pp-r-3); top: -60px; z-index: 100; padding: var(--pp-r-2) var(--pp-r-4);
  background: var(--pp-vlak); color: var(--pp-tekst); border-radius: var(--pp-straal-m); font-weight: var(--pp-gewicht-half);
}
.spring:focus { top: var(--pp-r-3); }

/* een toets: kbd, of een element met de klasse toets */
kbd, .toets {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
  border: 1px solid var(--pp-rand-sterk); border-bottom-width: 2px; border-radius: var(--pp-toets-straal); background: var(--pp-vlak);
  color: var(--pp-tekst-2); font: var(--pp-gewicht-half) var(--pp-maat-xs)/1 var(--pp-letter); font-variant-numeric: tabular-nums;
  white-space: nowrap; vertical-align: middle;
}

/* ---------------------------------------------------------------- de schil */

.schil {
  display: grid; grid-template-columns: var(--pp-rail) minmax(0, 1fr); grid-template-rows: var(--pp-balk) minmax(0, 1fr);
  min-height: 100vh; min-height: 100dvh; background: var(--pp-schil); color: var(--pp-schil-tekst);
}

/* de navigatie links: Start en de acht gebieden, met hun cijfertoets; blijft staan als de pagina schuift */
.rail {
  grid-row: 1 / 3; grid-column: 1; position: sticky; top: 0; align-self: start; z-index: 35;
  display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 0; padding: 0 var(--pp-r-3) var(--pp-r-3);
  overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--pp-schil-rand) transparent; background: var(--pp-schil);
}
.rail :focus-visible, .bovenbalk :focus-visible { box-shadow: var(--pp-ring-schil); }
.merk { display: flex; align-items: center; height: var(--pp-balk); padding: 0 var(--pp-r-2); flex: none; border-radius: var(--pp-straal-s); text-decoration: none; color: var(--pp-schil-tekst); }
.merkteken { display: block; height: 26px; width: auto; }
.rail-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.rail-item {
  position: relative; display: flex; align-items: center; gap: var(--pp-r-3); height: 38px; padding: 0 var(--pp-r-2) 0 10px;
  border-radius: var(--pp-straal-m); color: var(--pp-schil-tekst-2); text-decoration: none; font-weight: var(--pp-gewicht-half);
  font-size: var(--pp-maat-basis); transition: background var(--pp-duur-1) var(--pp-gang), color var(--pp-duur-1) var(--pp-gang);
}
.rail-item:hover { background: var(--pp-schil-hover); color: var(--pp-schil-tekst); }
.rail-item.aan { background: var(--pp-schil-2); color: var(--pp-schil-tekst); }
/* het rode merk van het gekozen gebied: de enige plek waar rood in de schil staat */
.rail-item.aan::before {
  content: ""; position: absolute; left: calc(-1 * var(--pp-r-3)); top: 9px; bottom: 9px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--pp-accent);
}
.rail-naam { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail kbd, .bovenbalk kbd { background: var(--pp-schil-toets-vlak); border-color: var(--pp-schil-toets-rand); color: var(--pp-schil-tekst-2); }
.rail-item.aan kbd { color: var(--pp-schil-tekst); border-color: var(--pp-schil-toets-rand-aan); }
.rail-sub { list-style: none; margin: 2px 0 var(--pp-r-2); padding: 0 0 0 40px; display: flex; flex-direction: column; gap: 1px; }
.rail-sub a, .rail-sub .volgt {
  display: flex; align-items: center; gap: var(--pp-r-2); min-height: 30px; padding: 0 var(--pp-r-2); border-radius: var(--pp-straal-s);
  color: var(--pp-schil-tekst-2); text-decoration: none; font-size: var(--pp-maat-m);
}
.rail-sub a:hover { background: var(--pp-schil-hover); color: var(--pp-schil-tekst); }
.rail-sub a.aan { color: var(--pp-schil-tekst); font-weight: var(--pp-gewicht-half); background: var(--pp-schil-hover); }
/* nog niet gebouwd: het merkje volgt, de naam in de gedempte tekst van de schil (minstens 7:1) */
.rail-sub .volgt { cursor: default; }
.rail-sub .volgt-label { margin-left: auto; }
.rail-sub .teller { margin-left: auto; }
.rail-voet {
  margin-top: auto; padding-top: var(--pp-r-3); display: flex; align-items: center; gap: var(--pp-r-2);
  border-top: 1px solid var(--pp-schil-rand); color: var(--pp-schil-tekst-2); font-size: var(--pp-maat-s);
}
.rail-voet .rechts { margin-left: auto; }
/* de naam en de versie op de navy schil: de tekstkleur van de schil (--pp-tekst-3 van .sub haalt op navy maar 2,9:1) */
.rail-voet .sub { color: inherit; }
.schilknop {
  display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border: 1px solid transparent; border-radius: var(--pp-straal-m);
  background: none; color: var(--pp-schil-tekst-2); cursor: pointer; padding: 0;
}
.schilknop:hover { background: var(--pp-schil-hover); color: var(--pp-schil-tekst); }
.menuknop { display: none; }

/* de bovenbalk: kruimels, zoeken (het opdrachtenpalet), het merk van de omgeving, de live stand en de gebruiker */
.bovenbalk {
  grid-column: 2; grid-row: 1; position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--pp-r-4); min-width: 0; height: var(--pp-balk);
  padding: 0 var(--pp-r-5) 0 var(--pp-r-2); background: var(--pp-schil); color: var(--pp-schil-tekst);
}
/* de afgeronde hoek van het werkblad blijft staan als de pagina eronder schuift */
.bovenbalk::after {
  content: ""; position: absolute; left: 0; top: 100%; width: var(--pp-straal-xl); height: var(--pp-straal-xl);
  background: var(--pp-schil-hoek-vlak); pointer-events: none;
}
.kruimels { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; font-size: var(--pp-maat-m); color: var(--pp-schil-tekst-2); }
.kruimels a, .kruimels .hier { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kruimels a { color: var(--pp-schil-tekst-2); text-decoration: none; flex: 0 6 auto; border-radius: 4px; }
.kruimels a:hover { color: var(--pp-schil-tekst); text-decoration: underline; }
.kruimels .hier { color: var(--pp-schil-tekst); font-weight: var(--pp-gewicht-half); flex: 0 1 auto; }
.kruimels .scheiding { color: var(--pp-schil-tekst-2); flex: none; }
/* samenvoegen 2 (10-10-2026): met de live stand erbij kortte elk deel van de kruimels af (een paar pixels te weinig gaf
 * al vier beletseltekens); nu krimpt eerst het zoekveld, tot 180 px, en pas daarna de kruimels */
.zoekstart {
  display: flex; align-items: center; gap: var(--pp-r-2); flex: 0 1000 340px; min-width: 0; height: 34px; margin-left: auto;
  padding: 0 var(--pp-r-2) 0 10px; border: 1px solid var(--pp-schil-rand); border-radius: var(--pp-straal-m);
  background: var(--pp-zoekstart-vlak); color: var(--pp-schil-tekst-2); font-size: var(--pp-maat-m); cursor: pointer; text-align: left;
  transition: background var(--pp-duur-1) var(--pp-gang), border-color var(--pp-duur-1) var(--pp-gang);
}
.zoekstart:hover { background: var(--pp-zoekstart-vlak-hover); border-color: var(--pp-zoekstart-rand-hover); color: var(--pp-schil-tekst); }
.zoekstart-tekst { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zoekstart kbd + kbd { margin-left: -4px; }
@media (min-width: 761px) { .zoekstart { min-width: 180px; } }
/* samenvoegen 09-10-2026 (verzoek 1 van pakket C): alleen de merkjes in de bovenbalk; td.merkjes in een tabel blijft een
   gewone cel */
#merkjes, .bovenbalk .merkjes { display: flex; align-items: center; gap: var(--pp-r-2); flex: none; }
#merkjes:empty, .bovenbalk .merkjes:empty { display: none; }
td.kenmerken .merkje { margin: 0 var(--pp-r-1) 3px 0; }

/* de live stand van Prindustry (een knop: opent het koppelvenster) */
.livestand {
  display: inline-flex; align-items: center; gap: var(--pp-r-2); height: 34px; padding: 0 var(--pp-r-3) 0 10px;
  border: 1px solid var(--pp-schil-rand); border-radius: var(--pp-straal-m); background: none; color: var(--pp-schil-tekst);
  font-size: var(--pp-maat-m); font-weight: var(--pp-gewicht-half); white-space: nowrap; cursor: pointer; text-decoration: none;
}
.livestand:hover { background: var(--pp-schil-hover); }
.livestand .sub { color: var(--pp-schil-tekst-2); font-weight: var(--pp-gewicht); font-variant-numeric: tabular-nums; }
.stip { position: relative; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--pp-live); }
.stip::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; opacity: .55;
  animation: pp-pols 2.4s var(--pp-gang) infinite;
}
.stip.wacht { background: var(--pp-wacht); }
.stip.uit { background: var(--pp-stip-uit); }
.stip.uit::after { animation: none; opacity: 0; }
@keyframes pp-pols { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(2.6); opacity: 0; } }

/* het merk van de omgeving (OTAP): productie toont niets, elke andere omgeving zegt wat hij is */
.omgeving {
  display: inline-flex; align-items: center; height: 24px; padding: 0 var(--pp-r-2); border: 1px solid var(--pp-wacht);
  border-radius: var(--pp-straal-s); color: var(--pp-schil-tekst); font: var(--pp-gewicht-vet) var(--pp-maat-xs)/1 var(--pp-letter);
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; flex: none;
}
.omgeving::before { content: ""; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--pp-wacht); }

.gebruiker { display: flex; align-items: center; gap: var(--pp-r-2); flex: none; text-decoration: none; color: inherit; border-radius: var(--pp-straal-m); padding: 2px; }
.gebruikerknop {
  display: flex; align-items: center; gap: var(--pp-r-2); min-width: 0; padding: 2px var(--pp-r-2) 2px 2px; border: 0;
  border-radius: var(--pp-straal-m); background: none; color: inherit; text-align: left; cursor: pointer;
}
.gebruikerknop:hover { background: var(--pp-schil-hover); }
/* het menu van de gebruiker opent naar beneden, rechts uitgelijnd */
.gebruiker .menu { top: calc(100% + 6px); bottom: auto; left: auto; right: 0; z-index: 40; }
.bol {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%;
  background: var(--pp-schil-2); border: 1px solid var(--pp-schil-rand); color: var(--pp-schil-tekst);
  font-size: var(--pp-maat-s); font-weight: var(--pp-gewicht-vet); letter-spacing: .02em;
}
.ik { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.ik-naam { color: var(--pp-schil-tekst); font-size: var(--pp-maat-m); font-weight: var(--pp-gewicht-half); white-space: nowrap; }
a.ik-naam { text-decoration: none; }
a.ik-naam:hover, a.ik-naam:focus-visible { text-decoration: underline; }
.ik-rol { color: var(--pp-schil-tekst-2); font-size: var(--pp-maat-xs); white-space: nowrap; }
.bovenbalk .knop.grijs, .bovenbalk .knop.esc { background: transparent; border-color: var(--pp-schil-rand); color: var(--pp-schil-tekst); }
.bovenbalk .knop.grijs:hover { background: var(--pp-schil-hover); }

/* het werkblad: de lichte inhoud in de navy schil */
.werkvlak {
  grid-column: 2; grid-row: 2; min-width: 0; min-height: calc(100vh - var(--pp-balk)); min-height: calc(100dvh - var(--pp-balk));
  padding: var(--pp-r-5) var(--pp-r-6) var(--pp-r-6); background: var(--pp-canvas); color: var(--pp-tekst);
  border-top-left-radius: var(--pp-straal-xl);
}
.werkvlak:focus { outline: none; }
.sluier { display: none; }

/* ---------------------------------------------------------------- het scherm (venster) */

.scherm {
  display: flex; flex-direction: column; min-height: calc(100vh - var(--pp-balk) - var(--pp-r-5) - var(--pp-r-6));
  background: var(--pp-vlak); border: 1px solid var(--pp-rand); border-radius: var(--pp-kaart-straal); box-shadow: var(--pp-schaduw-1);
}
.titelbalk {
  position: sticky; top: var(--pp-balk); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: var(--pp-r-2) var(--pp-r-3);
  min-height: 60px; padding: var(--pp-r-3) var(--pp-r-5); background: var(--pp-vlak);
  border-bottom: 1px solid var(--pp-rand); border-radius: var(--pp-kaart-straal) var(--pp-kaart-straal) 0 0;
}
/* het rode merk van een venster: zo herken je in een blik waar de titel staat */
.titelbalk::before { content: ""; align-self: stretch; width: 4px; flex: none; margin: 2px 0; border-radius: 2px; background: var(--pp-accent); }
.titelbalk-tekst {
  display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 0 1 auto; margin: 0;
  max-width: calc(100% - 4px - var(--pp-r-3));   /* blijft naast het rode merk, ook als de titelbalk afbreekt */
  font: var(--pp-gewicht-half) var(--pp-maat-xl)/var(--pp-regel-kop) var(--pp-letter-kop); color: var(--pp-kop); letter-spacing: -.01em;
}
.titelbalk-soort {
  color: var(--pp-tekst-3); font: var(--pp-gewicht-half) var(--pp-maat-xs)/1.2 var(--pp-letter); letter-spacing: .08em; text-transform: uppercase;
}
.titelbalk-soort:empty { display: none; }
.titelbalk-naam { overflow-wrap: anywhere; }
.titelbalk-naam:empty { display: none; }
.titelbalk-bij { display: flex; align-items: center; gap: var(--pp-r-2); flex-wrap: wrap; min-width: 0; color: var(--pp-tekst-2); font-size: var(--pp-maat-m); }
.titelbalk-rechts { display: flex; align-items: center; gap: var(--pp-r-2); flex-wrap: wrap; margin-left: auto; }
.scherminhoud { flex: 1; min-width: 0; padding: var(--pp-r-5); outline: none; }
.knoppenrij {
  position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; gap: var(--pp-r-3);
  padding: 10px var(--pp-r-4); background: var(--pp-vlak); border-top: 1px solid var(--pp-rand);
  border-radius: 0 0 var(--pp-kaart-straal) var(--pp-kaart-straal);
}
.knoppenrij-links { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; flex-wrap: nowrap; }
.knoppenrij-rechts { display: flex; gap: var(--pp-r-2); margin-left: auto; flex: none; }
.knoppenrij .scheiding { width: 1px; height: 20px; flex: none; margin: 0 var(--pp-r-1); background: var(--pp-rand); }
.knoppenrij .knop.apart { margin-left: var(--pp-r-2); }
/* de knoppenrij meet wat past (MK.actiemenu): wat niet past, staat onder Meer */
.knoppenrij-links > .knop.past-niet { display: none; }
.scherm-kaal { min-height: 100%; }
.scherm-kaal .scherminhoud { padding: 0; }

/* Meer: de acties die niet in de rij passen (eerst de acties van de modules, de rij van MultiPress blijft staan) */
.actiemenu { position: relative; flex: none; }
.actiemenu[hidden] { display: none; }
.menu {
  position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 30; display: flex; flex-direction: column; gap: 2px; min-width: 210px;
  max-height: 60vh; overflow: auto; padding: 6px; background: var(--pp-vlak); border: 1px solid var(--pp-rand);
  border-radius: var(--pp-kaart-straal); box-shadow: var(--pp-schaduw-2); animation: pp-op var(--pp-duur-1) var(--pp-gang);
}
.menu button, .menu a {
  display: flex; align-items: center; gap: var(--pp-r-2); height: 32px; padding: 0 10px; border: 0; border-radius: var(--pp-straal-s);
  background: none; color: var(--pp-tekst); font-size: var(--pp-maat-m); font-weight: var(--pp-gewicht-half); text-align: left;
  text-decoration: none; white-space: nowrap; cursor: pointer; flex: none;
}
.menu button:hover, .menu a:hover, .menu button:focus-visible, .menu a:focus-visible { background: var(--pp-vlak-hover); }
.menu button:disabled { color: var(--pp-tekst-3); cursor: default; background: none; }
.actiemenu.alleen-telefoon { display: none; }

/* ---------------------------------------------------------------- knoppen */

.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; height: var(--pp-knop-hoogte);
  padding: 0 var(--pp-r-3); border: 1px solid var(--pp-rand-sterk); border-radius: var(--pp-knop-straal);
  background: var(--pp-vlak); color: var(--pp-tekst); font-size: var(--pp-maat-m); font-weight: var(--pp-gewicht-half);
  line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--pp-duur-1) var(--pp-gang), border-color var(--pp-duur-1) var(--pp-gang), transform var(--pp-duur-1) var(--pp-gang);
}
.knop:hover { background: var(--pp-vlak-2); border-color: var(--pp-invoer-rand); }
.knop:active { transform: translateY(1px); }
.knop:focus-visible { box-shadow: var(--pp-ring); border-radius: var(--pp-knop-straal); }
.knop kbd { height: 18px; min-width: 18px; margin-right: -4px; background: var(--pp-vlak-2); border-bottom-width: 1px; }
.knop .icoon { width: 16px; height: 16px; }
/* de hoofdactie: rood (ENTER, en .p voor een andere hoofdactie) */
.knop.enter, .knop.p { background: var(--pp-accent); border-color: var(--pp-accent); color: var(--pp-op-accent); }
.knop.enter:hover, .knop.p:hover { background: var(--pp-accent-hover); border-color: var(--pp-accent-hover); }
.knop.enter:active, .knop.p:active { background: var(--pp-accent-actief); border-color: var(--pp-accent-actief); }
.knop.enter kbd, .knop.p kbd, .knop.nieuw kbd { background: var(--pp-op-vol-toets-vlak); border-color: var(--pp-op-vol-toets-rand); color: var(--pp-wit); }
/* het teken van de toets Enter op de rode knop: alleen beeld (de tekst van de knop blijft ENTER) */
.knop.enter::after {
  content: "\21B5"; display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-right: -4px; padding: 0 4px;
  border: 1px solid var(--pp-op-vol-toets-rand); border-radius: var(--pp-toets-straal); background: var(--pp-op-vol-toets-vlak);
  font-size: var(--pp-maat-xs); line-height: 1;
}
.knop.enter:has(kbd)::after { content: none; }
/* de tweede actie: navy (Nieuw) */
.knop.nieuw { background: var(--pp-navy); border-color: var(--pp-navy); color: var(--pp-op-navy); }
.knop.nieuw:hover { background: var(--pp-navy-hover); border-color: var(--pp-navy-hover); }
.knop.esc, .knop.grijs { background: transparent; color: var(--pp-tekst-2); }
.knop.esc:hover, .knop.grijs:hover { background: var(--pp-vlak-2); color: var(--pp-tekst); }
.knop.esc, .knop.enter { min-width: 104px; letter-spacing: .04em; }
.knop.groen { background: var(--pp-ok-vol); border-color: var(--pp-ok-vol); color: var(--pp-wit); }
.knop.groen:hover { background: var(--pp-ok-tekst); border-color: var(--pp-ok-tekst); color: var(--pp-vlak); }
.knop.gevaar { color: var(--pp-fout-tekst); border-color: var(--pp-fout-rand); }
.knop.gevaar:hover { background: var(--pp-fout-vlak); border-color: var(--pp-fout-tekst); }
.knop.gevaar-vol { background: var(--pp-gevaar-vol); border-color: var(--pp-gevaar-vol); color: var(--pp-wit); }
.knop.gevaar-vol:hover { background: var(--pp-gevaar-vol); border-color: var(--pp-gevaar-vol); }
.knop.klein { height: 26px; padding: 0 10px; font-size: var(--pp-maat-s); }
.knop.klein.enter, .knop.klein.esc { min-width: 0; }
.knop.mini { height: 22px; padding: 0 var(--pp-r-2); font-size: var(--pp-maat-xs); border-radius: var(--pp-straal-s); }
.knop.vol { width: 100%; height: 40px; font-size: var(--pp-maat-basis); margin-top: 6px; }
.knop.kaal { border-color: transparent; background: transparent; color: var(--pp-link); padding: 0 var(--pp-r-2); }
.knop.kaal:hover { background: var(--pp-vlak-hover); }
.knop:disabled, .knop[aria-disabled="true"] { opacity: .45; cursor: default; transform: none; }
.knop.bezig { cursor: progress; }
.knop.bezig::before {
  content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
  animation: pp-draai .7s linear infinite;
}
@keyframes pp-draai { to { transform: rotate(360deg); } }
.knoppen { display: flex; gap: var(--pp-r-2); flex-wrap: wrap; align-items: center; margin-top: var(--pp-r-3); }
.knoppen .rechts { margin-left: auto; display: flex; gap: var(--pp-r-2); }
.tabknoppen { display: flex; gap: var(--pp-r-2); flex-wrap: wrap; align-items: center; margin: 0 0 10px; }
.tabknoppen.onder { margin: 10px 0 0; }
.linkknop {
  border: 0; background: none; padding: 0; color: var(--pp-link); cursor: pointer; text-align: left; font-weight: var(--pp-gewicht-half);
  overflow-wrap: anywhere;
}
.linkknop:hover { text-decoration: underline; }
a.plat { color: var(--pp-link); text-decoration: none; cursor: pointer; }
a.plat:hover { text-decoration: underline; }
a.plat.nummer { font-weight: var(--pp-gewicht-half); font-variant-numeric: tabular-nums; }
a.plat.klein { font-size: var(--pp-maat-s); font-weight: var(--pp-gewicht); }
/* een keuze uit enkele (Ik, Mijn team, Iedereen): een rij knoppen die samen een vlak vormen */
.keuzerij { display: inline-flex; padding: 2px; gap: 2px; border-radius: var(--pp-straal-m); background: var(--pp-vlak-2); border: 1px solid var(--pp-rand); }
.keuzerij .knop { height: 26px; border-color: transparent; background: transparent; color: var(--pp-tekst-2); border-radius: 7px; font-size: var(--pp-maat-s); }
/* optimalisatie 2.0 (ONTW-04): de gekozen stand is navy met witte tekst (zoals de gekozen regel) en een rand in de kleur
 * van een kop; die rand haalt op de baan 9,5:1 (licht) en 15,5:1 (donker), de tekst 11:1 en 8,2:1 (contrast.py). Start en
 * het dashboard gebruiken dezelfde keuze (MK.keuzerij). */
.keuzerij .knop[aria-pressed="true"] { background: var(--pp-gekozen-vlak); color: var(--pp-gekozen-tekst); border-color: var(--pp-kop); }
.keuzerij .knop[aria-pressed="true"]:hover { background: var(--pp-gekozen-vlak); }

/* ---------------------------------------------------------------- merkjes en tellers */

.merkje {
  display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 var(--pp-r-2); border: 1px solid transparent;
  border-radius: var(--pp-merkje-straal); font-size: var(--pp-maat-xs); font-weight: var(--pp-gewicht-half); line-height: 1;
  white-space: nowrap; vertical-align: middle; background: var(--pp-neutraal-vlak); color: var(--pp-neutraal-tekst);
}
.merkje .icoon { width: 12px; height: 12px; stroke-width: 2; }
.m-groen { background: var(--pp-ok-vlak); color: var(--pp-ok-tekst); border-color: var(--pp-ok-rand); }
.m-geel, .m-oranje { background: var(--pp-let-vlak); color: var(--pp-let-tekst); border-color: var(--pp-let-rand); }
.m-blauw { background: var(--pp-info-vlak); color: var(--pp-info-tekst); border-color: var(--pp-info-rand); }
.m-licht { background: var(--pp-vlak); color: var(--pp-info-tekst); border-color: var(--pp-info-tekst); }
.m-rood { background: var(--pp-fout-vlak); color: var(--pp-fout-tekst); border-color: var(--pp-fout-rand); }
.m-grijs { background: var(--pp-neutraal-vlak); color: var(--pp-neutraal-tekst); border-color: var(--pp-neutraal-rand); }
.m-donker { background: var(--pp-navy); color: var(--pp-op-navy); border-color: var(--pp-navy); }
.m-paars { background: var(--pp-portaal-vlak); color: var(--pp-portaal-tekst); border-color: var(--pp-portaal-rand); }
.teller, .tabs .telt {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--pp-merkje-straal);
  background: var(--pp-accent); color: var(--pp-op-accent); font-size: var(--pp-tellergrootte); font-weight: var(--pp-gewicht-vet); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.teller.stil { background: var(--pp-neutraal-vlak); color: var(--pp-neutraal-tekst); }
.rail .teller.stil { background: var(--pp-schil-teller-stil); color: var(--pp-schil-tekst); }
/* het merkje "volgt" in de kleur van zijn regel (niet doorzichtig: dan haalt het geen 4,5:1) */
.volgt-label {
  display: inline-block; padding: 0 6px; border: 1px solid currentColor; border-radius: var(--pp-merkje-straal);
  font-size: var(--pp-tellergrootte); font-weight: var(--pp-gewicht-half); line-height: 1.5;
}
.volgt-blok {
  display: flex; align-items: baseline; gap: 10px; padding: var(--pp-r-4); border: 1px dashed var(--pp-rand-sterk); border-radius: var(--pp-straal-m);
  background: var(--pp-vlak-2); color: var(--pp-tekst-2);
}
.volgt-blok p { margin: 0; }

/* ---------------------------------------------------------------- meldingen */

.meldingen {
  position: fixed; top: calc(var(--pp-balk) + var(--pp-r-3)); right: var(--pp-r-5); z-index: 70; display: flex; flex-direction: column;
  gap: var(--pp-r-2); width: min(420px, calc(100vw - 32px)); pointer-events: none;
}
.meldingen .melding { pointer-events: auto; box-shadow: var(--pp-schaduw-2); animation: pp-in var(--pp-duur-2) var(--pp-gang); margin: 0; }
.melding, .let, .tip, .info {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 0 var(--pp-r-3); padding: 10px var(--pp-r-3);
  border: 1px solid var(--pp-rand); border-left-width: 3px; border-radius: var(--pp-straal-m);
  background: var(--pp-vlak); color: var(--pp-tekst); font-size: var(--pp-maat-m); overflow-wrap: anywhere;
}
/* een melding met losse tekst en een lijst eronder (zonder .tekst) blijft een blok */
.let:not(:has(> .tekst)), .tip:not(:has(> .tekst)), .info:not(:has(> .tekst)) { display: block; }
.melding > .icoon, .let > .icoon, .tip > .icoon, .info > .icoon { margin-top: 1px; }
.melding .tekst, .let .tekst, .tip .tekst, .info .tekst { flex: 1; min-width: 0; display: block; }
.melding .tekst::first-letter { text-transform: uppercase; }
.melding.ok, .tip { background: var(--pp-ok-vlak); border-color: var(--pp-ok-rand); border-left-color: var(--pp-ok-tekst); }
.melding.ok > .icoon, .tip > .icoon { color: var(--pp-ok-tekst); }
.melding.fout, .let { background: var(--pp-fout-vlak); border-color: var(--pp-fout-rand); border-left-color: var(--pp-fout-tekst); }
.melding.fout > .icoon, .let > .icoon { color: var(--pp-fout-tekst); }
.melding.aandacht, .let.geel { background: var(--pp-let-vlak); border-color: var(--pp-let-rand); border-left-color: var(--pp-let-tekst); }
.melding.aandacht > .icoon, .let.geel > .icoon { color: var(--pp-let-tekst); }
.info { background: var(--pp-info-vlak); border-color: var(--pp-info-rand); border-left-color: var(--pp-info-tekst); }
.info > .icoon { color: var(--pp-info-tekst); }
.let ul, .tip ul, .info ul { margin: 4px 0 0; padding-left: 18px; }
.let li, .tip li, .info li { margin: 2px 0; }
.let.klein { font-size: var(--pp-maat-s); padding: 6px 10px; }
.let.klein ul { margin: 0; }
/* een grijze bijzin in een melding krijgt de tekstkleur van die melding (contrast, docs/HUISSTIJL.md) */
.let .sub, .tip .sub, .info .sub, .melding .sub, .let .hulp, .tip .hulp, .info .hulp, .melding .hulp,
.let .uitleg, .tip .uitleg, .info .uitleg, .melding .uitleg, .let .leeg, .tip .leeg, .info .leeg { color: inherit; }
/* twee meldingen naast elkaar boven de tabbladen: zo blijft de tabel in beeld */
.meldingrij { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--pp-r-3); margin-top: var(--pp-r-4); }
.meldingrij > * { margin: 0; }
/* een melding op een regel in de meldingrij (optimalisatie 2.0, ONTW-02; zoals de order): de kop en de eerste zin, met
 * Lees alles erachter (MK.inklappen) */
.melding-kort > .tekst { display: flex; align-items: baseline; gap: var(--pp-r-2); min-width: 0; }
.melding-kort > .tekst > .inklapknop { flex: none; }
.melding-kort > .tekst > strong { flex: 0 1 auto; max-width: 60%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.melding-kort > .tekst > ul, .melding-kort > .tekst > p, .melding-kort > .tekst > .tekstblok { flex: 1 1 0; min-width: 0; margin: 0; padding: 0; list-style: none; }
.melding-kort li:nth-child(n+2), .melding-kort .tekst > p:nth-of-type(n+2) { display: none; }
.melding-kort li, .melding-kort .tekst > p, .melding-kort .tekstblok { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inklapknop { margin-left: var(--pp-r-1); }
.sluitkruis {
  display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border: 0; border-radius: var(--pp-straal-s);
  background: none; color: inherit; opacity: .7; cursor: pointer; padding: 0; font-size: var(--pp-maat-l); line-height: 1;
}
.sluitkruis:hover { opacity: 1; background: var(--pp-vlak-hover); }
@keyframes pp-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- formulieren */

/* :where houdt de regel licht (0,0,1): een component kan een veld aanpassen zonder de :not-reeks te herhalen */
input:where(:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]):not([type=range]):not([type=color])),
select, textarea {
  height: var(--pp-veld-hoogte); min-width: 0; padding: 0 10px; border: 1px solid var(--pp-invoer-rand);
  border-radius: var(--pp-veld-straal); background: var(--pp-vlak); color: var(--pp-tekst); font-size: var(--pp-maat-m);
  transition: border-color var(--pp-duur-1) var(--pp-gang), box-shadow var(--pp-duur-1) var(--pp-gang);
}
select[multiple], select[size] { height: auto; padding: var(--pp-r-1); }
textarea { height: auto; padding: 6px 10px; line-height: var(--pp-regel); resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--pp-tekst-3); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: var(--pp-tekst-3); }
input:focus, select:focus, textarea:focus,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--pp-focus); box-shadow: var(--pp-ring-zacht); border-radius: var(--pp-veld-straal);
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--pp-vlak-2); border-color: var(--pp-rand); color: var(--pp-tekst-2); cursor: default; opacity: 1;
}
input.fout, select.fout, textarea.fout { border-color: var(--pp-fout-tekst) !important; background: var(--pp-fout-vlak) !important; }
input.getal { text-align: right; font-variant-numeric: tabular-nums; }
input[type=checkbox], input[type=radio] { width: 16px; height: 16px; margin: 0; accent-color: var(--pp-navy); flex: none; }

/* het veldraster van een venster: het label links, zoals in MultiPress */
.raster { display: grid; gap: var(--pp-r-2) var(--pp-r-8); align-items: start; }
.raster-1 { grid-template-columns: minmax(0, 1fr); }
.raster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster-invoer.raster-3 { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); }
.rkolom { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rveld { display: grid; grid-template-columns: 124px minmax(0, 1fr); align-items: start; gap: var(--pp-r-3); min-height: var(--pp-veld-hoogte); }
.rveld.boven { grid-template-columns: minmax(0, 1fr); gap: 3px; }
.rlabel {
  color: var(--pp-tekst-2); font-size: var(--pp-maat-m); font-weight: var(--pp-gewicht-half); text-align: right;
  padding-top: 7px; overflow-wrap: anywhere;
}
.rveld.boven .rlabel { text-align: left; padding-top: 0; }
.rinvoer { display: flex; align-items: center; flex-wrap: wrap; gap: var(--pp-r-1) var(--pp-r-2); min-width: 0; font-size: var(--pp-maat-m); min-height: var(--pp-veld-hoogte); }
.rinvoer.rij { flex-wrap: nowrap; }
.rinvoer.rij > a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rinvoer > input:not([type=checkbox]):not([type=radio]), .rinvoer > select, .rinvoer > textarea { flex: 1 1 100%; width: 100%; }
.rinvoer > input.kort, .rinvoer > select.kort { flex: 0 1 170px; max-width: 170px; }
.rinvoer > .vinkje, .rinvoer > .vinkjes { flex: 1 1 100%; }
.rinvoer .vinkjes { margin-top: 2px; }
.rwaarde { display: block; padding: 6px 0 3px; color: var(--pp-tekst); font-size: var(--pp-maat-m); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rinvoer > .rwaarde { flex: 1 1 100%; }
.hulp { flex: 1 1 100%; color: var(--pp-tekst-3); font-size: var(--pp-maat-s); margin-top: 3px; }
.foutregel { flex: 1 1 100%; color: var(--pp-fout-tekst); font-size: var(--pp-maat-s); font-weight: var(--pp-gewicht-half); }
/* de foutregel onder een veld dat zelf in een blok staat (een gestapeld veld, een vinkje): een eigen regel */
.veld > .foutregel, .vinkje + .foutregel { display: block; margin-top: 3px; }
/* een datum is een veld (MK.datumvak, optimalisatie 2.0): DD-MM-JJJJ, met de kalender achter een knop buiten de
 * Tab-volgorde; de datumkiezer van de browser zelf is onzichtbaar en opent alleen vanuit die knop */
.rinvoer.met-naast > input.datumvak { flex: 1 1 0; width: auto; min-width: 0; }
/* in een eigen rij van een scherm (een datum met een tijd of een vinkje ernaast) zo breed als een datum */
:not(.rinvoer) > input.datumvak { flex: 0 1 104px; width: auto; }
:not(.rinvoer) > input.datumvak.met-tijd { flex-basis: 168px; }
input.datumvak { font-variant-numeric: tabular-nums; min-width: 11ch; }
input.datumvak.met-tijd { min-width: 17ch; }
.datumvak-naast { position: relative; display: inline-flex; flex: none; }
.datumknop {
  display: inline-grid; place-items: center; width: 30px; height: var(--pp-veld-hoogte); padding: 0; flex: none;
  border: 1px solid var(--pp-invoer-rand); border-radius: var(--pp-veld-straal); background: var(--pp-vlak); color: var(--pp-tekst-2); cursor: pointer;
}
.datumknop:hover { background: var(--pp-vlak-2); color: var(--pp-tekst); }
.datumknop:disabled { opacity: .45; cursor: default; }
.datumkiezer { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.invoerblok { min-width: 0; }
/* gestapeld veld: het label boven (inlogscherm, zoekbalk, smalle schermen) */
.veld { display: flex; flex-direction: column; gap: var(--pp-r-1); min-width: 0; margin-bottom: 11px; }
.veld > label, .veld > legend, .veld .label, .labelrij label, .zoekveld > label {
  display: block; color: var(--pp-tekst-2); font-size: var(--pp-maat-s); font-weight: var(--pp-gewicht-half);
}
fieldset.veld { border: 0; padding: 0; margin: 0 0 11px; }
fieldset.veld > legend { padding: 0; margin-bottom: 3px; }
.veld input:not([type=checkbox]):not([type=radio]), .veld select, .veld textarea, .toevoegen select { width: 100%; }
.veld textarea { min-height: 40px; }
.veld.inline { flex-direction: row; align-items: center; gap: var(--pp-r-2); margin: 0; }
.veld.inline label { margin: 0; font-size: var(--pp-maat-s); }
.veld.inline select { width: auto; min-width: 150px; }
input.kort { max-width: 140px; }
.vinkje { display: inline-flex; align-items: flex-start; gap: var(--pp-r-2); font-size: var(--pp-maat-m); margin: 5px 0; cursor: pointer; }
.vinkje input { margin: 1px 0 0; }
.vinkje input:disabled + span { color: var(--pp-tekst-2); }
.vinkjes { margin-top: 4px; }
.vinkje.inline { display: inline-flex; margin: 3px 0 0; font-weight: var(--pp-gewicht-half); font-size: var(--pp-maat-s); }
.oplagen { display: flex; gap: var(--pp-r-2); width: 100%; }
.oplagen input { flex: 1; min-width: 0; text-align: right; }
.filterbalk { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--pp-r-3); margin-bottom: var(--pp-r-2); }
.filterbalk .veld.breed { flex: 1; max-width: 460px; }
.filterbalk .veld { min-width: 180px; margin-bottom: 0; }

/* ---------------------------------------------------------------- tabbladen */

.tabbladen { margin-top: var(--pp-r-5); }
.tabrij {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--pp-rand);
  padding: 4px 4px 0; margin: 0 -4px;
}
.tabrij::-webkit-scrollbar { display: none; }
/* optimalisatie 2.0 (ONTW-03): passen de tabbladen niet, dan staat rechts Meer met het aantal tabbladen buiten beeld (rood
 * als daar een teller bij is); Meer opent een menu met die tabbladen. Zo is te zien dat er meer is. */
.tabkop { display: flex; align-items: flex-end; min-width: 0; }
.tabkop > .tabrij { flex: 1 1 auto; min-width: 0; }
.tabmeervak { position: relative; flex: none; border-bottom: 1px solid var(--pp-rand); padding-top: 4px; }
.tabmeervak[hidden] { display: none; }
.tabmeervak .tabmeer { color: var(--pp-tekst); }
.tabmeervak .menu { top: calc(100% + 4px); bottom: auto; left: auto; right: 0; }
.tabmeervak .menu .teller { margin-left: auto; }
.tabblad, .tabs button {
  position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none; height: 36px; padding: 0 var(--pp-r-3);
  border: 0; border-radius: var(--pp-straal-s) var(--pp-straal-s) 0 0; background: none; color: var(--pp-tekst-2);
  font-size: var(--pp-maat-m); font-weight: var(--pp-gewicht-half); cursor: pointer; white-space: nowrap;
}
.tabblad:hover, .tabs button:hover { background: var(--pp-vlak-2); color: var(--pp-tekst); }
.tabblad.aan, .tabs button.aan { color: var(--pp-kop); }
/* het gekozen tabblad: de rode lijn die Xerox onder een gekozen menu-item zet */
.tabblad.aan::after, .tabs button.aan::after {
  content: ""; position: absolute; left: var(--pp-r-2); right: var(--pp-r-2); bottom: -1px; height: 3px; border-radius: 3px 3px 0 0;
  background: var(--pp-accent);
}
/* een tabblad dat nog volgt: minder vet en met het merkje volgt (tekst-3 haalt 5,6:1) */
.tabblad.volgt, .tabblad.volgt.aan { color: var(--pp-tekst-3); font-weight: var(--pp-gewicht); }
.tabpaneel { padding: var(--pp-r-4) 0 0; outline: none; }
.tabpanelen { min-width: 0; }
.tabs { display: flex; gap: 2px; flex-wrap: wrap; padding: var(--pp-r-2) var(--pp-r-4) 0; border-bottom: 1px solid var(--pp-rand); }
/* een tabblad met invoer die nog niet is opgeslagen: een stip in het accent (de kern zet er ook een title bij) */
.tabblad.gewijzigd::after, .tabs button.gewijzigd::after {
  content: ""; position: static; width: 7px; height: 7px; border-radius: 50%; background: var(--pp-accent); display: inline-block;
}
.tabblad.aan.gewijzigd::after, .tabs button.aan.gewijzigd::after { position: absolute; width: auto; height: 3px; border-radius: 3px 3px 0 0; }

/* ---------------------------------------------------------------- zoekvenster en tabellen */

.zoeklijst { min-width: 0; }
.zoekbalk {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--pp-r-2) var(--pp-r-3); margin-bottom: var(--pp-r-3);
  padding: var(--pp-r-3); border: 1px solid var(--pp-rand); border-radius: var(--pp-straal-m); background: var(--pp-vlak-2);
}
.zoekveld { display: flex; flex-direction: column; gap: var(--pp-r-1); flex: 1 1 120px; max-width: 260px; min-width: 0; }
.zoekveld.smal { flex: 0 1 112px; }
/* samenvoegen 2 (10-10-2026): een datumveld in de zoekbalk is breder dan een smal veld, anders valt de datum weg */
.zoekveld:has(> input[type="date"]) { flex-basis: 150px; min-width: 150px; }
.zoekveld.keuze { flex: 0 1 150px; }
/* optimalisatie 2.0 (ONTW-23): een datum in de zoekbalk past met het voorbeeld DD-MM-JJJJ */
.zoekveld.datum { flex: 0 1 132px; min-width: 132px; }
.zoekveld input, .zoekveld select, .zoekveld .meerknop { width: 100%; }
.zoekvak {
  overflow: auto; max-height: calc(100vh - var(--pp-balk) - 290px); min-height: 180px;
  border: 1px solid var(--pp-rand); border-radius: var(--pp-straal-m); background: var(--pp-vlak);
}
.zoekvak:focus-within { border-color: var(--pp-focus); }
.zoekvak-laag { max-height: 340px; min-height: 0; }
.zoekvak-vrij { max-height: none; min-height: 0; }
table { width: 100%; border-collapse: collapse; font-size: var(--pp-maat-m); }
th {
  padding: 0 var(--pp-r-3); height: 34px; background: var(--pp-vlak-2); color: var(--pp-tekst-2); text-align: left;
  font-size: var(--pp-maat-s); font-weight: var(--pp-gewicht-half); white-space: nowrap; border-bottom: 1px solid var(--pp-rand);
  vertical-align: middle;
}
td { padding: 7px var(--pp-r-3); border-bottom: 1px solid var(--pp-rand-zacht); vertical-align: middle; overflow-wrap: anywhere; }
/* de vulregel van een lange lijst (MK.zoeklijst) krijgt zijn hoogte als attribuut; de regelhoogte geldt voor de rest */
td:where(:not(.vul)) { height: var(--pp-rij-hoogte); }
td.vul { padding: 0; border: 0; }
tbody tr:last-child td { border-bottom: 0; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.nr, th.nr { width: 34px; color: var(--pp-tekst-3); }
td.nummer { font-weight: var(--pp-gewicht-half); font-variant-numeric: tabular-nums; white-space: nowrap; }
td.sub { font-size: var(--pp-maat-s); }
td.leegcel, td.uit, th.uit { color: var(--pp-tekst-3); }
tfoot td, tfoot th { background: var(--pp-vlak-2); border-top: 1px solid var(--pp-rand); border-bottom: 0; font-weight: var(--pp-gewicht-half); color: var(--pp-tekst); }
tfoot tr.totaal th, tfoot tr.totaal td { font-weight: var(--pp-gewicht-vet); color: var(--pp-kop); }
tfoot tr.btw th { font-weight: var(--pp-gewicht); color: var(--pp-tekst-3); }
tfoot th[scope=row] { text-align: right; vertical-align: middle; }
tr.klik { cursor: pointer; }
tr.klik:hover td { background: var(--pp-vlak-hover); }
tr.inactief td { color: var(--pp-tekst-3); }
.tabelrol { overflow-x: auto; }
.zoektabel { outline: none; }
.zoektabel thead th { position: sticky; top: 0; z-index: 1; }
.zoektabel th[aria-sort] { color: var(--pp-tekst); }
.zoektabel th[aria-sort=ascending] .sorteer::after { content: " \25B4"; color: var(--pp-accent-tekst); }
.zoektabel th[aria-sort=descending] .sorteer::after { content: " \25BE"; color: var(--pp-accent-tekst); }
.zoektabel th .sorteer { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; white-space: nowrap; }
.zoektabel th .sorteer:hover { color: var(--pp-tekst); text-decoration: underline; }
.zoektabel th .sorteer:focus-visible { box-shadow: var(--pp-ring); border-radius: 3px; }
/* in een zoekvenster breekt een woord niet midden in (Rijkswater/staat): is de tabel te breed, dan schuift het vak */
.zoektabel td { cursor: default; overflow-wrap: break-word; }
.zoektabel tbody tr:hover td { background: var(--pp-vlak-hover); }
/* de gekozen regel: de blauwe balk van MultiPress, nu navy met het rode merk vooraan; merkjes houden hun eigen vlak */
.zoektabel tr.gekozen td, .zoektabel tbody tr.gekozen:hover td { background: var(--pp-gekozen-vlak); color: var(--pp-gekozen-tekst); border-bottom-color: var(--pp-gekozen-vlak); }
.zoektabel tr.gekozen td:first-child { box-shadow: inset 3px 0 0 var(--pp-accent); }
.zoektabel tr.gekozen td.sub, .zoektabel tr.gekozen .sub, .zoektabel tr.gekozen b, .zoektabel tr.gekozen strong,
.zoektabel tr.gekozen td a:not(.knop), .zoektabel tr.gekozen .leeg, .zoektabel tr.gekozen .hulp { color: var(--pp-gekozen-tekst); }
.zoektabel tr.leegrij td, .leegrij td { background: var(--pp-vlak); color: var(--pp-tekst-3); font-style: italic; text-align: center; height: 48px; }
.zoektabel tr.leegrij td.laden { font-style: normal; }
/* een lijst die niet laadde: de foutstaat in het vak (optimalisatie 2.0, ONTW-N03) */
.zoektabel tr.foutrij td.foutcel { font-style: normal; text-align: center; height: auto; }
.zoektabel td.nummer { font-weight: var(--pp-gewicht-half); font-variant-numeric: tabular-nums; }
.zoektabel tfoot th, .zoektabel tfoot td { position: static; }
.zoektabel tr.alternatief td { background: var(--pp-let-vlak); color: var(--pp-tekst-2); font-style: italic; }
.zoektabel tr.alternatief.gekozen td, .zoektabel tbody tr.alternatief.gekozen:hover td { background: var(--pp-gekozen-vlak); color: var(--pp-gekozen-tekst); font-style: italic; }
.zoektabel .regelnaam { font-weight: var(--pp-gewicht-half); color: var(--pp-tekst); white-space: pre-line; }
.zoektabel tr.gekozen .regelnaam, .zoektabel tr.gekozen .leegcel { color: var(--pp-gekozen-tekst); }
.zoektabel th.vinkjeskolom, .zoektabel td.vinkjeskolom { width: 28px; text-align: center; padding-left: 6px; padding-right: 2px; }
.tabelvoet { display: flex; align-items: center; gap: var(--pp-r-3); margin-top: var(--pp-r-2); color: var(--pp-tekst-3); font-size: var(--pp-maat-s); }
.tabelvoet .rechts { display: flex; align-items: center; gap: var(--pp-r-2); }
/* een tabel met vaste regelhoogte: niets breekt af, de rekbare kolom kort in met een beletselteken */
table.strak td, table.strak th { white-space: nowrap; padding-left: 10px; padding-right: 10px; }
table.strak td.rek { width: 60%; max-width: 0; overflow: hidden; text-overflow: ellipsis; }
table.strak td.rek.smaller { width: 40%; }
.detailvak { margin-top: var(--pp-r-4); outline: none; }
.detail { border: 1px solid var(--pp-rand); border-radius: var(--pp-straal-m); padding: var(--pp-r-3) var(--pp-r-4); background: var(--pp-vlak-2); }
.detail .rveld { grid-template-columns: 110px minmax(0, 1fr); }
.blokkop { font-size: var(--pp-maat-basis); font-weight: var(--pp-gewicht-half); color: var(--pp-kop); margin: var(--pp-r-4) 0 var(--pp-r-2); }
.blokkop.klein { font-size: var(--pp-maat-m); margin: var(--pp-r-3) 0 6px; }
.scherminhoud > .blokkop:first-child, .detail > .blokkop:first-child { margin-top: 0; }
.lijstje { margin: 0; padding-left: 18px; }
.paginering { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--pp-r-2); margin-top: var(--pp-r-2); color: var(--pp-tekst-3); font-size: var(--pp-maat-s); }
.paginering select { width: auto; height: 28px; }
.paginering .hier { min-width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: var(--pp-straal-s); background: var(--pp-gekozen-vlak); color: var(--pp-gekozen-tekst); font-weight: var(--pp-gewicht-half); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- feiten, stappen en de blik */

.feit { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.feit-label { color: var(--pp-tekst-3); font-size: var(--pp-maat-xs); font-weight: var(--pp-gewicht-half); letter-spacing: .06em; text-transform: uppercase; }
.feit-waarde { color: var(--pp-tekst); font-size: var(--pp-maat-basis); font-weight: var(--pp-gewicht-half); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.feit-waarde .sub { font-weight: var(--pp-gewicht); }
.feitenbalk {
  display: flex; flex-wrap: wrap; gap: 1px; margin: 0 0 var(--pp-r-5); overflow: hidden;
  border: 1px solid var(--pp-rand); border-radius: var(--pp-straal-m); background: var(--pp-rand);
}
.feitenbalk > .feit { flex: 1 1 150px; padding: var(--pp-r-2) var(--pp-r-4); background: var(--pp-vlak); }
.feitenbalk > .feit.breed { flex: 2 1 230px; }
.feitenbalk .feit-waarde { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* de blik: de gekozen regel in een strook onder de tabel (wat niet in de kolommen past) */
.feitenbalk.blik { margin: var(--pp-r-3) 0 0; }
.blik .feit:first-child { box-shadow: inset 3px 0 0 var(--pp-accent); }
/* de feiten van een scherm van een module (een blok, geen balk) */
.feiten {
  display: flex; flex-wrap: wrap; gap: 6px var(--pp-r-6); background: var(--pp-vlak-2); border: 1px solid var(--pp-rand);
  border-radius: var(--pp-straal-m); padding: 10px var(--pp-r-4); margin: 0 0 var(--pp-r-3); font-size: var(--pp-maat-m);
}
/* de voortgang in stappen (de statusgroepen van een order, de stappen van een import) */
.stappen { display: flex; align-items: center; gap: 0; list-style: none; margin: 2px 0 var(--pp-r-4); padding: 0; font-size: var(--pp-maat-s); color: var(--pp-tekst-3); }
.stappen li { display: flex; align-items: center; gap: var(--pp-r-2); flex: 1 1 0; min-width: 0; white-space: nowrap; }
/* optimalisatie 2.0 (ONTW-17): de open stap heeft de rand van een invoerveld (3,4:1 licht, 4,2:1 donker), niet de zachte rand */
.stappen li::before { content: ""; width: 10px; height: 10px; flex: none; border-radius: 50%; border: 2px solid var(--pp-invoer-rand); background: var(--pp-vlak); }
.stappen li::after { content: ""; flex: 1; min-width: 14px; height: 2px; margin-right: var(--pp-r-2); border-radius: 2px; background: var(--pp-rand); }
.stappen li:last-child { flex: 0 0 auto; }
.stappen li:last-child::after { display: none; }
.stappen li.klaar { color: var(--pp-tekst-2); }
.stappen li.klaar::before { background: var(--pp-navy); border-color: var(--pp-navy); }
.stappen li.klaar::after { background: var(--pp-navy); }
.stappen li.nu { color: var(--pp-tekst); font-weight: var(--pp-gewicht-half); }
.stappen li.nu::before { background: var(--pp-vlak); border-color: var(--pp-accent); box-shadow: var(--pp-ring-accent); }
.stappen.vervallen li { opacity: .55; }
.stappen li.vervallen-merk { opacity: 1; flex: 0 0 auto; padding: 0 var(--pp-r-2); border-radius: var(--pp-merkje-straal); background: var(--pp-neutraal-vlak); color: var(--pp-neutraal-tekst); font-weight: var(--pp-gewicht-half); }
.stappen li.vervallen-merk::before, .stappen li.vervallen-merk::after { display: none; }
.stappen .stapvan { display: none; margin-left: 2px; color: var(--pp-tekst-3); font-weight: var(--pp-gewicht); }
/* de werkstappen van de offerteknop in de kop van calculatie en order (B-09, B-147; samenvoegen 09-10-2026): elke stap
   zo breed als zijn naam, de lijntjes vullen de rest; past het niet (een telefoon), dan schuift de rij binnen zijn vak
   opzij en wordt de pagina nooit breder dan het venster */
/* optimalisatie 2.0 (ONTW-17): past de rij niet (stap 4 en 5 vielen weg zonder teken), dan breekt hij af op een tweede
 * regel; er schuift niets meer buiten beeld */
.stappen.werkstappen { position: relative; margin: 0 0 var(--pp-r-2); flex-wrap: wrap; row-gap: var(--pp-r-1); max-width: 100%; }
.stappen.werkstappen::-webkit-scrollbar { display: none; }
.stappen.werkstappen li { flex: 0 0 auto; }
.stappen.werkstappen li:not(:last-child) { flex: 1 0 auto; }
/* samenvoegen 2 (10-10-2026): met een lange status (Uitbesteed productie Sierhuis_Be Global_Maxilia) liepen de stappen
 * over de knop Wijzig status en brak de titel in drie regels; nu gaan de stappen naar een tweede regel als ze niet passen */
.titelbalk .stappen { flex: 0 1 430px; min-width: 0; margin: 0 0 0 auto; }
.titelbalk .stappen + .titelbalk-rechts { margin-left: var(--pp-r-4); }

/* ---------------------------------------------------------------- kaarten, kerncijfers, startscherm */

.kaart {
  padding: var(--pp-r-4); border: 1px solid var(--pp-rand); border-radius: var(--pp-kaart-straal); background: var(--pp-vlak);
  box-shadow: var(--pp-schaduw-1); min-width: 0; margin-bottom: var(--pp-r-4);
}
.kaart > h2 {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--pp-r-2); margin: 0 0 var(--pp-r-3); font-size: var(--pp-maat-basis);
  font-weight: var(--pp-gewicht-half); color: var(--pp-kop);
}
.kaart > h2 .rechts { display: flex; align-items: center; flex-wrap: wrap; gap: var(--pp-r-2); margin-left: auto; font-family: var(--pp-letter); }
/* optimalisatie 2.0 (ONTW-18): de kop is alleen de titel; een knop of teller staat ernaast, buiten de h2 */
.kaartkop { display: flex; align-items: center; flex-wrap: wrap; gap: var(--pp-r-2); margin: 0 0 var(--pp-r-3); }
.kaartkop > h2 { display: flex; align-items: center; gap: var(--pp-r-2); margin: 0; font-size: var(--pp-maat-basis); font-weight: var(--pp-gewicht-half); color: var(--pp-kop); }
.kaartkop > .rechts { display: flex; align-items: center; flex-wrap: wrap; gap: var(--pp-r-2); margin-left: auto; }
.kaart.strak > .kaartkop { margin: 0; padding: var(--pp-r-3) var(--pp-r-4); border-bottom: 1px solid var(--pp-rand); }
.kaart .inhoud { padding: 0; }
.kaart.strak { padding: 0; overflow: hidden; }
.kaart.strak > h2 { margin: 0; padding: var(--pp-r-3) var(--pp-r-4); border-bottom: 1px solid var(--pp-rand); }
.kaart.strak table th:first-child, .kaart.strak table td:first-child { padding-left: var(--pp-r-4); }
.kaart.strak table th:last-child, .kaart.strak table td:last-child { padding-right: var(--pp-r-4); }
.kaart.strak > .inhoud { padding: var(--pp-r-3) var(--pp-r-4); }
.kaartvoet { display: flex; align-items: center; gap: var(--pp-r-2); padding: 10px var(--pp-r-4); border-top: 1px solid var(--pp-rand); color: var(--pp-tekst-3); font-size: var(--pp-maat-s); }

.startkop { display: flex; align-items: flex-end; gap: var(--pp-r-4); flex-wrap: wrap; margin: var(--pp-r-1) 0 var(--pp-r-5); }
.startkop h1 { font-size: var(--pp-maat-2xl); font-weight: var(--pp-gewicht-half); letter-spacing: -.015em; }
.startkop p { margin: 4px 0 0; color: var(--pp-tekst-3); }
.startkop .rechts { display: flex; align-items: center; gap: var(--pp-r-2); flex-wrap: wrap; }
.startraster { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--pp-r-4); align-items: start; margin-top: var(--pp-r-4); }
.stapel { display: flex; flex-direction: column; gap: var(--pp-r-4); min-width: 0; }
.stapel > .kaart { margin-bottom: 0; }
/* een blok van een module op het startscherm (Mijn portaal, Net binnen uit Prindustry): de kaart zonder eigen kop */
.kaartvak > .dashblok:first-child { margin-top: 0; }
.kaartvak > .dashblok > .blokkop:first-child { margin-top: 0; font-size: var(--pp-maat-basis); }

.tellers { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--pp-r-3); }
.tellers.kern { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.teltegel {
  position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 14px var(--pp-r-4) var(--pp-r-3);
  border: 1px solid var(--pp-rand); border-radius: var(--pp-kaart-straal); background: var(--pp-vlak); box-shadow: var(--pp-schaduw-1);
  color: inherit; font: inherit; text-decoration: none; text-align: left; cursor: pointer; overflow: hidden;
  transition: border-color var(--pp-duur-1) var(--pp-gang), transform var(--pp-duur-1) var(--pp-gang), box-shadow var(--pp-duur-1) var(--pp-gang);
}
.teltegel:hover { border-color: var(--pp-invoer-rand); transform: translateY(-1px); box-shadow: var(--pp-schaduw-2); }
.teltegel:focus-visible { box-shadow: var(--pp-ring); border-radius: var(--pp-kaart-straal); }
.telgetal { color: var(--pp-kop); font: var(--pp-gewicht-half) var(--pp-maat-3xl)/1.05 var(--pp-letter-kop); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.telwat { margin-top: 4px; color: var(--pp-tekst); font-size: var(--pp-maat-m); font-weight: var(--pp-gewicht-half); overflow-wrap: anywhere; }
.teluitleg { color: var(--pp-tekst-3); font-size: var(--pp-maat-s); }
.telspoor { position: absolute; right: var(--pp-r-3); top: var(--pp-r-4); width: 64px; height: 24px; fill: none; stroke: var(--pp-telspoor); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* een kerncijfer dat aandacht vraagt: rood getal en een rode rand links */
.teltegel.aandacht { box-shadow: inset 3px 0 0 var(--pp-accent), var(--pp-schaduw-1); }
.teltegel.aandacht .telgetal { color: var(--pp-accent-tekst); }
.teltegel.aandacht .telspoor { stroke: var(--pp-accent); }

/* de live stand van Prindustry als kaart */
.livekaart-stand { display: flex; align-items: center; gap: var(--pp-r-3); padding: var(--pp-r-3); border-radius: var(--pp-straal-m); background: var(--pp-ok-vlak); border: 1px solid var(--pp-ok-rand); }
.livekaart-stand .stip { width: 10px; height: 10px; background: var(--pp-ok-tekst); }
.livekaart-stand strong { display: block; color: var(--pp-ok-tekst); }
.livekaart-stand .sub { color: var(--pp-tekst-2); font-variant-numeric: tabular-nums; }
.regellijst { list-style: none; margin: 0; padding: 0; }
.regellijst > li { display: flex; align-items: center; gap: var(--pp-r-3); min-height: 44px; padding: var(--pp-r-2) 0; border-bottom: 1px solid var(--pp-rand-zacht); font-size: var(--pp-maat-m); }
.regellijst > li:last-child { border-bottom: 0; padding-bottom: 0; }
.regellijst .wat { flex: 1; min-width: 0; }
.regellijst .wat strong { display: block; overflow-wrap: anywhere; }
.regellijst .wat .sub { display: block; }
.regellijst a.wat { color: inherit; text-decoration: none; }
.regellijst a.wat:hover strong { text-decoration: underline; }
.regellijst .tijd { width: 38px; flex: none; align-self: flex-start; padding-top: 1px; color: var(--pp-tekst-3); font-size: var(--pp-maat-s); font-variant-numeric: tabular-nums; }
.regellijst .icoonvak { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: var(--pp-straal-m); background: var(--pp-vlak-2); color: var(--pp-tekst-2); }
.regellijst .icoonvak.paars { background: var(--pp-portaal-vlak); color: var(--pp-portaal-tekst); }
.regellijst .icoonvak.oranje { background: var(--pp-let-vlak); color: var(--pp-let-tekst); }
.regellijst .icoonvak.rood { background: var(--pp-fout-vlak); color: var(--pp-fout-tekst); }
.tussenkop { margin: var(--pp-r-4) 0 var(--pp-r-1); color: var(--pp-tekst-3); font: var(--pp-gewicht-half) var(--pp-maat-xs)/1.2 var(--pp-letter); letter-spacing: .08em; text-transform: uppercase; }

/* ---------------------------------------------------------------- lagen: venster, printvenster, palet */

.laag {
  position: fixed; inset: 0; z-index: 60; display: grid; justify-items: center; align-items: start; padding: 9vh var(--pp-r-4) var(--pp-r-4);
  background: var(--pp-sluier); overflow: auto; animation: pp-vervaag var(--pp-duur-2) var(--pp-gang);
}
/* optimalisatie 2.0 (BOUWPLAN-2.0.md 7): de vervaging achter een laag alleen als de browser hem kent, niet bij minder
 * doorzichtigheid en niet op een trage computer (kern.js zet html.traag na een eenmalige meting van de tekentijd) */
@supports (backdrop-filter: blur(1px)) {
  @media (prefers-reduced-transparency: no-preference) {
    html:not(.traag) .laag { backdrop-filter: var(--pp-sluier-vervaging); }
  }
}
.venster {
  display: flex; flex-direction: column; width: min(640px, 100%); max-height: 82vh; background: var(--pp-vlak); color: var(--pp-tekst);
  border: 1px solid var(--pp-rand); border-radius: var(--pp-venster-straal); box-shadow: var(--pp-schaduw-3);
  animation: pp-op var(--pp-duur-2) var(--pp-gang);
}
.venster.breed { width: min(1280px, 100%); }
.venster.smal { width: min(460px, 100%); }
.vkop { display: flex; align-items: center; flex-wrap: wrap; gap: var(--pp-r-3); padding: var(--pp-r-4) var(--pp-r-4) var(--pp-r-3) var(--pp-r-5); border-bottom: 1px solid var(--pp-rand); }
.vtitel { margin: 0; min-width: 0; font-size: var(--pp-maat-l); font-weight: var(--pp-gewicht-half); color: var(--pp-kop); overflow-wrap: anywhere; }
.vtitel .titelbalk-soort { display: block; margin-bottom: 3px; }
.vkop-merkjes { display: flex; gap: 6px; flex-wrap: wrap; }
.vkop .rechts { display: flex; align-items: center; gap: var(--pp-r-2); margin-left: auto; }
.vsluit { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border: 0; border-radius: var(--pp-straal-m); background: none; color: var(--pp-tekst-2); cursor: pointer; padding: 0; font-size: var(--pp-maat-l); line-height: 1; }
.vsluit:hover { background: var(--pp-vlak-2); color: var(--pp-tekst); }
.vboven { padding: 0; border-bottom: 0; background: var(--pp-vlak); }
.vmeldingen { padding: 0 var(--pp-r-5); }
.vmeldingen .melding { margin-top: var(--pp-r-2); margin-bottom: 0; }
.vinhoud { padding: var(--pp-r-4) var(--pp-r-5); overflow: auto; flex: 1; min-height: 0; }
/* samenvoegen 2 (10-10-2026): in een invoervenster (MK.invoerVenster) staan ESC en ENTER in het formulier; bij een lange
 * inhoud (het Inkoop invoervenster met de afspraken) moest je schuiven om ze te zien. Nu blijven ze onderaan in beeld, als een voet */
.vinhoud > form > .knoppen:last-child {
  position: sticky; bottom: calc(-1 * var(--pp-r-4)); z-index: 1;
  margin: var(--pp-r-3) calc(-1 * var(--pp-r-5)) calc(-1 * var(--pp-r-4)); padding: var(--pp-r-3) var(--pp-r-4) var(--pp-r-3) var(--pp-r-5);
  border-top: 1px solid var(--pp-rand); background: var(--pp-vlak-2);
}
.vvoet {
  display: flex; align-items: center; gap: var(--pp-r-2); flex-wrap: wrap; padding: var(--pp-r-3) var(--pp-r-4) var(--pp-r-3) var(--pp-r-5);
  border-top: 1px solid var(--pp-rand); background: var(--pp-vlak-2); border-radius: 0 0 var(--pp-venster-straal) var(--pp-venster-straal);
}
.vvoet .rechts { display: flex; gap: var(--pp-r-2); margin-left: auto; }
.vraag { margin: var(--pp-r-1) 0 var(--pp-r-2); color: var(--pp-tekst); font-size: var(--pp-maat-basis); }
.venster .raster .rveld { grid-template-columns: 130px minmax(0, 1fr); }
.regelmeldingen .regel-let { margin: 10px var(--pp-r-4) 6px; }
.regelmeldingen .regel-let ul { margin-top: 3px; }
@keyframes pp-vervaag { from { opacity: 0; } to { opacity: 1; } }
@keyframes pp-op { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }

/* het printvenster na ENTER: links de keuzes, rechts een blik op het document */
.printdeel { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: var(--pp-r-5); align-items: start; }
.printkeuzes { display: flex; flex-direction: column; gap: var(--pp-r-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.printkeuze {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 2px var(--pp-r-3); padding: var(--pp-r-3);
  border: 1px solid var(--pp-rand); border-radius: var(--pp-straal-m); background: var(--pp-vlak); cursor: pointer;
  transition: border-color var(--pp-duur-1) var(--pp-gang), background var(--pp-duur-1) var(--pp-gang);
}
.printkeuze:hover { border-color: var(--pp-invoer-rand); }
.printkeuze input { margin-top: 2px; grid-row: 1 / 3; }
.printkeuze .naam { display: flex; align-items: center; gap: var(--pp-r-2); flex-wrap: wrap; color: var(--pp-tekst); font-size: var(--pp-maat-m); font-weight: var(--pp-gewicht-half); }
.printkeuze .sub { grid-column: 2 / 4; }
.printkeuze kbd { grid-column: 3; grid-row: 1; }
.printkeuze:has(input:checked) { border-color: var(--pp-navy); background: var(--pp-vlak-hover); box-shadow: inset 3px 0 0 var(--pp-navy); }
.printkeuze.uit { background: var(--pp-vlak-2); cursor: default; }
.printkeuze.uit .naam { color: var(--pp-tekst-2); }
.printblik { display: flex; flex-direction: column; align-items: center; gap: var(--pp-r-2); padding: var(--pp-r-4); border-radius: var(--pp-straal-m); background: var(--pp-vlak-2); border: 1px solid var(--pp-rand); }
/* een blad A4 in het klein: wit, ook in de donkere modus (het is papier) */
.papier { width: 100%; aspect-ratio: 210 / 297; padding: 14px 13px; background: var(--pp-papier); border-radius: 3px; box-shadow: var(--pp-schaduw-2); display: flex; flex-direction: column; gap: 6px; }
.papier i { display: block; height: 4px; border-radius: 2px; background: var(--pp-papier-lijn); }
.papier i.kop { width: 34%; height: 9px; background: var(--pp-papier-kop); margin-bottom: 8px; }
.papier i.titel { width: 62%; height: 6px; background: var(--pp-papier-titel); margin-bottom: 4px; }
.papier i.kort { width: 44%; }
.papier i.half { width: 72%; }
.papier i.tabel { height: 38px; background: var(--pp-papier-tabel); margin: 6px 0; }

/* het opdrachtenpalet (Ctrl of Cmd met K) */
.palet-laag { padding-top: 12vh; }
.palet {
  display: flex; flex-direction: column; width: min(640px, 100%); max-height: 70vh; overflow: hidden; background: var(--pp-vlak);
  color: var(--pp-tekst); border: 1px solid var(--pp-rand); border-radius: var(--pp-venster-straal); box-shadow: var(--pp-schaduw-3);
  animation: pp-op var(--pp-duur-2) var(--pp-gang);
}
.palet-kop { display: flex; align-items: center; gap: var(--pp-r-3); padding: 0 var(--pp-r-4); height: 56px; flex: none; border-bottom: 1px solid var(--pp-rand); color: var(--pp-tekst-3); }
.palet-kop input, .palet-kop input:focus, .palet-kop input:focus-visible, .palet-kop input:hover {
  flex: 1; height: 100%; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: var(--pp-maat-l); color: var(--pp-tekst);
}
.palet-lijst { flex: 1; min-height: 0; overflow: auto; padding: var(--pp-r-2); scrollbar-width: thin; }
.palet-groep { margin: var(--pp-r-2) var(--pp-r-2) var(--pp-r-1); color: var(--pp-tekst-3); font: var(--pp-gewicht-half) var(--pp-maat-xs)/1.2 var(--pp-letter); letter-spacing: .08em; text-transform: uppercase; }
.palet-item {
  display: flex; align-items: center; gap: var(--pp-r-3); min-height: 40px; padding: 0 var(--pp-r-2) 0 10px; border-radius: var(--pp-straal-m);
  color: var(--pp-tekst); font-size: var(--pp-maat-m); cursor: pointer;
}
.palet-item .icoon { color: var(--pp-tekst-3); }
.palet-item .naam { font-weight: var(--pp-gewicht-half); white-space: nowrap; }
.palet-item .sub { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palet-item.gekozen { background: var(--pp-gekozen-vlak); color: var(--pp-gekozen-tekst); box-shadow: inset 3px 0 0 var(--pp-accent); }
.palet-item.gekozen .icoon, .palet-item.gekozen .sub { color: var(--pp-gekozen-tekst); }
.palet-item.gekozen kbd { background: var(--pp-op-vol-toets-vlak); border-color: var(--pp-op-vol-toets-rand); color: var(--pp-wit); }
.palet-leeg { padding: var(--pp-r-8) var(--pp-r-4); text-align: center; color: var(--pp-tekst-3); }
.palet-voet { display: flex; align-items: center; flex-wrap: wrap; gap: var(--pp-r-4); padding: 10px var(--pp-r-4); flex: none; border-top: 1px solid var(--pp-rand); background: var(--pp-vlak-2); color: var(--pp-tekst-3); font-size: var(--pp-maat-s); }
.palet-voet span { display: inline-flex; align-items: center; gap: 6px; }
.palet-voet .rechts { margin-left: auto; }

/* ---------------------------------------------------------------- toestanden: leeg, laden, fout */

.leegstaat, .foutstaat { display: flex; flex-direction: column; align-items: center; gap: var(--pp-r-2); padding: var(--pp-r-10) var(--pp-r-4); text-align: center; color: var(--pp-tekst-2); }
.leegstaat .icoonvak, .foutstaat .icoonvak { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--pp-r-1); border-radius: 50%; background: var(--pp-vlak-2); color: var(--pp-tekst-3); }
.foutstaat .icoonvak { background: var(--pp-fout-vlak); color: var(--pp-fout-tekst); }
.leegstaat h2, .foutstaat h2 { font-size: var(--pp-maat-l); font-weight: var(--pp-gewicht-half); }
.leegstaat p, .foutstaat p { max-width: 46ch; margin: 0; font-size: var(--pp-maat-m); }
.leegstaat .knoppen, .foutstaat .knoppen { justify-content: center; }
.leegstaat.klein, .foutstaat.klein { padding: var(--pp-r-5) var(--pp-r-3); }
.foutstaat .knoppen { margin-top: var(--pp-r-2); }
.foutstaat code { padding: 2px 6px; border-radius: 4px; background: var(--pp-vlak-2); color: var(--pp-tekst-2); font: var(--pp-maat-s)/1.4 var(--pp-letter-mono); }
.leeg { margin: var(--pp-r-1) 0; color: var(--pp-tekst-3); font-style: italic; }
.laden { padding: var(--pp-r-5) var(--pp-r-1); color: var(--pp-tekst-3); }
/* het skelet: de vorm van wat komt, zodat het scherm niet verspringt */
.skelet { display: block; height: 12px; border-radius: 6px; background: var(--pp-skelet-glans); animation: pp-skelet 1.4s ease-in-out infinite; }
.skelet.kop { height: 20px; width: 40%; }
.skelet.getal { height: 30px; width: 56px; border-radius: var(--pp-straal-s); }
.skelet.w-30 { width: 30%; }
.skelet.w-50 { width: 50%; }
.skelet.w-70 { width: 70%; }
.skelet.w-90 { width: 90%; }
.skeletvak { display: flex; flex-direction: column; gap: 10px; padding: var(--pp-r-2) 0; }
@keyframes pp-skelet { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ---------------------------------------------------------------- inloggen */

/* zonder het navy paneel (het inlogscherm van 1.2.1): de kaart midden op de schil */
.inlogscherm {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--pp-r-4);
  min-height: 100vh; min-height: 100dvh; padding: var(--pp-r-6) var(--pp-r-4); background: var(--pp-schil); color: var(--pp-tekst);
}
.inlogscherm > .copyright { color: var(--pp-schil-tekst-2); }
/* met het navy paneel (DESIGNSYSTEEM.md 7.13): links het paneel, rechts de kaart */
.inlogscherm:has(> .inlogpaneel) { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: stretch; gap: 0; padding: 0; background: var(--pp-canvas); }
.inlogpaneel {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--pp-r-8); padding: var(--pp-r-12);
  background: var(--pp-inlog-vlak); color: var(--pp-wit); overflow: hidden;
}
/* het raster van punten: het motief van de Xerox-banner, heel zacht */
.inlogpaneel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--pp-inlog-punten);
  -webkit-mask-image: var(--pp-inlog-masker); mask-image: var(--pp-inlog-masker);
}
.inlogpaneel::after { content: ""; position: absolute; left: 0; top: var(--pp-r-12); width: 4px; height: 72px; border-radius: 0 4px 4px 0; background: var(--pp-merk-rood); }
.inlogpaneel > * { position: relative; }
.inlogpaneel h1 { max-width: 15ch; color: var(--pp-wit); font-size: clamp(1.75rem, 3.2vw, 2.75rem); font-weight: var(--pp-gewicht-half); letter-spacing: -.02em; line-height: 1.12; }
.inlogpaneel p { max-width: 44ch; margin: var(--pp-r-4) 0 0; color: var(--pp-schil-tekst-2); font-size: var(--pp-maat-l); }
.inlogletters { list-style: none; display: grid; grid-template-columns: repeat(5, auto); justify-content: start; gap: var(--pp-r-2) var(--pp-r-6); margin: 0; padding: 0; color: var(--pp-schil-tekst-2); font-size: var(--pp-maat-m); }
.inlogletters b { display: block; color: var(--pp-wit); font: var(--pp-gewicht-half) var(--pp-maat-xl)/1.2 var(--pp-letter-kop); }
.inlogkant { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--pp-r-5); padding: var(--pp-r-8) var(--pp-r-5); }
.inlogkant .copyright { color: var(--pp-tekst-3); }
.inlogkaart {
  width: 100%; max-width: 400px; background: var(--pp-vlak); border: 1px solid var(--pp-rand); border-radius: var(--pp-venster-straal);
  box-shadow: var(--pp-schaduw-3); overflow: hidden;
}
.inlogkant .inlogkaart { padding: var(--pp-r-8); box-shadow: var(--pp-schaduw-2); overflow: visible; }
/* het volledige logo op wit, 60 px hoog; rondom minstens de hoogte van een tegel vrij. Is de kaart smaller dan het logo
   (een smalle telefoon), dan wordt het logo kleiner in de verhouding van het bestand (object-fit: contain): nooit vervormd */
.inlogkop { display: flex; justify-content: center; padding: var(--pp-r-8) var(--pp-r-6) var(--pp-r-6); }
/* het inlogscherm van 1.2.1 heeft alleen het volledige logo (de kleurenversie): dat staat op papier, ook in de donkere
   modus, zodat het donkergrijs van het woordmerk leesbaar blijft (huisstijl); het nieuwe scherm wisselt het logo zelf */
.inlogscherm > .inlogkaart > .inlogkop { background: var(--pp-papier); border-bottom: 1px solid var(--pp-rand); margin-bottom: var(--pp-r-5); }
.inlogkant .inlogkop { padding: 0 0 var(--pp-r-6); }
.inloglogo { display: block; height: 60px; width: auto; max-width: 100%; object-fit: contain; object-position: center; }
.inlogbody { padding: 0 var(--pp-r-6) var(--pp-r-6); }
.inlogbody h1, .inlogkaart h2 { font-size: var(--pp-maat-xl); font-weight: var(--pp-gewicht-half); margin: 0 0 var(--pp-r-3); }
.inlogbody .melding { margin-bottom: var(--pp-r-3); }
.inlogkaart .veld { margin-top: var(--pp-r-3); }
.inlogkaart .vergeten { margin: var(--pp-r-3) 0 0; text-align: center; }   /* B-195: Wachtwoord vergeten */
.inlogkaart .veld input { height: 40px; font-size: var(--pp-maat-basis); }
.inlogkaart .knop.vol { margin-top: var(--pp-r-5); }
.inlogkaart .knop.vol + .sub { margin: var(--pp-r-4) 0 0; text-align: center; }
/* verzoek 4 van pakket C: de regel Telefoon kwijt? niet tegen de knoppen aan */
.inlogkaart .knoppen + .sub { margin-top: var(--pp-r-3); text-align: center; }
.inlogstappen { display: flex; gap: var(--pp-r-2); margin: 0 0 var(--pp-r-5); padding: 0; list-style: none; }
.inlogstappen li { flex: 1; height: 3px; border-radius: 3px; background: var(--pp-rand); }
.inlogstappen li.aan { background: var(--pp-accent); }
.codevak { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--pp-r-2); margin-top: var(--pp-r-3); }
.codevak input { width: 100%; height: 48px; padding: 0; text-align: center; font: var(--pp-gewicht-half) var(--pp-maat-xl)/1 var(--pp-letter-mono); }
.copyright { margin: 0; color: var(--pp-tekst-3); font-size: var(--pp-maat-s); text-align: center; }

/* ---------------------------------------------------------------- het keuzevenster, treffers, mappen, logboek, rooster */

/* het keuzevenster (MK.keuzeVenster): een cijfer kiest, pijltjes lopen, ENTER opent */
.keuzeknoppen { display: flex; flex-direction: column; gap: var(--pp-r-2); }
.keuzeknop {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--pp-r-3); align-items: center; width: 100%;
  padding: var(--pp-r-3) var(--pp-r-4); border: 1px solid var(--pp-rand); border-radius: var(--pp-straal-m);
  background: var(--pp-vlak); color: var(--pp-tekst); font: inherit; text-align: left; cursor: pointer;
  transition: background var(--pp-duur-1) var(--pp-gang), border-color var(--pp-duur-1) var(--pp-gang);
}
.keuzeknop b, .keuzeknop strong { color: var(--pp-kop); font-weight: var(--pp-gewicht-half); }
.keuzeknop .sub { grid-column: 2; }
.keuzeknop .keuzenr { grid-row: 1 / span 2; }
.keuzeknop:hover { background: var(--pp-vlak-hover); border-color: var(--pp-rand-sterk); }
.keuzeknop:focus-visible, .keuzeknop.gekozen { border-color: var(--pp-navy); box-shadow: inset 3px 0 0 var(--pp-accent); outline: none; background: var(--pp-vlak-hover); }
.keuzenr {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px; border: 1px solid var(--pp-rand-sterk);
  border-bottom-width: 2px; border-radius: var(--pp-toets-straal); background: var(--pp-vlak); color: var(--pp-tekst-2);
  font-size: var(--pp-maat-s); font-weight: var(--pp-gewicht-vet); font-variant-numeric: tabular-nums;
}
.keuzeknop-klein {
  display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--pp-rand-sterk);
  border-radius: var(--pp-straal-s); background: var(--pp-vlak); color: var(--pp-tekst-2); font: var(--pp-gewicht-half) var(--pp-maat-basis)/1 var(--pp-letter); cursor: pointer;
}
.keuzeknop-klein:hover, .keuzeknop-klein[aria-expanded=true] { background: var(--pp-vlak-hover); color: var(--pp-tekst); }

/* de treffers onder een zoekvak (klant kiezen, artikel uit het archief) */
.treffers { list-style: none; margin: var(--pp-r-1) 0 var(--pp-r-3); padding: var(--pp-r-1); max-height: 240px; overflow: auto; border: 1px solid var(--pp-rand); border-radius: var(--pp-straal-m); background: var(--pp-vlak); box-shadow: var(--pp-schaduw-2); }
.treffers:empty { display: none; }
.treffer {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--pp-r-3); width: 100%; padding: var(--pp-r-2) var(--pp-r-3);
  border: 0; border-radius: var(--pp-straal-s); background: none; color: var(--pp-tekst); font: inherit; text-align: left; cursor: pointer;
}
.treffer:hover { background: var(--pp-vlak-hover); }
.treffer.gekozen, .treffer[aria-selected=true], .treffer:focus-visible { background: var(--pp-gekozen-vlak); color: var(--pp-gekozen-tekst); box-shadow: inset 3px 0 0 var(--pp-accent); }
.treffer.gekozen .sub, .treffer.gekozen .treffer-naam, .treffer[aria-selected=true] .sub, .treffer[aria-selected=true] .treffer-naam,
.treffer:focus-visible .sub, .treffer:focus-visible .treffer-naam { color: var(--pp-gekozen-tekst); }
.treffer-naam { font-weight: var(--pp-gewicht-half); color: var(--pp-tekst); overflow-wrap: anywhere; }
.treffer .sub { margin-left: auto; white-space: nowrap; }
.rinvoer > .treffers { flex: 1 1 100%; margin-bottom: 0; }
/* de gekozen klant bij een nieuwe calculatie (offerte.js); niet de gekozen regel van het palet of een keuze */
div.gekozen:not(.palet-item):not(.keuzeknop) { margin-bottom: 10px; }
.gekozen-naam { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; flex-wrap: wrap; }
div.gekozen .info { margin-bottom: 0; }

/* de mappen met bestanden bij een calculatie of order (de mappen in Prindustry zijn leidend) */
/* de tijdlijn (MK.tijdlijn; samenvoegen 09-10-2026, verzoek 1 van W8-ui): per stap een punt in de kleur van de afloop of
   van de richting (paars leest uit Prindustry, navy schrijft ernaar), de inhoud en rechts de tijd */
.tijdlijn { list-style: none; margin: var(--pp-r-3) 0 0; padding: 0; }
.tijdstap { position: relative; display: grid; grid-template-columns: var(--pp-r-6) minmax(0, 1fr) auto; align-items: start;
  gap: var(--pp-r-1) var(--pp-r-3); padding: 0 0 var(--pp-r-4); }
.tijdstap::before { content: ""; position: absolute; left: calc(var(--pp-r-6) / 2); top: var(--pp-r-6); bottom: 0;
  border-left: var(--pp-lijn) solid var(--pp-rand); }
.tijdstap:last-child { padding-bottom: 0; }
.tijdstap:last-child::before { content: none; }
.tijdpunt { display: inline-grid; place-items: center; width: var(--pp-r-6); height: var(--pp-r-6); border-radius: var(--pp-straal-rond);
  border: var(--pp-lijn) solid var(--pp-neutraal-rand); background: var(--pp-neutraal-vlak); color: var(--pp-neutraal-tekst);
  font-weight: var(--pp-gewicht-vet); font-variant-numeric: tabular-nums; }
.tijdstap.goed .tijdpunt { border-color: var(--pp-ok-rand); background: var(--pp-ok-vlak); color: var(--pp-ok-tekst); }
.tijdstap.fout .tijdpunt { border-color: var(--pp-fout-rand); background: var(--pp-fout-vlak); color: var(--pp-fout-tekst); }
.tijdstap.open .tijdpunt { border-color: var(--pp-info-rand); background: var(--pp-info-vlak); color: var(--pp-info-tekst); }
.tijdstap.let .tijdpunt { border-color: var(--pp-let-rand); background: var(--pp-let-vlak); color: var(--pp-let-tekst); }
.tijdstap.leest .tijdpunt { border-color: var(--pp-portaal-rand); background: var(--pp-portaal-vlak); color: var(--pp-portaal-tekst); }
.tijdstap.schrijft .tijdpunt { border-color: var(--pp-navy); background: var(--pp-navy); color: var(--pp-wit); }
.tijdinhoud { display: flex; flex-direction: column; gap: var(--pp-r-1); min-width: 0; }
.tijdrechts { display: flex; flex-direction: column; align-items: flex-end; gap: var(--pp-r-1); text-align: right; }
.tijdrechts .sub { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* de map in Prindustry met het nummer boven de mappen van een calculatie (B-33, B-150 punt 9) */
.prindustry-map { display: flex; align-items: center; flex-wrap: wrap; gap: var(--pp-r-2); margin: 0 0 var(--pp-r-3); }
.mappen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pp-r-3); align-items: start; }
.map { min-width: 0; padding: var(--pp-r-3); border: 1px solid var(--pp-rand); border-radius: var(--pp-straal-m); background: var(--pp-vlak-2); }
.map.gevuld { background: var(--pp-vlak); border-color: var(--pp-rand-sterk); }
.map.sleepbaar { border-style: dashed; }
.map.sleep { border-color: var(--pp-focus); background: var(--pp-info-vlak); box-shadow: var(--pp-ring); }
.map-kop { display: flex; align-items: center; justify-content: space-between; gap: var(--pp-r-2); }
.map-kop b { display: inline-flex; align-items: center; gap: var(--pp-r-2); color: var(--pp-kop); font-size: var(--pp-maat-m); font-weight: var(--pp-gewicht-half); }
.map-toevoegen { display: flex; align-items: center; gap: var(--pp-r-2); flex-wrap: wrap; margin-top: var(--pp-r-2); }
.map-zelf { margin: var(--pp-r-2) 0 0; }
.bestanden { list-style: none; margin: var(--pp-r-2) 0 0; padding: 0; }
.bestanden li { display: flex; align-items: baseline; gap: var(--pp-r-2); padding: var(--pp-r-1) 0; border-top: 1px solid var(--pp-rand-zacht); font-size: var(--pp-maat-s); overflow-wrap: anywhere; }
.bestanden li .sub { margin-left: auto; white-space: nowrap; }
.uploadstatus { margin-top: var(--pp-r-2); color: var(--pp-info-tekst); font-size: var(--pp-maat-s); }
.uploadstatus:empty { display: none; }

/* het logboek: wie, wanneer, wat */
table.logboek { margin-top: var(--pp-r-4); }
/* verzoek 9 van W1-ui: op een telefoon brak het logboek de kolommen Wie en Wat per letter; nu schuift de tabel binnen zijn
   vak (.tabelrol) opzij en blijven de woorden heel */
@media (max-width: 760px) { table.logboek { min-width: 560px; } table.logboek td:nth-child(2) { white-space: nowrap; } }
.logboek td { height: auto; padding-top: var(--pp-r-2); padding-bottom: var(--pp-r-2); font-size: var(--pp-maat-s); vertical-align: top; }
.logboek td:first-child { white-space: nowrap; color: var(--pp-tekst-3); font-variant-numeric: tabular-nums; }

/* het prijsrooster van de sub-calculatie: een kolom per oplage, de eindprijs onderaan */
table.rooster { margin: 4px 0 10px; table-layout: fixed; border: 1px solid var(--pp-rand); border-radius: var(--pp-straal-m); border-collapse: separate; border-spacing: 0; overflow: hidden; }
table.rooster th[scope=row] { width: 190px; height: auto; padding: var(--pp-r-2) var(--pp-r-3); background: var(--pp-vlak); color: var(--pp-tekst); font-size: var(--pp-maat-m); white-space: normal; vertical-align: baseline; border-bottom: 1px solid var(--pp-rand-zacht); }
table.rooster th[scope=row] .sub { display: block; font-weight: var(--pp-gewicht); }
table.rooster th.rooster-label { width: 190px; }
table.rooster td { height: auto; padding: var(--pp-r-1) var(--pp-r-3); min-width: 120px; text-align: right; vertical-align: baseline; font-variant-numeric: tabular-nums; }
/* samenvoegen 2 (10-10-2026): label en bedrag op dezelfde grondlijn (bovenaan uitgelijnd stonden de bedragen 4 px hoger) */
table.rooster td input, table.prepress td input, table.staffeltabel td input { width: 100%; }
table.rooster td input { text-align: right; }
/* verzoek 2 van pakket C: het vinkje Vast in het rooster van de leverancier niet over de hele cel */
table.rooster td input[type=checkbox] { width: auto; }
table.rooster tr.berekend td, table.rooster tr.berekend th { background: var(--pp-vlak-2); color: var(--pp-tekst-2); }
table.rooster tr.tussen td, table.rooster tr.tussen th { border-top: 1px solid var(--pp-rand); font-weight: var(--pp-gewicht-half); }
table.rooster tr.verkoop td .bedrag { font-weight: var(--pp-gewicht-half); color: var(--pp-kop); }
table.rooster tr.eindprijs td, table.rooster tr.eindprijs th { background: var(--pp-vlak-2); border-top: 2px solid var(--pp-navy); border-bottom: 0; }
table.rooster tr.eindprijs td .bedrag { font-size: var(--pp-maat-l); font-weight: var(--pp-gewicht-vet); color: var(--pp-kop); }
table.rooster tr.eindprijs th { box-shadow: inset 3px 0 0 var(--pp-accent); font-weight: var(--pp-gewicht-vet); }
table.rooster td.afwijking .bedrag { color: var(--pp-fout-tekst); }
table.rooster td.afwijking::after { content: " afwijkend"; color: var(--pp-fout-tekst); font-size: var(--pp-maat-xs); }
/* de laatste rij (Toegevoegde waarde): dezelfde onderrand onder de hele rij, niet alleen onder het label */
table.rooster tbody tr.toegevoegd th, table.rooster tbody tr.toegevoegd td { border-bottom: 1px solid var(--pp-rand-zacht); }
table.rooster tr.fout-rij th, table.rooster tr.fout-rij td { color: var(--pp-fout-tekst); background: var(--pp-fout-vlak); }
table.rooster td.uit input { display: none; }

/* live bijwerken: een collega wijzigde wat jij open hebt */
.collegabalk { display: flex; align-items: center; gap: var(--pp-r-3); margin-bottom: var(--pp-r-3); padding: var(--pp-r-2) var(--pp-r-3); border: 1px solid var(--pp-info-rand); border-left-width: 3px; border-radius: var(--pp-straal-m); background: var(--pp-info-vlak); color: var(--pp-tekst); font-size: var(--pp-maat-m); }
.collegabalk .knop { margin-left: auto; flex: none; }

/* ---------------------------------------------------------------- de schermen van de kern: calculatie (offerte.js) */

.kop { display: flex; align-items: flex-start; gap: 14px; margin-bottom: var(--pp-r-3); flex-wrap: wrap; }
.kop-links { min-width: 0; }
.kop-titel { margin: 0; font-size: var(--pp-maat-xl); font-weight: var(--pp-gewicht-half); color: var(--pp-kop); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kop .mini { color: var(--pp-tekst-3); font-size: var(--pp-maat-m); margin-top: 3px; overflow-wrap: anywhere; }
.kop .rechts { margin-left: auto; display: flex; gap: var(--pp-r-2); flex-wrap: wrap; align-items: center; }
.klantinfo { font-size: var(--pp-maat-basis); }
.rij2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.rij3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rij2.smal, .rij3.smal { gap: 10px; }
.rij2.boven { align-items: start; }
.aanvraagkaarten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.aanvraagkaarten .kaart { margin-bottom: 0; }
.kaart.aanvraag.klaar { border-color: var(--pp-ok-rand); }
.regelkeuzes { border: 1px solid var(--pp-rand); border-radius: var(--pp-straal-m); padding: 6px 10px 8px; margin: 8px 0 12px; min-width: 0; }
.regelkeuzes legend { font-size: var(--pp-maat-s); font-weight: var(--pp-gewicht-half); color: var(--pp-tekst-2); padding: 0 4px; }
/* lange woorden breken af binnen de kaart (een fieldset is anders minstens zo breed als zijn inhoud) */
.regelkeuze { margin: 6px 0; min-width: 0; }
.regelkeuze > span, .regelkeuze-tekst { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.resultaat { margin: 12px 0 0; }
.resultaat .knoppen { margin: 6px 0 8px; }
.resultaat p { margin: 0; font-size: var(--pp-maat-s); }
.kopie { display: flex; align-items: center; gap: 7px; }
.kopie label { font-size: var(--pp-maat-s); color: var(--pp-tekst-2); font-weight: var(--pp-gewicht-half); }
.kopblok { margin-bottom: 10px; }
.klantnaam { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.offerte-let { margin-top: 10px; }
.regelmeldingen-lijst { margin-top: 12px; font-size: var(--pp-maat-m); }
.regelmeldingen-lijst ul { margin: 0; padding-left: 18px; }
.regelmeldingen-lijst li { margin: 3px 0; overflow-wrap: anywhere; word-break: break-word; }
table.aanvragen td ul li { margin: 1px 0; }
.rlabel:empty::after { content: none; }
.gelezen { font-size: var(--pp-maat-xs); color: var(--pp-info-tekst); margin-top: 2px; text-align: left; white-space: normal; line-height: 1.35; }
td.n .gelezen { text-align: right; }
.hulp.aandacht, .onbekend { color: var(--pp-let-tekst); font-weight: var(--pp-gewicht-half); }
ul.kaal { list-style: none; margin: 0; padding: 0; }
/* conflict: wat je had ingevuld */
.jouwinvoer { background: var(--pp-vlak-2); border: 1px solid var(--pp-rand); border-radius: var(--pp-straal-m); padding: 8px 12px; margin: 8px 0; }
table.invoerlijst th { background: none; border: 0; padding: 3px 12px 3px 0; height: auto; white-space: normal; vertical-align: top; width: 40%; }
table.invoerlijst td { border: 0; padding: 3px 0; height: auto; }
table.regels td { vertical-align: top; }
table.regels .bedrag { font-weight: var(--pp-gewicht-half); }
.afwijking, td.afwijking .bedrag { color: var(--pp-fout-tekst); font-weight: var(--pp-gewicht-half); }
td.merkjes .merkje { margin: 0 4px 3px 0; }
.knoppen-cel a { margin-right: 8px; }

/* ---------------------------------------------------------------- het regelvenster (regel.js) */

.checklist-basis { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.checklist { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; margin-top: 4px; }
.labelrij { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 3px; }
.labelrij label { margin: 0; }
.keuzes { list-style: none; margin: 4px 0 0; padding: 4px; border: 1px solid var(--pp-rand); border-radius: var(--pp-straal-m); background: var(--pp-vlak); box-shadow: var(--pp-schaduw-2); max-height: 220px; overflow: auto; }
/* een keuze onder het knopje van een veld van de checklist (niet .zoekveld.keuze: dat is een zoekveld met een keuzelijst) */
.keuzes .keuze { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 6px 8px; border-radius: var(--pp-straal-s); cursor: pointer; font-size: var(--pp-maat-s); white-space: pre-line; overflow-wrap: anywhere; color: var(--pp-tekst); }
.keuzes .keuze:hover, .keuzes .keuze:focus-visible { background: var(--pp-vlak-hover); }
.wdrij { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; margin-bottom: 14px; }
.kaart.wd { margin-bottom: 0; padding: 0; overflow: hidden; }
.kaart.wd > h3 {
  margin: 0; font-size: var(--pp-maat-basis); color: var(--pp-kop); padding: 10px var(--pp-r-4); border-bottom: 1px solid var(--pp-rand);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.kaart.wd > h3 .rechts { margin-left: auto; }
.kaart.wd > :not(h3) { margin-left: var(--pp-r-4); margin-right: var(--pp-r-4); }
.kaart.wd.niet-actief { border-style: dashed; }
.kaart.wd.niet-actief > h3 { color: var(--pp-tekst-3); }
.wdvelden { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: end; }
.wdvelden .vinkje { grid-column: 1 / -1; margin: 0 0 4px; }
.uitleg { font-size: var(--pp-maat-xs); color: var(--pp-tekst-3); margin-top: 3px; white-space: normal; text-align: left; line-height: 1.35; }
td.n .uitleg { text-align: right; }
.uitleg.waarschuwing { color: var(--pp-fout-tekst); font-weight: var(--pp-gewicht-half); }
.staffeluitkomst ul { margin: 6px 0; }
.staffeluitkomst li.aandacht { color: var(--pp-let-tekst); font-weight: var(--pp-gewicht-half); }
.basisvoorstel { border-top: 1px solid var(--pp-ok-rand); margin-top: 8px; padding-top: 8px; }
.basisvoorstel p { margin: 0 0 6px; }
/* de afspraken met een leverancier: een kaart in het oranje van let op */
.afspraak {
  background: var(--pp-let-vlak); border: 1px solid var(--pp-let-rand); border-left: 3px solid var(--pp-let-tekst); border-radius: var(--pp-straal-m);
  padding: 11px 13px; font-size: var(--pp-maat-s); position: sticky; top: calc(var(--pp-balk) + 72px); overflow-wrap: anywhere; color: var(--pp-tekst);
}
.afspraak-kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.afspraak h4 { margin: 0; font-size: var(--pp-maat-m); color: var(--pp-let-tekst); }
.afspraak h5 { margin: 10px 0 4px; font-size: var(--pp-maat-s); color: var(--pp-let-tekst); }
.afspraak-tekst { white-space: pre-line; margin: 0 0 6px; }
.afspraak ul { margin: 4px 0 0; padding-left: 17px; }
.afspraak li { margin: 2px 0; }
.afspraak .sub { color: var(--pp-tekst-2); }
.voorbeeld { max-width: 460px; }
.voorbeeld .afspraak { position: static; }
.toevoegen { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border-top: 1px dashed var(--pp-rand); padding-top: 12px; margin-top: 12px; }
.toevoegen .veld { margin: 0; min-width: 280px; }
.toevoegen .rveld { min-width: 320px; }
table.prepress td { vertical-align: middle; }
table.prepress .smal { width: 140px; }
table.prepress .soort { width: 250px; }
table.prepress td.soort select { width: 100%; }
.snelknoppen { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.prijsinvoer { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 6px; }
.paneel-inhoud { min-width: 0; }
.oplagenrij { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.oplagenrij .rlabel { width: 124px; padding-top: 0; flex: none; }
.oplagenrij .oplagen { width: min(420px, 100%); }
.oplagenrij .vinkje { margin: 0 0 0 10px; }
.oplagenhulp { margin: 2px 0 10px 134px; }
.checklistraster { display: flex; flex-direction: column; gap: 5px; }
.clrij { display: grid; grid-template-columns: 124px minmax(0, 1fr) 30px; gap: 4px 10px; align-items: start; }
.clrij.enkel { grid-template-columns: 124px minmax(0, 1fr); margin-bottom: 10px; }
.clrij > .rlabel { padding-top: 7px; }
.clrij textarea, .clrij input { width: 100%; }
textarea.omschrijving2 { min-height: 0; }
.clrij textarea { min-height: 32px; }
.clrij .keuzes { grid-column: 2 / 3; margin: 0; }
.checklist-onder {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px 28px; align-items: start;
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--pp-rand);
}
.samenvattingblok { border: 1px solid var(--pp-rand); border-radius: var(--pp-straal-m); background: var(--pp-vlak-2); padding: 6px 12px; margin-bottom: 12px; }
.samenvattingblok summary { cursor: pointer; font-weight: var(--pp-gewicht-half); color: var(--pp-kop); }
dl.samenvatting { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 2px 10px; margin: 6px 0 2px; font-size: var(--pp-maat-m); }
dl.samenvatting dt { font-weight: var(--pp-gewicht-half); text-align: right; color: var(--pp-tekst-2); }
dl.samenvatting dd { margin: 0; overflow-wrap: anywhere; }
.raster-prijs { margin-bottom: 8px; }
.raster-prijs .rveld { grid-template-columns: 170px minmax(0, 1fr); }
.raster-prijs .rinvoer > input.getal { max-width: 170px; }
.spoedhulp { margin-top: 14px; border: 1px solid var(--pp-rand); border-radius: var(--pp-straal-m); padding: 10px 14px; background: var(--pp-vlak-2); }
.spoedhulp .blokkop { margin-top: 0; display: flex; align-items: center; gap: 8px; }
.spoedrij { display: flex; gap: 10px 24px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.spoedrij .rveld { grid-template-columns: auto minmax(0, 1fr); min-width: 220px; }
.spoed-let-op { margin: 4px 0 6px; padding-left: 18px; }
/* Aanvraag werkderden: de status verandert niet vanzelf; de knop zet hem zelf */
.statusbalk { display: flex; gap: 10px 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.statusbalk .merkje { margin: 0 2px; }
.spoeduitkomst { font-size: var(--pp-maat-basis); color: var(--pp-kop); }
.berekend-bedrag .bedrag { font-weight: var(--pp-gewicht-half); }
.vast-bedrag > .uitleg:first-child { margin: 0 0 3px; }
.prijsper { white-space: nowrap; }
.opmerkingvak { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; margin-top: 14px; align-items: start; }
.opmerkingvak .afspraak { position: static; }
table.staffeltabel td:first-child, table.staffeltabel td:nth-child(2) { width: 150px; }
table.staffeltabel td:last-child { width: 1%; white-space: nowrap; }
table.staffeltabel { max-width: 860px; }

/* ---------------------------------------------------------------- stamgegevens, dashboard, support */

fieldset.groep { border: 1px solid var(--pp-rand); border-radius: var(--pp-straal-m); padding: 8px 12px 10px; margin: 12px 0 0; min-width: 0; }
fieldset.groep > legend { font-weight: var(--pp-gewicht-half); color: var(--pp-kop); font-size: var(--pp-maat-m); padding: 0 4px; }
.klantregels { align-items: stretch; }
.levlijst { display: flex; flex-direction: column; gap: 5px; margin-bottom: 6px; }
.levrij { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.levrij select { flex: 1; min-width: 160px; }
.levnr { font-size: var(--pp-maat-s); color: var(--pp-tekst-3); min-width: 58px; }
.raster-instellingen .rveld { grid-template-columns: 230px minmax(0, 1fr); }
.raster-instellingen .rinvoer > input { max-width: 520px; }
.modulekoppen { display: grid; gap: 10px; margin-top: 12px; }
.modulekop:empty { display: none; }

/* het dashboard (6 Management): de tellers, Ik, Mijn team of Iedereen, de tabbladen en de blokken */
.dashblok { margin-top: 14px; min-width: 0; }
.dashblok .blokkop { margin: 0 0 2px; }
.dashblok > .sub { margin: 0 0 6px; }
.dashblok > .dashmeer { margin: 6px 0 0; }
.bijgewerkt { color: var(--pp-tekst-3); font-size: var(--pp-maat-s); margin: 8px 0 0; }
.wiebalk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; }
.wiebalk .sub:last-child { flex: 1 1 260px; }
.dashtabs { margin-top: 12px; }
.dashtabs .dashblok:first-child { margin-top: 4px; }

.support { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: start; }
/* Over PrimaPress: de tabel Onderdelen onder het blok Over, over de hele breedte, zodat "Wat het doet" op 1280 helemaal
   in beeld staat (integratieronde, werking 78) */
.support.over-scherm { grid-template-columns: minmax(0, 1fr); }
/* scrolt de pagina naar een blok (de focus of een link), dan valt de bovenkant niet onder de bovenbalk en de titelbalk */
.supportblok { outline: none; scroll-margin-top: calc(var(--balk) + 72px); }
.supportblok p { max-width: 720px; }
table.toetsen th { text-align: left; white-space: nowrap; background: none; font-size: var(--pp-maat-m); color: var(--pp-tekst); width: 1%; vertical-align: top; height: auto; }
table.toetsen td, table.toetsen th { border-bottom: 1px solid var(--pp-rand-zacht); padding: 6px 10px 6px 0; height: auto; }
/* een kop met alleen een logo erin (de naam staat in de alt-tekst van het logo) */
.over-naam { margin: 0; font-size: 0; line-height: 0; }
/* het volledige logo op wit: 48 px hoog, eronder minstens de hoogte van een tegel (23 px) vrij; smaller dan het logo:
   kleiner in de verhouding van het bestand (object-fit: contain), nooit vervormd. In de donkere modus het witte logo. */
.over-logo {
  display: block; height: 48px; width: auto; max-width: 100%; object-fit: contain; object-position: left center;
  /* rondom minstens de hoogte van een tegel vrij (46,5 procent van 48 px is 22,3 px; HUISSTIJL.md) */
  margin: 15px 0 24px 7px;
}
.over-intro { color: var(--pp-tekst); max-width: 760px; }
.over-letters { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; padding: 0; }
/* optimalisatie 2.0 (ONTW-22): de pillen op het gewone vlak, zodat de rode letter 5,1:1 haalt (op vlak-2 was het 4,499:1) */
.over-letters li { background: var(--pp-vlak); border: 1px solid var(--pp-invoer-rand); border-radius: var(--pp-merkje-straal); padding: 4px 16px; color: var(--pp-tekst); font-size: var(--pp-maat-basis); }
.over-letter, .over-press { color: var(--pp-accent-tekst); font-weight: var(--pp-gewicht-vet); }
.over-press-regel { color: var(--pp-tekst); margin: 0 0 14px; }
/* Over PrimaPress, tabel Onderdelen: geen woord midden in afbreken; de beschrijving houdt een leesbare breedte */
table.over-modules td { overflow-wrap: normal; word-break: normal; }
table.over-modules td.over-wat { min-width: 14em; }
.modulehoofdstukken .hoofdstuk { border-top: 1px solid var(--pp-rand-zacht); padding-top: 4px; }
.modulehoofdstukken ol { margin: 4px 0 10px; padding-left: 20px; }

/* Meer keuzes tegelijk (MK.meerKeuze): de knop ziet eruit als een keuzelijst en opent een venster met vinkjes */
.meerknop {
  position: relative; width: 100%; height: var(--pp-veld-hoogte); padding: 0 26px 0 10px; border: 1px solid var(--pp-invoer-rand); border-radius: var(--pp-veld-straal);
  background: var(--pp-vlak); color: var(--pp-tekst); font: inherit; font-size: var(--pp-maat-m); text-align: left; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.meerknop::after { content: "\25BE"; position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: var(--pp-tekst-3); }
.meerknop:hover { border-color: var(--pp-tekst-3); }
.meer-snel { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.meer-groepen { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 14px; }
.meer-groep { border: 1px solid var(--pp-rand); border-radius: var(--pp-straal-m); padding: 6px 10px 8px; margin: 0; min-width: 0; }
.meer-groep.meer-zonder-naam { border: 0; padding: 0; }
.meer-groep legend { font-size: var(--pp-maat-s); font-weight: var(--pp-gewicht-half); color: var(--pp-kop); padding: 0 4px; }
.meer-groep .vinkje { display: flex; margin: 3px 0; }

/* ---------------------------------------------------------------- printen van een offerte (brief.js): papier */

.printkop { margin-bottom: 4px; }
.printresultaat .resultaat { margin: 8px 0 4px; }
.printvak { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 640px); gap: 18px; align-items: start; }
.printlinks { min-width: 0; }
.printlinks .tabbladen { margin-top: 10px; }
.printlinks .raster .rveld { grid-template-columns: 140px minmax(0, 1fr); }
.printrechts { min-width: 0; position: sticky; top: calc(var(--pp-balk) + 72px); }
.printrechts > .blokkop { margin: 10px 0 0; }
.voorbeeldtabs { margin-top: 6px; }
.voorbeeldtabs .tabpaneel {
  max-height: calc(100vh - var(--pp-balk) - 190px); overflow: auto; background: var(--pp-papier-onder); border: 1px solid var(--pp-rand);
  border-top: 0; border-radius: 0 0 var(--pp-straal-m) var(--pp-straal-m); padding: 12px;
}
/* W1-ui: de zin mag breken (ook een lang adres) en duwt de knoppenrij nooit breder dan het venster; op een telefoon
   blijft de knoppenrij een regel en valt de zin daar weg */
.niets-vanzelf { max-width: 560px; margin-left: 10px; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) { .knoppenrij .niets-vanzelf { display: none; } }
.controlelijst { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.controle {
  display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; padding: 7px 10px; border-radius: var(--pp-straal-s);
  border: 1px solid; border-left-width: 3px; font-size: var(--pp-maat-m); overflow-wrap: anywhere; color: var(--pp-tekst);
}
.controle-tekst { flex: 1; min-width: 0; }
.controle-knoppen { display: flex; gap: 6px; flex: none; }
.c-blok { background: var(--pp-fout-vlak); border-color: var(--pp-fout-rand); border-left-color: var(--pp-fout-tekst); }
.c-waar { background: var(--pp-let-vlak); border-color: var(--pp-let-rand); border-left-color: var(--pp-let-tekst); }
.c-info { background: var(--pp-info-vlak); border-color: var(--pp-info-rand); border-left-color: var(--pp-info-tekst); }
.meldingen-calculatie { margin-top: 10px; font-size: var(--pp-maat-s); }
.meldingen-calculatie summary { cursor: pointer; font-weight: var(--pp-gewicht-half); color: var(--pp-kop); }
.meldingen-calculatie ul { margin: 6px 0 0; padding-left: 18px; }
/* de conceptmail en de brief: papier, ook in de donkere modus */
.mail-voorbeeld { background: var(--pp-papier); color: var(--pp-papier-tekst); border: 1px solid var(--pp-rand); border-radius: var(--pp-straal-s); padding: 12px 14px; }
table.mailkop { border-collapse: collapse; margin-bottom: 10px; width: 100%; }
table.mailkop th { text-align: left; width: 90px; color: var(--pp-papier-grijs); background: var(--pp-papier); font-weight: var(--pp-gewicht-vet); font-size: 12.5px; padding: 2px 8px 2px 0; height: auto; border: 0; vertical-align: top; }
table.mailkop td { font-size: 12.9px; padding: 2px 0; height: auto; border: 0; color: var(--pp-papier-tekst); }
.mail-tekst { border-top: 1px solid var(--pp-papier-lijn); padding-top: 10px; font-family: Arial, Helvetica, sans-serif; font-size: 13.5px; color: var(--pp-papier-mail); }

/* Het voorbeeld van de brief: de maten van docs/OFFERTE.md 1.1 in pt, met een vaste verkleining (--pt). */
.brief-bladen { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.brief-blad {
  --pt: 1px; position: relative; flex: none; width: calc(595.276 * var(--pt)); height: calc(841.89 * var(--pt));
  background: var(--pp-papier); box-shadow: var(--pp-papier-schaduw); color: var(--pp-papier-tekst); overflow: hidden;
  font-family: Helvetica, Arial, sans-serif; font-size: calc(11 * var(--pt));
}
.brief-blad strong, .brief-blad b { color: inherit; }
/* het logo: alleen het rode woordmerk (besluit B-78), zoals de PDF: het vak is de uitsnede offertebrief.LOGO_UITSNEDE
   (pixels 147 tot 391 en 46 tot 98 van het beeld van 420 x 145) op 463,38 / 38,76, 78,43 x 16,71 pt; het beeldmerk valt
   buiten het vak (W1-ui) */
.brief-logo-vak { position: absolute; left: calc(463.38 * var(--pt)); top: calc(38.76 * var(--pt)); width: calc(78.43 * var(--pt)); height: calc(16.71 * var(--pt)); overflow: hidden; }
.brief-logo { position: absolute; left: calc(-47.25 * var(--pt)); top: calc(-14.79 * var(--pt)); width: calc(135 * var(--pt)); height: calc(46.61 * var(--pt)); max-width: none; }
.brief-afzender .afz { position: absolute; left: calc(463.2 * var(--pt)); line-height: 1; white-space: pre; font-size: calc(8.04 * var(--pt)); }
.brief-afzender .afz-1 { top: calc(85.4 * var(--pt)); font-size: calc(8.52 * var(--pt)); font-weight: 700; }
.brief-afzender .afz-2 { top: calc(105.4 * var(--pt)); font-size: calc(8.52 * var(--pt)); font-weight: 700; }
.brief-afzender .afz-3 { top: calc(115.5 * var(--pt)); text-decoration: underline; }
.brief-afzender .afz-4 { top: calc(124.9 * var(--pt)); }
.brief-afzender .afz-5 { top: calc(124.9 * var(--pt)); left: calc(475.1 * var(--pt)); }
.brief-regels { position: absolute; left: 0; right: 0; top: calc(119.05 * var(--pt)); }
.brief-regel { position: relative; height: calc(12.65 * var(--pt)); line-height: calc(12.65 * var(--pt)); white-space: pre; }
.brief-regel > span { position: absolute; top: 0; }
.brief-regel .vet { font-weight: 700; }
.brief-regel .k-links { left: calc(82.2 * var(--pt)); }
.brief-regel .k-dp { left: calc(153.2 * var(--pt)); }
.brief-regel .k-waarde { left: calc(166.2 * var(--pt)); }
.brief-regel .k-excl { right: calc(173.076 * var(--pt)); }
.brief-regel .k-incl { right: calc(88.076 * var(--pt)); }
.brief-regel .k-euro-excl { left: calc(364.3 * var(--pt)); }
.brief-regel .k-euro-incl { left: calc(452.4 * var(--pt)); }
.brief-link { color: var(--pp-papier-link); text-decoration: underline; }
.brief-voet { position: absolute; line-height: 1; white-space: pre; font-size: calc(8.04 * var(--pt)); left: calc(79.1 * var(--pt)); }
.brief-voet.voet-1 { top: calc(788.3 * var(--pt)); }
.brief-voet.voet-2 { top: calc(797.9 * var(--pt)); }
.brief-voet.voet-blad { left: calc(450.2 * var(--pt)); top: calc(797.3 * var(--pt)); font-size: calc(10 * var(--pt)); color: var(--pp-papier-grijs); }
@media (max-width: 1400px) { .brief-blad { --pt: .95px; } }
/* W1-ui: op een smal scherm een kleiner blad, zodat het hele blad in het vak past (zoals de orderbevestiging) */
@media (max-width: 760px) { .brief-blad { --pt: .75px; } }
@media (max-width: 480px) { .brief-blad { --pt: .52px; } }

/* ---------------------------------------------------------------- smalle schermen */

.rail .merk .smal { display: none; }
.bovenbalk .merk-telefoon { display: none; height: auto; padding: 0 var(--pp-r-1); }

/* tot 1180 px: minder kolommen in de inhoud */
@media (max-width: 1180px) {
  .tellers.kern { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .raster-3, .raster-invoer.raster-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raster-3 > .rkolom:last-child { grid-column: 1 / -1; }
  .startraster { grid-template-columns: minmax(0, 1fr); }
  .titelbalk .stappen li span { display: none; }
  /* optimalisatie 2.0 (ONTW-17): de stap van nu houdt zijn woord, met "2 van 5" erbij */
  .titelbalk .stappen li.nu span { display: inline; }
  .titelbalk .stappen li.nu .stapvan { display: inline; }
  /* tegencontrole G (10-10-2026): met het woord erbij is de stap van nu zo breed als zijn tekst en neemt de rij zijn eigen
     breedte (past hij niet naast de titel, dan breekt de titelbalk af); in 150 px liep "Wachten (1 van 5)" over de stippen */
  .titelbalk .stappen { flex: 0 0 auto; }
  .titelbalk .stappen li.nu { flex: 0 0 auto; }
  .printvak { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1080px) {
  .mappen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rij2, .rij3, .aanvraagkaarten { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1000px) {
  .wdrij, .opmerkingvak { grid-template-columns: minmax(0, 1fr); }
  .wdvelden { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .prijsinvoer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .support { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .checklist-basis, .checklist, .checklist-onder { grid-template-columns: minmax(0, 1fr); }
  .oplagenhulp { margin-left: 0; }
}

/* van 761 tot 1180 px: de navigatie is een smalle strook met pictogram en cijfer; het submenu van een gebied
   verschijnt ernaast, altijd op dezelfde plek */
@media (min-width: 761px) and (max-width: 1180px) {
  .schil { grid-template-columns: var(--pp-rail-smal) minmax(0, 1fr); }
  .rail { padding: 0 var(--pp-r-2) var(--pp-r-2); }
  .rail .merk { justify-content: center; padding: 0; }
  .rail .merk .breed, .rail-naam, .rail-voet .sub { display: none; }
  .rail .merk .smal { display: block; }
  .rail-item { flex-direction: column; justify-content: center; gap: 2px; height: 46px; padding: 0; }
  .rail-item kbd { height: 14px; min-width: 14px; padding: 0 3px; border: 0; background: none; font-size: 10px; }
  .rail-item.aan::before { left: calc(-1 * var(--pp-r-2)); }
  .rail-sub { display: none; }
  .rail-sub.open {
    display: flex; position: fixed; left: calc(var(--pp-rail-smal) + var(--pp-r-1)); top: calc(var(--pp-balk) + var(--pp-r-1)); z-index: 40; width: 236px;
    margin: 0; padding: var(--pp-r-2); background: var(--pp-schil-2); border: 1px solid var(--pp-schil-rand);
    border-radius: var(--pp-kaart-straal); box-shadow: var(--pp-schaduw-3);
  }
  .rail-voet { justify-content: center; flex-direction: column; }
  .rail-voet .rechts { margin-left: 0; }
  /* de kruimels: alleen waar je bent en een stap terug */
  .kruimels a:not(:last-of-type), .kruimels a:not(:last-of-type) + .scheiding { display: none; }
}

/* tot 760 px (telefoon): de navigatie is een la, het blad vult het scherm */
@media (max-width: 760px) {
  .schil { grid-template-columns: minmax(0, 1fr); }
  .rail {
    /* align-self: stretch, anders maakt align-self: start van de brede navigatie de la zo hoog als zijn inhoud */
    position: fixed; inset: 0 auto 0 0; z-index: 80; width: min(300px, 86vw); height: auto; align-self: stretch;
    box-shadow: var(--pp-schaduw-3); transform: translateX(-104%);
    visibility: hidden; transition: transform var(--pp-duur-3) var(--pp-gang), visibility 0s linear var(--pp-duur-3);
  }
  .rail-open .rail { transform: none; visibility: visible; transition: transform var(--pp-duur-3) var(--pp-gang); }
  .rail-open .sluier { display: block; position: fixed; inset: 0; z-index: 75; background: var(--pp-sluier); border: 0; padding: 0; }
  .rail-item { height: 44px; }
  .menuknop { display: inline-grid; }
  .bovenbalk { grid-column: 1; padding: 0 var(--pp-r-3) 0 var(--pp-r-2); gap: var(--pp-r-2); }
  .bovenbalk::after { display: none; }
  .bovenbalk .merk-telefoon { display: flex; }
  .kruimels a, .kruimels .scheiding { display: none; }
  .zoekstart { flex: none; width: 34px; padding: 0; justify-content: center; margin-left: auto; }
  .zoekstart-tekst, .zoekstart kbd, .livestand .sub, .livestand .naam, .ik { display: none; }
  .livestand { padding: 0 10px; }
  .omgeving { padding: 0 6px; letter-spacing: 0; }
  .werkvlak { grid-column: 1; padding: var(--pp-r-3); border-radius: var(--pp-straal-xl) var(--pp-straal-xl) 0 0; }
  .scherm { min-height: calc(100vh - var(--pp-balk) - 2 * var(--pp-r-3)); }
  .titelbalk { padding: var(--pp-r-3); flex-wrap: wrap; min-height: 0; }
  /* samenvoegen 2: een lange titel (het regelvenster) brak anders onder het rode merk af, met het merk alleen op de eerste regel */
  .titelbalk-tekst { font-size: var(--pp-maat-l); flex: 1 1 calc(100% - 4px - var(--pp-r-3)); }
  .titelbalk-rechts.sub { display: none; }
  .scherminhoud { padding: var(--pp-r-3); }
  .knoppenrij { padding: var(--pp-r-2) var(--pp-r-3); gap: var(--pp-r-2); }
  .knop.esc, .knop.enter { min-width: 0; padding: 0 14px; }
  .knop.enter::after { display: none; }
  .tellers, .tellers.kern { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .telspoor { display: none; }
  .startkop h1 { font-size: var(--pp-maat-xl); }
  .raster-2, .raster-3, .raster-invoer.raster-3 { grid-template-columns: minmax(0, 1fr); }
  .rveld, .venster .raster .rveld, .detail .rveld, .raster-prijs .rveld, .raster-instellingen .rveld { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .rlabel { text-align: left; padding-top: 0; }
  .feitenbalk > .feit, .feitenbalk > .feit.breed { flex: 1 1 140px; }
  .titelbalk .stappen { flex: 1 1 100%; order: 5; margin: 0; }
  .titelbalk .stappen li.nu span { display: inline; }
  .mappen { grid-template-columns: minmax(0, 1fr); }
  .zoekveld, .zoekveld.smal, .zoekveld.keuze { flex: 1 1 140px; max-width: none; }
  .smal-weg { display: none; }
  .kaart > h2 { flex-wrap: wrap; }
  .kaart.strak { overflow-x: auto; }
  .laag { padding: var(--pp-r-3); align-items: end; }
  .venster, .venster.breed, .palet { max-height: 88vh; }
  .printdeel { grid-template-columns: minmax(0, 1fr); }
  .printblik { display: none; }
  .palet-voet span:nth-child(n+3) { display: none; }
  .menu { position: fixed; left: var(--pp-r-3); right: var(--pp-r-3); bottom: 64px; }
  .clrij, .clrij.enkel { grid-template-columns: minmax(0, 1fr) 30px; }
  .clrij > .rlabel { grid-column: 1 / -1; text-align: left; padding-top: 0; }
  .oplagenrij .rlabel { width: auto; }
  dl.samenvatting { grid-template-columns: minmax(0, 1fr); }
  dl.samenvatting dt { text-align: left; }
  table.rooster th[scope=row] { width: 120px; }
  .collegabalk { flex-wrap: wrap; }
  .inlogscherm:has(> .inlogpaneel) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .inlogpaneel { padding: var(--pp-r-6) var(--pp-r-5); gap: var(--pp-r-4); }
  .inlogpaneel::after { top: var(--pp-r-6); height: 40px; }
  .inlogpaneel p, .inlogletters { display: none; }
  .inlogkant { justify-content: flex-start; padding: var(--pp-r-5) var(--pp-r-4); }
  .inlogkant .inlogkaart { padding: var(--pp-r-5); }
  .inlogbody { padding: 0 var(--pp-r-4) var(--pp-r-4); }
  .inlogkop { padding: var(--pp-r-6) var(--pp-r-4) var(--pp-r-4); }
}

/* optimalisatie 2.0 (ONTW-10, DESIGNSYSTEEM.md 7.5): op een telefoon is een regel van een lijst met de telefoonregel
 * (MK.zoeklijst telefoonRegel) twee regels hoog: nummer, status en bedrag, daaronder de klant. Een bedrag staat nooit half
 * in beeld. Sorteren kan dan met de knoppen boven de lijst niet: de kolomkoppen vallen weg, zoals de kolommen smal-weg. */
@media (max-width: 760px) {
  table.telefoonregel, table.telefoonregel > tbody { display: block; width: 100%; }
  table.telefoonregel > thead { display: none; }
  table.telefoonregel tr[role=row] {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--pp-r-2);
    padding: 6px var(--pp-r-3); border-bottom: 1px solid var(--pp-rand-zacht);
  }
  table.telefoonregel tr[role=row] > td { display: block; height: auto; padding: 0; border: 0; min-width: 0; }
  table.telefoonregel tr[role=row] > td.smal-weg { display: none; }
  table.telefoonregel tr[role=row] > td.rek { grid-row: 2; grid-column: 1 / -1; width: auto; max-width: none; color: var(--pp-tekst-2); }
  table.telefoonregel tr.gekozen { background: var(--pp-gekozen-vlak); box-shadow: inset 3px 0 0 var(--pp-accent); }
  table.telefoonregel tr.gekozen > td.rek { color: var(--pp-gekozen-tekst); }
  table.telefoonregel tr.vulrij, table.telefoonregel tr.leegrij { display: block; }
  table.telefoonregel tr.vulrij > td, table.telefoonregel tr.leegrij > td { display: block; }
  /* een lege regel in een smal vak: de tekst breekt af binnen het scherm, ook als de kolomkoppen breder zijn */
  .zoektabel tr.leegrij td { white-space: normal; }
  .zoektabel tr.leegrij td .leegtekst { position: sticky; left: var(--pp-r-3); display: block; max-width: calc(100vw - 72px); }
}

/* optimalisatie 2.0 (ONTW-N05): bij een lage hoogte (inzoomen tot 200 procent op 1280 bij 800) schuift de titelbalk mee
 * met de pagina en zijn de balken compact; de knoppenrij met ESC en ENTER blijft staan */
@media (max-height: 560px) {
  .titelbalk { position: static; min-height: 0; padding-top: var(--pp-r-2); padding-bottom: var(--pp-r-2); }
  .knoppenrij { padding-top: 6px; padding-bottom: 6px; }
  html:has(.scherm > .titelbalk) { scroll-padding-top: calc(var(--pp-balk) + var(--pp-focus-marge)); }
}

/* optimalisatie 2.0 (ONTW-N02, WCAG 2.4.7 en 1.4.11): in een contrastthema (Windows, B-15) zet de browser zijn eigen
 * kleuren en verdwijnen schaduwen. De focusring is dan een lijn in Highlight, en wat gekozen is (de regel, het tabblad,
 * Ik, Mijn team of Iedereen, een keuze in het palet of de treffers) krijgt Highlight met HighlightText. */
@media (forced-colors: active) {
  :focus-visible, .knop:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
  .zoektabel th .sorteer:focus-visible, .rail :focus-visible, .bovenbalk :focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
  .zoektabel:focus-visible, .zoektabel[data-rust]:focus { outline: 2px solid Highlight; outline-offset: -2px; }
  .zoektabel tr.gekozen td, .zoektabel tbody tr.gekozen:hover td, table.telefoonregel tr.gekozen,
  .palet-item.gekozen, .treffer.gekozen, .keuzeknop.gekozen, .keuzerij .knop[aria-pressed="true"], .rail-item.aan {
    forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight;
  }
  .zoektabel tr.gekozen td .merkje, .zoektabel tr.gekozen td a { forced-color-adjust: none; color: HighlightText; background: Highlight; border-color: HighlightText; }
  .tabblad.aan::after, .tabs button.aan::after, .rail-item.aan::before { forced-color-adjust: none; background: Highlight; }
  .tabblad.aan { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
  .stappen li.nu::before { forced-color-adjust: none; background: Highlight; border-color: Highlight; }
  .printkeuze:has(input:checked) { outline: 2px solid Highlight; }
  .teltegel.aandacht { border-left: 3px solid CanvasText; }
}

/* het logo in twee uitvoeringen: op licht de kleurenversie, op donker de witte (huisstijl). Achteraan, zodat dit wint van
   de display van het logo zelf (.over-logo, .inloglogo) */
.op-donker { display: none; }
:root[data-thema="donker"] .op-licht { display: none; }
:root[data-thema="donker"] .op-donker { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) .op-licht { display: none; }
  :root:not([data-thema="licht"]) .op-donker { display: block; }
}

/* ---------------------------------------------------------------- minder beweging en printen */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .stip::after { display: none; }
}
@media print {
  .rail, .bovenbalk, .meldingen, .knoppenrij, .knop, .knoppen, .sluier { display: none !important; }
  html, body { background: var(--pp-papier); }
  .schil { display: block; min-height: 0; background: none; }
  .werkvlak { padding: 0; background: none; min-height: 0; border-radius: 0; }
  .scherm { border: 0; box-shadow: none; min-height: 0; }
  .titelbalk { position: static; color: var(--pp-papier-tekst); background: none; border-bottom: 1px solid var(--pp-print-rand); }
  .titelbalk::before { display: none; }
  .titelbalk-tekst { color: var(--pp-papier-tekst); }
  .kaart { break-inside: avoid; }
}