:root { --accent: #0000a4; --grijs: #f4f4f6; --rand: #ddd; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; background: var(--grijs); color: #1a1a1a; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  background: var(--accent); color: #fff; padding: 0 1.2rem; position: relative; z-index: 60; }
.brand { font-weight: 700; color: #fff; text-decoration: none; padding: .85rem 0; white-space: nowrap; }
.brand:hover { text-decoration: underline; }
main { max-width: 92rem; margin: 1.5rem auto; padding: 0 1rem; }
.kaart { background: #fff; border: 1px solid var(--rand); border-radius: .5rem;
  padding: 1.2rem; margin-bottom: 1.2rem; }
.kaart.smal { max-width: 22rem; }
label { display: block; margin-bottom: .8rem; }
input[type=text], input[type=password] { width: 100%; padding: .5rem; border: 1px solid var(--rand);
  border-radius: .3rem; font-size: 1rem; }
button { background: var(--accent); color: #fff; border: 0; border-radius: .3rem;
  padding: .55rem 1.1rem; font-size: 1rem; cursor: pointer; }
/* Een knop die als link moet ogen. De basisregel hierboven zet de tekst wit voor de gekleurde
   knoppen; zonder die kleur terug te draaien staat zo'n knop wit-op-wit en zie je hem niet. */
button.linkish { background: none; padding: 0; text-decoration: underline; color: inherit; }
.topbar button.linkish { color: #fff; }

/* ---------------------------------------------------------------------------
   Megamenu. Vier groepen met een uitklappaneel eronder; de items dragen een
   regel uitleg zodat je niet hoeft te gokken wat er achter een naam zit.
   Alles staat hier en niet in de pagina zelf: de CSP blokkeert inline stijl,
   dus een <style>-blok in de template zou stilzwijgend genegeerd worden.
   --------------------------------------------------------------------------- */
.hoofdmenu { display: flex; align-items: stretch; gap: .15rem; flex: 1; }
.navlink { color: #fff; text-decoration: none; display: flex; align-items: center;
  padding: .85rem .8rem; border-bottom: 3px solid transparent; }
.navlink:hover { background: rgba(255, 255, 255, .12); }
.navlink.hier { border-bottom-color: #fff; font-weight: 600; }

.menugroep { position: relative; display: flex; }
.groepknop { background: none; border: 0; color: #fff; font: inherit; cursor: pointer;
  padding: .85rem .8rem; display: flex; align-items: center; gap: .4rem;
  border-bottom: 3px solid transparent; border-radius: 0; }
.groepknop:hover { background: rgba(255, 255, 255, .12); }
.menugroep.hier > .groepknop { border-bottom-color: #fff; font-weight: 600; }
.groepknop[aria-expanded="true"] { background: #fff; color: var(--accent); }
.pijl { border: solid currentColor; border-width: 0 2px 2px 0; padding: .16rem;
  transform: rotate(45deg) translateY(-.1rem); transition: transform .12s ease; }
.groepknop[aria-expanded="true"] .pijl { transform: rotate(-135deg) translateY(-.1rem); }

.paneel { position: absolute; top: 100%; left: 0; min-width: 21rem; background: #fff;
  color: #1a1a1a; border: 1px solid var(--rand); border-top: 0;
  border-radius: 0 0 .5rem .5rem; box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
  padding: .9rem 1rem 1rem; }
.paneel[hidden] { display: none; }
.paneeluitleg { margin: 0 0 .7rem; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .07em; color: #6a6a75; }
.paneellijst { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.paneel.breed { min-width: 40rem; }
.paneel.breed .paneellijst { grid-template-columns: 1fr 1fr; gap: .15rem .6rem; }
.paneellijst a { display: block; padding: .5rem .6rem; border-radius: .35rem;
  text-decoration: none; color: inherit; }
.paneellijst a:hover, .paneellijst a:focus-visible { background: #eef0fb; }
.paneellijst a[aria-current="page"] { background: #eef0fb;
  box-shadow: inset 3px 0 0 var(--accent); }
.itemtitel { display: block; font-weight: 600; color: var(--accent); }
.itemuitleg { display: block; font-size: .82rem; color: #555; line-height: 1.4; }

.uitlogform { margin-left: auto; display: flex; align-items: center; white-space: nowrap; }

/* De hamburger verschijnt pas als de balk te smal wordt. */
.menuknop { display: none; background: none; border: 0; padding: .7rem .5rem; cursor: pointer; }
.menustreep, .menustreep::before, .menustreep::after { display: block; width: 1.4rem; height: 2px;
  background: #fff; border-radius: 2px; }
.menustreep { position: relative; }
.menustreep::before, .menustreep::after { content: ''; position: absolute; left: 0; }
.menustreep::before { top: -.45rem; }
.menustreep::after { top: .45rem; }
.visueel-verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 68rem) {
  .topbar { flex-wrap: wrap; }
  .menuknop { display: block; margin-left: auto; }
  .hoofdmenu { display: none; flex-direction: column; align-items: stretch;
    flex-basis: 100%; gap: 0; padding-bottom: .6rem; }
  .hoofdmenu.open { display: flex; }
  .menugroep { display: block; }
  .groepknop { width: 100%; justify-content: space-between; }
  .paneel, .paneel.breed { position: static; min-width: 0; box-shadow: none;
    border: 0; border-radius: .4rem; margin: 0 0 .5rem; }
  .paneel.breed .paneellijst { grid-template-columns: 1fr; }
  .uitlogform { margin: .4rem 0 0 .8rem; }
}

.fout { background: #ffe8e8; border: 1px solid #e0a0a0; padding: .6rem .8rem; border-radius: .3rem; }
.ok { background: #e6f7e6; border: 1px solid #9ad09a; padding: .6rem .8rem; border-radius: .3rem; }
select { padding: .5rem; border: 1px solid var(--rand); border-radius: .3rem; font-size: 1rem; }
.stil { color: #666; }
.inline { display: inline; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid var(--rand); }
.tabelwrap { overflow-x: auto; }
.tabelwrap table { font-size: .85rem; }
.tabelwrap th, .tabelwrap td { padding: .3rem .45rem; white-space: nowrap; }
.tabelwrap td.wrap { white-space: normal; min-width: 11rem; }
.klein { font-size: .82rem; }
input.klein { width: 8rem; padding: .25rem; font-size: .82rem; }
.blok { display: block; }
.selfoto { white-space: nowrap; }
.selfoto input { vertical-align: middle; margin-right: .25rem; }
.rangnr { display: inline-block; min-width: 1.7rem; height: 1.7rem; line-height: 1.7rem; text-align: center;
  background: var(--accent); color: #fff; border-radius: 50%; font-size: .9rem; margin-right: .3rem; }
.info { color: var(--accent); font-size: .85em; margin-left: .1rem; }
.tabelwrap th[data-tip], .tabelwrap th[title] { cursor: help; }
.tabelwrap th[data-tip]:hover { background: #eef; }
.tipdoel[data-tip], .tipdoel[title] { cursor: help; }
.tiptekst { position: fixed; z-index: 50; max-width: 26rem; display: none;
  background: #1f1f24; color: #fff; padding: .55rem .7rem; border-radius: .35rem;
  font-size: .82rem; font-weight: 400; line-height: 1.5; white-space: pre-line;
  box-shadow: 0 4px 14px rgba(0,0,0,.28); }
.tiptekst.zichtbaar { display: block; }
.tabelwrap td.advies { white-space: normal; min-width: 4.5rem; }
.uitlegblok summary { cursor: pointer; font-weight: 600; }
.uitlegblok dl { margin: .8rem 0 0; display: grid; grid-template-columns: 9rem 1fr; gap: .35rem .8rem; }
.uitlegblok dt { font-weight: 700; }
.uitlegblok dd { margin: 0; color: #444; }
@media (max-width: 40rem) { .uitlegblok dl { grid-template-columns: 1fr; } .uitlegblok dd { margin-bottom: .5rem; } }
.concbadge { display: inline-block; min-width: 1.6rem; text-align: center; padding: .1rem .3rem;
  border-radius: .3rem; font-weight: 700; }
.concbadge.vrij { background: #e6f7e6; color: #1a7f37; border: 1px solid #9ad09a; }
.concbadge.druk { background: #ffe8e8; color: #b02020; border: 1px solid #e0a0a0; }
.winstknop, .ideaalknop { background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  text-decoration: underline dotted; }
.winstknop { font-weight: 600; }
.ideaalknop { color: var(--accent); font-weight: 700; }
.rekenrij > td { background: #f7f7fb; }
.rekenuit { padding: .4rem 0 .2rem; max-width: 46rem; white-space: normal; }
.rekentabel { max-width: 34rem; margin-top: .5rem; }
.rekentabel td { padding: .25rem .5rem; }
.rekentabel td.rechts { text-align: right; white-space: nowrap; }
.rekentabel .totaalrij td { border-top: 2px solid #1a1a1a; border-bottom: 0; }
.staaf { display: flex; height: 1.4rem; border-radius: .25rem; overflow: hidden; margin: .5rem 0;
  max-width: 34rem; background: #e8e8ec; }
.staaf .deel { height: 100%; }
.vlek { display: inline-block; width: .7rem; height: .7rem; border-radius: .15rem; vertical-align: middle; }
.kcommissie { background: #7b5cd6; } .kfulfil { background: #2f80ed; } .kopslag { background: #e2a33c; }
.kinkoop { background: #8a8a8a; } .kwinst { background: #1a7f37; } .kverlies { background: #b02020; }
input.bestel, input.smal { width: 4rem; padding: .25rem; font-size: .85rem; }
.bulkbalk { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; padding: .8rem 1.2rem; }
.scorebadge { display: inline-block; min-width: 2.2rem; text-align: center; padding: .15rem .35rem;
  border-radius: .3rem; color: #fff; font-weight: 700; }
.scorebadge.shoog { background: #1a7f37; }
.scorebadge.smid { background: #b58a00; }
.scorebadge.slaag { background: #8a8a8a; }
.balk { background: #e8e8ec; border-radius: .2rem; height: .8rem; min-width: 6rem; overflow: hidden; }
.balkvul { background: var(--accent); height: 100%; }
.balkcel { width: 45%; }
.filterbalk { display: flex; gap: 1rem; align-items: end; padding: .8rem 1.2rem; }
.filterbalk label { margin-bottom: 0; }
.thumb { width: 34px; height: 34px; object-fit: contain; background: #fff; border: 1px solid var(--rand);
  border-radius: .3rem; display: inline-block; vertical-align: middle; }
.thumb.leeg { background: var(--grijs); }
.filterbalk { flex-wrap: wrap; }
a.sorteer { color: inherit; text-decoration: none; }
.prijsflag { white-space: nowrap; font-weight: 600; }
.prijsflag.goed { color: #1a7f37; }
.prijsflag.slecht { color: #b02020; }
textarea.brief { width: 100%; max-width: 46rem; font-family: ui-monospace, monospace; font-size: .8rem;
  line-height: 1.45; padding: .6rem; border: 1px solid var(--rand); border-radius: .3rem; background: #fbfbfd; }
.offerteform { display: flex; flex-wrap: wrap; gap: .8rem; align-items: end; margin-top: .8rem;
  padding-top: .8rem; border-top: 1px solid var(--rand); }
.offerteform label { margin-bottom: 0; }
.offerteform input[type=text] { width: 11rem; }
.kostentabel { max-width: 34rem; }
.kostentabel td.rechts { text-align: right; white-space: nowrap; }
.kostentabel .totaalrij td { border-top: 2px solid #1a1a1a; border-bottom: 0; }
a.sorteer:hover { text-decoration: underline; }
.detailfoto { max-width: 180px; max-height: 180px; object-fit: contain; border: 1px solid var(--rand);
  border-radius: .4rem; background: #fff; float: right; margin: 0 0 1rem 1rem; }
.w0 { width: 0%; }
.w5 { width: 5%; }
.w10 { width: 10%; }
.w15 { width: 15%; }
.w20 { width: 20%; }
.w25 { width: 25%; }
.w30 { width: 30%; }
.w35 { width: 35%; }
.w40 { width: 40%; }
.w45 { width: 45%; }
.w50 { width: 50%; }
.w55 { width: 55%; }
.w60 { width: 60%; }
.w65 { width: 65%; }
.w70 { width: 70%; }
.w75 { width: 75%; }
.w80 { width: 80%; }
.w85 { width: 85%; }
.w90 { width: 90%; }
.w95 { width: 95%; }
.w100 { width: 100%; }
.indicatoren { display: grid; grid-template-columns: 14rem 1fr; gap: .3rem .9rem; margin: .6rem 0 0; }
.indicatoren dt { font-weight: 700; }
.indicatoren dd { margin: 0; color: #444; }
@media (max-width: 40rem) { .indicatoren { grid-template-columns: 1fr; } }

/* productfoto op ware grootte: klik op een miniatuur legt de foto over de pagina heen */
img.thumb { cursor: zoom-in; }
.fotolaag { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .8);
  display: flex; align-items: center; justify-content: center; cursor: zoom-out; padding: 2rem; }
.fotolaag[hidden] { display: none; }
.fotolaag figure { margin: 0; max-width: 100%; max-height: 100%; text-align: center; }
.fotolaag img { max-width: min(90vw, 900px); max-height: 80vh; object-fit: contain;
  background: #fff; border-radius: .4rem; }
.fotolaag figcaption { color: #fff; margin-top: .8rem; font-size: .9rem; max-width: 60ch;
  margin-left: auto; margin-right: auto; }

/* de nummers waarmee je een artikel fysiek terugvindt: EAN op de doos van de leverancier,
   BSKU op het label van bol */
.nummers { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.nummers .label { display: block; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .06em; color: #666; }
.nummers .nummer { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 1.3rem; font-weight: 700; letter-spacing: .02em; user-select: all; }

/* conceptbestelling: een afgevinkt product (zit al in de doos) valt terug naar de achtergrond */
tr.afgevinkt { background: #f2f7f2; }
tr.afgevinkt td { opacity: .62; }
tr.afgevinkt td.indoos { opacity: 1; }
a.uit { opacity: .45; }

/* sorteerbare kolomkoppen: de hele kop is klikbaar, met een pijl op de actieve kolom */
th.sorteerkop { cursor: pointer; user-select: none; }
th.sorteerkop:hover { background: #eef2f6; }
th.sorteerkop.gesorteerd::after { content: ' ▼'; font-size: .8em; }
th.sorteerkop.gesorteerd[data-richting="omhoog"]::after { content: ' ▲'; }

/* geparkeerd: tijdelijk niet te krijgen, dus zichtbaar op de achtergrond gezet */
tr.geparkeerd { background: #fbf7ef; }
tr.geparkeerd td { opacity: .55; }
tr.geparkeerd td:nth-child(3) { opacity: 1; }
button.parkeerknop { font-size: inherit; color: inherit; }

/* aantal met een min- en plusknop ernaast; compact zodat de tabel niet breder wordt */
td.stapel { white-space: nowrap; }
td.stapel input.bestel { width: 3.2rem; text-align: center; }
button.stap { background: var(--grijs); color: #222; border: 1px solid var(--rand);
  padding: .1rem .4rem; font-size: 1rem; line-height: 1.1; border-radius: .25rem; }
button.stap:hover { background: #e3e8ee; }
/* het veld meldt zelf even dat het bewaard is; geldt voor alle aantalvelden */
input.bewaard { outline: 2px solid #1a7f37; outline-offset: -2px; }

/* listingmachine: een link die als knop oogt, en een lijst zonder bolletjes */
a.knoplink { display: inline-block; background: var(--accent); color: #fff; text-decoration: none;
  padding: .55rem 1.1rem; border-radius: .3rem; }
a.knoplink:hover { filter: brightness(1.15); }
ul.plat { list-style: none; padding: 0; margin: 0; }
ul.plat li { padding: .45rem 0; border-bottom: 1px solid var(--rand); }
ul.plat li:last-child { border-bottom: 0; }
input[type=file] { display: block; margin-bottom: .8rem; font-size: .9rem; }

/* intakefoto's naast elkaar, met de knop eronder */
.fotorij { display: flex; flex-wrap: wrap; gap: .8rem; }
.fotokaart { margin: 0; border: 1px solid var(--rand); border-radius: .4rem; padding: .5rem;
  background: #fff; text-align: center; }
.fotokaart figcaption { margin-top: .4rem; }
img.thumb.groot { width: 110px; height: 110px; }
.papieren { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.2rem;
  margin: .6rem 0; padding: .6rem .8rem; background: var(--grijs); border-radius: .35rem; }
.papieren label { margin-bottom: 0; }

/* instellingen: in één oogopslag zien of een sleutel er al staat */
.stand { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  padding: .12rem .45rem; border-radius: .8rem; vertical-align: middle; margin-left: .4rem; }
.stand.aan { background: #e6f7e6; color: #1a7f37; border: 1px solid #9ad09a; }
.stand.uit { background: #fdf2e6; color: #8a5a00; border: 1px solid #e0be8a; }

/* ---------------------------------------------------------------------------
   Intake op de telefoon. Twee grote knoppen — camera en bibliotheek — met het
   bestandsveld eronder verstopt, want dat is op mobiel niet te raken.
   --------------------------------------------------------------------------- */
.fotokiezer { border: 1px solid var(--rand); border-radius: .5rem; padding: 1rem; margin: 0 0 1rem; }
.fotokiezer legend { font-weight: 600; padding: 0 .4rem; }
.grootkeuze { display: flex; align-items: center; gap: .9rem; width: 100%; margin: 0 0 .7rem;
  padding: 1rem; border: 1px solid var(--rand); border-radius: .5rem; background: #fff;
  cursor: pointer; min-height: 3.6rem; }
.grootkeuze:active { background: #eef0fb; }
.grootkeuze:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.grootkeuze .pictogram { font-size: 1.7rem; line-height: 1; }
.grootkeuze .keuzetekst { line-height: 1.35; }
/* Het echte veld blijft bedienbaar met het toetsenbord, maar valt visueel weg. */
.grootkeuze input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0;
  margin: 0; padding: 0; }

.voorbeelden { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0 .4rem; }
.voorbeelden[hidden] { display: none; }
.voorbeeld { margin: 0; width: 84px; height: 84px; border: 1px solid var(--rand);
  border-radius: .4rem; overflow: hidden; background: var(--grijs); }
.voorbeeld img { width: 100%; height: 100%; object-fit: cover; display: block; }

button.breed { width: 100%; padding: .9rem; font-size: 1.05rem; }

/* Op een telefoon zijn de standaardvelden te klein om betrouwbaar te raken, en een
   lettergrootte onder 16px laat iOS bij het focussen inzoomen. */
@media (max-width: 48rem) {
  main { margin: .8rem auto; padding: 0 .7rem; }
  .kaart { padding: .9rem; }
  input[type=text], input[type=password], input[type=number], select, textarea { font-size: 16px; }
  input[type=text], input[type=password] { padding: .7rem; }
  button { padding: .7rem 1.1rem; }
  .voorbeeld { width: 72px; height: 72px; }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.2rem; }
}
.eanform { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; }
.eanform label { margin-bottom: 0; }
.eanform input[type=text] { width: 11rem; }

/* live meekijken met de runner */
.meekijk { margin-top: .9rem; padding: .8rem 1rem; background: var(--grijs);
  border-radius: .45rem; border: 1px solid var(--rand); }
.meekijk[hidden] { display: none; }
.meekijkkop { margin: 0 0 .5rem; font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.pols { width: .6rem; height: .6rem; border-radius: 50%; background: var(--accent);
  flex: none; animation: polsslag 1.4s ease-in-out infinite; }
@keyframes polsslag { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .pols { animation: none; } }
ol.stappen { list-style: none; margin: 0; padding: 0; max-height: 20rem; overflow-y: auto; }
ol.stappen .stap { display: flex; gap: .6rem; padding: .3rem 0; font-size: .88rem;
  border-bottom: 1px solid var(--rand); line-height: 1.45; }
ol.stappen .stap:last-child { border-bottom: 0; }
.stapfase { font-family: ui-monospace, Consolas, monospace; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .05em; color: #fff; background: #8a8a95;
  border-radius: .25rem; padding: .05rem .35rem; height: 1.1rem; flex: none; margin-top: .18rem;
  min-width: 4.6rem; text-align: center; }
.fase-zoeken .stapfase { background: #2f80ed; }
.fase-lezen .stapfase { background: #7b5cd6; }
.fase-ophalen .stapfase { background: #e2a33c; }
.fase-schrijven .stapfase { background: #1a7f37; }
.fase-fout .stapfase { background: #b02020; }
/* een veld dat zojuist door de tool is ingevuld, licht even op */
tr.netbinnen > td { background: #eef7ee; transition: background .8s ease; }

/* ---------------------------------------------------------------------------
   Conceptenoverzicht: één kaart per product, met de foto erbij zodat je ze
   uit elkaar houdt, en werktitel en EAN meteen bewerkbaar.
   --------------------------------------------------------------------------- */
.concepten { display: grid; gap: 1rem; margin-bottom: 1.2rem; }
.concept { display: flex; gap: 1rem; background: #fff; border: 1px solid var(--rand);
  border-radius: .5rem; padding: 1rem; }
.concept.aandebeurt { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent); }
.conceptbeeld { flex: none; width: 96px; height: 96px; border-radius: .4rem; overflow: hidden;
  background: var(--grijs); display: flex; align-items: center; justify-content: center; }
.conceptbeeld img { width: 100%; height: 100%; object-fit: cover; }
.geenbeeld { font-size: .72rem; color: #888; text-align: center; }
.conceptkern { flex: 1; min-width: 0; }
.conceptkern h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.conceptkern h3 a { color: inherit; text-decoration: none; }
.conceptkern h3 a:hover { text-decoration: underline; }
.conceptstand { margin: 0 0 .4rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.stand.bezig { background: #eef0fb; color: var(--accent); border: 1px solid #c3cbf0; }
.snelbewerk { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: end;
  margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--rand); }
.snelbewerk label { margin-bottom: 0; font-size: .82rem; color: #666; }
.snelbewerk input[type=text] { width: 15rem; padding: .35rem; font-size: .9rem; }
.snelbewerk a.knoplink { padding: .35rem .8rem; font-size: .85rem; }
@media (max-width: 48rem) {
  .concept { flex-direction: column; }
  .conceptbeeld { width: 100%; height: 140px; }
  .snelbewerk input[type=text] { width: 100%; }
}

/* voortgangsbalk: een schatting, geen tijdklok */
.voortgangbalk { position: relative; height: 1.4rem; background: #e8e8ec; border-radius: .7rem;
  overflow: hidden; margin: .7rem 0 .3rem; }
.voortgangvul { height: 100%; width: 0; background: var(--accent); border-radius: .7rem;
  transition: width .6s ease; }
.voortgangcijfer { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: .78rem; font-weight: 700; color: #1a1a1a;
  mix-blend-mode: luminosity; }

/* collage: alle gevonden productfoto's naast elkaar om uit te kiezen */
.collage { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: .8rem; margin: .8rem 0 1rem; }
.beeldkeuze { display: block; margin: 0; border: 2px solid var(--rand); border-radius: .5rem;
  padding: .45rem; background: #fff; cursor: pointer; position: relative; }
.beeldkeuze.aan { border-color: var(--accent); }
.beeldkeuze img { width: 100%; height: 128px; object-fit: contain; background: var(--grijs);
  border-radius: .3rem; display: block; }
.beeldbalk { display: block; font-size: .78rem; margin-top: .3rem; }
.beeldbalk input { vertical-align: middle; margin-right: .25rem; }
.beeldmerk { display: inline-block; font-size: .66rem; text-transform: uppercase;
  letter-spacing: .05em; padding: .05rem .3rem; border-radius: .25rem; margin-top: .25rem;
  background: #e8e8ec; color: #555; }
.herkomst-eigen { background: #e6f7e6; color: #1a7f37; }
.herkomst-gegenereerd { background: #f0e8fb; color: #6b3fa0; }
.beeldbron { font-size: .72rem; display: block; margin-top: .2rem; }
@media (max-width: 48rem) { .collage { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } }
pre.lading { background: #1f1f24; color: #e8e8ec; padding: .9rem 1.1rem; border-radius: .4rem;
  overflow-x: auto; font-size: .82rem; line-height: 1.5; }
.let-op-kaart { border-color: #e0be8a; background: #fdf6ec; }

/* ---------------------------------------------------------------------------
   Partijen: per vondst wat erin zit en de drie uitkomsten naast elkaar.
   --------------------------------------------------------------------------- */
.vondst { border: 1px solid var(--rand); border-left: 4px solid var(--rand);
  border-radius: .45rem; padding: .9rem 1.1rem; margin: 0 0 1rem; background: #fff; }
.vondst.kopen { border-left-color: #1a7f37; }
/* Bieden krijgt een eigen kleur naast kopen: het is wél een kans, maar er ligt nog geen prijs. */
.vondst.bieden { border-left-color: #0a7ea4; }
.vondst.onderhandelen { border-left-color: #b58a00; }
.vondst.gokje { border-left-color: #7b5cd6; }
.vondst.te.klein, .vondst.te { border-left-color: #8a8a95; }
.vondst header { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: .4rem; }
.oordeel { font-family: ui-monospace, Consolas, monospace; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .08em; padding: .1rem .4rem; border-radius: .25rem;
  background: var(--grijs); color: #444; flex: none; }
.vondst.kopen .oordeel { background: #e6f7e6; color: #1a7f37; }
.vondst.bieden .oordeel { background: #e4f2f7; color: #0a6484; }
.vondst.onderhandelen .oordeel { background: #fdf2e6; color: #8a5a00; }
.vondst.wacht { border-left-color: var(--rand); background: #fbfbfd; }
/* Controleren is geen afwijzing en geen aanrader: er klopt iets niet aan de invoer. */
.vondst.controleren { border-left-color: #c2410c; }
.vondst.controleren .oordeel { background: #fdeee6; color: #9a3412; }

/* Wat we niet weten. Klein maar aanwezig — een schatting hoort niet als meting te lezen. */
.aannames { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.aannames li { font-size: .72rem; color: #555; background: var(--grijs);
  border-radius: .25rem; padding: .12rem .45rem; }
.aannames li.zwaar { background: #fdeee6; color: #9a3412; font-weight: 600; }

/* Jouw commentaar bij een partij: ingeklapt tenzij er iets staat, want in de regel hoef je
   niets in te vullen — het is er voor de gevallen waarin jij het beter weet. */
.commentaar { margin: .7rem 0 .2rem; border-top: 1px solid var(--rand); padding-top: .5rem; }
.commentaar > summary { cursor: pointer; font-size: .82rem; color: #555; }
.commentaar textarea { width: 100%; box-sizing: border-box; font: inherit; padding: .4rem .5rem;
  border: 1px solid var(--rand); border-radius: .3rem; margin-top: .2rem; }
.commentaar label { display: block; font-size: .82rem; margin: .5rem 0 0; }
.drieveld { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: .5rem .8rem; margin: .3rem 0 .2rem; }
.drieveld input { width: 100%; box-sizing: border-box; font: inherit; padding: .35rem .5rem;
  border: 1px solid var(--rand); border-radius: .3rem; }
.watzit { margin: 0 0 .3rem; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.graad { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em;
  padding: .05rem .35rem; border-radius: .25rem; }
.graad-scherp { background: #e6f7e6; color: #1a7f37; }
.graad-soort { background: #eef0fb; color: #3a4bb0; }
.graad-vaag { background: var(--grijs); color: #777; }

.drie { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: .7rem 0; }
.drie .geval { border: 1px solid var(--rand); border-top-width: 3px; border-radius: .35rem;
  padding: .5rem .7rem; }
.drie .geval.slecht { border-top-color: #b02020; }
.drie .geval.normaal { border-top-color: var(--accent); }
.drie .geval.goed { border-top-color: #1a7f37; }
.drie .kop { display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .09em;
  color: #666; }
.drie .winst { display: block; font-size: 1.15rem; font-weight: 700;
  font-variant-numeric: tabular-nums; margin: .1rem 0; }
.reden { margin: .4rem 0 .5rem; font-size: .9rem; }
@media (max-width: 40rem) { .drie { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   Het venster om de beschrijving in te bewerken.
   --------------------------------------------------------------------------- */
.tekstvenster { border: none; border-radius: .6rem; padding: 0; width: min(46rem, 92vw);
  box-shadow: 0 1.2rem 3rem rgba(0,0,0,.28); }
.tekstvenster::backdrop { background: rgba(20,20,30,.45); }
.tekstvenster form { padding: 1rem 1.2rem 1.2rem; }
.vensterkop { display: flex; align-items: baseline; gap: .8rem; margin-bottom: .6rem; }
.vensterkop strong { flex: 1; }
.knoppenbalk { display: flex; gap: .3rem; margin-bottom: .4rem; flex-wrap: wrap; }
.knoppenbalk button { font-size: .8rem; padding: .25rem .6rem; background: var(--grijs);
  border: 1px solid var(--rand); border-radius: .3rem; cursor: pointer; color: inherit; }
.knoppenbalk button:hover { background: #ececf2; }
/* Ruim vlak: je leest hier een halve pagina tekst na, geen invoerregel. */
.tekstvlak { min-height: 16rem; max-height: 55vh; overflow-y: auto; padding: .7rem .9rem;
  border: 1px solid var(--rand); border-radius: .35rem; background: #fff; line-height: 1.55; }
.tekstvlak p { margin: 0 0 .7rem; }
.tekstvlak ul { margin: 0 0 .7rem 1.1rem; }
.tekstvlak:focus { outline: 2px solid #0000a4; outline-offset: 1px; }
.venstervoet { display: flex; align-items: center; gap: .9rem; margin-top: .6rem; }
textarea[data-rijkeveld] { width: 100%; box-sizing: border-box; font: inherit; line-height: 1.4;
  padding: .4rem .5rem; border: 1px solid var(--rand); border-radius: .3rem; }

/* Wat gezocht is maar niet gevonden: geen fout, wel iets om te weten. */
.ontbreekt { list-style: none; margin: .3rem 0 0; padding: 0; }
.ontbreekt li { font-size: .84rem; color: #555; padding: .2rem 0;
  border-bottom: 1px solid var(--rand); }
.ontbreekt li:last-child { border-bottom: none; }

/* Een instelling die een lap tekst is: de schrijfopdracht voor productteksten. */
.breedveld { width: 100%; box-sizing: border-box; font-family: ui-monospace, Consolas, monospace;
  font-size: .82rem; line-height: 1.5; padding: .6rem .7rem; border: 1px solid var(--rand);
  border-radius: .35rem; resize: vertical; }

/* Wat bol tot de kern van dit producttype rekent en wat nog leeg is. Dat weegt zwaarder dan de
   rest van de niet-gevonden lijst, dus het staat er los boven en het valt op. */
.ontbreekt.kern li { border-left: 3px solid #c2410c; padding-left: .5rem; color: #333; }

/* Een filter waar een product uit valt. Klein maar aanwezig: het zijn er meestal een of twee
   per product, en juist die twee bepalen of iemand je vindt. */
.gatje { display: inline-block; font-size: .74rem; background: #fdeee6; color: #9a3412;
  border-radius: .25rem; padding: .1rem .4rem; margin: 0 .2rem .2rem 0; }

/* De voor-en-na van de productverbeteraar.
   Overgenomen en afgewezen regels blijven staan maar treden terug: je wilt kunnen zien wat je
   al beoordeeld hebt zonder dat het de openstaande regels verdringt. */
.voorstel.overgenomen td { background: #f2f9f2; }
.voorstel.afgewezen td { color: #888; }
.voorstel td strong { font-weight: 600; }

/* Twee teksten naast elkaar. Onder een smal scherm onder elkaar, want een halve kolom tekst
   lezen is erger dan scrollen. */
.tweeluik { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.tweeluik > div { min-width: 0; }
@media (max-width: 780px) { .tweeluik { grid-template-columns: 1fr; } }
.tekstblok { border: 1px solid var(--rand); border-radius: .35rem; padding: .7rem .9rem;
  background: #fff; font-size: .9rem; line-height: 1.55; max-height: 30rem; overflow-y: auto; }
.tekstblok h3 { font-size: .95rem; margin: .8rem 0 .3rem; }
.tekstblok p { margin: 0 0 .6rem; }
.tekstblok ul, .tekstblok ol { margin: 0 0 .6rem 1.1rem; padding: 0; }

/* --- De runnerpagina ------------------------------------------------------------------
   De kop moet in één oogopslag het antwoord geven op de enige vraag die telt: doet hij iets?
   Kleur draagt dat, maar niet alleen: de kop zegt het ook in woorden, want een streep kleur
   is geen mededeling. */
.runnerkop { border-left: 4px solid var(--rand); }
.runnerkop.aan { border-left-color: #1a7f37; }
.runnerkop.weg { border-left-color: #b02020; }
.runnerkop.rust { border-left-color: #8a8a95; }
.runnerkop h2 { margin-top: 0; }
.runnerkop .nummer.fout { color: #b02020; }

.bezigkaart h3 { margin: 1rem 0 .4rem; font-size: .95rem; }
.bezigkaart .gatje { text-transform: none; }

/* De loopbalk vergelijkt met hoe lang dit soort taak meestal duurt -- hij vult dus niet naar
   "klaar" maar naar "gebruikelijk". Loopt hij over, dan kleurt hij: dat is het moment om te
   gaan kijken, niet het moment waarop iets fout is. */
progress.loopbalk { width: 100%; height: .55rem; appearance: none; border: 0;
  background: var(--grijs); border-radius: .3rem; overflow: hidden; }
progress.loopbalk::-webkit-progress-bar { background: var(--grijs); }
progress.loopbalk::-webkit-progress-value { background: #1a7f37; }
progress.loopbalk::-moz-progress-bar { background: #1a7f37; }
progress.loopbalk.traag::-webkit-progress-value { background: #e2a33c; }
progress.loopbalk.traag::-moz-progress-bar { background: #e2a33c; }

/* De laatste stappen mogen op deze pagina langer doorlopen dan op het werkblad: hier kom je
   juist kijken wat er allemaal gebeurd is. */
.bezigkaart ol.stappen { max-height: 26rem; }
.bezigkaart ol.stappen .stap span:last-child { margin-left: auto; flex: none; }

/* --- De (i) bij een melding van bol ---------------------------------------------------
   Een code als UNMATCHED_OFFER zegt niets tegen wie hem niet kent. De knop moet daarom
   opvallen genoeg om te vinden en klein genoeg om niet in de weg te zitten. */
.uitlegknop { display: inline-flex; align-items: center; justify-content: center;
  width: 1.05rem; height: 1.05rem; padding: 0; margin-left: .3rem; flex: none;
  font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: .72rem;
  font-weight: 700; line-height: 1; color: #fff; background: #6b6b78;
  border: 0; border-radius: 50%; cursor: pointer; vertical-align: middle; }
.uitlegknop:hover, .uitlegknop:focus-visible { background: var(--accent); }
/* dezelfde knop in een lopende zin, alleen om te laten zien waar je op moet klikken */
.uitlegknop.nep { cursor: default; margin: 0 .1rem; }
.reden { display: inline-flex; align-items: flex-start; gap: 0; margin-top: .15rem; }

.uitlegvenster { border: none; border-radius: .6rem; padding: 1.2rem 1.4rem 1.4rem;
  width: min(34rem, 92vw); box-shadow: 0 10px 40px rgba(0,0,0,.25); color: #222; }
.uitlegvenster::backdrop { background: rgba(20,20,30,.45); }
.uitlegvenster h3 { margin: 0 0 .6rem; font-size: 1.1rem; }
.uitlegvenster h4 { margin: 1rem 0 .3rem; font-size: .9rem; }
.uitlegvenster p { margin: 0 0 .5rem; line-height: 1.55; }
.uitlegvenster q { font-style: italic; }
.uitlegvenster button { margin-top: 1rem; }

/* De bewaarknop op het werkblad zegt wat er met je invoer gebeurd is. Hij verdwijnt niet als
   het gelukt is: een knop die weggaat laat je in het ongewisse of er iets bewaard is. */
button.linkish.ok { color: #1a7f37; text-decoration: none; }
button.linkish.fout { color: #b02020; font-weight: 600; text-decoration: none; }
button.linkish.stil { color: #8a8a95; text-decoration: none; }

/* De actielijst op het dashboard. De streep links zegt hoe dringend het is; de tekst zegt het
   ook, want kleur alleen is geen mededeling. */
ol.actielijst { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
ol.actielijst .actie { border-left: 4px solid var(--rand); padding: .5rem 0 .5rem .8rem;
  line-height: 1.55; }
ol.actielijst .actie strong { display: block; font-size: 1rem; }
ol.actielijst .actie .blok { display: block; font-size: .9rem; color: #444; margin-top: .2rem; }
ol.actielijst .actie a { margin-left: .4rem; white-space: nowrap; }
.actie.aaanvullen { border-left-color: #b02020; }
.actie.azending   { border-left-color: #c2410c; }
.actie.ainkopen   { border-left-color: #e2a33c; }
.actie.ainhoud    { border-left-color: #2f80ed; }
.actie.aleverancier { border-left-color: #7b5cd6; }

/* Het antwoord op "wat gaat er nu werkelijk heen". Dat hoort niet tussen de invulvelden te
   staan maar erboven, en het hoort er anders uit te zien dan een keuze die je nog moet maken. */
.kaart.definitief { border-left: 4px solid #1a7f37; background: #f4faf5; }
.kaart.definitief h3, .kaart.waarschuwing h3 { margin-top: 0; }
.groot { font-size: 1.15rem; margin: .2rem 0 .6rem; }

/* Kansen: een bewaarde kans met een reden om het niet te doen. De streep door de score zou
   misleiden — de kans is echt, je mag er alleen niets mee. Daarom een gedempte rij en een
   gekleurd randje om het vakje waar de reden in staat. */
tr.geblokkeerd > td { background: #fdf0ee; }
tr.geblokkeerd .scorebadge { opacity: .5; }
input.notitieveld { width: 100%; min-width: 11rem; padding: .25rem; font-size: .82rem;
  margin-bottom: .2rem; }
input.blokkadeveld { border-color: #d08a80; }

/* Kansen: de inkoopkant hangt onder de kans waar hij bij hoort. Een eigen achtergrond, zodat
   het bij het scannen duidelijk is dat deze regels bij de kans erboven horen. */
tr.inkooprij > td { background: #f4f6fa; padding: .5rem .6rem .7rem; }
table.inkoop { width: 100%; margin-bottom: .5rem; font-size: .82rem; }
table.inkoop th { font-weight: 600; text-align: left; padding: .15rem .3rem; }
table.inkoop td { padding: .2rem .3rem; vertical-align: top; }
.inkoopform { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.inkoopform input[type="text"], .inkoopform input[type="url"], .inkoopform input[type="number"],
.inkoopform select { padding: .25rem; font-size: .82rem; }
.inkoopform input.klein { width: 6.5rem; }