Digitaal Gemak App<\/title>\n \n \n <script type=\"application\/ld+json\">\n {\n \"@context\": \"https:\/\/schema.org\",\n \"@type\": \"VideoObject\",\n \"name\": \"Introductie Bedrijf\",\n \"description\": \"Korte video-introductie over onze diensten en directe conversiemogelijkheden.\",\n \"thumbnailUrl\": [\"https:\/\/jouwsite.nl\/poster.jpg\"],\n \"uploadDate\": \"2026-09-26T08:00:00+01:00\",\n \"contentUrl\": \"https:\/\/jouwsite.nl\/hero.mp4\",\n \"transcript\": \"Welkom. Dit is ons bedrijf. Wij bouwen apps en websites. Swipe of klik om een afspraak te maken.\",\n \"potentialAction\": {\n \"@type\": \"ReserveAction\",\n \"target\": \"https:\/\/jouwsite.nl\/#afspraak\",\n \"name\": \"Plan Afspraak\"\n }\n }\n <\/script>\n\n \n <style>\n \/* Base Reset *\/\n * { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif; }\n body, html { background-color: #000; color: #fff; overflow: hidden; height: 100dvh; width: 100vw; }\n\n \/* ==========================================================\n TAKEOVER LOCK\n Forceert dit scherm als enige zichtbare UI, ongeacht welk\n thema\/template dit rendert. Verbergt elke andere header,\n menu, hero of footer die het thema er nog omheen zet.\n ========================================================== *\/\n html, body {\n margin: 0 !important;\n padding: 0 !important;\n overflow: hidden !important;\n height: 100dvh !important;\n width: 100vw !important;\n position: fixed !important;\n inset: 0 !important;\n }\n\n \/* Astra plaatst header\/content\/footer allemaal \u00c1LS KIND van #page,\n niet als direct kind van <body>. Daarom hier de bekende Astra-\n (en gangbare thema-)selectors direct benoemen, zodat ze meteen\n bij het parsen verborgen zijn, nog v\u00f3\u00f3r het JS-fallback hieronder\n draait (voorkomt een flits van de header). *\/\n #wpadminbar,\n #page > header, #page > footer,\n #masthead, .site-header, .ast-mobile-header-wrap, #ast-mobile-header-wrap,\n .ast-header-break-point, .main-header-bar-wrap, .ast-primary-header-bar,\n .ast-below-header-wrap, .ast-above-header-wrap,\n #colophon, .site-footer, .ast-small-footer, .ast-footer-overlay,\n .site-navigation, .main-navigation, .navbar,\n .entry-header, .entry-footer, .ast-breadcrumbs-wrap, .page-header,\n .elementor-location-header, .elementor-location-footer {\n display: none !important;\n visibility: hidden !important;\n height: 0 !important;\n width: 0 !important;\n overflow: hidden !important;\n }\n\n \/* Compenseer de margin-top die de WP admin-balk normaal aan html geeft *\/\n html { margin-top: 0 !important; }\n\n \/* Container voor het Swipe Effect *\/\n .app-view-container {\n display: flex;\n flex-direction: row;\n width: 100vw;\n height: 100dvh;\n overflow-x: auto;\n overflow-y: hidden;\n scroll-snap-type: x mandatory;\n scroll-behavior: smooth;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none; \/* Firefox *\/\n\n \/* Bovenop alles, ook als het thema het in een wrapper duwt *\/\n position: fixed !important;\n top: 0 !important;\n left: 0 !important;\n z-index: 2147483647 !important;\n }\n .app-view-container::-webkit-scrollbar { display: none; \/* Chrome\/Safari *\/ }\n\n \/* Individuele Schermen (100dvh) *\/\n .app-screen {\n min-width: 100vw;\n max-width: 100vw;\n height: 100dvh;\n scroll-snap-align: start;\n position: relative;\n overflow-y: auto;\n flex-shrink: 0;\n background-color: #111;\n }\n\n \/* Video Achtergrond (Scherm 1) *\/\n .hero-video-wrapper {\n position: absolute;\n top: 0; left: 0;\n width: 100%; height: 100%;\n z-index: 0;\n }\n .hero-video-wrapper video {\n width: 100%; height: 100%;\n object-fit: cover;\n opacity: 0.7; \/* Maakt de tekst beter leesbaar *\/\n }\n\n \/* Content Overlay (Scherm 1) *\/\n .hero-overlay-content {\n position: relative;\n z-index: 10;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n padding: 2rem 1.5rem;\n background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 50%);\n }\n\n \/* Typografie & UI elementen *\/\n h1 { font-size: 2.5rem; font-weight: 800; margin-bottom: 0.5rem; line-height: 1.1; }\n p { font-size: 1rem; color: #ccc; margin-bottom: 1.5rem; }\n \n .cta-button {\n display: flex; align-items: center; justify-content: center;\n width: 100%; padding: 1rem;\n background-color: #ffffff; color: #000000;\n font-size: 1.1rem; font-weight: bold;\n border-radius: 12px; text-decoration: none;\n transition: transform 0.2s; cursor: pointer; border: none;\n margin-bottom: 1rem;\n }\n .cta-button:active { transform: scale(0.97); }\n\n .secondary-menu {\n display: flex; justify-content: space-between; gap: 1rem;\n }\n .btn-outline {\n flex: 1; padding: 0.75rem; text-align: center;\n border: 1px solid rgba(255,255,255,0.3); color: #fff;\n border-radius: 12px; text-decoration: none; font-size: 0.9rem;\n background: rgba(255,255,255,0.05); backdrop-filter: blur(5px);\n }\n\n \/* Swipe Indicator *\/\n .swipe-indicator {\n position: absolute; right: 1rem; top: 50%;\n transform: translateY(-50%);\n display: flex; flex-direction: column; align-items: center;\n opacity: 0.5; animation: pulse 2s infinite; z-index: 10; pointer-events: none;\n }\n .swipe-indicator span { font-size: 0.8rem; writing-mode: vertical-rl; margin-top: 0.5rem; }\n @keyframes pulse { 0%, 100% { opacity: 0.3; transform: translate(0, -50%); } 50% { opacity: 1; transform: translate(5px, -50%); } }\n\n \/* Scherm 2 (Inhoud\/Portfolio) *\/\n .screen-two-content {\n padding: 4rem 2rem;\n }\n\n \/* Modal (Popup) Styling *\/\n .modal-overlay {\n position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh;\n background: rgba(0,0,0,0.8); backdrop-filter: blur(10px);\n z-index: 2147483647; display: flex; flex-direction: column;\n justify-content: flex-end; \/* Springt open van onderen *\/\n opacity: 0; pointer-events: none; transition: opacity 0.3s ease;\n }\n .modal-overlay.active { opacity: 1; pointer-events: auto; }\n \n .modal-content {\n background: #1e1e1e; width: 100%; height: 85dvh;\n border-radius: 24px 24px 0 0; padding: 1.5rem;\n transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n overflow-y: auto;\n }\n .modal-overlay.active .modal-content { transform: translateY(0); }\n\n .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }\n .close-btn { background: #333; border: none; color: white; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; }\n <\/style>\n<\/head>\n<body>\n\n \n <div class=\"app-view-container\">\n \n \n \n \n <div class=\"app-screen\" id=\"home\">\n <div class=\"hero-video-wrapper\">\n \n <video autoplay muted loop playsinline poster=\"https:\/\/jouwsite.nl\/poster.jpg\">\n <source src=\"https:\/\/jouwsite.nl\/hero.mp4\" type=\"video\/mp4\" \/>\n <\/video>\n <\/div>\n \n <div class=\"swipe-indicator\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"9 18 15 12 9 6\"><\/polyline><\/svg>\n <span>Swipe<\/span>\n <\/div>\n\n <div class=\"hero-overlay-content\">\n <div>\n <h1>Digitaal Gemak.<\/h1>\n <p>Sub-websites, kalenders, formulieren en meer. Klaar in seconden.<\/p>\n <\/div>\n \n <div class=\"actions\">\n \n <a href=\"#afspraak\" class=\"cta-button\">\ud83d\uddd3 Plan een afspraak<\/a>\n \n <div class=\"secondary-menu\">\n <a href=\"https:\/\/jouwsite.nl\/visitekaartje.vcf\" class=\"btn-outline\">vCard Opslaan<\/a>\n <a href=\"#contact\" class=\"btn-outline\">Contact<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n \n \n <div class=\"app-screen\" id=\"portfolio\">\n <div class=\"screen-two-content\">\n <h2 style=\"margin-bottom: 1rem;\">Onze Oplossingen<\/h2>\n <p>Hier kun je je portfolio-items, diensten of een statisch Instagram Grid (Smash Balloon export) plaatsen.<\/p>\n \n <div style=\"background:#222; border-radius:12px; padding:1.5rem; margin-top:2rem;\">\n <h3>Service 1: Smart CRM<\/h3>\n <p style=\"color:#aaa; font-size:0.9rem; margin-top:0.5rem;\">Vanaf \u20ac5 per maand.<\/p>\n <\/div>\n \n <div style=\"background:#222; border-radius:12px; padding:1.5rem; margin-top:1rem;\">\n <h3>Service 2: Automatisering<\/h3>\n <p style=\"color:#aaa; font-size:0.9rem; margin-top:0.5rem;\">Automatische follow-ups na ieder contactmoment.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n \n \n \n <div class=\"modal-overlay\" id=\"action-modal\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h3 id=\"modal-title\">Maak een Afspraak<\/h3>\n <button class=\"close-btn\" id=\"close-modal\">\u00d7<\/button>\n <\/div>\n \n \n <div id=\"my-cal-inline\" style=\"width:100%;height:100%;overflow:scroll;\"><\/div>\n <\/div>\n <\/div>\n\n \n \n \n <script>\n document.addEventListener(\"DOMContentLoaded\", function() {\n\n \/\/ ------------------------------------------------------\n \/\/ TAKEOVER LOCK (JS-fallback bovenop de CSS-lock hierboven)\n \/\/\n \/\/ Astra (en de meeste thema's\/page builders) plaatsen header,\n \/\/ content en footer allemaal ALS KIND van \u00e9\u00e9n wrapper\n \/\/ (bv. #page), niet als los kind van <body>. Ons HTML-blok\n \/\/ kan dus meerdere niveaus diep genest zitten. Deze functie\n \/\/ loopt daarom vanaf onze eigen root-elementen omhoog tot aan\n \/\/ <body>, en verbergt op ELK niveau alle \"broertjes\" die niet\n \/\/ bij ons horen \u2014 dus ook Astra's header\/footer, ongeacht hoe\n \/\/ diep ze genest zijn. Werkt hierdoor ook in elk ander thema\n \/\/ of elke andere page builder.\n \/\/ ------------------------------------------------------\n const ROOTS = [\n document.querySelector('.app-view-container'),\n document.getElementById('action-modal')\n ].filter(Boolean);\n\n function buildAllowedSet(roots) {\n const allowed = new Set();\n roots.forEach(function (root) {\n let node = root;\n while (node) {\n allowed.add(node);\n if (node === document.body) break;\n node = node.parentElement;\n }\n });\n return allowed;\n }\n\n function enforceTakeover() {\n const allowed = buildAllowedSet(ROOTS);\n allowed.forEach(function (node) {\n if (node === document.documentElement || node === document.body) return;\n const parent = node.parentElement;\n if (!parent) return;\n Array.from(parent.children).forEach(function (sibling) {\n if (sibling === node || allowed.has(sibling)) return;\n const tag = sibling.tagName;\n if (tag === 'SCRIPT' || tag === 'STYLE' || tag === 'NOSCRIPT' || tag === 'LINK' || tag === 'META' || tag === 'TITLE') return;\n sibling.style.setProperty('display', 'none', 'important');\n sibling.style.setProperty('visibility', 'hidden', 'important');\n sibling.style.setProperty('height', '0', 'important');\n });\n });\n \/\/ WP admin-balk (indien ingelogd) en het gat dat hij op html achterlaat\n const adminBar = document.getElementById('wpadminbar');\n if (adminBar) adminBar.style.setProperty('display', 'none', 'important');\n document.documentElement.style.setProperty('margin-top', '0', 'important');\n document.body.style.setProperty('margin-top', '0', 'important');\n }\n\n enforceTakeover();\n\n \/\/ Herhaal bij elke DOM-wijziging (bv. Astra sticky-header-kloon,\n \/\/ cookiebanner, lazy-loaded elementen) \u2014 licht gethrottled.\n let pending = false;\n const bodyObserver = new MutationObserver(function () {\n if (pending) return;\n pending = true;\n requestAnimationFrame(function () {\n enforceTakeover();\n pending = false;\n });\n });\n bodyObserver.observe(document.documentElement, { childList: true, subtree: true });\n\n \/\/ ------------------------------------------------------\n \/\/ Bestaande app-logica\n \/\/ ------------------------------------------------------\n const modal = document.getElementById('action-modal');\n const closeBtn = document.getElementById('close-modal');\n const modalTitle = document.getElementById('modal-title');\n const calContainer = document.getElementById('my-cal-inline');\n let calLoaded = false;\n\n \/\/ 1. Functie om de Cal.com widget in te laden\n function loadCalWidget() {\n if(calLoaded) return;\n \n (function (C, A, L) { \n let p = function (a, ar) { a.q.push(ar); }; \n let c = C.Cal = C.Cal || function () { \n let cal = c; let arg = arguments; \n if (!cal.loaded) { \n cal.ns = {}; cal.q = cal.q || []; \n let d = document; \n let s = d.createElement(\"script\"); s.src = A;\n d.head.appendChild(s); \n cal.loaded = true; \n } \n if (arg[0] === p) { return; } \n if (arg[0] === L) { \n let api = function () { p(api, arguments); }; \n let namespace = arg[1]; \n if (typeof namespace === \"string\") { \n cal.ns[namespace] = cal.ns[namespace] || api; \n p(cal.ns[namespace], arg); \n return; \n } \n p(cal, arg); return; \n } \n p(cal, arg); \n }; \n })(window, \"https:\/\/app.cal.com\/embed\/embed.js\", \"init\");\n\n \/\/ VERVANG \"jouwnaam\/afspraak\" DOOR JOUW ECHTE CAL.COM LINK\n Cal(\"init\", \"afspraak\", {origin:\"https:\/\/cal.com\"});\n Cal.ns.afspraak(\"inline\", {\n elementOrSelector: \"#my-cal-inline\",\n calLink: \"benjamin\/30min\", \/\/ <-- PAS DIT AAN\n layout: \"month_view\"\n });\n Cal.ns.afspraak(\"ui\", {\n \"styles\": { \"branding\": { \"brandColor\": \"#ffffff\" } },\n \"hideEventTypeDetails\": false,\n \"layout\": \"month_view\"\n });\n \n calLoaded = true;\n }\n\n \/\/ 2. Hash Routing (Luisteren naar #afspraak en #contact)\n function handleUrlHash() {\n const currentHash = window.location.hash.toLowerCase();\n \n if (currentHash === \"#afspraak\" || currentHash === \"#contact\") {\n if(currentHash === \"#afspraak\") {\n modalTitle.innerText = \"Plan een afspraak\";\n calContainer.style.display = \"block\";\n loadCalWidget(); \/\/ Laad widget pas in als modal opent (Performance optimalisatie)\n } else if (currentHash === \"#contact\") {\n modalTitle.innerText = \"Neem Contact Op\";\n calContainer.style.display = \"none\";\n \/\/ Hier kun je een simpele form HTML injecteren of weergeven\n }\n modal.classList.add('active');\n } else {\n modal.classList.remove('active');\n }\n }\n\n \/\/ 3. Event Listeners voor Modals sluiten\n closeBtn.addEventListener('click', () => {\n window.location.hash = ''; \/\/ Verwijdert hash uit adresbalk\n });\n \n modal.addEventListener('click', (e) => {\n \/\/ Sluit modal als je op de donkere achtergrond klikt\n if(e.target === modal) {\n window.location.hash = ''; \n }\n });\n\n \/\/ Initieer bij pagina load en bij hash verandering (AI\/Bot clicks)\n window.addEventListener(\"hashchange\", handleUrlHash);\n handleUrlHash(); \/\/ Controleer direct bij het laden van de pagina\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<div class=\"hero-video-wrapper\">\n <video autoplay muted loop playsinline poster=\"\/wp-content\/uploads\/poster.jpg\">\n <source src=\"\/wp-content\/uploads\/hero.mp4\" type=\"video\/mp4\" \/>\n <\/video>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Digitaal Gemak App Swipe Digitaal Gemak. Sub-websites, kalenders, formulieren en meer. Klaar in seconden. \ud83d\uddd3 Plan een afspraak vCard Opslaan […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_zipai_imported":false,"_zipai_import_id":"","footnotes":""},"class_list":["post-24","page","type-page","status-publish","hentry"],"spectra_blocks_featured_image_url":null,"spectra_blocks_author_info":{"display_name":"benjaminsmit","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/71491dc72a4b68d6585e5f1e302cad7e8f0a1dd30a8d873bfba62416cf17b6ee?s=96&d=mm&r=g","author_link":"https:\/\/blue-template.bbss.pro\/?author=1","description":""},"_links":{"self":[{"href":"https:\/\/blue-template.bbss.pro\/index.php?rest_route=\/wp\/v2\/pages\/24","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blue-template.bbss.pro\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blue-template.bbss.pro\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blue-template.bbss.pro\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blue-template.bbss.pro\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=24"}],"version-history":[{"count":4,"href":"https:\/\/blue-template.bbss.pro\/index.php?rest_route=\/wp\/v2\/pages\/24\/revisions"}],"predecessor-version":[{"id":38,"href":"https:\/\/blue-template.bbss.pro\/index.php?rest_route=\/wp\/v2\/pages\/24\/revisions\/38"}],"wp:attachment":[{"href":"https:\/\/blue-template.bbss.pro\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=24"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":24,"date":"2026-09-26T18:46:19","date_gmt":"2026-09-26T18:46:19","guid":{"rendered":"https:\/\/blue-template.bbss.pro\/?page_id=24"},"modified":"2026-09-26T19:46:29","modified_gmt":"2026-09-26T19:46:29","slug":"24-2","status":"publish","type":"page","link":"https:\/\/blue-template.bbss.pro\/","title":{"rendered":""},"content":{"rendered":"\n\n\n\n \n \n Digitaal Gemak App<\/title>\n \n \n <script type=\"application\/ld+json\">\n {\n \"@context\": \"https:\/\/schema.org\",\n \"@type\": \"VideoObject\",\n \"name\": \"Introductie Bedrijf\",\n \"description\": \"Korte video-introductie over onze diensten en directe conversiemogelijkheden.\",\n \"thumbnailUrl\": [\"https:\/\/jouwsite.nl\/poster.jpg\"],\n \"uploadDate\": \"2026-09-26T08:00:00+01:00\",\n \"contentUrl\": \"https:\/\/jouwsite.nl\/hero.mp4\",\n \"transcript\": \"Welkom. Dit is ons bedrijf. Wij bouwen apps en websites. Swipe of klik om een afspraak te maken.\",\n \"potentialAction\": {\n \"@type\": \"ReserveAction\",\n \"target\": \"https:\/\/jouwsite.nl\/#afspraak\",\n \"name\": \"Plan Afspraak\"\n }\n }\n <\/script>\n\n \n <style>\n \/* Base Reset *\/\n * { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif; }\n body, html { background-color: #000; color: #fff; overflow: hidden; height: 100dvh; width: 100vw; }\n\n \/* ==========================================================\n TAKEOVER LOCK\n Forceert dit scherm als enige zichtbare UI, ongeacht welk\n thema\/template dit rendert. Verbergt elke andere header,\n menu, hero of footer die het thema er nog omheen zet.\n ========================================================== *\/\n html, body {\n margin: 0 !important;\n padding: 0 !important;\n overflow: hidden !important;\n height: 100dvh !important;\n width: 100vw !important;\n position: fixed !important;\n inset: 0 !important;\n }\n\n \/* Astra plaatst header\/content\/footer allemaal \u00c1LS KIND van #page,\n niet als direct kind van <body>. Daarom hier de bekende Astra-\n (en gangbare thema-)selectors direct benoemen, zodat ze meteen\n bij het parsen verborgen zijn, nog v\u00f3\u00f3r het JS-fallback hieronder\n draait (voorkomt een flits van de header). *\/\n #wpadminbar,\n #page > header, #page > footer,\n #masthead, .site-header, .ast-mobile-header-wrap, #ast-mobile-header-wrap,\n .ast-header-break-point, .main-header-bar-wrap, .ast-primary-header-bar,\n .ast-below-header-wrap, .ast-above-header-wrap,\n #colophon, .site-footer, .ast-small-footer, .ast-footer-overlay,\n .site-navigation, .main-navigation, .navbar,\n .entry-header, .entry-footer, .ast-breadcrumbs-wrap, .page-header,\n .elementor-location-header, .elementor-location-footer {\n display: none !important;\n visibility: hidden !important;\n height: 0 !important;\n width: 0 !important;\n overflow: hidden !important;\n }\n\n \/* Compenseer de margin-top die de WP admin-balk normaal aan html geeft *\/\n html { margin-top: 0 !important; }\n\n \/* Container voor het Swipe Effect *\/\n .app-view-container {\n display: flex;\n flex-direction: row;\n width: 100vw;\n height: 100dvh;\n overflow-x: auto;\n overflow-y: hidden;\n scroll-snap-type: x mandatory;\n scroll-behavior: smooth;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none; \/* Firefox *\/\n\n \/* Bovenop alles, ook als het thema het in een wrapper duwt *\/\n position: fixed !important;\n top: 0 !important;\n left: 0 !important;\n z-index: 2147483647 !important;\n }\n .app-view-container::-webkit-scrollbar { display: none; \/* Chrome\/Safari *\/ }\n\n \/* Individuele Schermen (100dvh) *\/\n .app-screen {\n min-width: 100vw;\n max-width: 100vw;\n height: 100dvh;\n scroll-snap-align: start;\n position: relative;\n overflow-y: auto;\n flex-shrink: 0;\n background-color: #111;\n }\n\n \/* Video Achtergrond (Scherm 1) *\/\n .hero-video-wrapper {\n position: absolute;\n top: 0; left: 0;\n width: 100%; height: 100%;\n z-index: 0;\n }\n .hero-video-wrapper video {\n width: 100%; height: 100%;\n object-fit: cover;\n opacity: 0.7; \/* Maakt de tekst beter leesbaar *\/\n }\n\n \/* Content Overlay (Scherm 1) *\/\n .hero-overlay-content {\n position: relative;\n z-index: 10;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n padding: 2rem 1.5rem;\n background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 50%);\n }\n\n \/* Typografie & UI elementen *\/\n h1 { font-size: 2.5rem; font-weight: 800; margin-bottom: 0.5rem; line-height: 1.1; }\n p { font-size: 1rem; color: #ccc; margin-bottom: 1.5rem; }\n \n .cta-button {\n display: flex; align-items: center; justify-content: center;\n width: 100%; padding: 1rem;\n background-color: #ffffff; color: #000000;\n font-size: 1.1rem; font-weight: bold;\n border-radius: 12px; text-decoration: none;\n transition: transform 0.2s; cursor: pointer; border: none;\n margin-bottom: 1rem;\n }\n .cta-button:active { transform: scale(0.97); }\n\n .secondary-menu {\n display: flex; justify-content: space-between; gap: 1rem;\n }\n .btn-outline {\n flex: 1; padding: 0.75rem; text-align: center;\n border: 1px solid rgba(255,255,255,0.3); color: #fff;\n border-radius: 12px; text-decoration: none; font-size: 0.9rem;\n background: rgba(255,255,255,0.05); backdrop-filter: blur(5px);\n }\n\n \/* Swipe Indicator *\/\n .swipe-indicator {\n position: absolute; right: 1rem; top: 50%;\n transform: translateY(-50%);\n display: flex; flex-direction: column; align-items: center;\n opacity: 0.5; animation: pulse 2s infinite; z-index: 10; pointer-events: none;\n }\n .swipe-indicator span { font-size: 0.8rem; writing-mode: vertical-rl; margin-top: 0.5rem; }\n @keyframes pulse { 0%, 100% { opacity: 0.3; transform: translate(0, -50%); } 50% { opacity: 1; transform: translate(5px, -50%); } }\n\n \/* Scherm 2 (Inhoud\/Portfolio) *\/\n .screen-two-content {\n padding: 4rem 2rem;\n }\n\n \/* Modal (Popup) Styling *\/\n .modal-overlay {\n position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh;\n background: rgba(0,0,0,0.8); backdrop-filter: blur(10px);\n z-index: 2147483647; display: flex; flex-direction: column;\n justify-content: flex-end; \/* Springt open van onderen *\/\n opacity: 0; pointer-events: none; transition: opacity 0.3s ease;\n }\n .modal-overlay.active { opacity: 1; pointer-events: auto; }\n \n .modal-content {\n background: #1e1e1e; width: 100%; height: 85dvh;\n border-radius: 24px 24px 0 0; padding: 1.5rem;\n transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n overflow-y: auto;\n }\n .modal-overlay.active .modal-content { transform: translateY(0); }\n\n .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }\n .close-btn { background: #333; border: none; color: white; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; }\n <\/style>\n<\/head>\n<body>\n\n \n <div class=\"app-view-container\">\n \n \n \n \n <div class=\"app-screen\" id=\"home\">\n <div class=\"hero-video-wrapper\">\n \n <video autoplay muted loop playsinline poster=\"https:\/\/jouwsite.nl\/poster.jpg\">\n <source src=\"https:\/\/jouwsite.nl\/hero.mp4\" type=\"video\/mp4\" \/>\n <\/video>\n <\/div>\n \n <div class=\"swipe-indicator\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"9 18 15 12 9 6\"><\/polyline><\/svg>\n <span>Swipe<\/span>\n <\/div>\n\n <div class=\"hero-overlay-content\">\n <div>\n <h1>Digitaal Gemak.<\/h1>\n <p>Sub-websites, kalenders, formulieren en meer. Klaar in seconden.<\/p>\n <\/div>\n \n <div class=\"actions\">\n \n <a href=\"#afspraak\" class=\"cta-button\">\ud83d\uddd3 Plan een afspraak<\/a>\n \n <div class=\"secondary-menu\">\n <a href=\"https:\/\/jouwsite.nl\/visitekaartje.vcf\" class=\"btn-outline\">vCard Opslaan<\/a>\n <a href=\"#contact\" class=\"btn-outline\">Contact<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n \n \n <div class=\"app-screen\" id=\"portfolio\">\n <div class=\"screen-two-content\">\n <h2 style=\"margin-bottom: 1rem;\">Onze Oplossingen<\/h2>\n <p>Hier kun je je portfolio-items, diensten of een statisch Instagram Grid (Smash Balloon export) plaatsen.<\/p>\n \n <div style=\"background:#222; border-radius:12px; padding:1.5rem; margin-top:2rem;\">\n <h3>Service 1: Smart CRM<\/h3>\n <p style=\"color:#aaa; font-size:0.9rem; margin-top:0.5rem;\">Vanaf \u20ac5 per maand.<\/p>\n <\/div>\n \n <div style=\"background:#222; border-radius:12px; padding:1.5rem; margin-top:1rem;\">\n <h3>Service 2: Automatisering<\/h3>\n <p style=\"color:#aaa; font-size:0.9rem; margin-top:0.5rem;\">Automatische follow-ups na ieder contactmoment.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n \n \n \n <div class=\"modal-overlay\" id=\"action-modal\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h3 id=\"modal-title\">Maak een Afspraak<\/h3>\n <button class=\"close-btn\" id=\"close-modal\">\u00d7<\/button>\n <\/div>\n \n \n <div id=\"my-cal-inline\" style=\"width:100%;height:100%;overflow:scroll;\"><\/div>\n <\/div>\n <\/div>\n\n \n \n \n <script>\n document.addEventListener(\"DOMContentLoaded\", function() {\n\n \/\/ ------------------------------------------------------\n \/\/ TAKEOVER LOCK (JS-fallback bovenop de CSS-lock hierboven)\n \/\/\n \/\/ Astra (en de meeste thema's\/page builders) plaatsen header,\n \/\/ content en footer allemaal ALS KIND van \u00e9\u00e9n wrapper\n \/\/ (bv. #page), niet als los kind van <body>. Ons HTML-blok\n \/\/ kan dus meerdere niveaus diep genest zitten. Deze functie\n \/\/ loopt daarom vanaf onze eigen root-elementen omhoog tot aan\n \/\/ <body>, en verbergt op ELK niveau alle \"broertjes\" die niet\n \/\/ bij ons horen \u2014 dus ook Astra's header\/footer, ongeacht hoe\n \/\/ diep ze genest zijn. Werkt hierdoor ook in elk ander thema\n \/\/ of elke andere page builder.\n \/\/ ------------------------------------------------------\n const ROOTS = [\n document.querySelector('.app-view-container'),\n document.getElementById('action-modal')\n ].filter(Boolean);\n\n function buildAllowedSet(roots) {\n const allowed = new Set();\n roots.forEach(function (root) {\n let node = root;\n while (node) {\n allowed.add(node);\n if (node === document.body) break;\n node = node.parentElement;\n }\n });\n return allowed;\n }\n\n function enforceTakeover() {\n const allowed = buildAllowedSet(ROOTS);\n allowed.forEach(function (node) {\n if (node === document.documentElement || node === document.body) return;\n const parent = node.parentElement;\n if (!parent) return;\n Array.from(parent.children).forEach(function (sibling) {\n if (sibling === node || allowed.has(sibling)) return;\n const tag = sibling.tagName;\n if (tag === 'SCRIPT' || tag === 'STYLE' || tag === 'NOSCRIPT' || tag === 'LINK' || tag === 'META' || tag === 'TITLE') return;\n sibling.style.setProperty('display', 'none', 'important');\n sibling.style.setProperty('visibility', 'hidden', 'important');\n sibling.style.setProperty('height', '0', 'important');\n });\n });\n \/\/ WP admin-balk (indien ingelogd) en het gat dat hij op html achterlaat\n const adminBar = document.getElementById('wpadminbar');\n if (adminBar) adminBar.style.setProperty('display', 'none', 'important');\n document.documentElement.style.setProperty('margin-top', '0', 'important');\n document.body.style.setProperty('margin-top', '0', 'important');\n }\n\n enforceTakeover();\n\n \/\/ Herhaal bij elke DOM-wijziging (bv. Astra sticky-header-kloon,\n \/\/ cookiebanner, lazy-loaded elementen) \u2014 licht gethrottled.\n let pending = false;\n const bodyObserver = new MutationObserver(function () {\n if (pending) return;\n pending = true;\n requestAnimationFrame(function () {\n enforceTakeover();\n pending = false;\n });\n });\n bodyObserver.observe(document.documentElement, { childList: true, subtree: true });\n\n \/\/ ------------------------------------------------------\n \/\/ Bestaande app-logica\n \/\/ ------------------------------------------------------\n const modal = document.getElementById('action-modal');\n const closeBtn = document.getElementById('close-modal');\n const modalTitle = document.getElementById('modal-title');\n const calContainer = document.getElementById('my-cal-inline');\n let calLoaded = false;\n\n \/\/ 1. Functie om de Cal.com widget in te laden\n function loadCalWidget() {\n if(calLoaded) return;\n \n (function (C, A, L) { \n let p = function (a, ar) { a.q.push(ar); }; \n let c = C.Cal = C.Cal || function () { \n let cal = c; let arg = arguments; \n if (!cal.loaded) { \n cal.ns = {}; cal.q = cal.q || []; \n let d = document; \n let s = d.createElement(\"script\"); s.src = A;\n d.head.appendChild(s); \n cal.loaded = true; \n } \n if (arg[0] === p) { return; } \n if (arg[0] === L) { \n let api = function () { p(api, arguments); }; \n let namespace = arg[1]; \n if (typeof namespace === \"string\") { \n cal.ns[namespace] = cal.ns[namespace] || api; \n p(cal.ns[namespace], arg); \n return; \n } \n p(cal, arg); return; \n } \n p(cal, arg); \n }; \n })(window, \"https:\/\/app.cal.com\/embed\/embed.js\", \"init\");\n\n \/\/ VERVANG \"jouwnaam\/afspraak\" DOOR JOUW ECHTE CAL.COM LINK\n Cal(\"init\", \"afspraak\", {origin:\"https:\/\/cal.com\"});\n Cal.ns.afspraak(\"inline\", {\n elementOrSelector: \"#my-cal-inline\",\n calLink: \"benjamin\/30min\", \/\/ <-- PAS DIT AAN\n layout: \"month_view\"\n });\n Cal.ns.afspraak(\"ui\", {\n \"styles\": { \"branding\": { \"brandColor\": \"#ffffff\" } },\n \"hideEventTypeDetails\": false,\n \"layout\": \"month_view\"\n });\n \n calLoaded = true;\n }\n\n \/\/ 2. Hash Routing (Luisteren naar #afspraak en #contact)\n function handleUrlHash() {\n const currentHash = window.location.hash.toLowerCase();\n \n if (currentHash === \"#afspraak\" || currentHash === \"#contact\") {\n if(currentHash === \"#afspraak\") {\n modalTitle.innerText = \"Plan een afspraak\";\n calContainer.style.display = \"block\";\n loadCalWidget(); \/\/ Laad widget pas in als modal opent (Performance optimalisatie)\n } else if (currentHash === \"#contact\") {\n modalTitle.innerText = \"Neem Contact Op\";\n calContainer.style.display = \"none\";\n \/\/ Hier kun je een simpele form HTML injecteren of weergeven\n }\n modal.classList.add('active');\n } else {\n modal.classList.remove('active');\n }\n }\n\n \/\/ 3. Event Listeners voor Modals sluiten\n closeBtn.addEventListener('click', () => {\n window.location.hash = ''; \/\/ Verwijdert hash uit adresbalk\n });\n \n modal.addEventListener('click', (e) => {\n \/\/ Sluit modal als je op de donkere achtergrond klikt\n if(e.target === modal) {\n window.location.hash = ''; \n }\n });\n\n \/\/ Initieer bij pagina load en bij hash verandering (AI\/Bot clicks)\n window.addEventListener(\"hashchange\", handleUrlHash);\n handleUrlHash(); \/\/ Controleer direct bij het laden van de pagina\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<div class=\"hero-video-wrapper\">\n <video autoplay muted loop playsinline poster=\"\/wp-content\/uploads\/poster.jpg\">\n <source src=\"\/wp-content\/uploads\/hero.mp4\" type=\"video\/mp4\" \/>\n <\/video>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Digitaal Gemak App Swipe Digitaal Gemak. Sub-websites, kalenders, formulieren en meer. Klaar in seconden. \ud83d\uddd3 Plan een afspraak vCard Opslaan […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_zipai_imported":false,"_zipai_import_id":"","footnotes":""},"class_list":["post-24","page","type-page","status-publish","hentry"],"spectra_blocks_featured_image_url":null,"spectra_blocks_author_info":{"display_name":"benjaminsmit","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/71491dc72a4b68d6585e5f1e302cad7e8f0a1dd30a8d873bfba62416cf17b6ee?s=96&d=mm&r=g","author_link":"https:\/\/blue-template.bbss.pro\/?author=1","description":""},"_links":{"self":[{"href":"https:\/\/blue-template.bbss.pro\/index.php?rest_route=\/wp\/v2\/pages\/24","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blue-template.bbss.pro\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blue-template.bbss.pro\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blue-template.bbss.pro\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blue-template.bbss.pro\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=24"}],"version-history":[{"count":4,"href":"https:\/\/blue-template.bbss.pro\/index.php?rest_route=\/wp\/v2\/pages\/24\/revisions"}],"predecessor-version":[{"id":38,"href":"https:\/\/blue-template.bbss.pro\/index.php?rest_route=\/wp\/v2\/pages\/24\/revisions\/38"}],"wp:attachment":[{"href":"https:\/\/blue-template.bbss.pro\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=24"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}