/* Letters zitten in de software zelf (geen verzoek naar Google): Blinker voor titels, menu, knoppen en grote getallen, Inter voor tekst en tabellen. */
@font-face{font-family:"BlinkerMG";src:url(/fonts/blinker-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"BlinkerMG";src:url(/fonts/blinker-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"BlinkerMG";src:url(/fonts/blinker-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"InterMG";src:url(/fonts/inter-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"InterMG";src:url(/fonts/inter-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"InterMG";src:url(/fonts/inter-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"InterMG";src:url(/fonts/inter-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
:root{--font-blinker:"BlinkerMG";--font-inter:"InterMG"}
/* Marketplace Growth bol (huisstijl van Marketplace Growth): warm werkblad met zwevende witte panelen. Navy alleen voor waar je bent, blauw alleen voor wat je doet. */
:root{
  --canvas:#F6F5F1; --panel:#FFFFFF; --sunk:#F7F6F2; --hover:#F5F7FD;
  --ink:#060F2E; --text:#3F434B; --muted:#73726C; --faint:#A19F97; --line:#E7E4DC; --line2:#F0EEE8;
  --blue:#2F63F2; --blue-hover:#2451D6; --soft:#EAEFFE; --navy:#060F2E; --navy2:#152F61; --badge:#DDE3F4;
  --groen:#11845B; --groen-bg:#E5F5EE; --amber:#A65300; --amber-bg:#FFF0D4; --rood:#B42318; --rood-bg:#FDECEA;
  --display:var(--font-blinker),"Blinker","Helvetica Neue",Arial,sans-serif;
  --body:var(--font-inter),"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r-lg:20px; --r-md:14px; --r-sm:10px;
  --schaduw:0 1px 2px rgba(6,15,46,.04),0 10px 30px rgba(6,15,46,.05);
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{min-height:100%}
body{margin:0;background:var(--canvas);color:var(--text);font:14px/1.5 var(--body);-webkit-font-smoothing:antialiased}
h1,h2,h3{color:var(--ink);margin:0;font-family:var(--display);text-wrap:balance}
a{color:var(--blue)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ico.k{width:15px;height:15px}
.zacht{color:var(--muted)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* schil */
.shell{display:grid;grid-template-columns:252px minmax(0,1fr);gap:14px;padding-block:16px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));align-items:start;transition:grid-template-columns .2s ease}
.shell.smal{grid-template-columns:68px minmax(0,1fr)}
.menu{position:sticky;top:calc(16px + env(safe-area-inset-top,0px));height:calc(100dvh - 32px);min-height:480px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--schaduw);display:flex;flex-direction:column;padding:14px 10px;overflow:hidden auto}
.merkkop{display:flex;align-items:center;gap:9px;padding:2px 4px 14px}
.beeldmerk{width:34px;height:34px;border-radius:10px;background:var(--navy);color:#FAFAF8;display:grid;place-items:center;font:800 13px/1 var(--display);letter-spacing:.02em;flex:none}
.merknaam{display:grid;line-height:1.15;min-width:0}
.merknaam b{font:700 15px/1.15 var(--display);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.merknaam span{font-size:12px;color:var(--muted);white-space:nowrap}
.inklap{margin-left:auto;border:0;background:transparent;color:var(--muted);width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none}
.inklap:hover{background:var(--sunk);color:var(--ink)}
/* Menu in blokken met een lijntje ertussen, zonder kopjes (Mark, 26 oktober 2026) */
.blokken{display:grid}
.blokken .items+.items{border-top:1px solid var(--line2);padding-top:8px}
.later{font:700 9.5px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--sunk);border:1px solid var(--line);border-radius:99px;padding:3px 7px;margin-left:auto}
.items{display:grid;gap:2px;padding:2px 0 8px}
.nav{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;padding:8px 10px 8px 12px;border-radius:10px;font:600 14.5px/1.2 var(--display);color:var(--text);text-align:left;white-space:nowrap;text-decoration:none}
a.nav:hover{background:var(--sunk);color:var(--ink)}
.nav .ico{color:var(--muted)}
.nav[aria-current="page"]{background:var(--navy);color:#FAFAF8}
.nav[aria-current="page"] .ico{color:#FAFAF8}
.nav.uit{color:var(--faint);cursor:default}
.nav.uit .ico{color:var(--faint)}
.menuvoet{margin-top:auto;display:grid;gap:8px;padding-top:12px}
.wie{display:flex;align-items:center;gap:10px;padding:8px 6px 2px;border-top:1px solid var(--line2)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--badge);color:var(--navy2);display:grid;place-items:center;font:700 12.5px/1 var(--display);flex:none}
.wie .wietekst{display:grid;line-height:1.2;min-width:0;flex:1}
.wie b{font:700 13.5px/1.2 var(--display);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wie span{font-size:12px;color:var(--muted);white-space:nowrap}
.wie form{margin:0}
.shell.smal .merknaam,.shell.smal .lbl,.shell.smal .later,.shell.smal .wie .wietekst,.shell.smal .wie form,.shell.smal .wie a.ikoonknop{display:none}
.shell.smal .merkkop{flex-direction:column;gap:8px;padding-inline:0}
.shell.smal .inklap{margin:0}
.shell.smal .nav{justify-content:center;padding-inline:0}
.shell.smal .wie{justify-content:center;padding-inline:0}
.werk{min-width:0;display:grid;gap:16px;align-content:start}
.mobielbalk{display:none}
.dekking{position:fixed;inset:0;background:rgba(6,15,46,.28);z-index:20}

/* paginakop */
.kop{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;padding:4px 4px 0}
.kop .tekst{display:grid;gap:4px;min-width:0;flex:1 1 420px}
.kruimel{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.kop h1{font-size:30px;font-weight:700;letter-spacing:-.01em;line-height:1.1}
.kop p{margin:0;color:var(--muted);max-width:72ch}
.acties{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* knoppen en velden */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:999px;padding:9px 16px;font:700 14.5px/1 var(--display);border:1px solid var(--line);background:var(--panel);color:var(--ink);white-space:nowrap;text-decoration:none}
.knop:hover{border-color:#CFCBC1}
.knop.primair{background:var(--blue);border-color:var(--blue);color:#FAFAF8}
.knop.primair:hover{background:var(--blue-hover);border-color:var(--blue-hover)}
.knop:disabled{opacity:.55;cursor:default}
.knop.breed{width:100%}
.knop.klein{padding:7px 12px;font-size:13.5px}
.tekstknop{border:0;background:transparent;color:var(--blue);padding:0;font:600 13px/1.3 var(--body);justify-self:start}
.tekstknop:hover{text-decoration:underline}
.ikoonknop{width:32px;height:32px;border-radius:9px;border:1px solid transparent;background:transparent;color:var(--muted);display:grid;place-items:center;flex:none;text-decoration:none}
.ikoonknop:hover{background:var(--sunk);border-color:var(--line);color:var(--ink)}
.veld{display:grid;gap:5px}
.veld>span{font:600 12px/1.2 var(--body);color:var(--muted)}
.veld input{height:40px;border:1px solid var(--line);background:var(--sunk);border-radius:10px;padding:0 12px;font-size:14px;color:var(--ink)}
.veld input:focus{outline:none;border-color:var(--blue);background:var(--panel);box-shadow:0 0 0 3px var(--soft)}
.melding{border-radius:var(--r-sm);padding:10px 12px;font-size:13.5px}
.melding.ok{background:var(--groen-bg);color:var(--groen)}
.melding.fout{background:var(--rood-bg);color:var(--rood)}
.melding.letop{background:var(--amber-bg);color:var(--amber)}

/* panelen */
.paneel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--schaduw);min-width:0}
.smalpaneel{padding:20px;max-width:520px}
.leeg{padding:28px;display:grid;gap:8px;max-width:680px}
.leeg p{margin:0;color:var(--muted)}

/* inloggen */
.loginpagina{min-height:100dvh;display:grid;place-items:center;padding-block:24px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.loginbox{width:min(420px,100%);padding:24px;display:grid;gap:12px}
.loginbox .merkkop{padding:0 0 6px}
.loginbox h1{font-size:24px}
.loginbox p{margin:0}
.loginform{display:grid;gap:12px}

/* verbindingen */
.vlijst{overflow:hidden}
.vrij{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:start;padding:14px 18px;border-top:1px solid var(--line2)}
.vrij:first-child{border-top:0}
.vrij h2{font-size:16px}
.vrij p{margin:2px 0 0;color:var(--muted);font-size:13px;max-width:80ch}
.vrij .detail{grid-column:1/-1;font-size:12.5px;color:var(--text);background:var(--sunk);border-radius:var(--r-sm);padding:8px 10px;overflow-wrap:anywhere}
.status{display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:3px 10px;font:600 12.5px/1.4 var(--body);white-space:nowrap}
.status i{width:7px;height:7px;border-radius:50%;background:currentColor}
.status.ok{background:var(--groen-bg);color:var(--groen)}
.status.fout{background:var(--rood-bg);color:var(--rood)}
.status.leeg{background:var(--sunk);color:var(--muted);border:1px solid var(--line)}
.status.half{background:var(--amber-bg);color:var(--amber)}

@media (max-width:900px){
  .shell,.shell.smal{grid-template-columns:minmax(0,1fr)}
  .menu{position:fixed;z-index:30;top:calc(12px + env(safe-area-inset-top,0px));left:max(12px,env(safe-area-inset-left,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));height:auto;min-height:0;width:min(280px,calc(100% - 24px));transform:translateX(calc(-100% - 24px));transition:transform .2s ease}
  .menu.open{transform:none}
  .inklap{display:none}
  .mobielbalk{display:flex;align-items:center;gap:10px;font:700 16px/1 var(--display);color:var(--ink)}
  .mobielbalk button{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--panel);display:grid;place-items:center;color:var(--ink)}
}
@media (max-width:520px){
  .kop h1{font-size:25px}
  .vrij{grid-template-columns:minmax(0,1fr)}
}

/* documenten (spiekbriefje) */
.inhoudsopgave{display:flex;flex-wrap:wrap;gap:6px;padding:0 4px}
.inhoudsopgave a{font:600 13px/1 var(--display);color:var(--ink);text-decoration:none;background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:7px 12px}
.inhoudsopgave a:hover{border-color:var(--blue);color:var(--blue)}
.document{padding:8px 28px 28px;max-width:900px}
.document h2{font-size:21px;margin:26px 0 10px;scroll-margin-top:16px}
.document h3{font-size:16px;margin:18px 0 6px}
.document p{margin:0 0 10px;max-width:75ch}
.document ul,.document ol{margin:0 0 12px;padding-left:22px;display:grid;gap:6px;max-width:80ch}
.document li::marker{color:var(--faint)}
.document code{font:500 12.5px/1.4 ui-monospace,Menlo,monospace;background:var(--sunk);border:1px solid var(--line2);border-radius:6px;padding:1px 5px;color:var(--ink)}
.document strong{color:var(--ink)}
.document .afvinklijst{list-style:none;padding-left:0}
.document .afvinklijst li{display:flex;gap:10px;align-items:flex-start}
.document .vinkje{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line);display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;flex:none;margin-top:1px}
.document .afvinklijst li.af .vinkje{background:var(--groen);border-color:var(--groen)}
.document .afvinklijst li.af>span:last-child{color:var(--muted)}
.doctabel{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);margin:0 0 12px}
.doctabel table{border-collapse:collapse;width:100%;font-size:13.5px}
.doctabel th{text-align:left;font:600 12px/1.2 var(--body);color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line);background:var(--sunk)}
.doctabel td{padding:9px 12px;border-bottom:1px solid var(--line2);vertical-align:top}
.doctabel tr:last-child td{border-bottom:0}
.kopieerblok{position:relative;margin:0 0 12px}
.kopieerblok pre{margin:0;background:var(--navy);color:#E8EBF2;border-radius:var(--r-md);padding:16px 18px;padding-top:48px;font:13px/1.55 ui-monospace,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.kopieerblok .knop{position:absolute;top:10px;right:10px}
@media (max-width:520px){.document{padding:4px 16px 20px}}

/* Gegevens: per dataset één regel, rechts vaste kolommen */
.werk > .melding{margin-bottom:14px}
.glijst{overflow:hidden}
.grij{display:grid;grid-template-columns:minmax(0,1fr) 190px 96px 120px 112px;gap:6px 16px;align-items:center;padding:14px 18px;border-top:1px solid var(--line2)}
.grij:first-child{border-top:0}
.grij.kopregel{padding-top:10px;padding-bottom:10px;font:600 11.5px/1.2 var(--body);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.grij h2{font-size:16px}
.grij .naam p{margin:2px 0 0;color:var(--muted);font-size:13px;max-width:70ch}
.grij .cel{font-size:13.5px;font-variant-numeric:tabular-nums}
.grij .status{justify-self:end}
.grij .detail{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--text);background:var(--sunk);border-radius:var(--r-sm);padding:8px 10px;overflow-wrap:anywhere}
@media (max-width:900px){
  .grij{grid-template-columns:minmax(0,1fr) auto}
  .grij.kopregel{display:none}
  .grij .naam{grid-column:1/-1}
  .grij .cel{grid-column:1/-1;display:flex;justify-content:space-between}
  .grij .cel::before{content:attr(data-kop);color:var(--muted)}
  .grij .status{grid-column:1/-1;justify-self:start}
  .grij .detail{flex-direction:column;align-items:flex-start}
}

.kruimel a{color:inherit;text-decoration:none}
.kruimel a:hover{color:var(--ink);text-decoration:underline}

/* Lijst: één opbouw voor alle pagina's met producten (filterpaneel, zoeken, families met varianten) */
.lfilter{display:grid;gap:12px}
.lfpaneel{padding:14px 18px;display:grid;gap:10px}
.lfrij{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:center;gap:8px 12px}
.lflabel{font:600 12px/1.2 var(--body);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.lfopties{display:flex;flex-wrap:wrap;gap:8px}
.lchip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border:1px solid var(--line);border-radius:99px;background:var(--panel);font:600 15px/1 var(--display);color:var(--ink);text-decoration:none;white-space:nowrap}
.lchip:hover{border-color:var(--faint)}
.lchip.aan{background:var(--soft);border-color:var(--soft)}
.lchip b{font:600 12px/1 var(--body);color:var(--muted);background:var(--sunk);border-radius:99px;padding:4px 7px}
.lchip.aan b{background:var(--panel);color:var(--ink)}
.lstip{width:8px;height:8px;border-radius:50%;display:inline-block}
.lstip.goed{background:var(--groen)}.lstip.letop{background:var(--amber)}.lstip.slecht{background:var(--rood)}
.lzoek{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.lzoek input[type=search]{flex:1 1 280px;min-width:0;height:44px;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:0 14px;font-size:16px;color:var(--ink)}
.lzoek select{height:44px;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:0 12px;font-size:16px;color:var(--ink);max-width:100%}
.lzoek input:focus,.lzoek select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--soft)}
.lmeer{position:relative}
.lmeer summary{list-style:none;cursor:pointer;height:44px;display:flex;align-items:center;padding:0 8px;font:600 15px/1 var(--display);color:var(--ink)}
.lmeer summary::-webkit-details-marker{display:none}
.lmeer[open] .lfpaneel{position:absolute;right:0;top:48px;z-index:5;min-width:min(380px,calc(100vw - 32px))}
.lsamen{margin:0 2px;font-size:13px;color:var(--muted)}
.llijst{padding:0;overflow:hidden}
.lrol{overflow:auto;max-height:calc(100dvh - 32px)}
.ltabel{min-width:calc(330px + var(--kolommen) * 124px)}
.lrij{--lx:20px;display:grid;grid-template-columns:minmax(260px,1fr) repeat(var(--kolommen),116px);gap:0 8px;align-items:center;padding:12px var(--lx);border-top:1px solid var(--line2);color:inherit;text-decoration:none;background:var(--panel)}
.lrij.lkop{position:sticky;top:0;z-index:3;box-shadow:0 1px 0 var(--line2);border-top:0;padding-top:12px;padding-bottom:12px;font:600 11.5px/1.2 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.lrij.lkop i{display:block;margin-top:2px;font-style:normal;text-transform:none;letter-spacing:0;font-weight:500;color:var(--faint)}
.lproduct,.lrij.lkop>span:first-child{position:sticky;left:0;z-index:1;background:inherit;margin-left:calc(-1 * var(--lx));padding-left:calc(var(--lx) + 22px);align-self:stretch;display:flex;align-items:center;gap:14px;min-width:0}
.lproduct img,.lgeenbeeld{width:52px;height:52px;border-radius:12px;object-fit:contain;background:var(--sunk);border:1px solid var(--line2);flex:none}
.lproduct div{display:grid;gap:2px;min-width:0}
.lproduct b{font:600 15px/1.3 var(--body);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lproduct span{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrij.kind{padding-top:9px;padding-bottom:9px}
.lrij.kind .lproduct{padding-left:calc(var(--lx) + 58px)}
.lrij.kind .lproduct img,.lrij.kind .lgeenbeeld{width:38px;height:38px;border-radius:10px}
.lrij.kind .lproduct b{font-size:14px}
.lcel{display:grid;justify-items:end;text-align:right;gap:2px;font-variant-numeric:tabular-nums}
.lcel b{font:600 15.5px/1.2 var(--body);color:var(--ink);white-space:nowrap}
.lcel small{font-size:12px;color:var(--muted);white-space:nowrap}
.lcel s{font-size:12px;color:var(--muted)}
.lcel b .neutraal{color:var(--ink)}
.lcel em{font-style:normal;font-size:11px;font-weight:600;border-radius:6px;padding:0 5px;white-space:nowrap}
.lcel.slecht em{background:var(--rood-bg);color:var(--rood)}.lcel.letop em{background:var(--amber-bg);color:var(--amber)}
.lcel.goed b{color:var(--groen)}.lcel.letop b{color:var(--amber)}.lcel.slecht b{color:var(--rood)}.lcel.geen b{color:var(--faint)}
.lrij.zonder .lproduct b{color:var(--muted)}
a.lrij:hover,.lfam>summary:hover .lrij{background:var(--hover)}
.lfam>summary{list-style:none;cursor:pointer;display:block}
.lfam>summary::-webkit-details-marker{display:none}
.lfam>summary .lproduct::before{content:"›";position:absolute;left:var(--lx);top:50%;margin-top:-10px;width:14px;text-align:center;font:600 20px/20px var(--body);color:var(--muted);transition:transform .15s}
.lfam[open]>summary .lproduct::before{transform:rotate(90deg)}
.lfam[open]>summary .lrij{background:var(--sunk)}
.lleeg{margin:0;padding:22px 20px;color:var(--muted)}
.lvoet{margin:0 2px;font-size:12.5px;color:var(--muted)}
@media (max-width:1100px){.lproduct{box-shadow:8px 0 8px -8px rgba(6,15,46,.14)}.lrij.lkop>span:first-child{box-shadow:none}}
@media (max-width:640px){
  .lfrij{grid-template-columns:1fr}
  .lrij{--lx:12px;grid-template-columns:minmax(170px,1fr) repeat(var(--kolommen),100px)}
  .ltabel{min-width:calc(190px + var(--kolommen) * 108px)}
  .lproduct img,.lgeenbeeld{width:40px;height:40px}
  .lrij.kind .lproduct{padding-left:calc(var(--lx) + 34px)}
}
.lsectie{border-top:1px solid var(--line)}
.lsectiekop{position:sticky;left:0;width:max-content;padding:16px 20px 8px;font:700 14px/1.2 var(--display);color:var(--ink)}
.lsectiekop a{color:inherit;text-decoration:none}.lsectiekop a:hover{color:var(--blue)}.lsectiekop a span{color:var(--faint)}
.lsectiekop+.lrij,.lsectiekop+.lfam>summary .lrij{border-top:0}

/* Te doen (fase 3): het bewijs rechts mag een korte zin zijn */
.tdbewijs{max-width:44ch;white-space:normal;line-height:1.3;font-size:13.5px}
.crij.tdopgelost{grid-template-columns:minmax(0,1fr) auto}
.crij.tdopgelost .tdbewijs{color:var(--muted)}
@media (max-width:700px){
  .apunt summary:has(.tdbewijs){grid-template-columns:minmax(0,1fr) 20px}
  .apunt summary .tdbewijs{grid-column:1;grid-row:2;text-align:left;max-width:none}
  .apunt summary:has(.tdbewijs) .cpijl{grid-column:2;grid-row:1}
  .crij.tdopgelost{grid-template-columns:minmax(0,1fr)}
  .crij.tdopgelost .tdbewijs{text-align:left}
}
.normveld input{width:110px;text-align:right}
.seizoenvelden{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 12px}
.seizoenvelden .veld input{width:170px}
.casetekst{width:100%;border:1px solid var(--line);background:var(--sunk);border-radius:10px;padding:10px 12px;font:13px/1.45 var(--body);color:var(--ink);resize:vertical}

/* ── Producten-tabel en filterkaart, uit het ontwerpvoorstel (22 oktober 2026) ── */
.ovfilters{display:grid;gap:12px;padding:14px}
.frij{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.frij.spreid{justify-content:space-between}
.seg{display:inline-flex;flex-wrap:wrap;background:var(--sunk);border:1px solid var(--line);border-radius:12px;padding:3px;gap:2px;max-width:100%}
.seg button,.seg a{border:0;background:transparent;border-radius:9px;padding:6px 12px;font:600 14px/1.2 var(--display);color:var(--muted);white-space:nowrap;text-decoration:none}
.seg button:hover,.seg a:hover{color:var(--ink)}
.seg button[aria-pressed="true"],.seg a[aria-current]{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(6,15,46,.08),0 0 0 1px var(--line)}
.seg.licht{background:transparent;border-color:transparent;padding:0}
.seg.licht button{border:1px solid transparent}
.seg.licht button[aria-pressed="true"]{box-shadow:none;border-color:var(--line);background:var(--sunk)}
.ovuitleg{font-size:12.5px;color:var(--muted)}
.keuze{appearance:none;border:1px solid var(--line);background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2373726C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;border-radius:10px;padding:7px 32px 7px 12px;font-size:13.5px;color:var(--ink);height:36px}
.keuze:hover{border-color:#CFCBC1}
.zoek{position:relative;flex:1 1 260px;min-width:0}
.zoek .ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--faint);width:16px;height:16px}
.zoek input{width:100%;height:36px;border:1px solid var(--line);background:var(--sunk);border-radius:10px;padding:0 12px 0 34px;font-size:13.5px}
.zoek input::placeholder{color:var(--faint)}
.zoek input:focus{outline:none;border-color:var(--blue);background:var(--panel);box-shadow:0 0 0 3px var(--soft)}
.optknop{display:inline-flex;align-items:center;gap:7px;height:36px;border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:0 12px;font:600 14px/1 var(--display);color:var(--ink)}
.optknop:hover{background:var(--sunk)}
.lijn{height:1px;background:var(--line2);margin:0 -14px}
.tabelpaneel{overflow:hidden}
.scroll{overflow-x:auto;position:relative}
.ov{border-collapse:separate;border-spacing:0;width:100%;min-width:760px}
.ov th{font:600 12px/1.2 var(--body);color:var(--muted);text-align:right;padding:13px 8px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--panel)}
.ov th:last-child,.ov td:last-child{padding-right:16px}
.ov th.l,.ov td.l{text-align:left}
.ov td{padding:11px 8px;border-bottom:1px solid var(--line2);vertical-align:top;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;font-size:13px;color:var(--ink);background:var(--panel)}
.ov th:first-child,.ov td:first-child{position:sticky;left:0;z-index:1;padding-left:14px;box-shadow:1px 0 0 var(--line2)}
.ov tr:last-child td{border-bottom:0}
.ov tr.fam td{background:#FBFAF7;border-top:1px solid var(--line)}
.ov tbody tr:first-child td{border-top:0}
.ov tr.land:hover td,.ov tr.var:hover td{background:var(--hover)}
.ov tr.ovgroep td{background:var(--sunk);font:700 12px/1.2 var(--body);color:var(--muted);letter-spacing:.04em;text-transform:uppercase;padding:9px 14px;border-top:1px solid var(--line)}
.ov .sub{display:block;font-size:11px;color:var(--muted);font-weight:400;margin-top:3px;line-height:1.3}
.ov .d{font-size:11.5px;font-weight:600;margin-left:6px;white-space:nowrap}
/* Een minteken springt niet los van het bedrag (audit W9) */
.nobr{white-space:nowrap}
.ov .d.pos{color:var(--groen)} .ov .d.neg{color:var(--rood)} .ov .d.nul{color:var(--faint);font-weight:500}
.ov .waarde{font-weight:600}
.ov .waarde.goed{color:var(--groen)} .ov .waarde.slecht{color:var(--rood)}
.pcel{display:flex;align-items:center;gap:10px;min-width:0}
.ovklap{width:24px;height:24px;border-radius:7px;border:0;background:transparent;color:var(--muted);display:grid;place-items:center;flex:none;padding:0}
.ovklap:hover{background:var(--sunk);color:var(--ink)}
.ovklap .ico{transition:transform .15s}
.ovklap[aria-expanded="true"] .ico{transform:rotate(90deg)}
.ovklap.weg{visibility:hidden}
.thumb{width:36px;height:36px;border-radius:10px;background:var(--sunk);border:1px solid var(--line);display:grid;place-items:center;flex:none;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:contain;background:#fff}
.pnaam{font:700 16px/1.2 var(--display);color:var(--ink)}
.ov tr.land .pnaam,.ov tr.var .pnaam{font:600 14.5px/1.2 var(--display)}
a.pnaam.link{color:var(--ink);text-decoration:none}
a.pnaam.link:hover{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.psub{font-size:11px;color:var(--muted);margin-top:3px;letter-spacing:.01em;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov tr.land .pcel{padding-left:22px}
.ov tr.var.n1 .pcel{padding-left:80px}
.ov tr.var.n2 .pcel{padding-left:96px}
.lb{display:inline-grid;place-items:center;width:30px;height:22px;border-radius:6px;background:var(--badge);color:var(--navy2);font:700 11.5px/1 var(--body);letter-spacing:.03em;flex:none}
.tabelvoet{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:11px 16px;border-top:1px solid var(--line2);font-size:12px;color:var(--muted)}
@media (max-width:720px){
  .seg button,.seg a{padding:6px 10px;font-size:13.5px}
  .pnaam{font-size:15px}
  .ov tr.var.n2 .pcel{padding-left:56px}
  .ov tr.var.n1 .pcel{padding-left:46px}
}
.ov th .sub{font-weight:400;color:var(--faint);margin-top:2px}
.ov tr.ovgroep a{color:inherit;text-decoration:none}
.ov tr.ovgroep a:hover{color:var(--blue)}
.ov .geen{color:var(--faint)}
.ov .waarde.let{color:var(--amber)}
.ov .sub.let{color:var(--amber);font-weight:600}
.ov tr.zonder td{color:var(--muted)}
.ov em{font-style:normal}
.ovlabel{font:600 11.5px/1 var(--body);color:var(--muted);letter-spacing:.06em;text-transform:uppercase;min-width:64px}
/* Filterkaart: groepen knoppen naast elkaar op één regel, elk met een klein label ervoor */
.fgroep{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.fgroepen{gap:10px 28px}
.fgroepen .ovlabel{min-width:0}
.seg a b,.seg button b{font-weight:600;color:var(--faint);margin-left:6px;font-variant-numeric:tabular-nums}
.seg a .lstip{margin-right:6px;vertical-align:1px}
.seg.licht a{border:1px solid transparent}
.seg.licht a[aria-current]{box-shadow:none;border-color:var(--line);background:var(--sunk)}
.ovfilters .lmeer{position:relative}
.ovfilters .lmeer summary{list-style:none;cursor:pointer}
.ovfilters .lmeer summary::-webkit-details-marker{display:none}
.lmeer[open] .ovmeer{position:absolute;right:0;top:44px;z-index:5;min-width:min(380px,calc(100vw - 32px))}
.lb.tdland{width:auto;min-width:26px;height:19px;padding:0 5px;font-size:10.5px;margin-right:4px;vertical-align:1px}
.tdper{margin:0 0 10px;padding-left:18px;font-size:13px;color:var(--text);display:grid;gap:4px}
.tdper b{color:var(--ink);margin-right:4px}
.ov td.kw{white-space:normal;min-width:120px;max-width:170px;line-height:1.35}
.ov td.lang{white-space:normal;min-width:220px;max-width:46ch;line-height:1.4}
.ov tr.ovgroep .sub{text-transform:none;letter-spacing:0;font-weight:400;font-size:12px}
.ov td.kw .d{margin-left:4px}
a.kwlink{color:var(--ink);text-decoration:none;font-weight:600}
a.kwlink:hover{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
a.kwlink.voorstel{color:var(--muted);font-weight:500;font-style:italic}
.kwkies{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.kwkies .keuze{max-width:340px}
.kweigen{height:36px;border:1px solid var(--line);background:var(--sunk);border-radius:10px;padding:0 10px;font-size:13.5px;width:190px}
.kweigen:focus{outline:none;border-color:var(--blue);background:var(--panel);box-shadow:0 0 0 3px var(--soft)}
.kwvoorstel{color:var(--muted);font-style:italic}
.ov tr.kwhier td{background:var(--hover)}
/* Het i-tje bij een kolomkop: bron, hoe vaak, laatst bijgewerkt (Mark, 22 oktober 2026) */
.info{position:relative;display:inline-flex;vertical-align:1px;margin-left:5px}
.infoknop{width:15px;height:15px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--muted);font:600 10px/1 var(--body);display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer}
.infoknop:hover,.infoknop[aria-expanded="true"]{border-color:var(--blue);color:var(--blue)}
.infovak{position:absolute;top:22px;right:-6px;z-index:30;width:260px;display:flex;flex-direction:column;gap:4px;padding:10px 12px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);font:400 12px/1.4 var(--body);color:var(--ink);text-align:left;white-space:normal;text-transform:none;letter-spacing:0}
.infovak.links{left:-6px;right:auto}
/* Breed (Niet live op Producten, 27 oktober 2026): langere meldingen van Amazon, leesbaar en scrollbaar */
.infovak{overflow-wrap:anywhere}
.infovak.breed{width:440px;max-height:50vh;overflow-y:auto;gap:8px;font-size:13px;z-index:40}

/* De tabel van Marge, Kosten en Controles (BoomTabel): gelijke kolommen, lagere landregels, rustige cijfers */
.ov.boom th:first-child{width:34%}
.ov.boom th:not(:first-child){width:calc(66% / var(--n))}
.ov.boom th,.ov.boom td{padding-right:14px}
.ov.boom th:last-child,.ov.boom td:last-child{padding-right:18px}
.ov.boom td{vertical-align:middle}
.ov.boom tr.land td,.ov.boom tr.var td{padding-top:8px;padding-bottom:8px}
.ov.boom .w{display:block;font-size:13.5px;font-weight:500;line-height:1.25;color:var(--ink)}
.ov.boom tr.fam .w{font-size:14px}
.ov.boom tr.fam.heeft .w{font-weight:650}
.ov.boom .w.waarde{font-weight:600}
.ov.boom .w.waarde.goed{color:var(--groen)}
.ov.boom .w.waarde.let{color:var(--amber)}
.ov.boom .w.waarde.slecht{color:var(--rood)}
.ov.boom .w.geen{color:var(--faint);font-weight:400}
.ov.boom .sub{margin-top:2px;line-height:1.25}
.ov.boom tr.fam td{padding-top:12px;padding-bottom:12px}
.ov.boom tr.land .pnaam{font-size:14px}
.ov.boom tr.fam:hover td{background:#F8F7F3}

/* Een getal waarachter de opbouw zit (herleidbaar, Mark 22 oktober 2026): zelfde kleur, onderstreept bij aanwijzen */
.ov a.cijfer{color:inherit;text-decoration:none}
.ov a.cijfer:hover,.ov a.cijfer.aan{text-decoration:underline;text-underline-offset:3px}
.hcijfer a.cijfer{color:inherit;text-decoration:none}
.hcijfer a.cijfer:hover{text-decoration:underline;text-underline-offset:4px}

/* Mobiel (audit 23 oktober 2026, op verzoek van Mark): de eerste kolom van een tabel blijft staan bij horizontaal scrollen
   en is smal genoeg om de cijfers ernaast te zien; knoppen groot genoeg voor een duim; invoervelden op 16px zodat de
   iPhone niet inzoomt bij het typen; een rij landen of routes scrolt in plaats van buiten beeld te vallen. */
@media (max-width:720px){
  .scroll .ov th:first-child,.scroll .ov td:first-child{position:sticky;left:0;z-index:1;background:var(--panel);box-shadow:8px 0 8px -8px rgba(6,15,46,.16);min-width:150px;width:150px;max-width:150px}
  .scroll .ov tr.ovgroep td:first-child{max-width:none;width:auto}
  .scroll .ov thead th:first-child{z-index:2}
  .scroll .ov td:first-child .pnaam,.scroll .ov td:first-child .psub,.scroll .ov td:first-child .sub{overflow-wrap:break-word;white-space:normal}
  .scroll .ov tr.land .pcel{padding-left:0}
  .scroll .ov tr.var.n1 .pcel,.scroll .ov tr.var.n2 .pcel{padding-left:12px}
  .scroll .ov .ovklap.weg,.scroll .ov .thumb{display:none}
  .frijen{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .seg a,.seg button{min-height:34px;display:inline-flex;align-items:center}
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px}
  .fasepil{padding:5px 12px 5px 5px}
  .scroll .ov th:first-child{white-space:normal}
  .scroll .ov.boom th:first-child{width:150px}
  .scroll .ov.boom th:not(:first-child){width:auto}
  .schuif,.schuif input{min-width:0}
  .scroll .ov th:first-child .thknop{display:block;margin:6px 0 0;min-height:30px}
  .rpost b{white-space:normal;text-align:right;min-width:0;overflow-wrap:anywhere}
  /* Het venster van een i-tje als kaart onderaan het scherm: in een tabel die opzij scrolt viel het half buiten beeld */
  .infovak,.infovak.links{position:fixed;left:16px;right:16px;top:auto;bottom:16px;width:auto;max-height:60vh;overflow-y:auto;z-index:60;font-size:13px;box-shadow:0 12px 32px rgba(6,15,46,.22)}
  /* Groter tikvlak zonder dat de opmaak verschuift */
  .infoknop,.ovklap,.tekstknop{position:relative}
  .infoknop::after{content:"";position:absolute;inset:-10px}
  .ovklap::after{content:"";position:absolute;inset:-8px}
  .tekstknop::after{content:"";position:absolute;inset:-9px -4px}
}


/* Blade: het i-tje en het menu op de telefoon openen met een klein script; dicht is echt dicht */
.infovak[hidden]{display:none}

/* Te doen (fase 3): per blok een kop, per melding een regel die openklapt. Links de soort met een stip (rood = alarm),
   in het midden het product, rechts het bewijs. */
.ulijst{overflow:hidden;margin-bottom:14px}
.ukop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;padding:16px 18px 14px;border-bottom:1px solid var(--line2)}
.ukop h2{font-size:17px}
.ukop p{margin:3px 0 0;color:var(--muted);font-size:13px;max-width:70ch}
.apunt{border-top:1px solid var(--line2)}
.apunt:first-of-type{border-top:0}
.apunt>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,42ch);gap:6px 18px;align-items:center;padding:13px 18px;position:relative}
.apunt>summary::-webkit-details-marker{display:none}
.apunt>summary:hover{background:var(--hover)}
.apunt>summary::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0}
.apunt.alarm>summary::before{background:var(--rood)}
.tdsoort{display:inline-flex;align-items:center;gap:8px;font:600 14px/1.25 var(--display);color:var(--ink);min-width:0}
.tdsoort i{width:8px;height:8px;border-radius:50%;flex:none;background:#D98A1F}
.tdsoort.alarm{color:var(--rood)}
.tdsoort.alarm i{background:var(--rood)}
.ukop h2.tdsoort{font-size:17px}
.tdwat{min-width:0;font-size:13.5px;color:var(--text);display:grid;gap:2px}
.tdwat b{font:700 14.5px/1.3 var(--display);color:var(--ink)}
.tdwat .zacht{font-size:12.5px;color:var(--muted)}
.tdbewijs{color:var(--text);font-size:13px;line-height:1.35;text-align:right}
.tdopen{padding:4px 18px 16px 18px;display:grid;gap:8px;font-size:13.5px}
.tdopen .doe{color:var(--ink)}
.tdopen .doe b{font-family:var(--display)}
@media (max-width:760px){.apunt>summary{grid-template-columns:minmax(0,1fr)}.tdbewijs{text-align:left}}

/* Productpagina › Historie: kleine veelvouden, één reeks per strook op dezelfde tijdas */
.stroken{display:grid;gap:4px;padding:6px 0}
.strook{padding:10px 18px;border-top:1px solid var(--line2)}
.strook:first-child{border-top:0}
.strookkop{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.strookkop b{font:600 13.5px/1.3 var(--display);color:var(--ink)}
.strookkop span{font:600 14px/1.2 var(--body);color:var(--ink);font-variant-numeric:tabular-nums}
.strook svg{display:block;width:100%;height:46px;margin-top:4px}
.strook polyline{fill:none;stroke:var(--navy2);stroke-width:1.5;vector-effect:non-scaling-stroke}
.strook circle{fill:var(--navy2)}
.strookvoet{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--faint);margin-top:2px}
.strookleeg{font-size:12.5px;color:var(--faint);padding:6px 0}

/* Dashboard */
.dbrij{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.dbblok{padding:16px 18px}
.dbblok h2{font-size:17px;margin-bottom:10px}
.dbcijfers{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.dbcijfers div{min-width:0}
.dbcijfers>div>span{display:flex;align-items:center;gap:2px;font-size:12px;color:var(--muted)}
.dbcijfers>div>b{display:block;font:700 21px/1.2 var(--display);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.dbcijfers>div>small{display:block;font-size:12px;font-variant-numeric:tabular-nums}
.dbcijfers .pos{color:var(--groen)} .dbcijfers .neg{color:var(--rood)} .dbcijfers .nul{color:var(--faint)}
.dblijst{list-style:none;margin:0;padding:0}
.dblijst li{display:flex;gap:10px;align-items:baseline;justify-content:space-between;padding:7px 0;border-top:1px solid var(--line2)}
.dblijst li:first-child{border-top:0}
.dblijst .wat{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dblijst .hoeveel{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.dblijst .hoeveel.pos{color:var(--groen)} .dblijst .hoeveel.neg{color:var(--rood)}
.dbletop{border-left:3px solid var(--rood)}
@media (max-width:520px){.dbcijfers>div>b{font-size:18px}}

/* Annotaties */
.anform{display:grid;gap:12px}
.anrij{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.veld select,.veld textarea{border:1px solid var(--line);background:var(--sunk);border-radius:10px;padding:9px 12px;font-size:14px;color:var(--ink);min-width:0;max-width:100%}
.veld select{height:40px;padding:0 10px}
.veld textarea{resize:vertical}
.veld select:focus,.veld textarea:focus{outline:none;border-color:var(--blue);background:var(--panel);box-shadow:0 0 0 3px var(--soft)}
.ankeus{display:flex;flex-wrap:wrap;gap:14px;align-items:center;min-height:40px}
.ankeus label{display:flex;gap:6px;align-items:center}
.dbblok p{margin:0 0 8px}

/* Zoekwoorden */
.zoekvoorstel{display:flex;flex-wrap:wrap;gap:8px}

/* Concurrenten */
.kweigen{height:32px;border:1px solid var(--line);background:var(--sunk);border-radius:8px;padding:0 10px;font-size:13px;min-width:180px}
.concurrentkies{display:grid;grid-template-columns:minmax(140px,180px) 1fr auto;gap:12px;align-items:end}
@media (max-width:640px){.concurrentkies{grid-template-columns:1fr}}

/* Dashboard, ingedeeld zoals de Amazon-software */
.hkop{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.hkop .hcijfer{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;position:relative}
.hkop .hcijfer>span{display:flex;align-items:center;gap:2px;font-size:12px;color:var(--muted)}
.hkop .hcijfer b{display:block;font:650 22px/1.2 var(--body);color:var(--ink);margin-top:4px;font-variant-numeric:tabular-nums}
.hkop .hcijfer small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.hkop .hcijfer small.goed{color:var(--groen)} .hkop .hcijfer small.slecht{color:var(--rood)}
.dblet{font-size:13px;color:var(--ink);margin:0;line-height:1.5}
.dblet>b{color:var(--amber);margin-right:4px}
.dblet a{color:var(--blue);text-decoration:none}
.dblet a:hover{text-decoration:underline}
.dbvrij{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.dbvrij label{display:flex;align-items:center;gap:5px}
.dbvrij input{height:32px;border:1px solid var(--line);background:var(--sunk);border-radius:8px;padding:0 8px;font-size:13px;color:var(--ink)}
.dblijst .wat .sub{display:block}
.merkknop{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:0;cursor:pointer;color:var(--ink)}
.merkknop svg{transition:transform .15s;color:var(--muted)}
.merkknop[aria-expanded="true"] svg{transform:rotate(90deg)}
.ov tr.var.n1 .pcel{padding-left:44px}
.ov tr[hidden]{display:none}
.ov .waarde.leeg{display:inline;padding:0;border:0;background:none;text-align:inherit;color:inherit}
.thknop{border:0;background:none;color:var(--blue);font:500 11.5px/1 var(--body);margin-left:10px;padding:0;cursor:pointer}
.dbvrij select{height:32px;border:1px solid var(--line);background:var(--sunk);border-radius:8px;padding:0 8px;font-size:13px;color:var(--ink);max-width:190px}
.dbzoek input{height:32px;border:1px solid var(--line);background:var(--sunk);border-radius:8px;padding:0 10px;font-size:13px;color:var(--ink);min-width:220px}
.thumb{width:36px;height:36px;border-radius:10px;background:var(--sunk);border:1px solid var(--line);display:grid;place-items:center;flex:none;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:contain;background:#fff}
.kopbeeld{width:84px;height:84px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);flex:none}
.dblijst li.dbbeeld{justify-content:flex-start}
.dblijst li.dbbeeld .wat{flex:1}
.pacc{font-size:11px;color:var(--muted);margin-left:6px}
.ukop{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 18px;border-bottom:1px solid var(--line2)}
.ukop h2{font-size:17px;margin:0 0 2px}
.ukop p{margin:0;color:var(--muted);font-size:13px}
.ov td.lchips{white-space:normal}
.lkaart{display:inline-flex;align-items:baseline;gap:6px;margin:1px 4px 1px 0;padding:4px 9px;border:1px solid var(--line);border-radius:8px;background:var(--sunk);font:600 11px/1.4 var(--display);color:var(--muted)}
.lkaart b{font:700 12.5px/1.4 var(--display);color:var(--ink)}
.pkaart{min-width:0}
.pkaart .lb{margin-right:4px}
.dblijst .wat{white-space:normal}
.tdwat .pcel{min-width:0}
.kop .tekst>.pcel{margin:2px 0}
.nav .teller{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--rood-bg);color:var(--rood);font:700 11.5px/20px var(--display);text-align:center}
.nav[aria-current="page"] .teller{background:#FAFAF8}
.nav .teller.blauw{background:var(--blue);color:#FAFAF8}
.nav[aria-current="page"] .teller.blauw{background:#FAFAF8;color:var(--blue)}
.shell.smal .nav .teller{display:none}
.stroken{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:0;padding:0}
.verloop{position:relative;padding:14px 18px;border-top:1px solid var(--line2);min-width:0}
.verloop svg{display:block;width:100%;height:auto;margin-top:6px}
.hbasis{stroke:var(--line);stroke-width:1}
.hlijn{fill:none;stroke:var(--navy2);stroke-width:2;stroke-linecap:round}
.hpunt{fill:var(--navy2);stroke:var(--panel);stroke-width:2}
.heind{font:600 10.5px var(--body);fill:var(--ink)}
.has{font:400 10px var(--body);fill:var(--muted)}
.lettag{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;background:var(--amber-bg);color:var(--amber);font:600 13px/1.3 var(--body);text-decoration:none}
.kgetal{min-width:0;width:86px;text-align:right}
.ov th .sub{font-weight:400}
.hcijfer b.waarde.slecht{color:var(--rood)} .hcijfer b.waarde.let{color:var(--amber)} .hcijfer b.waarde.goed{color:var(--groen)}
.ov tr.urg-dringend td{background:var(--rood-bg)}
.ov tr.urg-aandacht td{background:var(--amber-bg)}
.dekpil{display:inline-block;padding:2px 8px;border-radius:7px;font:600 12.5px/1.4 var(--body);font-variant-numeric:tabular-nums}
.dekpil.dringend{background:#FBD5D0;color:var(--rood)} .dekpil.aandacht{background:#FFE2AE;color:var(--amber)} .dekpil.genoeg{background:var(--groen-bg);color:var(--groen)} .dekpil.geen{color:var(--faint)}
.dbvrij input[type=number]{width:70px}

/* Te doen: een blok per soort melding, in te klappen */
.tdblok>summary{list-style:none;cursor:pointer;flex-wrap:nowrap;align-items:center}
.tdblok>summary::-webkit-details-marker{display:none}
.tdblok>summary:hover{background:var(--hover)}
.tdblok:not([open])>summary{border-bottom:0}
.tdblok>summary>svg{flex:none;color:var(--muted);transition:transform .15s}
.tdblok[open]>summary>svg{transform:rotate(90deg)}

/* Zendingen: een verschil met reden */
.ztag{display:block;width:max-content;margin:4px 0 0 auto;padding:2px 8px;border-radius:999px;background:var(--amber-bg);color:var(--amber);font-size:12px;font-weight:600}
.zreden{margin:8px 0 2px;padding:7px 10px;border-left:3px solid var(--amber);border-radius:0 6px 6px 0;background:var(--amber-bg);font-size:13px;line-height:1.4;white-space:normal}
.zreden span{display:block;color:var(--muted);font-size:12px}

/* Marge: korte labels in plaats van meldingen over de hele breedte */
.margetags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.grijstag{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;background:var(--line2);color:var(--muted);font:600 13px/1.3 var(--body)}

/* Knop die bezig is */
.knop.laadt{display:inline-flex;align-items:center;gap:8px;cursor:progress;opacity:.8}
.knop.laadt::before{content:"";width:14px;height:14px;flex:none;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:draai .7s linear infinite}
@keyframes draai{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.knop.laadt::before{animation-duration:2s}}

/* Lijndiagram: tooltip bij de kolom onder de muis */
.vzone{fill:transparent;cursor:default}
.vgids{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 3}
.vgids[hidden]{display:none}
.vtip{position:absolute;z-index:5;transform:translate(-50%,-100%);pointer-events:none;padding:6px 10px;border-radius:8px;background:var(--ink);color:#fff;text-align:center;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.vtip[hidden]{display:none}
.vtip b{display:block;font:650 14px/1.25 var(--body)}
.vtip span{display:block;font:500 12px/1.3 var(--body);opacity:.8}
.ov td.sigtekst{white-space:normal;min-width:320px;width:100%;line-height:1.4}
.ov td.sigtekst a{display:block;white-space:normal;color:inherit;text-decoration:none}
.ov td.sigtekst a:hover{text-decoration:underline}
.dbblok h2 a{color:inherit;text-decoration:none}

/* Signalen: gezien gaat naar de achtergrond */
.siggezien td>*,.siggezien .wat,.siggezien .hoeveel{opacity:.45}
.siggezien td:last-child>*{opacity:1}
.sigterug{border:0;background:none;padding:0;color:var(--muted);font:500 12px/1.3 var(--body);cursor:pointer}
.sigterug:hover{color:var(--ink);text-decoration:underline}
.sigterug{display:block;margin:2px 0 0 auto}

/* Dealkalender */
.dkeuze{justify-content:flex-end}
.dkeuze button{padding:4px 9px;font-size:12.5px}
.dkeuze button[data-waarde="1"][aria-pressed="true"]{background:var(--groen-bg);color:var(--groen)}
.dkeuze button[data-waarde="0"][aria-pressed="true"]{background:var(--sunk);color:var(--ink)}
.dafrond{margin-top:4px}
.dmodal{width:min(560px,calc(100vw - 32px));border:0;border-radius:16px;padding:22px;color:var(--ink);background:var(--panel);box-shadow:0 18px 50px rgba(6,15,46,.28)}
.dmodal::backdrop{background:rgba(6,15,46,.45)}
.dmodal h2{font-size:19px;margin:0 0 2px}
.dmodal dl{margin:12px 0;display:grid;gap:6px}
.dmodal dl div{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.dmodal dt{color:var(--muted)}
.dmodal dd{margin:0;font-weight:600;text-align:right}
.dmodal .veld{display:block;margin:10px 0}
.dmodal input,.dmodal textarea{width:100%}
.dmodal p{font-size:13px;margin:0}
.dmodalknoppen{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}

.dproduct{font:650 15px/1.3 var(--display);margin:8px 0 0!important}
.drekening{width:100%;border-collapse:collapse;margin:10px 0;font-size:13.5px;font-variant-numeric:tabular-nums;transition:opacity .15s}
.rekent .drekening{opacity:.45}
.drekening th,.drekening td{padding:5px 0 5px 10px;text-align:right;font-weight:500;border-bottom:1px solid var(--line2)}
.drekening tbody th{padding-left:0;text-align:left;color:var(--muted)}
.drekening thead th{color:var(--muted);font-size:12px}
.drekening .dtotaal th,.drekening .dtotaal td{font-weight:700;color:var(--ink)}
.drekening .dgoed{color:var(--groen)}
.drekening .dslecht{color:var(--rood)}
.dmodal .melding{margin-top:8px}

body>.infovak{z-index:70}
.rafwerk{display:flex;gap:8px;align-items:flex-start}
.rafwerk textarea{flex:1;min-width:240px;font:inherit;font-size:13px;padding:7px 9px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel,#fff);color:inherit;resize:vertical}
.rlet{color:var(--amber);font-weight:600}