/* 2Work UI-standaard 1.16 (10-11-2026). Zie UI-STANDAARD.md. Alle klassen beginnen met u-, alle kleuren met --u-.
   Licht/donker: volgt het apparaat, tenzij <html data-thema="licht|donker"> (keuze in Mijn profiel, UI.thema). */
:root{--u-bg:#F2F2F7;--u-card:#fff;--u-ink:#10221C;--u-muted:#53625B;--u-line:rgba(60,60,67,.14);--u-pri:#0B6B4F;--u-pri-ink:#fff;--u-sig:#7FD1AE;
  --u-band:#10221C;--u-bad:#A8261B;--u-soft:#E9ECEA;--u-veld:#F2F2F7;
  --u-ok-bg:#D6EEDF;--u-ok:#1B6C3F;--u-plan-bg:#DCE8F4;--u-plan:#1D4F7F;--u-let-bg:#FBF0D9;--u-let:#6B4500;--u-laat-bg:#F6DEDA;--u-laat:#A8261B;--u-uit-bg:#E2E6EA;--u-uit:#53625B;
  --u-schaduw:0 1px 2px rgba(16,34,28,.05),0 6px 20px rgba(16,34,28,.07);
  --u-gloed:radial-gradient(95% 80% at 0% 0%,rgba(46,154,114,.75),transparent 70%),radial-gradient(75% 70% at 100% 100%,rgba(127,209,174,.32),transparent 70%),#0E1A16;
  --u-letter:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",Roboto,Inter,system-ui,sans-serif;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-thema=licht]){--u-bg:#000;--u-card:#1C1C1E;--u-ink:#E4EBE7;--u-muted:#93A39B;--u-line:rgba(235,235,245,.12);--u-pri:#6FCBA3;--u-pri-ink:#0B1F17;
  --u-bad:#F2918A;--u-soft:#2C2C2E;--u-veld:#2C2C2E;--u-ok-bg:#133523;--u-ok:#71CF98;--u-plan-bg:#16283A;--u-plan:#8DB8E2;--u-let-bg:#3A2C10;--u-let:#F2C46B;--u-laat-bg:#3A1714;--u-laat:#F2918A;--u-uit-bg:#26313A;--u-uit:#93A39B;color-scheme:dark}}
:root[data-thema=donker]{--u-bg:#000;--u-card:#1C1C1E;--u-ink:#E4EBE7;--u-muted:#93A39B;--u-line:rgba(235,235,245,.12);--u-pri:#6FCBA3;--u-pri-ink:#0B1F17;
  --u-bad:#F2918A;--u-soft:#2C2C2E;--u-veld:#2C2C2E;--u-ok-bg:#133523;--u-ok:#71CF98;--u-plan-bg:#16283A;--u-plan:#8DB8E2;--u-let-bg:#3A2C10;--u-let:#F2C46B;--u-laat-bg:#3A1714;--u-laat:#F2918A;--u-uit-bg:#26313A;--u-uit:#93A39B;color-scheme:dark}

/* Pagina */
.u-pagina,.u-pagina *,.u-pagina *::before,.u-pagina *::after{box-sizing:border-box}
.u-pagina [hidden]{display:none!important}
.u-pagina a:not([class]):not(nav a){color:var(--u-pri)}
[data-u-overzicht]>*+*{margin-top:12px}
.u-pagina{margin:0;background:var(--u-bg);color:var(--u-ink);font:15px/1.5 var(--u-letter);-webkit-font-smoothing:antialiased}
.u-w{max-width:1100px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.u-main{padding-block:24px 64px;display:flex;flex-direction:column;gap:18px}
.u-titel{font-size:26px;line-height:1.2;font-weight:700;margin:0;letter-spacing:-.02em}

/* 1. Kopbalk: logo, naam, app; rechts alleen de taalkeuze (35) en het menu (Uitloggen onderaan in het menu) */
.u-top{background:var(--u-band);color:#EEF3F0;position:relative}
.u-top>.u-w{display:flex;align-items:center;gap:12px;min-height:60px;padding-block:8px}
.u-merk{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;min-width:0}.u-merk img,.u-merk svg{height:30px;width:auto;flex:none}
.u-merk b{display:block;font-size:17px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.u-merk small{display:block;font-size:12px;opacity:.65}
.u-top .u-sp{flex:1}
.u-menuknop{display:grid;place-items:center;width:40px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;cursor:pointer;padding:0}
.u-menuknop:hover,.u-menuknop[aria-expanded=true]{background:rgba(255,255,255,.14)}
/* 35. Taalkeuze NL | EN: klein knopje rechts in de kopbalk, direct links van de menuknop; ook op de telefoon (niet in het menu).
   <div class="u-taal" role="group" aria-label="Taal / Language"> met <a> of <button data-u-taal="nl|en">; de gekozen taal krijgt aria-current="true". */
.u-taal{display:inline-flex;flex:none;border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:2px}
.u-taal a,.u-taal button{display:grid;place-items:center;min-width:34px;height:32px;padding:0 8px;border:0;border-radius:999px;background:none;color:#C9D6CF;font:700 13px/1 var(--u-letter);letter-spacing:.04em;text-decoration:none;cursor:pointer}
.u-taal a:hover,.u-taal button:hover{color:#fff;background:rgba(255,255,255,.14)}
.u-taal [aria-current=true]{background:var(--u-sig);color:var(--u-band)}
@media (max-width:640px){.u-taal a,.u-taal button{height:36px;min-width:38px}}
.u-menu{position:absolute;right:max(16px,calc((100% - 1100px)/2 + 16px));top:calc(100% - 4px);z-index:50;min-width:240px;background:var(--u-card);color:var(--u-ink);border-radius:14px;box-shadow:0 12px 36px rgba(0,0,0,.22);padding:8px;display:flex;flex-direction:column}
.u-menu[hidden]{display:none}
.u-menu .u-wie{padding:8px 10px 10px;border-bottom:1px solid var(--u-line);margin-bottom:4px}.u-menu .u-wie b{display:block}.u-menu .u-wie small{color:var(--u-muted)}
.u-menu a,.u-menu button{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:inherit;text-decoration:none;background:none;border:0;font:inherit;text-align:left;cursor:pointer;width:100%}
.u-menu a:hover,.u-menu button:hover{background:var(--u-soft)}
.u-menu hr{border:0;border-top:1px solid var(--u-line);margin:4px 0;width:100%}
.u-menu .u-uitlog{color:var(--u-bad);font-weight:600}
/* 23. Weergave kiezen in het menu, onder je naam */
.u-thema{display:flex;flex-wrap:wrap;min-width:250px;gap:4px;padding:6px 10px 10px;border-bottom:1px solid var(--u-line);margin-bottom:4px}
.u-thema>span{width:100%;font-size:12px;color:var(--u-muted);margin-bottom:2px}
.u-thema>button[data-u-thema]{width:auto;flex:1;display:inline-flex;justify-content:center;padding:6px 8px;font:600 13px var(--u-letter);border:1px solid var(--u-line);border-radius:8px;background:none;color:inherit;cursor:pointer}
.u-thema>button[data-u-thema]:hover{border-color:var(--u-pri);background:none}
.u-thema>button[data-u-thema][aria-pressed=true]{background:var(--u-pri);color:var(--u-pri-ink);border-color:transparent}
.u-streep{height:4px;background:linear-gradient(90deg,#0B6B4F,#7FD1AE)}

/* 2 en 19. Tabs: onderstreept; op de telefoon een vaste balk onderaan met icoon */
.u-tabs{display:flex;gap:4px;border-bottom:1px solid var(--u-line);overflow-x:auto}
.u-tabs a,.u-tabs button{display:inline-flex;align-items:center;gap:7px;padding:10px 12px;border:0;border-bottom:3px solid transparent;background:none;color:var(--u-muted);font:600 15px var(--u-letter);text-decoration:none;cursor:pointer;white-space:nowrap}
.u-tabs svg{width:16px;height:16px;flex:none}
.u-tabs [aria-current=page],.u-tabs [aria-current=true],.u-tabs [aria-selected=true]{color:var(--u-ink);border-bottom-color:var(--u-pri)}
.u-tabs .u-tel{display:none}
.u-tabs.u-met-meer{overflow:visible}
.u-tabs-meer{position:relative;flex:none}
.u-tabs-meer>summary{list-style:none;display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:3px solid transparent;color:var(--u-muted);font:600 15px var(--u-letter);cursor:pointer;white-space:nowrap}
.u-tabs-meer>summary::-webkit-details-marker{display:none}
.u-tabs-meer>summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.u-tabs-meer:has([aria-current=page],[aria-current=true],[aria-selected=true])>summary{color:var(--u-ink);border-bottom-color:var(--u-pri)}
.u-tabs-lijst{position:absolute;right:0;top:calc(100% + 4px);z-index:30;background:var(--u-card);border:1px solid var(--u-line);border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.16);padding:6px;display:flex;flex-direction:column;min-width:210px}
.u-tabs .u-tabs-lijst>*{border-bottom:0;border-radius:8px;padding:9px 12px;justify-content:flex-start;margin:0}
.u-tabs .u-tabs-lijst>:is([aria-current=page],[aria-current=true],[aria-selected=true]){background:color-mix(in srgb,var(--u-pri) 12%,transparent);color:var(--u-pri)}
@media (max-width:640px){
  .u-tabs[data-telefoon]{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--u-card);border-top:1px solid var(--u-line);border-bottom:0;justify-content:space-around;gap:0;padding:4px 0 max(6px,env(safe-area-inset-bottom));box-shadow:0 -4px 16px rgba(0,0,0,.06);overflow:visible}
  .u-tabs[data-telefoon] a,.u-tabs[data-telefoon] button{flex:1;flex-direction:column;gap:2px;padding:6px 2px;border:0;font-size:11px}
  .u-tabs[data-telefoon] svg{width:22px;height:22px}
  .u-tabs[data-telefoon] [aria-current=page],.u-tabs[data-telefoon] [aria-selected=true]{color:var(--u-pri)}
  .u-tabs[data-telefoon] .u-tel{display:inline-flex}.u-tabs[data-telefoon] .u-pc{display:none}
  body:has(.u-tabs[data-telefoon]){padding-bottom:72px}
}

/* 4. Donker paneel met kerncijfers. Bovenaan een app groot (datum, groet); in beheer compact: titel en cijfers op één regel */
.u-paneel{background:var(--u-gloed);color:#fff;border-radius:18px;padding:24px 26px;box-shadow:0 8px 28px rgba(14,26,22,.22);display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between}
.u-paneel h1{font-size:30px;line-height:1.1;margin:0 0 6px;letter-spacing:-.02em;color:#fff}.u-paneel p{margin:0;color:rgba(255,255,255,.78);max-width:620px}
.u-paneel .u-datum{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.65)}
.u-cijfers{display:flex;gap:8px;flex-wrap:wrap}.u-cijfers>div{min-width:96px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:10px 14px}
.u-cijfers b{display:block;font-size:24px;line-height:1.1}.u-cijfers span{font-size:12px;color:rgba(255,255,255,.75)}
.u-paneel .u-knop.pri{background:linear-gradient(135deg,#7FD1AE,#5FBF96);color:#0B1F17}
.u-paneel.compact{padding:14px 20px;border-radius:16px;gap:10px 20px;flex-wrap:wrap}
.u-paneel.compact h1{font-size:22px;margin:0}
.u-paneel.compact .u-cijfers>div{min-width:84px;padding:6px 12px}.u-paneel.compact .u-cijfers b{font-size:18px}.u-paneel.compact .u-cijfers span{font-size:11.5px}

/* Blokken (kaarten) met kop; 3. sluiten met ✕ rechtsboven */
.u-card{background:var(--u-card);border-radius:16px;padding:20px;box-shadow:var(--u-schaduw);min-width:0}
.u-kop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
.u-kop h2,.u-kop h3{font-size:17px;margin:0;font-weight:700}
.u-kop .u-acties{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.u-sectiekop{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:8px 0 0}.u-sectiekop h2{font-size:19px;margin:0}
.u-x{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:8px;border:0;background:none;color:var(--u-muted);cursor:pointer;padding:0;font-size:20px;line-height:1}
.u-x:hover{background:var(--u-soft);color:var(--u-ink)}

/* 4. Venster (nieuw maken of één ding wijzigen) */
dialog.u-venster{border:0;border-radius:18px;padding:0;width:min(560px,calc(100% - 32px));max-height:calc(100% - 48px);background:var(--u-card);color:var(--u-ink);box-shadow:0 20px 60px rgba(0,0,0,.35)}
dialog.u-venster::backdrop{background:rgba(8,16,13,.5)}
.u-venster .u-kop{padding:16px 16px 0 22px;margin:0}.u-venster .u-kop h2{font-size:19px}
.u-venster .u-inhoud{padding:12px 22px 22px;display:flex;flex-direction:column;gap:14px}
@media (max-width:640px){dialog.u-venster{width:100%;max-width:100%;height:100%;max-height:100%;border-radius:0;margin:0}}

/* 6. Kaart die openklapt: hele kop klikbaar, pijltje draait mee */
details.u-kaart{background:var(--u-card);border-radius:16px;box-shadow:var(--u-schaduw);overflow:hidden;position:relative}
details.u-kaart>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:16px 18px}
details.u-kaart>summary::-webkit-details-marker{display:none}
details.u-kaart>summary::after{content:"";flex:none;width:10px;height:10px;margin-left:auto;border-right:2px solid var(--u-muted);border-bottom:2px solid var(--u-muted);transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s}
details.u-kaart[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
details.u-kaart>.u-inhoud{padding:0 18px 18px;border-top:1px solid var(--u-line);padding-top:14px}
.u-tegels>details.u-kaart[open]{grid-column:1/-1}

/* 5. Tegels | Lijst */
.u-weergave{display:inline-flex;border:1px solid var(--u-line);border-radius:999px;padding:2px;background:var(--u-card)}
.u-weergave button{display:grid;place-items:center;width:34px;height:28px;border:0;border-radius:999px;background:none;color:var(--u-muted);cursor:pointer;padding:0}
.u-weergave button[aria-pressed=true]{background:var(--u-pri);color:var(--u-pri-ink)}
.u-tegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.u-tegel{background:var(--u-card);border-radius:16px;padding:16px 18px;box-shadow:var(--u-schaduw);position:relative;overflow:hidden;display:flex;flex-direction:column;gap:6px;color:inherit;text-decoration:none}
.u-tegel>.u-st{align-self:flex-start}
/* 26. Geen gekleurde rand bovenop tegels en kaarten: alleen de schaduw */
.u-lijst{display:flex;flex-direction:column;background:var(--u-card);border-radius:16px;box-shadow:var(--u-schaduw);overflow:hidden}
.u-lijst>*{border-bottom:1px solid var(--u-line)}.u-lijst>*:last-child{border-bottom:0}
.u-regel{display:flex;align-items:center;gap:12px;padding:12px 16px;color:inherit;text-decoration:none}
/* Een overzicht met data-weergave="lijst" toont zijn tegels als regels */
[data-weergave=lijst] .u-tegels{display:flex;flex-direction:column;gap:0;background:var(--u-card);border-radius:16px;box-shadow:var(--u-schaduw);overflow:hidden}
[data-weergave=lijst] .u-tegels>*{border-radius:0;box-shadow:none;border-bottom:1px solid var(--u-line)}
[data-weergave=lijst] .u-tegels>*:last-child{border-bottom:0}
[data-weergave=lijst] .u-tegels>*::before{display:none}
[data-weergave=lijst] .u-tegel{flex-direction:row;align-items:center;flex-wrap:wrap;padding:10px 16px}
@media (max-width:640px){.u-weergave{display:none}[data-weergave=lijst] .u-tegels{display:grid;gap:14px;background:none;box-shadow:none}[data-weergave=lijst] .u-tegels>*{border-radius:16px;box-shadow:var(--u-schaduw)}}
.u-av{flex:none;width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#0B6B4F,#1F8A63);color:#fff;display:grid;place-items:center;font-weight:700}

/* 13. Zoeken en filteren */
.u-zoekrij{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.u-zoek{flex:1 1 240px;min-width:0;padding:10px 12px 10px 36px;border:1px solid var(--u-line);border-radius:10px;font:inherit;color:var(--u-ink);
  background:var(--u-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2353625B' stroke-width='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 11px center/16px}
.u-filters{display:flex;gap:6px;flex-wrap:wrap}
.u-filters button{border:1px solid var(--u-line);border-radius:999px;padding:5px 12px;background:var(--u-card);color:var(--u-muted);font:600 13px var(--u-letter);cursor:pointer}
.u-filters button[aria-pressed=true]{background:var(--u-ink);color:var(--u-bg);border-color:transparent}
.u-filters .u-aantal{margin-left:5px;opacity:.75}

/* 14. Statuslabels */
.u-st{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;background:var(--u-uit-bg);color:var(--u-uit)}
.u-st.ok{background:var(--u-ok-bg);color:var(--u-ok)}.u-st.plan{background:var(--u-plan-bg);color:var(--u-plan)}.u-st.let{background:var(--u-let-bg);color:var(--u-let)}.u-st.laat{background:var(--u-laat-bg);color:var(--u-laat)}

/* 9 en 10. Knoppen: hoofdknop eerst, effen groen; rest wit met rand; verwijderen rood */
.u-knop{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:8px 16px;border-radius:10px;border:1px solid var(--u-line);background:var(--u-card);color:var(--u-ink);font:600 14px var(--u-letter);cursor:pointer;text-decoration:none;white-space:nowrap}
.u-knop:hover{border-color:var(--u-pri)}
.u-knop.pri{background:var(--u-pri);color:var(--u-pri-ink);border-color:transparent}.u-knop.pri:hover{filter:brightness(1.08)}
.u-knop.rood{background:var(--u-bad);color:#fff;border-color:transparent}
.u-knop.klein{min-height:32px;padding:5px 12px;font-size:13px}
.u-knop:disabled{opacity:.6;cursor:default}
.u-knop svg{width:16px;height:16px;flex:none}
@media (max-width:640px){.u-knop{min-height:44px}}
.u-knoppen{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* 10. Knoppenbalk onderaan een formulier: opslaan links, doorklikken (Vorige, hoofdknop) rechtsonder */
.u-balk{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.u-balk .u-verder{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-left:auto}
@media (max-width:640px){.u-balk,.u-balk .u-verder{flex-direction:column;align-items:stretch;width:100%;margin-left:0}.u-balk .u-verder{order:9}.u-balk .u-knop.pri{order:9}}

/* 7. Uitkomst in het blok; 16. fout */
.u-ok{color:var(--u-pri);font-weight:600;font-size:14px}
.u-fout{color:var(--u-bad);font-weight:600;font-size:14px}
.u-foutblok{background:var(--u-laat-bg);color:var(--u-laat);border-radius:10px;padding:10px 12px;font-weight:600}
.u-infoblok{background:var(--u-ok-bg);color:var(--u-ok);border-radius:10px;padding:10px 12px;font-weight:600}

/* 8. Weet je het zeker? In het blok zelf */
.u-vraag{background:var(--u-laat-bg);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:10px;margin-top:10px}
.u-vraag p{margin:0;font-weight:600;color:var(--u-ink)}

/* 22. Bezig */
.u-bezig::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:u-draai .7s linear infinite;flex:none}
@keyframes u-draai{to{transform:rotate(360deg)}}
.u-skelet{display:flex;flex-direction:column;gap:10px}.u-skelet i{height:16px;border-radius:8px;background:linear-gradient(90deg,var(--u-soft),var(--u-bg),var(--u-soft));background-size:200% 100%;animation:u-golf 1.2s ease-in-out infinite}
.u-skelet i:nth-child(2){width:80%}.u-skelet i:nth-child(3){width:60%}
@keyframes u-golf{to{background-position:-200% 0}}

/* 15-17. Formulieren */
.u-veld{display:block;font-weight:600;font-size:14px}
.u-veld>input,.u-veld>select,.u-veld>textarea{display:block;margin-top:5px}.u-veld>.u-hint,.u-veld>.u-veldfout{display:block;margin-top:4px}
.u-veld input:not([type=checkbox]):not([type=radio]),.u-veld select,.u-veld textarea,.u-invoer{width:100%;min-height:40px;padding:9px 12px;border:1px solid var(--u-line);border-radius:10px;font:400 15px var(--u-letter);background:var(--u-veld);color:var(--u-ink)}
.u-veld input:focus,.u-veld select:focus,.u-veld textarea:focus,.u-invoer:focus{outline:2px solid var(--u-pri);outline-offset:0;border-color:transparent}
.u-opt{font-weight:400;color:var(--u-muted)}
.u-hint{font-weight:400;font-size:13px;color:var(--u-muted)}
.u-veld.fout input,.u-veld.fout select,.u-veld.fout textarea{border-color:var(--u-bad);box-shadow:0 0 0 3px color-mix(in srgb,var(--u-bad) 15%,transparent)}
.u-veld .u-veldfout{font-weight:600;font-size:13px;color:var(--u-bad)}
.u-velden{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px 16px}
.u-vink{display:flex;align-items:center;gap:8px;font-weight:500}.u-vink input{accent-color:var(--u-pri);width:18px;height:18px}

/* 18. Schakelaar die meteen werkt */
.u-schakel{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--u-line);font-weight:600}
.u-schakel small{display:block;font-weight:400;color:var(--u-muted)}
.u-schakel input{appearance:none;-webkit-appearance:none;flex:none;width:46px;height:26px;border-radius:999px;background:var(--u-line);position:relative;cursor:pointer;margin:0;transition:background .15s}
.u-schakel input::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s}
.u-schakel input:checked{background:var(--u-pri)}.u-schakel input:checked::after{left:23px}
.u-schakel input:focus-visible{outline:2px solid var(--u-pri);outline-offset:2px}

/* 20. Meer laden */
.u-meer{display:flex;justify-content:center;padding:12px}

/* Lege staat en uitleg (al besloten) */
.u-leeg{color:var(--u-muted);margin:8px 0 0}
details.u-uitleg>summary{cursor:pointer;color:var(--u-pri);font-weight:600;font-size:14px;width:max-content}
details.u-uitleg[open]>summary{margin-bottom:6px}

/* Tabel (als lijst met kolommen nodig is); op de telefoon kaartjes */
.u-tabel{width:100%;border-collapse:collapse;background:var(--u-card);border-radius:16px;overflow:hidden;box-shadow:var(--u-schaduw);font-size:14px}
.u-tabel th,.u-tabel td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--u-line);vertical-align:top}
.u-tabel th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--u-muted);font-weight:600}
.u-tabel tr:last-child td{border-bottom:0}
@media (max-width:640px){.u-tabel thead{display:none}.u-tabel,.u-tabel tbody,.u-tabel tr,.u-tabel td{display:block;width:100%}.u-tabel tr{border-bottom:1px solid var(--u-line);padding:8px 4px}.u-tabel td{border:0;padding:3px 12px}
  .u-tabel td[data-k]::before{content:attr(data-k) ": ";color:var(--u-muted);font-size:12px}}

.u-muted{color:var(--u-muted)}.u-klein{font-size:13px}

/* 24. Inloggen, toegangscode en andere korte schermen zonder menu: licht, rustig, één kaart in het midden.
   Bovenaan het merk van de app, daaronder de kaart (eventueel met het logo van de klant), onderaan één regel. Geen donkere band. */
.u-inlog-pagina{min-height:100vh;margin:0;display:flex;flex-direction:column;background:radial-gradient(900px 420px at 50% -160px,color-mix(in srgb,var(--u-sig) 60%,transparent),transparent 72%),var(--u-bg);color:var(--u-ink);font:15px/1.5 var(--u-letter);-webkit-font-smoothing:antialiased;letter-spacing:-.01em}
.u-inlog{flex:1;width:100%;max-width:420px;margin:0 auto;padding:clamp(32px,9vh,88px) 16px 24px;display:flex;flex-direction:column;gap:22px}
.u-inlog-merk{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--u-ink);text-decoration:none;font-weight:700;font-size:19px;letter-spacing:-.02em}
.u-inlog-merk img{height:30px;width:auto;display:block}.u-inlog-merk .u-icoon{height:34px;width:34px;border-radius:9px}
.u-inlog-kaart{background:var(--u-card);border-radius:20px;padding:28px;box-shadow:0 1px 2px rgba(16,34,28,.05),0 14px 40px rgba(16,34,28,.10)}
.u-inlog-kaart .u-inlog-logo{max-height:52px;max-width:200px;display:block;margin:0 0 18px}
.u-inlog-kaart h1{font-size:24px;line-height:1.25;margin:0;letter-spacing:-.025em}
.u-inlog-kaart .u-inlog-sub{color:var(--u-muted);margin:4px 0 0}
.u-inlog-kaart p{margin:12px 0 0}.u-inlog-kaart .muted{color:var(--u-muted)}
.u-inlog-kaart label{display:block;font-weight:600;font-size:14px;margin:18px 0 6px}
.u-inlog-kaart input:not([type=hidden],[type=checkbox],[type=radio]){display:block;width:100%;min-height:46px;padding:10px 14px;border:1px solid var(--u-line);border-radius:10px;font:inherit;background:var(--u-veld);color:var(--u-ink)}
.u-inlog-kaart input:focus-visible{outline:2px solid var(--u-pri);outline-offset:1px;background:var(--u-card)}
.u-inlog-kaart :is(button,.btn):not(.u-x){display:flex;align-items:center;justify-content:center;width:100%;min-height:46px;margin:20px 0 0;padding:10px 16px;border-radius:10px;border:0;background:var(--u-pri);color:var(--u-pri-ink);font:600 15px var(--u-letter);cursor:pointer;text-decoration:none}
.u-inlog-kaart :is(button,.btn):not(.u-x):hover{filter:brightness(1.08)}
.u-inlog-kaart .btn.ms{background:#2F2F2F;color:#fff}
.u-inlog-kaart :is(.btn,button).second{background:var(--u-card);color:var(--u-ink);border:1px solid var(--u-line)}
.u-inlog-kaart .or{text-align:center;color:var(--u-muted);font-size:13px;margin:18px 0 0}
.u-inlog-kaart .err{background:var(--u-laat-bg);color:var(--u-laat);border-radius:10px;padding:10px 12px;font-weight:600}
.u-inlog-kaart .testnote{background:var(--u-let-bg);color:var(--u-let);border-radius:10px;padding:10px 12px;font-size:14px}
.u-inlog-kaart .code{letter-spacing:.4em;font-size:22px;text-align:center;font-family:ui-monospace,monospace}
.u-inlog-voet{text-align:center;color:var(--u-muted);font-size:12px;margin:auto 0 0;padding-top:8px}
@media (max-width:480px){.u-inlog-kaart{padding:22px 18px}}
/* 25. Secties in een opengeklapte kaart: klein kopje, dunne lijn ertussen; knop van de sectie rechts in de kop (u-kop) */
.u-sectie{border-top:1px solid var(--u-line);padding-top:16px;margin-top:16px}form>.u-sectie:first-child{border-top:0;padding-top:4px;margin-top:4px}
.u-sectie>h3,.u-sectie>.u-kop h3{font-size:15px;font-weight:700;margin:0 0 10px;display:flex;align-items:baseline;gap:10px}.u-sectie>.u-kop{margin-bottom:10px}.u-sectie>.u-kop h3{margin:0}
.u-sectie .u-velden{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.u-sectie>.u-hint{margin:8px 0 0}
.u-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px 16px}
/* 29. Keuzes in een formulier: vinkjes in een raster (geen pilletjes), gekozen vet; telefoon één per regel van 44 px.
   Kopje van een groep velden klein met een dunne lijn erboven (u-groep). */
.u-keuzes{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2px 18px;align-items:start}
.u-keuzes .u-vink{align-items:flex-start;gap:10px;padding:7px 0;font-weight:400;line-height:1.35;cursor:pointer}.u-keuzes .u-vink input{flex:none;margin:0}
.u-keuzes .u-vink:has(input:checked){font-weight:600}
.u-groep{border:0;border-top:1px solid var(--u-line);padding:14px 0 0;margin:18px 0 0;min-width:0}
.u-groep>legend,.u-groep>h3{float:left;width:100%;padding:0;margin:0 0 8px;font-size:15px;font-weight:700}.u-groep>legend~*{clear:both}
@media (max-width:640px){.u-keuzes{grid-template-columns:1fr;gap:0}.u-keuzes .u-vink{min-height:44px;align-items:center;padding:8px 0;border-bottom:1px solid var(--u-line)}.u-keuzes .u-vink:last-child{border-bottom:0}}
/* 30. Mijn modules in het ☰-menu */
.u-modules{display:flex;flex-direction:column;border-top:1px solid var(--u-line);margin-top:4px;padding-top:4px}.u-modules-kop{padding:6px 10px 2px;font-size:12px;font-weight:600;color:var(--u-muted)}
/* 31. Privacy en voorwaarden onderaan het menu */
.u-menu-voet{display:flex;gap:6px;justify-content:center;align-items:center;padding:8px 10px 2px;font-size:12px;color:var(--u-muted)}.u-menu .u-menu-voet a,.upop .u-menu-voet a,.u-menu-voet a{display:inline;width:auto;padding:0;color:var(--u-muted);text-decoration:underline}
/* 32. Stappenblok: één regel per stap, de knop van de huidige stap rechts op die regel; op de telefoon eronder */
.u-stappen{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.u-stap{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;background:var(--u-card);border:1px solid var(--u-line);min-height:56px}
.u-stap .u-stapnr{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px;border:2px solid var(--u-line);color:var(--u-muted)}
.u-stap .u-stapw{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}.u-stap .u-stapw b{font-weight:600}.u-stap .u-stapw small{color:var(--u-muted);font-size:13px}
.u-stap .u-stapk{flex:none;display:flex;gap:8px;align-items:center;margin-left:auto}
.u-stap.klaar .u-stapnr{background:var(--u-ok);border-color:var(--u-ok);color:#fff}
.u-stap.nu{border-color:var(--u-pri);box-shadow:0 0 0 1px var(--u-pri)}.u-stap.nu .u-stapnr{background:var(--u-pri);border-color:var(--u-pri);color:var(--u-pri-ink)}
.u-stap.later{opacity:.55}
@media (max-width:640px){.u-stap{flex-wrap:wrap}.u-stap .u-stapk{flex-basis:100%;margin-left:0;flex-direction:column;align-items:stretch}}
/* 33. Kop van een item: onder de huidige fase in de voortgangsbalk klein "stap x van n" */
.u-deelstap{display:block;font-size:12px;font-weight:600;color:var(--u-sig);margin-top:2px}
/* 34 Samen bevestigen: wisselende QR-code en code op het scherm van de één, de ander scant met zijn eigen telefoon */
.u-samen{display:flex;gap:20px;align-items:center;flex-wrap:wrap;background:var(--u-card);border:1px solid var(--u-line);border-radius:12px;padding:16px}
.u-samen-qr{width:220px;height:220px;flex:none;background:#fff;border-radius:12px;padding:10px;display:grid;place-items:center;border:1px solid var(--u-line)}
.u-samen-qr svg{width:100%;height:100%;display:block}
.u-samen-w{flex:1 1 220px;display:flex;flex-direction:column;gap:6px}
.u-samen-code{font:700 34px/1.1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:6px;color:var(--u-ink)}
@media (max-width:640px){.u-samen{justify-content:center}.u-samen-qr{width:200px;height:200px}}
/* 36. Demobalk: in een demo één lichtgroene regel onder de kopbalk. Links "Demo" en de rol (één keuzelijst), dan "Probeer dit"
   met de opdrachtjes (klapt open onder de balk), rechts de hoofdknop (bijv. Plan een gesprek). Op de telefoon blijft het één regel: lange woorden in <span class="u-lang">,
   de korte vorm in <span class="u-kort">.
   <div class="u-demo"><div class="u-w u-demo-w"><span class="u-demo-label">Demo</span><label class="u-demo-rol"><span>Je bent</span>
   <select data-u-demo-rol><option value="<url>">Aanvrager</option>…</select></label><button type="button" class="u-demo-knop" data-u-demo-open
   aria-controls="uProbeer" aria-expanded="false">Probeer dit</button><span class="u-sp"></span><a class="u-demo-knop pri" href="…">Plan een gesprek</a></div>
   <div class="u-probeer" id="uProbeer" hidden><div class="u-w"><ol class="u-probeer-lijst"><li class="klaar">…</li></ol><p class="u-probeer-voet">…</p></div></div></div> */
.u-demo{background:#E3F5EC;color:#0B4A37;border-bottom:1px solid #BFE6D2;font:500 14px/1.3 var(--u-letter)}
.u-demo-w{display:flex;align-items:center;gap:10px;min-height:44px;padding-block:6px;white-space:nowrap}
.u-demo-label{flex:none;background:#0B6B4F;color:#fff;border-radius:6px;padding:2px 8px;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.u-demo-rol{display:flex;align-items:center;gap:6px;min-width:0;font-weight:500}
.u-demo-rol select{min-height:32px;max-width:220px;border:1px solid #9FD5BC;border-radius:8px;background:#fff;color:#0B4A37;font:600 14px var(--u-letter);padding:3px 8px;cursor:pointer}
.u-demo-knop{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 12px;border-radius:8px;border:1px solid #9FD5BC;background:#fff;color:#0B4A37;font:600 13px var(--u-letter);text-decoration:none;cursor:pointer}
.u-demo-knop:hover{border-color:#0B6B4F}.u-demo-knop.pri{background:#0B6B4F;border-color:transparent;color:#fff}
.u-demo-knop .u-aantal{font-size:12px;opacity:.75}
.u-demo .u-sp{flex:1}
.u-probeer{border-top:1px solid #BFE6D2;padding-block:10px 12px}
.u-probeer-lijst{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:6px 18px}
.u-probeer-lijst li{display:flex;gap:8px;align-items:flex-start;white-space:normal;line-height:1.35}
.u-probeer-lijst li::before{content:"";flex:none;width:16px;height:16px;margin-top:1px;border-radius:50%;border:2px solid #7FBFA2}
.u-probeer-lijst a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.u-probeer-lijst li.klaar{color:#3E6B59}.u-probeer-lijst li.klaar::before{border-color:#0B6B4F;background:#0B6B4F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.u-probeer-voet{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;white-space:normal}.u-probeer-voet a,.u-probeer-voet button{color:#0B4A37;font:600 13px var(--u-letter);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}
.u-demo .u-kort{display:none}
@media (max-width:640px){.u-demo-w{gap:6px}.u-demo-rol>span,.u-demo .u-lang{display:none}.u-demo .u-kort{display:inline}.u-demo-rol{flex:none}.u-demo-rol select{width:118px}.u-demo-knop{padding:4px 9px}.u-demo-label{padding:2px 6px}}
:root[data-thema=donker] .u-demo{background:#12302A;color:#CDEBDD;border-color:#1E4A3E}
:root[data-thema=donker] .u-demo :is(select,.u-demo-knop:not(.pri)){background:#16201C;color:#CDEBDD;border-color:#2E5A4C}
:root[data-thema=donker] .u-probeer-voet :is(a,button){color:#CDEBDD}
@media (prefers-color-scheme:dark){:root:not([data-thema=licht]) .u-demo{background:#12302A;color:#CDEBDD;border-color:#1E4A3E}
  :root:not([data-thema=licht]) .u-demo :is(select,.u-demo-knop:not(.pri)){background:#16201C;color:#CDEBDD;border-color:#2E5A4C}
  :root:not([data-thema=licht]) .u-probeer-voet :is(a,button){color:#CDEBDD}}
/* 36. Welkomstscherm van een demo (zelfde opmaak als 24): kies wie je bent, een raster van keuzes in de kaart */
.u-inlog.breed{max-width:640px}
.u-rollen{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin:18px 0 0}
.u-inlog-kaart a.u-rol{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--u-line);border-radius:12px;color:var(--u-ink);text-decoration:none;background:var(--u-card)}
.u-inlog-kaart a.u-rol:hover{border-color:var(--u-pri);box-shadow:0 0 0 1px var(--u-pri)}
.u-rol b{font-weight:700}.u-rol small{color:var(--u-muted);font-size:13px;line-height:1.35}