/* Huisstijl-laag voor het klantbord van Herena (omgeving herena, Marc Heemskerk,
   https://herena-afvalbakken.nl/ - herena.nl stuurt daarheen door). Aangemaakt 25 okt 2026 op
   kaart #28266 (Paul: "Doe even de huisstijl van https://herena-afvalbakken.nl gebruiken"),
   zodat de pilotomgeving vanaf de eerste login in hun opmaak staat en niet in de onze.

   Geen merkgids aangeleverd, dus alles hieronder is GEMETEN op hun eigen site (Avada-thema,
   wp-content/uploads/fusion-styles/da447843....min.css) en in hun logo
   (uploads/2022/01/Herena-Afvalbakken-Recycle-Bin-Logo-100.png, zes gekleurde blokjes + zwart woord):
   - #2B5E83  blauw - Avada --primary_color en het blauwe logoblokje. Hier de hoofdkleur
     (knoppen, links, tegelkoppen): 6,9:1 op wit.
   - #EF7B47  oranje - hun --link_color en de kleur van hun h1/h2 (--awb-color1), plus het oranje
     logoblokje. Haalt op wit maar 2,8:1, dus NOOIT als tekst of knopvlak: alleen als rand/streep.
   - #212934  donker - --awb-color8 / --footer_bg_color. Hier koppen en tekst (15,4:1).
   - #58585A  grijs - --copyright_bg_color; hier het bijschrift (7,1:1 op wit, 6,1:1 op het
     lichtste blauwvlak).
   - De zes logokleuren #2B5E83 #EF7B47 #F6DF8C #64704E #5FC6F0 #B7BAB7 (--awb-color1..5 +
     primary) als streep onder de merkbalk, net als de blokjes in hun logo.
   - Lettertype Quicksand (hun body/h1-h6/nav/button-typografie), lokaal in assets/herena/fonts
     (SIL OFL, latin + latin-ext), zodat er geen verzoek naar Google Fonts uitgaat.
   Afgeleid (niet letterlijk op hun site, wel uit hun palet gerekend):
   - #234C6A  hover: hun #2B5E83 een tint dieper (9,1:1).
   - #F7F9FA / #EAEFF3 / #D9E2E9 / #CAD7E0 / #B5C7D4  hun #2B5E83 op 4/10/18/25/35% dekking over
     wit (vlak, lichte vlakken, randen). Hun site zelf is wit met #e2e2e2-randen.

   Opbouw overgenomen van assets/marsell/marsell.css (dat weer van patricai.css/bizzonderadvies.css
   komt en ook .ko-* van klant_onboarding.php dekt). Hangt volledig aan body.klantskin + de
   variabelen uit klant_skin_head(), dus dit raakt geen ander klantbord. Donkere modus komt
   generiek uit assets/klantdonker.css. */

@font-face{font-family:'Quicksand';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/quicksand-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/quicksand-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

body.klantskin{
  background:var(--kl-vlak,#F7F9FA);
  color:var(--kl-donker,#212934);
  font-family:var(--kl-txt,'Quicksand'),'Quicksand',Arial,Helvetica,sans-serif;
  font-size:15px;line-height:1.6;
}
body.klantskin .wrap{max-width:1000px;padding-top:26px}

/* Merkbalk: wit zoals hun header, hun logo links (zwarte letters, dus geen donkere balk nodig).
   Eronder de zes logokleuren als streep (zie de ::after hieronder); de border-bottom is de
   terugval voor als die streep niet tekent. */
body.klantskin .klantbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:#fff;padding:14px 26px;border-bottom:3px solid var(--kl,#2B5E83);
  position:sticky;top:0;z-index:50;
}
body.klantskin .klantbar::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;pointer-events:none;
  background:linear-gradient(90deg,#2B5E83 0 16.66%,#EF7B47 16.66% 33.33%,#F6DF8C 33.33% 50%,
    #64704E 50% 66.66%,#5FC6F0 66.66% 83.33%,#B7BAB7 83.33% 100%);
}
body.klantskin .klantbar .kb-logo{display:flex;align-items:center;text-decoration:none}
body.klantskin .kb-wordmark{font-weight:700;font-size:1.15rem;color:var(--kl,#2B5E83)}
body.klantskin .kb-who{font-size:.82rem;color:#58585A;display:flex;align-items:center;gap:12px}
body.klantskin .kb-who a{color:var(--kl,#2B5E83);text-decoration:none}
body.klantskin .kb-who a:hover{color:#234C6A;text-decoration:underline}
body.klantskin .kb-who .bellen{order:-1}
body.klantskin .kb-who .kb-wie{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;
  font-weight:600;color:#58585A;margin-right:-6px}
body.klantskin .kb-who .who-menu summary.who-name{font-size:.88rem;font-weight:600;
  color:var(--kl-donker,#212934);border-bottom-color:rgba(33,41,52,.35)}
body.klantskin .kb-who .who-menu summary.who-name:hover{color:var(--kl,#2B5E83);
  border-bottom-color:var(--kl-accent,#EF7B47)}
body.klantskin .kb-who .who-caret{color:var(--kl,#2B5E83);opacity:1}
/* Uitklappers hangen in de DOM onder .klantbar maar zijn witte kaarten (les van het
   Armada-bord): kleuren hier apart zetten, anders erven ze de balkkleur. */
body.klantskin .klantbar .bel-pop,
body.klantskin .klantbar .ob-pop,
body.klantskin .klantbar .who-pop{color:var(--kl-donker,#212934)}
body.klantskin .klantbar .bel-pop a,
body.klantskin .klantbar .ob-pop a,
body.klantskin .klantbar .who-pop a{color:var(--kl-donker,#212934)}
body.klantskin .klantbar .bel-pop a.bel-alles,
body.klantskin .klantbar .bel-pop a:hover,
body.klantskin .klantbar .ob-pop a:hover,
body.klantskin .klantbar .who-pop a:hover{color:#234C6A}

/* Koppen */
body.klantskin h1,body.klantskin h2,body.klantskin h3,body.klantskin .pagetitle{
  color:var(--kl-donker,#212934);
}
body.klantskin .pagetitle{font-size:1.9rem;font-weight:700;line-height:1.2}
body.klantskin .back{color:var(--kl,#2B5E83);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.06em;font-weight:600}

body.klantskin .kb-demo{
  display:inline-block;background:var(--kl,#2B5E83);color:#fff;border-radius:999px;
  padding:3px 11px;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  vertical-align:middle;
}
body.klantskin .kb-hero{font-size:1.12rem;font-weight:600;color:var(--kl-donker,#212934);
  max-width:60ch;margin:10px 0 6px;line-height:1.4}
body.klantskin .az-lead,body.klantskin .az-note{color:var(--kl-donker,#212934)}
body.klantskin .az-note{color:#58585A}
body.klantskin .kb-demonote{
  max-width:74ch;font-size:.86rem;color:#58585A;background:#fff;border:1px solid var(--kl-rand,#D9E2E9);
  border-left:4px solid var(--kl-accent,#EF7B47);border-radius:0 10px 10px 0;padding:11px 14px;margin:14px 0 4px;
}

/* Tegels. Geen eigen padding op .az-tile zelf (#13919: die zit op .az-tile>a). */
body.klantskin .az-tile{
  border:1px solid var(--kl-rand,#D9E2E9);border-radius:12px;background:#fff;
  transition:border-color .15s ease,transform .15s ease;
}
body.klantskin .az-tile:hover{border-color:var(--kl,#2B5E83);transform:translateY(-1px)}
body.klantskin .az-tile h3{font-size:1.05rem;font-weight:600;color:var(--kl,#2B5E83);margin:0 0 5px}
body.klantskin .az-tile p{color:#58585A;font-size:.88rem}
body.klantskin .az-tile p.live{color:var(--kl-donker,#212934);border-top-color:#D9E2E9}
body.klantskin .az-tools button:hover,body.klantskin .az-tools button:focus-visible{
  color:var(--kl,#2B5E83);background:#EAEFF3}
body.klantskin .az-foldall:hover,body.klantskin .az-foldall:focus-visible{
  border-color:var(--kl,#2B5E83);color:var(--kl,#2B5E83)}
body.klantskin .az-box{border:1px solid var(--kl-rand,#D9E2E9);border-radius:12px;padding:18px 20px;max-width:78ch}
body.klantskin .az-box h3{font-size:1.05rem;font-weight:600}
body.klantskin .az-box p{color:var(--kl-donker,#212934);font-size:.95rem}

/* KPI-tegeltjes, mochten die op dit bord ooit bijkomen. */
body.klantskin .kb-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:16px 0 22px}
body.klantskin .kb-kpi{background:#fff;border:1px solid var(--kl-rand,#D9E2E9);border-radius:12px;padding:14px 16px}
body.klantskin .kb-kpi b{display:block;font-size:1.75rem;font-weight:700;color:var(--kl,#2B5E83);line-height:1.15}
body.klantskin .kb-kpi span{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--kl-donker,#212934);margin-top:4px}
body.klantskin .kb-kpi i{display:block;font-style:normal;font-size:.76rem;color:#58585A;margin-top:6px;line-height:1.45}
body.klantskin .az-stat{border:1px solid var(--kl-rand,#D9E2E9);border-radius:12px}
body.klantskin .az-stat b{color:var(--kl,#2B5E83)}
body.klantskin .az-stat span{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:#58585A}

/* Balkjes en rolkaartjes: nog niet in gebruik op dit bord, wel klaar voor als dat komt. */
body.klantskin .kb-balken{margin:12px 0 4px;display:grid;gap:9px}
body.klantskin .kb-balk{display:grid;grid-template-columns:minmax(120px,1.1fr) 3fr auto;gap:12px;align-items:center}
body.klantskin .kb-balk-l{font-size:.84rem;color:var(--kl-donker,#212934)}
body.klantskin .kb-balk-spoor{background:#D9E2E9;border-radius:999px;height:8px;overflow:hidden}
body.klantskin .kb-balk-vul{display:block;height:100%;border-radius:999px;background:var(--kl,#2B5E83)}
body.klantskin .kb-balk-w{font-weight:600;font-size:.84rem;color:var(--kl,#2B5E83);white-space:nowrap}
body.klantskin .kb-rollen{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin:12px 0 4px}
body.klantskin .kb-rol{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--kl-rand,#D9E2E9);
  border-radius:10px;padding:11px 13px;background:#fff}
body.klantskin .kb-rol-i{flex:none;width:34px;height:34px;border-radius:50%;background:var(--kl,#2B5E83);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem}
body.klantskin .kb-rol-t b{display:block;font-size:.92rem;font-weight:600;color:var(--kl-donker,#212934)}
body.klantskin .kb-rol-t i{display:block;font-style:normal;font-size:.8rem;color:#58585A;line-height:1.45;margin-top:2px}

/* De to-do-panelen. */
body.klantskin .panel{border:1px solid var(--kl-rand,#D9E2E9);border-radius:12px;background:#fff}
body.klantskin .panel h2,body.klantskin .rem-head{color:var(--kl,#2B5E83);font-size:1rem;font-weight:600}
body.klantskin .rem-panel{border-left:4px solid var(--kl-accent,#EF7B47)}
body.klantskin .rem-add button:not(.qa-more):not(.qa-sched-chip){
  background:var(--kl,#2B5E83);color:#fff;border:none;border-radius:8px;font-weight:600;
}
body.klantskin .rem-add button:not(.qa-more):not(.qa-sched-chip):hover{background:#234C6A;color:#fff}
body.klantskin .rem-add .qa-sched-chip.on{background:var(--kl,#2B5E83);border-color:var(--kl,#2B5E83)}
body.klantskin .kb-filt{background:#EAEFF3;border-color:var(--kl-rand,#D9E2E9);border-radius:10px;color:#58585A}
body.klantskin .kb-filt-go{background:#D9E2E9;border-color:#CAD7E0;border-radius:7px;color:#212934}
body.klantskin .kb-filt-go:hover,body.klantskin .kb-filt-go:focus-visible{background:#CAD7E0;border-color:#B5C7D4;color:#212934}
body.klantskin .kb-filt-t{color:var(--kl-donker,#212934)}
body.klantskin .kb-live.act{color:var(--kl-donker,#212934)}
/* Links krijgen de merkkleur - MAAR een knop die als link is gebouwd niet (zelfde uitzondering
   als op het Prodin-/Armada-/Rijnbar-bord, om donker-op-donker te voorkomen). */
body.klantskin a:not([class*="-btn"]){color:var(--kl,#2B5E83)}
body.klantskin a:not([class*="-btn"]):hover{color:#234C6A}

@media (max-width:640px){
  body.klantskin .klantbar{padding:11px 16px}
  body.klantskin .pagetitle{font-size:1.5rem}
  body.klantskin .kb-balk{grid-template-columns:1fr auto;grid-template-areas:'l w' 's s';row-gap:5px}
  body.klantskin .kb-balk-l{grid-area:l}
  body.klantskin .kb-balk-w{grid-area:w}
  body.klantskin .kb-balk-spoor{grid-area:s}
}

/* Actiestrook (onboarding/kluis): witte kaart met oranje rand (hun knop- en linkkleur op de site) - daar moet de klant iets DOEN. */
body.klantskin .kb-kluislink{
  border:2px solid var(--kl-accent,#EF7B47);border-radius:12px;background:#fff;padding:16px 20px;
  transition:transform .15s ease,border-color .15s ease;
}
body.klantskin .kb-kluislink:hover{background:#fff;border-color:var(--kl,#2B5E83);transform:translateY(-1px)}
body.klantskin .kb-kluis-t b{font-weight:600;font-size:1.05rem;color:var(--kl,#2B5E83)}
body.klantskin .kb-kluis-t i{color:#58585A;font-size:.88rem}
body.klantskin .kb-kluis-btn{
  background:var(--kl,#2B5E83);border-radius:8px;font-size:.72rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.07em;padding:11px 18px;
}
body.klantskin .kb-fold-sum{color:var(--kl,#2B5E83)}
body.klantskin .kl-box,body.klantskin .kl-form{border-radius:12px;border-color:var(--kl-rand,#D9E2E9)}
body.klantskin .kl-form{border:2px solid var(--kl-accent,#EF7B47)}
body.klantskin .kl-box h3,body.klantskin .kl-form h3{font-weight:600;color:var(--kl,#2B5E83)}
body.klantskin .kl-box p,body.klantskin .kl-box li,body.klantskin .kl-form label{color:var(--kl-donker,#212934)}
body.klantskin .kl-note,body.klantskin .kl-form .hint{color:#58585A}
body.klantskin .kl-form input[type=text],body.klantskin .kl-form input[type=password]{
  border:1px solid var(--kl-rand,#D9E2E9);border-radius:10px;background:#F7F9FA;color:var(--kl-donker,#212934);
}
body.klantskin .kl-form input:focus{outline:2px solid var(--kl,#2B5E83);outline-offset:1px}
body.klantskin .kl-form button{
  background:var(--kl,#2B5E83);border-radius:8px;font-size:.75rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.07em;padding:12px 22px;
}
body.klantskin .kl-form button:hover{background:#234C6A;color:#fff}
body.klantskin .kl-tbl th{background:#EAEFF3;color:var(--kl,#2B5E83);border-color:var(--kl-rand,#D9E2E9);
  font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
body.klantskin .kl-tbl td{border-color:var(--kl-rand,#D9E2E9);color:var(--kl-donker,#212934)}

/* Bijschriften die in ONZE huisstijl stonden (#8a8072 beige-bruin, #9aa4b2 blauwgrijs). */
body.klantskin .az-tip,
body.klantskin .muted,
body.klantskin .refnum,
body.klantskin .hint,
body.klantskin .ko-qrwa-hint,
body.klantskin .bel-sub,
body.klantskin .bel-leeg{color:#58585A}

/* De ONBOARDINGPAGINA zelf (klant_onboarding.php) heeft haar kleuren in het bestand staan, en dat
   is de Arimpex-huisstijl: beige randen (#e4ddd2/#ded6c9), bruingrijze tekst (#3d372d/#8a8072),
   crème invulveld. Precies de pagina waar de klant de onboarding doorloopt. Hieronder vertaald naar
   hun palet; het gedeelde bestand zelf blijft ongewijzigd, want dat raakt elke andere klant. */
body.klantskin .ko-h{color:var(--kl-donker,#212934)}
body.klantskin .ko-lead,
body.klantskin .ko-q label,
body.klantskin .ko-check-t b,
body.klantskin .ko-topic-t b,
body.klantskin .ko-keuzelabel,
body.klantskin .ko-keuzeopt{color:var(--kl-donker,#212934)}
body.klantskin .ko-tbl th,
body.klantskin .ko-kluisnote,
body.klantskin .ko-check-t span,
body.klantskin .ko-topic-t span{color:#58585A}
body.klantskin .ko-sec,
body.klantskin .ko-checklist,
body.klantskin .ko-topic,
body.klantskin .ko-qrwa-svg{border-color:var(--kl-rand,#D9E2E9);border-radius:10px}
body.klantskin .ko-tbl th{border-bottom-color:var(--kl-rand,#D9E2E9)}
body.klantskin .ko-q input[type=text],
body.klantskin .ko-q input[type=password],
body.klantskin .ko-q select,
body.klantskin .ko-q textarea{border-color:var(--kl-rand,#D9E2E9);background:#F7F9FA;
  color:var(--kl-donker,#212934);border-radius:8px}
body.klantskin .ko-q input:focus,
body.klantskin .ko-q select:focus,
body.klantskin .ko-q textarea:focus{outline:2px solid var(--kl,#2B5E83);outline-offset:1px}
body.klantskin .ko-btn.sec{background:#EAEFF3;border-color:#CAD7E0;color:var(--kl-donker,#212934)}
body.klantskin .ko-nvt-btn{border-color:var(--kl-rand,#D9E2E9);color:#58585A}
body.klantskin .ko-topic-status.nvt{background:#EAEFF3;color:#58585A}

/* De enige !important in dit bestand, zelfde reden als op het Armada-bord: vier bijschriften in
   klant_onboarding.php dragen het beige-bruin als INLINE style (style="color:#8a8072"), en een
   inline kleur is alleen zo te overschrijven. */
body.klantskin [style*="#8a8072"]{color:#58585A !important}

/* Gemeten, niet gekeken (les van het Armada-bord): headless render van het MarSell-bord + de
   onboardingpagina, per tekstelement de berekende kleur op zijn echte ondergrond. Dat vond nog
   een handvol plekken waar ONZE huisstijl doorschemerde - het beige-bruin (#8a8072/#8a7a5a), het
   Insight-amber (#b07a1e) en het blauwgrijs (#9aa4b2) - deels onder de leesnorm op hun lichtblauwe
   vlak. Hieronder in hun palet gezet. Wat hier NIET staat zijn de algemene Insight-elementen die
   op elk klantbord hetzelfde zijn; die horen in een aparte ronde thuis, niet in een merkbestand. */
body.klantskin .empty,
body.klantskin .kb-live-t,
body.klantskin .kb-live b,
body.klantskin .kb-live span,
body.klantskin .az-grip,
body.klantskin .att-drop-sub{color:#58585A}
body.klantskin .rem-add button.qa-more{color:var(--kl,#2B5E83)}
body.klantskin .rem-add button.qa-more:hover,
body.klantskin .rem-add button.qa-more[aria-expanded=true]{background:#EAEFF3;border-color:#CAD7E0;color:var(--kl,#2B5E83)}
body.klantskin .rem-add .qa-drop{background:#F7F9FA;border-color:#B5C7D4;color:#58585A}
body.klantskin .rem-add .qa-sched{background:#F7F9FA;border-color:#CAD7E0}
body.klantskin .rem-add .qa-sched-lbl{color:#58585A}
/* Het belletje-telletje stond wit op licht oranje (2,9:1). Hun blauw met wit erop is 6,9:1. */
body.klantskin .ob-bel .ob-badge{background:var(--kl,#2B5E83);color:#fff}
/* "Nog niet ingevuld" blijft bewust amber (naast het groen van 'af'), alleen donkerder gezet. */
body.klantskin .ko-topic-status.open{color:#8A5A0F}
/* Nameting 29-09 op het PatricAI-bord (headless, klantbord + onboarding): drie grijze bijschriften uit de algemene
   Insight-opmaak zaten op wit onder de leesnorm (1,9-2,9:1). Hier in hun bijschriftgrijs. */
body.klantskin .bel-r-ts,
body.klantskin .hs-go,
body.klantskin .tkm-leeg{color:#58585A}

/* Nameting 14-10 (#22243, headless als gast, licht + donker, klantbord + onboarding).
   Licht: twee nieuwere stukken van het klantbord stonden nog in ONZE beige-bruine opmaak en zaten
   onder de leesnorm: "Welkomsttekst aanpassen" (#21796, #8a8072 = 3,7:1 op hun vlak) en het
   potloodje achter een tegelnaam (#b8b0a4 = 2,2:1). Hier in hun bijschriftgrijs. */
body.klantskin .kb-welkom summary,
body.klantskin .kb-welkom-k{color:#58585A}
body.klantskin .kb-welkom summary:hover,
body.klantskin .kb-welkom summary:focus-visible{color:var(--kl,#2B5E83)}
body.klantskin .kb-welkom form{background:#F7F9FA;border-color:var(--kl-rand,#D9E2E9)}
body.klantskin .kb-welkom label{color:var(--kl-donker,#212934)}
body.klantskin .az-tegel-naam-wijz{color:#58585A}

/* Donker: klantdonker.css kent de .ko-* van klant_onboarding.php niet, en de regels hierboven zetten
   koppen en labels in hun bijna-zwart (#212934). In de donkere stand gaf dat witte kaarten met
   lichte tekst (1,2:1) en onzichtbare sectiekoppen. Hier op de donkere variabelen gezet. */
html.kb-donker body.klantskin .ko-h,
html.kb-donker body.klantskin .ko-lead,
html.kb-donker body.klantskin .ko-q label,
html.kb-donker body.klantskin .ko-check-t b,
html.kb-donker body.klantskin .ko-topic-t b,
html.kb-donker body.klantskin .ko-keuzelabel,
html.kb-donker body.klantskin .ko-keuzeopt,
html.kb-donker body.klantskin .kb-welkom label{color:var(--kd-txt,#ECEEF5)}
html.kb-donker body.klantskin .ko-tbl th,
html.kb-donker body.klantskin .ko-kluisnote,
html.kb-donker body.klantskin .ko-check-t span,
html.kb-donker body.klantskin .ko-topic-t span,
html.kb-donker body.klantskin .ko-qrwa-hint,
html.kb-donker body.klantskin .kb-welkom summary,
html.kb-donker body.klantskin .kb-welkom-k,
html.kb-donker body.klantskin .az-tegel-naam-wijz,
html.kb-donker body.klantskin .att-hint,
html.kb-donker body.klantskin .az-tip{color:var(--kd-zacht,#A6ADC2)}
html.kb-donker body.klantskin .ko-sec,
html.kb-donker body.klantskin .ko-checklist,
html.kb-donker body.klantskin .ko-topic,
html.kb-donker body.klantskin .kb-welkom form{background:var(--kd-kaart,#21253E);border-color:var(--kd-rand,#3A4059)}
html.kb-donker body.klantskin [style*="#8a8072"]{color:var(--kd-zacht,#A6ADC2) !important}
/* Ronde 2 van dezelfde nameting. Licht: het bruingrijs #6b6257 (doelregels, groepsuitleg, de
   knop "Wij gebruiken dit niet") haalt wel de norm, maar is ONZE kleur; hier hun grijs. */
body.klantskin .ko-doel,
body.klantskin .ko-groep p,
body.klantskin .ko-nvt-btn{color:#58585A}
body.klantskin .ko-uitleg{color:#58585A;background:#F7F9FA}
/* Donker: bijschriften in #666/#6b6257 en het rode sterretje (#a4432c) haalden op hun bijna-zwart
   maar 3,2-3,5:1, de groene "alles af"-rij bleef licht met lichte tekst (1,1:1). */
html.kb-donker body.klantskin .ko-q .hint,
html.kb-donker body.klantskin .hint,
html.kb-donker body.klantskin .ko-doel,
html.kb-donker body.klantskin .ko-groep p,
html.kb-donker body.klantskin .ko-nvt-btn,
html.kb-donker body.klantskin .kb-live-t,
html.kb-donker body.klantskin .kb-live b,
html.kb-donker body.klantskin .kb-live span,
html.kb-donker body.klantskin .empty,
html.kb-donker body.klantskin .att-drop-sub{color:var(--kd-zacht,#A6ADC2)}
html.kb-donker body.klantskin .ko-uitleg{color:var(--kd-zacht,#A6ADC2);background:var(--kd-kaart2,#2C3149)}
html.kb-donker body.klantskin .ko-req{color:#F2998A}
html.kb-donker body.klantskin .ko-check-all{background:#16351F}
/* Hun logo heeft zwarte letters (#030304) op een transparante grond en verdwijnt op de donkere
   balk. In de donkere stand krijgt het een wit plaatje onder zich, zodat het logo in zijn eigen
   kleuren blijft. */
html.kb-donker body.klantskin .klantbar .kb-logo img{background:#fff;border-radius:6px;padding:3px 8px;box-sizing:content-box}

/* Nameting 25-10 (#28266, headless als marc, licht + donker, klantbord + onboarding). Nieuwere
   stukken van het klantbord stonden nog in de algemene Insight-grijzen en zaten op wit onder de
   leesnorm: de bijschriften van de beheerderpanelen (wachtrij, grenzen, ritme, terugkerende taken,
   dagboek: #7a8699 = 3,7:1, de lege-meldingen #9aa3b2 = 2,5:1) en het verberg-knopje op een tegel
   (#b8b0a4 = 2,2:1). Die panelen blijven ook in de donkere stand wit, dus één kleur voor beide. */
body.klantskin .kwr-sub,
body.klantskin .kgr-sub,
body.klantskin .kgr-leeg,
body.klantskin .krt-sub,
body.klantskin .ktk-sub,
body.klantskin .ktk-g,
body.klantskin .kdb-sub{color:#58585A}
body.klantskin .az-tegel-verberg{color:#58585A}
body.klantskin .az-tegel-verberg:hover,
body.klantskin .az-tegel-verberg:focus-visible{color:var(--kl,#2B5E83)}