/* ==========================================================================
   HUISSTIJL-REGEL (onaantastbaar): emoji's zijn CONTENT-categorieën en BLIJVEN
   staan — tabs 📣📚📖🛒💬, tegels 💳🛵🍣🧼, en 🎬 / 🔒 / 📲. SVG-lijniconen zijn
   UI-chrome (kop, terug, chevrons, ververs). Nooit een emoji vervangen door een
   SVG-icoon of andersom. Kleuren: zwart/wit/rood (#E8342C / #C0392B).
   ========================================================================== */
:root{
  --rood:#E8342C; --rood-diep:#C0392B; --zwart:#111; --donker:#1c1c1e; --grijs:#8a8a90;
  --licht:#f4f4f5; --groen:#1E8E5A; --amber:#E67E22; --lijn:#ececef;
  --wit:#fff; --ink:#17171a; --ink-zacht:#5b5b62;
  /* gelaagde, zachte schaduwen — de kern van de premium-look */
  --sh-sm:0 1px 2px rgba(17,17,20,.04), 0 1px 1px rgba(17,17,20,.03);
  --sh-md:0 1px 2px rgba(17,17,20,.04), 0 6px 16px -6px rgba(17,17,20,.10);
  --sh-lg:0 10px 34px -8px rgba(17,17,20,.18), 0 2px 6px rgba(17,17,20,.05);
  --schaduw:var(--sh-md);

  /* ---- DESIGN-TOKENS (WP1) ---- */
  /* type-schaal */
  --fs-cap:11px; --fs-xs:12px; --fs-sm:13px; --fs-md:15px; --fs-lg:17px; --fs-xl:20px; --fs-2xl:24px;
  --fs-2xs:10px;                    /* kleine badges/pills/labels (onder de kern-schaal) */
  --lh-tight:1.25; --lh-body:1.55;
  /* grafische glyph-/emoji-maten — bewust BUITEN de typeschaal (niet snappen) */
  --gs-1:31px; --gs-2:34px; --gs-3:38px;
  /* spacing — 8pt-grid */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  /* radius-schaal */
  --r-xs:8px; --r-sm:10px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-full:999px;

  /* merk-focusring (WP1 · punt 9) */
  --focus-ring:0 0 0 3px rgba(232,52,44,.35);
}
*{margin:0;padding:0;box-sizing:border-box;font-family:-apple-system,'Segoe UI',Roboto,sans-serif;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:#ecebea;
  background-image:linear-gradient(180deg,#f0efee 0%,#e9e8e7 100%);
  color:var(--ink);overscroll-behavior-y:none;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
.verborgen{display:none !important}
@keyframes opkomst{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- LOGIN ---------- */
.login{position:fixed;inset:0;color:#fff;display:flex;align-items:flex-start;justify-content:center;padding:var(--sp-6) var(--sp-5) var(--sp-6);overflow-y:auto;
  background:radial-gradient(120% 80% at 50% -10%,#242427 0%,#141416 46%,#0e0e10 100%);}
.login-inner{width:100%;max-width:404px;display:flex;flex-direction:column;position:relative}
/* WP1·4 — zachte rode gloed achter het logo (merk-visitekaartje) */
.login-inner::before{content:"";position:absolute;top:-46px;left:50%;transform:translateX(-50%);width:360px;height:320px;max-width:120%;background:radial-gradient(closest-side,rgba(232,52,44,.14),transparent 72%);pointer-events:none;z-index:0}
.login-inner > *{position:relative;z-index:1}
.login-logo{display:block;width:auto;height:150px;max-width:86%;margin:var(--sp-3) auto var(--sp-2);object-fit:contain;filter:drop-shadow(0 8px 22px rgba(0,0,0,.4))}
.login-tag{text-align:center;color:#9a9aa1;font-size:var(--fs-sm);letter-spacing:.4px;margin-bottom:var(--sp-6)}

/* witte kaart met formulier */
.login-kaart{background:#fff;color:var(--ink);border-radius:var(--r-xl);padding:var(--sp-5) var(--sp-5);box-shadow:0 24px 60px -18px rgba(0,0,0,.55), 0 4px 14px rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.06)}
.lk-titel{font-size:var(--fs-lg);font-weight:800;letter-spacing:-.02em;margin-bottom:var(--sp-1)}
.veld-lbl{display:block;font-size:var(--fs-cap);font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#8a8a90;margin:var(--sp-4) var(--sp-1) var(--sp-2)}
.login-kaart .veld{width:100%;background:#f5f5f7;border:1px solid #e6e6ea;color:var(--ink);font-size:var(--fs-md);padding:var(--sp-4) var(--sp-3);border-radius:var(--r-md);appearance:none;transition:border-color .15s, background .15s, box-shadow .15s}
.login-kaart .veld:focus{outline:none;border-color:var(--zwart);background:#fff;box-shadow:0 0 0 3px rgba(17,17,20,.08)}
.knop.groot{width:100%;margin-top:var(--sp-5);background:var(--rood);color:#fff;border:0;font-size:var(--fs-lg);font-weight:700;letter-spacing:.01em;padding:var(--sp-4);border-radius:var(--r-md);cursor:pointer;box-shadow:0 6px 16px -6px rgba(232,52,44,.6);transition:transform .08s, box-shadow .15s, background .15s}
.knop.groot:hover{background:#e02a22}
.knop.groot:active{transform:translateY(1px);box-shadow:0 3px 10px -6px rgba(232,52,44,.6)}
.knop.groot:disabled{background:#dcdce0;color:#9a9aa1;cursor:not-allowed;box-shadow:none;transform:none}
.login-fout{margin-top:var(--sp-3);background:#fdeceb;border:1px solid #f3c3bf;color:#b3261e;font-size:var(--fs-sm);font-weight:600;padding:var(--sp-3) var(--sp-3);border-radius:var(--r-md);line-height:1.4;animation:opkomst .25s ease both}

/* scheiding of / medewerker-ingang */
.login-scheiding{display:flex;align-items:center;gap:var(--sp-3);color:#7a7a82;font-size:var(--fs-xs);margin:var(--sp-5) var(--sp-1) var(--sp-4);text-transform:uppercase;letter-spacing:.6px;font-weight:600}
.login-scheiding::before,.login-scheiding::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,#38383c,transparent)}
.knop.secundair{width:100%;display:flex;align-items:center;justify-content:center;gap:var(--sp-2);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#f0f0f2;font-size:var(--fs-md);font-weight:600;padding:var(--sp-4) var(--sp-3);border-radius:var(--r-md);cursor:pointer;text-align:center;line-height:1.3;transition:background .15s, border-color .15s}
.knop.secundair:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22)}
.btn-pijl{flex-shrink:0;opacity:.7}
.medewerker-kies{margin-top:var(--sp-3);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);padding:var(--sp-4);animation:opkomst .3s ease both}
.medewerker-kies .veld{width:100%;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:var(--fs-md);padding:var(--sp-4) var(--sp-3);border-radius:var(--r-md);appearance:none;transition:border-color .15s, box-shadow .15s}
.medewerker-kies .veld::placeholder{color:#8a8a90}
.medewerker-kies .veld:focus{outline:none;border-color:rgba(255,255,255,.4);box-shadow:0 0 0 3px rgba(255,255,255,.06)}
select.veld{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%23999' stroke-width='2' fill='none'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:var(--sp-6)}
.medewerker-kies .knop.groot{background:rgba(255,255,255,.16);color:#fff;box-shadow:none}
.medewerker-kies .knop.groot:not(:disabled){background:var(--rood);box-shadow:0 6px 16px -6px rgba(232,52,44,.6)}

/* demo-hulp (verwijderbaar) */
.demo-hulp{margin-top:var(--sp-5);border:1px solid rgba(255,255,255,.09);border-radius:var(--r-lg);background:rgba(255,255,255,.03);overflow:hidden}
.demo-hulp summary{cursor:pointer;list-style:none;font-size:var(--fs-cap);font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#8a8a90;padding:var(--sp-3) var(--sp-4);transition:color .15s}
.demo-hulp summary:hover{color:#b0b0b6}
.demo-hulp summary::-webkit-details-marker{display:none}
.demo-hulp summary::after{content:"+";float:right;color:#6a6a70;font-weight:400}
.demo-hulp[open] summary::after{content:"–"}
.demo-hulp-lijst{padding:0 var(--sp-4) var(--sp-3)}
.demo-acc{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:var(--r-sm);padding:var(--sp-3) var(--sp-3);margin-top:var(--sp-2);font-size:var(--fs-xs);line-height:1.5}
.demo-acc .rl{display:inline-block;font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.5px;background:#3a2020;color:#e8a5a0;padding:var(--sp-1) var(--sp-2);border-radius:var(--r-xs);margin-bottom:var(--sp-1)}
.demo-acc code{color:#e8e8ea;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs-xs)}
.demo-hulp-note{font-size:var(--fs-cap);color:#6a6a70;margin-top:var(--sp-3);line-height:1.5}

/* ---------- APP-SCHIL ---------- */
.app{position:fixed;inset:0;display:flex;flex-direction:column;background:transparent;max-width:520px;margin:0 auto;box-shadow:0 0 60px rgba(0,0,0,.16)}
.kop{color:#fff;padding:calc(env(safe-area-inset-top) + var(--sp-4)) var(--sp-4) var(--sp-3);display:flex;align-items:center;gap:var(--sp-3);flex-shrink:0;
  background:linear-gradient(180deg,#202023 0%,#141416 100%);box-shadow:0 1px 0 rgba(0,0,0,.5), 0 2px 10px rgba(0,0,0,.14);position:relative;z-index:3;
  border-bottom:2px solid var(--rood);transition:box-shadow .2s ease}
/* WP1·8 — subtiele elevatie zodra #view gescrold is */
.kop.gescrold{box-shadow:0 1px 0 rgba(0,0,0,.5), 0 8px 22px -6px rgba(0,0,0,.34)}
.logo{height:34px;width:auto;object-fit:contain;flex-shrink:0}
.kop-tekst{flex:1;min-width:0}
.kop-titel{font-size:var(--fs-lg);font-weight:800;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kop-sub{font-size:var(--fs-cap);color:#a2a2a8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:0;letter-spacing:.1px}
.kop-uit{display:flex;align-items:center;gap:var(--sp-2);background:rgba(255,255,255,.1);border:0;color:#f0f0f2;height:34px;padding:0 var(--sp-3);border-radius:var(--r-sm);font-size:var(--fs-xs);font-weight:600;cursor:pointer;flex-shrink:0;transition:background .15s}
.kop-uit:hover{background:rgba(255,255,255,.16)}
.kop-uit:active{transform:translateY(1px)}
.kop-uit-lbl{white-space:nowrap}
@media (max-width:360px){.kop-uit-lbl{display:none}.kop-uit{padding:0;width:34px;justify-content:center}}

.demo-badge{background:linear-gradient(180deg,#fff7ea,#fef2df);color:#9a6a10;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.6px;text-transform:uppercase;text-align:center;padding:var(--sp-2) var(--sp-2);border-bottom:1px solid #f2dfae;flex-shrink:0;position:relative;z-index:2}

.view{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--sp-4);-webkit-overflow-scrolling:touch}
.view > *{animation:opkomst .32s ease both}

.tabs{display:flex;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border-top:1px solid var(--lijn);padding:var(--sp-2) var(--sp-1) calc(env(safe-area-inset-bottom) + var(--sp-2));flex-shrink:0;box-shadow:0 -1px 12px rgba(17,17,20,.05)}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);border:0;background:none;font-size:var(--fs-cap);color:var(--grijs);cursor:pointer;padding:var(--sp-1) 0 var(--sp-1);font-weight:500;border-radius:var(--r-md);transition:color .15s, background .15s, transform .08s}
/* WP1·5 — emoji in neutrale ronde chip (cross-platform consistent); actief = zachte rode tint/gloed */
.tab .ic{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--r-full);background:#eeedec;font-size:var(--fs-lg);line-height:1;transition:transform .15s, background .15s, box-shadow .15s}
.tab.actief{color:var(--rood)}
.tab.actief .ic{background:rgba(232,52,44,.12);box-shadow:0 0 0 1px rgba(232,52,44,.14), 0 3px 10px -4px rgba(232,52,44,.5);transform:translateY(-1px) scale(1.04)}
.tab.actief .lbl{font-weight:700}
.tab:active{transform:scale(.94)}
.tab.vergrendeld{opacity:.36}
.tab .lbl{display:block;line-height:1;letter-spacing:.1px}

/* ---------- Algemene bouwstenen ---------- */
.lbl{font-size:var(--fs-cap);font-weight:700;color:var(--grijs);text-transform:uppercase;letter-spacing:.6px;margin:var(--sp-4) var(--sp-1) var(--sp-2)}
.lbl:first-child{margin-top:var(--sp-1)}
.kaart{background:#fff;border-radius:var(--r-lg);padding:var(--sp-4);margin-bottom:var(--sp-3);box-shadow:var(--sh-md);border:1px solid rgba(17,17,20,.045)}
/* WP1·6 — rode linker-rand ALLEEN op "actie vereist"-kaarten */
.kaart.actie-vereist{border-left:3px solid var(--rood)}
.kaart-klik{cursor:pointer;transition:transform .1s, box-shadow .15s}
/* WP1·6 — hover-schaduw alleen op klikbare kaarten */
.kaart-klik:hover{box-shadow:var(--sh-lg)}
.kaart-klik:active{transform:scale(.988)}
.kt{font-size:var(--fs-md);font-weight:700;letter-spacing:-.01em;margin-bottom:var(--sp-1);line-height:1.3}
.ks{font-size:var(--fs-sm);color:var(--ink-zacht);line-height:var(--lh-body)}
.badge{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-2xs);font-weight:700;letter-spacing:.2px;padding:var(--sp-1) var(--sp-2);border-radius:var(--r-full);margin-bottom:var(--sp-2)}
.b-actie{background:#fdeceb;color:var(--rood-diep)}
.b-belangrijk{background:#eef;color:#3b5bdb}
.b-nieuw{background:#e7f4ec;color:var(--groen)}
.b-verlopen{background:#fbeaea;color:#a01;border:1px solid #e2b6b6}
.knop{display:block;width:100%;border:0;background:var(--rood);color:#fff;font-weight:700;font-size:var(--fs-sm);padding:var(--sp-3);border-radius:var(--r-md);margin-top:var(--sp-2);cursor:pointer;box-shadow:0 5px 14px -6px rgba(232,52,44,.55);transition:transform .08s, box-shadow .15s, background .15s, opacity .15s}
.knop:hover{background:#e02a22}
.knop:active{transform:translateY(1px)}
.knop.ok{background:var(--groen);box-shadow:0 5px 14px -6px rgba(30,142,90,.5)}
.knop.ok:hover{background:#1a7d50}
.knop.stil{background:#f0f0f2;color:#55555c;box-shadow:none}
.knop.stil:hover{background:#e8e8ec}
.knop.gekozen{outline:2px solid var(--zwart);outline-offset:-2px}
.rij-knoppen{display:flex;gap:var(--sp-2)}
.rij-knoppen .knop{margin-top:var(--sp-2)}
.meta{font-size:var(--fs-cap);color:var(--grijs);margin-top:var(--sp-2);line-height:1.5}
.leeg{text-align:center;color:var(--grijs);font-size:var(--fs-sm);padding:var(--sp-6) var(--sp-5);line-height:1.6}
.leeg .em{font-size:var(--gs-2);display:block;margin-bottom:var(--sp-2)}
.leeg-ic{width:38px;height:38px;color:#c6c6cc;display:block;margin:0 auto var(--sp-3)}

/* deadline countdown */
.countdown{font-weight:700}
.cd-rood{color:var(--rood-diep)}
.cd-amber{color:var(--amber)}
.cd-groen{color:var(--groen)}
.cd-verlopen{color:#a01}

/* voortgangsbalk */
.balk{height:7px;background:#eaeaee;border-radius:var(--r-full);overflow:hidden;margin-top:var(--sp-2)}
.balk > i{display:block;height:100%;background:linear-gradient(90deg,#22a266,#1E8E5A);border-radius:var(--r-full);transition:width .4s cubic-bezier(.4,0,.2,1)}

/* HK reactieteller-detail */
.hk-detail{background:#f8f8f9;border:1px dashed #d0d0d5;border-radius:var(--r-md);padding:var(--sp-3);margin-top:var(--sp-2);font-size:var(--fs-xs);color:#444}
.hk-detail b{color:var(--ink)}

/* ---------- SOP ---------- */
.titelblok{color:#fff;border-radius:var(--r-lg);padding:var(--sp-4);margin-bottom:var(--sp-3);background:linear-gradient(155deg,#232326 0%,#141416 100%);box-shadow:var(--sh-md)}
.titelblok .tt{font-size:var(--fs-lg);font-weight:800;letter-spacing:-.01em}
.titelblok .ts{font-size:var(--fs-xs);color:#b4b4ba;margin-top:var(--sp-1);line-height:1.45}
.sop-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.sop{background:#fff;border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-3);text-align:center;box-shadow:var(--sh-md);cursor:pointer;border:1px solid rgba(17,17,20,.045);display:flex;flex-direction:column;align-items:center;transition:transform .1s, box-shadow .15s}
.sop:hover{box-shadow:var(--sh-lg)}
.sop:active{transform:scale(.97)}
.sop .ic{display:block;font-size:var(--gs-1);line-height:1}
.sop .n{font-size:var(--fs-md);font-weight:700;letter-spacing:-.01em;margin-top:var(--sp-3)}
.sop .c{font-size:var(--fs-cap);color:var(--grijs);margin-top:var(--sp-1)}

.kaart-rij{display:flex;align-items:center;gap:var(--sp-3);background:#fff;border-radius:var(--r-lg);padding:var(--sp-4);margin-bottom:var(--sp-2);box-shadow:var(--sh-sm);cursor:pointer;border:1px solid rgba(17,17,20,.045);width:100%;text-align:left;transition:transform .1s, box-shadow .15s}
.kaart-rij:hover{box-shadow:var(--sh-md)}
.kaart-rij:active{transform:scale(.99)}
.kaart-rij .code{background:var(--zwart);color:#fff;font-size:var(--fs-cap);font-weight:700;padding:var(--sp-1) var(--sp-2);border-radius:var(--r-sm);flex-shrink:0;letter-spacing:.02em}
.kaart-rij .code.gedeeld{background:var(--rood)}
.kaart-rij .rt{flex:1;min-width:0}
.kaart-rij .rt .rtitel{font-size:var(--fs-md);font-weight:700;letter-spacing:-.01em;line-height:1.3}
.kaart-rij .rt .rsub{font-size:var(--fs-cap);color:var(--grijs);margin-top:var(--sp-1);display:flex;align-items:center;gap:var(--sp-1)}
.kaart-rij .rt .rsub .mini{width:13px;height:13px;flex-shrink:0}
.kaart-rij .pijl{color:#cdcdd3;width:18px;height:18px;flex-shrink:0}

.terug{display:inline-flex;align-items:center;gap:var(--sp-1);background:none;border:0;color:var(--rood-diep);font-weight:700;font-size:var(--fs-md);padding:var(--sp-1) 0 var(--sp-3);cursor:pointer}
.terug .tp{width:16px;height:16px;transform:rotate(180deg)}

/* video-plek: SVG-afspeelknop */
.video-plek{color:#fff;text-align:center;border-radius:var(--r-lg);padding:var(--sp-6) var(--sp-4);margin-bottom:var(--sp-3);display:flex;flex-direction:column;align-items:center;background:linear-gradient(155deg,#232326,#141416);box-shadow:var(--sh-md)}
.video-plek .film{display:block;font-size:var(--gs-2);line-height:1}
.video-plek .vt{font-size:var(--fs-xs);color:#b4b4ba;margin-top:var(--sp-2)}
.blok-tekst{font-size:var(--fs-md);color:#2e2e33;line-height:1.6;margin-bottom:var(--sp-3)}
.check{display:flex;gap:var(--sp-3);align-items:flex-start;font-size:var(--fs-md);line-height:1.5;margin-bottom:var(--sp-3);cursor:pointer}
.check .box{width:21px;height:21px;border:1.5px solid #c2c2c8;border-radius:var(--r-xs);flex-shrink:0;margin-top:0;display:flex;align-items:center;justify-content:center;transition:background .15s, border-color .15s, transform .1s}
.check:active .box{transform:scale(.9)}
.check.af .box{background:var(--groen);border-color:var(--groen)}
.check.af .box:after{content:"✓";color:#fff;font-size:var(--fs-sm);font-weight:700}
.check.af .tekst{color:#9a9aa1;text-decoration:line-through}
.gedeeld-pill{display:inline-block;background:#fdeceb;color:var(--rood-diep);font-size:var(--fs-2xs);font-weight:700;padding:var(--sp-1) var(--sp-2);border-radius:var(--r-full);margin-left:var(--sp-2)}

/* inwerk voortgang */
.inwerk .balk{margin-top:var(--sp-3)}

/* ---------- Personeel toegang geven ---------- */
.toegang{border:1px solid rgba(17,17,20,.05);background:#fff;border-radius:var(--r-lg);margin-bottom:var(--sp-3);box-shadow:var(--sh-md);overflow:hidden}
.toegang summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4)}
.toegang summary::-webkit-details-marker{display:none}
.toegang .tg-ic{width:22px;height:22px;color:var(--rood-diep);flex-shrink:0}
.toegang .tg-t{flex:1}
.toegang .tg-t .tt2{font-size:var(--fs-md);font-weight:700;letter-spacing:-.01em;line-height:1.2}
.toegang .tg-t .ss2{font-size:var(--fs-xs);color:var(--grijs);margin-top:var(--sp-1)}
.toegang .tg-chev{width:18px;height:18px;color:#bbb;transition:transform .2s;transform:rotate(90deg)}
.toegang[open] .tg-chev{transform:rotate(-90deg)}
.toegang-body{padding:0 var(--sp-4) var(--sp-4);border-top:1px solid var(--lijn)}
.tg-hk{margin-top:var(--sp-4);background:#fdeceb;border:1px solid #f3c9c4;border-radius:var(--r-md);padding:var(--sp-3)}
.tg-hk .tg-hk-t{font-size:var(--fs-sm);font-weight:700;color:var(--rood-diep)}
.tg-hk .tg-hk-s{font-size:var(--fs-xs);color:#7a4a45;line-height:1.45;margin-top:var(--sp-1)}
.tg-hk .tg-link{background:#fff;border-color:#f3c9c4}
.tg-stap{display:flex;gap:var(--sp-3);margin-top:var(--sp-4)}
.tg-num{width:23px;height:23px;border-radius:50%;background:var(--zwart);color:#fff;font-size:var(--fs-xs);font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tg-stap .tg-tx{font-size:var(--fs-sm);line-height:var(--lh-body);color:#2e2e33}
.tg-stap .tg-tx b{color:var(--ink)}
.tg-link{display:flex;align-items:center;gap:var(--sp-2);background:#f5f5f7;border:1px solid var(--lijn);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-3);margin-top:var(--sp-2)}
.tg-link code{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs-xs);color:#2e2e33;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tg-kopieer{display:flex;align-items:center;gap:var(--sp-1);background:var(--zwart);color:#fff;border:0;border-radius:var(--r-sm);font-size:var(--fs-xs);font-weight:600;padding:var(--sp-2) var(--sp-3);cursor:pointer;flex-shrink:0;transition:background .15s, transform .08s}
.tg-kopieer:active{transform:translateY(1px)}
.tg-kopieer svg{width:14px;height:14px}
.tg-kopieer.gekopieerd{background:var(--groen)}
.tg-qr{width:156px;height:156px;margin:var(--sp-3) auto var(--sp-1);background:#fff;border:1px solid var(--lijn);border-radius:var(--r-md);padding:var(--sp-2);box-shadow:var(--sh-sm)}
.tg-qr svg{display:block;width:100%;height:100%}
.tg-noot{background:#f8f8f9;border-left:3px solid var(--rood);border-radius:var(--r-sm);padding:var(--sp-3) var(--sp-3);margin-top:var(--sp-4);font-size:var(--fs-sm);color:#444;line-height:var(--lh-body)}

/* ---------- Handboek ---------- */
.hb-versie{display:inline-block;background:#eef;color:#3b5bdb;font-size:var(--fs-2xs);font-weight:700;padding:var(--sp-1) var(--sp-2);border-radius:var(--r-full);margin-left:var(--sp-2)}

/* ---------- Vragen ---------- */
.form-veld{width:100%;background:#fff;border:1px solid var(--lijn);border-radius:var(--r-md);padding:var(--sp-3);font-size:var(--fs-md);margin-bottom:var(--sp-3);font-family:inherit;transition:border-color .15s, box-shadow .15s}
.form-veld:focus{outline:none;border-color:var(--zwart);box-shadow:0 0 0 3px rgba(17,17,20,.06)}
textarea.form-veld{min-height:92px;resize:vertical}
.status-pill{display:inline-block;font-size:var(--fs-2xs);font-weight:700;padding:var(--sp-1) var(--sp-2);border-radius:var(--r-full)}
.st-open{background:#fbeaea;color:#a01}
.st-behandeling{background:#fef3e2;color:var(--amber)}
.st-beantwoord{background:#e7f4ec;color:var(--groen)}
.antwoord{background:#f8f8f9;border-left:3px solid var(--groen);border-radius:var(--r-sm);padding:var(--sp-3);margin-top:var(--sp-2);font-size:var(--fs-sm);color:#444;line-height:var(--lh-body)}

/* slotmelding — SVG-slot */
.slot{background:#fff;border-radius:var(--r-lg);padding:var(--sp-6) var(--sp-5);text-align:center;box-shadow:var(--sh-md);border:1px solid rgba(17,17,20,.045)}
.slot .slot-ic{display:inline-block;font-size:var(--gs-3);line-height:1;margin-bottom:var(--sp-1)}
.slot .st{font-size:var(--fs-md);font-weight:700;letter-spacing:-.01em;margin-top:var(--sp-3)}
.slot .ss{font-size:var(--fs-sm);color:var(--grijs);margin-top:var(--sp-2);line-height:var(--lh-body)}

/* pwa hint — subtiele lichtgrijze band */
.pwa-hint{background:#f5f5f7;border:1px solid var(--lijn);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-3);margin-bottom:var(--sp-3);font-size:var(--fs-xs);color:#55555c;line-height:1.45;display:flex;gap:var(--sp-2);align-items:center}
.pwa-hint .ph-ic{font-size:var(--fs-lg);line-height:1;flex-shrink:0}
.pwa-hint .x{margin-left:auto;background:none;border:0;font-size:var(--fs-lg);line-height:1;color:#aaa;cursor:pointer;flex-shrink:0;padding:0 var(--sp-1)}

/* ==========================================================================
   WP1 — VISUEEL FUNDAMENT (nieuwe premium-lagen)
   ========================================================================== */

/* --- 2a · MERK-SPLASH (dekt de login-flits tot huidigeSessie() beslist) --- */
.splash{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 80% at 50% -10%,#242427 0%,#141416 46%,#0e0e10 100%);transition:opacity .4s ease}
.splash.weg{opacity:0;pointer-events:none}
.splash-logo{width:auto;height:132px;max-width:70%;object-fit:contain;filter:drop-shadow(0 8px 22px rgba(0,0,0,.4));animation:splashPuls 1.6s ease-in-out infinite}
@keyframes splashPuls{0%,100%{opacity:.85;transform:scale(.99)}50%{opacity:1;transform:scale(1.01)}}

/* --- 2b · LOGIN-KNOP BEZIG-STATE (spinner + "Bezig…") --- */
.spinner{display:inline-block;width:16px;height:16px;margin-right:var(--sp-2);vertical-align:-3px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:var(--r-full);animation:draai .7s linear infinite}
@keyframes draai{to{transform:rotate(360deg)}}
/* bezig-state legibel houden (disabled valt anders terug op grijs) */
.knop.groot.bezig{background:#f7dedb;color:var(--rood-diep);box-shadow:none}
.knop.bezig .spinner{border-color:rgba(192,57,43,.25);border-top-color:var(--rood-diep)}

/* --- 2c · SKELETON-KAARTEN (shimmer) tijdens laden --- */
.skelet-kaart{background:#fff;border-radius:var(--r-lg);padding:var(--sp-4);margin-bottom:var(--sp-3);box-shadow:var(--sh-md);border:1px solid rgba(17,17,20,.045)}
.sk{position:relative;overflow:hidden;background:#ececef;border-radius:var(--r-sm)}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:shimmer 1.3s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}
.sk-badge{width:84px;height:16px;border-radius:var(--r-full);margin-bottom:var(--sp-3)}
.sk-titel{width:68%;height:16px;margin-bottom:var(--sp-3)}
.sk-regel{width:100%;height:12px;margin-bottom:var(--sp-2)}
.sk-regel.kort{width:52%;margin-bottom:0}

/* --- 4 · LOGIN-VISITEKAARTJE: gestaggerde entree + merk-footer --- */
.login-logo{animation:opkomst .5s 0s both}
.login-tag{animation:opkomst .5s .06s both}
.login-kaart{animation:opkomst .5s .12s both}
.login-scheiding,#medewerker-ingang,.demo-hulp,.login-footer{animation:opkomst .5s .18s both}
.login-footer{text-align:center;color:#6a6a70;font-size:var(--fs-cap);letter-spacing:.4px;margin-top:var(--sp-5)}

/* --- 5 · TAB-WISSEL richtingstransitie (fade-fallback; startViewTransition in JS) --- */
@keyframes slideR{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes slideL{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.view.slide-r{animation:slideR .26s ease both}
.view.slide-l{animation:slideL .26s ease both}
.view.slide-r > *,.view.slide-l > *{animation:none}

/* --- 7 · MICRO-ANIMATIES: vink-pop, reactieknop-puls, "opgeslagen ✓"-flits --- */
@keyframes vinkPop{0%{transform:scale(.6)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.check .box.pop{animation:vinkPop .28s ease}
@keyframes knopPuls{0%{transform:scale(1)}45%{transform:scale(1.06)}100%{transform:scale(1)}}
.knop.puls{animation:knopPuls .3s ease}
.opgeslagen-flits{display:inline-block;margin-top:var(--sp-2);font-size:var(--fs-cap);font-weight:700;color:var(--groen);animation:flits 1.6s ease forwards}
@keyframes flits{0%{opacity:0;transform:translateY(4px)}12%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}

/* --- 9 · :focus-visible merk-ring op interactieve elementen --- */
.knop:focus-visible,.knop.groot:focus-visible,.knop.secundair:focus-visible,.tab:focus-visible,
.kaart-rij:focus-visible,.sop:focus-visible,.terug:focus-visible,summary:focus-visible,
.kop-uit:focus-visible,.tg-kopieer:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* --- 3 · LAPTOP-LAYOUT ≥900px: verticale zijnavigatie + bredere content --- */
@media (min-width:900px){
  .app{max-width:1100px;display:grid;grid-template-columns:248px 1fr;grid-template-rows:auto auto auto 1fr;
    grid-template-areas:"nav kop" "nav badge" "nav offline" "nav view"}
  .kop{grid-area:kop}
  .demo-badge{grid-area:badge}
  /* WP2·20 — offline-banner een eigen plek in kolom 2 (anders belandt hij onder de zijnav) */
  .offline-banner{grid-area:offline}
  .view{grid-area:view;max-width:780px;width:100%;margin:0 auto;padding:var(--sp-5) var(--sp-6)}
  .tabs{grid-area:nav;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:var(--sp-1);
    border-top:0;border-right:1px solid var(--lijn);padding:var(--sp-4) var(--sp-3) calc(env(safe-area-inset-bottom) + var(--sp-4));
    box-shadow:none;background:rgba(255,255,255,.96)}
  .tab{flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:var(--sp-3);padding:var(--sp-3) var(--sp-3);border-radius:var(--r-md)}
  .tab .lbl{font-size:var(--fs-sm);letter-spacing:0}
  .tab:active{transform:none}
  .tab.actief{background:rgba(232,52,44,.08)}
  .sop-grid{grid-template-columns:1fr 1fr 1fr}
}

/* --- prefers-reduced-motion: alle nieuwe animaties stilzetten --- */
@media (prefers-reduced-motion: reduce){
  .splash{transition:none}
  .splash-logo,.sk::after,.spinner,.view.slide-r,.view.slide-l,
  .check .box.pop,.knop.puls,.kop-ic.bezig svg,
  .login-logo,.login-tag,.login-kaart,.login-scheiding,#medewerker-ingang,.demo-hulp,.login-footer{animation:none}
  .spinner{border-top-color:rgba(255,255,255,.7)}
  .opgeslagen-flits{animation:none;opacity:1}
}

/* ==========================================================================
   WP2 — OVERZICHT & MOGELIJKHEDEN (nieuwe lagen; bouwt voort op WP1)
   ========================================================================== */

/* --- 11 · TAB-BADGE (openstaande actie-updates) --- */
.tab .ic{position:relative}
.tab-badge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 var(--sp-1);border-radius:var(--r-full);
  background:var(--rood);color:#fff;font-size:var(--fs-2xs);font-weight:800;line-height:17px;text-align:center;
  box-shadow:0 0 0 2px #f4f3f2, 0 2px 5px -1px rgba(232,52,44,.6)}
@media (min-width:900px){ .tab-badge{box-shadow:0 0 0 2px #fafafa, 0 2px 5px -1px rgba(232,52,44,.6)} }

/* --- 10 · UPDATES: bron/datum-regel + gedempte "Afgehandeld"-sectie --- */
.kaart .meta.bron{color:#9a9aa1;font-weight:600}
.kaart.gedempt{opacity:.6}
.kaart.gedempt .knop{opacity:.85}

/* --- 13 · SOP-ZOEKBALK --- */
.sop-zoek{display:flex;align-items:center;gap:var(--sp-2);background:#fff;border:1px solid rgba(17,17,20,.08);
  border-radius:var(--r-md);padding:var(--sp-3) var(--sp-3);margin-bottom:var(--sp-3);box-shadow:var(--sh-sm)}
.sop-zoek .z-ic{width:18px;height:18px;color:var(--grijs);flex-shrink:0}
.sop-zoek input{flex:1;min-width:0;border:0;background:none;font-size:var(--fs-md);color:var(--ink);font-family:inherit}
.sop-zoek input:focus{outline:none}
.sop-zoek .z-wis{border:0;background:none;color:#bbb;font-size:var(--fs-xl);line-height:1;cursor:pointer;padding:0 var(--sp-1);flex-shrink:0}
.sop-zoek .z-wis:hover{color:#888}
.z-res-cap{font-size:var(--fs-cap);color:var(--grijs);font-weight:700;text-transform:uppercase;letter-spacing:.6px;margin:var(--sp-1) var(--sp-1) var(--sp-2)}
.sop-zoek-res .z-leeg{text-align:center;color:var(--grijs);font-size:var(--fs-sm);padding:var(--sp-6) var(--sp-4);line-height:1.5}

/* --- 14 · SOP-voortgang op tegels + rijen --- */
.sop .prog{width:100%;margin-top:var(--sp-3)}
.sop .prog .balk{height:5px;margin-top:0}
.sop .prog .pt{font-size:var(--fs-cap);color:var(--grijs);margin-top:var(--sp-1)}
.sop.klaar-vol .ic{box-shadow:0 0 0 2px rgba(30,142,90,.2)}
.kaart-rij .rij-vink{width:20px;height:20px;border-radius:var(--r-full);background:var(--groen);color:#fff;
  font-size:var(--fs-xs);font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* --- 16 · "Verder waar je bleef" --- */
.verder-kaart{display:flex;align-items:center;gap:var(--sp-3);width:100%;text-align:left;color:#fff;border:0;
  background:linear-gradient(155deg,#232326,#141416);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-4);margin-bottom:var(--sp-3);
  box-shadow:var(--sh-md);cursor:pointer;transition:transform .1s, box-shadow .15s}
.verder-kaart:hover{box-shadow:var(--sh-lg)}
.verder-kaart:active{transform:scale(.99)}
.verder-kaart:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.verder-kaart .vk-l{flex:1;min-width:0;display:flex;flex-direction:column}
.verder-kaart .vk-cap{font-size:var(--fs-cap);color:#b4b4ba;text-transform:uppercase;letter-spacing:.6px;font-weight:700}
.verder-kaart .vk-t{display:flex;align-items:center;gap:var(--sp-2);min-width:0;font-size:var(--fs-md);font-weight:700;margin-top:var(--sp-1)}
.verder-kaart .vk-code{background:var(--rood);color:#fff;font-size:var(--fs-cap);font-weight:700;padding:var(--sp-1) var(--sp-2);
  border-radius:var(--r-sm);flex-shrink:0;letter-spacing:.02em}
.verder-kaart .vk-naam{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.verder-kaart .vk-pijl{width:20px;height:20px;color:#fff;opacity:.85;flex-shrink:0}

/* --- 17 · inwerk-functiekeuze --- */
.inwerk-kop{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-1)}
.inwerk-sel{appearance:none;-webkit-appearance:none;background:#f5f5f7;border:1px solid var(--lijn);border-radius:var(--r-sm);
  padding:var(--sp-2) var(--sp-6) var(--sp-2) var(--sp-3);font-size:var(--fs-sm);font-weight:600;color:var(--ink);font-family:inherit;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%23999' stroke-width='2' fill='none'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center}
.inwerk-sel:focus{outline:none;border-color:var(--zwart);box-shadow:var(--focus-ring)}

/* --- 18 · handboek: aanklikbare rij + detail --- */
.hb-rij{display:block;width:100%;text-align:left;cursor:pointer;transition:transform .1s, box-shadow .15s}
.hb-rij:hover{box-shadow:var(--sh-lg)}
.hb-rij:active{transform:scale(.99)}
.hb-rij:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.hb-rij-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-1)}
.hb-rij-top .kt{margin-bottom:0}
.hb-gelezen{font-size:var(--fs-cap);font-weight:700;color:var(--groen);flex-shrink:0;white-space:nowrap}
.hb-open{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-1);color:var(--rood-diep);font-size:var(--fs-xs);font-weight:700;margin-top:var(--sp-3)}
.hb-open .pijl-in{width:15px;height:15px}
.hb-h{font-size:var(--fs-md);font-weight:800;letter-spacing:-.01em;margin:var(--sp-2) 0 var(--sp-2)}
.hb-h:first-child{margin-top:0}
.hb-lijst{margin:var(--sp-1) 0 var(--sp-3) var(--sp-4)}
.hb-lijst li{font-size:var(--fs-md);color:#2e2e33;line-height:var(--lh-body);margin-bottom:var(--sp-1)}
.hb-leeg{color:var(--grijs);text-align:center;padding:var(--sp-4) var(--sp-2)}
.hb-bevestig{margin-top:var(--sp-1)}

/* --- 19 · verversknop in de kop --- */
.kop-ic{display:flex;align-items:center;justify-content:center;width:34px;height:34px;background:rgba(255,255,255,.1);
  border:0;border-radius:var(--r-sm);color:#f0f0f2;cursor:pointer;flex-shrink:0;transition:background .15s}
.kop-ic:hover{background:rgba(255,255,255,.16)}
.kop-ic:active{transform:translateY(1px)}
.kop-ic.bezig svg{animation:draai .7s linear infinite}
.kop-ic:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* --- 20 · offline-banner --- */
.offline-banner{background:#2b2b2e;color:#f0efec;font-size:var(--fs-xs);font-weight:600;text-align:center;
  padding:var(--sp-2) var(--sp-3);border-bottom:1px solid rgba(0,0,0,.3);flex-shrink:0;position:relative;z-index:2;letter-spacing:.2px}

/* --- 21 · login-gemak: wachtwoord-oogje + hulpregels --- */
.veld-wrap{position:relative;display:flex;align-items:center}
/* padding-right moet het 34px-oogje rechts (right:5px) vrijhouden → 40px via tokens */
.veld-wrap .veld{flex:1;padding-right:calc(var(--sp-6) + var(--sp-2))}
.ww-oog{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:flex;
  align-items:center;justify-content:center;background:none;border:0;color:#9a9aa1;cursor:pointer;border-radius:var(--r-sm)}
.ww-oog svg{width:20px;height:20px}
.ww-oog:hover{color:#55555c}
.ww-oog.aan{color:var(--rood-diep)}
.ww-oog:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.login-blijf{font-size:var(--fs-xs);color:#8a8a90;text-align:center;margin-top:var(--sp-3)}
.login-hulp{font-size:var(--fs-xs);color:#9a9aa1;text-align:center;margin-top:var(--sp-2);line-height:1.5}

/* --- 22 · bestellen "binnenkort beschikbaar" --- */
.binnenkort{background:#fff;border:1px solid rgba(17,17,20,.05);border-radius:var(--r-lg);box-shadow:var(--sh-md);
  padding:var(--sp-6) var(--sp-5);text-align:center;margin-top:var(--sp-1)}
.binnenkort .leeg-ic{width:40px;height:40px;color:#c6c6cc;margin:0 auto var(--sp-3);display:block}
.binnenkort .bk-t{font-size:var(--fs-lg);font-weight:800;letter-spacing:-.01em}
.binnenkort .bk-s{font-size:var(--fs-sm);color:var(--grijs);line-height:var(--lh-body);margin:var(--sp-2) auto 0;max-width:330px}
.binnenkort .bk-pill{display:inline-block;margin-top:var(--sp-4);background:#fdeceb;color:var(--rood-diep);font-size:var(--fs-cap);
  font-weight:700;text-transform:uppercase;letter-spacing:.6px;padding:var(--sp-2) var(--sp-4);border-radius:var(--r-full)}