{"id":18652,"date":"2026-03-27T13:11:19","date_gmt":"2026-03-27T13:11:19","guid":{"rendered":"https:\/\/bootjespeciaal.nl\/?page_id=18652"},"modified":"2026-04-08T06:44:46","modified_gmt":"2026-04-08T06:44:46","slug":"anfrageformular","status":"publish","type":"page","link":"https:\/\/bootjespeciaal.nl\/de\/prijs-berekenen\/","title":{"rendered":"Preis kalkulieren"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; module_class=&#8221;header-video&#8221; _builder_version=&#8221;4.27.6&#8243; _dynamic_attributes=&#8221;background_image&#8221; _module_preset=&#8221;default&#8221; use_background_color_gradient=&#8221;on&#8221; background_color_gradient_stops=&#8221;rgba(0,0,0,0.4) 0%|rgba(0,0,0,0.4) 100%&#8221; background_color_gradient_overlays_image=&#8221;on&#8221; background_image=&#8221;@ET-DC@eyJkeW5hbWljIjp0cnVlLCJjb250ZW50IjoicG9zdF9mZWF0dXJlZF9pbWFnZSIsInNldHRpbmdzIjp7fX0=@&#8221; height=&#8221;60vh&#8221; height_tablet=&#8221;auto&#8221; height_phone=&#8221;auto&#8221; height_last_edited=&#8221;on|phone&#8221; custom_padding=&#8221;||||true|false&#8221; bottom_divider_style=&#8221;wave&#8221; bottom_divider_color=&#8221;#f3f6fd&#8221; bottom_divider_repeat=&#8221;1x&#8221; bottom_divider_color_last_edited=&#8221;off|desktop&#8221; bottom_divider_height_tablet=&#8221;75px&#8221; bottom_divider_height_phone=&#8221;50px&#8221; bottom_divider_height_last_edited=&#8221;on|tablet&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row column_structure=&#8221;3_4,1_4&#8243; _builder_version=&#8221;4.27.5&#8243; positioning=&#8221;absolute&#8221; position_origin_a=&#8221;center_center&#8221; position_origin_a_tablet=&#8221;center_center&#8221; position_origin_a_phone=&#8221;center_center&#8221; position_origin_a_last_edited=&#8221;on|desktop&#8221; position_origin_f_tablet=&#8221;&#8221; position_origin_f_phone=&#8221;&#8221; position_origin_f_last_edited=&#8221;on|desktop&#8221; position_origin_r_tablet=&#8221;&#8221; position_origin_r_phone=&#8221;&#8221; position_origin_r_last_edited=&#8221;on|desktop&#8221; custom_padding=&#8221;0px||0px||true|false&#8221; positioning_tablet=&#8221;none&#8221; positioning_phone=&#8221;none&#8221; positioning_last_edited=&#8221;on|phone&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;3_4&#8243; _builder_version=&#8221;4.16&#8243; global_colors_info=&#8221;{}&#8221;][et_pb_text _builder_version=&#8221;4.27.6&#8243; text_font=&#8221;|600|||||||&#8221; text_text_color=&#8221;#FFFFFF&#8221; text_font_size=&#8221;14px&#8221; link_font=&#8221;|600|||||||&#8221; link_text_color=&#8221;#FFFFFF&#8221; link_font_size=&#8221;14px&#8221; custom_margin=&#8221;0px||0px||false|false&#8221; custom_padding=&#8221;0px||0px||false|false&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<span><span><a href=\"https:\/\/bootjespeciaal.nl\/de\/\">Home<\/a><\/span><\/span>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.27.6&#8243; header_text_color=&#8221;#FFA330&#8243; header_font_size=&#8221;50px&#8221; custom_margin=&#8221;10px||10px||true|false&#8221; custom_padding=&#8221;||0px||false|false&#8221; header_font_size_tablet=&#8221;45px&#8221; header_font_size_phone=&#8221;40px&#8221; header_font_size_last_edited=&#8221;on|tablet&#8221; header_text_shadow_style=&#8221;preset5&#8243; global_colors_info=&#8221;{}&#8221;]<\/p>\n<h1>Bereken de kosten voor jouw bootvaart<\/h1>\n<p>[\/et_pb_text][\/et_pb_column][et_pb_column type=&#8221;1_4&#8243; _builder_version=&#8221;4.16&#8243; global_colors_info=&#8221;{}&#8221;][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; custom_padding_last_edited=&#8221;on|phone&#8221; _builder_version=&#8221;4.27.6&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;#f3f6fd&#8221; background_enable_image=&#8221;off&#8221; background_size=&#8221;contain&#8221; custom_padding=&#8221;50px||150px||false|false&#8221; custom_padding_tablet=&#8221;75px||100px||false|false&#8221; custom_padding_phone=&#8221;50px||75px||false|false&#8221; bottom_divider_style=&#8221;wave&#8221; bottom_divider_color=&#8221;#322B80&#8243; bottom_divider_height_tablet=&#8221;75px&#8221; bottom_divider_height_phone=&#8221;50px&#8221; bottom_divider_height_last_edited=&#8221;on|phone&#8221; background_color_phone=&#8221;#f3f6fd&#8221; background_last_edited=&#8221;off|desktop&#8221; background_enable_color_phone=&#8221;on&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row _builder_version=&#8221;4.27.6&#8243; positioning=&#8221;none&#8221; position_origin_a=&#8221;center_center&#8221; custom_padding=&#8221;0px||0px||true|false&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221; custom_css_main_element_last_edited=&#8221;off|desktop&#8221; custom_css_main_element_tablet=&#8221; &#8221; custom_css_main_element_phone=&#8221;display:flex;||flex-direction:column-reverse;&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.16&#8243; global_colors_info=&#8221;{}&#8221;][et_pb_text _builder_version=&#8221;4.27.6&#8243; header_text_color=&#8221;#FFA330&#8243; header_font_size=&#8221;65px&#8221; header_2_font_size=&#8221;45px&#8221; custom_margin=&#8221;0px||0px||false|false&#8221; custom_padding=&#8221;0px||0px||true|false&#8221; header_2_font_size_tablet=&#8221;35px&#8221; header_2_font_size_phone=&#8221;30px&#8221; header_2_font_size_last_edited=&#8221;on|phone&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<h2>Prijs berekenen<\/h2>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.27.6&#8243; positioning=&#8221;none&#8221; position_origin_a=&#8221;center_center&#8221; width_phone=&#8221;100%&#8221; width_last_edited=&#8221;off|desktop&#8221; custom_padding=&#8221;0px||0px||true|false&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221; custom_css_main_element_last_edited=&#8221;off|desktop&#8221; custom_css_main_element_tablet=&#8221; &#8221; custom_css_main_element_phone=&#8221;display:flex;||flex-direction:column-reverse;&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.16&#8243; global_colors_info=&#8221;{}&#8221;][et_pb_text _builder_version=&#8221;4.27.6&#8243; custom_margin=&#8221;0px||0px||false|false&#8221; custom_padding=&#8221;0px||0px||false|false&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n\n    <div class=\"bc-calc\" id=\"bc-app\">\n        <div class=\"bc-calc__layout\">\n\n            <div class=\"bc-calc__form\">\n                <fieldset class=\"bc-fs\">\n                    <legend class=\"bc-fs__legend\">Hoe lang wil je varen?<\/legend>\n                    <div class=\"bc-radios\">\n                                                    <label class=\"bc-radio is-active\">\n                                <input type=\"radio\" name=\"bc_duration\" value=\"0\" checked>\n                                <span class=\"bc-radio__body\">\n                                    <span class=\"bc-radio__label\">Rondvaart van 1,5 uur<\/span>\n                                    <span class=\"bc-radio__meta\">Boot: <strong>\u20ac185,00<\/strong> &nbsp;\u00b7&nbsp; Drinken: <strong>\u20ac29,50 p.p.<\/strong><\/span>\n                                <\/span>\n                                <span class=\"bc-radio__tick\">\u2713<\/span>\n                            <\/label>\n                                                    <label class=\"bc-radio \">\n                                <input type=\"radio\" name=\"bc_duration\" value=\"1\" >\n                                <span class=\"bc-radio__body\">\n                                    <span class=\"bc-radio__label\">Rondvaart van 2 uur<\/span>\n                                    <span class=\"bc-radio__meta\">Boot: <strong>\u20ac265,00<\/strong> &nbsp;\u00b7&nbsp; Drinken: <strong>\u20ac31,50 p.p.<\/strong><\/span>\n                                <\/span>\n                                <span class=\"bc-radio__tick\">\u2713<\/span>\n                            <\/label>\n                                            <\/div>\n                <\/fieldset>\n\n                <fieldset class=\"bc-fs\">\n                    <legend class=\"bc-fs__legend\">Hoeveel personen?<\/legend>\n                    <div class=\"bc-select-wrap\">\n                        <select id=\"bc-persons\" class=\"bc-select\"><option value=\"10\">10 personen<\/option><option value=\"11\">11 personen<\/option><option value=\"12\">12 personen<\/option><option value=\"13\">13 personen<\/option><option value=\"14\">14 personen<\/option><option value=\"15\">15 personen<\/option><option value=\"16\">16 personen<\/option><option value=\"17\">17 personen<\/option><option value=\"18\">18 personen<\/option><option value=\"19\">19 personen<\/option><option value=\"20\" selected>20 personen<\/option><option value=\"21\">21 personen<\/option><option value=\"22\">22 personen<\/option><option value=\"23\">23 personen<\/option><option value=\"24\">24 personen<\/option><option value=\"25\">25 personen<\/option><option value=\"26\">26 personen<\/option><option value=\"27\">27 personen<\/option><option value=\"28\">28 personen<\/option><option value=\"29\">29 personen<\/option><option value=\"30\">30 personen<\/option><option value=\"31\">31 personen<\/option><option value=\"32\">32 personen<\/option><option value=\"33\">33 personen<\/option><option value=\"34\">34 personen<\/option><\/select>\n                        <span class=\"bc-select-arr\">\u25be<\/span>\n                    <\/div>\n                <\/fieldset>\n\n                                <fieldset class=\"bc-fs\">\n                    <legend class=\"bc-fs__legend\">Extra opties <span class=\"bc-fs__sub\">\u2014 optioneel, prijs per persoon<\/span><\/legend>\n                    <div class=\"bc-extras\">\n                                                    <label class=\"bc-extra\">\n                                <input type=\"checkbox\" class=\"bc-extra__cb\" value=\"9\" data-name=\"Bittergarnituur\">\n                                <span class=\"bc-extra__body\">\n                                    <span class=\"bc-extra__top\">\n                                        <span class=\"bc-extra__name\">Bittergarnituur<\/span>\n                                        <span class=\"bc-extra__price\">\u20ac9,00 p.p.<\/span>\n                                    <\/span>\n                                                                            <span class=\"bc-extra__desc\">Geniet van eindeloze hapjes terwijl je de prachtige grachten verkent: onze rondvaart biedt onbeperkte bittergarnituur, een ware traktatie voor de smaakpapillen op het water!<\/span>\n                                                                    <\/span>\n                                <span class=\"bc-extra__tick\">\u2713<\/span>\n                            <\/label>\n                                                    <label class=\"bc-extra\">\n                                <input type=\"checkbox\" class=\"bc-extra__cb\" value=\"35\" data-name=\"Barbecue\">\n                                <span class=\"bc-extra__body\">\n                                    <span class=\"bc-extra__top\">\n                                        <span class=\"bc-extra__name\">Barbecue<\/span>\n                                        <span class=\"bc-extra__price\">\u20ac35,00 p.p.<\/span>\n                                    <\/span>\n                                                                            <span class=\"bc-extra__desc\">Ervaar de ultieme private dining op het water met onze barbecue. Geniet van meer dan genoeg vlees (geen horeca porties), lekkere broodjes met smeersels en een adembenemend uitzicht.<\/span>\n                                                                    <\/span>\n                                <span class=\"bc-extra__tick\">\u2713<\/span>\n                            <\/label>\n                                                    <label class=\"bc-extra\">\n                                <input type=\"checkbox\" class=\"bc-extra__cb\" value=\"16.5\" data-name=\"Boot Cuisine\">\n                                <span class=\"bc-extra__body\">\n                                    <span class=\"bc-extra__top\">\n                                        <span class=\"bc-extra__name\">Boot Cuisine<\/span>\n                                        <span class=\"bc-extra__price\">\u20ac16,50 p.p.<\/span>\n                                    <\/span>\n                                                                            <span class=\"bc-extra__desc\">Wil je genieten van smakelijke kleine snackjes maar wil je meer dan alleen bittergarnituur? Wij bieden een verrukkelijk menu aan met een variatie aan overheerlijke hapjes zoals garnalen, kipspiesjes en meer.<\/span>\n                                                                    <\/span>\n                                <span class=\"bc-extra__tick\">\u2713<\/span>\n                            <\/label>\n                                                    <label class=\"bc-extra\">\n                                <input type=\"checkbox\" class=\"bc-extra__cb\" value=\"14.5\" data-name=\"Bubbels aan boord\">\n                                <span class=\"bc-extra__body\">\n                                    <span class=\"bc-extra__top\">\n                                        <span class=\"bc-extra__name\">Bubbels aan boord<\/span>\n                                        <span class=\"bc-extra__price\">\u20ac14,50 p.p.<\/span>\n                                    <\/span>\n                                                                            <span class=\"bc-extra__desc\">Zin om kurken te knallen aan boord? Voeg bubbels toe aan je rondvaart voor een ultieme feestervaring. Voor de Mimosa liefhebbers is er ook verse jus d&#039;orange aanwezig (op aanvraag).<\/span>\n                                                                    <\/span>\n                                <span class=\"bc-extra__tick\">\u2713<\/span>\n                            <\/label>\n                                                    <label class=\"bc-extra\">\n                                <input type=\"checkbox\" class=\"bc-extra__cb\" value=\"20\" data-name=\"Bootje Speciaal-bier\">\n                                <span class=\"bc-extra__body\">\n                                    <span class=\"bc-extra__top\">\n                                        <span class=\"bc-extra__name\">Bootje Speciaal-bier<\/span>\n                                        <span class=\"bc-extra__price\">\u20ac20,00 p.p.<\/span>\n                                    <\/span>\n                                                                            <span class=\"bc-extra__desc\">Laat je verrassen met het Bootje Speciaal-bier arrangement tijdens de rondvaart. Geniet van 4 speciaal biertjes per persoon en ontdek nieuwe smaken.<\/span>\n                                                                    <\/span>\n                                <span class=\"bc-extra__tick\">\u2713<\/span>\n                            <\/label>\n                                            <\/div>\n                <\/fieldset>\n                            <\/div>\n\n            <!-- Desktop sidebar \u2014 ongewijzigd -->\n            <div class=\"bc-calc__sidebar\">\n                <div class=\"bc-summary\">\n                    <div class=\"bc-summary__head\"><span>Jouw overzicht<\/span><\/div>\n                    <div class=\"bc-summary__stripe\"><\/div>\n                    <div class=\"bc-summary__body\">\n                        <div class=\"bc-badges\">\n                            <span class=\"bc-badge\" id=\"bc-badge-dur\">\u2014<\/span>\n                            <span class=\"bc-badge\" id=\"bc-badge-pers\">\u2014<\/span>\n                        <\/div>\n                        <div class=\"bc-lines\">\n                            <div class=\"bc-line\"><span class=\"bc-line__lbl\">Boot huren (p.p.)<\/span><span class=\"bc-line__val\" id=\"bc-val-boat\">\u2014<\/span><\/div>\n                            <div class=\"bc-line\"><span class=\"bc-line__lbl\">Onbeperkt drinken (p.p.)<\/span><span class=\"bc-line__val\" id=\"bc-val-drink\">\u2014<\/span><\/div>\n                            <div id=\"bc-extra-lines\"><\/div>\n                        <\/div>\n                        <div class=\"bc-totals\">\n                            <div class=\"bc-totals__pp\"><span>Per persoon<\/span><span id=\"bc-tot-pp\">\u2014<\/span><\/div>\n                            <div class=\"bc-totals__all\"><span>Totaal<\/span><span id=\"bc-tot-all\">\u2014<\/span><\/div>\n                        <\/div>\n                        <p class=\"bc-note\">Prijzen zijn inclusief btw.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n        <\/div>\n    <\/div>\n\n    <!--\n        Mobiele elementen als <template> \u2014 worden via JS naar <body> geplaatst.\n        Zo werkt position:fixed altijd t.o.v. het viewport, ongeacht parent-CSS.\n    -->\n\n    <!-- Sticky balk -->\n    <template id=\"bcm-tpl-bar\">\n        <div class=\"bcm-bar\" id=\"bcm-bar\">\n            <div class=\"bcm-bar__left\">\n                <span class=\"bcm-bar__dur\"  id=\"bcm-dur\">\u2014<\/span>\n                <span class=\"bcm-bar__pers\" id=\"bcm-pers\">\u2014<\/span>\n            <\/div>\n            <div class=\"bcm-bar__mid\">\n                <span class=\"bcm-bar__total\" id=\"bcm-total\">\u2014<\/span>\n                <span class=\"bcm-bar__pp\"    id=\"bcm-pp\">\u2014<\/span>\n            <\/div>\n\t\t\t<button class=\"bcm-bar__btn\" id=\"bcm-bekijk\" aria-expanded=\"false\" aria-label=\"Bekijk overzicht\">\n\t\t\t\t<i class=\"fa-solid fa-chevron-up\" id=\"bcm-chevron\"><\/i>\n\t\t\t<\/button>\n        <\/div>\n    <\/template>\n\n    <!-- Backdrop + slide-up sheet -->\n    <template id=\"bcm-tpl-sheet\">\n        <div class=\"bcm-backdrop\" id=\"bcm-backdrop\"><\/div>\n        <div class=\"bcm-sheet\" id=\"bcm-sheet\" aria-hidden=\"true\" role=\"dialog\" aria-label=\"Jouw overzicht\">\n            <div class=\"bcm-sheet__card\">\n                <div class=\"bcm-sheet__head\">\n                    <span class=\"bcm-sheet__title\">Jouw overzicht<\/span>\n                    <button class=\"bcm-sheet__close\" id=\"bcm-close\" aria-label=\"Sluiten\">\u2715<\/button>\n                <\/div>\n                <div class=\"bcm-sheet__stripe\"><\/div>\n                <div class=\"bcm-sheet__body\">\n                    <div class=\"bcm-badges\">\n                        <span class=\"bcm-badge\" id=\"bcm-sh-dur\">\u2014<\/span>\n                        <span class=\"bcm-badge\" id=\"bcm-sh-pers\">\u2014<\/span>\n                    <\/div>\n                    <div class=\"bcm-lines\">\n                        <div class=\"bcm-line\"><span class=\"bcm-line__lbl\">Boot huren (p.p.)<\/span><span class=\"bcm-line__val\" id=\"bcm-sh-boat\">\u2014<\/span><\/div>\n                        <div class=\"bcm-line\"><span class=\"bcm-line__lbl\">Onbeperkt drinken (p.p.)<\/span><span class=\"bcm-line__val\" id=\"bcm-sh-drink\">\u2014<\/span><\/div>\n                        <div id=\"bcm-sh-extras\"><\/div>\n                    <\/div>\n                    <div class=\"bcm-totals\">\n                        <div class=\"bcm-totals__pp\"><span>Per persoon<\/span><span id=\"bcm-sh-pp\">\u2014<\/span><\/div>\n                        <div class=\"bcm-totals__all\"><span>Totaal<\/span><span id=\"bcm-sh-total\">\u2014<\/span><\/div>\n                    <\/div>\n                    <p class=\"bcm-note\">Prijzen zijn inclusief btw.<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/template>\n\n\n    <style>\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 TOKENS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    :root {\n        --bc-primary:    #6A94FE;\n        --bc-dark:       #1e1b4b;\n        --bc-text:       #111827;\n        --bc-border:     #e5e7eb;\n        --bc-speed:      0.22s;\n        --bc-bg:         #f5f7ff;\n        --bc-card:       #ffffff;\n        --bc-primary-lt: rgba(106,148,254,.10);\n        --bc-grad:       linear-gradient(to right, #6A94FE, #FFA330, #6A94FE);\n        --bcm-h:         68px;\n        --bcm-z:         99999;\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 DESKTOP CALCULATOR \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    #bc-app *, #bc-app *::before, #bc-app *::after { box-sizing: border-box; }\n    .bc-calc { font-size:16px; color:var(--bc-text); background:var(--bc-bg); border-radius:16px;}\n    .bc-calc__layout { display:grid; grid-template-columns:1fr 340px; gap:28px; align-items:start; }\n\n    .bc-fs { border:none; margin:0 0 24px; padding:0; }\n    .bc-fs__legend { display:block; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.18em; color:var(--bc-dark); margin-bottom:12px; }\n    .bc-fs__sub { font-weight:400; text-transform:none; letter-spacing:0; color:#9ca3af; font-size:12px; }\n\n    .bc-radios { display:flex; flex-direction:column; gap:10px; }\n    .bc-radio { display:flex; align-items:center; gap:14px; padding:15px 18px; background:var(--bc-card); border:2px solid var(--bc-border); border-radius:10px; cursor:pointer; transition:border-color var(--bc-speed),background var(--bc-speed),box-shadow var(--bc-speed); }\n    .bc-radio input { position:absolute; opacity:0; width:0; height:0; }\n    .bc-radio:hover { border-color:var(--bc-primary); box-shadow:0 0 0 4px rgba(106,148,254,.12); }\n    .bc-radio.is-active { border-color:var(--bc-primary); background:var(--bc-primary-lt); }\n    .bc-radio__body { flex:1; }\n    .bc-radio__label { display:block; font-weight:700; color:var(--bc-dark); margin-bottom:3px; }\n    .bc-radio__meta { font-size:13px; color:#6b7280; }\n    .bc-radio__tick { width:24px; height:24px; border-radius:50%; background:var(--bc-border); display:flex; align-items:center; justify-content:center; font-size:12px; color:transparent; flex-shrink:0; transition:background var(--bc-speed),color var(--bc-speed); }\n    .bc-radio.is-active .bc-radio__tick { background:var(--bc-primary); color:#fff; }\n\n    .bc-select-wrap { position:relative; display:inline-block; width:100%; max-width:260px; }\n    .bc-select { width:100%; appearance:none; background:var(--bc-card); border:2px solid var(--bc-border); border-radius:10px; padding:13px 44px 13px 16px; font-size:15px; font-weight:700; color:var(--bc-dark); cursor:pointer; font-family:inherit; transition:border-color var(--bc-speed); }\n    .bc-select:focus { outline:none; border-color:var(--bc-primary); box-shadow:0 0 0 4px rgba(106,148,254,.12); }\n    .bc-select-arr { position:absolute; right:14px; top:50%; transform:translateY(-50%); pointer-events:none; color:#9ca3af; font-size:11px; }\n\n    .bc-extras { display:flex; flex-direction:column; gap:10px; }\n    .bc-extra { display:flex; align-items:flex-start; gap:14px; padding:15px 18px; background:var(--bc-card); border:2px solid var(--bc-border); border-radius:10px; cursor:pointer; transition:border-color var(--bc-speed),background var(--bc-speed),box-shadow var(--bc-speed); }\n    .bc-extra input { position:absolute; opacity:0; width:0; height:0; }\n    .bc-extra:hover { border-color:var(--bc-primary); box-shadow:0 0 0 4px rgba(106,148,254,.12); }\n    .bc-extra.is-active { border-color:var(--bc-primary); background:var(--bc-primary-lt); }\n    .bc-extra__body { flex:1; }\n    .bc-extra__top { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:4px; }\n    .bc-extra__name { font-weight:700; color:var(--bc-dark); }\n    .bc-extra__price { font-weight:700; color:var(--bc-primary); font-size:14px; white-space:nowrap; }\n    .bc-extra__desc { display:block; font-size:13px; color:#6b7280; line-height:1.5; }\n    .bc-extra__tick { width:24px; height:24px; flex-shrink:0; margin-top:2px; border:2px solid var(--bc-border); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:12px; color:transparent; transition:background var(--bc-speed),border-color var(--bc-speed),color var(--bc-speed); }\n    .bc-extra.is-active .bc-extra__tick { background:var(--bc-primary); border-color:var(--bc-primary); color:#fff; }\n\n    .bc-summary { background:var(--bc-card); border:2px solid var(--bc-border); border-radius:14px; overflow:hidden; box-shadow:0 4px 24px rgba(30,27,75,.10); position:sticky; top:24px; }\n    .bc-summary__head { display:flex; align-items:center; gap:10px; padding:18px 22px; background:var(--bc-dark); color:#fff; font-weight:700; font-size:18px; }\n    .bc-summary__stripe { height:3px; background:var(--bc-grad); }\n    .bc-summary__body { padding:20px 22px; }\n    .bc-badges { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }\n    .bc-badge { display:inline-block; padding:5px 14px; background:var(--bc-primary-lt); color:var(--bc-dark); border-radius:90px; font-size:13px; font-weight:700; border:1px solid rgba(106,148,254,.25); }\n    .bc-lines { border-top:1px solid var(--bc-border); padding-top:14px; margin-bottom:14px; }\n    .bc-line { display:flex; justify-content:space-between; align-items:baseline; padding:5px 0; font-size:14px; }\n    .bc-line__lbl { color:#6b7280; }\n    .bc-line__val { font-weight:700; font-variant-numeric:tabular-nums; color:var(--bc-dark); }\n    .bc-totals { border-top:2px solid var(--bc-border); padding-top:14px; }\n    .bc-totals__pp { display:flex; justify-content:space-between; font-size:14px; padding:4px 0; color:#6b7280; }\n    .bc-totals__pp span:last-child { font-weight:700; color:var(--bc-dark); font-size:15px; }\n    .bc-totals__all { display:flex; justify-content:space-between; align-items:baseline; margin-top:8px; }\n    .bc-totals__all span:first-child { font-weight:700; font-size:16px; color:var(--bc-dark); }\n    .bc-totals__all span:last-child { font-weight:900; font-size:28px; color:var(--bc-primary); font-variant-numeric:tabular-nums; letter-spacing:-.5px; }\n    .bc-note { margin:14px 0 0; font-size:12px; color:#9ca3af; line-height:1.5; border-top:1px solid var(--bc-border); padding-top:12px; }\n\n    @media (max-width: 780px) {\n        .bc-calc__sidebar { display:none !important; }\n        .bc-calc__layout  { grid-template-columns:1fr !important; }\n        .bc-calc          { padding-bottom:calc(var(--bcm-h) + 24px) !important; }\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 MOBIELE ELEMENTEN \u2014 .bcm-* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       Worden aan <body> gehangen via JS.\n       Standaard display:none; JS regelt open\/dicht.\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n\n    \/* Balk: altijd zichtbaar op mobiel *\/\n    .bcm-bar {\n\t\tdisplay: none;\n\t\tposition: fixed;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\tright: 0;\n\t\theight: var(--bcm-h);\n\t\tz-index: var(--bcm-z);\n\t\talign-items: center;\n\t\tgap: 10px;\n\t\tpadding: 0 14px;\n\t\tbackground: #fff;\n\t\tborder-image: var(--bc-grad) 1;\n\t\tbox-shadow: 0 -4px 24px rgba(0, 0, 0, .10);\n\t\tbox-sizing: border-box;\n    }\n    .bcm-bar__left { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }\n    .bcm-bar__dur  { font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height: normal;}\n    .bcm-bar__pers { font-size:12px; line-height: normal; }\n    .bcm-bar__mid  { display:flex; flex-direction:column; align-items:flex-end; flex-shrink:0; gap:1px; }\n    .bcm-bar__total{ font-size:19px; font-weight:900; color:var(--bc-primary); font-variant-numeric:tabular-nums; letter-spacing:-.4px; line-height:normal;}\n    .bcm-bar__pp   { font-size:12px; font-variant-numeric:tabular-nums;}\n\t.bcm-bar__btn {\n\t\tdisplay: flex; align-items: center; justify-content: center;\n\t\tflex-shrink: 0; margin-left: 8px;\n\t\tbackground: var(--bc-primary); color: #fff;\n\t\tborder: none; border-radius: 50%;\n\t\twidth: 42px; height: 42px;\n\t\tfont-size: 16px;\n\t\tcursor: pointer;\n\t\t-webkit-tap-highlight-color: transparent;\n\t\ttransition: background var(--bc-speed);\n\t}\n\t.bcm-bar__btn:active { background: #5a84ee; }\n\n\t\/* Chevron draait bij open state (vervangt .bcm-arrow) *\/\n\t.bcm-bar__btn i {\n\t\ttransition: transform .32s cubic-bezier(.32,.72,0,1);\n\t\tline-height: 1;\n\t}\n\t.bcm-bar__btn[aria-expanded=\"true\"] i {\n\t\ttransform: rotate(180deg);\n\t}\n\n    \/* Backdrop: standaard verborgen *\/\n    .bcm-backdrop {\n        display: none;\n        position: fixed;\n        inset: 0;\n        z-index: calc(var(--bcm-z) + 1);\n        background: rgba(10,8,36,.62);\n        backdrop-filter: blur(3px);\n        -webkit-backdrop-filter: blur(3px);\n        opacity: 0;\n        transition: opacity .28s ease;\n        box-sizing: border-box;\n    }\n    \/* Klasse .is-visible maakt hem zichtbaar *\/\n    .bcm-backdrop.is-visible { display:block; }\n    .bcm-backdrop.is-open    { opacity:1; }\n\n    \/* Sheet: standaard display:none\n       JS zet display:block, daarna via rAF de is-open klasse.\n       Gesloten: display:none (na transitionend).\n       Open: translateY(0).\n    *\/\n    .bcm-sheet {\n        display: none; \/* standaard volledig weg *\/\n        position: fixed;\n        bottom: 0;\n        left: 0; right: 0;\n        z-index: calc(var(--bcm-z) + 2);\n        max-height: calc(100dvh - var(--bcm-h) - 8px);\n        overflow-y: auto;\n        overscroll-behavior: contain;\n        -webkit-overflow-scrolling: touch;\n        box-sizing: border-box;\n        \/* Start onderuit geschoven zodra display:block wordt gezet *\/\n        transform: translateY(100%);\n        transition: transform .36s cubic-bezier(.32,.72,0,1);\n    }\n    \/* Zodra .is-open wordt toegevoegd, schuift het sheet omhoog *\/\n    .bcm-sheet.is-open { transform: translateY(0); }\n\n    .bcm-sheet__card { background:var(--bc-card); overflow:hidden; box-shadow:0 -8px 40px rgba(10,8,36,.20); }\n    .bcm-sheet__head { display:flex; justify-content:space-between; align-items:center; padding:14px 20px; background:var(--bc-dark); color:#fff; }\n    .bcm-sheet__title { font-weight:700; font-size:17px; font-family:inherit; }\n    .bcm-sheet__close { width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.12); border:none; color:#fff; font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-family:inherit; -webkit-tap-highlight-color:transparent; transition:background var(--bc-speed); }\n    .bcm-sheet__close:active { background:rgba(255,255,255,.28); }\n    .bcm-sheet__stripe { height:3px; background:var(--bc-grad); }\n    .bcm-sheet__body { padding:18px 20px 40px; font-family:inherit; }\n\n    .bcm-badges { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }\n    .bcm-badge { display:inline-block; padding:5px 13px; background:var(--bc-primary-lt); color:var(--bc-dark); border-radius:90px; font-size:12px; font-weight:700; border:1px solid rgba(106,148,254,.25); font-family:inherit; }\n    .bcm-lines { border-top:1px solid var(--bc-border); padding-top:12px; margin-bottom:12px; }\n    .bcm-line { display:flex; justify-content:space-between; align-items:baseline; padding:5px 0; font-size:14px; font-family:inherit; }\n    .bcm-line__lbl { color:#6b7280; }\n    .bcm-line__val { font-weight:700; font-variant-numeric:tabular-nums; color:var(--bc-dark); }\n    .bcm-totals { border-top:2px solid var(--bc-border); padding-top:12px; }\n    .bcm-totals__pp { display:flex; justify-content:space-between; font-size:14px; padding:4px 0; color:#6b7280; font-family:inherit; }\n    .bcm-totals__pp span:last-child { font-weight:700; color:var(--bc-dark); font-size:15px; }\n    .bcm-totals__all { display:flex; justify-content:space-between; align-items:baseline; margin-top:8px; font-family:inherit; }\n    .bcm-totals__all span:first-child { font-weight:700; font-size:15px; color:var(--bc-dark); }\n    .bcm-totals__all span:last-child { font-weight:900; font-size:28px; color:var(--bc-primary); font-variant-numeric:tabular-nums; letter-spacing:-.5px; }\n    .bcm-note { margin:14px 0 0; font-size:12px; color:#9ca3af; line-height:1.5; border-top:1px solid var(--bc-border); padding-top:12px; font-family:inherit; }\n    <\/style>\n\n    <script>\n    (function(){\n        const DURS = [{\"label\":\"Rondvaart van 1,5 uur\",\"boat_price\":185,\"drink_pp\":29.5},{\"label\":\"Rondvaart van 2 uur\",\"boat_price\":265,\"drink_pp\":31.5}];\n\n        \/\/ \u2500\u2500 Mobiele elementen uit <template> naar <body> portalen \u2500\u2500\n        ['bcm-tpl-bar', 'bcm-tpl-sheet'].forEach(function(id){\n            var tpl = document.getElementById(id);\n            if (tpl) document.body.appendChild(tpl.content.cloneNode(true));\n        });\n\n        \/\/ \u2500\u2500 Op mobiel: balk tonen (display:flex) \u2500\u2500\n        function applyMobileBar(){\n            var bar = document.getElementById('bcm-bar');\n            if (!bar) return;\n            if (window.innerWidth <= 780) {\n                bar.style.display = 'flex';\n            } else {\n                bar.style.display = 'none';\n            }\n        }\n        applyMobileBar();\n        window.addEventListener('resize', applyMobileBar);\n\n        function fmt(v){\n            return '\\u20AC\\u00A0' + v.toLocaleString('nl-NL', {minimumFractionDigits:2, maximumFractionDigits:2});\n        }\n\n        function g(id){ return document.getElementById(id); }\n\n        function recalc(){\n            var durIdx  = parseInt((document.querySelector('#bc-app input[name=\"bc_duration\"]:checked') || {value:0}).value);\n            var persons = parseInt(g('bc-persons').value);\n            var dur     = DURS[durIdx] || DURS[0];\n            var checked = Array.from(document.querySelectorAll('#bc-app .bc-extra__cb:checked'));\n            var extraPP = checked.reduce(function(s, el){ return s + parseFloat(el.value); }, 0);\n\n            var boatPP  = dur.boat_price \/ persons;\n            var drinkPP = dur.drink_pp;\n            var totalPP = boatPP + drinkPP + extraPP;\n            var totalAl = totalPP * persons;\n\n            \/\/ Desktop sidebar\n            g('bc-badge-dur').textContent  = dur.label;\n            g('bc-badge-pers').textContent = persons + ' personen';\n            g('bc-val-boat').textContent   = fmt(boatPP);\n            g('bc-val-drink').textContent  = fmt(drinkPP);\n            var dEl = g('bc-extra-lines');\n            dEl.innerHTML = '';\n            checked.forEach(function(cb){\n                var r = document.createElement('div'); r.className = 'bc-line';\n                r.innerHTML = '<span class=\"bc-line__lbl\">'+cb.dataset.name+'<\/span><span class=\"bc-line__val\">'+fmt(parseFloat(cb.value))+'<\/span>';\n                dEl.appendChild(r);\n            });\n            g('bc-tot-pp').textContent  = fmt(totalPP);\n            g('bc-tot-all').textContent = fmt(totalAl);\n\n            \/\/ Mobiele balk\n            if (g('bcm-dur')) {\n                g('bcm-dur').textContent   = dur.label;\n                g('bcm-pers').textContent  = persons + ' personen';\n                g('bcm-total').textContent = fmt(totalAl);\n                g('bcm-pp').textContent    = fmt(totalPP) + '\\u00A0p.p.';\n            }\n\n            \/\/ Mobiel sheet\n            if (g('bcm-sh-dur')) {\n                g('bcm-sh-dur').textContent   = dur.label;\n                g('bcm-sh-pers').textContent  = persons + ' personen';\n                g('bcm-sh-boat').textContent  = fmt(boatPP);\n                g('bcm-sh-drink').textContent = fmt(drinkPP);\n                var mEl = g('bcm-sh-extras');\n                mEl.innerHTML = '';\n                checked.forEach(function(cb){\n                    var r = document.createElement('div'); r.className = 'bcm-line';\n                    r.innerHTML = '<span class=\"bcm-line__lbl\">'+cb.dataset.name+'<\/span><span class=\"bcm-line__val\">'+fmt(parseFloat(cb.value))+'<\/span>';\n                    mEl.appendChild(r);\n                });\n                g('bcm-sh-pp').textContent    = fmt(totalPP);\n                g('bcm-sh-total').textContent = fmt(totalAl);\n            }\n        }\n\n        \/\/ Configurator events\n        document.querySelectorAll('#bc-app input[name=\"bc_duration\"]').forEach(function(r){\n            r.addEventListener('change', function(){\n                document.querySelectorAll('#bc-app .bc-radio').forEach(function(c){ c.classList.remove('is-active'); });\n                this.closest('.bc-radio').classList.add('is-active');\n                recalc();\n            });\n        });\n        g('bc-persons').addEventListener('change', recalc);\n        document.querySelectorAll('#bc-app .bc-extra__cb').forEach(function(cb){\n            cb.addEventListener('change', function(){\n                this.closest('.bc-extra').classList.toggle('is-active', this.checked);\n                recalc();\n            });\n        });\n\n        \/\/ \u2500\u2500 Sheet open\/sluit via display + rAF + transitionend \u2500\u2500\n        var sheetOpen = false;\n\n        function openSheet(){\n            if (sheetOpen) return;\n            sheetOpen = true;\n            var sheet    = g('bcm-sheet');\n            var backdrop = g('bcm-backdrop');\n            var btn      = g('bcm-bekijk');\n\n            \/\/ 1. Display block (nog transform:translateY(100%))\n            sheet.style.display = 'block';\n            backdrop.classList.add('is-visible');\n            document.body.style.overflow = 'hidden';\n\n            \/\/ 2. Volgende frame: voeg klassen toe zodat transitie start\n            requestAnimationFrame(function(){\n                requestAnimationFrame(function(){\n                    sheet.classList.add('is-open');\n                    backdrop.classList.add('is-open');\n                    btn.setAttribute('aria-expanded', 'true');\n                    sheet.setAttribute('aria-hidden', 'false');\n                });\n            });\n        }\n\n        function closeSheet(){\n            if (!sheetOpen) return;\n            sheetOpen = false;\n            var sheet    = g('bcm-sheet');\n            var backdrop = g('bcm-backdrop');\n            var btn      = g('bcm-bekijk');\n\n            \/\/ 1. Klassen verwijderen \u2192 transitie start (sheet schuift weg)\n            sheet.classList.remove('is-open');\n            backdrop.classList.remove('is-open');\n            btn.setAttribute('aria-expanded', 'false');\n            sheet.setAttribute('aria-hidden', 'true');\n            document.body.style.overflow = '';\n\n            \/\/ 2. Na de transitie: display:none + backdrop opruimen\n            sheet.addEventListener('transitionend', function handler(){\n                sheet.removeEventListener('transitionend', handler);\n                sheet.style.display = 'none';\n                backdrop.classList.remove('is-visible');\n            });\n        }\n\n        \/\/ Events koppelen (na portalen zijn de elementen aanwezig)\n        document.addEventListener('click', function(e){\n            if (e.target.closest('#bcm-bekijk'))  { sheetOpen ? closeSheet() : openSheet(); return; }\n            if (e.target.closest('#bcm-close'))   { closeSheet(); return; }\n            if (e.target.id === 'bcm-backdrop')   { closeSheet(); return; }\n        });\n        document.addEventListener('keydown', function(e){\n            if (e.key === 'Escape' && sheetOpen) closeSheet();\n        });\n\n        recalc();\n    })();\n    <\/script>\n    \n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p><span><span><a href=\"https:\/\/bootjespeciaal.nl\/de\/\">Home<\/a><\/span><\/span>Bereken de kosten voor jouw bootvaartPrijs berekenen\n    <div class=\"bc-calc\" id=\"bc-app\">\n        <div class=\"bc-calc__layout\">\n\n            <div class=\"bc-calc__form\">\n                <fieldset class=\"bc-fs\">\n                    <legend class=\"bc-fs__legend\">Hoe lang wil je varen?<\/legend>\n                    <div class=\"bc-radios\">\n                                                    <label class=\"bc-radio is-active\">\n                                <input type=\"radio\" name=\"bc_duration\" value=\"0\" checked>\n                                <span class=\"bc-radio__body\">\n                                    <span class=\"bc-radio__label\">Rondvaart van 1,5 uur<\/span>\n                                    <span class=\"bc-radio__meta\">Boot: <strong>\u20ac185,00<\/strong> &nbsp;\u00b7&nbsp; Drinken: <strong>\u20ac29,50 p.p.<\/strong><\/span>\n                                <\/span>\n                                <span class=\"bc-radio__tick\">\u2713<\/span>\n                            <\/label>\n                                                    <label class=\"bc-radio \">\n                                <input type=\"radio\" name=\"bc_duration\" value=\"1\" >\n                                <span class=\"bc-radio__body\">\n                                    <span class=\"bc-radio__label\">Rondvaart van 2 uur<\/span>\n                                    <span class=\"bc-radio__meta\">Boot: <strong>\u20ac265,00<\/strong> &nbsp;\u00b7&nbsp; Drinken: <strong>\u20ac31,50 p.p.<\/strong><\/span>\n                                <\/span>\n                                <span class=\"bc-radio__tick\">\u2713<\/span>\n                            <\/label>\n                                            <\/div>\n                <\/fieldset>\n\n                <fieldset class=\"bc-fs\">\n                    <legend class=\"bc-fs__legend\">Hoeveel personen?<\/legend>\n                    <div class=\"bc-select-wrap\">\n                        <select id=\"bc-persons\" class=\"bc-select\"><option value=\"10\">10 personen<\/option><option value=\"11\">11 personen<\/option><option value=\"12\">12 personen<\/option><option value=\"13\">13 personen<\/option><option value=\"14\">14 personen<\/option><option value=\"15\">15 personen<\/option><option value=\"16\">16 personen<\/option><option value=\"17\">17 personen<\/option><option value=\"18\">18 personen<\/option><option value=\"19\">19 personen<\/option><option value=\"20\" selected>20 personen<\/option><option value=\"21\">21 personen<\/option><option value=\"22\">22 personen<\/option><option value=\"23\">23 personen<\/option><option value=\"24\">24 personen<\/option><option value=\"25\">25 personen<\/option><option value=\"26\">26 personen<\/option><option value=\"27\">27 personen<\/option><option value=\"28\">28 personen<\/option><option value=\"29\">29 personen<\/option><option value=\"30\">30 personen<\/option><option value=\"31\">31 personen<\/option><option value=\"32\">32 personen<\/option><option value=\"33\">33 personen<\/option><option value=\"34\">34 personen<\/option><\/select>\n                        <span class=\"bc-select-arr\">\u25be<\/span>\n                    <\/div>\n                <\/fieldset>\n\n                                <fieldset class=\"bc-fs\">\n                    <legend class=\"bc-fs__legend\">Extra opties <span class=\"bc-fs__sub\">\u2014 optioneel, prijs per persoon<\/span><\/legend>\n                    <div class=\"bc-extras\">\n                                                    <label class=\"bc-extra\">\n                                <input type=\"checkbox\" class=\"bc-extra__cb\" value=\"9\" data-name=\"Bittergarnituur\">\n                                <span class=\"bc-extra__body\">\n                                    <span class=\"bc-extra__top\">\n                                        <span class=\"bc-extra__name\">Bittergarnituur<\/span>\n                                        <span class=\"bc-extra__price\">\u20ac9,00 p.p.<\/span>\n                                    <\/span>\n                                                                            <span class=\"bc-extra__desc\">Geniet van eindeloze hapjes terwijl je de prachtige grachten verkent: onze rondvaart biedt onbeperkte bittergarnituur, een ware traktatie voor de smaakpapillen op het water!<\/span>\n                                                                    <\/span>\n                                <span class=\"bc-extra__tick\">\u2713<\/span>\n                            <\/label>\n                                                    <label class=\"bc-extra\">\n                                <input type=\"checkbox\" class=\"bc-extra__cb\" value=\"35\" data-name=\"Barbecue\">\n                                <span class=\"bc-extra__body\">\n                                    <span class=\"bc-extra__top\">\n                                        <span class=\"bc-extra__name\">Barbecue<\/span>\n                                        <span class=\"bc-extra__price\">\u20ac35,00 p.p.<\/span>\n                                    <\/span>\n                                                                            <span class=\"bc-extra__desc\">Ervaar de ultieme private dining op het water met onze barbecue. Geniet van meer dan genoeg vlees (geen horeca porties), lekkere broodjes met smeersels en een adembenemend uitzicht.<\/span>\n                                                                    <\/span>\n                                <span class=\"bc-extra__tick\">\u2713<\/span>\n                            <\/label>\n                                                    <label class=\"bc-extra\">\n                                <input type=\"checkbox\" class=\"bc-extra__cb\" value=\"16.5\" data-name=\"Boot Cuisine\">\n                                <span class=\"bc-extra__body\">\n                                    <span class=\"bc-extra__top\">\n                                        <span class=\"bc-extra__name\">Boot Cuisine<\/span>\n                                        <span class=\"bc-extra__price\">\u20ac16,50 p.p.<\/span>\n                                    <\/span>\n                                                                            <span class=\"bc-extra__desc\">Wil je genieten van smakelijke kleine snackjes maar wil je meer dan alleen bittergarnituur? Wij bieden een verrukkelijk menu aan met een variatie aan overheerlijke hapjes zoals garnalen, kipspiesjes en meer.<\/span>\n                                                                    <\/span>\n                                <span class=\"bc-extra__tick\">\u2713<\/span>\n                            <\/label>\n                                                    <label class=\"bc-extra\">\n                                <input type=\"checkbox\" class=\"bc-extra__cb\" value=\"14.5\" data-name=\"Bubbels aan boord\">\n                                <span class=\"bc-extra__body\">\n                                    <span class=\"bc-extra__top\">\n                                        <span class=\"bc-extra__name\">Bubbels aan boord<\/span>\n                                        <span class=\"bc-extra__price\">\u20ac14,50 p.p.<\/span>\n                                    <\/span>\n                                                                            <span class=\"bc-extra__desc\">Zin om kurken te knallen aan boord? Voeg bubbels toe aan je rondvaart voor een ultieme feestervaring. Voor de Mimosa liefhebbers is er ook verse jus d&#039;orange aanwezig (op aanvraag).<\/span>\n                                                                    <\/span>\n                                <span class=\"bc-extra__tick\">\u2713<\/span>\n                            <\/label>\n                                                    <label class=\"bc-extra\">\n                                <input type=\"checkbox\" class=\"bc-extra__cb\" value=\"20\" data-name=\"Bootje Speciaal-bier\">\n                                <span class=\"bc-extra__body\">\n                                    <span class=\"bc-extra__top\">\n                                        <span class=\"bc-extra__name\">Bootje Speciaal-bier<\/span>\n                                        <span class=\"bc-extra__price\">\u20ac20,00 p.p.<\/span>\n                                    <\/span>\n                                                                            <span class=\"bc-extra__desc\">Laat je verrassen met het Bootje Speciaal-bier arrangement tijdens de rondvaart. Geniet van 4 speciaal biertjes per persoon en ontdek nieuwe smaken.<\/span>\n                                                                    <\/span>\n                                <span class=\"bc-extra__tick\">\u2713<\/span>\n                            <\/label>\n                                            <\/div>\n                <\/fieldset>\n                            <\/div>\n\n            <!-- Desktop sidebar \u2014 ongewijzigd -->\n            <div class=\"bc-calc__sidebar\">\n                <div class=\"bc-summary\">\n                    <div class=\"bc-summary__head\"><span>Jouw overzicht<\/span><\/div>\n                    <div class=\"bc-summary__stripe\"><\/div>\n                    <div class=\"bc-summary__body\">\n                        <div class=\"bc-badges\">\n                            <span class=\"bc-badge\" id=\"bc-badge-dur\">\u2014<\/span>\n                            <span class=\"bc-badge\" id=\"bc-badge-pers\">\u2014<\/span>\n                        <\/div>\n                        <div class=\"bc-lines\">\n                            <div class=\"bc-line\"><span class=\"bc-line__lbl\">Boot huren (p.p.)<\/span><span class=\"bc-line__val\" id=\"bc-val-boat\">\u2014<\/span><\/div>\n                            <div class=\"bc-line\"><span class=\"bc-line__lbl\">Onbeperkt drinken (p.p.)<\/span><span class=\"bc-line__val\" id=\"bc-val-drink\">\u2014<\/span><\/div>\n                            <div id=\"bc-extra-lines\"><\/div>\n                        <\/div>\n                        <div class=\"bc-totals\">\n                            <div class=\"bc-totals__pp\"><span>Per persoon<\/span><span id=\"bc-tot-pp\">\u2014<\/span><\/div>\n                            <div class=\"bc-totals__all\"><span>Totaal<\/span><span id=\"bc-tot-all\">\u2014<\/span><\/div>\n                        <\/div>\n                        <p class=\"bc-note\">Prijzen zijn inclusief btw.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n        <\/div>\n    <\/div>\n\n    <!--\n        Mobiele elementen als <template> \u2014 worden via JS naar <body> geplaatst.\n        Zo werkt position:fixed altijd t.o.v. het viewport, ongeacht parent-CSS.\n    -->\n\n    <!-- Sticky balk -->\n    <template id=\"bcm-tpl-bar\">\n        <div class=\"bcm-bar\" id=\"bcm-bar\">\n            <div class=\"bcm-bar__left\">\n                <span class=\"bcm-bar__dur\"  id=\"bcm-dur\">\u2014<\/span>\n                <span class=\"bcm-bar__pers\" id=\"bcm-pers\">\u2014<\/span>\n            <\/div>\n            <div class=\"bcm-bar__mid\">\n                <span class=\"bcm-bar__total\" id=\"bcm-total\">\u2014<\/span>\n                <span class=\"bcm-bar__pp\"    id=\"bcm-pp\">\u2014<\/span>\n            <\/div>\n\t\t\t<button class=\"bcm-bar__btn\" id=\"bcm-bekijk\" aria-expanded=\"false\" aria-label=\"Bekijk overzicht\">\n\t\t\t\t<i class=\"fa-solid fa-chevron-up\" id=\"bcm-chevron\"><\/i>\n\t\t\t<\/button>\n        <\/div>\n    <\/template>\n\n    <!-- Backdrop + slide-up sheet -->\n    <template id=\"bcm-tpl-sheet\">\n        <div class=\"bcm-backdrop\" id=\"bcm-backdrop\"><\/div>\n        <div class=\"bcm-sheet\" id=\"bcm-sheet\" aria-hidden=\"true\" role=\"dialog\" aria-label=\"Jouw overzicht\">\n            <div class=\"bcm-sheet__card\">\n                <div class=\"bcm-sheet__head\">\n                    <span class=\"bcm-sheet__title\">Jouw overzicht<\/span>\n                    <button class=\"bcm-sheet__close\" id=\"bcm-close\" aria-label=\"Sluiten\">\u2715<\/button>\n                <\/div>\n                <div class=\"bcm-sheet__stripe\"><\/div>\n                <div class=\"bcm-sheet__body\">\n                    <div class=\"bcm-badges\">\n                        <span class=\"bcm-badge\" id=\"bcm-sh-dur\">\u2014<\/span>\n                        <span class=\"bcm-badge\" id=\"bcm-sh-pers\">\u2014<\/span>\n                    <\/div>\n                    <div class=\"bcm-lines\">\n                        <div class=\"bcm-line\"><span class=\"bcm-line__lbl\">Boot huren (p.p.)<\/span><span class=\"bcm-line__val\" id=\"bcm-sh-boat\">\u2014<\/span><\/div>\n                        <div class=\"bcm-line\"><span class=\"bcm-line__lbl\">Onbeperkt drinken (p.p.)<\/span><span class=\"bcm-line__val\" id=\"bcm-sh-drink\">\u2014<\/span><\/div>\n                        <div id=\"bcm-sh-extras\"><\/div>\n                    <\/div>\n                    <div class=\"bcm-totals\">\n                        <div class=\"bcm-totals__pp\"><span>Per persoon<\/span><span id=\"bcm-sh-pp\">\u2014<\/span><\/div>\n                        <div class=\"bcm-totals__all\"><span>Totaal<\/span><span id=\"bcm-sh-total\">\u2014<\/span><\/div>\n                    <\/div>\n                    <p class=\"bcm-note\">Prijzen zijn inclusief btw.<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/template>\n\n\n    <style>\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 TOKENS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    :root {\n        --bc-primary:    #6A94FE;\n        --bc-dark:       #1e1b4b;\n        --bc-text:       #111827;\n        --bc-border:     #e5e7eb;\n        --bc-speed:      0.22s;\n        --bc-bg:         #f5f7ff;\n        --bc-card:       #ffffff;\n        --bc-primary-lt: rgba(106,148,254,.10);\n        --bc-grad:       linear-gradient(to right, #6A94FE, #FFA330, #6A94FE);\n        --bcm-h:         68px;\n        --bcm-z:         99999;\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 DESKTOP CALCULATOR \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    #bc-app *, #bc-app *::before, #bc-app *::after { box-sizing: border-box; }\n    .bc-calc { font-size:16px; color:var(--bc-text); background:var(--bc-bg); border-radius:16px;}\n    .bc-calc__layout { display:grid; grid-template-columns:1fr 340px; gap:28px; align-items:start; }\n\n    .bc-fs { border:none; margin:0 0 24px; padding:0; }\n    .bc-fs__legend { display:block; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.18em; color:var(--bc-dark); margin-bottom:12px; }\n    .bc-fs__sub { font-weight:400; text-transform:none; letter-spacing:0; color:#9ca3af; font-size:12px; }\n\n    .bc-radios { display:flex; flex-direction:column; gap:10px; }\n    .bc-radio { display:flex; align-items:center; gap:14px; padding:15px 18px; background:var(--bc-card); border:2px solid var(--bc-border); border-radius:10px; cursor:pointer; transition:border-color var(--bc-speed),background var(--bc-speed),box-shadow var(--bc-speed); }\n    .bc-radio input { position:absolute; opacity:0; width:0; height:0; }\n    .bc-radio:hover { border-color:var(--bc-primary); box-shadow:0 0 0 4px rgba(106,148,254,.12); }\n    .bc-radio.is-active { border-color:var(--bc-primary); background:var(--bc-primary-lt); }\n    .bc-radio__body { flex:1; }\n    .bc-radio__label { display:block; font-weight:700; color:var(--bc-dark); margin-bottom:3px; }\n    .bc-radio__meta { font-size:13px; color:#6b7280; }\n    .bc-radio__tick { width:24px; height:24px; border-radius:50%; background:var(--bc-border); display:flex; align-items:center; justify-content:center; font-size:12px; color:transparent; flex-shrink:0; transition:background var(--bc-speed),color var(--bc-speed); }\n    .bc-radio.is-active .bc-radio__tick { background:var(--bc-primary); color:#fff; }\n\n    .bc-select-wrap { position:relative; display:inline-block; width:100%; max-width:260px; }\n    .bc-select { width:100%; appearance:none; background:var(--bc-card); border:2px solid var(--bc-border); border-radius:10px; padding:13px 44px 13px 16px; font-size:15px; font-weight:700; color:var(--bc-dark); cursor:pointer; font-family:inherit; transition:border-color var(--bc-speed); }\n    .bc-select:focus { outline:none; border-color:var(--bc-primary); box-shadow:0 0 0 4px rgba(106,148,254,.12); }\n    .bc-select-arr { position:absolute; right:14px; top:50%; transform:translateY(-50%); pointer-events:none; color:#9ca3af; font-size:11px; }\n\n    .bc-extras { display:flex; flex-direction:column; gap:10px; }\n    .bc-extra { display:flex; align-items:flex-start; gap:14px; padding:15px 18px; background:var(--bc-card); border:2px solid var(--bc-border); border-radius:10px; cursor:pointer; transition:border-color var(--bc-speed),background var(--bc-speed),box-shadow var(--bc-speed); }\n    .bc-extra input { position:absolute; opacity:0; width:0; height:0; }\n    .bc-extra:hover { border-color:var(--bc-primary); box-shadow:0 0 0 4px rgba(106,148,254,.12); }\n    .bc-extra.is-active { border-color:var(--bc-primary); background:var(--bc-primary-lt); }\n    .bc-extra__body { flex:1; }\n    .bc-extra__top { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:4px; }\n    .bc-extra__name { font-weight:700; color:var(--bc-dark); }\n    .bc-extra__price { font-weight:700; color:var(--bc-primary); font-size:14px; white-space:nowrap; }\n    .bc-extra__desc { display:block; font-size:13px; color:#6b7280; line-height:1.5; }\n    .bc-extra__tick { width:24px; height:24px; flex-shrink:0; margin-top:2px; border:2px solid var(--bc-border); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:12px; color:transparent; transition:background var(--bc-speed),border-color var(--bc-speed),color var(--bc-speed); }\n    .bc-extra.is-active .bc-extra__tick { background:var(--bc-primary); border-color:var(--bc-primary); color:#fff; }\n\n    .bc-summary { background:var(--bc-card); border:2px solid var(--bc-border); border-radius:14px; overflow:hidden; box-shadow:0 4px 24px rgba(30,27,75,.10); position:sticky; top:24px; }\n    .bc-summary__head { display:flex; align-items:center; gap:10px; padding:18px 22px; background:var(--bc-dark); color:#fff; font-weight:700; font-size:18px; }\n    .bc-summary__stripe { height:3px; background:var(--bc-grad); }\n    .bc-summary__body { padding:20px 22px; }\n    .bc-badges { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }\n    .bc-badge { display:inline-block; padding:5px 14px; background:var(--bc-primary-lt); color:var(--bc-dark); border-radius:90px; font-size:13px; font-weight:700; border:1px solid rgba(106,148,254,.25); }\n    .bc-lines { border-top:1px solid var(--bc-border); padding-top:14px; margin-bottom:14px; }\n    .bc-line { display:flex; justify-content:space-between; align-items:baseline; padding:5px 0; font-size:14px; }\n    .bc-line__lbl { color:#6b7280; }\n    .bc-line__val { font-weight:700; font-variant-numeric:tabular-nums; color:var(--bc-dark); }\n    .bc-totals { border-top:2px solid var(--bc-border); padding-top:14px; }\n    .bc-totals__pp { display:flex; justify-content:space-between; font-size:14px; padding:4px 0; color:#6b7280; }\n    .bc-totals__pp span:last-child { font-weight:700; color:var(--bc-dark); font-size:15px; }\n    .bc-totals__all { display:flex; justify-content:space-between; align-items:baseline; margin-top:8px; }\n    .bc-totals__all span:first-child { font-weight:700; font-size:16px; color:var(--bc-dark); }\n    .bc-totals__all span:last-child { font-weight:900; font-size:28px; color:var(--bc-primary); font-variant-numeric:tabular-nums; letter-spacing:-.5px; }\n    .bc-note { margin:14px 0 0; font-size:12px; color:#9ca3af; line-height:1.5; border-top:1px solid var(--bc-border); padding-top:12px; }\n\n    @media (max-width: 780px) {\n        .bc-calc__sidebar { display:none !important; }\n        .bc-calc__layout  { grid-template-columns:1fr !important; }\n        .bc-calc          { padding-bottom:calc(var(--bcm-h) + 24px) !important; }\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 MOBIELE ELEMENTEN \u2014 .bcm-* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       Worden aan <body> gehangen via JS.\n       Standaard display:none; JS regelt open\/dicht.\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n\n    \/* Balk: altijd zichtbaar op mobiel *\/\n    .bcm-bar {\n\t\tdisplay: none;\n\t\tposition: fixed;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\tright: 0;\n\t\theight: var(--bcm-h);\n\t\tz-index: var(--bcm-z);\n\t\talign-items: center;\n\t\tgap: 10px;\n\t\tpadding: 0 14px;\n\t\tbackground: #fff;\n\t\tborder-image: var(--bc-grad) 1;\n\t\tbox-shadow: 0 -4px 24px rgba(0, 0, 0, .10);\n\t\tbox-sizing: border-box;\n    }\n    .bcm-bar__left { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }\n    .bcm-bar__dur  { font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height: normal;}\n    .bcm-bar__pers { font-size:12px; line-height: normal; }\n    .bcm-bar__mid  { display:flex; flex-direction:column; align-items:flex-end; flex-shrink:0; gap:1px; }\n    .bcm-bar__total{ font-size:19px; font-weight:900; color:var(--bc-primary); font-variant-numeric:tabular-nums; letter-spacing:-.4px; line-height:normal;}\n    .bcm-bar__pp   { font-size:12px; font-variant-numeric:tabular-nums;}\n\t.bcm-bar__btn {\n\t\tdisplay: flex; align-items: center; justify-content: center;\n\t\tflex-shrink: 0; margin-left: 8px;\n\t\tbackground: var(--bc-primary); color: #fff;\n\t\tborder: none; border-radius: 50%;\n\t\twidth: 42px; height: 42px;\n\t\tfont-size: 16px;\n\t\tcursor: pointer;\n\t\t-webkit-tap-highlight-color: transparent;\n\t\ttransition: background var(--bc-speed);\n\t}\n\t.bcm-bar__btn:active { background: #5a84ee; }\n\n\t\/* Chevron draait bij open state (vervangt .bcm-arrow) *\/\n\t.bcm-bar__btn i {\n\t\ttransition: transform .32s cubic-bezier(.32,.72,0,1);\n\t\tline-height: 1;\n\t}\n\t.bcm-bar__btn[aria-expanded=\"true\"] i {\n\t\ttransform: rotate(180deg);\n\t}\n\n    \/* Backdrop: standaard verborgen *\/\n    .bcm-backdrop {\n        display: none;\n        position: fixed;\n        inset: 0;\n        z-index: calc(var(--bcm-z) + 1);\n        background: rgba(10,8,36,.62);\n        backdrop-filter: blur(3px);\n        -webkit-backdrop-filter: blur(3px);\n        opacity: 0;\n        transition: opacity .28s ease;\n        box-sizing: border-box;\n    }\n    \/* Klasse .is-visible maakt hem zichtbaar *\/\n    .bcm-backdrop.is-visible { display:block; }\n    .bcm-backdrop.is-open    { opacity:1; }\n\n    \/* Sheet: standaard display:none\n       JS zet display:block, daarna via rAF de is-open klasse.\n       Gesloten: display:none (na transitionend).\n       Open: translateY(0).\n    *\/\n    .bcm-sheet {\n        display: none; \/* standaard volledig weg *\/\n        position: fixed;\n        bottom: 0;\n        left: 0; right: 0;\n        z-index: calc(var(--bcm-z) + 2);\n        max-height: calc(100dvh - var(--bcm-h) - 8px);\n        overflow-y: auto;\n        overscroll-behavior: contain;\n        -webkit-overflow-scrolling: touch;\n        box-sizing: border-box;\n        \/* Start onderuit geschoven zodra display:block wordt gezet *\/\n        transform: translateY(100%);\n        transition: transform .36s cubic-bezier(.32,.72,0,1);\n    }\n    \/* Zodra .is-open wordt toegevoegd, schuift het sheet omhoog *\/\n    .bcm-sheet.is-open { transform: translateY(0); }\n\n    .bcm-sheet__card { background:var(--bc-card); overflow:hidden; box-shadow:0 -8px 40px rgba(10,8,36,.20); }\n    .bcm-sheet__head { display:flex; justify-content:space-between; align-items:center; padding:14px 20px; background:var(--bc-dark); color:#fff; }\n    .bcm-sheet__title { font-weight:700; font-size:17px; font-family:inherit; }\n    .bcm-sheet__close { width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.12); border:none; color:#fff; font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-family:inherit; -webkit-tap-highlight-color:transparent; transition:background var(--bc-speed); }\n    .bcm-sheet__close:active { background:rgba(255,255,255,.28); }\n    .bcm-sheet__stripe { height:3px; background:var(--bc-grad); }\n    .bcm-sheet__body { padding:18px 20px 40px; font-family:inherit; }\n\n    .bcm-badges { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }\n    .bcm-badge { display:inline-block; padding:5px 13px; background:var(--bc-primary-lt); color:var(--bc-dark); border-radius:90px; font-size:12px; font-weight:700; border:1px solid rgba(106,148,254,.25); font-family:inherit; }\n    .bcm-lines { border-top:1px solid var(--bc-border); padding-top:12px; margin-bottom:12px; }\n    .bcm-line { display:flex; justify-content:space-between; align-items:baseline; padding:5px 0; font-size:14px; font-family:inherit; }\n    .bcm-line__lbl { color:#6b7280; }\n    .bcm-line__val { font-weight:700; font-variant-numeric:tabular-nums; color:var(--bc-dark); }\n    .bcm-totals { border-top:2px solid var(--bc-border); padding-top:12px; }\n    .bcm-totals__pp { display:flex; justify-content:space-between; font-size:14px; padding:4px 0; color:#6b7280; font-family:inherit; }\n    .bcm-totals__pp span:last-child { font-weight:700; color:var(--bc-dark); font-size:15px; }\n    .bcm-totals__all { display:flex; justify-content:space-between; align-items:baseline; margin-top:8px; font-family:inherit; }\n    .bcm-totals__all span:first-child { font-weight:700; font-size:15px; color:var(--bc-dark); }\n    .bcm-totals__all span:last-child { font-weight:900; font-size:28px; color:var(--bc-primary); font-variant-numeric:tabular-nums; letter-spacing:-.5px; }\n    .bcm-note { margin:14px 0 0; font-size:12px; color:#9ca3af; line-height:1.5; border-top:1px solid var(--bc-border); padding-top:12px; font-family:inherit; }\n    <\/style>\n\n    <script>\n    (function(){\n        const DURS = [{\"label\":\"Rondvaart van 1,5 uur\",\"boat_price\":185,\"drink_pp\":29.5},{\"label\":\"Rondvaart van 2 uur\",\"boat_price\":265,\"drink_pp\":31.5}];\n\n        \/\/ \u2500\u2500 Mobiele elementen uit <template> naar <body> portalen \u2500\u2500\n        ['bcm-tpl-bar', 'bcm-tpl-sheet'].forEach(function(id){\n            var tpl = document.getElementById(id);\n            if (tpl) document.body.appendChild(tpl.content.cloneNode(true));\n        });\n\n        \/\/ \u2500\u2500 Op mobiel: balk tonen (display:flex) \u2500\u2500\n        function applyMobileBar(){\n            var bar = document.getElementById('bcm-bar');\n            if (!bar) return;\n            if (window.innerWidth <= 780) {\n                bar.style.display = 'flex';\n            } else {\n                bar.style.display = 'none';\n            }\n        }\n        applyMobileBar();\n        window.addEventListener('resize', applyMobileBar);\n\n        function fmt(v){\n            return '\\u20AC\\u00A0' + v.toLocaleString('nl-NL', {minimumFractionDigits:2, maximumFractionDigits:2});\n        }\n\n        function g(id){ return document.getElementById(id); }\n\n        function recalc(){\n            var durIdx  = parseInt((document.querySelector('#bc-app input[name=\"bc_duration\"]:checked') || {value:0}).value);\n            var persons = parseInt(g('bc-persons').value);\n            var dur     = DURS[durIdx] || DURS[0];\n            var checked = Array.from(document.querySelectorAll('#bc-app .bc-extra__cb:checked'));\n            var extraPP = checked.reduce(function(s, el){ return s + parseFloat(el.value); }, 0);\n\n            var boatPP  = dur.boat_price \/ persons;\n            var drinkPP = dur.drink_pp;\n            var totalPP = boatPP + drinkPP + extraPP;\n            var totalAl = totalPP * persons;\n\n            \/\/ Desktop sidebar\n            g('bc-badge-dur').textContent  = dur.label;\n            g('bc-badge-pers').textContent = persons + ' personen';\n            g('bc-val-boat').textContent   = fmt(boatPP);\n            g('bc-val-drink').textContent  = fmt(drinkPP);\n            var dEl = g('bc-extra-lines');\n            dEl.innerHTML = '';\n            checked.forEach(function(cb){\n                var r = document.createElement('div'); r.className = 'bc-line';\n                r.innerHTML = '<span class=\"bc-line__lbl\">'+cb.dataset.name+'<\/span><span class=\"bc-line__val\">'+fmt(parseFloat(cb.value))+'<\/span>';\n                dEl.appendChild(r);\n            });\n            g('bc-tot-pp').textContent  = fmt(totalPP);\n            g('bc-tot-all').textContent = fmt(totalAl);\n\n            \/\/ Mobiele balk\n            if (g('bcm-dur')) {\n                g('bcm-dur').textContent   = dur.label;\n                g('bcm-pers').textContent  = persons + ' personen';\n                g('bcm-total').textContent = fmt(totalAl);\n                g('bcm-pp').textContent    = fmt(totalPP) + '\\u00A0p.p.';\n            }\n\n            \/\/ Mobiel sheet\n            if (g('bcm-sh-dur')) {\n                g('bcm-sh-dur').textContent   = dur.label;\n                g('bcm-sh-pers').textContent  = persons + ' personen';\n                g('bcm-sh-boat').textContent  = fmt(boatPP);\n                g('bcm-sh-drink').textContent = fmt(drinkPP);\n                var mEl = g('bcm-sh-extras');\n                mEl.innerHTML = '';\n                checked.forEach(function(cb){\n                    var r = document.createElement('div'); r.className = 'bcm-line';\n                    r.innerHTML = '<span class=\"bcm-line__lbl\">'+cb.dataset.name+'<\/span><span class=\"bcm-line__val\">'+fmt(parseFloat(cb.value))+'<\/span>';\n                    mEl.appendChild(r);\n                });\n                g('bcm-sh-pp').textContent    = fmt(totalPP);\n                g('bcm-sh-total').textContent = fmt(totalAl);\n            }\n        }\n\n        \/\/ Configurator events\n        document.querySelectorAll('#bc-app input[name=\"bc_duration\"]').forEach(function(r){\n            r.addEventListener('change', function(){\n                document.querySelectorAll('#bc-app .bc-radio').forEach(function(c){ c.classList.remove('is-active'); });\n                this.closest('.bc-radio').classList.add('is-active');\n                recalc();\n            });\n        });\n        g('bc-persons').addEventListener('change', recalc);\n        document.querySelectorAll('#bc-app .bc-extra__cb').forEach(function(cb){\n            cb.addEventListener('change', function(){\n                this.closest('.bc-extra').classList.toggle('is-active', this.checked);\n                recalc();\n            });\n        });\n\n        \/\/ \u2500\u2500 Sheet open\/sluit via display + rAF + transitionend \u2500\u2500\n        var sheetOpen = false;\n\n        function openSheet(){\n            if (sheetOpen) return;\n            sheetOpen = true;\n            var sheet    = g('bcm-sheet');\n            var backdrop = g('bcm-backdrop');\n            var btn      = g('bcm-bekijk');\n\n            \/\/ 1. Display block (nog transform:translateY(100%))\n            sheet.style.display = 'block';\n            backdrop.classList.add('is-visible');\n            document.body.style.overflow = 'hidden';\n\n            \/\/ 2. Volgende frame: voeg klassen toe zodat transitie start\n            requestAnimationFrame(function(){\n                requestAnimationFrame(function(){\n                    sheet.classList.add('is-open');\n                    backdrop.classList.add('is-open');\n                    btn.setAttribute('aria-expanded', 'true');\n                    sheet.setAttribute('aria-hidden', 'false');\n                });\n            });\n        }\n\n        function closeSheet(){\n            if (!sheetOpen) return;\n            sheetOpen = false;\n            var sheet    = g('bcm-sheet');\n            var backdrop = g('bcm-backdrop');\n            var btn      = g('bcm-bekijk');\n\n            \/\/ 1. Klassen verwijderen \u2192 transitie start (sheet schuift weg)\n            sheet.classList.remove('is-open');\n            backdrop.classList.remove('is-open');\n            btn.setAttribute('aria-expanded', 'false');\n            sheet.setAttribute('aria-hidden', 'true');\n            document.body.style.overflow = '';\n\n            \/\/ 2. Na de transitie: display:none + backdrop opruimen\n            sheet.addEventListener('transitionend', function handler(){\n                sheet.removeEventListener('transitionend', handler);\n                sheet.style.display = 'none';\n                backdrop.classList.remove('is-visible');\n            });\n        }\n\n        \/\/ Events koppelen (na portalen zijn de elementen aanwezig)\n        document.addEventListener('click', function(e){\n            if (e.target.closest('#bcm-bekijk'))  { sheetOpen ? closeSheet() : openSheet(); return; }\n            if (e.target.closest('#bcm-close'))   { closeSheet(); return; }\n            if (e.target.id === 'bcm-backdrop')   { closeSheet(); return; }\n        });\n        document.addEventListener('keydown', function(e){\n            if (e.key === 'Escape' && sheetOpen) closeSheet();\n        });\n\n        recalc();\n    })();\n    <\/script>\n    <\/p>\n","protected":false},"author":6,"featured_media":17763,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"pagina-categorie":[],"pagina-menu":[],"class_list":["post-18652","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Bootje Speciaal<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/bootjespeciaal.nl\/de\/wp-json\/wp\/v2\/pages\/18652\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"website\" \/>\n<meta property=\"og:url\" content=\"https:\/\/bootjespeciaal.nl\/de\/wp-json\/wp\/v2\/pages\/18652\" \/>\n<meta property=\"og:site_name\" content=\"Bootje Speciaal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/bootjespeciaal.nl\\\/#website\",\"url\":\"https:\\\/\\\/bootjespeciaal.nl\\\/\",\"name\":\"Bootje Speciaal\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/bootjespeciaal.nl\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bootje Speciaal","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/bootjespeciaal.nl\/de\/wp-json\/wp\/v2\/pages\/18652","og_locale":"de_DE","og_type":"website","og_url":"https:\/\/bootjespeciaal.nl\/de\/wp-json\/wp\/v2\/pages\/18652","og_site_name":"Bootje Speciaal","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/bootjespeciaal.nl\/#website","url":"https:\/\/bootjespeciaal.nl\/","name":"Bootje Speciaal","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/bootjespeciaal.nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"}]}},"_links":{"self":[{"href":"https:\/\/bootjespeciaal.nl\/de\/wp-json\/wp\/v2\/pages\/18652","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bootjespeciaal.nl\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bootjespeciaal.nl\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bootjespeciaal.nl\/de\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/bootjespeciaal.nl\/de\/wp-json\/wp\/v2\/comments?post=18652"}],"version-history":[{"count":10,"href":"https:\/\/bootjespeciaal.nl\/de\/wp-json\/wp\/v2\/pages\/18652\/revisions"}],"predecessor-version":[{"id":19480,"href":"https:\/\/bootjespeciaal.nl\/de\/wp-json\/wp\/v2\/pages\/18652\/revisions\/19480"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bootjespeciaal.nl\/de\/wp-json\/wp\/v2\/media\/17763"}],"wp:attachment":[{"href":"https:\/\/bootjespeciaal.nl\/de\/wp-json\/wp\/v2\/media?parent=18652"}],"wp:term":[{"taxonomy":"pagina-categorie","embeddable":true,"href":"https:\/\/bootjespeciaal.nl\/de\/wp-json\/wp\/v2\/pagina-categorie?post=18652"},{"taxonomy":"pagina-menu","embeddable":true,"href":"https:\/\/bootjespeciaal.nl\/de\/wp-json\/wp\/v2\/pagina-menu?post=18652"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}