: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;
  background: var(--accent); color: #fff; padding: .7rem 1.2rem; }
.brand { font-weight: 700; }
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; }
button.linkish { background: none; padding: 0; text-decoration: underline; }
.navlink { color: #fff; margin-right: 1rem; }
.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; }
.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.4; white-space: normal;
  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; }
input.bestel.bewaard { outline: 2px solid #1a7f37; }
.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%; }