/* ============================================================
   RTBFS ERP - design system
   Huisstijl: Dennengroen, Smaragd, Amber, Goud, Creme, Inkt, Steen
   Koppen: Cormorant Garamond - Body: Manrope
   Fonts staan lokaal in /assets/fonts (geen CDN, geen AVG-risico).
   ============================================================ */

/* Lettertypes staan lokaal in /assets/fonts. Geen Google-CDN: dat zou bij elke
   paginaweergave het IP-adres van de gebruiker naar een derde partij sturen, en
   dat is voor een interne toepassing met klantgegevens onnodig.
   Cormorant Garamond is een variabel lettertype: één bestand dekt alle gewichten. */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond.ttf') format('truetype-variations'),
       url('../fonts/cormorant-garamond.ttf') format('truetype');
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-400.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-600.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-700.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Wat verborgen is, blijft verborgen.
   De browser geeft [hidden] van zichzelf display:none mee, maar elke eigen regel
   met een display - en dat zijn er hier veel, want bijna alles is flex of grid -
   wint het daarvan. Zonder deze regel stond de bedieningsbalk van het dashboard
   permanent open. Daarom hier, boven alles, en met voorrang. */
[hidden] { display: none !important; }

:root {
  --dennengroen: #173A2C;
  --smaragd:     #2F6B4F;
  --amber:       #D5832A;
  --goud:        #E7B53C;
  --creme:       #FBF8F1;
  --inkt:        #1C2620;
  --steen:       #6B756E;

  --wit:         #FFFFFF;
  --lijn:        #E3DED2;
  --lijn-zacht:  #EFEAE0;
  --rood:        #A03323;
  --rood-zacht:  #FBECE9;
  --groen-zacht: #EAF2ED;
  --amber-zacht: #FCF3E6;

  --kop:  'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
  --body: 'Manrope', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --r:      10px;
  --r-klein: 6px;
  --schaduw: 0 1px 3px rgba(28, 38, 32, .08);
  --schaduw-op: 0 6px 20px rgba(28, 38, 32, .14);
  --duur: 180ms;
  --zijbalk: 232px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--creme);
  color: var(--inkt);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--kop); font-weight: 600; margin: 0 0 .4em; line-height: 1.15; }
h1 { font-size: 30px; letter-spacing: -.01em; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }

a { color: var(--smaragd); text-decoration: none; }
a:hover { color: var(--dennengroen); text-decoration: underline; }

.eyebrow {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .12em; color: var(--steen); margin-bottom: 6px;
}

/* ---------------------------------------------------------- layout */
.app { display: flex; min-height: 100vh; }

.zijbalk {
  width: var(--zijbalk); flex: 0 0 var(--zijbalk);
  background: var(--dennengroen); color: var(--creme);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.zijbalk__logo { display: block; padding: 22px 20px 16px; text-decoration: none; }
.zijbalk__logo:hover { text-decoration: none; }
.zijbalk__logo:hover .zijbalk__merk { color: #fff; }
.zijbalk__logo:focus-visible { outline: 2px solid var(--goud); outline-offset: -4px; }
.zijbalk__logo img { width: 46px; height: 46px; display: block; }
.zijbalk__merk { font-family: var(--kop); font-size: 18px; margin-top: 10px; color: var(--creme); }
.zijbalk__tag  { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--goud); }

.nav { flex: 1; overflow-y: auto; padding: 8px 10px; }
.nav a {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; margin-bottom: 2px;
  color: rgba(251, 248, 241, .78); border-radius: var(--r-klein);
  font-size: 14px; text-decoration: none;
  transition: background var(--duur) ease-out, color var(--duur) ease-out;
}
.nav a:hover { background: rgba(251, 248, 241, .08); color: var(--creme); text-decoration: none; }
.nav a.actief { background: var(--smaragd); color: #fff; font-weight: 600; }
.nav__groep { font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(251,248,241,.4); padding: 14px 12px 6px; }

.zijbalk__voet { padding: 14px 16px; border-top: 1px solid rgba(251,248,241,.12); font-size: 12.5px; }
.zijbalk__voet a { color: rgba(251,248,241,.6); }

.hoofd { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.balk {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 20px; border-bottom: 1px solid var(--lijn); background: var(--creme);
  position: sticky; top: 0; z-index: 20;
}
.balk h1 { margin: 0; font-size: 24px; }
/* Een bovengrens op de leesbreedte. Op een breed scherm rekt een tabel van zeven
   kolommen anders uit tot bijna twee meter beeldlijn: de kolommen kloppen nog,
   maar de tekst in elke cel staat links tegen een groot leeg vlak, en uw oog moet
   die afstand telkens overbruggen. Onder deze grens verandert er niets. */
.inhoud { padding: 14px 20px 34px; max-width: 1560px; }

/* ---------------------------------------------------------- kaarten */
.kaart {
  background: var(--wit); border: 1px solid var(--lijn);
  border-radius: var(--r); box-shadow: var(--schaduw); padding: 12px 14px; margin-bottom: 10px;
}
.kaart__kop { display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.kaart__kop h2, .kaart__kop h3 { margin: 0; }

/* ---------------------------------------------------------- inklapbare kaart */
/* Een fiche telt al gauw acht blokken. Alles tegelijk openzetten maakt de pagina
   lang en druk, terwijl u meestal maar één ding komt doen. Wat u dagelijks nodig
   hebt staat daarom open; de rest zit achter een kop die u openklikt. De browser
   doet het onthouden van open en dicht zelf - geen JavaScript nodig, en het werkt
   ook met het toetsenbord. */
details.kaart > summary {
  cursor: pointer; list-style: none; user-select: none;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-family: var(--kop); font-size: 18px; font-weight: 600; color: var(--inkt);
  margin: -2px 0 0;
}
details.kaart > summary::-webkit-details-marker { display: none; }
details.kaart > summary::after {
  content: '›'; font-family: var(--body); font-size: 19px; line-height: 1;
  color: var(--steen); transform: rotate(90deg); transition: transform var(--duur) ease-out;
}
details.kaart[open] > summary::after { transform: rotate(-90deg); }
details.kaart[open] > summary { margin-bottom: 10px; border-bottom: 1px solid var(--lijn-zacht);
  padding-bottom: 8px; }
details.kaart > summary:hover { color: var(--dennengroen); }
details.kaart > summary:focus-visible {
  outline: 2px solid var(--smaragd); outline-offset: 3px; border-radius: var(--r-klein);
}
/* Het aantal naast de kop: zo ziet u wat erin zit zonder te openen. De
   automatische rechtermarge duwt het pijltje naar de rand, zodat kop en aantal
   bij elkaar blijven staan in plaats van over de breedte uiteen te vallen. */
.vouwtelling { font-family: var(--body); font-size: 12.5px; font-weight: 400;
  color: var(--steen); margin-right: auto; }

.raster { display: grid; gap: 12px; }
.raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Rastervakken krijgen van de browser standaard min-width: auto. Brede inhoud -
   een tabel, een grafiek - duwt zo'n vak dan breder dan zijn kolom, en het schuift
   over zijn buurman. Deze regel houdt elk vak binnen zijn kolom. */
.raster > * { min-width: 0; }
.raster > * > .kaart { max-width: 100%; }

/* ---------------------------------------------------------- kerncijfers */
.kpi { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r);
  padding: 11px 13px; box-shadow: var(--schaduw); min-width: 0; }
.kpi__label { font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; color: var(--steen); }
.kpi__cijfer { font-family: var(--kop); font-size: 26px; line-height: 1.1; margin-top: 4px;
  color: var(--dennengroen); overflow-wrap: anywhere; }
.kpi__voet { font-size: 12.5px; color: var(--steen); margin-top: 4px; }
/* Elk kerncijfer krijgt een streepje, en de kleur zegt wat voor getal het is.
   Eén kaart met een streepje en drie zonder leest als "deze is belangrijk en de
   rest niet", terwijl het gewoon vier getallen naast elkaar zijn. Vier kleuren,
   vier soorten:

     in       geld dat binnenkomt          smaragd
     uit      geld dat buitengaat          amber
     saldo    wat er overblijft            dennengroen
     vooruit  wat nog moet komen           goud

   Rood blijft voorbehouden aan wat misloopt - vervallen, tekort - en staat
   daarom niet in dat rijtje. */
.kpi { border-left: 3px solid var(--lijn); }
.kpi--in      { border-left-color: var(--smaragd); }
.kpi--uit     { border-left-color: var(--amber); }
.kpi--saldo   { border-left-color: var(--dennengroen); }
.kpi--vooruit { border-left-color: var(--goud); }
.kpi--let     { border-left-color: var(--rood); }

.kpi--in .kpi__cijfer,
.kpi--saldo .kpi__cijfer { color: var(--dennengroen); }
.kpi--let .kpi__cijfer   { color: var(--rood); }

/* De oude namen blijven werken, zodat er nergens een streepje wegvalt. */
.kpi--accent { border-left-color: var(--amber); }
.kpi--goed .kpi__cijfer { color: var(--smaragd); }
.kpi--goed   { border-left-color: var(--smaragd); }
.kpi--slecht .kpi__cijfer { color: var(--rood); }
.kpi--slecht { border-left-color: var(--rood); }

/* ---------------------------------------------------------- tabellen */
.tabel-omhulsel { overflow-x: auto; }
table.tabel { width: 100%; border-collapse: collapse; font-size: 13.5px; table-layout: auto; }
table.tabel th {
  text-align: left; font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .09em; color: var(--steen);
  padding: 6px 9px; border-bottom: 1px solid var(--lijn); white-space: nowrap;
}
table.tabel td { padding: 7px 9px; border-bottom: 1px solid var(--lijn-zacht); vertical-align: top; }
table.tabel tbody tr:hover { background: var(--creme); }
table.tabel tfoot td { font-weight: 600; border-top: 2px solid var(--lijn); border-bottom: none; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* De kop van een cijferkolom staat boven zijn cijfers: rechts. "table.tabel th"
   (links) woog zwaarder dan ".num", zodat de kop links bleef staan en de cijfers
   rechts (verbeterlijst ronde 3, punt 129). Vinkjes per kolom: .midden. */
table.tabel th.num { text-align: right; }
table.tabel th.midden, table.tabel td.midden { text-align: center; }

/* Terugkerende kolomsoorten krijgen een vaste breedte. Zo lijnen twee tabellen
   met dezelfde kolommen (bv. de maandkaarten bij Verslagen) exact gelijk uit,
   in plaats van elk hun eigen breedte te kiezen op basis van de inhoud. */
table.tabel th.num      { width: 112px; }
table.tabel th.k-datum  { width: 104px; }
table.tabel th.k-kort   { width: 76px; }
table.tabel th.k-status { width: 108px; }
table.tabel th.k-breed  { width: 190px; }
.tabel--vast { table-layout: fixed; }
.tabel--vast td { overflow-wrap: anywhere; }

/* Kolombreedtes in verhouding, voor de lijsten waar u dagelijks in werkt.
   Zonder deze maten verdeelt de browser de ruimte naar de lengte van de tekst
   die er toevallig in staat: een lange e-mail duwt zijn kolom breed, een lege
   sector krimpt tot niets, en bij elke andere selectie verspringt alles. Met
   vaste verhoudingen staat een kolom altijd op dezelfde plaats, ook als de
   inhoud nog niet is ingevuld. */
.tabel--lijst { table-layout: fixed; }
.tabel--lijst td { overflow-wrap: anywhere; }
.tabel--lijst th.k-naam  { width: 21%; }
.tabel--lijst th.k-tekst { width: 17%; }
.tabel--lijst th.k-smal  { width: 11%; }

/* Cijfertabellen: het euroteken staat in de kolomkop, de cellen bevatten enkel
   getallen. Zo lijnen komma's en eenheden zuiver onder elkaar uit - met het teken
   in elke cel schuift alles door de wisselende breedte. */
table.tabel--cijfers td.num,
table.tabel--cijfers th.num { font-variant-numeric: tabular-nums; }
table.tabel--cijfers td:first-child { width: 40%; }

/* Uitklapbare detailtabel onder een grafiek, zodat het dashboard kort blijft. */
.uitklap { margin-top: 12px; }
.uitklap > summary {
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--steen);
  padding: 6px 0; list-style: none; user-select: none;
}
.uitklap > summary::-webkit-details-marker { display: none; }
.uitklap > summary::before { content: '▸ '; color: var(--amber); }
.uitklap[open] > summary::before { content: '▾ '; }
.uitklap > summary:hover { color: var(--inkt); }
.uitklap > summary:focus-visible { outline: 2px solid var(--smaragd); outline-offset: 2px; }
/* Een lege lijst is geen fout: gewone tekst, niet schuin (verbeterlijst ronde 3, punt 132). */
.leeg { padding: 28px; text-align: center; color: var(--steen); font-style: normal; }
/* De volledige lege toestand (app/Views/gedeeld/leeg.php): klein icoon, gewone
   titel, één zin en één knop naar de volgende stap, zoals bij Marketing. */
.leegstaat { display: grid; justify-items: center; gap: 6px; text-align: center;
  padding: 26px 18px; color: var(--steen); font-size: 13.5px; }
.leegstaat__ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--groen-zacht); color: var(--smaragd); margin-bottom: 2px; }
.leegstaat__ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.leegstaat strong { color: var(--inkt); font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.leegstaat p { margin: 0; max-width: 46ch; line-height: 1.5; }
.leegstaat .knop { margin-top: 6px; }

/* Vast contactpunt van het merk onderaan elke klantpagina (Merk::contactregel(),
   ronde 3, punt 128). Neemt de tekstkleur van de pagina over, licht of donker. */
.merkcontact { margin: 22px auto 0; max-width: 640px; text-align: center; font-size: 12.5px;
  line-height: 1.6; color: inherit; opacity: .78; overflow-wrap: anywhere; }
.merkcontact a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.merkcontact a:hover { opacity: 1; }

/* ---------------------------------------------------------- knoppen */
/* Huisstijl: amber is de call-to-action-kleur, groen draagt de structuur. */
.knop {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border: 1px solid transparent; border-radius: var(--r-klein);
  background: var(--amber); color: #fff; font-family: var(--body);
  font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: background var(--duur) ease-out, border-color var(--duur) ease-out;
}
.knop:hover { background: #B96E1F; color: #fff; text-decoration: none; }
.knop:focus-visible { outline: 2px solid var(--dennengroen); outline-offset: 2px; }
.knop--amber { background: var(--amber); }
.knop--amber:hover { background: #B96E1F; }
.knop--groen { background: var(--smaragd); }
.knop--groen:hover { background: var(--dennengroen); }
.knop--stil { background: transparent; color: var(--inkt); border-color: var(--lijn); }
/* Bouwknoppen voor de voorbeeldsite, in de kleur van het programma (17/10/2026). */
.knop--replit { background: #F26207; border-color: #F26207; color: #fff; }
.knop--replit:hover { background: #D45405; border-color: #D45405; color: #fff; }
.knop--claude { background: #C15F3C; border-color: #C15F3C; color: #fff; }
.knop--claude:hover { background: #A54E30; border-color: #A54E30; color: #fff; }
.knop--stil:hover { background: var(--wit); border-color: var(--steen); color: var(--inkt); }
.knop--gevaar { background: var(--rood); }
.knop--gevaar:hover { background: #7F271B; }
.knop--klein { padding: 5px 10px; font-size: 12.5px; }
.knop[disabled] { opacity: .5; cursor: not-allowed; }

.knoppenrij { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------------------------------------------------------- tabbladen */
/* align-items: flex-end houdt elk tabblad op de onderlijn staan. Zonder dat rekt
   een hoger element in dezelfde balk - bij Facturen staat daar de keuzelijst voor
   het boekjaar - de hele rij uit, en zweeft het oranje streepje van het actieve
   tabblad los boven de lijn. Op pagina's zonder zo'n element viel dat niet op;
   daar leek alles in orde. */
.tabs {
  display: flex; align-items: flex-end; gap: 2px;
  border-bottom: 1px solid var(--lijn);
  margin-bottom: 18px; overflow-x: auto;
}
.tabs a, .tabs button {
  font-family: var(--body); font-size: 13.5px; font-weight: 600;
  padding: 10px 16px; border: none; background: none; cursor: pointer;
  color: var(--steen); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--duur) ease-out, border-color var(--duur) ease-out;
}
.tabs a:hover, .tabs button:hover { color: var(--inkt); text-decoration: none; }
.tabs a.actief, .tabs button[aria-selected="true"] {
  color: var(--dennengroen); border-bottom-color: var(--amber);
}
.tabs a:focus-visible, .tabs button:focus-visible {
  outline: 2px solid var(--smaragd); outline-offset: -2px;
}
.tabs .telling {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--lijn-zacht); color: var(--steen); font-size: 11px;
}

/* ---------------------------------------------------------- grafiekbediening */
.grafiekbalk {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--lijn-zacht);
}
.knopgroep { display: inline-flex; border: 1px solid var(--lijn); border-radius: var(--r-klein);
  overflow: hidden; background: var(--wit); }
.knopgroep a {
  padding: 6px 13px; font-size: 12.5px; font-weight: 600; color: var(--steen);
  text-decoration: none; border-right: 1px solid var(--lijn); white-space: nowrap;
  transition: background var(--duur) ease-out, color var(--duur) ease-out;
}
.knopgroep a:last-child { border-right: none; }
.knopgroep a:hover { background: var(--creme); color: var(--inkt); text-decoration: none; }
.knopgroep a.aan { background: var(--dennengroen); color: var(--creme); }
.knopgroep a:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }

/* ---------------------------------------------------------- filterbalk */
.filters {
  display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r);
  padding: 14px 16px; margin-bottom: 18px; box-shadow: var(--schaduw);
}
.filters .veld { margin: 0; min-width: 150px; }
.filters .veld--breed { min-width: 240px; flex: 1; }

/* Invulvelden ín een tabel (bv. de kostencategorieën): rustig en compact.
   Pas bij aanwijzen of focus tonen ze zich als veld, zo blijft de tabel leesbaar. */
table.tabel td input[type=text],
table.tabel td input[type=number],
table.tabel td select {
  width: 100%; min-width: 90px; padding: 5px 8px;
  font-family: var(--body); font-size: 13.5px; color: var(--inkt);
  background: transparent; border: 1px solid transparent; border-radius: var(--r-klein);
  transition: border-color var(--duur) ease-out, background var(--duur) ease-out,
              box-shadow var(--duur) ease-out;
}
table.tabel td input[type=text]:hover,
table.tabel td input[type=number]:hover,
table.tabel td select:hover { border-color: var(--lijn); background: var(--wit); }
table.tabel td input[type=text]:focus,
table.tabel td input[type=number]:focus,
table.tabel td select:focus {
  outline: none; border-color: var(--smaragd); background: var(--wit);
  box-shadow: 0 0 0 3px rgba(47, 107, 79, .12);
}
table.tabel td input[type=number],
table.tabel td input[name*="[budget]"] { text-align: right; font-variant-numeric: tabular-nums; }
table.tabel td select { cursor: pointer; }
table.tabel td input[type=checkbox] { accent-color: var(--smaragd); width: 15px; height: 15px; }

/* Klikbare tabelrij: de hele regel opent het detail. */
/* Klikbare rijen lichten op: achtergrond, tekst in de hoofdkleur en een streep
   onder wat als link leest. Zo ziet u meteen waar u kunt klikken en waar niet. */
tr.klikbaar { cursor: pointer; transition: background-color .12s ease; }
tr.klikbaar:hover { background: var(--creme); }
tr.klikbaar:hover td { color: var(--dennengroen); }
tr.klikbaar:hover td strong, tr.klikbaar:hover td:first-child { color: var(--smaragd); }
tr.klikbaar:hover td a { text-decoration: underline; }
.tabel td a:hover { text-decoration: underline; color: var(--smaragd); }
.tabel th { cursor: default; }
tr.klikbaar:focus-visible { outline: 2px solid var(--smaragd); outline-offset: -2px; }

/* ---------------------------------------------------------- formulieren */
.veld { margin-bottom: 10px; }

.veld label {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: .04em;
  color: var(--steen); margin-bottom: 5px;
}

/* Eén opmaak voor elk invulveld. De opsomming is expliciet: type="month",
   type="search" en type="file" zien er anders uit dan de rest zodra de browser
   ze zelf mag opmaken, en dat viel meteen op tussen de andere velden. */
.veld input[type=text],
.veld input[type=email],
.veld input[type=password],
.veld input[type=date],
.veld input[type=month],
.veld input[type=time],
.veld input[type=number],
.veld input[type=tel],
.veld input[type=url],
.veld input[type=search],
.veld select,
.veld textarea {
  width: 100%;
  padding: 9px 11px;
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.4;
  color: var(--inkt);
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--r-klein);
  box-shadow: inset 0 1px 2px rgba(28, 38, 32, .04);
  transition: border-color var(--duur) ease-out, box-shadow var(--duur) ease-out,
              background var(--duur) ease-out;
  -webkit-appearance: none;
  appearance: none;
}

.veld input:hover:not(:disabled),
.veld select:hover:not(:disabled),
.veld textarea:hover:not(:disabled) { border-color: var(--steen); }

.veld input:focus, .veld select:focus, .veld textarea:focus {
  outline: none; border-color: var(--smaragd);
  box-shadow: 0 0 0 3px rgba(47, 107, 79, .12);
}

/* Velden die nog ingevuld horen te worden.
   Een zandkleurig vlak met een gouden rand: opvallend genoeg om het oog te
   trekken, rustig genoeg om er een halve dag naar te kijken. Rood zou hier
   verkeerd zijn - er is niets fout, er moet enkel nog iets gebeuren. Zodra er
   iets ingevuld staat valt de nadruk weg; dan is het gewoon een veld.

   Deze regels staan bewust ná de gewone veldstijl en noemen .veld mee. Stonden
   ze ervoor, dan won de algemene achtergrondkleur hierboven en bleef het vlak
   wit - het lintje verscheen dan wel, de kleur niet. */
.veld.veld--vereist > input,
.veld.veld--vereist > select,
.veld.veld--vereist > .rij > input {
  background: #FDF7EC;
  border-color: var(--goud);
}
.veld.veld--vereist.veld--klaar > input,
.veld.veld--vereist.veld--klaar > select,
.veld.veld--vereist.veld--klaar > .rij > input {
  background: var(--wit);
  border-color: var(--lijn);
}
.veld.veld--vereist > label::after {
  content: 'in te vullen';
  margin-left: 8px; padding: 1px 7px; border-radius: 999px;
  background: var(--amber-zacht); color: #8a5314;
  font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.veld.veld--vereist.veld--klaar > label::after { content: none; }

/* Velden naast elkaar staan allemaal bovenaan uitgelijnd: label, dan meteen het
   invoervak. Vroeger zakten de vakken naar de onderkant van de rij, zodat een veld
   naast een hoger veld (een hulptekst, een lijstje vinkjes) lager kwam te staan. */
.raster { align-items: start; }
.raster > .veld { display: flex; flex-direction: column; }
.raster > .veld > .veld__hulp { margin-top: 4px; }
.rij.rij--velden { align-items: flex-start; }

.veld input::placeholder, .veld textarea::placeholder {
  color: var(--steen); opacity: .65;
}

.veld input:disabled, .veld select:disabled, .veld textarea:disabled {
  background: var(--lijn-zacht); color: var(--steen); cursor: not-allowed;
  box-shadow: none;
}

/* Datum en maand: het kalendericoon van de browser in de huisstijlkleur, en de
   cijfers in hetzelfde lettertype als de rest in plaats van het systeemfont. */
.veld input[type=date],
.veld input[type=month],
.veld input[type=time] { font-variant-numeric: tabular-nums; }
.veld input[type=date]::-webkit-calendar-picker-indicator,
.veld input[type=month]::-webkit-calendar-picker-indicator,
.veld input[type=time]::-webkit-calendar-picker-indicator {
  cursor: pointer; opacity: .55; transition: opacity var(--duur) ease-out;
}
.veld input[type=date]:hover::-webkit-calendar-picker-indicator,
.veld input[type=month]:hover::-webkit-calendar-picker-indicator,
.veld input[type=time]:hover::-webkit-calendar-picker-indicator { opacity: 1; }

/* Bedragen en aantallen lijnen rechts uit, zoals in de tabellen. */
.veld input[type=number] { text-align: right; font-variant-numeric: tabular-nums; }
.veld input[type=number]::-webkit-outer-spin-button,
.veld input[type=number]::-webkit-inner-spin-button { opacity: .4; }

/* De keuzelijst krijgt een eigen pijltje: het systeempijltje verschilt per
   besturingssysteem en viel uit de toon. */
.veld select {
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236B756E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
.veld select:disabled { background-image: none; }

/* Zoekvelden krijgen een vergrootglas, zodat ze herkenbaar zijn zonder label. */
.veld input[type=search] {
  padding-left: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle cx='6' cy='6' r='4.5' fill='none' stroke='%236B756E' stroke-width='1.5'/%3E%3Cpath d='M9.5 9.5 13 13' stroke='%236B756E' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 11px center;
}
.veld input[type=search]::-webkit-search-cancel-button { cursor: pointer; }

/* Bestand kiezen: de knop in de huisstijl in plaats van de grijze systeemknop. */
.veld input[type=file] {
  width: 100%; font-family: var(--body); font-size: 13.5px; color: var(--steen);
  padding: 8px 11px; background: var(--wit);
  border: 1px dashed var(--lijn); border-radius: var(--r-klein);
  transition: border-color var(--duur) ease-out, background var(--duur) ease-out;
}
.veld input[type=file]:hover { border-color: var(--smaragd); background: var(--creme); }
.veld input[type=file]::file-selector-button {
  font-family: var(--body); font-size: 13px; font-weight: 600;
  color: var(--inkt); background: var(--lijn-zacht);
  border: 1px solid var(--lijn); border-radius: var(--r-klein);
  padding: 6px 12px; margin-right: 12px; cursor: pointer;
  transition: background var(--duur) ease-out, border-color var(--duur) ease-out;
}
.veld input[type=file]::file-selector-button:hover {
  background: var(--creme); border-color: var(--steen);
}

/* Aankruisvakjes en keuzerondjes in de huisstijlkleur. */
.veld input[type=checkbox], .veld input[type=radio] {
  accent-color: var(--smaragd); width: 16px; height: 16px; cursor: pointer;
}

.veld textarea { min-height: 92px; resize: vertical; line-height: 1.55; }

.veld__hulp { font-size: 12px; color: var(--steen); margin-top: 4px; }
.veld--fout input, .veld--fout select, .veld--fout textarea { border-color: var(--rood); }
.veld--fout input:focus, .veld--fout select:focus, .veld--fout textarea:focus {
  box-shadow: 0 0 0 3px rgba(160, 51, 35, .12);
}
.veld__fout { font-size: 12.5px; color: var(--rood); margin-top: 4px; }
.verplicht { color: var(--amber); }

fieldset { border: none; padding: 0; margin: 0 0 20px; }
legend { font-family: var(--kop); font-size: 20px; padding: 0; margin-bottom: 10px; }

/* ---------------------------------------------------------- labels */
.label {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
  background: var(--lijn-zacht); color: var(--inkt);
}
/* Betekenis: hoe het ervoor staat. */
.label--groen  { background: var(--groen-zacht); color: var(--dennengroen); }
.label--amber  { background: var(--amber-zacht); color: #8a5314; }
.label--rood   { background: var(--rood-zacht);  color: var(--rood); }
.label--grijs  { background: #EDEDEA; color: var(--steen); }

/* Herkenning: welk pakket, welke optie. Deze zeggen niets over goed of slecht -
   ze geven een code een vaste kleur, zodat u ZORGELOOS overal aan hetzelfde
   tintje herkent. Daarom blijven ze weg van groen, amber en rood, die hierboven
   al een betekenis hebben gekregen. */
.label--dennen  { background: #E4EBE6; color: var(--dennengroen); }
.label--smaragd { background: #DDEAE1; color: #1F5138; }
.label--goud    { background: #F6ECD2; color: #7A5A12; }
.label--zand    { background: #EFEAE0; color: #6A5C46; }

/* Kleurbolletje. Vaste afmetingen en flex-none, anders rekt een flexcontainer
   of een tabelcel het uit tot een ovaal. */
.stip {
  display: inline-block; width: 10px; height: 10px; min-width: 10px; min-height: 10px;
  border-radius: 50%; flex: 0 0 10px; vertical-align: -1px;
  box-shadow: inset 0 0 0 1px rgba(28, 38, 32, .12);
}
.stip--groot { width: 14px; height: 14px; min-width: 14px; min-height: 14px; flex: 0 0 14px; }

/* ---------------------------------------------------------- meldingen */
.melding { padding: 12px 16px; border-radius: var(--r-klein); margin-bottom: 18px;
  font-size: 14px; border-left: 3px solid; }
.melding--ok   { background: var(--groen-zacht); border-color: var(--smaragd); }
.melding--fout { background: var(--rood-zacht);  border-color: var(--rood); }
.melding--let  { background: var(--amber-zacht); border-color: var(--amber); }

/* ---------------------------------------------------------- kanban */
/* Het aantal kolommen komt uit --kolommen, dat het bord zelf meegeeft op basis
   van het aantal statussen. Zo blijft de CSS kloppen als er een stap bij komt of
   wegvalt, en staan alle kolommen op één rij (auto-fit zou de laatste kolom laten
   terugvallen naar een tweede rij zodra ze net niet past).
   Op een breed scherm passen de acht kolommen samen binnen de inhoud; wordt het
   scherm smaller, dan zakken ze niet onder --kolom-min en schuift het bord
   horizontaal - dat mag daar. */
.kanban { --kolommen: 8; --kolom-min: 130px;
  display: grid;
  grid-template-columns: repeat(var(--kolommen), minmax(var(--kolom-min), 1fr));
  gap: 8px; overflow-x: auto; padding-bottom: 12px; }
.kolom { background: #F4F0E7; border: 1px solid var(--lijn); border-radius: var(--r);
  display: flex; flex-direction: column; min-height: 220px; min-width: 0; }
.kolom__kop { padding: 8px 10px; border-bottom: 1px solid var(--lijn);
  display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.kolom__titel { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }
.kolom__aantal { font-size: 11px; color: var(--steen); }
.kolom__lijst { padding: 8px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.kolom.sleep-over { background: var(--groen-zacht); border-color: var(--smaragd); }

.leadkaart { background: var(--wit); border: 1px solid var(--lijn); border-left: 3px solid var(--steen);
  border-radius: var(--r-klein); padding: 7px 9px; cursor: grab; box-shadow: var(--schaduw);
  min-width: 0; overflow-wrap: anywhere;
  transition: box-shadow var(--duur) ease-out, transform var(--duur) ease-out; }
.leadkaart:hover { box-shadow: var(--schaduw-op); transform: translateY(-1px); }
.leadkaart.sleept { opacity: .45; }
.leadkaart__naam { font-weight: 600; font-size: 12.5px; line-height: 1.25; }
.leadkaart__meta { font-size: 11px; color: var(--steen); margin-top: 2px;
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.leadkaart__actie { font-size: 11px; margin-top: 4px; }
.leadkaart__actie.te-laat { color: var(--rood); font-weight: 600; }

/* Termijn verstreken.
   Niet enkel de datum rood, maar de hele kaart: bij twintig kaarten naast elkaar
   ziet u zo in één oogopslag waar u achterloopt, zonder elke datum te lezen. Het
   is een zacht baksteenrood uit de huisstijl - genoeg om op te vallen, niet zo
   fel dat het scherm gaat schreeuwen. De kleurstreep van de eigenaar blijft
   staan; die zegt iets anders. */
.leadkaart--telaat { background: var(--rood-zacht); border-color: #EBC9C1; }
.leadkaart--telaat .leadkaart__naam { color: var(--rood); }

/* Formulierlead (vulde zelf het publieke formulier in, 19/10/2026): voorrang, in
   een eigen blauw dat nergens anders een betekenis heeft. Een kader rond de kaart
   en een label; te laat blijft rood binnen dat kader. */
.label--formulier { background: #2F5FD0; color: #fff; }
.leadkaart--formulier { border-color: #2F5FD0; box-shadow: 0 0 0 1px #2F5FD0, var(--schaduw); }
.leadkaart--formulier:not(.leadkaart--telaat) { background: #EEF3FF; }
.leadkaart__formulier { font-size: 11px; color: #2F5FD0; font-weight: 600; margin-top: 3px; display: flex; align-items: center; gap: 5px; }
.leadkaart__formulier .label { padding: 0 6px; font-size: 10.5px; }
.fk[data-formulier] { border-color: #2F5FD0; background: linear-gradient(135deg, #EEF3FF 0%, #FFFFFF 55%); }
.fk[data-formulier]::before { background: #2F5FD0; }
.fk-formulier { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0 0; font-size: 12.5px; color: #2F5FD0; font-weight: 600; }
/* Kolom voor leads met een status die het CRM niet kent: zichtbaar, geen sleepdoel. */
.kolom--onbekend { background: #FBEDEA; border-style: dashed; border-color: #E2B9AF; }

tr.telaat > td { background: var(--rood-zacht); }
tr.telaat:hover > td { background: #F7E2DD; }
tr.telaat .telaat__datum { color: var(--rood); font-weight: 600; }

/* Op een smaller scherm past het toch niet meer in één beeld: geef de kolommen
   dan hun comfortabele breedte terug en laat het bord schuiven. */
@media (max-width: 1280px) {
  .kanban { --kolom-min: 185px; gap: 10px; }
}

/* ---------------------------------------------------------- rijen selecteren */
.selectie-vak { width: 34px; text-align: center; padding-right: 0; }
.selectie-vak input { cursor: pointer; }
.selectie-balk { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; border-top: 1px solid var(--lijn); background: #F4F0E7; }
.selectie-balk[hidden] { display: none; }
.selectie-balk__tekst { font-size: 13px; color: var(--steen); }

/* ---------------------------------------------------------- marge-uitsplitsing */
.marge { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 20px;
  font-size: 14px; align-items: baseline; }
.marge dt { color: var(--steen); min-width: 0; overflow-wrap: anywhere; line-height: 1.4; }
.marge dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.marge .som { border-top: 1px solid var(--lijn); padding-top: 6px; margin-top: 4px; font-weight: 600; }
.marge .som dd, .marge dt.som { color: var(--dennengroen); }

/* ---------------------------------------------------------- diversen */
.hint { font-size: 13px; color: var(--steen); }
.rij { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.duw { margin-left: auto; }
.mono { font-variant-numeric: tabular-nums; }
hr.zacht { border: none; border-top: 1px solid var(--lijn); margin: 20px 0; }

/* ---------------------------------------------------------- responsief */
@media (max-width: 900px) {
  .raster--3, .raster--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zijbalk { position: fixed; left: -100%; z-index: 60; transition: left var(--duur) ease-out; }
  .zijbalk.open { left: 0; box-shadow: var(--schaduw-op); }
  .balk, .inhoud { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 620px) {
  .raster--2, .raster--3, .raster--4 { grid-template-columns: 1fr; }
  h1 { font-size: 27px; }
}

/* ---------------------------------------------------------- afdruk */
@media print {
  .zijbalk, .balk .knoppenrij, .knop { display: none !important; }
  body { background: #fff; }
  .kaart { border: none; box-shadow: none; padding: 0; }
}

/* ---------------------------------------------------------- dashboardtegels */
/* Het dashboard is een raster van twaalf kolommen op vaste rijhoogtes.
   Een tegel neemt een kwart, een half, driekwart of de volle breedte in, en
   twee, drie of vijf rijen hoogte. Zo deelt u één brede rechthoek op in vier
   kwarten of twee helften, en blijft alles uitgelijnd op elk schermformaat. */
.tegelraster {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 14px;
}

.tegel { min-width: 0; position: relative; display: flex; }
.tegel > .kaart { margin-bottom: 0; width: 100%; display: flex; flex-direction: column; }

/* Alles wat in een tegel staat, staat er volledig in. Binnen een tegel schuiven
   is vervelend: u ziet niet dat er meer is, en met een muiswiel schiet u er
   voorbij. De gekozen hoogte is daarom een ondergrens - past de inhoud er niet
   in, dan groeit de tegel mee en groeit de rij met hem mee. */
/* flex-basis auto en niet mogen krimpen: zo telt de werkelijke hoogte van de
   inhoud mee bij het berekenen van de rijhoogte. Met min-height:0 - nodig zolang
   er nog geschoven werd - dacht de browser dat dit vak tot nul mocht inzakken,
   hield hij de rij op de opgelegde minimumhoogte, en liep de inhoud onderaan de
   kaart uit over de tegel eronder. */
.tegel__inhoud { flex: 1 0 auto; min-width: 0; overflow: visible; }

.tegel--b3  { grid-column: span 3; }
.tegel--b6  { grid-column: span 6; }
.tegel--b9  { grid-column: span 9; }
.tegel--b12 { grid-column: span 12; }

/* Twee standen. h2 is de oude stand "laag"; die lezen we nog voor wie hem
   bewaard had, maar ze krijgt dezelfde hoogte als normaal. */
.tegel--h2 > .kaart,
.tegel--h3 > .kaart { min-height: 148px; }
.tegel--h5 > .kaart { min-height: 310px; }

/* ---- bewerkstand ---- */
.tegel__bediening { display: none; }
.tegelraster--bewerk .tegel { cursor: grab; }
.tegelraster--bewerk .tegel > .kaart { outline: 1px dashed var(--amber); outline-offset: 3px; }
.tegelraster--bewerk .tegel__bediening {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  margin-bottom: 9px; padding-bottom: 8px; border-bottom: 1px solid var(--lijn-zacht);
}
.tegel__bediening .kpi__label { flex: 1; min-width: 90px; }
.tegel--sleept { opacity: .4; }
.tegel--doel > .kaart { outline: 2px solid var(--smaragd); outline-offset: 3px; }
.tegel--uit > .kaart { opacity: .38; }

.tegelbalk {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  background: var(--amber-zacht); border: 1px solid var(--goud);
  border-radius: var(--r); padding: 11px 15px; margin-bottom: 16px;
}
.tegelbalk .hint { color: #8a5314; }

/* Op een smaller scherm halveren we de indeling: een kwart wordt een half,
   driekwart wordt vol. Onder de 720 px staat alles onder elkaar. */
@media (max-width: 1200px) {
  .tegel--b3 { grid-column: span 6; }
  .tegel--b9 { grid-column: span 12; }
}
@media (max-width: 720px) {
  .tegel, .tegel--b3, .tegel--b6, .tegel--b9, .tegel--b12 { grid-column: span 12; }
  /* Op een telefoon bepaalt de inhoud de hoogte; een opgelegde ondergrens levert
     daar alleen lege ruimte op. */
  .tegel--h2 > .kaart, .tegel--h3 > .kaart, .tegel--h5 > .kaart { min-height: 0; }
}

@media print {
  .tegelraster { display: block; }
  .tegel { display: block; }
}

/* ---------------------------------------------------------- schuifbalken */
/* De schuifbalk zelf tonen we niet: hij trekt de aandacht en breekt de rust van
   het scherm. Schuiven blijft gewoon werken - met het muiswiel, met twee vingers
   op een touchpad, met de pijltjestoetsen en op een aanraakscherm.
   Dat er meer staat dan in beeld past, blijft zichtbaar via het schaduwrandje
   hieronder in plaats van via een balk. */
.tabel-omhulsel,
.tegel__inhoud,
.kanban,
.tabs,
.nav,
.balk__binnen {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* oudere Edge */
}
.tabel-omhulsel::-webkit-scrollbar,
.tegel__inhoud::-webkit-scrollbar,
.kanban::-webkit-scrollbar,
.tabs::-webkit-scrollbar,
.nav::-webkit-scrollbar,
.balk__binnen::-webkit-scrollbar { width: 0; height: 0; }

/* Een zacht randje aan de kant waar nog inhoud zit. De achtergrondafbeeldingen
   staan vast aan de rand van het vak; de witte "dekkers" schuiven mee en dekken
   het randje af zodra u aan het begin of het einde bent. */
.tabel-omhulsel, .kanban {
  background:
    linear-gradient(to right, var(--wit) 30%, rgba(255,255,255,0)) left center,
    linear-gradient(to left,  var(--wit) 30%, rgba(255,255,255,0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(28,38,32,.10), rgba(28,38,32,0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(28,38,32,.10), rgba(28,38,32,0)) right center;
  background-repeat: no-repeat;
  background-size: 34px 100%, 34px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* Een tegel schuift niet meer - haar inhoud staat er altijd volledig in - dus
   hoeft er ook geen randje te verklappen dat er nog iets onder zit. */

/* De zijbalk staat op donkergroen; daar past het witte randje niet. */
.nav { background: none; }

/* Verwijzing onderaan een kolom waar niet alles getoond wordt. */
.kolom__meer {
  display: block; text-align: center; font-size: 12px; font-weight: 600;
  color: var(--steen); padding: 8px 6px; border-radius: var(--r-klein);
  border: 1px dashed var(--lijn); background: var(--wit);
  transition: color var(--duur) ease-out, border-color var(--duur) ease-out;
}
.kolom__meer:hover { color: var(--dennengroen); border-color: var(--steen); text-decoration: none; }

/* Een leadkaart is met het toetsenbord te bedienen: Enter opent de fiche. */
.leadkaart:focus-visible { outline: 2px solid var(--smaragd); outline-offset: 2px; }

/* ---- berichten ---- */
/* De lijn leest als een gesprek: oudste boven, invoerveld onderaan. Bij veel
   berichten schuift de lijn zelf, zodat het invoerveld in beeld blijft. */
.berichten {
  display: flex; flex-direction: column; gap: 10px;
  max-height: 460px; overflow-y: auto; margin-bottom: 18px;
}
.bericht {
  background: var(--creme); border: 1px solid var(--lijn-zacht);
  border-radius: var(--r); padding: 10px 13px;
}
.bericht--eigen { background: var(--groen-zacht); border-color: #D8E5DC; }

.bericht__kop {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 13px; margin-bottom: 5px;
}
.bericht__tekst { font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }

.bericht__acties { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; }
.bericht__acties form { margin: 0; }
/* Het driehoekje van <details> weg: de summary is hier al een knop. */
.bericht__acties summary { display: inline-block; cursor: pointer; list-style: none; }
.bericht__acties summary::-webkit-details-marker { display: none; }
.bericht__acties details[open] summary { margin-bottom: 8px; }
.bericht__acties details[open] { flex: 1; }
.bericht__acties .veld { margin-bottom: 8px; }

/* Label dat er voor het oog niet toe doet, maar wel voor een schermlezer. */
.visueel-weg {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---- documentenkast ---- */
.docs__kop {
  font-family: var(--body); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--steen);
  margin: 16px 0 4px;
}
.docs__kop:first-of-type { margin-top: 0; }
.docs__beeld { width: 56px; padding-right: 0; }
.docs__beeld img {
  max-height: 44px; max-width: 52px; display: block;
  border-radius: var(--r-klein); background: var(--wit);
}
.docs__acties { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
/* Documentenkast (19/10/2026): elke merkknop in zijn hoofdkleur met witte tekst;
   de actieve met een ring en een vinkje. */
.docs-merken { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.docs-merken__knop:hover { filter: brightness(1.15); text-decoration: none; }
.docs-merken__knop.is-aan { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--mk, var(--dennengroen)); }
.docs-merken__vink { font-weight: 700; }
/* Vervangen versies (19/10/2026): grijs en dichtgeklapt onderaan per merk. */
.docs-archief { margin-top: 18px; }
.docs-archief summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--steen); }
.docs-archief .tabel td { color: var(--steen); }
.docs__acties form { margin: 0; }
.docs__acties .knop { white-space: nowrap; }

/* Op een smalle kolom past naam + knoppen niet naast elkaar: dan onder elkaar,
   zodat de bestandsnaam niet letter per letter afbreekt. */
@media (max-width: 1200px) {
  .docs__acties { flex-wrap: wrap; }
}
@media (max-width: 900px) {
  #documenten .tabel tr { display: grid; grid-template-columns: 56px 1fr; gap: 0 8px; }
  #documenten .tabel td { border: 0; padding: 4px 0; }
  #documenten .tabel .docs__beeld { grid-row: span 2; }
  #documenten .tabel .docs__acties { grid-column: 2; justify-content: flex-start; }
  #documenten .tabel tr + tr { border-top: 1px solid var(--lijn); padding-top: 8px; }
}

/* ---------------------------------------------------------- het belletje */
/* Rechtsboven, in de kleur van wie aangemeld is. De teller is het enige rode
   op de balk, en dat hoort zo: rood is voor wat aandacht vraagt. */
.bel { position: relative; }
.bel > summary {
  list-style: none; cursor: pointer; position: relative;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--persoonlijk, var(--steen)); color: #fff;
  transition: transform var(--duur) ease-out, box-shadow var(--duur) ease-out;
}
.bel > summary::-webkit-details-marker { display: none; }
.bel > summary:hover { transform: translateY(-1px); box-shadow: var(--schaduw-op); }
.bel > summary:focus-visible { outline: 2px solid var(--smaragd); outline-offset: 3px; }
.bel__teller {
  position: absolute; top: -5px; right: -5px;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  background: var(--rood); color: #fff; border: 2px solid var(--creme);
  font-size: 10.5px; font-weight: 700; line-height: 15px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.bel__lijst {
  position: absolute; right: 0; top: 46px; z-index: 40;
  width: 380px; max-width: calc(100vw - 40px);
  background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r);
  box-shadow: var(--schaduw-op); padding: 4px 0 6px; max-height: 70vh; overflow-y: auto;
}
.bel__kop {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 14px 6px; border-bottom: 1px solid var(--lijn-zacht);
}
.bel__leeg { padding: 14px; color: var(--steen); font-size: 13.5px; }
.bel__item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 14px; font-size: 13.5px; color: var(--inkt); text-decoration: none;
  border-bottom: 1px solid var(--lijn-zacht);
}
.bel__item:last-child { border-bottom: none; }
.bel__item:hover { background: var(--creme); text-decoration: none; }
.bel__item .stip { margin-top: 5px; }
.bel__item .hint { display: block; margin-top: 2px; }
.bel__item.ongelezen { background: var(--amber-zacht); }
.bel__item.ongelezen:hover { background: #F7E9D4; }

/* De pagina met alle meldingen. */
.meldingenlijst { list-style: none; margin: 0; padding: 0; }
.meldingenlijst li {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 6px; border-bottom: 1px solid var(--lijn-zacht);
}
.meldingenlijst li .stip { margin-top: 5px; }
.meldingenlijst li.ongelezen { background: var(--amber-zacht); border-radius: var(--r-klein); }

/* @naam in een bericht. Amber, zoals het lintje "in te vullen": het vraagt
   iemands aandacht, maar er is niets mis. */
.vermelding {
  background: var(--amber-zacht); color: #8a5314; font-weight: 600;
  padding: 0 5px; border-radius: 4px;
}

/* ---------------------------------------------------------- @ in het tekstvak */
/* Het tekstvak zelf is doorzichtig; de spiegel erachter toont dezelfde tekst
   met de herkende namen in het amber. Alles wat de plaats van een letter
   bepaalt - lettertype, grootte, regelafstand, binnenmarge, rand - is hier
   identiek aan .veld textarea, anders verschuift de kleur een halve letter. */
.tagvak { position: relative; }
/* display: block, anders laat een tekstvak - dat van zichzelf inline is - onder
   zich een paar pixel wit voor de staart van letters als g en p, en is de
   omhullende doos net hoger dan het vak. De spiegel vult die doos, en zou dan
   ook net hoger uitvallen dan de tekst die ze moet spiegelen. */
.tagvak > textarea {
  display: block; position: relative; z-index: 1;
  background: transparent; color: transparent; caret-color: var(--inkt);
}
.tagvak > textarea::selection { background: rgba(47, 107, 79, .25); }
.tagvak__spiegel {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  pointer-events: none; white-space: pre-wrap; overflow-wrap: break-word;
  padding: 9px 11px; border: 1px solid transparent; border-radius: var(--r-klein);
  font-family: var(--body); font-size: 14px; line-height: 1.55; color: var(--inkt);
  background: var(--wit);
}
.tagvak__spiegel mark.vermelding {
  background: var(--amber-zacht); color: #8a5314; font-weight: 600;
  padding: 0 3px; margin: 0 -3px; border-radius: 4px;
}
/* Het zandkleurige vlak van "in te vullen" moet op de spiegel, niet op het vak. */
.veld.veld--vereist > .tagvak > textarea { background: transparent; }

.taglijst {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 30; margin-top: 4px;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r-klein);
  box-shadow: var(--schaduw-op); padding: 4px; max-height: 220px; overflow-y: auto;
}
.taglijst__item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 7px 9px; border: none; background: none; border-radius: var(--r-klein);
  font-family: var(--body); font-size: 13.5px; color: var(--inkt); cursor: pointer;
}
.taglijst__item .hint { margin-left: auto; }
.taglijst__item:hover, .taglijst__item.aan { background: var(--amber-zacht); }

/* ---------------------------------------------------------- intakegesprek */
.gesprek__vraag > label { font-weight: 600; }
.gesprek__kader {
  background: var(--groen-zacht); border-left: 3px solid var(--smaragd);
  border-radius: var(--r-klein); padding: 10px 14px; margin: 6px 0 12px;
}
.gesprek__kader p { margin: 4px 0 6px; font-style: italic; }
.gesprek__akkoord {
  margin-top: 6px; padding: 9px 12px; border-radius: var(--r-klein);
  background: var(--amber-zacht); color: #8a5314; font-size: 13.5px;
}
.gesprek__spiek ul { margin: 0; padding-left: 18px; font-size: 13.5px; }
.gesprek__spiek li { margin-bottom: 6px; }

.vinkraster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; }
.vink { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; text-transform: none;
        font-size: 14px; color: var(--inkt); cursor: pointer; }
.vink input { width: auto; margin-top: 3px; }
.vink--groot { font-size: 15px; font-weight: 600; padding: 8px 0; }

/* Tekst naast een vinkje of keuzerondje is gewone tekst, geen veldlabel.
   ".veld label" maakt een label klein, vet en grijs: goed boven een invoervak,
   maar het lekte naar elk <label> binnen een veld - de akkoordzin en de keuzes
   van het intakegesprek, de optienamen op de offerte, de namen bij "Wie" (die
   verloren zo ook hun kolommen). Deze regels wegen zwaarder dan ".veld label" en
   geven elk onderdeel zijn eigen opmaak terug (verbeterlijst ronde 3, punt 127).
   Nieuwe tekst naast een vinkje: class="vinktekst". */
.veld label.vinktekst, .veld label.vink, .veld label.meerkeuze__rij, .veld label.taak-wie__keuze {
  font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--inkt); margin-bottom: 0;
}
.veld label.vinktekst { display: inline; cursor: pointer; }
.veld label.vink { display: flex; }
.veld label.vink--groot { font-size: 15px; font-weight: 600; }
.veld label.meerkeuze__rij { display: grid; }
.veld label.taak-wie__keuze { display: inline-flex; }
.veld label.taak-wie__keuze--allen { color: var(--steen); }
/* Een label zonder eigen klasse rond een vinkje (de oudere met een style-attribuut). */
.veld label:has(> input[type=checkbox]):not([class]),
.veld label:has(> input[type=radio]):not([class]) {
  font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--inkt);
}

/* Drie knoppen waarvan er een gekozen is: zwak, oke, sterk. */
.knopgroep--keuze .keuze {
  cursor: pointer; padding: 6px 12px; border: 1px solid var(--lijn); border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--steen); background: var(--wit);
  text-transform: none;
}
.knopgroep--keuze .keuze input { position: absolute; opacity: 0; width: 0; height: 0; }
.knopgroep--keuze .keuze.aan,
.knopgroep--keuze .keuze:has(input:checked) { background: var(--dennengroen); color: #fff; border-color: var(--dennengroen); }

/* Zoekveld boven een lange keuzelijst (select[data-zoekbaar]) */
.zoeklijst { margin-bottom: 6px; }

/* Keuzelijst met vinkjes (wie doet de taak, van wie tonen we taken): een knop
   met wat gekozen is, en een uitklaplijst met één rij per persoon in vaste
   kolommen, zodat namen van verschillende lengte niet verspringen. */
.meerkeuze { position: relative; }
.meerkeuze__knop { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  padding: 9px 11px; font-family: var(--body); font-size: 14px; color: var(--inkt); text-align: left;
  background: #fff; border: 1px solid var(--lijn); border-radius: var(--r); cursor: pointer; }
.meerkeuze__knop:hover { border-color: var(--steen); }
.meerkeuze__knop[aria-expanded="true"] { border-color: var(--smaragd); box-shadow: 0 0 0 3px rgba(47, 107, 79, .12); }
.meerkeuze__tekst { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meerkeuze__pijl { flex: 0 0 auto; width: 8px; height: 8px; border-right: 1.5px solid var(--steen);
  border-bottom: 1.5px solid var(--steen); transform: rotate(45deg); margin: -3px 3px 0 0; }
.meerkeuze__lijst { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 100%;
  background: #fff; border: 1px solid var(--lijn); border-radius: var(--r); box-shadow: var(--schaduw); padding: 6px; }
.meerkeuze__rij { display: grid; grid-template-columns: 18px 14px 1fr; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: 6px; font-weight: 400; text-transform: none; font-size: 14px; color: var(--inkt);
  letter-spacing: 0; margin: 0; cursor: pointer; white-space: nowrap; }
.meerkeuze__rij:hover { background: var(--creme, #F6F4F0); }
.meerkeuze__rij input { width: auto; margin: 0; }
.meerkeuze__rij .stip { justify-self: center; }
.filters .meerkeuze { min-width: 200px; }

/* Keuzerijen met vaste kolommen (soort tijd bij het boeken). */
.taak-wie { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px 14px; padding: 8px 10px;
  border: 1px solid var(--lijn); border-radius: var(--r); background: #fff; }
.taak-wie__keuze { display: inline-flex; align-items: center; gap: 7px; font-weight: 400; text-transform: none;
  font-size: 14px; color: var(--inkt); cursor: pointer; }
.taak-wie__keuze input { width: auto; margin: 0; }
.taak-wie__keuze--allen { margin-left: auto; color: var(--steen); }

/* Woordmerk: de merknaam als beeld, voor een merk dat (nog) geen logo heeft. */
.woordmerk { display: inline-block; font-family: var(--kop); font-size: 26px; letter-spacing: .04em; color: var(--creme);
  border: 1.5px solid rgba(251,248,241,.55); border-radius: 999px; padding: 14px 22px; }
.woordmerk--donker { color: var(--dennengroen); border-color: var(--dennengroen); }

/* Menu op de gsm: knop naast het belletje, zijbalk schuift in, achtergrond sluit. */
.menuknop { display: none; align-items: center; justify-content: center; width: 40px; height: 40px;
  border: 1px solid var(--lijn); border-radius: 999px; background: #fff; color: var(--dennengroen); cursor: pointer; }
.menuknop[aria-expanded="true"] { background: var(--dennengroen); color: var(--creme); }
.zijbalk__sluit { display: none; position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 0;
  border-radius: 999px; background: rgba(251,248,241,.12); color: var(--creme); font-size: 24px; line-height: 1; cursor: pointer; }
.zijbalk__achtergrond { position: fixed; inset: 0; z-index: 55; background: rgba(23,58,44,.45); }
.zijbalk__achtergrond[hidden] { display: none; }
@media (max-width: 900px) {
  .menuknop { display: inline-flex; }
  .zijbalk__sluit { display: block; }
  .balk .knoppenrij { gap: 6px; }
  .balk .knoppenrij > a.knop { display: none; }   /* de paginaknoppen staan ook onderaan de pagina; hier is de plaats krap */
}

/* Zoekvak in de balk (en in het menu op de gsm). */
.zoekbalk { flex: 1 1 260px; max-width: 380px; margin: 0; }
.zoekbalk input[type=search] { width: 100%; padding: 9px 12px 9px 34px; font-family: var(--body); font-size: 14px;
  border: 1px solid var(--lijn); border-radius: 999px; 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='%236B756E' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center; }
.zoekbalk input[type=search]:focus { outline: none; border-color: var(--smaragd); box-shadow: 0 0 0 3px rgba(47,107,79,.12); }
.zoekbalk--menu { display: none; margin: 4px 6px 10px; max-width: none; }
.zoekbalk--menu input[type=search] { background-color: rgba(251,248,241,.1); border-color: rgba(251,248,241,.25); color: var(--creme); }
.zoekbalk--menu input::placeholder { color: rgba(251,248,241,.55); }
@media (max-width: 900px) {
  .balk .zoekbalk { display: none; }
  .zoekbalk--menu { display: block; }
}

/* Lange teksten in Instellingen (voorwaarden, prompts): breed, rustig, leesbaar. */
.veld textarea.tekstvak, textarea.tekstvak { width: 100%; font-family: var(--body); font-size: 14.5px; line-height: 1.65;
  padding: 16px 18px; color: var(--inkt); background: #fff; border: 1px solid var(--lijn); border-radius: var(--r);
  resize: vertical; min-height: 220px; }
textarea.tekstvak:focus { outline: none; border-color: var(--smaragd); box-shadow: 0 0 0 3px rgba(47,107,79,.12); }

/* Knop die 'aan' staat (bv. het standaardmerk). */
.knop--aan { background: var(--smaragd); color: #fff; border-color: var(--smaragd); cursor: default; }
.knop--aan:disabled { opacity: 1; }

/* ---------------------------------------------------------- terugknop */
/* Links van de titel, op elke pagina die onder een overzicht hangt. Eén stap
   terug in de browser als u van hier kwam, anders naar dat overzicht. */
.balk__kop { display: flex; align-items: center; gap: 12px; min-width: 0; }
.balk__titel { min-width: 0; }
.terugknop {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--lijn);
  background: var(--wit); color: var(--inkt); cursor: pointer; padding: 0;
  transition: background var(--duur) ease-out, color var(--duur) ease-out, border-color var(--duur) ease-out;
}
.terugknop:hover { background: var(--dennengroen); color: var(--creme); border-color: var(--dennengroen); }
.terugknop:focus-visible { outline: 2px solid var(--smaragd); outline-offset: 2px; }

/* ---------------------------------------------------------- documentenkast: filter */
.docs__filter { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.docs__filter select { width: auto; min-width: 160px; }
.docs__filter [data-docfilter-telling] { margin-left: auto; }
/* ---------------------------------------------------------- scorekaart van een website */
.scorekaart { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .scorekaart { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.scorekaart .kpi__cijfer { font-size: 30px; }
/* ---------------------------------------------------------- viering bij een nieuwe klant */
.viering { position: fixed; inset: 0; z-index: 900; background: rgba(23, 58, 44, .55); display: flex;
  align-items: center; justify-content: center; padding: 16px; animation: viering-in .35s ease-out; }
.viering--weg { opacity: 0; transition: opacity .35s; }
.viering__vuurwerk { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.viering__kaart { position: relative; background: #fff; border-radius: 16px; padding: 28px 30px; max-width: 520px;
  width: 100%; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); text-align: center; animation: viering-kaart .5s cubic-bezier(.2, .9, .3, 1.3); }
.viering__lint { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #fff; background: var(--oranje, #D5832A); padding: 4px 12px; border-radius: 999px; margin-bottom: 12px; }
.viering__kop { margin: 0 0 8px; font-size: 30px; line-height: 1.15; color: var(--smaragd); }
.viering__tekst { margin: 0; font-size: 17px; line-height: 1.45; }
.viering__traject { margin: 10px 0 0; font-size: 14px; color: var(--oranje, #D5832A); font-weight: 600; }
.viering__woordje { margin: 14px 0 0; padding: 10px 14px; background: var(--creme, #FBF8F1); border-radius: 10px;
  font-size: 14px; text-align: left; font-style: italic; }
.viering .knoppenrij { justify-content: center; }
@keyframes viering-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes viering-kaart { from { transform: translateY(24px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .viering, .viering__kaart { animation: none; } }

/* ---------------------------------------------------------- marketing (17/10/2026) */
/* Per merk: --merk en --merk-accent komen van de pagina (navy en oranje voor
   Studio Nexus, groen voor RTBFS). Alles hieronder leidt daarvan af. */
.visueel-verborgen { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mk { --mk-zacht: color-mix(in srgb, var(--merk) 6%, #fff); --mk-lijn: color-mix(in srgb, var(--merk) 14%, var(--lijn)); }
.kanaalicoon { display: inline-block; flex: none; vertical-align: middle; }
.kanaalicoon--grijs { filter: grayscale(1); opacity: .35; }
.mk-iconenrij { display: inline-flex; gap: 3px; align-items: center; }

/* ---- merkband */
.mk-kop { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2.2fr); gap: 18px; align-items: stretch;
  background: linear-gradient(135deg, var(--mk-zacht), #fff 70%); border: 1px solid var(--mk-lijn);
  border-radius: 16px; padding: 18px; margin-bottom: 16px; box-shadow: var(--schaduw); position: relative; overflow: hidden; }
.mk-kop::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--merk); }
.mk-kop__merk { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding-left: 6px; }
.mk-kop__logo { width: 64px; height: 64px; border-radius: 14px; background: #fff; border: 1px solid var(--mk-lijn);
  display: grid; place-items: center; padding: 8px; flex: none; }
.mk-kop__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.mk-kop__logo span { font-family: var(--kop); font-size: 30px; color: var(--merk); }
.mk-kop__naam h2 { margin: 0; font-size: 26px; color: var(--merk); }
.mk-kop__naam p { margin: 2px 0 0; color: var(--steen); font-size: 13px; letter-spacing: .04em; }
.mk-wissel { flex-basis: 100%; display: inline-flex; gap: 4px; padding: 4px; background: rgba(255,255,255,.8);
  border: 1px solid var(--mk-lijn); border-radius: 999px; width: max-content; max-width: 100%; flex-wrap: wrap; }
.mk-wissel a { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px; font-size: 13px;
  font-weight: 600; color: var(--inkt); text-decoration: none; transition: background .15s, color .15s; }
.mk-wissel a:hover { background: var(--lijn-zacht); text-decoration: none; }
.mk-wissel a.is-aan { background: var(--merk); color: #fff; }
.mk-wissel__stip { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
.mk-kop__cijfers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mk-cijfer { background: #fff; border: 1px solid var(--lijn); border-radius: 12px; padding: 12px 14px; display: flex;
  flex-direction: column; gap: 4px; min-width: 0; }
.mk-cijfer--let { border-color: color-mix(in srgb, var(--amber) 55%, #fff); background: var(--amber-zacht); }
.mk-cijfer__label { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--steen); }
.mk-cijfer__waarde { font-family: var(--body); font-weight: 700; font-size: 30px; line-height: 1.05; letter-spacing: -.02em; color: var(--inkt); font-variant-numeric: lining-nums tabular-nums; }
.mk-cijfer__waarde small { font-size: 16px; font-weight: 600; color: var(--steen); }
.mk-cijfer__waarde--klein { font-size: 24px; }
.mk-cijfer__voet { font-size: 12px; color: var(--steen); }
.mk-cijfer__iconen { display: flex; gap: 8px; margin-top: 4px; }
.mk-meter { height: 6px; border-radius: 99px; background: var(--lijn-zacht); overflow: hidden; margin: 4px 0 2px; }
.mk-meter span { display: block; height: 100%; border-radius: 99px; background: var(--merk); }
.mk-meter--groot { height: 10px; margin: 10px 0 6px; }

/* ---- tabs */
.mk-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--lijn); margin-bottom: 16px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.mk-tabs::-webkit-scrollbar { display: none; }
.mk-tabs a { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px 12px; font-weight: 600;
  font-size: 14px; color: var(--steen); text-decoration: none; white-space: nowrap; }
.mk-tabs a:hover { color: var(--inkt); text-decoration: none; }
.mk-tabs a.is-aan { color: var(--merk); }
.mk-tabs a.is-aan::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--merk); }
.mk-tabs__teller { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--amber); color: #fff;
  font-size: 11px; display: inline-grid; place-items: center; }
.mk-tabs__teller--zacht { background: var(--lijn-zacht); color: var(--steen); }
.mk-intro { color: var(--steen); max-width: 78ch; margin: 0 0 16px; }

/* ---- algemene panelen */
.mk-twee { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(320px, 1fr); gap: 16px; align-items: start; }
.mk-twee > aside { display: grid; gap: 16px; }
.mk-paneel { background: #fff; border: 1px solid var(--lijn); border-radius: 14px; padding: 18px; box-shadow: var(--schaduw); min-width: 0; }
.mk-paneel--vast { position: sticky; top: 16px; }
.mk-paneel__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.mk-paneel__kop h3 { margin: 0; font-size: 20px; }
.mk-velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.mk-breed { width: 100%; justify-content: center; }
.mk-klein { font-size: 12.5px; color: var(--steen); margin: 8px 0; }
.mk-link { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--merk); cursor: pointer; text-decoration: none; }
.mk-link:hover { text-decoration: underline; }
.mk-link--rood { color: var(--rood); }
.mk-weg { margin-top: 14px; text-align: center; }
.mk-tip { background: var(--mk-zacht); border: 1px dashed var(--mk-lijn); border-radius: 10px; padding: 10px 12px; font-size: 13px; margin: 0 0 14px; }
.mk-leeg { display: grid; gap: 4px; place-items: center; text-align: center; padding: 40px 20px; border: 1px dashed var(--lijn);
  border-radius: 12px; color: var(--steen); background: var(--creme); }
.mk-leeg strong { color: var(--inkt); font-size: 15px; }
.mk-leegvak { display: block; padding: 14px; border: 1px dashed var(--lijn); border-radius: 10px; font-size: 13px; color: var(--steen); text-align: center; }
.mk-pil { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.mk-pil::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mk-pil--grijs  { background: #EFEDE8; color: #6B756E; }
.mk-pil--blauw  { background: color-mix(in srgb, var(--merk) 10%, #fff); color: var(--merk); }
.mk-pil--groen  { background: var(--groen-zacht); color: #1F5138; }
.mk-pil--amber  { background: var(--amber-zacht); color: #8a5314; }
.mk-pil--rood   { background: var(--rood-zacht); color: var(--rood); }

/* ---- kanalen */
.mk-kanalen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mk-kanaal { background: #fff; border: 1px solid var(--lijn); border-radius: 16px; padding: 18px; box-shadow: var(--schaduw);
  display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; }
.mk-kanaal::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--pf); opacity: .9; }
.mk-kanaal__kop { display: flex; align-items: center; gap: 12px; }
.mk-kanaal__icoon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--pf) 8%, #fff); border: 1px solid color-mix(in srgb, var(--pf) 18%, #fff); }
.mk-kanaal__titel { flex: 1; min-width: 0; }
.mk-kanaal__titel h3 { margin: 0; font-size: 19px; }
.mk-kanaal__titel span { display: block; font-size: 12.5px; color: var(--steen); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-voortgang { display: flex; align-items: center; gap: 10px; }
.mk-voortgang__balk { flex: 1; height: 6px; border-radius: 99px; background: var(--lijn-zacht); overflow: hidden; }
.mk-voortgang__balk span { display: block; height: 100%; background: var(--pf); border-radius: 99px; transition: width .3s; }
.mk-voortgang__tekst { font-size: 12px; font-weight: 600; color: var(--steen); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mk-stappen { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mk-stap { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 8px;
  border-radius: 10px; transition: background .15s; }
.mk-stap:hover { background: var(--creme); }
.mk-stap__vink { margin: 0; cursor: pointer; position: relative; display: block; }
.mk-stap__vink input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mk-stap__cirkel { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--mk-lijn, var(--lijn)); display: grid; place-items: center;
  color: var(--steen); font-size: 12px; font-weight: 700; background: #fff; transition: all .15s; }
.mk-stap__cirkel svg { display: none; }
.mk-stap__vink input:checked + .mk-stap__cirkel { background: var(--pf, var(--merk)); border-color: var(--pf, var(--merk)); color: #fff; }
.mk-stap__vink input:checked + .mk-stap__cirkel svg { display: block; }
.mk-stap__vink input:checked + .mk-stap__cirkel .mk-stap__nr { display: none; }
.mk-stap__vink input:focus-visible + .mk-stap__cirkel { outline: 2px solid var(--pf, var(--merk)); outline-offset: 2px; }
.mk-stap__vink:hover .mk-stap__cirkel { border-color: var(--pf, var(--merk)); }
.mk-stap__tekst strong { display: block; font-size: 14px; line-height: 1.35; }
.mk-stap__tekst p { margin: 2px 0 0; font-size: 12.5px; color: var(--steen); line-height: 1.45; }
.mk-stap.is-klaar .mk-stap__tekst strong { color: var(--steen); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--steen) 50%, transparent); }
.mk-stap.is-klaar .mk-stap__tekst p { display: none; }
.mk-stap__link { font-size: 12px; font-weight: 600; color: var(--pf, var(--merk)); white-space: nowrap; padding: 4px 8px; border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--pf, var(--merk)) 25%, #fff); text-decoration: none; }
.mk-stap__link:hover { background: color-mix(in srgb, var(--pf, var(--merk)) 8%, #fff); text-decoration: none; }
.mk-gegevens { border-top: 1px solid var(--lijn-zacht); padding-top: 10px; }
.mk-gegevens summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--inkt); list-style: none; display: flex; align-items: center; gap: 6px; }
.mk-gegevens summary::-webkit-details-marker { display: none; }
.mk-gegevens summary::before { content: '›'; display: inline-block; transition: transform .15s; color: var(--steen); }
.mk-gegevens[open] summary::before { transform: rotate(90deg); }
.mk-gegevens[open] summary { margin-bottom: 10px; }
.mk-kanaal__voet { display: flex; gap: 8px; margin-top: auto; }

/* ---- planning */
.mk-melding { background: var(--amber-zacht); border: 1px solid color-mix(in srgb, var(--amber) 35%, #fff); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 16px; display: grid; gap: 4px; }
.mk-melding > span { font-size: 13px; color: #8a5314; }
.mk-melding ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.mk-melding li a { display: grid; grid-template-columns: 130px auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 10px;
  border-radius: 8px; background: rgba(255,255,255,.7); color: var(--inkt); text-decoration: none; font-size: 13px; }
.mk-melding li a:hover { background: #fff; }
.mk-melding li.is-laat time { color: var(--rood); font-weight: 700; }
.mk-melding__tekst { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-maand { font-size: 26px !important; }
.mk-maand span { color: var(--steen); font-weight: 400; }
.mk-navigatie { display: inline-flex; border: 1px solid var(--lijn); border-radius: 999px; overflow: hidden; }
.mk-navigatie a { padding: 6px 12px; font-size: 14px; font-weight: 600; color: var(--inkt); text-decoration: none; }
.mk-navigatie a:hover { background: var(--lijn-zacht); text-decoration: none; }
.mk-navigatie__vandaag { border-left: 1px solid var(--lijn); border-right: 1px solid var(--lijn); font-size: 12.5px !important; }
.mk-kalender { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--lijn); border-left: 1px solid var(--lijn); border-radius: 10px; overflow: hidden; }
.mk-kalender__kop { padding: 8px 8px 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--steen);
  border-right: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); background: var(--creme); }
.mk-kalender__kop.is-weekend { color: color-mix(in srgb, var(--steen) 70%, #fff); }
.mk-dag { min-height: 96px; padding: 6px; border-right: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); background: #fff;
  display: flex; flex-direction: column; gap: 4px; min-width: 0; transition: background .15s; }
.mk-dag:hover { background: var(--mk-zacht); }
.mk-dag.is-weekend { background: #FCFBF8; }
.mk-dag.is-voorbij .mk-dag__nr { color: color-mix(in srgb, var(--steen) 60%, #fff); }
.mk-dag--leeg { background: repeating-linear-gradient(135deg, #FBFAF6, #FBFAF6 6px, #F6F3EC 6px, #F6F3EC 7px); }
.mk-dag__nr { align-self: flex-start; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 99px; display: inline-grid; place-items: center;
  font-size: 12.5px; font-weight: 700; color: var(--inkt); text-decoration: none; }
.mk-dag__nr:hover { background: var(--merk); color: #fff; text-decoration: none; }
.mk-dag.is-vandaag .mk-dag__nr { background: var(--merk-accent); color: #fff; }
.mk-chip { display: flex; align-items: center; gap: 5px; padding: 3px 6px; border-radius: 6px; font-size: 11px; font-weight: 600;
  text-decoration: none; overflow: hidden; border-left: 3px solid transparent; }
.mk-chip:hover { text-decoration: none; filter: brightness(.97); }
.mk-chip.is-gekozen { outline: 2px solid var(--merk); outline-offset: 1px; }
.mk-chip__uur { font-variant-numeric: tabular-nums; }
.mk-chip--idee         { background: #F3F0E9; color: #6A5C46; border-left-color: #C9BEA6; }
.mk-chip--concept      { background: var(--amber-zacht); color: #8a5314; border-left-color: var(--amber); }
.mk-chip--gepland      { background: color-mix(in srgb, var(--merk) 9%, #fff); color: var(--merk); border-left-color: var(--merk); }
.mk-chip--gepubliceerd { background: var(--groen-zacht); color: #1F5138; border-left-color: var(--smaragd); }
.mk-legende { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; color: var(--steen); }
.mk-legende span { display: inline-flex; align-items: center; gap: 6px; }
.mk-legende__stip { width: 10px; height: 10px; border-radius: 3px; border-left-width: 3px; border-left-style: solid; display: inline-block; }
.mk-ideeen { margin-top: 18px; border-top: 1px solid var(--lijn-zacht); padding-top: 14px; }
.mk-ideeen h4 { font-size: 15px; margin: 0 0 8px; }
.mk-ideeen ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mk-ideeen li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 8px 10px; border-radius: 8px; background: var(--creme); }
.mk-ideeen li span { color: var(--steen); white-space: nowrap; }
.mk-postvorm { display: grid; gap: 4px; }
.mk-keuze { border: 0; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.mk-keuze legend { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--steen); margin-bottom: 6px; padding: 0; }
.mk-keuze__optie { margin: 0; cursor: pointer; }
.mk-keuze__optie input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mk-keuze__optie > span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 9px; border-radius: 999px;
  border: 1px solid var(--lijn); background: #fff; font-size: 13px; font-weight: 600; color: var(--inkt); text-transform: none; letter-spacing: 0; transition: all .15s; }
.mk-keuze__optie:hover > span { border-color: var(--merk); }
.mk-keuze__optie input:checked + span { border-color: var(--merk); background: color-mix(in srgb, var(--merk) 8%, #fff); box-shadow: inset 0 0 0 1px var(--merk); }
.mk-keuze__optie input:focus-visible + span { outline: 2px solid var(--merk); outline-offset: 2px; }
.mk-keuze__optie.is-uit > span { color: var(--steen); }
.mk-teller { font-size: 12px; color: var(--steen); text-align: right; margin-top: 4px; font-variant-numeric: tabular-nums; }
.tekenteller--over { color: var(--rood); font-weight: 700; }
.mk-mediakeuze { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.mk-mediakeuze label { position: relative; margin: 0; aspect-ratio: 1; border-radius: 8px; overflow: hidden; cursor: pointer; border: 1px solid var(--lijn); }
.mk-mediakeuze input { position: absolute; top: 5px; left: 5px; z-index: 1; width: 16px; height: 16px; accent-color: var(--merk); }
.mk-mediakeuze img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.mk-mediakeuze label:hover img { transform: scale(1.04); }
.mk-mediakeuze label:has(input:checked) { box-shadow: 0 0 0 3px var(--merk); border-color: var(--merk); }
.mk-mediakeuze__video { display: grid; place-items: center; width: 100%; height: 100%; background: var(--inkt); color: #fff; font-size: 20px; }
.mk-geplaatst { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--lijn-zacht); }
.mk-geplaatst label { font-size: 12.5px; font-weight: 600; color: var(--steen); text-transform: none; letter-spacing: 0; }
.mk-geplaatst__rij { display: flex; gap: 8px; align-items: center; }
.mk-geplaatst__rij input { flex: 1; min-width: 0; }
.mk-euro { font-weight: 700; color: var(--steen); }

/* ---- media */
.mk-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.mk-media__item { margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--lijn); background: #fff; display: flex; flex-direction: column;
  transition: box-shadow .2s, transform .2s; }
.mk-media__item:hover { box-shadow: var(--schaduw-op); transform: translateY(-2px); }
.mk-media__beeld { position: relative; aspect-ratio: 4 / 3; background: #F2EFE8; }
.mk-media__beeld img, .mk-media__beeld video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-media__audio { height: 100%; display: grid; place-items: center; align-content: center; gap: 8px; padding: 10px;
  background: linear-gradient(135deg, var(--merk), color-mix(in srgb, var(--merk) 70%, #000)); color: #fff; }
.mk-media__audio span { font-size: 28px; }
.mk-media__audio audio { width: 100%; height: 32px; }
.mk-media__soort { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 99px; font-size: 10.5px; font-weight: 700;
  background: rgba(0,0,0,.55); color: #fff; backdrop-filter: blur(4px); }
.mk-media__item figcaption { padding: 10px 12px; display: grid; gap: 2px; }
.mk-media__naam { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-media__info { font-size: 11.5px; color: var(--steen); }
.mk-media__item form { margin-top: 4px; }
.mk-dropzone { display: grid; place-items: center; text-align: center; gap: 4px; padding: 26px 16px; border: 2px dashed var(--mk-lijn);
  border-radius: 14px; background: var(--mk-zacht); cursor: pointer; margin: 0; text-transform: none; letter-spacing: 0; font-weight: 400; transition: border-color .15s; }
.mk-dropzone:hover { border-color: var(--merk); }
.mk-dropzone__icoon { width: 40px; height: 40px; border-radius: 50%; background: var(--merk); color: #fff; display: grid; place-items: center; font-size: 20px; font-weight: 700; }
.mk-dropzone strong { font-size: 15px; color: var(--inkt); }
.mk-dropzone span { font-size: 12.5px; color: var(--steen); }
.mk-dropzone input { margin-top: 8px; max-width: 100%; font-size: 12px; }
.mk-adobe p { font-size: 13.5px; margin: 0 0 12px; }
.mk-merkkit { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: var(--creme); }
.mk-merkkit span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--steen); margin-right: 4px; }
.mk-merkkit i { width: 22px; height: 22px; border-radius: 6px; display: inline-block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.mk-merkkit code { font-size: 12px; color: var(--steen); margin-left: auto; }

/* ---- campagnes */
.mk-budget { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 20px; align-items: center;
  background: linear-gradient(135deg, var(--mk-zacht), #fff 75%); border: 1px solid var(--mk-lijn); border-radius: 16px; padding: 20px 22px; margin-bottom: 16px; box-shadow: var(--schaduw); }
.mk-budget__bedrag { font-family: var(--body); font-weight: 700; font-size: 36px; letter-spacing: -.02em; line-height: 1.05; color: var(--merk); margin-top: 6px; font-variant-numeric: lining-nums tabular-nums; }
.mk-budget__bedrag span { font-family: var(--body); font-size: 14px; color: var(--steen); font-weight: 600; }
.mk-budget__plafond { background: #fff; border: 1px solid var(--lijn); border-radius: 12px; padding: 14px; display: grid; gap: 6px; }
.mk-budget__plafond label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--steen); margin: 0; }
.mk-campagnes { display: grid; gap: 10px; }
.mk-campagne { border: 1px solid var(--lijn); border-radius: 12px; padding: 14px 16px; background: #fff; }
.mk-campagne__kop { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.mk-campagne__kop h4 { margin: 0; font-size: 16px; }
.mk-campagne__gegevens { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 12px 0 0; }
.mk-campagne__gegevens dt { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--steen); }
.mk-campagne__gegevens dd { margin: 2px 0 0; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mk-beslis { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--lijn-zacht); }
.mk-beslis input { flex: 1 1 160px; min-width: 0; }

.mk-geplaatst__rij input, .mk-beslis input { padding: 9px 12px; border: 1px solid var(--lijn); border-radius: var(--r-klein); font: inherit; font-size: 14px; background: #fff; color: var(--inkt); }
.mk-geplaatst__rij input:focus, .mk-beslis input:focus { outline: 2px solid color-mix(in srgb, var(--merk) 35%, transparent); border-color: var(--merk); }
.mk .knop:not(.knop--stil):not(.knop--gevaar) { background: var(--merk-accent); border-color: var(--merk-accent); }
.mk-iconenrij .kanaalicoon + .kanaalicoon { margin-left: 2px; }
/* Kleine koppen (19/10/2026): Cormorant enkel vanaf 20 px; kleiner in Manrope halfvet. */
.mk-kanaal__titel h3, .mk-campagne__kop h4, .mk-ideeen h4 { font-family: var(--body); font-weight: 600; letter-spacing: 0; }
.mk-kanaal__titel h3 { font-size: 16px; }
.mk-campagne__kop h4 { font-size: 15px; }
.mk-ideeen h4 { font-size: 14px; }
.mk-keuze legend { font-family: var(--body); }
.mk-kort { display: none; }
/* Planning op de gsm (19/10/2026): onder 760 px een lijst per dag in plaats van de kalender. */
.mk-daglijst { display: none; list-style: none; margin: 0; padding: 0; }
.mk-daglijst__dag { border-top: 1px solid var(--lijn-zacht); padding: 10px 0; }
.mk-daglijst__dag:first-child { border-top: 0; padding-top: 0; }
.mk-daglijst__datum { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 700; color: var(--inkt);
  font-variant-numeric: lining-nums tabular-nums; }
.mk-daglijst__datum.is-vandaag { color: var(--merk); }
.mk-daglijst__datum span { font-weight: 500; color: var(--steen); }
.mk-daglijst__post { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 10px; align-items: center; min-height: 44px;
  margin-top: 6px; padding: 8px 12px; border-radius: 10px; border-left-width: 3px; border-left-style: solid; font-size: 13.5px; text-decoration: none; }
.mk-daglijst__post:hover { text-decoration: none; filter: brightness(.97); }
.mk-daglijst__post time { font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }
.mk-daglijst__tekst { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--inkt); }
.mk-daglijst__leeg { color: var(--steen); font-size: 13px; padding: 6px 0; }

@media (max-width: 1200px) {
  .mk-kop { grid-template-columns: 1fr; }
  .mk-kop__cijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-twee { grid-template-columns: 1fr; }
  .mk-paneel--vast { position: static; }
}
@media (max-width: 760px) {
  .mk-kanalen, .mk-velden, .mk-budget { grid-template-columns: 1fr; }
  .mk-campagne__gegevens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-dag { min-height: 64px; padding: 3px; }
  .mk-chip__uur { display: none; }
  .mk-melding li a { grid-template-columns: 1fr; }
  /* Planning: lijst per dag in plaats van de kalender (19/10/2026) */
  .mk-kalender { display: none; }
  .mk-daglijst { display: block; }
  /* Merkband: één compacte rij cijfers met een kort woord (19/10/2026) */
  .mk-kop { padding: 12px 12px 12px 16px; gap: 10px; }
  .mk-kop__logo { width: 40px; height: 40px; border-radius: 10px; }
  .mk-kop__logo span { font-size: 22px; }
  .mk-kop__naam h2 { font-size: 20px; }
  .mk-kop__cijfers { display: flex; flex-wrap: wrap; gap: 6px; }
  .mk-cijfer { flex: 1 1 auto; flex-direction: row; align-items: baseline; gap: 5px; padding: 6px 10px; border-radius: 999px; }
  .mk-cijfer__waarde, .mk-cijfer__waarde--klein { order: -1; font-size: 15px; letter-spacing: 0; }
  .mk-cijfer__waarde small { font-size: 12px; }
  .mk-cijfer__label { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap; }
  .mk-lang, .mk-cijfer__voet, .mk-cijfer__iconen, .mk-cijfer .mk-meter { display: none; }
  .mk-kort { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-media__item, .mk-mediakeuze img, .mk-voortgang__balk span { transition: none; }
}

/* ---------------------------------------------------------- klantscore (17/10/2026) */
.klantscore { border-top: 3px solid var(--lijn); }
.klantscore--top { border-top-color: var(--smaragd); }
.klantscore--goed { border-top-color: var(--dennengroen); }
.klantscore--aandacht { border-top-color: var(--amber); }
.klantscore--risico { border-top-color: var(--rood); }
.klantscore__top { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.klantscore__getal { font-family: var(--body); font-weight: 700; font-size: 40px; line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: lining-nums tabular-nums; color: var(--inkt); white-space: nowrap; }
.klantscore__getal small { font-size: 15px; color: var(--steen); font-weight: 600; }
.klantscore__deel { margin: 10px 0; }
.klantscore__rij { display: flex; justify-content: space-between; font-size: 13px; }
.klantscore__rij span { color: var(--steen); font-variant-numeric: tabular-nums; }
.klantscore__balk { height: 6px; border-radius: 99px; background: var(--lijn-zacht); overflow: hidden; margin: 4px 0 3px; }
.klantscore__balk span { display: block; height: 100%; border-radius: 99px; background: var(--dennengroen); }
.klantscore--top .klantscore__balk span { background: var(--smaragd); }
.klantscore--aandacht .klantscore__balk span { background: var(--amber); }
.klantscore--risico .klantscore__balk span { background: var(--rood); }
.klantscore__vorm { display: grid; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--lijn-zacht); }
.klantscore__vorm label { font-size: 12px; font-weight: 600; color: var(--steen); text-transform: none; letter-spacing: 0; margin: 0; }

/* ---------------------------------------------------------- klantportaal, beheer (17/10/2026) */
.portaalbeheer__wie { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--lijn-zacht); }
.portaalbeheer__wie form { margin: 0; }
.portaalbeheer__uitnodig { display: grid; gap: 6px; margin-top: 10px; }
.portaalbeheer__stappen { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.portaalbeheer__stappen li { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 6px; align-items: center; font-size: 13px;
  padding: 6px 8px; border-radius: 8px; }
.portaalbeheer__stappen li span { grid-column: 1 / -1; font-weight: 600; }
.portaalbeheer input, .portaalbeheer select, .portaalbeheer textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--lijn); border-radius: var(--r-klein); font: inherit; font-size: 13.5px; background: #fff; color: var(--inkt); }
.portaalbeheer .rij select { width: auto; flex: 1; }
.portaalbeheer__stappen li.is-klaar span { color: var(--steen); }
.portaalbeheer__stappen li.is-klaar span::before { content: '✓ '; color: var(--smaragd); font-weight: 700; }
.portaalbeheer__stappen li.is-bezig { background: var(--amber-zacht); }
.portaalbeheer__stappen input { padding: 4px 6px; font-size: 12px; }
/* Roadmap op de klantfiche: kolomkoppen en automatische datums als tekst (ronde 3, punt 42). */
.portaalbeheer__kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 8px 3px; font-size: 10.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--steen); }
.portaalbeheer__auto { min-width: 0; font-size: 12px; color: var(--steen); }
.portaalbeheer__auto > summary { cursor: pointer; list-style: none; padding: 4px 0; font-variant-numeric: lining-nums tabular-nums; }
.portaalbeheer__auto > summary::-webkit-details-marker { display: none; }
.portaalbeheer__auto > summary:hover { color: var(--smaragd); text-decoration: underline; text-underline-offset: 3px; }
.portaalbeheer__auto[open] > summary { margin-bottom: 4px; }
/* Klantfiche, Aanvragen (ronde 3, punt 43): bijlagen met hun naam, afgehandelde aanvragen achter een uitklapper. */
.portaalbeheer__bijlagen { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; }
.portaalbeheer__bijlagen a { overflow-wrap: anywhere; }
.portaalbeheer__meer > summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--steen); padding: 10px 0 4px; }
.portaalbeheer__meer > summary:hover { color: var(--smaragd); }
/* Klantfiche: open portaalaanvragen in de kop (ronde 3, punt 49). */
.fk-aanvragen { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--steen); text-decoration: none; }
.fk-aanvragen:hover { color: var(--smaragd); text-decoration: none; }
@media (max-width: 760px) { .fk-aanvragen { order: 2; margin: 0 0 12px; } }
/* Klantenlijst op de gsm (ronde 3, punt 46): de tabel schuift zijwaarts, namen breken niet midden in een woord. */
@media (max-width: 760px) {
  .tabel--schuif { table-layout: auto; min-width: 720px; }
  .tabel--schuif td { overflow-wrap: normal; }
}
.portaalbeheer__aanvraag { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--lijn-zacht); margin: 0; }
.portaalbeheer__aanvraag textarea { font-size: 13px; }

.mk-feestdag { font-size: 10px; font-weight: 700; color: #8a5314; background: var(--amber-zacht); border-radius: 4px; padding: 1px 5px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portaalbeheer__sluitingen { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.portaalbeheer__sluitingen li { display: flex; justify-content: space-between; gap: 8px; align-items: center; }

/* Klantpagina's en klantportaal (17/10/2026, verbeterlijst) */
/* Lettertypes van Studio Nexus voor de klantpagina's (Merk::stijlblok zet --kop en --body).
   Variabele bestanden: één bestand dekt alle gewichten. Laden pas als een pagina ze gebruikt. */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat.ttf') format('truetype-variations'), url('../fonts/montserrat.ttf') format('truetype');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/source-sans-3.ttf') format('truetype-variations'), url('../fonts/source-sans-3.ttf') format('truetype');
  font-weight: 200 900; font-style: normal; font-display: swap;
}
/* Klaar zetten: bestede minuten en soort verschijnen enkel als de keuze op Klaar staat. */
.portaalbeheer__klaar { display: none; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--steen); }
.portaalbeheer__aanvraag:has(select[name=status] option[value=klaar]:checked) .portaalbeheer__klaar { display: flex; }
.portaalbeheer__klaar input[type=number] { width: 86px; }
.portaalbeheer__klaar select { width: auto; }

/* Financieel en beheer (17/10/2026, verbeterlijst) */

/* Tabbladen die niet op het scherm passen (Instellingen heeft er dertien):
   zijwaarts schuiven met een dunne, zichtbare schuifbalk in de huisstijl -
   dennengroene duim op een lichte goudbaan. Dit heft voor .tabs de verborgen
   schuifbalk van hierboven op. overflow-y hidden: het onderstreepje van het
   actieve tabblad steekt 1 px uit en mag geen verticale balk oproepen. */
.tabs {
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: auto; -ms-overflow-style: auto;
  overscroll-behavior-x: contain;
}
.tabs::-webkit-scrollbar { height: 6px; width: 0; }
.tabs::-webkit-scrollbar-track { background: rgba(231, 181, 60, .22); border-radius: 999px; margin: 0 2px; }
.tabs::-webkit-scrollbar-thumb { background: var(--dennengroen); border-radius: 999px; }
.tabs::-webkit-scrollbar-thumb:hover { background: var(--smaragd); }
/* Firefox kent enkel scrollbar-color en scrollbar-width. In Chrome en Edge
   schakelen die de afgeronde balk hierboven uit, vandaar enkel voor Firefox. */
@supports (-moz-appearance: none) {
  .tabs { scrollbar-width: thin; scrollbar-color: var(--dennengroen) rgba(231, 181, 60, .22); }
}
/* Zachte vervaging aan de kant waar nog tabbladen staan (app.js zet de
   klassen). De onderste strook met de lijn en de schuifbalk blijft scherp. */
.tabs--schuift { --rand-l: 0px; --rand-r: 0px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--rand-l), #000 calc(100% - var(--rand-r)), transparent 100%), linear-gradient(#000, #000);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--rand-l), #000 calc(100% - var(--rand-r)), transparent 100%), linear-gradient(#000, #000);
  -webkit-mask-size: 100% calc(100% - 8px), 100% 8px;
          mask-size: 100% calc(100% - 8px), 100% 8px;
  -webkit-mask-position: left top, left bottom;
          mask-position: left top, left bottom;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.tabs--meer-links  { --rand-l: 44px; }
.tabs--meer-rechts { --rand-r: 56px; }
/* Met een schuifbalk eronder staat het oranje streepje van het actieve
   tabblad volledig boven de balk, met wat lucht. */
.tabs--schuift { padding-bottom: 4px; }
.tabs--schuift a, .tabs--schuift button { margin-bottom: 0; }

/* Kerncijfers in het basislettertype, vet en met gelijke cijfers: Cormorant
   heeft oude-stijl cijfers die op en neer wippen. Koppen houden Cormorant,
   maar een getal in een kop staat op de regel. */
.kpi__cijfer { font-family: var(--body); font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: lining-nums tabular-nums; }
h1, h2, h3, h4 { font-variant-numeric: lining-nums; }
/* Ook buiten h1-h4 staat Cormorant: uitklapkoppen, legendes, het woordmerk en de
   klantpagina's. Gelijke cijfers voor de hele pagina; Manrope en Montserrat hebben
   die al, dus daar verandert niets (verbeterlijst ronde 3, punt 133). */
html, body, details.kaart > summary, legend, .woordmerk, .zijbalk__merk { font-variant-numeric: lining-nums; }
/* Een nummer in een kop (offerte OF-26001, factuur 2026-014): in het basislettertype
   met gelijke cijfers, iets kleiner zodat het naast Cormorant niet uitsteekt (19/10/2026). */
.kop-nr, h1 .mono, h2 .mono, h3 .mono, h4 .mono { font-family: var(--body); font-weight: 600; font-size: .86em;
  letter-spacing: 0; font-variant-numeric: lining-nums tabular-nums; }

/* Dashboard, "Contractueel nog te factureren" per contract: drie kolommen die
   ook in een smalle tegel passen, nooit schuiven binnen de tegel. */
table.orderlijst { table-layout: auto; }
table.orderlijst th { white-space: normal; letter-spacing: .04em; }
table.orderlijst th, table.orderlijst td { padding-left: 6px; padding-right: 6px; }
table.orderlijst th.num { width: auto; }
table.orderlijst td.num { white-space: nowrap; }
table.orderlijst td:first-child { width: auto; overflow-wrap: break-word; }
.orderlijst__onder { display: block; font-size: 11.5px; color: var(--steen); line-height: 1.35; margin-top: 2px; }
.orderlijst__onder span { white-space: nowrap; }
/* Keuzeknoppen in een smalle tegel lopen door op een tweede regel in plaats
   van afgesneden te worden ("Per con..."). */
.tegel .knopgroep { flex-wrap: wrap; max-width: 100%; }
.tegel .knopgroep a { flex: 1 0 auto; text-align: center; box-shadow: 0 1px 0 var(--lijn); }

/* Uren: aanpassen en verwijderen per boeking, zolang ze niet gefactureerd is. */
.uren-acties { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; font-size: 12px; white-space: nowrap; }
.uren-acties form { margin: 0; display: inline; }
.linkknop { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--rood); cursor: pointer; }
.linkknop:hover { text-decoration: underline; }
.linkknop:focus-visible { outline: 2px solid var(--smaragd); outline-offset: 2px; }

/* Nieuwe factuur: uren ter plaatse invoegen. */
.uren-invoegen__melding { margin: 8px 0 0; font-size: 13px; }
.uren-invoegen__melding--let { color: #8a5314; }

/* Marketing en intern werk (17/10/2026, verbeterlijst) */
/* Belletje: "Alles gelezen" in de kop, beslissingen blijven in het oog springen. */
.bel__kopacties { display: inline-flex; align-items: baseline; gap: 12px; }
.bel__kopacties form { margin: 0; }
.bel__allesgelezen { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--smaragd); cursor: pointer; }
.bel__allesgelezen:hover { text-decoration: underline; }
.bel__allesgelezen:focus-visible { outline: 2px solid var(--smaragd); outline-offset: 2px; }
.bel__item--beslis { box-shadow: inset 3px 0 0 var(--amber); }
.bel__beslis { color: #8a5314; font-weight: 700; }
.meldingenlijst li > div { flex: 1 1 auto; min-width: 0; }
.meldingenlijst li.meldingenlijst__beslis { box-shadow: inset 3px 0 0 var(--amber); }
.meldingenlijst__actie { margin: 0; flex: 0 0 auto; }
/* Opstartgids: stand van het bewaren naast de knop. */
.mk-bewaard { align-self: center; font-size: 12.5px; color: var(--steen); }
.mk-bewaard--ok { color: var(--smaragd); }
.mk-bewaard--let { color: #8a5314; font-weight: 700; }
.mk-paneel .mk-bewaard { margin-left: 8px; }
/* Campagne: eigen aanvraag wacht op een andere vennoot. */
.mk-wacht { margin: 10px 0 0; padding: 8px 10px; border-radius: var(--r-klein); background: var(--amber-zacht);
  color: #6b4210; font-size: 12.5px; line-height: 1.45; }
/* Taken: afgewerkte rij gedimd, titel als link, gegevens op het bewerkscherm. */
tr.taak--klaar td { color: var(--steen); }
tr.taak--klaar td strong { text-decoration: line-through; text-decoration-color: rgba(107, 117, 110, .5); }
.taak__titel { color: inherit; }
.taak__gegevens { margin: 0; display: grid; gap: 8px; }
.taak__gegevens div { display: grid; grid-template-columns: 110px 1fr; gap: 8px; }
.taak__gegevens dt { color: var(--steen); font-size: 13px; }
.taak__gegevens dd { margin: 0; }
/* Takenlijst op de gsm (19/10/2026): onder 620 px een kaartje per taak,
   met titel, wie en datum, en de knop Klaar rechts in beeld. */
@media (max-width: 620px) {
  table.tabel.tabel--taken, table.tabel.tabel--taken tbody { display: block; }
  table.tabel.tabel--taken thead { display: none; }
  table.tabel.tabel--taken tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "titel titel actie" "wie datum actie"; gap: 4px 10px; align-items: center;
    padding: 10px 4px; border-bottom: 1px solid var(--lijn-zacht); }
  table.tabel.tabel--taken-sel tr { grid-template-columns: 26px minmax(0, 1fr) auto auto;
    grid-template-areas: "sel titel titel actie" "sel wie datum actie"; }
  table.tabel.tabel--taken td { display: block; padding: 0; border: 0; min-width: 0; }
  table.tabel.tabel--taken .selectie-vak { grid-area: sel; width: auto; text-align: left; }
  table.tabel.tabel--taken .taak__cel-titel { grid-area: titel; overflow-wrap: anywhere; }
  table.tabel.tabel--taken .taak__cel-wie { grid-area: wie; font-size: 12.5px; color: var(--steen); }
  table.tabel.tabel--taken .taak__cel-datum { grid-area: datum; font-size: 12.5px; }
  table.tabel.tabel--taken .taak__cel-actie { grid-area: actie; text-align: right; }
  table.tabel.tabel--taken .taak__cel-actie .knop { min-height: 40px; }
  table.tabel.tabel--taken .taak__cel-actie .label { display: none; }
}
/* Documentenkast: stukken zonder merk bovenaan, met keuzelijst. */
.docs-zondermerk { margin-bottom: 18px; padding: 10px 12px 4px; border: 1px dashed #D9C9A8; border-radius: var(--r);
  background: var(--amber-zacht); }
.docs-zondermerk .tabel { background: transparent; }
.docs-merkkeuze { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.docs-merkkeuze select { padding: 5px 8px; border: 1px solid var(--lijn); border-radius: var(--r-klein); font: inherit; font-size: 13px; background: #fff; }

/* Volledigheid van de leadgegevens (17/10/2026): badge rechts in de kop van Gegevens,
   en een uitgeschakelde knop zolang de bouwprompt niet kan. */
.volledig { margin-left: auto; padding: 2px 10px; border-radius: 99px; font-family: var(--body); font-size: 11.5px; font-weight: 600;
  background: var(--smaragd); color: #fff; letter-spacing: 0; text-transform: none; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.volledig--niet { background: var(--amber-zacht); color: #8a5314; }
details.kaart > summary:has(.volledig) { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.knop--uit, .knop--uit:hover { background: var(--lijn); border-color: var(--lijn); color: var(--steen); cursor: not-allowed; }

/* Verkoop (17/10/2026, verbeterlijst): leadfiche met de volgende stap bovenaan
   en de kaarten in de volgorde van het traject. */
.leadstap { border-left: 4px solid var(--amber); padding: 14px 16px 12px; }
.leadstap__kop { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.leadstap__tekst { flex: 1 1 320px; min-width: 0; }
.leadstap__eyebrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 10.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--steen); }
.leadstap__eyebrow .label { letter-spacing: 0; text-transform: none; font-variant-numeric: lining-nums tabular-nums; }
.leadstap__wat { margin: 6px 0 0; font-size: 16px; font-weight: 600; color: var(--dennengroen); }
.leadstap > .leadstap__kop > .knop { flex: 0 0 auto; }
.leadstap__lijn { list-style: none; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--lijn);
  display: flex; gap: 6px; flex-wrap: wrap; counter-reset: none; }
.leadstap__lijn li { flex: 1 1 0; min-width: 120px; }
.leadstap__lijn a { display: flex; gap: 7px; align-items: center; padding: 5px 8px; border-radius: var(--r-klein, 6px);
  font-size: 12.5px; color: var(--steen); text-decoration: none; white-space: nowrap; }
.leadstap__lijn a:hover { background: var(--creme); color: var(--dennengroen); }
.leadstap__lijn a span { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--lijn); font-size: 11px; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; flex: 0 0 auto; }
.leadstap__lijn li.gedaan a span { background: var(--smaragd); border-color: var(--smaragd); color: #fff; }
.leadstap__lijn li.nu a { background: var(--amber-zacht); color: var(--dennengroen); font-weight: 600; }
.leadstap__lijn li.nu a span { background: var(--amber); border-color: var(--amber); color: #fff; }
.stapnr { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%;
  background: var(--creme); border: 1px solid var(--lijn); font-family: var(--body); font-size: 12px; font-weight: 600;
  color: var(--steen); vertical-align: 2px; font-variant-numeric: lining-nums tabular-nums; }
.kaart--nu { border-left: 4px solid var(--amber); }
.kaart--nu .stapnr { background: var(--amber); border-color: var(--amber); color: #fff; }
@media (max-width: 1100px) {
  .leadfiche { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .leadstap__lijn li { flex: 1 1 45%; min-width: 0; }
  .leadstap__kop > .knop { width: 100%; text-align: center; }
}

/* Lead- en klantfiche: kopkaart, tabbladen en dossier (18/10/2026, verbeterlijst)
   Ontwerp C (kop met contact, volgende stap en stappenbalk; tabbladen eronder)
   met het dossier van ontwerp B (taken, documenten, berichten, historiek in 2 x 2).
   Cijfers, datums, stapnummers en bedragen altijd in Manrope, op de regel. */
.fiche .kaart { padding: 18px 20px; border-radius: 12px; margin-bottom: 14px; }
.fiche h3 { font-size: 21px; font-weight: 700; margin: 0; line-height: 1.15; }
.fiche h4 { font-weight: 700; }
.cijfer, .lf-nr, .fiche time { font-family: var(--body); font-variant-numeric: lining-nums tabular-nums; }
.fiche .num, .fiche .hint, .fiche .label { font-variant-numeric: lining-nums tabular-nums; }
.lf-eyebrow { display: block; font-family: var(--body); font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--steen); line-height: 1.4; font-variant-numeric: lining-nums tabular-nums; }
.lf-ic { width: 16px; height: 16px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.knop .lf-ic { width: 15px; height: 15px; }
.lf-hint { font-size: 13px; color: var(--steen); line-height: 1.5; font-variant-numeric: lining-nums tabular-nums; }
.lf-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--smaragd);
  background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--body); }
.lf-link .lf-ic { width: 14px; height: 14px; }
.lf-sep { color: #C9C2B3; margin: 0 6px; }

/* Stapnummer: altijd in een rondje, Manrope, met lucht tot de titel. */
.lf-nr { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
  font-size: 13px; font-weight: 700; line-height: 1; background: #fff; border: 1.5px solid #D6D0C3; color: var(--steen); }
.lf-nr--gedaan { background: var(--smaragd); border-color: var(--smaragd); color: #fff; }
.lf-nr--nu { background: var(--amber); border-color: var(--amber); color: #fff; box-shadow: 0 0 0 4px var(--amber-zacht); }
.lf-nr--let { background: var(--amber-zacht); border-color: var(--amber); color: #8a5314; }
.lf-nr--klein { width: 24px; height: 24px; flex-basis: 24px; font-size: 11.5px; }
.lf-nr--klein.lf-nr--nu { box-shadow: 0 0 0 3px var(--amber-zacht); }

/* Volledig of onvolledig. */
.lf-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700; line-height: 1.2; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.lf-badge .lf-ic { width: 14px; height: 14px; stroke-width: 2.4; }
.lf-badge--ok { background: var(--groen-zacht); color: var(--dennengroen); }
.lf-badge--let { background: var(--amber-zacht); color: #8a5314; box-shadow: inset 0 0 0 1px #EDCFA4; }

/* Stappenbalk: zeven rondjes op een lijn, het woord eronder, één keer het nummer. */
.lf-stappen { list-style: none; margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--lijn-zacht);
  display: grid; grid-template-columns: repeat(var(--stappen, 7), minmax(0, 1fr)); }
.lf-stappen li { position: relative; min-width: 0; }
.lf-stappen a { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; padding: 0 4px;
  color: inherit; text-decoration: none; }
.lf-stappen a:hover .lf-stappen__naam { color: var(--dennengroen); text-decoration: underline; text-underline-offset: 3px; }
.lf-stappen li::before { content: ''; position: absolute; top: 11px; left: calc(-50% + 16px); right: calc(50% + 16px);
  height: 2px; border-radius: 2px; background: var(--lijn); }
.lf-stappen li:first-child::before { display: none; }
.lf-stappen li.gedaan::before, .lf-stappen li.nu::before { background: var(--smaragd); }
.lf-stappen .lf-nr { width: 24px; height: 24px; flex-basis: 24px; font-size: 11.5px; position: relative; }
.lf-stappen__naam { font-size: 12.5px; font-weight: 600; color: var(--inkt); line-height: 1.3; }
.lf-stappen__datum { font-size: 11.5px; color: var(--steen); margin-top: -4px; font-variant-numeric: lining-nums tabular-nums; }
.lf-stappen li.later .lf-stappen__naam { color: var(--steen); font-weight: 500; }
.lf-stappen li.nu .lf-stappen__naam { color: var(--dennengroen); font-weight: 700; }
.lf-stappen li.nu .lf-stappen__datum, .lf-stappen li.let .lf-stappen__datum { color: #8a5314; font-weight: 600; }

/* Kopkaart. */
.fk { background: linear-gradient(135deg, #F3F7F4 0%, #FFFFFF 55%); border: 1px solid var(--lijn); border-radius: 16px;
  box-shadow: var(--schaduw); padding: 22px 24px 18px; position: relative; overflow: hidden; }
.fk::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--dennengroen); }
.fk__raster { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .85fr) minmax(0, 1.25fr); gap: 26px; align-items: stretch; }
.fk__raster > * { min-width: 0; }
.fk-id { display: flex; gap: 16px; align-items: flex-start; min-width: 0; }
.fk-mono { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 14px; background: var(--dennengroen); color: var(--goud);
  display: grid; place-items: center; font-family: var(--kop); font-size: 28px; font-weight: 700; text-transform: uppercase; }
/* 21/10/2026: opgeladen logo van de klant in hetzelfde vak, niet uitgerekt */
.fk-mono--logo { background: #FFFFFF; border: 1px solid var(--lijn); padding: 5px; overflow: hidden; }
.fk-mono--logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.fk-id__tekst { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.fk-id h2 { font-size: 28px; font-weight: 700; margin: 0; line-height: 1.1; overflow-wrap: anywhere; }
.fk-id__sub { font-size: 13.5px; color: var(--steen); margin: 3px 0 12px; line-height: 1.45; }
.fk-chips { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; font-variant-numeric: lining-nums tabular-nums; }
.fk-chips > * { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: var(--inkt); }
.fk-chips a { color: var(--inkt); text-decoration: none; }
.fk-chips a:hover { color: var(--smaragd); text-decoration: underline; text-underline-offset: 3px; }
.fk-chips .lf-ic { color: var(--steen); }
.fk-chips .fk-leeg { color: #8a5314; }
.fk-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.fk-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; align-content: start; padding-left: 26px;
  border-left: 1px solid var(--lijn-zacht); }
.fk-meta > div { min-width: 0; }
.fk-meta strong { display: block; margin-top: 4px; font-size: 14px; overflow-wrap: anywhere; font-variant-numeric: lining-nums tabular-nums; }
.fk-meta .fk-breed { grid-column: 1 / -1; }
.fk-wie { display: inline-flex; align-items: center; gap: 6px; }
/* Eigenaar volgens de zone (19/10/2026): label "uitzondering" en het potloodje met een kleine keuzelijst. */
.fk-uitz { margin-left: 4px; padding: 1px 7px; font-size: 10.5px; vertical-align: 1px; cursor: help; }
.fk-eigkeuze { margin-top: 3px; }
.fk-meta > .fk-eig:has(> .fk-eigkeuze[open]) { grid-column: 1 / -1; }   /* open: de volle breedte, geen smal kolommetje */
.fk-eigkeuze .knop { white-space: nowrap; }
.fk-eigkeuze > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; color: var(--steen); }
.fk-eigkeuze > summary::-webkit-details-marker { display: none; }
.fk-eigkeuze > summary:hover, .fk-eigkeuze[open] > summary { color: var(--smaragd); }
.fk-eigkeuze > summary .lf-ic { width: 13px; height: 13px; }
.fk-eigkeuze form { margin-top: 8px; padding: 10px; background: #fff; border: 1px solid var(--lijn); border-radius: 10px; }
.fk-eigkeuze select { width: 100%; min-width: 0; font-size: 13.5px; padding: 6px 8px; border: 1px solid var(--lijn); border-radius: 8px; background: #fff; }
.fk-eigkeuze__knoppen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fk-eigkeuze .lf-hint { margin: 8px 0 0; font-size: 12px; }
.fk-eigkeuze .lf-hint strong { display: inline; margin: 0; font-size: inherit; }
.fk-volgende { background: #fff; border: 1px solid #EDD9BC; border-radius: 12px; padding: 14px 16px;
  box-shadow: 0 0 0 4px var(--amber-zacht); align-self: start; }
.fk-volgende__kop { display: flex; justify-content: space-between; align-items: center; gap: 6px 8px; flex-wrap: wrap; }
.fk-volgende__kop .lf-eyebrow { white-space: nowrap; }
.fk-volgende p { margin: 8px 0 12px; font-size: 15.5px; font-weight: 600; color: var(--dennengroen); line-height: 1.4;
  font-variant-numeric: lining-nums tabular-nums; }
.fk-volgende p.lf-hint { font-size: 12.5px; font-weight: 400; color: var(--steen); margin: -6px 0 12px; }
.fk-volgende--rood { border-color: #E9C2BB; box-shadow: 0 0 0 4px var(--rood-zacht); }

/* Kerncijfers rechts in de kop van de klantfiche. */
.fk-cijfers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-self: start; }
.fk-cijfer { background: #fff; border: 1px solid var(--lijn); border-radius: 12px; padding: 11px 14px; min-width: 0; }
.fk-cijfer__waarde { display: block; margin-top: 5px; font-family: var(--body); font-weight: 700; font-size: 20px; line-height: 1.2;
  color: var(--inkt); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; letter-spacing: -.01em; }
.fk-cijfer__waarde small { font-size: 12.5px; font-weight: 600; color: var(--steen); margin-left: 2px; }
.fk-cijfer__voet { display: block; font-size: 12px; color: var(--steen); margin-top: 1px; font-variant-numeric: lining-nums tabular-nums;
  overflow-wrap: anywhere; }
.fk-cijfer--let .fk-cijfer__waarde { color: #8a5314; }
.fk-cijfer--rood .fk-cijfer__waarde { color: var(--rood); }
.fk-cijfer--breed { grid-column: 1 / -1; }
.fk-cijfer--breed a { font-weight: 600; }

/* Tabbladen van de fiche: de gewone tabbalk, met een vinkje voor wat klaar is en
   een stip voor de huidige stap. Zonder script staan alle vakken onder elkaar. */
.fiche-tabs { margin: 18px 0 18px; }
.fiche-tabs a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; padding: 10px 16px 12px; }
.fiche-tabs .fk-vink { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--groen-zacht); color: var(--smaragd); }
.fiche-tabs .fk-vink .lf-ic { width: 12px; height: 12px; stroke-width: 3; }
.fiche-tabs .fk-stip { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 3px var(--amber-zacht); }
.fiche-tabs .fk-let { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--amber-zacht); color: #8a5314; font-size: 11px; font-weight: 800; }
.fiche-tabs .telling { margin-left: 0; font-variant-numeric: lining-nums tabular-nums; }
.fiche-vak, .fiche-tabs { scroll-margin-top: 80px; }
.fiche-vak__kop { font-size: 24px; margin: 26px 0 12px; }
.fiche--js .fiche-vak { display: none; }
.fiche--js .fiche-vak.is-aan { display: block; }
.fiche--js .fiche-vak__kop { display: none; }
.fiche .kaart[id], .fiche [id] > .kaart { scroll-margin-top: 80px; }

/* Rasters binnen een tabblad. */
.fk-drie { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.fk-twee { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.fk-helft { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.fk-drie > *, .fk-twee > *, .fk-helft > * { min-width: 0; }

/* Kaartkop met teller (dossier, overzicht). */
.lf-kaartkop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.lf-kaartkop h3 { font-size: 20px; }
.lf-teller { font-size: 12px; color: var(--steen); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
.lf-stapkop { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.lf-stapkop__titel { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lf-stapkop > .label, .lf-stapkop > .lf-badge { flex: 0 0 auto; }
.lf-stap--nu { border-left: 4px solid var(--amber); }
.lf-voet { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--lijn-zacht); flex-wrap: wrap; }
.lf-sub { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 16px 0 10px;
  padding-top: 14px; border-top: 1px solid var(--lijn-zacht); }
.lf-sub h4 { font-size: 18px; margin: 0; }

/* Lijstjes in de kaarten. */
.lf-lijst { list-style: none; margin: 0; padding: 0; }
.lf-lijst > li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--lijn-zacht);
  font-size: 13.5px; line-height: 1.45; }
.lf-lijst > li:first-child { border-top: 0; padding-top: 0; }
.lf-lijst__tekst { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.lf-lijst__tekst small { display: block; font-size: 12px; color: var(--steen); font-variant-numeric: lining-nums tabular-nums; }
.lf-lijst__rechts { flex: 0 0 auto; font-size: 12.5px; color: var(--steen); text-align: right; white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums; }
.lf-lijst--klaar .lf-lijst__tekst { color: var(--steen); text-decoration: line-through; }
.lf-vakform { margin: 0; display: contents; }
.lf-vak { width: 18px; height: 18px; flex: 0 0 18px; border: 1.5px solid #C9C2B3; border-radius: 4px; margin-top: 1px;
  background: #fff; padding: 0; cursor: pointer; display: grid; place-items: center; color: #fff; }
.lf-vak:hover { border-color: var(--smaragd); background: var(--groen-zacht); }
.lf-vak--aan { background: var(--smaragd); border-color: var(--smaragd); }
.lf-vak .lf-ic { width: 12px; height: 12px; stroke-width: 3; }
.lf-bestand { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 7px;
  background: var(--lijn-zacht); color: var(--steen); }
.lf-bestand .lf-ic { width: 15px; height: 15px; }

/* Gegevens met vinkjes (Contact en KBO in het overzicht). */
.lf-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 13px; }
.lf-check li { display: grid; grid-template-columns: 16px 112px minmax(0, 1fr); gap: 6px; align-items: baseline;
  font-variant-numeric: lining-nums tabular-nums; }
.lf-check li .lf-ic { color: var(--smaragd); width: 15px; height: 15px; stroke-width: 2.6; vertical-align: -2px; }
.lf-check .lf-check__l { color: var(--steen); font-size: 12.5px; }
.lf-check li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.lf-check li.mist .lf-ic { color: var(--amber); }
.lf-check li.mist > span:last-child { color: #8a5314; font-style: italic; }
.lf-dl { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 14px; }
.lf-dl dt { color: var(--steen); font-size: 12.5px; padding-top: 1px; }
.lf-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-variant-numeric: lining-nums tabular-nums; }

/* Traject in het overzicht. */
.lf-traject { list-style: none; margin: 0; padding: 0; }
.lf-traject li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--lijn-zacht); font-size: 14px; }
.lf-traject li:first-child { border-top: 0; padding-top: 0; }
.lf-traject__naam { flex: 1; min-width: 0; font-weight: 600; color: var(--inkt); text-decoration: none; }
a.lf-traject__naam:hover { color: var(--dennengroen); text-decoration: underline; text-underline-offset: 3px; }
.lf-traject li.later .lf-traject__naam { color: var(--steen); font-weight: 500; }
.lf-traject__rechts { font-size: 12.5px; color: var(--steen); text-align: right; font-variant-numeric: lining-nums tabular-nums; }
.lf-traject li.nu { background: var(--amber-zacht); margin: 0 -10px; padding: 9px 10px; border-radius: 8px; border-top-color: transparent; }
.lf-traject li.nu + li { border-top-color: transparent; }
.lf-traject li.nu .lf-traject__rechts { color: #8a5314; font-weight: 600; }
.lf-afloop { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--lijn-zacht); }
.lf-afloop form { margin: 0; }

/* Cijfertegels (doorgestuurd, bekeken). */
.lf-tegels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.lf-tegels--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* "Ons advies" op de kaart Google Analytics en cookies (22/10/2026). De koppen van die
   kaart mogen afbreken, anders duwen ze de antwoorden op de gsm weg. */
#cookiekeuze table.tabel th { white-space: normal; width: 34%; }
.lf-advies { margin: 12px 0 0; padding: 10px 12px; border-left: 3px solid var(--lijn); background: #FDFBF6; border-radius: 0 8px 8px 0; font-size: 13.5px; line-height: 1.5; }
.lf-tegel { border: 1px solid var(--lijn); border-radius: 10px; padding: 9px 12px; background: #FDFBF6; min-width: 0; }
.lf-tegel .lf-eyebrow { letter-spacing: .07em; }
.lf-tegel__waarde { font-family: var(--body); font-weight: 700; font-size: 18px; line-height: 1.2; margin-top: 5px; color: var(--inkt);
  font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.lf-tegel__waarde small { font-size: 13px; font-weight: 600; color: var(--steen); margin-left: 2px; }
.lf-tegel__voet { font-size: 12px; color: var(--steen); font-variant-numeric: lining-nums tabular-nums; margin-top: 1px; }

/* Werkstappen in een kaart (voorbeeldsite: prompt, link, mail). */
.lf-werk { list-style: none; margin: 0; padding: 0; }
.lf-werk > li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--lijn-zacht); }
.lf-werk > li:first-child { border-top: 0; padding-top: 2px; }
.lf-werk__inhoud { flex: 1; min-width: 0; }
.lf-werk__inhoud > strong { display: block; font-size: 14.5px; margin: 3px 0 6px; }
.lf-werk__inhoud .knoppenrij { margin-top: 8px; }

/* Korte berichten en een in- of uitklapbaar formulier onderaan een kaart. */
.lf-bericht { background: #FDFBF6; border: 1px solid var(--lijn-zacht); border-radius: 10px; padding: 9px 12px; font-size: 13.5px;
  line-height: 1.5; overflow-wrap: anywhere; }
.lf-bericht + .lf-bericht { margin-top: 8px; }
.lf-bericht__kop { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--steen);
  margin-bottom: 3px; font-variant-numeric: lining-nums tabular-nums; }
.lf-bericht__kop strong { color: var(--inkt); }
.lf-kortbericht { margin-top: 10px; }
.lf-kortbericht textarea { min-height: 44px; font-size: 13.5px; }
.lf-kortbericht .knop { margin-top: 6px; }
.lf-erbij { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--lijn-zacht); }
.lf-erbij > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
  font-weight: 600; color: var(--smaragd); }
.lf-erbij > summary::-webkit-details-marker { display: none; }
.lf-erbij > summary::before { content: '+'; font-size: 17px; line-height: 1; font-weight: 500; }
.lf-erbij[open] > summary::before { content: '\2212'; }
.lf-erbij[open] > summary { margin-bottom: 12px; }
.lf-erbij .lf-hint { margin-left: auto; }

/* Dossier (ontwerp B): twee kolommen kaarten. */
.lf-dossier { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.lf-dossier > div { min-width: 0; }
.lf-dossier .tabel td { padding-top: 8px; padding-bottom: 8px; }
.lf-dossier .berichten { max-height: 520px; overflow-y: auto; }
.lf-dkaart .docs__filter { margin-bottom: 8px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lf-dkaart .docs__filter[hidden] { display: none; }
.lf-dkaart .docs__filter select { padding: 5px 8px; border: 1px solid var(--lijn); border-radius: var(--r-klein); font: inherit;
  font-size: 13px; background: #fff; }
.lf-dkaart .docs__acties .knop { padding: 4px 9px; font-size: 12px; }
.lf-dkaart .docs__acties .knop--gevaar { background: transparent; color: var(--rood); border-color: #E9C2BB; }
.lf-dkaart .docs__acties .knop--gevaar:hover { background: var(--rood-zacht); }
.lf-kortbericht textarea { width: 100%; }
.lf-dkaart .leeg { padding: 4px 0 2px; text-align: left; font-style: normal; font-size: 13px; }
.fiche .klantscore__vorm select, .fiche .klantscore__vorm input[type="text"] { width: 100%; padding: 7px 10px; border: 1px solid var(--lijn);
  border-radius: var(--r-klein); font: inherit; font-size: 13.5px; background: #fff; color: var(--inkt); }
.fiche .klantscore__vorm { display: grid; gap: 8px; }
.fiche .klantscore__vorm .knop { justify-self: start; }

@media (max-width: 1240px) {
  .fk__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fk-volgende, .fk-cijfers { grid-column: 1 / -1; }
  .fk-drie { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fk-drie > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .fk-twee, .fk-helft, .lf-dossier { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .fiche .kaart { padding: 15px; }
  .fk { padding: 16px 16px 14px; border-radius: 14px; }
  .fk__raster { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .fk-meta { padding-left: 0; border-left: 0; padding-top: 14px; border-top: 1px solid var(--lijn-zacht); order: 3; }
  .fk-cijfers { order: 2; }
  .fk-id { gap: 12px; }
  .fk-id h2 { font-size: 24px; }
  .fk-mono { width: 46px; height: 46px; flex-basis: 46px; font-size: 23px; border-radius: 12px; }
  .fk-id__sub { margin-bottom: 0; }
  .fk-knoppen { order: 2; display: grid; grid-template-columns: 1fr 1fr; margin: 14px 0 12px 0; }
  .fk-knoppen .knop { justify-content: center; padding: 12px 10px; font-size: 15px; }
  .fk-knoppen .knop .lf-ic { width: 17px; height: 17px; }
  .fk-knoppen .lf-badge { grid-column: 1 / -1; justify-self: start; }
  .fk-chips { order: 3; flex-direction: column; gap: 8px; }
  .fk-id { margin-left: 0; }
  .fk-id__tekst { margin-left: -58px; }
  .fk-id__tekst > h2, .fk-id__tekst > .fk-id__sub { margin-left: 58px; }
  .fk-volgende .knop { width: 100%; justify-content: center; }
  .lf-stappen__naam, .lf-stappen__datum { display: none; }
  .lf-stappen li::before { left: calc(-50% + 13px); right: calc(50% + 13px); }
  .fk-drie { grid-template-columns: minmax(0, 1fr); }
  .lf-check li { grid-template-columns: 16px 104px minmax(0, 1fr); }
  .lf-tegels { grid-template-columns: 1fr 1fr; }
  .lf-tegels > :last-child { grid-column: 1 / -1; }
  .lf-tegels--2 > :last-child { grid-column: auto; }
  .lf-dl { grid-template-columns: 104px minmax(0, 1fr); }
  .fiche-tabs { margin: 14px 0; }
  .fiche-tabs a { padding: 10px 12px 12px; }
}