/* Ingesloten fonts, SIL Open Font License, zelf gehost als woff2 */
@font-face{font-family:"PT Serif";font-style:normal;font-weight:400;font-display:swap;src:url(/letters/PTSerif-Regular.woff2) format("woff2")}
@font-face{font-family:"Source Sans Pro";font-style:normal;font-weight:400;font-display:swap;src:url(/letters/SourceSansPro-Regular.woff2) format("woff2")}
@font-face{font-family:"Source Sans Pro";font-style:normal;font-weight:600;font-display:swap;src:url(/letters/SourceSansPro-Semibold.woff2) format("woff2")}
/* ==============================================================
   ONTWERPTOKENS — dit blok wordt letterlijk de stylesheet.
   Contrastwaarden staan in de tokentabel op de pagina.
   ============================================================== */
:root{
  /* merk, uitgelezen van ffadministraties.nl */
  --petrol:#1b3942;        /* primair donker, koppen, inkt */
  --petrol-vlak:#295462;   /* knopvlak, secundair donker */
  --oranje:#fe5b2c;        /* merkaccent, alleen de primaire actie */
  --oranje-rand:#dc5934;   /* randvariant van het accent */
  --mint:#9eccca;          /* secundair accent, spaarzaam */
  --gedempt:#67797e;       /* gedempte tekst op licht */
  --gedempt-donker:#88a5ad;/* gedempte tekst op donker */
  --vlak:#ffffff;
  --vlak-2:#f7f7f7;
  --rand:#d4d4d4;
  --rand-licht:#e6e6e6;    /* afgeleid: rijlijnen binnen kaarten */
  --inkt-op-oranje:#0e1d23;/* afgeleid: leesbare tekst op het accent */

  /* statusreeks, bewust los van het merkaccent */
  --st-jou-vlak:#295462;   --st-jou-tekst:#ffffff;
  --st-ff-tekst:#24545e;   --st-ff-vlak:#e4f0ef;  --st-ff-rand:#bcd8d6;  --st-ff-bol:#3f7f8c;
  --st-klant-tekst:#7a5410;--st-klant-vlak:#fbf1dc;--st-klant-rand:#ecd9a8;--st-klant-bol:#c9931f;
  --st-klaar-tekst:#14603a;--st-klaar-vlak:#e7f4ec;--st-klaar-rand:#c2e0cd;--st-klaar-bol:#1a8a4f;
  --st-fout-tekst:#9c1f1f; --st-fout-vlak:#fbeaea; --st-fout-rand:#efc4c4; --st-fout-bol:#c22f2f;
  --st-wacht-tekst:#4c5952;--st-wacht-vlak:#f0f0f0;--st-wacht-rand:#d4d4d4;--st-wacht-bol:#8a9296;

  --font-kop:"PT Serif", Georgia, "Times New Roman", serif;
  --font-ui:"Source Sans Pro", "Source Sans 3", "Segoe UI", system-ui, sans-serif;

  --ruimte-1:4px; --ruimte-2:8px; --ruimte-3:12px; --ruimte-4:16px;
  --ruimte-5:24px; --ruimte-6:32px; --ruimte-7:48px;

  --straal-klein:6px;   /* velden, compacte knoppen */
  --straal-kaart:10px;  /* kaarten */
  --straal-pil:999px;   /* statuspillen en de ene primaire knop */

  --schaduw:0 1px 3px rgba(27,57,66,.10);
  --focus:2px solid #1b3942;
}
*{box-sizing:border-box}
body{margin:0;background:#ededed;color:var(--petrol);font:400 14px/1.6 var(--font-ui);-webkit-font-smoothing:antialiased}
a{color:var(--petrol-vlak)} a:hover{color:var(--petrol)}
:focus-visible{outline:var(--focus);outline-offset:2px;border-radius:2px}
.skiplink{position:fixed;z-index:100;left:16px;top:10px;transform:translateY(-160%);padding:8px 12px;
  border-radius:var(--straal-klein);background:var(--petrol);color:#fff;text-decoration:none}
.skiplink:focus{transform:translateY(0);color:#fff}
h1,h2,h3{font-family:var(--font-kop);font-weight:400;letter-spacing:-0.02em;margin:0}

/* bovenbalk: ongebruikt sinds het ontwerp een zijbalk kreeg */
.bar{display:flex;align-items:center;gap:26px;padding:12px 28px;background:var(--vlak);border-bottom:1px solid var(--rand)}
.merk{display:flex;align-items:center;gap:10px;white-space:nowrap}
.merk .blok{display:grid;place-items:center;width:28px;height:28px;background:var(--petrol);border-radius:6px;color:#fff;font:600 12px var(--font-ui)}
.merk b{font-size:14px;font-weight:600}.merk span{font-weight:400;color:var(--gedempt)}
.tabs{display:flex;gap:22px;font-size:13.5px;margin-left:6px}
.tabs a{text-decoration:none;padding:8px 0;color:var(--gedempt)}
.tabs a[aria-current]{color:var(--petrol);border-bottom:2px solid var(--oranje-rand);font-weight:600}
.tabs .teller{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--petrol-vlak);color:#fff;font:600 11px var(--font-ui);vertical-align:1px;margin-left:6px}
.gebruiker{margin-left:auto;font-size:13px;color:var(--gedempt);white-space:nowrap}

/* kaarten en lijsten */
.kaart{background:var(--vlak);border:1px solid var(--rand);border-radius:var(--straal-kaart);overflow:hidden}
.kaart>.kop{margin:0;padding:12px 18px;font-size:13px;font-weight:600;border-bottom:1px solid var(--rand-licht)}
.taken{border-color:#c3cfd3;border-left:3px solid var(--petrol-vlak)}
.taken>.kop{color:var(--petrol-vlak)}
.taak{display:flex;align-items:center;gap:14px;padding:12px 18px}
.taak+.taak{border-top:1px solid var(--rand-licht)}
.taak p{margin:0;font-size:14px}.taak .tijd{margin-top:2px;font-size:12.5px;color:var(--gedempt)}
.r4{display:grid;grid-template-columns:1fr 200px 210px 120px;gap:16px;align-items:center}
.rijkop{padding:11px 18px 9px;font:600 11.5px var(--font-ui);letter-spacing:.07em;text-transform:uppercase;color:var(--gedempt);border-bottom:1px solid var(--rand-licht)}
a.rij{padding:11px 18px;color:var(--petrol);text-decoration:none;min-height:44px}
a.rij:hover{background:#f2f6f6}
a.rij+a.rij{border-top:1px solid var(--rand-licht)}
.rij .naam{font-size:14px;font-weight:600}.rij .sub{font-size:12.5px;color:var(--gedempt)}
.rij .tijd{text-align:right;font-size:12.5px;color:var(--gedempt)}

/* ==============================================================
   HET WERKSCHERM (sessie 18)
   Het overzicht was een taakblok met daaronder een tabel waarin diezelfde dossiers nog een
   keer stonden, en die tabel zei per rij alleen een statuspil. Nu is het een lijst,
   gegroepeerd naar wie er aan zet is; de groepskop draagt de status, zodat de rij ruimte
   heeft voor wat er wel toe doet: waarop het wacht en sinds wanneer.
   ============================================================== */
.r5{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1.5fr) 190px 84px 116px;gap:18px;align-items:center}
.groep+.groep{margin-top:28px}
.groepkop{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:0 0 9px 2px}
.groepkop h2{font-size:16.5px;letter-spacing:-.01em}
.groepkop .telling{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 6px;
  border-radius:999px;background:var(--rand-licht);color:var(--gedempt);font:600 11.5px var(--font-ui)}
.groepkop p{flex-basis:100%;margin:1px 0 0;font-size:12.5px;color:var(--gedempt)}

/* De groep die om een handeling vraagt, krijgt als enige kleur. Dat is de hele hierarchie
   van dit scherm: wat oranje is, is van jou. */
.groep-jou .groepkop .telling{background:var(--petrol-vlak);color:#fff}
.groep-jou>.kaart{border-color:#c3cfd3;border-left:3px solid var(--oranje-rand)}
.groep-wacht>.kaart{border-left:3px solid var(--st-wacht-bol)}

.rij .klant{display:grid;gap:1px;min-width:0}
/* Geen ellips: een afgekapte klantnaam of stapnaam is erger dan een regel die
   doorloopt. De rij wordt dan hoger, en dat is de juiste prijs. */
.rij .klant .naam,.rij .klant .sub{overflow-wrap:anywhere}
.rij .waarop{display:grid;gap:1px;min-width:0;font-size:13.5px}
.rij .waarop>*{overflow-wrap:anywhere}
.rij .waarop b{font-weight:600}
.rij .wacht{font-size:12.5px;color:var(--gedempt);white-space:nowrap}
.rij .doen{display:flex;justify-content:flex-end}
.taakrij .waarop b{color:var(--petrol)}
/* De knop in de rij is geen echte knop maar de rij zelf: de hele rij is de link, dus een
   misklik naast de knop komt op dezelfde plek uit. Daarom een span en geen a. */
.rij .doen .knop-p,.rij .doen .knop-mini{pointer-events:none;white-space:nowrap}

@media (max-width:1100px){
  .r5{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 96px;gap:12px}
  .r5>.voortgang,.r5 .rijkop:nth-child(3){display:none}
  .rij .doen{grid-column:3}
}

.voortgang{display:flex;align-items:center;gap:10px}
.balkje{flex:1;height:5px;border-radius:3px;background:var(--rand-licht);overflow:hidden}
.balkje i{display:block;height:100%;background:var(--petrol-vlak)}
.voortgang em{font-style:normal;font-size:12.5px;color:var(--gedempt);white-space:nowrap}

/* statuspillen: kleur is nooit de enige drager, het label staat er altijd bij */
.pil{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:var(--straal-pil);font:600 12px/1.7 var(--font-ui);white-space:nowrap}
.pil i{width:7px;height:7px;border-radius:50%;flex:none}
.pil-jou{background:var(--st-jou-vlak);color:var(--st-jou-tekst)}.pil-jou i{background:#fff}
.pil-ff{background:var(--st-ff-vlak);border:1px solid var(--st-ff-rand);color:var(--st-ff-tekst)}.pil-ff i{background:var(--st-ff-bol)}
.pil-klant{background:var(--st-klant-vlak);border:1px solid var(--st-klant-rand);color:var(--st-klant-tekst)}.pil-klant i{background:var(--st-klant-bol)}
.pil-klaar{background:var(--st-klaar-vlak);border:1px solid var(--st-klaar-rand);color:var(--st-klaar-tekst)}.pil-klaar i{background:var(--st-klaar-bol)}
.pil-fout{background:var(--st-fout-vlak);border:1px solid var(--st-fout-rand);color:var(--st-fout-tekst)}.pil-fout i{background:var(--st-fout-bol)}
.pil-wacht{background:var(--st-wacht-vlak);border:1px solid var(--st-wacht-rand);color:var(--st-wacht-tekst)}.pil-wacht i{background:var(--st-wacht-bol)}
.pil-skip{background:transparent;border:1px dashed #a9b6ba;color:#5b6c71}.pil-skip i{background:#8a9296}
.pil-leeg{background:transparent;border:1px solid var(--rand);color:var(--gedempt)}.pil-leeg i{background:transparent;border:1.5px solid #a9b6ba}

/* knoppen: één pilvormige primaire knop per scherm, de rest compact */
.knop-p{display:inline-block;background:var(--oranje);color:var(--inkt-op-oranje);border:0;font:600 14px var(--font-ui);padding:11px 26px;border-radius:var(--straal-pil);cursor:pointer;text-decoration:none;white-space:nowrap}
.knop-p:hover{background:var(--oranje-rand)}
.knop-p[disabled]{opacity:.45;cursor:not-allowed}
.knop-s{display:inline-block;background:transparent;color:var(--petrol-vlak);border:1px solid var(--petrol-vlak);font:600 13px var(--font-ui);padding:8px 16px;border-radius:var(--straal-klein);cursor:pointer;text-decoration:none;white-space:nowrap}
.knop-s:hover{background:#eef3f4}
.knop-t{background:transparent;border:0;color:var(--gedempt);font:400 13.5px var(--font-ui);padding:8px 10px;cursor:pointer;text-decoration:underline}
.knop-t:hover{color:var(--petrol)}
.knop-mini{display:inline-block;background:var(--petrol-vlak);color:#fff;border:0;font:600 13px var(--font-ui);padding:8px 16px;border-radius:var(--straal-klein);cursor:pointer;text-decoration:none;white-space:nowrap}
.knop-mini:hover{background:var(--petrol)}

/* detailscherm */
.terug{margin:0 0 14px;font-size:13px}
.dossierkop{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.dossierkop h3{font-size:22px}
.dossierkop .meta{font-size:13px;color:var(--gedempt)}
.dossierstand{display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px 14px;
  border:1px solid var(--rand);border-radius:var(--straal-kaart);background:var(--vlak)}
.dossierstand-icoon{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  flex:none;font-size:14px;font-weight:600}
.dossierstand>div{display:grid;gap:1px;min-width:0}
.dossierstand b{font-size:13.5px;font-weight:600}
.dossierstand>div span{font-size:12.5px;color:var(--gedempt);overflow-wrap:anywhere}
.dossierstand .knop-s{margin-left:auto}
.dossierstand-klaar{background:var(--st-klaar-vlak);border-color:var(--st-klaar-rand)}
.dossierstand-klaar .dossierstand-icoon{background:var(--st-klaar-bol);color:#fff}
.dossierstand-klaar b{color:var(--st-klaar-tekst)}
.dossierstand-klaar .knop-s{border-color:var(--st-klaar-bol);color:var(--st-klaar-tekst)}
.dossierstand-bezig{background:#f2f6f6;border-color:#c3cfd3}
.dossierstand-bezig .dossierstand-icoon{border:3px solid #c3cfd3;border-top-color:var(--petrol-vlak)}
.dossiergrid{display:grid;grid-template-columns:340px minmax(0,1fr);gap:16px;
  align-items:start;margin-top:16px}
.dossierzij{display:grid;gap:16px}
.duo{display:grid;grid-template-columns:1fr 380px;gap:20px;margin-top:20px;align-items:start}
.stap{display:grid;grid-template-columns:26px 1fr auto;gap:12px;align-items:start;padding:9px 18px}
.stap+.stap{border-top:1px solid var(--rand-licht)}
.stap .nr{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font:600 11px var(--font-ui);margin-top:2px;background:var(--vlak-2);color:var(--gedempt);border:1px solid var(--rand-licht)}
.stap .nr.klaar{background:var(--petrol-vlak);color:#fff;border-color:var(--petrol-vlak)}
.stap .nr.let{background:var(--st-klant-vlak);color:var(--st-klant-tekst);border-color:var(--st-klant-rand)}
.stap .nr.fout{background:var(--st-fout-vlak);color:var(--st-fout-tekst);border-color:var(--st-fout-rand)}
.stap b{font-size:14px;font-weight:600}
.stap .sub{font-size:12.5px;color:var(--gedempt)}
.stap .pil{margin-top:2px}
/* De klantgegevens: label en waarde dicht bij elkaar, met een lijn per rij zodat het oog
   de regel kan volgen. Stond op 130px met een gat van 12px ertussen, waardoor de waarde
   losraakte van zijn label zodra de kaart breder werd. */
dl.gegevens{margin:0;padding:4px 18px 12px;display:grid;
  grid-template-columns:minmax(112px,max-content) minmax(0,1fr);gap:0 20px;font-size:13.5px}
dl.gegevens>dt,dl.gegevens>dd{padding:7px 0;border-top:1px solid var(--rand-licht);min-width:0}
dl.gegevens>dt:first-of-type,dl.gegevens>dt:first-of-type+dd{border-top:0}
dl.gegevens>dd{overflow-wrap:anywhere}
dl.gegevens dt{color:var(--gedempt)} dl.gegevens dd{margin:0}
details{border-top:1px solid var(--rand-licht)}
summary{display:flex;align-items:center;gap:8px;padding:10px 18px;font-size:13.5px;font-weight:600;cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
summary .aantal{font-weight:400;color:var(--gedempt);font-size:12.5px;white-space:nowrap;margin-left:auto}
.antwoorden{margin:0;padding:2px 18px 12px 36px;display:grid;gap:8px;font-size:13px}
.antwoorden dt{color:var(--gedempt);margin:0}.antwoorden dd{margin:1px 0 0}
.antwoorden .rest{margin:2px 0 0;font-size:12.5px;color:var(--gedempt)}
.documentmap{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:2px 18px 12px 36px;
  padding:11px 12px;background:var(--st-klaar-vlak);border:1px solid var(--st-klaar-rand);border-radius:var(--straal-klein)}
.documentmap>div{display:grid;gap:1px}.documentmap b{font-size:13px;color:var(--st-klaar-tekst)}
.documentmap>div span{font-size:12px;color:var(--gedempt)}
.documentmap .knop-s{flex:none;padding:6px 11px;border-color:var(--st-klaar-bol);color:var(--st-klaar-tekst);background:#fff}
.documentrij{padding:8px 0}.documentrij+.documentrij{border-top:1px solid var(--rand-licht)}
.documentwaarde{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.documentwaarde>span:first-child{overflow-wrap:anywhere}
.documentwaarde .pil{font-size:11.5px;padding:1px 8px}
.documentlink{font-weight:600;text-underline-offset:2px;margin-left:auto;white-space:nowrap}
.documenthint{flex-basis:100%;font-size:12px;color:var(--gedempt)}
.log{list-style:none;margin:0;padding:6px 18px 14px;display:grid;gap:9px;font-size:13px}
.log li{display:grid;grid-template-columns:104px 1fr;gap:10px}
.log .t{color:var(--gedempt);font-size:12.5px}

/* taakblok in het dossier */
/* De taakkaart gebruikt de volle kolom (sessie 18). Zij stond op 720px in een kolom van
   1200, met de tekst nog eens op 70ch daarbinnen: twee versmallingen over elkaar, waardoor
   de zinnen op rare plekken afbraken en de halve pagina leeg bleef. De kaart is nu zo breed
   als alles eronder; binnen de kaart houdt de tekst een rustige regellengte, maar dat leest
   nu als vorm van het blok en niet als een toevallig afgebroken alinea. */
.taakkaart{margin-top:18px}
.taakkaart .body{padding:16px 20px 18px}
.taakkaart p{margin:0 0 12px;font-size:14px;line-height:1.6;max-width:88ch}
.actiekaart{border-left-color:var(--oranje-rand);box-shadow:0 2px 8px rgba(27,57,66,.08)}
.taakkop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px!important}
.taakkop>span{display:inline-flex;align-items:center;padding:2px 9px;border-radius:var(--straal-pil);
  background:var(--oranje);color:var(--inkt-op-oranje);font-size:11.5px;letter-spacing:.03em;
  text-transform:uppercase}
.foutkaart .taakkop>span{background:var(--st-fout-vlak);color:var(--st-fout-tekst);
  border:1px solid var(--st-fout-rand)}
.foutbericht{display:grid;gap:2px;margin:0 0 16px;padding:11px 13px;border-radius:var(--straal-klein);
  background:var(--st-fout-vlak);border:1px solid var(--st-fout-rand);color:var(--st-fout-tekst)}
.foutbericht b{font-size:12.5px;font-weight:600}.foutbericht span{font-size:13.5px;line-height:1.5}
/* Waar de kaart naast de instructie ook gegevens toont om op te beslissen, staan die
   ernaast in plaats van eronder: dat is waar de breedte voor is. */
.taakkaart .body.naast{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:26px;align-items:start}
.taakkaart .body.naast p{max-width:none}
@media (max-width:1000px){.taakkaart .body.naast{grid-template-columns:1fr;gap:18px}}
.acties{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.acties .uitleg{font-size:12.5px;color:var(--gedempt)}
.verschil{display:block;max-width:max-content;white-space:nowrap;margin-top:4px;padding:1px 8px;border-radius:var(--straal-pil);background:var(--st-klant-vlak);border:1px solid var(--st-klant-rand);color:var(--st-klant-tekst);font-size:11.5px}
.veld label{display:block;font-size:13px;font-weight:600;margin-bottom:5px}
.veld input[type=text]{width:100%;font:400 14px var(--font-ui);padding:9px 12px;border:1px solid var(--rand);border-radius:var(--straal-klein);background:#fff;color:var(--petrol)}
.veld input[aria-invalid=true]{border:1.5px solid var(--st-fout-bol)}
.veld .hint{margin:5px 0 0;font-size:12.5px;color:var(--gedempt)}
.veld .fout{display:flex;gap:6px;align-items:flex-start;margin:7px 0 0;font-size:13px;color:var(--st-fout-tekst)}
.keuze{display:flex;gap:10px;align-items:center;font-size:13.5px;border:1px solid var(--rand);border-radius:var(--straal-klein);padding:10px 12px;cursor:pointer}
.keuze:hover{background:#f2f6f6}
.keuze input{accent-color:var(--petrol-vlak);margin:0;width:15px;height:15px}

/* storingsbalk */
/* ==============================================================
   HET OMGEVINGSLINT EN DE MELDINGEN (sessie 18)
   Tot deze sessie stapelden tot vier identieke okergele stroken zich boven de inhoud:
   omgeving, uitvoermodus, storing en backup. Vier alarmen naast elkaar is geen alarm meer.
   Ze zijn gescheiden naar wat ze vragen. Het LINT zegt waar je bent, loopt over de volle
   breedte en vraagt niets. De MELDINGEN vragen een handeling en staan als kaart in de
   inhoudskolom, uitgelijnd met alles eronder.
   ============================================================== */
.lint{display:flex;align-items:center;gap:10px;padding:7px 24px;font-size:12.5px;line-height:1.45;
  border-bottom:1px solid var(--st-klant-rand);background:var(--st-klant-vlak);color:#5c430f}
.lint b{font-weight:600;color:#4d3809}
.lint{flex-wrap:wrap}
.lint>span:not(.lint-punt):not(.lint-scheiding),.lint>b{min-width:0}
.lint-punt{flex:none;width:7px;height:7px;border-radius:50%;background:var(--st-klant-bol)}
.lint-scheiding{flex:none;width:1px;height:13px;background:var(--st-klant-rand)}
.lint-acceptatie{background:#fdeee6;border-bottom-color:#f0c6b1;color:#7a3410}
.lint-acceptatie b{color:#6b2d0d}
.lint-acceptatie .lint-punt{background:var(--oranje-rand)}
.lint-acceptatie .lint-scheiding{background:#f0c6b1}

/* De kop van een pagina. Geen versiering: hij zegt waar je bent. */
.paginakop{margin:0 0 20px}
.paginakop h1{font-size:23px;line-height:1.25}
.paginakop p{margin:3px 0 0;font-size:13.5px;color:var(--gedempt)}

/* Meldingen die een handeling vragen, binnen de inhoudskolom. */
.meldingen{display:grid;gap:10px;margin:0 0 18px}
.melding{display:flex;align-items:flex-start;gap:12px;padding:13px 16px;font-size:13.5px;line-height:1.55;
  background:var(--st-klant-vlak);border:1px solid var(--st-klant-rand);border-left:3px solid var(--st-klant-bol);
  border-radius:var(--straal-kaart);color:#5c430f}
.melding b{font-weight:600;color:#4d3809}
.melding .sub{color:#6f5a2a}
.melding button,.melding .knop-s{flex:none;background:transparent;border:1px solid #cfae55;color:#5c430f;
  font:600 13px var(--font-ui);padding:7px 14px;border-radius:var(--straal-klein);cursor:pointer;text-decoration:none}
.melding button:hover,.melding .knop-s:hover{background:#f5e7c4}

.koppeling-goed{display:flex;align-items:center;gap:12px;padding:11px 14px;
  background:var(--st-klaar-vlak);border:1px solid var(--st-klaar-rand);
  border-radius:var(--straal-kaart);color:var(--st-klaar-tekst)}
.koppeling-goed .koppeling-balk{width:42px;height:6px;border-radius:4px;background:var(--st-klaar-bol);flex:none}
.koppeling-goed b{display:block;font-size:13px;font-weight:600;line-height:1.3}
.koppeling-goed small{display:block;font-size:12px;line-height:1.35;color:#397154}

.storing{display:flex;align-items:flex-start;gap:12px;padding:13px 28px;background:var(--st-klant-vlak);border-bottom:1px solid var(--st-klant-rand);font-size:13.5px;line-height:1.55;color:#5c430f}
.storing b{font-weight:600;color:#4d3809}
.storing button{flex:none;background:transparent;border:1px solid #cfae55;color:#5c430f;font:600 13px var(--font-ui);padding:7px 14px;border-radius:var(--straal-klein);cursor:pointer}
.storing button:hover{background:#f5e7c4}

/* configuratie */
.cfg{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr) 260px;gap:16px;
  align-items:center;padding:11px 18px 11px 22px;min-height:58px;transition:background-color .2s ease}
.cfg+.cfg{border-top:1px solid var(--rand-licht)}
.cfg:not(.rijkop):hover{background:#fafcfc}
.cfg-live::before,.cfg-uit::before{content:"";position:absolute;left:0;top:11px;bottom:11px;width:4px;border-radius:0 4px 4px 0}
.cfg-live::before{background:var(--st-klaar-bol)}
.cfg-uit::before{background:var(--st-wacht-bol)}
.cfg.rijkop{min-height:0;padding-top:10px;padding-bottom:9px;border-bottom:1px solid var(--rand-licht)}
.cfg .nr{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--vlak-2);color:var(--gedempt);font:600 11px var(--font-ui);border:1px solid var(--rand-licht)}
.cfg-live .nr{background:var(--st-klaar-vlak);border-color:var(--st-klaar-rand);color:var(--st-klaar-tekst)}
.cfg b{font-size:13.5px;font-weight:600}.cfg .sub{font-size:12.5px;color:var(--gedempt)}
.slot{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:#4c5952}
.cfg-kop{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 22px 17px}
.cfg-kop .kop{margin:0 0 5px;padding:0;border:0;font-size:13px;font-weight:600}
.cfg-meter{display:grid;gap:8px;min-width:235px}
.cfg-meter b{display:flex;align-items:center;gap:8px;font:600 13px var(--font-ui);color:var(--st-klaar-tekst)}
.cfg-meter b>i{width:8px;height:8px;border-radius:50%;background:var(--st-klaar-bol)}
.cfg-segmenten{display:grid;grid-template-columns:repeat(17,minmax(4px,1fr));gap:3px}
.cfg-segmenten i{display:block;height:6px;border-radius:3px;background:var(--rand-licht)}
.cfg-segmenten i.live{background:var(--st-klaar-bol)}
.cfg-segmenten i.uit{background:var(--st-wacht-bol)}
.cfg-vast{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cfg-live-label{display:inline-flex;align-items:center;gap:7px;color:var(--st-klaar-tekst);font-size:12.5px;font-weight:600}
.cfg-live-label i{width:30px;height:6px;border-radius:4px;background:var(--st-klaar-bol)}
.cfg-schakelaar{margin:0}
.wissel{display:inline-flex;align-items:center;gap:9px}
.wissel button{width:38px;height:22px;border-radius:999px;border:1px solid var(--rand);background:var(--rand);position:relative;cursor:pointer;padding:0;transition:background-color .2s ease,border-color .2s ease,transform .15s ease}
.wissel button:hover{transform:translateY(-1px)}
.wissel button:active{transform:translateY(0)}
.wissel button[aria-checked=true]{background:var(--st-klaar-bol);border-color:var(--st-klaar-bol)}
.wissel button i{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(27,57,66,.25);transition:transform .2s ease}
.wissel button[aria-checked=true] i{transform:translateX(16px)}
.wissel em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--gedempt)}
.wissel button[aria-checked=true]+em{color:var(--st-klaar-tekst)}

@media (max-width:820px){
  .cfg-kop{align-items:flex-start;flex-direction:column;gap:14px}
  .cfg-meter{width:100%;min-width:0}
  .cfg{grid-template-columns:32px minmax(0,1fr);gap:8px 12px;padding-left:20px}
  .cfg.rijkop{display:none}
  .cfg>form,.cfg>.cfg-vast{grid-column:2}
}

/* lege staat */
.leeg{padding:64px 28px 80px;text-align:center}
.leeg h3{font-size:18px;margin:14px 0 6px}
.leeg p{margin:0 auto;font-size:14px;color:var(--gedempt);max-width:52ch}

/* app-schil */
body{background:var(--vlak-2)}
.app-main{max-width:1200px;margin:0 auto;padding:24px 28px 64px}
.app-bar{position:sticky;top:0;z-index:5}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--petrol);color:#fff;font:400 13.5px var(--font-ui);padding:10px 18px;border-radius:8px;box-shadow:0 4px 16px rgba(27,57,66,.3);opacity:0;transition:opacity .2s;pointer-events:none;max-width:80ch}
.toast.zichtbaar{opacity:1}
.reden-form{display:flex;gap:8px;align-items:center;margin-top:6px;flex-wrap:wrap}
.reden-form input{font:400 13px var(--font-ui);padding:7px 10px;border:1px solid var(--rand);border-radius:6px;width:260px}
.filters{display:flex;gap:14px;align-items:flex-end;margin-top:16px;flex-wrap:wrap}
.filters .veldje{display:grid;gap:4px}
.filters label{font-size:12px;font-weight:600;color:var(--gedempt)}
.filters input,.filters select{font:400 13.5px var(--font-ui);padding:8px 12px;border:1px solid var(--rand);border-radius:6px;background:#fff;color:var(--petrol)}
.filters input{width:260px}
.filters .stand{font-size:12.5px;color:var(--gedempt);margin-left:auto;padding-bottom:9px}
.login{min-height:92vh;display:grid;place-items:center;padding:24px}
.login-kaart{background:#fff;border:1px solid var(--rand);border-radius:12px;box-shadow:var(--schaduw);padding:32px;width:380px}
.login-kaart h1{font-size:24px;margin:14px 0 4px}
.login-kaart .veld{margin-top:14px}
.login-kaart .veld input{width:100%;font:400 14px var(--font-ui);padding:9px 12px;border:1px solid var(--rand);border-radius:6px}
.subtabs{display:flex;gap:22px;border-bottom:1px solid var(--rand);margin-top:20px;font-size:13.5px}
.subtabs a{text-decoration:none;padding:8px 0;color:var(--gedempt)}
.subtabs a[aria-current]{color:var(--petrol);border-bottom:2px solid var(--oranje-rand);font-weight:600;margin-bottom:-1px}
/* .enkel is vervallen in sessie 18: het was een derde breedte (820px) naast de
   kolom (1200) en losse kaarten (880), op dezelfde pagina. */
.schil{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
.zijbalk{background:#fff;border-right:1px solid var(--rand);padding:20px 14px;display:flex;flex-direction:column;gap:26px;position:sticky;top:0;height:100vh;box-sizing:border-box}
.zijbalk .merk{padding:0 10px}
.zijbalk nav{display:grid;gap:4px}
.zijbalk nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:6px;text-decoration:none;color:var(--gedempt);font-size:13.5px}
.zijbalk nav a:hover{background:#f2f6f6;color:var(--petrol)}
.zijbalk nav a[aria-current]{background:#eef3f4;color:var(--petrol);font-weight:600;box-shadow:inset 3px 0 0 var(--oranje-rand)}
.zijbalk nav a .teller{margin-left:auto}
.zijbalk .onder{margin-top:auto;display:grid;gap:6px;padding:0 10px;font-size:13px;color:var(--gedempt)}
.zijbalk .onder .knop-t{padding:4px 0;text-align:left}
.zijbalk .onder .ingelogd-als{color:var(--petrol);font-weight:600;overflow-wrap:anywhere}
.zijbalk .onder .rolnaam{font-size:12px;margin-top:-7px}
.inhoudvlak{min-width:0}

/* De werkwijze is een productpagina, geen los handboek: dezelfde kaarten, typografie en
   informatiedichtheid als de rest van het dashboard. */
.werkwijze-lijst{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:22px}
.werkwijze-stap{display:grid;align-content:start;gap:12px;padding:17px 16px;background:#fff;
  border:1px solid var(--rand);border-radius:var(--straal-kaart)}
.werkwijze-nr{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--petrol-vlak);color:#fff;font:600 12px var(--font-ui)}
.werkwijze-stap h2{font:600 14px/1.35 var(--font-ui);letter-spacing:0}
.werkwijze-stap p{margin:5px 0 0;color:var(--gedempt);font-size:13px;line-height:1.55}
.handleiding-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.uitlegkaart .kaartkop h2{font:600 14px var(--font-ui);letter-spacing:0}
.uitlegbody{padding:15px 18px 17px;font-size:13.5px}
.uitlegbody p{margin:0}.uitlegbody p+p{margin-top:11px}
.uitlegbody dl{display:grid;grid-template-columns:142px minmax(0,1fr);margin:0;gap:0 16px}
.uitlegbody dt,.uitlegbody dd{padding:7px 0;border-top:1px solid var(--rand-licht)}
.uitlegbody dt:first-of-type,.uitlegbody dt:first-of-type+dd{border-top:0}
.uitlegbody dt{font-weight:600}.uitlegbody dd{margin:0;color:var(--gedempt)}

/* ==============================================================
   DE PIPELINE, HET LOGBOEK EN DE KAARTKOP (sessie 18)
   ============================================================== */

/* De kop van een kaart met een toelichting eronder. De toelichting krijgt een rustige
   regellengte; omdat hij in de kaart staat leest dat als vorm en niet als een alinea die
   toevallig smal is afgebroken. */
.kaartkop{padding:14px 18px 13px;border-bottom:1px solid var(--rand-licht)}
.kaartkop>.kop{padding:0;border:0;margin:0 0 5px}
.uitleg{margin:0;max-width:78ch;font-size:13.5px;line-height:1.6;color:var(--gedempt)}

/* De fasebalk. De breedte van een fase volgt het aantal stappen erin (flex:n), dus
   boekhouding is breed en het einde smal. Dat is eerlijk: zo verhoudt het werk zich ook. */
.pipeline{padding:0}
.pipelinekop{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:14px 18px 12px;border-bottom:1px solid var(--rand-licht)}
.pipelinekop b{font-size:14px;font-weight:600}
.pipelinekop .nustap{font-size:13px;color:var(--gedempt)}
.fasen{display:flex;gap:10px;padding:18px}
.fase{min-width:0}
.fase .punten{display:flex;align-items:center;gap:6px;margin-bottom:9px}
.fase .fasenaam{font-size:12.5px;font-weight:600;overflow-wrap:anywhere}
.fase .fasetelling{font-size:12px;color:var(--gedempt);margin-top:1px}
/* Een punt is een streep, geen bol: zeventien bollen naast elkaar lezen als kralen, en een
   streep laat zien dat het een traject is. De streep vult de beschikbare ruimte, dus een
   fase met twee stappen krijgt twee brede strepen en boekhouding zes smalle. */
.fase .punt{flex:1;min-width:0;display:block;height:8px;border-radius:4px;background:var(--rand-licht)}
.fase .punt i{display:block;height:100%;border-radius:4px}
.fase .p-af{background:var(--st-klaar-bol)}
.fase .p-over{background:var(--st-wacht-bol)}
.fase .p-fout{background:var(--st-fout-bol)}
.fase .p-nog{background:var(--rand-licht)}
/* De stap waar het dossier NU staat draagt een ring, zodat het oog daar landt. */
.fase .p-nu{background:var(--petrol-vlak);box-shadow:0 0 0 3px rgba(41,84,98,.20)}

/* De tijdlijn: dezelfde stappen als de balk, met de details die een balk niet kan dragen. */
.fasegroep+.fasegroep{border-top:1px solid var(--rand-licht)}
.fasegroep>.kop{padding:12px 18px 8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gedempt);border:0}
.tijdlijn{list-style:none;margin:0;padding:0 0 8px;position:relative}
/* De doorlopende lijn door de nummers. Hij loopt van het eerste tot het laatste nummer van
   de groep en maakt van losse regels een traject. */
.tijdlijn::before{content:"";position:absolute;left:31px;top:16px;bottom:22px;width:2px;
  background:var(--rand-licht)}
.tijdlijn .stap{position:relative;background:transparent}
.tijdlijn .stap .nr{position:relative;z-index:1;box-shadow:0 0 0 4px var(--vlak)}
.tijdlijn .wat{display:grid;gap:2px;min-width:0}
.tijdlijn .wat .sub{overflow-wrap:anywhere}

/* Het logboek, gegroepeerd per dag. */
.logdag+.logdag{border-top:1px solid var(--rand-licht)}
.dagkop{margin:0;padding:12px 18px 6px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gedempt)}
.log{list-style:none;margin:0;padding:0 18px 10px}
.log li{display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:14px;align-items:baseline;
  padding:6px 0;font-size:13.5px}
.log li+li{border-top:1px solid var(--rand-licht)}
.log .t{font-size:12.5px;color:var(--gedempt);font-variant-numeric:tabular-nums}
.log .wat{overflow-wrap:anywhere}
.log .wat small{display:block;margin-top:2px;color:var(--gedempt);font-size:12.5px;
  font-weight:400;line-height:1.45}
.log .n-waarschuwing .wat{color:#7a5410}
.log .n-fout .wat{color:var(--st-fout-tekst);font-weight:600}
.log .n-fout .wat small{color:#7d4949}
.log .afloop{font-size:12px;white-space:nowrap;padding:1px 9px;border-radius:var(--straal-pil);
  border:1px solid var(--rand-licht);color:var(--gedempt)}
.log .a-klaar{background:var(--st-klaar-vlak);border-color:var(--st-klaar-rand);color:var(--st-klaar-tekst)}
.log .a-fout{background:var(--st-fout-vlak);border-color:var(--st-fout-rand);color:var(--st-fout-tekst)}
.log .a-jou{background:var(--st-jou-vlak);border-color:var(--st-jou-vlak);color:var(--st-jou-tekst)}
.log .a-klant{background:var(--st-klant-vlak);border-color:var(--st-klant-rand);color:var(--st-klant-tekst)}
.log .simpil{margin-left:8px;font-size:11.5px;padding:1px 7px;border-radius:var(--straal-pil);
  background:var(--vlak-2);border:1px dashed var(--rand);color:var(--gedempt)}
.technisch-log{border-top:1px solid var(--rand-licht);background:var(--vlak-2)}
.technisch-log summary{color:var(--gedempt);padding-top:12px;padding-bottom:12px}
.technisch-log[open] summary{border-bottom:1px solid var(--rand-licht)}
.technisch-uitleg{margin:0;padding:12px 18px 4px;font-size:12.5px;color:var(--gedempt)}
.technisch-log .log{padding-top:4px}
.technisch-log .log .wat{color:var(--gedempt);font-weight:400}

@media (max-width:900px){
  .fasen{flex-wrap:wrap}
  .fase{flex:1 1 45% !important}
  .log li{grid-template-columns:52px minmax(0,1fr);gap:10px}
  .log .afloop{grid-column:2}
  .werkwijze-lijst{grid-template-columns:repeat(2,minmax(0,1fr))}
  .handleiding-grid{grid-template-columns:1fr}
  .dossiergrid{grid-template-columns:1fr}
}

@media (max-width:700px){
  .schil{display:block}
  .zijbalk{position:static;height:auto;padding:12px 14px;gap:12px;border-right:0;border-bottom:1px solid var(--rand)}
  .zijbalk .merk{padding:0 6px}
  .zijbalk nav{display:flex;gap:4px;overflow-x:auto;padding-bottom:2px}
  .zijbalk nav a{flex:none;padding:8px 10px}
  .zijbalk nav a[aria-current]{box-shadow:inset 0 -3px 0 var(--oranje-rand)}
  .zijbalk .onder{display:flex;align-items:center;gap:10px;padding:0 6px;margin-top:0}
  .zijbalk .onder form{margin-left:auto}
  .zijbalk .onder .rolnaam{margin:0}
  .app-main{padding:20px 16px 48px}
  .dossierstand{align-items:flex-start;flex-wrap:wrap}
  .dossierstand .knop-s{margin-left:40px}
  .werkwijze-lijst{grid-template-columns:1fr}
  .uitlegbody dl{grid-template-columns:1fr}
  .uitlegbody dt{border-top:1px solid var(--rand-licht);padding-bottom:1px}
  .uitlegbody dd{border-top:0;padding-top:0}
  .documentmap{align-items:flex-start;flex-direction:column;margin-left:18px}
  .documentlink{margin-left:0}
}

/* De rechterkolom van een goedkeurkaart: de gegevens waar het besluit op rust. */
.beslisop{background:var(--vlak-2);border:1px solid var(--rand-licht);border-radius:var(--straal-kaart);
  padding:4px 4px 10px}
.beslisop .kolomkop{margin:0;padding:11px 14px 5px;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gedempt)}
.beslisop dl.gegevens{padding:0 14px 4px;background:transparent;border:0;margin:0}