<style id="elementor-post-852">.elementor-852 .elementor-element.elementor-element-27681c3{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:0.15;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:2;}.elementor-852 .elementor-element.elementor-element-27681c3::before, .elementor-852 .elementor-element.elementor-element-27681c3 > .elementor-background-video-container::before, .elementor-852 .elementor-element.elementor-element-27681c3 > .e-con-inner > .elementor-background-video-container::before, .elementor-852 .elementor-element.elementor-element-27681c3 > .elementor-background-slideshow::before, .elementor-852 .elementor-element.elementor-element-27681c3 > .e-con-inner > .elementor-background-slideshow::before, .elementor-852 .elementor-element.elementor-element-27681c3 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-852 .elementor-element.elementor-element-ccf288e{--display:flex;--min-height:80vh;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--overlay-opacity:1;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-852 .elementor-element.elementor-element-ccf288e:not(.elementor-motion-effects-element-type-background), .elementor-852 .elementor-element.elementor-element-ccf288e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://clashrooms.nl/wp-content/uploads/2024/08/105-FP0A9293-Enhanced-NR-scaled.webp");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-852 .elementor-element.elementor-element-ccf288e::before, .elementor-852 .elementor-element.elementor-element-ccf288e > .elementor-background-video-container::before, .elementor-852 .elementor-element.elementor-element-ccf288e > .e-con-inner > .elementor-background-video-container::before, .elementor-852 .elementor-element.elementor-element-ccf288e > .elementor-background-slideshow::before, .elementor-852 .elementor-element.elementor-element-ccf288e > .e-con-inner > .elementor-background-slideshow::before, .elementor-852 .elementor-element.elementor-element-ccf288e > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';background-color:transparent;background-image:linear-gradient(90deg, #000F4C8C 40%, #000F4C40 60%);}.elementor-852 .elementor-element.elementor-element-bbde74a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-852 .elementor-element.elementor-element-bab1e19{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-852 .elementor-element.elementor-element-6669f2c{text-align:start;}.elementor-852 .elementor-element.elementor-element-6669f2c .elementor-heading-title{font-family:var( --e-global-typography-9f0f44e-font-family ), Sans-serif;font-size:var( --e-global-typography-9f0f44e-font-size );font-weight:var( --e-global-typography-9f0f44e-font-weight );line-height:var( --e-global-typography-9f0f44e-line-height );letter-spacing:var( --e-global-typography-9f0f44e-letter-spacing );word-spacing:var( --e-global-typography-9f0f44e-word-spacing );-webkit-text-stroke-color:#000;stroke:#000;color:var( --e-global-color-a99b5ce );}.elementor-852 .elementor-element.elementor-element-7131dfc{text-align:start;font-family:"Basier Circle", Sans-serif;font-size:18px;font-weight:400;line-height:32px;color:var( --e-global-color-a99b5ce );width:var( --container-widget-width, 589px );max-width:589px;--container-widget-width:589px;--container-widget-flex-grow:0;}.elementor-852 .elementor-element.elementor-element-7131dfc > .elementor-widget-container{margin:20px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-852 .elementor-element.elementor-element-f20ea1c{--display:flex;--min-height:30px;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:20px 20px;--row-gap:20px;--column-gap:20px;--overlay-opacity:1;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-852 .elementor-element.elementor-element-f20ea1c:not(.elementor-motion-effects-element-type-background), .elementor-852 .elementor-element.elementor-element-f20ea1c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#193DCA;}.elementor-852 .elementor-element.elementor-element-f20ea1c::before, .elementor-852 .elementor-element.elementor-element-f20ea1c > .elementor-background-video-container::before, .elementor-852 .elementor-element.elementor-element-f20ea1c > .e-con-inner > .elementor-background-video-container::before, .elementor-852 .elementor-element.elementor-element-f20ea1c > .elementor-background-slideshow::before, .elementor-852 .elementor-element.elementor-element-f20ea1c > .e-con-inner > .elementor-background-slideshow::before, .elementor-852 .elementor-element.elementor-element-f20ea1c > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';background-color:transparent;background-image:linear-gradient(90deg, #000F4C8C 40%, #000F4C40 33%);}.elementor-852 .elementor-element.elementor-element-f20ea1c.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-852 .elementor-element.elementor-element-5d16479{--display:flex;--min-height:900px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--position:absolute;top:0px;--z-index:0;}body:not(.rtl) .elementor-852 .elementor-element.elementor-element-5d16479{left:0px;}body.rtl .elementor-852 .elementor-element.elementor-element-5d16479{right:0px;}.elementor-852 .elementor-element.elementor-element-aff4d00{--display:flex;--min-height:100vh;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--position:fixed;top:0px;--z-index:0;}.elementor-852 .elementor-element.elementor-element-aff4d00:not(.elementor-motion-effects-element-type-background), .elementor-852 .elementor-element.elementor-element-aff4d00 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, var( --e-global-color-a99b5ce ) 70%, var( --e-global-color-f2a3ac1 ) 100%);}body:not(.rtl) .elementor-852 .elementor-element.elementor-element-aff4d00{left:0px;}body.rtl .elementor-852 .elementor-element.elementor-element-aff4d00{right:0px;}.elementor-852 .elementor-element.elementor-element-8e0888f > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}body:not(.rtl) .elementor-852 .elementor-element.elementor-element-8e0888f{left:0px;}body.rtl .elementor-852 .elementor-element.elementor-element-8e0888f{right:0px;}.elementor-852 .elementor-element.elementor-element-8e0888f{top:-10px;}.elementor-852 .elementor-element.elementor-element-f24a97a > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}body:not(.rtl) .elementor-852 .elementor-element.elementor-element-f24a97a{right:0px;}body.rtl .elementor-852 .elementor-element.elementor-element-f24a97a{left:0px;}.elementor-852 .elementor-element.elementor-element-f24a97a{bottom:0px;}.elementor-852 .elementor-element.elementor-element-df9902c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:50px 50px;--row-gap:50px;--column-gap:50px;--margin-top:100px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:1;}.elementor-852 .elementor-element.elementor-element-a5f0cb7 .elementor-heading-title{font-family:"Lexend Deca", Sans-serif;font-size:clamp(2.1rem, 1.9154rem + 0.8205vw, 2.5rem);font-weight:700;color:var( --e-global-color-primary );}.elementor-852 .elementor-element.elementor-element-c0b7f97{--display:flex;--border-radius:0px 0px 0px 0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-852 .elementor-element.elementor-element-8ba81dd{--display:flex;}.elementor-852 .elementor-element.elementor-element-bce1198 > .elementor-widget-container{margin:20px 20px 20px 20px;}.elementor-852 .elementor-element.elementor-element-bce1198.elementor-element{--align-self:center;}.elementor-852 .elementor-element.elementor-element-d3e158e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:50px 50px;--row-gap:50px;--column-gap:50px;--margin-top:50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:1;}.elementor-852 .elementor-element.elementor-element-6f86ec7 .elementor-heading-title{font-family:"Lexend Deca", Sans-serif;font-size:clamp(2.1rem, 1.9154rem + 0.8205vw, 2.5rem);font-weight:700;color:var( --e-global-color-primary );}.elementor-852 .elementor-element.elementor-element-2edc2f2{--display:flex;--border-radius:0px 0px 0px 0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(max-width:1366px){.elementor-852 .elementor-element.elementor-element-6669f2c .elementor-heading-title{font-size:var( --e-global-typography-9f0f44e-font-size );line-height:var( --e-global-typography-9f0f44e-line-height );letter-spacing:var( --e-global-typography-9f0f44e-letter-spacing );word-spacing:var( --e-global-typography-9f0f44e-word-spacing );}.elementor-852 .elementor-element.elementor-element-df9902c{--padding-top:0px;--padding-bottom:0px;--padding-left:50px;--padding-right:50px;}.elementor-852 .elementor-element.elementor-element-d3e158e{--padding-top:0px;--padding-bottom:0px;--padding-left:50px;--padding-right:50px;}}@media(max-width:1024px){.elementor-852 .elementor-element.elementor-element-27681c3{--min-height:0vh;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-852 .elementor-element.elementor-element-ccf288e{--min-height:60vh;}.elementor-852 .elementor-element.elementor-element-6669f2c .elementor-heading-title{font-size:var( --e-global-typography-9f0f44e-font-size );line-height:var( --e-global-typography-9f0f44e-line-height );letter-spacing:var( --e-global-typography-9f0f44e-letter-spacing );word-spacing:var( --e-global-typography-9f0f44e-word-spacing );}.elementor-852 .elementor-element.elementor-element-7131dfc{width:var( --container-widget-width, 370px );max-width:370px;--container-widget-width:370px;--container-widget-flex-grow:0;}.elementor-852 .elementor-element.elementor-element-8e0888f{width:var( --container-widget-width, 150px );max-width:150px;--container-widget-width:150px;--container-widget-flex-grow:0;top:445px;}.elementor-852 .elementor-element.elementor-element-f24a97a{width:var( --container-widget-width, 150px );max-width:150px;--container-widget-width:150px;--container-widget-flex-grow:0;bottom:-321px;}.elementor-852 .elementor-element.elementor-element-df9902c{--padding-top:0px;--padding-bottom:0px;--padding-left:50px;--padding-right:50px;}.elementor-852 .elementor-element.elementor-element-d3e158e{--padding-top:0px;--padding-bottom:0px;--padding-left:50px;--padding-right:50px;}}@media(max-width:767px){.elementor-852 .elementor-element.elementor-element-27681c3{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-852 .elementor-element.elementor-element-ccf288e{--min-height:45vh;--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-852 .elementor-element.elementor-element-bbde74a{--width:100%;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-852 .elementor-element.elementor-element-6669f2c{text-align:center;}.elementor-852 .elementor-element.elementor-element-6669f2c .elementor-heading-title{font-size:var( --e-global-typography-9f0f44e-font-size );line-height:var( --e-global-typography-9f0f44e-line-height );letter-spacing:var( --e-global-typography-9f0f44e-letter-spacing );word-spacing:var( --e-global-typography-9f0f44e-word-spacing );}.elementor-852 .elementor-element.elementor-element-7131dfc{text-align:center;font-size:16px;}.elementor-852 .elementor-element.elementor-element-f20ea1c{--gap:64px 20px;--row-gap:64px;--column-gap:20px;}.elementor-852 .elementor-element.elementor-element-df9902c{--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-852 .elementor-element.elementor-element-d3e158e{--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}}@media(min-width:768px){.elementor-852 .elementor-element.elementor-element-bbde74a{--width:1300px;}.elementor-852 .elementor-element.elementor-element-bab1e19{--width:40%;}.elementor-852 .elementor-element.elementor-element-f20ea1c{--width:101.499%;}.elementor-852 .elementor-element.elementor-element-df9902c{--width:1300px;}.elementor-852 .elementor-element.elementor-element-d3e158e{--width:1300px;}}@media(max-width:1366px) and (min-width:768px){.elementor-852 .elementor-element.elementor-element-27681c3{--width:100%;}.elementor-852 .elementor-element.elementor-element-ccf288e{--width:100%;}.elementor-852 .elementor-element.elementor-element-bbde74a{--width:80%;}.elementor-852 .elementor-element.elementor-element-f20ea1c{--width:100%;}.elementor-852 .elementor-element.elementor-element-df9902c{--width:100%;}.elementor-852 .elementor-element.elementor-element-d3e158e{--width:100%;}}@media(max-width:1024px) and (min-width:768px){.elementor-852 .elementor-element.elementor-element-27681c3{--width:100%;}.elementor-852 .elementor-element.elementor-element-ccf288e{--width:100%;}.elementor-852 .elementor-element.elementor-element-bbde74a{--width:50%;}.elementor-852 .elementor-element.elementor-element-bab1e19{--width:100%;}.elementor-852 .elementor-element.elementor-element-f20ea1c{--width:100%;}.elementor-852 .elementor-element.elementor-element-df9902c{--width:100%;}.elementor-852 .elementor-element.elementor-element-d3e158e{--width:100%;}}/* Start Custom Fonts CSS */@font-face {
	font-family: 'Basier Circle';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://clashrooms.nl/wp-content/uploads/2024/03/BasierCircle-Regular.woff') format('woff');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Lexend Deca';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://clashrooms.nl/wp-content/uploads/2024/03/LexendDecaRegular.woff') format('woff');
}
@font-face {
	font-family: 'Lexend Deca';
	font-style: normal;
	font-weight: 700;
	font-display: auto;
	src: url('https://clashrooms.nl/wp-content/uploads/2024/03/LexendDeca-Bold.ttf') format('truetype');
}
/* End Custom Fonts CSS */</style>{"id":852,"date":"2024-03-28T10:14:12","date_gmt":"2024-03-28T09:14:12","guid":{"rendered":"https:\/\/clashrooms.nl\/?page_id=852"},"modified":"2026-10-05T15:22:01","modified_gmt":"2026-10-05T13:22:01","slug":"book","status":"publish","type":"page","link":"https:\/\/clashrooms.nl\/en\/boeken\/","title":{"rendered":"Book"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"852\" class=\"elementor elementor-852\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-27681c3 e-con-full e-flex e-con e-parent\" data-id=\"27681c3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-ccf288e e-con-full e-flex e-con e-child\" data-id=\"ccf288e\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-bbde74a e-con-full e-flex e-con e-child\" data-id=\"bbde74a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-bab1e19 e-con-full e-flex e-con e-child\" data-id=\"bab1e19\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6669f2c elementor-widget elementor-widget-heading\" data-id=\"6669f2c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Boeken<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7131dfc elementor-widget__width-initial elementor-widget-tablet__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"7131dfc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Een reservering aanvragen doe je zo!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f20ea1c e-con-full e-flex e-con e-parent\" data-id=\"f20ea1c\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-5d16479 e-con-full e-flex e-con e-child\" data-id=\"5d16479\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-aff4d00 e-con-full e-flex e-con e-child\" data-id=\"aff4d00\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;,&quot;position&quot;:&quot;fixed&quot;}\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8e0888f elementor-absolute elementor-widget-tablet__width-initial elementor-hidden-mobile elementor-widget elementor-widget-image\" data-id=\"8e0888f\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;,&quot;motion_fx_motion_fx_scrolling&quot;:&quot;yes&quot;,&quot;motion_fx_translateY_effect&quot;:&quot;yes&quot;,&quot;motion_fx_translateY_speed&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:2,&quot;sizes&quot;:[]},&quot;motion_fx_translateY_affectedRange&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:{&quot;start&quot;:0,&quot;end&quot;:100}},&quot;motion_fx_devices&quot;:[&quot;desktop&quot;,&quot;laptop&quot;,&quot;tablet&quot;,&quot;mobile&quot;]}\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"208\" height=\"536\" src=\"https:\/\/clashrooms.nl\/wp-content\/uploads\/2024\/03\/frame-left.svg\" class=\"attachment-large size-large wp-image-762\" alt=\"frame left\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f24a97a elementor-absolute elementor-widget-tablet__width-initial elementor-widget elementor-widget-image\" data-id=\"f24a97a\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;,&quot;motion_fx_motion_fx_scrolling&quot;:&quot;yes&quot;,&quot;motion_fx_translateY_effect&quot;:&quot;yes&quot;,&quot;motion_fx_translateY_speed&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:2,&quot;sizes&quot;:[]},&quot;motion_fx_translateY_affectedRange&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:{&quot;start&quot;:0,&quot;end&quot;:100}},&quot;motion_fx_devices&quot;:[&quot;desktop&quot;,&quot;laptop&quot;,&quot;tablet&quot;,&quot;mobile&quot;]}\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"208\" height=\"536\" src=\"https:\/\/clashrooms.nl\/wp-content\/uploads\/2024\/03\/frame-right.svg\" class=\"attachment-large size-large wp-image-764\" alt=\"frame right\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-df9902c e-con-full animated-fast e-flex elementor-invisible e-con e-child\" data-id=\"df9902c\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;animation&quot;:&quot;fadeInUp&quot;,&quot;animation_delay&quot;:100}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a5f0cb7 elementor-widget elementor-widget-heading\" data-id=\"a5f0cb7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Klaar om te Clashen? Boek nu jouw ClashRooms avontuur!<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c0b7f97 e-con-full e-flex e-con e-child\" data-id=\"c0b7f97\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bd80e76 elementor-widget elementor-widget-text-editor\" data-id=\"bd80e76\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Via onderstaande stappen bezorg je je vrienden, collega&#8217;s of familie het leukste uitje van het jaar!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9f5012c elementor-widget elementor-widget-html\" data-id=\"9f5012c\" 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<!--\r\n  ============================================================\r\n  CLASHROOMS \u2014 BOEKINGSWIDGET (voor Elementor HTML-widget)\r\n  ============================================================\r\n  Plak dit VOLLEDIG in een Elementor \"HTML\"-widget op de boekingspagina.\r\n  Zelfstandig: eigen opmaak (CSS) + logica (JS). Tweetalig (NL\/EN):\r\n  detecteert automatisch \/en\/ (TranslatePress) en schakelt alle tekst mee.\r\n\r\n  Testmodus gaat vanzelf aan op \/boeken-test-boekingsproces\/: daar krijgt de\r\n  voornaam het voorvoegsel \"ZZZTEST_\" en worden testgegevens ingevuld. Laat dat\r\n  staan, ook in productie. Op de live pagina slaat die detectie niet aan, dus er\r\n  is daar niets te verwijderen.\r\n  Build: 66979c3 (2026-10-05 15:01)\r\n  ============================================================\r\n-->\r\n\r\n<style>\r\n.cr-booking-form {\r\n  --cr-blue:   #000F4C;\r\n  --cr-pink:   #DF1550;\r\n  --cr-yellow: #F9CB08;\r\n  --cr-light:  #F0F5FF;\r\n  max-width: 700px;\r\n  margin: 0 auto;\r\n  color: var(--cr-blue);\r\n  position: relative;\r\n}\r\n.cr-booking-form__progress { display: flex; align-items: center; margin-bottom: 40px; gap: 0; }\r\n.cr-bf-step-indicator { position: relative; display: flex; align-items: center; justify-content: center; }\r\n.cr-bf-step-dot { width: 36px; height: 36px; border-radius: 50%; background: #e0e0e0; color: #999; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; transition: all .3s; }\r\n.cr-bf-step-label { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 6px; font-size: .75rem; color: #999; white-space: nowrap; }\r\n\/* Het label staat gecentreerd op zijn bolletje. Bij de buitenste twee stappen\r\n   steekt daardoor de helft buiten de balk: rechts veroorzaakt dat horizontale\r\n   overloop op de hele pagina, en dan schuift alles op en valt de kalender deels\r\n   buiten beeld. De buitenste labels lijnen daarom uit op hun eigen rand in\r\n   plaats van op hun midden, zodat er nooit iets uitsteekt. Ongeacht scherm-\r\n   breedte of lettergrootte-instelling van de bezoeker. *\/\r\n.cr-bf-step-indicator:first-child .cr-bf-step-label { left: 0; transform: none; }\r\n.cr-bf-step-indicator:last-child  .cr-bf-step-label { left: auto; right: 0; transform: none; }\r\n.cr-bf-step-indicator--active .cr-bf-step-dot { background: var(--cr-pink); color: #fff; }\r\n.cr-bf-step-indicator--active .cr-bf-step-label { color: var(--cr-pink); font-weight: 600; }\r\n.cr-bf-step-indicator--done .cr-bf-step-dot { background: var(--cr-blue); color: #fff; }\r\n.cr-bf-step-line { flex: 1; height: 2px; background: #e0e0e0; margin: 0 6px; transition: background .3s; }\r\n.cr-bf-step-line--done { background: var(--cr-blue); }\r\n\r\n.cr-bf-panel { display: none; }\r\n.cr-bf-panel--active { display: block; animation: cr-fadein .25s ease; }\r\n@keyframes cr-fadein { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform: translateY(0); } }\r\n.cr-bf-panel__title { font-family: \"Lexend Deca\", sans-serif; font-size: 1.4rem; color: var(--cr-blue); margin-bottom: 24px; }\r\n\r\n.cr-bf-field { margin-bottom: 20px; }\r\n.cr-bf-label { display: block; font-weight: 600; font-size: .9rem; color: var(--cr-blue); margin-bottom: 8px; }\r\n.cr-bf-input, .cr-bf-select, .cr-bf-textarea { width: 100%; padding: 12px 14px; border: 2px solid #dde3f0; border-radius: 8px; font-size: .95rem; color: var(--cr-blue); background: #fff; transition: border-color .2s; box-sizing: border-box; }\r\n.cr-bf-input:focus, .cr-bf-select:focus, .cr-bf-textarea:focus { outline: none; border-color: var(--cr-blue); }\r\n.cr-bf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }\r\n@media (max-width: 540px) { .cr-bf-row { grid-template-columns: 1fr; } }\r\n\r\n.cr-bf-btn-group { display: flex; flex-wrap: nowrap; gap: 10px; }\r\n.cr-bf-btn-group--wrap { flex-wrap: wrap; }\r\n.cr-bf-opt-btn { padding: 10px 18px; border: 2px solid #dde3f0; border-radius: 8px; background: #fff; color: var(--cr-blue); font-size: .9rem; cursor: pointer; transition: all .2s; }\r\n.cr-bf-opt-btn:hover, .cr-bf-opt-btn:focus { background: #fff; border-color: var(--cr-pink); color: var(--cr-pink); text-decoration: none; }\r\n.cr-bf-opt-btn.cr-bf-opt-btn--active, .cr-bf-opt-btn.cr-bf-opt-btn--active:hover, .cr-bf-opt-btn.cr-bf-opt-btn--active:focus { background: var(--cr-pink); border-color: var(--cr-pink); color: #fff; text-decoration: none; }\r\n.cr-bf-opt-btn small { opacity: .75; }\r\n\r\n.cr-bf-price-preview { background: var(--cr-light); border-radius: 8px; padding: 14px 18px; font-size: .95rem; color: var(--cr-blue); margin-bottom: 24px; }\r\n.cr-bf-price-preview strong { font-size: 1.1rem; }\r\n.cr-bf-zakelijk { background: var(--cr-light); border-radius: 10px; padding: 16px; margin-bottom: 8px; }\r\n\r\n\/* Extra's op stap 5: label links, Ja\/Nee rechts, uitleg eronder *\/\r\n.cr-bf-extra { border-bottom: 1px solid #e6ebf5; padding: 16px 0; }\r\n.cr-bf-extra:first-of-type { padding-top: 4px; }\r\n.cr-bf-extra-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }\r\n.cr-bf-extra-label { font-family: \"Lexend Deca\", sans-serif; font-weight: 600; font-size: 1rem; color: var(--cr-blue); }\r\n.cr-bf-extra-uitleg { margin: 6px 0 0; font-size: .85rem; line-height: 1.4; color: rgba(0,15,76,.6); }\r\n.cr-bf-extra-uitleg--sub { margin-top: 3px; font-size: .8rem; font-style: italic; }\r\n\r\n\/* Info-knopje naast een label + het uitklapbare tekstblok eronder.\r\n   Geen hover-tooltip: dit wordt vooral op telefoons ingevuld en daar bestaat\r\n   hover niet. Klikken (of Enter\/spatie) klapt de uitleg open. *\/\r\n.cr-bf-extra-label { display: inline-flex; align-items: center; gap: 8px; }\r\n.cr-bf-info-btn {\r\n  flex: 0 0 auto;\r\n  width: 20px; height: 20px; padding: 0;\r\n  border: 1.5px solid rgba(0,15,76,.35); border-radius: 50%;\r\n  background: #fff; color: rgba(0,15,76,.7);\r\n  font-family: Georgia, \"Times New Roman\", serif; font-style: italic;\r\n  font-size: .8rem; font-weight: 700; line-height: 1;\r\n  cursor: pointer; transition: background .15s, border-color .15s, color .15s;\r\n}\r\n.cr-bf-info-btn:hover { background: var(--cr-pink); border-color: var(--cr-pink); color: #fff; }\r\n.cr-bf-info-btn:focus-visible { outline: 2px solid var(--cr-pink); outline-offset: 2px; }\r\n.cr-bf-info-btn[aria-expanded=\"true\"] { background: var(--cr-pink); border-color: var(--cr-pink); color: #fff; }\r\n.cr-bf-info-paneel {\r\n  margin-top: 10px; padding: 12px 14px;\r\n  background: var(--cr-light); border-radius: 8px;\r\n  border-left: 3px solid var(--cr-pink);\r\n}\r\n.cr-bf-info-paneel p { margin: 0; font-size: .85rem; line-height: 1.5; color: rgba(0,15,76,.75); }\r\n\/* Desktop: Ja\/Nee-knoppen even breed en netjes uitgelijnd over de drie extra's heen *\/\r\n@media (min-width: 481px) {\r\n  .cr-bf-extra .cr-bf-btn-group { flex: 0 0 auto; width: 320px; }\r\n  .cr-bf-extra .cr-bf-btn-group .cr-bf-opt-btn { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; }\r\n}\r\n@media (max-width: 480px) {\r\n  .cr-bf-extra-head { flex-direction: column; align-items: flex-start; gap: 10px; }\r\n  .cr-bf-extra .cr-bf-btn-group { width: 100%; }\r\n  .cr-bf-extra .cr-bf-btn-group .cr-bf-opt-btn { flex: 1 1 0; text-align: center; }\r\n}\r\n\r\n\/* Stap 3 gebruikt dezelfde opzet, maar Type uitje heeft zes keuzes in plaats\r\n   van twee. Die passen niet in de vaste kolom hierboven, dus daar krijgt de\r\n   groep een bredere kolom waarin de knoppen op eigen breedte doorlopen,\r\n   van rechts opgevuld, zodat de rechterrand gelijk blijft lopen met Taal. *\/\r\n.cr-bf-extra-head--top { align-items: flex-start; }\r\n@media (min-width: 481px) {\r\n  .cr-bf-extra .cr-bf-btn-group--wrap { flex: 0 1 auto; width: auto; max-width: 62%; justify-content: flex-end; }\r\n  .cr-bf-extra .cr-bf-btn-group--wrap .cr-bf-opt-btn { flex: 0 0 auto; }\r\n}\r\n\/* Mobiel vullen ze de rij op zonder tot nul te krimpen (flex-basis auto i.p.v. 0),\r\n   zodat je twee leesbare knoppen naast elkaar krijgt in plaats van zes geplette. *\/\r\n@media (max-width: 480px) {\r\n  .cr-bf-extra .cr-bf-btn-group--wrap .cr-bf-opt-btn { flex: 1 1 auto; }\r\n}\r\n\r\n\/* Onzekerheid over aantal, datum of tijd. Het toelichtingsvak staat er standaard\r\n   niet: pas als het vinkje aan gaat verschijnt het, zodat het formulier kort blijft\r\n   voor iedereen die het wel zeker weet. *\/\r\n.cr-bf-onzeker { background: var(--cr-light); border-radius: 10px; padding: 14px 16px; margin-bottom: 20px; }\r\n.cr-bf-onzeker-intro { margin: 0 0 12px; font-size: .9rem; line-height: 1.45; font-weight: 600; color: var(--cr-blue); }\r\n.cr-bf-onzeker-check { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--cr-blue); cursor: pointer; }\r\n.cr-bf-onzeker-check input { flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--cr-blue); }\r\n.cr-bf-onzeker .cr-bf-btn-group { margin-bottom: 14px; }\r\n.cr-bf-onzeker-uitleg { margin-top: 12px; }\r\n.cr-bf-onzeker-uitleg .cr-bf-label { font-size: .85rem; }\r\n.cr-bf-onzeker-note { margin: 6px 0 0; font-size: .8rem; line-height: 1.4; color: rgba(0,15,76,.6); }\r\n\r\n.cr-bf-summary { background: var(--cr-light); border-radius: 12px; padding: 20px 22px; margin-bottom: 20px; color: var(--cr-blue); }\r\n.cr-sum-title { font-family: \"Lexend Deca\", sans-serif; font-weight: 600; color: var(--cr-blue); font-size: 1.05rem; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }\r\n.cr-sum-title svg { width: 18px; height: 18px; color: var(--cr-pink); }\r\n.cr-sum-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; border-bottom: 1px solid rgba(0,15,76,.08); font-size: .92rem; }\r\n.cr-sum-row:last-of-type { border-bottom: none; }\r\n.cr-sum-row span { color: rgba(0,15,76,.6); }\r\n.cr-sum-row strong { color: var(--cr-blue); font-weight: 600; text-align: right; }\r\n\/* Rijen met vrije tekst van de boeker: label boven, tekst eronder over de volle\r\n   breedte en links uitgelijnd. Rechts uitlijnen levert bij een hele zin een\r\n   rafelrand op, en de boeker bepaalt zelf hoe lang die zin is. *\/\r\n.cr-sum-row--tekst { display: block; }\r\n.cr-sum-row--tekst strong { display: block; text-align: left; margin-top: 3px; font-weight: 500; line-height: 1.45; }\r\n.cr-sum-total { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding: 13px 18px; background: var(--cr-blue); color: #fff; border-radius: 9px; }\r\n.cr-sum-total span { font-size: .9rem; opacity: .85; }\r\n.cr-sum-total strong { font-size: 1.1rem; color: var(--cr-yellow); font-family: \"Lexend Deca\", sans-serif; }\r\n.cr-sum-calc { margin-top: 8px; font-size: .82rem; color: rgba(0,15,76,.55); text-align: right; }\r\n\r\n.cr-bf-field--check label { display: flex; align-items: center; gap: 10px; font-size: .9rem; cursor: pointer; color: var(--cr-blue); }\r\n.cr-bf-field--check input { width: 18px; height: 18px; accent-color: var(--cr-blue); }\r\n\r\n.cr-bf-nav { display: flex; gap: 12px; margin-top: 8px; }\r\n.cr-bf-nav--right { justify-content: flex-end; }\r\n.cr-bf-prev-btn, .cr-bf-next-btn, .cr-bf-submit-btn { padding: 13px 28px; border-radius: 8px; font-family: \"Lexend Deca\", sans-serif; font-weight: 600; font-size: .95rem; cursor: pointer; border: none; transition: all .2s; }\r\n.cr-bf-prev-btn { background: #f0f0f0; color: #555; }\r\n.cr-bf-prev-btn:hover { background: #e0e0e0; }\r\n.cr-bf-next-btn, .cr-bf-submit-btn { background: var(--cr-yellow); color: var(--cr-blue); margin-left: auto; }\r\n.cr-bf-next-btn:hover, .cr-bf-submit-btn:hover { transform: scale(1.03); }\r\n.cr-bf-submit-btn { background: var(--cr-pink); color: #fff; }\r\n.cr-bf-submit-btn:hover { background: #c01040; }\r\n.cr-bf-submit-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }\r\n\r\n\/* Laad-overlay tijdens versturen *\/\r\n\/* Fixed t.o.v. het venster (niet het lange paneel), en via JS naar <body> verplaatst\r\n   zodat een getransformde thema-container de fixed-positie niet kan inperken.\r\n   Kleuren expliciet (hex) omdat de CSS-variabelen buiten .cr-booking-form niet gelden. *\/\r\n.cr-bf-loading-overlay { position: fixed; inset: 0; background: rgba(240,245,255,.96); display: none; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: 24px; z-index: 100000; }\r\n.cr-bf-loading-overlay.is-active { display: flex; }\r\n.cr-bf-loader { width: 56px; height: 56px; border-radius: 50%; border: 5px solid rgba(0,15,76,.15); border-top-color: #DF1550; animation: cr-spin .8s linear infinite; margin-bottom: 18px; }\r\n.cr-bf-loading-text { font-family: \"Lexend Deca\", sans-serif; font-weight: 600; color: #000F4C; font-size: 1.1rem; }\r\n.cr-bf-loading-sub { color: rgba(0,15,76,.6); font-size: .85rem; margin-top: 6px; }\r\n\r\n\/* Schuifbalk in ClashRooms-stijl: roze gevulde balk tot de duim, roze duim.\r\n   --fill (0\u2013100%) wordt in JS gezet en stuurt het roze deel van de webkit-track. *\/\r\n.cr-bf-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 0; background: transparent; outline: none; cursor: pointer; --fill: 0%; }\r\n.cr-bf-slider::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(to right, var(--cr-pink) var(--fill), #dde3f0 var(--fill)); }\r\n.cr-bf-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: var(--cr-pink); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,15,76,.3); cursor: pointer; }\r\n.cr-bf-slider::-moz-range-track { height: 6px; border-radius: 999px; background: #dde3f0; }\r\n.cr-bf-slider::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--cr-pink); }\r\n.cr-bf-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--cr-pink); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,15,76,.3); cursor: pointer; }\r\n.cr-bf-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(223,21,80,.25); }\r\n.cr-price-calc__slider-labels { display: flex; justify-content: space-between; font-size: .8rem; opacity: .6; margin-top: 6px; }\r\n\/* Melding bij een groep buiten 6 t\/m 60. Zelfde vorm als de contactmelding bij\r\n   de kalender, zodat \"dit kan, maar even anders\" er overal hetzelfde uitziet. *\/\r\n.cr-bf-groepsmelding { margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--cr-light); border-left: 3px solid var(--cr-pink); font-size: .85rem; line-height: 1.45; color: rgba(0,15,76,.8); }\r\n.cr-bf-groepsmelding a { color: var(--cr-pink); }\r\n.cr-bf-groepsmelding .cr-bf-tip { display: block; margin-top: 8px; }\r\n\r\n\/* Aantal personen: gekozen getal vooraan, dan de schuifbalk met 6\/60 eronder.\r\n   flex-basis + max-width zetten de breedtes structureel vast, zodat een thema\r\n   dat width:100% op inputs forceert (Elementor) de layout niet kan platdrukken. *\/\r\n.cr-bf-persons-row { display: flex; align-items: center; gap: 16px; }\r\n.cr-bf-slider-wrap { flex: 1 1 auto; min-width: 0; }\r\n.cr-bf-persons-row .cr-bf-slider { width: 100%; }\r\n.cr-bf-persons-row .cr-bf-persons-input { flex: 0 0 76px; width: 76px; max-width: 76px; padding: 9px 8px; border: 2px solid #dde3f0; border-radius: 8px; font-family: \"Lexend Deca\", sans-serif; font-size: 1rem; font-weight: 700; text-align: center; color: var(--cr-blue); background: #fff; box-sizing: border-box; }\r\n.cr-bf-persons-row .cr-bf-persons-input:focus { outline: none; border-color: var(--cr-blue); }\r\n\r\n\/* Kalender (datumkiezer) *\/\r\n.cr-bf-calendar { background: var(--cr-light); border-radius: 12px; padding: 16px 18px; max-width: 440px; width: 100%; box-sizing: border-box; }\r\n.cr-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }\r\n.cr-cal-month { font-family: \"Lexend Deca\", sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--cr-blue); text-transform: capitalize; }\r\n.cr-cal-nav { width: 34px; height: 34px; border: none; border-radius: 8px; background: #fff; color: var(--cr-blue); font-size: 1.3rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }\r\n.cr-cal-nav:hover:not(:disabled) { background: var(--cr-pink); color: #fff; }\r\n.cr-cal-nav:disabled { opacity: .3; cursor: not-allowed; }\r\n\/* minmax(0, 1fr) in plaats van 1fr: bij 1fr mag een kolom niet smaller worden\r\n   dan zijn inhoud, waardoor een knop met browser-eigen padding het raster breder\r\n   maakt dan de kalender. Dat liep op smalle telefoons het scherm uit en gaf de\r\n   weekdagen een andere kolombreedte dan de dagen eronder. *\/\r\n.cr-cal-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }\r\n.cr-cal-weekday { min-width: 0; text-align: center; font-size: .72rem; font-weight: 600; color: rgba(0,15,76,.5); overflow: hidden; }\r\n.cr-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }\r\n.cr-cal-day { aspect-ratio: 1 \/ 1; min-width: 0; padding: 0; line-height: 1; border: none; border-radius: 8px; background: #fff; color: var(--cr-blue); font-size: .9rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s, transform .1s; }\r\n.cr-cal-day:hover:not(:disabled):not(.cr-cal-day--shortnotice) { background: var(--cr-pink); color: #fff; }\r\n.cr-cal-day--empty { background: transparent; cursor: default; }\r\n.cr-cal-day--disabled { background: transparent; color: rgba(0,15,76,.22); cursor: not-allowed; }\r\n\/* \"Binnen 7 dagen\" \u2014 w\u00e9l zichtbaar\/klikbaar, maar gedempt (tussen normaal en disabled in) *\/\r\n.cr-cal-day--shortnotice { background: #fff; color: rgba(0,15,76,.4); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,15,76,.10); }\r\n.cr-cal-day--shortnotice:hover { background: var(--cr-light); color: var(--cr-blue); }\r\n.cr-cal-day--selected, .cr-cal-day--selected:hover { background: var(--cr-pink); color: #fff; box-shadow: 0 3px 10px rgba(223,21,80,.35); }\r\n.cr-cal-note { font-size: .82rem; line-height: 1.4; color: rgba(0,15,76,.6); margin: 10px 2px 0; }\r\n.cr-cal-note a { color: var(--cr-pink); }\r\n.cr-cal-note--flash { background: rgba(223,21,80,.08); color: var(--cr-pink); font-weight: 600; border-radius: 8px; padding: 8px 10px; }\r\n\r\n\/* Mobiel: de 5-staps progressbalk mag het scherm niet verbreden (labels met nowrap\r\n   duwden de hele form breder dan de viewport \u2192 horizontale scroll \u2192 kalender liep\r\n   rechts uit beeld). Kleinere stappen + op smalle schermen alleen de bolletjes. *\/\r\n@media (max-width: 560px) {\r\n  .cr-booking-form__progress { margin-bottom: 28px; }\r\n  .cr-bf-step-dot { width: 30px; height: 30px; font-size: .8rem; }\r\n  .cr-bf-step-label { font-size: .62rem; }\r\n  .cr-bf-step-line { margin-left: 4px; margin-right: 4px; }\r\n  .cr-bf-calendar { padding: 12px; }\r\n  .cr-cal-grid, .cr-cal-weekdays { gap: 4px; }\r\n  .cr-cal-day { font-size: .82rem; }\r\n}\r\n@media (max-width: 430px) {\r\n  .cr-bf-step-label { display: none; }\r\n  .cr-bf-step-dot { width: 26px; height: 26px; font-size: .75rem; }\r\n}\r\n\r\n.cr-bf-success { text-align: center; padding: 60px 20px; color: var(--cr-blue); }\r\n.cr-bf-success__logo { display: block; width: 112px; height: 112px; margin: 0 auto 20px; }\r\n\r\n.cr-bf-slots-loading { display: flex; align-items: center; gap: 10px; color: rgba(0,15,76,.7); font-size: .9rem; padding: 12px 0; }\r\n.cr-bf-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(0,15,76,.2); border-top-color: var(--cr-pink); border-radius: 50%; animation: cr-spin .7s linear infinite; }\r\n@keyframes cr-spin { to { transform: rotate(360deg); } }\r\n.cr-bf-slots-hint { color: rgba(0,15,76,.5); font-size: .9rem; margin: 0; }\r\n.cr-bf-slots-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }\r\n.cr-bf-timeslot-btn { background: #fff; border: 2px solid #dde3f0; border-radius: 8px; color: var(--cr-blue); cursor: pointer; font-family: \"Lexend Deca\", sans-serif; font-size: .95rem; font-weight: 600; padding: 10px 18px; transition: background .15s, border-color .15s, transform .1s; }\r\n.cr-bf-timeslot-btn:hover { background: var(--cr-light); border-color: var(--cr-pink); color: var(--cr-pink); }\r\n.cr-bf-timeslot-btn--selected { background: var(--cr-pink); border-color: var(--cr-pink); color: #fff; box-shadow: 0 3px 10px rgba(223,21,80,.35); transform: translateY(-1px); }\r\n.cr-bf-no-slots { color: rgba(0,15,76,.6); font-size: .9rem; margin: 0; }\r\n.cr-bf-error-msg { color: var(--cr-pink); font-size: .9rem; margin: 0; }\r\n@media (max-width: 480px) { .cr-bf-timeslot-btn { font-size: .85rem; padding: 8px 14px; } }\r\n\r\n\/* .cr-testmode-badge visueel verwijderd op verzoek; TEST_PREFIX (ZZZTEST_) blijft actief in JS *\/\r\n<\/style>\r\n\r\n\r\n<div class=\"cr-booking-form\" id=\"cr-booking-form\">\r\n\r\n  <div class=\"cr-bf-loading-overlay\" id=\"bf-loading\">\r\n    <div class=\"cr-bf-loader\"><\/div>\r\n    <div class=\"cr-bf-loading-text\" id=\"bf-loading-text\">Bezig met verwerken\u2026<\/div>\r\n    <div class=\"cr-bf-loading-sub\" id=\"bf-loading-sub\">Even geduld, dit duurt een paar seconden.<\/div>\r\n  <\/div>\r\n\r\n  <div class=\"cr-booking-form__progress\" aria-label=\"Stappen\">\r\n    <div class=\"cr-bf-step-indicator cr-bf-step-indicator--active\" data-step=\"1\">\r\n      <span class=\"cr-bf-step-dot\">1<\/span><span class=\"cr-bf-step-label\" data-i18n=\"step_aanbod\">Aanbod<\/span>\r\n    <\/div>\r\n    <div class=\"cr-bf-step-line\"><\/div>\r\n    <div class=\"cr-bf-step-indicator\" data-step=\"2\">\r\n      <span class=\"cr-bf-step-dot\">2<\/span><span class=\"cr-bf-step-label\" data-i18n=\"step_datum\">Datum<\/span>\r\n    <\/div>\r\n    <div class=\"cr-bf-step-line\"><\/div>\r\n    <div class=\"cr-bf-step-indicator\" data-step=\"3\">\r\n      <span class=\"cr-bf-step-dot\">3<\/span><span class=\"cr-bf-step-label\" data-i18n=\"step_type\">Type uitje<\/span>\r\n    <\/div>\r\n    <div class=\"cr-bf-step-line\"><\/div>\r\n    <div class=\"cr-bf-step-indicator\" data-step=\"4\">\r\n      <span class=\"cr-bf-step-dot\">4<\/span><span class=\"cr-bf-step-label\" data-i18n=\"step_extras\">Extra's<\/span>\r\n    <\/div>\r\n    <div class=\"cr-bf-step-line\"><\/div>\r\n    <div class=\"cr-bf-step-indicator\" data-step=\"5\">\r\n      <span class=\"cr-bf-step-dot\">5<\/span><span class=\"cr-bf-step-label\" data-i18n=\"step_gegevens\">Gegevens<\/span>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- Stap 1 -->\r\n  <div class=\"cr-bf-panel cr-bf-panel--active\" data-step=\"1\">\r\n    <h3 class=\"cr-bf-panel__title\" data-i18n=\"s1_title\">Wat wil je boeken?<\/h3>\r\n    <div class=\"cr-bf-field\">\r\n      <label class=\"cr-bf-label\" data-i18n=\"duur_label\">Duur<\/label>\r\n      <div class=\"cr-bf-btn-group\">\r\n        <button type=\"button\" class=\"cr-bf-opt-btn cr-bf-opt-btn--active\" data-field=\"duur\" data-value=\"1.5\"><span data-i18n=\"duur_15\">1,5 uur<\/span> <small data-i18n=\"duur_15_sub\">\u00b7 6 spellen<\/small><\/button>\r\n        <button type=\"button\" class=\"cr-bf-opt-btn\" data-field=\"duur\" data-value=\"2.5\"><span data-i18n=\"duur_25\">2,5 uur<\/span> <small data-i18n=\"duur_25_sub\">\u00b7 9 spellen<\/small><\/button>\r\n      <\/div>\r\n      <input type=\"hidden\" id=\"bf-duur\" name=\"duur\" value=\"1.5\" \/>\r\n    <\/div>\r\n    <div class=\"cr-bf-field\">\r\n      <label class=\"cr-bf-label\" for=\"bf-personen-number\" data-i18n=\"personen_label\">Aantal personen:<\/label>\r\n      <div class=\"cr-bf-persons-row\">\r\n        <input type=\"number\" id=\"bf-personen-number\" min=\"4\" max=\"70\" value=\"15\" class=\"cr-bf-persons-input\" inputmode=\"numeric\" \/>\r\n        <div class=\"cr-bf-slider-wrap\">\r\n          <input type=\"range\" id=\"bf-personen-slider\" min=\"4\" max=\"70\" value=\"15\" class=\"cr-bf-slider\" \/>\r\n          <!-- De labels tonen de grens van het aanbod, niet de uiteinden van de\r\n               schuifbalk: 6 is het minimum en 60 het maximum, maar daarbuiten\r\n               valt te schuiven. Zo ziet iemand met 5 of met 65 man meteen dat\r\n               hij hier terecht kan, in plaats van een muur. -->\r\n          <div class=\"cr-price-calc__slider-labels\"><span>6-<\/span><span>60+<\/span><\/div>\r\n        <\/div>\r\n      <\/div>\r\n      <input type=\"hidden\" id=\"bf-personen\" name=\"personen\" value=\"15\" \/>\r\n      <p class=\"cr-bf-groepsmelding\" id=\"bf-groepsmelding\" hidden><\/p>\r\n    <\/div>\r\n    <div class=\"cr-bf-onzeker\">\r\n      <label class=\"cr-bf-onzeker-check\">\r\n        <input type=\"checkbox\" id=\"bf-personen-onzeker\" \/>\r\n        <span data-i18n=\"pers_onzeker_label\">Aantal deelnemers nog niet zeker?<\/span>\r\n      <\/label>\r\n      <div class=\"cr-bf-onzeker-uitleg\" id=\"bf-personen-toelichting-wrap\" hidden>\r\n        <label class=\"cr-bf-label\" for=\"bf-personen-toelichting\" data-i18n=\"licht_toe\">Licht toe<\/label>\r\n        <textarea id=\"bf-personen-toelichting\" class=\"cr-bf-textarea\" rows=\"3\"\r\n                  placeholder=\"Bijv. tussen de 12 en 18 personen, dat weten we over twee weken.\"\r\n                  data-i18n-ph=\"pers_onzeker_ph\"><\/textarea>\r\n        <p class=\"cr-bf-onzeker-note\" data-i18n=\"pers_onzeker_note\">We rekenen voorlopig met het gekozen aantal. Je toelichting komt bij de aanvraag te staan.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"cr-bf-price-preview\" id=\"bf-price-preview\"><\/div>\r\n    <div class=\"cr-bf-nav cr-bf-nav--right\">\r\n      <button type=\"button\" class=\"cr-bf-next-btn\" data-next=\"2\" data-i18n=\"next\">Volgende \u2192<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- Stap 2 -->\r\n  <div class=\"cr-bf-panel\" data-step=\"2\">\r\n    <h3 class=\"cr-bf-panel__title\" data-i18n=\"s2_title\">Wanneer kom je?<\/h3>\r\n    <div class=\"cr-bf-field\">\r\n      <label class=\"cr-bf-label\" data-i18n=\"datum_label\">Gewenste datum *<\/label>\r\n      <div class=\"cr-bf-calendar\" id=\"bf-calendar\">\r\n        <div class=\"cr-cal-header\">\r\n          <button type=\"button\" class=\"cr-cal-nav\" id=\"bf-cal-prev\" aria-label=\"Vorige maand\">&#8249;<\/button>\r\n          <span class=\"cr-cal-month\" id=\"bf-cal-month\"><\/span>\r\n          <button type=\"button\" class=\"cr-cal-nav\" id=\"bf-cal-next\" aria-label=\"Volgende maand\">&#8250;<\/button>\r\n        <\/div>\r\n        <div class=\"cr-cal-weekdays\" id=\"bf-cal-weekdays\"><\/div>\r\n        <div class=\"cr-cal-grid\" id=\"bf-cal-grid\"><\/div>\r\n      <\/div>\r\n      <p class=\"cr-cal-note\" id=\"bf-cal-saturday-note\" style=\"display:none;\" data-i18n=\"cal_saturday_15\">Op zaterdag is alleen de 1,5 uur-versie mogelijk.<\/p>\r\n      <p class=\"cr-cal-note\" id=\"bf-cal-shortnotice\">Binnen 7 dagen boeken? Neem telefonisch of per e-mail contact met ons op.<\/p>\r\n      <input type=\"hidden\" id=\"bf-datum\" name=\"datum\" value=\"\" required \/>\r\n    <\/div>\r\n    <div class=\"cr-bf-field\" id=\"bf-tijdsloten-wrap\">\r\n      <label class=\"cr-bf-label\" data-i18n=\"tijdsloten_label\">Beschikbare tijdsloten *<\/label>\r\n      <div id=\"bf-tijdsloten-loading\" class=\"cr-bf-slots-loading\" style=\"display:none;\">\r\n        <span class=\"cr-bf-spinner\" aria-hidden=\"true\"><\/span> <span data-i18n=\"laden\">Beschikbaarheid laden\u2026<\/span>\r\n      <\/div>\r\n      <div id=\"bf-tijdsloten-grid\" class=\"cr-bf-slots-grid\" role=\"group\">\r\n        <p class=\"cr-bf-slots-hint\" data-i18n=\"kies_datum_hint\">Kies eerst een datum hierboven.<\/p>\r\n      <\/div>\r\n      <input type=\"hidden\" id=\"bf-tijdstip\" name=\"tijdstip\" value=\"\" \/>\r\n    <\/div>\r\n    <!-- Verschijnt pas als er tijdsloten staan: flexibiliteit aanbieden voordat de\r\n         boeker weet wat er te kiezen valt, slaat nergens op. Zie zetFlexZichtbaar(). -->\r\n    <div class=\"cr-bf-onzeker\" id=\"bf-flex-blok\" hidden>\r\n      <label class=\"cr-bf-onzeker-check\">\r\n        <input type=\"checkbox\" id=\"bf-datum-onzeker\" \/>\r\n        <span data-i18n=\"datum_onzeker_label\">Datum\/tijd flexibel of nog onzeker?<\/span>\r\n      <\/label>\r\n      <p class=\"cr-bf-onzeker-note\" data-i18n=\"datum_onzeker_sub\">Geef dat hier aan, het vergroot de kans dat we je in kunnen plannen.<\/p>\r\n      <div class=\"cr-bf-onzeker-uitleg\" id=\"bf-datum-toelichting-wrap\" hidden>\r\n        <label class=\"cr-bf-label\" for=\"bf-datum-toelichting\" data-i18n=\"licht_toe\">Licht toe<\/label>\r\n        <textarea id=\"bf-datum-toelichting\" class=\"cr-bf-textarea\" rows=\"4\"\r\n                  placeholder=\"Bijv. deze datum heeft de voorkeur maar een week later kan ook. Ben je flexibel met de tijd, gebruik dan de knoppen hieronder als snelkoppeling (en pas aan indien gewenst).\"\r\n                  data-i18n-ph=\"datum_onzeker_ph\"><\/textarea>\r\n        <!-- Snelkoppelingen: elke knop zet \u00e9\u00e9n zin in het tekstvak hierboven.\r\n             Ze sluiten elkaar uit, want je bent niet tegelijk een half uur \u00e9n\r\n             een uur flexibel. Zie zetFlexZin(). -->\r\n        <div class=\"cr-bf-btn-group cr-bf-btn-group--wrap cr-bf-flex-knoppen\">\r\n          <button type=\"button\" class=\"cr-bf-opt-btn\" data-flexzin=\"flex_zin_30\" data-i18n=\"flex_30\">\u00b1 30 minuten is prima<\/button>\r\n          <button type=\"button\" class=\"cr-bf-opt-btn\" data-flexzin=\"flex_zin_60\" data-i18n=\"flex_60\">\u00b1 1 uur is prima<\/button>\r\n          <button type=\"button\" class=\"cr-bf-opt-btn\" data-flexzin=\"flex_zin_dagdeel\" data-i18n=\"flex_dagdeel\">Het dagdeel is prima<\/button>\r\n        <\/div>\r\n        <p class=\"cr-bf-onzeker-note\" data-i18n=\"datum_onzeker_note\">We houden voorlopig de gekozen datum en tijd aan. Je toelichting komt bij de aanvraag te staan.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"cr-bf-nav\">\r\n      <button type=\"button\" class=\"cr-bf-prev-btn\" data-prev=\"1\" data-i18n=\"back\">\u2190 Terug<\/button>\r\n      <button type=\"button\" class=\"cr-bf-next-btn\" data-next=\"3\" data-i18n=\"next\">Volgende \u2192<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- Stap 3 -->\r\n  <div class=\"cr-bf-panel\" data-step=\"3\">\r\n    <h3 class=\"cr-bf-panel__title\" data-i18n=\"s3_title\">Type uitje<\/h3>\r\n    <div class=\"cr-bf-extra\">\r\n      <div class=\"cr-bf-extra-head\">\r\n        <span class=\"cr-bf-extra-label\" data-i18n=\"taal_label\">Taal<\/span>\r\n        <div class=\"cr-bf-btn-group\">\r\n          <button type=\"button\" class=\"cr-bf-opt-btn\" data-field=\"taal\" data-value=\"Nederlands\"><svg width=\"20\" height=\"14\" viewBox=\"0 0 9 6\" style=\"vertical-align:middle;margin-right:7px;border-radius:2px;\"><rect width=\"9\" height=\"6\" fill=\"#21468B\"\/><rect width=\"9\" height=\"4\" fill=\"#fff\"\/><rect width=\"9\" height=\"2\" fill=\"#AE1C28\"\/><\/svg><span data-i18n=\"taal_nl\">Nederlands<\/span><\/button>\r\n          <button type=\"button\" class=\"cr-bf-opt-btn\" data-field=\"taal\" data-value=\"Engels\"><svg width=\"20\" height=\"14\" viewBox=\"0 0 60 30\" style=\"vertical-align:middle;margin-right:7px;border-radius:2px;\"><clipPath id=\"crUk\"><rect width=\"60\" height=\"30\"\/><\/clipPath><g clip-path=\"url(#crUk)\"><rect width=\"60\" height=\"30\" fill=\"#012169\"\/><path d=\"M0,0 60,30 M60,0 0,30\" stroke=\"#fff\" stroke-width=\"6\"\/><path d=\"M0,0 60,30 M60,0 0,30\" stroke=\"#C8102E\" stroke-width=\"4\" clip-path=\"url(#crUk)\"\/><path d=\"M30,0 v30 M0,15 h60\" stroke=\"#fff\" stroke-width=\"10\"\/><path d=\"M30,0 v30 M0,15 h60\" stroke=\"#C8102E\" stroke-width=\"6\"\/><\/g><\/svg><span data-i18n=\"taal_en\">Engels<\/span><\/button>\r\n        <\/div>\r\n      <\/div>\r\n      <p class=\"cr-bf-extra-uitleg\" data-i18n=\"taal_uitleg\">Onze GameMasters zijn allemaal tweetalig! In welke taal willen jullie de boeking?<\/p>\r\n      <input type=\"hidden\" id=\"bf-taal\" name=\"taal\" value=\"\" \/>\r\n    <\/div>\r\n\r\n    <div class=\"cr-bf-extra\">\r\n      <div class=\"cr-bf-extra-head cr-bf-extra-head--top\">\r\n        <span class=\"cr-bf-extra-label\" data-i18n=\"type_label\">Type uitje<\/span>\r\n        <div class=\"cr-bf-btn-group cr-bf-btn-group--wrap\">\r\n          <button type=\"button\" class=\"cr-bf-opt-btn\" data-field=\"type_uitje\" data-value=\"Bedrijfsuitje\" data-i18n=\"type_bedrijfsuitje\">Bedrijfsuitje<\/button>\r\n          <button type=\"button\" class=\"cr-bf-opt-btn\" data-field=\"type_uitje\" data-value=\"Vrijgezellenfeest\" data-i18n=\"type_vrijgezellen\">Vrijgezellenfeest<\/button>\r\n          <button type=\"button\" class=\"cr-bf-opt-btn\" data-field=\"type_uitje\" data-value=\"Familiedag\" data-i18n=\"type_familiedag\">Familiedag<\/button>\r\n          <button type=\"button\" class=\"cr-bf-opt-btn\" data-field=\"type_uitje\" data-value=\"Verjaardag\" data-i18n=\"type_verjaardag\">Verjaardag<\/button>\r\n          <button type=\"button\" class=\"cr-bf-opt-btn\" data-field=\"type_uitje\" data-value=\"Vriendenuitje\" data-i18n=\"type_vrienden\">Vriendenuitje<\/button>\r\n          <button type=\"button\" class=\"cr-bf-opt-btn\" data-field=\"type_uitje\" data-value=\"Teambuilding\" data-i18n=\"type_teambuilding\">Teambuilding<\/button>\r\n          <button type=\"button\" class=\"cr-bf-opt-btn\" data-field=\"type_uitje\" data-value=\"Eindejaarsuitje\" data-i18n=\"type_eindejaars\">Eindejaarsuitje<\/button>\r\n          <button type=\"button\" class=\"cr-bf-opt-btn\" data-field=\"type_uitje\" data-value=\"Anders\" data-i18n=\"type_anders\">Anders<\/button>\r\n        <\/div>\r\n      <\/div>\r\n      <p class=\"cr-bf-extra-uitleg\" data-i18n=\"type_uitleg\">Weten we graag van tevoren, daar richten we de spellen op in!<\/p>\r\n      <input type=\"hidden\" id=\"bf-type-uitje\" name=\"type_uitje\" value=\"\" \/>\r\n    <\/div>\r\n\r\n    <div class=\"cr-bf-nav\">\r\n      <button type=\"button\" class=\"cr-bf-prev-btn\" data-prev=\"2\" data-i18n=\"back\">\u2190 Terug<\/button>\r\n      <button type=\"button\" class=\"cr-bf-next-btn\" data-next=\"4\" data-i18n=\"next\">Volgende \u2192<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- Stap 4 -->\r\n  <div class=\"cr-bf-panel\" data-step=\"4\">\r\n    <h3 class=\"cr-bf-panel__title\" data-i18n=\"s4_title\">Extra's<\/h3>\r\n\r\n    <div class=\"cr-bf-extra\">\r\n      <div class=\"cr-bf-extra-head\">\r\n        <span class=\"cr-bf-extra-label\" data-i18n=\"afkoop_label\">Drankafkoop<\/span>\r\n        <div class=\"cr-bf-btn-group\">\r\n          <button type=\"button\" class=\"cr-bf-opt-btn cr-bf-opt-btn--active\" data-field=\"afkoop\" data-value=\"Nee\" data-i18n=\"afkoop_nee\">Nee<\/button>\r\n          <button type=\"button\" class=\"cr-bf-opt-btn\" data-field=\"afkoop\" data-value=\"Ja\" data-i18n=\"afkoop_ja\">Ja (+\u20ac9,50 p.p.)<\/button>\r\n        <\/div>\r\n      <\/div>\r\n      <p class=\"cr-bf-extra-uitleg\" data-i18n=\"afkoop_uitleg\">Onbeperkt koffie, thee &amp; frisdrank (+\u20ac9,50 p.p.).<\/p>\r\n      <p class=\"cr-bf-extra-uitleg cr-bf-extra-uitleg--sub\" data-i18n=\"afkoop_uitleg2\">(Niet mogelijk voor alcoholische drank)<\/p>\r\n      <input type=\"hidden\" id=\"bf-afkoop\" name=\"afkoop\" value=\"Nee\" \/>\r\n    <\/div>\r\n\r\n    <div class=\"cr-bf-extra\">\r\n      <div class=\"cr-bf-extra-head\">\r\n        <span class=\"cr-bf-extra-label\">\r\n          <span data-i18n=\"pv_label\">Persoonlijke vragen<\/span>\r\n          <button type=\"button\" class=\"cr-bf-info-btn\" id=\"bf-pv-info-btn\"\r\n                  aria-expanded=\"false\" aria-controls=\"bf-pv-info\"\r\n                  data-i18n-aria=\"pv_info_knop\" aria-label=\"Meer uitleg over persoonlijke vragen\">i<\/button>\r\n        <\/span>\r\n        <div class=\"cr-bf-btn-group\">\r\n          <button type=\"button\" class=\"cr-bf-opt-btn cr-bf-opt-btn--active\" data-field=\"persoonlijke_vragen\" data-value=\"Nee\" data-i18n=\"pv_nee\">Nee<\/button>\r\n          <button type=\"button\" class=\"cr-bf-opt-btn\" data-field=\"persoonlijke_vragen\" data-value=\"Ja\" data-i18n=\"pv_ja\">Ja (+\u20ac35)<\/button>\r\n        <\/div>\r\n      <\/div>\r\n      <p class=\"cr-bf-extra-uitleg\" data-i18n=\"pv_uitleg\">Lever zelf vragen aan die wij opnemen in jullie spellen (+\u20ac35, je ontvangt een link).<\/p>\r\n      <p class=\"cr-bf-extra-uitleg cr-bf-extra-uitleg--sub\" data-i18n=\"pv_uitleg2\">Maakt ClashRooms n\u00f3g persoonlijker en leuker!<\/p>\r\n      <div class=\"cr-bf-info-paneel\" id=\"bf-pv-info\" hidden>\r\n        <p data-i18n=\"pv_info\">In onze Brains-kamer spelen we onder andere een Quiz- en een Schattingsspel. Hoe leuk en verrassend is het als er tussen de gewone vragen door opeens vragen worden gesteld over jullie persoonlijk! Via een formulier kunnen jullie de vragen aanleveren, wij zorgen dat de GameMaster ze bij jullie boeking in de spellen verwerkt. Zo geven we een \u00e9xtra persoonlijke en vaak hilarische dimensie aan jullie bezoek!<\/p>\r\n      <\/div>\r\n      <input type=\"hidden\" id=\"bf-pv\" name=\"persoonlijke_vragen\" value=\"Nee\" \/>\r\n    <\/div>\r\n\r\n    <div class=\"cr-bf-extra\">\r\n      <div class=\"cr-bf-extra-head\">\r\n        <span class=\"cr-bf-extra-label\" data-i18n=\"beker_label\">Beker<\/span>\r\n        <div class=\"cr-bf-btn-group\">\r\n          <button type=\"button\" class=\"cr-bf-opt-btn cr-bf-opt-btn--active\" data-field=\"beker\" data-value=\"Nee\" data-i18n=\"beker_nee\">Nee<\/button>\r\n          <button type=\"button\" class=\"cr-bf-opt-btn\" data-field=\"beker\" data-value=\"Ja\" data-i18n=\"beker_ja\">Ja (+\u20ac20 p.st.)<\/button>\r\n        <\/div>\r\n      <\/div>\r\n      <p class=\"cr-bf-extra-uitleg\" data-i18n=\"beker_uitleg\">Voor het winnende team. \u20ac20 per beker; aantal volgt de groepsgrootte.<\/p>\r\n      <input type=\"hidden\" id=\"bf-beker\" name=\"beker\" value=\"Nee\" \/>\r\n    <\/div>\r\n\r\n    <div class=\"cr-bf-extra\">\r\n      <div class=\"cr-bf-extra-head\">\r\n        <span class=\"cr-bf-extra-label\">\r\n          <span data-i18n=\"eten_label\">Info combi met eten<\/span>\r\n          <button type=\"button\" class=\"cr-bf-info-btn\" id=\"bf-eten-info-btn\"\r\n                  aria-expanded=\"false\" aria-controls=\"bf-eten-info-paneel\"\r\n                  data-i18n-aria=\"eten_info_knop\" aria-label=\"Meer uitleg over de combinatie met eten\">i<\/button>\r\n        <\/span>\r\n        <div class=\"cr-bf-btn-group\">\r\n          <button type=\"button\" class=\"cr-bf-opt-btn cr-bf-opt-btn--active\" data-field=\"eten_info\" data-value=\"Nee\" data-i18n=\"eten_nee\">Nee<\/button>\r\n          <button type=\"button\" class=\"cr-bf-opt-btn\" data-field=\"eten_info\" data-value=\"Ja\" data-i18n=\"eten_ja\">Ja<\/button>\r\n        <\/div>\r\n      <\/div>\r\n      <p class=\"cr-bf-extra-uitleg\" data-i18n=\"eten_uitleg\">Wil je informatie over eetmogelijkheden in combinatie met ClashRooms?<\/p>\r\n      <p class=\"cr-bf-extra-uitleg cr-bf-extra-uitleg--sub\" data-i18n=\"eten_uitleg2\">ClashRooms is ideaal te combineren met een hapje eten voor- of achteraf.<\/p>\r\n      <div class=\"cr-bf-info-paneel\" id=\"bf-eten-info-paneel\" hidden>\r\n        <p data-i18n=\"eten_info_intro\">Wij adviseren de volgende twee opties:<\/p>\r\n        <p><a href=\"https:\/\/delichttoren.nl\/\" target=\"_blank\" rel=\"noopener\">Restaurant De Lichttoren<\/a>: <span data-i18n=\"eten_info_lichttoren\">prachtig restaurant op 4 minuten lopen, met vrijwel altijd plek voor (grote) groepen.<\/span><\/p>\r\n        <p><a href=\"https:\/\/www.datocms-assets.com\/115107\/1781792159-foodbook-beursgebouw-1.pdf\" target=\"_blank\" rel=\"noopener\">Buffet bij Peakz Padel<\/a>: <span data-i18n=\"eten_info_peakz\">lopend buffet van de Peakz-cateraar, geserveerd op het binnenterras van Peakz Padel, waar je ook terecht kunt voor een drankje. Ideaal onder hetzelfde dak.<\/span><\/p>\r\n      <\/div>\r\n      <!-- Verschijnt pas bij Ja: om wensen vragen die de boeker niet heeft, leest\r\n           als een verplichting die er niet is. Zie de eten_info-tak hieronder. -->\r\n      <div class=\"cr-bf-onzeker-uitleg\" id=\"bf-eten-wensen-wrap\" hidden>\r\n        <label class=\"cr-bf-label\" for=\"bf-eten-wensen\" data-i18n=\"eten_wensen_label\">Jouw wensen<\/label>\r\n        <textarea id=\"bf-eten-wensen\" class=\"cr-bf-textarea\" rows=\"3\"\r\n                  placeholder=\"Geef hier alvast aan waar je aan denkt en welke wensen je hebt. Let op: het eten maakt g\u00e9\u00e9n onderdeel uit van deze aanvraag. Dit gaat altijd in nader overleg, ofwel via ons, ofwel rechtstreeks.\"\r\n                  data-i18n-ph=\"eten_wensen_ph\"><\/textarea>\r\n        <p class=\"cr-bf-onzeker-note\">\r\n          <span data-i18n=\"eten_offerte_pre\">Wil je eerst zekerheid dat de combi met eten mogelijk is?<\/span>\r\n          <a id=\"bf-offerte-link\" href=\"https:\/\/clashrooms.nl\/offerte-aanvraag\/\" target=\"_blank\" rel=\"noopener\" data-i18n=\"eten_offerte_link\">Gebruik dan het offerteformulier<\/a>.\r\n        <\/p>\r\n      <\/div>\r\n      <input type=\"hidden\" id=\"bf-eten-info\" name=\"eten_info\" value=\"Nee\" \/>\r\n    <\/div>\r\n\r\n    <div class=\"cr-bf-nav\">\r\n      <button type=\"button\" class=\"cr-bf-prev-btn\" data-prev=\"3\" data-i18n=\"back\">\u2190 Terug<\/button>\r\n      <button type=\"button\" class=\"cr-bf-next-btn\" data-next=\"5\" data-i18n=\"next\">Volgende \u2192<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- Stap 5 -->\r\n  <div class=\"cr-bf-panel\" data-step=\"5\">\r\n    <h3 class=\"cr-bf-panel__title\" data-i18n=\"s5_title\">Jouw gegevens &amp; overzicht<\/h3>\r\n    <div class=\"cr-bf-field\">\r\n      <label class=\"cr-bf-label\" data-i18n=\"boeking_type_label\">Type boeking<\/label>\r\n      <div class=\"cr-bf-btn-group\">\r\n        <button type=\"button\" class=\"cr-bf-opt-btn cr-bf-opt-btn--active\" data-field=\"boeking_type\" data-value=\"Particulier\" data-i18n=\"particulier\">Particulier<\/button>\r\n        <button type=\"button\" class=\"cr-bf-opt-btn\" data-field=\"boeking_type\" data-value=\"Zakelijk\" data-i18n=\"zakelijk\">Zakelijk<\/button>\r\n      <\/div>\r\n      <input type=\"hidden\" id=\"bf-boeking-type\" name=\"boeking_type\" value=\"Particulier\" \/>\r\n    <\/div>\r\n    <div id=\"bf-zakelijk-fields\" class=\"cr-bf-zakelijk\" style=\"display:none;\">\r\n      <div class=\"cr-bf-field\">\r\n        <label class=\"cr-bf-label\" for=\"bf-bedrijfsnaam\" data-i18n=\"bedrijfsnaam_label\">Bedrijfsnaam *<\/label>\r\n        <input type=\"text\" id=\"bf-bedrijfsnaam\" name=\"bedrijfsnaam\" class=\"cr-bf-input\" placeholder=\"Naam van uw bedrijf\" data-i18n-ph=\"bedrijfsnaam_ph\" \/>\r\n      <\/div>\r\n      <div class=\"cr-bf-field\">\r\n        <label class=\"cr-bf-label\" for=\"bf-factuur\" data-i18n=\"factuur_label\">Factuurgegevens \/ kostenpost<\/label>\r\n        <input type=\"text\" id=\"bf-factuur\" name=\"factuur\" class=\"cr-bf-input\" placeholder=\"Bijv. kostprijscode, projectnummer\" data-i18n-ph=\"factuur_ph\" \/>\r\n      <\/div>\r\n    <\/div>\r\n    <!-- Honeypot: verborgen voor mensen, bots vullen 'm vaak w\u00e9l in. Server weigert als gevuld. -->\r\n    <div aria-hidden=\"true\" style=\"position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;\">\r\n      <label for=\"bf-website\">Website (niet invullen)<\/label>\r\n      <input type=\"text\" id=\"bf-website\" name=\"website\" tabindex=\"-1\" autocomplete=\"off\" \/>\r\n    <\/div>\r\n    <div class=\"cr-bf-row\">\r\n      <div class=\"cr-bf-field\">\r\n        <label class=\"cr-bf-label\" for=\"bf-voornaam\" data-i18n=\"voornaam_label\">Voornaam *<\/label>\r\n        <input type=\"text\" id=\"bf-voornaam\" name=\"voornaam\" class=\"cr-bf-input\" required placeholder=\"Voornaam\" data-i18n-ph=\"voornaam_ph\" \/>\r\n      <\/div>\r\n      <div class=\"cr-bf-field\">\r\n        <label class=\"cr-bf-label\" for=\"bf-achternaam\" data-i18n=\"achternaam_label\">Achternaam *<\/label>\r\n        <input type=\"text\" id=\"bf-achternaam\" name=\"achternaam\" class=\"cr-bf-input\" required placeholder=\"Achternaam\" data-i18n-ph=\"achternaam_ph\" \/>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"cr-bf-row\">\r\n      <div class=\"cr-bf-field\">\r\n        <label class=\"cr-bf-label\" for=\"bf-email\" data-i18n=\"email_label\">E-mailadres *<\/label>\r\n        <input type=\"email\" id=\"bf-email\" name=\"email\" class=\"cr-bf-input\" required placeholder=\"jouw@email.nl\" data-i18n-ph=\"email_ph\" \/>\r\n      <\/div>\r\n      <div class=\"cr-bf-field\">\r\n        <label class=\"cr-bf-label\" for=\"bf-telefoon\" data-i18n=\"telefoon_label\">Telefoonnummer *<\/label>\r\n        <input type=\"tel\" id=\"bf-telefoon\" name=\"telefoon\" class=\"cr-bf-input\" required placeholder=\"06...\" data-i18n-ph=\"telefoon_ph\" \/>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"cr-bf-field\">\r\n      <label class=\"cr-bf-label\" for=\"bf-gevonden\" data-i18n=\"gevonden_label\">Hoe heb je ons gevonden?<\/label>\r\n      <select id=\"bf-gevonden\" name=\"gevonden\" class=\"cr-bf-select\">\r\n        <option value=\"\" data-i18n=\"gevonden_kies\">\u2014 Kies een optie \u2014<\/option>\r\n        <option value=\"Google\">Google<\/option>\r\n        <option value=\"Instagram\">Instagram<\/option>\r\n        <option value=\"Facebook\">Facebook<\/option>\r\n        <option value=\"TikTok\">TikTok<\/option>\r\n        <option value=\"LinkedIn\">LinkedIn<\/option>\r\n        <option value=\"ChatGPT (\/AI)\">ChatGPT (\/AI)<\/option>\r\n        <option value=\"Via via \/ aanrader\" data-i18n=\"gevonden_via\">Via via \/ aanrader<\/option>\r\n        <option value=\"Ik ben al een keer geweest!\" data-i18n=\"gevonden_geweest\">Ik ben al een keer geweest!<\/option>\r\n        <option value=\"Vibes Eindhoven\">Vibes Eindhoven<\/option>\r\n        <option value=\"Flyer\" data-i18n=\"gevonden_flyer\">Flyer<\/option>\r\n        <option value=\"Anders\" selected data-i18n=\"gevonden_anders\">Anders<\/option>\r\n      <\/select>\r\n    <\/div>\r\n    <div class=\"cr-bf-field\">\r\n      <label class=\"cr-bf-label\" for=\"bf-opmerkingen\" data-i18n=\"opmerkingen_label\">Vragen of opmerkingen<\/label>\r\n      <textarea id=\"bf-opmerkingen\" name=\"opmerkingen\" class=\"cr-bf-textarea\" rows=\"4\" placeholder=\"Eventuele vragen of bijzonderheden...\" data-i18n-ph=\"opmerkingen_ph\"><\/textarea>\r\n    <\/div>\r\n    <div class=\"cr-bf-summary\" id=\"bf-summary\"><\/div>\r\n    <div class=\"cr-bf-field cr-bf-field--check\">\r\n      <label>\r\n        <input type=\"checkbox\" id=\"bf-akkoord\" name=\"akkoord\" required \/>\r\n        <span><span data-i18n=\"akkoord_pre\">Ik ga akkoord met de<\/span> <a id=\"bf-av-link\" href=\"https:\/\/clashrooms.nl\/algemene-voorwaarden\/\" target=\"_blank\" data-i18n=\"akkoord_link\">algemene voorwaarden<\/a><\/span>\r\n      <\/label>\r\n    <\/div>\r\n    <div class=\"cr-bf-nav\">\r\n      <button type=\"button\" class=\"cr-bf-prev-btn\" data-prev=\"4\" data-i18n=\"back\">\u2190 Terug<\/button>\r\n      <button type=\"button\" id=\"bf-submit-btn\" class=\"cr-bf-submit-btn\" data-i18n=\"submit\">Verstuur aanvraag \u2713<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- Succes -->\r\n  <div class=\"cr-bf-success\" id=\"bf-success\" style=\"display:none;\">\r\n    <img decoding=\"async\" class=\"cr-bf-success__logo\" src=\"\/wp-content\/uploads\/2024\/03\/CR-favicon-300x300.png\" alt=\"ClashRooms\" width=\"300\" height=\"300\" \/>\r\n    <h3 id=\"bf-success-title\" data-i18n=\"success_title\">Aanvraag verstuurd!<\/h3>\r\n    <p id=\"bf-success-body\" data-i18n=\"success_body\">Bedankt voor je aanvraag. Je ontvangt binnen 2 werkdagen een bevestiging via e-mail.<\/p>\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<script>\r\n(function () {\r\n  'use strict';\r\n\r\n  \/\/ E\u00e9n bestand voor de testpagina \u00e9n de live pagina. Welke agenda gebruikt\r\n  \/\/ wordt, hangt af van de pagina waarop deze widget staat \u2014 niet van welk\r\n  \/\/ bestand er geplakt is. Er bestaat dus geen \"testversie\" die per ongeluk op\r\n  \/\/ de live pagina kan belanden.\r\n  \/\/\r\n  \/\/ Alleen de paden hieronder gaan naar de testagenda; al het andere naar\r\n  \/\/ productie. Die richting is bewust: bij een misser komt een testboeking in\r\n  \/\/ de echte agenda (zichtbaar, op te ruimen) in plaats van een echte\r\n  \/\/ klantboeking in de testagenda (weg, en je merkt het pas als de klant belt).\r\n  var TEST_PADEN = [\r\n    '\/boeken-test-boekingsproces\/', '\/boeken-test-boekingsproces',\r\n    '\/en\/boeken-test-boekingsproces\/', '\/en\/boeken-test-boekingsproces'\r\n  ];\r\n  var IS_TEST    = TEST_PADEN.indexOf(location.pathname) !== -1;\r\n\r\n  var GAS_URL        = IS_TEST ? '\/wp-json\/clashrooms\/v1\/gas-test' : '\/wp-json\/clashrooms\/v1\/gas';\r\n  \/\/ Het secret staat NIET meer hier \u2014 de WordPress-proxy plakt het server-side in de POST.\r\n  \/\/ Voorvoegsel alleen in test: mocht de detectie ooit falen en een testboeking\r\n  \/\/ t\u00f3ch in de echte agenda landen, dan is hij daar meteen aan te herkennen.\r\n  var TEST_PREFIX    = IS_TEST ? 'ZZZTEST_' : '';\r\n\r\n  \/\/ V\u00f3\u00f3ringevulde gegevens, zodat je niet bij elke test alles opnieuw typt.\r\n  \/\/ Staan bewust hier en niet als value= in de HTML: zo zijn de velden op de\r\n  \/\/ live pagina leeg, ook als deze detectie ooit stuk zou gaan.\r\n  \/\/ Bewust geen persoonsgegevens: dit bestand staat ook op de live pagina en is\r\n  \/\/ daar met \"paginabron bekijken\" te lezen, ook al wordt er niets ingevuld.\r\n  \/\/ De bevestigingsmail van een testboeking komt zo op het adres dat jullie\r\n  \/\/ allebei lezen.\r\n  var TEST_INVULLING = {\r\n    'bf-voornaam':   'Test',\r\n    'bf-achternaam': 'Boeking',\r\n    'bf-email':      'info@clashrooms.nl',\r\n    'bf-telefoon':   '0600000000'\r\n  };\r\n\r\n  \/\/ Zo kun je in de browserconsole (F12) altijd zien welke agenda deze pagina\r\n  \/\/ gebruikt, zonder een boeking te hoeven plaatsen.\r\n  try { console.log('[ClashRooms boeking] ' + (IS_TEST ? 'TESTagenda' : 'PRODUCTIE') + ' \u2014 ' + GAS_URL); } catch (e) {}\r\n\r\n  var FORM_LOADED_AT = Date.now();  \/\/ voor bot-detectie: te snel verzenden = bot\r\n  \/\/ Grenzen van de schuifbalk en het punt waaronder we het tarief van 6 rekenen.\r\n  var PERS_MIN = 4, PERS_MAX = 70, MIN_TARIEF_AANTAL = 6;\r\n  var MONTHS_AHEAD   = 6;           \/\/ horizon: hoeveel maanden vooruit je kunt boeken (kalender + prefetch). Cache-kant: CACHE_MONTHS_AHEAD \u2265 deze waarde.\r\n\r\n  \/\/ \u2500\u2500 Taaldetectie (TranslatePress zet Engels op \/en\/ + <html lang>) \u2500\u2500\r\n  var LANG = (\/^\\\/en(\\\/|$)\/.test(location.pathname) || \/^en\/i.test(document.documentElement.lang || '')) ? 'en' : 'nl';\r\n\r\n  var I18N = {\r\n    nl: {\r\n      step_aanbod:'Aanbod', step_datum:'Datum', step_type:'Type', step_gegevens:'Gegevens', step_extras:'Extra\\'s', s5_title:'Jouw gegevens & overzicht',\r\n      s1_title:'Wat wil je boeken?', duur_label:'Duur',\r\n      duur_15:'1,5 uur', duur_15_sub:'\u00b7 6 spellen', duur_25:'2,5 uur', duur_25_sub:'\u00b7 9 spellen',\r\n      personen_label:'Aantal personen:', pp:'p.p.', totaal:'totaal',\r\n      price_line:'Voor {n} personen kost ClashRooms {pp} per persoon. Totaal:',\r\n      sum_tarief_voor:'(tarief voor {n})',\r\n      groep_klein:'Ook met 4 of 5 personen ben je welkom! Je betaalt dan echter wel ons minimumtarief van 6 personen.<span class=\"cr-bf-tip\">Tip: je kunt ook terecht bij <a href=\"https:\/\/www.escaperoomeindhoven.nl\/\" target=\"_blank\" rel=\"noopener\">Next Level Escaperoom<\/a>!<\/span>',\r\n      groep_groot:'Grotere groep? Tot 70 personen kunnen we je groep ontvangen bij ClashRooms. Zit je daarboven, dan regelen we het op maat met onze partners: we kunnen tot 150 personen aan. Mail <a href=\"mailto:info@clashrooms.nl\">info@clashrooms.nl<\/a> voor meer informatie of vul het contactformulier in.',\r\n      next:'Volgende \u2192', back:'\u2190 Terug',\r\n      s2_title:'Wanneer kom je?', datum_label:'Gewenste datum *', tijdsloten_label:'Beschikbare tijdsloten *',\r\n      laden:'Beschikbaarheid laden\u2026', kies_datum_hint:'Kies eerst een datum hierboven.',\r\n      cal_saturday_15:'Op zaterdag is alleen de 1,5 uur-versie mogelijk.',\r\n      licht_toe:'Licht toe',\r\n      pers_onzeker_label:'Aantal deelnemers nog niet zeker?',\r\n      pers_onzeker_ph:'Bijv. tussen de 12 en 18 personen, dat weten we over twee weken.',\r\n      pers_onzeker_note:'We rekenen voorlopig met het gekozen aantal. Je toelichting komt bij de aanvraag te staan.',\r\n      flex_30:'\u00b1 30 minuten is prima', flex_60:'\u00b1 1 uur is prima', flex_dagdeel:'Het dagdeel is prima',\r\n      flex_zin_30:'Het is prima als we 30 minuten eerder of later moeten starten dan de aangegeven tijd.',\r\n      flex_zin_60:'Het is prima als we een uur eerder of later moeten starten dan de aangegeven tijd.',\r\n      flex_zin_dagdeel:'Als het maar ergens in de aangegeven ochtend, middag of avond is, dan is het prima.',\r\n      datum_onzeker_label:'Datum\/tijd flexibel of nog onzeker?',\r\n      datum_onzeker_sub:'Geef dat hier aan, het vergroot de kans dat we je in kunnen plannen.',\r\n      datum_onzeker_ph:'Bijv. deze datum heeft de voorkeur maar een week later kan ook. Ben je flexibel met de tijd, gebruik dan de knoppen hieronder als snelkoppeling (en pas aan indien gewenst).',\r\n      datum_onzeker_note:'We houden voorlopig de gekozen datum en tijd aan. Je toelichting komt bij de aanvraag te staan.',\r\n      sum_pers_onzeker:'Aantal nog niet zeker', sum_datum_onzeker:'Tijd of datum nog niet zeker',\r\n      s3_title:'Type uitje', taal_label:'Taal', taal_nl:'Nederlands', taal_en:'Engels', type_label:'Type uitje',\r\n      taal_uitleg:'Onze GameMasters zijn allemaal tweetalig! In welke taal willen jullie de boeking?',\r\n      type_uitleg:'Weten we graag van tevoren, daar richten we de spellen op in!',\r\n      type_bedrijfsuitje:'Bedrijfsuitje', type_vrijgezellen:'Vrijgezellenfeest', type_familiedag:'Familiedag',\r\n      type_verjaardag:'Verjaardag', type_vrienden:'Vriendenuitje',\r\n      type_teambuilding:'Teambuilding', type_eindejaars:'Eindejaarsuitje', type_anders:'Anders',\r\n      afkoop_label:'Drankafkoop', afkoop_uitleg:'Onbeperkt koffie, thee & frisdrank (+\u20ac9,50 p.p.).', afkoop_uitleg2:'(Niet mogelijk voor alcoholische drank)', afkoop_nee:'Nee', afkoop_ja:'Ja (+\u20ac9,50 p.p.)',\r\n      pv_label:'Persoonlijke vragen', pv_uitleg:'Lever zelf vragen aan die wij opnemen in jullie spellen (+\u20ac35, je ontvangt een link).', pv_uitleg2:'Maakt ClashRooms n\u00f3g persoonlijker en leuker!', pv_nee:'Nee', pv_ja:'Ja (+\u20ac35)',\r\n      pv_info_knop:'Meer uitleg over persoonlijke vragen',\r\n      pv_info:'In onze Brains-kamer spelen we onder andere een Quiz- en een Schattingsspel. Hoe leuk en verrassend is het als er tussen de gewone vragen door opeens vragen worden gesteld over jullie persoonlijk! Via een formulier kunnen jullie de vragen aanleveren, wij zorgen dat de GameMaster ze bij jullie boeking in de spellen verwerkt. Zo geven we een \u00e9xtra persoonlijke en vaak hilarische dimensie aan jullie bezoek!',\r\n      beker_label:'Beker', beker_uitleg:'Het winnende team neemt een \u00e9chte beker (25cm) mee naar huis. Per groep van 20 personen wordt 1 beker uitgereikt (\u20ac20 p.st.).', beker_nee:'Nee', beker_ja:'Ja (+\u20ac20 p.st.)',\r\n      eten_label:'Info combi met eten', eten_nee:'Nee', eten_ja:'Ja',\r\n      eten_uitleg:'Wil je informatie over eetmogelijkheden in combinatie met ClashRooms?',\r\n      eten_uitleg2:'ClashRooms is ideaal te combineren met een hapje eten voor- of achteraf.',\r\n      eten_info_knop:'Meer uitleg over de combinatie met eten',\r\n      eten_info_intro:'Wij adviseren de volgende twee opties:',\r\n      eten_info_lichttoren:'prachtig restaurant op 4 minuten lopen, met vrijwel altijd plek voor (grote) groepen.',\r\n      eten_info_peakz:'lopend buffet van de Peakz-cateraar, geserveerd op het binnenterras van Peakz Padel, waar je ook terecht kunt voor een drankje. Ideaal onder hetzelfde dak.',\r\n      eten_wensen_label:'Jouw wensen',\r\n      eten_wensen_ph:'Geef hier alvast aan waar je aan denkt en welke wensen je hebt. Let op: het eten maakt g\u00e9\u00e9n onderdeel uit van deze aanvraag. Dit gaat altijd in nader overleg, ofwel via ons, ofwel rechtstreeks.',\r\n      eten_offerte_pre:'Wil je eerst zekerheid dat de combi met eten mogelijk is?',\r\n      eten_offerte_link:'Gebruik dan het offerteformulier',\r\n      s4_title:'Extra\\'s', boeking_type_label:'Type boeking', particulier:'Particulier', zakelijk:'Zakelijk',\r\n      bedrijfsnaam_label:'Bedrijfsnaam *', bedrijfsnaam_ph:'Naam van uw bedrijf',\r\n      factuur_label:'Factuurgegevens \/ kostenpost', factuur_ph:'Bijv. kostprijscode, projectnummer',\r\n      voornaam_label:'Voornaam *', voornaam_ph:'Voornaam', achternaam_label:'Achternaam *', achternaam_ph:'Achternaam',\r\n      email_label:'E-mailadres *', email_ph:'jouw@email.nl', telefoon_label:'Telefoonnummer *', telefoon_ph:'06...',\r\n      gevonden_label:'Hoe heb je ons gevonden?', gevonden_kies:'\u2014 Kies een optie \u2014', gevonden_via:'Via via \/ aanrader', gevonden_anders:'Anders',\r\n      gevonden_geweest:'Ik ben al een keer geweest!', gevonden_flyer:'Flyer',\r\n      opmerkingen_label:'Vragen of opmerkingen', opmerkingen_ph:'Eventuele vragen of bijzonderheden...',\r\n      akkoord_pre:'Ik ga akkoord met de ', akkoord_link:'algemene voorwaarden',\r\n      submit:'Verstuur aanvraag \u2713', submitting:'Versturen...',\r\n      success_title:'Aanvraag verstuurd!', success_body:'Bedankt voor je aanvraag. Je ontvangt binnen 2 werkdagen een bevestiging via e-mail.',\r\n      sum_title:'Samenvatting aanvraag', sum_duur:'Duur', sum_personen:'Aantal personen', sum_datumtijd:'Datum & tijd',\r\n      sum_taal:'Taal', sum_type:'Type uitje', sum_afkoop:'Drankafkoop', sum_pv:'Persoonlijke vragen', sum_beker:'Beker', sum_totaal:'Totaalprijs', uur:'uur', ja:'Ja', nee:'Nee',\r\n      geen_sloten:'Geen beschikbare tijdsloten op deze dag. Kies een andere datum.',\r\n      err_ophalen:'De tijdsloten konden niet worden geladen.', opnieuw_proberen:'Opnieuw proberen',\r\n      err_kies_datum:'Kies een datum.', err_kies_tijd:'Kies een tijdstip.', err_verplicht:'Dit veld is verplicht.',\r\n      err_kies_taal:'Kies een taal.', err_kies_type:'Kies een type uitje.', err_email:'Vul een geldig e-mailadres in (met @ en een punt).',\r\n      err_akkoord:'Je moet akkoord gaan met de algemene voorwaarden om te kunnen boeken.',\r\n      err_bezet:'Het gekozen tijdstip is helaas net bezet. Kies een nieuw tijdstip.',\r\n      err_algemeen:'Er ging iets mis. Probeer opnieuw.', err_verbinding:'Verbindingsfout. Probeer opnieuw of mail info@clashrooms.nl'\r\n    },\r\n    en: {\r\n      step_aanbod:'Offer', step_datum:'Date', step_type:'Type', step_gegevens:'Details', step_extras:'Extras', s5_title:'Your details & overview',\r\n      s1_title:'What would you like to book?', duur_label:'Duration',\r\n      duur_15:'1.5 hours', duur_15_sub:'\u00b7 6 games', duur_25:'2.5 hours', duur_25_sub:'\u00b7 9 games',\r\n      personen_label:'Number of people:', pp:'p.p.', totaal:'total',\r\n      price_line:'For {n} people ClashRooms costs {pp} per person. Total:',\r\n      sum_tarief_voor:'(rate for {n})',\r\n      groep_klein:'Groups of 4 or 5 are welcome too! You do pay our minimum rate for 6 people though.<span class=\"cr-bf-tip\">Tip: <a href=\"https:\/\/www.escaperoomeindhoven.nl\/\" target=\"_blank\" rel=\"noopener\">Next Level Escaperoom<\/a> is a good option for smaller groups too!<\/span>',\r\n      groep_groot:'Larger group? Up to 70 people we\\'ll be able to manage your group at ClashRooms. Above that we\\'ll arrange it with our partners: we can host up to 150. Email: <a href=\"mailto:info@clashrooms.nl\">info@clashrooms.nl<\/a> for more information, or use the contact form.',\r\n      next:'Next \u2192', back:'\u2190 Back',\r\n      s2_title:'When are you coming?', datum_label:'Preferred date *', tijdsloten_label:'Available time slots *',\r\n      laden:'Loading availability\u2026', kies_datum_hint:'First choose a date above.',\r\n      cal_saturday_15:'On Saturdays only the 1.5-hour version is available.',\r\n      licht_toe:'Please explain',\r\n      pers_onzeker_label:'Number of participants not final yet?',\r\n      pers_onzeker_ph:'E.g. between 12 and 18 people, we will know in two weeks.',\r\n      pers_onzeker_note:'For now we work with the number you selected. Your note is added to the request.',\r\n      flex_30:'\u00b1 30 minutes is fine', flex_60:'\u00b1 1 hour is fine', flex_dagdeel:'Any time that morning, afternoon or evening',\r\n      flex_zin_30:'Starting 30 minutes earlier or later than the time we picked is fine.',\r\n      flex_zin_60:'Starting an hour earlier or later than the time we picked is fine.',\r\n      flex_zin_dagdeel:'As long as it is somewhere in that morning, afternoon or evening, it is fine.',\r\n      datum_onzeker_label:'Date\/time flexible or not final yet?',\r\n      datum_onzeker_sub:'Let us know here, it makes it easier for us to fit you in.',\r\n      datum_onzeker_ph:'E.g. this date is our first choice but a week later works too. Flexible about the time? Use the buttons below as a shortcut (and edit if you like).',\r\n      datum_onzeker_note:'For now we keep the date and time you selected. Your note is added to the request.',\r\n      sum_pers_onzeker:'Number not final', sum_datum_onzeker:'Time or date not final',\r\n      s3_title:'Type of outing', taal_label:'Language', taal_nl:'Dutch', taal_en:'English', type_label:'Type of outing',\r\n      taal_uitleg:'All our GameMasters are bilingual! Which language would you like your booking in?',\r\n      type_uitleg:'With this information we can tailor your games even more!',\r\n      type_bedrijfsuitje:'Company outing', type_vrijgezellen:'Bachelor(ette) party', type_familiedag:'Family day',\r\n      type_verjaardag:'Birthday', type_vrienden:'Outing with friends',\r\n      type_teambuilding:'Team building', type_eindejaars:'End-of-year outing', type_anders:'Other',\r\n      afkoop_label:'Drinks package', afkoop_uitleg:'Unlimited coffee, tea & soft drinks (+\u20ac9.50 p.p.).', afkoop_uitleg2:'(Not available for alcoholic drinks)', afkoop_nee:'No', afkoop_ja:'Yes (+\u20ac9.50 p.p.)',\r\n      pv_label:'Personal questions', pv_uitleg:'Supply your own questions that we build into your games (+\u20ac35, you receive a link).', pv_uitleg2:'Makes ClashRooms even more personal and fun!', pv_nee:'No', pv_ja:'Yes (+\u20ac35)',\r\n      pv_info_knop:'More about personal questions',\r\n      pv_info:'In our Brains room we play a quiz game and an estimation game, among others. Imagine how much fun it is when, in between the regular questions, one suddenly comes up about you! You supply the questions through a form, and we make sure the GameMaster works them into the games for your booking. It gives your visit an extra personal, and often hilarious, dimension!',\r\n      beker_label:'Trophy', beker_uitleg:'The winning team takes home a real trophy (25cm). One trophy is awarded per group of 20 people (\u20ac20 each).', beker_nee:'No', beker_ja:'Yes (+\u20ac20 each)',\r\n      eten_label:'Info about food', eten_nee:'No', eten_ja:'Yes',\r\n      eten_uitleg:'Would you like information about combining ClashRooms with a meal?',\r\n      eten_uitleg2:'ClashRooms combines perfectly with a bite to eat before or afterwards.',\r\n      eten_info_knop:'More about combining with a meal',\r\n      eten_info_intro:'We recommend these two options:',\r\n      eten_info_lichttoren:'a beautiful restaurant a 4 minute walk away, with room for (large) groups almost any time.',\r\n      eten_info_peakz:'a walking buffet by the Peakz caterer, served on the indoor terrace of Peakz Padel, where you can also order drinks. Ideal under one roof.',\r\n      eten_wensen_label:'Your wishes',\r\n      eten_wensen_ph:'Tell us what you have in mind and what your wishes are. Please note: the food is not part of this request. It is always arranged in further consultation, either through us or directly.',\r\n      eten_offerte_pre:'Would you like certainty about the combination first?',\r\n      eten_offerte_link:'Then use the quote form',\r\n      s4_title:'Extras', boeking_type_label:'Booking type', particulier:'Private', zakelijk:'Business',\r\n      bedrijfsnaam_label:'Company name *', bedrijfsnaam_ph:'Your company name',\r\n      factuur_label:'Invoice details \/ cost center', factuur_ph:'E.g. cost code, project number',\r\n      voornaam_label:'First name *', voornaam_ph:'First name', achternaam_label:'Last name *', achternaam_ph:'Last name',\r\n      email_label:'Email address *', email_ph:'you@email.com', telefoon_label:'Phone number *', telefoon_ph:'06...',\r\n      gevonden_label:'How did you find us?', gevonden_kies:'\u2014 Choose an option \u2014', gevonden_via:'Word of mouth \/ recommendation', gevonden_anders:'Other',\r\n      gevonden_geweest:'I have been here before!', gevonden_flyer:'Flyer',\r\n      opmerkingen_label:'Questions or comments', opmerkingen_ph:'Any questions or special requests...',\r\n      akkoord_pre:'I agree to the ', akkoord_link:'terms and conditions',\r\n      submit:'Send request \u2713', submitting:'Sending...',\r\n      success_title:'Request sent!', success_body:\"Thank you for your request. You'll receive a confirmation by email within 2 business days.\",\r\n      sum_title:'Request summary', sum_duur:'Duration', sum_personen:'Number of people', sum_datumtijd:'Date & time',\r\n      sum_taal:'Language', sum_type:'Type of outing', sum_afkoop:'Drinks package', sum_pv:'Personal questions', sum_beker:'Trophy', sum_totaal:'Total price', uur:'hours', ja:'Yes', nee:'No',\r\n      geen_sloten:'No available time slots on this day. Please choose another date.',\r\n      err_ophalen:'The time slots could not be loaded.', opnieuw_proberen:'Try again',\r\n      err_kies_datum:'Please choose a date.', err_kies_tijd:'Please choose a time.', err_verplicht:'This field is required.',\r\n      err_kies_taal:'Please choose a language.', err_kies_type:'Please choose a type of outing.', err_email:'Please enter a valid email address (with @ and a dot).',\r\n      err_akkoord:'You must agree to the terms and conditions to continue.',\r\n      err_bezet:'Unfortunately the chosen time was just taken. Please choose a new time.',\r\n      err_algemeen:'Something went wrong. Please try again.', err_verbinding:'Connection error. Please try again or email info@clashrooms.nl'\r\n    }\r\n  };\r\n  function t(key) { return (I18N[LANG] && I18N[LANG][key] != null) ? I18N[LANG][key] : (I18N.nl[key] != null ? I18N.nl[key] : key); }\r\n\r\n  \/\/ Waarde (opgeslagen NL-waarde) \u2192 weergavetekst in huidige taal\r\n  var TAAL_KEY = { 'Nederlands':'taal_nl', 'Engels':'taal_en' };\r\n  var TYPE_KEY = { 'Bedrijfsuitje':'type_bedrijfsuitje','Vrijgezellenfeest':'type_vrijgezellen','Familiedag':'type_familiedag','Verjaardag':'type_verjaardag','Vriendenuitje':'type_vrienden','Teambuilding':'type_teambuilding','Eindejaarsuitje':'type_eindejaars','Anders':'type_anders' };\r\n  var AFKOOP_KEY = { 'Nee':'afkoop_nee','Ja':'afkoop_ja' };\r\n  function tv(map, val) { return map[val] ? t(map[val]) : val; }\r\n\r\n  function applyI18n() {\r\n    var root = document.getElementById('cr-booking-form');\r\n    if (!root) return;\r\n    root.querySelectorAll('[data-i18n]').forEach(function (el) {\r\n      var k = el.getAttribute('data-i18n');\r\n      if (I18N[LANG][k] != null) el.textContent = I18N[LANG][k];\r\n    });\r\n    root.querySelectorAll('[data-i18n-ph]').forEach(function (el) {\r\n      var k = el.getAttribute('data-i18n-ph');\r\n      if (I18N[LANG][k] != null) el.placeholder = I18N[LANG][k];\r\n    });\r\n    \/\/ Voorleesteksten voor knoppen zonder zichtbaar label (zoals het info-knopje)\r\n    root.querySelectorAll('[data-i18n-aria]').forEach(function (el) {\r\n      var k = el.getAttribute('data-i18n-aria');\r\n      if (I18N[LANG][k] != null) el.setAttribute('aria-label', I18N[LANG][k]);\r\n    });\r\n    \/\/ Engelse voorwaarden-pagina en Engels offerteformulier\r\n    if (LANG === 'en') {\r\n      var av = document.getElementById('bf-av-link');\r\n      if (av) av.href = 'https:\/\/clashrooms.nl\/en\/terms-and-conditions\/';\r\n      var offerte = document.getElementById('bf-offerte-link');\r\n      if (offerte) offerte.href = 'https:\/\/clashrooms.nl\/en\/request-for-quotation\/';\r\n    }\r\n  }\r\n\r\n  var PRICES = {\r\n    1.5: [ { max: 8, pp: 32.00 }, { max: 12, pp: 29.00 }, { max: 16, pp: 27.50 }, { max: 99, pp: 26.50 } ],\r\n    2.5: [ { max: 8, pp: 39.00 }, { max: 12, pp: 35.50 }, { max: 16, pp: 33.50 }, { max: 99, pp: 32.00 } ],\r\n  };\r\n  var AFKOOP_PP = 9.50; \/\/ drankafkoop-toeslag per persoon (Tarieven-tabblad: \"Afkoop\")\r\n  var PV_PRIJS = 35;    \/\/ Persoonlijke vragen \u2014 eenmalig\r\n  var BEKER_PRIJS = 20; \/\/ Beker \u2014 per stuk (aantal = aantal teams \/ groepsgrootte)\r\n  function getBekerAantal(persons) { return persons < 21 ? 1 : (persons <= 40 ? 2 : 3); }\r\n  function getPricePerPerson(persons, duration) {\r\n    var table = PRICES[duration] || PRICES[1.5];\r\n    for (var i = 0; i < table.length; i++) { if (persons <= table[i].max) return table[i].pp; }\r\n    return table[table.length - 1].pp;\r\n  }\r\n  \/\/ De hele prijssom op \u00e9\u00e9n plek. De samenvatting op stap 5 en de conversiewaarde\r\n  \/\/ die we naar GA4 en de Pixel sturen moeten hetzelfde bedrag laten zien, dus\r\n  \/\/ rekenen ze allebei hiermee.\r\n  function berekenPrijsBlok(form) {\r\n    var nPers    = parseInt((form.querySelector('#bf-personen') || {}).value, 10) || 15;\r\n    \/\/ Groepen onder de 6 zijn welkom maar betalen het tarief van 6. Het echte\r\n    \/\/ aantal blijft staan voor de agenda en het aantal bekers; alleen de prijs\r\n    \/\/ rekent met dit hogere getal.\r\n    var rekenPers = Math.max(nPers, MIN_TARIEF_AANTAL);\r\n    var duurVal  = parseFloat((form.querySelector('#bf-duur') || {}).value) || 1.5;\r\n    var basePP   = getPricePerPerson(rekenPers, duurVal);\r\n    var afkoopPP = ((form.querySelector('#bf-afkoop') || {}).value === 'Ja') ? AFKOOP_PP : 0;\r\n    var pp       = basePP + afkoopPP;                       \/\/ effectieve prijs per persoon\r\n    var pvBedrag = ((form.querySelector('#bf-pv') || {}).value === 'Ja') ? PV_PRIJS : 0;\r\n    var bekerAantal = getBekerAantal(nPers);\r\n    var bekerBedrag = ((form.querySelector('#bf-beker') || {}).value === 'Ja') ? BEKER_PRIJS * bekerAantal : 0;\r\n    return {\r\n      nPers: nPers, rekenPers: rekenPers, pp: pp, pvBedrag: pvBedrag,\r\n      bekerAantal: bekerAantal, bekerBedrag: bekerBedrag,\r\n      total: pp * rekenPers + pvBedrag + bekerBedrag\r\n    };\r\n  }\r\n  function formatEuro(amount) {\r\n    if (LANG === 'en') {\r\n      var parts = amount.toFixed(2).split('.');\r\n      parts[0] = parts[0].replace(\/\\B(?=(\\d{3})+(?!\\d))\/g, ',');\r\n      return '\u20ac' + parts.join('.');\r\n    }\r\n    return '\u20ac' + amount.toFixed(2).replace('.', ',').replace(\/(\\d)(?=(\\d{3})+(?!\\d))\/g, '$1.');\r\n  }\r\n  function fmtDuur(d) {\r\n    var v = (LANG === 'en') ? String(d) : String(d).replace('.', ',');\r\n    return v + ' ' + t('uur');\r\n  }\r\n  function formatDateISO(date) {\r\n    var y = date.getFullYear();\r\n    var m = String(date.getMonth() + 1).padStart(2, '0');\r\n    var d = String(date.getDate()).padStart(2, '0');\r\n    return y + '-' + m + '-' + d;\r\n  }\r\n\r\n  \/\/ Maand- en weekdagnamen voor de kalender (weekdagen ma\u2192zo)\r\n  var CAL_MONTHS = {\r\n    nl: ['januari','februari','maart','april','mei','juni','juli','augustus','september','oktober','november','december'],\r\n    en: ['January','February','March','April','May','June','July','August','September','October','November','December']\r\n  };\r\n  var CAL_WEEKDAYS = {\r\n    nl: ['ma','di','wo','do','vr','za','zo'],\r\n    en: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun']\r\n  };\r\n\r\n  \/\/ \u2500\u2500 Conversietracking \u2500\u2500\r\n  \/\/ E\u00e9n melding per geslaagde aanvraag, met de berekende totaalprijs als waarde.\r\n  \/\/ De tags staan al op de site: GA4 via gtag, GTM via de dataLayer en de Meta\r\n  \/\/ Pixel via fbq. Complianz laadt die pas als de bezoeker toestemming geeft, dus\r\n  \/\/ bestaan gtag en fbq soms niet. Vandaar eerst een bestaanscheck, en alles in\r\n  \/\/ try\/catch: een mislukte tag mag de bevestiging op het scherm nooit tegenhouden.\r\n  \/\/\r\n  \/\/ Let op bij het inrichten in GTM. Hang je daar een GA4-tag onder het event\r\n  \/\/ cr_boeking_aanvraag, zet dan de rechtstreekse gtag-aanroep hieronder uit,\r\n  \/\/ anders komt generate_lead twee keer binnen en verdubbelt de conversie.\r\n  var conversieGemeld = false;\r\n  function meldConversie(payload, totaal) {\r\n    if (conversieGemeld) return;   \/\/ dubbele klik of een tweede antwoord: toch \u00e9\u00e9n melding\r\n    conversieGemeld = true;\r\n    var waarde = Math.round((Number(totaal) || 0) * 100) \/ 100;\r\n    var velden = {\r\n      value:        waarde,\r\n      currency:     'EUR',\r\n      personen:     parseInt(payload.persons, 10) || 0,\r\n      duur:         payload.duration,\r\n      datum:        payload.date,\r\n      type_uitje:   payload.type_uitje,\r\n      boeking_type: payload.boeking_type,\r\n      gevonden:     payload.gevonden,\r\n      taal:         payload.taal\r\n    };\r\n\r\n    \/\/ Op de testpagina niets versturen, anders lopen testboekingen mee in de cijfers\r\n    \/\/ waarop de advertenties worden bijgestuurd. Wel loggen, zodat te controleren is\r\n    \/\/ d\u00e1t het afgaat en met welke waarde.\r\n    if (IS_TEST) {\r\n      try { console.log('[ClashRooms boeking] conversie (TEST, niet verstuurd):', velden); } catch (e) {}\r\n      return;\r\n    }\r\n\r\n    try {\r\n      window.dataLayer = window.dataLayer || [];\r\n      window.dataLayer.push(Object.assign({ event: 'cr_boeking_aanvraag' }, velden));\r\n    } catch (e) {}\r\n    try {\r\n      if (typeof window.gtag === 'function') window.gtag('event', 'generate_lead', velden);\r\n    } catch (e) {}\r\n    try {\r\n      if (typeof window.fbq === 'function') {\r\n        window.fbq('track', 'Lead', { value: waarde, currency: 'EUR', content_name: 'Boekingsaanvraag' });\r\n      }\r\n    } catch (e) {}\r\n  }\r\n\r\n  function initBookingForm() {\r\n    var form = document.getElementById('cr-booking-form');\r\n    if (!form) return;\r\n\r\n    applyI18n();\r\n\r\n    \/\/ Info-knopjes: klappen het bijbehorende tekstblok open en dicht. Werkt met\r\n    \/\/ muis, toets en schermlezer doordat het echte <button>-elementen zijn die\r\n    \/\/ via aria-controls naar hun panel wijzen.\r\n    form.querySelectorAll('.cr-bf-info-btn').forEach(function (knop) {\r\n      var paneel = form.querySelector('#' + knop.getAttribute('aria-controls'));\r\n      if (!paneel) return;\r\n      knop.addEventListener('click', function () {\r\n        var open = knop.getAttribute('aria-expanded') === 'true';\r\n        knop.setAttribute('aria-expanded', open ? 'false' : 'true');\r\n        paneel.hidden = open;\r\n      });\r\n    });\r\n\r\n    \/\/ Alleen op de testpagina: de contactvelden vast invullen. Op de live pagina\r\n    \/\/ gebeurt hier niets en blijven de velden leeg.\r\n    if (IS_TEST) {\r\n      Object.keys(TEST_INVULLING).forEach(function (id) {\r\n        var el = form.querySelector('#' + id);\r\n        if (el && !el.value) el.value = TEST_INVULLING[id];\r\n      });\r\n    }\r\n\r\n    \/\/ Laad-overlay naar <body> verplaatsen: zo werkt position:fixed altijd t.o.v. het\r\n    \/\/ venster (blijft zichtbaar op het lange laatste paneel) en niet t.o.v. een\r\n    \/\/ eventueel getransformde Elementor-container.\r\n    var loadingOverlay = document.getElementById('bf-loading');\r\n    if (loadingOverlay && loadingOverlay.parentNode !== document.body) {\r\n      document.body.appendChild(loadingOverlay);\r\n    }\r\n\r\n    var currentStep = 1;\r\n    var duration    = 1.5;\r\n    var persons     = 15;\r\n\r\n    var bfSlider   = form.querySelector('#bf-personen-slider');\r\n    var bfNumber   = form.querySelector('#bf-personen-number');\r\n    var bfPersons  = form.querySelector('#bf-personen');\r\n    var bfPricePrev = form.querySelector('#bf-price-preview');\r\n    var bfDuur     = form.querySelector('#bf-duur');\r\n    var durBtns    = form.querySelectorAll('[data-field=\"duur\"]');\r\n\r\n    var availableTimes     = [];\r\n    var zeroBufferTimes    = [];\r\n    var availabilityLoaded = false;\r\n\r\n    var prefetchCache = {};\r\n    var prefetchKey   = null;\r\n\r\n    \/\/ Volgnummer van de meest recente vraag om beschikbaarheid. Elke datumklik\r\n    \/\/ verhoogt hem, en een wijziging van aantal of duur ook, want die maakt een\r\n    \/\/ lopende aanvraag net zo goed achterhaald. Een antwoord met een ouder nummer\r\n    \/\/ gooien we weg. Zonder dit kan het antwoord op een eerdere klik later\r\n    \/\/ binnenkomen dan dat op een latere, en staan de tijden van de ene datum\r\n    \/\/ onder de kop van de andere.\r\n    var laatsteAanvraag = 0;\r\n\r\n    \/\/ De backend rekent beschikbaarheid per groepsgrootte, niet per persoon: tot en\r\n    \/\/ met 20 is het \u00e9\u00e9n groep, 21 tot en met 40 twee, daarboven drie. Zie\r\n    \/\/ getAvailableTimesForDate() en handleBulkRequest() in WebApp.js. Binnen\r\n    \/\/ hetzelfde hokje komt er dus letterlijk hetzelfde antwoord terug en valt er\r\n    \/\/ niets te vragen. Wijzigt die indeling ooit in de backend, dan moet deze regel\r\n    \/\/ mee, anders serveren we het antwoord van het verkeerde hokje.\r\n    function groepsGrootte(aantal) { return aantal < 21 ? 1 : aantal <= 40 ? 2 : 3; }\r\n\r\n    \/\/ Even wachten voordat we echt iets vragen. De schuifbalk meldt elke tussenstand,\r\n    \/\/ en zonder deze pauze vertrekt er bij het oversteken van een hokjesgrens alsnog\r\n    \/\/ een aanvraag die meteen daarna achterhaald is.\r\n    \/\/ Was 250 ms. Zo kort dat wie aan het aantal personen schuift binnen twee\r\n    \/\/ seconden drie ophaalacties van een half jaar in de lucht heeft, die elkaar\r\n    \/\/ vervolgens in de weg zitten. Een seconde vangt normaal geschuif op.\r\n    var PREFETCH_WACHT = 1000;\r\n    var prefetchAfbreker = null;   \/\/ breekt een lopende ophaalactie af\r\n    var prefetchTimer  = null;\r\n\r\n    \/\/ Aanroepen zodra aantal of duur wijzigt. Geeft terug of het antwoord hierdoor\r\n    \/\/ echt verandert, zodat de aanroeper weet of eerder opgehaalde tijden nog gelden.\r\n    function planPrefetch() {\r\n      var key = groepsGrootte(persons) + '_' + duration;\r\n      if (prefetchKey === key) return false;\r\n      prefetchKey   = key;\r\n      prefetchCache = {};\r\n      \/\/ Meteen, niet pas als de wachttijd om is: wat er nu nog onderweg is hoort bij\r\n      \/\/ een groepsgrootte of duur die niet meer klopt.\r\n      laatsteAanvraag++;\r\n      clearTimeout(prefetchTimer);\r\n      \/\/ De vorige ophaalactie hoort bij een groepsgrootte of duur die niet meer\r\n      \/\/ klopt. Zonder afbreken loopt die gewoon door, houdt hij een verbinding\r\n      \/\/ bezig en zit hij de nieuwe in de weg.\r\n      if (prefetchAfbreker) { try { prefetchAfbreker.abort(); } catch (e) {} prefetchAfbreker = null; }\r\n      prefetchTimer = setTimeout(function () { prefetchAvailability(key); }, PREFETCH_WACHT);\r\n      return true;\r\n    }\r\n\r\n    function prefetchAvailability(key) {\r\n      var today   = new Date();\r\n      var endDate = new Date(today.getFullYear(), today.getMonth() + MONTHS_AHEAD, today.getDate());\r\n      var url = GAS_URL +\r\n        '?app=booking&mode=bulk' +\r\n        '&persons='  + encodeURIComponent(persons) +\r\n        '&duration=' + encodeURIComponent(duration) +\r\n        '&start='    + encodeURIComponent(formatDateISO(today)) +\r\n        '&end='      + encodeURIComponent(formatDateISO(endDate));\r\n      var afbreker = (typeof AbortController !== 'undefined') ? new AbortController() : null;\r\n      prefetchAfbreker = afbreker;\r\n      fetch(url, afbreker ? { signal: afbreker.signal } : undefined)\r\n        .then(function (r) { return r.json(); })\r\n        .then(function (data) {\r\n          \/\/ Loopt er inmiddels een nieuwere ophaalactie, dan hoort dit antwoord bij\r\n          \/\/ een groepsgrootte of duur die de boeker allang heeft gewijzigd.\r\n          if (key !== prefetchKey) return;\r\n          if (!data.error) prefetchCache = data;\r\n        })\r\n        .catch(function () {});   \/\/ ook een afgebroken actie komt hier langs, en dat is goed\r\n    }\r\n\r\n    \/\/ Onder de 6 rekenen we met 6: kleinere groepen zijn welkom, maar betalen het\r\n    \/\/ tarief van 6. Boven de 60 rekent hij gewoon door per persoon.\r\n    function rekenAantal() { return Math.max(persons, MIN_TARIEF_AANTAL); }\r\n\r\n    function updatePrice() {\r\n      var n = rekenAantal();\r\n      var pp = getPricePerPerson(n, duration);\r\n      var total = pp * n;\r\n      if (bfSlider) {\r\n        var pct = ((persons - PERS_MIN) \/ (PERS_MAX - PERS_MIN)) * 100;\r\n        bfSlider.style.setProperty('--fill', Math.max(0, Math.min(100, pct)) + '%');\r\n      }\r\n      if (bfPricePrev) {\r\n        var line = t('price_line').replace('{n}', n).replace('{pp}', formatEuro(pp));\r\n        bfPricePrev.innerHTML = line + '&nbsp;<strong>' + formatEuro(total) + '<\/strong>';\r\n      }\r\n      toonGroepsmelding();\r\n    }\r\n\r\n    \/\/ Buiten 6 t\/m 60 vertellen we wat er geldt. Onderaan dat het mag maar tegen\r\n    \/\/ het tarief van 6; bovenaan dat het tot 70 gewoon kan en daarboven op maat.\r\n    function toonGroepsmelding() {\r\n      var el = form.querySelector('#bf-groepsmelding');\r\n      if (!el) return;\r\n      var tekst = '';\r\n      if (persons < MIN_TARIEF_AANTAL) tekst = t('groep_klein');\r\n      else if (persons >= 60) tekst = t('groep_groot');\r\n      el.innerHTML = tekst;\r\n      el.hidden = !tekst;\r\n    }\r\n\r\n    \/\/ Schuifbalk en invoerveld synchroon houden (beide sturen dezelfde 'persons')\r\n    function setPersons(val, opts) {\r\n      val = parseInt(val, 10);\r\n      if (isNaN(val)) return;\r\n      if (val < PERS_MIN) val = PERS_MIN;\r\n      if (val > PERS_MAX) val = PERS_MAX;\r\n      persons = val;\r\n      if (bfSlider)  bfSlider.value  = persons;\r\n      if (bfNumber)  bfNumber.value  = persons;\r\n      if (bfPersons) bfPersons.value = persons;\r\n      updatePrice();\r\n      if ((!opts || opts.reload !== false) && planPrefetch()) {\r\n        availabilityLoaded = false; availableTimes = []; zeroBufferTimes = [];\r\n      }\r\n    }\r\n\r\n    if (bfSlider)  bfSlider.value  = persons;\r\n    if (bfNumber)  bfNumber.value  = persons;\r\n    if (bfPersons) bfPersons.value = persons;\r\n    if (bfDuur)    bfDuur.value    = duration;\r\n\r\n    durBtns.forEach(function (btn) {\r\n      if (parseFloat(btn.dataset.value) === duration) btn.classList.add('cr-bf-opt-btn--active');\r\n      else btn.classList.remove('cr-bf-opt-btn--active');\r\n    });\r\n    updatePrice();\r\n\r\n    \/\/ Bewust GEEN default-taal: de boeker moet taal \u00e9n type uitje zelf kiezen\r\n    \/\/ (afgedwongen in validateStep(3)), zodat die keuzes altijd expliciet zijn.\r\n\r\n    \/\/ \u2500\u2500 Kalender (datumkiezer) \u2500\u2500\r\n    var bfDatumHidden = form.querySelector('#bf-datum');\r\n    var calMonthEl = form.querySelector('#bf-cal-month');\r\n    var calWeekEl  = form.querySelector('#bf-cal-weekdays');\r\n    var calGridEl  = form.querySelector('#bf-cal-grid');\r\n    var calPrevBtn = form.querySelector('#bf-cal-prev');\r\n    var calNextBtn = form.querySelector('#bf-cal-next');\r\n    var calSatNote = form.querySelector('#bf-cal-saturday-note');\r\n\r\n    \/\/ Selecteerbaar bereik: minimaal 7 dagen vooruit t\/m MONTHS_AHEAD maanden vooruit.\r\n    \/\/ Binnen 7 dagen kan online niet geboekt worden (te korte termijn) \u2192 dan via contact.\r\n    var MIN_LEAD_DAYS = 7;\r\n    var calTodayStart = new Date(); calTodayStart.setHours(0,0,0,0);\r\n    var calMinDate = new Date(); calMinDate.setHours(0,0,0,0); calMinDate.setDate(calMinDate.getDate() + MIN_LEAD_DAYS);\r\n    var calMaxDate = new Date(); calMaxDate.setHours(0,0,0,0); calMaxDate.setMonth(calMaxDate.getMonth() + MONTHS_AHEAD);\r\n    var calViewYear  = calTodayStart.getFullYear();  \/\/ begin op de huidige maand (short-notice dagen zichtbaar)\r\n    var calViewMonth = calTodayStart.getMonth();\r\n    var calSelected  = null; \/\/ geselecteerde datum (Date) of null\r\n\r\n    \/\/ Contact-tekst (met klikbare mailto) voor de \"binnen 7 dagen\"-melding\r\n    var shortNoticeEl = form.querySelector('#bf-cal-shortnotice');\r\n    if (shortNoticeEl) {\r\n      shortNoticeEl.innerHTML = (LANG === 'en')\r\n        ? 'Want to book within 7 days? Please contact us directly at <a href=\"mailto:info@clashrooms.nl\">info@clashrooms.nl<\/a> or by phone.'\r\n        : 'Wil je binnen 7 dagen boeken? Neem dan direct contact met ons op via <a href=\"mailto:info@clashrooms.nl\">info@clashrooms.nl<\/a> of telefonisch.';\r\n    }\r\n\r\n    function calMonthIndex(y, m) { return y * 12 + m; }\r\n\r\n    function renderCalendar() {\r\n      if (!calGridEl || !calMonthEl) return;\r\n      var lang = (LANG === 'en') ? 'en' : 'nl';\r\n\r\n      calMonthEl.textContent = CAL_MONTHS[lang][calViewMonth] + ' ' + calViewYear;\r\n\r\n      \/\/ Weekdagen (ma\u2192zo)\r\n      calWeekEl.innerHTML = '';\r\n      CAL_WEEKDAYS[lang].forEach(function (wd) {\r\n        var c = document.createElement('div');\r\n        c.className = 'cr-cal-weekday';\r\n        c.textContent = wd;\r\n        calWeekEl.appendChild(c);\r\n      });\r\n\r\n      \/\/ Dagen\r\n      calGridEl.innerHTML = '';\r\n      var firstOfMonth = new Date(calViewYear, calViewMonth, 1);\r\n      var offset = (firstOfMonth.getDay() + 6) % 7; \/\/ maandag = 0\r\n      for (var i = 0; i < offset; i++) {\r\n        var empty = document.createElement('div');\r\n        empty.className = 'cr-cal-day cr-cal-day--empty';\r\n        calGridEl.appendChild(empty);\r\n      }\r\n      var daysInMonth = new Date(calViewYear, calViewMonth + 1, 0).getDate();\r\n      for (var d = 1; d <= daysInMonth; d++) {\r\n        var dayDate = new Date(calViewYear, calViewMonth, d);\r\n        var cell = document.createElement('button');\r\n        cell.type = 'button';\r\n        cell.textContent = d;\r\n        \/\/ Zaterdag (getDay()===6) kan alleen bij de 1,5 uur-versie\r\n        var saturdayBlocked = (duration === 2.5) && (dayDate.getDay() === 6);\r\n        \/\/ Verleden of buiten bereik of geblokkeerde zaterdag = echt uit (grijs, niet klikbaar)\r\n        var hardDisabled = dayDate.getTime() < calTodayStart.getTime() || dayDate.getTime() > calMaxDate.getTime() || saturdayBlocked;\r\n        \/\/ Binnen 7 dagen (maar niet in het verleden) = gedempt-maar-klikbaar \u2192 toont contactmelding\r\n        var shortNotice = !hardDisabled && dayDate.getTime() < calMinDate.getTime();\r\n        if (hardDisabled) {\r\n          cell.className = 'cr-cal-day cr-cal-day--disabled';\r\n          cell.disabled = true;\r\n        } else if (shortNotice) {\r\n          cell.className = 'cr-cal-day cr-cal-day--shortnotice';\r\n          cell.setAttribute('aria-disabled', 'true');\r\n          cell.addEventListener('click', function () { clearDateSelection(); showShortNoticeHint(); });\r\n        } else {\r\n          cell.className = 'cr-cal-day';\r\n          if (calSelected && dayDate.getTime() === calSelected.getTime()) {\r\n            cell.className += ' cr-cal-day--selected';\r\n          }\r\n          (function (chosen) {\r\n            cell.addEventListener('click', function () { selectCalendarDate(chosen); });\r\n          })(dayDate);\r\n        }\r\n        calGridEl.appendChild(cell);\r\n      }\r\n\r\n      \/\/ Navigatieknoppen in\/uitschakelen op basis van bereik\r\n      if (calPrevBtn) calPrevBtn.disabled = calMonthIndex(calViewYear, calViewMonth) <= calMonthIndex(calTodayStart.getFullYear(), calTodayStart.getMonth());\r\n      if (calNextBtn) calNextBtn.disabled = calMonthIndex(calViewYear, calViewMonth) >= calMonthIndex(calMaxDate.getFullYear(), calMaxDate.getMonth());\r\n\r\n      \/\/ Zaterdag-uitleg alleen tonen bij de 2,5 uur-versie (dan is zaterdag geblokkeerd)\r\n      if (calSatNote) calSatNote.style.display = (duration === 2.5) ? 'block' : 'none';\r\n    }\r\n\r\n    \/\/ Klik op een \"binnen 7 dagen\"-dag: naar de contactmelding scrollen en die even oplichten.\r\n    var shortNoticeFlashTimer = null;\r\n    function showShortNoticeHint() {\r\n      if (!shortNoticeEl) return;\r\n      shortNoticeEl.classList.add('cr-cal-note--flash');\r\n      shortNoticeEl.scrollIntoView({ behavior: 'smooth', block: 'center' });\r\n      clearTimeout(shortNoticeFlashTimer);\r\n      shortNoticeFlashTimer = setTimeout(function () { shortNoticeEl.classList.remove('cr-cal-note--flash'); }, 3500);\r\n    }\r\n\r\n    \/\/ Wordt aangeroepen als de duur wijzigt: kalender opnieuw tekenen en een\r\n    \/\/ eventueel geselecteerde zaterdag wissen als die niet meer mag (2,5 uur).\r\n    function refreshCalendarForDuration() {\r\n      if (duration === 2.5 && calSelected && calSelected.getDay() === 6) {\r\n        calSelected = null;\r\n        if (bfDatumHidden) bfDatumHidden.value = '';\r\n        var hiddenTijd = form.querySelector('#bf-tijdstip');\r\n        if (hiddenTijd) hiddenTijd.value = '';\r\n        availableTimes = []; zeroBufferTimes = []; availabilityLoaded = false;\r\n        var gridEl = form.querySelector('#bf-tijdsloten-grid');\r\n        if (gridEl) gridEl.innerHTML = '<p class=\"cr-bf-slots-hint\">' + t('kies_datum_hint') + '<\/p>';\r\n      zetFlexZichtbaar(false);\r\n      }\r\n      renderCalendar();\r\n    }\r\n\r\n    \/\/ Wist de datumkeuze volledig (bolletje niet meer roze, tijdsloten terug naar hint).\r\n    \/\/ Aangeroepen als de gebruiker op een \"binnen 7 dagen\"-dag tikt: de eerdere,\r\n    \/\/ w\u00e9l-geldige keuze mag dan niet meer als geselecteerd blijven staan.\r\n    function clearDateSelection() {\r\n      calSelected = null;\r\n      if (bfDatumHidden) bfDatumHidden.value = '';\r\n      var hiddenTijd = form.querySelector('#bf-tijdstip');\r\n      if (hiddenTijd) hiddenTijd.value = '';\r\n      availableTimes = []; zeroBufferTimes = []; availabilityLoaded = false;\r\n      var gridEl = form.querySelector('#bf-tijdsloten-grid');\r\n      if (gridEl) gridEl.innerHTML = '<p class=\"cr-bf-slots-hint\">' + t('kies_datum_hint') + '<\/p>';\r\n      zetFlexZichtbaar(false);\r\n      renderCalendar();\r\n    }\r\n\r\n    function selectCalendarDate(dateObj) {\r\n      calSelected = dateObj;\r\n      var iso = formatDateISO(dateObj);\r\n      if (bfDatumHidden) bfDatumHidden.value = iso;\r\n      renderCalendar();\r\n      availabilityLoaded = false; availableTimes = []; zeroBufferTimes = [];\r\n      var gridEl = form.querySelector('#bf-tijdsloten-grid');\r\n      if (gridEl) gridEl.innerHTML = '';\r\n      zetFlexZichtbaar(false);\r\n      \/\/ Na het laden van de tijdsloten ernaartoe scrollen: op desktop staan ze\r\n      \/\/ anders onder de vouw en ziet de gebruiker ze niet verschijnen.\r\n      fetchAvailability(iso, function (ok) {\r\n        if (!ok) return;\r\n        var wrap = form.querySelector('#bf-tijdsloten-wrap');\r\n        if (wrap) wrap.scrollIntoView({ behavior: 'smooth', block: 'center' });\r\n      });\r\n    }\r\n\r\n    if (calPrevBtn) {\r\n      calPrevBtn.addEventListener('click', function () {\r\n        if (calViewMonth === 0) { calViewMonth = 11; calViewYear--; } else { calViewMonth--; }\r\n        renderCalendar();\r\n      });\r\n    }\r\n    if (calNextBtn) {\r\n      calNextBtn.addEventListener('click', function () {\r\n        if (calViewMonth === 11) { calViewMonth = 0; calViewYear++; } else { calViewMonth++; }\r\n        renderCalendar();\r\n      });\r\n    }\r\n    renderCalendar();\r\n\r\n    if (bfSlider) {\r\n      bfSlider.addEventListener('input', function () { setPersons(this.value); });\r\n    }\r\n    if (bfNumber) {\r\n      \/\/ Tijdens typen: prijs live meelopen zonder hard te clampen (anders kun je geen 2-cijferig getal typen)\r\n      bfNumber.addEventListener('input', function () {\r\n        var v = parseInt(this.value, 10);\r\n        if (isNaN(v)) return;\r\n        persons = v;\r\n        if (bfSlider)  bfSlider.value  = v;   \/\/ slider clampt zelf naar 6\u201360\r\n        if (bfPersons) bfPersons.value = v;\r\n        updatePrice();\r\n      });\r\n      \/\/ Bij verlaten\/enter: netjes clampen en beschikbaarheid opnieuw ophalen\r\n      bfNumber.addEventListener('change', function () { setPersons(this.value); });\r\n    }\r\n\r\n    \/\/ \u2500\u2500 Snelkoppelingen voor tijdflexibiliteit \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n    \/\/ Elke knop zet \u00e9\u00e9n zin in het toelichtingsveld. Ze blijven bewust niet\r\n    \/\/ \"geselecteerd\" staan: het tekstvak is wat er wordt verstuurd, en zodra de\r\n    \/\/ boeker die zin aanpast zou een opgelichte knop iets beweren dat niet meer\r\n    \/\/ klopt. Het is een snelkoppeling, geen keuze.\r\n    \/\/\r\n    \/\/ Ze sluiten elkaar wel uit: je bent niet tegelijk een half uur \u00e9n een uur\r\n    \/\/ flexibel, dus een volgende klik haalt de vorige zin weg. Is die zin\r\n    \/\/ inmiddels door de boeker gewijzigd, dan staat hij er niet meer letterlijk\r\n    \/\/ en laten we hem met rust; de nieuwe komt er dan onder. Andermans getypte\r\n    \/\/ tekst stilletjes overschrijven is erger dan een regel te veel.\r\n    \/\/\r\n    \/\/ Weghalen doe je in het tekstvak zelf, want daar staat hij.\r\n    var laatsteFlexZin = '';\r\n\r\n    function zetFlexZin(knop) {\r\n      var veld = form.querySelector('#bf-datum-toelichting');\r\n      if (!veld) return;\r\n      var zin = t(knop.dataset.flexzin);\r\n\r\n      var regels = veld.value.split('\\n');\r\n      if (laatsteFlexZin) {\r\n        regels = regels.filter(function (r) { return r.trim() !== laatsteFlexZin; });\r\n      }\r\n      if (regels.indexOf(zin) === -1) regels.push(zin);\r\n      laatsteFlexZin = zin;\r\n\r\n      veld.value = regels.join('\\n').replace(\/\\n{3,}\/g, '\\n\\n').trim();\r\n    }\r\n\r\n    form.querySelectorAll('.cr-bf-flex-knoppen .cr-bf-opt-btn').forEach(function (btn) {\r\n      btn.addEventListener('click', function () { zetFlexZin(this); });\r\n    });\r\n\r\n    form.querySelectorAll('.cr-bf-opt-btn').forEach(function (btn) {\r\n      if (btn.dataset.flexzin) return; \/\/ hebben hierboven hun eigen afhandeling\r\n      btn.addEventListener('click', function () {\r\n        var field = this.dataset.field;\r\n        var value = this.dataset.value;\r\n        form.querySelectorAll('[data-field=\"' + field + '\"]').forEach(function (b) { b.classList.remove('cr-bf-opt-btn--active'); });\r\n        this.classList.add('cr-bf-opt-btn--active');\r\n        var fieldWrap = this.closest('.cr-bf-field') || this.closest('.cr-bf-extra');\r\n        if (fieldWrap) { var fe = fieldWrap.querySelector('.cr-bf-error'); if (fe) fe.remove(); }\r\n        var hiddenMap = { duur: '#bf-duur', taal: '#bf-taal', type_uitje: '#bf-type-uitje', afkoop: '#bf-afkoop', persoonlijke_vragen: '#bf-pv', beker: '#bf-beker', boeking_type: '#bf-boeking-type', eten_info: '#bf-eten-info' };\r\n        var hidden = form.querySelector(hiddenMap[field]);\r\n        if (hidden) hidden.value = value;\r\n        if (field === 'afkoop' || field === 'persoonlijke_vragen' || field === 'beker') buildSummary();\r\n        \/\/ Het wensenvak hoort alleen te staan als er iets te wensen valt.\r\n        if (field === 'eten_info') {\r\n          var wensenWrap = form.querySelector('#bf-eten-wensen-wrap');\r\n          if (wensenWrap) wensenWrap.hidden = (value !== 'Ja');\r\n        }\r\n        \/\/ Zegt iemand Ja, dan wil hij ook weten waar hij Ja tegen zegt. Klap de\r\n        \/\/ uitleg van dit blok dan meteen open, in plaats van te wachten tot hij\r\n        \/\/ het i-knopje vindt. Via een klik op dat knopje, zodat aria-expanded en\r\n        \/\/ het paneel niet uit elkaar kunnen lopen. Bij Nee laten we het staan:\r\n        \/\/ wie de uitleg zelf opende, moet hem niet onder zijn handen kwijtraken.\r\n        if (value === 'Ja') {\r\n          var extraBlok = this.closest('.cr-bf-extra');\r\n          var infoKnop  = extraBlok ? extraBlok.querySelector('.cr-bf-info-btn') : null;\r\n          if (infoKnop && infoKnop.getAttribute('aria-expanded') !== 'true') infoKnop.click();\r\n        }\r\n        if (field === 'duur') {\r\n          duration = parseFloat(value);\r\n          updatePrice();\r\n          if (planPrefetch()) {\r\n            availabilityLoaded = false; availableTimes = []; zeroBufferTimes = [];\r\n          }\r\n          \/\/ Kalender bijwerken: zaterdag blokkeren\/deblokkeren + ongeldige selectie wissen\r\n          refreshCalendarForDuration();\r\n        }\r\n        if (field === 'boeking_type') zetBoekingType(value);\r\n        \/\/ Een bedrijfsuitje is vrijwel altijd een zakelijke boeking, dus die zetten we\r\n        \/\/ alvast goed. Het blijft een startwaarde: kiest de boeker op stap 5 zelf iets\r\n        \/\/ anders, dan blijft dat staan tot hij het type uitje opnieuw aanklikt.\r\n        if (field === 'type_uitje') zetBoekingType(value === 'Bedrijfsuitje' ? 'Zakelijk' : 'Particulier');\r\n      });\r\n    });\r\n\r\n    \/\/ Zet het type boeking in \u00e9\u00e9n keer goed: het verborgen veld, welke knop actief is,\r\n    \/\/ en of de zakelijke velden zichtbaar en verplicht zijn. Die drie moeten altijd\r\n    \/\/ hetzelfde zeggen, ook als de waarde niet door een klik van de boeker komt.\r\n    function zetBoekingType(waarde) {\r\n      var hidden = form.querySelector('#bf-boeking-type');\r\n      if (hidden) hidden.value = waarde;\r\n      form.querySelectorAll('[data-field=\"boeking_type\"]').forEach(function (b) {\r\n        b.classList.toggle('cr-bf-opt-btn--active', b.dataset.value === waarde);\r\n      });\r\n      var zakelijk = form.querySelector('#bf-zakelijk-fields');\r\n      if (zakelijk) {\r\n        zakelijk.style.display = waarde === 'Zakelijk' ? 'block' : 'none';\r\n        var bedrijfsnaam = form.querySelector('#bf-bedrijfsnaam');\r\n        if (bedrijfsnaam) bedrijfsnaam.required = waarde === 'Zakelijk';\r\n      }\r\n    }\r\n\r\n    function fetchAvailability(dateStr, callback, poging) {\r\n      poging = poging || 1;\r\n      var loadingEl = form.querySelector('#bf-tijdsloten-loading');\r\n      var gridEl    = form.querySelector('#bf-tijdsloten-grid');\r\n      var hiddenEl  = form.querySelector('#bf-tijdstip');\r\n\r\n      \/\/ Vanaf hier is elk antwoord dat nog onderweg was achterhaald.\r\n      var aanvraag = ++laatsteAanvraag;\r\n\r\n      \/\/ Een eerder gekozen tijdstip hoort bij de vorige datum en mag niet blijven\r\n      \/\/ staan. De knop is straks nergens meer opgelicht, maar het verborgen veld\r\n      \/\/ zou wel gevuld blijven en zo ongemerkt meegaan in de boeking.\r\n      if (hiddenEl) hiddenEl.value = '';\r\n\r\n      if (prefetchCache[dateStr]) {\r\n        availableTimes     = prefetchCache[dateStr].available      || [];\r\n        zeroBufferTimes    = prefetchCache[dateStr].withZeroBuffer || [];\r\n        availabilityLoaded = true;\r\n        if (loadingEl) loadingEl.style.display = 'none';\r\n        renderTimeslots(availableTimes, zeroBufferTimes);\r\n        callback(true);\r\n        return;\r\n      }\r\n\r\n      \/\/ Bewust NIET wachten op een lopende vooruit-ophaalactie van zes maanden.\r\n      \/\/ Deze ene datum los opvragen gaat sneller dan die hele reeks afwachten, en\r\n      \/\/ wachten stapelt op zodra er meerdere ophaalacties achter elkaar starten.\r\n      \/\/ De ophaalactie loopt gewoon door en vult de cache voor de volgende klik.\r\n      if (loadingEl) loadingEl.style.display = 'block';\r\n      if (gridEl)    gridEl.innerHTML = '';\r\n      zetFlexZichtbaar(false);\r\n      var url = GAS_URL +\r\n        '?app=booking' +\r\n        '&persons='  + encodeURIComponent(persons) +\r\n        '&duration=' + encodeURIComponent(duration) +\r\n        '&date='     + encodeURIComponent(dateStr);\r\n      fetch(url)\r\n        .then(function (r) { return r.json(); })\r\n        .then(function (data) {\r\n          \/\/ Ingehaald door een nieuwere klik of een gewijzigd aantal: laat het\r\n          \/\/ scherm met rust, het antwoord dat er wel bij hoort is nog onderweg.\r\n          if (aanvraag !== laatsteAanvraag) return;\r\n          \/\/ Nooit de tekst van de backend tonen: die is technisch, altijd Nederlands,\r\n          \/\/ en de boeker kan er niets mee. Zo verscheen \"Ongeldig antwoord van de\r\n          \/\/ backend.\" onder de tijdsloten. Wat er misging staat in het serverlog.\r\n          if (data.error) { misgegaan(); return; }\r\n          if (data._source === 'proxy-voorraad') meldAanBeheer('voorraad', dateStr);\r\n          if (loadingEl) loadingEl.style.display = 'none';\r\n          availableTimes     = data.available      || [];\r\n          zeroBufferTimes    = data.withZeroBuffer  || [];\r\n          availabilityLoaded = true;\r\n          prefetchCache[dateStr] = { available: availableTimes, withZeroBuffer: zeroBufferTimes };\r\n          renderTimeslots(availableTimes, zeroBufferTimes);\r\n          callback(true);\r\n        })\r\n        .catch(function () { misgegaan(); });\r\n\r\n      \/\/ E\u00e9n keer stilletjes opnieuw. Google hikt met enige regelmaat op de terugweg\r\n      \/\/ en een tweede poging lukt meestal wel. De boeker ziet ondertussen gewoon het\r\n      \/\/ laadrondje doorlopen en merkt er niets van. Pas als het dan n\u00f3g misgaat komt\r\n      \/\/ er iets op het scherm, en dan met een knop erbij in plaats van een instructie.\r\n      function misgegaan() {\r\n        if (aanvraag !== laatsteAanvraag) return;   \/\/ ingehaald, laat het scherm met rust\r\n        if (poging === 1) { fetchAvailability(dateStr, callback, 2); return; }\r\n        if (loadingEl) loadingEl.style.display = 'none';\r\n        showAvailabilityError(t('err_ophalen'), function () {\r\n          fetchAvailability(dateStr, callback, 1);\r\n        });\r\n        meldAanBeheer('tijdsloten', dateStr);\r\n        callback(false);\r\n      }\r\n    }\r\n\r\n    \/\/ Laat de Boekingsagenda weten wat de bezoeker overkwam. Daar wordt het\r\n    \/\/ geteld, en elke ochtend komt er een mail met hoe vaak (Websitemeldingen.js).\r\n    \/\/ Zonder dit bleef de melding over de tijdsloten volledig onzichtbaar.\r\n    \/\/ Het antwoord interesseert ons niet, en mislukt het seintje zelf, dan is dat\r\n    \/\/ jammer maar geen reden om de bezoeker iets te laten merken.\r\n    function meldAanBeheer(soort, dateStr) {\r\n      try {\r\n        var id = Date.now().toString(36) + Math.random().toString(36).slice(2, 8);\r\n        fetch(GAS_URL +\r\n          '?app=booking&mode=melding' +\r\n          '&soort='    + encodeURIComponent(soort) +\r\n          '&id='       + id +\r\n          '&persons='  + encodeURIComponent(persons) +\r\n          '&duration=' + encodeURIComponent(duration) +\r\n          '&date='     + encodeURIComponent(dateStr) +\r\n          '&taal='     + encodeURIComponent(LANG), { keepalive: true })\r\n          .catch(function () {});\r\n      } catch (e) {}\r\n    }\r\n\r\n    \/\/ Het flexibiliteitsblok hoort bij de tijdsloten en verschijnt dus pas als die er\r\n    \/\/ staan. Een gekozen waarde blijft bewaard terwijl het blok verborgen is: zodra er\r\n    \/\/ weer sloten zijn komt het blok terug m\u00e9t die keuze, en zonder sloten kan er toch\r\n    \/\/ niet verzonden worden, dus de boeker verstuurt nooit iets dat hij niet ziet.\r\n    function zetFlexZichtbaar(zichtbaar) {\r\n      var blok = form.querySelector('#bf-flex-blok');\r\n      if (blok) blok.hidden = !zichtbaar;\r\n    }\r\n\r\n    function renderTimeslots(times, zeroBuffer) {\r\n      var gridEl   = form.querySelector('#bf-tijdsloten-grid');\r\n      var hiddenEl = form.querySelector('#bf-tijdstip');\r\n      if (!gridEl) return;\r\n      gridEl.innerHTML = '';\r\n      if (times.length === 0) {\r\n        gridEl.innerHTML = '<p class=\"cr-bf-no-slots\">' + t('geen_sloten') + '<\/p>';\r\n        \/\/ Geen sloten betekent dat deze datum sowieso niet kan. Flexibiliteit aanbieden\r\n        \/\/ helpt dan niet: er valt niets te kiezen en verzenden lukt toch niet.\r\n        zetFlexZichtbaar(false);\r\n        return;\r\n      }\r\n      zetFlexZichtbaar(true);\r\n      times.forEach(function (time) {\r\n        var btn = document.createElement('button');\r\n        btn.type = 'button';\r\n        btn.className = 'cr-bf-timeslot-btn';\r\n        \/\/ zero-buffer sloten worden intern bijgehouden maar NIET gemarkeerd voor de boeker\r\n        btn.textContent = time;\r\n        btn.addEventListener('click', function () {\r\n          gridEl.querySelectorAll('.cr-bf-timeslot-btn').forEach(function (b) { b.classList.remove('cr-bf-timeslot-btn--selected'); });\r\n          btn.classList.add('cr-bf-timeslot-btn--selected');\r\n          if (hiddenEl) hiddenEl.value = time;\r\n        });\r\n        gridEl.appendChild(btn);\r\n      });\r\n    }\r\n\r\n    function showAvailabilityError(msg, opnieuw) {\r\n      var gridEl = form.querySelector('#bf-tijdsloten-grid');\r\n      if (!gridEl) return;\r\n      gridEl.innerHTML = '<p class=\"cr-bf-error-msg\">' + msg + '<\/p>';\r\n      if (!opnieuw) return;\r\n\r\n      \/\/ Een knop in plaats van \"probeer opnieuw\" in tekst: de boeker hoeft dan niet\r\n      \/\/ zelf te bedenken wat hij moet doen. Hergebruikt de opmaak van een tijdslot.\r\n      var knop = document.createElement('button');\r\n      knop.type = 'button';\r\n      knop.className = 'cr-bf-timeslot-btn';\r\n      knop.textContent = t('opnieuw_proberen');\r\n      knop.addEventListener('click', function () {\r\n        gridEl.innerHTML = '';\r\n        var laadEl = form.querySelector('#bf-tijdsloten-loading');\r\n        if (laadEl) laadEl.style.display = 'block';\r\n        opnieuw();\r\n      });\r\n      gridEl.appendChild(knop);\r\n    }\r\n\r\n    function goToStep(step, opts) {\r\n      var panels     = form.querySelectorAll('.cr-bf-panel');\r\n      var indicators = form.querySelectorAll('.cr-bf-step-indicator');\r\n      var lines      = form.querySelectorAll('.cr-bf-step-line');\r\n      panels.forEach(function (p) { p.classList.remove('cr-bf-panel--active'); });\r\n      var target = form.querySelector('.cr-bf-panel[data-step=\"' + step + '\"]');\r\n      if (target) target.classList.add('cr-bf-panel--active');\r\n      indicators.forEach(function (ind) {\r\n        var s = parseInt(ind.dataset.step, 10);\r\n        ind.classList.remove('cr-bf-step-indicator--active', 'cr-bf-step-indicator--done');\r\n        if (s === step) ind.classList.add('cr-bf-step-indicator--active');\r\n        else if (s < step) ind.classList.add('cr-bf-step-indicator--done');\r\n      });\r\n      lines.forEach(function (line, i) { line.classList.toggle('cr-bf-step-line--done', i < step - 1); });\r\n      currentStep = step;\r\n      if (step === 5) buildSummary();\r\n\r\n      \/\/ Terug op stap 2 met een al gekozen datum, maar personen\/duur gewijzigd?\r\n      \/\/ Beschikbaarheid opnieuw ophalen (groepsgrootte + duur bepalen welke sloten vrij zijn).\r\n      if (step === 2 && !availabilityLoaded) {\r\n        var gekozenDatum = (form.querySelector('#bf-datum') || {}).value;\r\n        if (gekozenDatum) {\r\n          var tijdstipEl = form.querySelector('#bf-tijdstip');\r\n          if (tijdstipEl) tijdstipEl.value = ''; \/\/ oude tijdkeuze kan nu ongeldig zijn \u2192 opnieuw kiezen\r\n          fetchAvailability(gekozenDatum, function () {});\r\n        }\r\n      }\r\n\r\n      \/\/ Bij het laden van de pagina NIET scrollen (gebruiker moet zelf naar beneden\r\n      \/\/ scrollen en de intro erboven lezen); bij navigeren tussen stappen w\u00e9l.\r\n      if (!opts || !opts.noScroll) form.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n    }\r\n\r\n    function validateStep(step) {\r\n      if (step === 2) {\r\n        var datum    = form.querySelector('#bf-datum');\r\n        var hiddenEl = form.querySelector('#bf-tijdstip');\r\n        if (!datum || !datum.value) { showError(datum, t('err_kies_datum')); return false; }\r\n        if (!hiddenEl || !hiddenEl.value) {\r\n          var gridEl = form.querySelector('#bf-tijdsloten-grid');\r\n          if (gridEl) {\r\n            var msg = document.createElement('p');\r\n            msg.style.cssText = 'color:#DF1550;font-size:.82rem;margin:.4em 0 0;';\r\n            msg.textContent = t('err_kies_tijd');\r\n            var existing = gridEl.parentNode.querySelector('.cr-bf-timeslot-error');\r\n            if (existing) existing.remove();\r\n            msg.className = 'cr-bf-timeslot-error';\r\n            gridEl.parentNode.appendChild(msg);\r\n            setTimeout(function () { if (msg.parentNode) msg.parentNode.removeChild(msg); }, 3000);\r\n          }\r\n          return false;\r\n        }\r\n      }\r\n      if (step === 3) {\r\n        var stap3ok = true;\r\n        var taalV = (form.querySelector('#bf-taal') || {}).value;\r\n        var typeV = (form.querySelector('#bf-type-uitje') || {}).value;\r\n        \/\/ De melding hangt aan de kop-rij: showError zet 'm in el.parentNode, en dat\r\n        \/\/ is dan het hele .cr-bf-extra-blok, dus netjes onder de uitleg. Gaven we\r\n        \/\/ hier de knopgroep mee, dan belandde de tekst als flex-item n\u00e1\u00e1st de knoppen.\r\n        if (!taalV) { showError(form.querySelector('[data-field=\"taal\"]').closest('.cr-bf-extra-head'), t('err_kies_taal')); stap3ok = false; }\r\n        if (!typeV) { showError(form.querySelector('[data-field=\"type_uitje\"]').closest('.cr-bf-extra-head'), t('err_kies_type')); stap3ok = false; }\r\n        if (!stap3ok) return false;\r\n      }\r\n      \/\/ Stap 4 (extra's) heeft niets te valideren: alles staat standaard op Nee.\r\n      \/\/ De persoonsgegevens staan nu op stap 5, en daar zit geen \"Volgende\"-knop\r\n      \/\/ achter maar de verzendknop. Die controle staat daarom in de verzendhandler\r\n      \/\/ hieronder, niet hier \u2014 validateStep wordt alleen aangeroepen bij Volgende.\r\n      return true;\r\n    }\r\n\r\n    function showError(el, msg) {\r\n      if (!el) return;\r\n      el.style.borderColor = '#DF1550';\r\n      var err = el.parentNode.querySelector('.cr-bf-error');\r\n      if (!err) {\r\n        err = document.createElement('p');\r\n        err.className = 'cr-bf-error';\r\n        err.style.cssText = 'color:#DF1550;font-size:.82rem;margin:.4em 0 0;';\r\n        el.parentNode.appendChild(err);\r\n      }\r\n      err.textContent = msg;\r\n      setTimeout(function () { el.style.borderColor = ''; if (err.parentNode) err.parentNode.removeChild(err); }, 3000);\r\n    }\r\n\r\n    \/\/ Vinkjes \"nog niet zeker\": tonen het toelichtingsvak en werken de samenvatting bij.\r\n    [['#bf-personen-onzeker', '#bf-personen-toelichting-wrap', '#bf-personen-toelichting'],\r\n     ['#bf-datum-onzeker',    '#bf-datum-toelichting-wrap',    '#bf-datum-toelichting']\r\n    ].forEach(function (paar) {\r\n      var vinkje = form.querySelector(paar[0]);\r\n      var vak    = form.querySelector(paar[1]);\r\n      var tekst  = form.querySelector(paar[2]);\r\n      if (!vinkje || !vak) return;\r\n      vinkje.addEventListener('change', function () {\r\n        vak.hidden = !this.checked;\r\n        \/\/ Uitvinken wist de tekst, anders sturen we een toelichting mee die de\r\n        \/\/ boeker niet meer op het scherm ziet staan.\r\n        if (!this.checked && tekst) tekst.value = '';\r\n        buildSummary();\r\n      });\r\n      if (tekst) tekst.addEventListener('input', buildSummary);\r\n    });\r\n\r\n    form.querySelectorAll('.cr-bf-next-btn').forEach(function (btn) {\r\n      btn.addEventListener('click', function () {\r\n        var next = parseInt(this.dataset.next, 10);\r\n        if (!validateStep(currentStep)) return;\r\n        goToStep(next);\r\n      });\r\n    });\r\n    form.querySelectorAll('.cr-bf-prev-btn').forEach(function (btn) {\r\n      btn.addEventListener('click', function () { goToStep(parseInt(this.dataset.prev, 10)); });\r\n    });\r\n\r\n    function buildSummary() {\r\n      var summary = form.querySelector('#bf-summary');\r\n      if (!summary) return;\r\n      var duurVal   = (form.querySelector('#bf-duur') || {}).value      || '1.5';\r\n      var persVal   = (form.querySelector('#bf-personen') || {}).value  || '15';\r\n      var datumVal  = (form.querySelector('#bf-datum') || {}).value     || '';\r\n      var tijdVal   = (form.querySelector('#bf-tijdstip') || {}).value  || '';\r\n      var taalVal   = (form.querySelector('#bf-taal') || {}).value      || '';\r\n      var typeVal   = (form.querySelector('#bf-type-uitje') || {}).value || '';\r\n      var afkoopVal = (form.querySelector('#bf-afkoop') || {}).value    || '';\r\n      var pvVal     = (form.querySelector('#bf-pv') || {}).value        || '';\r\n      var bekerVal  = (form.querySelector('#bf-beker') || {}).value     || '';\r\n      var prijs       = berekenPrijsBlok(form);\r\n      var nPers       = prijs.nPers;\r\n      var pp          = prijs.pp;\r\n      var pvBedrag    = prijs.pvBedrag;\r\n      var bekerAantal = prijs.bekerAantal;\r\n      var bekerBedrag = prijs.bekerBedrag;\r\n      var total       = prijs.total;\r\n      \/\/ Totaal uitgeschreven als som: <n> \u00d7 <prijs incl. afkoop> [+ \u20ac35] [+ <aantal> \u00d7 \u20ac20] = <totaal>\r\n      var calc = prijs.rekenPers + ' \u00d7 ' + formatEuro(pp);\r\n      if (pvBedrag > 0)    calc += ' + ' + formatEuro(PV_PRIJS);\r\n      if (bekerBedrag > 0) calc += ' + ' + bekerAantal + ' \u00d7 ' + formatEuro(BEKER_PRIJS);\r\n      calc += ' = ' + formatEuro(total);\r\n      var pvTekst    = (pvVal === 'Ja') ? (t('ja') + ' (+' + formatEuro(PV_PRIJS) + ')') : t('nee');\r\n\r\n      \/\/ De boeker mag zelf tekst intypen en die gaat via innerHTML de samenvatting in,\r\n      \/\/ dus eerst de tekens onschadelijk maken die als HTML gelezen zouden worden.\r\n      var escHtml = function (s) {\r\n        return String(s).replace(\/[&<>\"]\/g, function (c) {\r\n          return { '&':'&amp;', '<':'&lt;', '>':'&gt;', '\"':'&quot;' }[c];\r\n        });\r\n      };\r\n      var sumRij = function (label, waarde, vrijeTekst) {\r\n        \/\/ Korte waarden staan rechts naast het label; een hele zin krijgt de volle\r\n        \/\/ breedte eronder. De boeker bepaalt de lengte, dus dat kan niet vastliggen.\r\n        var klas = vrijeTekst && String(waarde).length > 45 ? ' cr-sum-row--tekst' : '';\r\n        return '<div class=\"cr-sum-row' + klas + '\"><span>' + label + '<\/span><strong>' + escHtml(waarde) + '<\/strong><\/div>';\r\n      };\r\n      var persOnzeker  = !!(form.querySelector('#bf-personen-onzeker') || {}).checked;\r\n      var datumOnzeker = !!(form.querySelector('#bf-datum-onzeker') || {}).checked;\r\n      var persToel     = (form.querySelector('#bf-personen-toelichting') || {}).value || '';\r\n      var datumToel    = (form.querySelector('#bf-datum-toelichting') || {}).value    || '';\r\n      \/\/ Aangevinkt zonder toelichting is ook informatie, dan tonen we alleen \"Ja\".\r\n      var persOnzekerRij  = persOnzeker  ? sumRij(t('sum_pers_onzeker'),  persToel  || t('ja'), true) : '';\r\n      var datumOnzekerRij = datumOnzeker ? sumRij(t('sum_datum_onzeker'), datumToel || t('ja'), true) : '';\r\n      var bekerTekst = (bekerVal === 'Ja') ? (t('ja') + ' (' + bekerAantal + ' \u00d7 ' + formatEuro(BEKER_PRIJS) + ' = ' + formatEuro(bekerBedrag) + ')') : t('nee');\r\n      summary.innerHTML =\r\n        '<div class=\"cr-sum-title\">' +\r\n          '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 11l3 3L22 4\"\/><path d=\"M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11\"\/><\/svg>' +\r\n          t('sum_title') +\r\n        '<\/div>' +\r\n        '<div class=\"cr-sum-row\"><span>' + t('sum_duur') + '<\/span><strong>' + fmtDuur(duurVal) + '<\/strong><\/div>' +\r\n        '<div class=\"cr-sum-row\"><span>' + t('sum_personen') + '<\/span><strong>' + escHtml(persVal + (prijs.rekenPers > prijs.nPers ? ' ' + t('sum_tarief_voor').replace('{n}', prijs.rekenPers) : '')) + '<\/strong><\/div>' +\r\n        persOnzekerRij +\r\n        '<div class=\"cr-sum-row\"><span>' + t('sum_datumtijd') + '<\/span><strong>' + (datumVal || '\u2014') + ' \u00b7 ' + (tijdVal || '\u2014') + '<\/strong><\/div>' +\r\n        datumOnzekerRij +\r\n        '<div class=\"cr-sum-row\"><span>' + t('sum_taal') + '<\/span><strong>' + tv(TAAL_KEY, taalVal) + '<\/strong><\/div>' +\r\n        '<div class=\"cr-sum-row\"><span>' + t('sum_type') + '<\/span><strong>' + tv(TYPE_KEY, typeVal) + '<\/strong><\/div>' +\r\n        '<div class=\"cr-sum-row\"><span>' + t('sum_afkoop') + '<\/span><strong>' + tv(AFKOOP_KEY, afkoopVal) + '<\/strong><\/div>' +\r\n        '<div class=\"cr-sum-row\"><span>' + t('sum_pv') + '<\/span><strong>' + pvTekst + '<\/strong><\/div>' +\r\n        '<div class=\"cr-sum-row\"><span>' + t('sum_beker') + '<\/span><strong>' + bekerTekst + '<\/strong><\/div>' +\r\n        '<div class=\"cr-sum-total\"><span>' + t('sum_totaal') + '<\/span><strong>' + formatEuro(total) + '<\/strong><\/div>' +\r\n        '<div class=\"cr-sum-calc\">' + calc + '<\/div>';\r\n    }\r\n\r\n    var submitBtn = form.querySelector('#bf-submit-btn');\r\n    if (submitBtn) {\r\n      submitBtn.addEventListener('click', function () {\r\n        var required = form.querySelectorAll('[required]');\r\n        var valid = true;\r\n        required.forEach(function (field) {\r\n          if (field.type === 'checkbox') return; \/\/ checkbox apart (waarde is altijd \"on\")\r\n          if (!field.value.trim() && field.offsetParent !== null) { showError(field, t('err_verplicht')); valid = false; }\r\n        });\r\n        \/\/ E-mailadres op een logische vorm controleren (iets@iets.iets), alleen als ingevuld.\r\n        \/\/ Stond eerder in validateStep(4); sinds de gegevens op de laatste stap staan,\r\n        \/\/ is dit de enige plek waar die controle nog langskomt.\r\n        var emailEl = form.querySelector('#bf-email');\r\n        if (emailEl && emailEl.value.trim() && !\/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(emailEl.value.trim())) {\r\n          showError(emailEl, t('err_email')); valid = false;\r\n        }\r\n        \/\/ Algemene voorwaarden moeten aangevinkt zijn\r\n        var akkoord = form.querySelector('#bf-akkoord');\r\n        if (akkoord && !akkoord.checked) {\r\n          valid = false;\r\n          var chkField = akkoord.closest('.cr-bf-field--check') || akkoord.parentNode;\r\n          var chkErr = chkField.querySelector('.cr-bf-akkoord-error');\r\n          if (!chkErr) {\r\n            chkErr = document.createElement('p');\r\n            chkErr.className = 'cr-bf-akkoord-error';\r\n            chkErr.style.cssText = 'color:#DF1550;font-size:.82rem;margin:.5em 0 0;';\r\n            chkField.appendChild(chkErr);\r\n          }\r\n          chkErr.textContent = t('err_akkoord');\r\n          chkField.scrollIntoView({ behavior: 'smooth', block: 'center' });\r\n          setTimeout(function () { if (chkErr.parentNode) chkErr.parentNode.removeChild(chkErr); }, 4000);\r\n        }\r\n        if (!valid) return;\r\n        submitBtn.disabled = true;\r\n        submitBtn.textContent = t('submitting');\r\n\r\n        \/\/ Laad-overlay tonen met wisselende, geruststellende tekst\r\n        var _overlay = document.getElementById('bf-loading');\r\n        var _overlayText = document.getElementById('bf-loading-text');\r\n        var _overlaySub = document.getElementById('bf-loading-sub');\r\n        var _berichten = (LANG === 'en')\r\n          ? ['Checking availability\u2026', 'Placing your request\u2026', 'Almost done\u2026']\r\n          : ['Beschikbaarheid controleren\u2026', 'Aanvraag plaatsen\u2026', 'Bijna klaar\u2026'];\r\n        if (_overlayText) _overlayText.textContent = _berichten[0];\r\n        if (_overlaySub) _overlaySub.textContent = (LANG === 'en') ? 'One moment, this takes a few seconds.' : 'Even geduld, dit duurt een paar seconden.';\r\n        if (_overlay) _overlay.classList.add('is-active');\r\n        var _bi = 0;\r\n        var _berichtTimer = setInterval(function () {\r\n          _bi = (_bi + 1) % _berichten.length;\r\n          if (_overlayText) _overlayText.textContent = _berichten[_bi];\r\n        }, 2500);\r\n        function _stopLoader() { clearInterval(_berichtTimer); if (_overlay) _overlay.classList.remove('is-active'); }\r\n\r\n        var voornaamVal = (form.querySelector('#bf-voornaam') || {}).value || '';\r\n        var payload = {\r\n          hp:           (form.querySelector('#bf-website') || {}).value        || '',   \/\/ honeypot (moet leeg blijven)\r\n          ft:           Date.now() - FORM_LOADED_AT,                                     \/\/ ms sinds formulier laadde\r\n          persons:      (form.querySelector('#bf-personen') || {}).value      || '',\r\n          duration:     (form.querySelector('#bf-duur') || {}).value          || '',\r\n          date:         (form.querySelector('#bf-datum') || {}).value         || '',\r\n          time:         (form.querySelector('#bf-tijdstip') || {}).value      || '',\r\n          taal:         (form.querySelector('#bf-taal') || {}).value          || '',\r\n          type_uitje:   (form.querySelector('#bf-type-uitje') || {}).value    || '',\r\n          afkoop:       (form.querySelector('#bf-afkoop') || {}).value        || '',\r\n          persoonlijke_vragen: (form.querySelector('#bf-pv') || {}).value     || 'Nee',\r\n          beker:        (form.querySelector('#bf-beker') || {}).value         || 'Nee',\r\n          \/\/ Vraag om informatie, geen keuze met een prijs. Reist apart mee zodat\r\n          \/\/ de mail, het ticket en kolom T van de agenda hem los kunnen tonen.\r\n          eten_info:    (form.querySelector('#bf-eten-info') || {}).value     || 'Nee',\r\n          eten_wensen:  (form.querySelector('#bf-eten-wensen') || {}).value   || '',\r\n          boeking_type: (form.querySelector('#bf-boeking-type') || {}).value  || '',\r\n          bedrijfsnaam: (form.querySelector('#bf-bedrijfsnaam') || {}).value  || '',\r\n          factuur:      (form.querySelector('#bf-factuur') || {}).value       || '',\r\n          voornaam:     TEST_PREFIX + voornaamVal,\r\n          achternaam:   (form.querySelector('#bf-achternaam') || {}).value    || '',\r\n          email:        (form.querySelector('#bf-email') || {}).value         || '',\r\n          telefoon:     (form.querySelector('#bf-telefoon') || {}).value      || '',\r\n          gevonden:     (form.querySelector('#bf-gevonden') || {}).value      || '',\r\n          opmerkingen:  (form.querySelector('#bf-opmerkingen') || {}).value   || '',\r\n          \/\/ Onzekerheid over aantal, datum en tijd. Deze reizen apart mee zodat de mail,\r\n          \/\/ het Freshdesk-ticket en de agenda ze los kunnen tonen; de agenda plakt ze\r\n          \/\/ achter het opmerkingenveld.\r\n          personen_onzeker:     (form.querySelector('#bf-personen-onzeker') || {}).checked ? 'Ja' : 'Nee',\r\n          personen_toelichting: (form.querySelector('#bf-personen-toelichting') || {}).value || '',\r\n          datum_onzeker:        (form.querySelector('#bf-datum-onzeker') || {}).checked ? 'Ja' : 'Nee',\r\n          datum_toelichting:    (form.querySelector('#bf-datum-toelichting') || {}).value   || '',\r\n        };\r\n\r\n        \/\/ Nu vastleggen, terwijl de velden nog op het scherm staan zoals de boeker\r\n        \/\/ ze heeft achtergelaten. Wordt pas gebruikt als de aanvraag is geslaagd.\r\n        var conversieTotaal = berekenPrijsBlok(form).total;\r\n\r\n        fetch(GAS_URL, { method: 'POST', headers: { 'Content-Type': 'text\/plain;charset=utf-8' }, body: JSON.stringify(payload) })\r\n          .then(function (r) { return r.json(); })\r\n          .then(function (data) {\r\n            _stopLoader();\r\n            if (data.success) {\r\n              form.querySelectorAll('.cr-bf-panel, .cr-booking-form__progress').forEach(function (el) { el.style.display = 'none'; });\r\n              var success = form.querySelector('#bf-success');\r\n              if (success) success.style.display = 'block';\r\n              \/\/ Naar de bovenkant van de bevestiging scrollen (de pagina stond onderin\r\n              \/\/ omdat de verzendknop onder aan het lange laatste paneel zat).\r\n              form.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n              meldConversie(payload, conversieTotaal);\r\n            } else if (data.available) {\r\n              submitBtn.disabled = false; submitBtn.textContent = t('submit');\r\n              availableTimes = data.available; zeroBufferTimes = data.withZeroBuffer || [];\r\n              renderTimeslots(availableTimes, zeroBufferTimes);\r\n              form.querySelector('#bf-tijdstip').value = '';\r\n              goToStep(2);\r\n              alert(t('err_bezet'));\r\n            } else {\r\n              submitBtn.disabled = false; submitBtn.textContent = t('submit');\r\n              alert(data.error || t('err_algemeen'));\r\n            }\r\n          })\r\n          .catch(function () {\r\n            _stopLoader();\r\n            submitBtn.disabled = false; submitBtn.textContent = t('submit');\r\n            alert(t('err_verbinding'));\r\n          });\r\n      });\r\n    }\r\n\r\n    goToStep(1, { noScroll: true });\r\n    planPrefetch();\r\n  }\r\n\r\n  if (document.readyState === 'loading') {\r\n    document.addEventListener('DOMContentLoaded', initBookingForm);\r\n  } else {\r\n    initBookingForm();\r\n  }\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8ba81dd e-flex e-con-boxed e-con e-child\" data-id=\"8ba81dd\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bce1198 elementor-widget elementor-widget-html\" data-id=\"bce1198\" 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<p><\/p>Wil je eerst graag een offerte ontvangen? Dat kan via <a href=\"https:\/\/clashrooms.nl\/offerte-aanvraag\/\">deze link<\/a><\/p>\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<div class=\"elementor-element elementor-element-d3e158e e-con-full animated-fast e-flex elementor-invisible e-con e-child\" data-id=\"d3e158e\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;animation&quot;:&quot;fadeInUp&quot;,&quot;animation_delay&quot;:300}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6f86ec7 elementor-widget elementor-widget-heading\" data-id=\"6f86ec7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Belangrijk!<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2edc2f2 e-con-full e-flex e-con e-child\" data-id=\"2edc2f2\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1328a2a elementor-widget elementor-widget-text-editor\" data-id=\"1328a2a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li>Je krijgt direct een bevestiging van de <strong>aanvraag<\/strong>\u00a0via de mail.<\/li><li>Daarnaast nemen we binnen 48 uur contact met je op om de\u00a0<strong>boeking<\/strong>\u00a0te bevestigen.<\/li><li>Geen mail ontvangen? Check je spam, mogelijk is onze mail daar terecht gekomen.<\/li><\/ul><p>\u00a0<\/p><p><strong>Overig<\/strong><\/p><ul><li>Zowel voor, na als tijdens de boeking zijn er\u00a0zowel alcoholische als non-alcoholische dranken beschikbaar, alsmede enkele snacks. Deze kunnen ter plekke betaald worden.<\/li><li>Willen er extra personen mee? Geen enkel probleem, ook dit kan ter plekke verrekend worden. Je hoeft dit niet vooraf te melden (tenzij je over de 20, 40 of 60 personen gaat, neem dan even contact op).<\/li><li>Haken er mensen af? Tot 96 uur van tevoren kun je kosteloos annuleren of het aantal personen wijzigen, daarna brengen wij de kosten per persoon in rekening. Boek dus vooral niet voor teveel mensen!<\/li><li>De maximale groepsgrootte van ClashRooms is 60 personen, maar ook voor grotere groepen kunnen wij een passend uitje bieden. Neem vooral even contact met ons op!<\/li><\/ul><p>\u00a0<\/p><p><strong>Let op!<\/strong><\/p><ul><li>Op zaterdagen is ClashRooms alleen voor 1,5 uur te boeken<\/li><li>Wil je aankomende week nog komen Clashen, neem dan direct even contact op.<\/li><\/ul><p>\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\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>Boeken Een reservering aanvragen doe je zo! Klaar om te Clashen? Boek nu jouw ClashRooms avontuur! Via onderstaande stappen bezorg je je vrienden, collega&#8217;s of familie het leukste uitje van het jaar! Bezig met verwerken\u2026 Even geduld, dit duurt een paar seconden. 1Aanbod 2Datum 3Type uitje 4Extra&#8217;s 5Gegevens Wat wil je boeken? Duur 1,5 uur [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-852","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/clashrooms.nl\/en\/wp-json\/wp\/v2\/pages\/852","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/clashrooms.nl\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/clashrooms.nl\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/clashrooms.nl\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/clashrooms.nl\/en\/wp-json\/wp\/v2\/comments?post=852"}],"version-history":[{"count":415,"href":"https:\/\/clashrooms.nl\/en\/wp-json\/wp\/v2\/pages\/852\/revisions"}],"predecessor-version":[{"id":3726,"href":"https:\/\/clashrooms.nl\/en\/wp-json\/wp\/v2\/pages\/852\/revisions\/3726"}],"wp:attachment":[{"href":"https:\/\/clashrooms.nl\/en\/wp-json\/wp\/v2\/media?parent=852"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}