{"id":51217,"date":"2026-09-19T15:53:35","date_gmt":"2026-09-19T14:53:35","guid":{"rendered":"https:\/\/cctvacademy.be\/?page_id=51217"},"modified":"2026-09-27T15:29:03","modified_gmt":"2026-09-27T14:29:03","slug":"cctv-academy-van-beeld-tot-intelligentie","status":"publish","type":"page","link":"https:\/\/cctvacademy.be\/nl\/cctv-academy-van-beeld-tot-intelligentie\/","title":{"rendered":"CCTV Academy \u2014 Van Beeld tot Intelligentie"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n\n\n\n\nCCTV Academy | Van Beeld tot Intelligentie<\/title>\n<style>\n\n\/* ============================================================\n CCTV ACADEMY\n INTERACTIVE STEAMPUNK BROCHURE\n ============================================================ *\/\n\n:root {\n --bg: #070c0e;\n --bg-soft: #11191d;\n\n --metal: #1a2428;\n --metal-light: #344247;\n\n --copper: #bd6e2e;\n --copper-light: #f1ad56;\n --brass: #d5a23c;\n\n --red: #c91e24;\n --red-dark: #771015;\n\n --blue: #0077a5;\n --cyan: #27c9eb;\n\n --white: #fffdf7;\n --text: #f6eee1;\n --muted: #aeb9b6;\n\n \/* E\u00e9n consistente bruine knopstijl voor alle interactieve controls *\/\n --button-bg-top: #3b3023;\n --button-bg-bottom: #171a1b;\n --button-bg-hover-top: #4a3927;\n --button-bg-hover-bottom: #1d1a16;\n --button-border: rgba(240,173,85,.62);\n --button-border-soft: rgba(213,162,60,.34);\n --button-text: #f9edda;\n --button-accent: var(--copper-light);\n --button-shadow: 0 8px 20px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.09);\n --button-shadow-hover: 0 12px 28px rgba(0,0,0,.35), 0 0 18px rgba(240,173,85,.14);\n\n --transition:\n 800ms cubic-bezier(.2,.75,.2,1);\n}\n\n\n\/* ============================================================\n RESET\n ============================================================ *\/\n\n* {\n box-sizing: border-box;\n}\n\nhtml {\n scroll-behavior: smooth;\n scroll-snap-type: y mandatory;\n background: var(--bg);\n}\n\nbody {\n margin: 0;\n overflow-x: hidden;\n\n color: var(--text);\n\n font-family:\n \"Segoe UI\",\n Arial,\n Helvetica,\n sans-serif;\n\n background:\n radial-gradient(\n circle at 12% 18%,\n rgba(193,112,48,.15),\n transparent 25%\n ),\n radial-gradient(\n circle at 86% 78%,\n rgba(0,110,150,.14),\n transparent 27%\n ),\n linear-gradient(\n 135deg,\n #060a0c 0%,\n #111a1e 48%,\n #070c0e 100%\n );\n}\n\n\n\/* ============================================================\n TECHNICAL GRID\n ============================================================ *\/\n\nbody::before {\n content: \"\";\n\n position: fixed;\n inset: 0;\n\n z-index: -5;\n pointer-events: none;\n\n opacity: .085;\n\n background-image:\n linear-gradient(\n rgba(255,255,255,.08) 1px,\n transparent 1px\n ),\n linear-gradient(\n 90deg,\n rgba(255,255,255,.08) 1px,\n transparent 1px\n );\n\n background-size: 42px 42px;\n}\n\n\n\/* ============================================================\n VIGNETTE\n ============================================================ *\/\n\nbody::after {\n content: \"\";\n\n position: fixed;\n inset: 0;\n\n z-index: 5000;\n pointer-events: none;\n\n background:\n radial-gradient(\n ellipse at center,\n transparent 46%,\n rgba(0,0,0,.18) 73%,\n rgba(0,0,0,.62) 100%\n );\n}\n\n\n\/* ============================================================\n SCANLINES\n ============================================================ *\/\n\n.scanlines {\n position: fixed;\n inset: 0;\n\n z-index: 4900;\n pointer-events: none;\n\n opacity: .025;\n\n background:\n repeating-linear-gradient(\n 0deg,\n transparent 0,\n transparent 3px,\n #fff 4px\n );\n}\n\n\n\/* ============================================================\n AMBIENT LIGHT\n ============================================================ *\/\n\n.ambient-light {\n position: fixed;\n\n z-index: -3;\n\n width: 45vw;\n height: 45vw;\n\n top: 15%;\n left: 40%;\n\n border-radius: 50%;\n\n filter: blur(100px);\n\n opacity: .06;\n\n pointer-events: none;\n\n background: var(--copper-light);\n\n transition:\n transform 1.5s ease-out;\n}\n\n\n\/* ============================================================\n PROGRESS BAR\n ============================================================ *\/\n\n.progress-track {\n position: fixed;\n\n z-index: 10000;\n\n top: 0;\n left: 0;\n\n width: 100%;\n height: 4px;\n\n background:\n rgba(255,255,255,.055);\n}\n\n.progress-bar {\n width: 0;\n height: 100%;\n\n background:\n linear-gradient(\n 90deg,\n var(--red),\n var(--copper-light),\n var(--cyan)\n );\n\n box-shadow:\n 0 0 8px rgba(240,173,85,.8),\n 0 0 18px rgba(37,199,233,.25);\n\n transition:\n width .08s linear;\n}\n\n\n\/* ============================================================\n HEADER\n ============================================================ *\/\n\n.topbar {\n position: fixed;\n\n z-index: 1500;\n\n top: 22px;\n left: 50%;\n\n transform:\n translateX(-50%);\n\n width:\n min(1180px,calc(100vw - 40px));\n\n min-height: 64px;\n\n padding: 8px 20px;\n\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n border:\n 1px solid rgba(213,162,60,.32);\n\n border-radius: 10px;\n\n overflow: hidden;\n\n background:\n linear-gradient(\n 180deg,\n rgba(36,47,50,.95),\n rgba(8,14,16,.95)\n );\n\n box-shadow:\n 0 15px 40px rgba(0,0,0,.32),\n inset 0 1px rgba(255,255,255,.08);\n\n backdrop-filter: blur(16px);\n}\n\n\n\/* Subtiele lichtreflectie *\/\n\n.topbar::after {\n content: \"\";\n\n position: absolute;\n\n top: -100%;\n bottom: -100%;\n\n width: 80px;\n\n left: -150px;\n\n transform:\n rotate(18deg);\n\n pointer-events: none;\n\n opacity: .16;\n\n background:\n linear-gradient(\n 90deg,\n transparent,\n rgba(255,255,255,.22),\n transparent\n );\n\n animation:\n metalReflection\n 11s ease-in-out infinite;\n}\n\n@keyframes metalReflection {\n 0%,\n 72% {\n left: -150px;\n }\n\n 100% {\n left: calc(100% + 150px);\n }\n}\n\n\n\/* ============================================================\n BRAND\n ============================================================ *\/\n\n.brand {\n display: flex;\n align-items: center;\n\n gap: 13px;\n}\n\n.shield {\n width: 29px;\n height: 33px;\n\n border:\n 2px solid #f2eadd;\n\n border-radius:\n 7px 7px 13px 13px;\n\n background:\n linear-gradient(\n 145deg,\n var(--red) 0 47%,\n #fff 47% 57%,\n #076391 57%\n );\n\n box-shadow:\n 0 0 15px rgba(255,255,255,.12),\n inset 0 0 5px rgba(255,255,255,.15);\n}\n\n.brand-name {\n font-family:\n Georgia,\n \"Times New Roman\",\n serif;\n\n font-size: 18px;\n font-weight: 700;\n\n letter-spacing: .04em;\n}\n\n.brand-name span {\n color: var(--copper-light);\n}\n\n\n\/* ============================================================\n HEADER TITLE\n ============================================================ *\/\n\n.header-title {\n font-family:\n Georgia,\n \"Times New Roman\",\n serif;\n\n font-size: 15px;\n\n letter-spacing: .06em;\n\n color: #e8dcc8;\n}\n\n.header-title strong {\n color: var(--copper-light);\n}\n\n\n\/* ============================================================\n STATUS\n ============================================================ *\/\n\n.status {\n display: flex;\n align-items: center;\n\n gap: 10px;\n\n color: #b6c0bd;\n\n font-size: 9px;\n\n text-transform: uppercase;\n\n letter-spacing: .2em;\n}\n\n.status-light {\n width: 8px;\n height: 8px;\n\n border-radius: 50%;\n\n background: var(--cyan);\n\n box-shadow:\n 0 0 7px var(--cyan),\n 0 0 16px rgba(37,199,233,.5);\n\n animation:\n pulse 2s infinite;\n}\n\n@keyframes pulse {\n 0%,\n 100% {\n opacity: .5;\n transform: scale(.9);\n }\n\n 50% {\n opacity: 1;\n transform: scale(1.2);\n }\n}\n\n\n\/* ============================================================\n SIDE NAVIGATION\n ============================================================ *\/\n\n.slide-nav {\n position: fixed;\n\n z-index: 1600;\n\n top: 50%;\n right: 28px;\n\n transform:\n translateY(-50%);\n\n display: flex;\n\n flex-direction: column;\n align-items: center;\n\n gap: 14px;\n}\n\n.slide-nav::before {\n content: \"\";\n\n position: absolute;\n\n top: 15px;\n bottom: 15px;\n\n width: 1px;\n\n background:\n linear-gradient(\n transparent,\n rgba(213,162,60,.55),\n transparent\n );\n}\n\n.nav-dot {\n position: relative;\n\n z-index: 2;\n\n width: 14px;\n height: 14px;\n\n padding: 0;\n\n border-radius: 50%;\n\n border:\n 1px solid var(--button-border);\n\n background:\n linear-gradient(\n 180deg,\n var(--button-bg-top),\n var(--button-bg-bottom)\n );\n\n box-shadow:\n 0 4px 10px rgba(0,0,0,.26),\n inset 0 1px rgba(255,255,255,.08);\n\n cursor: pointer;\n\n transition:\n transform .25s ease,\n border-color .25s ease,\n background .25s ease,\n box-shadow .25s ease;\n}\n\n.nav-dot:hover {\n transform:\n scale(1.3);\n\n border-color:\n var(--button-accent);\n\n background:\n linear-gradient(\n 180deg,\n var(--button-bg-hover-top),\n var(--button-bg-hover-bottom)\n );\n\n box-shadow:\n 0 0 0 4px rgba(213,162,60,.10),\n 0 0 14px rgba(240,173,85,.20);\n}\n\n.nav-dot.active {\n background:\n linear-gradient(\n 180deg,\n #70502c,\n #2a2118\n );\n\n border-color:\n #f4bf72;\n\n box-shadow:\n 0 0 0 5px rgba(213,162,60,.12),\n 0 0 15px rgba(240,173,85,.42),\n inset 0 1px rgba(255,255,255,.12);\n}\n\n\n\/* ============================================================\n SLIDES\n ============================================================ *\/\n\n.slide {\n position: relative;\n\n width: 100%;\n\n min-height: 100vh;\n\n display: grid;\n\n place-items: center;\n\n padding:\n 115px\n clamp(25px,7vw,110px)\n 75px;\n\n scroll-snap-align: start;\n scroll-snap-stop: always;\n\n overflow: hidden;\n}\n\n.slide:nth-of-type(even) {\n background:\n radial-gradient(\n circle at 20% 50%,\n rgba(201,30,36,.075),\n transparent 31%\n );\n}\n\n.slide:nth-of-type(odd) {\n background:\n radial-gradient(\n circle at 80% 50%,\n rgba(0,106,147,.085),\n transparent 31%\n );\n}\n\n.slide::after {\n content: \"\";\n\n position: absolute;\n\n z-index: 0;\n\n width: 70%;\n height: 1px;\n\n left: 15%;\n top: 50%;\n\n opacity: .12;\n\n background:\n linear-gradient(\n 90deg,\n transparent,\n var(--copper-light),\n transparent\n );\n\n box-shadow:\n 0 0 20px var(--copper);\n}\n\n\n\/* ============================================================\n PIPES\n ============================================================ *\/\n\n.pipe {\n position: absolute;\n\n width: 8px;\n\n opacity: .48;\n\n pointer-events: none;\n\n border-left:\n 2px solid #875923;\n\n border-right:\n 2px solid #4e3015;\n\n background:\n linear-gradient(\n 90deg,\n #4e2b14,\n #d18d40 45%,\n #67401d\n );\n\n box-shadow:\n 0 0 9px rgba(0,0,0,.7);\n}\n\n.pipe-left {\n left: 34px;\n\n top: 15%;\n bottom: 14%;\n}\n\n.pipe-right {\n right: 55px;\n\n top: 13%;\n\n height: 38%;\n}\n\n.pipe::before,\n.pipe::after {\n content: \"\";\n\n position: absolute;\n\n left: 50%;\n\n transform:\n translateX(-50%);\n\n width: 18px;\n height: 9px;\n\n border:\n 1px solid #be7b32;\n\n background:\n linear-gradient(\n #8a5523,\n #e2a253,\n #643a17\n );\n}\n\n.pipe::before {\n top: 15%;\n}\n\n.pipe::after {\n bottom: 17%;\n}\n\n\n\/* ============================================================\n GEARS\n ============================================================ *\/\n\n.gear {\n position: absolute;\n\n pointer-events: none;\n\n border-radius: 50%;\n\n border:\n 9px dotted rgba(195,125,55,.30);\n\n box-shadow:\n inset 0 0 0 7px rgba(82,49,20,.32),\n 0 0 0 3px rgba(209,145,65,.07);\n\n animation:\n rotateGear\n 25s linear infinite;\n}\n\n.gear::before {\n content: \"\";\n\n position: absolute;\n\n inset: 29%;\n\n border-radius: 50%;\n\n border:\n 3px solid rgba(202,139,63,.35);\n}\n\n.gear-a {\n width: 190px;\n height: 190px;\n\n top: 17%;\n right: -78px;\n}\n\n.gear-b {\n width: 100px;\n height: 100px;\n\n bottom: 8%;\n left: -37px;\n\n animation-direction: reverse;\n\n animation-duration: 19s;\n}\n\n.gear-c {\n width: 72px;\n height: 72px;\n\n bottom: 26%;\n right: 5%;\n\n animation-duration: 16s;\n}\n\n@keyframes rotateGear {\n to {\n transform:\n rotate(360deg);\n }\n}\n\n\n\/* ============================================================\n CONTENT\n ============================================================ *\/\n\n.slide-inner {\n position: relative;\n\n z-index: 10;\n\n width:\n min(1200px,100%);\n\n display: grid;\n\n grid-template-columns:\n minmax(230px,.58fr)\n minmax(350px,1fr);\n\n align-items: center;\n\n gap:\n clamp(35px,6vw,100px);\n}\n\n\n\/* ============================================================\n COPY\n ============================================================ *\/\n\n.slide-copy {\n opacity: 0;\n\n transform:\n translateX(-30px);\n\n transition:\n opacity var(--transition),\n transform var(--transition);\n}\n\n.slide.visible\n.slide-copy {\n opacity: 1;\n\n transform:\n translateX(0);\n}\n\n\n\/* ============================================================\n EYEBROW\n ============================================================ *\/\n\n.eyebrow {\n display: flex;\n\n align-items: center;\n\n gap: 12px;\n\n margin-bottom: 18px;\n\n color:\n var(--copper-light);\n\n font-size: 10px;\n font-weight: 800;\n\n text-transform: uppercase;\n\n letter-spacing: .23em;\n}\n\n.eyebrow::before {\n content: \"\";\n\n width: 42px;\n height: 2px;\n\n background:\n linear-gradient(\n 90deg,\n var(--red),\n var(--copper-light)\n );\n}\n\n\n\/* ============================================================\n PAGE NUMBER\n ============================================================ *\/\n\n.page-number {\n margin-bottom: 9px;\n\n font-family:\n Georgia,\n serif;\n\n font-size:\n clamp(70px,9vw,135px);\n\n font-weight: 700;\n\n line-height: .8;\n\n color: transparent;\n\n -webkit-text-stroke:\n 1px rgba(213,162,60,.42);\n\n opacity: .7;\n}\n\n\n\/* ============================================================\n TITLES - WIT\n ============================================================ *\/\n\n.slide-copy h2 {\n margin: 0;\n\n max-width: 470px;\n\n font-family:\n Georgia,\n \"Times New Roman\",\n serif;\n\n font-size:\n clamp(32px,4vw,62px);\n\n font-weight: 700;\n\n line-height: .98;\n\n color:\n var(--white);\n\n text-shadow:\n 0 2px 4px rgba(0,0,0,.55),\n 0 0 24px rgba(255,255,255,.035);\n}\n\n.slide-copy h2 .accent {\n display: block;\n\n color:\n var(--copper-light);\n\n text-shadow:\n 0 2px 4px rgba(0,0,0,.6),\n 0 0 25px rgba(240,173,85,.09);\n}\n\n\n\/* ============================================================\n DESCRIPTION\n ============================================================ *\/\n\n.slide-copy p {\n max-width: 420px;\n\n margin:\n 24px 0 0;\n\n color:\n var(--muted);\n\n font-size: 15px;\n\n line-height: 1.7;\n}\n\n\n\/* ============================================================\n CCTV ACADEMY LINK\n ============================================================ *\/\n\n.course-link {\n appearance: none;\n\n display: inline-flex;\n\n align-items: center;\n justify-content: center;\n\n gap: 10px;\n\n margin-top: 23px;\n\n padding:\n 11px 16px;\n\n border:\n 1px solid var(--button-border);\n\n border-radius:\n 5px;\n\n color:\n var(--button-text);\n\n background:\n linear-gradient(\n 180deg,\n var(--button-bg-top),\n var(--button-bg-bottom)\n );\n\n box-shadow:\n var(--button-shadow);\n\n font-size: 9px;\n font-weight: 800;\n\n letter-spacing: .15em;\n\n text-transform: uppercase;\n\n text-decoration: none;\n\n transition:\n color .25s ease,\n border-color .25s ease,\n background .25s ease,\n transform .25s ease,\n box-shadow .25s ease;\n}\n\n.course-link::before {\n content: \"\";\n\n width: 7px;\n height: 7px;\n\n flex:\n 0 0 7px;\n\n border-radius: 50%;\n\n background:\n var(--button-accent);\n\n box-shadow:\n 0 0 8px rgba(240,173,85,.55),\n 0 0 16px rgba(240,173,85,.18);\n}\n\n.course-link::after {\n content: \"\u2192\";\n\n margin-left: 3px;\n\n color:\n var(--button-accent);\n\n font-size: 13px;\n\n transition:\n transform .25s ease,\n color .25s ease;\n}\n\n.course-link:hover {\n color:\n #fff;\n\n transform:\n translateY(-2px);\n\n border-color:\n var(--button-accent);\n\n background:\n linear-gradient(\n 180deg,\n var(--button-bg-hover-top),\n var(--button-bg-hover-bottom)\n );\n\n box-shadow:\n var(--button-shadow-hover);\n}\n\n.course-link:hover::after {\n color:\n #ffd39a;\n\n transform:\n translateX(3px);\n}\n\n\n\/* ============================================================\n DOWNLOAD BUTTON\n ============================================================ *\/\n\n.download-wrap {\n margin-top: 15px;\n}\n\n.download-button {\n appearance: none;\n\n display: inline-flex;\n\n align-items: center;\n justify-content: center;\n\n gap: 11px;\n\n padding:\n 13px 18px;\n\n border:\n 1px solid var(--button-border);\n\n border-radius:\n 5px;\n\n color:\n var(--button-text);\n\n background:\n linear-gradient(\n 180deg,\n var(--button-bg-top),\n var(--button-bg-bottom)\n );\n\n box-shadow:\n var(--button-shadow);\n\n font-family: inherit;\n\n font-size: 10px;\n font-weight: 800;\n\n letter-spacing: .13em;\n\n text-transform: uppercase;\n\n cursor: pointer;\n\n transition:\n color .25s ease,\n border-color .25s ease,\n background .25s ease,\n transform .25s ease,\n box-shadow .25s ease;\n}\n\n.download-button:hover {\n transform:\n translateY(-2px);\n\n color:\n #fff;\n\n border-color:\n var(--button-accent);\n\n background:\n linear-gradient(\n 180deg,\n var(--button-bg-hover-top),\n var(--button-bg-hover-bottom)\n );\n\n box-shadow:\n var(--button-shadow-hover);\n}\n\n.download-button:disabled {\n opacity: .55;\n\n cursor: wait;\n\n transform: none;\n}\n\n.download-icon {\n width: 21px;\n height: 21px;\n\n display: grid;\n\n place-items: center;\n\n flex:\n 0 0 21px;\n\n border:\n 1px solid rgba(240,173,85,.48);\n\n border-radius: 50%;\n\n color:\n #fff8ed;\n\n background:\n linear-gradient(\n 180deg,\n #76512c,\n #3a281a\n );\n\n font-size: 13px;\n\n box-shadow:\n 0 0 12px rgba(240,173,85,.18),\n inset 0 1px rgba(255,255,255,.10);\n}\n\n\/* Toegankelijke focus, visueel in dezelfde koper-bruine stijl *\/\n.course-link:focus-visible,\n.download-button:focus-visible,\n.nav-dot:focus-visible,\n.cctv-language-switcher button:focus-visible {\n outline:\n 2px solid var(--button-accent);\n\n outline-offset:\n 3px;\n}\n\n\n\/* ============================================================\n BROCHURE\n ============================================================ *\/\n\n.brochure-stage {\n position: relative;\n\n width:\n min(520px,72vh,100%);\n\n opacity: 0;\n\n transform:\n perspective(1200px)\n rotateY(6deg)\n translateY(45px)\n scale(.96);\n\n transition:\n opacity 900ms ease,\n transform 1000ms cubic-bezier(.18,.8,.2,1);\n\n will-change:\n transform;\n}\n\n.slide.visible\n.brochure-stage {\n opacity: 1;\n\n transform:\n perspective(1200px)\n rotateY(0)\n translateY(0)\n scale(1);\n}\n\n\n\/* ============================================================\n GLOW\n ============================================================ *\/\n\n.brochure-stage::before {\n content: \"\";\n\n position: absolute;\n\n z-index: -2;\n\n inset: 8%;\n\n border-radius: 50%;\n\n opacity: .15;\n\n filter:\n blur(50px);\n\n background:\n radial-gradient(\n circle,\n rgba(240,173,85,.7),\n rgba(0,105,145,.15) 45%,\n transparent 72%\n );\n\n animation:\n posterGlow\n 6s ease-in-out infinite;\n}\n\n@keyframes posterGlow {\n 0%,\n 100% {\n opacity: .10;\n transform: scale(.96);\n }\n\n 50% {\n opacity: .18;\n transform: scale(1.03);\n }\n}\n\n\n\/* ============================================================\n POSTER SHADOW\n ============================================================ *\/\n\n.brochure-shadow {\n position: absolute;\n\n left: 7%;\n right: 7%;\n\n bottom: -30px;\n\n height: 50px;\n\n border-radius: 50%;\n\n background:\n rgba(0,0,0,.75);\n\n filter:\n blur(21px);\n\n transform:\n scaleY(.55);\n}\n\n\n\/* ============================================================\n METAL FRAME\n ============================================================ *\/\n\n.page-frame {\n position: relative;\n\n width: 100%;\n\n aspect-ratio:\n 1 \/ 1.41421356;\n\n padding: 9px;\n\n overflow: hidden;\n\n border-radius:\n 8px;\n\n background:\n linear-gradient(\n 135deg,\n #4e3520,\n #d9a45a 12%,\n #62401e 28%,\n #e0ac60 45%,\n #67421e 67%,\n #c68d45 84%,\n #4a301a\n );\n\n box-shadow:\n 0 35px 60px rgba(0,0,0,.52),\n 0 6px 16px rgba(0,0,0,.45),\n 0 0 0 1px rgba(255,224,156,.22),\n inset 0 0 0 1px rgba(255,255,255,.24);\n}\n\n.page-frame::before {\n content: \"\";\n\n position: absolute;\n\n inset: 4px;\n\n z-index: 5;\n\n pointer-events: none;\n\n border:\n 1px solid rgba(40,22,8,.7);\n\n border-radius:\n 4px;\n}\n\n\n\/* ============================================================\n LIGHT SWEEP\n ============================================================ *\/\n\n.page-frame::after {\n content: \"\";\n\n position: absolute;\n\n z-index: 20;\n\n pointer-events: none;\n\n top: -30%;\n bottom: -30%;\n\n left: -50%;\n\n width: 22%;\n\n opacity: .10;\n\n transform:\n rotate(14deg);\n\n background:\n linear-gradient(\n 90deg,\n transparent,\n rgba(255,255,255,.7),\n transparent\n );\n\n animation:\n posterSweep\n 9s ease-in-out infinite;\n}\n\n@keyframes posterSweep {\n 0%,\n 65% {\n left: -50%;\n }\n\n 100% {\n left: 135%;\n }\n}\n\n\n\/* ============================================================\n POSTER IMAGE\n ============================================================ *\/\n\n.brochure-page {\n position: relative;\n\n width: 100%;\n height: 100%;\n\n overflow: hidden;\n\n border-radius: 2px;\n\n background-repeat:\n no-repeat;\n\n background-size:\n 200% 100%;\n\n background-color:\n #e7d6b6;\n\n box-shadow:\n inset 0 0 30px rgba(84,42,10,.12);\n}\n\n.brochure-page::after {\n content: \"\";\n\n position: absolute;\n\n inset: 0;\n\n pointer-events: none;\n\n background:\n linear-gradient(\n 100deg,\n rgba(255,255,255,.055),\n transparent 17%,\n transparent 80%,\n rgba(0,0,0,.06)\n );\n}\n\n\n\/* ============================================================\n RIVETS\n ============================================================ *\/\n\n.rivet {\n position: absolute;\n\n z-index: 30;\n\n width: 9px;\n height: 9px;\n\n border-radius: 50%;\n\n border:\n 1px solid #3d2917;\n\n background:\n radial-gradient(\n circle at 35% 30%,\n #f5cf87,\n #8c5e29 48%,\n #2f2014 75%\n );\n\n box-shadow:\n 0 1px 2px #000,\n inset 0 0 2px rgba(255,255,255,.6);\n}\n\n.r1 {\n top: 8px;\n left: 8px;\n}\n\n.r2 {\n top: 8px;\n right: 8px;\n}\n\n.r3 {\n bottom: 8px;\n left: 8px;\n}\n\n.r4 {\n bottom: 8px;\n right: 8px;\n}\n\n\n\/* ============================================================\n PARTICLES\n ============================================================ *\/\n\n.particle {\n position: absolute;\n\n z-index: 1;\n\n width: 2px;\n height: 2px;\n\n border-radius: 50%;\n\n pointer-events: none;\n\n opacity: 0;\n\n background:\n var(--copper-light);\n\n box-shadow:\n 0 0 5px var(--copper-light);\n\n animation:\n particleFloat\n var(--particle-duration,9s)\n linear infinite;\n\n animation-delay:\n var(--particle-delay,0s);\n}\n\n@keyframes particleFloat {\n 0% {\n opacity: 0;\n\n transform:\n translateY(50px)\n translateX(0);\n }\n\n 20% {\n opacity: .22;\n }\n\n 70% {\n opacity: .08;\n }\n\n 100% {\n opacity: 0;\n\n transform:\n translateY(-180px)\n translateX(25px);\n }\n}\n\n\n\/* ============================================================\n SLIDE FOOTER\n ============================================================ *\/\n\n.slide-footer {\n position: absolute;\n\n z-index: 20;\n\n left: 50%;\n bottom: 20px;\n\n transform:\n translateX(-50%);\n\n width:\n min(1150px,calc(100% - 80px));\n\n display: flex;\n\n align-items: center;\n justify-content: space-between;\n\n color:\n rgba(255,255,255,.36);\n\n font-size: 9px;\n font-weight: 600;\n\n letter-spacing: .2em;\n\n text-transform: uppercase;\n}\n\n.scroll-hint {\n display: flex;\n\n align-items: center;\n\n gap: 10px;\n}\n\n.mouse {\n position: relative;\n\n width: 19px;\n height: 29px;\n\n border:\n 1px solid rgba(255,255,255,.38);\n\n border-radius:\n 12px;\n}\n\n.mouse::after {\n content: \"\";\n\n position: absolute;\n\n top: 6px;\n left: 50%;\n\n width: 2px;\n height: 5px;\n\n border-radius: 5px;\n\n background:\n var(--copper-light);\n\n transform:\n translateX(-50%);\n\n animation:\n mouseWheel\n 1.6s infinite;\n}\n\n@keyframes mouseWheel {\n 0% {\n opacity: 0;\n\n transform:\n translate(-50%,-3px);\n }\n\n 35% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0;\n\n transform:\n translate(-50%,8px);\n }\n}\n\n\n\/* ============================================================\n COPYRIGHT\n ============================================================ *\/\n\n.academy-copyright {\n position: relative;\n\n z-index: 100;\n\n padding:\n 0 40px 32px;\n\n background:\n linear-gradient(\n 180deg,\n rgba(7,12,14,0),\n #070c0e 30%\n );\n}\n\n.copyright-line {\n width:\n min(1180px,100%);\n\n height: 1px;\n\n margin:\n 0 auto 24px;\n\n background:\n linear-gradient(\n 90deg,\n transparent,\n rgba(213,162,60,.45),\n rgba(39,201,235,.22),\n transparent\n );\n}\n\n.copyright-inner {\n width:\n min(1180px,100%);\n\n margin:\n 0 auto;\n\n display: flex;\n\n align-items: center;\n justify-content: space-between;\n\n gap: 25px;\n\n color:\n rgba(255,255,255,.42);\n\n font-size: 9px;\n font-weight: 600;\n\n letter-spacing: .12em;\n\n text-transform: uppercase;\n}\n\n.copyright-brand {\n display: flex;\n\n align-items: center;\n\n gap: 10px;\n}\n\n.copyright-brand strong {\n color:\n rgba(255,255,255,.72);\n}\n\n.copyright-separator {\n margin:\n 0 7px;\n\n color:\n var(--copper-light);\n}\n\n.copyright-shield {\n width: 18px;\n height: 21px;\n\n display:\n inline-block;\n\n flex:\n 0 0 auto;\n\n border:\n 1px solid rgba(255,255,255,.7);\n\n border-radius:\n 4px 4px 8px 8px;\n\n background:\n linear-gradient(\n 145deg,\n var(--red) 0 47%,\n #fff 47% 57%,\n #076391 57%\n );\n\n box-shadow:\n 0 0 10px rgba(255,255,255,.08);\n}\n\n.copyright-link {\n display: inline-flex;\n\n align-items: center;\n\n gap: 7px;\n\n color:\n #79dced;\n\n text-decoration: none;\n\n transition:\n color .25s ease,\n transform .25s ease;\n}\n\n.copyright-link span {\n color:\n var(--copper-light);\n\n transition:\n transform .25s ease;\n}\n\n.copyright-link:hover {\n color:\n #d1f8ff;\n\n transform:\n translateY(-1px);\n}\n\n.copyright-link:hover span {\n transform:\n translateX(3px);\n}\n\n\n\/* ============================================================\n DOWNLOAD STATUS\n ============================================================ *\/\n\n.download-status {\n position: fixed;\n\n z-index: 20000;\n\n left: 50%;\n bottom: 28px;\n\n transform:\n translate(-50%,30px);\n\n padding:\n 13px 20px;\n\n border:\n 1px solid rgba(240,173,85,.45);\n\n border-radius:\n 6px;\n\n background:\n rgba(12,17,19,.97);\n\n color:\n #f3e5ce;\n\n font-size:\n 12px;\n\n box-shadow:\n 0 15px 40px rgba(0,0,0,.45);\n\n opacity: 0;\n\n visibility: hidden;\n\n transition:\n .3s ease;\n}\n\n.download-status.show {\n opacity: 1;\n\n visibility: visible;\n\n transform:\n translate(-50%,0);\n}\n\n.download-status.success {\n border-color:\n rgba(39,201,235,.6);\n}\n\n.download-status.error {\n border-color:\n rgba(201,30,36,.8);\n}\n\n\n\/* ============================================================\n RESPONSIVE\n ============================================================ *\/\n\n@media (max-width: 900px) {\n\n html {\n scroll-snap-type:\n y proximity;\n }\n\n .topbar {\n top: 12px;\n\n width:\n calc(100vw - 24px);\n\n min-height:\n 54px;\n }\n\n .header-title,\n .status {\n display: none;\n }\n\n .slide-nav {\n right: 9px;\n }\n\n .slide {\n min-height:\n 100svh;\n\n padding:\n 90px\n 32px\n 65px;\n }\n\n .slide-inner {\n grid-template-columns:\n 1fr;\n\n gap:\n 30px;\n }\n\n .slide-copy {\n width:\n min(520px,100%);\n\n margin:\n 0 auto;\n\n text-align:\n center;\n }\n\n .eyebrow {\n justify-content:\n center;\n }\n\n .slide-copy h2,\n .slide-copy p {\n margin-left:\n auto;\n\n margin-right:\n auto;\n }\n\n .page-number {\n position:\n absolute;\n\n top:\n -10px;\n\n left:\n 50%;\n\n transform:\n translateX(-50%);\n\n opacity:\n .16;\n\n z-index:\n -1;\n }\n\n .brochure-stage {\n width:\n min(450px,75vw);\n\n margin:\n 0 auto;\n }\n\n .pipe {\n display: none;\n }\n\n .gear-a {\n right: -120px;\n }\n\n .gear-b {\n left: -70px;\n }\n\n .slide-footer {\n width:\n calc(100% - 50px);\n\n justify-content:\n center;\n }\n\n .slide-footer > span:first-child {\n display: none;\n }\n\n .copyright-inner {\n flex-direction:\n column;\n\n justify-content:\n center;\n\n text-align:\n center;\n\n gap:\n 12px;\n }\n}\n\n\n@media (max-width: 560px) {\n\n .slide {\n padding:\n 80px\n 27px\n 60px;\n }\n\n .slide-inner {\n gap:\n 20px;\n }\n\n .slide-copy h2 {\n font-size:\n clamp(27px,8.5vw,40px);\n }\n\n .slide-copy p {\n margin-top:\n 13px;\n\n font-size:\n 13px;\n\n line-height:\n 1.55;\n }\n\n .eyebrow {\n margin-bottom:\n 10px;\n\n font-size:\n 8px;\n }\n\n .course-link {\n margin-top:\n 14px;\n }\n\n .download-wrap {\n margin-top:\n 11px;\n }\n\n .download-button {\n padding:\n 11px 14px;\n\n font-size:\n 9px;\n }\n\n .brochure-stage {\n width:\n min(385px,78vw);\n }\n\n .slide-nav {\n right: 6px;\n\n gap:\n 10px;\n }\n\n .nav-dot {\n width: 11px;\n height: 11px;\n }\n\n .academy-copyright {\n padding:\n 5px 25px 28px;\n }\n\n .copyright-brand {\n flex-direction:\n column;\n }\n\n .copyright-separator {\n display: none;\n }\n}\n\n\n\/* ============================================================\n REDUCED MOTION\n ============================================================ *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n html {\n scroll-behavior:\n auto;\n }\n\n *,\n *::before,\n *::after {\n animation-duration:\n .001ms !important;\n\n animation-iteration-count:\n 1 !important;\n\n transition-duration:\n .001ms !important;\n }\n}\n\n\n\/* ============================================================\n CCTV ACADEMY \u00b7 LANGUAGE SWITCHER\n ============================================================ *\/\n.cctv-language-bar{\n position:relative;\n z-index:3;\n display:flex;\n align-items:center;\n gap:8px;\n margin-left:auto;\n margin-right:14px;\n color:#dbe7e5;\n font-size:10px;\n font-weight:800;\n letter-spacing:.04em;\n}\n.cctv-language-bar__label{\n color:#8f9d9b;\n white-space:nowrap;\n}\n.cctv-language-switcher{\n display:inline-flex;\n overflow:hidden;\n border:1px solid var(--button-border-soft);\n border-radius:6px;\n background:\n linear-gradient(\n 180deg,\n var(--button-bg-top),\n var(--button-bg-bottom)\n );\n box-shadow:\n 0 6px 16px rgba(0,0,0,.20),\n inset 0 1px rgba(255,255,255,.07);\n}\n.cctv-language-switcher button{\n appearance:none;\n border:0;\n border-right:1px solid rgba(240,173,85,.22);\n padding:6px 9px;\n background:transparent;\n color:var(--button-text);\n font:inherit;\n font-size:10px;\n font-weight:900;\n cursor:pointer;\n transition:\n color .18s ease,\n background .18s ease,\n box-shadow .18s ease;\n}\n.cctv-language-switcher button:last-child{\n border-right:0;\n}\n.cctv-language-switcher button:hover{\n background:rgba(240,173,85,.12);\n color:#fff;\n}\n.cctv-language-switcher button.is-active{\n background:\n linear-gradient(\n 180deg,\n #76512c,\n #3a281a\n );\n color:#fff8ed;\n box-shadow:\n inset 0 1px rgba(255,255,255,.10),\n inset 0 0 12px rgba(0,0,0,.18);\n}\n@media(max-width:1050px){\n .cctv-language-bar__label{display:none;}\n}\n@media(max-width:900px){\n .cctv-language-bar{\n margin-left:auto;\n margin-right:0;\n }\n}\n@media(max-width:560px){\n .topbar{\n padding-left:12px;\n padding-right:12px;\n }\n .brand-name{\n font-size:14px;\n }\n .cctv-language-switcher button{\n padding:5px 7px;\n font-size:9px;\n }\n}\n\n\n\/* ============================================================\n HOME LINK \u00b7 CCTV ACADEMY LOGO\n Het volledige logo linksboven is klikbaar.\n ============================================================ *\/\n.brand-home-link{\n color:inherit;\n text-decoration:none;\n cursor:pointer;\n border-radius:8px;\n padding:4px 6px;\n margin-left:-6px;\n transition:\n transform .2s ease,\n background .2s ease,\n box-shadow .2s ease;\n}\n\n.brand-home-link:hover{\n transform:translateY(-1px);\n background:rgba(240,173,85,.07);\n box-shadow:0 0 0 1px rgba(240,173,85,.14);\n}\n\n.brand-home-link:focus-visible{\n outline:2px solid var(--copper-light);\n outline-offset:3px;\n}\n\n\/* ============================================================\n HEADER SPACING FIX\n Zorgt dat merknaam en paginatitel nooit tegen elkaar staan.\n ============================================================ *\/\n.topbar{\n justify-content:flex-start;\n column-gap:clamp(20px,2.6vw,38px);\n}\n\n.brand{\n flex:0 0 auto;\n}\n\n.brand-name,\n.header-title{\n white-space:nowrap;\n}\n\n.header-title{\n flex:0 1 auto;\n margin-right:auto;\n}\n\n.cctv-language-bar{\n flex:0 0 auto;\n margin-left:0;\n margin-right:0;\n}\n\n.status{\n flex:0 0 auto;\n}\n\n@media (max-width:1100px){\n .topbar{\n column-gap:20px;\n }\n\n .header-title{\n font-size:14px;\n }\n}\n\n@media (max-width:900px){\n .topbar{\n column-gap:14px;\n }\n}\n\n<\/style>\n<\/head>\n<body class=\"cctv-course-page\" lang=\"nl\">\n<!-- ============================================================\n ATMOSPHERE\n ============================================================ -->\n<div class=\"scanlines\"><\/div>\n<div class=\"ambient-light\" id=\"ambientLight\">\n<\/div>\n<!-- ============================================================\n PROGRESS\n ============================================================ -->\n<div class=\"progress-track\">\n<div class=\"progress-bar\" id=\"progressBar\">\n<\/div>\n<\/div>\n<!-- ============================================================\n HEADER\n ============================================================ -->\n<header class=\"topbar\">\n<a class=\"brand brand-home-link\" href=\"https:\/\/cctvacademy.be\/\" aria-label=\"Ga naar de homepage van CCTV Academy\">\n<div class=\"shield\"><\/div>\n<div class=\"brand-name\">\n CCTV\n <span>ACADEMY<\/span>\n<\/div>\n<\/a>\n<div class=\"header-title\">\n\n Van Beeld tot\n <strong>Intelligentie<\/strong>\n<\/div>\n<div aria-label=\"Taalkeuze \u00b7 S\u00e9lecteur de langue \u00b7 Language selector\" class=\"cctv-language-bar\"><span class=\"cctv-language-bar__label\">Taal \u00b7 Langue \u00b7 Language<\/span><div aria-label=\"NL \/ FR \/ EN\" class=\"cctv-language-switcher\" role=\"group\"><button aria-pressed=\"false\" data-lang=\"nl\" type=\"button\">NL<\/button><button aria-pressed=\"false\" data-lang=\"fr\" type=\"button\">FR<\/button><button aria-pressed=\"false\" data-lang=\"en\" type=\"button\">EN<\/button><\/div><\/div><div class=\"status\">\n<span class=\"status-light\"><\/span>\n\n Interactieve brochure\n\n <\/div>\n<\/header>\n<!-- ============================================================\n NAVIGATION\n ============================================================ -->\n<nav aria-label=\"Brochurepagina's\" class=\"slide-nav\">\n<button aria-label=\"Pagina 1\" class=\"nav-dot active\" data-target=\"slide-1\">\n<\/button>\n<button aria-label=\"Pagina 2\" class=\"nav-dot\" data-target=\"slide-2\">\n<\/button>\n<button aria-label=\"Pagina 3\" class=\"nav-dot\" data-target=\"slide-3\">\n<\/button>\n<button aria-label=\"Pagina 4\" class=\"nav-dot\" data-target=\"slide-4\">\n<\/button>\n<\/nav>\n<!-- ============================================================\n SLIDE 01\n VOORBLAD\n ============================================================ -->\n<section class=\"slide visible\" id=\"slide-1\">\n<div class=\"pipe pipe-left\"><\/div>\n<div class=\"pipe pipe-right\"><\/div>\n<div class=\"gear gear-a\"><\/div>\n<div class=\"gear gear-b\"><\/div>\n<span class=\"particle\" style=\"\n left:12%;\n bottom:12%;\n --particle-delay:0s;\n --particle-duration:10s;\n \">\n<\/span>\n<span class=\"particle\" style=\"\n left:19%;\n bottom:7%;\n --particle-delay:3s;\n --particle-duration:12s;\n \">\n<\/span>\n<span class=\"particle\" style=\"\n right:16%;\n bottom:15%;\n --particle-delay:6s;\n --particle-duration:11s;\n \">\n<\/span>\n<div class=\"slide-inner\">\n<div class=\"slide-copy\">\n<div class=\"eyebrow\">\n CCTV Academy\n <\/div>\n<div class=\"page-number\">\n 01\n <\/div>\n<h2>\n\n Van Beeld tot\n\n <span class=\"accent\">\n Intelligentie.\n <\/span>\n<\/h2>\n<p>\n\n Ontdek CCTV Academy en bouw stap voor stap\n praktijkgerichte kennis op rond camerabewaking,\n netwerken en intelligente beveiligingstechnologie.\n\n <\/p>\n<a aria-label=\"Ga naar CCTV Academy\" class=\"course-link\" href=\"https:\/\/cctvacademy.be\/\">\n\n Ontdek CCTV Academy\n\n <\/a>\n<div class=\"download-wrap\">\n<button class=\"download-button\" data-filename=\"CCTV-Academy-Voorblad.jpg\" data-image=\"\/wp-content\/uploads\/2026\/09\/CCTV_Academy_A3_liggend_folder-wkb260919-scaled.png\" data-side=\"right\" type=\"button\">\n<span class=\"download-icon\">\n \u2193\n <\/span>\n\n Download affiche als JPEG\n\n <\/button>\n<\/div>\n<\/div>\n<div class=\"brochure-stage\">\n<div class=\"brochure-shadow\"><\/div>\n<div class=\"page-frame\">\n<span class=\"rivet r1\"><\/span>\n<span class=\"rivet r2\"><\/span>\n<span class=\"rivet r3\"><\/span>\n<span class=\"rivet r4\"><\/span>\n<div aria-label=\"CCTV Academy voorblad\" class=\"brochure-page\" role=\"img\" style=\"\n background-image:\n url('\/wp-content\/uploads\/2026\/09\/CCTV_Academy_A3_liggend_folder-wkb260919-scaled.png');\n\n background-position:\n right center;\n \">\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"slide-footer\">\n<span>\n CCTV Academy \u00b7 01 \/ 04\n <\/span>\n<div class=\"scroll-hint\">\n<div class=\"mouse\"><\/div>\n<span>\n Scroll om te ontdekken\n <\/span>\n<\/div>\n<\/div>\n<\/section>\n<!-- ============================================================\n SLIDE 02\n CAMERA'S & BEELDKWALITEIT\n ============================================================ -->\n<section class=\"slide\" id=\"slide-2\">\n<div class=\"pipe pipe-left\"><\/div>\n<div class=\"gear gear-a\"><\/div>\n<div class=\"gear gear-c\"><\/div>\n<span class=\"particle\" style=\"\n left:14%;\n bottom:10%;\n --particle-delay:2s;\n --particle-duration:12s;\n \">\n<\/span>\n<span class=\"particle\" style=\"\n right:20%;\n bottom:8%;\n --particle-delay:5s;\n --particle-duration:10s;\n \">\n<\/span>\n<div class=\"slide-inner\">\n<div class=\"slide-copy\">\n<div class=\"eyebrow\">\n Camera fundamentals\n <\/div>\n<div class=\"page-number\">\n 02\n <\/div>\n<h2>\n\n Camera's &\n\n <span class=\"accent\">\n beeldkwaliteit.\n <\/span>\n<\/h2>\n<p>\n\n Sensoren, lenzen, kijkhoek, licht,\n contrast en scherpte. Begrijp welke\n technische elementen samen bepalen\n wat een camerasysteem werkelijk ziet.\n\n <\/p>\n<a aria-label=\"Ga naar CCTV Academy\" class=\"course-link\" href=\"https:\/\/cctvacademy.be\/\">\n\n Bekijk opleiding CCTV Basis\n\n <\/a>\n<div class=\"download-wrap\">\n<button class=\"download-button\" data-filename=\"CCTV-Academy-Cameras-Beeldkwaliteit.jpg\" data-image=\"\/wp-content\/uploads\/2026\/09\/CCTV_Academy_A3_liggend_folder-wkb260919-scaled.png\" data-side=\"left\" type=\"button\">\n<span class=\"download-icon\">\n \u2193\n <\/span>\n\n Download affiche als JPEG\n\n <\/button>\n<\/div>\n<\/div>\n<div class=\"brochure-stage\">\n<div class=\"brochure-shadow\"><\/div>\n<div class=\"page-frame\">\n<span class=\"rivet r1\"><\/span>\n<span class=\"rivet r2\"><\/span>\n<span class=\"rivet r3\"><\/span>\n<span class=\"rivet r4\"><\/span>\n<div aria-label=\"CCTV camera's en beeldkwaliteit\" class=\"brochure-page\" role=\"img\" style=\"\n background-image:\n url('\/wp-content\/uploads\/2026\/09\/CCTV_Academy_A3_liggend_folder-wkb260919-scaled.png');\n\n background-position:\n left center;\n \">\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"slide-footer\">\n<span>\n CCTV Academy \u00b7 02 \/ 04\n <\/span>\n<div class=\"scroll-hint\">\n<div class=\"mouse\"><\/div>\n<span>\n Scroll verder\n <\/span>\n<\/div>\n<\/div>\n<\/section>\n<!-- ============================================================\n SLIDE 03\n NETWERKEN VOOR CCTV\n ============================================================ -->\n<section class=\"slide\" id=\"slide-3\">\n<div class=\"pipe pipe-right\"><\/div>\n<div class=\"gear gear-a\"><\/div>\n<div class=\"gear gear-b\"><\/div>\n<span class=\"particle\" style=\"\n left:10%;\n bottom:14%;\n --particle-delay:1s;\n --particle-duration:11s;\n \">\n<\/span>\n<span class=\"particle\" style=\"\n left:25%;\n bottom:6%;\n --particle-delay:6s;\n --particle-duration:13s;\n \">\n<\/span>\n<div class=\"slide-inner\">\n<div class=\"slide-copy\">\n<div class=\"eyebrow\">\n IP & Networking\n <\/div>\n<div class=\"page-number\">\n 03\n <\/div>\n<h2>\n\n Netwerken\n\n <span class=\"accent\">\n voor CCTV.\n <\/span>\n<\/h2>\n<p>\n\n Van IP-adressen en subnetten tot PoE,\n switches, bandbreedte en praktische\n configuratie. Ontdek de netwerkbasis\n achter moderne camerasystemen.\n\n <\/p>\n<a aria-label=\"Ga naar CCTV Academy\" class=\"course-link\" href=\"https:\/\/cctvacademy.be\/\">\n\n Bekijk opleiding IP & Netwerken\n\n <\/a>\n<div class=\"download-wrap\">\n<button class=\"download-button\" data-filename=\"CCTV-Academy-Netwerken-voor-CCTV.jpg\" data-image=\"\/wp-content\/uploads\/2026\/09\/CCTV_Academy_binnenkant_A3_liggend_300dpi-wkb260919-scaled.png\" data-side=\"left\" type=\"button\">\n<span class=\"download-icon\">\n \u2193\n <\/span>\n\n Download affiche als JPEG\n\n <\/button>\n<\/div>\n<\/div>\n<div class=\"brochure-stage\">\n<div class=\"brochure-shadow\"><\/div>\n<div class=\"page-frame\">\n<span class=\"rivet r1\"><\/span>\n<span class=\"rivet r2\"><\/span>\n<span class=\"rivet r3\"><\/span>\n<span class=\"rivet r4\"><\/span>\n<div aria-label=\"Netwerken voor CCTV\" class=\"brochure-page\" role=\"img\" style=\"\n background-image:\n url('\/wp-content\/uploads\/2026\/09\/CCTV_Academy_binnenkant_A3_liggend_300dpi-wkb260919-scaled.png');\n\n background-position:\n left center;\n \">\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"slide-footer\">\n<span>\n CCTV Academy \u00b7 03 \/ 04\n <\/span>\n<div class=\"scroll-hint\">\n<div class=\"mouse\"><\/div>\n<span>\n Scroll verder\n <\/span>\n<\/div>\n<\/div>\n<\/section>\n<!-- ============================================================\n SLIDE 04\n OPLEIDINGSTRAJECTEN\n ============================================================ -->\n<section class=\"slide\" id=\"slide-4\">\n<div class=\"pipe pipe-left\"><\/div>\n<div class=\"pipe pipe-right\"><\/div>\n<div class=\"gear gear-a\"><\/div>\n<div class=\"gear gear-c\"><\/div>\n<span class=\"particle\" style=\"\n left:16%;\n bottom:8%;\n --particle-delay:3s;\n --particle-duration:12s;\n \">\n<\/span>\n<span class=\"particle\" style=\"\n right:13%;\n bottom:12%;\n --particle-delay:7s;\n --particle-duration:10s;\n \">\n<\/span>\n<div class=\"slide-inner\">\n<div class=\"slide-copy\">\n<div class=\"eyebrow\">\n Learning path\n <\/div>\n<div class=\"page-number\">\n 04\n <\/div>\n<h2>\n\n E\u00e9n logisch\n\n <span class=\"accent\">\n groeipad.\n <\/span>\n<\/h2>\n<p>\n\n Start waar jouw kennis begint:\n van CCTV-basis naar AI CCTV en verder\n naar geavanceerde toepassingen zoals\n MD, IVS en SMD.\n\n <\/p>\n<a aria-label=\"Ga naar CCTV Academy\" class=\"course-link\" href=\"https:\/\/cctvacademy.be\/\">\n\n Bekijk opleidingen AI CCTV\n\n <\/a>\n<div class=\"download-wrap\">\n<button class=\"download-button\" data-filename=\"CCTV-Academy-Opleidingstrajecten.jpg\" data-image=\"\/wp-content\/uploads\/2026\/09\/CCTV_Academy_binnenkant_A3_liggend_300dpi-wkb260919-scaled.png\" data-side=\"right\" type=\"button\">\n<span class=\"download-icon\">\n \u2193\n <\/span>\n\n Download affiche als JPEG\n\n <\/button>\n<\/div>\n<\/div>\n<div class=\"brochure-stage\">\n<div class=\"brochure-shadow\"><\/div>\n<div class=\"page-frame\">\n<span class=\"rivet r1\"><\/span>\n<span class=\"rivet r2\"><\/span>\n<span class=\"rivet r3\"><\/span>\n<span class=\"rivet r4\"><\/span>\n<div aria-label=\"CCTV Academy opleidingstrajecten\" class=\"brochure-page\" role=\"img\" style=\"\n background-image:\n url('\/wp-content\/uploads\/2026\/09\/CCTV_Academy_binnenkant_A3_liggend_300dpi-wkb260919-scaled.png');\n\n background-position:\n right center;\n \">\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"slide-footer\">\n<span>\n CCTV Academy \u00b7 04 \/ 04\n <\/span>\n<span>\n RAS | AIS Academy\n <\/span>\n<\/div>\n<\/section>\n<!-- ============================================================\n COPYRIGHT\n ============================================================ -->\n<footer class=\"academy-copyright\">\n<div class=\"copyright-line\"><\/div>\n<div class=\"copyright-inner\">\n<div class=\"copyright-brand\">\n<span class=\"copyright-shield\"><\/span>\n<span>\n<strong>CCTV Academy<\/strong>\n<span class=\"copyright-separator\">\n |\n <\/span>\n\n RAS \u00b7 AIS Academy\n\n <\/span>\n<\/div>\n<div class=\"copyright-text\">\n\n \u00a9\n <span id=\"copyrightYear\"><\/span>\n\n CCTV Academy \u00b7 Alle rechten voorbehouden.\n\n <\/div>\n<a aria-label=\"Ga naar de homepage van CCTV Academy\" class=\"copyright-link\" href=\"https:\/\/cctvacademy.be\/\">\n\n cctvacademy.be\n\n <span>\n \u2192\n <\/span>\n<\/a>\n<\/div>\n<\/footer>\n<!-- ============================================================\n DOWNLOAD STATUS\n ============================================================ -->\n<div aria-live=\"polite\" class=\"download-status\" id=\"downloadStatus\" role=\"status\">\n\n Affiche wordt voorbereid...\n\n<\/div>\n<script>\n(function(){\n \"use strict\";\n\n var STORAGE_KEY = \"cctv_academy_language\";\n var EVENT_NAME = \"cctvAcademyLanguageChange\";\n var root = document.body;\n if (!root) return;\n\n var translations = {\"fr\":{\"CCTV Academy | Van Beeld tot Intelligentie\":\"CCTV Academy | De l\u2019image \u00e0 l\u2019intelligence\",\"CCTV\":\"CCTV\",\"ACADEMY\":\"ACADEMY\",\"Van Beeld tot\":\"De l\u2019image \u00e0\",\"Intelligentie\":\"l\u2019intelligence\",\"Interactieve brochure\":\"Brochure interactive\",\"CCTV Academy\":\"CCTV Academy\",\"01\":\"01\",\"Intelligentie.\":\"l\u2019intelligence.\",\"Ontdek CCTV Academy en bouw stap voor stap praktijkgerichte kennis op rond camerabewaking, netwerken en intelligente beveiligingstechnologie.\":\"D\u00e9couvrez CCTV Academy et d\u00e9veloppez pas \u00e0 pas des connaissances pratiques en vid\u00e9osurveillance, r\u00e9seaux et technologies de s\u00e9curit\u00e9 intelligentes.\",\"Ontdek CCTV Academy\":\"D\u00e9couvrir CCTV Academy\",\"\u2193\":\"\u2193\",\"Download affiche als JPEG\":\"T\u00e9l\u00e9charger l\u2019affiche en JPEG\",\"CCTV Academy \u00b7 01 \/ 04\":\"CCTV Academy \u00b7 01 \/ 04\",\"Scroll om te ontdekken\":\"Faites d\u00e9filer pour d\u00e9couvrir\",\"Camera fundamentals\":\"Fondamentaux cam\u00e9ra\",\"02\":\"02\",\"Camera's &\":\"Cam\u00e9ras &\",\"beeldkwaliteit.\":\"qualit\u00e9 d\u2019image.\",\"Sensoren, lenzen, kijkhoek, licht, contrast en scherpte. Begrijp welke technische elementen samen bepalen wat een camerasysteem werkelijk ziet.\":\"Capteurs, objectifs, angle de vue, lumi\u00e8re, contraste et nettet\u00e9. Comprenez quels \u00e9l\u00e9ments techniques d\u00e9terminent ensemble ce qu\u2019un syst\u00e8me de cam\u00e9ras voit r\u00e9ellement.\",\"Bekijk opleiding CCTV Basis\":\"Voir la formation CCTV de base\",\"CCTV Academy \u00b7 02 \/ 04\":\"CCTV Academy \u00b7 02 \/ 04\",\"Scroll verder\":\"Continuer \u00e0 faire d\u00e9filer\",\"IP & Networking\":\"IP & R\u00e9seaux\",\"03\":\"03\",\"Netwerken\":\"R\u00e9seaux\",\"voor CCTV.\":\"pour la CCTV.\",\"Van IP-adressen en subnetten tot PoE, switches, bandbreedte en praktische configuratie. Ontdek de netwerkbasis achter moderne camerasystemen.\":\"Des adresses IP et sous-r\u00e9seaux au PoE, aux switches, \u00e0 la bande passante et \u00e0 la configuration pratique. D\u00e9couvrez les bases r\u00e9seau des syst\u00e8mes de cam\u00e9ras modernes.\",\"Bekijk opleiding IP & Netwerken\":\"Voir la formation IP & R\u00e9seaux\",\"CCTV Academy \u00b7 03 \/ 04\":\"CCTV Academy \u00b7 03 \/ 04\",\"Learning path\":\"Parcours d\u2019apprentissage\",\"04\":\"04\",\"E\u00e9n logisch\":\"Un parcours\",\"groeipad.\":\"de progression logique.\",\"Start waar jouw kennis begint: van CCTV-basis naar AI CCTV en verder naar geavanceerde toepassingen zoals MD, IVS en SMD.\":\"Commencez au niveau de vos connaissances : des bases CCTV \u00e0 la CCTV IA, puis aux applications avanc\u00e9es telles que MD, IVS et SMD.\",\"Bekijk opleidingen AI CCTV\":\"Voir les formations CCTV IA\",\"CCTV Academy \u00b7 04 \/ 04\":\"CCTV Academy \u00b7 04 \/ 04\",\"RAS | AIS Academy\":\"RAS | AIS Academy\",\"|\":\"|\",\"RAS \u00b7 AIS Academy\":\"RAS \u00b7 AIS Academy\",\"\u00a9\":\"\u00a9\",\"CCTV Academy \u00b7 Alle rechten voorbehouden.\":\"CCTV Academy \u00b7 Tous droits r\u00e9serv\u00e9s.\",\"cctvacademy.be\":\"cctvacademy.be\",\"\u2192\":\"\u2192\",\"Affiche wordt voorbereid...\":\"Pr\u00e9paration de l\u2019affiche...\"},\"en\":{\"CCTV Academy | Van Beeld tot Intelligentie\":\"CCTV Academy | From Image to Intelligence\",\"CCTV\":\"CCTV\",\"ACADEMY\":\"ACADEMY\",\"Van Beeld tot\":\"From Image to\",\"Intelligentie\":\"Intelligence\",\"Interactieve brochure\":\"Interactive brochure\",\"CCTV Academy\":\"CCTV Academy\",\"01\":\"01\",\"Intelligentie.\":\"Intelligence.\",\"Ontdek CCTV Academy en bouw stap voor stap praktijkgerichte kennis op rond camerabewaking, netwerken en intelligente beveiligingstechnologie.\":\"Discover CCTV Academy and build practical knowledge step by step in video surveillance, networking and intelligent security technology.\",\"Ontdek CCTV Academy\":\"Discover CCTV Academy\",\"\u2193\":\"\u2193\",\"Download affiche als JPEG\":\"Download poster as JPEG\",\"CCTV Academy \u00b7 01 \/ 04\":\"CCTV Academy \u00b7 01 \/ 04\",\"Scroll om te ontdekken\":\"Scroll to discover\",\"Camera fundamentals\":\"Camera fundamentals\",\"02\":\"02\",\"Camera's &\":\"Cameras &\",\"beeldkwaliteit.\":\"image quality.\",\"Sensoren, lenzen, kijkhoek, licht, contrast en scherpte. Begrijp welke technische elementen samen bepalen wat een camerasysteem werkelijk ziet.\":\"Sensors, lenses, field of view, light, contrast and sharpness. Understand which technical elements together determine what a camera system actually sees.\",\"Bekijk opleiding CCTV Basis\":\"View CCTV Basics training\",\"CCTV Academy \u00b7 02 \/ 04\":\"CCTV Academy \u00b7 02 \/ 04\",\"Scroll verder\":\"Keep scrolling\",\"IP & Networking\":\"IP & Networking\",\"03\":\"03\",\"Netwerken\":\"Networking\",\"voor CCTV.\":\"for CCTV.\",\"Van IP-adressen en subnetten tot PoE, switches, bandbreedte en praktische configuratie. Ontdek de netwerkbasis achter moderne camerasystemen.\":\"From IP addresses and subnets to PoE, switches, bandwidth and practical configuration. Discover the networking fundamentals behind modern camera systems.\",\"Bekijk opleiding IP & Netwerken\":\"View IP & Networking training\",\"CCTV Academy \u00b7 03 \/ 04\":\"CCTV Academy \u00b7 03 \/ 04\",\"Learning path\":\"Learning path\",\"04\":\"04\",\"E\u00e9n logisch\":\"One logical\",\"groeipad.\":\"growth path.\",\"Start waar jouw kennis begint: van CCTV-basis naar AI CCTV en verder naar geavanceerde toepassingen zoals MD, IVS en SMD.\":\"Start where your knowledge begins: from CCTV basics to AI CCTV and onward to advanced applications such as MD, IVS and SMD.\",\"Bekijk opleidingen AI CCTV\":\"View AI CCTV training\",\"CCTV Academy \u00b7 04 \/ 04\":\"CCTV Academy \u00b7 04 \/ 04\",\"RAS | AIS Academy\":\"RAS | AIS Academy\",\"|\":\"|\",\"RAS \u00b7 AIS Academy\":\"RAS \u00b7 AIS Academy\",\"\u00a9\":\"\u00a9\",\"CCTV Academy \u00b7 Alle rechten voorbehouden.\":\"CCTV Academy \u00b7 All rights reserved.\",\"cctvacademy.be\":\"cctvacademy.be\",\"\u2192\":\"\u2192\",\"Affiche wordt voorbereid...\":\"Preparing poster...\"}};\n var attributeTranslations = {\"fr\":{\"Brochurepagina's\":\"Pages de la brochure\",\"Pagina 1\":\"Page 1\",\"Pagina 2\":\"Page 2\",\"Pagina 3\":\"Page 3\",\"Pagina 4\":\"Page 4\",\"Ga naar CCTV Academy\":\"Aller vers CCTV Academy\",\"CCTV Academy voorblad\":\"Couverture CCTV Academy\",\"CCTV camera's en beeldkwaliteit\":\"Cam\u00e9ras CCTV et qualit\u00e9 d\u2019image\",\"Netwerken voor CCTV\":\"R\u00e9seaux pour la CCTV\",\"CCTV Academy opleidingstrajecten\":\"Parcours de formation CCTV Academy\",\"Ga naar de homepage van CCTV Academy\":\"Aller \u00e0 la page d\u2019accueil de CCTV Academy\"},\"en\":{\"Brochurepagina's\":\"Brochure pages\",\"Pagina 1\":\"Page 1\",\"Pagina 2\":\"Page 2\",\"Pagina 3\":\"Page 3\",\"Pagina 4\":\"Page 4\",\"Ga naar CCTV Academy\":\"Go to CCTV Academy\",\"CCTV Academy voorblad\":\"CCTV Academy cover\",\"CCTV camera's en beeldkwaliteit\":\"CCTV cameras and image quality\",\"Netwerken voor CCTV\":\"Networking for CCTV\",\"CCTV Academy opleidingstrajecten\":\"CCTV Academy training paths\",\"Ga naar de homepage van CCTV Academy\":\"Go to the CCTV Academy homepage\"}};\n var dynamicTranslations = {\"fr\":{\"Afbeelding kon niet geladen worden.\":\"L\u2019image n\u2019a pas pu \u00eatre charg\u00e9e.\",\"JPEG wordt gemaakt\":\"Cr\u00e9ation du JPEG\",\"Affiche wordt voorbereid...\":\"Pr\u00e9paration de l\u2019affiche...\",\"Ongeldige afbeeldingsafmetingen.\":\"Dimensions d\u2019image non valides.\",\"Canvas wordt niet ondersteund.\":\"Canvas n\u2019est pas pris en charge.\",\"JPEG kon niet worden aangemaakt.\":\"Le JPEG n\u2019a pas pu \u00eatre cr\u00e9\u00e9.\",\"JPEG-download gestart \u2713\":\"T\u00e9l\u00e9chargement JPEG d\u00e9marr\u00e9 \u2713\"},\"en\":{\"Afbeelding kon niet geladen worden.\":\"The image could not be loaded.\",\"JPEG wordt gemaakt\":\"Creating JPEG\",\"Affiche wordt voorbereid...\":\"Preparing poster...\",\"Ongeldige afbeeldingsafmetingen.\":\"Invalid image dimensions.\",\"Canvas wordt niet ondersteund.\":\"Canvas is not supported.\",\"JPEG kon niet worden aangemaakt.\":\"The JPEG could not be created.\",\"JPEG-download gestart \u2713\":\"JPEG download started \u2713\"}};\n var validLanguages = [\"nl\",\"fr\",\"en\"];\n var currentLanguage = \"nl\";\n var textRecords = [];\n var attributeRecords = [];\n\n function normalizeTranslationKey(value) {\n return String(value || \"\").replace(\/\\s+\/g, \" \").trim();\n }\n\n function translateText(original, lang) {\n var key = normalizeTranslationKey(original);\n if (lang === \"nl\") return key;\n var table = translations[lang];\n return table && Object.prototype.hasOwnProperty.call(table, key)\n ? table[key]\n : key;\n }\n\n function translateAttribute(original, lang) {\n var key = normalizeTranslationKey(original);\n if (lang === \"nl\") return key;\n var table = attributeTranslations[lang];\n return table && Object.prototype.hasOwnProperty.call(table, key)\n ? table[key]\n : key;\n }\n\n function translateDynamic(key) {\n var normalized = normalizeTranslationKey(key);\n if (currentLanguage === \"nl\") return normalized;\n var table = dynamicTranslations[currentLanguage];\n return table && Object.prototype.hasOwnProperty.call(table, normalized)\n ? table[normalized]\n : normalized;\n }\n\n function preserveWhitespace(original, translated) {\n var leading = (String(original).match(\/^\\s*\/) || [\"\"])[0];\n var trailing = (String(original).match(\/\\s*$\/) || [\"\"])[0];\n return leading + translated + trailing;\n }\n\n function collectTextRecords() {\n var walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);\n var node;\n while ((node = walker.nextNode())) {\n var parent = node.parentElement;\n if (!parent || parent.closest(\"script, style, .cctv-language-bar\")) continue;\n if (!normalizeTranslationKey(node.nodeValue)) continue;\n textRecords.push({ node: node, original: node.nodeValue });\n }\n }\n\n function collectAttributeRecords() {\n root.querySelectorAll(\"[alt],[aria-label],[title],[placeholder]\").forEach(function(el) {\n if (el.closest(\".cctv-language-bar\")) return;\n [\"alt\",\"aria-label\",\"title\",\"placeholder\"].forEach(function(attr) {\n if (el.hasAttribute(attr) && normalizeTranslationKey(el.getAttribute(attr))) {\n attributeRecords.push({\n element: el,\n attribute: attr,\n original: el.getAttribute(attr)\n });\n }\n });\n });\n }\n\n function applyLanguage(lang, persist) {\n if (validLanguages.indexOf(lang) === -1) lang = \"nl\";\n currentLanguage = lang;\n\n textRecords.forEach(function(record) {\n record.node.nodeValue = preserveWhitespace(\n record.original,\n translateText(record.original, lang)\n );\n });\n\n attributeRecords.forEach(function(record) {\n record.element.setAttribute(\n record.attribute,\n translateAttribute(record.original, lang)\n );\n });\n\n root.dataset.language = lang;\n root.setAttribute(\"lang\", lang);\n document.documentElement.lang = lang;\n\n root.querySelectorAll(\".cctv-language-switcher button[data-lang]\").forEach(function(btn) {\n var active = btn.getAttribute(\"data-lang\") === lang;\n btn.classList.toggle(\"is-active\", active);\n btn.setAttribute(\"aria-pressed\", active ? \"true\" : \"false\");\n });\n\n if (persist !== false) {\n try {\n localStorage.setItem(STORAGE_KEY, lang);\n } catch (e) {}\n }\n\n window.dispatchEvent(new CustomEvent(EVENT_NAME, {\n detail: { language: lang }\n }));\n }\n\n function setLanguage(lang) {\n applyLanguage(String(lang || \"\").toLowerCase(), true);\n }\n\n collectTextRecords();\n collectAttributeRecords();\n\n root.querySelectorAll(\".cctv-language-switcher button[data-lang]\").forEach(function(btn) {\n btn.addEventListener(\"click\", function() {\n setLanguage(btn.getAttribute(\"data-lang\"));\n });\n });\n\n var queryLang = new URLSearchParams(window.location.search).get(\"lang\");\n queryLang = queryLang ? queryLang.toLowerCase() : \"\";\n\n var storedLang = \"\";\n try {\n storedLang = (localStorage.getItem(STORAGE_KEY) || \"\").toLowerCase();\n } catch (e) {}\n\n var initialLanguage =\n validLanguages.indexOf(queryLang) !== -1 ? queryLang :\n validLanguages.indexOf(storedLang) !== -1 ? storedLang :\n \"nl\";\n\n applyLanguage(initialLanguage, true);\n\n window.addEventListener(\"storage\", function(event) {\n var next = String(event.newValue || \"\").toLowerCase();\n if (event.key === STORAGE_KEY && validLanguages.indexOf(next) !== -1) {\n applyLanguage(next, false);\n }\n });\n\n window.CCTVAcademyI18n = {\n t: translateDynamic\n };\n\n window.CCTVAcademyLanguage = {\n set: setLanguage,\n get: function(){ return currentLanguage; }\n };\n})();\n<\/script><script>\n\n\/* ============================================================\n ELEMENTS\n ============================================================ *\/\n\nconst slides =\n [...document.querySelectorAll('.slide')];\n\nconst dots =\n [...document.querySelectorAll('.nav-dot')];\n\nconst progressBar =\n document.getElementById('progressBar');\n\nconst downloadStatus =\n document.getElementById('downloadStatus');\n\nconst ambientLight =\n document.getElementById('ambientLight');\n\nconst reduceMotion =\n window.matchMedia(\n '(prefers-reduced-motion: reduce)'\n ).matches;\n\n\n\/* ============================================================\n COPYRIGHT YEAR\n ============================================================ *\/\n\ndocument.getElementById(\n 'copyrightYear'\n).textContent =\n new Date().getFullYear();\n\n\n\/* ============================================================\n SLIDE OBSERVER\n ============================================================ *\/\n\nconst observer =\n new IntersectionObserver(\n\n entries => {\n\n entries.forEach(\n entry => {\n\n if (!entry.isIntersecting) {\n return;\n }\n\n\n entry.target\n .classList\n .add('visible');\n\n\n const currentId =\n entry.target.id;\n\n\n dots.forEach(\n dot => {\n\n dot.classList.toggle(\n\n 'active',\n\n dot.dataset.target ===\n currentId\n\n );\n\n }\n );\n\n }\n );\n\n },\n\n {\n threshold: .55\n }\n );\n\n\nslides.forEach(\n slide => {\n\n observer.observe(\n slide\n );\n\n }\n);\n\n\n\/* ============================================================\n DOT NAVIGATION\n ============================================================ *\/\n\ndots.forEach(\n dot => {\n\n dot.addEventListener(\n 'click',\n () => {\n\n const target =\n document.getElementById(\n dot.dataset.target\n );\n\n\n if (!target) {\n return;\n }\n\n\n target.scrollIntoView({\n\n behavior:\n 'smooth',\n\n block:\n 'start'\n\n });\n\n }\n );\n\n }\n);\n\n\n\/* ============================================================\n SCROLL PROGRESS\n ============================================================ *\/\n\nfunction updateProgress() {\n\n const scrollTop =\n\n window.scrollY ||\n\n document.documentElement.scrollTop;\n\n\n const maxScroll =\n\n document.documentElement.scrollHeight -\n\n window.innerHeight;\n\n\n const progress =\n\n maxScroll > 0\n\n ? (scrollTop \/ maxScroll) * 100\n\n : 0;\n\n\n progressBar.style.width =\n\n Math.min(\n\n 100,\n\n Math.max(\n 0,\n progress\n )\n\n ) + '%';\n}\n\n\nwindow.addEventListener(\n\n 'scroll',\n\n updateProgress,\n\n {\n passive: true\n }\n\n);\n\n\nupdateProgress();\n\n\n\/* ============================================================\n KEYBOARD NAVIGATION\n ============================================================ *\/\n\nfunction getCurrentSlideIndex() {\n\n let closest =\n 0;\n\n let distance =\n Infinity;\n\n\n slides.forEach(\n (slide,index) => {\n\n const currentDistance =\n\n Math.abs(\n\n slide\n .getBoundingClientRect()\n .top\n\n );\n\n\n if (\n currentDistance < distance\n ) {\n\n distance =\n currentDistance;\n\n closest =\n index;\n }\n\n }\n );\n\n\n return closest;\n}\n\n\nfunction goToSlide(index) {\n\n const safeIndex =\n\n Math.max(\n\n 0,\n\n Math.min(\n slides.length - 1,\n index\n )\n\n );\n\n\n slides[safeIndex]\n .scrollIntoView({\n\n behavior:\n 'smooth',\n\n block:\n 'start'\n\n });\n}\n\n\nwindow.addEventListener(\n 'keydown',\n event => {\n\n const current =\n getCurrentSlideIndex();\n\n\n if (\n event.key === 'ArrowDown' ||\n event.key === 'PageDown'\n ) {\n\n event.preventDefault();\n\n goToSlide(\n current + 1\n );\n }\n\n\n if (\n event.key === 'ArrowUp' ||\n event.key === 'PageUp'\n ) {\n\n event.preventDefault();\n\n goToSlide(\n current - 1\n );\n }\n\n\n if (\n event.key === 'Home'\n ) {\n\n event.preventDefault();\n\n goToSlide(0);\n }\n\n\n if (\n event.key === 'End'\n ) {\n\n event.preventDefault();\n\n goToSlide(\n slides.length - 1\n );\n }\n\n }\n);\n\n\n\/* ============================================================\n DOWNLOAD STATUS\n ============================================================ *\/\n\nlet statusTimer;\n\n\nfunction showStatus(\n message,\n type = ''\n) {\n\n clearTimeout(\n statusTimer\n );\n\n\n downloadStatus.textContent =\n message;\n\n\n downloadStatus.className =\n 'download-status show';\n\n\n if (type) {\n\n downloadStatus\n .classList\n .add(type);\n }\n\n\n statusTimer =\n setTimeout(\n () => {\n\n downloadStatus\n .classList\n .remove('show');\n\n },\n\n 2800\n );\n}\n\n\n\/* ============================================================\n IMAGE CACHE\n ============================================================ *\/\n\nconst imageCache =\n new Map();\n\n\n\/* ============================================================\n LOAD IMAGE\n\n De afbeeldingen worden relatief geladen zodat ze op\n cctvacademy.be same-origin zijn.\n ============================================================ *\/\n\nfunction loadImage(url) {\n\n if (\n imageCache.has(url)\n ) {\n\n return Promise.resolve(\n imageCache.get(url)\n );\n }\n\n\n return new Promise(\n (resolve,reject) => {\n\n const image =\n new Image();\n\n\n image.onload =\n () => {\n\n imageCache.set(\n url,\n image\n );\n\n\n resolve(\n image\n );\n };\n\n\n image.onerror =\n () => {\n\n reject(\n\n new Error(window.CCTVAcademyI18n.t('Afbeelding kon niet geladen worden.'))\n\n );\n\n };\n\n\n image.src =\n url;\n\n }\n );\n}\n\n\n\/* ============================================================\n JPEG DOWNLOAD\n\n De originele A3-afbeelding bevat twee verticale pagina's.\n\n We nemen:\n - links = pagina links\n - rechts = pagina rechts\n\n Daarna wordt uitsluitend die pagina als hoogwaardige\n JPEG gedownload.\n ============================================================ *\/\n\nasync function downloadPosterJPEG(\n imageURL,\n side,\n filename,\n button\n) {\n\n const originalHTML =\n button.innerHTML;\n\n\n try {\n\n\n button.disabled =\n true;\n\n\n button.innerHTML =\n\n '<span class=\"download-icon\">\u2026<\/span>' +\n\n window.CCTVAcademyI18n.t('JPEG wordt gemaakt');\n\n\n showStatus(\n window.CCTVAcademyI18n.t('Affiche wordt voorbereid...')\n );\n\n\n const image =\n await loadImage(\n imageURL\n );\n\n\n const fullWidth =\n image.naturalWidth;\n\n\n const fullHeight =\n image.naturalHeight;\n\n\n if (\n !fullWidth ||\n !fullHeight\n ) {\n\n throw new Error(\n window.CCTVAcademyI18n.t('Ongeldige afbeeldingsafmetingen.')\n );\n }\n\n\n \/*\n * Iedere pagina is exact de helft\n * van de horizontale A3-afbeelding.\n *\/\n\n const sourceWidth =\n\n Math.floor(\n fullWidth \/ 2\n );\n\n\n const sourceHeight =\n fullHeight;\n\n\n const sourceX =\n\n side === 'right'\n\n ? fullWidth - sourceWidth\n\n : 0;\n\n\n \/*\n * Canvas krijgt de originele\n * resolutie van \u00e9\u00e9n affichepagina.\n *\/\n\n const canvas =\n document.createElement(\n 'canvas'\n );\n\n\n canvas.width =\n sourceWidth;\n\n\n canvas.height =\n sourceHeight;\n\n\n const context =\n canvas.getContext(\n '2d',\n {\n alpha: false\n }\n );\n\n\n if (!context) {\n\n throw new Error(\n window.CCTVAcademyI18n.t('Canvas wordt niet ondersteund.')\n );\n }\n\n\n \/*\n * Witte achtergrond.\n *\/\n\n context.fillStyle =\n '#ffffff';\n\n\n context.fillRect(\n\n 0,\n 0,\n\n canvas.width,\n canvas.height\n\n );\n\n\n \/*\n * De juiste helft van de bron\n * naar het canvas kopi\u00ebren.\n *\/\n\n context.drawImage(\n\n image,\n\n sourceX,\n 0,\n\n sourceWidth,\n sourceHeight,\n\n 0,\n 0,\n\n sourceWidth,\n sourceHeight\n\n );\n\n\n \/*\n * JPEG op hoge kwaliteit.\n *\/\n\n const blob =\n await new Promise(\n (resolve,reject) => {\n\n canvas.toBlob(\n\n result => {\n\n if (result) {\n\n resolve(\n result\n );\n\n } else {\n\n reject(\n\n new Error(\n window.CCTVAcademyI18n.t('JPEG kon niet worden aangemaakt.')\n )\n\n );\n }\n\n },\n\n 'image\/jpeg',\n\n .98\n\n );\n\n }\n );\n\n\n \/*\n * Tijdelijke download URL.\n *\/\n\n const blobURL =\n URL.createObjectURL(\n blob\n );\n\n\n const link =\n document.createElement(\n 'a'\n );\n\n\n link.href =\n blobURL;\n\n\n link.download =\n filename;\n\n\n document.body\n .appendChild(\n link\n );\n\n\n link.click();\n\n\n link.remove();\n\n\n \/*\n * Geheugen vrijgeven.\n *\/\n\n setTimeout(\n () => {\n\n URL.revokeObjectURL(\n blobURL\n );\n\n },\n\n 2000\n );\n\n\n showStatus(\n\n window.CCTVAcademyI18n.t('JPEG-download gestart \u2713'),\n\n 'success'\n\n );\n\n }\n\n catch(error) {\n\n\n console.error(\n 'CCTV Academy JPEG download:',\n error\n );\n\n\n showStatus(\n\n window.CCTVAcademyI18n.t('JPEG kon niet worden aangemaakt.'),\n\n 'error'\n\n );\n\n }\n\n finally {\n\n\n button.disabled =\n false;\n\n\n button.innerHTML =\n originalHTML;\n\n }\n}\n\n\n\/* ============================================================\n DOWNLOAD BUTTONS\n ============================================================ *\/\n\ndocument\n .querySelectorAll(\n '.download-button'\n )\n .forEach(\n button => {\n\n button.addEventListener(\n 'click',\n () => {\n\n downloadPosterJPEG(\n\n button.dataset.image,\n\n button.dataset.side,\n\n button.dataset.filename,\n\n button\n\n );\n\n }\n );\n\n }\n );\n\n\n\/* ============================================================\n PRELOAD\n ============================================================ *\/\n\nwindow.addEventListener(\n 'load',\n () => {\n\n const sources = [\n\n '\/wp-content\/uploads\/2026\/09\/CCTV_Academy_A3_liggend_folder-wkb260919-scaled.png',\n\n '\/wp-content\/uploads\/2026\/09\/CCTV_Academy_binnenkant_A3_liggend_300dpi-wkb260919-scaled.png'\n\n ];\n\n\n sources.forEach(\n source => {\n\n loadImage(source)\n .catch(\n error => {\n\n console.warn(\n 'Preload:',\n error.message\n );\n\n }\n );\n\n }\n );\n\n }\n);\n\n\n\/* ============================================================\n SUBTLE MOUSE PARALLAX\n ============================================================ *\/\n\nif (\n !reduceMotion &&\n window.innerWidth > 900\n) {\n\n document.addEventListener(\n 'mousemove',\n event => {\n\n const x =\n\n (\n event.clientX \/\n window.innerWidth\n ) - .5;\n\n\n const y =\n\n (\n event.clientY \/\n window.innerHeight\n ) - .5;\n\n\n \/*\n * Zeer subtiele beweging\n * van de achtergrondgloed.\n *\/\n\n ambientLight.style.transform =\n\n `translate(\n ${x * 25}px,\n ${y * 18}px\n )`;\n\n\n \/*\n * Lichte 3D-reactie op de affiche.\n *\/\n\n document\n .querySelectorAll(\n '.slide.visible .brochure-stage'\n )\n .forEach(\n stage => {\n\n const rect =\n stage.getBoundingClientRect();\n\n\n if (\n rect.bottom > 0 &&\n rect.top < window.innerHeight\n ) {\n\n stage.style.transform =\n\n `perspective(1200px)\n rotateY(${x * 1.25}deg)\n rotateX(${y * -1}deg)\n translateY(0)\n scale(1)`;\n }\n\n }\n );\n\n },\n\n {\n passive: true\n }\n );\n\n\n document.addEventListener(\n 'mouseleave',\n () => {\n\n document\n .querySelectorAll(\n '.brochure-stage'\n )\n .forEach(\n stage => {\n\n stage.style.transform =\n '';\n\n }\n );\n\n }\n );\n\n}\n\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>CCTV Academy | Van Beeld tot Intelligentie CCTV ACADEMY Van Beeld tot Intelligentie Taal \u00b7 Langue \u00b7 LanguageNLFREN Interactieve brochure CCTV Academy 01 Van Beeld tot Intelligentie. Ontdek CCTV Academy en bouw stap voor stap praktijkgerichte kennis op rond camerabewaking, netwerken en intelligente beveiligingstechnologie. Ontdek CCTV Academy \u2193 Download affiche als JPEG CCTV Academy \u00b7 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_acf_changed":false,"zakra_page_container_layout":"customizer","zakra_page_sidebar_layout":"customizer","zakra_remove_content_margin":false,"zakra_sidebar":"customizer","zakra_transparent_header":"customizer","zakra_logo":0,"zakra_main_header_style":"default","zakra_menu_item_color":"","zakra_menu_item_hover_color":"","zakra_menu_item_active_color":"","zakra_menu_active_style":"","zakra_page_header":true,"_glsr_average":0,"_glsr_ranking":0,"_glsr_reviews":0,"footnotes":""},"class_list":["post-51217","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CCTV Academy \u2014 Van Beeld tot Intelligentie - RAS\/AIS CCTV Academy<\/title>\n<meta name=\"description\" content=\"Ontdek de technologie achter moderne camerabewakingCamera's \u00b7 Beeldkwaliteit \u00b7 IP-netwerken \u00b7 AI \u00b7 Slimme detectie\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cctvacademy.be\/nl\/cctv-academy-van-beeld-tot-intelligentie\/\" \/>\n<meta property=\"og:locale\" content=\"nl_BE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ontdek de technologie achter moderne camerabewakingCamera's \u00b7 Beeldkwaliteit \u00b7 IP-netwerken \u00b7 AI \u00b7 Slimme detectie\" \/>\n<meta property=\"og:description\" content=\"Ontdek de technologie achter moderne camerabewakingCamera's \u00b7 Beeldkwaliteit \u00b7 IP-netwerken \u00b7 AI \u00b7 Slimme detectie\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cctvacademy.be\/nl\/cctv-academy-van-beeld-tot-intelligentie\/\" \/>\n<meta property=\"og:site_name\" content=\"RAS\/AIS CCTV Academy\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/profile.php?id=61576769152561\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-27T14:29:03+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/cctvacademy.be\\\/cctv-academy-van-beeld-tot-intelligentie\\\/\",\"url\":\"https:\\\/\\\/cctvacademy.be\\\/cctv-academy-van-beeld-tot-intelligentie\\\/\",\"name\":\"CCTV Academy \u2014 Van Beeld tot Intelligentie - RAS\\\/AIS CCTV Academy\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/cctvacademy.be\\\/#website\"},\"datePublished\":\"2026-09-19T14:53:35+00:00\",\"dateModified\":\"2026-09-27T14:29:03+00:00\",\"description\":\"Ontdek de technologie achter moderne camerabewakingCamera's \u00b7 Beeldkwaliteit \u00b7 IP-netwerken \u00b7 AI \u00b7 Slimme detectie\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/cctvacademy.be\\\/cctv-academy-van-beeld-tot-intelligentie\\\/#breadcrumb\"},\"inLanguage\":\"nl-BE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/cctvacademy.be\\\/cctv-academy-van-beeld-tot-intelligentie\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/cctvacademy.be\\\/cctv-academy-van-beeld-tot-intelligentie\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/cctvacademy.be\\\/nl\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CCTV Academy \u2014 Van Beeld tot Intelligentie\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/cctvacademy.be\\\/#website\",\"url\":\"https:\\\/\\\/cctvacademy.be\\\/\",\"name\":\"CCTV Academy\",\"description\":\"CCTV Opleidingen en CCTV Micro Learning\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/cctvacademy.be\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-BE\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CCTV Academy \u2014 Van Beeld tot Intelligentie - RAS\/AIS CCTV Academy","description":"Ontdek de technologie achter moderne camerabewakingCamera's \u00b7 Beeldkwaliteit \u00b7 IP-netwerken \u00b7 AI \u00b7 Slimme detectie","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cctvacademy.be\/nl\/cctv-academy-van-beeld-tot-intelligentie\/","og_locale":"nl_BE","og_type":"article","og_title":"Ontdek de technologie achter moderne camerabewakingCamera's \u00b7 Beeldkwaliteit \u00b7 IP-netwerken \u00b7 AI \u00b7 Slimme detectie","og_description":"Ontdek de technologie achter moderne camerabewakingCamera's \u00b7 Beeldkwaliteit \u00b7 IP-netwerken \u00b7 AI \u00b7 Slimme detectie","og_url":"https:\/\/cctvacademy.be\/nl\/cctv-academy-van-beeld-tot-intelligentie\/","og_site_name":"RAS\/AIS CCTV Academy","article_publisher":"https:\/\/www.facebook.com\/profile.php?id=61576769152561","article_modified_time":"2026-09-27T14:29:03+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/cctvacademy.be\/cctv-academy-van-beeld-tot-intelligentie\/","url":"https:\/\/cctvacademy.be\/cctv-academy-van-beeld-tot-intelligentie\/","name":"CCTV Academy \u2014 Van Beeld tot Intelligentie - RAS\/AIS CCTV Academy","isPartOf":{"@id":"https:\/\/cctvacademy.be\/#website"},"datePublished":"2026-09-19T14:53:35+00:00","dateModified":"2026-09-27T14:29:03+00:00","description":"Ontdek de technologie achter moderne camerabewakingCamera's \u00b7 Beeldkwaliteit \u00b7 IP-netwerken \u00b7 AI \u00b7 Slimme detectie","breadcrumb":{"@id":"https:\/\/cctvacademy.be\/cctv-academy-van-beeld-tot-intelligentie\/#breadcrumb"},"inLanguage":"nl-BE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cctvacademy.be\/cctv-academy-van-beeld-tot-intelligentie\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/cctvacademy.be\/cctv-academy-van-beeld-tot-intelligentie\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cctvacademy.be\/nl\/"},{"@type":"ListItem","position":2,"name":"CCTV Academy \u2014 Van Beeld tot Intelligentie"}]},{"@type":"WebSite","@id":"https:\/\/cctvacademy.be\/#website","url":"https:\/\/cctvacademy.be\/","name":"CCTV Academy","description":"CCTV Opleidingen en CCTV Micro Learning","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cctvacademy.be\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-BE"}]}},"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/cctvacademy.be\/nl\/wp-json\/wp\/v2\/pages\/51217","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cctvacademy.be\/nl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cctvacademy.be\/nl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cctvacademy.be\/nl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cctvacademy.be\/nl\/wp-json\/wp\/v2\/comments?post=51217"}],"version-history":[{"count":0,"href":"https:\/\/cctvacademy.be\/nl\/wp-json\/wp\/v2\/pages\/51217\/revisions"}],"wp:attachment":[{"href":"https:\/\/cctvacademy.be\/nl\/wp-json\/wp\/v2\/media?parent=51217"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}