/* ==========================================================================
   UITVAART-PLATFORM 3.0 · BACKEND · DE TIEN BOUWSTENEN
   BOUWSTENEN-1 · 3 september 2026.

   Jeroen: "gebruiksvriendelijk voor al onze teamleden, en het design alsof
   het grafisch team van Apple onze backend heeft ontwikkeld." Dat begint
   niet bij schermen maar bij een set stenen die maar een keer ontworpen
   hoeven te worden. Alles wat hierna gebouwd wordt, gebruikt deze tien:

     1 de balk        bk2-balk       de bovenbalk met acht schermen
     2 de werkregel   bk2-werk       een ding dat nu moet gebeuren
     3 de tabel       bk2-tabel      rijen die je scant
     4 de kaart       bk2-kaart      een blok met een kop
     5 het formulier  bk2-veld       label, invoer, hulp, fout
     6 de statusstip  bk2-stip       een woord en een kleur
     7 de knop        bk2-knop       een, en die is duidelijk
     8 het zoekveld   bk2-zoek       een veld dat alles vindt
     9 de lege staat  bk2-leeg       leeg is leeg, en dat staat er
    10 de melding     bk2-melding    goed, fout, bezig

   Regels die in de stenen zitten en niet per scherm hoeven te worden
   herhaald: een raster van 8 px; een kleur met betekenis (oranje is
   actie, groen is klaar, rood is fout, pruim is het merk); nooit twee
   knoppen met kleur naast elkaar; tekst 14 px, koppen 15 tot 22 px, geen
   hoofdletters behalve in de kleine etiketten; alles bruikbaar met een
   toetsenbord en op een telefoon van 390 px.

   Het publieke platform draagt dezelfde kleuren (ontwerpsysteem.css); de
   backend is geen ander merk, alleen een andere kamer.
   ========================================================================== */

:root{
  --b-pruim:#4a1942; --b-pruim-d:#33102d; --b-pruim-l:#f7edf4;
  --b-oranje:#e8834a; --b-oranje-d:#cf6a2e; --b-oranje-l:#fdeee2;
  --b-groen:#1e6b38; --b-groen-l:#e3efe7;
  --b-rood:#9c2b1f; --b-rood-l:#f8e3e0;
  --b-geel:#7a5a00; --b-geel-l:#fff3c4;
  --b-papier:#f9f7f2; --b-vlak:#fff; --b-lijn:#e9e4dc; --b-lijn2:#d8d2c8;
  --b-tekst:#231a20; --b-zacht:#6b5a66; --b-stil:#9a8c95;
  --b-rond:12px; --b-rond-l:18px;
  --b-schaduw:0 1px 2px rgba(38,9,31,.04), 0 10px 30px rgba(38,9,31,.06);
  --b-font:-apple-system,BlinkMacSystemFont,"Segoe UI","Poppins",Arial,sans-serif;
}
*{ box-sizing:border-box; }
body.bk2{ margin:0; font:14px/1.55 var(--b-font); color:var(--b-tekst); background:var(--b-papier);
  -webkit-font-smoothing:antialiased; }
.bk2 a{ color:var(--b-pruim); }
.bk2 h1{ font-size:22px; font-weight:600; margin:0; letter-spacing:-.01em; }
.bk2 h2{ font-size:15px; font-weight:600; margin:0; }
.bk2 :focus-visible{ outline:3px solid rgba(232,131,74,.55); outline-offset:2px; border-radius:6px; }

/* 1 · de balk. Acht schermen, altijd zichtbaar, geen uitklappers. Het
   actieve scherm heeft een streep, niet een vlak. Rechts het zoekveld en
   wie er is ingelogd. Op een telefoon scrolt de rij horizontaal. */
.bk2-balk{ position:sticky; top:0; z-index:50; background:var(--b-pruim-d); color:#fff;
  display:flex; align-items:center; gap:18px; padding:0 20px; height:56px; }
.bk2-balk .merk{ display:flex; align-items:center; gap:10px; font-weight:600; color:#fff; text-decoration:none; white-space:nowrap; }
.bk2-balk .merk svg{ width:26px; height:26px; }
.bk2-nav{ display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; flex:1; height:100%; }
.bk2-nav::-webkit-scrollbar{ display:none; }
.bk2-nav a{ display:flex; align-items:center; padding:0 12px; color:rgba(255,255,255,.72); text-decoration:none;
  font-weight:500; white-space:nowrap; border-bottom:2px solid transparent; }
.bk2-nav a:hover{ color:#fff; }
.bk2-nav a[aria-current="page"]{ color:#fff; border-bottom-color:var(--b-oranje); }
.bk2-balk .wie{ color:rgba(255,255,255,.7); font-size:13px; white-space:nowrap; }

/* 8 · het zoekveld. In de balk, opent met /. Vindt bedrijf, persoon,
   artikel en factuur; het antwoord komt onder het veld. */
.bk2-zoek{ position:relative; }
.bk2-zoek input{ width:240px; height:36px; border:0; border-radius:999px; padding:0 34px 0 36px;
  background:rgba(255,255,255,.12); color:#fff; font:inherit; }
.bk2-zoek input::placeholder{ color:rgba(255,255,255,.55); }
.bk2-zoek input:focus{ background:#fff; color:var(--b-tekst); outline:0; }
.bk2-zoek svg{ position:absolute; left:12px; top:10px; width:16px; height:16px; color:rgba(255,255,255,.6); pointer-events:none; }
.bk2-zoek input:focus + svg{ color:var(--b-zacht); }
.bk2-zoek kbd{ position:absolute; right:10px; top:9px; font:11px/1 var(--b-font); color:rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.25); border-radius:5px; padding:3px 5px; }

/* de pagina: een kop met titel en de ene actie, dan de inhoud in een raster */
.bk2-pagina{ max-width:1320px; margin:0 auto; padding:24px 20px 80px; }
.bk2-kop{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:0 0 20px; flex-wrap:wrap; }
.bk2-kop p{ margin:4px 0 0; color:var(--b-zacht); }
.bk2-raster{ display:grid; gap:16px; grid-template-columns:repeat(12, minmax(0,1fr)); }
.bk2-raster > *{ grid-column:span 12; }
@media(min-width:900px){ .bk2-6{ grid-column:span 6; } .bk2-4{ grid-column:span 4; } .bk2-8{ grid-column:span 8; } }

/* 4 · de kaart. Een blok met een kop, een eventuele actie rechts, en
   inhoud. Geen "blob"-kaders: een rechthoek met een zachte hoek. */
.bk2-kaart{ background:var(--b-vlak); border-radius:var(--b-rond-l); box-shadow:var(--b-schaduw); padding:18px 20px; }
.bk2-kaart-kop{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px; }
.bk2-kaart-kop small{ color:var(--b-zacht); font-weight:400; }

/* 2 · de werkregel. Het hart van "Vandaag": wat, voor wie, wanneer, en de
   ene knop die het afhandelt. Links een stip die zegt hoe dringend. */
.bk2-werk{ list-style:none; margin:0; padding:0; }
.bk2-werk li{ display:grid; grid-template-columns:10px 1fr auto; gap:12px; align-items:center;
  padding:12px 4px; border-top:1px solid var(--b-lijn); }
.bk2-werk li:first-child{ border-top:0; }
.bk2-werk .wat{ font-weight:500; }
.bk2-werk .wie{ color:var(--b-zacht); font-size:13px; }
.bk2-werk .dot{ width:10px; height:10px; border-radius:50%; background:var(--b-lijn2); }
.bk2-werk .dot.nu{ background:var(--b-oranje); }
.bk2-werk .dot.klaar{ background:var(--b-groen); }

/* 3 · de tabel. Kolomkoppen klein en stil; rijen met genoeg lucht om te
   scannen; de hele rij is klikbaar. Op een telefoon wordt elke rij een
   kaartje met label en waarde. */
.bk2-tabel{ width:100%; border-collapse:collapse; }
.bk2-tabel th{ text-align:left; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--b-stil); padding:0 10px 10px; border-bottom:1px solid var(--b-lijn); }
.bk2-tabel td{ padding:11px 10px; border-bottom:1px solid var(--b-lijn); vertical-align:middle; }
.bk2-tabel tr[data-href]{ cursor:pointer; }
.bk2-tabel tr[data-href]:hover td{ background:var(--b-papier); }
.bk2-tabel td b{ font-weight:600; color:var(--b-pruim); }
.bk2-tabel td small{ display:block; color:var(--b-zacht); }
@media(max-width:700px){
  .bk2-tabel thead{ display:none; }
  .bk2-tabel tr{ display:block; padding:10px 0; border-bottom:1px solid var(--b-lijn); }
  .bk2-tabel td{ display:flex; justify-content:space-between; gap:12px; border:0; padding:4px 0; }
  .bk2-tabel td::before{ content:attr(data-label); color:var(--b-stil); font-size:12px; }
}

/* 6 · de statusstip. Een woord met een kleur die betekenis heeft. Nooit
   een kleur zonder woord: kleurenblind is geen uitzondering. */
.bk2-stip{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600;
  padding:3px 9px 3px 7px; border-radius:999px; background:var(--b-papier); color:var(--b-zacht); }
.bk2-stip::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.bk2-stip.goed{ background:var(--b-groen-l); color:var(--b-groen); }
.bk2-stip.actie{ background:var(--b-oranje-l); color:#9a4b18; }
.bk2-stip.fout{ background:var(--b-rood-l); color:var(--b-rood); }
.bk2-stip.let{ background:var(--b-geel-l); color:var(--b-geel); }
.bk2-stip.merk{ background:var(--b-pruim-l); color:var(--b-pruim); }

/* 7 · de knop. Drie soorten en niet meer: de ene met kleur (actie), de
   stille (alles wat niet de hoofdactie is) en de gevaarlijke (rood, met
   bevestiging). Nooit twee met kleur naast elkaar. */
.bk2 .bk2-knop, .bk2-knop{ display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 16px; border-radius:999px;
  border:1px solid transparent; font:inherit; font-weight:600; cursor:pointer; text-decoration:none; white-space:nowrap;
  background:var(--b-pruim); color:#fff; transition:transform .12s ease, box-shadow .12s ease; }
.bk2-knop:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(74,25,66,.25); }
.bk2-knop.actie{ background:var(--b-oranje); }
.bk2-knop.actie:hover{ box-shadow:0 6px 16px rgba(232,131,74,.35); }
.bk2 .bk2-knop.stil, .bk2-knop.stil{ background:var(--b-vlak); color:var(--b-pruim); border-color:var(--b-lijn2); }
.bk2-knop.stil:hover{ border-color:var(--b-pruim); box-shadow:none; }
.bk2 .bk2-knop.gevaar, .bk2-knop.gevaar{ background:var(--b-vlak); color:var(--b-rood); border-color:#f0d5d1; }
.bk2-knop.klein{ height:30px; padding:0 12px; font-size:13px; }
.bk2-knop:disabled{ opacity:.5; cursor:default; transform:none; box-shadow:none; }
.bk2-knop svg{ width:16px; height:16px; }

/* 5 · het formulier. Label boven, hulp onder, fout in rood met het woord
   erbij. Velden 40 px hoog, altijd de hele breedte van hun kolom. */
.bk2-veld{ display:flex; flex-direction:column; gap:6px; margin:0 0 14px; }
.bk2-veld label{ font-size:13px; font-weight:600; color:var(--b-tekst); }
.bk2-veld input, .bk2-veld select, .bk2-veld textarea{ height:40px; padding:0 12px; border:1px solid var(--b-lijn2);
  border-radius:var(--b-rond); font:inherit; color:var(--b-tekst); background:var(--b-vlak); width:100%; }
.bk2-veld textarea{ height:auto; min-height:96px; padding:10px 12px; }
.bk2-veld input:focus, .bk2-veld select:focus, .bk2-veld textarea:focus{ border-color:var(--b-pruim); outline:0; box-shadow:0 0 0 3px rgba(74,25,66,.12); }
.bk2-veld .hulp{ font-size:12.5px; color:var(--b-zacht); }
.bk2-veld.fout input{ border-color:var(--b-rood); }
.bk2-veld .foutregel{ font-size:12.5px; color:var(--b-rood); }
.bk2-veld-rij{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); }

/* 9 · de lege staat. Leeg is leeg, en dat staat er, met wat je hier kunt
   verwachten. Geen tegel met een nul. */
.bk2-leeg{ padding:28px 20px; text-align:center; color:var(--b-zacht); border:1px dashed var(--b-lijn2); border-radius:var(--b-rond); }
.bk2-leeg b{ display:block; color:var(--b-tekst); margin-bottom:4px; }

/* 10 · de melding. Onderaan in beeld, verdwijnt vanzelf, drie soorten. */
.bk2-melding{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:90;
  padding:11px 18px; border-radius:999px; background:var(--b-pruim-d); color:#fff; font-weight:500;
  box-shadow:0 10px 30px rgba(38,9,31,.25); }
.bk2-melding.goed{ background:var(--b-groen); }
.bk2-melding.fout{ background:var(--b-rood); }
.bk2-melding.bezig::before{ content:""; display:inline-block; width:12px; height:12px; margin-right:8px; vertical-align:-1px;
  border:2px solid rgba(255,255,255,.5); border-top-color:#fff; border-radius:50%; animation:bk2-draai .8s linear infinite; }
@keyframes bk2-draai{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .bk2-melding.bezig::before{ animation:none; } .bk2-knop:hover{ transform:none; } }

/* de rest van de tellingen: een cijfer met een woord, nooit een cijfer alleen */
.bk2-cijfer{ display:flex; flex-direction:column; gap:2px; }
.bk2-cijfer b{ font-size:28px; font-weight:600; line-height:1.1; color:var(--b-pruim); letter-spacing:-.01em; }
.bk2-cijfer span{ color:var(--b-zacht); font-size:13px; }

/* gemeten op 390 px: de balk mag scrollen, de rest niet. Het zoekveld en de
   naam wijken op een telefoon naar een tweede rij; de kop stapelt. */
@media(max-width:700px){
  .bk2-balk{ flex-wrap:wrap; height:auto; padding:10px 14px; gap:10px; }
  .bk2-nav{ order:3; flex-basis:100%; height:40px; }
  .bk2-zoek{ margin-left:auto; } .bk2-zoek input{ width:150px; }
  .bk2-balk .wie{ display:none; }
  .bk2-kop{ align-items:flex-start; }
  .bk2-werk li{ grid-template-columns:10px 1fr; }
  .bk2-werk li .bk2-knop{ grid-column:2; justify-self:start; }
}

/* MERK-2 · 4 september 2026 · Jeroen: "linksboven ons witte vlinderlogo, niet
   dat blaadje." Het merkteken uit merk.svg in een wit vlak, zoals in de
   publieke kop en de oude backend. */
.bk2-balk .merk-vlak{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; background:#fff; border-radius:10px; padding:5px; box-shadow:0 2px 8px rgba(38,9,31,.2); }
.bk2-balk .merk-vlak svg{ width:100%; height:100%; }
/* MEER-1 · 4 september 2026 · "ik mis heel wat menu's: webshop, design studio,
   agenda, medewerkers, advertenties, vermeldingen, reviews." Die staan nog in
   de oude backend; het uitklapmenu Meer brengt je er direct, in groepen. */
.bk2-meer{ position:static; display:flex; align-items:center; }
.bk2-meer summary{ list-style:none; cursor:pointer; padding:0 12px; height:56px; display:flex; align-items:center; color:rgba(255,255,255,.72); font-weight:500; white-space:nowrap; }
.bk2-meer summary::-webkit-details-marker{ display:none; }
.bk2-meer[open] summary, .bk2-meer summary:hover{ color:#fff; }
.bk2-meer-paneel{ position:absolute; top:56px; left:20px; right:20px; z-index:60; background:#fff; color:var(--b-tekst); border-radius:0 0 14px 14px; box-shadow:0 18px 40px rgba(38,9,31,.22); padding:16px 22px; display:grid; grid-template-columns:repeat(5, minmax(120px, 1fr)); gap:14px 22px; }
.bk2-meer-groep b{ display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--b-stil); margin:0 0 6px; }
.bk2-meer-groep a{ display:block; color:var(--b-pruim); text-decoration:none; padding:4px 0; font-size:13.5px; }
/* MEER-LEESBAAR-1 · 4 september 2026. Twee regels hierboven gaan uit van de
   DONKERE balk: `.bk2-nav a:hover` zet de tekst op wit, en
   `.bk2-nav a[aria-current]` doet dat ook plus een oranje streep eronder. Het
   Meer-paneel hangt in diezelfde `.bk2-nav`, maar is WIT. Gevolg, door Jeroen
   gezien op de kijkversie: een link werd onzichtbaar zodra je erover ging, en
   op /inbox stonden "Aanmeldingen" en "Ervaringen" er permanent als twee
   oranje streepjes zonder tekst, want die twee wijzen naar /inbox.
   Hier staat wat er in een wit paneel hoort: donkere tekst, en het scherm
   waar je bent in vet met een oranje stip ervoor. */
.bk2-meer-groep a:hover{ color:var(--b-pruim-d); text-decoration:underline; }
.bk2-meer-groep a[aria-current="page"]{
  color:var(--b-pruim-d); font-weight:600; border-bottom-color:transparent;
  display:flex; align-items:center; gap:7px;
}
.bk2-meer-groep a[aria-current="page"]::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--b-oranje); flex:0 0 auto;
}
.bk2-meer summary:hover, .bk2-meer[open] summary{ color:#fff; }
@media(max-width:900px){ .bk2-meer-paneel{ left:0; right:0; grid-template-columns:1fr 1fr; top:auto; max-height:calc(100dvh - 140px); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } }
/* MEERMENU-1 · 20 september 2026 · het paneel liep op mobiel onder de
   schermrand door en was niet te scrollen. Zie het patchscript voor de
   meting. 100dvh omdat de adresbalk op een telefoon in- en uitklapt. */
/* gemeten: het Meer-paneel werd afgesneden door de horizontale scrol van de
   navigatierij. Op een breed scherm scrolt die rij niet, dus daar mag hij
   overlopen; op een telefoon blijft de rij scrollen en klapt Meer eronder. */
@media(min-width:901px){ .bk2-nav{ overflow:visible; } }
/* gemeten: het paneel liep aan de rechterkant uit het venster (784 tot 1658 op 1400); rechts uitgelijnd op de Meer-knop past hij. */
/* gemeten, derde keer: het paneel hangt nu aan de balk zelf (de balk is sticky en dus het ankerpunt), van links tot rechts met 20 px marge. */

/* EDITOR-2 · 6 september 2026 · de gedeelde werkbalk (redactie-editor.js) */
.ed-balk{display:flex;flex-wrap:wrap;gap:3px;align-items:center;margin:0 0 6px;padding:6px;background:var(--b-papier,#f6f1ea);border:1px solid var(--b-lijn,#e6e0d6);border-radius:10px}
.ed-knop{min-width:30px;height:30px;padding:0 8px;border:1px solid transparent;border-radius:7px;background:#fff;font:inherit;font-size:13px;line-height:1;cursor:pointer;color:var(--b-inkt,#2a1a26)}
.ed-knop:hover{border-color:var(--b-lijn2,#d9d0c3)}
.ed-scheiding{width:1px;height:20px;background:var(--b-lijn2,#d9d0c3);margin:0 3px}
.ed-klein{font-size:.875em}
.ed-groot{font-size:1.2em}
.ed-figuur{margin:16px 0}
.ed-figuur img,.ed-figuur video{max-width:100%;height:auto;border-radius:10px;display:block}
.ed-figuur figcaption{font-size:12.5px;color:var(--b-zacht,#6b5a66);margin-top:6px}
.ed-figuur figcaption a{color:#e8834a;text-decoration:underline}
.ed-video{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000}
.ed-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ar-tekst{min-height:420px}
.seo-lijst{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px;font-size:13px}
.seo-lijst li{display:grid;grid-template-columns:18px 1fr auto;gap:8px;align-items:baseline}
.seo-lijst .ok{color:#2e7d4f}.seo-lijst .niet{color:#b3261e}
.seo-lijst small{color:var(--b-zacht,#6b5a66)}