/* ===== Inter, zelf gehost =====
   Mart heeft op 18-08-2026 gekozen voor EEN lettertype voor alles: de website,
   dit portaal en de documenten die de klant krijgt. Aanleiding was dat er drie
   door elkaar liepen - Inter op de site, Hanken Grotesk plus de systeemletter
   hier, en TeX Gyre Heros in de voorwaarden-PDF.

   Twee bestanden, geen acht. Inter is een variabel lettertype: hetzelfde
   bestand bevat alle gewichten van 100 tot 900. De eerste opzet had vier
   gewichten maal twee subsets, maar die acht bestanden waren byte voor byte
   vier keer hetzelfde - de browser haalde dus drie keer hetzelfde op. Nu een
   @font-face per subset met font-weight: 100 900, en de unicode-range bepaalt
   welke van de twee nodig is: latin voor gewone Nederlandse tekst, latin-ext
   alleen als er tekens in staan die daarbuiten vallen.

   font-display: swap, dus tekst wacht nooit op de letter. Licentie: SIL OFL. */
@font-face { font-family: 'Inter'; src: url('lettertypen/inter-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; 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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; src: url('lettertypen/inter-latin-ext.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; 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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Klimaatregie intern portaal, gedeelde stijl */

:root {
  /* De neutralen komen van Klimaatlog: een koele grijstrap met bijna-zwarte
     inkt in plaats van de warme beige lijnen die hier stonden. Dat is wat het
     rustig laat ogen; de warme tinten gaven een licht vergeeld beeld.
     Bewust NIET overgenomen: het lettertype (Inter is een eigen keuze
     van Mart) en de accentkleur (die volgt klimaatregie.nl, niet Klimaatlog). */
  /* De merkkleur van het portaal is het klimaatblauw van de website (#135FAD),
     zodat site en portaal er hetzelfde uitzien. De namen blijven "groen": ze
     staan in ruim vijfhonderd plekken door de bestanden heen en hernoemen levert
     meer kans op een gemiste plek dan het waard is. Lees ze als "accent".
     Meegenomen winst: de oude groene knop had witte letters op #27D366, en dat
     is 2,0:1 terwijl de norm 4,5 vraagt. Op dit blauw is dat 6,4:1. */
  /* Sinds 810 monochroom op verzoek van Mart (Starlink-stijl): het accent is
     inkt geworden en het klimaatblauw is uit het portaal. Links, actieve
     menu-items, pillen en knoppen zijn zwart-wit; kleur is er alleen nog voor
     status (--kr-ok groen, --kr-let amber, --kr-fout rood). De variabelen
     heten nog "groen" om vijfhonderd plekken niet te hoeven hernoemen. */
  --kr-groen: #1d1d1f;
  /* Tekst op het accent: het accent is nu inkt, dus overdag wit en 's nachts
     donker. Wie color:#fff hardcodeert maakt hem 's nachts onleesbaar. */
  --kr-op-groen: #ffffff;
  --kr-groen-donker: #000000;
  --kr-zachtgroen: #ebebee;
  /* Groen betekent hier alleen nog "in orde": geldige kalibratie, afgerond punt,
     gereed. Dat is bewust GEEN merkkleur meer. Een goedkeuring in de merkkleur
     is niet te onderscheiden van een gewone knop, en juist op het BRL-dashboard
     wil je in een oogopslag zien wat af is. */
  --kr-ok: #1e9e4a;
  --kr-ok-donker: #117a35;
  --kr-ok-zacht: #e6f6ec;
  /* Rood = mislukt, verwijderen, aandacht nodig. Amber = let op, nog niet af.
     Beide met een zachte vlakvariant erbij, zodat een hover of een gemarkeerde
     rij niet met een losse hex hoeft. Nagerekend op wit: rood 5,86:1, amber
     4,89:1; op hun eigen zachte vlak 5,27 en 4,53. */
  --kr-fout: #b33a3a;
  --kr-fout-donker: #8f2d2d;
  --kr-fout-zacht: #fdf0f0;
  --kr-let: #8a6d24;
  --kr-let-donker: #6d551b;
  --kr-let-zacht: #fbf6e9;
  --kr-inkt: #1d1d1f;
  --kr-grijs: #6a6a70;
  --kr-lijn: #d9d9de;
  --kr-soft: #f6f4f1;
  --kr-radius: 12px; /* strakker sinds 809: was 16 */
  --kr-radius-mid: 10px;   /* velden, knoppen, tabelcellen */
  --kr-radius-klein: 6px;   /* knopjes, pillen in tabellen */
  --kr-radius-groot: 10px;  /* kaarten en panelen; strakker sinds 809, was 14 */
  --kr-radius-rond: 999px;  /* volledig ronde elementen */
  --kr-bg: #f2f1ee;
  --kr-kaart: #ffffff;
  --kr-kop-bg: #f6f4ef;
  --kr-veld-bg: #ffffff;
  --kr-zij-breedte: 252px;
  /* Namen die in losse pagina's zijn ontstaan en hier nooit zijn vastgelegd.
     Een niet-bestaande variabele valt terug op wat er achter de komma staat, en
     dat was overal een lichte kleur: 's nachts leverde dat witte vlakken en
     lichte lijnen op een donkere pagina op. Ze wijzen nu naar de bestaande
     kleuren, zodat ze in beide standen meebewegen. Nieuwe stijl gebruikt de
     namen hierboven; deze staan er voor wat er al is. */
  --kr-lijn-zacht: #eceae6;
  --kr-vlak: var(--kr-soft);
  --kr-licht: var(--kr-soft);
  --kr-achtergrond: var(--kr-bg);
  --kr-donker: var(--kr-inkt);
  --kr-groen-zacht: var(--kr-zachtgroen);
  /* Eén letter voor het hele portaal. Er stonden twee stacks door elkaar: de
     systeemstack (-apple-system, Segoe UI, Roboto — op elke machine een andere
     letter, en op de Mac precies de SF Pro waar tegenwoordig alles in staat) en
     'Inter' op knoppen en velden, een letter die nergens werd geladen
     en dus stil terugviel op Arial. Nu overal dezelfde stack, conform de eigen
     ontwerpwet: Helvetica/Arial, geen webfonts. Wil Mart ooit een eigen letter,
     dan is dat deze ene regel plus een @font-face. */
  /* Op 17-08-2026 op verzoek van Mart teruggezet naar de systeemletter, met
     mijn.viamart.nl als voorbeeld: die gebruikt dezelfde stack, net als
     klimaatlog.nl. Hij noemde die twee twee keer "mooier", en dat klopt op zijn
     scherm ook: op een Mac is dit SF Pro, en die is verzorgder afgewerkt dan
     Inter.
     De keerzijde, die hier eerder de doorslag gaf (508): op Windows wordt het
     Segoe UI en op Android Roboto, dus het portaal ziet er niet overal
     hetzelfde uit. Voor een werkscherm dat Mart zelf en zijn monteurs gebruiken
     weegt dat lichter dan hoe het er bij hem uitziet.
     Sinds 18-08-2026 staat hier Inter, zelf gehost. Terug naar de systeemletter
     is deze ene regel. */
  --kr-letter: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body.kr-portaal-body {
  font-family: var(--kr-letter);
  background: var(--kr-bg);
  color: var(--kr-inkt);
  /* Van 15 naar 16px. Klimaatlog, dat Mart als voorbeeld noemt, zet zijn tekst op
     17px; het verschil dat je daar ziet zit niet in een mooiere letter maar in
     maatvoering. 16 is de stap die hier past: groot genoeg om rustig te lezen,
     zonder dat de vele met de hand gezette px-maten in de pagina's gaan knellen. */
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
  /* Letters die de browser mag optimaliseren: dit zet ligaturen en kerning aan,
     wat bij Inter op koppen scheelt. */
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

/* Cijfers die onder elkaar staan horen even breed te zijn, anders springt een
   kolom bij elke 1 een stukje op. Geldt voor alles waar getallen worden
   vergeleken: tellers, tabellen, balansen, bedragen. */
body.kr-portaal-body table,
body.kr-portaal-body .kr-dc-waarde,
body.kr-portaal-body .kr-trend-getal,
body.kr-portaal-body .kp-start-cijfer,
body.kr-portaal-body .kr-st-hopdetail,
body.kr-portaal-body .kr-dash-log-tijd {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Kopbalk */
.kr-portaal-kop {
  background: var(--kr-kaart);
  border-bottom: 3px solid var(--kr-groen);
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.kr-portaal-kop-links {
  display: flex;
  align-items: center;
  gap: 16px;
}

.kr-portaal-kop-links img {
  height: 34px;
  width: auto;
  display: block;
}

.kr-portaal-nav {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.kr-portaal-nav a {
  font-size: 14px;
  font-weight: 600;
  color: var(--kr-inkt);
  text-decoration: none;
  padding: 7px 14px;
  border-radius: var(--kr-radius-klein);
}

.kr-portaal-nav a:hover { background: var(--kr-zachtgroen); }
.kr-portaal-nav a.kr-nav-actief { background: var(--kr-zachtgroen); color: var(--kr-groen-donker); }

/* Inhoud */
.kr-portaal-inhoud {
  max-width: 1000px;
  margin: 28px auto;
  padding: 0 20px;
}

.kr-portaal-paginatitel {
  font-family: inherit; font-weight: 800; letter-spacing: -0.5px;
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 4px;
}

.kr-portaal-paginasub {
  color: var(--kr-grijs);
  margin-bottom: 24px;
  font-size: 14px;
}

/* Tegels op dashboard */
.kr-tegelrooster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.kr-tegel {
  background: var(--kr-kaart);
  border: 1px solid var(--kr-lijn);
  border-radius: var(--kr-radius-mid);
  padding: 22px 20px;
  text-decoration: none;
  color: var(--kr-inkt);
  display: block;
  transition: border-color var(--kr-snel), box-shadow var(--kr-snel);
}

.kr-tegel:hover {
  border-color: var(--kr-groen);
  box-shadow: var(--kr-schaduw-accent);
}

.kr-tegel-titel {
  font-family: inherit; font-weight: 800; letter-spacing: -0.5px;
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 6px;
}

.kr-tegel-tekst {
  font-size: 14px;
  color: var(--kr-grijs);
}

.kr-tegel-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--kr-groen-donker);
  background: var(--kr-zachtgroen);
  padding: 3px 8px;
  border-radius: var(--kr-radius-klein);
  margin-bottom: 10px;
}

/* Tabellen (bonnenarchief) */
.kr-tabel {
  width: 100%;
  border-collapse: collapse;
  background: var(--kr-kaart);
  border: 1px solid var(--kr-lijn);
  border-radius: var(--kr-radius-mid);
  overflow: hidden;
}

.kr-tabel th {
  text-align: left;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--kr-grijs);
  background: transparent;
  border-bottom: 1px solid var(--kr-lijn);
  padding: 11px 14px;
  border-bottom: 1.5px solid var(--kr-lijn);
}

.kr-tabel td {
  padding: 11px 14px;
  border-bottom: 1px solid #e8eee9;
  font-size: 14px;
}

.kr-tabel tr:last-child td { border-bottom: none; }
.kr-tabel tr:hover td { background: #fafcfa; }

.kr-tabel a { color: var(--kr-groen-donker); font-weight: 600; text-decoration: none; }
.kr-tabel a:hover { text-decoration: underline; }

.kr-tabel .kr-verwijder { color: #b33a3a; font-weight: 500; font-size: 13px; }

/* Knoppen */
.kr-knop {
  display: inline-block;
  font-family: var(--kr-letter);
  font-size: 15px;
  font-weight: 700;
  color: var(--kr-op-groen, #fff);
  background: var(--kr-groen);
  border: none;
  padding: 11px 26px;
  border-radius: var(--kr-radius-klein);
  cursor: pointer;
  text-decoration: none;
}

.kr-knop:hover { background: var(--kr-groen-donker); }

.kr-knop-licht {
  display: inline-block;
  font-family: var(--kr-letter);
  font-size: 15px;
  font-weight: 600;
  color: var(--kr-inkt);
  background: var(--kr-kaart);
  border: 1px solid var(--kr-lijn);
  padding: 11px 22px;
  border-radius: var(--kr-radius-klein);
  cursor: pointer;
  text-decoration: none;
}

.kr-knop-licht:hover { border-color: var(--kr-grijs); }

/* Rustige icoon-actieknoppen, gedeeld over de pagina's */
.kr-actiebalk { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 22px; }
.kr-actie {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: var(--kr-radius-rond);
  font-family: var(--kr-letter);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border: 1.5px solid var(--kr-lijn);
  background: var(--kr-kaart, #fff);
  color: var(--kr-inkt);
  white-space: nowrap;
  line-height: 1;
  cursor: pointer;
  transition: background var(--kr-snel) var(--kr-ease), border-color var(--kr-snel) var(--kr-ease);
}
.kr-actie:hover { background: var(--kr-soft); border-color: var(--kr-grijs); text-decoration: none; }
.kr-actie svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--kr-grijs); }
/* Tekst op het accent komt uit --kr-op-groen: wit overdag, bijna zwart 's nachts.
   Stond hier hardgecodeerd op #0a0a0a, en dat is meegegaan toen het accent van
   groen naar blauw ging: zwart op #135FAD haalt 3,2:1 en zakt daarmee onder de
   4,5:1 van WCAG AA. Wit haalt 6,5:1. Zet hier nooit weer een vaste kleur neer,
   want die klopt maar in één van de twee standen. */
/* Sinds 809 monochroom: de doe-knop is inkt op achtergrondkleur (Ordly-stijl),
   het accent blijft voor links en wayfinding. Omklappende variabelen! */
.kr-actie-primair { background: var(--kr-inkt); border-color: var(--kr-inkt); color: var(--kr-bg); box-shadow: none; }
.kr-actie-primair:hover { background: var(--kr-inkt); border-color: var(--kr-inkt); color: var(--kr-bg); filter: brightness(0.88); }
.kr-actie-primair svg { color: var(--kr-bg); }

/* Meldingen */
/* "Gelukt" is status, geen merkkleur (946). Dit blok stond nog op de
   accent-tokens van vóór de monochrome wissel van 810: die heten nog "groen"
   maar zijn nu inkt en grijs, dus een geslaagde actie werd een vaag grijs
   kaartje dat niet van een gewoon vlak te onderscheiden was - precies waar de
   toelichting bij --kr-ok hierboven voor waarschuwt. De rand stond bovendien
   op een losse pastelgroene hex die in nachtmodus nergens op sloeg; --kr-ok-*
   heeft zijn eigen goede waarden voor licht en donker, dus een aparte
   donkere variant is niet meer nodig. */
.kr-melding {
  background: var(--kr-ok-zacht);
  border: 1px solid var(--kr-ok);
  color: var(--kr-ok-donker);
  padding: 10px 14px;
  border-radius: var(--kr-radius-klein);
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 600;
}

.kr-melding-fout {
  background: #fdf0f0;
  border: 1px solid #ecc8c8;
  color: #b33a3a;
}

/* Loginpagina */
.kr-login-vlak {
  max-width: 380px;
  margin: 80px auto;
  background: var(--kr-kaart);
  border: 1px solid var(--kr-lijn);
  border-radius: var(--kr-radius-mid);
  padding: 36px 32px;
  text-align: center;
}

.kr-login-vlak img {
  height: 40px;
  margin-bottom: 18px;
}

.kr-login-vlak h1 {
  font-family: inherit; font-weight: 800; letter-spacing: -0.5px;
  font-size: 20px;
  margin-bottom: 20px;
}

.kr-login-vlak input[type="password"] {
  width: 100%;
  font-family: var(--kr-letter);
  font-size: 15px;
  padding: 11px 12px;
  border: 1px solid var(--kr-lijn);
  border-radius: var(--kr-radius-klein);
  margin-bottom: 14px;
}

.kr-login-vlak input[type="password"]:focus {
  outline: none;
  border-color: var(--kr-groen);
}

.kr-leeg-staat {
  background: var(--kr-kaart);
  border: 1.5px dashed var(--kr-lijn);
  border-radius: var(--kr-radius-mid);
  padding: 36px 20px;
  text-align: center;
  color: var(--kr-grijs);
  font-size: 14px;
}

/* Uitbreidingen beheer en BRL */
.kr-w-blok { border-radius: var(--kr-radius-mid); padding: 12px 16px; margin-bottom: 16px; font-size: 14px; border: 1.5px solid; }
/* Twee klassen in de selector, en dat is geen opsmuk (946): verderop staat
   ".kr-w-blok, .kr-dossier-vlak, .kr-vlak, .kr-leeg-staat" met een neutrale
   achtergrond. Die regel staat LATER en was even specifiek, dus hij won: in
   lichte modus kregen rood, geel en groen allemaal het grijze vlak en bleef
   alleen de tekstkleur over - een waarschuwing zag er precies zo uit als een
   gewoon informatieblok. 's Nachts viel het niet op, want de nachtregels
   hieronder zijn wel specifiek genoeg en wonnen daar wel. Alle 28 plekken in
   het portaal zetten deze klassen samen met kr-w-blok, dus dit dekt ze. */
.kr-w-blok.kr-w-rood { background: #fdf0ef; border-color: #e5b8b4; color: #8f2f27; }
.kr-w-blok.kr-w-geel { background: #fdf6e7; border-color: #e8d3a0; color: #7a5d1a; }
.kr-w-blok.kr-w-groen { background: var(--kr-ok-zacht); border-color: var(--kr-ok); color: var(--kr-ok-donker); }
.kr-form-vlak { background: #fff; border: 1px solid var(--kr-lijn); border-radius: var(--kr-radius-mid); padding: 18px 20px; margin-bottom: 22px; }
.kr-form-rooster { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 18px; margin-bottom: 16px; }
.kr-dagdeel-melding { border-radius: var(--kr-radius-mid); padding: 10px 14px; font-size: 13px; font-weight: 700; line-height: 1.5; }
.kr-dagdeel-melding-bezet { background: #fbe9e7; color: #b23c2e; }
.kr-form-veld label { display: block; font-size: 13px; letter-spacing: 0; color: var(--kr-inkt); font-weight: 600; margin-bottom: 5px; }
.kr-form-veld input, .kr-form-veld select, .kr-form-veld textarea { width: 100%; font-family: var(--kr-letter); font-size: 15px; padding: 11px 13px; border: 1.5px solid var(--kr-lijn); border-radius: var(--kr-radius-mid); background: #fff; box-shadow: var(--kr-schaduw-rust); transition: border-color var(--kr-snel), box-shadow var(--kr-snel); box-sizing: border-box; }
.kr-form-veld input:focus, .kr-form-veld select:focus, .kr-form-veld textarea:focus { outline: none; border-color: var(--kr-groen); box-shadow: var(--kr-focusring); }
.kr-vorm-sectiekop { background: #eef9f1; border-left: 3.5px solid var(--kr-groen); color: var(--kr-groen-donker); font-weight: 800; font-size: 14px; padding: 8px 14px; border-radius: var(--kr-radius-klein); margin: 18px 0 12px; grid-column: 1 / -1; }
.kr-zoekbalk { display: flex; gap: 8px; margin-bottom: 20px; }
.kr-zoekbalk input { flex: 1; font-family: var(--kr-letter); font-size: 15px; padding: 11px 14px; border: 1px solid var(--kr-lijn); border-radius: var(--kr-radius-mid); }
.kr-zoekbalk input:focus { outline: none; border-color: var(--kr-groen); }
.kr-status-pil { display: inline-block; padding: 2px 10px; border-radius: var(--kr-radius-rond); font-size: 13px; font-weight: 700; }
.kr-pil-groen { background: var(--kr-ok-zacht); color: var(--kr-ok-donker); }
.kr-pil-geel { background: #fdf6e7; color: var(--kr-let, #8a6d24); }
.kr-pil-rood { background: #fdf0ef; color: #b33a3a; }
.kr-pil-grijs { background: #eef2ef; color: var(--kr-grijs); }
/* Was #c2691c: 3,46:1 op het eigen zachte vlak en 3,94:1 op wit, allebei onder
   de 4,5 die de andere statuskleuren hierboven wel halen - als enige nooit
   nagerekend (946). Deze tint haalt 4,66:1 op het vlak en 5,30:1 op wit. */
.kr-pil-oranje { background: #fdeede; color: #a65616; }

/* Designopfrissing: rustiger en overzichtelijker */
.kr-zoekbalk { position: relative; margin-bottom: 24px; }
.kr-zoekbalk input {
  padding: 13px 18px 13px 44px;
  border-radius: var(--kr-radius-rond);
  border: 1px solid var(--kr-lijn);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%236b7a70' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E") no-repeat 16px center;
  box-shadow: var(--kr-schaduw-rust);
}
.kr-zoekbalk input:focus { border-color: var(--kr-groen); box-shadow: var(--kr-focusring); }
.kr-zoekbalk .kr-knop { border-radius: var(--kr-radius-rond); padding-left: 22px; padding-right: 22px; }

.kr-tabel { box-shadow: var(--kr-schaduw-rust); border-radius: var(--kr-radius-mid); overflow: hidden; }
.kr-tabel thead th { background: transparent; }
.kr-tabel tbody tr:hover td { background: #fafdfb; }

.kr-dash-cijfer { box-shadow: var(--kr-schaduw-rust); transition: border-color var(--kr-snel) var(--kr-ease), transform var(--kr-snel) var(--kr-ease); }
.kr-dash-cijfer:hover { transform: translateY(-1px); }
.kr-tegel { box-shadow: var(--kr-schaduw-rust); }
.kr-form-vlak { box-shadow: var(--kr-schaduw-rust); }

.kr-dash-sectie, .kr-portaal-paginatitel { position: relative; }
/* Gelijk aan .kr-dash-sectie (46px erboven, 14 eronder). Stond op 28/12, en
   daardoor kreeg een kop in een strip minder lucht dan een kop zonder strip:
   twee ritmes op dezelfde pagina. (De selector die hier hoorde is in 1004 weggevallen;
   de regel "display: flex; gap: 10px; margin: 46px 0 14px" deed daardoor niets.
   1167: dit commentaar was niet afgesloten en slokte de zoekveldstijl hieronder
   op, zodat het zoekveld op installaties, werkbonnen en logboek kaal bleef.) */

.kr-filterbalk { position: relative; margin-bottom: 18px; max-width: 440px; }
.kr-filterbalk input {
  width: 100%; font-family: var(--kr-letter); font-size: 15px;
  padding: 11px 16px 11px 42px; border: 1px solid var(--kr-lijn); border-radius: var(--kr-radius-rond);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7a70' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E") no-repeat 15px center;
  box-shadow: var(--kr-schaduw-rust);
}
.kr-filterbalk input:focus { outline: none; border-color: var(--kr-groen); box-shadow: var(--kr-focusring); }

/* ---------------------------------------------------------------------------
   Een knop houdt zijn eigen kleuren, ook binnen een blok dat alle links kleurt.

   Dit ging op meerdere plekken mis en altijd op dezelfde manier. Een pagina
   zegt "alle links in dit blok zijn groen" - .kr-tabel a, .kr-b100-ok a - en
   zo'n regel weegt zwaarder dan de enkele klasse van de knop die erin staat.
   De knop verliest dan zijn tekstkleur maar houdt zijn eigen achtergrond, en
   omdat --kr-groen-donker in de lichte modus zwart is en de knopachtergrond
   bijna zwart, werd de tekst onzichtbaar. In de donkere modus gebeurt precies
   hetzelfde omgekeerd: witte tekst op een bijna witte knop.

   Gemeten op brl100.php stonden elf knoppen op een contrast van 1.2 op 1; dat
   is tekst die je alleen ziet door hem te selecteren.

   Twee klassen in de selector geven het gewicht dat nodig is om zo'n
   blokregel te verslaan, zonder ergens !important voor nodig te hebben.
   --------------------------------------------------------------------------- */
body.kr-portaal-body a.kr-knop { color: var(--kr-bg); }
body.kr-portaal-body a.kr-knop-licht { color: var(--kr-inkt); }
body.kr-portaal-body a.kr-actie { color: var(--kr-inkt); }
body.kr-portaal-body a.kr-actie-primair { color: var(--kr-bg); }

/* ---------------------------------------------------------------------------
   iOS Safari zoomt automatisch in zodra een invoerveld kleiner is dan 16px, en
   zoomt daarna niet vanzelf terug. Op een iPhone sprong het scherm dus bij elk
   veld dat je aantikte: op de werkbon, bij het zoeken, in elk formulier. De
   velden staan op 15px en dat is op een groot scherm precies goed, dus dit
   geldt alleen op smalle schermen, waar het verschil van een pixel niemand
   opvalt en het springen iedereen.

   !important is hier nodig en verder nergens: veel pagina's zetten hun eigen
   veldgrootte in een eigen <style>-blok dat na dit bestand komt, en die zouden
   deze regel anders stuk voor stuk overrulen.
   --------------------------------------------------------------------------- */
@media (max-width: 940px) {
  body.kr-portaal-body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
  body.kr-portaal-body select,
  body.kr-portaal-body textarea { font-size: 16px !important; }
}

/* Algemene verfijning */
.kr-portaal-kop { box-shadow: var(--kr-schaduw-rust); position: sticky; top: 0; z-index: 100; }
.kr-portaal-paginatitel { letter-spacing: -0.01em; }
.kr-knop, .kr-knop-licht { transition: background-color var(--kr-snel) var(--kr-ease), border-color var(--kr-snel) var(--kr-ease), transform var(--kr-snel) var(--kr-ease); }
.kr-knop:active, .kr-knop-licht:active { transform: scale(0.98); }
.kr-portaal-nav a { border-radius: var(--kr-radius-klein); padding: 6px 10px; transition: background-color var(--kr-snel) var(--kr-ease); }
.kr-portaal-nav a:hover { background: var(--kr-zachtgroen); }
.kr-leeg-staat { border-radius: var(--kr-radius-mid); }
.kr-w-blok a { color: inherit; font-weight: 700; }
@media (max-width: 700px) {
  .kr-portaal-inhoud { padding-left: 14px; padding-right: 14px; }
}

/* ===== Huisstijl homepage: pilknoppen, kaarten, chip en groet ===== */

/* Monochroom sinds 809 (Ordly-stijl, op verzoek van Mart): de hoofdknop is
   inkt op achtergrondkleur - 's nachts wit met donkere tekst, overdag zwart
   met witte tekst. LET OP de omklappende variabelen: nooit vaste #fff of #000
   in een knop. Het accentblauw blijft voor links en wayfinding, niet meer
   voor elke knop; dat is wat het geheel rustig maakt. */
.kr-knop {
  background: var(--kr-inkt);
  color: var(--kr-bg);
  font-weight: 700;
  border: 1px solid var(--kr-inkt);
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;
  box-shadow: none;
  transition: filter var(--kr-snel, 0.15s) ease, transform 0.14s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.kr-knop:hover { background: var(--kr-inkt); filter: brightness(0.88); transform: none; box-shadow: none; color: var(--kr-bg); }
.kr-knop:active { transform: scale(0.97); }
.kr-knop-licht {
  background: transparent;
  color: var(--kr-inkt);
  font-weight: 700;
  border: 1px solid var(--kr-lijn);
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--kr-snel, 0.15s) ease, transform 0.14s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.kr-knop-licht:hover { background: transparent; border-color: var(--kr-grijs); color: var(--kr-inkt); }
.kr-knop-licht:active { transform: scale(0.97); }

.kr-w-blok, .kr-dossier-vlak, .kr-vlak, .kr-leeg-staat {
  background: var(--kr-soft);
  border: 1px solid var(--kr-lijn);
  border-radius: var(--kr-radius-mid);
  transition: transform var(--kr-rustig) var(--kr-ease), border-color var(--kr-rustig) var(--kr-ease), box-shadow var(--kr-rustig) var(--kr-ease);
}
.kr-w-blok:hover, .kr-dossier-vlak:hover { border-color: var(--kr-grijs); box-shadow: none; }

table.kr-tabel { border-radius: var(--kr-radius-mid); overflow: hidden; border: 1px solid var(--kr-lijn); box-shadow: var(--kr-schaduw-rust); }
table.kr-tabel thead th { background: transparent; color: var(--kr-grijs); font-weight: 600; font-size: 12.5px; letter-spacing: 0; border-bottom: 1px solid var(--kr-lijn); }
table.kr-tabel tbody tr:hover { background: #f7fdf9; }

/* Gebruikerschip rechtsboven */
.kr-gebruiker-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--kr-soft);
  border: 1px solid var(--kr-lijn);
  border-radius: var(--kr-radius-rond);
  padding: 5px 6px 5px 6px;
}
.kr-gebruiker-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--kr-groen);
  /* Niet zwart: het rondje heeft de accentkleur en een zwarte letter was daar
     overdag niet in te lezen (vraag Mart 03-09-2026). Stond daarna op een
     harde #fff, en dat is precies waar de toelichting bij --kr-op-groen
     bovenaan voor waarschuwt: het accent klapt 's nachts om naar bijna-wit,
     dus een witte letter werd wit-op-wit en de initialen waren onzichtbaar op
     elke pagina (946, gevonden met een contrastsweep over 19 schermen). */
  color: var(--kr-op-groen, #fff);
  font-weight: 800;
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.kr-gebruiker-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kr-gebruiker-info { display: flex; flex-direction: column; line-height: 1.15; padding-right: 2px; }
.kr-gebruiker-naam { font-size: 13px; font-weight: 800; color: var(--kr-inkt); white-space: nowrap; }
.kr-gebruiker-rol { font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--kr-grijs); }

/* Begroeting
   De kop was 34px terwijl de rest van het dashboard op 13 tot 15 stond: te weinig
   verschil om ergens te beginnen met kijken. Nu bijna drie keer de tekstgrootte,
   met strakkere letterafstand zoals een kop van dat formaat vraagt. Dit is het
   enige element op de pagina dat groot mag zijn. */
.kr-groet { margin-bottom: 38px; }
/* Groter en strakker. Een kop van dit formaat vraagt meer negatieve
   letterafstand dan een van 20px: de ruimte tussen letters groeit mee met de
   grootte en gaat op 50px als een gat ogen. Klimaatlog zet zijn kop op 64px met
   -0.034em; dit is dezelfde verhouding, maar dan passend bij een werkscherm dat
   je de hele dag openhebt in plaats van een verkooppagina. */
.kr-groet-titel { font-size: clamp(34px, 4.8vw, 52px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; color: var(--kr-inkt); text-wrap: balance; }
.kr-groet-naam { color: var(--kr-groen-donker); }
.kr-groet-sub { font-size: 16px; color: var(--kr-grijs); margin-top: 10px; letter-spacing: -0.005em; }

/* Navigatie strakker in homepagestijl */
.kr-portaal-kop { border-bottom: 1px solid var(--kr-lijn); box-shadow: var(--kr-schaduw-rust); }
.kr-portaal-nav a { font-weight: 700; font-size: 14px; color: var(--kr-grijs); }
.kr-portaal-nav a:hover { color: var(--kr-inkt); background: var(--kr-soft); }
.kr-portaal-nav a.kr-nav-actief { background: var(--kr-zachtgroen); color: var(--kr-groen-donker); }

@media (max-width: 860px) {
  .kr-gebruiker-info { display: none; }
  .kr-gebruiker-chip { padding: 4px; }
}

/* ===== Verfijningen: rustige, consistente overgangen en stabiliteit ===== */

/* ===== Eén schaduw- en focusschaal =====
   Er stonden 23 verschillende schaduwen in dit bestand, waaronder zes varianten
   van "nauwelijks zichtbaar" die niemand uit elkaar houdt. Dat leest niet als
   verfijning maar als ruis. Drie niveaus is genoeg: rust (een kaart die stil
   ligt), licht (iets dat zweeft) en diep (iets dat boven de pagina hangt).
   De gekleurde schaduwen onder groene knoppen zijn bewust veel zachter gezet:
   die waren met 26 tot 35% dekking het luidruchtigste element op het scherm. */
:root {
  --kr-schaduw-rust:  0 1px 3px rgba(15, 17, 21, 0.05);
  --kr-schaduw-licht: 0 6px 18px rgba(15, 17, 21, 0.06);
  --kr-schaduw-diep:  0 18px 48px rgba(15, 17, 21, 0.18);
  /* Was rgba(39, 211, 102, .16): het oude merkgroen. Die gloed viel als een
     groen randje langs knoppen en invoervakken, ook nadat alles blauw werd.
     Nu het klimaatblauw, en zachter: een gloed hoort niet op te vallen. */
  --kr-schaduw-accent: none;
  /* De focusring was nog het oude merkgroen. Dat is het randje dat om een
     actief invoerveld valt, en op het inlogscherm zag je dat als een groen
     streepje naast INST-. Nu het klimaatblauw. */
  --kr-focusring: 0 0 0 3px rgba(19, 95, 173, 0.22);
}
:root { --kr-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --kr-snel: 150ms; --kr-rustig: 240ms; }

html { scroll-behavior: smooth; }

.kr-knop, .kr-knop-licht, .kr-portaal-nav a, .kr-gebruiker-chip, .kr-w-blok a, a {
  transition: background-color var(--kr-snel) var(--kr-ease), border-color var(--kr-snel) var(--kr-ease), color var(--kr-snel) var(--kr-ease), box-shadow var(--kr-snel) var(--kr-ease), transform var(--kr-snel) var(--kr-ease);
}

.kr-tegel { transition: transform var(--kr-snel) var(--kr-ease), border-color var(--kr-snel) var(--kr-ease), box-shadow var(--kr-snel) var(--kr-ease); }
.kr-tegel:hover { transform: translateY(-2px); }

.kr-knop:active, .kr-knop-licht:active { transform: translateY(1px) scale(0.99); }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--kr-focusring);
}

/* De inhoud komt rustig omhoog bij het openen van een pagina. BEWUST zonder
   opacity: met "both" geldt de begintoestand al vóórdat de animatie loopt, en met
   opacity: 0 erin blijft de HELE pagina leeg zodra animaties om wat voor reden
   dan ook niet draaien (bevroren renderer, extensie, print). Dat is hier al drie
   keer misgegaan (meldingen, mobiel menu, actiebalk). Alleen transform animeren
   houdt het gevoel en maakt onzichtbaarheid onmogelijk: staat de animatie stil,
   dan staat de inhoud er gewoon. */
@keyframes kr-inhoud-in { from { transform: translateY(7px); } to { transform: none; } }
.kr-portaal-inhoud { animation: kr-inhoud-in var(--kr-rustig) var(--kr-ease) both; }

/* Overgang tussen pagina's. Het portaal is server-gerenderd, dus elke klik geeft
   normaal een witte flits; dit laat de oude pagina uitvloeien in de nieuwe en is
   het verschil tussen "een website" en "een app". Browsers die het niet kennen
   negeren het blok volledig en gedragen zich precies als voorheen. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: var(--kr-snel); }
::view-transition-new(root) { animation-duration: var(--kr-rustig); }

/* Rustige hover-accenten voor lijsten en kaarten */
.kr-pb-item { transition: transform var(--kr-snel) var(--kr-ease), box-shadow var(--kr-snel) var(--kr-ease), border-color var(--kr-snel) var(--kr-ease); }
.kr-pb-item:hover { transform: translateY(-1px); box-shadow: var(--kr-schaduw-licht); }
.kr-pb-link, .kr-pb-pill { transition: background-color var(--kr-snel) var(--kr-ease), border-color var(--kr-snel) var(--kr-ease), color var(--kr-snel) var(--kr-ease), transform var(--kr-snel) var(--kr-ease); }
.kr-pb-pill:active { transform: scale(0.97); }

table tbody tr { transition: background-color var(--kr-snel) var(--kr-ease); }

/* Systeemvoorkeur 'minder beweging': alles blijft werken, zonder animatie */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .kr-portaal-inhoud { animation: none !important; }
  /* Ook de paginaovergang uit: wie beweging heeft uitgezet in zijn systeem, hoort
     die ook tussen pagina's niet te krijgen. */
  @view-transition { navigation: none; }
}

/* ===================== Nachtmodus ===================== */
/* Alleen actief op het interne portaal. Klant- en inlogpagina's blijven licht. */
.kr-thema-knop {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--kr-radius-rond);
  border: 1px solid var(--kr-lijn); background: var(--kr-kaart);
  color: var(--kr-grijs); cursor: pointer; padding: 0;
  transition: border-color var(--kr-snel) var(--kr-ease), color var(--kr-snel) var(--kr-ease), background var(--kr-snel) var(--kr-ease);
}
.kr-thema-knop:hover { border-color: var(--kr-groen); color: var(--kr-groen-donker); }
.kr-thema-icoon { width: 18px; height: 18px; display: block; }

/* Telefoon-indicator in de kop (alleen beheer): toont of het nummer op de website zichtbaar is.
   Groen stipje = nummer staat aan, rood stipje = nummer staat uit. Klik opent Druktemelding. */
.kr-kop-tel {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--kr-radius-rond);
  border: 1px solid var(--kr-lijn); background: var(--kr-kaart);
  color: var(--kr-grijs); cursor: pointer; padding: 0; text-decoration: none;
  transition: border-color var(--kr-snel) var(--kr-ease), color var(--kr-snel) var(--kr-ease), background var(--kr-snel) var(--kr-ease);
}
.kr-kop-tel svg { width: 17px; height: 17px; display: block; }
.kr-kop-tel:hover { border-color: var(--kr-groen); color: var(--kr-groen-donker); }
.kr-kop-tel-stip {
  position: absolute; top: -2px; right: -2px;
  width: 11px; height: 11px; border-radius: var(--kr-radius-rond);
  border: 2px solid var(--kr-kaart);
}
.kr-kop-tel-aan .kr-kop-tel-stip { background: #16a34a; }
.kr-kop-tel-uit .kr-kop-tel-stip { background: #d64545; }
.kr-kop-tel-uit { color: #d64545; }
.kr-kop-tel-uit:hover { border-color: #d64545; color: #d64545; }

/* De nachtmodus heeft een EIGEN accent: 's nachts blauw, overdag groen. Twee
   redenen. Ten eerste leest fel groen op een donkere ondergrond schreeuwerig,
   waar een helder blauw juist rust geeft. Ten tweede is de dagmodus de huisstijl
   (logo, website, kenplaten zijn groen); de nachtmodus is een werkstand die
   daar los van mag staan. Alle knoppen, links en actieve elementen lezen de
   variabelen hieronder, dus er hoeft nergens een losse kleur te worden aangepast.
   De ondergrond is niet meer neutraal grijs maar koel en gelaagd, met een klein
   beetje blauw in elk vlak: dat geeft diepte zonder dat er ergens een gradiënt
   aan te pas komt. Contrast nagerekend: accent op zwarte knoptekst 8,9:1, accent
   als tekst op een kaart 7,8:1 (WCAG AA vraagt 4,5:1). */
html[data-thema="donker"] body.kr-portaal-body {
  /* Vlakken: exact dezelfde reeks als de website in donkere modus, een neutrale
     koelgrijze trap. Ze weken hiervoor af met een marineblauwe tint, en dat zag
     je meteen bij het overstappen van de site naar het portaal: zelfde huisstijl,
     ander materiaal. Neutrale vlakken laten het accent bovendien het werk doen,
     in plaats van dat het vlak zelf meekleurt. */
  /* Op verzoek van Mart (28-08-2026) een slag dieper, richting het zwart van
     het Starlink-beheer: bijna-zwarte pagina, kaarten die er net boven hangen,
     lijnen als hairlines. Tekst en accent zijn ongewijzigd, dus elk hierboven
     en hieronder genoemd contrast wordt er alleen maar hoger op. */
  --kr-inkt: #E7ECF2;
  --kr-grijs: #9FADBC;
  --kr-lijn: #1E2630;
  --kr-soft: #0C1116;
  --kr-bg: #06090D;
  --kr-kaart: #10151C;
  --kr-kop-bg: #070A0E;
  --kr-veld-bg: #0C1116;
  /* Het accent: dezelfde variabelen als overdag, andere waarden. Afgeleid van het
     klimaatblauw van de website (#135FAD) en opgetild zodat het op een donker
     vlak leesbaar blijft. Hiervoor stond hier een fel neonblauw dat nergens op de
     site voorkomt; dat is wat het portaal goedkoop deed ogen.
     Nagerekend op de kaartkleur #1A1F26: gewone tekst 13,9:1, grijze tekst
     7,2:1, accent 5,6:1, accentlicht als tekst 8,7:1, zwarte knoptekst op het
     accent 6,5:1 en op de zweefkleur 4,8:1 (WCAG AA vraagt 4,5:1).
     De vlakken zelf verschillen bewust weinig (kaart tegenover pagina 1,17:1):
     in een donkere weergave scheidt een kaart met een randlijn, niet met een
     harde sprong in helderheid. Dat is ook hoe de website het doet. */
  /* Sinds 810 monochroom (Starlink): het accent is 's nachts bijna-wit, de
     tekst erop bijna-zwart. Geen blauw meer; kleur is alleen nog status. */
  --kr-groen: #E7ECF2;
  --kr-op-groen: #0B0E11;
  --kr-groen-donker: #FFFFFF;
  --kr-zachtgroen: #1E2630;
  /* "In orde" blijft ook 's nachts groen, maar opgetild zodat het op een donker
     vlak leesbaar is: #5CC98A op de kaartkleur is 8,0:1. */
  --kr-ok: #5CC98A;
  --kr-ok-donker: #7FD9A5;
  --kr-ok-zacht: #14301F;
  /* 's Nachts draaien rood en amber om: de tekst wordt licht en het vlak donker.
     Nagerekend op de ondergrond: rood 6,55:1, amber 8,94:1; op kaart 5,61 en
     7,65. De oude handmatige tinten haalden hier 3,0 tot 4,0. */
  --kr-fout: #E8736F;
  --kr-fout-donker: #F1948F;
  --kr-fout-zacht: #2A1616;
  --kr-let: #E9A23B;
  --kr-let-donker: #F0B45E;
  --kr-let-zacht: #2A2013;
  /* De overgenomen namen ook 's nachts, anders vallen ze alsnog terug op de
     lichte kleur die in de pagina zelf achter de komma staat. --kr-lijn-zacht
     is hier juist iets donkerder dan --kr-lijn: een scheiding binnen een kaart
     mag zachter zijn dan de rand eromheen. */
  --kr-lijn-zacht: #161D25;
  --kr-vlak: var(--kr-soft);
  --kr-licht: var(--kr-soft);
  --kr-achtergrond: var(--kr-bg);
  --kr-donker: var(--kr-inkt);
  --kr-groen-zacht: var(--kr-zachtgroen);
}
/* In donker wint het blauwe nachtaccent ook van de profielkleur (506). De
   --kp-accent-variabelen komen uit favicon.php (het profielgroen) en thema-fris
   zet in donker zijn eigen accent met een dubbele klasse in de selector; daarom
   hier dezelfde specificiteit, en stijl.css laadt als laatste. Overdag blijft
   alles gewoon de eigen profielkleur. */
html[data-thema="donker"] body.kr-portaal-body.kr-portaal-body {
  --kp-accent: #4E9BE0;
  --kp-accent-donker: #3B82C9;
  --kp-accent-licht: #8CC2F0;
  --kp-accent-zacht: #16273A;
  /* Zachter en dieper dan hiervoor: een harde gloed rond elk element is precies
     het effect dat een scherm goedkoop laat ogen. */
  --kr-schaduw-accent: none;
  --kr-focusring: 0 0 0 3px rgba(78, 155, 224, 0.30);
  color-scheme: dark;
  background: var(--kr-bg);
  color: var(--kr-inkt);
}

/* Vaste lichte oppervlakken uit de gedeelde stijl */
html[data-thema="donker"] body.kr-portaal-body .kr-portaal-kop { background: var(--kr-kop-bg); }
html[data-thema="donker"] body.kr-portaal-body .kr-tegel,
html[data-thema="donker"] body.kr-portaal-body .kr-tabel,
html[data-thema="donker"] body.kr-portaal-body .kr-knop-licht,
html[data-thema="donker"] body.kr-portaal-body .kr-leeg-staat,
html[data-thema="donker"] body.kr-portaal-body .kr-login-vlak,
html[data-thema="donker"] body.kr-portaal-body .kr-form-vlak { background: var(--kr-kaart); }
html[data-thema="donker"] body.kr-portaal-body .kr-tabel td { border-bottom-color: var(--kr-lijn); }
html[data-thema="donker"] body.kr-portaal-body .kr-tabel tr:hover td { background: var(--kr-soft); }
/* Statuspillen hadden alleen lichte varianten; in donkere modus bleef de
   achtergrond licht met lichte tekst erop, dus onleesbaar (instrumenten.php). */
html[data-thema="donker"] body.kr-portaal-body .kr-pil-geel { background: #3a2c15; color: #eec37e; }
html[data-thema="donker"] body.kr-portaal-body .kr-pil-rood { background: #3a1d1d; color: #f2a3a3; }
html[data-thema="donker"] body.kr-portaal-body .kr-pil-grijs { background: #262c33; color: #c2c9d1; }
/* Oranje was in 454 vergeten toen geel, rood en grijs hun nachtvariant kregen:
   een lichte pastelpil bleef 's nachts als lichtvlak in het donker staan (946). */
html[data-thema="donker"] body.kr-portaal-body .kr-pil-oranje { background: #3a2a18; color: #eab784; }

/* ---------------------------------------------------------------------------
   Darkmode-vangnet. Een blok met een inline lichte achtergrond (style="back-
   ground:#fff" en varianten) wordt in donkere modus onleesbaar: lichte tekst
   op een licht vlak. Nieuwe blokken horen een eigen klasse met een
   html[data-thema="donker"]-variant te krijgen, maar wordt dat een keer
   vergeten, dan vangt onderstaande regel het op. Werkt alleen binnen het
   beheerportaal in donkere modus, dus mail-HTML en printweergaven blijven
   ongemoeid. Dit is een vangnet, geen vervanging van een nette klasse.
   --------------------------------------------------------------------------- */
html[data-thema="donker"] body.kr-portaal-body [style*="background:#f"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #f"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#F"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #F"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#e"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #e"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#E"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #E"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:white"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: white"],
html[data-thema="donker"] body.kr-portaal-body [style*="background-color:#f"],
html[data-thema="donker"] body.kr-portaal-body [style*="background-color: #f"],
html[data-thema="donker"] body.kr-portaal-body [style*="background-color:#e"],
html[data-thema="donker"] body.kr-portaal-body [style*="background-color: #e"] {
  background: var(--kr-kaart) !important;
  border-color: var(--kr-lijn) !important;
}
/* Inline donkere tekstkleuren op zo'n vlak trekken we mee, anders blijft het
   donker op donker. */
html[data-thema="donker"] body.kr-portaal-body [style*="color:#0"],
html[data-thema="donker"] body.kr-portaal-body [style*="color: #0"],
html[data-thema="donker"] body.kr-portaal-body [style*="color:#1a1a1a"],
html[data-thema="donker"] body.kr-portaal-body [style*="color:#333"],
html[data-thema="donker"] body.kr-portaal-body [style*="color: #333"] {
  color: var(--kr-inkt) !important;
}
@media print {
  html[data-thema="donker"] body.kr-portaal-body [style*="background"] { background: #fff !important; }
}

/* ---------------------------------------------------------------------------
   Getinte labels in de donkere stand

   De labels in de pagina's (achterstallig, in afwachting, verlopen, akkoord)
   krijgen hun kleur via style="..." op het element zelf. Het vangnet hierboven
   maakt zo'n achtergrond wel donker, maar laat de letterkleur staan: rood
   #b33a3a op de kaartkleur is ongeveer 2:1, en dat leest niemand. Bovendien
   werden rood, oranje en groen alle drie hetzelfde vlak, waarmee het label zijn
   betekenis kwijtraakte.

   Hieronder per kleurfamilie een donkere tint met bijpassende letterkleur, zodat
   een waarschuwing oranje blijft en een fout rood. Overdag verandert er niets:
   deze regels gelden alleen in de donkere stand.

   Staat bewust NA het algemene vangnet; bij gelijke zwaarte wint de laatste.
   --------------------------------------------------------------------------- */
/* rood */
html[data-thema="donker"] body.kr-portaal-body [style*="background:#fdf0f0"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #fdf0f0"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#FDF0F0"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #FDF0F0"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#fdecec"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #fdecec"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#FDECEC"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #FDECEC"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#fdf3f3"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #fdf3f3"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#FDF3F3"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #FDF3F3"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#fbeceb"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #fbeceb"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#FBECEB"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #FBECEB"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#fbeaea"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #fbeaea"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#FBEAEA"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #FBEAEA"] {
  background: #2E1613 !important;
  color: #F0907F !important;
  border-color: #2E1613 !important;
}
/* amber */
html[data-thema="donker"] body.kr-portaal-body [style*="background:#fbf6e9"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #fbf6e9"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#FBF6E9"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #FBF6E9"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#fdf8ec"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #fdf8ec"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#FDF8EC"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #FDF8EC"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#fdf6e7"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #fdf6e7"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#FDF6E7"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #FDF6E7"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#fdf4e3"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #fdf4e3"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#FDF4E3"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #FDF4E3"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#faf6ee"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #faf6ee"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#FAF6EE"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #FAF6EE"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#fdf6e3"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #fdf6e3"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#FDF6E3"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #FDF6E3"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#f4f1ea"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #f4f1ea"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#F4F1EA"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #F4F1EA"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#fff4e5"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #fff4e5"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#FFF4E5"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #FFF4E5"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#fdf0dd"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #fdf0dd"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#FDF0DD"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #FDF0DD"] {
  background: #2A2113 !important;
  color: #E0BE7A !important;
  border-color: #2A2113 !important;
}
/* blauw */
html[data-thema="donker"] body.kr-portaal-body [style*="background:#e7f0fb"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #e7f0fb"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#E7F0FB"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #E7F0FB"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#eef3fb"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #eef3fb"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#EEF3FB"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #EEF3FB"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#eef2f7"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #eef2f7"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#EEF2F7"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #EEF2F7"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#eaf1fa"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #eaf1fa"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#EAF1FA"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #EAF1FA"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#e8f1fe"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #e8f1fe"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#E8F1FE"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #E8F1FE"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#f4f6fa"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #f4f6fa"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#F4F6FA"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #F4F6FA"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#eef2ff"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #eef2ff"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#EEF2FF"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #EEF2FF"] {
  background: #16273A !important;
  color: #8CC2F0 !important;
  border-color: #16273A !important;
}
/* groen */
html[data-thema="donker"] body.kr-portaal-body [style*="background:#e2f5ea"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #e2f5ea"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#E2F5EA"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #E2F5EA"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#e6f9ed"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #e6f9ed"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#E6F9ED"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #E6F9ED"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#f2faf5"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #f2faf5"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#F2FAF5"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #F2FAF5"] {
  background: #14301F !important;
  color: #6FE0A0 !important;
  border-color: #14301F !important;
}
/* paars */
html[data-thema="donker"] body.kr-portaal-body [style*="background:#f2ecfb"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #f2ecfb"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#F2ECFB"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #F2ECFB"] {
  background: #241C3A !important;
  color: #C0A6EE !important;
  border-color: #241C3A !important;
}

/* Invoervelden */
html[data-thema="donker"] body.kr-portaal-body .kr-form-veld input,
html[data-thema="donker"] body.kr-portaal-body .kr-form-veld select,
html[data-thema="donker"] body.kr-portaal-body .kr-form-veld textarea,
html[data-thema="donker"] body.kr-portaal-body .kr-zoekbalk input,
html[data-thema="donker"] body.kr-portaal-body .kr-login-vlak input,
html[data-thema="donker"] body.kr-portaal-body input[type="text"],
html[data-thema="donker"] body.kr-portaal-body input[type="password"],
html[data-thema="donker"] body.kr-portaal-body input[type="number"],
html[data-thema="donker"] body.kr-portaal-body input[type="email"],
html[data-thema="donker"] body.kr-portaal-body input[type="date"],
html[data-thema="donker"] body.kr-portaal-body input[type="search"],
html[data-thema="donker"] body.kr-portaal-body select,
html[data-thema="donker"] body.kr-portaal-body textarea {
  background: var(--kr-veld-bg); color: var(--kr-inkt); border-color: var(--kr-lijn);
}

/* Knoppen en sectiekoppen */
/* Stond hier hardgecodeerd groen: in nachtmodus werd een blauwe knop groen zodra
   je erover ging. Nu de donkere variant van het accent, zoals overdag. */
html[data-thema="donker"] body.kr-portaal-body .kr-knop:hover { background: var(--kp-accent-donker); }
html[data-thema="donker"] body.kr-portaal-body .kr-vorm-sectiekop { background: var(--kr-zachtgroen); }

/* Waarschuwingsblokken */
html[data-thema="donker"] body.kr-portaal-body .kr-melding-fout,
html[data-thema="donker"] body.kr-portaal-body .kr-w-rood { background: #2c1719; border-color: #5a2b2b; color: #f0a8a1; }
html[data-thema="donker"] body.kr-portaal-body .kr-w-geel { background: #2a2413; border-color: #574c25; color: #e6cd8c; }
/* Zelfde gemis als bij .kr-pil-oranje: de "dagdeel al bezet"-melding in de
   planning stond met een vaste lichtroze achtergrond in het donker (946). */
html[data-thema="donker"] body.kr-portaal-body .kr-dagdeel-melding-bezet { background: #2c1719; color: #f0a8a1; }

/* Eigen componenten met een vaste witte achtergrond */
html[data-thema="donker"] body.kr-portaal-body .kri-acct-menu,
html[data-thema="donker"] body.kr-portaal-body .kri-acct-knop,
html[data-thema="donker"] body.kr-portaal-body .kri-update-kaart,
html[data-thema="donker"] body.kr-portaal-body .kr-mk-afspraken,
html[data-thema="donker"] body.kr-portaal-body .kr-kf-kaart,
html[data-thema="donker"] body.kr-portaal-body .kr-kf-knop.kr-kf-opnieuw,
html[data-thema="donker"] body.kr-portaal-body .kri-acct-item:hover { background: var(--kr-soft); }
html[data-thema="donker"] body.kr-portaal-body .kr-aanvr-statusbtn { background: var(--kr-veld-bg); border-color: var(--kr-lijn); }
html[data-thema="donker"] body.kr-portaal-body .kr-aanvr-statusbtn-actief { background: var(--kr-inkt); border-color: var(--kr-inkt); color: var(--kr-bg); }
html[data-thema="donker"] body.kr-portaal-body .kr-aanvr-verwijder { background: var(--kr-veld-bg); border-color: #5a2b2b; color: #f0a8a1; }

/* Inline witte vlakken (style="background:#fff") breed opvangen */
html[data-thema="donker"] body.kr-portaal-body [style*="background:#fff"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #fff"] { background: var(--kr-kaart) !important; }

/* Veelgebruikte lichte tinten in inline-stijl */
html[data-thema="donker"] body.kr-portaal-body [style*="background:#eef9f1"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #eef9f1"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#e6f9ed"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #e6f9ed"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#eef1f4"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #eef1f4"] { background: var(--kr-zachtgroen) !important; }
html[data-thema="donker"] body.kr-portaal-body [style*="background:#fdf0f0"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #fdf0f0"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#fdf3f3"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #fdf3f3"] { background: #2c1719 !important; }
html[data-thema="donker"] body.kr-portaal-body [style*="background:#fbf6e9"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #fbf6e9"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#fef3e2"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #fef3e2"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#fff7e6"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #fff7e6"] { background: #2a2413 !important; }

/* Donkere inline tekstkleuren leesbaar houden op donkere kaarten */
html[data-thema="donker"] body.kr-portaal-body [style*="color:#0f1115"],
html[data-thema="donker"] body.kr-portaal-body [style*="color: #0f1115"],
html[data-thema="donker"] body.kr-portaal-body [style*="color:#0a0a0a"],
html[data-thema="donker"] body.kr-portaal-body [style*="color: #0a0a0a"],
html[data-thema="donker"] body.kr-portaal-body [style*="color:#111"],
html[data-thema="donker"] body.kr-portaal-body [style*="color: #111"] { color: var(--kr-inkt) !important; }

/* Zwart monochroom logo omkeren naar wit op donkere achtergrond */
html[data-thema="donker"] body.kr-portaal-body .kr-portaal-kop-links img,
html[data-thema="donker"] body.kr-portaal-body img[src*="logo.svg"] { filter: invert(1); }

/* Planbord in nachtmodus: rustige, gedempte tinten in plaats van felle vlakken */
html[data-thema="donker"] body.kr-portaal-body .kri-update-zone { background: var(--kr-kaart); }
html[data-thema="donker"] body.kr-portaal-body .kr-pb-pill,
html[data-thema="donker"] body.kr-portaal-body .kr-pb-item,
html[data-thema="donker"] body.kr-portaal-body .kr-pb-tegel { background: var(--kr-kaart); }
html[data-thema="donker"] body.kr-portaal-body .kr-pb-pill[data-type="schouw"].kr-pb-aan { border-color: #7a5c2c; color: #d9b578; }
html[data-thema="donker"] body.kr-portaal-body .kr-pb-tegel-schouw,
html[data-thema="donker"] body.kr-portaal-body .kr-pb-item-schouw { border-left-color: #d9b578; }
html[data-thema="donker"] body.kr-portaal-body .kr-pb-badge-schouw,
html[data-thema="donker"] body.kr-portaal-body .kr-pb-status-open { background: #2b2416; border-color: #4a3f24; color: #d9b578; }
html[data-thema="donker"] body.kr-portaal-body .kr-pb-pill[data-type="onderhoud"].kr-pb-aan { border-color: #3d4a68; color: #93a8d4; }
html[data-thema="donker"] body.kr-portaal-body .kr-pb-tegel-onderhoud,
html[data-thema="donker"] body.kr-portaal-body .kr-pb-item-onderhoud { border-left-color: #93a8d4; }
html[data-thema="donker"] body.kr-portaal-body .kr-pb-badge-onderhoud { background: #1c2333; border-color: #34405c; color: #93a8d4; }
html[data-thema="donker"] body.kr-portaal-body .kr-pb-pill[data-type="overig"].kr-pb-aan,
html[data-thema="donker"] body.kr-portaal-body .kr-pb-badge-overig { background: var(--kr-soft); border-color: var(--kr-lijn); color: #b3bbc4; }
html[data-thema="donker"] body.kr-portaal-body .kr-pb-link { border-color: var(--kr-lijn); }
/* ===== Nachtmodus: automatisch gegenereerde paginadekking ===== */
html[data-thema="donker"] body.kr-portaal-body #kr-2fa-qr,html[data-thema="donker"] body.kr-portaal-body .kr-2fa-vlak,html[data-thema="donker"] body.kr-portaal-body .kr-dash-log,html[data-thema="donker"] body.kr-portaal-body .kr-hb-vlak,html[data-thema="donker"] body.kr-portaal-body .kr-herstel code,html[data-thema="donker"] body.kr-portaal-body .kr-inst-form,html[data-thema="donker"] body.kr-portaal-body .kr-instmap-inhoud,html[data-thema="donker"] body.kr-portaal-body .kr-instmap-teller,html[data-thema="donker"] body.kr-portaal-body .kr-kf-kaart,html[data-thema="donker"] body.kr-portaal-body .kr-kf-knop.kr-kf-opnieuw,html[data-thema="donker"] body.kr-portaal-body .kr-kl-kaart,html[data-thema="donker"] body.kr-portaal-body .kr-kl-login-kaart,html[data-thema="donker"] body.kr-portaal-body .kr-klant-bon,html[data-thema="donker"] body.kr-portaal-body .kr-klant-knop-primair,html[data-thema="donker"] body.kr-portaal-body .kr-klant-kop,html[data-thema="donker"] body.kr-portaal-body .kr-klant-onderhoud,html[data-thema="donker"] body.kr-portaal-body .kr-klant-uitlog,html[data-thema="donker"] body.kr-portaal-body .kr-klant-vlak,html[data-thema="donker"] body.kr-portaal-body .kr-laadscherm-kaart,html[data-thema="donker"] body.kr-portaal-body .kr-lg-chip,html[data-thema="donker"] body.kr-portaal-body .kr-mk-afspraken,html[data-thema="donker"] body.kr-portaal-body .kr-mk-login-kaart,html[data-thema="donker"] body.kr-portaal-body .kr-ml-kaart,html[data-thema="donker"] body.kr-portaal-body .kr-ml-onderwerpbalk,html[data-thema="donker"] body.kr-portaal-body .kr-mt-bewerk,html[data-thema="donker"] body.kr-portaal-body .kr-ov-handtekening,html[data-thema="donker"] body.kr-portaal-body .kr-ov-handtekeningvak,html[data-thema="donker"] body.kr-portaal-body .kr-ov-hero,html[data-thema="donker"] body.kr-portaal-body .kr-ov-upload,html[data-thema="donker"] body.kr-portaal-body .kr-pb-item,html[data-thema="donker"] body.kr-portaal-body .kr-pb-pill,html[data-thema="donker"] body.kr-portaal-body .kr-sch-kaart,html[data-thema="donker"] body.kr-portaal-body .kr-st-cel,html[data-thema="donker"] body.kr-portaal-body .kr-st-fmt-knop,html[data-thema="donker"] body.kr-portaal-body .kr-st-kaart,html[data-thema="donker"] body.kr-portaal-body .kr-sta-periode,html[data-thema="donker"] body.kr-portaal-body .kr-tags-koppel,html[data-thema="donker"] body.kr-portaal-body .kr-tags-koppel-klant,html[data-thema="donker"] body.kr-portaal-body .kr-tags-vrij,html[data-thema="donker"] body.kr-portaal-body .kr-tv-kaart,html[data-thema="donker"] body.kr-portaal-body .kr-tv-pagina,html[data-thema="donker"] body.kr-portaal-body .kr-wb-canvas,html[data-thema="donker"] body.kr-portaal-body .kr-wb-typepil,html[data-thema="donker"] body.kr-portaal-body .kr-wb-vel,html[data-thema="donker"] body.kr-portaal-body .kr-wbk-hk,html[data-thema="donker"] body.kr-portaal-body .kr-wbk-hk img,html[data-thema="donker"] body.kr-portaal-body .kr-wbk-vel,html[data-thema="donker"] body.kr-portaal-body .kri-acct-menu,html[data-thema="donker"] body.kr-portaal-body .kri-kaart,html[data-thema="donker"] body.kr-portaal-body .kri-update-kaart,html[data-thema="donker"] body.kr-portaal-body .kri-update-zone,html[data-thema="donker"] body.kr-portaal-body .kri-wb-veld { background: var(--kr-kaart); border-color: var(--kr-lijn); }
html[data-thema="donker"] body.kr-portaal-body .kr-kl-kaart input[type="text"],html[data-thema="donker"] body.kr-portaal-body .kr-kl-kaart select,html[data-thema="donker"] body.kr-portaal-body .kr-kl-kaart textarea,html[data-thema="donker"] body.kr-portaal-body .kr-kl-veld input,html[data-thema="donker"] body.kr-portaal-body .kr-kl-veld select,html[data-thema="donker"] body.kr-portaal-body .kr-ml-veld input,html[data-thema="donker"] body.kr-portaal-body .kr-ml-veld select,html[data-thema="donker"] body.kr-portaal-body .kr-ml-veld textarea,html[data-thema="donker"] body.kr-portaal-body .kr-ov-veld input,html[data-thema="donker"] body.kr-portaal-body .kr-sch-klusvorm input,html[data-thema="donker"] body.kr-portaal-body .kr-sch-klusvorm select,html[data-thema="donker"] body.kr-portaal-body .kr-trf-tabel input,html[data-thema="donker"] body.kr-portaal-body .kri-onderhoud-veld input,html[data-thema="donker"] body.kr-portaal-body .kri-onderhoud-veld select,html[data-thema="donker"] body.kr-portaal-body .kri-upload-veld input { background: var(--kr-veld-bg); color: var(--kr-inkt); border-color: var(--kr-lijn); }
html[data-thema="donker"] body.kr-portaal-body .kr-etiket .kr-et-label,html[data-thema="donker"] body.kr-portaal-body .kr-etiket .kr-et-qrcaptie,html[data-thema="donker"] body.kr-portaal-body .kr-etiket .kr-et-titel,html[data-thema="donker"] body.kr-portaal-body .kr-etiket .kr-et-voet,html[data-thema="donker"] body.kr-portaal-body .kr-etiket .kr-et-waarde,html[data-thema="donker"] body.kr-portaal-body .kr-instmap-avatar,html[data-thema="donker"] body.kr-portaal-body .kr-kf-knop,html[data-thema="donker"] body.kr-portaal-body .kr-md-avatar,html[data-thema="donker"] body.kr-portaal-body .kr-st-cel.kr-st-actief,html[data-thema="donker"] body.kr-portaal-body .kr-st-fmt-actief,/* Was var(--kr-inkt): in nachtmodus is dat lichte tekst,en die stond op een
   lichtblauwe knop. Onleesbaar (2,96:1). De knop is licht,dus de tekst is donker. */
html[data-thema="donker"] body.kr-portaal-body .kri-wisselbalk-terug { color: #0B0E11; }
html[data-thema="donker"] body.kr-portaal-body .kr-ag-pil-onderhoud,
html[data-thema="donker"] body.kr-portaal-body .kr-kf-vink,
html[data-thema="donker"] body.kr-portaal-body .kr-sch-nieuw,
html[data-thema="donker"] body.kr-portaal-body .kr-tv-kop { color: var(--kr-groen-donker); }

/* Leesbaarheid van pill-knoppen, hover en tabel-hover in nachtmodus */
html[data-thema="donker"] body.kr-portaal-body .kr-knop-licht { background: var(--kr-kaart); color: var(--kr-inkt); border-color: var(--kr-lijn); }
html[data-thema="donker"] body.kr-portaal-body .kr-knop-licht:hover { background: var(--kr-groen); border-color: var(--kr-groen); color: #06210f; }
html[data-thema="donker"] body.kr-portaal-body table.kr-tabel tbody tr:hover { background: var(--kr-soft); }
html[data-thema="donker"] body.kr-portaal-body [style*="color:#000"],
html[data-thema="donker"] body.kr-portaal-body [style*="color: #000"] { color: var(--kr-inkt) !important; }

/* Tekst op een accentvlak. Dit blok stamt uit de tijd dat het accent fel groen
   was (#27D366): daar was zwart inderdaad de leesbare keuze. Sinds het accent
   klimaatblauw is, klopt dat maar voor de helft van de gevallen, want de
   nachtmodus heeft twee blauwtinten:

     .kr-knop krijgt 's nachts het DONKERE blauw (#1A66B0). Zwart is daarop
     3,37:1 - onder de norm - en wit 5,88:1. Elke opslaanknop in het hele
     portaal stond dus met te donkere letters. Gemeten in de browser, niet
     beredeneerd; de statische controle zag het niet omdat de kleur uit een
     ander bestand komt dan de knop.

     Een vlak dat var(--kr-groen) als achtergrond neemt krijgt juist het LICHTE
     blauw (#4E9BE0). Daar is zwart 6,68:1 en wit 2,96:1, dus daar blijft
     zwart staan. Dat geldt voor de stickerkiezers en voor losse elementen met
     een inline accentachtergrond. */
html[data-thema="donker"] body.kr-portaal-body .kr-knop,
html[data-thema="donker"] body.kr-portaal-body .kr-knop:hover { color: #fff !important; }
html[data-thema="donker"] body.kr-portaal-body .kr-knop-licht:hover,html[data-thema="donker"] body.kr-portaal-body .kr-st-actief,html[data-thema="donker"] body.kr-portaal-body .kr-st-fmt-actief,html[data-thema="donker"] body.kr-portaal-body [style*="background:var(--kr-groen)"],html[data-thema="donker"] body.kr-portaal-body [style*="background: var(--kr-groen)"] { color: #0a0a0a !important; }

/* ===== Nachtmodus: klantlogboek en klant-inlog (volgt systeemthema) ===== */
html[data-thema="donker"] body.kr-klant-body,
html[data-thema="donker"] body.kr-kl-login-body,
html[data-thema="donker"] body.kr-inlog-body {
  --kr-inkt: #eef1f4;
  --kr-grijs: #9aa3ad;
  --kr-lijn: #2b3138;
  --kr-soft: #1b2026;
  /* Volgt de ingestelde bedrijfskleur (favicon.php zet --kp-accent); zonder deze
     afleiding stond hier de vaste kleur van het standaardthema, waardoor het
     logboek van een klant in nachtmodus de kleur van een ander bedrijf kreeg. */
  --kr-zachtgroen: color-mix(in srgb, var(--kp-accent, #135FAD) 22%, #0f1216);
  --kr-groen-donker: color-mix(in srgb, var(--kp-accent, #135FAD) 55%, #ffffff);
  --kr-bg: #0f1216;
  --kr-kaart: #181d23;
  --kr-veld-bg: #1d232a;
  color-scheme: dark;
  background: var(--kr-bg);
  color: var(--kr-inkt);
}
html[data-thema="donker"] body.kr-klant-body .kr-klant-kop,
html[data-thema="donker"] body.kr-klant-body .kr-klant-vlak,
html[data-thema="donker"] body.kr-klant-body .kr-klant-bon,
html[data-thema="donker"] body.kr-klant-body .kr-klant-onderhoud,
html[data-thema="donker"] body.kr-klant-body .kr-klant-uitlog,
html[data-thema="donker"] body.kr-kl-login-body .kr-kl-login-kaart,
html[data-thema="donker"] body.kr-inlog-body .kr-mk-login-kaart { background: var(--kr-kaart); border-color: var(--kr-lijn); }
html[data-thema="donker"] body.kr-kl-login-body .kr-kl-code,
html[data-thema="donker"] body.kr-inlog-body .kr-mk-veld input { background: var(--kr-veld-bg); color: var(--kr-inkt); border-color: var(--kr-lijn); }
html[data-thema="donker"] body.kr-klant-body .kr-klant-contact { background: #20262e; }
/* Was hardgecodeerd groen: de enige groene knop op een verder blauwe klantpagina
   in nachtmodus. Nu het accent met donkere letters, zoals elke andere knop daar. */
html[data-thema="donker"] body.kr-klant-body .kr-klant-dlknop { background: var(--kp-accent, #4E9BE0) !important; color: #0B0E11 !important; }
html[data-thema="donker"] body.kr-klant-body .kr-klant-knop-primair { background: var(--kr-kaart) !important; }
html[data-thema="donker"] body.kr-kl-login-body .kr-kl-login-fout,
html[data-thema="donker"] body.kr-inlog-body .kr-mk-fout { background: #2c1719; color: #f0a8a1; }
html[data-thema="donker"] body.kr-klant-body img[src*="logo.svg"],
html[data-thema="donker"] body.kr-kl-login-body img[src*="logo.svg"],
html[data-thema="donker"] body.kr-inlog-body img[src*="logo.svg"] {
  background: #fff; border-radius: var(--kr-radius-mid); padding: 6px 10px; box-sizing: border-box; max-width: 100%;
}

/* Inline vlakken op de klantpagina's (wit en amber) in nachtmodus */
html[data-thema="donker"] body.kr-klant-body [style*="background:#fff"],
html[data-thema="donker"] body.kr-klant-body [style*="background: #fff"],
html[data-thema="donker"] body.kr-kl-login-body [style*="background:#fff"],
html[data-thema="donker"] body.kr-kl-login-body [style*="background: #fff"],
html[data-thema="donker"] body.kr-inlog-body [style*="background:#fff"],
html[data-thema="donker"] body.kr-inlog-body [style*="background: #fff"] { background: var(--kr-kaart) !important; }
html[data-thema="donker"] body.kr-klant-body [style*="background:#fbf6e9"],
html[data-thema="donker"] body.kr-klant-body [style*="background: #fbf6e9"] { background: #2a2413 !important; border-color: #574c25 !important; }

/* ===== Mobiel: alles binnen het scherm en compacter ===== */
/* Tabellen die breder zijn dan het scherm scrollen binnen hun eigen kader
   in plaats van de hele pagina op te rekken. Teksten en knoppen worden
   compacter zodat de meeste tabellen gewoon passen zonder te scrollen. */
@media (max-width: 700px) {
  html, body { max-width: 100vw; overflow-x: clip; }
  .kr-portaal-inhoud { padding-left: 12px; padding-right: 12px; }

  .kr-tabel { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .kr-tabel th { padding: 9px 9px; font-size: 12px; letter-spacing: 0; }
  .kr-tabel td { padding: 8px 9px; font-size: 13px; }
  .kr-tabel td a.kr-knop, .kr-tabel td .kr-knop { padding: 6px 11px !important; font-size: 13px !important; white-space: nowrap; }
  .kr-tabel td [style*="border-radius:12px"] { font-size: 11px !important; padding: 4px 9px !important; }

  .kr-dash-sectie { font-size: 17px; }
  .kr-dash-sectie a { font-size: 11px !important; }
  .kr-w-blok { font-size: 13px; }
  .kr-zoekbalk .kr-knop { padding: 10px 16px; font-size: 14px; }
  .kr-leeg-staat { font-size: 13px; }
  .kr-tegel { padding: 14px 15px; }

  /* Uitlijning op smalle schermen: titels, actiebalken en formulieren netjes
     onder elkaar in plaats van half afgekapt naast elkaar. */
  .kr-portaal-paginatitel { font-size: 20px; line-height: 1.25; overflow-wrap: anywhere; }
  .kr-portaal-paginasub { font-size: 13px; line-height: 1.6; }
  .kr-actiebalk { flex-wrap: wrap; gap: 8px; }
  .kr-actiebalk .kr-actie { flex: 1 1 auto; justify-content: center; }
  .kr-form-rooster { grid-template-columns: 1fr !important; gap: 10px !important; }
  .kr-form-vlak { padding: 16px 15px; }
  .kr-knop, .kr-knop-licht { padding: 11px 18px; font-size: 14px; }
  /* Een knop die alleen staat mag de volle breedte pakken, dat tikt prettiger */
  .kr-form-vlak > .kr-knop { width: 100%; }
}

/* ============================================================
   Superskin 2026: vaste zijbalk links op desktop, creme licht
   thema en een diep donker thema. Puur CSS bovenop de bestaande
   kop (kop.php); alle knoppen, menu's en scripts blijven gelijk.
   Op mobiel (tot 940px) blijft de vertrouwde bovenbalk met
   hamburger gewoon werken.
   ============================================================ */

@media (min-width: 941px) {
  /* Inhoud opschuiven; alleen op pagina's die de portaalkop hebben.
     Klantlogboek, inlogpagina en printpagina's blijven onaangeroerd. */
  body.kr-portaal-body:has(.kr-portaal-kop) { padding-left: var(--kr-zij-breedte); }

  body.kr-portaal-body .kr-portaal-kop {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--kr-zij-breedte);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0;
    padding: 16px 14px 14px;
    background: var(--kr-kop-bg);
    border-bottom: none;
    border-right: 1px solid var(--kr-lijn);
    box-shadow: none;
    overflow: hidden;
    z-index: 900;
  }
  /* De balk zelf staat muisvast; alleen het menugedeelte scrolt intern als het
     op een klein scherm niet past. Zo schuift er nooit iets mee met de muis. */
  body.kr-portaal-body .kr-portaal-kop .kr-portaal-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: none;
    scrollbar-width: thin;
  }
  body.kr-portaal-body .kr-portaal-kop .kr-portaal-kop-links,
  body.kr-portaal-body .kr-portaal-kop .kr-kop-snelrij,
  body.kr-portaal-body .kr-portaal-kop .kr-mkop-rechts { flex: 0 0 auto; }

  /* Vaste volgorde in de balk: logo, statusknoppen, menu, en onderin update plus account */
  body.kr-portaal-body .kr-portaal-kop .kr-portaal-kop-links { order: 1; }
  body.kr-portaal-body .kr-portaal-kop .kr-kop-snelrij { order: 2; }
  body.kr-portaal-body .kr-portaal-kop .kr-portaal-nav { order: 3; }
  body.kr-portaal-body .kr-portaal-kop .kr-mkop-rechts { order: 4; }

  /* Statusknoppen (telefoon, thema, postvak) op een rij direct onder het logo,
     met de Live-status netjes rechts uitgelijnd naast het postvak */
  body.kr-portaal-body .kr-portaal-kop .kr-kop-snelrij {
    padding: 10px 6px 10px;
    border-bottom: 1px solid var(--kr-lijn);
    margin-bottom: 6px;
  }
  body.kr-portaal-body .kr-portaal-kop .kr-zij-live {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    padding: 0;
    border-radius: var(--kr-radius-rond);
    background: var(--kr-kaart);
    border: 1px solid var(--kr-lijn);
    color: var(--kr-inkt);
    text-decoration: none;
  }
  /* Alleen het statusstipje tonen; de tekst zit in de title en scheelt breedte,
     zodat de rij statusknoppen nooit meer over de rand van de zijbalk valt */
  body.kr-portaal-body .kr-portaal-kop .kr-zij-live span:not(.kr-voet-stip) { display: none; }
  body.kr-portaal-body .kr-portaal-kop .kr-zij-live .kr-voet-stip { width: 11px; height: 11px; }
  body.kr-portaal-body .kr-portaal-kop .kr-zij-live:hover { border-color: var(--kr-groen); }

  /* Logo bovenin: groter en gecentreerd */
  body.kr-portaal-body .kr-portaal-kop-links {
    justify-content: center;
    gap: 10px;
    padding: 6px 6px 8px;
    border-bottom: none;
    margin-bottom: 0;
  }
  body.kr-portaal-body .kr-portaal-kop-links img { height: 44px !important; }

  /* Statusregel onder de accountchip: live-stip, versienummer en bijwerken */
  body.kr-portaal-body .kr-portaal-kop .kr-zij-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding-top: 9px;
    font-size: 11px;
    font-weight: 700;
    color: var(--kr-grijs);
    letter-spacing: 0.02em;
    text-align: center;
  }
  body.kr-portaal-body .kr-portaal-kop .kr-zij-status-rij {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
  }
  body.kr-portaal-body .kr-portaal-kop .kr-zij-status-rij:hover { color: var(--kr-inkt); }
  body.kr-portaal-body .kr-portaal-kop .kr-zij-status-dim { color: var(--kr-grijs); opacity: 0.75; font-weight: 600; }

  /* De pagina-voet onderaan toont hetzelfde; op desktop met zijbalk dubbel, dus weg */
  body.kr-portaal-body:has(.kr-portaal-kop) .kr-portaal-voet { display: none; }

  /* Navigatie als verticale lijst met sectielabel */
  body.kr-portaal-body .kr-portaal-nav {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 2px;
    padding: 4px 0 6px;
  }
  body.kr-portaal-body .kr-portaal-nav::before {
    content: 'Menu';
    display: block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--kr-grijs);
    padding: 4px 12px 6px;
  }
  body.kr-portaal-body .kr-portaal-nav > a {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--kr-grijs);
    padding: 8px 12px;
    border-radius: var(--kr-radius-mid);
    border: 1px solid transparent;
    line-height: 1.3;
    /* Lange menunamen zoals Kwaliteitsmanagementsysteem mogen over twee regels
       afbreken in plaats van uit de balk te lopen of te worden afgekapt. */
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
  }
  body.kr-portaal-body .kr-portaal-nav > a:hover {
    background: var(--kr-soft);
    color: var(--kr-inkt);
  }
  body.kr-portaal-body .kr-portaal-nav > a.kr-nav-actief {
    background: var(--kr-kaart);
    color: var(--kr-inkt);
    border-color: var(--kr-lijn);
    box-shadow: var(--kr-schaduw-rust);
  }
  body.kr-portaal-body .kr-portaal-nav > a.kr-nav-actief::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--kr-groen);
    flex: 0 0 auto;
    margin-top: 5px;
  }

  /* Onderste blok: update-strook boven de accountchip */
  body.kr-portaal-body .kr-portaal-kop .kr-mkop-rechts {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--kr-lijn);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  body.kr-portaal-body .kr-portaal-kop .kr-mkop-rechts form { margin: 0; }
  body.kr-portaal-body .kr-portaal-kop .kri-update-zone {
    width: 100%;
    height: auto;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--kr-radius-groot);
    background: var(--kr-kaart);
    padding: 8px 12px;
  }
  body.kr-portaal-body .kr-portaal-kop .kri-update-zone svg { width: 15px; height: 15px; }
  body.kr-portaal-body .kr-portaal-kop .kri-pv { margin-right: 0; }
  body.kr-portaal-body .kr-portaal-kop .kri-pv-knop { width: 36px; height: 36px; border-radius: var(--kr-radius-rond); background: var(--kr-kaart); }
  body.kr-portaal-body .kr-portaal-kop .kri-pv-stip { border-color: var(--kr-kaart); }
  body.kr-portaal-body .kr-portaal-kop .kri-acct { width: 100%; }
  body.kr-portaal-body .kr-portaal-kop .kri-acct-knop {
    width: 100%;
    border-radius: var(--kr-radius-groot);
    background: var(--kr-kaart);
    border: 1px solid var(--kr-lijn);
    padding: 7px 9px;
  }
  body.kr-portaal-body .kr-portaal-kop .kri-acct-chevron { margin-left: auto; }
  body.kr-portaal-body .kr-portaal-kop .kr-gebruiker-naam { white-space: normal; word-break: break-word; }

  /* Accountmenu opent naar boven; postvakmenu opent naar beneden onder de statusrij */
  body.kr-portaal-body .kr-portaal-kop .kri-acct-menu {
    top: auto;
    bottom: calc(100% + 10px);
    right: auto;
    left: 0;
    min-width: 0;
    width: calc(var(--kr-zij-breedte) - 28px);
    transform: translateY(6px);
  }
  body.kr-portaal-body .kr-portaal-kop .kri-acct.kri-open .kri-acct-menu { transform: translateY(0); }

  /* Postvakmenu: als los paneel rechts naast de zijbalk, zodat het nooit wordt
     afgekapt door de vaste balk en alle regels op volle breedte passen */
  body.kr-portaal-body .kr-portaal-kop .kri-pv-menu {
    position: fixed;
    top: 70px;
    bottom: auto;
    left: calc(var(--kr-zij-breedte) + 12px);
    right: auto;
    min-width: 0;
    width: 320px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: var(--kr-schaduw-diep);
  }
}

/* Verfijning van gedeelde bouwstenen in de nieuwe stijl (licht en donker) */
.kr-tegel { border-radius: var(--kr-radius-groot); }
table.kr-tabel, .kr-tabel { border-radius: var(--kr-radius-groot); }
.kr-knop { border-radius: var(--kr-radius-mid); }
.kr-knop-licht { border-radius: var(--kr-radius-mid); background: var(--kr-kaart); }
.kr-tegel-label { border-radius: var(--kr-radius-rond); }
.kr-portaal-inhoud { max-width: 1080px; }
table.kr-tabel tbody tr:hover { background: var(--kr-soft); }
.kr-tabel tr:hover td { background: var(--kr-soft); }

/* Donker thema: passende schaduwen en menu-oppervlakken */
html[data-thema="donker"] body.kr-portaal-body .kr-portaal-kop { border-right-color: var(--kr-lijn); }
html[data-thema="donker"] body.kr-portaal-body .kri-acct-menu { background: var(--kr-kaart); border-color: var(--kr-lijn); }
html[data-thema="donker"] body.kr-portaal-body .kri-acct-menu { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5); }
html[data-thema="donker"] body.kr-portaal-body .kri-acct-item:hover { background: var(--kr-soft); }
html[data-thema="donker"] body.kr-portaal-body .kri-acct-uit:hover { background: #2c1719; }
html[data-thema="donker"] body.kr-portaal-body .kri-update-zone { background: var(--kr-kaart); border-color: var(--kr-lijn); color: var(--kr-grijs); }
html[data-thema="donker"] body.kr-portaal-body table.kr-tabel thead th { background: transparent; color: var(--kr-grijs); }
html[data-thema="donker"] body.kr-portaal-body .kr-tegel:hover { box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4); }
@media (min-width: 941px) {
}

/* ---------------------------------------------------------------------------
   Meldingen (toasts). Vervangen de browser-popups van alert(): die blokkeren
   het scherm, zien er op een telefoon uit als een systeemfout en passen niet
   bij een app. Deze schuiven onderin beeld, verdwijnen vanzelf en zijn met een
   tik weg. Kleur volgt de strekking: rood bij mislukt, groen bij gelukt.
   --------------------------------------------------------------------------- */
.kr-toasts {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 9000; display: flex; flex-direction: column; gap: 8px;
  width: min(440px, calc(100vw - 24px)); pointer-events: none;
}
.kr-toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: 10px;
  background: var(--kr-inkt); color: #fff;
  border-radius: var(--kr-radius-groot); padding: 13px 16px; font-size: 14px; line-height: 1.5;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.22); cursor: pointer;
  /* De melding is altijd volledig zichtbaar; alleen de beweging wordt
     geanimeerd. Bewust geen opacity in de animatie: als een browser animaties
     bevriest (achtergrondtab, energiebesparing) bleef de melding anders op de
     eerste stap staan en was hij onzichtbaar. */
  opacity: 1;
  animation: kr-toast-in .22s ease-out;
}
.kr-toast-icoon { flex: 0 0 auto; font-weight: 800; line-height: 1.35; }
.kr-toast-fout { background: #a5232a; }
.kr-toast-goed { background: #14713d; }
.kr-toast-uit { animation: kr-toast-weg .2s ease-in forwards; }
@keyframes kr-toast-in { from { transform: translateY(12px); } to { transform: none; } }
@keyframes kr-toast-weg { to { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  .kr-toast, .kr-toast-uit { animation: none; }
}
/* Op een telefoon staat onderin de tabbalk (en op de werkbon ook de zweefknop);
   de melding gaat daar netjes bovenop staan in plaats van erachter. */
@media screen and (max-width: 820px) {
  .kr-toasts { bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
}
@media print { .kr-toasts { display: none !important; } }

/* Demobalk: de bezoeker komt van de verkoopsite en moet er ook weer terug
   kunnen. Alles op een regel, en op een telefoon onder elkaar. */
/* Demobalk. Was een blok van drie regels tekst met twee knoppen eronder: het nam
   het halve scherm en de bezoeker las het niet meer. Nu een smalle rode balk op
   een regel. Rood omdat dit het enige is op deze pagina dat iets moet verkopen;
   het portaal eronder is verder rustig en blauw, dus dit valt op zonder dat de
   rest luider hoeft. Korte tekst, een duidelijke knop, een bescheiden terugweg. */
.kr-demo-balk { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
  background: #b3261e; border-bottom: 1px solid #8c1d18; color: #fff;
  font-size: 13.5px; font-weight: 500; padding: 9px 18px; text-align: center; }
.kr-demo-tekst { font-weight: 500; }
.kr-demo-tekst b { font-weight: 700; }
.kr-demo-knop { flex: 0 0 auto; background: #fff; color: #b3261e; font-size: 13px; font-weight: 700;
  border-radius: 999px; padding: 7px 18px; text-decoration: none; white-space: nowrap;
  transition: transform .15s ease; }
.kr-demo-knop:hover { transform: scale(1.03); color: #8c1d18; }
.kr-demo-terug { flex: 0 0 auto; color: rgba(255,255,255,.85); font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.kr-demo-terug:hover { color: #fff; text-decoration: underline; }
@media (max-width: 760px) { .kr-demo-balk { gap: 10px; font-size: 12.5px; padding: 8px 14px; } .kr-demo-terug { display: none; } }

/* ---------------------------------------------------------------------------
   Zijbalk naar het voorbeeld van mijn.viamart.nl

   Mart wees zijn eigen handelsportaal aan als voorbeeld: rustiger, met een
   pictogram per onderdeel en groepskopjes die de lijst echt in stukken breken.
   De waarden hieronder zijn letterlijk overgenomen uit public/stijl.css van dat
   portaal (.vm-nav-kop en .vm-nav a), niet van een schermafbeelding afgekeken.

   LET OP: de kapitalen gaan bewust in tegen de regel in thema-fris.css ("geen
   uppercase micro-labels: gewone taal, gewone letters"). Die regel is goed voor
   labels in het werkscherm, maar een groepskop in een zijbalk hoort juist niet
   gelezen te worden als tekst - alleen gezien als scheiding. De uitzondering is
   daarom zo smal mogelijk: alleen .kp-nav-kop binnen de nav, verder niets.
   Dit bestand laadt na thema-fris.css, dus deze regels winnen.
   --------------------------------------------------------------------------- */
/* De selectors hieronder zijn afgestemd op wat thema-fris.css zet, niet ruimer
   gekozen dan nodig. In de browser nagekeken welke regel won:
   - de kapitalen verloren van een regel met !important, vandaar !important hier;
   - display werd op block gezet door "...kr-portaal-kop nav a", dat weegt
     zwaarder dan mijn eerste poging, en daardoor deed gap niets. Nu dezelfde
     selector; dit bestand laadt later, dus deze wint. */
body.kr-portaal-body .kr-portaal-kop nav .kp-nav-kop,
body.kr-portaal-body nav .kp-nav-kop {
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-size: 11.5px;
  font-weight: 800;
}
body.kr-portaal-body .kr-portaal-kop nav a,
body.kr-portaal-body .kr-portaal-nav a {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  padding: 7px 11px;
}
/* Het pictogram staat bewust op 0,78: het hoort te helpen bij herkennen, niet
   om aandacht te vragen. Bij het onderdeel waar je staat wel voluit. */
body.kr-portaal-body .kr-portaal-nav a .kr-nav-ico {
  width: 16px; height: 16px; flex: 0 0 auto; opacity: 0.78;
}
body.kr-portaal-body .kr-portaal-nav a.kr-nav-actief .kr-nav-ico { opacity: 1; }
body.kr-portaal-body .kr-portaal-nav a .kr-nav-tekst { flex: 1; min-width: 0; }
/* Het regeltje schuift een tikje op bij aanwijzen, zoals in Viamart. Klein
   genoeg om niet op te vallen, groot genoeg om te merken dat het reageert. */
body.kr-portaal-body .kr-portaal-nav a:hover { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) {
  body.kr-portaal-body .kr-portaal-nav a:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   Leesbaarheid van gevulde accentknoppen in de donkere stand

   Overdag is het accent donkerblauw (#135FAD) en zijn witte letters daarop
   goed: 6,4:1. 's Nachts is het accent juist LICHTblauw (#4E9BE0/#8CC2F0),
   want het moet dan leesbaar zijn als tekst op een donker vlak. Wordt diezelfde
   kleur als knopachtergrond gebruikt met witte letters erop, dan zakt het naar
   1,9:1 - drie keer onder de norm van 4,5.

   In de browser nagemeten op het installatiescherm: zeven elementen zaten onder
   de norm, vier daarvan met exact dit patroon. Op een licht accent horen de
   letters donker te zijn, niet wit; dat is precies wat de toelichting bij de
   nachtkleuren hierboven al zei ("zwarte knoptekst op het accent 6,5:1"), maar
   het was op deze knoppen niet toegepast.

   Alleen de donkere stand; overdag verandert er niets.
   --------------------------------------------------------------------------- */
html[data-thema="donker"] body.kr-portaal-body .kr-instmap-open,
html[data-thema="donker"] body.kr-portaal-body .kr-instmap-open:hover,
html[data-thema="donker"] body.kr-portaal-body .kr-instmap-dossier,
html[data-thema="donker"] body.kr-portaal-body .kr-instmap-dossier:hover,
html[data-thema="donker"] body.kr-portaal-body .kr-kop-dr-opslaan,
html[data-thema="donker"] body.kr-portaal-body .kri-update-sluit {
  color: #0B0E11;
}
/* De hoofdknop krijgt GEEN donkere letters maar een dieper vlak. Witte letters op
   blauw is wat je overal verwacht van een hoofdknop, en het houdt de knop gelijk
   aan de lichte stand; donkere letters op middenblauw zou hier het lelijkste van
   twee werkende oplossingen zijn.
   thema-fris.css forceert die witte letters met een dubbele klasse in de selector
   (body.kr-portaal-body.kr-portaal-body), dus daar valt niet onderuit te komen -
   en dat hoeft ook niet: het vlak eronder is het probleem, niet de tekst.
   Wit op #1A66B0 is 6,0:1; het was 4,0:1 op #3B82C9. */
html[data-thema="donker"] body.kr-portaal-body.kr-portaal-body .kr-knop {
  background: #1A66B0;
}
html[data-thema="donker"] body.kr-portaal-body.kr-portaal-body .kr-knop:hover {
  background: #135FAD;
}
/* Het actieve menu-item: lichtblauwe letters op een doorschijnend blauw vlak gaf
   2,2:1. Het vlak dieper maken houdt het accent overeind en brengt het op 7,7:1;
   de letters lichter maken zou de accentkleur juist opgeven. */
html[data-thema="donker"] body.kr-portaal-body .kr-portaal-nav a.kr-nav-actief {
  background: #16273A;
}
/* De telefoonknop in de kopbalk: dit rood is getekend voor een witte pagina. */
html[data-thema="donker"] body.kr-portaal-body .kr-kop-tel { color: #F0907F; }

/* Vinkjeslijst: een reeks regels die elk een belofte zijn, met links een teken
   dat zegt of hij wordt nagekomen. Overgenomen uit het Viamart-portaal, waar
   deze vorm zich bewezen heeft: je leest in een oogopslag wat er bewaakt wordt
   in plaats van een lap tekst. Het teken heeft altijd een woord naast zich -
   kleur alleen is geen informatie voor wie kleuren niet uit elkaar houdt. */
.kr-check { list-style: none; margin: 0; padding: 0; }
.kr-check li { display: flex; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--kr-lijn); font-size: 13.5px; line-height: 1.55; }
.kr-check li:last-child { border-bottom: 0; padding-bottom: 0; }
.kr-check b { font-weight: 700; }
.kr-check-teken {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900; line-height: 1;
  background: rgba(45, 138, 78, 0.14); color: var(--kr-ok);
}
.kr-check-let { background: rgba(138, 109, 36, 0.16); color: var(--kr-let); }
.kr-check-nee { background: rgba(179, 58, 58, 0.14); color: var(--kr-fout); }
.kr-check .kr-fijn { display: block; font-size: 12px; color: var(--kr-grijs); margin-top: 3px; line-height: 1.6; }

/* 1006: de inhoud komt rustig binnen in plaats van te knipperen bij elke
   paginawissel. Kort genoeg om niet te merken als wachten, lang genoeg om
   niet te knipperen. Wie bewegingen uit heeft staan krijgt niets. */
@keyframes kr-inhoud-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
body.kr-portaal-body .kr-portaal-inhoud { animation: kr-inhoud-in .18s ease-out both; }
@media (prefers-reduced-motion: reduce) { body.kr-portaal-body .kr-portaal-inhoud { animation: none; } }

/* App-tabbalk onderin op telefoons (kop.php). Stond alleen in thema-fris.css,
   dus alleen in het losse product; sinds 1057 ook in de volledige versie.
   Zelfde regels, zodat beide thema's er gelijk uitzien. */
body.kr-portaal-body .kp-tabs { display: none; }
@media (max-width: 820px) {
  body.kr-portaal-body .kp-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; justify-content: space-around; align-items: stretch; background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--kr-lijn); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  html[data-thema="donker"] body.kr-portaal-body.kr-portaal-body .kp-tabs { background: rgba(18,21,26,.92); border-top-color: rgba(255,255,255,.08); }
  body.kr-portaal-body .kp-tab { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding: 7px 2px 4px; font-size: 11px; font-weight: 600; white-space: nowrap; color: var(--kr-grijs); text-decoration: none; border: none; background: none; font-family: inherit; cursor: pointer; }
  body.kr-portaal-body .kp-tab > svg { flex: 0 0 auto; }
  body.kr-portaal-body .kp-tab .kp-tab-l { display: block; line-height: 1; }
  /* Een algemene linkregel gaf de <a>-tabs 14 px en de Menu-knop 11 px. */
  body.kr-portaal-body nav.kp-tabs .kp-tab .kp-tab-l { font-size: 11px; }
  body.kr-portaal-body .kp-tab-plus { justify-content: flex-start; }
  body.kr-portaal-body .kp-tab-plus .kp-tab-l { margin-top: 2px; }
  body.kr-portaal-body .kp-tab svg { width: 22px; height: 22px; stroke-width: 1.9; }
  body.kr-portaal-body .kp-tab.kp-tab-actief { color: var(--kr-groen-donker); }
  body.kr-portaal-body .kp-tab-plus svg { width: 30px; height: 30px; padding: 3px; background: var(--kr-groen-donker); color: var(--kr-op-groen, #fff); stroke: var(--kr-op-groen, #fff); border-radius: 999px; }
  body.kr-portaal-body .kr-portaal-inhoud { padding-bottom: 86px; }
  body.kr-portaal-body .kr-portaal-voet { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  /* Alle labels op één lijn: de plusknop mag boven de rij uitsteken, de Menu-knop krijgt geen eigen knopmaat. */
  body.kr-portaal-body .kp-tab { line-height: 1; -webkit-appearance: none; appearance: none; margin: 0; }
  body.kr-portaal-body nav.kp-tabs .kp-tab { gap: 5px; }
  body.kr-portaal-body nav.kp-tabs .kp-tab > svg { display: block; margin: 0; }
  body.kr-portaal-body nav.kp-tabs .kp-tab-plus > svg { margin-top: -8px; }
  body.kr-portaal-body nav.kp-tabs .kp-tab-plus .kp-tab-l { margin-top: 0; }
  /* Menu zit nu in de tabbalk; de hamburger in de kop past niet meer op 390 px en is dubbel. */
  body.kr-portaal-body:has(nav.kp-tabs) .kr-mkop-hamburger { display: none; }
}
/* Op 390 px was de kop 6 px te breed; met het menu open viel de profielknop daardoor naar een tweede regel. */
@media (max-width: 420px) {
  body.kr-portaal-body .kr-portaal-kop { gap: 6px; }
  body.kr-portaal-body .kr-portaal-kop .kr-kop-snelrij { gap: 4px; }
}
@media print { body.kr-portaal-body .kp-tabs { display: none !important; } }

/* 1060: de begroeting nam op een telefoon een derde van het scherm in (34 px, twee regels). */
@media (max-width: 600px) {
  body.kr-portaal-body .kr-groet-titel { font-size: 28px; }
  body.kr-portaal-body .kr-groet-sub { font-size: 14px; margin-top: 6px; }
}

/* 1061: tabellen als kaarten op de telefoon. Een tabel met de klasse
   kr-tabel-kaarten schuift onder 700 px niet meer zijwaarts: elke rij wordt
   een kaart, en de kolomkop staat als klein label boven de waarde. Het label
   komt uit data-kr-kol, dat een scriptje in kop.php uit de thead vult; een
   cel zonder kop (de knopkolom) krijgt de volle breedte. */
@media (max-width: 700px) {
  body.kr-portaal-body table.kr-tabel-kaarten { display: block; overflow: visible; border: 0; background: none; box-shadow: none; }
  body.kr-portaal-body table.kr-tabel-kaarten thead { display: none; }
  body.kr-portaal-body table.kr-tabel-kaarten tbody { display: block; }
  body.kr-portaal-body table.kr-tabel-kaarten tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; padding: 14px 16px; margin-bottom: 8px; background: var(--kr-kaart); border: 1px solid var(--kr-lijn); border-radius: var(--kr-radius-groot); }
  body.kr-portaal-body table.kr-tabel-kaarten td { display: block; padding: 0; border: 0; min-width: 0; overflow-wrap: anywhere; background: none; }
  body.kr-portaal-body table.kr-tabel-kaarten td::before { content: attr(data-kr-kol); display: block; font-size: 11px; font-weight: 600; color: var(--kr-grijs); margin-bottom: 2px; }
  body.kr-portaal-body table.kr-tabel-kaarten td[data-kr-kol=""]::before, body.kr-portaal-body table.kr-tabel-kaarten td:not([data-kr-kol])::before { content: none; }
  body.kr-portaal-body table.kr-tabel-kaarten td[data-kr-kol=""], body.kr-portaal-body table.kr-tabel-kaarten td[colspan] { grid-column: 1 / -1; }
  body.kr-portaal-body table.kr-tabel-kaarten td:empty { display: none; }
  body.kr-portaal-body table.kr-tabel-kaarten td:first-child { grid-column: 1 / -1; font-weight: 700; }
  body.kr-portaal-body table.kr-tabel-kaarten tr[hidden] { display: none; }
  body.kr-portaal-body table.kr-tabel-kaarten tbody tr:hover td { background: none; }
  /* Rijkleuren (te laat, let op) zaten op de cellen; als kaart gaf dat losse gekleurde vlakjes. Op de kaart zelf geen celkleur. */
  body.kr-portaal-body table.kr-tabel-kaarten tbody tr > td { background: transparent !important; }
}

/* 1062: de uitlegzin onder elke paginatitel (63 pagina's) is een regel.
   Is hij langer, dan staat er een puntje-puntje en klapt hij open met een tik
   (script in kop.php). Mart: "overal veel info en tekst, erg druk". */
body.kr-portaal-body .kr-portaal-paginasub, body.kr-portaal-body .kri-kaart-uitleg, body.kr-portaal-body .kri-em-uitleg { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; max-width: 72ch; }
body.kr-portaal-body .kr-sub-meer { cursor: pointer; }
body.kr-portaal-body .kr-sub-meer.kr-sub-open { -webkit-line-clamp: unset; display: block; }
/* Een rij met het hidden-attribuut bleef staan omdat de rij display:flex heeft (Schouw gedaan, leeg, in het dossier). */
body.kr-portaal-body .kri-gegeven-rij[hidden] { display: none; }
/* Dossier op de telefoon: de QR scant niemand van je eigen scherm; de code blijft staan. */
@media (max-width: 700px) {
  body.kr-portaal-body .kri-qr-kaart .kri-qr-houder, body.kr-portaal-body .kri-qr-kaart .kri-qr-url, body.kr-portaal-body .kri-qr-kaart .kri-qr-noot { display: none; }
}
/* 1062: kenplaatmelding in het dossier kort, met de uitleg ingeklapt. */
body.kr-portaal-body .kri-kp-waarom { display: inline; }
body.kr-portaal-body .kri-kp-waarom > summary { display: inline; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
body.kr-portaal-body .kri-kp-waarom[open] { display: block; margin-top: 6px; }
body.kr-portaal-body .kri-kp-knoppen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
body.kr-portaal-body .kri-kp-knoppen .kr-knop { text-decoration: none; }

/* 1064: ingeklapte blokken op de statuspagina (status.php). */
body.kr-portaal-body .kr-st-inklap { margin: 0 0 16px; }
body.kr-portaal-body .kr-st-inklap > summary { cursor: pointer; font-weight: 700; font-size: 14px; padding: 12px 16px; border: 1px solid var(--kr-lijn); border-radius: 12px; background: var(--kr-kaart); color: var(--kr-inkt); }
body.kr-portaal-body .kr-st-inklap[open] > summary { margin-bottom: 14px; }

/* 1067: zachte overgang tussen pagina's (browsers die het kennen); de kop en
   de zijbalk blijven staan, alleen de inhoud wisselt. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* 1157 (Mart: "gekleurde iconen echt lelijk, rustiger"): vervangt de gekleurde
 * icoontegels van 1068. Alle menu-iconen in een kleur, zonder vlak; het
 * onderdeel waar je staat krijgt de tekstkleur. */
body.kr-portaal-body .kr-portaal-nav a .kr-nav-ico { box-sizing: content-box; width: 17px; height: 17px; padding: 4px; border-radius: 0; background: none; color: var(--kr-grijs); opacity: 1; }
body.kr-portaal-body .kr-portaal-nav a.kr-nav-actief .kr-nav-ico { color: currentColor; }
html[data-thema="donker"] body.kr-portaal-body .kr-portaal-nav a .kr-nav-ico { background: none; color: #9FADBC; }
html[data-thema="donker"] body.kr-portaal-body .kr-portaal-nav a.kr-nav-actief .kr-nav-ico { color: #E7ECF2; }

/* 1070: minder ronde knoppen in de kop; de statusstip verschijnt alleen als er
   iets mis is met de back-up. 1106 (Mart): de licht/donker-knop staat weer in de
   rij, naast het accountmenu, omdat hij daar niet te vinden was. */
body.kr-portaal-body .kr-portaal-kop .kr-zij-live.kr-zij-live-ok { display: none; }

/* 1074: verwijderlinks in tabellen waren in donker 3,1:1 (rood op bijna zwart). */
html[data-thema="donker"] body.kr-portaal-body .kr-tabel .kr-verwijder { color: #f0907f; }
/* 1074: in donker te weinig contrast (3,1 tot 3,5:1), gemeten over alle pagina's.
   Amber en rood krijgen de lichtere tinten uit de donkere schaal. */
html[data-thema="donker"] body.kr-portaal-body .kr-b30-sein,
html[data-thema="donker"] body.kr-portaal-body .kr-b30-zwaar,
html[data-thema="donker"] body.kr-portaal-body .kr-fgb-let,
html[data-thema="donker"] body.kr-portaal-body .kr-fgb-verplicht { color: #e8b458; }
html[data-thema="donker"] body.kr-portaal-body .kr-wv-weg,
html[data-thema="donker"] body.kr-portaal-body .kr-ov-aantal-let,
html[data-thema="donker"] body.kr-portaal-body a[onclick^="return krVervallen"] { color: #f0907f !important; }
html[data-thema="donker"] body.kr-portaal-body .kr-sp-terug,
html[data-thema="donker"] body.kr-portaal-body .kr-sp-hint,
html[data-thema="donker"] body.kr-portaal-body .kr-bbp-terug,
html[data-thema="donker"] body.kr-portaal-body .kr-bp-terug,
html[data-thema="donker"] body.kr-portaal-body .kr-lb-terug { color: #9FADBC; }

/* 1075: regel met de proef of een back-up terug te zetten is (status.php). */
body.kr-portaal-body .kr-st-proef { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; border: 1px solid var(--kr-lijn); border-radius: 12px; background: var(--kr-kaart); padding: 12px 16px; margin: 0 0 16px; font-size: 14px; }
body.kr-portaal-body .kr-st-proef-tekst { display: grid; gap: 2px; min-width: 0; flex: 1 1 320px; }
body.kr-portaal-body .kr-st-proef-tekst span { color: var(--kr-grijs); }
body.kr-portaal-body .kr-st-proef-let { border-color: #e8c98a; }
body.kr-portaal-body .kr-st-proef-fout { border-color: #e39a9a; }

/* 1142 nacalculatie: kaart "Nacalculatie" op installatie.php (klassen kr-nc-).
   Alleen variabelen, zodat licht en donker vanzelf meedraaien. Contrast
   nagerekend: ok-donker op ok-zacht 4,86:1 (donker #7FD9A5 op #14301F ruim
   boven 7), let op let-zacht 4,53 (donker 8,9), fout op fout-zacht 5,27
   (donker >= 5,6), fout op kaart 5,86 (donker 5,61). --kr-ok zelf haalt op
   wit maar 3,5:1 en staat daarom niet als tekstkleur in de pil. */
body.kr-portaal-body .kr-nc-klus { margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--kr-lijn); border-radius: 10px; background: var(--kr-soft); color: var(--kr-inkt); font-size: 13px; line-height: 1.5; }
body.kr-portaal-body .kr-nc-pil { display: inline-block; margin: 0 0 14px; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; line-height: 1.45; max-width: 100%; }
body.kr-portaal-body .kr-nc-pil-ok { color: var(--kr-ok-donker); background: var(--kr-ok-zacht); }
body.kr-portaal-body .kr-nc-pil-let { color: var(--kr-let); background: var(--kr-let-zacht); }
body.kr-portaal-body .kr-nc-pil-fout { color: var(--kr-fout); background: var(--kr-fout-zacht); }
/* 1142 review: neutrale pil zolang de cijfers voorlopig zijn (geen groen
   "Op koers" zonder kosten). Inkt op soft: licht 16:1, donker 14:1. */
body.kr-portaal-body .kr-nc-pil-voorlopig { color: var(--kr-inkt); background: var(--kr-soft); border: 1px solid var(--kr-lijn); }
body.kr-portaal-body .kr-nc-tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 16px; }
body.kr-portaal-body .kr-nc-tegel { min-width: 0; padding: 14px 16px; border: 1px solid var(--kr-lijn); border-radius: 12px; background: var(--kr-soft); }
body.kr-portaal-body .kr-nc-tegel-hoofd { background: var(--kr-kaart); border-width: 1.5px; }
body.kr-portaal-body .kr-nc-tegel-lab { overflow-wrap: anywhere; hyphens: auto; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--kr-grijs); }
body.kr-portaal-body .kr-nc-tegel-val { margin: 4px 0 2px; font-size: 24px; font-weight: 800; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; color: var(--kr-inkt); }
body.kr-portaal-body .kr-nc-tegel-hoofd .kr-nc-tegel-val { font-size: 30px; }
body.kr-portaal-body .kr-nc-tegel-sub { font-size: 12px; line-height: 1.45; color: var(--kr-grijs); }
body.kr-portaal-body .kr-nc-min,
body.kr-portaal-body .kr-nc-tabel td.kr-nc-min { color: var(--kr-fout); }
body.kr-portaal-body .kr-nc-tabel { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
body.kr-portaal-body .kr-nc-tabel th { text-align: left; font-weight: 600; color: var(--kr-inkt); padding: 7px 6px; border-bottom: 1px dashed var(--kr-lijn); vertical-align: top; }
body.kr-portaal-body .kr-nc-tabel td { text-align: right; white-space: nowrap; padding: 7px 6px; border-bottom: 1px dashed var(--kr-lijn); vertical-align: top; color: var(--kr-inkt); }
body.kr-portaal-body .kr-nc-tabel tr.kr-nc-som th,
body.kr-portaal-body .kr-nc-tabel tr.kr-nc-som td { font-weight: 700; border-bottom: 1px solid var(--kr-lijn); }
body.kr-portaal-body .kr-nc-tabel tr.kr-nc-eind th,
body.kr-portaal-body .kr-nc-tabel tr.kr-nc-eind td { font-weight: 800; font-size: 14.5px; border-bottom: 0; }
body.kr-portaal-body .kr-nc-tabel tr.kr-nc-eind td.kr-nc-min { color: var(--kr-fout); }
body.kr-portaal-body .kr-nc-tabel tr.kr-nc-met-regels th,
body.kr-portaal-body .kr-nc-tabel tr.kr-nc-met-regels td { border-bottom: 0; padding-bottom: 2px; }
body.kr-portaal-body .kr-nc-tabel tr.kr-nc-regelrij td { text-align: left; white-space: normal; padding-top: 0; }
body.kr-portaal-body .kr-nc-bron { display: block; font-size: 12px; font-weight: 400; color: var(--kr-grijs); margin-top: 1px; }
body.kr-portaal-body .kr-nc-soort { margin: 0; font-weight: 400; }
body.kr-portaal-body .kr-nc-soort > summary { cursor: pointer; font-size: 12px; color: var(--kr-grijs); }
body.kr-portaal-body .kr-nc-regel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 6px 0 0; padding: 8px 10px; border: 1px solid var(--kr-lijn); border-radius: 10px; background: var(--kr-soft); font-size: 12.5px; }
body.kr-portaal-body .kr-nc-regel-meta { flex: 1 1 200px; min-width: 0; color: var(--kr-grijs); line-height: 1.45; overflow-wrap: anywhere; }
body.kr-portaal-body .kr-nc-regel-meta strong { color: var(--kr-inkt); }
body.kr-portaal-body .kr-nc-regel-bedrag { font-weight: 700; color: var(--kr-inkt); font-variant-numeric: tabular-nums; }
body.kr-portaal-body .kr-nc-bon { color: var(--kr-inkt); font-weight: 700; text-decoration: underline; }
body.kr-portaal-body .kr-nc-geen { color: var(--kr-grijs); }
body.kr-portaal-body .kr-nc-weg { border: 0; background: none; color: var(--kr-fout); font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 4px; }
body.kr-portaal-body .kri-meer.kr-nc-meer { display: block; margin: 0 0 10px; }
body.kr-portaal-body .kr-nc-meer > summary { font-size: 13.5px; font-weight: 700; color: var(--kr-inkt); padding: 4px 0; }
body.kr-portaal-body .kr-nc-form { margin: 8px 0 4px; padding: 12px 14px; border: 1px solid var(--kr-lijn); border-radius: 12px; background: var(--kr-soft); }
body.kr-portaal-body .kr-nc-rooster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; margin: 0 0 10px; }
body.kr-portaal-body .kr-nc-rooster label { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--kr-grijs); }
body.kr-portaal-body .kr-nc-rooster input,
body.kr-portaal-body .kr-nc-rooster select,
body.kr-portaal-body .kr-nc-jortt-rij input,
body.kr-portaal-body .kr-nc-jortt-rij select { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 13.5px; font-weight: 400; letter-spacing: 0; text-transform: none; padding: 8px 10px; border: 1.5px solid var(--kr-lijn); border-radius: 9px; background: var(--kr-veld-bg); color: var(--kr-inkt); }
body.kr-portaal-body .kr-nc-form .kr-knop-licht { margin-left: 6px; }
body.kr-portaal-body .kr-nc-jortt-rij { display: grid; grid-template-columns: minmax(0, 1fr) 150px 110px auto; align-items: center; gap: 8px; padding: 8px 10px; margin: 0 0 6px; border: 1px solid var(--kr-lijn); border-radius: 10px; background: var(--kr-kaart); font-size: 12.5px; }
body.kr-portaal-body .kr-nc-jortt-rij:hover { background: var(--kr-soft); }
/* 1142 review: geen opacity meer (grijs op wit zakte naar 3,5:1). Het verschil
   zit in vlak en gestippelde rand; grijs op soft haalt licht 4,9 (fris 4,5),
   donker 8,3. */
body.kr-portaal-body .kr-nc-jortt-al,
body.kr-portaal-body .kr-nc-jortt-al:hover { background: var(--kr-soft); border-style: dashed; }
body.kr-portaal-body .kr-nc-jortt-al .kr-nc-regel-meta { color: var(--kr-grijs); }
/* Omzetdocumenten uit Jortt die niet meetellen: zelfde taal als hierboven. */
body.kr-portaal-body .kr-nc-regel-uit { border-style: dashed; }
body.kr-portaal-body .kr-nc-regel-uit .kr-nc-regel-bedrag { font-weight: 400; color: var(--kr-grijs); text-decoration: line-through; }
body.kr-portaal-body .kr-nc-doc-knop { padding: 5px 10px; font-size: 12.5px; }
body.kr-portaal-body .kr-nc-jortt-lijst { font-size: 13px; color: var(--kr-grijs); }
body.kr-portaal-body .kr-nc-status { min-height: 1em; margin-top: 8px; font-size: 13.5px; font-weight: 700; color: var(--kr-fout); }
@media (max-width: 520px) {
  body.kr-portaal-body .kr-nc-rooster { grid-template-columns: minmax(0, 1fr); }
  body.kr-portaal-body .kr-nc-jortt-rij { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  body.kr-portaal-body .kr-nc-jortt-rij .kr-nc-regel-meta { grid-column: 1 / -1; }
  body.kr-portaal-body .kr-nc-tegel-hoofd .kr-nc-tegel-val { font-size: 26px; }
}
/* Donker: de variabelen hierboven draaien al mee; randen en hover hier nog eens
   expliciet, zodat niets terugvalt op een lichte tint. */
html[data-thema="donker"] body.kr-portaal-body .kr-nc-tegel-hoofd { background: var(--kr-kaart); border-color: var(--kr-lijn); }
html[data-thema="donker"] body.kr-portaal-body .kr-nc-jortt-rij { background: var(--kr-kaart); border-color: var(--kr-lijn); }
html[data-thema="donker"] body.kr-portaal-body .kr-nc-jortt-rij:hover { background: var(--kr-soft); }
html[data-thema="donker"] body.kr-portaal-body .kr-nc-jortt-al,
html[data-thema="donker"] body.kr-portaal-body .kr-nc-jortt-al:hover { background: var(--kr-soft); border-color: var(--kr-lijn); border-style: dashed; }
html[data-thema="donker"] body.kr-portaal-body .kr-nc-pil-voorlopig { color: var(--kr-inkt); background: var(--kr-soft); border-color: var(--kr-lijn); }
html[data-thema="donker"] body.kr-portaal-body .kr-nc-regel-uit { border-color: var(--kr-lijn); border-style: dashed; }
html[data-thema="donker"] body.kr-portaal-body .kr-nc-regel-uit .kr-nc-regel-bedrag { color: var(--kr-grijs); }
html[data-thema="donker"] body.kr-portaal-body .kr-nc-regel,
html[data-thema="donker"] body.kr-portaal-body .kr-nc-form,
html[data-thema="donker"] body.kr-portaal-body .kr-nc-klus { background: var(--kr-soft); border-color: var(--kr-lijn); }

/* 1163: levensloop van het dossier op installatie.php (klassen kr-lv-).
   Rustige stappenbalk zoals in het voorbeeld: dunne lijn, rondjes, klaar is
   een gevuld inktrondje met vinkje, de stap van nu een ring, overgeslagen een
   streepje. Alleen tokens; inkt op kaart haalt licht 16:1, donker 13:1, grijs
   op kaart licht 5,0 en donker 7,4. */
body.kr-portaal-body .kr-lv-balk { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 0 18px; padding: 16px 10px 14px; background: var(--kr-kaart); border: 1px solid var(--kr-lijn); border-radius: 16px; position: relative; }
body.kr-portaal-body .kr-lv-stap { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; min-width: 0; padding: 0 4px; font-size: 12.5px; line-height: 1.35; color: var(--kr-grijs); }
body.kr-portaal-body .kr-lv-stap::before { content: ""; position: absolute; top: 11px; left: calc(-50% + 16px); right: calc(50% + 16px); height: 1px; background: var(--kr-lijn); }
body.kr-portaal-body .kr-lv-stap:first-child::before { display: none; }
body.kr-portaal-body .kr-lv-klaar::before, body.kr-portaal-body .kr-lv-nu::before { background: var(--kr-inkt); opacity: .35; }
body.kr-portaal-body .kr-lv-bol { display: block; position: relative; width: 22px; height: 22px; margin: 0 0 6px; border-radius: 50%; border: 1.5px solid var(--kr-lijn); background: var(--kr-kaart); box-sizing: border-box; }
body.kr-portaal-body .kr-lv-klaar .kr-lv-bol { background: var(--kr-inkt); border-color: var(--kr-inkt); }
body.kr-portaal-body .kr-lv-klaar .kr-lv-bol::after { content: ""; position: absolute; left: 6.5px; top: 3.5px; width: 5px; height: 9px; border: solid var(--kr-kaart); border-width: 0 2px 2px 0; transform: rotate(45deg); }
body.kr-portaal-body .kr-lv-nu .kr-lv-bol { border-color: var(--kr-inkt); box-shadow: inset 0 0 0 4px var(--kr-kaart), inset 0 0 0 11px var(--kr-inkt); }
body.kr-portaal-body .kr-lv-geen .kr-lv-bol::after { content: ""; position: absolute; left: 5px; right: 5px; top: 9.5px; height: 1.5px; background: var(--kr-grijs); }
body.kr-portaal-body .kr-lv-naam { font-size: 13px; font-weight: 600; color: var(--kr-grijs); }
body.kr-portaal-body .kr-lv-klaar .kr-lv-naam, body.kr-portaal-body .kr-lv-nu .kr-lv-naam { color: var(--kr-inkt); }
body.kr-portaal-body .kr-lv-nu .kr-lv-naam { font-weight: 800; }
body.kr-portaal-body .kr-lv-tekst { font-size: 12px; color: var(--kr-grijs); overflow-wrap: anywhere; }
@media (max-width: 560px) {
  body.kr-portaal-body .kr-lv-balk { padding: 14px 4px 12px; }
  body.kr-portaal-body .kr-lv-stap { padding: 0 2px; }
  body.kr-portaal-body .kr-lv-naam { font-size: 11.5px; }
  body.kr-portaal-body .kr-lv-tekst { font-size: 10.5px; }
}
html[data-thema="donker"] body.kr-portaal-body .kr-lv-balk { background: var(--kr-kaart); border-color: #262D36; }
html[data-thema="donker"] body.kr-portaal-body .kr-lv-stap::before { background: #262D36; }
html[data-thema="donker"] body.kr-portaal-body .kr-lv-klaar::before, html[data-thema="donker"] body.kr-portaal-body .kr-lv-nu::before { background: #E7ECF2; opacity: .35; }
html[data-thema="donker"] body.kr-portaal-body .kr-lv-bol { border-color: #262D36; background: var(--kr-kaart); }
html[data-thema="donker"] body.kr-portaal-body .kr-lv-klaar .kr-lv-bol { background: #E7ECF2; border-color: #E7ECF2; }
html[data-thema="donker"] body.kr-portaal-body .kr-lv-nu .kr-lv-bol { border-color: #E7ECF2; box-shadow: inset 0 0 0 4px var(--kr-kaart), inset 0 0 0 11px #E7ECF2; }
html[data-thema="donker"] body.kr-portaal-body .kr-lv-naam, html[data-thema="donker"] body.kr-portaal-body .kr-lv-tekst { color: #9FADBC; }
html[data-thema="donker"] body.kr-portaal-body .kr-lv-klaar .kr-lv-naam, html[data-thema="donker"] body.kr-portaal-body .kr-lv-nu .kr-lv-naam { color: #E7ECF2; }
@media print { .kr-lv-balk { display: none !important; } }

/* 1165: dashboard in de rustige stijl van de bovenbalk (klassen kr-dash-).
   - De begroeting kleiner: 52px vroeg meer aandacht dan de agenda eronder.
   - De zoekbalk midden op de pagina is op een breed scherm dubbel met het
     zoekveld in de bovenbalk; daar valt hij weg. Op de telefoon blijft hij,
     want daar zit het zoekveld achter het menu.
   - De tien tellers als witte kaarten in twee rijen van vijf, zonder gekleurd
     icoonvlak; het getal groot in inkt. Aandacht blijft amber, nul blijft stil.
     Contrast: inkt op kaart 16:1, grijs op kaart 5,0:1, amber #7a5f1c op wit
     6,1:1; donker inkt 13:1, grijs 7,4:1, amber #e6b447 9:1. */
body.kr-portaal-body .kr-groet { margin-bottom: 26px; }
body.kr-portaal-body .kr-groet-titel { font-size: clamp(28px, 3.2vw, 36px); letter-spacing: -0.03em; line-height: 1.1; }
body.kr-portaal-body .kr-groet-hand { display: none; }
body.kr-portaal-body .kr-groet-sub { font-size: 14.5px; margin-top: 6px; }
@media (min-width: 941px) {
  body.kr-portaal-body .kr-dash-zoekbalk { display: none; }
  body.kr-portaal-body .kr-dash-cijfers { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
}
body.kr-portaal-body .kr-dash-cijfers .kr-dash-cijfer { background: var(--kr-kaart); border: 1px solid var(--kr-lijn); border-radius: 16px; padding: 14px 16px 15px; }
body.kr-portaal-body .kr-dash-cijfers .kr-dash-cijfer:hover { transform: none; border-color: var(--kr-grijs); box-shadow: none; }
body.kr-portaal-body .kr-dash-cijfers .kr-dc-ico,
body.kr-portaal-body .kr-dash-cijfers .kr-dash-cijfer.kr-dc-stil .kr-dc-ico { background: none; border: 0; color: var(--kr-grijs); width: 18px; height: 18px; margin-bottom: 8px; justify-content: flex-start; }
body.kr-portaal-body .kr-dash-cijfers .kr-dc-ico svg { width: 17px; height: 17px; }
body.kr-portaal-body .kr-dash-cijfers .kr-dc-ico.kr-dc-ico-aandacht { background: none; color: #7a5f1c; }
body.kr-portaal-body .kr-dash-cijfers .kr-dc-label { font-size: 12.5px; min-height: 0; }
body.kr-portaal-body .kr-dash-cijfers .kr-dc-waarde { font-size: 28px; color: var(--kr-inkt); padding-top: 8px; }
body.kr-portaal-body .kr-dash-cijfers .kr-dc-waarde.kr-dc-lang { font-size: 20px; }
body.kr-portaal-body .kr-dash-cijfers .kr-dc-waarde.kr-dc-aandacht { color: #7a5f1c; }
body.kr-portaal-body .kr-dash-cijfers .kr-dash-cijfer.kr-dc-stil { background: var(--kr-kaart); }
body.kr-portaal-body .kr-dash-cijfers .kr-dash-cijfer.kr-dc-stil .kr-dc-waarde { color: var(--kr-grijs); font-weight: 700; }
html[data-thema="donker"] body.kr-portaal-body .kr-dash-cijfers .kr-dash-cijfer,
html[data-thema="donker"] body.kr-portaal-body .kr-dash-cijfers .kr-dash-cijfer.kr-dc-stil { background: var(--kr-kaart); border-color: #262D36; }
html[data-thema="donker"] body.kr-portaal-body .kr-dash-cijfers .kr-dash-cijfer:hover { border-color: #9FADBC; }
html[data-thema="donker"] body.kr-portaal-body .kr-dash-cijfers .kr-dc-ico { color: #9FADBC; }
html[data-thema="donker"] body.kr-portaal-body .kr-dash-cijfers .kr-dc-ico.kr-dc-ico-aandacht,
html[data-thema="donker"] body.kr-portaal-body .kr-dash-cijfers .kr-dc-waarde.kr-dc-aandacht { color: #e6b447; }
html[data-thema="donker"] body.kr-portaal-body .kr-dash-cijfers .kr-dc-waarde { color: #E7ECF2; }
html[data-thema="donker"] body.kr-portaal-body .kr-dash-cijfers .kr-dash-cijfer.kr-dc-stil .kr-dc-waarde { color: #9FADBC; }

/* 1166: kop van het dossier zoals in het voorbeeld (klassen kri-kop-). Het
   nummer als kleine regel erboven, de klantnaam groot, het adres eronder en
   de pillen op een eigen regel. Zelfde gegevens, alleen anders gerangschikt.
   Grijs op pagina licht 5,0:1, donker 7,4:1. */
body.kr-portaal-body .kr-portaal-paginatitel.kri-kop { display: block; margin-bottom: 18px; }
body.kr-portaal-body .kri-kop .kri-kop-nr { display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--kr-grijs); margin: 0 0 6px; line-height: 1.3; }
body.kr-portaal-body .kri-kop .kri-kop-nr .kri-geennr { font-weight: 700; }
body.kr-portaal-body .kri-kop .kri-kop-nr .kri-demo-balk { font-size: 11px; padding: 2px 9px; letter-spacing: .1em; }
body.kr-portaal-body .kri-kop .kri-kop-naam { display: block; font-size: clamp(26px, 3vw, 34px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: var(--kr-inkt); overflow-wrap: anywhere; }
body.kr-portaal-body .kri-kop .kri-kop-adres { display: block; font-size: 15px; font-weight: 400; color: var(--kr-grijs); margin-top: 6px; letter-spacing: 0; }
body.kr-portaal-body .kri-kop .kri-kop-pillen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
body.kr-portaal-body .kri-kop .kri-kop-pillen .kri-status-pil,
body.kr-portaal-body .kri-kop .kri-kop-pillen .kri-akkoord-badge { margin-left: 0; }
body.kr-portaal-body .kri-kop .kri-kop-pillen [hidden] { display: none; }
html[data-thema="donker"] body.kr-portaal-body .kri-kop .kri-kop-nr,
html[data-thema="donker"] body.kr-portaal-body .kri-kop .kri-kop-adres { color: #9FADBC; }
html[data-thema="donker"] body.kr-portaal-body .kri-kop .kri-kop-naam { color: #E7ECF2; }

/* 1167: de zoekveldstijl van .kr-filterbalk werkt weer (zie het commentaar bij
   .kr-dash-sectie). Op installaties staat het veld in een rij met knoppen, dus
   daar geen maximale breedte. Donker: veldvlak en rand uit de donkere schaal,
   het vergrootglas in stil grijs #9FADBC. */
body.kr-portaal-body .kr-filterbalk input[type="text"] { background-color: var(--kr-kaart); }
body.kr-portaal-body .kr-filterbalk:has(#kr-inst-filter) { max-width: none; }
html[data-thema="donker"] body.kr-portaal-body .kr-filterbalk input[type="text"] {
  background: var(--kr-veld-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239FADBC' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E") no-repeat 15px center;
  border-color: #262D36; color: #E7ECF2; box-shadow: none;
}

/* 1167: installatielijst in de kaartstijl: witte rijen en tellers op de grijze
   pagina, zoals het dashboard. */
body.kr-portaal-body .kr-instmap { background: var(--kr-kaart); border-radius: 14px; }
body.kr-portaal-body .kr-statbalk .kr-stat { background: var(--kr-kaart); border-radius: 16px; }
html[data-thema="donker"] body.kr-portaal-body .kr-instmap,
html[data-thema="donker"] body.kr-portaal-body .kr-statbalk .kr-stat { background: var(--kr-kaart); border-color: #262D36; }
/* Op werkbonnen staat het veld in een flexrij en kromp het tot de breedte van
   een kaal veld; nu mag het groeien tot de 440px van .kr-filterbalk. */
body.kr-portaal-body .kr-bwv-rij .kr-filterbalk { flex: 1 1 320px; }

/* 1168: de schouwhulp (tools/schouwhulp.php) zet zijn hulpregels inline in
   #6b7280; in donker is dat 3,3:1. Alleen die kleur, alleen in donker. */
html[data-thema="donker"] body.kr-portaal-body [style*="color:#6b7280"] { color: #9FADBC !important; }
/* 1168: in het mailvoorbeeld (mailing.php) staan voettekst en bedrijfsnaam
   inline in #63696f; in donker is dat 3,3:1. Alleen daar, alleen in donker;
   de verstuurde mail zelf verandert niet. */
html[data-thema="donker"] body.kr-portaal-body .kr-ml-voorbeeld [style*="color:#63696f"] { color: #9FADBC !important; }