Overzicht \u2022 Start<\/title>\n <style>\n :root{\n --radius:18px;\n --bg:#0b1020; --card:#121936; --muted:#8fa3c8; --text:#e8eefc;\n --accent:#5b8cff; --accent-2:#76e0a5; --card-line:#243466;\n --shadow-panel:0 10px 30px rgba(0,0,0,.08);\n --shadow-table:0 16px 40px rgba(10,20,60,.10)\n }\n [data-theme=\"light\"]{\n --bg:#f7f8fb; --card:#ffffff; --muted:#64748b; --text:#0f172a;\n --accent:#3b82f6; --accent-2:#16a34a; --card-line:#e6ebf4;\n --shadow-panel:0 2px 6px rgba(0,0,0,.04);\n --shadow-table:0 3px 8px rgba(0,0,0,.05)\n }\n\n html,body{margin:0}\n body{\n background:var(--bg);\n font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, \"Noto Sans\", \"Helvetica Neue\", \"Apple Color Emoji\", \"Segoe UI Emoji\";\n color:var(--text);\n transition: background-color .25s ease, color .25s ease\n }\n\n .wrap{max-width:1100px; margin:40px auto; padding:0 20px}\n header{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px}\n .title{font-weight:800; letter-spacing:.3px; font-size:clamp(22px, 3vw, 30px)}\n .subtitle{color:var(--muted); font-size:14px}\n\n .toolbar{display:flex; gap:10px; align-items:center}\n .btn{cursor:pointer; border:1px solid var(--card-line); background:var(--card); color:var(--text); padding:10px 14px; border-radius:12px; font-weight:600}\n .btn:active{transform:translateY(1px)}\n\n \/* grid *\/\n .grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap:16px }\n @media (max-width: 900px){ .grid{grid-template-columns: repeat(6, 1fr)} }\n @media (max-width: 560px){ .grid{grid-template-columns: repeat(1, 1fr)} }\n\n .tile{\n grid-column: span 4;\n display:flex; flex-direction:column; gap:12px;\n background: var(--card);\n border:1px solid var(--card-line);\n border-radius:var(--radius);\n padding:18px;\n color:var(--text);\n box-shadow:var(--shadow-panel);\n position:relative; \/* nodig voor stretched link *\/\n overflow:hidden;\n transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease\n }\n .tile:hover{ transform: translateY(-2px) }\n .tile:focus-within{ outline:3px solid color-mix(in oklab, var(--accent) 60%, #fff 40%); outline-offset:4px }\n\n .tile .icon{\n width:44px; height:44px; border-radius:12px;\n display:grid; place-items:center;\n background: var(--card);\n border:1px solid var(--card-line)\n }\n .tile h3{margin:0; font-size:18px}\n .tile p{margin:0; color:var(--muted); font-size:14px; line-height:1.45}\n\n .links{ margin-top:auto }\n .cta{\n font-weight:700; font-size:14px;\n color: color-mix(in oklab, var(--accent) 85%, #fff 15%);\n text-decoration:none\n }\n\n \/* onzichtbare full-tile link *\/\n .stretched-link{\n position:absolute; inset:0; z-index:1;\n text-indent:-9999px; overflow:hidden;\n }\n \/* zichtbare content boven stretched link *\/\n .tile > *{ position:relative; z-index:2 }\n <\/style>\n<\/head>\n<body>\n <div class=\"wrap\">\n <header>\n <div>\n <div class=\"title\">Overzicht<\/div>\n <div class=\"subtitle\">Kies een onderdeel om te openen<\/div>\n <\/div>\n <div class=\"toolbar\">\n <button id=\"themeToggle\" class=\"btn\" title=\"Wissel thema\">\ud83c\udf17 Licht \/ Donker<\/button>\n <\/div>\n <\/header>\n\n <section class=\"grid\" aria-label=\"Hoofdmenu\">\n \n <div class=\"tile\">\n <span class=\"badge\" style=\"position:absolute;top:14px;right:14px;font-size:12px;padding:6px 10px;border-radius:999px;background:var(--card);border:1px solid var(--card-line);color:var(--muted)\">Live<\/span>\n <div class=\"icon\" aria-hidden=\"true\">\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M16 11c2.761 0 5-2.239 5-5s-2.239-5-5-5-5 2.239-5 5 2.239 5 5 5Z\" stroke=\"currentColor\" stroke-width=\"1.6\"\/>\n <path d=\"M1.5 22a7.5 7.5 0 0 1 15 0\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/>\n <\/svg>\n <\/div>\n <h3>Vrijwilligersoverzicht<\/h3>\n <p>Wie zijn er vrijwilliger en wat zijn hun gegevens?<\/p>\n\n <div class=\"links\">\n <a class=\"cta\" href=\"https:\/\/ernst.bureaukiem.nl\/?page_id=27\">Openen \u25b8<\/a>\n <\/div>\n\n <a class=\"stretched-link\" href=\"https:\/\/ernst.bureaukiem.nl\/?page_id=27\" aria-label=\"Open Vrijwilligersoverzicht\"><\/a>\n <\/div>\n\n \n <div class=\"tile\">\n <div class=\"icon\" aria-hidden=\"true\">\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\">\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"17\" rx=\"3\" stroke=\"currentColor\" stroke-width=\"1.6\"\/>\n <path d=\"M8 2v4M16 2v4M3 10h18\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/>\n <\/svg>\n <\/div>\n <h3>Bezetting<\/h3>\n <p>Compacte statuskaart per datum: volledige bezetting, beperkte bezetting of geen bezetting<\/p>\n\n <div class=\"links\">\n <a class=\"cta\" href=\"https:\/\/ernst.bureaukiem.nl\/?page_id=13\">Openen \u25b8<\/a>\n <\/div>\n\n <a class=\"stretched-link\" href=\"#\" aria-label=\"Open Bezetting\"><\/a>\n <\/div>\n\n \n<div class=\"tile\">\n <div class=\"icon\" aria-hidden=\"true\">\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\">\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"17\" rx=\"3\" stroke=\"currentColor\" stroke-width=\"1.6\"\/>\n <path d=\"M8 2v4M16 2v4M3 10h18\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/>\n <path d=\"M9 15l2 2 4-4\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <\/div>\n <h3>Inzetbaarheid<\/h3>\n <p>Wie is er wanneer beschikbaar?<\/p>\n\n <div class=\"links\">\n <a class=\"cta\" href=\"https:\/\/ernst.bureaukiem.nl\/?page_id=39\">Openen \u25b8<\/a>\n <\/div>\n\n <a class=\"stretched-link\" href=\"https:\/\/ernst.bureaukiem.nl\/?page_id=39\" aria-label=\"Open Inzetbaarheid\"><\/a>\n<\/div>\n\n\n <script>\n const saved = localStorage.getItem('theme-pref')\n document.documentElement.setAttribute('data-theme', saved || 'dark')\n document.getElementById('themeToggle').addEventListener('click', ()=>{\n const next = document.documentElement.getAttribute('data-theme') === 'light' ? 'dark' : 'light'\n document.documentElement.setAttribute('data-theme', next)\n localStorage.setItem('theme-pref', next)\n })\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Overzicht \u2022 Start Overzicht Kies een onderdeel om te openen \ud83c\udf17 Licht \/ Donker Live Vrijwilligersoverzicht Wie zijn er vrijwilliger en wat zijn hun gegevens? Openen \u25b8 Bezetting Compacte statuskaart per datum: volledige bezetting, beperkte bezetting of geen bezetting Openen \u25b8 Inzetbaarheid Wie is er wanneer beschikbaar? Openen \u25b8<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-no-title","meta":{"footnotes":""},"class_list":["post-19","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ernst.bureaukiem.nl\/index.php?rest_route=\/wp\/v2\/pages\/19","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ernst.bureaukiem.nl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ernst.bureaukiem.nl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ernst.bureaukiem.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ernst.bureaukiem.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=19"}],"version-history":[{"count":10,"href":"https:\/\/ernst.bureaukiem.nl\/index.php?rest_route=\/wp\/v2\/pages\/19\/revisions"}],"predecessor-version":[{"id":51,"href":"https:\/\/ernst.bureaukiem.nl\/index.php?rest_route=\/wp\/v2\/pages\/19\/revisions\/51"}],"wp:attachment":[{"href":"https:\/\/ernst.bureaukiem.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=19"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":19,"date":"2025-09-29T17:51:11","date_gmt":"2025-09-29T17:51:11","guid":{"rendered":"https:\/\/ernst.bureaukiem.nl\/?page_id=19"},"modified":"2025-09-29T20:25:34","modified_gmt":"2025-09-29T20:25:34","slug":"homepage","status":"publish","type":"page","link":"https:\/\/ernst.bureaukiem.nl\/","title":{"rendered":"Homepage"},"content":{"rendered":"\n\n\n\n \n \n Overzicht \u2022 Start<\/title>\n <style>\n :root{\n --radius:18px;\n --bg:#0b1020; --card:#121936; --muted:#8fa3c8; --text:#e8eefc;\n --accent:#5b8cff; --accent-2:#76e0a5; --card-line:#243466;\n --shadow-panel:0 10px 30px rgba(0,0,0,.08);\n --shadow-table:0 16px 40px rgba(10,20,60,.10)\n }\n [data-theme=\"light\"]{\n --bg:#f7f8fb; --card:#ffffff; --muted:#64748b; --text:#0f172a;\n --accent:#3b82f6; --accent-2:#16a34a; --card-line:#e6ebf4;\n --shadow-panel:0 2px 6px rgba(0,0,0,.04);\n --shadow-table:0 3px 8px rgba(0,0,0,.05)\n }\n\n html,body{margin:0}\n body{\n background:var(--bg);\n font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, \"Noto Sans\", \"Helvetica Neue\", \"Apple Color Emoji\", \"Segoe UI Emoji\";\n color:var(--text);\n transition: background-color .25s ease, color .25s ease\n }\n\n .wrap{max-width:1100px; margin:40px auto; padding:0 20px}\n header{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px}\n .title{font-weight:800; letter-spacing:.3px; font-size:clamp(22px, 3vw, 30px)}\n .subtitle{color:var(--muted); font-size:14px}\n\n .toolbar{display:flex; gap:10px; align-items:center}\n .btn{cursor:pointer; border:1px solid var(--card-line); background:var(--card); color:var(--text); padding:10px 14px; border-radius:12px; font-weight:600}\n .btn:active{transform:translateY(1px)}\n\n \/* grid *\/\n .grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap:16px }\n @media (max-width: 900px){ .grid{grid-template-columns: repeat(6, 1fr)} }\n @media (max-width: 560px){ .grid{grid-template-columns: repeat(1, 1fr)} }\n\n .tile{\n grid-column: span 4;\n display:flex; flex-direction:column; gap:12px;\n background: var(--card);\n border:1px solid var(--card-line);\n border-radius:var(--radius);\n padding:18px;\n color:var(--text);\n box-shadow:var(--shadow-panel);\n position:relative; \/* nodig voor stretched link *\/\n overflow:hidden;\n transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease\n }\n .tile:hover{ transform: translateY(-2px) }\n .tile:focus-within{ outline:3px solid color-mix(in oklab, var(--accent) 60%, #fff 40%); outline-offset:4px }\n\n .tile .icon{\n width:44px; height:44px; border-radius:12px;\n display:grid; place-items:center;\n background: var(--card);\n border:1px solid var(--card-line)\n }\n .tile h3{margin:0; font-size:18px}\n .tile p{margin:0; color:var(--muted); font-size:14px; line-height:1.45}\n\n .links{ margin-top:auto }\n .cta{\n font-weight:700; font-size:14px;\n color: color-mix(in oklab, var(--accent) 85%, #fff 15%);\n text-decoration:none\n }\n\n \/* onzichtbare full-tile link *\/\n .stretched-link{\n position:absolute; inset:0; z-index:1;\n text-indent:-9999px; overflow:hidden;\n }\n \/* zichtbare content boven stretched link *\/\n .tile > *{ position:relative; z-index:2 }\n <\/style>\n<\/head>\n<body>\n <div class=\"wrap\">\n <header>\n <div>\n <div class=\"title\">Overzicht<\/div>\n <div class=\"subtitle\">Kies een onderdeel om te openen<\/div>\n <\/div>\n <div class=\"toolbar\">\n <button id=\"themeToggle\" class=\"btn\" title=\"Wissel thema\">\ud83c\udf17 Licht \/ Donker<\/button>\n <\/div>\n <\/header>\n\n <section class=\"grid\" aria-label=\"Hoofdmenu\">\n \n <div class=\"tile\">\n <span class=\"badge\" style=\"position:absolute;top:14px;right:14px;font-size:12px;padding:6px 10px;border-radius:999px;background:var(--card);border:1px solid var(--card-line);color:var(--muted)\">Live<\/span>\n <div class=\"icon\" aria-hidden=\"true\">\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M16 11c2.761 0 5-2.239 5-5s-2.239-5-5-5-5 2.239-5 5 2.239 5 5 5Z\" stroke=\"currentColor\" stroke-width=\"1.6\"\/>\n <path d=\"M1.5 22a7.5 7.5 0 0 1 15 0\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/>\n <\/svg>\n <\/div>\n <h3>Vrijwilligersoverzicht<\/h3>\n <p>Wie zijn er vrijwilliger en wat zijn hun gegevens?<\/p>\n\n <div class=\"links\">\n <a class=\"cta\" href=\"https:\/\/ernst.bureaukiem.nl\/?page_id=27\">Openen \u25b8<\/a>\n <\/div>\n\n <a class=\"stretched-link\" href=\"https:\/\/ernst.bureaukiem.nl\/?page_id=27\" aria-label=\"Open Vrijwilligersoverzicht\"><\/a>\n <\/div>\n\n \n <div class=\"tile\">\n <div class=\"icon\" aria-hidden=\"true\">\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\">\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"17\" rx=\"3\" stroke=\"currentColor\" stroke-width=\"1.6\"\/>\n <path d=\"M8 2v4M16 2v4M3 10h18\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/>\n <\/svg>\n <\/div>\n <h3>Bezetting<\/h3>\n <p>Compacte statuskaart per datum: volledige bezetting, beperkte bezetting of geen bezetting<\/p>\n\n <div class=\"links\">\n <a class=\"cta\" href=\"https:\/\/ernst.bureaukiem.nl\/?page_id=13\">Openen \u25b8<\/a>\n <\/div>\n\n <a class=\"stretched-link\" href=\"#\" aria-label=\"Open Bezetting\"><\/a>\n <\/div>\n\n \n<div class=\"tile\">\n <div class=\"icon\" aria-hidden=\"true\">\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\">\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"17\" rx=\"3\" stroke=\"currentColor\" stroke-width=\"1.6\"\/>\n <path d=\"M8 2v4M16 2v4M3 10h18\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/>\n <path d=\"M9 15l2 2 4-4\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <\/div>\n <h3>Inzetbaarheid<\/h3>\n <p>Wie is er wanneer beschikbaar?<\/p>\n\n <div class=\"links\">\n <a class=\"cta\" href=\"https:\/\/ernst.bureaukiem.nl\/?page_id=39\">Openen \u25b8<\/a>\n <\/div>\n\n <a class=\"stretched-link\" href=\"https:\/\/ernst.bureaukiem.nl\/?page_id=39\" aria-label=\"Open Inzetbaarheid\"><\/a>\n<\/div>\n\n\n <script>\n const saved = localStorage.getItem('theme-pref')\n document.documentElement.setAttribute('data-theme', saved || 'dark')\n document.getElementById('themeToggle').addEventListener('click', ()=>{\n const next = document.documentElement.getAttribute('data-theme') === 'light' ? 'dark' : 'light'\n document.documentElement.setAttribute('data-theme', next)\n localStorage.setItem('theme-pref', next)\n })\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Overzicht \u2022 Start Overzicht Kies een onderdeel om te openen \ud83c\udf17 Licht \/ Donker Live Vrijwilligersoverzicht Wie zijn er vrijwilliger en wat zijn hun gegevens? Openen \u25b8 Bezetting Compacte statuskaart per datum: volledige bezetting, beperkte bezetting of geen bezetting Openen \u25b8 Inzetbaarheid Wie is er wanneer beschikbaar? Openen \u25b8<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-no-title","meta":{"footnotes":""},"class_list":["post-19","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ernst.bureaukiem.nl\/index.php?rest_route=\/wp\/v2\/pages\/19","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ernst.bureaukiem.nl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ernst.bureaukiem.nl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ernst.bureaukiem.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ernst.bureaukiem.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=19"}],"version-history":[{"count":10,"href":"https:\/\/ernst.bureaukiem.nl\/index.php?rest_route=\/wp\/v2\/pages\/19\/revisions"}],"predecessor-version":[{"id":51,"href":"https:\/\/ernst.bureaukiem.nl\/index.php?rest_route=\/wp\/v2\/pages\/19\/revisions\/51"}],"wp:attachment":[{"href":"https:\/\/ernst.bureaukiem.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=19"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}