/* public/schermen/concurrenten/concurrenten.css — Concurrenten (ontwerp 25-10-2026, docs/ontwerp/concurrenten/). Alles onder .cc; kleuren alleen uit de huid-variabelen
   (drie basiskleuren plus grijs in gradaties: blauw-900…100, groen, koraal, grijs). Geen hexwaarden. Gedeelde onderdelen; elk scherm heeft daarnaast een eigen css-bestand. */

.cc{min-width:0}
.cc .cc-laden{padding:24px 4px}
.cc .cc-kop{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cc .cc-kop .paginakop{min-width:0;flex:1 1 420px}
.cc .cc-kop .titel{font-size:22px;font-weight:600;letter-spacing:-.01em;line-height:1.25;overflow-wrap:anywhere}
.cc .cc-knoppen{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cc .cc-tabrij{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--rand);margin-top:-4px}
.cc .cc-tabrij .tabbalk{display:flex;gap:0;border:0}
.cc .cc-tabrij .ptab{padding:10px 14px;margin-right:0;font-weight:400}
.cc .cc-tabrij .ptab.aan{color:var(--tekst);font-weight:600;border-bottom-color:var(--blauw-900)}
.cc .cc-status{display:flex;align-items:center;gap:8px;padding:0 2px 10px;font-size:12.5px;color:var(--grijs);min-width:0;flex-wrap:wrap}
.cc .cc-stip{width:8px;height:8px;border-radius:50%;background:var(--groen-700);flex:none}
.cc .cc-stip.let{background:var(--koraal-900)}
.cc .cc-tandwiel{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--r2);color:var(--grijs)}
.cc .cc-tandwiel:hover{background:var(--grijs-300);color:var(--tekst);text-decoration:none}

/* vierkaart-rijen: vier op een rij, krimpen mee (huid-regel 4) */
.cc .cc-vier{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.cc .cc-drie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.cc .cc-twee{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:1100px){.cc .cc-vier{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cc .cc-kaartkop{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.cc .cc-kaartkop .n{margin-left:auto;font-size:12px;color:var(--grijs)}
.cc .cc-n{font-size:11.5px;color:var(--grijs);font-variant-numeric:tabular-nums}
.cc.huid .sub.aan .cc-n{color:var(--blauw)}

/* foto en avatar */
.cc .cc-foto{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r2);border:1px solid var(--rand2);background:var(--wit);flex:none;overflow:hidden;color:var(--grijs-500)}
.cc .cc-foto img{width:100%;height:100%;object-fit:contain}
.cc .cc-foto.groot{width:52px;height:52px}
.cc .cc-foto.klein{width:28px;height:28px}
.cc .cc-av{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--r2);font-weight:600;font-size:14px;flex:none}
.cc .cc-av.klein{width:28px;height:28px;font-size:11.5px}
.cc .cc-av.blauw{background:var(--blauw-100);color:var(--blauw-900)}
.cc .cc-av.blauw2{background:var(--blauw-300);color:var(--blauw-900)}
.cc .cc-av.grijs{background:var(--grijs-300);color:var(--grijs-900)}
/* kanaal-icoon: bol = blauw, webshop = grijs met de eerste letters van het domein */
.cc .cc-kn{display:inline-flex;align-items:center;justify-content:center;gap:1px;min-width:26px;height:20px;padding:0 5px;border-radius:5px;font-size:10.5px;font-weight:600;line-height:1;flex:none}
.cc .cc-kn.bol{background:var(--blauw-100);color:var(--blauw-900);border:1px solid var(--blauw-300)}
.cc .cc-kn.bol sup{font-size:7.5px;margin-left:1px}
.cc .cc-kn.web{background:var(--grijs-300);color:var(--grijs-900);border:1px solid var(--grijs-500)}

/* goedkoper / gelijk / duurder: koraal = zij zijn goedkoper dan jij, grijs = gelijk, groen = zij zijn duurder */
.cc .cc-vb{display:flex;height:7px;border-radius:999px;overflow:hidden;background:var(--grijs-300);width:100%;min-width:40px}
.cc .cc-vb i{display:block;height:100%}
.cc .cc-vb i.g{background:var(--koraal-700)}
.cc .cc-vb i.e{background:var(--grijs-500)}
.cc .cc-vb i.d{background:var(--groen-500)}
.cc .cc-vt{font-size:12px;color:var(--grijs);white-space:nowrap}
.cc .cc-vt b{color:var(--tekst);margin-right:2px}
.cc .cc-vt + .cc-vt{margin-left:10px}

/* ring, staafjes, sparkline */
.cc .cc-ring{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none}
.cc .cc-ring svg{position:absolute;inset:0}
.cc .cc-ring circle{fill:none;stroke-width:4}
.cc .cc-ring circle.b{stroke:var(--grijs-300)}
.cc .cc-ring circle.v{stroke:var(--blauw-700);stroke-linecap:round}
.cc .cc-ring b{position:relative;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}
.cc .tegel2.hero .cc-ring circle.b{stroke:rgba(255,255,255,.28)}
.cc .tegel2.hero .cc-ring circle.v{stroke:var(--wit)}
.cc .cc-staaf rect{fill:var(--blauw-300)}
.cc .cc-staaf rect.laatste{fill:var(--blauw-900)}
.cc .cc-spark{display:block;overflow:visible}
.cc .cc-spark .l{fill:none;stroke:var(--blauw-500);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.cc .cc-spark circle{fill:var(--blauw-900)}

/* tabellen: kop 12 grijs, rijen 48, lichte lijnen, getallen rechts met vaste cijfers, in een scrollend kader */
.cc .cc-tabel{background:var(--vlak);border:1px solid var(--rand);border-radius:var(--r);overflow:hidden}
.cc .cc-tabelkop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:16px 20px 12px}
.cc .cc-tabelkop .k{font-size:12.5px}
.cc .cc-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-left:auto}
.cc .cc-scrol{overflow-x:auto}
.cc .cc-grid{min-width:var(--min,860px)}
.cc .cc-hrij,.cc .cc-rij{display:grid;grid-template-columns:var(--kol);gap:12px;align-items:center;padding:0 20px}
.cc .cc-hrij{min-height:38px;font-size:12px;color:var(--grijs);font-weight:500;border-bottom:1px solid var(--rand2)}
.cc .cc-rij{min-height:52px;border-bottom:1px solid var(--rand2);font-variant-numeric:tabular-nums}
.cc .cc-rij:last-child{border-bottom:0}
.cc .cc-rij:hover{background:var(--hover)}
.cc .cc-r{text-align:right}
.cc .cc-cel{display:inline-block;padding:2px 8px;border-radius:6px;font-weight:600;font-variant-numeric:tabular-nums}
.cc .cc-cel.groen{background:var(--groen-100);color:var(--groen-900)}
.cc .cc-cel.rood{background:var(--koraal-100);color:var(--koraal-900)}
.cc .cc-cel.blauw{background:var(--blauw-100);color:var(--blauw-900)}
.cc .cc-naam{min-width:0;overflow:hidden}
.cc .cc-naam b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc .cc-naam .k{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc .cc-voet{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 20px;border-top:1px solid var(--rand2);font-size:12.5px;color:var(--grijs)}
.cc .cc-pager{display:flex;gap:6px;align-items:center}
.cc .cc-leeg{padding:28px 20px;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center}
/* soort-pillen van Veranderingen en matchpillen */
.cc .cc-pil{display:inline-flex;align-items:center;gap:4px;border-radius:6px;padding:2px 8px;font-size:11.5px;font-weight:600;line-height:1.5;white-space:nowrap;background:var(--grijs-300);color:var(--grijs-900)}
.cc .cc-pil.blauw{background:var(--blauw-100);color:var(--blauw-900)}
.cc .cc-pil.koraal{background:var(--koraal-100);color:var(--koraal-900)}
.cc .cc-pil.groen{background:var(--groen-100);color:var(--groen-900)}
.cc .cc-pil.grijs{background:var(--grijs-300);color:var(--grijs-900)}
.cc .cc-pil.zeker{background:var(--blauw-900);color:var(--wit)}
.cc .cc-link{background:none;border:0;padding:0;color:var(--blauw);cursor:pointer;font:inherit}
.cc .cc-link:hover{text-decoration:underline}
.cc .cc-link.gevaar{color:var(--koraal-900)}
.cc .cc-menu{position:relative;display:inline-block}
.cc .cc-menu>button{background:none;border:0;cursor:pointer;color:var(--grijs);padding:4px 8px;border-radius:var(--r2);font-weight:600}
.cc .cc-menu>button:hover{background:var(--grijs-300)}
.cc .cc-menu .cc-menulijst{position:absolute;right:0;top:100%;z-index:20;min-width:200px;background:var(--vlak);border:1px solid var(--rand);border-radius:var(--r2);box-shadow:var(--pop-schaduw);padding:6px;display:flex;flex-direction:column}
.cc .cc-menu .cc-menulijst[hidden]{display:none}
.cc .cc-menu .cc-menulijst button{background:none;border:0;text-align:left;padding:8px 10px;border-radius:6px;cursor:pointer;font:inherit;color:var(--tekst)}
.cc .cc-menu .cc-menulijst button:hover{background:var(--grijs-100)}
.cc .cc-menu .cc-menulijst button.gevaar{color:var(--koraal-900)}
.cc .cc-uitleg{font-size:12.5px;color:var(--grijs);line-height:1.5}

/* afstemming op de borden (vergelijking-gebouwd.md): maten van de kaart, tegels, pillen en balken uit docs/ontwerp/concurrenten/01-overzicht.html */
.cc.huid .tegel2 .g{font-size:26px;margin:2px 0}
.cc.huid .tegel2.hero .g{font-size:26px}
.cc.huid .sub{display:inline-flex;align-items:center;gap:6px;padding:0 12px;min-height:32px;border-radius:var(--r2);font-size:13px;border:1px solid var(--rand);background:var(--vlak);color:var(--tekst)}
.cc.huid .sub.aan{background:var(--blauw-900);color:var(--wit);border-color:var(--blauw-900);font-weight:600}
.cc.huid .sub.aan .cc-n{color:var(--wit)}
.cc.huid .kop{font-size:15px}
.cc .cc-av{width:40px;height:40px;border-radius:10px;font-weight:600;font-size:13px}
.cc .cc-av.klein{width:28px;height:28px;font-size:11.5px}
.cc .cc-av.blauw{background:var(--blauw-100);color:var(--blauw-900)}
.cc .cc-av.grijs{background:var(--grijs-100);color:var(--grijs-900);border:1px solid var(--rand)}
.cc .cc-kn{min-width:18px;height:18px;padding:0 1px;border-radius:5px;font-size:9px;font-weight:600}
.cc .cc-kn sup{font-size:6.5px;margin-left:1px;line-height:1}
.cc .cc-kn.bol{background:var(--blauw-100);color:var(--blauw-900);border:1px solid var(--blauw-300)}
.cc .cc-kn.web{background:var(--grijs-100);color:var(--grijs-900);border:1px solid var(--rand)}
.cc .cc-vb{height:10px;border-radius:5px;background:var(--grijs-100);border:1px solid var(--rand);min-width:40px}
.cc .cc-vb i.g{background:var(--koraal-900);opacity:.6}
.cc .cc-vb i.e{background:var(--grijs-300);opacity:1}
.cc .cc-vb i.d{background:var(--groen-700);opacity:.6}
.cc .cc-vt{font-size:11px}
.cc .cc-vt b{margin-right:3px}
.cc .cc-vt + .cc-vt{margin-left:10px}
.cc .cc-ring circle.b{stroke:var(--grijs-300);stroke-width:4.7}
.cc .cc-ring circle.v{stroke-width:4.7}
.cc .cc-ring b{font-size:9.4px}
.cc .cc-mini{display:flex;align-items:flex-end;gap:3px;width:90px;height:36px;box-sizing:border-box;padding:0 3px;border:1px solid var(--rand);border-radius:var(--r2);background:var(--grijs-100)}
.cc .cc-mini i{display:block;width:8px;border-radius:2px;background:var(--blauw-300)}
.cc .cc-mini i.a{background:var(--blauw-900)}
.cc .cc-spark.dik .l{stroke-width:3.5}
.cc .cc-kop .titel{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc .cc-hrij{font-size:13px}
.cc .cc-pager .cc-link{color:var(--grijs);font-size:12.5px}