{"id":356,"date":"2026-04-30T19:50:37","date_gmt":"2026-04-30T19:50:37","guid":{"rendered":"https:\/\/wizardscottage.com\/?page_id=356"},"modified":"2026-07-22T09:17:18","modified_gmt":"2026-07-22T09:17:18","slug":"home","status":"publish","type":"page","link":"https:\/\/wizardscottage.com\/en\/","title":{"rendered":"Homepage"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n\n\nWizard's Cottage<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=Cinzel+Decorative:wght@700&family=Cinzel:wght@300;400;600&family=IM+Fell+English:ital@0;1&display=swap\" rel=\"stylesheet\">\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\n<style>\n:root {\n --gold: #c8a84b;\n --gold-dim: rgba(200,168,75,0.4);\n --deep: #04020b;\n --parch: #ebe0cc;\n --silver: #9aabbc;\n}\n\n* { margin:0; padding:0; box-sizing:border-box; }\nhtml { font-size:16px; }\n\nbody {\n background: var(--deep);\n color: var(--parch);\n font-family: 'IM Fell English', serif;\n cursor: none;\n overflow-x: hidden;\n}\n\n\/* \u2500\u2500 ELEMENTOR: transparent wrappers + no transforms \u2500\u2500 *\/\n.elementor-widget-html,\n.elementor-widget-html .elementor-widget-container,\n.elementor-widget-wrap, .elementor-column-wrap,\n.elementor-column, .elementor-row,\n.elementor-container, .elementor-section,\n.elementor-top-section, .e-con, .e-con-inner,\n.elementor-element {\n background: transparent !important;\n background-color: transparent !important;\n padding-top: 0 !important;\n padding-bottom: 0 !important;\n margin-top: 0 !important;\n margin-bottom: 0 !important;\n transform: none !important;\n will-change: auto !important;\n}\n.elementor-widget:not(:last-child) { margin-bottom: 0 !important; }\n#s-hero, #scroll-body, .panel { background: transparent !important; }\n.p1-h em, .p1-sub-h em { color: #c8a84b !important; }\n.p1-kicker { color: #c8a84b !important; }\n.p1-p, .p1-list li, .p1-sub-p { color: rgba(235,224,204,.72) !important; }\n.p1-stat-n { color: #c8a84b !important; }\n.p0-h .l1 { color: #ebe0cc !important; -webkit-text-fill-color: #ebe0cc !important; }\n.p3-hogwarts { color: #c8a84b !important; -webkit-text-fill-color: #c8a84b !important; }\n\n\n\/* \u2500\u2500 LANGUAGE SWITCHER \u2500\u2500 *\/\n#lang-sw { display:flex; gap:6px; align-items:center; pointer-events:all; }\n.lang-btn { font-family:'Cinzel',serif; font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(240,223,192,.35); background:none; border:none; cursor:pointer; padding:4px 8px; transition:all .3s; }\n.lang-btn.active, .lang-btn:hover { color:var(--gold); border-bottom:1px solid var(--gold); }\n.lang-sep { color:rgba(240,223,192,.15); font-size:.55rem; }\n\n\/* \u2500\u2500 LANGUAGE SWITCHER \u2500\u2500 *\/\n#lang-sw { display:flex; gap:6px; align-items:center; pointer-events:all; }\n.lang-btn { font-family:'Cinzel',serif; font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(240,223,192,.35); background:none; border:none; cursor:pointer; padding:4px 8px; transition:all .3s; }\n.lang-btn.active, .lang-btn:hover { color:var(--gold); border-bottom:1px solid var(--gold); }\n.lang-sep { color:rgba(240,223,192,.15); font-size:.55rem; }\n\n\/* \u2500\u2500 GOLD SHIMMER \u2014 zelfde als .l2 op COTTAGE \u2500\u2500 *\/\n.gold-shim {\n background: linear-gradient(135deg,#f0d060,#c8a84b,#8b6010,#f0d060);\n background-size: 200% 100%;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n animation: shim 5s linear infinite;\n filter: drop-shadow(0 0 28px rgba(200,168,75,.5));\n display: inline;\n}\n\n\/* \u2500\u2500 CURSOR \u2014 magic wand \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n\/* \u2500\u2500 CURSOR FIX: allow default cursor on date inputs & calendar \u2500\u2500 *\/\n.f-inp[type=date],\n.f-inp[type=date]::-webkit-calendar-picker-indicator,\n.mphb-search-form input,\n.mphb_sc_search-wrapper input,\n.mphb_sc_search-wrapper select,\n.datepick-popup,\n.datepick-popup *,\n.ui-datepicker,\n.ui-datepicker * {\n cursor: pointer !important;\n}\n\n\/* \u2500\u2500 DATEPICKER Z-INDEX VEILIGHEID \u2500\u2500\n Kalender-popups moeten ALTIJD boven onze overlays staan\n en klikbaar zijn, anders \"klik je door\" een datum heen *\/\n.datepick-popup, .ui-datepicker, .flatpickr-calendar,\n.mphb-datepick-popup, [class*=\"datepicker\"], [class*=\"calendar-popup\"],\n.air-datepicker, [class*=\"date-picker\"], [class*=\"datePicker\"] {\n z-index: 999999 !important;\n pointer-events: auto !important;\n}\n[class*=\"datepicker\"] *, .ui-datepicker *, .flatpickr-calendar *,\n.air-datepicker * {\n pointer-events: auto !important;\n cursor: pointer !important;\n}\n\/* Onze eigen overlays mogen nooit boven een open kalender liggen *\/\n#cur, #trail-wrap, #prog {\n z-index: 50 !important;\n}\n\n#cur {\n position:fixed; z-index:9999; pointer-events:none;\n transform:translate(-4px, -28px); \/* offset so tip of wand = hotspot *\/\n width:32px; height:32px;\n transition:transform .15s;\n will-change:left,top;\n}\n#cur svg { width:100%; height:100%; filter:drop-shadow(0 0 4px rgba(200,168,75,.8)); }\n#cur.big svg { filter:drop-shadow(0 0 10px rgba(200,168,75,1)); }\n\n\/* Sparkle trail container *\/\n#trail-wrap {\n position:fixed; inset:0; z-index:9997; pointer-events:none; overflow:hidden;\n}\n.trail-spark {\n position:absolute;\n border-radius:50%;\n pointer-events:none;\n transform:translate(-50%,-50%);\n animation:spark-life var(--dur) ease-out forwards;\n}\n@keyframes spark-life {\n 0% { opacity:1; transform:translate(-50%,-50%) scale(1); }\n 100% { opacity:0; transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0); }\n}\n\n\/* \u2500\u2500 FIXED 3D CANVAS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n#canvas-wrap {\n position: fixed;\n inset: 0;\n z-index: 0;\n pointer-events: none;\n transition: opacity .6s ease;\n}\n#c {\n width:100%!important;\n height:100%!important;\n display:block;\n}\n\n\/* \u2500\u2500 SCROLL TRIGGER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\/* SCROLL TRIGGER height set inline *\/\n\n\/* \u2500\u2500 FIXED OVERLAYS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\/* All text panels are fixed and fade in\/out via JS *\/\n.panel {\n position: fixed;\n z-index: 10;\n opacity: 0;\n pointer-events: none;\n transition: opacity .2s ease;\n will-change: opacity, transform;\n}\n.panel.show { opacity:1; pointer-events:all; }\n\n\/* NAV *\/\n#nav {\n position: fixed !important;\n top:0 !important; left:0 !important; right:0 !important;\n width: 100vw !important;\n padding: 26px 52px;\n display:flex !important; flex-wrap: nowrap !important;\n justify-content:space-between; align-items:center;\n background: linear-gradient(to bottom, rgba(4,2,11,.8) 0%, transparent 100%);\n opacity: 1 !important; \/* always visible *\/\n pointer-events: all !important;\n box-sizing: border-box !important;\n z-index: 100 !important;\n}\n.nav-r {\n display: flex !important;\n flex-wrap: nowrap !important;\n align-items: center;\n gap: 28px;\n flex-shrink: 0;\n}\n.nav-logo {\n font-family:'Cinzel',serif; font-size:.7rem;\n letter-spacing:.3em; text-transform:uppercase;\n color:rgba(240,223,192,.45);\n}\n.nav-logo strong { color:var(--gold); }\n.nav-r { display:flex; gap:28px; align-items:center; }\n.nav-a {\n font-family:'Cinzel',serif; font-size:.6rem;\n letter-spacing:.2em; text-transform:uppercase;\n color:rgba(240,223,192,.35); text-decoration:none;\n transition:color .3s; pointer-events:all;\n}\n.nav-a:hover { color:var(--gold); }\n.nav-cta {\n padding:10px 26px;\n border:1px solid rgba(200,168,75,.4); color:var(--gold);\n font-family:'Cinzel',serif; font-size:.72rem;\n letter-spacing:.2em; text-transform:uppercase;\n text-decoration:none; transition:all .3s; pointer-events:all;\n}\n.nav-cta:hover { background:rgba(200,168,75,.1); box-shadow:0 0 22px rgba(200,168,75,.2); }\n\n\/* \u2500\u2500 PANEL 0: Hero \u2500\u2500 *\/\n#p0 {\n bottom: 10vh; left:52px; right:52px;\n text-align:center;\n}\n.p0-eye {\n font-family:'Cinzel',serif; font-size:.85rem;\n letter-spacing:.3em; text-transform:uppercase;\n color:var(--gold); opacity:.9; margin-bottom:22px;\n display:flex; align-items:center; justify-content:center; gap:16px;\n}\n.p0-eye::before,.p0-eye::after { content:''; width:40px; height:1px; background:var(--gold); opacity:.6; }\n.p0-h {\n font-family:'Bebas Neue',sans-serif;\n font-size:clamp(4rem,9vw,9rem);\n line-height:.92; letter-spacing:.03em;\n text-shadow: 0 0 60px rgba(200,168,75,.2);\n}\n.p0-h .l1 { display:block; color:#ebe0cc; -webkit-text-fill-color:#ebe0cc; }\n.p0-h .l2 {\n display:block;\n background:linear-gradient(135deg,#f0d060,#c8a84b,#8b6010,#f0d060);\n background-size:200% 100%;\n -webkit-background-clip:text; -webkit-text-fill-color:transparent;\n background-clip:text;\n animation:shim 5s linear infinite;\n filter:drop-shadow(0 0 28px rgba(200,168,75,.5));\n}\n@keyframes shim{0%{background-position:0 0}100%{background-position:200% 0}}\n.p0-sub {\n font-style:italic; font-size:clamp(1.05rem,1.8vw,1.35rem);\n color:rgba(240,223,192,.75); margin:18px 0 28px;\n}\n.p0-scroll {\n display:flex; flex-direction:column; align-items:center; gap:8px;\n font-family:'Cinzel',serif; font-size:.72rem;\n letter-spacing:.35em; text-transform:uppercase;\n color:rgba(200,168,75,.7);\n animation:bth 3s ease-in-out infinite;\n}\n.p0-scroll-line {\n width:1px; height:44px;\n background:linear-gradient(to bottom,var(--gold),transparent);\n animation:sla 2s ease-in-out infinite;\n}\n@keyframes bth{0%,100%{opacity:.3}50%{opacity:.9}}\n@keyframes sla{0%,100%{opacity:1;height:44px}50%{opacity:.25;height:28px}}\n\n\/* \u2500\u2500 PANEL 1: Merged \u2014 RIGHT side only \u2500\u2500 *\/\n#p1 {\n top:50%; transform:translateY(-50%);\n right:52px; max-width:400px;\n text-align:right;\n}\n.p1-kicker {\n font-family:'Cinzel',serif; font-size:.65rem;\n letter-spacing:.32em; text-transform:uppercase;\n color:var(--gold); opacity:.85; margin-bottom:14px;\n display:flex; align-items:center; justify-content:flex-end; gap:12px;\n}\n.p1-kicker::after { content:''; width:28px; height:1px; background:var(--gold); }\n.p1-kicker::before { display:none; }\n.p1-h {\n font-family:'Bebas Neue',sans-serif;\n font-size:clamp(2.6rem,4.5vw,4.5rem);\n line-height:.9; letter-spacing:.02em; margin-bottom:14px;\n}\n.p1-h em { color:var(--gold); font-style:normal; display:block; line-height:.9; }\n.p1-p {\n font-style:italic; color:rgba(240,223,192,.72);\n line-height:1.85; font-size:1.08rem; margin-bottom:16px;\n}\n.p1-list { list-style:none; display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }\n.p1-list li {\n font-family:'Cinzel',serif; font-size:.68rem;\n letter-spacing:.12em; color:rgba(240,223,192,.65);\n display:flex; align-items:center; justify-content:flex-end; gap:9px;\n}\n.p1-list li::after { content:'\u2726'; color:var(--gold); font-size:.48rem; flex-shrink:0; }\n.p1-list li::before { display:none; }\n.p1-divider {\n width:100%; height:1px;\n background:linear-gradient(to left, rgba(200,168,75,.35), transparent);\n margin-bottom:18px;\n}\n.p1-sub-h {\n font-family:'Bebas Neue',sans-serif;\n font-size:clamp(1.8rem,3vw,2.8rem);\n letter-spacing:.02em; line-height:1; margin-bottom:8px;\n}\n.p1-sub-h em { color:var(--gold); font-style:normal; }\n.p1-sub-p {\n font-style:italic; color:rgba(240,223,192,.55);\n line-height:1.7; font-size:.88rem; margin-bottom:16px;\n}\n.p1-stats { display:flex; gap:18px; justify-content:flex-end; }\n.p1-stat-n { font-family:'Bebas Neue',sans-serif; font-size:2.2rem; color:var(--gold); line-height:1; }\n.p1-stat-l { font-family:'Cinzel',serif; font-size:.5rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(240,223,192,.48); }\n\n\/* p2 no longer used as separate panel *\/\n#p2 { display:none !important; }\n\n\/* \u2500\u2500 PANEL 3: Direct CTA \u2500\u2500 *\/\n#p3 {\n position:fixed !important;\n top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;\n width:100vw !important; height:100vh !important;\n display:flex !important; flex-direction:column !important;\n justify-content:center !important; align-items:center !important;\n text-align:center; padding:0 52px; z-index:10;\n}\n.p3-cta-wrap { display:flex; flex-direction:column; align-items:center; gap:6px; }\n.p3-kicker {\n font-family:'Cinzel',serif; font-size:.88rem;\n letter-spacing:.2em; text-transform:uppercase;\n color:rgba(240,223,192,.75); margin-bottom:4px;\n}\n.p3-hogwarts {\n font-family:'Cinzel Decorative',serif;\n font-size:clamp(2.8rem,7vw,5.5rem);\n color:var(--gold);\n text-shadow:0 0 50px rgba(200,168,75,.55), 0 0 100px rgba(200,168,75,.25);\n margin-bottom:32px; line-height:1;\n}\n.p3-btn {\n display:inline-block; padding:18px 58px;\n background:linear-gradient(135deg,#c8a84b,#7a5010);\n color:var(--deep); font-family:'Cinzel',serif;\n font-size:.9rem; letter-spacing:.26em; text-transform:uppercase;\n text-decoration:none; pointer-events:all; transition:all .3s;\n box-shadow:0 0 36px rgba(200,168,75,.35);\n margin-bottom:16px;\n}\n.p3-btn:hover { box-shadow:0 0 70px rgba(200,168,75,.7); transform:translateY(-2px); }\n.p3-note {\n font-family:'Cinzel',serif; font-size:.58rem;\n letter-spacing:.18em; text-transform:uppercase;\n color:rgba(240,223,192,.3);\n}\n\n\n#prog {\n position:fixed; top:0; left:0; height:1px;\n background:linear-gradient(to right,transparent,var(--gold),transparent);\n z-index:200; transition:width .1s linear;\n opacity:.5;\n}\n\n\/* \u2500\u2500 MARQUEE divider \u2500\u2500 *\/\n#mq {\n position:fixed; z-index:5; left:0; right:0;\n bottom:10vh;\n overflow:hidden; pointer-events:none;\n border-top:1px solid rgba(200,168,75,.1);\n border-bottom:1px solid rgba(200,168,75,.1);\n padding:13px 0;\n background:rgba(4,2,11,.6);\n backdrop-filter:blur(4px);\n opacity:0; transition:opacity .5s;\n}\n#mq.show { opacity:1; }\n.mq-inner { display:flex; animation:mqr 28s linear infinite; width:max-content; }\n.mq-item {\n font-family:'Cinzel',serif; font-size:.72rem;\n letter-spacing:.22em; text-transform:uppercase;\n color:rgba(200,168,75,.6); padding:0 36px; white-space:nowrap;\n}\n\n\/* \u2500\u2500 BOOKING SECTION \u2500\u2500 *\/\n#s-book {\n position:relative; z-index:20;\n background: transparent; \/* laat Elementor-achtergrondafbeelding tonen *\/\n min-height:60vh;\n pointer-events:all;\n}\n\n\/* Top fade from transparent to deep *\/\n#s-book::before {\n content:'';\n position:absolute; top:-18vh; left:0; right:0; height:18vh;\n background:linear-gradient(to bottom,transparent,var(--deep));\n pointer-events:none;\n}\n\n.book-wrap {\n max-width:1200px; margin:0 auto;\n padding:100px 52px 100px;\n display:block;\n}\n.book-left { max-width:620px; }\n.book-eyebrow {\n font-family:'Cinzel',serif; font-size:.58rem;\n letter-spacing:.34em; text-transform:uppercase;\n color:var(--gold); opacity:.65;\n display:flex; align-items:center; gap:14px;\n margin-bottom:20px;\n}\n.book-eyebrow::before { content:''; width:28px; height:1px; background:var(--gold); }\n.book-h {\n font-family:'Bebas Neue',sans-serif;\n font-size:clamp(3.5rem,7vw,7.5rem);\n line-height:.88; letter-spacing:.02em; margin-bottom:22px;\n}\n.book-h span { color:var(--gold); }\n.book-p {\n font-style:italic; color:rgba(240,223,192,.75);\n line-height:1.9; font-size:1.15rem; margin-bottom:30px; max-width:440px;\n}\n.price-from {\n font-family:'Cinzel',serif; font-size:.7rem;\n letter-spacing:.26em; text-transform:uppercase;\n color:var(--gold); opacity:.75; display:block; margin-bottom:4px;\n}\n.price-big {\n font-family:'Bebas Neue',sans-serif;\n font-size:5.5rem; color:var(--parch); line-height:1;\n}\n.price-per { font-style:italic; color:rgba(240,223,192,.65); font-size:1rem; display:block; margin-bottom:26px; }\n.pf-row { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }\n.pf {\n font-family:'Cinzel',serif; font-size:.7rem;\n letter-spacing:.14em; text-transform:uppercase;\n color:rgba(240,223,192,.55);\n border:1px solid rgba(255,255,255,.12);\n padding:8px 16px; display:flex; align-items:center; gap:8px;\n transition:all .3s; cursor:default;\n}\n.pf:hover { color:var(--gold); border-color:rgba(200,168,75,.35); }\n.pd { width:8px; height:8px; border-radius:50%; flex-shrink:0; }\n.da{background:#ff5a5f} .db{background:#0057b8} .dv{background:#3d6eff} .dd{background:var(--gold)}\n.sync-row {\n display:flex; align-items:center; gap:9px;\n font-family:'Cinzel',serif; font-size:.7rem;\n letter-spacing:.18em; text-transform:uppercase; color:#4ade80;\n}\n.syd {\n width:6px; height:6px; border-radius:50%;\n background:#4ade80; box-shadow:0 0 8px #4ade80;\n animation:syp 2s ease-in-out infinite;\n}\n@keyframes syp{0%,100%{opacity:1}50%{opacity:.25}}\n\n.book-form {\n background:rgba(10,6,24,.9);\n border:1px solid rgba(200,168,75,.18);\n padding:52px; backdrop-filter:blur(20px);\n position:relative;\n}\n.book-form::before {\n content:''; position:absolute; top:-1px; left:-1px;\n width:24px; height:24px;\n border-top:1.5px solid rgba(200,168,75,.5);\n border-left:1.5px solid rgba(200,168,75,.5);\n}\n.book-form::after {\n content:''; position:absolute; bottom:-1px; right:-1px;\n width:24px; height:24px;\n border-bottom:1.5px solid rgba(200,168,75,.5);\n border-right:1.5px solid rgba(200,168,75,.5);\n}\n.f-title {\n font-family:'Cinzel',serif; font-size:.82rem;\n letter-spacing:.2em; text-transform:uppercase;\n color:var(--gold); margin-bottom:28px; display:block;\n}\n.f-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }\n.f-g { display:flex; flex-direction:column; gap:5px; }\n.f-g.full { grid-column:1\/-1; }\n.f-lbl {\n font-family:'Cinzel',serif; font-size:.62rem;\n letter-spacing:.22em; text-transform:uppercase;\n color:rgba(200,168,75,.75);\n}\n.f-inp {\n background:rgba(255,255,255,.05);\n border:1px solid rgba(200,168,75,.18);\n color:var(--parch); padding:15px 16px;\n font-family:'IM Fell English',serif; font-size:1.05rem;\n outline:none; transition:all .3s; width:100%; -webkit-appearance:none;\n}\n.f-inp:focus { border-color:rgba(200,168,75,.55); background:rgba(200,168,75,.05); }\n.f-inp option { background:#0f0c1a; }\n\n\/* Date inputs \u2014 tall and clearly clickable *\/\n.f-inp[type=date] {\n font-size:1.1rem;\n padding:16px 16px;\n cursor:pointer;\n min-height:58px;\n letter-spacing:.04em;\n}\n.f-inp[type=date]::-webkit-calendar-picker-indicator {\n filter:invert(.75) sepia(1) saturate(2) hue-rotate(5deg);\n opacity:.85;\n width:26px; height:26px;\n cursor:pointer;\n margin-left:8px;\n}\n#pb {\n display:none; margin:12px 0; padding:13px;\n background:rgba(200,168,75,.03);\n border:1px solid rgba(200,168,75,.09);\n}\n.pr { display:flex; justify-content:space-between; font-family:'Cinzel',serif; font-size:.6rem; letter-spacing:.12em; margin-bottom:5px; }\n.pr.tot { border-top:1px solid rgba(200,168,75,.12); padding-top:7px; margin-top:5px; }\n.prl { color:rgba(240,223,192,.36); text-transform:uppercase; }\n.prv { color:var(--gold); }\n.f-btn {\n width:100%; margin-top:16px; padding:14px;\n background:linear-gradient(135deg,#c8a84b,#7a5010);\n border:none; font-family:'Cinzel',serif; font-size:.7rem;\n letter-spacing:.25em; text-transform:uppercase;\n color:var(--deep); cursor:pointer; transition:all .3s;\n box-shadow:0 0 22px rgba(200,168,75,.25);\n}\n.f-btn:hover { box-shadow:0 0 52px rgba(200,168,75,.55); transform:translateY(-1px); }\n.f-note {\n font-family:'Cinzel',serif; font-size:.5rem;\n letter-spacing:.1em; color:rgba(240,223,192,.2);\n text-align:center; margin-top:10px; text-transform:uppercase;\n}\n\n\/* FOOTER *\/\nfooter {\n background:var(--deep);\n border-top:1px solid rgba(200,168,75,.07);\n padding:44px 52px;\n display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;\n}\n.ft-logo { font-family:'Cinzel',serif; font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); }\n.ft-links { display:flex; gap:22px; }\n.ft-links a { font-family:'Cinzel',serif; font-size:.52rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(240,223,192,.22); text-decoration:none; transition:color .3s; }\n.ft-links a:hover { color:var(--gold); }\n.ft-cp { font-family:'Cinzel',serif; font-size:.5rem; letter-spacing:.15em; text-transform:uppercase; color:rgba(240,223,192,.15); }\n\n@keyframes mqr{from{transform:translateX(0)}to{transform:translateX(-50%)}}\n\n\/* Rooms mini-strip in booking *\/\n.rooms-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-top:60px; }\n.rs-c { height:220px; position:relative; overflow:hidden; cursor:none; }\n.rs-img { position:absolute; inset:-8%; background-size:cover; background-position:center; filter:brightness(.45); transition:all .55s; }\n.rs-c:hover .rs-img { filter:brightness(.65); transform:scale(1.06); }\n.rs-ov { position:absolute; inset:0; background:linear-gradient(to top,rgba(4,2,11,.95),transparent 50%); }\n.rs-lbl { position:absolute; bottom:0; left:0; right:0; padding:18px 16px; }\n.rs-n { font-family:'Cinzel',serif; font-size:.62rem; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); margin-bottom:4px; }\n.rs-d { font-style:italic; color:rgba(240,223,192,.4); font-size:.78rem; }\n.rs1{background-image:url('https:\/\/images.unsplash.com\/photo-1481026469463-66327c86e544?w=800&q=80')}\n.rs2{background-image:url('https:\/\/images.unsplash.com\/photo-1601924994987-69e26d50dc26?w=800&q=80')}\n.rs3{background-image:url('https:\/\/images.unsplash.com\/photo-1448375240586-882707db888b?w=800&q=80')}\n\n@media(max-width:900px) {\n .book-wrap { grid-template-columns:1fr; gap:40px; padding:80px 22px 100px; }\n #nav { padding:14px 20px; }\n #nav .nav-a { display:none; }\n\n #p1 {\n top:auto; bottom:12vh; transform:none;\n right:16px; left:16px; max-width:none;\n text-align:right;\n }\n .p1-h { font-size:clamp(1.8rem,6vw,2.8rem); }\n .p1-p { font-size:.88rem; }\n .p1-list { display:none; }\n .p1-sub-p { display:none; }\n\n #p3 { padding:0 22px; }\n .p3-hogwarts { font-size:clamp(2rem,9vw,3.5rem); }\n #p0 { bottom:8vh; left:16px; right:16px; }\n .p0-h { font-size:clamp(3rem,12vw,5rem); }\n\n .rooms-strip { grid-template-columns:1fr; }\n .rs-c { height:180px; }\n .book-left, .book-form { padding:32px 22px; }\n\n \/* Banner op mobile: onderaan buiten tekstgebied *\/\n #mq { bottom:2vh; font-size:.6rem; }\n .mq-item { font-size:.6rem; padding:0 20px; letter-spacing:.14em; }\n}\n<\/style>\n<\/head>\n<body>\n\n<!-- Sparkle trail container -->\n<div id=\"trail-wrap\"><\/div>\n\n<!-- Magic wand cursor -->\n<div id=\"cur\" style=\"position:fixed;z-index:9999;pointer-events:none;\">\n <svg width=\"34\" height=\"34\" viewBox=\"0 0 34 34\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"display:block;\">\n <defs>\n <filter id=\"wglow\">\n <feGaussianBlur stdDeviation=\"1.8\" result=\"b\"\/>\n <feMerge><feMergeNode in=\"b\"\/><feMergeNode in=\"SourceGraphic\"\/><\/feMerge>\n <\/filter>\n <\/defs>\n <!-- Shadow line -->\n <line x1=\"30\" y1=\"4\" x2=\"7\" y2=\"30\" stroke=\"rgba(0,0,0,0.45)\" stroke-width=\"4.5\" stroke-linecap=\"round\"\/>\n <!-- Wand body \u2014 dark lacquered wood -->\n <line x1=\"30\" y1=\"4\" x2=\"7\" y2=\"30\" stroke=\"#1a0802\" stroke-width=\"3.2\" stroke-linecap=\"round\"\/>\n <!-- Highlight sheen -->\n <line x1=\"30\" y1=\"4\" x2=\"8.5\" y2=\"28\" stroke=\"rgba(255,200,120,0.18)\" stroke-width=\"1.1\" stroke-linecap=\"round\"\/>\n <!-- Handle rings -->\n <line x1=\"8.8\" y1=\"25.2\" x2=\"11.5\" y2=\"27.8\" stroke=\"#999\" stroke-width=\"1.1\" stroke-linecap=\"round\" opacity=\".7\"\/>\n <line x1=\"10.5\" y1=\"23.2\" x2=\"13.2\" y2=\"25.8\" stroke=\"#999\" stroke-width=\"1.1\" stroke-linecap=\"round\" opacity=\".5\"\/>\n <!-- Outer glow -->\n <circle cx=\"30\" cy=\"4\" r=\"6\" fill=\"rgba(255,180,40,0.18)\" filter=\"url(#wglow)\"\/>\n <!-- Mid glow -->\n <circle cx=\"30\" cy=\"4\" r=\"3.2\" fill=\"rgba(255,220,100,0.6)\" filter=\"url(#wglow)\"\/>\n <!-- Bright tip -->\n <circle cx=\"30\" cy=\"4\" r=\"1.8\" fill=\"rgba(255,245,220,0.98)\"\/>\n <\/svg>\n<\/div>\n<div id=\"prog\"><\/div>\n\n<!-- FIXED CANVAS -->\n<div id=\"canvas-wrap\">\n <canvas id=\"c\"><\/canvas>\n<\/div>\n\n<!-- MARQUEE (mid-scroll) -->\n<div id=\"mq\">\n <div class=\"mq-inner\">\n <span class=\"mq-item\" data-mqkey=\"mq1\">Bezemkastkamer \u2726<\/span>\n <span class=\"mq-item\" data-mqkey=\"mq2\">Ministry of Magic Badkamer \u2726<\/span>\n <span class=\"mq-item\" data-mqkey=\"mq3\">Totaalervaring Van Boeking Tot Vertrek \u2726<\/span>\n <span class=\"mq-item\" data-mqkey=\"mq4\">Max. 4 Gasten \u2726<\/span>\n <span class=\"mq-item\" data-mqkey=\"mq5\">Naast Natuurgebied \u2726<\/span>\n <span class=\"mq-item\" data-mqkey=\"mq6\">Alle Voorzieningen \u2726<\/span>\n <span class=\"mq-item\" data-mqkey=\"mq7\">Welkomstgeschenk Inclusief \u2726<\/span>\n <span class=\"mq-item\" data-mqkey=\"mq8\">Griffoendor Slaapkamer \u2726<\/span>\n <span class=\"mq-item\" data-mqkey=\"mq1\">Bezemkastkamer \u2726<\/span>\n <span class=\"mq-item\" data-mqkey=\"mq2\">Ministry of Magic Badkamer \u2726<\/span>\n <span class=\"mq-item\" data-mqkey=\"mq3\">Totaalervaring Van Boeking Tot Vertrek \u2726<\/span>\n <span class=\"mq-item\" data-mqkey=\"mq4\">Max. 4 Gasten \u2726<\/span>\n <span class=\"mq-item\" data-mqkey=\"mq5\">Naast Natuurgebied \u2726<\/span>\n <span class=\"mq-item\" data-mqkey=\"mq6\">Alle Voorzieningen \u2726<\/span>\n <span class=\"mq-item\" data-mqkey=\"mq7\">Welkomstgeschenk Inclusief \u2726<\/span>\n <span class=\"mq-item\" data-mqkey=\"mq8\">Griffoendor Slaapkamer \u2726<\/span>\n <\/div>\n<\/div>\n\n<!-- FIXED PANELS -->\n<nav id=\"nav\" class=\"panel\">\n <div class=\"nav-logo\"><strong>\u2726 Wizard's<\/strong> Cottage<\/div>\n <div class=\"nav-r\">\n <div id=\"lang-sw\">\n <a class=\"lang-btn active\" data-lang=\"nl\" href=\"javascript:void(0)\">NL<\/a>\n <span class=\"lang-sep\">\u00b7<\/span>\n <a class=\"lang-btn\" data-lang=\"en\" href=\"javascript:void(0)\">EN<\/a>\n <span class=\"lang-sep\">\u00b7<\/span>\n <a class=\"lang-btn\" data-lang=\"fr\" href=\"javascript:void(0)\">FR<\/a>\n <\/div>\n <a href=\"#booking-widget\" class=\"nav-cta\" id=\"t-nav-book\">Boek Nu<\/a>\n <\/div>\n<\/nav>\n\n<div id=\"p0\" class=\"panel\">\n <div class=\"p0-eye\" id=\"t-hero-eye\">Een Magisch Verblijf in Belgi\u00eb<\/div>\n <h1 class=\"p0-h\">\n <span class=\"l1\">WIZARD'S<\/span>\n <span class=\"l2\">COTTAGE<\/span>\n <\/h1>\n <p class=\"p0-sub\" id=\"t-hero-sub\">Scroll om de magie te ontdekken<\/p>\n <div class=\"p0-scroll\">\n <div class=\"p0-scroll-line\"><\/div>\n scroll\n <\/div>\n<\/div>\n\n<div id=\"p1\" class=\"panel\">\n <div class=\"p1-kicker\">Wizard's Cottage<\/div>\n <h2 class=\"p1-h\"><em id=\"t-p1-title1\">Magische<\/em><span class=\"gold-shim\" id=\"t-p1-title2\">Beleving<\/span><\/h2>\n <p class=\"p1-p\" id=\"t-p1-p\">Wizard's Cottage is geen gewoon verblijf. Het is een totaalervaring voor echte fans: ge\u00efnspireerd door Harry Potter.<\/p>\n <ul class=\"p1-list\">\n <li id=\"t-li1\">Toverstaffen en mantels aanwezig<\/li>\n <li id=\"t-li2\">Griffoendor slaapkamer<\/li>\n <li id=\"t-li3\">Bezemkast kinderkamer & Ministry of Magic badkamer<\/li>\n <li id=\"t-li4\">Ge\u00efnspireerd door Harry Potter van A tot Z<\/li>\n <li id=\"t-li5\">Welkomstgeschenk inclusief bij aankomst<\/li>\n <li id=\"t-li6\">Vlakbij Hasselt \/ Eindhoven \/ Antwerpen<\/li>\n <\/ul>\n <div class=\"p1-divider\"><\/div>\n <h3 class=\"p1-sub-h\"><span class=\"gold-shim\">80m\u00b2<\/span> <em id=\"t-p1-sub-h2\">Pure Magie<\/em><\/h3>\n <p class=\"p1-sub-p\" id=\"t-p1-sub-p\">Naast een natuurdomein, max. 4 gasten, in het hart van de Kempen.<\/p>\n <div class=\"p1-stats\">\n <div><div class=\"p1-stat-n\">4<\/div><div class=\"p1-stat-l\" id=\"t-stat1\">Max. gasten<\/div><\/div>\n <div><div class=\"p1-stat-n\">5<\/div><div class=\"p1-stat-l\" id=\"t-stat2\">Magisch verblijf<\/div><\/div>\n <div><div class=\"p1-stat-n\">\u2726<\/div><div class=\"p1-stat-l\" id=\"t-stat3\">Hartje Kempen<\/div><\/div>\n <\/div>\n<\/div>\n\n<div id=\"p3\" class=\"panel\">\n <div class=\"p3-cta-wrap\">\n <div class=\"p3-kicker\" id=\"t-p3-kicker\">Klaar om toegelaten te worden tot<\/div>\n <div class=\"p3-hogwarts\">Hogwarts?<\/div>\n <a href=\"#booking-widget\" class=\"p3-btn\" id=\"t-p3-btn\">Reserveer Vanaf \u20ac189<\/a>\n <div class=\"p3-note\" id=\"t-p3-note\">Gratis annulering \u00b7 Airbnb \u00b7 Booking.com \u00b7 Direct<\/div>\n <\/div>\n<\/div>\n\n<!-- FLOATING BOEK NU \u2014 always visible during scroll -->\n\n\n<!-- SCROLL TRIGGER BODY -->\n<div id=\"scroll-body\" style=\"height:450vh;position:relative;z-index:1;pointer-events:none;\"><\/div>\n\n<!-- BOOKING \u2014 normal HTML section, appears after scroll journey -->\n<section id=\"s-book\">\n <div class=\"book-wrap\">\n <div class=\"book-left\">\n <div class=\"book-eyebrow\" id=\"t-book-eyebrow\">Reserveer Nu<\/div>\n <h2 class=\"book-h\"><span class=\"gold-shim\" id=\"t-book-geniet\">GENIET<\/span><br><span class=\"gold-shim\" id=\"t-book-en\">EN<\/span><br><span id=\"t-book-ontspan\">ONTSPAN<\/span><\/h2>\n <p class=\"book-p\" id=\"t-book-p\">Minimum 2 nachten. Check-in om 15:00. Check-out om 11:00. Gratis annulering tot 7 dagen voor aankomst. Eindschoonmaak en welkomstgeschenk inclusief.<\/p>\n\n <!-- Quote moved here from scroll journey -->\n <blockquote style=\"border-left:2px solid rgba(200,168,75,.3);padding-left:18px;margin:0 0 28px;font-style:italic;font-size:1.05rem;color:rgba(240,223,192,.6);line-height:1.85;\">\n <span id=\"t-quote\">\"Het zijn niet onze vaardigheden die laten zien wie we werkelijk zijn, Harry, maar onze keuzes.\"<\/span>\n <footer style=\"font-family:'Cinzel',serif;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(200,168,75,.65);margin-top:10px;display:block;\" id=\"t-quote-author\">\u2014 Albus Perkamentus<\/footer>\n <\/blockquote>\n\n <span class=\"price-from\" id=\"t-price-from\">Vanaf<\/span>\n <div class=\"price-big\">\u20ac189<\/div>\n <span class=\"price-per\" id=\"t-price-per\">per nacht \u00b7 eindschoonmaak \u20ac65<\/span>\n <div class=\"pf-row\">\n <div class=\"pf\"><div class=\"pd da\"><\/div>Airbnb<\/div>\n <div class=\"pf\"><div class=\"pd db\"><\/div>Booking.com<\/div>\n <div class=\"pf\"><div class=\"pd dv\"><\/div>VRBO<\/div>\n <div class=\"pf\"><div class=\"pd dd\"><\/div>Direct<\/div>\n <\/div>\n <div class=\"sync-row\"><div class=\"syd\"><\/div><span id=\"t-sync\">Agenda live gesynchroniseerd<\/span><\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<script>\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n TALEN \u2014 NL \/ EN \/ FR\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n(function(){\n var T = {\n nl: {\n 'nav-book':'Boek Nu',\n 'hero-eye':'Een Magisch Verblijf in Belgi\u00eb',\n 'hero-sub':'Scroll om de magie te ontdekken',\n 'p1-title1':'Magische', 'p1-title2':'Beleving',\n 'p1-p':\"Wizard's Cottage is geen gewoon verblijf. Het is een totaalervaring voor echte fans: ge\u00efnspireerd door Harry Potter.\",\n 'li1':'Toverstaffen en mantels aanwezig',\n 'li2':'Griffoendor slaapkamer',\n 'li3':'Bezemkast kinderkamer & Ministry of Magic badkamer',\n 'li4':'Ge\u00efnspireerd door Harry Potter van A tot Z',\n 'li5':'Welkomstgeschenk inclusief bij aankomst',\n 'li6':'Vlakbij Hasselt \/ Eindhoven \/ Antwerpen',\n 'p1-sub-h2':'Pure Magie',\n 'p1-sub-p':'Naast een natuurdomein, max. 4 gasten, in het hart van de Antwerpse Kempen.',\n 'stat1':'Max. gasten', 'stat2':'Magisch verblijf', 'stat3':'Hartje Kempen',\n 'mq1':'Bezemkastkamer \u2726', 'mq2':'Ministry of Magic Badkamer \u2726',\n 'mq3':'Totaalervaring Van Boeking Tot Vertrek \u2726', 'mq4':'Max. 4 Gasten \u2726',\n 'mq5':'Naast Natuurgebied \u2726', 'mq6':'Alle Voorzieningen \u2726',\n 'mq7':'Welkomstgeschenk Inclusief \u2726', 'mq8':'Griffoendor Slaapkamer \u2726',\n 'p3-kicker':'Klaar om toegelaten te worden tot',\n 'p3-btn':'Reserveer Vanaf \u20ac189',\n 'p3-note':'Gratis annulering \u00b7 Airbnb \u00b7 Booking.com \u00b7 Direct',\n 'book-eyebrow':'Reserveer Nu',\n 'book-geniet':'GENIET', 'book-en':'EN', 'book-ontspan':'ONTSPAN',\n 'book-p':'Minimum 2 nachten. Check-in om 15:00. Check-out om 11:00. Gratis annulering tot 7 dagen voor aankomst. Eindschoonmaak en welkomstgeschenk inclusief.',\n 'quote':'\"Het zijn niet onze vaardigheden die laten zien wie we werkelijk zijn, Harry, maar onze keuzes.\"',\n 'quote-author':'\u2014 Albus Perkamentus',\n 'price-from':'Vanaf', 'price-per':'per nacht \u00b7 eindschoonmaak \u20ac65',\n 'sync':'Agenda live gesynchroniseerd'\n },\n en: {\n 'nav-book':'Book Now',\n 'hero-eye':'A Magical Stay in Belgium',\n 'hero-sub':'Scroll to discover the magic',\n 'p1-title1':'Magical', 'p1-title2':'Experience',\n 'p1-p':\"Wizard's Cottage is no ordinary stay. It's a total experience for true fans: inspired by Harry Potter.\",\n 'li1':'Wands and cloaks provided',\n 'li2':'Gryffindor bedroom',\n 'li3':\"Broom cupboard kids' room & Ministry of Magic bathroom\",\n 'li4':'Inspired by Harry Potter from A to Z',\n 'li5':'Welcome gift included on arrival',\n 'li6':'Close to Hasselt \/ Eindhoven \/ Antwerp',\n 'p1-sub-h2':'Pure Magic',\n 'p1-sub-p':'Next to a nature reserve, max. 4 guests, in the heart of the Antwerp Kempen region.',\n 'stat1':'Max. guests', 'stat2':'Magical stay', 'stat3':'Heart of Kempen',\n 'mq1':'Broom Cupboard Room \u2726', 'mq2':'Ministry of Magic Bathroom \u2726',\n 'mq3':'Total Experience From Booking To Departure \u2726', 'mq4':'Max. 4 Guests \u2726',\n 'mq5':'Next To Nature Reserve \u2726', 'mq6':'All Amenities Included \u2726',\n 'mq7':'Welcome Gift Included \u2726', 'mq8':'Gryffindor Bedroom \u2726',\n 'p3-kicker':'Ready to be admitted to',\n 'p3-btn':'Reserve From \u20ac189',\n 'p3-note':'Free cancellation \u00b7 Airbnb \u00b7 Booking.com \u00b7 Direct',\n 'book-eyebrow':'Reserve Now',\n 'book-geniet':'ENJOY', 'book-en':'AND', 'book-ontspan':'RELAX',\n 'book-p':'Minimum 2 nights. Check-in at 15:00. Check-out at 11:00. Free cancellation up to 7 days before arrival. Final cleaning and welcome gift included.',\n 'quote':'\"It is our choices that show what we truly are, far more than our abilities.\"',\n 'quote-author':'\u2014 Albus Dumbledore',\n 'price-from':'From', 'price-per':'per night \u00b7 final cleaning \u20ac65',\n 'sync':'Calendar synced live'\n },\n fr: {\n 'nav-book':'R\u00e9server',\n 'hero-eye':'Un S\u00e9jour Magique en Belgique',\n 'hero-sub':'Faites d\u00e9filer pour d\u00e9couvrir la magie',\n 'p1-title1':'Magique', 'p1-title2':'Exp\u00e9rience',\n 'p1-p':\"Wizard's Cottage n'est pas un h\u00e9bergement ordinaire. C'est une exp\u00e9rience totale pour les vrais fans : inspir\u00e9 par Harry Potter.\",\n 'li1':'Baguettes et capes fournies',\n 'li2':'Chambre Gryffondor',\n 'li3':\"Chambre enfants placard \u00e0 balais & salle de bain Minist\u00e8re de la Magie\",\n 'li4':\"Inspir\u00e9 par Harry Potter de A \u00e0 Z\",\n 'li5':\"Cadeau de bienvenue inclus \u00e0 l'arriv\u00e9e\",\n 'li6':'Proche de Hasselt \/ Eindhoven \/ Anvers',\n 'p1-sub-h2':'Magie Pure',\n 'p1-sub-p':\"\u00c0 c\u00f4t\u00e9 d'un domaine naturel, max. 4 h\u00f4tes, au c\u0153ur de la Campine anversoise.\",\n 'stat1':'H\u00f4tes max.', 'stat2':'S\u00e9jour magique', 'stat3':'C\u0153ur de la Campine',\n 'mq1':'Chambre du Placard \u00e0 Balais \u2726', 'mq2':'Salle de Bain Minist\u00e8re de la Magie \u2726',\n 'mq3':'Exp\u00e9rience Totale De la R\u00e9servation Au D\u00e9part \u2726', 'mq4':'Max. 4 H\u00f4tes \u2726',\n 'mq5':\"Pr\u00e8s d'une R\u00e9serve Naturelle \u2726\", 'mq6':'Tous Les \u00c9quipements Inclus \u2726',\n 'mq7':'Cadeau de Bienvenue Inclus \u2726', 'mq8':'Chambre Gryffondor \u2726',\n 'p3-kicker':'Pr\u00eat \u00e0 \u00eatre admis \u00e0',\n 'p3-btn':'R\u00e9server \u00c0 Partir de \u20ac189',\n 'p3-note':'Annulation gratuite \u00b7 Airbnb \u00b7 Booking.com \u00b7 Direct',\n 'book-eyebrow':'R\u00e9servez Maintenant',\n 'book-geniet':'PROFITEZ', 'book-en':'ET', 'book-ontspan':'D\u00c9TENDEZ-VOUS',\n 'book-p':\"Minimum 2 nuits. Check-in \u00e0 15h00. Check-out \u00e0 11h00. Annulation gratuite jusqu'\u00e0 7 jours avant l'arriv\u00e9e. Nettoyage final et cadeau de bienvenue inclus.\",\n 'quote':'\"Ce ne sont pas nos capacit\u00e9s qui montrent qui nous sommes vraiment, Harry, mais nos choix.\"',\n 'quote-author':'\u2014 Albus Dumbledore',\n 'price-from':'\u00c0 partir de', 'price-per':'par nuit \u00b7 nettoyage final \u20ac65',\n 'sync':'Agenda synchronis\u00e9 en direct'\n }\n };\n\n function setLang(lang) {\n var t = T[lang];\n if(!t) return;\n Object.keys(t).forEach(function(k) {\n var el = document.getElementById('t-' + k);\n if(el) el.textContent = t[k];\n });\n \/\/ Marquee-items delen dezelfde sleutel via data-mqkey (komen 2x voor)\n document.querySelectorAll('[data-mqkey]').forEach(function(el) {\n var k = el.getAttribute('data-mqkey');\n if(t[k]) el.textContent = t[k];\n });\n document.querySelectorAll('.lang-btn').forEach(function(b) {\n b.classList.toggle('active', b.getAttribute('data-lang') === lang);\n });\n }\n\n document.querySelectorAll('.lang-btn').forEach(function(b) {\n b.addEventListener('click', function(){ setLang(b.getAttribute('data-lang')); });\n });\n\n setLang('nl');\n})();\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n VEILIGHEIDSNET: alles hieronder (3D-animatie,\n cursor, sparkles) draait in een try\/catch.\n Als hier iets misgaat (bv. Three.js kan niet laden),\n blijft de rest van de site \u2014 vertaling, navigatie,\n boekingsknoppen \u2014 gewoon volledig werken.\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\ntry {\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n WAND CURSOR + SPARKLE TRAIL\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\nconst CUR = document.getElementById('cur');\nconst TRAIL = document.getElementById('trail-wrap');\nlet mx=0, my=0, pmx=0, pmy=0;\nlet lastSparkTime = 0;\nconst IS_TOUCH = 'ontouchstart' in window || window.innerWidth <= 900;\n\nif(IS_TOUCH) {\n \/\/ Geen wandcursor\/sparkles op mobiel \u2014 bespaart prestaties, is toch niet zichtbaar\n document.body.style.cursor = 'auto';\n if(CUR) CUR.style.display = 'none';\n const tw0 = document.getElementById('trail-wrap');\n if(tw0) tw0.style.display = 'none';\n} else {\n\n\/\/ Insert trail wrap + wand SVG before the canvas\nif(!document.getElementById('trail-wrap')) {\n const tw = document.createElement('div');\n tw.id='trail-wrap'; tw.style.cssText='position:fixed;inset:0;z-index:9997;pointer-events:none;overflow:hidden;';\n document.body.prepend(tw);\n}\n\ndocument.addEventListener('mousemove', e => {\n mx=e.clientX; my=e.clientY;\n \/\/ Position the wand cursor \u2014 tip of wand SVG is top-right corner\n CUR.style.left = mx+'px';\n CUR.style.top = my+'px';\n\n \/\/ Sparkle trail \u2014 rate limited\n const now = performance.now();\n if(now - lastSparkTime > 28) {\n lastSparkTime = now;\n spawnSparks(mx, my, 2);\n }\n});\n\n\/\/ Sparks on click\ndocument.addEventListener('click', e => { spawnSparks(e.clientX, e.clientY, 14); });\n\n} \/\/ end IS_TOUCH check\n\n\nconst SPARK_COLORS = [\n 'rgba(255,240,180,', 'rgba(200,168,75,',\n 'rgba(255,210,100,', 'rgba(180,140,60,',\n 'rgba(255,255,220,',\n];\n\nfunction spawnSparks(x, y, count) {\n const wrap = document.getElementById('trail-wrap');\n for(let i=0; i<count; i++) {\n const sp = document.createElement('div');\n const angle = Math.random()*Math.PI*2;\n const dist = 8 + Math.random()*32;\n const size = 2 + Math.random()*4;\n const dur = 0.5 + Math.random()*0.7;\n const col = SPARK_COLORS[Math.floor(Math.random()*SPARK_COLORS.length)];\n\n sp.style.cssText = `\n position:absolute;\n left:${x}px; top:${y}px;\n width:${size}px; height:${size}px;\n border-radius:50%;\n background:${col}${0.7+Math.random()*.3});\n box-shadow:0 0 ${size*2}px ${col}0.5);\n pointer-events:none;\n transform:translate(-50%,-50%);\n --dx:${Math.cos(angle)*dist}px;\n --dy:${Math.sin(angle)*dist}px;\n --dur:${dur}s;\n animation:spark-life ${dur}s ease-out forwards;\n `;\n wrap.appendChild(sp);\n setTimeout(() => sp.remove(), dur * 1000 + 100);\n }\n}\n\ndocument.querySelectorAll('a,button,.pf,.rs-c').forEach(el=>{\n el.addEventListener('mouseenter',()=>CUR.classList.add('big'));\n el.addEventListener('mouseleave',()=>CUR.classList.remove('big'));\n});\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n THREE.JS SETUP\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\nconst canvas = document.getElementById('c');\nconst W = () => canvas.parentElement.clientWidth;\nconst H = () => canvas.parentElement.clientHeight;\n\n\/* \u2500\u2500 MOBIEL PRESTATIE-DETECTIE \u2500\u2500\n Op telefoon: lagere resolutie, geen schaduwen, minder sterren\n zodat scrollen vlot blijft ipv haperen *\/\nconst IS_MOBILE = window.innerWidth <= 900 || 'ontouchstart' in window;\n\nconst renderer = new THREE.WebGLRenderer({ canvas, antialias: !IS_MOBILE, alpha:false, powerPreference:'high-performance' });\nrenderer.setPixelRatio(Math.min(devicePixelRatio, IS_MOBILE ? 1 : 2));\nrenderer.toneMapping = THREE.ACESFilmicToneMapping;\nrenderer.toneMappingExposure = 1.5;\nrenderer.outputEncoding = THREE.sRGBEncoding;\nrenderer.shadowMap.enabled = !IS_MOBILE;\nrenderer.shadowMap.type = THREE.PCFSoftShadowMap;\nrenderer.setSize(W(), H());\n\nconst scene = new THREE.Scene();\nscene.background = new THREE.Color(0x04020b);\nscene.fog = new THREE.FogExp2(0x04020b, 0.028);\n\nconst cam = new THREE.PerspectiveCamera(46, W()\/H(), 0.1, 120);\ncam.position.set(0, 0.3, 12);\ncam.lookAt(0, 0.2, 0);\n\nwindow.addEventListener('resize', () => {\n renderer.setSize(W(), H());\n cam.aspect = W()\/H();\n cam.updateProjectionMatrix();\n});\n\n\/* \u2500\u2500 LIGHTS \u2500\u2500 *\/\nscene.add(new THREE.AmbientLight(0x0a0618, 0.8));\n\n\/\/ KEY \u2014 cool white, slightly warm, cinematic\nconst KEY = new THREE.DirectionalLight(0xdde8ff, 2.4);\nKEY.position.set(3, 8, 4);\nKEY.castShadow = !IS_MOBILE;\nKEY.shadow.mapSize.set(2048, 2048);\nscene.add(KEY);\n\n\/\/ RIM \u2014 deep blue from behind, separates wand from bg\nconst RIM = new THREE.DirectionalLight(0x1a2a88, 1.6);\nRIM.position.set(-4, -1, -8);\nscene.add(RIM);\n\n\/\/ FILL \u2014 cool violet from side \nconst FILL = new THREE.DirectionalLight(0x2a1150, 0.6);\nFILL.position.set(-5, 4, 1);\nscene.add(FILL);\n\n\/\/ UNDER \u2014 deep indigo bounce\nconst UNDER = new THREE.DirectionalLight(0x0a0820, 0.4);\nUNDER.position.set(0, -6, 2);\nscene.add(UNDER);\n\n\/\/ Second key \u2014 subtle warm silver from opposite side\nconst KEY2 = new THREE.DirectionalLight(0xb8c8e0, 0.5);\nKEY2.position.set(-3, 5, 5);\nscene.add(KEY2);\n\n\/\/ Tip light \u2014 pure white, tight\nconst TIP_L = new THREE.PointLight(0xffffff, 2.5, 6);\nscene.add(TIP_L);\n\nconst ATMOS = new THREE.PointLight(0x2211aa, 0.5, 28);\nATMOS.position.set(-4, 5, -6);\nscene.add(ATMOS);\n\n\/* \u2500\u2500 WAND \u2500\u2500 *\/\nconst wandGroup = new THREE.Group();\nscene.add(wandGroup);\n\n\/\/ Elder Wand lathe profile\nconst pts = [\n [0.0012,0],[0.007,0.07],[0.018,0.22],[0.024,0.48],\n [0.026,0.90],[0.029,1.28],[0.025,1.52],[0.028,1.92],\n [0.024,2.22],[0.027,2.60],[0.025,2.80],[0.029,3.10],\n [0.026,3.28],[0.035,3.52],[0.060,3.80],[0.074,4.05],\n [0.069,4.30],[0.060,4.52],[0.063,4.72],[0.050,4.88],\n [0.032,4.97],[0.009,5.02]\n].map(([r,y]) => new THREE.Vector2(r, y));\n\nconst wandMat = new THREE.MeshPhysicalMaterial({\n color: 0x120601, \/\/ near-black dark rosewood\n roughness: 0.45,\n metalness: 0.0,\n clearcoat: 1.0, \/\/ full lacquer\n clearcoatRoughness: 0.08,\n reflectivity: 0.6,\n envMapIntensity: 1.0,\n});\nconst wandMesh = new THREE.Mesh(new THREE.LatheGeometry(pts, 48), wandMat);\nwandMesh.position.y = -2.51;\nwandMesh.castShadow = true;\nwandGroup.add(wandMesh);\n\n\/\/ Rings\n\/\/ Rings \u2014 polished platinum\/silver\nconst ringMat = new THREE.MeshPhysicalMaterial({\n color: 0x888888, roughness:0.05, metalness:1.0,\n clearcoat:1.0, clearcoatRoughness:0.04,\n});\n[1.29, 1.54, 2.21].forEach(ry => {\n const r = new THREE.Mesh(new THREE.TorusGeometry(0.078, 0.015, 12, 36), ringMat);\n r.position.y = ry; r.rotation.x = Math.PI\/2; r.castShadow = true;\n wandGroup.add(r);\n});\n\n\/\/ Floor reflection\nconst refCv = document.createElement('canvas');\nrefCv.width = refCv.height = 256;\nconst rCtx = refCv.getContext('2d');\nconst rGrad = rCtx.createRadialGradient(128,128,0,128,128,128);\nrGrad.addColorStop(0,'rgba(180,130,30,0.18)');\nrGrad.addColorStop(0.6,'rgba(100,55,8,0.05)');\nrGrad.addColorStop(1,'rgba(0,0,0,0)');\nrCtx.fillStyle=rGrad; rCtx.fillRect(0,0,256,256);\nconst floorMesh = new THREE.Mesh(\n new THREE.CircleGeometry(5, 52),\n new THREE.MeshBasicMaterial({map:new THREE.CanvasTexture(refCv),transparent:true,depthWrite:false})\n);\nfloorMesh.rotation.x = -Math.PI\/2;\nfloorMesh.position.y = -2.51;\nscene.add(floorMesh);\n\n\/* \u2500\u2500 TIP \u2014 premium minimal glow \u2500\u2500 *\/\nconst glowGroup = new THREE.Group();\nglowGroup.position.y = 2.51;\nwandGroup.add(glowGroup);\n\n\/\/ Just 3 tight layers: white core, cold white halo, barely-there outer\nconst LAYERS = [\n {r:.018, op:.95, c:0xffffff}, \/\/ tight white core\n {r:.055, op:.30, c:0xe8eeff}, \/\/ cold white halo\n {r:.18, op:.08, c:0xaabbee}, \/\/ barely-there atmosphere\n];\nconst glowMeshes = LAYERS.map(({r,op,c}) => {\n const m = new THREE.Mesh(\n new THREE.SphereGeometry(r,14,14),\n new THREE.MeshBasicMaterial({color:c,transparent:true,opacity:op,\n blending:THREE.AdditiveBlending,depthWrite:false})\n );\n glowGroup.add(m); return m;\n});\n\n\/\/ Spell beam \u2014 cold white\/blue, not yellow\nfunction mkBeam(rt,rb,col,op){\n const m=new THREE.Mesh(new THREE.CylinderGeometry(rt,rb,1,8),\n new THREE.MeshBasicMaterial({color:col,transparent:true,opacity:op,\n blending:THREE.AdditiveBlending,depthWrite:false,side:THREE.DoubleSide}));\n m.position.y=0.5; glowGroup.add(m); return m;\n}\nconst bC=mkBeam(0.006,0.001,0xffffff,0);\nconst bM=mkBeam(0.022,0.006,0xd0e8ff,0);\nconst bO=mkBeam(0.060,0.018,0x6688bb,0);\n\n\/* \u2500\u2500 DEATHLY HALLOWS \u2500\u2500 *\/\nconst DH = new THREE.Group();\nDH.position.set(3.2, 0.4, -1.5);\nscene.add(DH);\n\nconst dhM = new THREE.MeshBasicMaterial({color:0xaabbd4,transparent:true,opacity:.45,blending:THREE.AdditiveBlending,depthWrite:false});\nconst dhG = new THREE.MeshBasicMaterial({color:0x6688aa,transparent:true,opacity:.10,blending:THREE.AdditiveBlending,depthWrite:false});\n\nDH.add(new THREE.Mesh(new THREE.TorusGeometry(1.45,.019,8,72),dhM));\nDH.add(new THREE.Mesh(new THREE.TorusGeometry(1.45,.058,8,72),dhG));\nDH.add(new THREE.Mesh(new THREE.CylinderGeometry(.015,.015,3.1,8),dhM));\nDH.add(new THREE.Mesh(new THREE.CylinderGeometry(.050,.050,3.1,8),dhG));\nfunction mkSide(v1,v2,mat,r){\n const d=new THREE.Vector3().subVectors(v2,v1).normalize();\n const l=v1.distanceTo(v2);\n const m=new THREE.Mesh(new THREE.CylinderGeometry(r,r,l,8),mat);\n m.position.addVectors(v1,v2).multiplyScalar(0.5);\n m.quaternion.setFromUnitVectors(new THREE.Vector3(0,1,0),d);\n return m;\n}\nconst tv=[new THREE.Vector3(0,1.38,0),new THREE.Vector3(1.20,-0.69,0),new THREE.Vector3(-1.20,-0.69,0)];\n[[tv[0],tv[1]],[tv[1],tv[2]],[tv[2],tv[0]]].forEach(([a,b])=>{\n DH.add(mkSide(a,b,dhM,.017)); DH.add(mkSide(a,b,dhG,.054));\n});\n\n\/\/ No candles \u2014 replaced by moody atmospheric point lights (invisible geometry)\nconst ATMOS_LIGHTS = [];\n[[-4,2,-3],[3.5,1,-2.5],[-2,3.5,-4],[4.5,2.5,-3.5]].forEach(([x,y,z],i)=>{\n const pl = new THREE.PointLight(i%2===0?0x4433aa:0x221133, .22, 10);\n pl.position.set(x,y,z);\n scene.add(pl);\n ATMOS_LIGHTS.push({pl, off:Math.random()*Math.PI*2, sp:.3+Math.random()*.2});\n});\n\n\/* \u2500\u2500 STARS \u2500\u2500 *\/\nconst SN = IS_MOBILE ? 900 : 2800;\nconst sP=new Float32Array(SN*3),sC=new Float32Array(SN*3),sS=new Float32Array(SN);\nfor(let i=0;i<SN;i++){\n sP[i*3]=(Math.random()-.5)*90; sP[i*3+1]=(Math.random()-.5)*55; sP[i*3+2]=(Math.random()-.5)*55-22;\n sS[i]=.38+Math.random()*1.5;\n const b=.3+Math.random()*.7, cp=Math.random();\n if(cp<.6){sC[i*3]=b*.9;sC[i*3+1]=b*.85;sC[i*3+2]=b*.55;}\n else if(cp<.8){sC[i*3]=b*.55;sC[i*3+1]=b*.5;sC[i*3+2]=b;}\n else{sC[i*3]=b*.5;sC[i*3+1]=b*.8;sC[i*3+2]=b;}\n}\nconst sGeo=new THREE.BufferGeometry();\nsGeo.setAttribute('position',new THREE.BufferAttribute(sP,3));\nsGeo.setAttribute('color',new THREE.BufferAttribute(sC,3));\nsGeo.setAttribute('size',new THREE.BufferAttribute(sS,1));\nconst stars=new THREE.Points(sGeo,new THREE.PointsMaterial({\n size:.040,vertexColors:true,transparent:true,opacity:.65,\n blending:THREE.AdditiveBlending,depthWrite:false,sizeAttenuation:true}));\nscene.add(stars);\n\n\/* \u2500\u2500 DUST MOTES (slow, not sparkly) \u2500\u2500 *\/\nconst DN=350;\nconst dP=new Float32Array(DN*3),dV=new Float32Array(DN*3);\nfor(let i=0;i<DN;i++){\n dP[i*3]=(Math.random()-.5)*20; dP[i*3+1]=(Math.random()-.5)*12; dP[i*3+2]=(Math.random()-.5)*12;\n dV[i*3]=(Math.random()-.5)*.004; dV[i*3+1]=.002+Math.random()*.004; dV[i*3+2]=(Math.random()-.5)*.004;\n}\nconst dGeo=new THREE.BufferGeometry();\ndGeo.setAttribute('position',new THREE.BufferAttribute(dP,3));\nscene.add(new THREE.Points(dGeo,new THREE.PointsMaterial({\n size:.022,color:0x6633aa,transparent:true,opacity:.22,\n blending:THREE.AdditiveBlending,depthWrite:false,sizeAttenuation:true})));\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SCROLL STATE MACHINE\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n\/\/ We animate from scroll 0..1 over 700vh\n\/\/ Chapters:\n\/\/ 0.00\u20130.14 : HERO \u2014 wand centred, slow spin, fade in from black\n\/\/ 0.14\u20130.30 : CHAPTER 1 \u2014 wand tilts right, camera orbits left, p1 text\n\/\/ 0.30\u20130.46 : CHAPTER 2 \u2014 wand tilts back, camera rises, p2 text\n\/\/ 0.46\u20130.58 : CHAPTER 3 \u2014 quote over dim scene, p3\n\/\/ 0.58\u20130.74 : CHAPTER 4 \u2014 wand points at camera, beam fires, DH spins in\n\/\/ 0.74\u20130.88 : CTA \u2014 p4\n\/\/ 0.88\u20131.00 : wand fades out, booking scrolls in\n\nlet sp = 0; \/\/ smooth scroll progress\n\n\/\/ Camera targets (lerped)\nlet camX=0, camY=0.3, camZ=12;\nlet camTX=0, camTY=0.3, camTZ=12;\n\n\/\/ Wand rotation targets\nlet wRX=0.06, wRY=0, wRZ=-0.28;\nlet wTRX=0.06, wTRY=0, wTRZ=-0.28;\n\n\/\/ Wand position targets\nlet wPX=0, wPY=0, wPZ=0;\nlet wTPX=0, wTPY=0, wTPZ=0;\n\n\/\/ Glow intensity\nlet glowI=1;\n\nconst LERP = 0.055;\n\nfunction lerp(a,b,t){ return a+(b-a)*t; }\nfunction smoothstep(a,b,t){ t=Math.max(0,Math.min(1,(t-a)\/(b-a))); return t*t*(3-2*t); }\nfunction fade(start,end,t){ return Math.max(0,Math.min(1,(t-start)\/(end-start))); }\n\n\/* panels to show per range *\/\nfunction updatePanels(sp) {\n document.getElementById('nav').classList.add('show'); \/\/ always clickable\n document.getElementById('p0').classList.toggle('show', sp < 0.14);\n document.getElementById('p1').classList.toggle('show', sp > 0.18 && sp < 0.52);\n document.getElementById('p3').classList.toggle('show', sp > 0.60 && sp < 0.78);\n document.getElementById('mq').classList.toggle('show', sp > 0.20 && sp < 0.55);\n\n \/\/ 3D-animatie naar de achtergrond laten verdwijnen zodra de\n \/\/ boekingssectie (Geniet en Ontspan) in beeld komt\n const cw = document.getElementById('canvas-wrap');\n if(cw) {\n const fadeOut = smoothstep(0.72, 0.85, sp);\n cw.style.opacity = String(1 - fadeOut);\n cw.style.visibility = sp > 0.85 ? 'hidden' : 'visible';\n }\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n MAIN LOOP\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\nconst _tip = new THREE.Vector3();\n\nlet prev = performance.now();\nlet autoSpin = 0.003;\n\nfunction loop() {\n requestAnimationFrame(loop);\n const now = performance.now();\n const dt = Math.min((now-prev)\/1000, .05);\n prev = now;\n const t = now * .001;\n\n \/\/ Smooth scroll progress\n const rawSPClamped = Math.max(0, Math.min(1, window.scrollY \/ (document.getElementById('scroll-body').offsetHeight)));\n sp = lerp(sp, rawSPClamped, 0.065);\n\n \/\/ Progress bar\n document.getElementById('prog').style.width = (sp*100)+'%';\n\n \/\/ Panelen op de EXACTE (niet-vertraagde) scrollpositie tonen\/verbergen \u2014\n \/\/ dit voorkomt dat Hogwarts nog nadept terwijl de boekingstekst al zichtbaar is\n updatePanels(rawSPClamped);\n\n \/* \u2500\u2500 SCROLL CHAPTERS \u2500\u2500 *\/\n if(sp < 0.18) {\n \/\/ HERO \u2014 wand centred, auto-spin\n wTRX = 0.08 + Math.sin(t*.4)*.03;\n wTRY = t * autoSpin * 60;\n wTRZ = -0.28 + Math.sin(t*.3)*.02;\n wTPX=0; wTPY=0; wTPZ=0;\n camTX=0; camTY=0.3; camTZ=12;\n glowI = 0.9 + .12*Math.sin(t*1.6);\n\n } else if(sp < 0.54) {\n const s = smoothstep(0.18, 0.54, sp);\n \/\/ INFO PANEL \u2014 wand tilts + shifts left, right side clear for text\n wTRX = lerp(0.08, 0.05, s);\n wTRY = lerp(wRY, -0.38, s);\n wTRZ = lerp(-0.28, -0.22, s);\n wTPX = lerp(0, -1.4, s);\n wTPY = lerp(0, 0.1, s);\n camTX = lerp(0, -0.6, s);\n camTY = lerp(0.3, 0.2, s);\n camTZ = lerp(12, 10.5, s);\n glowI = lerp(1.0, 1.8, s);\n\n } else if(sp < 0.62) {\n const s = smoothstep(0.54, 0.62, sp);\n \/\/ TRANSITION \u2014 panels fade, camera pulls back slightly\n wTRX = lerp(0.05, -0.15, s);\n wTRY = lerp(wRY, 0.2, s);\n wTRZ = lerp(-0.18, -0.10, s);\n camTX = lerp(0, 0, s);\n camTY = lerp(0.2, 0.1, s);\n camTZ = lerp(10.5, 13, s);\n glowI = lerp(1.8, 1.2, s);\n\n } else {\n const s = smoothstep(0.62, 1.0, sp);\n \/\/ HOGWARTS FINALE \u2014 wand slowly points at camera over a long scroll,\n \/\/ building up glow dramatically\n wTRX = lerp(-0.15, -1.38, s);\n wTRY = lerp(0.2, 0.0, s);\n wTRZ = lerp(-0.10, 0.0, s);\n wTPX = lerp(0, 0, s);\n wTPY = lerp(0, -0.3, s);\n camTX = lerp(0, 0, s);\n camTY = lerp(0.1, -0.1, s);\n camTZ = lerp(13, 8.0, s);\n glowI = lerp(1.2, 5.5, s);\n }\n\n \/\/ Mouse parallax on top of scroll-driven position\n const normMX = (mx\/window.innerWidth - 0.5);\n const normMY = (my\/window.innerHeight - 0.5);\n\n \/\/ LERP everything\n wRX = lerp(wRX, wTRX + normMY*0.06, LERP);\n wRY = lerp(wRY, wTRY + normMX*0.08, LERP);\n wRZ = lerp(wRZ, wTRZ, LERP);\n wPX = lerp(wPX, wTPX, LERP);\n wPY = lerp(wPY, wTPY, LERP);\n wPZ = lerp(wPZ, wTPZ, LERP);\n camX = lerp(camX, camTX + normMX*0.5, LERP*0.8);\n camY = lerp(camY, camTY + normMY*0.3, LERP*0.8);\n camZ = lerp(camZ, camTZ, LERP);\n\n wandGroup.rotation.x = wRX;\n wandGroup.rotation.y = wRY;\n wandGroup.rotation.z = wRZ;\n wandGroup.position.x = wPX;\n wandGroup.position.y = wPY + Math.sin(t*.58)*.12;\n wandGroup.position.z = wPZ;\n\n cam.position.x = camX;\n cam.position.y = camY;\n cam.position.z = camZ;\n cam.lookAt(wPX*.3, wPY*.3+0.2, 0);\n\n \/* \u2500\u2500 TIP \u2500\u2500 *\/\n wandGroup.updateMatrixWorld(true);\n _tip.set(0, 2.51, 0).applyMatrix4(wandGroup.matrixWorld);\n TIP_L.position.copy(_tip);\n\n \/* \u2500\u2500 GLOW \u2014 tight, premium, cool white \u2500\u2500 *\/\n const pulse = 1 + .04*Math.sin(t*5.5);\n const safeGlow = Math.min(glowI, 4);\n glowMeshes.forEach((m,i) => {\n m.material.opacity = LAYERS[i].op * safeGlow * pulse;\n m.scale.setScalar(1 + (safeGlow-1)*.10*(i\/3));\n });\n TIP_L.intensity = 2.5 * safeGlow * pulse;\n \/\/ Shift tip to ice-blue during beam fire\n TIP_L.color.setHex(safeGlow > 2.5 ? 0xc0d8ff : 0xffffff);\n\n \/* \u2500\u2500 BEAM \u2014 cold white\/blue \u2500\u2500 *\/\n const bl = Math.max(0, (glowI - 2.2) * 9);\n [bC,bM,bO].forEach((b,bi) => {\n b.scale.y = Math.max(.01, bl);\n b.position.y = b.scale.y * .5;\n b.material.opacity = Math.max(0, Math.min(1, (glowI-2.2)*(bi===0?.88:bi===1?.50:.18)));\n });\n\n \/* \u2500\u2500 DH \u2500\u2500 *\/\n DH.rotation.y += .0035;\n DH.rotation.x = Math.sin(t*.28)*.09;\n DH.position.y = 0.4 + Math.sin(t*.48)*.14;\n const dhOp = smoothstep(0.55, 0.72, sp) * (1 - smoothstep(0.84, 0.92, sp));\n DH.children.forEach((m,i) => {\n if(m.material?.transparent) m.material.opacity = (i%2===0?.45:.10)*dhOp;\n });\n\n \/* \u2500\u2500 ATMOS LIGHTS \u2500\u2500 *\/\n ATMOS_LIGHTS.forEach(({pl,off,sp:cs}) => {\n pl.intensity = .20 + .05*Math.sin(t*cs+off);\n });\n\n \/* \u2500\u2500 DUST \u2500\u2500 *\/\n for(let i=0;i<DN;i++){\n dP[i*3] +=dV[i*3];\n dP[i*3+1]+=dV[i*3+1];\n dP[i*3+2]+=dV[i*3+2];\n if(dP[i*3+1]>7) dP[i*3+1]=-7;\n if(Math.abs(dP[i*3])>11)dV[i*3]*=-1;\n if(Math.abs(dP[i*3+2])>11)dV[i*3+2]*=-1;\n }\n dGeo.attributes.position.needsUpdate=true;\n\n stars.rotation.y += .000038;\n\n \/* \u2500\u2500 SCENE FADE \u2500\u2500 *\/\n \/\/ Dim scene for quote section\n const dimFactor = 1 - smoothstep(0.47, 0.58, sp)*0.5 + smoothstep(0.58, 0.66, sp)*0.5;\n renderer.toneMappingExposure = 1.5 * dimFactor;\n\n \/\/ Voorbij de boekingssectie renderen we niet meer verder \u2014 bespaart GPU\/batterij\n if(sp < 0.85) renderer.render(scene, cam);\n}\n\nloop();\n\n\ndocument.querySelectorAll('a[href^=\"#\"]').forEach(a=>{\n a.addEventListener('click',e=>{\n e.preventDefault();\n const el=document.querySelector(a.getAttribute('href'));\n if(el) el.scrollIntoView({behavior:'smooth'});\n });\n});\n\n\nfunction fixP3() {\n const p3 = document.getElementById('p3');\n if(!p3) return;\n p3.style.setProperty('position','fixed','important');\n p3.style.setProperty('top','0','important');\n p3.style.setProperty('left','0','important');\n p3.style.setProperty('right','0','important');\n p3.style.setProperty('bottom','0','important');\n p3.style.setProperty('width','100vw','important');\n p3.style.setProperty('height','100vh','important');\n p3.style.setProperty('display','flex','important');\n p3.style.setProperty('align-items','center','important');\n p3.style.setProperty('justify-content','center','important');\n let node = p3.parentElement;\n while(node && node !== document.body) {\n node.style.setProperty('transform','none','important');\n node.style.setProperty('position','static','important');\n node = node.parentElement;\n }\n}\nfixP3();\nsetTimeout(fixP3, 200);\nsetTimeout(fixP3, 600);\n\n} catch(e) {\n console.error('3D-animatie kon niet laden, maar de rest van de site werkt gewoon door:', e);\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<div class=\"elementor-element elementor-element-0fd3263 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"0fd3263\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0851ab2 elementor-widget elementor-widget-themo-mphb-booking-form\" data-id=\"0851ab2\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"booking-widget\" data-widget_type=\"themo-mphb-booking-form.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t <div class=\"th-fo-form th-centered th-form-default th-btn-form btn-standard-primary-form\"><div class=\"mphb_sc_booking_form-wrapper frm_forms with_frm_style \">\t<form method=\"POST\" action=\"https:\/\/wizardscottage.com\/en\/booking-confirmation\/\" class=\"mphb-booking-form mphb-booking-form--direct-booking\" id=\"booking-form-446\" data-first_available_check_in_date=\"2026-09-01\">\n\n\t\t<p class=\"mphb-required-fields-tip\"><small>Required fields are followed by <abbr title=\"required\">*<\/abbr><\/small><\/p>\n\t\t\t\t<input type=\"hidden\" name=\"mphb_room_type_id\" value=\"446\" \/>\n\t\t<p class=\"mphb-check-in-date-wrapper frm_form_field\">\n\t\t\t<label for=\"mphb_check_in_date-6a66988e72a00\">\n\t\t\t\tCheck-in Date\t\t\t\t<abbr title=\"Formatted as dd\/mm\/yyyy\">*<\/abbr>\n\t\t\t<\/label>\n\t\t\t<br \/>\n\t\t\t<input id=\"mphb_check_in_date-6a66988e72a00\" type=\"text\" class=\"mphb-datepick\" value=\"\" required=\"required\" autocomplete=\"off\" placeholder=\"Check-in Date\" inputmode=\"none\" \/>\n\t\t\t<input id=\"mphb_check_in_date-6a66988e72a00-hidden\" type=\"hidden\" name=\"mphb_check_in_date\" value=\"\" \/>\n\t\t<\/p>\n\t\t<p class=\"mphb-check-out-date-wrapper frm_form_field\">\n\t\t\t<label for=\"mphb_check_out_date-6a66988e72a00\">\n\t\t\t\tCheck-out Date\t\t\t\t<abbr title=\"Formatted as dd\/mm\/yyyy\">*<\/abbr>\n\t\t\t<\/label>\n\t\t\t<br \/>\n\t\t\t<input id=\"mphb_check_out_date-6a66988e72a00\" type=\"text\" class=\"mphb-datepick\" value=\"\" required=\"required\" autocomplete=\"off\" placeholder=\"Check-out Date\" inputmode=\"none\" \/>\n\t\t\t<input id=\"mphb_check_out_date-6a66988e72a00-hidden\" type=\"hidden\" name=\"mphb_check_out_date\" value=\"\" \/>\n\t\t<\/p>\n\t\t\t\t\t\t\t<div class=\"mphb-reserve-room-section frm_submit mphb-hide\">\n\t\t\t\t<p class=\"mphb-rooms-quantity-wrapper mphb-rooms-quantity-multiple mphb-hide\">\n\t\t\t\tReserve <select class=\"mphb-rooms-quantity\" id=\"mphb-rooms-quantity-446\" name=\"mphb_rooms_details[446]\"><option value=\"1\" selected=\"selected\">1<\/option><\/select> of <span class=\"mphb-available-rooms-count\">1<\/span> available accommodations.\t\t\t\t<\/p>\n\t\t\t\t<p class=\"mphb-rooms-quantity-wrapper mphb-rooms-quantity-single mphb-hide\">\n\t\t\t\t\tWizard's Cottage is available for selected dates.\t\t\t\t<\/p>\n\t\t\t\t\t\t\t\t<input type=\"hidden\" name=\"mphb_is_direct_booking\" value=\"1\" \/>\n\t\t\t\t<input class=\"button mphb-button mphb-confirm-reservation\" type=\"submit\" value=\"Confirm Reservation\" \/>\n\t\t\t<\/div>\n\t\t\n\t\t<div class=\"mphb-errors-wrapper mphb-hide\"><\/div>\n\t\t<p class=\"mphb-reserve-btn-wrapper frm_submit\">\n\t\t\t<input class=\"mphb-reserve-btn button\" type=\"submit\" value=\"Check Availability\" \/>\n\t\t<\/p>\n\t<\/form>\n\t<\/div><\/div>\n \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f4d0725 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"f4d0725\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-509f5fa\" data-id=\"509f5fa\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6ee47b7 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"6ee47b7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8e094d2 elementor-widget elementor-widget-html\" data-id=\"8e094d2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!--\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FOOTER \u2014 apart HTML-blokje\n Voeg dit toe als NIEUWE HTML-widget in Elementor,\n ONDER je boekingswidget (helemaal onderaan de pagina).\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n-->\n<style>\n.wc-footer {\n background: #04020b;\n border-top: 1px solid rgba(200,168,75,.07);\n padding: 44px 52px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n gap: 16px;\n font-family: 'IM Fell English', serif;\n}\n.wc-footer .ft-logo {\n font-family: 'Cinzel', serif;\n font-size: .68rem;\n letter-spacing: .3em;\n text-transform: uppercase;\n color: #c8a84b;\n}\n.wc-footer .ft-links {\n display: flex;\n gap: 22px;\n}\n.wc-footer .ft-links a {\n font-family: 'Cinzel', serif;\n font-size: .52rem;\n letter-spacing: .14em;\n text-transform: uppercase;\n color: rgba(240,223,192,.22);\n text-decoration: none;\n transition: color .3s;\n}\n.wc-footer .ft-links a:hover { color: #c8a84b; }\n.wc-footer .ft-cp {\n font-family: 'Cinzel', serif;\n font-size: .5rem;\n letter-spacing: .15em;\n text-transform: uppercase;\n color: rgba(240,223,192,.15);\n}\n<\/style>\n\n<footer class=\"wc-footer\">\n <div class=\"ft-logo\">\u2726 Wizard's Cottage<\/div>\n <div class=\"ft-links\">\n <a href=\"#booking-widget\">Reserveer<\/a>\n <a href=\"mailto:info@wizardscottage.com\">Contact<\/a>\n <\/div>\n <div class=\"ft-cp\">\u00a9 2026 Wizard's Cottage \u00b7 wizardscottage.com<\/div>\n<\/footer>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Wizard’s Cottage Bezemkastkamer \u2726 Ministry of Magic Badkamer \u2726 Totaalervaring Van Boeking Tot Vertrek \u2726 Max. 4 Gasten \u2726 Naast Natuurgebied \u2726 Alle Voorzieningen \u2726 Welkomstgeschenk Inclusief \u2726 Griffoendor Slaapkamer \u2726 Bezemkastkamer \u2726 Ministry of Magic Badkamer \u2726 Totaalervaring Van … <a href=\"https:\/\/wizardscottage.com\/en\/\">Read More<\/a><\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-356","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wizardscottage.com\/en\/wp-json\/wp\/v2\/pages\/356","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wizardscottage.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wizardscottage.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wizardscottage.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wizardscottage.com\/en\/wp-json\/wp\/v2\/comments?post=356"}],"version-history":[{"count":118,"href":"https:\/\/wizardscottage.com\/en\/wp-json\/wp\/v2\/pages\/356\/revisions"}],"predecessor-version":[{"id":656,"href":"https:\/\/wizardscottage.com\/en\/wp-json\/wp\/v2\/pages\/356\/revisions\/656"}],"wp:attachment":[{"href":"https:\/\/wizardscottage.com\/en\/wp-json\/wp\/v2\/media?parent=356"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}