/* Kleedgeld. Mobile first, thema per kind via data-theme op . */ :root{ --bg:#f4f1ea;--card:#fffdf9;--ink:#211f1c;--muted:#6f6a61;--line:#e3ddd0;--line2:#d3ccbc; --ok:#2f7a4d;--okS:#e4f1e8;--warn:#a8600a;--warnS:#fbeedb;--err:#b3261e;--errS:#f9e6e3;--on:#fff;--onOk:#fff; --c1:#24567a;--c2:#9cc2dc;--soft:#e6eef4; --font:"Figtree",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;--tabs-h:64px; } [data-theme="k1"]{--c1:#24567a;--c2:#9cc2dc;--soft:#e6eef4} [data-theme="k2"]{--c1:#c2531b;--c2:#f0b48a;--soft:#f9ebe0} [data-theme="k3"]{--c1:#3f7a3a;--c2:#a9d68a;--soft:#e8f2e3} [data-theme="k4"]{--c1:#6b4aa8;--c2:#c9aef0;--soft:#efe9f7} [data-theme="parent"]{--c1:#2b2a27;--c2:#9a9689;--soft:#ecebe6} @media (prefers-color-scheme:dark){ :root{--bg:#1b1917;--card:#242220;--ink:#f1ede4;--muted:#a39d92;--line:#35322d;--line2:#45413a;--ok:#6cc08f;--okS:#1d3527;--warn:#e2a552;--warnS:#3a2a12;--err:#ef8b80;--errS:#3e1f1b;--on:#151412;--onOk:#10231a} [data-theme="k1"]{--c1:#8fbbdc;--c2:#3f6f92;--soft:#1f2e3a} [data-theme="k2"]{--c1:#f0a06a;--c2:#9a4a1e;--soft:#3a2618} [data-theme="k3"]{--c1:#9fd07f;--c2:#4f7f45;--soft:#22301d} [data-theme="k4"]{--c1:#c3a7ee;--c2:#6b4aa8;--soft:#2b2338} [data-theme="parent"]{--c1:#e8e3d8;--c2:#6f6a61;--soft:#2c2a27} img.pic{filter:brightness(.9)} } /* Toon-varianten voor pillen en meldingen */ .tone-neutral{--tb:var(--soft);--tf:var(--c1);--tw:500} .tone-ok{--tb:var(--okS);--tf:var(--ok);--tw:800} .tone-warn{--tb:var(--warnS);--tf:var(--warn);--tw:800} .tone-err{--tb:var(--errS);--tf:var(--err);--tw:800} .tone-muted{--tb:var(--bg);--tf:var(--muted);--tw:500} /* Kindkleuren op een element buiten het paginathema (ouder ziet kaartjes per kind) */ .k1{--c1:#24567a;--c2:#9cc2dc;--soft:#e6eef4}.k2{--c1:#c2531b;--c2:#f0b48a;--soft:#f9ebe0}.k3{--c1:#3f7a3a;--c2:#a9d68a;--soft:#e8f2e3}.k4{--c1:#6b4aa8;--c2:#c9aef0;--soft:#efe9f7} @media (prefers-color-scheme:dark){.k1{--c1:#8fbbdc;--c2:#3f6f92;--soft:#1f2e3a}.k2{--c1:#f0a06a;--c2:#9a4a1e;--soft:#3a2618}.k3{--c1:#9fd07f;--c2:#4f7f45;--soft:#22301d}.k4{--c1:#c3a7ee;--c2:#6b4aa8;--soft:#2b2338}} *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;font:16px/1.45 var(--font);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;padding-bottom:env(safe-area-inset-bottom)} body.has-tabs main{padding-bottom:calc(var(--tabs-h) + 40px + env(safe-area-inset-bottom))} a{color:var(--c1);text-underline-offset:3px} h1{margin:4px 0 0;font-size:28px;font-weight:800;letter-spacing:-.025em;line-height:1.1} h1.xl{font-size:32px} h2{display:flex;align-items:center;gap:8px;margin:4px 0 0;font-size:19px;font-weight:800;letter-spacing:-.01em} h2 .ic{color:var(--c1)} h3{margin:6px 0 0;font-size:15px;font-weight:800;color:var(--muted)} p{margin:0} b{font-weight:800} .ic{width:20px;height:20px;flex:none;display:inline-block;vertical-align:-4px} .ic.lg{width:26px;height:26px}.ic.xl{width:44px;height:44px}.ic.md{width:32px;height:32px}.ic.sm{width:15px;height:15px}.ic.xs{width:11px;height:11px}.ic.s18{width:18px;height:18px}.ic.s24{width:24px;height:24px} .muted{color:var(--muted)}.small{font-size:13px}.tiny{font-size:12px}.err{color:var(--err)}.okc{color:var(--ok)}.warnc{color:var(--warn)} .sub{font-size:14px;color:var(--muted)} .stack{display:flex;flex-direction:column;gap:14px} .stack-s{display:flex;flex-direction:column;gap:10px} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .between{display:flex;justify-content:space-between;align-items:center;gap:8px} .vh{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none} /* Kop */ header.top{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;height:calc(52px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 16px 0;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px)} .brand{display:flex;align-items:center;gap:8px;font-weight:800;text-decoration:none;color:var(--ink)} .brand .ic{color:var(--c1)} .brand .rolepill{font-size:12px;font-weight:800;padding:2px 8px;border-radius:999px;background:var(--soft);color:var(--muted)} .top-right a{color:var(--muted);display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-size:14px;font-weight:500;padding:8px 0} main{max-width:640px;margin:0 auto;padding:6px 16px 32px;display:flex;flex-direction:column;gap:16px} /* Kaarten */ .card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:14px;display:flex;flex-direction:column;gap:12px} .card.pad16{padding:16px} .card.soft{background:var(--soft);border-color:transparent} .card.warn{background:var(--warnS)} .card.block{border:1.5px solid var(--err);background:var(--errS);padding:0;gap:0;overflow:hidden} .block .bh{display:flex;gap:12px;align-items:center;padding:16px 16px 10px;color:var(--err)} .block .bh .lockbox{width:44px;height:44px;border-radius:14px;background:var(--card);display:grid;place-items:center;flex:none} .block .bh b{font-size:18px;line-height:1.2;display:block} .block .bh span{font-size:13px} .block .br{display:flex;gap:10px;padding:12px 16px;border-top:1px solid var(--line);font-size:15px;color:var(--ink)} .block .br .ic{color:var(--err);margin-top:2px;width:18px;height:18px} .block .bf{display:flex;gap:8px;align-items:center;padding:12px 16px;background:var(--card);color:var(--muted);font-size:14px} .block .bf .ic{color:var(--ok)} /* Held met ring */ .hero{border-radius:24px;padding:18px;background:var(--soft);display:flex;flex-direction:column;gap:14px} .hero .who{display:flex;align-items:center;gap:12px} .hero .who h1{margin:0} .hero .stats{display:flex;align-items:center;gap:16px} .legend{display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--muted)} .legend span{display:flex;align-items:center;gap:6px} .legend i{width:9px;height:9px;border-radius:50%;background:var(--c1);flex:none} .legend i.res{background:var(--c2)}.legend i.miss{background:var(--err)} .legend .miss-t{color:var(--err);font-weight:800} .avatar{position:relative;display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--c1);color:var(--on);font-weight:800;font-size:1.3rem;flex:none;outline:3px solid var(--c1);outline-offset:2px;overflow:hidden} .avatar::before{content:attr(data-initial)} .avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .avatar.lg{width:88px;height:88px;font-size:2.2rem;outline-offset:3px} .avatar.sm{width:32px;height:32px;font-size:1rem;outline-width:2px;outline-offset:1px} .ring{position:relative;flex:none} .ring svg{display:block;width:100%;height:100%} .ring-text{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1.05} .ring-text b{font-size:19px;letter-spacing:-.02em}.ring-text span{font-size:11px;color:var(--muted)} .ring.s72 .ring-text b{font-size:15px}.ring.s52 .ring-text b{font-size:13px} /* Pillen en meldingen */ .pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 7px;border-radius:999px;font-size:13px;background:var(--tb,var(--soft));color:var(--tf,var(--c1));font-weight:var(--tw,800);width:max-content;max-width:100%} .pill.sm{font-size:12px;padding:3px 9px} .pill .ic{width:15px;height:15px} .kidpill{display:inline-flex;font-size:12px;font-weight:800;padding:2px 9px;border-radius:999px;background:var(--soft);color:var(--c1);width:max-content} .count{margin-left:auto;font-size:13px;font-weight:800;padding:2px 10px;border-radius:999px;background:var(--soft);color:var(--muted)} .rem{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:800;padding:2px 7px;border-radius:999px;background:var(--errS);color:var(--err)} .flash{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:14px;font-weight:800;font-size:15px;background:var(--tb);color:var(--tf)} .flash .ic{flex:none} /* Knoppen en velden */ button,.btn{font:inherit;cursor:pointer} .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;border-radius:14px;border:none;background:var(--c1);color:var(--on);font-size:17px;font-weight:800;text-decoration:none;padding:0 14px} .btn.ok{background:var(--ok);color:var(--onOk)} .btn.danger{background:var(--err);color:var(--onOk)} .btn.outline{background:var(--card);color:var(--ink);border:1.5px solid var(--line2);font-size:15px} .btn.md{min-height:48px;font-size:16px;border-radius:14px} .btn.sm{min-height:44px;font-size:14px;border-radius:12px;padding:0 12px} .btn.xs{min-height:40px;font-size:13px;border-radius:10px;padding:0 10px} .btn.auto{width:auto} .link{border:none;background:none;color:var(--muted);font-size:13px;text-decoration:underline;text-underline-offset:2px;padding:6px 0;cursor:pointer;font-weight:500;width:auto} .link.big{font-size:15px;padding:6px} input,textarea,select{font:inherit;min-height:48px;border-radius:12px;border:1px solid var(--line2);background:var(--bg);color:var(--ink);font-size:16px;padding:10px 12px;width:100%} input.sm,select.sm{min-height:44px;padding:8px 12px} textarea{resize:none} input::placeholder,textarea::placeholder{color:var(--muted);opacity:.85} input:focus,textarea:focus,select:focus{outline:2px solid var(--c1);outline-offset:1px} label.f{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--muted);font-weight:500} label.f.xs{font-size:12px;gap:4px} .hint{font-size:12px;color:var(--muted)} .dashed{width:100%;min-height:52px;border-radius:14px;border:1.5px dashed var(--line2);color:var(--muted);font-size:15px;display:flex;align-items:center;justify-content:center;text-align:center;padding:8px} form{margin:0} /* Keuzechips (radio's) */ .chips{display:grid;gap:6px} .chips.c3{grid-template-columns:repeat(3,1fr)} .chips.c4{grid-template-columns:repeat(4,1fr)} .chip{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:44px;padding:10px 4px 8px;border-radius:14px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font-size:12px;font-weight:800;cursor:pointer;text-align:center} .chip.row{flex-direction:row;padding:0 6px;border-radius:12px;font-size:14px;border-color:var(--line2)} .chip input{position:absolute;opacity:0;width:0;height:0} .chip .ic{width:24px;height:24px;color:var(--muted)} .chip:has(input:checked){border-color:var(--c1);background:var(--soft);color:var(--c1)} .chip:has(input:checked) .ic{color:var(--c1)} .chip.fitc:has(input:checked){border-color:var(--ok);background:var(--okS);color:var(--ok)} .chip:has(input:focus-visible){outline:2px solid var(--c1);outline-offset:2px} /* Houden pas na pasvorm */ form.keep .keepbtn{display:none} form.keep:has(input[name=fit]:checked) .keepbtn{display:flex} form.keep:has(input[name=fit]:checked) .dashed{display:none} /* Productplaatje: foto of icoon met kleurstip */ .ph{position:relative;border-radius:14px;background:var(--soft);color:var(--c1);display:grid;place-items:center;overflow:hidden;flex:none;width:96px;height:120px} .ph::before{content:"";position:absolute;inset:8px;border:1.5px dashed var(--c2);border-radius:10px;opacity:.7;pointer-events:none} .ph.has-pic::before{display:none} .ph .sw{position:absolute;left:10px;bottom:10px;width:14px;height:14px;border-radius:50%;border:1.5px solid var(--card);background:var(--swc,transparent)} .ph .ic{width:44px;height:44px} .ph img.pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:zoom-in;background:#fff} .ph.sm{width:72px;height:90px;border-radius:12px}.ph.sm .ic{width:32px;height:32px}.ph.sm::before{inset:6px;border-radius:8px}.ph.sm .sw{left:8px;bottom:8px;width:11px;height:11px} .ph.xs{width:52px;height:64px;border-radius:10px}.ph.xs .ic{width:24px;height:24px}.ph.xs::before{display:none}.ph.xs .sw{display:none} .ph.sq{width:100%;height:auto;aspect-ratio:1/1;border-radius:0}.ph.sq::before{inset:8px;border-radius:12px}.ph.sq .sw{left:12px;bottom:12px;width:12px;height:12px} /* Actiekaart en tegels */ .action{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px} .action.sm{grid-template-columns:72px minmax(0,1fr);gap:12px} .action.xs{grid-template-columns:52px minmax(0,1fr);gap:12px;align-items:flex-start} .action .ab{display:flex;flex-direction:column;gap:6px;min-width:0} .tt{font-weight:800;line-height:1.25} .tt a{color:inherit;text-decoration:none} .meta{font-size:13px;color:var(--muted)} .meta b{color:var(--ink)} .note{font-size:15px;padding:10px 12px;border-radius:12px;background:var(--bg)} .tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .tile{background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column} .tile .tb{padding:10px 12px 12px;display:flex;flex-direction:column;gap:5px;flex:1} .tile .tt{font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .tile .meta{font-size:12px} .tile form:has(.btn){margin-top:auto} .kpi{background:var(--soft);border-radius:14px;padding:12px 10px} .kpi b{display:block;font-size:20px;letter-spacing:-.01em}.kpi span{font-size:12px;color:var(--muted)} .kpi.tone-err{background:var(--tb)}.kpi.tone-err b{color:var(--tf)} .empty{text-align:center;padding:30px 16px;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:6px} .empty b{color:var(--ink);font-size:18px} .illu{width:180px;color:var(--c1)}.illu svg{width:100%;display:block} /* Login */ .login{display:flex;flex-direction:column;align-items:center;gap:22px;padding-top:34px} .login .brandline{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px;color:var(--muted)} .choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%} .choice{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 10px 16px;border-radius:22px;background:var(--card);border:2px solid var(--line);color:var(--ink);font-size:18px;font-weight:800;cursor:pointer} .choice input{position:absolute;opacity:0;width:0;height:0} .choice .avatar{outline-color:var(--line)} .choice:has(input:checked){border-color:var(--c1);background:var(--soft)} .choice:has(input:checked) .avatar{outline-color:var(--c1)} .pindots{display:flex;gap:14px;padding:6px 0} .pindots i{display:block;width:16px;height:16px;border-radius:50%;border:2px solid var(--line2);background:transparent} .pindots i.on{border-color:var(--c1);background:var(--c1)} .keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;max-width:300px} .keypad button{height:56px;border-radius:16px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:22px;font-weight:800} .keypad button.back{border:none;background:transparent;color:var(--muted);display:grid;place-items:center} .lockbox{width:64px;height:64px;border-radius:20px;background:var(--soft);color:var(--c1);display:grid;place-items:center} /* Maten */ .sizecards{display:grid;grid-template-columns:1fr 1fr;gap:10px} .sizecard{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:20px;background:var(--card);border:1.5px solid var(--line2)} .sizecard.old{background:var(--warnS);border-style:dashed;border-color:var(--warn)} .sizecard .hd{display:flex;align-items:center;justify-content:space-between;color:var(--c1)} .sizecard .hd span{font-size:12px;color:var(--muted)} .sizecard .lb{font-size:14px;font-weight:800} .sizecard input{font-size:22px;font-weight:800;text-align:center;padding:6px;background:var(--card);letter-spacing:-.01em} .sizecard .old-t{font-size:12px;color:var(--warn);font-weight:800} .sizerow{display:grid;grid-template-columns:22px minmax(0,1fr) 84px 64px;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line)} .sizerow .ic{color:var(--c1);width:22px;height:22px} .sizerow .lb{display:flex;flex-direction:column;line-height:1.2} .sizerow .lb span:first-child{font-size:15px;font-weight:800} .sizerow .lb span:last-child{font-size:12px;color:var(--muted)} .sizerow.old .lb span:last-child{color:var(--warn)} .sizerow input{min-height:40px;border-radius:10px;font-weight:800;text-align:center;padding:4px} .sizerow.old input{border-color:var(--warn)} /* Ouder */ .kidsum{width:100%;text-align:left;display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:20px;background:var(--soft);border:none;color:var(--ink);text-decoration:none} .kidsum .hd{display:flex;align-items:center;gap:8px} .kidsum .hd b{font-size:16px} .kidsum .hd .rem{margin-left:auto} .kidsum .st{display:flex;align-items:center;gap:10px} .kidsum .st div{display:flex;flex-direction:column;line-height:1.2} .kidsum .st b{font-size:17px}.kidsum .st span{font-size:12px;color:var(--muted)} .kidcard{background:var(--card);border:1px solid var(--line);border-radius:24px;overflow:hidden} .kidcard .hd{background:var(--soft);padding:16px;display:flex;align-items:center;gap:14px} .kidcard .hd .who{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .kidcard .hd .who b.name{font-size:20px} .kidcard .reason{padding:12px 16px;font-size:14px;color:var(--err);background:var(--errS);border-top:1px solid var(--line)} .kidcard .rows{padding:6px 16px 4px} .kidcard details summary{list-style:none;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;color:var(--c1);font-size:15px;font-weight:800;cursor:pointer} .kidcard details summary::-webkit-details-marker{display:none} .kidcard details summary .ic{transition:transform .15s} .kidcard details[open] summary .ic{transform:rotate(180deg)} .kidcard .manage{padding:0 16px 16px;display:flex;flex-direction:column;gap:10px} .linkbox{padding:12px;border-radius:14px;background:var(--soft);font-size:13px;display:flex;flex-direction:column;gap:2px} .linkbox b{color:var(--c1);word-break:break-all} details.inline summary{list-style:none;cursor:pointer} details.inline summary::-webkit-details-marker{display:none} details.inline[open] summary{display:none} .logcard{background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden} .logcard summary{list-style:none;display:flex;align-items:center;gap:8px;padding:14px 16px;font-size:15px;font-weight:800;cursor:pointer} .logcard summary::-webkit-details-marker{display:none} .logcard summary .n{font-size:13px;color:var(--muted);font-weight:500} .logcard summary .ic.chev{margin-left:auto;color:var(--muted)} .logcard[open] summary .ic.chev{transform:rotate(180deg)} .logrow{display:grid;grid-template-columns:70px minmax(0,1fr);gap:8px;padding:8px 16px;border-top:1px solid var(--line);font-size:13px} .logrow span:first-child{color:var(--muted);font-variant-numeric:tabular-nums} .shoprow{display:grid;grid-template-columns:minmax(0,1fr) 84px;gap:6px} .shoprow input{min-height:42px;padding:8px 10px;font-size:15px} .shoprow.wide{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)} .rowinput{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px} .rowinput3{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:6px} /* Onderbalk en zweefknop */ .tabs{position:fixed;left:0;right:0;bottom:0;height:calc(var(--tabs-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);display:grid;background:var(--card);border-top:1px solid var(--line);z-index:5} .tabs.n4{grid-template-columns:repeat(4,1fr)}.tabs.n3{grid-template-columns:repeat(3,1fr)} .tabs a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;color:var(--muted);font-size:11px;font-weight:800} .tabs a .ic{width:24px;height:24px} .tabs a.on{color:var(--c1)} .tabs .badge{position:absolute;top:8px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--err);color:var(--onOk);font-size:11px;display:grid;place-items:center} @media (min-width:900px){.tabs{max-width:640px;margin:0 auto;border-radius:16px 16px 0 0;border:1px solid var(--line);border-bottom:none}} .fab{position:fixed;right:18px;bottom:calc(var(--tabs-h) + 18px + env(safe-area-inset-bottom));width:60px;height:60px;border-radius:20px;background:var(--c1);color:var(--on);display:grid;place-items:center;box-shadow:0 10px 28px rgba(0,0,0,.25);z-index:4} .fab .ic{width:28px;height:28px} @media (min-width:900px){.fab{right:calc(50% - 320px + 18px)}} /* Foto vergroten */ .zoomdlg{border:none;border-radius:22px;padding:0;background:var(--card);color:var(--ink);max-width:min(94vw,720px);width:auto;box-shadow:0 12px 32px rgba(0,0,0,.3)} .zoomdlg::backdrop{background:rgba(20,18,15,.72);backdrop-filter:blur(4px)} .zoomdlg img{display:block;max-width:94vw;max-height:70vh;width:auto;height:auto;margin:0 auto;background:#fff;padding:12px} .zoomcap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line);flex-wrap:wrap} .zoomcap a{font-weight:800;white-space:nowrap} .zoomclose{position:absolute;top:8px;right:8px;width:40px;height:40px;padding:0;border-radius:50%;background:var(--card);color:var(--ink);border:1px solid var(--line);display:grid;place-items:center} /* Kleedgeld: uitloggen is een POST-formulier in plaats van een link */ .top-right{display:flex;align-items:center;gap:12px} .top-right form.logout{margin:0} .top-right form.logout button{border:none;background:none;font:inherit;color:var(--muted);display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;padding:8px 0;cursor:pointer}