<!--
  SJABLOON pagina-restaurant-boff-v3 — v3, 5 okt 2026: wellness-finetunes (plan ~/.claude/plans/structured-beaming-kite.md);
  Live op /restaurant-boff/ sinds 12 okt 2026 (eerst reviewpagina's /restaurant-boff-v2/ en /restaurant-boff-v3/;
  die adressen zijn nu een 301). De naam v3 is gebleven; de v2-bestanden (pagina-restaurant-boff-v2.html/.css/.js)
  zijn bij de promotie opgeruimd en staan in git.
  Verschil met v2: geen feitenregel onder de hero (velden als commentaar in het KH-blok), intropaneel hangt
  120 px over de hero, mozaiek 1440 breed met diepte (rb-omg--diep), menukaartblok met paneel tot de
  schermrand en tekst gecentreerd, Tripadvisor als lus tot de rand (ta-lus), slot hoger met brandpunt.
  Het dag-blok (rb-dag, kaarten per moment van de dag) is bewust NIET vervangen door de bouwsteen
  daggasten: het is geen daggastenblok (open vraag).
  Robots, canonical, og en taalkoppelingen (hreflang) uit het KH-blokje; in de head staat de
  Yoast-WebPage-graph (overgenomen van de oude /restaurant-boff/, kruimelpad Home > Restaurant in Horst – BØFF,
  met naam, omschrijving en herofoto van v3), naast de FAQPage-JSON-LD (platte tekst).

  Ontwerpkeuze uit de blokkenkiezer (Stijn, 3 okt 2026): 1a-2b-3f-4b-5b-6c-7e-8a-9a-10b met twee
  aanpassingen: 5b krijgt per tegel een pop-up (Meer info) in plaats van tekstkolommen, en 8a krijgt
  de FAQ zoals op /wellness/ (8c-opmaak) in plaats van het cremepaneel.
  (~/Documents/Parkhotel /Website ontwerp/restaurant-boff-blokkenkiezer/; BRIEFING.md = alle teksten).
  Skelet: pagina-dineren-v2 (kop, Mews-poort, delayed-JS-loader, Zenchef); 2b/4b/6c/9a uit
  pagina-dineren-v2 (dv-intro, dv-arr/dv-fs, dv-ontdek, dv-ta), 5b/8a/8c/10b uit pagina-wellness-v2
  (wv-omg, wv-tegels, wv-faq, wv-slot). Klassenprefix rb-.

  BLOKVOLGORDE
    kop                                   bouwsteen blok-kop (klasse met 'hero': doorschijnende kopbalk)
    1a hero: volle foto, tekst midden     .rb-hero      (h1, sub, twee knoppen; v3: geen feitenregel)
    2b over BOFF: paneel + tegels         .rb-intro     (tekst en knoppen links, vier icoontegels 2x2 rechts)
    3f op elk moment van de dag           .rb-dag       (#dag; vijf cremekaarten op een rij, knoppen eronder)
    4b de menukaart: fotoslider + paneel  .rb-arr       (#kaart; vijf gerechtfoto's, pijlen en bolletjes)
    5b binnen, bar, terras: mozaiek       .rb-omg       (#plek; drie tegelknoppen, elk opent de pop-up #rbPopup)
    6c evenementen: slider 5 kaarten      .rb-ontdek    (teller + pijlen, pagina-restaurant-boff-v3.js)
    7e zakelijk: drie formule-kaarten     .rb-zak       (#zakelijk)
    8a goed om te weten: tegels           .rb-tegels    (#praktisch; hoge tijdentegel, vijf praktisch, adres)
    8c veelgestelde vragen                .rb-faq       (details/summary, eerste open; JSON-LD FAQPage in de head)
    9a Tripadvisor op het patroon         .rb-ta        (bouwsteen reviews-tripadvisor, ta-velden uit home.nl)
    10b slot: volle foto met tekst        .rb-slot      (het hotel vanaf het water; Boek uw verblijf via de Mews-poort)
    voet                                  bouwsteen blok-voet

  POP-UP (5b): #rbPopup staat buiten main. De inhoud per plek staat als JSON in data-plekken,
  opgebouwd uit de rb-pN-velden (daarom geen aanhalingstekens in die velden). Het script vult
  #rbPopupInner bij het openen (foto, naam, alinea's, een knop).

  KNOPPEN: hoofdknop overal Reserveer een tafel (href #zc-action-open-widget, opent de Zenchef-
  widget; SDK via de delayed-JS-loader), tweede Bekijk de menukaart (/menukaart/),
  Boek uw verblijf alleen in het slot (Mews-basis, via de Mews-poort).

  VELDEN: alle zichtbare tekst is een veld met prefix rb- (in het KH-blok van de pagina); Mews-basis,
  contact en sliderlabels komen uit src/teksten/seizoenslander-v2.nl.txt (sz-), de Tripadvisor-velden
  uit home.nl (ta-). Een ontbrekend veld laat render.py stoppen. Iconen staan als inline SVG in dit
  sjabloon (stroke=currentColor, de CSS zet goud). Geen emoji, geen eyebrows, geen tags op foto's.

  LET OP: in dit uitleg-blok mag GEEN sjabloonmarkering staan (zie pagina-kerst).
-->
<!doctype html>
<html lang="en-GB">
<head>
<!-- DE VASTE KOP (src/fragmenten/kop-head.html): wat op ELKE eigen pagina hoort.
     Wat per pagina verschilt (titel, description, canonical, hreflang, robots,
     JSON-LD, og:, de viewport-variant, fonts/preloads en de Mews-poort) staat in
     het sjabloon zelf. Zie CLAUDE.md, "De vaste kop". -->
<meta charset="utf-8" />
<!-- Server Side Tracking by Taggrs.io -->
 <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://untouchables.parkhotelhorst.nl/ahq7sp9lep.js?tg='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','P2GNVG5');</script>
<!-- End Server Side Tracking by Taggrs.io -->
<link rel="icon" href="/assets/img/favicon-e41971.ico" sizes="32x32" />
<link rel="apple-touch-icon" href="/assets/img/favicon-e41971.ico" />
<meta name="p:domain_verify" content="31818b381ac05b9def7c17fd3ff98e7c" /> <!-- Pinterest website-claim, 24 sep 2026 -->
<script id="ph-mews-gate">
/* Mews-boekingswidget wordt pas opgehaald bij de eerste klik op een boek-knop.
   Zonder deze poort trekt de widget bij elke paginalaad ~3 MB en ~110 requests
   binnen (Google Tag Manager, LaunchDarkly, Sentry, Application Insights).
   Op deze pagina zitten die knoppen in de kopbalk, in het slot (Boek uw verblijf)
   en in de voettekst. */
(function(){
var CFG='ea3920b8-6b38-436c-ae08-af1d007c3bd6',EXTRA=['41527856-d2ec-4c39-90f8-afa300edda08'],LANG='en-GB';
var SEL='.distributor-open,.distributor,a[href*="mews.com/distributor"]';
var MP=/[?&]mews[A-Z]/.test(location.search),AUTO=/[?&]mewsDistributorOpened\b/.test(location.search);
var apis={},loading=false,ready=false,pending=null,timer=null;
function cfgFrom(h){var m=(h||'').match(/mews\.com\/distributor\/([0-9a-fA-F-]{36})/);return (m&&apis[m[1]])?m[1]:CFG}
function params(api,href){try{var p=new URL(href,location.href).searchParams;
var c=p.get('mewsVoucherCode')||p.get('voucher');if(c)api.setVoucherCode(c.replace(/[^A-Za-z0-9_-]/g,''));
var s=p.get('mewsStart'),e=p.get('mewsEnd');if(s)api.setStartDate(new Date(s));if(e)api.setEndDate(new Date(e));
var a=p.get('mewsAdultCount');if(a&&api.setAdultCount){try{api.setAdultCount(parseInt(a,10))}catch(x){}}
var r=p.get('mewsRoom');if(r&&api.showRates){try{api.showRates(r)}catch(x){}}}catch(x){}}
function openFor(el){var api=apis[cfgFrom(el.href)];if(!api)return false;
var c=el.getAttribute('data-voucher');if(c)api.setVoucherCode(c);
if(el.href&&el.href.indexOf('mews.com/distributor')>-1)params(api,el.href);
var r=el.getAttribute('data-mews-room');if(r&&api.showRates){try{api.showRates(r)}catch(x){}}
api.setLanguageCode(LANG);api.open();return true}
function init(){if(typeof Mews==='undefined'||!Mews.Distributor){setTimeout(init,80);return}
(MP?[CFG]:[CFG].concat(EXTRA)).forEach(function(c){Mews.Distributor({configurationIds:[c],language:LANG},function(api){
apis[c]=api;api.setLanguageCode(LANG);
if(c===CFG){ready=true;if(timer){clearTimeout(timer);timer=null}
if(pending){var el=pending;pending=null;openFor(el)}}})})}
function load(){if(loading)return;loading=true;
var s=document.createElement('script');s.async=true;s.src='https://app.mews.com/distributor/distributor.min.js';
s.onerror=function(){loading=false;if(pending&&pending.href)location.href=pending.href};
(document.head||document.documentElement).appendChild(s);init()}
document.addEventListener('click',function(e){
var el=e.target&&e.target.closest?e.target.closest(SEL):null;if(!el)return;
if(e.metaKey||e.ctrlKey||e.shiftKey||e.button)return;
e.preventDefault();
if(ready){openFor(el);return}
pending=el;load();
if(!timer){timer=setTimeout(function(){if(!ready&&pending&&pending.href)location.href=pending.href},8000)}
},true);
if(AUTO){load()}
})();
</script>
<!-- Delayed-JS-loader (zoals pagina-flowlander-v3): scripts met type="delayedscript" draaien pas
     na de eerste aanraking. Hier alleen de Zenchef-SDK en het knopscript van zenchef-knop;
     zonder deze loader doet de reserveerwidget niets. -->
<script id="ph-delayed-js-loader">
(function(){var EV=["pointerdown","keydown","touchstart","wheel","scroll"],O={once:true,passive:true},done=false;
function go(){if(done)return;done=true;EV.forEach(function(e){window.removeEventListener(e,go,O)});
var l=[].slice.call(document.querySelectorAll('script[type="delayedscript"]')),i=0;
(function next(){if(i>=l.length){try{document.dispatchEvent(new Event("DOMContentLoaded",{bubbles:true}));
window.dispatchEvent(new Event("load"))}catch(e){}return}
var o=l[i++],s=document.createElement("script"),j=0,a;
for(;j<o.attributes.length;j++){a=o.attributes[j];
if(a.name==="type"){continue}
if(a.name==="data-src"){s.src=a.value;continue}
s.setAttribute(a.name,a.value)}
if(o.hasAttribute("data-src")){s.async=false;s.onload=s.onerror=next;o.parentNode.replaceChild(s,o)}
else{s.text=o.text;o.parentNode.replaceChild(s,o);next()}})()}
EV.forEach(function(e){window.addEventListener(e,go,O)})})();
</script>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover" />
<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">
<link rel="canonical" href="https://www.parkhotelhorst.nl/en/boff-restaurant/" />
<link rel="alternate" href="https://www.parkhotelhorst.nl/restaurant-boff/" hreflang="nl" />
<link rel="alternate" href="https://www.parkhotelhorst.nl/en/boff-restaurant/" hreflang="en" />
<link rel="alternate" href="https://www.parkhotelhorst.nl/de/restaurant-boff-2/" hreflang="de" />
<link rel="alternate" href="https://www.parkhotelhorst.nl/restaurant-boff/" hreflang="x-default" />
<meta name="google-site-verification" content="Z0QDHB-4lZWy8drxX54QQ-rW1xbb0sbHFo_7Gjn2nEs" />
<title>Restaurant BØFF | Good food &amp; good times - Parkhotel Horst</title>
<meta name="description" content="BØFF is the restaurant in Horst where you feel ‘at home’ at any time of day. Drinks or a business lunch, at Parkhotel Horst it is all possible." />
<meta property="og:locale" content="en_GB" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Restaurant BØFF | Good food &amp; good times - Parkhotel Horst" />
<meta property="og:description" content="BØFF is the restaurant in Horst where you feel ‘at home’ at any time of day. Drinks or a business lunch, at Parkhotel Horst it is all possible." />
<meta property="og:url" content="https://www.parkhotelhorst.nl/en/boff-restaurant/" />
<meta property="og:site_name" content="Parkhotel Horst" />
<meta property="og:image" content="https://www.parkhotelhorst.nl/assets/img/rb-hero-ULT2861-5dde1c.webp" />
<meta name="twitter:card" content="summary_large_image" />
<script class="yoast-schema-graph" type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@type":"WebPage","@id":"https://www.parkhotelhorst.nl/en/boff-restaurant/","url":"https://www.parkhotelhorst.nl/en/boff-restaurant/","name":"Restaurant BØFF | Good food & good times - Parkhotel Horst","isPartOf":{"@id":"https://www.parkhotelhorst.nl/#website"},"primaryImageOfPage":{"@id":"https://www.parkhotelhorst.nl/en/boff-restaurant/#primaryimage"},"image":{"@id":"https://www.parkhotelhorst.nl/en/boff-restaurant/#primaryimage"},"thumbnailUrl":"https://www.parkhotelhorst.nl/assets/img/rb-hero-ULT2861-5dde1c.webp","datePublished":"2022-10-18T05:39:12+00:00","dateModified":"2026-10-12T00:00:00+00:00","description":"BØFF is the restaurant in Horst where you feel ‘at home’ at any time of day. Drinks or a business lunch, at Parkhotel Horst it is all possible.","breadcrumb":{"@id":"https://www.parkhotelhorst.nl/en/boff-restaurant/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https://www.parkhotelhorst.nl/en/boff-restaurant/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https://www.parkhotelhorst.nl/en/boff-restaurant/#primaryimage","url":"https://www.parkhotelhorst.nl/assets/img/rb-hero-ULT2861-5dde1c.webp","contentUrl":"https://www.parkhotelhorst.nl/assets/img/rb-hero-ULT2861-5dde1c.webp","width":1600,"height":1067,"caption":"Two guests raising a glass of wine on the terrace of restaurant BØFF, overlooking the lake"},{"@type":"BreadcrumbList","@id":"https://www.parkhotelhorst.nl/en/boff-restaurant/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://www.parkhotelhorst.nl/"},{"@type":"ListItem","position":2,"name":"Restaurant in Horst – BØFF"}]},{"@type":"WebSite","@id":"https://www.parkhotelhorst.nl/#website","url":"https://www.parkhotelhorst.nl/","name":"Parkhotel Horst","description":"Heerlijk stijlvol genieten","inLanguage":"en-GB"}]}</script>
<script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"Do I need to book at BØFF?","acceptedAnswer":{"@type":"Answer","text":"You can book directly online: choose the date, time and number of guests and you will receive a confirmation straight away. Coming with a group of 12 or more? Call us on +31 77 397 6000."}},{"@type":"Question","name":"Can I just have coffee or lunch?","acceptedAnswer":{"@type":"Answer","text":"Yes. BØFF is open daily from 07:00 for coffee with Limburg vlaai, and the lunch menu is served from 11:00 to 17:00, inside or on the terrace."}},{"@type":"Question","name":"How late can I have dinner?","acceptedAnswer":{"@type":"Answer","text":"Dinner is served between 17:00 and 21:30. After that, you can choose from the BØFF classics until 22:00. On Fridays and Saturdays you are welcome until 01:00 for a drink after dinner."}},{"@type":"Question","name":"Are there vegetarian and vegan dishes?","acceptedAnswer":{"@type":"Answer","text":"Yes. Vegetarian and vegan dishes are always on the menu, such as the beetroot tartare with crispy goat's cheese, a vegetable risotto or vegan croquettes. Do you have dietary requirements or allergies? Our staff will be happy to advise you."}},{"@type":"Question","name":"Is BØFF suitable for children?","acceptedAnswer":{"@type":"Answer","text":"Yes, BØFF has its own children's menu: eat, relax and play."}},{"@type":"Question","name":"Can I have breakfast at BØFF without staying overnight?","acceptedAnswer":{"@type":"Answer","text":"Yes, the breakfast buffet is also available without an overnight stay for € 17.50 p.p. incl. coffee, tea, water and juice. Mon to Fri 07:00 to 10:00, Sat and Sun 08:00 to 11:00."}}]}</script>
<link rel="preconnect" href="https://app.mews.com" />
<!-- de herofoto is het grootste beeld in het eerste scherm -->
<link rel="preload" as="image" fetchpriority="high" href="/assets/img/rb-hero-ULT2861-640-5dde1c.webp" imagesrcset="/assets/img/rb-hero-ULT2861-640-5dde1c.webp 640w, /assets/img/rb-hero-ULT2861-960-5dde1c.webp 960w, /assets/img/rb-hero-ULT2861-5dde1c.webp 1600w" imagesizes="100vw" />
<link rel="preload" as="font" type="font/woff2" href="/assets/fonts/Merriweather-Bold-24dc07.woff2" crossorigin />
<link rel="preload" as="font" type="font/woff2" href="/assets/fonts/Agenda-Regular-6afa45.woff2" crossorigin />
<style>
/* Volgorde: tokens, de kop, de paginastijl, de voet (zie qa/mobiel/BOUWSTENEN.md). */
/* ==========================================================================
   BOUWSTEEN tokens — de gedeelde bodem onder alle andere bouwstenen
   --------------------------------------------------------------------------
   Wat het is : lettertypen, kleuren, maten (--zij, --sectie, --kophoogte,
                --kaart, --gap), de basisopmaak van body/h1-h4/p/ul/img, het
                omhulsel (max-breedte + zijmarge), de sectie-achtergronden
                (.blok--donker / .blok--creme / .blok--creme2), de knoppen en
                het hulpje .blokfoto (foto op volle breedte).
   Velden     : geen.  Varianten: geen.
   Mobiel     : 15 px zijmarge, 48 px sectie-padding, kop 60 px hoog.
   Bureaublad : vanaf 1024 px dezelfde maten als de oude homepage (gemeten op
                1440 en 1920 px): omhulsel 1500 px inhoud + 15 px zijmarge, h2 65 px,
                kaarttitel 40 px, kaartafstand 30 px; 150 px sectie-padding, kop 124 px
                (bovenbalk 40 + rubriekenbalk 84, zie blok-kop).
                (Bart 3 sep 20:00: "komt niet overeen met de oude homepage qua
                afmetingen" — variant D (1280/52/32) is daarom teruggedraaid.)
   Paginagrond: het donkere zeshoekenpatroon van de oude site staat op
                html,body (tegel full-bg-aef51b.svg, gecentreerd; onder
                1024 px op 1200 px breed, daarboven 'auto' = zo breed als
                het venster — exact de regels van het oude thema). Donkere
                blokken (.blok--donker) zijn DOORZICHTIG zodat het patroon
                doorloopt. De tegel gaat pas aan met de klasse html.patroon,
                die src/gedrag/patroon.js na 'load' zet — ELKE pagina met
                .blok--donker moet het fragment gedrag/patroon invoegen, anders
                blijft de grond effen #191919.
                NOOIT een patroon per blok zetten: elke tegel
                begint dan bij de bovenrand van dat blok opnieuw en op de
                naad tussen twee donkere blokken zie je de tegelrand.
   VERPLICHT  : dit bestand komt ALTIJD als eerste; elke andere bouwsteen
                rekent op deze variabelen.
   ========================================================================== */
/* ==== Nieuwe homepage — eigen opmaak, geen thema-CSS  */
@font-face { font-family:"Merriweather"; font-weight:400; font-style:normal; font-display:swap; src:url(/assets/fonts/Merriweather-Regular-faec15.woff2) format('woff2') }
@font-face { font-family:"Merriweather"; font-weight:700; font-style:normal; font-display:swap; src:url(/assets/fonts/Merriweather-Bold-24dc07.woff2) format('woff2') }
@font-face { font-family:"Agenda"; font-weight:300; font-style:normal; font-display:swap; src:url(/assets/fonts/Agenda-Light-925313.woff2) format('woff2') }
@font-face { font-family:"Agenda"; font-weight:400; font-style:normal; font-display:swap; src:url(/assets/fonts/Agenda-Regular-6afa45.woff2) format('woff2') }
@font-face { font-family:"Agenda"; font-weight:700; font-style:normal; font-display:swap; src:url(/assets/fonts/Agenda-Bold-ebd72c.woff2) format('woff2') }

:root {
  --goud:#c89b4f; --goud-op:#a87a28;
  --donker:#191919; --donker-2:#232323;
  --creme:#fffbf2; --creme-2:#fbf6e9;
  --groen:#357358;
  --tekst:#191919; --tekst-om:#5d574c;
  --licht:#f4f1ea; --licht-om:#c9c3b6;
  --rand:#e6dcc8;
  --kop:"Merriweather",Georgia,"Times New Roman",serif;
  --txt:"Agenda","Helvetica Neue",Helvetica,Arial,sans-serif;
  --zij:15px; --sectie:48px; --kophoogte:60px;
  --kaart:min(360px,calc(100vw - 30px));
  --gap:15px;
}

*,*::before,*::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100% }
html,body { background:var(--donker) }
/* De tegel komt pas ná 'load' (gedrag/patroon.js zet html.patroon). Zonder die omweg ligt de
   SVG (27 KB) in het eerste scherm en haalt de browser hem met hoge prioriteit op, vóór de
   herofoto: LCP +0,3 s, Lighthouse 96 -> 94. In het eerste scherm is het patroon toch niet
   te zien (kop + hero vullen het), dus niemand mist hem. */
html.patroon,html.patroon body { background-image:url(/assets/img/full-bg-aef51b.svg); background-repeat:repeat; background-position:center center; background-size:1200px }
body { margin:0; color:var(--tekst); font-family:var(--txt); font-size:17px; line-height:1.6; font-weight:400 }
img { max-width:100%; height:auto; display:block }
a { color:inherit }
h1,h2,h3,h4 { font-family:var(--kop); font-weight:700; margin:0; line-height:1.2 }
p { margin:0 }
ul { margin:0; padding:0; list-style:none }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer }
:focus-visible { outline:3px solid var(--goud); outline-offset:2px }

.omhulsel { max-width:1200px; margin:0 auto; padding:0 var(--zij) }
.blok { padding:var(--sectie) 0 }
.blok--donker { background:transparent; color:var(--licht) } /* doorzichtig: het patroon staat op html,body */
.blok--donker h2,.blok--donker h3 { color:#fff }
.blok--donker .kaart h3 { color:var(--tekst) }
.blok--creme { background:var(--creme) }
.blok--creme2 { background:var(--creme-2) }
h2.kop { font-size:36px; margin-bottom:20px }
.blok--donker .accent { color:var(--goud) }
.accent-groen { color:var(--groen) }
.accent-goud { color:var(--goud) }
.lood { margin-bottom:20px }
.citaat { font-family:var(--kop); font-style:italic; font-size:19px; margin-bottom:18px }

/* knoppen */
.knop { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:11px 26px;
  font-family:var(--kop); font-weight:700; font-size:16px; text-decoration:none; text-align:center; border:2px solid var(--goud); transition:background .18s,color .18s }
.knop--vol { background:var(--goud); border-color:var(--goud); color:#fff }
.knop--vol:hover { background:var(--goud-op); border-color:var(--goud-op) }
.knop--hol { background:transparent; color:var(--goud) }
.knop--hol:hover { background:var(--goud); color:#fff }
.knop--breed { width:100% }

/* gedeeld hulpje: foto op volle breedte (vlak-fotorij, tweekolom) */
.blokfoto { aspect-ratio:16/9; width:100%; object-fit:cover; margin-bottom:20px }
.rij__spoor > .blokfoto { width:var(--kaart); margin-bottom:0 }

@media (min-width:768px) {
  :root { --kaart:calc((min(100vw,1200px) - var(--zij) * 2 - var(--gap)) / 2) }
}

@media (min-width:1024px) {
  /* -- basis: volle-breedte-omhulsel, typografie, knoppen  */
  /* maten van de oude homepage: 15 px zijmarge, inhoud maximaal 1500 px (op 1440 px
     dus 1410 breed, op 1920 px 1500 met 210 px marge — precies zoals oud) */
  :root { --zij:15px; --sectie:150px; --kophoogte:124px; --gap:30px;
          --kaart:calc((100% - var(--gap) * 2) / 3) }
  html.patroon,html.patroon body { background-size:auto } /* tegel = vensterbreedte, zoals het oude thema boven 1024 px */
  body { font-size:18px; color:var(--licht) }
  .omhulsel { max-width:1530px; padding:0 var(--zij) } /* 1500 inhoud + 2 × 15, zoals oud */
  h2.kop { font-size:65px; line-height:1.24; margin-bottom:29px }
  .lood { margin-bottom:24px }
  .citaat { font-size:20px }
  .knop { min-height:55px; padding:14px 17px; font-size:17px; border-width:1px }
  .knop--breed { width:auto }
}

@media (min-width:1024px) and (max-width:1279px) {
  h2.kop { font-size:48px }
}
/* ==========================================================================
   BOUWSTEEN kop — bovenbalk, rubriekenbalk, uitklapvlak, paneel en boekknop
   --------------------------------------------------------------------------
   Fragment   : src/fragmenten/blok-kop.html
   Gedrag     : src/gedrag/blok-kop.js  (openen/sluiten van het vlak, hover-
                timers, Escape, accordeon, scrollstand, actieve rubriek,
                herkennen of de pagina een herofoto heeft)
   Ontwerp    : qa/menu/ONTWERP-MENU.md + de mockups qa/menu/definitief-menu.html
                en qa/menu/rustig-vlak.html (kader 2, het rustige vlak)
   Velden     : geen-zweefknop (paginaveld: 'ja' = geen zwevende boekknop),
                home-url, menu-label, sluit-label, submenu-label,
                knop-boek-kort, knop-boek-lang,
                score-cijfer, score-woord, score-link, score-url,
                vacatures-url/-naam, overons-url/-naam, contact-url/-naam,
                taallink-nl/-en/-de + taal-nl/-en/-de,
                m1..m5-url/-naam/-tekst/-alles met m<n>s1..s6-url/-naam,
                m2-reserveer-url/-naam,
                promotieblok m2..m5: m<n>p-label/-titel/-tekst/-link/-url/-foto
                (leeg m<n>p-titel = geen blok), m1p-label/-link met de
                machinale actie-velden actie-naam/-tekst/-url/-foto,
                m6s1/m6s2 voor het blok Meer in het paneel.
   Varianten  : geen.
   Klassen    : .kopbalk--dicht (geen hero: egaal donkere balk),
                .kopbalk--slank (gescrold, bureaublad), .kopbalk--weg (mobiel
                weggeschoven), .kopbalk--menu (paneel open),
                .kopbalk--geen-zweef (geen zwevende boekknop),
                .kopbalk--zweef-wacht (zwevende knop tijdelijk verborgen).
   Mobiel     : balk van 60 px met logo en Menu; boven een herofoto is hij
                doorschijnend (net als op het bureaublad), op een pagina zonder
                hero egaal donker (.kopbalk--dicht). Het menu is een crème
                paneel dat van rechts inschuift, met de rubrieken als accordeon
                en onderin Meer + taalkeuze. De boekknop zweeft los onderaan en
                verhuist bij een open menu naar de paneelkop.
   Bureaublad : vanaf 1024 px een bovenbalk van 40 px met contact, score en
                taal, daaronder een balk van 84 px met vijf rubrieken; voorbij
                de eigen hoogte gescrold krimpt hij naar 64 px met waas
                (.kopbalk--slank) zonder dat de pagina verspringt. Tussen 1024
                en 1199 px passen vijf rubrieken niet: dan een Menu-knop met
                hetzelfde vlak in vijf kolommen. Op een pagina zonder herofoto
                is de balk dicht donker (.kopbalk--dicht).
   Let op     : elk element zet zijn kleur expliciet — body{color} wisselt op
                1024 px van --tekst naar --licht. Geen transform op .kopbalk
                zelf (containing block van het vaste paneel, zie CLAUDE.md).
   ========================================================================== */
:root { --zacht:cubic-bezier(.2,.7,.2,1) }

/* ---------- mobiel: dichte balk van 60 px die wegschuift bij scrollen ------ */
.kopbalk { position:sticky; top:0; z-index:100; background:var(--donker);
  transition:top .3s cubic-bezier(.22,.61,.36,1) }
.kopbalk--weg { top:calc(-1 * var(--kophoogte)) }
.kopbalk__rijband { position:relative }
.kopbalk__rij { display:flex; align-items:center; justify-content:space-between; gap:14px;
  height:var(--kophoogte); padding:0 16px }
.kopbalk__logo { display:block; flex:0 0 auto; line-height:0 }
.kopbalk__logo img { width:186px; height:34px }
.kopbalk__boven,.kopbalk__nav,.kopbalk__menu,.kopbalk__vlak,.kopbalk__rijvlak,
.kopbalk__boek { display:none }
.kopbalk__ham { display:grid; grid-template-columns:24px auto; grid-auto-rows:2px;
  align-content:center; justify-content:start; column-gap:10px; row-gap:5px;
  min-height:48px; padding:0 4px; margin-right:-4px }
.kopbalk__ham span { width:24px; height:2px; background:#fff; grid-column:1 }
.kopbalk__ham b { grid-column:2; grid-row:1 / 4; align-self:center; line-height:1;
  font-family:var(--kop); font-weight:700; font-size:15px; color:#fff; white-space:nowrap }

/* Boven een herofoto is de balk ook op de telefoon doorschijnend — dezelfde
   opzet als op het bureaublad: de foto loopt door achter logo en Menu, met een
   lichte donkere waas (.kopbalk__rijvlak) voor de leesbaarheid. blok-kop.js
   zet .kopbalk--dicht op een pagina zonder hero; daar blijft de balk egaal
   donker. Deze twee regels staan bewust in een max-width-vraag: zonder die
   grens zou `:not(.kopbalk--dicht)` (twee klassen) het van `.kopbalk--slank`
   (één klasse) winnen en de slanke balk op het bureaublad zijn waas afnemen. */
@media (max-width:1023.98px) {
  .kopbalk:not(.kopbalk--dicht) { background:transparent }
  .kopbalk:not(.kopbalk--dicht) .kopbalk__rijvlak { display:block; position:absolute;
    inset:0; z-index:-1;
    background:linear-gradient(rgba(25,25,25,.55),rgba(25,25,25,.18)) }
}

/* Elke gevulde knop is het merkgoud --goud, aanwijzen maakt hem donkerder (--goud-op).
   Besluit Bart 5 sep 2026 ("de brandkleur overal"); contrast 2,9:1 bewust geaccepteerd,
   zie qa/menu/ONTWERP-MENU.md. */
.kopbalk .knop--vol { background:var(--goud); border-color:var(--goud); color:#fff }
.kopbalk .knop--vol:hover,.kopbalk .knop--vol:focus-visible { background:var(--goud-op);
  border-color:var(--goud-op); color:#fff }
.kopbalk__boek .kort { display:none }
.kopbalk :focus-visible { outline:2px solid var(--goud); outline-offset:3px }
.kopbalk__vlak :focus-visible,.paneel :focus-visible { outline-color:var(--goud-op) }
/* het paneel zelf krijgt de focus bij het openen (blok-kop.js) en mag daar niets
   van laten zien; de ring hoort bij de knoppen erin, en alleen bij toetsenbord */
.paneel:focus,.paneel:focus-visible { outline:none }
.kop-vw { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0 }

/* ---------- zwevende boekknop (onder 1024 px) -----------------------------
   De pagina houdt onderaan ruimte vrij (knop 56 + 16 eronder + 16 lucht) zodat
   het laatste blok en de voettekst altijd boven de knop uit te scrollen zijn. */
body { padding-bottom:calc(88px + env(safe-area-inset-bottom,0px)) }
.kopbalk__zweef { position:fixed; left:0; right:0; bottom:calc(16px + env(safe-area-inset-bottom,0px));
  z-index:90; display:flex; justify-content:center; pointer-events:none; transform:translateY(0);
  transition:opacity .22s ease,transform .22s ease,visibility 0s 0s }
.kopbalk__zweef .knop { pointer-events:auto; width:260px; min-height:56px; font-size:19px;
  box-shadow:0 10px 28px rgba(25,25,25,.28),0 2px 6px rgba(25,25,25,.18) }
.kopbalk--menu .kopbalk__zweef { opacity:0 }
.kopbalk--menu .kopbalk__zweef .knop { pointer-events:none }
/* De pagina heeft in het eerste scherm een eigen boekvak (net onder de hero,
   zoals de boekbalk van /kamers-suites/). Dan blijft de zwevende knop weg tot
   dat vak weggescrold is — blok-kop.js zet en haalt deze klasse weg. De
   onderruimte op body blijft staan, zodat er niets verspringt als hij verschijnt. */
.kopbalk--zweef-wacht .kopbalk__zweef { opacity:0; visibility:hidden;
  transform:translateY(10px); transition:opacity .22s ease,transform .22s ease,visibility 0s .22s }
.kopbalk--zweef-wacht .kopbalk__zweef .knop { pointer-events:none }
/* De zwevende knop vervalt in twee gevallen. 1: de pagina heeft in het eerste
   scherm al een boekknop (de hero-bouwsteen met het datumformulier) — dan is hij
   dubbelop; blok-kop.js ziet dat zelf. 2: de pagina zet het veld
   `geen-zweefknop: ja` in haar KH-blokje — restaurant- en vergaderpagina's, waar
   boeken niet de vraag van de bezoeker is. Dat gaat via een paginaveld en niet
   via een padenlijst in het script, zodat de uitzondering bij de pagina staat
   (CLAUDE.md) én de klasse al in de HTML staat: `body:has(...)` haalt de
   onderruimte dan meteen weg, zonder sprong bij het laden. */
.kopbalk--geen-zweef .kopbalk__zweef { display:none }
body:has(.kopbalk--geen-zweef) { padding-bottom:0 }

/* ---------- het schuifpaneel ---------------------------------------------- */
.paneel { position:fixed; top:0; right:0; bottom:0; width:100%; z-index:80;
  display:flex; flex-direction:column; background:var(--creme); color:var(--tekst);
  transform:translateX(100%); visibility:hidden;
  transition:transform .28s var(--zacht),visibility 0s .28s }
.paneel[data-open="ja"] { transform:translateX(0); visibility:visible;
  transition:transform .28s var(--zacht),visibility 0s 0s }
.paneel__waas { position:fixed; inset:0; background:rgba(25,25,25,.45); z-index:70;
  opacity:0; pointer-events:none; transition:opacity .28s ease }
.paneel__waas[data-open="ja"] { opacity:1; pointer-events:auto }
.paneel__kop { display:flex; align-items:center; gap:8px; flex:0 0 auto; height:60px;
  padding:0 6px 0 20px; background:var(--creme-2); border-bottom:1px solid var(--rand) }
.paneel__titel { font-family:var(--kop); font-weight:700; font-size:17px; color:var(--tekst) }
.paneel__boek { display:inline-flex; align-items:center; justify-content:center; height:40px;
  padding:0 16px; margin-left:auto; background:var(--goud); font-family:var(--txt);
  font-weight:700; font-size:15px; color:#fff; text-decoration:none; white-space:nowrap }
.paneel__boek:hover,.paneel__boek:focus-visible { background:var(--goud-op); color:#fff }
.paneel__sluit { display:flex; align-items:center; justify-content:center; width:48px; height:48px;
  padding:0; color:var(--tekst) }
.paneel__inhoud { flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden }

/* accordeon: één rubriek tegelijk open */
.paneel__hoofd { flex:1; min-height:0; overflow-y:auto; padding:6px 20px 0 }
.acc { border-bottom:1px solid var(--rand) }
.acc:last-child { border-bottom:0 }
.acc__knop { display:flex; align-items:center; justify-content:space-between; width:100%;
  padding:10px 0; text-align:left; font-family:var(--kop); font-weight:700; font-size:26px;
  line-height:1.2; color:var(--tekst) }
.acc__knop .chev { flex:0 0 16px; width:16px; height:12px; margin-right:6px; color:var(--licht-om);
  transition:transform .22s var(--zacht) }
.acc.is-actief .acc__knop { color:var(--tekst-om) }
.acc.is-open .acc__knop,.acc.is-open .acc__knop .chev,.acc__knop:hover,
.acc__knop:focus-visible { color:var(--goud-op) }
.acc.is-open .acc__knop .chev { transform:rotate(180deg) }
.acc__vak { display:grid; grid-template-rows:0fr; transition:grid-template-rows .26s var(--zacht) }
.acc.is-open .acc__vak { grid-template-rows:1fr }
.acc__vak > ul { min-height:0; overflow:hidden }
.acc__vak li:last-child { padding-bottom:10px }
.acc__vak a { display:flex; align-items:center; gap:10px; min-height:41px;
  font-family:var(--txt); font-size:18px; color:var(--tekst); text-decoration:none }
.acc__vak a:hover,.acc__vak a:focus-visible,.acc__vak a[aria-current="page"] { color:var(--goud-op) }
.acc__vak a[aria-current="page"]::before { content:""; flex:0 0 5px; width:5px; height:5px;
  border-radius:50%; background:var(--goud) }
.acc__vak a.acc__alles { min-height:44px; margin-bottom:6px; padding-bottom:2px;
  border-bottom:1px solid var(--rand); font-weight:700; font-size:16px; color:var(--goud-op) }
.acc__alles svg { flex:0 0 14px; width:14px; height:10px }
.acc__vak a.acc__alles:hover,.acc__vak a.acc__alles:focus-visible { color:var(--tekst) }

/* Meer + taalkeuze blijven onderin het paneel staan */
.paneel__extra { flex:0 0 auto; padding:10px 20px calc(env(safe-area-inset-bottom,0px) + 22px) }
.paneel__meer { display:grid; grid-template-columns:1fr 1fr; column-gap:12px }
.paneel__meer a { display:flex; align-items:center; min-height:32px; font-family:var(--txt);
  font-size:14.5px; color:var(--tekst-om); text-decoration:none }
.paneel__meer a:hover,.paneel__meer a:focus-visible { color:var(--goud-op) }
.paneel__talen { display:flex; gap:8px; margin-top:10px }
.paneel__talen a { display:flex; align-items:center; justify-content:center; min-width:56px;
  min-height:44px; padding:0 12px; border:1px solid var(--rand); background:var(--creme-2);
  font-family:var(--txt); font-weight:700; font-size:14px; letter-spacing:.06em;
  color:var(--tekst-om); text-decoration:none; transition:color .15s ease,border-color .15s ease }
.paneel__talen a:hover,.paneel__talen a:focus-visible { color:var(--tekst); border-color:var(--goud-op) }
.paneel__talen a[aria-current="true"] { background:var(--donker); border-color:var(--donker); color:#fff }

/* ---------- tablet 640-1023 px: zelfde opbouw, meer lucht ----------------- */
@media (min-width:640px) and (max-width:1023.98px) {
  :root { --kophoogte:72px }
  .kopbalk__rij { padding:0 28px }
  .kopbalk__logo img { width:220px; height:40px }
  .paneel { width:440px }
  .kopbalk__zweef { justify-content:flex-end; padding-right:28px }
}

/* ==========================================================================
   BUREAUBLAD vanaf 1024 px
   ========================================================================== */
@media (min-width:1024px) {
  body { padding-bottom:0 }
  .kopbalk { background:transparent;
    transition:background-color .26s var(--zacht),margin-bottom .26s var(--zacht) }
  .kopbalk--weg { top:0 }
  .kopbalk--slank { margin-bottom:60px; background-color:rgba(25,25,25,.82);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px) }
  .kopbalk__ham,.kopbalk__zweef,.paneel,.paneel__waas { display:none }

  /* balk 1: bovenbalk 40 px, klapt in bij scrollen */
  .kopbalk__boven { display:block; max-height:40px; overflow:hidden; background:var(--donker);
    transition:max-height .26s var(--zacht) }
  .kopbalk--slank .kopbalk__boven { max-height:0 }
  .kopbalk__bovenrij { display:flex; align-items:center; justify-content:space-between; gap:24px;
    height:40px; max-width:1530px; margin:0 auto; padding:0 var(--zij) }
  .kopbalk__groep { display:flex; align-items:center; gap:22px; min-width:0 }
  .kopbalk__extra { display:flex; align-items:center; gap:22px }
  .kopbalk__extra a { display:flex; align-items:center; min-height:40px; font-family:var(--txt);
    font-size:13.5px; color:var(--licht); text-decoration:none; white-space:nowrap;
    transition:color .15s ease }
  .kopbalk__extra a:hover,.kopbalk__extra a:focus-visible { color:var(--goud) }
  .kopbalk__score { display:flex; align-items:center; gap:9px; white-space:nowrap }
  .kopbalk__google { width:64px; height:21px }
  .kopbalk__cijfer { font-family:var(--kop); font-weight:700; font-size:15px; color:#fff }
  .kopbalk__woord { font-family:var(--txt); font-weight:700; font-size:13.5px; color:#fff }
  .kopbalk__reviews { font-family:var(--txt); font-size:13px; color:var(--licht-om);
    text-decoration:none; transition:color .15s ease }
  .kopbalk__reviews:hover,.kopbalk__reviews:focus-visible { color:#fff }
  .kopbalk__talen { display:flex; align-items:center; gap:2px; margin-left:6px }
  .kopbalk__talen a { display:flex; align-items:center; min-height:40px; padding:0 7px;
    font-family:var(--txt); font-size:13px; color:var(--licht-om); text-decoration:none;
    transition:color .15s ease }
  .kopbalk__talen a:hover,.kopbalk__talen a:focus-visible { color:#fff }
  .kopbalk__talen a[aria-current="true"] { color:var(--goud); font-weight:700 }

  /* balk 2: hoofdbalk 84 px over de foto, slank 64 px */
  .kopbalk__rij { position:relative; height:84px; max-width:1530px; margin:0 auto;
    padding:0 var(--zij); gap:24px; transition:height .26s var(--zacht) }
  /* het donkere verloop hoort bij de BAND, niet bij de rij: anders stopt het op
     1530 px en schemert de herofoto links en rechts van de balk door */
  .kopbalk__rijvlak { display:block; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(rgba(25,25,25,.45),rgba(25,25,25,.12));
    transition:opacity .26s var(--zacht) }
  /* de hoofdbalk is doorschijnend zoals het oude menu (Bart 4 sep: "chique"): de
     herofoto loopt door achter logo en rubrieken, met alleen een lichte waas voor de
     leesbaarheid en een dunne witte lijn van logo tot knop eronder; weg bij slank/dicht */
  .kopbalk__rij::after { content:""; position:absolute; left:var(--zij); right:var(--zij);
    bottom:0; height:1px; background:rgba(255,255,255,.7); pointer-events:none;
    transition:opacity .26s var(--zacht) }
  .kopbalk--slank .kopbalk__rij::after,.kopbalk--dicht .kopbalk__rij::after { opacity:0 }
  .kopbalk--dicht .kopbalk__rijvlak { background:var(--donker) }
  .kopbalk--slank .kopbalk__rijvlak { opacity:0 }
  .kopbalk--slank .kopbalk__rij { height:64px }
  .kopbalk__logo img { width:240px; height:44px;
    transition:width .26s var(--zacht),height .26s var(--zacht) }
  .kopbalk--slank .kopbalk__logo img { width:196px; height:36px }
  .kopbalk__boek { display:inline-flex; flex:0 0 auto; min-height:55px; padding:0 22px;
    font-size:18px; white-space:nowrap;
    transition:min-height .26s var(--zacht),background-color .15s ease,color .15s ease }
  .kopbalk--slank .kopbalk__boek { min-height:44px; font-size:16px }
  .kopbalk__boek .lang { display:inline }

  /* de rubrieken: naam is een link, het pijltje is de knop */
  .kopbalk__nav { display:flex; flex:1 1 auto; min-width:0; justify-content:center }
  .rubrieken { display:flex; align-items:center; gap:30px }
  .rub { position:relative }
  .rub__rij { display:flex; align-items:center; gap:6px; padding:6px 0 7px }
  .rub__link { font-family:var(--kop); font-weight:700; font-size:18px; line-height:1.2;
    color:#fff; text-decoration:none; white-space:nowrap; transition:color .15s ease }
  .rub.is-actief .rub__link { color:var(--licht-om) }
  .rub__knop { display:flex; align-items:center; justify-content:center; width:18px; height:24px;
    padding:0; color:var(--licht-om); transition:color .15s ease }
  .rub .chev { width:11px; height:8px }
  .rub.is-open .rub__link,.rub.is-open .rub__knop,.rub__link:hover,.rub__knop:hover,
  .rub__link:focus-visible,.rub__knop:focus-visible { color:var(--goud) }
  .rub.is-open .chev { transform:rotate(180deg) }
  .chev { transition:transform .2s ease }

  /* het gedeelde uitklapvlak: één element, per rubriek een deel, vaste hoogte */
  .kopbalk__vlak { display:block; position:absolute; top:100%; left:0; right:0; z-index:25;
    height:0; overflow:hidden; background:var(--creme);
    box-shadow:0 30px 44px -26px rgba(25,25,25,.4); transition:height .16s ease-in }
  .kopbalk__vlak[data-open] { height:352px; transition:height .24s var(--zacht) }
  .vlak__binnen { position:relative; height:352px; max-width:1530px; margin:0 auto }
  .vlak__deel { position:absolute; top:0; left:0; right:0; height:352px; display:grid;
    grid-template-columns:300px 1fr 320px; column-gap:56px; padding:40px var(--zij) 0;
    opacity:0; transform:translateY(-6px); pointer-events:none; visibility:hidden;
    transition:opacity .09s linear,transform .09s linear,visibility 0s .09s }
  .vlak__deel.is-aan { opacity:1; transform:translateY(0); pointer-events:auto; visibility:visible;
    transition:opacity .14s linear .06s,transform .2s var(--zacht) .04s,visibility 0s 0s }
  /* kolom A: naam, één regel uitleg, en de link naar de rubriekpagina */
  .vlak__naam { font-family:var(--kop); font-weight:700; font-size:26px; line-height:1.25;
    color:var(--tekst) }
  .vlak__tekst { margin-top:8px; font-family:var(--txt); font-size:16.5px; line-height:1.5;
    color:var(--tekst-om) }
  .vlak__alles { display:inline-flex; align-items:center; gap:6px; margin-top:18px;
    font-family:var(--txt); font-weight:700; font-size:16.5px; line-height:1.4;
    color:var(--tekst); text-decoration:none; transition:color .15s ease }
  .vlak__alles svg { flex:0 0 7px; width:7px; height:11px }
  .vlak__alles:hover,.vlak__alles:focus-visible { color:var(--goud-op) }
  /* kolom B: de links van de rubriek, zonder ondertitel */
  .vlak__links--twee { columns:2; column-gap:40px }
  /* tweede kolom rechts (Omgeving: routes), zelfde maat als vlak__links--twee */
  .vlak__lijst--kolommen { display:grid; grid-template-columns:1fr 1fr; column-gap:40px; align-content:start }
  .vlak__links li { break-inside:avoid; -webkit-column-break-inside:avoid }
  .vlak__links a { display:block; padding:10px 0; text-decoration:none; color:var(--tekst) }
  .vlak__links a > span { display:flex; align-items:center; gap:10px; font-family:var(--txt);
    font-weight:700; font-size:19px; line-height:1.35; color:var(--tekst);
    transition:color .15s ease }
  .vlak__links a:hover > span,.vlak__links a:focus-visible > span,
  .vlak__links a[aria-current="page"] > span { color:var(--goud-op) }
  .vlak__links a[aria-current="page"] > span::before { content:""; flex:0 0 5px; width:5px;
    height:5px; border-radius:50%; background:var(--goud) }
  .vlak__actie { display:inline-block; margin-top:10px; font-family:var(--txt); font-weight:700;
    font-size:19px; line-height:1.35; color:var(--goud-op); text-decoration:none;
    transition:color .15s ease }
  .vlak__actie:hover,.vlak__actie:focus-visible { color:var(--tekst) }
  /* kolom C: het promotieblok — één link, dus overal klikken werkt */
  .vlak__promo { display:block; background:var(--creme-2); color:var(--tekst); text-decoration:none }
  .vlak__promofoto { display:block; width:320px; height:150px; object-fit:cover;
    background:var(--creme-2); transition:opacity .2s ease }
  .vlak__promo:hover .vlak__promofoto,.vlak__promo:focus-visible .vlak__promofoto { opacity:.88 }
  .vlak__promotekst { display:block; padding:14px 18px 16px }
  .vlak__promolabel { display:block; font-family:var(--txt); font-size:11px; line-height:1.2;
    letter-spacing:.12em; text-transform:uppercase; color:var(--goud-op) }
  .vlak__promotitel { display:block; margin-top:6px; font-family:var(--kop); font-weight:700;
    font-size:18px; line-height:1.25; color:var(--tekst) }
  /* de actietekst van de machine is langer dan één regel; hij mag er twee vullen
     en wordt daarna afgekapt, zodat het blok altijd even hoog blijft */
  .vlak__promoregel { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; margin-top:4px; font-family:var(--txt); font-size:15px;
    line-height:1.4; color:var(--tekst-om) }
  .vlak__promolink { display:flex; align-items:center; gap:6px; margin-top:10px;
    font-family:var(--txt); font-weight:700; font-size:15px; line-height:1.4;
    color:var(--tekst); transition:color .15s ease }
  .vlak__promolink svg { flex:0 0 7px; width:7px; height:11px }
  .vlak__promo:hover .vlak__promolink,.vlak__promo:focus-visible .vlak__promolink { color:var(--goud-op) }
  .vlak__deel--alle { display:none }
}

/* ---------- 1024-1199 px: Menu-knop met alle vijf rubrieken als kolommen --- */
@media (min-width:1024px) and (max-width:1199.98px) {
  .kopbalk__extra li:nth-child(3),.kopbalk__woord,.kopbalk__reviews { display:none }
  .kopbalk__logo img { width:220px; height:40px }
  .kopbalk--slank .kopbalk__logo img { width:196px; height:36px }
  .kopbalk__nav { display:none }
  .kopbalk__menu { display:inline-flex; align-items:center; gap:12px; flex:0 0 auto;
    margin-left:auto; min-height:44px; padding:0 16px; border:1px solid #fff;
    font-family:var(--kop); font-weight:700; font-size:16px; color:#fff;
    transition:color .15s ease,border-color .15s ease }
  .kopbalk__menu:hover,.kopbalk__menu:focus-visible,
  .kopbalk__menu[aria-expanded="true"] { color:var(--goud); border-color:var(--goud) }
  .kopbalk__hamvorm { display:block; width:22px }
  .kopbalk__hamvorm span { display:block; width:22px; height:2px; margin:4px 0; background:currentColor }
  .kopbalk__vlak[data-open] { height:380px }
  .vlak__binnen,.vlak__deel { height:380px }
  .vlak__deel--alle { display:grid; grid-template-columns:1fr; padding:28px var(--zij) 0 }
  .vlak__alle { display:grid; grid-template-columns:repeat(5,1fr); gap:0 20px }
  .vlak__alle .vlak__naam { font-size:17px; line-height:1.25 }
  .vlak__alle .vlak__alles { margin:8px 0 8px; font-size:14px }
  .vlak__alle .vlak__links a { padding:6px 0 }
  .vlak__alle .vlak__links a > span { font-weight:400; font-size:14.5px }
  .vlak__voet { position:absolute; left:var(--zij); right:var(--zij); bottom:0; height:48px;
    display:flex; align-items:center; gap:28px; border-top:1px solid var(--rand);
    font-family:var(--txt); font-size:13.5px; color:var(--tekst-om) }
  .vlak__voet a { color:var(--tekst); text-decoration:none }
  .vlak__voet a:hover,.vlak__voet a:focus-visible { color:var(--goud-op) }
}
/* ---------- krappere rubrieken tussen 1200 en 1399 px --------------------- */
@media (min-width:1200px) and (max-width:1399.98px) {
  .kopbalk__logo img { width:220px; height:40px }
  .rubrieken { gap:22px }
  .rub__link { font-size:16px }
}
@media (min-width:1600px) { .rubrieken { gap:36px } }

/* minder beweging: alles werkt, niets glijdt */
@media (prefers-reduced-motion:reduce) {
  .kopbalk,.kopbalk *,.paneel,.paneel__waas,.kopbalk__vlak,.kopbalk__vlak * {
    transition:none !important; animation:none !important }
}

/* ==========================================================================
   BOUWSTEEN reviews-tripadvisor — het reviewblok in Tripadvisor-vormtaal
   --------------------------------------------------------------------------
   Fragment   : src/fragmenten/blok-reviews-tripadvisor.html
   Gedrag     : src/gedrag/blok-reviews-tripadvisor.js  (alleen de pijlknop)
   Mockup     : qa/reviews/tripadvisor-stijl.html, variant A2 (goedgekeurd).

   Velden     : ta-kop, ta-rij-label,
                ta-score, ta-score-bolletjes, ta-woord, ta-aantal,
                ta-aantal-label, ta-url, ta-positie,
                ta-bron-label, ta-bron-label-paneel, ta-meer-lezen, ta-pijl-label,
                ta-deel1..6-naam / -score / -score-tekst,
                ta-r1..10-naam / -datum / -bolletjes / -titel / -tekst / -meer.

   Twee cijfers per deelscore, met opzet:
     -score        rekencijfer met een PUNT (4.4)  -> de balkbreedte
     -score-tekst  weergavecijfer (4,4 / 4.4)      -> wat de bezoeker leest
   De balk rekent zelf: width = --score / 5 * 100%. Wie 4.4 in 4.6 verandert,
   ziet de balk meebewegen; er hoeft niets aan de CSS te gebeuren.

   Bolletjes zijn JS-loos: vijf lege <span>'s in .ta-bollen, en het aantal volle
   staat in data-vol (0 t/m 5). De CSS kleurt de eerste zoveel in.

   Kleuren    : Tripadvisor-groen #00aa6c, grijs #545454, randen #e0e0e0.
                Sectie-achtergrond = --creme. Het blok zet zelf color:var(--tekst),
                want vanaf 1024 px staat body op var(--licht) (lichte letter voor de
                donkere blokken) — zonder deze regel wordt het blok onleesbaar.
   Mobiel     : (7 sep 2026, wens Stijn) het scorepaneel is de EERSTE kaart in het
                veegspoor, gevolgd door de reviewkaarten: allemaal 80 % breed, even hoog,
                met scroll-snap (geen JS nodig, de pijl staat uit). De deelscores staan
                per rij op één regel (naam, balk, cijfer), net als op het bureaublad.
                Daarvoor staat het paneel in de HTML ín .ta-strook, vóór het spoor; op
                mobiel is .ta-strook zelf het veegspoor en staat .ta-strook__spoor op
                display:contents, zodat de kaarten naast het paneel komen.
   Bureaublad : (>=1024 px) ÉÉN rij (Bart, 5 sep 2026): scorepaneel links op een
                derde van de breedte (deelscores onder elkaar), kaartenstrook rechts op
                twee derde met 2,5 kaarten in beeld en de ronde pijlknop; even hoog.
                Zo past het blok mét de lucht van --sectie op één scherm (~870 px).

   Tien reviews, gelijke kaarthoogte: de tekst wordt op BEIDE formaten op vijf
   regels afgekapt (`-webkit-line-clamp:5`), want de langste review is bijna 1.000
   tekens. De browser zet daar zelf de puntjes. "Meer lezen" staat daarom NIET in
   de tekst zelf (dat zou mee afgekapt worden) maar als eigen regel eronder, aan
   het veld `ta-rN-meer`; de kaarten in een flex-strook zijn onderling toch al
   even hoog.
   Nodig      : tokens. Geen andere bouwsteen.
   Variant    : op het patroon — wikkel de include in <div class="ta-op-patroon">;
                zie de regels onderaan dit bestand (13 sep 2026).
   ========================================================================== */
.blok-ta { color:var(--tekst) }
.blok-ta { --ta-groen:#00aa6c; --ta-grijs:var(--tekst-om, #5d574c); --ta-rand:var(--rand, #e6dcc8); --ta-baan:var(--licht, #f4f1ea); --ta-gap:16px }

/* -- bolletjes -------------------------------------------------------- */
.ta-bollen { display:inline-flex; align-items:center; gap:4px; vertical-align:middle }
.ta-bollen > span { width:12px; height:12px; border-radius:50%; border:1.5px solid var(--ta-groen); background:transparent; flex:0 0 auto }
.ta-bollen[data-vol="1"] > span:nth-child(-n+1),
.ta-bollen[data-vol="2"] > span:nth-child(-n+2),
.ta-bollen[data-vol="3"] > span:nth-child(-n+3),
.ta-bollen[data-vol="4"] > span:nth-child(-n+4),
.ta-bollen[data-vol="5"] > span:nth-child(-n+5) { background:var(--ta-groen) }
.ta-bollen--klein > span { width:11px; height:11px }

/* -- blokkop ---------------------------------------------------------- */
.ta-kop { display:flex; flex-direction:column; gap:10px; margin-bottom:20px }
/* h2.kop uit tokens zet zelf een margin-bottom; die moet hier weg, anders staat de
   titel in de kopregel hoger dan de scoreregel ernaast (align-items:flex-end telt de
   marge mee). Vandaar de zwaardere kiezer. */
.blok-ta h2.ta-kop__titel { color:var(--tekst); margin-bottom:0 }
.ta-kop__score { display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:15px; color:var(--ta-grijs) }
.ta-kop__cijfer { font-weight:700; font-size:17px; color:var(--tekst) }
.ta-aantal { color:var(--ta-grijs); text-decoration:underline; text-underline-offset:3px }
.ta-aantal:hover { color:var(--goud-op) }

/* -- scorepaneel ------------------------------------------------------ */
.ta-paneel { flex:0 0 80%; scroll-snap-align:start; background:#fff; border:1px solid var(--ta-rand); border-radius:12px; padding:20px;
  display:flex; flex-direction:column }
.ta-paneel__merk { display:block; height:48px; width:auto; margin-bottom:14px }
.ta-paneel__kop { display:flex; align-items:center; gap:14px }
.ta-paneel__kop > div { min-width:0 }
.ta-paneel__cijfer { font-weight:700; font-size:44px; line-height:1; color:var(--tekst) }
.ta-paneel__woord { font-weight:700; font-size:18px; color:var(--tekst) }
.ta-paneel__regel { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:4px; font-size:14px; color:var(--ta-grijs) }
.ta-paneel__rang { margin-top:12px; padding-top:12px; border-top:1px solid var(--ta-rand); font-size:15px; color:var(--tekst); font-weight:700 }
.ta-bron { font-size:13px; color:var(--ta-grijs); margin-top:6px }
.ta-bron b { color:var(--ta-groen) }

/* -- deelscores ------------------------------------------------------- */
.ta-deel { margin-top:auto; padding-top:16px; display:grid; gap:10px }
.ta-deel__rij { display:grid; grid-template-columns:96px 1fr; align-items:center; gap:10px }
.ta-deel__naam { font-size:13px; color:var(--tekst) }
.ta-deel__meting { display:flex; align-items:center; gap:10px }
.ta-deel__baan { flex:1 1 auto; height:8px; border-radius:4px; background:var(--ta-baan); overflow:hidden }
.ta-deel__vul { display:block; height:100%; border-radius:4px; background:var(--ta-groen); width:calc(var(--score) / 5 * 100%) }
.ta-deel__cijfer { font-size:14px; font-weight:700; color:var(--tekst); min-width:26px; text-align:right }

/* -- kaartenstrook ---------------------------------------------------- */
/* Op mobiel is .ta-strook het veegspoor (paneel + kaarten); .ta-strook__spoor doet
   dan niets (display:contents). Op het bureaublad draait dat om: zie hieronder. */
.ta-strook { position:relative; display:flex; gap:var(--ta-gap); overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:6px; margin-right:calc(var(--zij) * -1); padding-right:var(--zij) }
.ta-strook__spoor { display:contents }
.ta-kaart { flex:0 0 80%; scroll-snap-align:start; background:#fff; border:1px solid var(--ta-rand);
  border-radius:12px; padding:20px; display:flex; flex-direction:column; gap:10px }
.ta-kaart__naam { font-weight:700; font-size:16px; color:var(--tekst) }
.ta-kaart__datum { color:var(--ta-grijs); font-weight:400 }
.ta-kaart__titel { font-weight:700; font-size:16px; color:var(--tekst) }
.ta-kaart__tekst { font-size:16px; line-height:1.6; color:var(--tekst);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:5; overflow:hidden }
.ta-kaart__meerregel { margin-top:-2px }
.ta-kaart__meer { font-weight:700; color:var(--tekst); text-decoration:none }
.ta-kaart__meer:hover { color:var(--goud-op); text-decoration:underline }
.ta-kaart__bron { margin-top:auto; padding-top:12px }
.ta-strook__pijl { display:none }

@media (min-width:1024px) {
  /* Eén rij (idee Bart, 5 sep 2026): het scorepaneel links op een derde van de breedte,
     de kaartenstrook rechts op twee derde, even hoog. Zo past het blok op één scherm
     mét de lucht van --sectie eromheen. De kop staat over de volle breedte erboven. */
  .ta-kop { flex-direction:row; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:8px }
  .ta-kop__score { font-size:16px; padding-bottom:6px }

  .ta-paneel { flex:none; padding:26px 28px 24px }
  .ta-paneel__merk { height:52px; margin-bottom:14px }
  .ta-paneel__cijfer { font-size:48px }
  .ta-paneel__woord { font-size:19px }
  .ta-paneel__regel { font-size:15px }
  .ta-paneel__rang { margin-top:10px; padding-top:10px }
  .ta-bron { margin-top:4px }

  .ta-deel { padding-top:20px; grid-template-columns:1fr; gap:10px }
  .ta-deel__rij { grid-template-columns:120px 1fr; align-items:center; gap:12px }
  .ta-deel__naam { font-size:15px }

  /* 2,5 kaarten in beeld van de tien in de rechterkolom: de derde staat half zichtbaar,
     met de ronde pijlknop erover. */
  .ta-strook { display:grid; grid-template-columns:1fr 2fr; align-items:stretch; overflow:visible; scroll-snap-type:none;
    margin-right:0; padding-right:0; padding-bottom:0 }
  .ta-strook > * { min-width:0 }
  .ta-strook__spoor { display:flex; gap:var(--ta-gap); overflow:hidden; scroll-behavior:smooth }
  .ta-kaart { flex:0 0 calc((100% - 2 * var(--ta-gap)) / 2.5); padding:24px; gap:12px }
  .ta-kaart__tekst { min-height:calc(5 * 1.6em) }
  .ta-strook__pijl { display:flex; align-items:center; justify-content:center; position:absolute; right:0; top:50%;
    transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:#fff; border:1px solid var(--donker);
    color:var(--donker); font-size:20px; line-height:1; cursor:pointer }
  .ta-strook__pijl:hover { background:var(--creme-2) }
}

/* --------------------------------------------------------------------------
   VARIANT op het patroon (13 sep 2026, wens Stijn): wikkel de include in
   <div class="ta-op-patroon"> … </div>. De sectie wordt doorzichtig, zodat het
   zeshoekenpatroon van de paginagrond erdoorheen komt; kop en scoreregel in de
   lichte kleur. Dit is precies wat /evenement/ (.ev-ta) en /kerst/ (.kh-ta) al
   met eigen pagina-CSS deden; sinds 13 sep staat het blok zo op alle kamer-,
   arrangement-, lander- en andere pagina's buiten het zakelijke deel. Alleen
   de homepage houdt de crème sectie. Twee klassen, dus dit wint ook van de
   schil blok-reviews-tripadvisor-oudpagina.css op de WordPress-kopieën.
   -------------------------------------------------------------------------- */
.ta-op-patroon .blok-ta { background:transparent }
.ta-op-patroon .blok-ta .ta-kop h2,
.ta-op-patroon .blok-ta .ta-kop__cijfer { color:var(--licht, #f4f1ea) }
.ta-op-patroon .blok-ta .ta-kop__score,
.ta-op-patroon .blok-ta .ta-kop .ta-aantal { color:var(--licht-om, #c9c3b6) }

/* ==========================================================================
   PAGINASTIJL pagina-restaurant-boff-v3 — v3, 5 okt 2026: wellness-finetunes
   (plan ~/.claude/plans/structured-beaming-kite.md); v2 (pagina-restaurant-boff-v2.css) is bij de promotie op 12 okt 2026 opgeruimd en staat in git.
   v3-recepten (bron pagina-wellness-v2.css): hero clamp(680, 46vw, 940) + brandpunt --rb-hero-focus,
   geen feitenregel; intropaneel 120 px over de hero (telefoon 64); mozaiek, momentenkaarten en zakelijk-kaarten 1440 breed, rijen 300,
   diepte (rb-omg--diep); menukaartblok (4b) met paneel tot de rechter schermrand en tekstkolom
   gecentreerd; slot clamp(520, 36vw, 760) + brandpunt --rb-slot-focus.
   Daarna in het style-blok: stijl/blok-reviews-tripadvisor-lus.
   Oorspronkelijke kop: — de nieuwe hoofdpagina van restaurant BØFF (reviewversie)
   --------------------------------------------------------------------------
   Sjabloon   : src/fragmenten/pagina-restaurant-boff-v3.html
   Gedrag     : src/gedrag/pagina-restaurant-boff-v3.js
   Teksten    : KH-blok van src/paginas/restaurant-boff/index.html (rb-) +
                src/teksten/seizoenslander-v2.nl.txt (Mews-basis, contact, labels, sz-)
   Pagina     : /restaurant-boff/ (live sinds 12 okt 2026; was reviewpagina /restaurant-boff-v3/)
   Ontwerp    : blokkenkiezer 1a-2b-3f-4b-5b-6c-7e-8a-9a-10b + 2 aanpassingen (5b met pop-ups,
                8a met de FAQ zoals /wellness/). De opties stonden in een podium van 1200 px met
                container queries (.pv .bNx-); hier omgezet naar de klassenprefix rb-, @media in
                plaats van @container, en kleuren en lettertypen uit tokens.css. Hero, intro,
                menukaart, evenementenslider, FAQ en Tripadvisor komen uit pagina-dineren-v2.css;
                mozaiek, tegels en slot uit pagina-wellness-v2.css; de pop-up is de .zd-rp-pop-up
                van pagina-dineren-v2.css met een foto en zonder slider.

   Breekpunten: bureaublad is de basis (zoals in de kiezer).
                <= 1023 px  4b stapelt (paneel boven, foto eronder, zoals /herfst/),
                            2b zet de tegels onder de tekst, 3f drie kaarten + twee,
                            5b en 8a twee kolommen, 9a scorepaneel als eerste kaart in de veegrij
                <= 767 px   telefoon (de @container-regels uit de kiezer)

   Patroon    : nergens een eigen achtergrond; het zeshoekenpatroon staat op
                html,body (tokens + gedrag/patroon.js).
   Kleur      : elk cremepaneel zet zelf color:var(--tekst). Gouden TEKST op creme of wit
                is var(--goud-op); gouden lijnen en iconen blijven var(--goud).
   Geen eyebrows, geen tags op foto's. Geen gouden ruitjes; hairlines of middelpunt.
   ========================================================================== */

/* -- gedeeld ------------------------------------------------------------- */
.rb { color:var(--licht, #f4f1ea); font-size:16px; line-height:1.55 }
.rb *,.rb *::before,.rb *::after { box-sizing:border-box }
.rb a { text-decoration:none }
.rb-wrap { width:min(1120px, calc(100% - 60px)); margin-inline:auto; position:relative }
.rb-sec { position:relative; padding:60px 0 }
.rb h2,.rb h3 { color:#fff }
.rb-h2 { font-size:40px; line-height:1.2 }
.rb-goud { color:var(--goud, #c89b4f) }
.rb-ico { flex:none; color:var(--goud, #c89b4f) }

/* cremepaneel met donkere tekst */
.rb-paneel { background:var(--creme, #fffbf2); border-radius:3px; color:var(--tekst, #191919) }
.rb-paneel h1,.rb-paneel h2,.rb-paneel h3 { color:var(--tekst, #191919) }
.rb-paneel .rb-goud { color:var(--goud-op, #a87a28) }

/* knoppen: hoekig, goud, Merriweather 700 (zd-btn) */
.rb-knop { display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--goud, #c89b4f); color:#fff; border:1px solid var(--goud, #c89b4f); border-radius:0;
  font-family:var(--kop, "Merriweather", Georgia, "Times New Roman", serif); font-weight:700;
  font-size:17px; line-height:1; padding:17px 33px; white-space:nowrap; text-align:center;
  transition:background .18s, color .18s, border-color .18s }
.rb-knop:hover { background:var(--goud-op, #a87a28); border-color:var(--goud-op, #a87a28); color:#fff }
.rb-knop--ghost { background:transparent; border-color:#fff; color:#fff }
.rb-knop--ghost:hover { background:#fff; border-color:#fff; color:var(--tekst, #191919) }
.rb-knop--ghost-donker { background:transparent; border-color:var(--tekst, #191919); color:var(--tekst, #191919) }
.rb-knop--ghost-donker:hover { background:var(--tekst, #191919); border-color:var(--tekst, #191919); color:#fff }
.rb-knop--klein { font-size:14.4px; padding:14px 29px }
.rb-knoppen { display:flex; gap:12px; justify-content:center; flex-wrap:wrap }

/* tekstlink met pijltje */
.rb-link { display:inline-flex; align-items:center; gap:6px; color:var(--goud-op, #a87a28);
  font-weight:700; font-size:14px; letter-spacing:.02em }
.rb-link:hover { text-decoration:underline }
.rb-pijltje { flex:none }

/* vinkjes (zd-checks) op het patroon */
.rb-checks { list-style:none; margin:0; padding:0; display:grid; gap:14px }
.rb-checks li { display:flex; align-items:flex-start; gap:14px; font-size:16px; line-height:22px; color:var(--licht, #f4f1ea) }
.rb-checks svg { margin-top:2px }

/* ankers landen onder de kopbalk */
#dag,#kaart,#plek,#zakelijk,#praktisch { scroll-margin-top:var(--kophoogte) }
html { scroll-behavior:smooth }

/* ==========================================================================
   1a — hero: volle foto met donker verloop, tekst wit gecentreerd,
   intropaneel hangt 120 px over de onderrand (v3). Schuift onder de doorschijnende kop.
   ========================================================================== */
.rb-hero { position:relative; height:calc(clamp(680px, 46vw, 940px) + var(--kophoogte)); overflow:hidden;
  margin-top:calc(var(--kophoogte) * -1); color:#fff }
.rb-hero__foto { position:absolute; inset:0; background:var(--donker-2, #232323) }
.rb-hero__foto img { width:100%; height:100%; object-fit:cover;
  /* brandpunt op de gezichten (ca. 15-45 % van boven): zo blijven de drie vrouwen op 1920 en 2560 in beeld */
  object-position:50% var(--rb-hero-focus, 25%) }
.rb-hero__foto::after { content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(25,25,25,.55) 0%, rgba(25,25,25,.45) 35%, rgba(25,25,25,.7) 62%, rgba(25,25,25,.93) 100%) }
.rb-hero__wrap { height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; padding-top:var(--kophoogte); padding-bottom:140px }
.rb-hero__tekst { max-width:760px; display:flex; flex-direction:column; align-items:center; gap:18px }
.rb-hero__kop { font-size:64px; line-height:1.08; color:#fff }
.rb-hero__sub { font-size:20px; line-height:1.5; color:rgba(255,255,255,.92); max-width:720px }
.rb-hero .rb-knoppen { margin-top:8px }

/* ==========================================================================
   2b — over BØFF: cremepaneel, tekst en knoppen links, 2x2 icoontegels rechts
   (.sz-intro van /herfst/; tegelstijl zd-tegel: wit, rand, radius 8)
   ========================================================================== */
.rb-intro { padding:0 0 64px; margin-top:-120px; z-index:2 } /* v3: paneel hangt over de hero */
.rb-intro__paneel { display:grid; grid-template-columns:minmax(0,1fr) 440px; gap:56px; align-items:center; padding:56px 60px }
.rb-intro__tekstkol { display:flex; flex-direction:column; gap:18px; align-items:flex-start }
.rb-intro__paneel .rb-h2 { font-size:36px }
.rb-intro__tekst { font-size:17px; line-height:1.6; color:var(--tekst-om, #5d574c) }
.rb-intro__tekst a { color:var(--tekst, #191919); text-decoration:underline; text-decoration-color:var(--goud, #c89b4f); text-underline-offset:3px }
.rb-intro__knoppen { display:flex; flex-wrap:wrap; gap:12px; margin-top:6px }
.rb-intro__tegels { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px }
.rb-icotegel { background:#fff; border:1px solid var(--rand, #e6dcc8); border-radius:8px; height:168px; padding:22px 0 18px;
  display:grid; grid-template-rows:1fr auto; justify-items:center; align-items:center }
.rb-icotegel span { width:100%; min-height:82px; padding:0 14px; font-size:15px; line-height:1.35; text-align:center; color:var(--tekst-om, #5d574c) }
.rb-icotegel b { display:block; color:var(--tekst, #191919); margin-bottom:2px }

/* ==========================================================================
   3f — op elk moment van de dag: kop en intro gecentreerd op het patroon,
   vijf cremekaarten op een rij (foto 160, tijd goud, naam, regel, tekstlinks)
   ========================================================================== */
.rb-dag__kop { display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; max-width:760px; margin:0 auto 32px }
.rb-dag__intro { font-size:18px; line-height:1.6; color:var(--licht-om, #c9c3b6) }
.rb-dag__rij { list-style:none; margin:0; padding:0; display:flex; gap:16px }
.rb-dkaart { flex:1 1 0; min-width:0; display:flex; flex-direction:column; overflow:hidden;
  background:var(--creme, #fffbf2); border:1px solid var(--rand, #e6dcc8); border-radius:3px; color:var(--tekst, #191919) }
.rb-dkaart img { display:block; width:100%; height:160px; object-fit:cover }
.rb-dkaart__body { flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:16px 16px 20px }
.rb-dkaart__tijd { font-family:var(--kop, "Merriweather", Georgia, "Times New Roman", serif); font-weight:700; font-size:13px;
  line-height:1.3; color:var(--goud-op, #a87a28) }
.rb .rb-dkaart__naam { font-size:18px; line-height:1.3; color:var(--tekst, #191919) }
.rb-dkaart__tekst { font-size:14.5px; line-height:1.5; color:var(--tekst-om, #5d574c) }
.rb-dkaart__links { display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin-top:auto; padding-top:8px }
.rb-dkaart__links .rb-link { display:inline; font-size:13.5px; line-height:1.3 }
/* pijl direct achter het laatste woord, ook als de link over twee regels loopt */
.rb-dkaart__links .rb-pijltje { display:inline; vertical-align:-2px; margin-left:4px }
.rb-dag__knoppen { gap:14px; margin-top:32px }
/* breder (Stijn 6 okt 2026): dezelfde 1440-wrap als het mozaiek; kaarten ±275 i.p.v. ±211 px,
   vanaf 1280 foto 200, naam 21, tekst 15.5, links 14.5 */
.rb-dag .rb-wrap { width:min(1440px, calc(100% - 60px)) }
@media (min-width:1280px) {
  .rb-dag__rij { gap:20px }
  .rb-dkaart img { height:200px }
  .rb-dkaart__body { gap:8px; padding:20px 20px 24px }
  .rb-dkaart__tijd { font-size:14px }
  .rb .rb-dkaart__naam { font-size:21px }
  .rb-dkaart__tekst { font-size:15.5px }
  .rb-dkaart__links .rb-link { font-size:14.5px }
}

/* ==========================================================================
   4b — de menukaart: paneel rechts, staande fotoslider links steekt uit
   (de .sz-arr van /herfst/, als wv-arr; vinkjes in één kolom)
   ========================================================================== */
.rb-arr__blok { position:relative; color:var(--tekst, #191919) }
.rb-arr__bg { position:absolute; top:47px; bottom:0; left:317px; right:0; background:var(--creme, #fffbf2); border-radius:3px }
.rb-arr__inner { position:relative; margin-left:556px; padding:105px 56px 95px 0; display:flex; flex-direction:column; align-items:flex-start }
.rb-arr__inner .rb-h2 { color:var(--tekst, #191919) }
.rb-arr__inner .rb-goud { color:var(--goud-op, #a87a28) }
.rb-arr__tekst { font-size:18px; line-height:25px; color:var(--donker-2, #232323); margin-top:26px; max-width:500px }
.rb-arr__tekst--om { margin-top:14px; color:var(--tekst-om, #5d574c) }
.rb-arr__checks { list-style:none; margin:34px 0 0; padding:0; display:grid; grid-template-columns:minmax(0,1fr);
  row-gap:15px; align-self:stretch }
.rb-arr__checks li { display:flex; align-items:center; gap:20px }
.rb-vak { width:44px; height:44px; background:var(--licht, #f4f1ea); border-radius:7px; display:flex; align-items:center;
  justify-content:center; flex:0 0 auto; color:var(--goud, #c89b4f) }
.rb-arr__checks li > span:last-child { font-size:19px; color:var(--goud-op, #a87a28); line-height:1.15 }
.rb-arr__kindlink { display:flex; width:max-content; margin-top:8px; font-size:15px; line-height:1.3 }
.rb-arr__acties { display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:30px }
.rb-arr__foto { position:absolute; top:0; left:0; width:500px; height:640px; overflow:hidden; border-radius:3px; background:var(--donker-2, #232323) }
.rb-arr__foto img { width:100%; height:100%; object-fit:cover }

/* v3 (wellness 5 okt 2026): het creme paneel loopt op het bureaublad door tot de rechter schermrand,
   is even hoog als de foto (640) en 47 px lager; de inhoud staat verticaal gecentreerd en de tekstkolom
   (max 740, inhoud 684) horizontaal in het midden van het ZICHTBARE paneel: van de rechterrand van de
   foto tot de schermrand. De foto eindigt op elk bureaublad 420 px rechts van de wraprand (1280+: -80 + 500;
   1024-1279: 0 + 420). --over = afstand van de wrap (min(1120px, 100% - 60px)) tot de schermrand. */
@media (min-width:1024px) {
  .rb-arr { overflow-x:clip }
  .rb-arr__bg { --over:max(30px, 50vw - 560px); right:calc(var(--over) * -1); border-radius:3px 0 0 3px }
  .rb-arr__blok { display:flow-root; min-height:687px } /* flow-root: anders zakt de margin-top van de inner door (margin collapse); 47 + 640 */
  .rb-arr__inner { margin-top:47px; min-height:640px; max-width:740px; padding:56px 56px 56px 0; justify-content:center }
  .rb-arr__tekst { max-width:640px }
  .rb-arr__inner { --over:max(30px, 50vw - 560px);
    margin-left:calc(420px + max(56px, (100vw - var(--over) - 420px - 684px) / 2));
    margin-right:calc(var(--over) * -1) } /* mag de uitloop in, anders klemt de wrap de kolom smaller dan 740 */
}
/* brede schermen: de staande foto steekt 80px buiten de wrap */
@media (min-width:1280px) {
  .rb-arr__foto { left:-80px }
}
/* smal bureaublad (1024-1279): foto smaller en kop kleiner */
@media (min-width:1024px) and (max-width:1279px) {
  .rb-arr__foto { width:420px }
  .rb-arr__inner .rb-h2 { font-size:32px }
}
/* fotoslider in het fotokader. Vegen = scroll-snap; pijlen en bolletjes: pagina-restaurant-boff-v3.js. Geen autoplay. */
.rb-fs__spoor { display:flex; width:100%; height:100%; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  scrollbar-width:none; overscroll-behavior-x:contain }
.rb-fs__spoor::-webkit-scrollbar { display:none }
.rb-fs__dia { flex:0 0 100%; height:100%; margin:0; scroll-snap-align:start; scroll-snap-stop:always }
.rb-fs__pijlen { position:absolute; right:16px; bottom:16px; z-index:2; display:flex; gap:8px }
.rb-fs__pijl { width:40px; height:40px; border-radius:50%; border:2px solid #fff; background:rgba(0,0,0,.35); color:#fff;
  display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer; transition:background .18s }
.rb-fs__pijl:hover { background:rgba(0,0,0,.6) }
.rb-fs__pijl svg { width:16px; height:16px }
.rb-fs__bolletjes { position:absolute; left:10px; bottom:26px; z-index:2; display:flex }
.rb-fs__bol { width:20px; height:20px; padding:0; border:0; background:none; cursor:pointer; display:flex; align-items:center; justify-content:center }
.rb-fs__bol::before { content:''; width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.6); transition:background .18s }
.rb-fs__bol.is-aan::before { background:var(--goud, #c89b4f) }


/* ==========================================================================
   5b — binnen, aan de bar en op het terras: het mozaiek van /wellness/ (wv-omg,
   vijf kolommen, rijen van 260, 16 px tussenruimte) met drie tegels: het terras
   groot (3 kolommen, 2 rijen), binnen en de bar (elk 2 kolommen). Elke tegel is
   een <button> die de pop-up opent. Recept ob-buffet (6 okt 2026): op de tegel alleen de naam
   (geen "Meer info"-cue), geen voet met knop onder het raster.
   ========================================================================== */
.rb-omg__kop { display:flex; flex-direction:column; gap:10px; margin-bottom:28px }
/* v3 (wellness 5 okt 2026): breder dan de rest van de pagina (1440), rijen 300 */
.rb-omg .rb-wrap { width:min(1440px, calc(100% - 60px)) }
.rb-omg__grid { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); grid-template-rows:300px 300px; gap:16px }
@media (min-width:1024px) and (max-width:1279px) { .rb-omg__grid { grid-template-rows:260px 260px } }
.rb-tegel { position:relative; display:block; width:100%; height:100%; overflow:hidden; border:0; border-radius:3px; padding:0; margin:0;
  background:var(--donker-2, #232323); color:#fff; font:inherit; text-align:left; cursor:pointer; grid-column:span 2 }
.rb-tegel--groot { grid-column:span 3; grid-row:span 2 }
.rb-tegel img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .3s }
.rb-tegel:hover img,.rb-tegel:focus-visible img { transform:scale(1.03) }
/* hover en toetsenbord: gouden omlijning om de hele tegel */
.rb-tegel:hover,.rb-tegel:focus-visible { outline:2px solid var(--goud, #c89b4f); outline-offset:0 }
.rb-tegel::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.72) 100%) }
.rb-tegel__tekst { position:absolute; left:18px; right:18px; bottom:16px; z-index:2; display:flex; flex-direction:column;
  align-items:flex-start; gap:10px }
.rb-tegel__naam { color:#fff;
  font-family:var(--kop, "Merriweather", Georgia, "Times New Roman", serif); font-weight:700; font-size:18px; line-height:1.3 }
.rb-tegel--groot .rb-tegel__tekst { left:26px; right:26px; bottom:24px; gap:12px }
.rb-tegel--groot .rb-tegel__naam { font-size:26px }
/* -- diepte (v3, letterlijk van /wellness/): lichtvlek achter het raster, per tegel een hairline-rand,
   slagschaduw en dieper verloop, bij hover 4 px omhoog. Klasse rb-omg--diep op de sectie. */
.rb-omg--diep { overflow-x:clip } /* de lichtvlek steekt buiten de wrap; anders schuift de pagina op telefoon */
.rb-omg--diep .rb-wrap::before { content:''; position:absolute; left:-80px; right:-80px; top:40px; bottom:-60px;
  background:radial-gradient(ellipse 70% 60% at 50% 55%, rgba(255,255,255,.07), rgba(255,255,255,0) 70%); pointer-events:none; z-index:0 }
.rb-omg--diep .rb-wrap > * { position:relative; z-index:1 }
.rb-omg--diep .rb-tegel { border:1px solid rgba(255,255,255,.16); border-radius:4px;
  box-shadow:0 26px 50px -20px rgba(0,0,0,1), 0 4px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.1);
  transition:transform .3s, box-shadow .3s }
.rb-omg--diep .rb-tegel::after { background:linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,.30) 58%, rgba(0,0,0,.84) 100%) }
.rb-omg--diep .rb-tegel:hover,.rb-omg--diep .rb-tegel:focus-visible { transform:translateY(-4px);
  box-shadow:0 34px 56px -22px rgba(0,0,0,.95), 0 6px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.1) }
@media (prefers-reduced-motion:reduce) {
  .rb-omg--diep .rb-tegel { transition:none }
  .rb-omg--diep .rb-tegel:hover,.rb-omg--diep .rb-tegel:focus-visible { transform:none }
}

/* ==========================================================================
   5b — de pop-up per plek: de kamerpop-up .zd-rp van pagina-dineren-v2.css
   (vaste overlay, kaart max 640, max 90vh, creme, schuift 20 px omhoog bij openen),
   hier met een foto bovenin (16:10) in plaats van de slider. Inhoud: JS.
   ========================================================================== */
.rb-pop-overlay { position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:10000; display:flex; align-items:center;
  justify-content:center; padding:20px; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s ease, visibility 0s linear .25s }
.rb-pop-overlay.is-open { opacity:1; visibility:visible; pointer-events:auto; transition:opacity .25s ease, visibility 0s }
.rb-pop { position:relative; background:var(--creme, #fffbf2); border-radius:3px; max-width:640px; width:100%; max-height:90vh;
  display:flex; flex-direction:column; overflow:hidden; color:var(--tekst, #191919);
  font-family:var(--txt, "Agenda", "Helvetica Neue", Helvetica, Arial, sans-serif);
  transform:translateY(20px); transition:transform .25s cubic-bezier(.16,1,.3,1) }
.rb-pop-overlay.is-open .rb-pop { transform:none }
.rb-pop__foto { display:block; flex:0 0 auto; width:100%; aspect-ratio:16 / 10; max-height:42vh; object-fit:cover;
  background:var(--donker-2, #232323); border-radius:3px 3px 0 0 }
.rb-pop__body { flex:1 1 auto; overflow-y:auto; padding:24px 30px 28px }
.rb-pop__sluit { position:absolute; top:12px; right:12px; z-index:2; width:40px; height:40px; border-radius:50%; border:0;
  background:rgba(0,0,0,.5); color:#fff; display:grid; place-items:center; padding:0; cursor:pointer; transition:background .18s }
.rb-pop__sluit:hover { background:rgba(0,0,0,.75) }
.rb-pop__sluit:focus-visible { outline:2px solid var(--goud, #c89b4f); outline-offset:2px }
.rb-pop__naam { font-family:var(--kop, "Merriweather", Georgia, "Times New Roman", serif); font-weight:700; font-size:26px;
  line-height:1.2; color:var(--tekst, #191919); margin:0 }
.rb-pop__tekst { font-size:16px; line-height:24px; color:var(--tekst-om, #5d574c); margin:10px 0 0 }
.rb-pop a { text-decoration:none }
.rb-pop *,.rb-pop *::before,.rb-pop *::after { box-sizing:border-box }
.rb-pop__cta { display:flex; width:100%; margin-top:22px; white-space:normal; line-height:1.25 }

/* ==========================================================================
   6c — evenementen en specials: slider van vijf cremekaarten, 3,3 in beeld; teller en
   pijlen rechtsonder (markup zd-counterrow/zd-arrow, hier in de maten van de kiezer)
   ========================================================================== */
.rb-ontdek__kop { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:30px }
.rb-ontdek__alle { display:inline-flex; align-items:center; gap:8px; font-size:16px; font-weight:700; color:var(--goud, #c89b4f);
  white-space:nowrap; border-bottom:1px solid rgba(200,155,79,.5); padding-bottom:2px }
.rb-ontdek__alle:hover { border-bottom-color:var(--goud, #c89b4f) }
/* De rij begint links op de wrap-rand en loopt alleen RECHTS door tot de schermrand (Stijn, 6 okt 2026;
   zoals de Tripadvisor-strook en /dineren/ .dv-ontdek): --over = afstand van de inhoud tot de schermrand als negatieve
   rechtermarge + gelijke padding-rechts, zodat de kaartbreedte (percentage van de inhoudsbox) gelijk blijft.
   Links geen marge/padding in het spoor: wat voorbij de linkerrand scrolt (de klonen van de lus) is gewoon buiten beeld.
   De sectie knipt met overflow-x:clip. */
.rb-ontdek { overflow-x:clip }
/* Zelfde plaatsing als de Tripadvisor-strook (blok-reviews-tripadvisor-lus.css, Stijn 6 okt 2026): omhulsel max 1530
   border-box met 15 px padding; 1024-1599 inhoud op 60 px van links; >= 1600 omhulsel op max(15px, 50vw - 840px). */
.rb-ontdek .rb-wrap { width:min(1530px, 100%); box-sizing:border-box; padding:0 15px }
.rb-ontdek__spoor { --over:max(15px, 50vw - 750px); display:flex; gap:24px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  scrollbar-width:none; overscroll-behavior-x:contain; margin-right:calc(var(--over) * -1); padding-right:var(--over) }
@media (min-width:1024px) and (max-width:1599px) { .rb-ontdek .rb-wrap { padding-left:60px } }
@media (min-width:1600px) { .rb-ontdek .rb-wrap { margin-left:max(15px, 50vw - 840px) } .rb-ontdek__spoor { --over:max(15px, 50vw - 675px) } }
.rb-ontdek__spoor::-webkit-scrollbar { display:none }
.rb-okaart { flex:0 0 calc((100% - 72px) / 3.3); min-width:0; display:flex; flex-direction:column; overflow:hidden;
  scroll-snap-align:start; background:var(--creme, #fffbf2); border:1px solid var(--rand, #e6dcc8); border-radius:3px; color:#000 }
.rb-okaart img { display:block; width:100%; height:240px; object-fit:cover } /* kaarten zijn op 1440 breder (±414 px); foto iets hoger */
.rb-okaart__body { flex:1; display:flex; flex-direction:column; gap:6px; padding:20px 22px 22px }
.rb-okaart__meta { font-size:14px; color:var(--tekst-om, #5d574c) }
.rb .rb-okaart__titel { font-size:20px; line-height:1.2; color:var(--tekst, #191919) }
.rb-okaart__tekst { font-size:15px; line-height:1.5; color:var(--tekst-om, #5d574c); margin-top:2px }
.rb-okaart__prijs { font-family:var(--kop, "Merriweather", Georgia, "Times New Roman", serif); font-weight:700; font-size:15px;
  color:var(--goud-op, #a87a28); margin-top:4px }
.rb-okaart__knop { margin-top:auto; padding-top:12px }
.rb-okaart__knop .rb-knop { width:100%; white-space:normal; line-height:1.25; padding:14px 16px }
.rb-ontdek .rb-ontdek__nav { justify-content:flex-end; gap:18px; margin-top:20px }
.rb-ontdek .rb-ontdek__teller { font-family:var(--txt, "Agenda", "Helvetica Neue", Helvetica, Arial, sans-serif); font-weight:400;
  font-size:14px; color:var(--licht-om, #c9c3b6) }
.rb-ontdek .rb-ontdek__teller b { color:#fff }
.rb-ontdek__pijlen { display:flex; gap:8px }
.rb-ontdek .zd-arrow { width:44px; height:44px; border:1px solid rgba(255,255,255,.35); border-radius:50%; background:none;
  color:#fff; padding:0; cursor:pointer; display:grid; place-items:center; transition:border-color .18s }
.rb-ontdek .zd-arrow:hover { border-color:#fff }
.rb-ontdek .zd-arrow svg { width:16px; height:16px }

/* ==========================================================================
   7e — zakelijk eten of met een groep: kop en tekst gecentreerd op het patroon,
   drie cremekaarten (foto 200, naam, prijsregel op een hairline, zin), knoppen eronder
   ========================================================================== */
.rb-zak__kop { max-width:720px; margin:0 auto; text-align:center; display:flex; flex-direction:column; gap:14px }
.rb-zak__tekst { font-size:17px; line-height:1.6; color:var(--licht-om, #c9c3b6) }
.rb-zak__rij { list-style:none; margin:36px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px }
.rb-zkaart { min-width:0; display:flex; flex-direction:column; overflow:hidden; background:var(--creme, #fffbf2);
  border:1px solid var(--rand, #e6dcc8); border-radius:3px; color:var(--tekst, #191919) }
.rb-zkaart img { display:block; width:100%; height:200px; object-fit:cover }
.rb-zkaart__body { flex:1; display:flex; flex-direction:column; gap:10px; padding:22px 24px 26px }
.rb .rb-zkaart__naam { font-size:22px; line-height:1.25; color:var(--tekst, #191919) }
.rb-zkaart__prijs { display:block; font-weight:700; font-size:17px; line-height:1.35; color:#000; padding-bottom:12px;
  border-bottom:1px solid var(--rand, #e6dcc8) }
.rb-zkaart__tekst { font-size:16px; line-height:1.55; color:var(--tekst-om, #5d574c) }
.rb-zak__knoppen { gap:14px; margin-top:32px }
/* breder (Stijn 6 okt 2026): 1440-wrap; kaarten ±464 i.p.v. ±357 px, vanaf 1280 foto 260, naam 24, tekst 17 */
.rb-zak .rb-wrap { width:min(1440px, calc(100% - 60px)) }
@media (min-width:1280px) {
  .rb-zak__rij { gap:24px }
  .rb-zkaart img { height:260px }
  .rb-zkaart__body { padding:26px 28px 30px }
  .rb .rb-zkaart__naam { font-size:24px }
  .rb-zkaart__prijs { font-size:18px }
  .rb-zkaart__tekst { font-size:17px }
}

/* ==========================================================================
   8a — goed om te weten: de witte tegels van /wellness/ (wv-tegels), hier vier
   kolommen: een hoge tegel Openingstijden (twee rijen), vijf praktische tegels
   en een adrestegel; telefoon en mail eronder
   ========================================================================== */
.rb-tegels__kop { margin-bottom:28px }
.rb-tegels__raster { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px }
.rb-ptegel { background:#fff; border:1px solid var(--rand, #e6dcc8); border-radius:8px; min-height:210px; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:10px; padding:28px 24px 26px; text-align:center }
.rb-ptegel svg { flex:none; margin-bottom:4px; color:var(--goud, #c89b4f) }
.rb .rb-ptegel h3 { font-size:17px; line-height:1.3; color:#000 }
.rb-ptegel p { font-size:15px; line-height:1.5; color:var(--tekst-om, #5d574c) }
.rb-ptegel a { color:#000; border-bottom:1px solid var(--goud, #c89b4f); white-space:nowrap }
.rb-ptegel a:hover { color:var(--goud-op, #a87a28) }
.rb-ptegel--hoog { grid-row:span 2; align-items:stretch; text-align:left }
.rb-ptegel--hoog svg,.rb .rb-ptegel--hoog h3 { align-self:center }
.rb-tijden { width:100%; border-collapse:collapse }
.rb-tijden th,.rb-tijden td { padding:7px 0; border-bottom:1px solid var(--rand, #e6dcc8); font-size:15px; line-height:1.4;
  text-align:left; font-weight:400; color:#000 }
.rb-tijden td { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums }
.rb-tijden tr:last-child th,.rb-tijden tr:last-child td { border-bottom:0 }
.rb-tijden .rb-goud th,.rb-tijden .rb-goud td { color:var(--goud-op, #a87a28); font-weight:700 }
.rb-ptegel .rb-tijden__keuken { margin-top:auto; padding-top:12px; border-top:1px solid var(--rand, #e6dcc8); font-size:14px; line-height:1.5 }
.rb-tegels__voet { margin-top:30px; display:flex; flex-wrap:wrap; gap:12px 32px }
.rb-tel { display:inline-flex; align-items:center; gap:10px; font-size:16px; color:#fff }
.rb-tel span { border-bottom:1px solid var(--goud, #c89b4f); padding-bottom:2px }
.rb-tel:hover span { color:var(--goud, #c89b4f) }

/* ==========================================================================
   8c — veelgestelde vragen (zoals /wellness/): kop links (1/3), vragen rechts (2/3) als witte
   accordeon met hairlines; <details>, eerste open, geen script (.wv-faq)
   ========================================================================== */
.rb-faq__raster { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:64px; align-items:start }
.rb-faq__kop { display:flex; flex-direction:column; gap:12px; padding-top:6px }
.rb-faq__tel { display:inline-flex; align-items:flex-start; gap:10px; margin-top:14px; font-size:15px; color:var(--licht-om, #c9c3b6); line-height:1.45 }
.rb-faq__tel svg { margin-top:2px }
.rb-faq__tel:hover span { text-decoration:underline }
.rb-faq__lijst { border-top:1px solid rgba(255,255,255,.18) }
.rb-faq__item { border-bottom:1px solid rgba(255,255,255,.18); padding:22px 0 }
.rb-faq__vraag { display:flex; justify-content:space-between; align-items:center; gap:20px; cursor:pointer; list-style:none }
.rb-faq__vraag::-webkit-details-marker { display:none }
.rb-faq__vraag::marker { content:'' }
.rb .rb-faq__vraag h3 { font-size:19px; line-height:1.35; color:#fff; transition:color .18s }
.rb .rb-faq__item[open] .rb-faq__vraag h3,.rb .rb-faq__vraag:hover h3 { color:var(--goud, #c89b4f) }
.rb-faq__pijl { flex:none; display:grid; place-items:center; width:24px; height:24px; color:var(--goud, #c89b4f) }
.rb-faq__pijl svg { transition:transform .2s }
.rb-faq__item[open] .rb-faq__pijl svg { transform:rotate(180deg) }
.rb-faq__antwoord { margin-top:12px; max-width:600px; font-size:17px; line-height:1.6; color:var(--licht-om, #c9c3b6) }
.rb-faq__antwoord a { color:#fff; border-bottom:1px solid var(--goud, #c89b4f); white-space:nowrap }
.rb-faq__antwoord a:hover { color:var(--goud, #c89b4f) }

/* ==========================================================================
   9a — Tripadvisor: de bouwsteen van de homepage op het patroon (.sz-ta van /herfst/),
   met de reserveerknop eronder (buiten de bouwsteen)
   ========================================================================== */
.rb .rb-ta { font-size:17px; line-height:1.6; padding-bottom:60px }
.rb .rb-ta .blok { padding:60px 0 0 }
.rb .rb-ta .ta-aantal { text-decoration:underline }
.rb-ta__actie { margin-top:32px }

/* ==========================================================================
   10b — slot zoals /wellness/ (wv-slot): volle foto met donker verloop,
   tekst en knoppen gecentreerd, telefoon en mail eronder
   ========================================================================== */
.rb-slot { position:relative; min-height:clamp(520px, 36vw, 760px); overflow:hidden; display:flex; align-items:center }
.rb-slot__foto { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% var(--rb-slot-focus, 50%) } /* brandpunt: het hotel aan het water */
.rb-slot__waas { position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(25,25,25,.55) 0, rgba(25,25,25,.72) 55%, rgba(25,25,25,.9) 100%) }
.rb-slot__in { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; text-align:center; padding:60px 0 }
.rb-slot__tekst { max-width:620px; color:rgba(255,255,255,.9); font-size:17px }
.rb-slot .rb-knoppen { gap:14px; margin-top:6px }
.rb-slot__contact { display:flex; gap:10px; align-items:center; justify-content:center; font-size:15px; color:var(--licht, #f4f1ea); margin-top:4px }
.rb-slot__contact a { display:inline-flex; gap:8px; align-items:center; color:var(--licht, #f4f1ea) }
.rb-slot__contact a:hover { text-decoration:underline }
.rb-slot__punt { color:rgba(255,255,255,.5) }

/* teller en pijlen van de evenementenslider: de basis van zd-counterrow (oud-zd.css) */
.zd-counterrow { display:flex; align-items:center; gap:20px; flex:0 0 auto }

@media (prefers-reduced-motion:reduce) {
  .rb-tegel img { transition:none }
  .rb-tegel:hover img,.rb-tegel:focus-visible img { transform:none }
  .rb-fs__spoor,.rb-ontdek__spoor,.rb-dag__rij,.rb-zak__rij { scroll-behavior:auto }
  .rb-faq__pijl svg { transition:none }
  .rb-pop,.rb-pop-overlay { transition:none }
  .rb-pop { transform:none }
}

/* ==========================================================================
   <= 1023 px: tablet
   ========================================================================== */
@media (max-width:1023px) {
  /* 2b */
  .rb-intro__paneel { grid-template-columns:minmax(0,1fr); gap:32px; padding:40px }

  /* 3f: drie kaarten, de laatste twee gecentreerd eronder */
  .rb-dag__rij { flex-wrap:wrap; justify-content:center }
  .rb-dkaart { flex:0 0 calc((100% - 32px) / 3) }

  /* 4b: paneel boven, foto eronder (zoals /herfst/) */
  .rb-arr__blok { display:flex; flex-direction:column }
  .rb-arr__bg { display:none }
  .rb-arr__inner { order:1; background:var(--creme, #fffbf2); border-radius:3px 3px 0 0; max-width:none;
    margin-left:0; padding:40px 40px 32px }
  .rb-arr__foto { order:2; position:relative; top:auto; left:auto; right:auto; width:100%; height:380px; border-radius:0 0 3px 3px }

  /* 5b: twee kolommen, het terras over de volle breedte */
  .rb-omg__grid { grid-template-columns:repeat(2, minmax(0,1fr)); grid-template-rows:320px 240px }
  .rb-tegel { grid-column:span 1 }
  .rb-tegel--groot { grid-column:span 2; grid-row:span 1 }

  /* 6c */
  .rb-okaart { flex-basis:calc((100% - 24px) / 2.2) }

  /* 7e */
  .rb-zak__rij { gap:16px }
  .rb-zkaart__body { padding:20px 18px 22px }

  /* 8a: twee kolommen */
  .rb-tegels__raster { grid-template-columns:repeat(2, minmax(0,1fr)) }

  /* 8c */
  .rb-faq__raster { gap:40px }

  /* 9a: het scorepaneel als eerste kaart in de veegrij (pagina-restaurant-boff-v3.js verplaatst het) */
  .rb-ta .blok-ta .ta-strook__spoor { overflow-anchor:none }
  .rb-ta .ta-strook__spoor .ta-paneel { flex:0 0 80%; scroll-snap-align:start; margin-bottom:0;
    padding:18px; display:flex; flex-direction:column }
  .rb-ta .ta-strook__spoor .ta-paneel__merk { height:40px; margin-bottom:10px }
  .rb-ta .ta-strook__spoor .ta-paneel__cijfer { font-size:38px }
  .rb-ta .ta-strook__spoor .ta-paneel__woord { font-size:17px }
  .rb-ta .ta-strook__spoor .ta-paneel__regel { font-size:14px }
  .rb-ta .ta-strook__spoor .ta-paneel__rang { font-size:14px; margin-top:10px; padding-top:10px }
  .rb-ta .ta-strook__spoor .ta-deel { margin-top:12px; gap:7px }
  .rb-ta .ta-strook__spoor .ta-deel__rij { grid-template-columns:96px 1fr; align-items:center; gap:8px }
  .rb-ta .ta-strook__spoor .ta-deel__naam,
  .rb-ta .ta-strook__spoor .ta-deel__cijfer { font-size:12.5px }
  .rb-ta .ta-strook__spoor .ta-deel__baan { height:7px }
}

/* ==========================================================================
   <= 767 px: telefoon
   ========================================================================== */
@media (max-width:767px) {
  .rb-wrap { width:calc(100% - 30px) }
  .rb-sec { padding:32px 0 }
  .rb-h2 { font-size:28px }
  .rb-knop { font-size:15px; padding:15px 24px }

  /* 1a */
  .rb-hero { height:auto; min-height:calc(620px + var(--kophoogte)); display:flex }
  .rb-hero__foto::after { background:linear-gradient(180deg, rgba(25,25,25,.4) 0%, rgba(25,25,25,.55) 30%, rgba(25,25,25,.88) 60%, rgba(25,25,25,.96) 100%) }
  .rb-hero__wrap { height:auto; padding:calc(190px + var(--kophoogte)) 0 110px }
  .rb-hero__tekst { gap:14px }
  .rb-hero__kop { font-size:40px }
  .rb-hero__sub { font-size:17px }
  .rb-hero .rb-knoppen { flex-direction:column; width:100% }
  .rb-hero .rb-knop { width:100%; white-space:normal; line-height:1.25 }

  /* 2b */
  .rb-intro { padding:0 0 28px; margin-top:-64px }
  .rb-intro__paneel { gap:26px; padding:28px 18px }
  .rb-intro__tekstkol { gap:14px }
  .rb-intro__paneel .rb-h2 { font-size:28px }
  .rb-intro__tekst { font-size:16px }
  .rb-intro__knoppen { flex-direction:column; width:100%; gap:10px }
  .rb-intro__knoppen .rb-knop { width:100%; white-space:normal; line-height:1.25 }
  .rb-intro__tegels { gap:10px }
  .rb-icotegel { height:auto; min-height:150px; padding:18px 0 14px; row-gap:10px }
  .rb-icotegel span { font-size:14px; padding:0 8px; min-height:0 }

  /* 3f: veegrij met 1,15 kaart in beeld (scroll-snap, geen script) */
  .rb-dag__kop { margin-bottom:22px }
  .rb-dag__intro { font-size:16px }
  .rb-dag__rij { flex-wrap:nowrap; justify-content:flex-start; gap:12px; overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain }
  .rb-dag__rij::-webkit-scrollbar { display:none }
  .rb-dkaart { flex:0 0 calc((100% - 12px) / 1.15); scroll-snap-align:start }
  .rb-dkaart img { height:170px }
  .rb-dkaart__tekst { font-size:15px }
  .rb-dag__knoppen { flex-direction:column; margin-top:24px; gap:10px }
  .rb-dag__knoppen .rb-knop { width:100%; white-space:normal; line-height:1.25 }

  /* 4b */
  .rb-arr__inner { padding:34px 20px 30px }
  .rb-arr__tekst { font-size:17px; line-height:24px; margin-top:16px; max-width:none }
  .rb-arr__tekst--om { margin-top:12px }
  .rb-arr__checks { row-gap:12px; margin-top:22px }
  .rb-arr__checks li { gap:16px }
  .rb-arr__checks li > span:last-child { font-size:17px }
  .rb-arr__acties { margin-top:26px; flex-direction:column; align-self:stretch; gap:10px }
  .rb-arr__acties .rb-knop { width:100%; white-space:normal; line-height:1.25 }
  .rb-arr__foto { height:290px }

  /* 5b: twee kolommen, het terras bovenaan over de volle breedte */
  .rb-omg__kop { margin-bottom:20px }
  .rb-omg__grid { grid-template-rows:240px 170px; gap:10px }
  .rb-tegel__tekst { left:12px; right:12px; bottom:12px; gap:8px }
  .rb-tegel__naam { font-size:15px }
  .rb-tegel--groot .rb-tegel__tekst { left:16px; right:16px; bottom:16px }
  .rb-tegel--groot .rb-tegel__naam { font-size:20px }

  /* 5b pop-up */
  .rb-pop-overlay { padding:14px }
  .rb-pop { max-height:92vh }
  .rb-pop__foto { max-height:32vh }
  .rb-pop__body { padding:20px 18px 22px }
  .rb-pop__naam { font-size:22px }
  .rb-pop__tekst { font-size:15px; line-height:23px }
  .rb-pop__cta { margin-top:18px }

  /* 6c: 1,15 kaart met peek, vegen in plaats van pijlen */
  .rb-ontdek__kop { flex-direction:column; align-items:flex-start; gap:12px; margin-bottom:20px }
  .rb-ontdek__spoor { gap:14px; --over:15px }
  .rb-okaart { flex-basis:calc((100% - 14px) / 1.15) }
  .rb-okaart img { height:190px }
  .rb-ontdek .rb-ontdek__nav { margin-top:16px }
  .rb-ontdek__pijlen { display:none }

  /* 7e: veegrij met 1,15 kaart in beeld (scroll-snap, geen script) */
  .rb-zak__tekst { font-size:16px }
  .rb-zak__rij { display:flex; gap:12px; margin-top:24px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
    scrollbar-width:none; overscroll-behavior-x:contain }
  .rb-zak__rij::-webkit-scrollbar { display:none }
  .rb-zkaart { flex:0 0 calc((100% - 12px) / 1.15); scroll-snap-align:start }
  .rb-zkaart img { height:180px }
  .rb-zkaart__body { padding:18px 18px 22px }
  .rb .rb-zkaart__naam { font-size:20px }
  .rb-zak__knoppen { flex-direction:column; margin-top:24px; gap:10px }
  .rb-zak__knoppen .rb-knop { width:100%; white-space:normal; line-height:1.3 }

  /* 8a: twee kolommen, de tijdentegel over de volle breedte */
  .rb-tegels__kop { margin-bottom:20px }
  .rb-tegels__raster { gap:10px }
  .rb-ptegel { min-height:0; padding:18px 10px 16px; gap:8px }
  .rb-ptegel svg { width:30px; height:30px; margin-bottom:2px }
  .rb .rb-ptegel h3 { font-size:14px }
  .rb-ptegel p { font-size:13px; line-height:1.45 }
  .rb-ptegel--hoog { grid-column:span 2; grid-row:auto; padding:20px 16px 18px }
  .rb .rb-ptegel--hoog h3 { font-size:16px }
  .rb-tijden th,.rb-tijden td { font-size:15px }
  .rb-ptegel .rb-tijden__keuken { margin-top:6px; font-size:14px }
  .rb-ptegel--adres a { white-space:normal }
  .rb-tegels__voet { margin-top:22px; flex-direction:column; gap:12px }
  .rb-tel { font-size:15px; align-items:flex-start }

  /* 8c */
  .rb-faq__raster { grid-template-columns:minmax(0,1fr); gap:24px }
  .rb-faq__tel { margin-top:6px }
  .rb-faq__item { padding:18px 0 }
  .rb-faq__vraag { gap:14px }
  .rb .rb-faq__vraag h3 { font-size:17px }
  .rb-faq__antwoord { font-size:16px }

  /* 9a */
  .rb .rb-ta { padding-bottom:32px }
  .rb .rb-ta .blok { padding:32px 0 0 }
  .rb-ta__actie { margin-top:20px }
  .rb-ta__actie .rb-knop { width:100% }

  /* 10b */
  .rb-slot { min-height:560px }
  .rb-slot__in { padding:48px 0; gap:14px }
  .rb-slot__tekst { font-size:16px }
  .rb-slot .rb-knoppen { flex-direction:column; width:100%; gap:10px }
  .rb-slot .rb-knop { width:100%; white-space:normal; line-height:1.25 }
  .rb-slot__contact { flex-direction:column; gap:6px }
  .rb-slot__punt { display:none }
}

/* (Sjabloonmarkeringen in deze uitleg staan als "{ {> naam } }": met de spaties
   weggelaten, anders sluit render.py ze hier al in.)
   ==========================================================================
   BOUWSTEEN-LAAG blok-reviews-tripadvisor-lus — opt-in op reviews-tripadvisor
   --------------------------------------------------------------------------
   Bron       : src/stijl/pagina-wellness-v2.css r. 280-282 + 290-309 (.wv-ta),
                waarden letterlijk, met .ta-lus in plaats van .wv-ta.
   Wat het doet (bureaublad, Stijn 5 okt 2026): het scorepaneel blijft links staan,
                de reviewstrook rechts loopt door tot de schermrand en rond (oneindige
                lus via gedrag/blok-kaartenrij; de attributen zet
                gedrag/blok-reviews-tripadvisor-lus). --over = afstand van de
                omhulsel-inhoud tot de schermrand: omhulsel op het bureaublad max 1530
                border-box met 15 px padding -> 50vw - 750px, minimaal 15 px.
                1024-1599: blok 45 px van de linkerrand (tab "Gratis welkomstcadeau").
                >= 1600: blok 90 px naar links, --over 50vw - 675px.
                < 1024: klonen verborgen (na verkleinen vanaf bureaublad).
   Basis      : lettermaat 17/1.6, blokpadding 60 px, onderstreept aantal reviews.
                Telefoon-padding (32 px) en het scorepaneel-als-eerste-kaart onder
                1024 px horen bij het sjabloon (zie pagina-wellness-v2.css/.js).

   INSLUITEN
     wrapper : <div class="xx-ta ta-op-patroon ta-lus">
               { {> blok-reviews-tripadvisor } }
               </div>
     stijl   : { {> stijl/blok-reviews-tripadvisor } }  daarna  { {> stijl/blok-reviews-tripadvisor-lus } }
     gedrag  : { {> gedrag/blok-reviews-tripadvisor-lus } }   (VÓÓR blok-kaartenrij)
               { {> gedrag/blok-kaartenrij } }
               { {> gedrag/blok-reviews-tripadvisor } }
   De bouwsteen blok-reviews-tripadvisor.* zelf blijft ongemoeid (homepage).
   ========================================================================== */
.ta-lus { font-size:17px; line-height:1.6 }
.ta-lus .blok { padding:60px 0 }
.ta-lus .ta-aantal { text-decoration:underline }
@media (min-width:1024px) {
  .ta-lus .blok-ta { overflow-x:clip }
  .ta-lus .ta-strook { --over:max(15px, 50vw - 750px) }
  .ta-lus .ta-strook__spoor { margin-right:calc(var(--over) * -1); padding-right:var(--over) }
  .ta-lus .ta-strook__pijl { right:calc(24px - var(--over)) } /* 24 px van de schermrand, niet midden over een kaart */
}
@media (min-width:1024px) and (max-width:1599px) {
  .ta-lus .omhulsel { padding-left:60px }
}
@media (min-width:1600px) {
  .ta-lus .omhulsel { margin-left:max(15px, 50vw - 840px) }
  .ta-lus .ta-strook { --over:max(15px, 50vw - 675px) }
}
@media (max-width:1023px) { .ta-lus [data-kloon] { display:none } }

/* ==========================================================================
   BOUWSTEEN voet — donkere voettekst met vier kolommen, plus de taalmelding
   --------------------------------------------------------------------------
   Fragment   : src/fragmenten/blok-voet.html
   Velden     : home-url, ft-adres, ft-boek, ft-nav-kop, ft-n1..5(-url),
                ft-kamers-kop, k1..k6-naam/-url, ft-socials-kop,
                ft-c1..c7(-url) voor de onderste balk.
   Varianten  : geen.
   Mobiel     : twee kolommen; logo, adres en boekknop erboven op volle breedte.
   Bureaublad : vier kolommen naast elkaar, onderbalk in een iets donkerder vlak.
   Bevat ook  : de taalmelding (#langsug) die onderin verschijnt als de browser
                een andere taal spreekt dan de pagina. Op mobiel over de volle
                breedte, op het bureaublad rechtsonder.
   ========================================================================== */
/* voettekst */
.voet { background:var(--donker); color:var(--licht); padding:36px 0 0 }
.voet a { color:inherit; text-decoration:none }
.voet a:hover { color:var(--goud) }
.voet__logo img { width:210px; height:39px; margin-bottom:18px }
.voet__gegevens { font-style:normal; display:flex; flex-direction:column; gap:8px; margin-bottom:20px }
.voet__knop { width:100%; max-width:340px; margin-bottom:26px }
.voet__kolommen { display:grid; grid-template-columns:1fr 1fr; gap:28px 20px }
.voet__kolommen > div:first-child,.voet__kolommen > div:last-child { grid-column:1 / -1 }
.voet__titel { font-family:var(--kop); font-weight:700; font-size:20px; margin-bottom:12px }
.voet__lijst li { margin-bottom:9px; font-size:16px }
.voet__socials { display:flex; gap:22px; margin-top:26px }
.voet__onder { border-top:1px solid rgba(255,255,255,.15); margin-top:32px; padding:18px 0 26px; font-size:14px }
.voet__onderrij { display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center }
.voet__onderrij ul { display:flex; flex-wrap:wrap; gap:8px 18px }

/* taalmelding */
.langsug { position:fixed; left:10px; right:10px; bottom:10px; z-index:90; display:flex; align-items:center; gap:8px;
  background:var(--creme, #fffbf2); color:var(--donker, #191919); border:1px solid var(--rand, #e6dcc8); box-shadow:0 10px 34px rgba(0,0,0,.20); padding:8px 8px 8px 12px; border-radius:8px; font-size:13.5px; line-height:1.2 }
.langsug[hidden] { display:none }
.langsug__msg { flex:1 1 auto }
.langsug__btn { background:var(--goud, #c89b4f); color:#fff; text-decoration:none; font-size:12.5px; font-weight:700; padding:8px 12px; border-radius:5px; white-space:nowrap }
.langsug__close { font-size:22px; line-height:1; color:var(--tekst-om, #5d574c); padding:0 2px }

@media (min-width:768px) {
  .voet__kolommen { grid-template-columns:repeat(4,1fr) }
  .voet__kolommen > div:first-child,.voet__kolommen > div:last-child { grid-column:auto }
}

@media (min-width:1024px) {
  /* -- voettekst  */
  .voet { background:var(--donker-2, #232323); padding:80px 0 0 }
  .voet__kolommen { gap:0 30px }
  .voet__logo img { width:250px; height:46px; margin-bottom:35px }
  .voet__titel { font-size:20px; line-height:32px; margin:24px 0 27px }
  .voet__lijst li { margin-bottom:16px; font-size:17px }
  .voet__knop { width:auto; max-width:none; min-width:245px; margin-bottom:0 }
  .voet__socials { flex-direction:column; gap:16px; margin-top:0 }
  .voet__onder { background:var(--donker, #191919); border-top:0; margin-top:44px; padding:20px 0 }

  /* -- taalmelding  */
  .langsug { left:auto; right:22px; bottom:22px; transform:none; max-width:420px }
}
</style>
<!-- Zenchef-reserveerwidget (restaurant 379373): config + SDK, laadt via de delayed-JS-loader -->
<div class="zc-widget-config" data-restaurant="379373" data-lang="en" data-position="right" data-open="false"></div>
<script id="zenchef-sdk" async data-src="https://sdk.zenchef.com/v1/sdk.min.js" type="delayedscript"></script>

<script async src="https://stats.parkhotelhorst.nl/api/analytics/ph.js" data-cookieconsent="ignore"></script>
</head>
<body>

<header class="kopbalk kopbalk--geen-zweef">
  <!-- bovenbalk: alleen op het bureaublad (op mobiel staan deze links in het paneel) -->
  <div class="kopbalk__boven">
    <div class="kopbalk__bovenrij">
      <div class="kopbalk__groep">
        <ul class="kopbalk__extra">
          <li><a href="/werken-bij-parkhotel/vacatures/">Vacancies</a></li>
          <li><a href="tel:0031773976000">+31 (0)77 397 60 00</a></li>
          <li><a href="mailto:info@parkhotelhorst.nl">info@parkhotelhorst.nl</a></li>
          <li><a href="/en/about-us/">About us</a></li>
          <li><a href="/en/contact-information/">Contact information</a></li>
        </ul>
      </div>
      <div class="kopbalk__groep">
        <span class="kopbalk__score">
          <img class="kopbalk__google" src="/assets/img/logo-google-ba205d.svg" width="92" height="30" alt="Google" />
          <span class="kopbalk__cijfer">8.4</span>
          <span class="kopbalk__woord">Excellent</span>
          <a class="kopbalk__reviews" href="https://www.google.com/travel/hotels/entity/CgoIgvvT_cD50cZVEAE/reviews" target="_blank" rel="noopener">1722 reviews</a>
        </span>
        <ul class="kopbalk__talen">
          <li><a href="/restaurant-boff/" hreflang="nl" lang="nl">NL</a></li>
          <li><a href="/en/boff-restaurant/" hreflang="en" lang="en" aria-current="true">EN</a></li>
          <li><a href="/de/restaurant-boff-2/" hreflang="de" lang="de">DE</a></li>
        </ul>
      </div>
    </div>
  </div>

  <!-- de band loopt over de volle breedte, de inhoud blijft op de omhulselmaat -->
  <div class="kopbalk__rijband">
    <div class="kopbalk__rijvlak"></div>
    <div class="kopbalk__rij">
    <a href="/en/homepage/" class="kopbalk__logo" aria-label="Parkhotel Horst">
      <img src="/assets/img/Parkhotel-Horst-logo_wit-1-e1670860760654-27f7bb.webp" width="300" height="55" alt="Parkhotel Horst" fetchpriority="high" />
    </a>

    <nav class="kopbalk__nav" aria-label="Menu">
      <ul class="rubrieken">
        <li class="rub" data-rub="m1">
          <div class="rub__rij">
            <a class="rub__link" href="/en/our-hotel/">Hotel</a>
            <button class="rub__knop" type="button" aria-expanded="false" aria-controls="kopvlak-m1"><svg class="chev" viewBox="0 0 12 8" aria-hidden="true" focusable="false"><path d="M1 1.6 6 6.4 11 1.6" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg><span class="kop-vw">Show submenu of Hotel</span></button>
          </div>
        </li>
        <li class="rub" data-rub="m2">
          <div class="rub__rij">
            <a class="rub__link" href="/en/boff-restaurant/">Restaurant BØFF</a>
            <button class="rub__knop" type="button" aria-expanded="false" aria-controls="kopvlak-m2"><svg class="chev" viewBox="0 0 12 8" aria-hidden="true" focusable="false"><path d="M1 1.6 6 6.4 11 1.6" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg><span class="kop-vw">Show submenu of Restaurant BØFF</span></button>
          </div>
        </li>
        <li class="rub" data-rub="m3">
          <div class="rub__rij">
            <a class="rub__link" href="/en/meetings-and-events/">Meetings & events</a>
            <button class="rub__knop" type="button" aria-expanded="false" aria-controls="kopvlak-m3"><svg class="chev" viewBox="0 0 12 8" aria-hidden="true" focusable="false"><path d="M1 1.6 6 6.4 11 1.6" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg><span class="kop-vw">Show submenu of Meetings & events</span></button>
          </div>
        </li>
        <li class="rub" data-rub="m4">
          <div class="rub__rij">
            <a class="rub__link" href="/en/wellness-centre/">Wellness</a>
            <button class="rub__knop" type="button" aria-expanded="false" aria-controls="kopvlak-m4"><svg class="chev" viewBox="0 0 12 8" aria-hidden="true" focusable="false"><path d="M1 1.6 6 6.4 11 1.6" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg><span class="kop-vw">Show submenu of Wellness</span></button>
          </div>
        </li>
        <li class="rub" data-rub="m5">
          <div class="rub__rij">
            <a class="rub__link" href="/en/gebied/">Surroundings</a>
            <button class="rub__knop" type="button" aria-expanded="false" aria-controls="kopvlak-m5"><svg class="chev" viewBox="0 0 12 8" aria-hidden="true" focusable="false"><path d="M1 1.6 6 6.4 11 1.6" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg><span class="kop-vw">Show submenu of Surroundings</span></button>
          </div>
        </li>
      </ul>
    </nav>

    <!-- 1024-1199 px: vijf rubrieken passen niet naast logo en knop, dan deze knop -->
    <button type="button" class="kopbalk__menu" aria-expanded="false" aria-controls="kopvlak-alle"><span class="kopbalk__hamvorm" aria-hidden="true"><span></span><span></span><span></span></span><b>Menu</b></button>

    <a class="knop knop--vol kopbalk__boek distributor-open" href="https://api.mews.com/distributor/ea3920b8-6b38-436c-ae08-af1d007c3bd6"><span class="kort">Book</span><span class="lang">Search and book</span></a>
      <button type="button" class="kopbalk__ham" id="menuknop" aria-expanded="false" aria-controls="menupaneel" aria-label="Menu"><span></span><span></span><span></span><b>Menu</b></button>
    </div>
  </div>

  <!-- het gedeelde uitklapvlak: één element, per rubriek een deel, vaste hoogte -->
  <div class="kopbalk__vlak" id="kopvlak">
    <div class="vlak__binnen">

      <div class="vlak__deel" id="kopvlak-m1" data-deel="m1">
        <div class="vlak__intro">
          <p class="vlak__naam">Hotel</p>
          <p class="vlak__tekst">Four stars on the edge of Horst, with a pool and wellness centre.</p>
          <a class="vlak__alles" href="/en/our-hotel/">All about the hotel <svg viewBox="0 0 7 11" aria-hidden="true" focusable="false"><path d="M1 1l4.5 4.5L1 10" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
        </div>
        <div class="vlak__lijst">
          <ul class="vlak__links">
            <li><a href="/en/rooms-suites/"><span>Rooms &amp; Suites</span></a></li><li><a href="/en/faciliteiten/"><span>Facilities</span></a></li><li><a href="/en/arrangement/"><span>Packages</span></a></li><li><a href="/en/events/"><span>Events</span></a></li>
          </ul>
        </div>
        <div class="vlak__promokolom"><a class="vlak__promo" href="/en/arrangement/autumn-package/"><img class="vlak__promofoto" src="/assets/img/ULT2702-Enhanced-NR-1024x683-0d40c9.webp" width="320" height="150" alt="" loading="lazy" decoding="async" /><span class="vlak__promotekst"><span class="vlak__promolabel">Offer</span><span class="vlak__promotitel">Autumn package</span><span class="vlak__promoregel">Autumn colours around the lake, with bubbles in your room and a 3-course dinner at BØFF.</span><span class="vlak__promolink">View the offer <svg viewBox="0 0 7 11" aria-hidden="true" focusable="false"><path d="M1 1l4.5 4.5L1 10" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></span></span></a></div>
      </div>

      <div class="vlak__deel" id="kopvlak-m2" data-deel="m2">
        <div class="vlak__intro">
          <p class="vlak__naam">Restaurant BØFF</p>
          <p class="vlak__tekst">Grill restaurant with a terrace by the water.</p>
          <a class="vlak__alles" href="/en/boff-restaurant/">All about Restaurant BØFF <svg viewBox="0 0 7 11" aria-hidden="true" focusable="false"><path d="M1 1l4.5 4.5L1 10" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
        </div>
        <div class="vlak__lijst">
          <ul class="vlak__links vlak__links--twee">
            <li><a href="/en/our-menu/"><span>Menu</span></a></li><li><a href="/en/dining/"><span>Dining</span></a></li><li><a href="/en/terrace-bar-brasserie/"><span>Terrace / Bar / Brasserie</span></a></li><li><a href="/en/breakfast/"><span>Breakfast buffet</span></a></li><li><a href="/en/sharing-lunch/"><span>Sharing lunch</span></a></li><li><a href="/en/gift-voucher/"><span>Gift voucher</span></a></li>
          </ul>
          <a class="vlak__actie" href="/en/boff-restaurant/#reserveren">Book a table</a>
        </div>
        <div class="vlak__promokolom"><a class="vlak__promo" href="/en/sharing-lunch/"><img class="vlak__promofoto" src="/assets/img/Restaurant-BOFF-Venray-Horst-Venlo-scaled-1200x500-c-default-1b1b4c.webp" width="320" height="150" alt="" loading="lazy" decoding="async" /><span class="vlak__promotekst"><span class="vlak__promolabel">New</span><span class="vlak__promotitel">Sharing lunch</span><span class="vlak__promoregel">three courses with a glass of bubbly</span><span class="vlak__promolink">Book a table <svg viewBox="0 0 7 11" aria-hidden="true" focusable="false"><path d="M1 1l4.5 4.5L1 10" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></span></span></a></div>
      </div>

      <div class="vlak__deel" id="kopvlak-m3" data-deel="m3">
        <div class="vlak__intro">
          <p class="vlak__naam">Meetings & events</p>
          <p class="vlak__tekst">Twelve rooms with daylight, for 4 to 200 guests.</p>
          <a class="vlak__alles" href="/en/meetings-and-events/">All about meetings &amp; events <svg viewBox="0 0 7 11" aria-hidden="true" focusable="false"><path d="M1 1l4.5 4.5L1 10" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
        </div>
        <div class="vlak__lijst">
          <ul class="vlak__links vlak__links--twee">
            <li><a href="/en/meetings-and-conferences/"><span>Meetings and conferences</span></a></li><li><a href="/en/parties-and-events/"><span>Parties and events</span></a></li><li><a href="/en/training-camp/"><span>Training camp</span></a></li><li><a href="/en/wedding/"><span>Wedding</span></a></li><li><a href="/en/memorial-service/"><span>Memorial service</span></a></li>
          </ul>
        </div>
        <div class="vlak__promokolom"><a class="vlak__promo" href="/en/meetings-and-conferences/"><img class="vlak__promofoto" src="/assets/img/Baron-van-wittenhorst-vergaderen-Parkhotel-Horst1-1-1024x683-e3cdf8.webp" width="320" height="150" alt="" loading="lazy" decoding="async" /><span class="vlak__promotekst"><span class="vlak__promolabel">Meetings</span><span class="vlak__promotitel">8-hour meeting package</span><span class="vlak__promoregel">room, lunch and unlimited coffee</span><span class="vlak__promolink">View the package <svg viewBox="0 0 7 11" aria-hidden="true" focusable="false"><path d="M1 1l4.5 4.5L1 10" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></span></span></a></div>
      </div>

      <div class="vlak__deel" id="kopvlak-m4" data-deel="m4">
        <div class="vlak__intro">
          <p class="vlak__naam">Wellness</p>
          <p class="vlak__tekst">A 25-metre pool, sauna and steam room.</p>
          <a class="vlak__alles" href="/en/wellness-centre/">All about wellness <svg viewBox="0 0 7 11" aria-hidden="true" focusable="false"><path d="M1 1l4.5 4.5L1 10" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
        </div>
        <div class="vlak__lijst">
          <ul class="vlak__links">
            <li><a href="/en/faciliteiten/swimming-pool/"><span>Swimming pool</span></a></li><li><a href="/en/wellness-lounge-2/"><span>Wellness Lounge</span></a></li><li><a href="/en/wellness-day-packages/"><span>Wellness Day Packages</span></a></li><li><a href="/en/beauty-salon-senssis/"><span>Beauty Salon Senssis</span></a></li>
          </ul>
        </div>
        <div class="vlak__promokolom"><a class="vlak__promo" href="/en/wellness-day-packages/"><img class="vlak__promofoto" src="/assets/img/Wellness-Parkhotel-Horst-3-4-scaled-1000x700-c-default-bda49f.webp" width="320" height="150" alt="" loading="lazy" decoding="async" /><span class="vlak__promotekst"><span class="vlak__promolabel">Day out</span><span class="vlak__promotitel">Wellness Day Package</span><span class="vlak__promoregel">pool, sauna and lunch</span><span class="vlak__promolink">View the package <svg viewBox="0 0 7 11" aria-hidden="true" focusable="false"><path d="M1 1l4.5 4.5L1 10" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></span></span></a></div>
      </div>

      <div class="vlak__deel" id="kopvlak-m5" data-deel="m5">
        <div class="vlak__intro">
          <p class="vlak__naam">Surroundings</p>
          <p class="vlak__tekst">The Peel, the Meuse and Toverland just around the corner.</p>
          <a class="vlak__alles" href="/en/gebied/">All about the surroundings <svg viewBox="0 0 7 11" aria-hidden="true" focusable="false"><path d="M1 1l4.5 4.5L1 10" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
        </div>
        <div class="vlak__lijst vlak__lijst--kolommen">
          <ul class="vlak__links">
            <li><a href="/en/gebieden/culture/"><span>Culture</span></a></li><li><a href="/en/gebieden/day-trip/"><span>Day trip</span></a></li><li><a href="/en/gebieden/nature/"><span>Nature</span></a></li><li><a href="/en/gebieden/shopping-and-cities/"><span>Shopping &amp; Cities</span></a></li><li><a href="/en/gebieden/golf/"><span>Golf</span></a></li>
          </ul>
          <ul class="vlak__links">
            <li><a href="/en/gebied/walking-routes/"><span>Walking routes</span></a></li><li><a href="/en/gebied/cycling-routes/"><span>Cycling routes</span></a></li>
          </ul>
        </div>
        <div class="vlak__promokolom"><a class="vlak__promo" href="/en/gebied/"><img class="vlak__promofoto" src="/assets/img/omgeving-kaart-d16716.svg" width="320" height="150" alt="" loading="lazy" decoding="async" /><span class="vlak__promotekst"><span class="vlak__promolabel">Surroundings</span><span class="vlak__promotitel">So much to do nearby</span><span class="vlak__promoregel">from Toverland to the Maasduinen</span><span class="vlak__promolink">Discover the area <svg viewBox="0 0 7 11" aria-hidden="true" focusable="false"><path d="M1 1l4.5 4.5L1 10" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></span></span></a></div>
      </div>

      <!-- 1024-1199 px: alle vijf rubrieken als tekstkolommen achter de Menu-knop -->
      <div class="vlak__deel vlak__deel--alle" id="kopvlak-alle" data-deel="alle">
        <div class="vlak__alle">
          <div>
            <p class="vlak__naam">Hotel</p>
            <a class="vlak__alles" href="/en/our-hotel/">All about the hotel <svg viewBox="0 0 7 11" aria-hidden="true" focusable="false"><path d="M1 1l4.5 4.5L1 10" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
            <ul class="vlak__links"><li><a href="/en/rooms-suites/"><span>Rooms &amp; Suites</span></a></li><li><a href="/en/faciliteiten/"><span>Facilities</span></a></li><li><a href="/en/arrangement/"><span>Packages</span></a></li><li><a href="/en/events/"><span>Events</span></a></li></ul>
          </div>
          <div>
            <p class="vlak__naam">Restaurant BØFF</p>
            <a class="vlak__alles" href="/en/boff-restaurant/">All about Restaurant BØFF <svg viewBox="0 0 7 11" aria-hidden="true" focusable="false"><path d="M1 1l4.5 4.5L1 10" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
            <ul class="vlak__links"><li><a href="/en/our-menu/"><span>Menu</span></a></li><li><a href="/en/dining/"><span>Dining</span></a></li><li><a href="/en/terrace-bar-brasserie/"><span>Terrace / Bar / Brasserie</span></a></li><li><a href="/en/breakfast/"><span>Breakfast buffet</span></a></li><li><a href="/en/sharing-lunch/"><span>Sharing lunch</span></a></li><li><a href="/en/gift-voucher/"><span>Gift voucher</span></a></li></ul>
          </div>
          <div>
            <p class="vlak__naam">Meetings & events</p>
            <a class="vlak__alles" href="/en/meetings-and-events/">All about meetings &amp; events <svg viewBox="0 0 7 11" aria-hidden="true" focusable="false"><path d="M1 1l4.5 4.5L1 10" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
            <ul class="vlak__links"><li><a href="/en/meetings-and-conferences/"><span>Meetings and conferences</span></a></li><li><a href="/en/parties-and-events/"><span>Parties and events</span></a></li><li><a href="/en/training-camp/"><span>Training camp</span></a></li><li><a href="/en/wedding/"><span>Wedding</span></a></li><li><a href="/en/memorial-service/"><span>Memorial service</span></a></li></ul>
          </div>
          <div>
            <p class="vlak__naam">Wellness</p>
            <a class="vlak__alles" href="/en/wellness-centre/">All about wellness <svg viewBox="0 0 7 11" aria-hidden="true" focusable="false"><path d="M1 1l4.5 4.5L1 10" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
            <ul class="vlak__links"><li><a href="/en/faciliteiten/swimming-pool/"><span>Swimming pool</span></a></li><li><a href="/en/wellness-lounge-2/"><span>Wellness Lounge</span></a></li><li><a href="/en/wellness-day-packages/"><span>Wellness Day Packages</span></a></li><li><a href="/en/beauty-salon-senssis/"><span>Beauty Salon Senssis</span></a></li></ul>
          </div>
          <div>
            <p class="vlak__naam">Surroundings</p>
            <a class="vlak__alles" href="/en/gebied/">All about the surroundings <svg viewBox="0 0 7 11" aria-hidden="true" focusable="false"><path d="M1 1l4.5 4.5L1 10" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
            <ul class="vlak__links"><li><a href="/en/gebieden/culture/"><span>Culture</span></a></li><li><a href="/en/gebieden/day-trip/"><span>Day trip</span></a></li><li><a href="/en/gebieden/nature/"><span>Nature</span></a></li><li><a href="/en/gebieden/shopping-and-cities/"><span>Shopping &amp; Cities</span></a></li><li><a href="/en/gebieden/golf/"><span>Golf</span></a></li><li><a href="/en/gebied/walking-routes/"><span>Walking routes</span></a></li><li><a href="/en/gebied/cycling-routes/"><span>Cycling routes</span></a></li></ul>
          </div>
        </div>
        <div class="vlak__voet"><a href="tel:0031773976000">+31 (0)77 397 60 00</a><a href="mailto:info@parkhotelhorst.nl">info@parkhotelhorst.nl</a></div>
      </div>

    </div>
  </div>

  <!-- mobiel en tablet: het schuifpaneel met de accordeon -->
  <nav class="paneel" id="menupaneel" tabindex="-1" aria-label="Menu">
    <div class="paneel__kop">
      <span class="paneel__titel">Menu</span>
      <a class="paneel__boek distributor-open" href="https://api.mews.com/distributor/ea3920b8-6b38-436c-ae08-af1d007c3bd6">Search and book</a>
      <button type="button" class="paneel__sluit" id="menusluit" aria-label="Close"><svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" focusable="false"><path d="M2 2 14 14M14 2 2 14" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/></svg></button>
    </div>
    <div class="paneel__inhoud">
      <ul class="paneel__hoofd">
        <li class="acc" data-rub="m1">
          <button type="button" class="acc__knop" aria-expanded="false" aria-controls="acc-m1">Hotel<svg class="chev" viewBox="0 0 12 8" aria-hidden="true" focusable="false"><path d="M1 1.6 6 6.4 11 1.6" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
          <div class="acc__vak" id="acc-m1"><ul>
            <li><a class="acc__alles" href="/en/our-hotel/">All about the hotel <svg viewBox="0 0 14 10" aria-hidden="true" focusable="false"><path d="M1 5h11M8 1.4 12 5l-4 3.6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></a></li>
            <li><a href="/en/rooms-suites/"><span>Rooms &amp; Suites</span></a></li><li><a href="/en/faciliteiten/"><span>Facilities</span></a></li><li><a href="/en/arrangement/"><span>Packages</span></a></li><li><a href="/en/events/"><span>Events</span></a></li>
          </ul></div>
        </li>
        <li class="acc" data-rub="m2">
          <button type="button" class="acc__knop" aria-expanded="false" aria-controls="acc-m2">Restaurant BØFF<svg class="chev" viewBox="0 0 12 8" aria-hidden="true" focusable="false"><path d="M1 1.6 6 6.4 11 1.6" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
          <div class="acc__vak" id="acc-m2"><ul>
            <li><a class="acc__alles" href="/en/boff-restaurant/">All about Restaurant BØFF <svg viewBox="0 0 14 10" aria-hidden="true" focusable="false"><path d="M1 5h11M8 1.4 12 5l-4 3.6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></a></li>
            <li><a href="/en/our-menu/"><span>Menu</span></a></li><li><a href="/en/dining/"><span>Dining</span></a></li><li><a href="/en/terrace-bar-brasserie/"><span>Terrace / Bar / Brasserie</span></a></li><li><a href="/en/breakfast/"><span>Breakfast buffet</span></a></li><li><a href="/en/sharing-lunch/"><span>Sharing lunch</span></a></li><li><a href="/en/gift-voucher/"><span>Gift voucher</span></a></li>
          </ul></div>
        </li>
        <li class="acc" data-rub="m3">
          <button type="button" class="acc__knop" aria-expanded="false" aria-controls="acc-m3">Meetings & events<svg class="chev" viewBox="0 0 12 8" aria-hidden="true" focusable="false"><path d="M1 1.6 6 6.4 11 1.6" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
          <div class="acc__vak" id="acc-m3"><ul>
            <li><a class="acc__alles" href="/en/meetings-and-events/">All about meetings &amp; events <svg viewBox="0 0 14 10" aria-hidden="true" focusable="false"><path d="M1 5h11M8 1.4 12 5l-4 3.6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></a></li>
            <li><a href="/en/meetings-and-conferences/"><span>Meetings and conferences</span></a></li><li><a href="/en/parties-and-events/"><span>Parties and events</span></a></li><li><a href="/en/training-camp/"><span>Training camp</span></a></li><li><a href="/en/wedding/"><span>Wedding</span></a></li><li><a href="/en/memorial-service/"><span>Memorial service</span></a></li>
          </ul></div>
        </li>
        <li class="acc" data-rub="m4">
          <button type="button" class="acc__knop" aria-expanded="false" aria-controls="acc-m4">Wellness<svg class="chev" viewBox="0 0 12 8" aria-hidden="true" focusable="false"><path d="M1 1.6 6 6.4 11 1.6" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
          <div class="acc__vak" id="acc-m4"><ul>
            <li><a class="acc__alles" href="/en/wellness-centre/">All about wellness <svg viewBox="0 0 14 10" aria-hidden="true" focusable="false"><path d="M1 5h11M8 1.4 12 5l-4 3.6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></a></li>
            <li><a href="/en/faciliteiten/swimming-pool/"><span>Swimming pool</span></a></li><li><a href="/en/wellness-lounge-2/"><span>Wellness Lounge</span></a></li><li><a href="/en/wellness-day-packages/"><span>Wellness Day Packages</span></a></li><li><a href="/en/beauty-salon-senssis/"><span>Beauty Salon Senssis</span></a></li>
          </ul></div>
        </li>
        <li class="acc" data-rub="m5">
          <button type="button" class="acc__knop" aria-expanded="false" aria-controls="acc-m5">Surroundings<svg class="chev" viewBox="0 0 12 8" aria-hidden="true" focusable="false"><path d="M1 1.6 6 6.4 11 1.6" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
          <div class="acc__vak" id="acc-m5"><ul>
            <li><a class="acc__alles" href="/en/gebied/">All about the surroundings <svg viewBox="0 0 14 10" aria-hidden="true" focusable="false"><path d="M1 5h11M8 1.4 12 5l-4 3.6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></a></li>
            <li><a href="/en/gebieden/culture/"><span>Culture</span></a></li><li><a href="/en/gebieden/day-trip/"><span>Day trip</span></a></li><li><a href="/en/gebieden/nature/"><span>Nature</span></a></li><li><a href="/en/gebieden/shopping-and-cities/"><span>Shopping &amp; Cities</span></a></li><li><a href="/en/gebieden/golf/"><span>Golf</span></a></li><li><a href="/en/gebied/walking-routes/"><span>Walking routes</span></a></li><li><a href="/en/gebied/cycling-routes/"><span>Cycling routes</span></a></li>
          </ul></div>
        </li>
      </ul>

      <div class="paneel__extra">
        <ul class="paneel__meer">
          <li><a href="/werken-bij-parkhotel/vacatures/">Vacancies</a></li>
          <li><a href="tel:0031773976000">+31 (0)77 397 60 00</a></li>
          <li><a href="mailto:info@parkhotelhorst.nl">info@parkhotelhorst.nl</a></li>
          <li><a href="/en/about-us/">About us</a></li>
          <li><a href="/en/contact-information/">Contact information</a></li>
          <li><a href="/en/directions/">Directions</a></li>
          <li><a href="/en/frequently-asked-questions/">Frequently Asked Questions</a></li>
        </ul>
        <ul class="paneel__talen">
          <li><a href="/restaurant-boff/" hreflang="nl" lang="nl">NL</a></li>
          <li><a href="/en/boff-restaurant/" hreflang="en" lang="en" aria-current="true">EN</a></li>
          <li><a href="/de/restaurant-boff-2/" hreflang="de" lang="de">DE</a></li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="paneel__waas" id="menuwaas"></div>

  <!-- zwevende boekknop, alleen onder 1024 px -->
  <div class="kopbalk__zweef"><a class="knop knop--vol distributor-open" href="https://api.mews.com/distributor/ea3920b8-6b38-436c-ae08-af1d007c3bd6">Search and book</a></div>
</header>


<main id="inhoud" class="rb">

  <!-- 1a. Hero: volle foto met donker verloop, tekst en knoppen gecentreerd, feitenregel op een hairline -->
  <section data-component="rb-hero" class="rb-hero">
    <div class="rb-hero__foto">
      <img src="/assets/img/rb-hero-ULT2861-960-5dde1c.webp" srcset="/assets/img/rb-hero-ULT2861-640-5dde1c.webp 640w, /assets/img/rb-hero-ULT2861-960-5dde1c.webp 960w, /assets/img/rb-hero-ULT2861-5dde1c.webp 1600w" sizes="100vw" alt="Two guests raising a glass of wine on the terrace of restaurant BØFF, overlooking the lake" width="1600" height="1066" fetchpriority="high" decoding="async" />
    </div>
    <div class="rb-wrap rb-hero__wrap">
      <div class="rb-hero__tekst">
        <h1 class="rb-hero__kop">Restaurant BØFF</h1>
        <p class="rb-hero__sub">The place in North Limburg where you feel <span class='rb-goud'>‘at home’</span> at any time of day.</p>
        <div class="rb-knoppen">
          <a class="rb-knop" href="#zc-action-open-widget">Book a table</a>
          <a class="rb-knop rb-knop--ghost" href="/en/our-menu/">View the menu</a>
        </div>
      </div>
    </div>
  </section>

  <!-- 2b. Over BØFF: cremepaneel, tekst en knoppen links, vier icoontegels 2x2 rechts (.sz-intro van /herfst/) -->
  <section data-component="rb-intro" class="rb-sec rb-intro">
    <div class="rb-wrap">
      <div class="rb-paneel rb-intro__paneel">
        <div class="rb-intro__tekstkol">
          <h2 class="rb-h2">About BØFF</h2>
          <p class="rb-intro__tekst">BØFF is the restaurant of Parkhotel Horst, by the lake next to the Kasteelse Bossen. From coffee with Limburg vlaai to lunch with friends or business contacts, drinks at the trendy bar or a dinner full of artisanal dishes: you are welcome at any time of day.</p>
          <p class="rb-intro__tekst">Inside, the contemporary interior and the various seating areas create a homely atmosphere. Outside, you look out over the water from the spacious terrace.</p>
          <div class="rb-intro__knoppen">
            <a class="rb-knop" href="#zc-action-open-widget">Book a table</a>
            <a class="rb-knop rb-knop--ghost-donker" href="/en/our-menu/">View the menu</a>
          </div>
        </div>
        <ul class="rb-intro__tegels">
          <li class="rb-icotegel"><svg class="rb-ico" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg><span><b>Daily from 07:00</b>on Fridays and Saturdays you are welcome until 01:00</span></li>
          <li class="rb-icotegel"><svg class="rb-ico" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 3v8a2.5 2.5 0 0 0 5 0V3"/><path d="M8.5 11v10"/><path d="M17.5 3c-1.6 1.6-2.5 3.6-2.5 5.6 0 1.6.9 2.4 2.5 2.4V21"/></svg><span><b>Breakfast, lunch and dinner</b>plus coffee with Limburg vlaai and drinks at the bar</span></li>
          <li class="rb-icotegel"><svg class="rb-ico" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="9" r="3.4"/><path d="M12 2.6v1.6M12 13.8v1.6M4.8 9h1.6M17.6 9h1.6M6.9 3.9l1.1 1.1M16 14l1.1 1.1M17.1 3.9 16 5M8 14l-1.1 1.1"/><path d="M3 19.4c1.6 1.2 3.2 1.2 4.8 0s3.2-1.2 4.8 0 3.2 1.2 4.8 0 1.6-.6 2.6-.6"/></svg><span><b>Terrace by the water</b>views over the lake and the Kasteelse Bossen</span></li>
          <li class="rb-icotegel"><svg class="rb-ico" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 4c0 9-5.4 13.4-11 13.4-2 0-4-.6-4-3.4C5 8.4 10.4 4 20 4z"/><path d="M4.5 20c2.5-4.6 6-7.6 10.5-9.4"/></svg><span><b>Fresh and artisanal</b>vegetarian and vegan dishes are always on the menu</span></li>
        </ul>
      </div>
    </div>
  </section>

  <!-- 3f. Op elk moment van de dag: kop en intro gecentreerd op het patroon, vijf cremekaarten op een rij
       (foto 160, tijd goud, naam, regel, tekstlinks); telefoon: veegrij met peek, geen script -->
  <section data-component="rb-dag" class="rb-sec rb-dag" id="dag">
    <div class="rb-wrap">
      <div class="rb-dag__kop">
        <h2 class="rb-h2">At <span class='rb-goud'>any time</span> of day</h2>
        <p class="rb-dag__intro">From breakfast to the last drink: at BØFF you join us whenever it suits you.</p>
      </div>
      <ul class="rb-dag__rij">
        <li class="rb-dkaart">
          <img src="/assets/img/rb-dag-ontbijt-2731b8.webp" alt="Croissants being taken from the basket at the breakfast buffet with tongs" width="800" height="533" loading="lazy" decoding="async" />
          <div class="rb-dkaart__body">
            <p class="rb-dkaart__tijd">from 07:00</p>
            <h3 class="rb-dkaart__naam">Breakfast</h3>
            <p class="rb-dkaart__tekst">An extensive breakfast buffet, also without an overnight stay: &euro;&nbsp;17.50 p.p. incl. coffee, tea, water and juice. Mon to Fri 07:00 to 10:00, Sat and Sun 08:00 to 11:00.</p>
            <p class="rb-dkaart__links"><a class="rb-link" href="/en/breakfast-buffet/">View the breakfast buffet <svg class="rb-pijltje" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8h10M9 4l4 4-4 4"/></svg></a></p>
          </div>
        </li>
        <li class="rb-dkaart">
          <img src="/assets/img/rb-dag-koffie-babba6.webp" alt="Latte macchiato with a slice of Limburg vlaai on the table" width="800" height="533" loading="lazy" decoding="async" />
          <div class="rb-dkaart__body">
            <p class="rb-dkaart__tijd">all day</p>
            <h3 class="rb-dkaart__naam">Coffee with Limburg vlaai</h3>
            <p class="rb-dkaart__tekst">Coffee with Limburg vlaai, inside at one of the seating areas or on the terrace by the water.</p>
            <p class="rb-dkaart__links"><a class="rb-link" href="/en/terrace-bar-brasserie/">View terrace, bar and brasserie <svg class="rb-pijltje" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8h10M9 4l4 4-4 4"/></svg></a></p>
          </div>
        </li>
        <li class="rb-dkaart">
          <img src="/assets/img/rb-dag-lunch-c72e9e.webp" alt="Main-course salad with tomato and olives from the lunch menu" width="800" height="533" loading="lazy" decoding="async" />
          <div class="rb-dkaart__body">
            <p class="rb-dkaart__tijd">11:00 to 17:00</p>
            <h3 class="rb-dkaart__naam">Lunch</h3>
            <p class="rb-dkaart__tekst">Lunch menu with focaccias, salads and flammkuchen. Or make an afternoon of it with the sharing lunch, every day between 12:00 and 17:00, &euro;&nbsp;27.50 p.p.</p>
            <p class="rb-dkaart__links"><a class="rb-link" href="/en/our-menu/">View the menu <svg class="rb-pijltje" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8h10M9 4l4 4-4 4"/></svg></a><a class="rb-link" href="/en/sharing-lunch/">View the sharing lunch <svg class="rb-pijltje" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8h10M9 4l4 4-4 4"/></svg></a></p>
          </div>
        </li>
        <li class="rb-dkaart">
          <img src="/assets/img/rb-dag-borrel-ce5da7.webp" alt="Two women drinking a cocktail at the BØFF bar" width="800" height="533" loading="lazy" decoding="async" />
          <div class="rb-dkaart__body">
            <p class="rb-dkaart__tijd">Fri and Sat until 01:00</p>
            <h3 class="rb-dkaart__naam">Drinks at the bar</h3>
            <p class="rb-dkaart__tekst">At the bar you can kick off the weekend with a cocktail from the menu, such as a Moscow Mule, mojito or gin and tonic. On Fridays and Saturdays you are welcome until 01:00 for a drink after dinner.</p>
            <p class="rb-dkaart__links"><a class="rb-link" href="/en/drinks-menu/">View the drinks menu <svg class="rb-pijltje" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8h10M9 4l4 4-4 4"/></svg></a></p>
          </div>
        </li>
        <li class="rb-dkaart">
          <img src="/assets/img/rb-dag-diner-909b1b.webp" alt="Waiter with four guests at a table by the window in restaurant BØFF" width="800" height="533" loading="lazy" decoding="async" />
          <div class="rb-dkaart__body">
            <p class="rb-dkaart__tijd">17:00 to 21:30</p>
            <h3 class="rb-dkaart__naam">Dinner</h3>
            <p class="rb-dkaart__tekst">Artisanal dishes, from a veal rib-eye with tarragon jus to a pot of mussels; vegetarian and vegan dishes are always on the menu. Three-course set menu of your choice &euro;&nbsp;39.50.</p>
            <p class="rb-dkaart__links"><a class="rb-link" href="/en/dining/">All about dining <svg class="rb-pijltje" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8h10M9 4l4 4-4 4"/></svg></a></p>
          </div>
        </li>
      </ul>
      <div class="rb-knoppen rb-dag__knoppen">
        <a class="rb-knop" href="#zc-action-open-widget">Book a table</a>
        <a class="rb-knop rb-knop--ghost" href="/en/our-menu/">View the menu</a>
      </div>
    </div>
  </section>

  <!-- 4b. De menukaart: paneel rechts, fotoslider links steekt uit (.sz-arr/.sz-fs van /herfst/, als dv-arr) -->
  <section data-component="rb-arr" class="rb-sec rb-arr" id="kaart">
    <div class="rb-wrap">
      <div class="rb-arr__blok">
        <div class="rb-arr__bg" aria-hidden="true"></div>
        <!-- fotoslider: vijf gerechtfoto's (velden rb-fs-1..5), scroll-snap; pijlen en bolletjes via pagina-restaurant-boff-v3.js -->
        <div class="rb-arr__foto rb-fs" data-fotoslider>
          <div class="rb-fs__spoor" data-fs-spoor>
            <figure class="rb-fs__dia"><img src="/assets/img/din-gerecht-carpaccio-800-6153a8.webp" srcset="/assets/img/din-gerecht-carpaccio-800-6153a8.webp 800w, /assets/img/din-gerecht-carpaccio-6153a8.webp 1400w" sizes="(min-width:1024px) 500px, 100vw" alt="Carpaccio with pesto, rocket and pine nuts" width="800" height="533" decoding="async" /></figure>
            <figure class="rb-fs__dia"><img src="/assets/img/din-gerecht-zalm-800-f1cac1.webp" srcset="/assets/img/din-gerecht-zalm-800-f1cac1.webp 800w, /assets/img/din-gerecht-zalm-f1cac1.webp 1400w" sizes="(min-width:1024px) 500px, 100vw" alt="Smoked salmon with lemon and rocket on a blue plate" width="800" height="533" loading="lazy" decoding="async" /></figure>
            <figure class="rb-fs__dia"><img src="/assets/img/din-gerecht-vis-800-297742.webp" srcset="/assets/img/din-gerecht-vis-800-297742.webp 800w, /assets/img/din-gerecht-vis-297742.webp 1400w" sizes="(min-width:1024px) 500px, 100vw" alt="Fish with a herb crust, broccoli and carrot on a white plate" width="800" height="533" loading="lazy" decoding="async" /></figure>
            <figure class="rb-fs__dia"><img src="/assets/img/din-gerecht-tonijn-800-b994c0.webp" srcset="/assets/img/din-gerecht-tonijn-800-b994c0.webp 800w, /assets/img/din-gerecht-tonijn-b994c0.webp 1400w" sizes="(min-width:1024px) 500px, 100vw" alt="Dish with tuna and tagliatelle on a dark plate at restaurant BØFF" width="800" height="533" loading="lazy" decoding="async" /></figure>
            <figure class="rb-fs__dia"><img src="/assets/img/din-dessert-800-f7b07a.webp" srcset="/assets/img/din-dessert-800-f7b07a.webp 800w, /assets/img/din-dessert-f7b07a.webp 1400w" sizes="(min-width:1024px) 500px, 100vw" alt="Dessert coupe with passion fruit and red berries" width="800" height="533" loading="lazy" decoding="async" /></figure>
          </div>
          <div class="rb-fs__bolletjes"><button type="button" class="rb-fs__bol is-aan" data-fs-naar="0" aria-label="Photo 1" aria-current="true"></button><button type="button" class="rb-fs__bol" data-fs-naar="1" aria-label="Photo 2"></button><button type="button" class="rb-fs__bol" data-fs-naar="2" aria-label="Photo 3"></button><button type="button" class="rb-fs__bol" data-fs-naar="3" aria-label="Photo 4"></button><button type="button" class="rb-fs__bol" data-fs-naar="4" aria-label="Photo 5"></button></div>
          <div class="rb-fs__pijlen">
            <button type="button" class="rb-fs__pijl" data-fs-stap="-1" aria-label="Previous photo"><svg fill="none" viewBox="0 0 20 20" aria-hidden="true"><path d="M12.5 4 6.5 10l6 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"/></svg></button>
            <button type="button" class="rb-fs__pijl" data-fs-stap="1" aria-label="Next photo"><svg fill="none" viewBox="0 0 20 20" aria-hidden="true"><path d="M7.5 4l6 6-6 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"/></svg></button>
          </div>
        </div>
        <div class="rb-arr__inner">
          <h2 class="rb-h2">The <span class='rb-goud'>menu</span></h2>
          <p class="rb-arr__tekst">Our chefs carefully put together the menu, full of fresh, artisanal dishes: from focaccias, salads and flammkuchen at lunch to an extensive dinner. Vegetarian and vegan dishes are always on the menu.</p>
          <p class="rb-arr__tekst rb-arr__tekst--om">Do you have allergies or other dietary requirements? Our staff will be happy to discuss the options with you.</p>
          <ul class="rb-arr__checks">
            <li><span class="rb-vak"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M8 12.2l2.6 2.6L16 9.5"/></svg></span><span>Three-course set menu of your choice &euro;&nbsp;39.50: put together your own starter, main course and dessert</span></li>
            <li><span class="rb-vak"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M8 12.2l2.6 2.6L16 9.5"/></svg></span><span>Vegetarian and vegan clearly labelled on the menu</span></li>
            <li><span class="rb-vak"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M8 12.2l2.6 2.6L16 9.5"/></svg></span><span>Regular menu until 21:30, then BØFF classics until 22:00</span></li>
            <li><span class="rb-vak"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M8 12.2l2.6 2.6L16 9.5"/></svg></span><span>BØFF children's menu: eat, relax and play<a class="rb-link rb-arr__kindlink" href="https://www.restaurantboff.nl/upload/files/Kindermenu%20NL.pdf" target="_blank" rel="noopener">View the children's menu <svg class="rb-pijltje" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8h10M9 4l4 4-4 4"/></svg></a></span></li>
          </ul>
          <div class="rb-arr__acties">
            <a class="rb-knop" href="/en/our-menu/">View the menu</a>
            <a class="rb-knop rb-knop--ghost-donker" href="/en/drinks-menu/">View the drinks menu</a>
            <a class="rb-knop rb-knop--ghost-donker" href="#zc-action-open-widget">Book a table</a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 5b. Binnen, aan de bar en op het terras: mozaiek zoals /wellness/ (wv-omg; terras groot, binnen, bar).
       Elke tegel is een knop die de pop-up #rbPopup opent (pagina-restaurant-boff-v3.js); geen tekstkolommen.
       Recept ob-buffet (6 okt 2026): per tegel alleen de naam, geen "Meer info"-cue, geen voet met knop. -->
  <section data-component="rb-omg" class="rb-sec rb-omg rb-omg--diep" id="plek">
    <div class="rb-wrap">
      <div class="rb-omg__kop">
        <h2 class="rb-h2">Inside, at the bar and on the <span class='rb-goud'>terrace</span></h2>
      </div>
      <div class="rb-omg__grid">
        <button type="button" class="rb-tegel rb-tegel--groot" data-plek="terras" aria-haspopup="dialog" aria-controls="rbPopup">
          <img src="/assets/img/rb-plek-terras-800-d43c6b.webp" srcset="/assets/img/rb-plek-terras-800-d43c6b.webp 800w, /assets/img/rb-plek-terras-d43c6b.webp 1400w" sizes="(min-width:1024px) 670px, 100vw" alt="The BØFF terrace with parasols and views over the lake" width="800" height="533" loading="lazy" decoding="async" />
          <span class="rb-tegel__tekst"><span class="rb-tegel__naam">The terrace</span></span>
        </button>
        <button type="button" class="rb-tegel" data-plek="binnen" aria-haspopup="dialog" aria-controls="rbPopup">
          <img src="/assets/img/rb-plek-binnen-800-f48bf2.webp" srcset="/assets/img/rb-plek-binnen-800-f48bf2.webp 800w, /assets/img/rb-plek-binnen-f48bf2.webp 1400w" sizes="(min-width:1024px) 440px, 50vw" alt="Leather booths by the green tiled wall with the BØFF letters" width="800" height="533" loading="lazy" decoding="async" />
          <span class="rb-tegel__tekst"><span class="rb-tegel__naam">Inside</span></span>
        </button>
        <button type="button" class="rb-tegel" data-plek="bar" aria-haspopup="dialog" aria-controls="rbPopup">
          <img src="/assets/img/rb-plek-bar-800-b47256.webp" srcset="/assets/img/rb-plek-bar-800-b47256.webp 800w, /assets/img/rb-plek-bar-b47256.webp 1400w" sizes="(min-width:1024px) 440px, 50vw" alt="The green BØFF bar with bar stools and hanging plants" width="800" height="533" loading="lazy" decoding="async" />
          <span class="rb-tegel__tekst"><span class="rb-tegel__naam">The bar</span></span>
        </button>
      </div>
    </div>
  </section>

  <!-- 6c. Evenementen en specials: slider van vijf kaarten (3,3 in beeld), teller + pijlen
       (pagina-restaurant-boff-v3.js), tekstlink Alle evenementen rechtsboven. Datum en prijs als
       tekstregel; leeg veld = geen regel. Gevuld rb-oN-doel = nieuw tabblad (de pdf). -->
  <section data-component="rb-ontdek" class="rb-sec rb-ontdek">
    <div class="rb-wrap">
      <div class="rb-ontdek__kop">
        <h2 class="rb-h2">Events and <span class='rb-goud'>specials</span> at BØFF</h2>
        <a class="rb-ontdek__alle" href="/en/events/">All events <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8h10M9 4l4 4-4 4"/></svg></a>
      </div>
      <div class="rb-ontdek__spoor" id="rbOntdek">
        <article class="rb-okaart">
          <img src="/assets/img/din-wildwijn-fd8f7c.webp" alt="Game dish with a glass of red wine on a wooden board in front of the wine rack" width="800" height="533" loading="lazy" decoding="async" />
          <div class="rb-okaart__body">
            <p class="rb-okaart__meta">Sat 31 October 2026</p>
            <h3 class="rb-okaart__titel">Game &amp; Wine Fest</h3>
            <p class="rb-okaart__tekst">This year we are once again celebrating the game season in style, with delicious game dishes, live music and drinks included.</p>
            <p class="rb-okaart__prijs">from &euro;&nbsp;169.50 p.p. incl. overnight stay</p>
            <p class="rb-okaart__knop"><a class="rb-knop rb-knop--klein rb-knop--ghost-donker" href="/en/game-and-wine-fest/">View the Game &amp; Wine Fest</a></p>
          </div>
        </article>
        <article class="rb-okaart">
          <img src="/assets/img/din-kerst-5dd868.webp" alt="Laid table with a dish and wine glasses next to the Christmas tree" width="800" height="533" loading="lazy" decoding="async" />
          <div class="rb-okaart__body">
            <p class="rb-okaart__meta">25 and 26 December 2026</p>
            <h3 class="rb-okaart__titel">Christmas at Parkhotel Horst</h3>
            <p class="rb-okaart__tekst">Make this year an unforgettable Christmas at Parkhotel Horst and create wonderful memories together.</p>
            
            <p class="rb-okaart__knop"><a class="rb-knop rb-knop--klein rb-knop--ghost-donker" href="/en/christmas/">View Christmas</a></p>
          </div>
        </article>
        <article class="rb-okaart">
          <img src="/assets/img/din-oudnieuw-12ad65.webp" alt="Fireworks above Parkhotel Horst, reflected in the lake" width="800" height="533" loading="lazy" decoding="async" />
          <div class="rb-okaart__body">
            <p class="rb-okaart__meta">Thu 31 December 2026</p>
            <h3 class="rb-okaart__titel">New Year's Eve</h3>
            <p class="rb-okaart__tekst">Celebrate a unique end to 2026 together and ring in 2027 in style at Parkhotel Horst.</p>
            <p class="rb-okaart__prijs">&euro;&nbsp;119.50 p.p.</p>
            <p class="rb-okaart__knop"><a class="rb-knop rb-knop--klein rb-knop--ghost-donker" href="/en/new-years-eve/">View New Year's Eve</a></p>
          </div>
        </article>
        <article class="rb-okaart">
          <img src="/assets/img/din-vriendinnen-f3b912.webp" alt="Two glasses of red wine being raised on the terrace" width="800" height="533" loading="lazy" decoding="async" />
          <div class="rb-okaart__body">
            <p class="rb-okaart__meta">every day 12:00 to 17:00</p>
            <h3 class="rb-okaart__titel">Sharing lunch</h3>
            <p class="rb-okaart__tekst">Make your lunch a unique experience with our sharing lunch.</p>
            <p class="rb-okaart__prijs">&euro;&nbsp;27.50 p.p.</p>
            <p class="rb-okaart__knop"><a class="rb-knop rb-knop--klein rb-knop--ghost-donker" href="/en/sharing-lunch/">Discover the sharing lunch</a></p>
          </div>
        </article>
        <article class="rb-okaart">
          <img src="/assets/img/uit-eten-met-kids-eten-ontspannen-en-spelen-800x533-1-1100x600-c-default-1b1630.webp" alt="Child at the table with the children's menu of restaurant BØFF" width="800" height="533" loading="lazy" decoding="async" />
          <div class="rb-okaart__body">
            
            <h3 class="rb-okaart__titel">BØFF children's menu</h3>
            <p class="rb-okaart__tekst">Eat, relax and play</p>
            
            <p class="rb-okaart__knop"><a class="rb-knop rb-knop--klein rb-knop--ghost-donker" href="https://www.restaurantboff.nl/upload/files/Kindermenu%20NL.pdf" target="_blank" rel="noopener">View the children's menu</a></p>
          </div>
        </article>
      </div>
      <div class="zd-counterrow rb-ontdek__nav"><span class="zd-counter rb-ontdek__teller" data-teller="od"><b>1</b> / 5</span><span class="rb-ontdek__pijlen"><button aria-label="Previous" class="zd-arrow" data-richting="-1" data-slider="od" type="button"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 8H3M7 4L3 8l4 4"/></svg></button><button aria-label="Next" class="zd-arrow" data-richting="1" data-slider="od" type="button"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8h10M9 4l4 4-4 4"/></svg></button></span></div>
    </div>
  </section>

  <!-- 7e. Zakelijk eten of met een groep: kop en tekst gecentreerd, drie cremekaarten (foto 200, naam,
       prijsregel op een hairline, zin), knoppen gecentreerd eronder; telefoon: veegrij met peek -->
  <section data-component="rb-zak" class="rb-sec rb-zak" id="zakelijk">
    <div class="rb-wrap">
      <div class="rb-zak__kop">
        <h2 class="rb-h2">Business dining or with a <span class='rb-goud'>group</span></h2>
        <p class="rb-zak__tekst">A stylish restaurant, a beautiful view and multifunctional rooms: the perfect venue for your business dinner.</p>
      </div>
      <ul class="rb-zak__rij">
        <li class="rb-zkaart">
          <img src="/assets/img/rb-zak-werken-1a47a0.webp" alt="Guest working on a laptop at a table in restaurant BØFF" width="800" height="533" loading="lazy" decoding="async" />
          <div class="rb-zkaart__body">
            <h3 class="rb-zkaart__naam">Business lunch</h3>
            <b class="rb-zkaart__prijs">Lunch buffet from &euro;&nbsp;19.50</b>
            <p class="rb-zkaart__tekst">Our restaurant BØFF is a lovely place to spend time; the various seating areas are ideal for drinks or a quiet meeting.</p>
          </div>
        </li>
        <li class="rb-zkaart">
          <img src="/assets/img/rb-zak-diner-fa1856.webp" alt="Business guest at a table in restaurant BØFF with a glass of white wine" width="800" height="533" loading="lazy" decoding="async" />
          <div class="rb-zkaart__body">
            <h3 class="rb-zkaart__naam">Business dinner</h3>
            <b class="rb-zkaart__prijs">Three-course dinner from &euro;&nbsp;35</b>
            <p class="rb-zkaart__tekst">Our restaurant BØFF is a lovely place to spend time; the various seating areas are ideal for drinks or a quiet meeting.</p>
          </div>
        </li>
        <li class="rb-zkaart">
          <img src="/assets/img/rb-plek-binnen-800-f48bf2.webp" alt="Long dining room with leather booths and the green tiled wall of BØFF" width="800" height="533" loading="lazy" decoding="async" />
          <div class="rb-zkaart__body">
            <h3 class="rb-zkaart__naam">Private with a group</h3>
            <b class="rb-zkaart__prijs">6 to 130 people in a private room</b>
            <p class="rb-zkaart__tekst">If you would like to dine with a larger party in a separate room, we have an attractive space available at the back of our restaurant.</p>
          </div>
        </li>
      </ul>
      <div class="rb-knoppen rb-zak__knoppen">
        <a class="rb-knop" href="/en/business-dinner/">View business dining</a>
        <a class="rb-knop rb-knop--ghost" href="mailto:info@parkhotelhorst.nl?subject=Quote%20request%20business%20lunch%20or%20dinner">Request a quote</a>
      </div>
    </div>
  </section>

  <!-- 8a. Goed om te weten: witte tegels zoals /wellness/ (wv-tegels), vier kolommen: hoge tegel
       Openingstijden (twee rijen), vijf praktische tegels en een adrestegel; tel + mail eronder -->
  <section data-component="rb-tegels" class="rb-sec rb-tegels" id="praktisch">
    <div class="rb-wrap">
      <div class="rb-tegels__kop">
        <h2 class="rb-h2">Good to <span class='rb-goud'>know</span></h2>
      </div>
      <ul class="rb-tegels__raster">
        <li class="rb-ptegel rb-ptegel--hoog"><svg class="rb-ico" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.5 2"/></svg><h3>Opening hours</h3><table class="rb-tijden"><tbody><tr><th scope="row">Monday</th><td>07:00–00:00</td></tr><tr><th scope="row">Tuesday</th><td>07:00–00:00</td></tr><tr><th scope="row">Wednesday</th><td>07:00–00:00</td></tr><tr><th scope="row">Thursday</th><td>07:00–00:00</td></tr><tr class="rb-goud"><th scope="row">Friday</th><td>07:00–01:00</td></tr><tr class="rb-goud"><th scope="row">Saturday</th><td>07:00–01:00</td></tr><tr><th scope="row">Sunday</th><td>07:00–00:00</td></tr></tbody></table><p class="rb-tijden__keuken">Lunch menu 11:00 to 17:00<br>Dinner 17:00 to 21:30, then BØFF classics until 22:00</p></li>
        <li class="rb-ptegel"><svg class="rb-ico" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3.5" y="5" width="17" height="15" rx="1.5"/><path d="M3.5 10h17M8 3v4M16 3v4"/></svg><h3>Reservations</h3><p>online via the button, or call for groups of 12 or more</p></li>
        <li class="rb-ptegel"><svg class="rb-ico" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5.5 18.5C5 11 9.5 5 19.5 4.5c.5 10-5.5 14.5-13 14"/><path d="M4 20c3.5-4.5 7-7.5 11-10"/></svg><h3>Dietary requirements</h3><p>our staff are happy to help</p></li>
        <li class="rb-ptegel"><svg class="rb-ico" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="8" cy="6" r="2.4"/><path d="M4 20v-5a4 4 0 0 1 8 0v5"/><circle cx="17" cy="10" r="1.8"/><path d="M14.5 20v-3.5a2.5 2.5 0 0 1 5 0V20"/></svg><h3>Children welcome</h3><p>own children's menu: eat, relax and play</p></li>
        <li class="rb-ptegel"><svg class="rb-ico" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 11.5a9 7.5 0 0 1 18 0z"/><path d="M12 4v16M8.5 20h7"/></svg><h3>Terrace</h3><p>the full menu is served outside</p></li>
        <li class="rb-ptegel"><svg class="rb-ico" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 21s-6.5-6.2-6.5-11a6.5 6.5 0 0 1 13 0c0 4.8-6.5 11-6.5 11z"/><circle cx="12" cy="10" r="2.3"/></svg><h3>Easy to reach</h3><p>on the edge of Horst by the Kasteelse Bossen, next to the A73</p></li>
        <li class="rb-ptegel rb-ptegel--adres"><svg class="rb-ico" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3.5 11 12 4l8.5 7"/><path d="M5.5 9.5V20h13V9.5"/><path d="M10 20v-5h4v5"/></svg><h3>Address</h3><p>Restaurant BØFF, Parkhotel Horst, Tienrayseweg 2, 5961 NL Horst<br><a href="tel:+31773976000">+31 77 397 6000</a></p></li>
      </ul>
      <div class="rb-tegels__voet">
        <a class="rb-tel" href="tel:+31773976000"><svg class="rb-ico" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 3.5h3.5l1.8 4.5-2.3 1.4a11 11 0 0 0 6.6 6.6l1.4-2.3 4.5 1.8V19a1.5 1.5 0 0 1-1.5 1.5A16.5 16.5 0 0 1 3.5 5 1.5 1.5 0 0 1 5 3.5z"/></svg><span>Call +31 77 397 6000</span></a>
        <a class="rb-tel" href="mailto:info@parkhotelhorst.nl"><svg class="rb-ico" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5.5" width="18" height="13" rx="1.5"/><path d="M3.5 6.5 12 13l8.5-6.5"/></svg><span>info@parkhotelhorst.nl</span></a>
      </div>
    </div>
  </section>

  <!-- 8c. Veelgestelde vragen zoals /wellness/ (wv-faq): kop links, vragen rechts (details), eerste open -->
  <section data-component="rb-faq" class="rb-sec rb-faq">
    <div class="rb-wrap rb-faq__raster">
      <div class="rb-faq__kop">
        <h2 class="rb-h2">Frequently asked questions</h2>
        <a class="rb-faq__tel" href="tel:+31773976000"><svg class="rb-ico" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 1.5h3l1.5 3.5-2 1.2a8 8 0 0 0 4.3 4.3l1.2-2 3.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5A12 12 0 0 1 1.5 3 1.5 1.5 0 0 1 3 1.5z"/></svg><span>Call +31 77 397 6000</span></a>
      </div>
      <div class="rb-faq__lijst">
        <details class="rb-faq__item" open>
          <summary class="rb-faq__vraag"><h3>Do I need to book at BØFF?</h3><span class="rb-faq__pijl" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 6l4.5 4.5L12.5 6"/></svg></span></summary>
          <p class="rb-faq__antwoord">You can book directly online: choose the date, time and number of guests and you will receive a confirmation straight away. Coming with a group of 12 or more? Call us on <a href='tel:+31773976000'>+31 77 397 6000</a>.</p>
        </details>
        <details class="rb-faq__item">
          <summary class="rb-faq__vraag"><h3>Can I just have coffee or lunch?</h3><span class="rb-faq__pijl" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 6l4.5 4.5L12.5 6"/></svg></span></summary>
          <p class="rb-faq__antwoord">Yes. BØFF is open daily from 07:00 for coffee with Limburg vlaai, and the lunch menu is served from 11:00 to 17:00, inside or on the terrace.</p>
        </details>
        <details class="rb-faq__item">
          <summary class="rb-faq__vraag"><h3>How late can I have dinner?</h3><span class="rb-faq__pijl" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 6l4.5 4.5L12.5 6"/></svg></span></summary>
          <p class="rb-faq__antwoord">Dinner is served between 17:00 and 21:30. After that, you can choose from the BØFF classics until 22:00. On Fridays and Saturdays you are welcome until 01:00 for a drink after dinner.</p>
        </details>
        <details class="rb-faq__item">
          <summary class="rb-faq__vraag"><h3>Are there vegetarian and vegan dishes?</h3><span class="rb-faq__pijl" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 6l4.5 4.5L12.5 6"/></svg></span></summary>
          <p class="rb-faq__antwoord">Yes. Vegetarian and vegan dishes are always on the menu, such as the beetroot tartare with crispy goat's cheese, a vegetable risotto or vegan croquettes. Do you have dietary requirements or allergies? Our staff will be happy to advise you.</p>
        </details>
        <details class="rb-faq__item">
          <summary class="rb-faq__vraag"><h3>Is BØFF suitable for children?</h3><span class="rb-faq__pijl" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 6l4.5 4.5L12.5 6"/></svg></span></summary>
          <p class="rb-faq__antwoord">Yes, BØFF has its own children's menu: eat, relax and play. <a href="https://www.restaurantboff.nl/upload/files/Kindermenu%20NL.pdf" target="_blank" rel="noopener">View the children's menu</a></p>
        </details>
        <details class="rb-faq__item">
          <summary class="rb-faq__vraag"><h3>Can I have breakfast at BØFF without staying overnight?</h3><span class="rb-faq__pijl" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 6l4.5 4.5L12.5 6"/></svg></span></summary>
          <p class="rb-faq__antwoord">Yes, the breakfast buffet is also available without an overnight stay for &euro;&nbsp;17.50 p.p. incl. coffee, tea, water and juice. Mon to Fri 07:00 to 10:00, Sat and Sun 08:00 to 11:00. <a href="/en/breakfast-buffet/">View the breakfast buffet</a></p>
        </details>
      </div>
    </div>
  </section>

  <!-- 9a. Tripadvisor: de bouwsteen van de homepage, op het patroon; de reserveerknop staat eronder
       (buiten de gedeelde bouwsteen, die blijft ongemoeid) -->
  <div class="rb-ta ta-op-patroon ta-lus">
  <section data-component="reviews-tripadvisor" class="blok blok--creme blok-ta">
    <div class="omhulsel">

      <div class="ta-kop">
        <h2 class="kop ta-kop__titel">What guests say on Tripadvisor</h2>
        <p class="ta-kop__score">
          <span class="ta-kop__cijfer">4.1</span>
          <span class="ta-bollen" data-vol="4" role="img" aria-label="4.1/5"><span></span><span></span><span></span><span></span><span></span></span>
          <a class="ta-aantal" href="https://www.tripadvisor.com/Hotel_Review-g3340802-d1140689-Reviews-Parkhotel_Horst-Horst_Limburg_Province.html" target="_blank" rel="noopener">530 reviews</a>
        </p>
      </div>


      <div class="ta-strook" data-ta-strook>
        <div class="ta-paneel">
          <div class="ta-paneel__zij">
            <img class="ta-paneel__merk" src="/assets/img/tripadvisor-stacked.svg" alt="Tripadvisor" width="65" height="58" loading="lazy" />
            <div class="ta-paneel__kop">
              <span class="ta-paneel__cijfer">4.1</span>
              <div>
                <p class="ta-paneel__woord">Good</p>
                <p class="ta-paneel__regel">
                  <span class="ta-bollen ta-bollen--klein" data-vol="4" role="img" aria-label="4.1/5"><span></span><span></span><span></span><span></span><span></span></span>
                  <a class="ta-aantal" href="https://www.tripadvisor.com/Hotel_Review-g3340802-d1140689-Reviews-Parkhotel_Horst-Horst_Limburg_Province.html" target="_blank" rel="noopener">(530 reviews)</a>
                </p>
              </div>
            </div>
            <p class="ta-paneel__rang">No. 1 of 2 hotels in Horst</p>
            <p class="ta-bron">Reviews on <b>Tripadvisor</b></p>
          </div>
          <div class="ta-deel">
            <div class="ta-deel__rij"><span class="ta-deel__naam">Location</span><span class="ta-deel__meting"><span class="ta-deel__baan"><span class="ta-deel__vul" style="--score:4.4"></span></span><span class="ta-deel__cijfer">4.4</span></span></div>
            <div class="ta-deel__rij"><span class="ta-deel__naam">Rooms</span><span class="ta-deel__meting"><span class="ta-deel__baan"><span class="ta-deel__vul" style="--score:4.1"></span></span><span class="ta-deel__cijfer">4.1</span></span></div>
            <div class="ta-deel__rij"><span class="ta-deel__naam">Value</span><span class="ta-deel__meting"><span class="ta-deel__baan"><span class="ta-deel__vul" style="--score:4.0"></span></span><span class="ta-deel__cijfer">4.0</span></span></div>
            <div class="ta-deel__rij"><span class="ta-deel__naam">Cleanliness</span><span class="ta-deel__meting"><span class="ta-deel__baan"><span class="ta-deel__vul" style="--score:4.2"></span></span><span class="ta-deel__cijfer">4.2</span></span></div>
            <div class="ta-deel__rij"><span class="ta-deel__naam">Service</span><span class="ta-deel__meting"><span class="ta-deel__baan"><span class="ta-deel__vul" style="--score:4.3"></span></span><span class="ta-deel__cijfer">4.3</span></span></div>
            <div class="ta-deel__rij"><span class="ta-deel__naam">Sleep Quality</span><span class="ta-deel__meting"><span class="ta-deel__baan"><span class="ta-deel__vul" style="--score:4.3"></span></span><span class="ta-deel__cijfer">4.3</span></span></div>
          </div>
        </div>
        <div class="ta-strook__spoor" tabindex="0" aria-label="Reviews">
          <article class="ta-kaart">
            <span class="ta-bollen" data-vol="5" role="img" aria-label="5/5"><span></span><span></span><span></span><span></span><span></span></span>
            <p class="ta-kaart__naam">Job W <span class="ta-kaart__datum">&middot; Sep 2026</span></p>
            <p class="ta-kaart__titel">Excellent!!</p>
            <p class="ta-kaart__tekst">Great hotel. Everything was spot on. On Thursday morning there was some disturbance from the bin lorry, the laundry van and deliveries. But otherwise top.</p>
            <p class="ta-bron ta-kaart__bron">Review on <b>Tripadvisor</b></p>
          </article>
          <article class="ta-kaart">
            <span class="ta-bollen" data-vol="5" role="img" aria-label="5/5"><span></span><span></span><span></span><span></span><span></span></span>
            <p class="ta-kaart__naam">Jacques J <span class="ta-kaart__datum">&middot; Aug 2026</span></p>
            <p class="ta-kaart__titel">We felt very welcome</p>
            <p class="ta-kaart__tekst">Everything was just like old times!!!</p>
            <p class="ta-bron ta-kaart__bron">Review on <b>Tripadvisor</b></p>
          </article>
          <article class="ta-kaart">
            <span class="ta-bollen" data-vol="5" role="img" aria-label="5/5"><span></span><span></span><span></span><span></span><span></span></span>
            <p class="ta-kaart__naam">Jan v <span class="ta-kaart__datum">&middot; Aug 2026</span></p>
            <p class="ta-kaart__titel">Pleasant stay</p>
            <p class="ta-kaart__tekst">Beautiful hotel in a magnificent setting by the water. Room fine and a relaxed atmosphere in the hotel. The only downside was traffic noise with the windows open. The surroundings, with lots of nature and charming villages, invite you to go walking or cycling. Breakfast and dinner were fine/good. Staff friendly and helpful. The swimming pool and wellness facilities are a nice bonus too.</p>
            <p class="ta-kaart__meerregel"><a class="ta-kaart__meer" href="https://www.tripadvisor.com/Hotel_Review-g3340802-d1140689-Reviews-Parkhotel_Horst-Horst_Limburg_Province.html" target="_blank" rel="noopener">Read more</a></p>
            <p class="ta-bron ta-kaart__bron">Review on <b>Tripadvisor</b></p>
          </article>
          <article class="ta-kaart">
            <span class="ta-bollen" data-vol="5" role="img" aria-label="5/5"><span></span><span></span><span></span><span></span><span></span></span>
            <p class="ta-kaart__naam">Peter V <span class="ta-kaart__datum">&middot; Aug 2026</span></p>
            <p class="ta-kaart__titel">Great experience</p>
            <p class="ta-kaart__tekst">Back for the umpteenth time, always a lovely and cosy stay. Friendly staff, excellent food, magnificent setting by the water, easy to reach and plenty to do in the hotel and the surrounding area</p>
            <p class="ta-kaart__meerregel"><a class="ta-kaart__meer" href="https://www.tripadvisor.com/Hotel_Review-g3340802-d1140689-Reviews-Parkhotel_Horst-Horst_Limburg_Province.html" target="_blank" rel="noopener">Read more</a></p>
            <p class="ta-bron ta-kaart__bron">Review on <b>Tripadvisor</b></p>
          </article>
          <article class="ta-kaart">
            <span class="ta-bollen" data-vol="5" role="img" aria-label="5/5"><span></span><span></span><span></span><span></span><span></span></span>
            <p class="ta-kaart__naam">Jose v <span class="ta-kaart__datum">&middot; Aug 2026</span></p>
            <p class="ta-kaart__titel">Everything as we wished, a lovely stay</p>
            <p class="ta-kaart__tekst">Beautiful hotel by the water, lovely room with balcony and air conditioning, friendly staff, delicious breakfast and dinner, we will definitely be back. Everything was absolutely perfect, a solid 10👍</p>
            <p class="ta-bron ta-kaart__bron">Review on <b>Tripadvisor</b></p>
          </article>
          <article class="ta-kaart">
            <span class="ta-bollen" data-vol="5" role="img" aria-label="5/5"><span></span><span></span><span></span><span></span><span></span></span>
            <p class="ta-kaart__naam">Leo S <span class="ta-kaart__datum">&middot; Aug 2026</span></p>
            <p class="ta-kaart__titel">What a wonderful experience. Great, and this hotel is highly recommended!</p>
            <p class="ta-kaart__tekst">How we enjoyed your fantastic hotel! We had a Comfort room, 27m2, and for us more than enough space thanks to the efficient layout, spotlessly clean, lovely chairs and, not forgetting, the wonderful and very wide beds, and not forgetting the spacious bathroom with separate shower and bath. Full praise for the staff too, exceptionally kind, capable and helpful! Breakfast is top and very varied, with delicious egg dishes among other things, including a soft-boiled egg, soft fruit, pancakes and various kinds of quark. And for those who like them, there are hard-boiled eggs too. Striking on arrival: a beautifully decorated, large and imposing space with pleasant seating areas and all the shared facilities, such as the space for breakfast, dinner and the bar, all in all efficiently and functionally laid out. Add to that a lovely terrace overlooking a small lake and the beautiful swimming pool (the only small drawback is that the pool does not open until 10:00). Conclusion: a great experience and we would love to come back again.</p>
            <p class="ta-kaart__meerregel"><a class="ta-kaart__meer" href="https://www.tripadvisor.com/Hotel_Review-g3340802-d1140689-Reviews-Parkhotel_Horst-Horst_Limburg_Province.html" target="_blank" rel="noopener">Read more</a></p>
            <p class="ta-bron ta-kaart__bron">Review on <b>Tripadvisor</b></p>
          </article>
          <article class="ta-kaart">
            <span class="ta-bollen" data-vol="5" role="img" aria-label="5/5"><span></span><span></span><span></span><span></span><span></span></span>
            <p class="ta-kaart__naam">Carina M <span class="ta-kaart__datum">&middot; Aug 2026</span></p>
            <p class="ta-kaart__titel">Beautiful!</p>
            <p class="ta-kaart__tekst">Wonderful apartment and service! Friendly and hospitable! We will definitely be back! Room service was well organised and restaurant BOFF was delicious</p>
            <p class="ta-bron ta-kaart__bron">Review on <b>Tripadvisor</b></p>
          </article>
          <article class="ta-kaart">
            <span class="ta-bollen" data-vol="5" role="img" aria-label="5/5"><span></span><span></span><span></span><span></span><span></span></span>
            <p class="ta-kaart__naam">Thea v <span class="ta-kaart__datum">&middot; Aug 2026</span></p>
            <p class="ta-kaart__titel">Immaculate hotel</p>
            <p class="ta-kaart__tekst">Immaculate hotel, good food, nice and clean, friendly staff.</p>
            <p class="ta-bron ta-kaart__bron">Review on <b>Tripadvisor</b></p>
          </article>
          <article class="ta-kaart">
            <span class="ta-bollen" data-vol="5" role="img" aria-label="5/5"><span></span><span></span><span></span><span></span><span></span></span>
            <p class="ta-kaart__naam">Terry M <span class="ta-kaart__datum">&middot; Aug 2026</span></p>
            <p class="ta-kaart__tekst">I stay at this hotel about once a month and every time the service and the staff are first-class. They are always very friendly and always willing to help. Great hotel and great staff.</p>
            <p class="ta-kaart__meerregel"><a class="ta-kaart__meer" href="https://www.tripadvisor.com/Hotel_Review-g3340802-d1140689-Reviews-Parkhotel_Horst-Horst_Limburg_Province.html" target="_blank" rel="noopener">Read more</a></p>
            <p class="ta-bron ta-kaart__bron">Review on <b>Tripadvisor</b></p>
          </article>
          <article class="ta-kaart">
            <span class="ta-bollen" data-vol="5" role="img" aria-label="5/5"><span></span><span></span><span></span><span></span><span></span></span>
            <p class="ta-kaart__naam">Pascale <span class="ta-kaart__datum">&middot; Aug 2026</span></p>
            <p class="ta-kaart__titel">Wow!!</p>
            <p class="ta-kaart__tekst">Definitely worth repeating. Fantastic room, beautiful location and very friendly staff</p>
            <p class="ta-bron ta-kaart__bron">Review on <b>Tripadvisor</b></p>
          </article>
        </div>
        <button type="button" class="ta-strook__pijl" data-ta-pijl aria-label="Next reviews">&#8250;</button>
      </div>

    </div>
  </section>

    <div class="omhulsel rb-ta__actie"><a class="rb-knop" href="#zc-action-open-widget">Book a table</a></div>
  </div>

  <!-- 10b. Slot zoals /wellness/ (wv-slot): volle foto (het hotel vanaf het water), tekst en knoppen gecentreerd -->
  <section data-component="rb-slot" class="rb-slot">
    <img class="rb-slot__foto" src="/assets/img/rb-slot-hotel-1400-985548.webp" srcset="/assets/img/rb-slot-hotel-800-985548.webp 800w, /assets/img/rb-slot-hotel-1400-985548.webp 1400w, /assets/img/rb-slot-hotel-985548.webp 2000w" sizes="100vw" alt="Parkhotel Horst seen from the water" width="2000" height="1500" loading="lazy" decoding="async" />
    <span class="rb-slot__waas" aria-hidden="true"></span>
    <div class="rb-wrap rb-slot__in">
      <h2 class="rb-h2">Staying the night?</h2>
      <p class="rb-slot__tekst">Combine your visit to BØFF with an overnight stay in one of our rooms and an extensive breakfast buffet.</p>
      <div class="rb-knoppen">
        <a class="rb-knop distributor-open" href="https://api.mews.com/distributor/ea3920b8-6b38-436c-ae08-af1d007c3bd6?mewsLanguageCode=en-GB">Book your stay</a>
        <a class="rb-knop rb-knop--ghost" href="/en/arrangement/">View our packages</a>
      </div>
      <p class="rb-slot__contact">
        <a href="tel:+31773976000"><svg class="rb-ico" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 1.5h3l1.5 3.5-2 1.2a8 8 0 0 0 4.3 4.3l1.2-2 3.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5A12 12 0 0 1 1.5 3 1.5 1.5 0 0 1 3 1.5z"/></svg>+31 77 397 6000</a>
        <span class="rb-slot__punt" aria-hidden="true">&middot;</span>
        <a href="mailto:info@parkhotelhorst.nl"><svg class="rb-ico" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="1.5" y="3.5" width="13" height="9" rx="1"/><path d="M2 4.5l6 4.5 6-4.5"/></svg>info@parkhotelhorst.nl</a>
      </p>
    </div>
  </section>

</main>

<!-- 5b pop-up: een overlay voor de drie plekken; inhoud per plek als JSON in data-plekken
     (pagina-restaurant-boff-v3.js vult #rbPopupInner bij het openen) -->
<div aria-label="About this space" aria-modal="true" class="rb-pop-overlay" data-sluit-label="Close" data-plekken='{"terras": {"naam": "The terrace", "foto": "/assets/img/rb-plek-terras-d43c6b.webp", "alt": "The BØFF terrace with parasols and views over the lake", "teksten": ["When the weather is fine, settle down on the spacious terrace overlooking the lake and the Kasteelse Bossen. The full menu is served outside, from coffee to dinner.", "From the lounge sofas you can enjoy a drink and the view over the water."], "cta": {"label": "View terrace, bar and brasserie", "url": "/en/terrace-bar-brasserie/"}}, "binnen": {"naam": "Inside", "foto": "/assets/img/rb-plek-binnen-f48bf2.webp", "alt": "Leather booths by the green tiled wall with the BØFF letters", "teksten": ["Inside, the contemporary interior and the various seating areas create a homely atmosphere.", ""], "cta": {"label": "Book a table", "url": "#zc-action-open-widget"}}, "bar": {"naam": "The bar", "foto": "/assets/img/rb-plek-bar-b47256.webp", "alt": "The green BØFF bar with bar stools and hanging plants", "teksten": ["At the bar you can kick off the weekend with a cocktail from the menu, such as a Moscow Mule, mojito or gin and tonic. The drinks menu also offers Dutch and international spirits and a wide choice of coffees and soft drinks.", "On Fridays and Saturdays you are welcome until 01:00 for a drink after dinner."], "cta": {"label": "View the drinks menu", "url": "/en/drinks-menu/"}}}' id="rbPopup" role="dialog"><div class="rb-pop" id="rbPopupInner"></div></div>

<script id="ph-zenchef-open" type="delayedscript">
(function () {
	function openWidget(e) {
		if (e) { e.preventDefault(); }
		if (window.ZenchefWidget && typeof window.ZenchefWidget.open === 'function') {
			window.ZenchefWidget.open();
		} else {
			window.location.hash = 'zc-action-open-widget';
		}
	}
	function bind() {
		var sel = 'a[href="#reserveren"], a[href$="#reserveren"], a[href="#zc-action-open-widget"], a[href$="#zc-action-open-widget"]';
		document.querySelectorAll(sel).forEach(function (el) {
			if (el.dataset.zcBound) { return; }
			el.dataset.zcBound = '1';
			el.addEventListener('click', openWidget);
		});
	}
	if (document.readyState === 'loading') {
		document.addEventListener('DOMContentLoaded', bind);
	} else {
		bind();
	}
	// Knoppen die later in de DOM komen (bijv. in de menukaart-modal) ook binden.
	document.addEventListener('ph:rebind-zenchef', bind);
})();
</script>

<footer class="voet">
  <div class="omhulsel">
    <div class="voet__kolommen">
      <div>
        <a href="/en/homepage/" class="voet__logo" aria-label="Parkhotel Horst"><img src="/assets/img/Parkhotel-Horst-logo_wit-e1670860735977-6c20ab.webp" width="250" height="46" alt="Parkhotel Horst" loading="lazy" decoding="async" /></a>
        <address class="voet__gegevens">
          <span>Tienrayseweg 2, 5961 NL Horst</span>
          <a href="tel:0031773976000">+31773976000</a>
          <a href="mailto:info@parkhotelhorst.nl">info@parkhotelhorst.nl</a>
        </address>
        <a class="knop knop--vol voet__knop distributor-open" href="https://api.mews.com/distributor/ea3920b8-6b38-436c-ae08-af1d007c3bd6">Book your stay</a>
      </div>
      <div>
        <div class="voet__titel">Navigation</div>
        <ul class="voet__lijst">
          <li><a href="/en/our-hotel/">Our Hotel</a></li>
          <li><a href="/en/boff-restaurant/">BØFF Restaurant</a></li>
          <li><a href="/en/wellness-centre/">Wellness Centre</a></li>
          <li><a href="/en/events/">Events</a></li>
          <li><a href="/en/gebied/">Surroundings</a></li>
        </ul>
      </div>
      <div>
        <div class="voet__titel">Rooms</div>
        <ul class="voet__lijst">
          <li><a href="/en/kamers/comfort-room/">Comfort room</a></li>
          <li><a href="/en/kamers/deluxe-room/">Deluxe room</a></li>
          <li><a href="/en/kamers/junior-suite-2/">Junior suite</a></li>
          <li><a href="/en/kamers/suite-2/">Suite</a></li>
          <li><a href="/en/kamers/tower-suite/">Tower suite</a></li>
          <li><a href="/en/kamers/apartment/">Apartment</a></li>
        </ul>
      </div>
      <div>
        <div class="voet__titel">Socials</div>
        <ul class="voet__socials">
          <li><a href="https://www.facebook.com/ParkhotelHorst/" rel="noopener" target="_blank">Facebook</a></li>
          <li><a href="https://www.instagram.com/parkhotelhorst/" rel="noopener" target="_blank">Instagram</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="voet__onder">
    <div class="omhulsel voet__onderrij">
      <span>&copy; Parkhotel Horst 2026</span>
      <ul>
        <li><a href="/en/contact-information/">Contact information</a></li>
        <li><a href="/en/about-us/">About us</a></li>
        <li><a href="/en/disclaimer-2/">Disclaimer</a></li>
        <li><a href="/en/privacy-policy-2/">Privacy Statement</a></li>
        <li><a href="/en/site-map/">Sitemap</a></li>
        <li><a href="/en/frequently-asked-questions/">FAQ</a></li>
      </ul>
    </div>
  </div>
</footer>

<div id="langsug" class="langsug" role="region" aria-label="Language suggestion" hidden>
  <span class="langsug__msg" id="langsug-msg"></span>
  <a class="langsug__btn" id="langsug-btn" href="#"></a>
  <button type="button" class="langsug__close" id="langsug-close" aria-label="Close">&times;</button>
</div>

<script id="ph-restaurant-boff-v3">
/* GEDRAG bij de bouwsteen `kop` (src/fragmenten/blok-kop.html). Geen bibliotheken.
   Vijf dingen:
   1  het uitklapvlak op het bureaublad: aanwijzen (120 ms wachten), pijltje-klik,
      wisselen zonder dicht/open, Escape terug naar het pijltje, klik buiten, en
      sluiten zodra de bezoeker scrolt;
   2  het schuifpaneel op mobiel met de accordeon (één rubriek tegelijk);
   3  de scrollstand: mobiel schuift de kop weg en komt terug, op het bureaublad
      krimpt hij tot een slanke balk (.kopbalk--slank) met hysterese 124/8 px;
   4  heeft de pagina een herofoto? Zo niet, dan is de kop dicht donker
      (.kopbalk--dicht) — dat wordt hier bepaald, er is geen paginaveld voor.
      Heeft die hero al een boekknop, dan vervalt de zwevende knop
      (.kopbalk--geen-zweef); staat het boekvak net ONDER de hero, dan blijft de
      knop verborgen tot dat vak uit beeld is (.kopbalk--zweef-wacht); pagina's
      kunnen de knop ook zelf uitzetten met het veld `geen-zweefknop: ja`, dat
      doet het sjabloon, niet dit script;
   5  waar ben ik? Het adres van de pagina wordt vergeleken met de links in het
      menu; de gevonden sublink krijgt aria-current en zijn rubriek .is-actief. */
(function () {
  'use strict';
  var kop = document.querySelector('.kopbalk');
  if (!kop) return;
  var vlak = document.getElementById('kopvlak'),
      delen = [].slice.call(kop.querySelectorAll('.vlak__deel')),
      rubs = [].slice.call(kop.querySelectorAll('.rub')),
      menuknop = kop.querySelector('.kopbalk__menu'),
      paneel = document.getElementById('menupaneel'),
      knop = document.getElementById('menuknop'),
      sluit = document.getElementById('menusluit'),
      waas = document.getElementById('menuwaas'),
      accs = [].slice.call(kop.querySelectorAll('.acc')),
      bureau = window.matchMedia('(min-width:1024px)'),
      grof = window.matchMedia('(pointer:coarse)').matches;

  /* ---- 4: staat er een herofoto onder de kop?
     We zoeken het eerste element dat de bezoeker bovenaan de pagina ziet. Dat is
     niet altijd de directe buur: de kop wordt gevolgd door scripts en stijlblokken,
     en op de omgebouwde pagina's staat er een verborgen kruimelbalk vóór de hero.
     Die overslaan we; door <main>/<div> dalen we af, zoals hiervoor.
     Een hero herkennen we aan een klasse die 'hero' BEVAT: naast de bouwsteen
     `hero` van de nieuwe pagina's heet hij per omgebouwd sjabloon anders
     (zwb-hero, ao-hero, kt-hero, hero-fb, ...). Vroeger keken we of de klasse met
     'hero' BEGON; daardoor stond de balk op al die pagina's dicht donker.
     Een paar oude sjablonen hebben een fotoband die niet 'hero' heet; die staan
     met naam in de lijst FOTOBANDEN hieronder. */
  /* Fotobanden die niet 'hero' in hun klasse hebben. Elke klasse is nagemeten op
     390 en 1440 px: het blok begint op y=0 (het schuift dus onder de kop door) en
     draagt zelf een schermbrede foto.
       bh        /vergaderen/ + de vier zalenpagina's (oud-vg.css, oud-zl*.css)
       o-banner  /en/meetings-and-conferences/ + de DE-tweeling; op het bureaublad
                 een schermvullende foto, onder 1024 px zet het oude sjabloon die
                 foto uit (.o-banner__grond--verberg-klein) — daar is het dus een
                 egaal donker vlak, net als op de oude site.
     BEWUST NIET in de lijst, want daar zit geen foto onder de kop:
       zd-titleband / ck-titleband  arrangement- en kamerpagina's: een egaal donker
                 patroonvlak met de titel; de foto begint eronder.
       o-page-banner  183 gewone pagina's: tekst links, foto in een zijkolom die
                 onder 1024 px ónder de tekst valt. De kop staat daar over tekst. */
  var FOTOBANDEN = ['bh', 'o-banner'];
  function slaOver(el) {
    var t = el.tagName;
    if (t === 'SCRIPT' || t === 'STYLE' || t === 'NOSCRIPT' || t === 'TEMPLATE' ||
        t === 'LINK') return true;
    /* de kruimelbalk is nooit de fotoband zelf; hij staat er op de omgebouwde
       pagina's vóór (verborgen) of overheen (zichtbaar). Doorlopen dus. */
    if (t === 'NAV' && el.classList.contains('o-breadcrumbs')) return true;
    /* alles wat geen ruimte inneemt telt niet mee: verborgen elementen, en de
       onzichtbare <svg>-spritebladen waarmee de zalenpagina's beginnen */
    var maat = el.getBoundingClientRect();
    return maat.width === 0 || maat.height === 0;
  }
  var volgende = kop.nextElementSibling, na = volgende, stap = 0;
  while (na && stap++ < 30) {
    if (slaOver(na)) { na = na.nextElementSibling; continue; }
    if ((na.tagName === 'MAIN' || na.tagName === 'DIV') && na.firstElementChild) {
      na = na.firstElementChild; continue;
    }
    break;
  }
  var hero = false;
  if (na && na.classList) {
    for (var c = 0; c < na.classList.length; c++) {
      var kl = na.classList[c];
      if (kl.indexOf('hero') !== -1) hero = true;
      for (var f = 0; f < FOTOBANDEN.length; f++) if (kl === FOTOBANDEN[f]) hero = true;
    }
  }
  if (!hero) kop.classList.add('kopbalk--dicht');
  /* Heeft het eerste scherm al een eigen boekknop (de hero-bouwsteen met het
     datumformulier)? Dan hoeft de zwevende knop er onder 1024 px niet bij —
     besluit Bart 4 sep 2026. De compacte knop in de paneelkop blijft wel.
     Restaurant- en vergaderpagina's zetten diezelfde klasse zelf, via het
     paginaveld `geen-zweefknop: ja` in hun KH-blokje (zie blok-kop.html). */
  if (hero && na.querySelector && na.querySelector('#date-form,.hero__knop')) {
    kop.classList.add('kopbalk--geen-zweef');
  } else if (!kop.classList.contains('kopbalk--geen-zweef')) {
    /* Heeft de pagina zelf al een vaste mobiele boekknop onderaan (#zdMobCta op
       de arrangement- en flowlanderpagina's)? Dan zouden er twee knoppen over
       elkaar zweven — de zwevende knop van de kop vervalt dan (23 sep 2026).
       Die knop staat onderaan de pagina, dus vaak nog niet in de DOM als dit
       script (inline, vlak na de kop) draait: dan nog eens kijken bij
       DOMContentLoaded. */
    if (eigenMobieleKnop()) {
      kop.classList.add('kopbalk--geen-zweef');
    } else {
      wachtOpEigenBoekknop(na);
      if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', function () {
          if (eigenMobieleKnop()) kop.classList.add('kopbalk--geen-zweef');
        });
      }
    }
  }
  function eigenMobieleKnop() { return !!document.getElementById('zdMobCta'); }

  /* Staat het boekvak NIET in de hero maar wél in het eerste scherm — de
     boekbalk onder de hero van /kamers-suites/ bijvoorbeeld — dan zou de
     zwevende knop er bovenop liggen. Hij blijft dan verborgen tot dat vak uit
     beeld is gescrold, en komt daarna alsnog mee (besluit Bart 5 sep 2026).
     Zit het vak wél ín de hero, dan geldt de regel hierboven: helemaal geen
     zwevende knop. Een pagina met `geen-zweefknop: ja` heeft er sowieso geen. */
  function wachtOpEigenBoekknop(eerste) {
    if (!window.IntersectionObserver) return;
    var kandidaten = document.querySelectorAll(
      '#date-form,.distributor-open,.distributor,a[href*="mews.com/distributor"]');
    var vak = null, hoogte = window.innerHeight || 800;
    for (var i = 0; i < kandidaten.length; i++) {
      var el = kandidaten[i];
      if (kop.contains(el)) continue;                       /* de kop zelf niet */
      if (eerste && eerste.contains(el)) continue;          /* de hero niet */
      /* en niet de boekknop in de voettekst: op een korte pagina staat die al in
         het eerste scherm, maar dat is de voet en geen boekvak van de pagina */
      if (el.closest && el.closest('footer,.voet,.footer')) continue;
      var r = el.getBoundingClientRect();
      if (r.height === 0) continue;
      if (r.top >= hoogte) continue;                        /* niet in het eerste scherm */
      vak = el;
      break;
    }
    if (!vak) return;
    kop.classList.add('kopbalk--zweef-wacht');
    new IntersectionObserver(function (rijen) {
      kop.classList.toggle('kopbalk--zweef-wacht', rijen[0].isIntersecting);
    }, { threshold: 0 }).observe(vak);
  }

  /* ---- 5: waar ben ik? */
  function sleutel(pad, hash) {
    pad = pad.replace(/\/+$/, '');
    return (pad || '/') + (hash || '');
  }
  var hier = sleutel(location.pathname, location.hash);
  [].forEach.call(kop.querySelectorAll('.vlak__links a,.acc__vak a,.rub__link'), function (a) {
    var u;
    try { u = new URL(a.getAttribute('href'), location.href); } catch (e) { return; }
    if (u.host !== location.host) return;
    if (sleutel(u.pathname, u.hash) !== hier) return;
    if (!a.classList.contains('rub__link')) a.setAttribute('aria-current', 'page');
    var houder = a.closest('[data-rub],[data-deel]');
    if (!houder) return;
    var id = houder.getAttribute('data-rub') || houder.getAttribute('data-deel');
    [].forEach.call(kop.querySelectorAll('[data-rub="' + id + '"]'), function (el) {
      el.classList.add('is-actief');
    });
  });

  /* ---- 1: het uitklapvlak  */
  var openTimer = null, dichtTimer = null, openSinds = 0, laatste = null;
  function toonDeel(id) {
    delen.forEach(function (d) { d.classList.toggle('is-aan', d.getAttribute('data-deel') === id); });
  }
  function zetKnoppen(open) {
    rubs.forEach(function (r) {
      var aan = r === open;
      r.classList.toggle('is-open', aan);
      r.querySelector('.rub__knop').setAttribute('aria-expanded', aan ? 'true' : 'false');
    });
  }
  function openRub(rub) {
    clearTimeout(dichtTimer); clearTimeout(openTimer);
    zetKnoppen(rub);
    if (menuknop) menuknop.setAttribute('aria-expanded', 'false');
    toonDeel(rub.getAttribute('data-rub'));
    vlak.setAttribute('data-open', rub.getAttribute('data-rub'));
    openSinds = window.scrollY;
    laatste = rub;
  }
  function openAlle() {
    clearTimeout(dichtTimer); clearTimeout(openTimer);
    zetKnoppen(null);
    toonDeel('alle');
    vlak.setAttribute('data-open', 'alle');
    menuknop.setAttribute('aria-expanded', 'true');
    openSinds = window.scrollY;
    laatste = null;
    var e = vlak.querySelector('.vlak__deel--alle a');
    if (e) e.focus({ preventScroll: true });
  }
  function sluitVlak(stil) {
    clearTimeout(dichtTimer); clearTimeout(openTimer);
    if (!vlak || !vlak.hasAttribute('data-open')) return;
    zetKnoppen(null);
    if (menuknop) menuknop.setAttribute('aria-expanded', 'false');
    if (stil) vlak.style.transition = 'none';
    vlak.removeAttribute('data-open');
    if (stil) { void vlak.offsetHeight; vlak.style.transition = ''; }
    delen.forEach(function (d) { d.classList.remove('is-aan'); });
  }

  if (vlak) {
    rubs.forEach(function (rub) {
      var pijl = rub.querySelector('.rub__knop'), link = rub.querySelector('.rub__link');
      pijl.addEventListener('click', function () {
        if (rub.classList.contains('is-open')) { sluitVlak(); pijl.focus(); return; }
        openRub(rub);
        var e = vlak.querySelector('.vlak__deel.is-aan a');
        if (e) e.focus({ preventScroll: true });
      });
      if (grof) {
        /* aanraken: eerste tik opent het vlak, tweede tik volgt de link */
        link.addEventListener('click', function (ev) {
          if (!rub.classList.contains('is-open')) { ev.preventDefault(); openRub(rub); }
        });
      } else {
        rub.addEventListener('mouseenter', function () {
          clearTimeout(dichtTimer);
          if (vlak.hasAttribute('data-open')) { openRub(rub); return; }
          clearTimeout(openTimer);
          openTimer = setTimeout(function () { openRub(rub); }, 120);
        });
        rub.addEventListener('mouseleave', function () { clearTimeout(openTimer); });
      }
    });
    if (menuknop) {
      menuknop.addEventListener('click', function () {
        if (menuknop.getAttribute('aria-expanded') === 'true') { sluitVlak(); menuknop.focus(); }
        else openAlle();
      });
    }
    if (!grof) {
      kop.addEventListener('mouseleave', function () {
        clearTimeout(openTimer);
        dichtTimer = setTimeout(function () { sluitVlak(); }, 180);
      });
      kop.addEventListener('mouseenter', function () { clearTimeout(dichtTimer); });
    }
    document.addEventListener('click', function (e) {
      if (!e.target.closest || !e.target.closest('.kopbalk')) sluitVlak();
    });
    vlak.addEventListener('focusout', function (e) {
      if (!e.relatedTarget || !kop.contains(e.relatedTarget)) sluitVlak();
    });
  }

  /* ---- 2: het schuifpaneel + de accordeon  */
  function zetMenu(open) {
    if (!paneel) return;
    paneel.setAttribute('data-open', open ? 'ja' : 'nee');
    if (waas) waas.setAttribute('data-open', open ? 'ja' : 'nee');
    if (knop) knop.setAttribute('aria-expanded', open ? 'true' : 'false');
    kop.classList.toggle('kopbalk--menu', open);
    document.documentElement.style.overflow = open ? 'hidden' : '';
    void paneel.offsetWidth; /* stijl doorrekenen: focus lukt niet op iets dat nog verborgen is */
    /* De focus gaat naar het paneel zelf (tabindex="-1"), niet naar de boekknop
       bovenin. Die kreeg na een tik op Menu een gouden focusring om zich heen —
       een dubbele rand om een knop die al een eigen kader heeft. Op het paneel
       is er niets te zien, terwijl Tab en de schermlezer gewoon in het paneel
       beginnen. */
    if (open) paneel.focus({ preventScroll: true });
    else if (knop && document.activeElement && paneel.contains(document.activeElement)) knop.focus();
  }
  if (knop) knop.addEventListener('click', function () {
    zetMenu(knop.getAttribute('aria-expanded') !== 'true');
  });
  if (sluit) sluit.addEventListener('click', function () { zetMenu(false); });
  if (waas) waas.addEventListener('click', function () { zetMenu(false); });
  accs.forEach(function (item) {
    item.querySelector('.acc__knop').addEventListener('click', function () {
      var open = !item.classList.contains('is-open');
      accs.forEach(function (a) {
        var aan = a === item && open;
        a.classList.toggle('is-open', aan);
        a.querySelector('.acc__knop').setAttribute('aria-expanded', aan ? 'true' : 'false');
      });
    });
  });
  document.addEventListener('keydown', function (e) {
    if (e.key !== 'Escape' && e.key !== 'Esc') return;
    if (paneel && paneel.getAttribute('data-open') === 'ja') { zetMenu(false); return; }
    if (vlak && vlak.hasAttribute('data-open')) {
      var r = laatste, viaMenu = menuknop && menuknop.getAttribute('aria-expanded') === 'true';
      sluitVlak();
      if (r) r.querySelector('.rub__knop').focus();
      else if (viaMenu) menuknop.focus();
    }
  });

  /* ---- 3: de scrollstand
     De kop krimpt van zijn volle hoogte naar 64 px. Dat verschil vult margin-bottom
     aan, anders schuift de hele pagina omhoog. De volle hoogte wordt gemeten in
     plaats van vastgelegd: pagina's die de kop op de oude maat zetten (oud-kop.css)
     zijn hoger dan de 124 px van de nieuwe pagina's. */
  var SLANK = 64, marge = 60;
  function meetKop() {
    if (!bureau.matches || kop.classList.contains('kopbalk--slank') || window.scrollY > 8) return;
    var vol = kop.getBoundingClientRect().height;
    if (!volgende) { marge = vol - SLANK; return; }
    /* Waar begint de pagina-inhoud nu? Het verschil met de kophoogte is de marge
       die de inhoud zelf meebrengt (de hero heeft er een negatieve, omdat hij
       onder de kop door schuift). Die telt mee in de aanvulling, anders klopt hij
       op pagina's met een andere kopmaat niet — zie ONTWERP-MENU.md hoofdstuk 9. */
    var top = volgende.getBoundingClientRect().top + window.scrollY;
    var eigen = top - vol;
    marge = eigen >= 0 ? top - SLANK : vol - SLANK;
    if (marge < 0) marge = 0;
  }
  meetKop();
  window.addEventListener('resize', meetKop);
  window.addEventListener('load', meetKop);
  var vorige = window.scrollY, tikt = false;
  function toets() {
    tikt = false;
    var y = window.scrollY, menuOpen = paneel && paneel.getAttribute('data-open') === 'ja';
    if (bureau.matches) {
      kop.classList.remove('kopbalk--weg');
      if (y > SLANK + 60) {
        kop.style.marginBottom = marge + 'px';
        kop.classList.add('kopbalk--slank');
      } else if (y < 8) {
        kop.classList.remove('kopbalk--slank');
        kop.style.marginBottom = '';
      }
      if (vlak && vlak.hasAttribute('data-open') && Math.abs(y - openSinds) > 10) sluitVlak(true);
    } else if (menuOpen || y < 120) {
      kop.classList.remove('kopbalk--weg');
    } else if (y > vorige + 6) {
      kop.classList.add('kopbalk--weg');
    } else if (y < vorige - 6) {
      kop.classList.remove('kopbalk--weg');
    }
    vorige = y;
  }
  window.addEventListener('scroll', function () {
    if (!tikt) { tikt = true; requestAnimationFrame(toets); }
  }, { passive: true });
  toets();
})();

/* GEDRAG bij de bouwsteen `tokens`: zet het zeshoekenpatroon op de paginagrond aan.
   tokens.css tekent de tegel alleen onder html.patroon. Die klasse komt hier, ná 'load'
   (of eerder, zodra de bezoeker scrolt of tikt) — zo concurreert de SVG niet met de
   herofoto om bandbreedte in het eerste scherm (LCP). Elke pagina met .blok--donker
   voegt dit script in als fragment gedrag/patroon (zie BOUWSTENEN.md). Geen bibliotheken. */
(function(){
  var h=document.documentElement,klaar=false;
  function aan(){if(klaar)return;klaar=true;h.classList.add('patroon');}
  if(document.readyState==='complete')aan();
  else{
    window.addEventListener('load',aan);
    /* wie vóór 'load' al beweegt, krijgt het patroon meteen */
    window.addEventListener('scroll',aan,{passive:true,once:true});
    window.addEventListener('touchstart',aan,{passive:true,once:true});
  }
})();

/* (Sjabloonmarkeringen in deze uitleg staan als "{ {> naam } }": met de spaties
   weggelaten, anders sluit render.py ze hier al in.)
   GEDRAG blok-reviews-tripadvisor-lus — opt-in op de bouwsteen reviews-tripadvisor:
   op het bureaublad (>= 1024 px) wordt de reviewstrook een oneindige lus tot de
   schermrand via gedrag/blok-kaartenrij (Stijn 5 okt 2026, bron: inline-snippet in
   src/fragmenten/pagina-wellness-v2.html). Werkt alleen binnen een wrapper met klasse
   `ta-lus`:  <div class="xx-ta ta-op-patroon ta-lus">{ {> blok-reviews-tripadvisor } }</div>
   De gedeelde bouwsteen zelf blijft ongemoeid: dit script zet alleen de attributen
   data-rij/data-lus/data-spoor/data-stap; de pijlknop gaat van de bouwsteen
   (data-ta-pijl) over naar de lus (data-stap).
   VOLGORDE: VÓÓR { {> gedrag/blok-kaartenrij } } insluiten — dat script leest [data-rij]
   bij het laden. Opmaak: stijl/blok-reviews-tripadvisor-lus. */
(function(){
  if(!window.matchMedia||!window.matchMedia('(min-width:1024px)').matches)return;
  var s=document.querySelector('.ta-lus .ta-strook'),sp=s&&s.querySelector('.ta-strook__spoor'),k=s&&s.querySelector('[data-ta-pijl]');
  if(!s||!sp||!k)return;
  s.setAttribute('data-rij','');s.setAttribute('data-lus','');sp.setAttribute('data-spoor','');
  k.setAttribute('data-stap','1');k.removeAttribute('data-ta-pijl');
})();

/* GEDRAG bij de bouwsteen `kaartenrij` (alle vier de varianten).
   De veegrij zelf is CSS scroll-snap; dit script doet alleen de teller, de
   pijltjes en — voor de variant `arrangement` — de filterknoppen. Werkt op elk
   element met [data-rij]; de filters op [data-filters]. Geen bibliotheken.

   Welke rijen het bedient: de vier bouwsteen-varianten (kamer, arrangement,
   review, evenement) op home, /kamers-suites/, de evenement- en kerstpagina's,
   en op de advertentielanders alle vier de veegrijen — de twee fotorijen
   (blok 4 en 9), de kamerrij (blok 6), de arrangementenrij (blok 11) en de
   reviewrij (blok 12).

   Drie dingen mogen per rij anders heten, zodat een blok met eigen klassenamen
   de bouwsteen kan gebruiken zonder zijn opmaak te veranderen:
   - het spoor is `[data-spoor]`, en anders `.rij__spoor`;
   - de pijltjes zijn `.rij__pijl`, en zijn die er niet, dan `[data-stap]`;
   - de teller is `[data-teller]`.
   Een rij mág zonder pijlen en zonder teller (de fotorijen op de landers): dan
   doet het script alleen het vegen en — met [data-lus] — het rondlopen.

   Rijen met [data-lus] erbij (de kamerrij, de arrangementenrij, de reviewrij en
   de twee fotorijen) lopen ONEINDIG door: na de laatste kaart komt weer de
   eerste, en vanaf de eerste geeft "Vorige" de laatste. Het recept is de
   klassieke driedeling — het script
   kloont de hele set kaarten één keer ervóór en één keer erná, laat de bezoeker
   in het middelste (echte) blok beginnen, en springt zodra hij in een kloonblok
   belandt zonder animatie precies één set terug. Dat is onzichtbaar, want de
   kaarten op beide plekken zijn identiek. De teller telt de échte kaarten
   (1/6 … 6/6) en de pijlen staan in deze stand nooit uit.
   Blijven er na het filteren te weinig kaarten over om te kunnen rondlopen (twee
   kaarten terwijl er drie naast elkaar passen), dan zet het script de lus uit: de
   klonen gaan verborgen, de rij begint gewoon links en de pijlen gedragen zich als
   bij een gewone rij. Kiest de bezoeker weer een filter met meer kaarten, dan gaat
   de lus vanzelf weer aan.
   Rijen zónder [data-lus] gedragen zich exact zoals voorheen. */
(function(){
  'use strict';
  /* ---- veegrijen  */
  function zichtbaar(spoor){
    return Array.prototype.filter.call(spoor.children,function(k){
      return k.nodeType===1&&!k.hidden;
    });
  }
  /* een rij kan meer dan één teller hebben (het wellness-kamerblok: boven én onder);
     één voorwerp met textContent dat ze allemaal zet, zodat de rest niets merkt */
  function tellers(rij){
    var lijst=rij.querySelectorAll('[data-teller]');
    if(!lijst.length)return null;
    return {set textContent(v){Array.prototype.forEach.call(lijst,function(t){t.textContent=v;});}};
  }
  function maakRij(rij){
    var spoor=rij.querySelector('[data-spoor]')||rij.querySelector('.rij__spoor'),
        teller=tellers(rij),
        pijlen=rij.querySelectorAll('.rij__pijl');
    if(!pijlen.length)pijlen=rij.querySelectorAll('[data-stap]');
    if(!spoor)return null;
    function stapbreedte(){
      var k=zichtbaar(spoor)[0];
      if(!k)return spoor.clientWidth;
      var s=getComputedStyle(spoor),g=parseFloat(s.columnGap||s.gap)||0;
      return k.getBoundingClientRect().width+g;
    }
    function ververs(){
      var kaarten=zichtbaar(spoor),n=kaarten.length;
      if(!n){if(teller)teller.textContent='0/0';return;}
      var b=stapbreedte(),
          max=spoor.scrollWidth-spoor.clientWidth,
          i=max>4?Math.round(spoor.scrollLeft/b):0;
      if(spoor.scrollLeft>=max-2)i=Math.max(0,n-perScherm());
      if(i<0)i=0;if(i>n-1)i=n-1;
      if(teller)teller.textContent=(i+1)+'/'+n;
      if(pijlen[0])pijlen[0].disabled=spoor.scrollLeft<=2;
      if(pijlen[1])pijlen[1].disabled=spoor.scrollLeft>=max-2;
    }
    function perScherm(){
      var b=stapbreedte();
      return b?Math.max(1,Math.round(spoor.clientWidth/b)):1;
    }
    Array.prototype.forEach.call(pijlen,function(p){
      p.addEventListener('click',function(){
        spoor.scrollBy({left:stapbreedte()*Number(p.getAttribute('data-stap')),behavior:'smooth'});
      });
    });
    var wacht=null;
    spoor.addEventListener('scroll',function(){
      if(wacht)clearTimeout(wacht);
      wacht=setTimeout(ververs,90);
    },{passive:true});
    window.addEventListener('resize',function(){
      if(wacht)clearTimeout(wacht);
      wacht=setTimeout(ververs,150);
    });
    ververs();
    return ververs;
  }
  /* ---- oneindige lus, alleen voor rijen met [data-lus]  */
  function maakLus(rij){
    var spoor=rij.querySelector('[data-spoor]')||rij.querySelector('.rij__spoor'),
        teller=tellers(rij),
        pijlen=rij.querySelectorAll('.rij__pijl');
    if(!pijlen.length)pijlen=rij.querySelectorAll('[data-stap]');
    if(!spoor)return null;
    var origineel=zichtbaar(spoor),n0=origineel.length;
    if(!n0)return null;
    var kloonVoor=[],kloonNa=[];

    /* twee kloonsets: dezelfde kaarten, maar onzichtbaar voor schermlezers en niet
       met de tabtoets te bereiken — anders zou je drie keer door dezelfde zes
       kaarten heen moeten tabben. data-cat gaat mee, dus het filter herkent ze. */
    function kloonset(bak){
      var stuk=document.createDocumentFragment();
      for(var i=0;i<n0;i++){
        var k=origineel[i].cloneNode(true);
        k.setAttribute('data-kloon','');
        k.setAttribute('aria-hidden','true');
        Array.prototype.forEach.call(k.querySelectorAll('a,button,input,select,textarea'),function(e){
          e.setAttribute('tabindex','-1');
        });
        bak.push(k);
        stuk.appendChild(k);
      }
      return stuk;
    }
    spoor.insertBefore(kloonset(kloonVoor),origineel[0]);
    spoor.appendChild(kloonset(kloonNa));

    /* de echte kaarten die het filter heeft laten staan */
    function echte(){
      return origineel.filter(function(k){return !k.hidden;});
    }
    function stapbreedte(){
      var k=zichtbaar(spoor)[0];
      if(!k)return spoor.clientWidth;
      var s=getComputedStyle(spoor),g=parseFloat(s.columnGap||s.gap)||0;
      return k.getBoundingClientRect().width+g;
    }
    /* hoeveel hele kaarten er in het BLOK passen. Let op: clientWidth telt op het
       bureaublad de zijmarges mee waarin de buurkaarten aanzetten, dus die moeten
       eraf — anders zou het script denken dat er vier kaarten passen. */
    function perScherm(){
      var b=stapbreedte();
      if(!b)return 1;
      var s=getComputedStyle(spoor),
          binnen=spoor.clientWidth-(parseFloat(s.paddingLeft)||0)-(parseFloat(s.paddingRight)||0);
      return Math.max(1,Math.round(binnen/b));
    }
    /* verspringen mag nooit meeanimeren: dan zie je de sprong */
    function zonderAnimatie(fn){
      var oud=spoor.style.scrollBehavior;
      spoor.style.scrollBehavior='auto';
      fn();
      spoor.style.scrollBehavior=oud;
    }
    var lusUit=false,doel=null,laatsteStap=0,laatstePerScherm=0;
    function ververs(){
      var n=echte().length;
      if(!n){if(teller)teller.textContent='0/0';return;}
      var b=stapbreedte();
      if(!b)return;
      if(lusUit){
        /* te weinig kaarten om rond te lopen (na filteren blijven er soms twee
           over): gedraag je precies als een gewone rij — vanaf links, pijlen op
           grijs zodra je aan het begin of het einde staat */
        var max=spoor.scrollWidth-spoor.clientWidth,
            i=max>4?Math.round(spoor.scrollLeft/b):0;
        if(spoor.scrollLeft>=max-2)i=Math.max(0,n-perScherm());
        if(i<0)i=0;if(i>n-1)i=n-1;
        if(teller)teller.textContent=(i+1)+'/'+n;
        if(pijlen[0])pijlen[0].disabled=spoor.scrollLeft<=2;
        if(pijlen[1])pijlen[1].disabled=spoor.scrollLeft>=max-2;
        return;
      }
      var j=Math.round(spoor.scrollLeft/b);
      if(j<n)j+=n;else if(j>=2*n)j-=n;
      /* In één beweging: terugspringen naar het middelste (echte) blok als de
         bezoeker in een kloonblok is beland, én de rij weer netjes op een
         kaartrand zetten als iets anders hem ertussenin heeft gezet — een foto die
         laat binnenkomt, een venster dat van maat verandert. Zonder animatie, dus
         onzichtbaar: op beide plekken staat exact dezelfde kaart. */
      var wens=j*b;
      if(Math.abs(spoor.scrollLeft-wens)>1)zonderAnimatie(function(){spoor.scrollLeft=wens;});
      if(teller)teller.textContent=(((j-n)%n+n)%n+1)+'/'+n;
      if(pijlen[0])pijlen[0].disabled=false;
      if(pijlen[1])pijlen[1].disabled=false;
    }
    /* pijltje: reken vanaf het doel van een nog lopende animatie, niet vanaf de
       halve positie van dit moment — anders telt een tweede klik niet mee */
    Array.prototype.forEach.call(pijlen,function(p){
      p.addEventListener('click',function(){
        var b=stapbreedte();
        if(!b)return;
        var richting=Number(p.getAttribute('data-stap'));
        if(lusUit){spoor.scrollBy({left:b*richting,behavior:'smooth'});return;}
        var vanaf=(doel===null)?Math.round(spoor.scrollLeft/b)*b:doel;
        doel=vanaf+b*richting;
        spoor.scrollTo({left:doel,behavior:'smooth'});
      });
    });
    function gestopt(){
      ververs();
      doel=null;
    }
    var wacht=null;
    if('onscrollend' in window){
      spoor.addEventListener('scrollend',gestopt);
    }else{
      spoor.addEventListener('scroll',function(){
        if(wacht)clearTimeout(wacht);
        wacht=setTimeout(gestopt,90);
      },{passive:true});
    }
    /* Opnieuw opbouwen: tel de echte kaarten die overblijven, bepaal of er genoeg
       zijn voor een lus, zet de klonen daarop en ga naar de beginstand. Wordt bij
       het laden gedraaid, ná elke filterklik en zodra het venster van maat verandert. */
    function herzet(){
      var b=stapbreedte();
      if(!b)return;
      var n=echte().length,
          p=perScherm();
      lusUit=!(n>p);
      /* twee redenen om een kloon te verbergen: het filter verbergt zijn origineel,
         of de lus staat uit omdat alle kaarten al naast elkaar passen */
      for(var i=0;i<n0;i++){
        kloonVoor[i].hidden=origineel[i].hidden||lusUit;
        kloonNa[i].hidden=origineel[i].hidden||lusUit;
      }
      b=stapbreedte();
      laatsteStap=b;
      laatstePerScherm=p;
      doel=null;
      var start=lusUit?0:n*b;
      zonderAnimatie(function(){spoor.scrollLeft=start;});
      ververs();
    }
    var wachtMaat=null;
    window.addEventListener('resize',function(){
      if(wachtMaat)clearTimeout(wachtMaat);
      wachtMaat=setTimeout(function(){
        /* alleen opnieuw opbouwen als de kaartbreedte of het aantal kaarten dat
           past écht veranderd is; op mobiel vuurt `resize` ook als alleen de
           adresbalk in- of uitschuift, en dan zou de rij midden onder het lezen
           terugspringen naar kaart 1 */
        if(Math.abs(stapbreedte()-laatsteStap)>1||perScherm()!==laatstePerScherm)herzet();
        else ververs();
      },150);
    });
    herzet();
    return {ververs:ververs,herzet:herzet};
  }

  var rijen=[];
  Array.prototype.forEach.call(document.querySelectorAll('[data-rij]'),function(r){
    var f=r.hasAttribute('data-lus')?maakLus(r):maakRij(r);
    if(!f)return;
    if(typeof f==='function')rijen.push({el:r,ververs:f});
    else rijen.push({el:r,ververs:f.ververs,herzet:f.herzet});
  });

  /* ---- arrangementfilter  */
  var filters=document.querySelector('[data-filters]');
  if(filters){
    var rij=filters.parentNode.querySelector('[data-rij]'),
        spoor=rij?rij.querySelector('.rij__spoor'):null,
        item=rijen.filter(function(x){return x.el===rij;})[0];
    filters.addEventListener('click',function(e){
      var b=e.target.closest?e.target.closest('button[data-cat]'):null;
      if(!b||!spoor)return;
      var cat=b.getAttribute('data-cat');
      Array.prototype.forEach.call(filters.querySelectorAll('button[data-cat]'),function(x){
        x.setAttribute('aria-pressed',x===b?'true':'false');
      });
      Array.prototype.forEach.call(spoor.children,function(k){
        if(k.nodeType!==1)return;
        k.hidden=!(cat==='alle'||k.getAttribute('data-cat')===cat);
      });
      /* een lus-rij moet ná het filteren opnieuw worden opgebouwd (klonen, aantal,
         beginstand); een gewone rij gaat gewoon terug naar het begin */
      if(item&&item.herzet)item.herzet();
      else{spoor.scrollLeft=0;if(item)item.ververs();}
    });
  }
})();
/* GEDRAG bij de bouwsteen `reviews-tripadvisor` — alleen de ronde pijlknop.
   Op mobiel is de strook een gewoon veegspoor met scroll-snap; daar is dit
   script niet nodig (de knop staat dan uit in de CSS). Op het bureaublad staat
   het spoor op overflow:hidden en schuift deze knop het spoor één kaart op.
   Staat de laatste kaart al helemaal in beeld, dan springt hij terug naar het
   begin. Geen teller, geen bibliotheken. */
(function(){
  'use strict';
  Array.prototype.forEach.call(document.querySelectorAll('[data-ta-strook]'),function(strook){
    var spoor=strook.querySelector('.ta-strook__spoor'),
        knop=strook.querySelector('[data-ta-pijl]');
    if(!spoor||!knop) return;
    knop.addEventListener('click',function(){
      var kaart=spoor.querySelector('.ta-kaart');
      if(!kaart) return;
      var gat=parseFloat(getComputedStyle(spoor).columnGap)||16,
          stap=kaart.getBoundingClientRect().width+gat,
          eind=spoor.scrollWidth-spoor.clientWidth;
      /* Staat de laatste kaart al helemaal in beeld, dan terug naar het begin.
         Anders één kaart verder; de browser klemt dat vanzelf op het einde af
         (met vier kaarten en drie-en-een-half in beeld is die rest kleiner dan
         één kaart, en schuift hij dus precies de vierde kaart vrij). */
      spoor.scrollTo({left:spoor.scrollLeft>=eind-2?0:Math.min(spoor.scrollLeft+stap,eind),behavior:'smooth'});
    });
  });
})();

/* GEDRAG bij het sjabloon `pagina-restaurant-boff-v3` (pagina /restaurant-boff/, live sinds 12 okt 2026; was /restaurant-boff-v3/).

   Vier dingen. 3 en 4 letterlijk uit src/gedrag/pagina-dineren-v2.js (Tripadvisor-paneel,
   fotoslider van de menukaart); 5 (evenementenslider #rbOntdek, rondlopend met klonen)
   letterlijk uit src/gedrag/pagina-dineren-v3.js blok 5 (6 okt 2026); 6 is nieuw: de pop-up per plek
   in het mozaiek (5b). De pijlknop van de Tripadvisor-strook doet de bouwsteen
   blok-reviews-tripadvisor. De veelgestelde vragen zijn <details>: geen script.

   3  HET TRIPADVISORBLOK: onder 1024 px het scorepaneel als eerste kaart in de
      veegrij, precies zoals op /herfst/ en /wellness/. Breed venster = paneel terug
      op zijn EIGEN plek (onthouden bij het laden; zie de opmerking in de code).
      De bouwsteen zelf blijft ongemoeid.

   Geen localStorage, geen externe scripts. */
(function(){
  'use strict';

  /* ---- 3 Tripadvisor: scorepaneel als eerste kaart in de veegrij onder 1024 px */
  var taBlok = document.querySelector('.rb-ta .blok-ta');
  if (taBlok && window.matchMedia) {
    var taOmhulsel = taBlok.querySelector('.omhulsel'),
        taPaneel = taBlok.querySelector('.ta-paneel'),
        taStrook = taBlok.querySelector('.ta-strook'),
        taSpoor = taBlok.querySelector('.ta-strook__spoor');
    if (taOmhulsel && taPaneel && taStrook && taSpoor) {
      /* terug naar de EIGEN plek van het paneel (in de bouwsteen staat het in .ta-strook,
         vóór het spoor); de oude regel zette het vóór .ta-strook in .omhulsel, waarna het
         na een keer smal-breed over de volle breedte stond */
      var taThuis = taPaneel.parentNode, taNa = taPaneel.nextSibling;
      var taSmal = window.matchMedia('(max-width:1023.98px)');
      var taZet = function () {
        if (taSmal.matches) {
          if (taPaneel.parentNode !== taSpoor) { taSpoor.insertBefore(taPaneel, taSpoor.firstChild); taSpoor.scrollLeft = 0; }
        } else if (taPaneel.parentNode === taSpoor) {
          taThuis.insertBefore(taPaneel, taNa);
        }
      };
      taZet();
      if (taSmal.addEventListener) taSmal.addEventListener('change', taZet);
      else if (taSmal.addListener) taSmal.addListener(taZet);
    }
  }
})();

/* 4  FOTOSLIDER IN HET MENUKAARTBLOK (4b, vijf gerechtfoto's). Vegen doet de browser (scroll-snap);
      hier alleen de twee pijlen (rondlopend: na de laatste weer de eerste), de
      bolletjes (actief = goud, aria-current) en het bijhouden bij het vegen.
      Geen autoplay. Zonder script blijft het een veegbare fotorij. */
(function(){
  'use strict';
  var zacht = !(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
  Array.prototype.forEach.call(document.querySelectorAll('[data-fotoslider]'), function (fs) {
    var spoor = fs.querySelector('[data-fs-spoor]');
    if (!spoor) return;
    var n = spoor.children.length;
    var bollen = fs.querySelectorAll('[data-fs-naar]');
    function nu() { var b = spoor.clientWidth || 1; return Math.max(0, Math.min(n - 1, Math.round(spoor.scrollLeft / b))); }
    function naar(i) {
      i = (i + n) % n;
      spoor.scrollTo({ left: i * spoor.clientWidth, behavior: zacht ? 'smooth' : 'auto' });
    }
    function bij() {
      var i = nu();
      Array.prototype.forEach.call(bollen, function (b, j) {
        b.classList.toggle('is-aan', j === i);
        if (j === i) b.setAttribute('aria-current', 'true'); else b.removeAttribute('aria-current');
      });
    }
    var wacht = false;
    spoor.addEventListener('scroll', function () {
      if (wacht) return; wacht = true;
      window.requestAnimationFrame(function () { wacht = false; bij(); });
    }, { passive: true });
    Array.prototype.forEach.call(fs.querySelectorAll('[data-fs-stap]'), function (b) {
      b.addEventListener('click', function () { naar(nu() + Number(b.getAttribute('data-fs-stap'))); });
    });
    Array.prototype.forEach.call(bollen, function (b) {
      b.addEventListener('click', function () { naar(Number(b.getAttribute('data-fs-naar'))); });
    });
    bij();
  });
})();

/* 5  EVENEMENTEN EN SPECIALS (6c, "Verder ontdekken"): de kaartenrij #rbOntdek loopt oneindig rond — na kaart 5 komt
      kaart 1, vóór kaart 1 kaart 5, met de pijlen [data-slider="od"] én met vegen.
      Zelfde aanpak als maakLus() in src/gedrag/blok-kaartenrij.js (die hangt aan [data-rij]
      en is hier niet bruikbaar): een kloonset vóór en een ná de vijf echte kaarten; bij
      stilstand springt de rij zonder animatie terug naar het middelste (echte) blok, waar
      exact dezelfde kaart staat. Letterlijk blok 5 uit
      src/gedrag/pagina-dineren-v3.js (6 okt 2026). Teller [data-teller="od"]: "<b>i</b> / 5". */
(function(){
  'use strict';
  var spoor = document.getElementById('rbOntdek');
  if (!spoor) return;
  var origineel = Array.prototype.slice.call(spoor.children), n = origineel.length;
  if (!n) return;
  var zacht = !(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches);

  /* twee kloonsets: onzichtbaar voor schermlezers en niet met de tabtoets te bereiken */
  function kloonset(){
    var stuk = document.createDocumentFragment();
    origineel.forEach(function (o) {
      var k = o.cloneNode(true);
      k.setAttribute('data-kloon', '');
      k.setAttribute('aria-hidden', 'true');
      Array.prototype.forEach.call(k.querySelectorAll('a,button'), function (e) { e.setAttribute('tabindex', '-1'); });
      stuk.appendChild(k);
    });
    return stuk;
  }
  spoor.insertBefore(kloonset(), origineel[0]);
  spoor.appendChild(kloonset());

  function stapbreedte(){
    var s = getComputedStyle(spoor), g = parseFloat(s.columnGap || s.gap) || 0;
    return origineel[0].getBoundingClientRect().width + g;
  }
  /* verspringen mag nooit meeanimeren: dan zie je de sprong */
  function zonderAnimatie(fn){
    var oud = spoor.style.scrollBehavior;
    spoor.style.scrollBehavior = 'auto';
    fn();
    spoor.style.scrollBehavior = oud;
  }
  function teller(i){
    Array.prototype.forEach.call(document.querySelectorAll('[data-teller="od"]'), function (t) {
      t.innerHTML = '<b>' + i + '</b> / ' + n;
    });
  }
  var doel = null, laatsteStap = 0;
  /* na stilstand: terug naar het middelste blok als je in een kloonblok staat, en
     netjes op een kaartrand; daarna de teller */
  function ververs(){
    var b = stapbreedte();
    if (!b) return;
    var j = Math.round(spoor.scrollLeft / b);
    if (j < n) j += n; else if (j >= 2 * n) j -= n;
    var wens = j * b;
    if (Math.abs(spoor.scrollLeft - wens) > 1) zonderAnimatie(function () { spoor.scrollLeft = wens; });
    teller(((j - n) % n + n) % n + 1);
  }
  /* beginstand (kaart i, 0-geteld) zonder animatie */
  function herzet(i){
    var b = stapbreedte();
    if (!b) return;
    laatsteStap = b;
    doel = null;
    zonderAnimatie(function () { spoor.scrollLeft = (n + (i || 0)) * b; });
    ververs();
  }
  /* pijl: reken vanaf het doel van een nog lopende animatie, anders telt een tweede klik niet mee */
  Array.prototype.forEach.call(document.querySelectorAll('[data-slider="od"]'), function (p) {
    p.addEventListener('click', function () {
      var b = stapbreedte();
      if (!b) return;
      var vanaf = doel === null ? Math.round(spoor.scrollLeft / b) * b : doel;
      doel = vanaf + b * Number(p.getAttribute('data-richting'));
      spoor.scrollTo({ left: doel, behavior: zacht ? 'smooth' : 'auto' });
    });
  });
  function gestopt(){ ververs(); doel = null; }
  if ('onscrollend' in window) {
    spoor.addEventListener('scrollend', gestopt);
  } else {
    var wacht = null;
    spoor.addEventListener('scroll', function () {
      if (wacht) clearTimeout(wacht);
      wacht = setTimeout(gestopt, 90);
    }, { passive: true });
  }
  /* venster van maat veranderd: alleen opnieuw zetten als de kaartbreedte echt anders is
     (op mobiel vuurt resize ook bij de adresbalk), en dan op dezelfde kaart blijven */
  var wachtMaat = null;
  window.addEventListener('resize', function () {
    if (wachtMaat) clearTimeout(wachtMaat);
    wachtMaat = setTimeout(function () {
      if (Math.abs(stapbreedte() - laatsteStap) <= 1) { ververs(); return; }
      var i = laatsteStap ? ((Math.round(spoor.scrollLeft / laatsteStap) - n) % n + n) % n : 0;
      herzet(i);
    }, 150);
  });
  herzet(0);
  window.addEventListener('load', function () { if (doel === null) ververs(); });
})();

/* 6  PLEK-POP-UP (5b): de drie mozaiektegels zijn knoppen (button.rb-tegel[data-plek]).
      Een klik vult #rbPopupInner met foto, naam, een of twee alinea's en een knop, uit de
      JSON in #rbPopup[data-plekken] (lege alinea's vallen weg). Focus gaat naar de
      sluitknop en blijft binnen de kaart (Tab en Shift-Tab rondlopend). Sluiten: de
      sluitknop, een klik op het donkere vlak, Escape, of de knop "Reserveer een tafel"
      (#zc-action-open-widget): die sluit eerst de pop-up en laat daarna de handler van
      zenchef-knop de widget openen. Bij sluiten gaat de focus terug naar de tegel.
      Bewegingsarm: de CSS zet de schuif-animatie uit bij prefers-reduced-motion. */
(function(){
  'use strict';
  var ov = document.getElementById('rbPopup'), kaart = document.getElementById('rbPopupInner');
  if (!ov || !kaart) return;
  var plekken = {};
  try { plekken = JSON.parse(ov.getAttribute('data-plekken') || '{}'); } catch (e) { return; }
  var sluitLabel = ov.getAttribute('data-sluit-label') || 'Sluiten';
  var trigger = null, open = false;

  function el(tag, cls, tekst) {
    var n = document.createElement(tag);
    if (cls) n.className = cls;
    if (tekst) n.textContent = tekst;
    return n;
  }
  /* de velden zijn HTML-tekst (bijv. &amp;); via een textarea terug naar gewone tekst */
  var dec = document.createElement('textarea');
  function tekst(s) { dec.innerHTML = s || ''; return dec.value; }

  function focusbaar() {
    return Array.prototype.slice.call(kaart.querySelectorAll('a[href],button:not([disabled])'));
  }

  function vul(p) {
    kaart.innerHTML = '';
    var sluit = el('button', 'rb-pop__sluit');
    sluit.type = 'button';
    sluit.setAttribute('aria-label', sluitLabel);
    sluit.innerHTML = '<svg width="18" height="18" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true"><path d="M3.5 3.5l9 9M12.5 3.5l-9 9"/></svg>';
    sluit.addEventListener('click', function () { dicht(); });
    kaart.appendChild(sluit);
    if (p.foto) {
      var img = el('img', 'rb-pop__foto');
      img.src = p.foto; img.alt = tekst(p.alt); img.width = 1400; img.height = 875; img.decoding = 'async';
      kaart.appendChild(img);
    }
    var body = el('div', 'rb-pop__body');
    var naam = el('h2', 'rb-pop__naam', tekst(p.naam));
    naam.id = 'rbPopupNaam';
    body.appendChild(naam);
    (p.teksten || []).forEach(function (t) { if (t) body.appendChild(el('p', 'rb-pop__tekst', tekst(t))); });
    if (p.cta && p.cta.url) {
      var a = el('a', 'rb-knop rb-pop__cta', tekst(p.cta.label));
      a.href = p.cta.url;
      if (p.cta.url === '#zc-action-open-widget') {
        /* eerst de pop-up dicht (focus niet terugzetten), daarna opent de zenchef-knop-
           handler de widget; nieuwe knoppen bindt die via het event ph:rebind-zenchef */
        a.addEventListener('click', function () { dicht(true); });
      }
      body.appendChild(a);
    }
    kaart.appendChild(body);
    ov.setAttribute('aria-labelledby', 'rbPopupNaam');
    try { document.dispatchEvent(new Event('ph:rebind-zenchef')); } catch (e) {}
    return sluit;
  }

  function openen(key, knop) {
    var p = plekken[key];
    if (!p) return;
    trigger = knop || null;
    var sluit = vul(p);
    ov.classList.add('is-open');
    document.body.style.overflow = 'hidden';
    open = true;
    try { sluit.focus({ preventScroll: true }); } catch (e) { sluit.focus(); }
  }

  function dicht(geenFocus) {
    if (!open) return;
    open = false;
    ov.classList.remove('is-open');
    document.body.style.overflow = '';
    if (geenFocus !== true && trigger) { try { trigger.focus({ preventScroll: true }); } catch (e) { trigger.focus(); } }
    trigger = null;
  }

  Array.prototype.forEach.call(document.querySelectorAll('button.rb-tegel[data-plek]'), function (b) {
    b.addEventListener('click', function () { openen(b.getAttribute('data-plek'), b); });
  });
  ov.addEventListener('click', function (e) { if (e.target === ov) dicht(); });
  document.addEventListener('keydown', function (e) {
    if (!open) return;
    if (e.key === 'Escape' || e.key === 'Esc') { e.preventDefault(); dicht(); return; }
    if (e.key === 'Tab') {
      var f = focusbaar();
      if (!f.length) { e.preventDefault(); return; }
      var eerste = f[0], laatste = f[f.length - 1], nu = document.activeElement;
      if (e.shiftKey && (nu === eerste || !kaart.contains(nu))) { e.preventDefault(); laatste.focus(); }
      else if (!e.shiftKey && (nu === laatste || !kaart.contains(nu))) { e.preventDefault(); eerste.focus(); }
    }
  });
})();

</script>
<!--popup-welkom-->
<!-- BOUWSTEEN `popup-welkom` — de nieuwsbrief-pop-up "Gratis welkomstcadeau".
     Stond op de oude WordPress-site op 458 van de 464 pagina's en is bij het
     bouwen van de statische kopie weggesneden samen met het Revinate-script
     (CLAUDE.md, "Wat er niet in de kopie zit"). Hier staat hij terug, zonder
     dat externe script: het inschrijven loopt via onze eigen Worker.

     Opmaak: src/stijl/blok-popup-welkom.css. Gedrag: src/gedrag/blok-popup-welkom.js.
     Teksten: de pw-*-velden in src/teksten/home.{nl,en,de}.txt.

     WAAROM DE STIJL EN HET SCRIPT HIER INLINE STAAN en niet in de style-blokken
     van de sjablonen, zoals bij de andere bouwstenen: dit blok hangt aan de twee
     voetteksten en komt dus óók op de 391 niet-herbouwde pagina's, die geen
     sjabloon met een verzamel-style-blok hebben. Eén insluitpunt voor allebei
     scheelt een tweede kopie van dezelfde CSS. -->
<style>
/* ==========================================================================
   BOUWSTEEN `popup-welkom` — de nieuwsbrief-pop-up "Gratis welkomstcadeau"
   --------------------------------------------------------------------------
   Waar het staat : op alle gewone pagina's, via de twee voetteksten
                    (src/fragmenten/blok-voet.html en voettekst.{nl,en,de}.html).
   Varianten      : één; de A/B-test zit in het gedrag, niet in de opmaak
                    (variant b krijgt er het zwevende tabje bij).
   Velden         : pw-* uit src/teksten/home.{nl,en,de}.txt.
   Gedrag         : src/gedrag/blok-popup-welkom.js.

   MATEN: letterlijk overgenomen van de oude WordPress-site
   (raw/rocket-nl.html, regels 3510-3730). Alles staat in px en de klassen
   dragen allemaal het voorvoegsel `nb-`, dus er botst niets met tokens.css
   of met de oude app.dd471.css.

   ÉÉN AFWIJKING VAN OUD: het goud was #c8973a, net naast het merkgoud
   #c89b4f. Nu overal var(--goud) met #c89b4f als terugval, zodat de pop-up
   op de herbouwde pagina's niet naast de knoppen ernaast valt.

   GOTCHA — deze bouwsteen staat óók op de niet-herbouwde pagina's, waar
   tokens.css NIET geladen is. Daarom mag geen enkele regel op een custom
   property leunen zonder terugval, en zet het blok zijn eigen box-sizing,
   lettertype en regelhoogte; de oude Foundation-CSS zet die anders.
   ========================================================================== */

.nb-overlay,
.nb-overlay *,
.nb-sticky-tab,
.nb-sticky-tab * {
  box-sizing: border-box;
}

.nb-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, .72);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
  line-height: 1.6;
}
.nb-overlay.nb-active { display: flex; }

.nb-modal {
  background: #fff;
  max-width: 820px;
  width: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
}

.nb-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--donker, #191919);
  font-size: 24px;
  line-height: 1;
  z-index: 10;
  padding: 4px;
  transition: color .2s;
}
.nb-close:hover { color: var(--goud, #c89b4f); }

.nb-image { flex: 0 0 320px; }
.nb-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 480px;
}

.nb-content {
  flex: 1;
  padding: 52px 44px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nb-title {
  font-family: var(--kop, "Merriweather", Georgia, "Times New Roman", serif);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 700;
  color: var(--donker, #191919);
  line-height: 1.3;
  margin: 0 0 14px;
}

.nb-perks {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nb-perks li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--txt, "Agenda", "Helvetica Neue", Helvetica, Arial, sans-serif);
  font-size: 15px;
  color: var(--donker, #191919);
  margin: 0;
}

.nb-label {
  display: block;
  font-family: var(--txt, "Agenda", "Helvetica Neue", Helvetica, Arial, sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--donker, #191919);
  margin-bottom: 6px;
}

.nb-input {
  width: 100%;
  border: 1.5px solid var(--licht-om, #c9c3b6);
  padding: 12px 16px;
  font-family: var(--txt, "Agenda", "Helvetica Neue", Helvetica, Arial, sans-serif);
  font-size: 15px;
  color: var(--donker, #191919);
  outline: none;
  transition: border-color .2s;
  margin-bottom: 4px;
  background: #fff;
  height: auto;
  border-radius: 0;
  box-shadow: none;
}
.nb-input:focus { border-color: var(--goud, #c89b4f); }

/* Valstrik voor spambots: buiten beeld, niet met tab te bereiken. Een ingevuld
   veld wordt door de Worker (isSpam) geweigerd. */
.nb-val {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.nb-error {
  font-family: var(--txt, "Agenda", "Helvetica Neue", Helvetica, Arial, sans-serif);
  font-size: 13px;
  color: #c0392b;
  min-height: 18px;
  margin: 0 0 12px;
}

.nb-submit {
  width: 100%;
  background: var(--goud, #c89b4f);
  color: #fff;
  border: none;
  padding: 14px 24px;
  font-family: var(--kop, "Merriweather", Georgia, "Times New Roman", serif);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .04em;
  transition: background .2s;
  margin-top: 8px;
}
.nb-submit:hover { background: var(--goud-op, #a87a28); }
.nb-submit:disabled { background: var(--licht, #f4f1ea); cursor: not-allowed; }

.nb-disclaimer {
  font-family: var(--txt, "Agenda", "Helvetica Neue", Helvetica, Arial, sans-serif);
  font-size: 12px;
  color: var(--tekst-om, #5d574c);
  margin: 14px 0 0;
  line-height: 1.5;
}
.nb-disclaimer a { color: var(--goud, #c89b4f); text-decoration: underline; }

.nb-success[hidden] { display: none; }
.nb-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 20px 0;
}
.nb-success-title {
  font-family: var(--kop, "Merriweather", Georgia, "Times New Roman", serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--donker, #191919);
  margin: 0;
}
.nb-success-text {
  font-family: var(--txt, "Agenda", "Helvetica Neue", Helvetica, Arial, sans-serif);
  font-size: 15px;
  color: var(--tekst-om, #5d574c);
  line-height: 1.65;
  margin: 0;
}

/* Zwevend tabje links — alleen variant b, en pas nadat de pop-up is weggeklikt. */
.nb-sticky-tab {
  display: none;
  position: fixed;
  left: 0;
  top: 50%;
  z-index: 9998;
  transform: translateY(-50%);
  cursor: pointer;
  border: none;
  background: var(--goud, #c89b4f);
  color: #fff;
  font-family: var(--kop, "Merriweather", Georgia, "Times New Roman", serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 18px 13px;
  writing-mode: vertical-lr;
  text-orientation: mixed;
  border-radius: 0 6px 6px 0;
  box-shadow: 2px 2px 12px rgba(0, 0, 0, .15);
  transition: background .2s, box-shadow .2s;
  line-height: 1;
  white-space: nowrap;
}
.nb-sticky-tab:hover {
  background: var(--goud-op, #a87a28);
  box-shadow: 2px 2px 16px rgba(0, 0, 0, .25);
}
.nb-sticky-tab.nb-tab-visible { display: flex; align-items: center; gap: 10px; }
.nb-sticky-tab svg { flex-shrink: 0; }

@media (max-width: 599px) {
  .nb-sticky-tab { font-size: 12px; padding: 14px 9px; }

  .nb-overlay { padding: 16px; align-items: center; }
  .nb-modal {
    max-width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 4px;
    flex-direction: column;
  }
  .nb-image { flex: 0 0 auto; height: 200px; width: 100%; }
  .nb-image img { min-height: 200px; height: 200px; }
  .nb-content { padding: 28px 24px 24px; }
  .nb-title { font-size: 20px; }
  .nb-close {
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, .85);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
  }
}

</style>

<button class="nb-sticky-tab" id="nb-sticky-tab" type="button" aria-label="Receive a free welcome gift">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 12v10H4V12"/><path d="M2 7h20v5H2z"/><path d="M12 22V7"/><path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"/><path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"/></svg>
  Receive a free welcome gift</button>

<div class="nb-overlay" id="nb-overlay" role="dialog" aria-modal="true" aria-labelledby="nb-title" aria-hidden="true" data-moment="One moment..." data-ongeldig="Please enter a valid email address." data-fout="We could not sign you up just now. Please try again in a moment or email info@parkhotelhorst.nl.">
  <div class="nb-modal">
    <button class="nb-close" id="nb-close-btn" type="button" aria-label="Close">&#215;</button>

    <div class="nb-image" aria-hidden="true">
      <img width="640" height="426" src="/assets/img/popup-welkom-0905f9.webp" alt="" loading="lazy" decoding="async" />
    </div>

    <div class="nb-content">
      <div id="nb-form-wrap">
        <h2 class="nb-title" id="nb-title">Free welcome gift with your stay</h2>
        <ul class="nb-perks">
          <li>
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c89b4f" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>
            Bathrobe &amp; bath towels</li>
          <li>
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c89b4f" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>
            Bottle of bubbles in your room</li>
        </ul>
        <div class="nb-form">
          <label for="nb-email" class="nb-label">Email address</label>
          <input type="email" id="nb-email" class="nb-input" placeholder="your@email.com" autocomplete="email" />
          <div class="nb-val" aria-hidden="true">
            <label>Leave this field empty<input type="text" id="nb-website" name="website" tabindex="-1" autocomplete="off" /></label>
          </div>
          <p class="nb-error" id="nb-error" role="alert" aria-live="polite"></p>
          <button type="button" class="nb-submit" id="nb-submit">Sign me up</button>
        </div>
        <p class="nb-disclaimer">By subscribing you agree to our <a href="/en/privacy-policy-2/">privacy policy</a>. You can unsubscribe at any time.</p>
      </div>

      <div class="nb-success" id="nb-success" hidden>
        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#c89b4f" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
        <h3 class="nb-success-title">Thank you for subscribing!</h3>
        <p class="nb-success-text">Check your inbox: we have sent you a confirmation email. After confirming, you will receive your free welcome gift on your next stay.</p>
      </div>
    </div>
  </div>
</div>

<script>
/* GEDRAG bij de bouwsteen `popup-welkom` — de nieuwsbrief-pop-up.

   WAT DE OUDE PAGINA DEED (nagemeten in raw/rocket-nl.html, regels 3878-3932):

   1. Openen na 12 seconden, geteld vanaf DOMContentLoaded.
   2. Onthouden: cookie `nb_dismissed` (7 dagen) plus sessionStorage. Is er een
      van tweeën gezet, dan komt hij niet meer.
   3. A/B-test: cookie `nb_variant` (30 dagen), fifty-fifty a of b. Variant a is
      alleen de pop-up; variant b krijgt ná het wegklikken een zwevend tabje
      links waarmee je hem weer opent.
   4. Sluiten: kruisje, klik naast het vak, Escape.
   5. Meten: dataLayer-events newsletter_popup_shown / _dismissed / _subscribed /
      _tab_shown / _tab_clicked, met de variant erbij.

   DRIE DINGEN ZIJN ANDERS DAN OP DE OUDE PAGINA:

   a. De oude teller schreef óók naar wp-admin/admin-ajax.php?action=nb_track.
      Die WordPress-route bestaat niet meer. Alleen de dataLayer-push blijft
      over; GTM (container P2GNVG5) staat op elke pagina, dus de A/B-test is in
      GA4 gewoon uit te lezen.
   b. Het externe Revinate-script (contact-api.inguest.com/.../revinate-form.js)
      is weg. Dat script deed maar één ding: een POST naar
      /api/add-contacts-to-lists met {tokens:[<taaltoken>], contacts:[{email}]}.
      Dat doet onze eigen Worker nu, op /api/nieuwsbrief — zo staan de drie
      lijsttokens niet meer in de paginabron.
   c. De oude code toonde het bedankscherm na een vaste setTimeout van 2 seconden,
      of het nu gelukt was of niet. Nu pas na een goed antwoord van de Worker;
      gaat er iets mis, dan komt er een foutmelding in beeld en kan de bezoeker
      het opnieuw proberen.

   De teksten komen uit data-attributen op de markup (per taal ingevuld door
   render.py), zodat dit script voor NL, EN en DE hetzelfde is. */
(function () {
  'use strict';

  var overlay = document.getElementById('nb-overlay');
  var tab = document.getElementById('nb-sticky-tab');
  if (!overlay || !tab) { return; }

  var COOKIE = 'nb_dismissed';
  var VARIANT_COOKIE = 'nb_variant';
  var DAGEN = 7;
  var VARIANT_DAGEN = 30;
  var WACHT = 12000;

  var formWrap = document.getElementById('nb-form-wrap');
  var succes = document.getElementById('nb-success');
  var veld = document.getElementById('nb-email');
  var fout = document.getElementById('nb-error');
  var knop = document.getElementById('nb-submit');
  var val = document.getElementById('nb-website');

  var KNOPTEKST = knop.textContent;
  var MOMENT = overlay.getAttribute('data-moment') || KNOPTEKST;
  var ONGELDIG = overlay.getAttribute('data-ongeldig') || '';
  var MISLUKT = overlay.getAttribute('data-fout') || '';
  var TAAL = (document.documentElement.getAttribute('lang') || 'nl').slice(0, 2).toLowerCase();

  var begonnen = Date.now();
  var laatsteFocus = null;

  function meet(naam) {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({ event: naam, nb_variant: variant });
  }

  function zetKoekje(naam, waarde, dagen) {
    var d = new Date();
    d.setTime(d.getTime() + dagen * 86400000);
    try {
      document.cookie = naam + '=' + waarde + '; expires=' + d.toUTCString() +
        '; path=/; SameSite=Lax';
    } catch (e) { /* koekjes uit: dan blijft hij per bezoek terugkomen */ }
  }

  function leesKoekje(naam) {
    var m = document.cookie.match(new RegExp('(?:^|; )' + naam + '=([^;]*)'));
    return m ? m[1] : null;
  }

  /* sessionStorage kan gooien in een privévenster of met site-data uit. */
  function sessieLees(sleutel) {
    try { return sessionStorage.getItem(sleutel); } catch (e) { return null; }
  }
  function sessieZet(sleutel, waarde) {
    try { sessionStorage.setItem(sleutel, waarde); } catch (e) { /* niets */ }
  }
  function sessieWis(sleutel) {
    try { sessionStorage.removeItem(sleutel); } catch (e) { /* niets */ }
  }

  /* A/B: a = alleen de pop-up, b = pop-up plus het zwevende tabje. */
  var variant = (function () {
    var bestaand = leesKoekje(VARIANT_COOKIE);
    if (bestaand === 'a' || bestaand === 'b') { return bestaand; }
    var v = Math.random() < 0.5 ? 'a' : 'b';
    zetKoekje(VARIANT_COOKIE, v, VARIANT_DAGEN);
    return v;
  })();

  function toonTab() {
    if (variant !== 'b') { return; }
    tab.classList.add('nb-tab-visible');
    meet('newsletter_popup_tab_shown');
  }

  function open() {
    laatsteFocus = document.activeElement;
    formWrap.style.display = '';
    succes.hidden = true;
    fout.textContent = '';
    knop.disabled = false;
    knop.textContent = KNOPTEKST;
    veld.value = '';
    veld.style.borderColor = '';

    meet('newsletter_popup_shown');
    overlay.classList.add('nb-active');
    overlay.setAttribute('aria-hidden', 'false');
    document.body.style.overflow = 'hidden';
    tab.classList.remove('nb-tab-visible');
    veld.focus();
  }

  function sluit() {
    meet('newsletter_popup_dismissed');
    overlay.classList.remove('nb-active');
    overlay.setAttribute('aria-hidden', 'true');
    document.body.style.overflow = '';
    sessieZet(COOKIE, '1');
    zetKoekje(COOKIE, '1', DAGEN);
    toonTab();
    if (laatsteFocus && laatsteFocus.focus) { laatsteFocus.focus(); }
  }

  function gelukt() {
    meet('newsletter_popup_subscribed');
    formWrap.style.display = 'none';
    succes.hidden = false;
    zetKoekje(COOKIE, '1', DAGEN);
    sessieZet(COOKIE, '1');
    tab.classList.remove('nb-tab-visible');
  }

  tab.addEventListener('click', function () {
    sessieWis(COOKIE);
    meet('newsletter_popup_tab_clicked');
    open();
  });

  /* Terugkerende bezoeker die hem al eens wegklikte: alleen het tabje. */
  if (sessieLees(COOKIE) || leesKoekje(COOKIE)) {
    toonTab();
  } else {
    setTimeout(function () {
      if (sessieLees(COOKIE) || leesKoekje(COOKIE)) { return; }
      open();
    }, WACHT);
  }

  document.getElementById('nb-close-btn').addEventListener('click', sluit);
  overlay.addEventListener('click', function (e) {
    if (e.target === overlay) { sluit(); }
  });
  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape' && overlay.classList.contains('nb-active')) { sluit(); }
  });

  knop.addEventListener('click', function () {
    var email = String(veld.value || '').trim();
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      veld.style.borderColor = '#c0392b';
      fout.textContent = ONGELDIG;
      veld.focus();
      return;
    }

    veld.style.borderColor = '';
    fout.textContent = '';
    knop.disabled = true;
    knop.textContent = MOMENT;

    fetch('/api/nieuwsbrief', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        email: email,
        taal: TAAL,
        website: val ? val.value : '',
        ts: begonnen
      })
    }).then(function (res) {
      return res.json()['catch'](function () { return null; })
        .then(function (data) { return { res: res, data: data }; });
    }).then(function (r) {
      if (r.res.ok && r.data && r.data.ok === true) {
        gelukt();
        return;
      }
      knop.disabled = false;
      knop.textContent = KNOPTEKST;
      fout.textContent = (r.data && r.data.message) ? r.data.message : MISLUKT;
    })['catch'](function () {
      knop.disabled = false;
      knop.textContent = KNOPTEKST;
      fout.textContent = MISLUKT;
    });
  });
})();

</script>
<!--/popup-welkom-->

<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v4bc70e2c01a94c73b74392e4234840661791215815920" integrity="sha512-L0ha0OXavK/8okipN9F8BtP84dg9DUhPERbBXzwI6dgTA55d2+yweo3pn5CSFYs45/r8md2+xvUPtTdvTNRfjA==" data-cf-beacon='{"version":"2024.11.0","token":"ef83811131094a1da1657b0e824daa17","r":1,"spa":2}' crossorigin="anonymous"></script>
</body>
</html>