<!--
  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="nl-NL">
<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='nl-NL';
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/restaurant-boff/" />
<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 | Smakelijk &amp; vermakelijk - Parkhotel Horst</title>
<meta name="description" content="BØFF is het restaurant in Horst waar u elk moment van de dag ‘thuis’ bent. Borrelen of een zakenlunch, bij Parkhotel Horst kan het allemaal." />
<meta property="og:locale" content="nl_NL" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Restaurant BØFF | Smakelijk &amp; vermakelijk - Parkhotel Horst" />
<meta property="og:description" content="BØFF is het restaurant in Horst waar u elk moment van de dag ‘thuis’ bent. Borrelen of een zakenlunch, bij Parkhotel Horst kan het allemaal." />
<meta property="og:url" content="https://www.parkhotelhorst.nl/restaurant-boff/" />
<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/restaurant-boff/","url":"https://www.parkhotelhorst.nl/restaurant-boff/","name":"Restaurant BØFF | Smakelijk & vermakelijk - Parkhotel Horst","isPartOf":{"@id":"https://www.parkhotelhorst.nl/#website"},"primaryImageOfPage":{"@id":"https://www.parkhotelhorst.nl/restaurant-boff/#primaryimage"},"image":{"@id":"https://www.parkhotelhorst.nl/restaurant-boff/#primaryimage"},"thumbnailUrl":"https://www.parkhotelhorst.nl/assets/img/rb-hero-ULT2861-5dde1c.webp","datePublished":"2022-10-18T05:39:12+00:00","dateModified":"2026-10-12T12:00:00+00:00","description":"BØFF is het restaurant in Horst waar u elk moment van de dag ‘thuis’ bent. Borrelen of een zakenlunch, bij Parkhotel Horst kan het allemaal.","breadcrumb":{"@id":"https://www.parkhotelhorst.nl/restaurant-boff/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https://www.parkhotelhorst.nl/restaurant-boff/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https://www.parkhotelhorst.nl/restaurant-boff/#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":"Twee gasten proosten met wijn op het terras van restaurant BØFF, met uitzicht op het meer"},{"@type":"BreadcrumbList","@id":"https://www.parkhotelhorst.nl/restaurant-boff/#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":"nl-NL"}]}</script>
<script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"Moet ik reserveren bij BØFF?","acceptedAnswer":{"@type":"Answer","text":"Reserveren kan direct online: u kiest datum, tijdstip en gezelschap en ontvangt meteen een bevestiging. Komt u met een groep vanaf 12 personen? Bel ons op +31 (0)77 397 60 00."}},{"@type":"Question","name":"Kan ik ook alleen koffie drinken of lunchen?","acceptedAnswer":{"@type":"Answer","text":"Ja. BØFF is dagelijks vanaf 07:00 uur open voor koffie met Limburgse vlaai, en de lunchkaart wordt geserveerd van 11:00 tot 17:00 uur, binnen of op het terras."}},{"@type":"Question","name":"Tot hoe laat kan ik dineren?","acceptedAnswer":{"@type":"Answer","text":"Dineren kan tussen 17.00 en 21.30 uur. Daarna kiest u tot 22.00 uur uit de BØFF classics. Op vrijdag en zaterdag bent u tot 01:00 uur welkom voor een borrel na het diner."}},{"@type":"Question","name":"Zijn er vegetarische en vegan gerechten?","acceptedAnswer":{"@type":"Answer","text":"Ja. Vegetarische en vegan gerechten staan standaard op de kaart, zoals de tartaar van rode biet met krokante geitenkaas, een groenterisotto of vegan kroketten. Heeft u dieetwensen of allergieën? Onze medewerkers adviseren u graag."}},{"@type":"Question","name":"Is BØFF geschikt voor kinderen?","acceptedAnswer":{"@type":"Answer","text":"Ja, BØFF heeft een eigen kindermenu: eten, ontspannen en spelen."}},{"@type":"Question","name":"Kan ik bij BØFF ontbijten zonder te overnachten?","acceptedAnswer":{"@type":"Answer","text":"Ja, het ontbijtbuffet is ook zonder overnachting mogelijk voor € 17,50 p.p. incl. koffie, thee, water en sap. Ma t/m vr 07:00 tot 10:00 uur, za en zo 08:00 tot 11:00 uur."}}]}</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;
  /* --koprij = de hoofdbalk; --kophoogte = de hele kop. Onder 1024 px staat er de lopende
     usp-regel van 32 px boven (blok-kop), op het bureaublad is de kop 124 (40 + 84). */
  --koprij:60px; --kophoogte:calc(var(--koprij) + 32px);
  --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; --koprij:84px; --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-link, score-url, ta-score, ta-aantal,
                ta-aantal-label, ta-url (scoreknop + scorevlak),
                kop-usp1..4 (de vier usp's; een pagina kan een rubriekset laden
                met `usp-set: <naam>`, zie render.py), kop-usp-banner +
                kop-usp-banner-url (gevuld = één campagneregel i.p.v. de usp's
                op het bureaublad), kop-usp-label, kop-score-label,
                vacatures-url/-naam, overons-url/-naam, contact-url/-naam,
                taallink-nl/-en/-de + taal-nl/-en/-de,
                m1..m6-url/-naam/-tekst/-alles met m<n>s1..s6-url/-naam,
                m2-reserveer-url/-naam,
                promotieblok m2..m6: 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.
   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     : bovenaan een lopende regel van 32 px met de vier usp's
                (.kopbalk__loper, stil bij prefers-reduced-motion), daaronder
                de balk van 60 px (--koprij; tablet 72) met logo en Menu;
                --kophoogte = koprij + 32. Boven een herofoto is de balk
                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 links de usp's en
                rechts telefoon, de reviewscore-knop (klapt het crème scorevlak
                met Google en Tripadvisor uit) en taal, daaronder een balk van
                84 px met zes 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 zes rubrieken niet: dan een Menu-knop met
                hetzelfde vlak in zes 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(--koprij); padding:0 16px }
.kopbalk__logo { display:block; flex:0 0 auto; line-height:0 }
.kopbalk__logo img { width:186px; height:34px }
.kopbalk__boven,.kopbalk__scorevlak,.kopbalk__nav,.kopbalk__menu,.kopbalk__vlak,.kopbalk__rijvlak,
.kopbalk__boek { display:none }

/* De lopende usp-regel (telefoon en tablet, kiezer-optie 2c): 32 px, eigen donkere
   grond, ook boven een herofoto. De inhoud staat er twee keer in (de kopie is
   aria-hidden) en schuift in 28 s precies één helft op, dus de lus heeft geen naad.
   Hij schuift samen met de balk weg (.kopbalk--weg rekent met --kophoogte). */
.kopbalk__loper { position:relative; z-index:1; display:flex; align-items:center; height:32px;
  overflow:hidden; background:var(--donker, #191919); color:var(--licht, #f4f1ea) }
.loper__spoor { display:flex; flex:none; width:max-content; animation:kopbalk-loper 28s linear infinite }
.loper__deel { display:flex; align-items:center; flex:none }
.loper__deel span { font-family:var(--txt); font-size:13px; line-height:1; white-space:nowrap;
  color:var(--licht, #f4f1ea) }
.loper__punt { display:block; flex:none; width:4px; height:4px; margin:0 14px; border-radius:50%;
  background:var(--goud, #c89b4f) }
@keyframes kopbalk-loper { from { transform:translateX(0) } to { transform:translateX(-50%) } }
.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 { --koprij: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,.kopbalk__loper { 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 }
  /* links de usp's (kiezer-optie 1i). De lijst mag afbreken naar een tweede regel die
     buiten de 40 px valt: een usp die niet meer past verdwijnt dus helemaal, in plaats
     van half afgesneden te worden (lange rubrieksets, smalle schermen). */
  .kopbalk__links { flex:1 1 auto }
  .kopbalk__usps { display:flex; flex-wrap:wrap; align-items:center; column-gap:22px; flex:1 1 auto;
    min-width:0; height:40px; overflow:hidden }
  .kopbalk__usps li { display:flex; align-items:center; gap:7px; height:40px; font-family:var(--txt);
    font-size:13.5px; line-height:1; color:var(--licht); white-space:nowrap }
  .kopbalk__usps svg,.kopbalk__banner svg { flex:none; width:16px; height:16px; color:var(--goud) }
  .kopbalk__banner { display:flex; align-items:center; gap:7px; min-width:0; min-height:40px;
    font-family:var(--txt); font-size:13.5px; line-height:1; color:var(--licht);
    text-decoration:none; white-space:nowrap; transition:color .15s ease }
  .kopbalk__banner span { overflow:hidden; text-overflow:ellipsis }
  .kopbalk__banner:hover,.kopbalk__banner:focus-visible { color:var(--goud) }
  /* rechts: telefoon, reviewscore-knop, talen */
  .kopbalk__rechts { flex:0 0 auto; gap:22px }
  .kopbalk__tel { display:flex; align-items:center; gap:7px; min-height:40px; font-family:var(--txt);
    font-size:13.5px; line-height:1; color:var(--licht); text-decoration:none; white-space:nowrap;
    transition:color .15s ease }
  .kopbalk__tel svg { flex:none; width:16px; height:16px; color:var(--licht); transition:color .15s ease }
  .kopbalk__tel:hover,.kopbalk__tel:focus-visible,
  .kopbalk__tel:hover svg,.kopbalk__tel:focus-visible svg { color:var(--goud) }
  .kopbalk__scoreknop { display:flex; align-items:center; gap:8px; height:26px; padding:0 10px;
    border:1px solid rgba(255,255,255,.35); border-radius:4px; background:transparent;
    white-space:nowrap; line-height:1; cursor:pointer; transition:border-color .15s ease }
  .kopbalk__scoreknop:hover,.kopbalk__scoreknop:focus-visible,
  .kopbalk__scoreknop[aria-expanded="true"] { border-color:var(--goud) }
  .kopbalk__glogo { display:block; flex:none; width:48px; height:16px; color:#fff }
  .kopbalk__scorecijfer { font-family:var(--kop); font-weight:700; font-size:14px; color:#fff }
  .kopbalk__scorelink { font-family:var(--txt); font-size:13px; color:var(--licht-om) }
  .kopbalk__scorechev { flex:none; width:10px; height:7px; color:#fff; transition:transform .2s ease }
  .kopbalk__scoreknop[aria-expanded="true"] .kopbalk__scorechev { transform:rotate(180deg) }
  .kopbalk__talen { display:flex; align-items:center; gap:2px }
  .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 }

  /* het crème scorevlak onder de scoreknop; blok-kop.js zet top/right naar de knop.
     Verborgen zodra de kop slank wordt (de bovenbalk met de knop is dan weg). */
  .kopbalk__scorevlak { display:block; position:absolute; top:40px; right:15px; z-index:30;
    min-width:260px; padding:10px 14px; background:var(--creme); border-radius:4px;
    box-shadow:0 10px 30px rgba(0,0,0,.25); color:var(--tekst);
    opacity:0; visibility:hidden; transform:translateY(-4px);
    transition:opacity .14s ease,transform .18s ease,visibility 0s .18s }
  .kopbalk__scorevlak[data-open] { opacity:1; visibility:visible; transform:translateY(0);
    transition:opacity .14s ease,transform .18s ease,visibility 0s 0s }
  .kopbalk--slank .kopbalk__scorevlak { opacity:0; visibility:hidden }
  .scorevlak__rij { display:flex; align-items:center; gap:10px; min-height:40px; font-family:var(--txt);
    font-size:13px; line-height:1.2; color:var(--tekst); text-decoration:none; white-space:nowrap }
  .scorevlak__rij + .scorevlak__rij { border-top:1px solid var(--rand) }
  .scorevlak__plat { display:flex; align-items:center; gap:6px; flex:none }
  .scorevlak__google { display:block; width:48px; height:16px }
  .scorevlak__ta { font-family:var(--kop); font-weight:700; font-size:13px; color:var(--tekst) }
  .kopbalk__uil { flex:none; width:20px; height:13px; color:var(--tekst) }
  .scorevlak__score { margin-left:auto; color:var(--tekst) }
  .scorevlak__pijl { flex:none; width:16px; height:16px; color:var(--goud-op); transition:transform .15s ease }
  .scorevlak__rij:hover .scorevlak__score,.scorevlak__rij:focus-visible .scorevlak__score { color:var(--goud-op) }
  .scorevlak__rij:hover .scorevlak__pijl,.scorevlak__rij:focus-visible .scorevlak__pijl { transform:translateX(2px) }
  .kopbalk__scorevlak :focus-visible { outline-color:var(--goud-op) }

  /* 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 zes rubrieken als kolommen ---- */
@media (min-width:1024px) and (max-width:1199.98px) {
  /* de vierde usp en de reviewtekst wijken; past de derde ook niet, dan valt die
     vanzelf weg (zie .kopbalk__usps) */
  .kopbalk__usps li:nth-child(4),.kopbalk__scorelink { display:none }
  .kopbalk__usps,.kopbalk__rechts { column-gap:16px }
  .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(6,1fr); gap:0 16px }
  .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 1479 px (zes rubrieken) -----
   Gemeten 18 okt 2026 met de echte letters: met zes rubrieken liep het Engelse
   menu ("Meetings & events", "Surroundings", "Search and book") op 1400 px nog
   tegen de boekknop; vandaar tot 1479 px en onder 1300 px nog iets krapper. */
@media (min-width:1200px) and (max-width:1479.98px) {
  .kopbalk__logo img { width:220px; height:40px }
  .kopbalk__rij { gap:14px }
  .rubrieken { gap:18px }
  .rub__link { font-size:15.5px }
}
@media (min-width:1200px) and (max-width:1299.98px) {
  .rubrieken { gap:10px }
  .rub__rij { gap:4px }
  .rub__link { font-size:15px }
}
@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 }
  .loper__spoor { padding-left:16px }
}

/* ==========================================================================
   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="nl" 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">
  <!-- telefoon en tablet: lopende regel met de vier usp's (32 px), schuift met de kop mee weg -->
  <div class="kopbalk__loper" role="region" aria-label="Voordelen van direct boeken"><div class="loper__spoor"><div class="loper__deel"><span>Beste prijs bij direct boeken</span><i class="loper__punt" aria-hidden="true"></i><span>Gratis annuleren</span><i class="loper__punt" aria-hidden="true"></i><span>Gratis zwembad en wellness</span><i class="loper__punt" aria-hidden="true"></i><span>Gratis parkeren</span><i class="loper__punt" aria-hidden="true"></i></div><div class="loper__deel" aria-hidden="true"><span>Beste prijs bij direct boeken</span><i class="loper__punt" aria-hidden="true"></i><span>Gratis annuleren</span><i class="loper__punt" aria-hidden="true"></i><span>Gratis zwembad en wellness</span><i class="loper__punt" aria-hidden="true"></i><span>Gratis parkeren</span><i class="loper__punt" aria-hidden="true"></i></div></div></div>
  <!-- bovenbalk: alleen op het bureaublad. Links de vier usp's (of één campagneregel als
       kop-usp-banner gevuld is), rechts telefoon, reviewscore-knop en taalkeuze -->
  <div class="kopbalk__boven">
    <div class="kopbalk__bovenrij">
      <div class="kopbalk__groep kopbalk__links">
        <ul class="kopbalk__usps"><li><svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" focusable="false"><path d="M3 8.5l3 3 7-7" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg><span>Beste prijs bij direct boeken</span></li><li><svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" focusable="false"><path d="M3 8.5l3 3 7-7" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg><span>Gratis annuleren</span></li><li><svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" focusable="false"><path d="M3 8.5l3 3 7-7" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg><span>Gratis zwembad en wellness</span></li><li><svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" focusable="false"><path d="M3 8.5l3 3 7-7" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg><span>Gratis parkeren</span></li></ul>
      </div>
      <div class="kopbalk__groep kopbalk__rechts">
        <a class="kopbalk__tel" href="tel:0031773976000"><svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" focusable="false"><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" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg><span>077 397 60 00</span></a>
        <button type="button" class="kopbalk__scoreknop" id="scoreknop" aria-expanded="false" aria-controls="scorevlak"><svg class="kopbalk__glogo" viewBox="0 0 92 30" width="48" height="16" aria-hidden="true" focusable="false"><path fill="currentColor" d="M38.9 15.51c0 4.26-3.32 7.39-7.4 7.39s-7.4-3.14-7.4-7.39c0-4.28 3.32-7.39 7.4-7.39s7.4 3.1 7.4 7.39zm-3.24 0c0-2.66-1.93-4.48-4.16-4.48-2.23 0-4.16 1.82-4.16 4.48 0 2.63 1.93 4.48 4.16 4.48 2.23 0 4.16-1.85 4.16-4.48zm-23.7 7.47C5.63 22.98.31 17.83.31 11.5S5.63.02 11.96.02c3.5 0 5.99 1.37 7.87 3.16L17.62 5.4c-1.34-1.26-3.16-2.24-5.66-2.24-4.62 0-8.23 3.72-8.23 8.34 0 4.62 3.61 8.34 8.23 8.34 3 0 4.7-1.2 5.79-2.3.9-.9 1.49-2.2 1.74-4.17H12v-3.14h10.52c.11.56.17 1.23.17 1.96 0 2.35-.64 5.49-2.72 7.56-2.02 2.11-4.59 3.23-8.01 3.23zm42.94-7.47c0 4.26-3.32 7.39-7.4 7.39s-7.4-3.14-7.4-7.39c0-4.28 3.32-7.39 7.4-7.39s7.4 3.1 7.4 7.39zm-3.24 0c0-2.66-1.93-4.48-4.16-4.48-2.23 0-4.16 1.82-4.16 4.48 0 2.63 1.93 4.48 4.16 4.48 2.23 0 4.16-1.85 4.16-4.48zM70 8.56v13.27c0 5.46-3.05 7.7-6.86 7.7-3.58 0-5.74-2.41-6.55-4.37l2.83-1.18c.5 1.2 1.74 2.63 3.72 2.63 2.44 0 3.78-1.51 3.78-4.34v-1.06h-.11c-.73.9-2.04 1.68-3.81 1.68-3.7 0-7-3.22-7-7.36 0-4.17 3.3-7.42 7-7.42 1.76 0 3.08.78 3.81 1.65h.11v-1.2H70zm-2.86 6.97c0-2.6-1.74-4.51-3.95-4.51-2.24 0-3.95 1.9-3.95 4.51 0 2.58 1.71 4.45 3.95 4.45 2.22.01 3.95-1.87 3.95-4.45zM75 1.17V22.9h-3V1.17h3zm12.5 16.77l2.48 1.68c-.8 1.2-2.73 3.28-6.06 3.28-4.13 0-7.22-3.25-7.22-7.39 0-4.4 3.11-7.39 6.86-7.39 3.78 0 5.62 3.05 6.23 4.7l.31.85-9.71 4.08c.74 1.48 1.9 2.24 3.53 2.24s2.76-.82 3.58-2.05zm-7.63-2.66l6.5-2.74c-.36-.92-1.43-1.57-2.7-1.57-1.62 0-3.88 1.46-3.8 4.31z"/></svg><span class="kopbalk__scorecijfer">8,4</span><span class="kopbalk__scorelink">1829 reviews</span><svg class="kopbalk__scorechev" viewBox="0 0 12 8" width="10" height="7" 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"> Toon reviewscores</span></button>
        <ul class="kopbalk__talen">
          <li><a href="/restaurant-boff/" hreflang="nl" lang="nl" aria-current="true">NL</a></li>
          <li><a href="/en/boff-restaurant/" hreflang="en" lang="en">EN</a></li>
          <li><a href="/de/restaurant-boff-2/" hreflang="de" lang="de">DE</a></li>
        </ul>
      </div>
    </div>
  </div>

  <!-- het crème scorevlak: los van de bovenbalk (die heeft overflow:hidden om in te
       klappen); blok-kop.js zet het onder de scoreknop -->
  <div class="kopbalk__scorevlak" id="scorevlak" role="region" aria-label="Toon reviewscores">
    <a class="scorevlak__rij" href="https://www.google.com/travel/hotels/entity/CgoIgvvT_cD50cZVEAE/reviews" target="_blank" rel="noopener"><span class="scorevlak__plat"><svg class="scorevlak__google" viewBox="0 0 92 30" width="48" height="16" role="img" aria-label="Google"><path fill="#EA4335" fill-rule="evenodd" d="M38.9 15.51c0 4.26-3.32 7.39-7.4 7.39s-7.4-3.14-7.4-7.39c0-4.28 3.32-7.39 7.4-7.39s7.4 3.1 7.4 7.39zm-3.24 0c0-2.66-1.93-4.48-4.16-4.48-2.23 0-4.16 1.82-4.16 4.48 0 2.63 1.93 4.48 4.16 4.48 2.23 0 4.16-1.85 4.16-4.48z"/><path fill="#4285F4" fill-rule="evenodd" d="M11.96 22.98C5.63 22.98.31 17.83.31 11.5S5.63.02 11.96.02c3.5 0 5.99 1.37 7.87 3.16L17.62 5.4c-1.34-1.26-3.16-2.24-5.66-2.24-4.62 0-8.23 3.72-8.23 8.34 0 4.62 3.61 8.34 8.23 8.34 3 0 4.7-1.2 5.79-2.3.9-.9 1.49-2.2 1.74-4.17H12v-3.14h10.52c.11.56.17 1.23.17 1.96 0 2.35-.64 5.49-2.72 7.56-2.02 2.11-4.59 3.23-8.01 3.23z"/><path fill="#FBBC05" fill-rule="evenodd" d="M54.9 15.51c0 4.26-3.32 7.39-7.4 7.39s-7.4-3.14-7.4-7.39c0-4.28 3.32-7.39 7.4-7.39s7.4 3.1 7.4 7.39zm-3.24 0c0-2.66-1.93-4.48-4.16-4.48-2.23 0-4.16 1.82-4.16 4.48 0 2.63 1.93 4.48 4.16 4.48 2.23 0 4.16-1.85 4.16-4.48z"/><path fill="#4285F4" fill-rule="evenodd" d="M70 8.56v13.27c0 5.46-3.05 7.7-6.86 7.7-3.58 0-5.74-2.41-6.55-4.37l2.83-1.18c.5 1.2 1.74 2.63 3.72 2.63 2.44 0 3.78-1.51 3.78-4.34v-1.06h-.11c-.73.9-2.04 1.68-3.81 1.68-3.7 0-7-3.22-7-7.36 0-4.17 3.3-7.42 7-7.42 1.76 0 3.08.78 3.81 1.65h.11v-1.2H70zm-2.86 6.97c0-2.6-1.74-4.51-3.95-4.51-2.24 0-3.95 1.9-3.95 4.51 0 2.58 1.71 4.45 3.95 4.45 2.22.01 3.95-1.87 3.95-4.45z"/><path fill="#34A853" fill-rule="evenodd" d="M75 1.17V22.9h-3V1.17h3z"/><path fill="#EA4335" fill-rule="evenodd" d="M87.5 17.94l2.48 1.68c-.8 1.2-2.73 3.28-6.06 3.28-4.13 0-7.22-3.25-7.22-7.39 0-4.4 3.11-7.39 6.86-7.39 3.78 0 5.62 3.05 6.23 4.7l.31.85-9.71 4.08c.74 1.48 1.9 2.24 3.53 2.24s2.76-.82 3.58-2.05zm-7.63-2.66l6.5-2.74c-.36-.92-1.43-1.57-2.7-1.57-1.62 0-3.88 1.46-3.8 4.31z"/></svg></span><span class="scorevlak__score">8,4 · 1829 reviews</span><svg class="scorevlak__pijl" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" focusable="false"><path d="M3 8h10M9 4l4 4-4 4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
    <a class="scorevlak__rij" href="https://www.tripadvisor.nl/Hotel_Review-g3340802-d1140689-Reviews-Parkhotel_Horst-Horst_Limburg_Province.html" target="_blank" rel="noopener"><span class="scorevlak__plat scorevlak__ta"><svg class="kopbalk__uil" viewBox="0 0 1828 1174" width="20" height="13" aria-hidden="true" focusable="false"><path fill="currentColor" d="M619,679.47c0,89.5-72.57,162.07-162.07,162.07s-162.07-72.57-162.07-162.07,72.57-162.07,162.07-162.07,162.07,72.57,162.07,162.07ZM1370.4,517.4c-89.49,0-162.07,72.57-162.07,162.07s72.58,162.07,162.07,162.07,162.06-72.57,162.06-162.07c-.02-89.45-72.52-161.97-161.97-162.02l-.09-.04ZM1827.34,679.47c0,252.22-204.65,456.69-456.93,456.69-115.09.17-225.95-43.24-310.29-121.55l-146.24,159.11-146.31-159.29c-84.32,78.4-195.24,121.88-310.38,121.73C205.08,1136.16.5,931.68.5,679.47c-.18-128.48,53.93-251.07,148.97-337.52L0,179.34h332.06c351.35-239.11,813.15-239.11,1164.48,0h331.2l-149.43,162.61c95.07,86.43,149.19,209.02,149.03,337.52ZM766.12,679.47c0-170.69-138.39-309.07-309.07-309.07s-309.07,138.39-309.07,309.07,138.39,309.07,309.07,309.07,309.05-138.34,309.07-309.03v-.05ZM1256.82,218.03c-219.53-91.45-466.48-91.45-686.01,0,195.13,74.69,343.06,249.13,343.06,452.52,0-203.37,147.91-377.84,342.98-452.5l-.02-.02ZM1679.54,679.44c0-170.69-138.39-309.07-309.07-309.07s-309.08,138.39-309.08,309.07,138.38,309.07,309.08,309.07,309.07-138.39,309.07-309.07Z"/></svg>Tripadvisor</span><span class="scorevlak__score">4,1 · 530 beoordelingen</span><svg class="scorevlak__pijl" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" focusable="false"><path d="M3 8h10M9 4l4 4-4 4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
  </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="/" 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="/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">Toon submenu van Hotel</span></button>
          </div>
        </li>
        <li class="rub" data-rub="m2">
          <div class="rub__rij">
            <a class="rub__link" href="/restaurant-boff/">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">Toon submenu van Restaurant BØFF</span></button>
          </div>
        </li>
        <li class="rub" data-rub="m3">
          <div class="rub__rij">
            <a class="rub__link" href="/zalen-en-feesten/">Zalen en Feesten</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">Toon submenu van Zalen en Feesten</span></button>
          </div>
        </li>
        <li class="rub" data-rub="m4">
          <div class="rub__rij">
            <a class="rub__link" href="/wellness/">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">Toon submenu van Wellness</span></button>
          </div>
        </li>
        <li class="rub" data-rub="m5">
          <div class="rub__rij">
            <a class="rub__link" href="/gebied/">Omgeving</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">Toon submenu van Omgeving</span></button>
          </div>
        </li>
        <li class="rub" data-rub="m6">
          <div class="rub__rij">
            <a class="rub__link" href="/over-ons/">Over ons</a>
            <button class="rub__knop" type="button" aria-expanded="false" aria-controls="kopvlak-m6"><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">Toon submenu van Over ons</span></button>
          </div>
        </li>
      </ul>
    </nav>

    <!-- 1024-1199 px: zes 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">Boek</span><span class="lang">Zoek en boek</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">Vier sterren aan de rand van Horst, met zwembad en wellness.</p>
          <a class="vlak__alles" href="/hotel/">Alles over 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="/kamers-suites/"><span>Kamers &amp; Suites</span></a></li><li><a href="/faciliteiten/"><span>Faciliteiten</span></a></li><li><a href="/arrangement/"><span>Hotelarrangementen</span></a></li><li><a href="/evenement/"><span>Evenementen</span></a></li>
          </ul>
        </div>
        <div class="vlak__promokolom"><a class="vlak__promo" href="/arrangement/heerlijke-herfstdeal/"><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">Aanbieding</span><span class="vlak__promotitel">Herfstarrangement</span><span class="vlak__promoregel">Herfstkleuren rond het meer, met bubbels op de kamer en een 3-gangen keuzediner bij BØFF.</span><span class="vlak__promolink">Bekijk de aanbieding <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">Grillrestaurant met terras aan het water.</p>
          <a class="vlak__alles" href="/restaurant-boff/">Alles over 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="/menukaart/"><span>Menukaart</span></a></li><li><a href="/dineren/"><span>Dineren</span></a></li><li><a href="/terras-bar-brasserie/"><span>Terras / Bar / Brasserie</span></a></li><li><a href="/ontbijtbuffet/"><span>Ontbijtbuffet hotel</span></a></li><li><a href="/vriendinnenlunch/"><span>Vriendinnenlunch</span></a></li><li><a href="/cadeaubon/"><span>Cadeaubon</span></a></li>
          </ul>
          <a class="vlak__actie" href="/restaurant-boff/#reserveren">Reserveren</a>
        </div>
        <div class="vlak__promokolom"><a class="vlak__promo" href="/vriendinnenlunch/"><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">Nieuw</span><span class="vlak__promotitel">Vriendinnenlunch</span><span class="vlak__promoregel">drie gangen met een glas bubbels</span><span class="vlak__promolink">Reserveer een tafel <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">Zalen en Feesten</p>
          <p class="vlak__tekst">Twaalf zalen met daglicht, voor 4 tot 200 gasten.</p>
          <a class="vlak__alles" href="/zalen-en-feesten/">Alles over Zalen en Feesten <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="/vergaderen/"><span>Vergaderingen en bijeenkomsten</span></a></li><li><a href="/feesten-en-partijen/"><span>Feesten en Partijen</span></a></li><li><a href="/trainingskamp/"><span>Trainingskamp</span></a></li><li><a href="/bruiloften/"><span>Bruiloft</span></a></li><li><a href="/condoleances/"><span>Condoleance</span></a></li>
          </ul>
        </div>
        <div class="vlak__promokolom"><a class="vlak__promo" href="/vergaderen/"><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">Vergaderen</span><span class="vlak__promotitel">8-uurs vergaderarrangement</span><span class="vlak__promoregel">zaal, lunch en onbeperkt koffie</span><span class="vlak__promolink">Bekijk het arrangement <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">Zwembad van 25 meter, sauna en stoombad.</p>
          <a class="vlak__alles" href="/wellness/">Alles over 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="/faciliteiten/zwembad/"><span>Zwembad</span></a></li><li><a href="/wellness-lounge/"><span>Wellness Lounge</span></a></li><li><a href="/wellness-dagarrangementen/"><span>Wellness Dagarrangementen</span></a></li><li><a href="/beautysalon/"><span>Beautysalon Senssis</span></a></li>
          </ul>
        </div>
        <div class="vlak__promokolom"><a class="vlak__promo" href="/wellness-dagarrangementen/"><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">Dagje weg</span><span class="vlak__promotitel">Wellness Dagarrangement</span><span class="vlak__promoregel">zwembad, sauna en lunch</span><span class="vlak__promolink">Bekijk het arrangement <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">Omgeving</p>
          <p class="vlak__tekst">De Peel, de Maas en Toverland om de hoek.</p>
          <a class="vlak__alles" href="/gebied/">Alles over Omgeving <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="/gebieden/cultuur/"><span>Cultuur</span></a></li><li><a href="/gebieden/dagje-uit/"><span>Dagje uit</span></a></li><li><a href="/gebieden/natuur/"><span>Natuur</span></a></li><li><a href="/gebieden/shoppen-en-steden/"><span>Shoppen &amp; Steden</span></a></li><li><a href="/gebieden/golf/"><span>Golf</span></a></li>
          </ul>
          <ul class="vlak__links">
            <li><a href="/gebied/wandelroutes/"><span>Wandelroutes</span></a></li><li><a href="/gebied/fietsroutes/"><span>Fietsroutes</span></a></li>
          </ul>
        </div>
        <div class="vlak__promokolom"><a class="vlak__promo" href="/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">Omgeving</span><span class="vlak__promotitel">Zoveel te doen om de hoek</span><span class="vlak__promoregel">van Toverland tot de Maasduinen</span><span class="vlak__promolink">Ontdek de omgeving <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-m6" data-deel="m6">
        <div class="vlak__intro">
          <p class="vlak__naam">Over ons</p>
          <p class="vlak__tekst">Familiehotel met vier sterren aan het meer en de Kasteelse Bossen in Horst. U vindt hier 78 kamers en suites, restaurant BØFF, wellness en twaalf zalen onder één dak.</p>
          <a class="vlak__alles" href="/over-ons/">Meer over Parkhotel Horst <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="/routebeschrijving/"><span>Routebeschrijving</span></a></li><li><a href="/veelgestelde-vragen/"><span>Veelgestelde vragen</span></a></li><li><a href="/werken-bij-parkhotel/"><span>Vacatures</span></a></li><li><a href="/contact/"><span>Contact</span></a></li>
          </ul>
        </div>
        <div class="vlak__promokolom"><a class="vlak__promo" href="/werken-bij-parkhotel/vacatures/"><img class="vlak__promofoto" src="/assets/img/ov-receptie-800-64dafd.webp" width="320" height="150" alt="" loading="lazy" decoding="async" /><span class="vlak__promotekst"><span class="vlak__promolabel">Vacatures</span><span class="vlak__promotitel">Werken bij Parkhotel Horst</span><span class="vlak__promoregel">vacatures in ons familiehotel in Horst</span><span class="vlak__promolink">Bekijk de vacatures <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 zes 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="/hotel/">Alles over 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="/kamers-suites/"><span>Kamers &amp; Suites</span></a></li><li><a href="/faciliteiten/"><span>Faciliteiten</span></a></li><li><a href="/arrangement/"><span>Hotelarrangementen</span></a></li><li><a href="/evenement/"><span>Evenementen</span></a></li></ul>
          </div>
          <div>
            <p class="vlak__naam">Restaurant BØFF</p>
            <a class="vlak__alles" href="/restaurant-boff/">Alles over 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="/menukaart/"><span>Menukaart</span></a></li><li><a href="/dineren/"><span>Dineren</span></a></li><li><a href="/terras-bar-brasserie/"><span>Terras / Bar / Brasserie</span></a></li><li><a href="/ontbijtbuffet/"><span>Ontbijtbuffet hotel</span></a></li><li><a href="/vriendinnenlunch/"><span>Vriendinnenlunch</span></a></li><li><a href="/cadeaubon/"><span>Cadeaubon</span></a></li></ul>
          </div>
          <div>
            <p class="vlak__naam">Zalen en Feesten</p>
            <a class="vlak__alles" href="/zalen-en-feesten/">Alles over Zalen en Feesten <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="/vergaderen/"><span>Vergaderingen en bijeenkomsten</span></a></li><li><a href="/feesten-en-partijen/"><span>Feesten en Partijen</span></a></li><li><a href="/trainingskamp/"><span>Trainingskamp</span></a></li><li><a href="/bruiloften/"><span>Bruiloft</span></a></li><li><a href="/condoleances/"><span>Condoleance</span></a></li></ul>
          </div>
          <div>
            <p class="vlak__naam">Wellness</p>
            <a class="vlak__alles" href="/wellness/">Alles over 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="/faciliteiten/zwembad/"><span>Zwembad</span></a></li><li><a href="/wellness-lounge/"><span>Wellness Lounge</span></a></li><li><a href="/wellness-dagarrangementen/"><span>Wellness Dagarrangementen</span></a></li><li><a href="/beautysalon/"><span>Beautysalon Senssis</span></a></li></ul>
          </div>
          <div>
            <p class="vlak__naam">Omgeving</p>
            <a class="vlak__alles" href="/gebied/">Alles over Omgeving <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="/gebieden/cultuur/"><span>Cultuur</span></a></li><li><a href="/gebieden/dagje-uit/"><span>Dagje uit</span></a></li><li><a href="/gebieden/natuur/"><span>Natuur</span></a></li><li><a href="/gebieden/shoppen-en-steden/"><span>Shoppen &amp; Steden</span></a></li><li><a href="/gebieden/golf/"><span>Golf</span></a></li><li><a href="/gebied/wandelroutes/"><span>Wandelroutes</span></a></li><li><a href="/gebied/fietsroutes/"><span>Fietsroutes</span></a></li></ul>
          </div>
          <div>
            <p class="vlak__naam">Over ons</p>
            <a class="vlak__alles" href="/over-ons/">Meer over Parkhotel Horst <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="/routebeschrijving/"><span>Routebeschrijving</span></a></li><li><a href="/veelgestelde-vragen/"><span>Veelgestelde vragen</span></a></li><li><a href="/werken-bij-parkhotel/"><span>Vacatures</span></a></li><li><a href="/contact/"><span>Contact</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">Zoek en boek</a>
      <button type="button" class="paneel__sluit" id="menusluit" aria-label="Sluiten"><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="/hotel/">Alles over 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="/kamers-suites/"><span>Kamers &amp; Suites</span></a></li><li><a href="/faciliteiten/"><span>Faciliteiten</span></a></li><li><a href="/arrangement/"><span>Hotelarrangementen</span></a></li><li><a href="/evenement/"><span>Evenementen</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="/restaurant-boff/">Alles over 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="/menukaart/"><span>Menukaart</span></a></li><li><a href="/dineren/"><span>Dineren</span></a></li><li><a href="/terras-bar-brasserie/"><span>Terras / Bar / Brasserie</span></a></li><li><a href="/ontbijtbuffet/"><span>Ontbijtbuffet hotel</span></a></li><li><a href="/vriendinnenlunch/"><span>Vriendinnenlunch</span></a></li><li><a href="/cadeaubon/"><span>Cadeaubon</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">Zalen en Feesten<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="/zalen-en-feesten/">Alles over Zalen en Feesten <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="/vergaderen/"><span>Vergaderingen en bijeenkomsten</span></a></li><li><a href="/feesten-en-partijen/"><span>Feesten en Partijen</span></a></li><li><a href="/trainingskamp/"><span>Trainingskamp</span></a></li><li><a href="/bruiloften/"><span>Bruiloft</span></a></li><li><a href="/condoleances/"><span>Condoleance</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="/wellness/">Alles over 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="/faciliteiten/zwembad/"><span>Zwembad</span></a></li><li><a href="/wellness-lounge/"><span>Wellness Lounge</span></a></li><li><a href="/wellness-dagarrangementen/"><span>Wellness Dagarrangementen</span></a></li><li><a href="/beautysalon/"><span>Beautysalon 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">Omgeving<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="/gebied/">Alles over Omgeving <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="/gebieden/cultuur/"><span>Cultuur</span></a></li><li><a href="/gebieden/dagje-uit/"><span>Dagje uit</span></a></li><li><a href="/gebieden/natuur/"><span>Natuur</span></a></li><li><a href="/gebieden/shoppen-en-steden/"><span>Shoppen &amp; Steden</span></a></li><li><a href="/gebieden/golf/"><span>Golf</span></a></li><li><a href="/gebied/wandelroutes/"><span>Wandelroutes</span></a></li><li><a href="/gebied/fietsroutes/"><span>Fietsroutes</span></a></li>
          </ul></div>
        </li>
        <li class="acc" data-rub="m6">
          <button type="button" class="acc__knop" aria-expanded="false" aria-controls="acc-m6">Over ons<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-m6"><ul>
            <li><a class="acc__alles" href="/over-ons/">Meer over Parkhotel Horst <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="/routebeschrijving/"><span>Routebeschrijving</span></a></li><li><a href="/veelgestelde-vragen/"><span>Veelgestelde vragen</span></a></li><li><a href="/werken-bij-parkhotel/"><span>Vacatures</span></a></li><li><a href="/contact/"><span>Contact</span></a></li>
          </ul></div>
        </li>
      </ul>

      <div class="paneel__extra">
        <ul class="paneel__meer">
          <li><a href="tel:0031773976000">077 397 60 00</a></li>
          <li><a href="/over-ons/">Over ons</a></li>
          <li><a href="/contact/">Contact</a></li>
          <li><a href="/werken-bij-parkhotel/vacatures/">Vacatures</a></li>
        </ul>
        <ul class="paneel__talen">
          <li><a href="/restaurant-boff/" hreflang="nl" lang="nl" aria-current="true">NL</a></li>
          <li><a href="/en/boff-restaurant/" hreflang="en" lang="en">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">Zoek en boek</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="Twee gasten proosten met wijn op het terras van restaurant BØFF, met uitzicht op het meer" 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">Dé plek in Noord-Limburg waar u op elk moment van de dag <span class='rb-goud'>‘thuis’</span> bent.</p>
        <div class="rb-knoppen">
          <a class="rb-knop" href="#zc-action-open-widget">Reserveer een tafel</a>
          <a class="rb-knop rb-knop--ghost" href="/menukaart/">Bekijk de menukaart</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">Over BØFF</h2>
          <p class="rb-intro__tekst">BØFF is het restaurant van Parkhotel Horst, aan het meer bij de Kasteelse Bossen. Van koffie met Limburgse vlaai tot een lunch met vrienden of zakenrelaties, een borrel aan de trendy bar of een diner vol ambachtelijke gerechten: u bent er op elk moment van de dag welkom.</p>
          <p class="rb-intro__tekst">Binnen zorgen het eigentijdse interieur en de verschillende zitjes voor een huiselijke sfeer. Buiten kijkt u vanaf het ruime terras uit over het water.</p>
          <div class="rb-intro__knoppen">
            <a class="rb-knop" href="#zc-action-open-widget">Reserveer een tafel</a>
            <a class="rb-knop rb-knop--ghost-donker" href="/menukaart/">Bekijk de menukaart</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>Dagelijks vanaf 07:00</b>vrijdag en zaterdag bent u welkom tot 01:00 uur</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>Ontbijt, lunch en diner</b>plus koffie met Limburgse vlaai en een borrel aan de 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>Terras aan het water</b>uitzicht over het meer en de 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>Vers en ambachtelijk</b>vegetarische en vegan gerechten staan standaard op de kaart</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">Op <span class='rb-goud'>elk moment</span> van de dag</h2>
        <p class="rb-dag__intro">Van het ontbijt tot de laatste borrel: bij BØFF schuift u aan wanneer het u uitkomt.</p>
      </div>
      <ul class="rb-dag__rij">
        <li class="rb-dkaart">
          <img src="/assets/img/rb-dag-ontbijt-2731b8.webp" alt="Croissants worden met een tang uit de mand van het ontbijtbuffet gepakt" width="800" height="533" loading="lazy" decoding="async" />
          <div class="rb-dkaart__body">
            <p class="rb-dkaart__tijd">vanaf 07:00 uur</p>
            <h3 class="rb-dkaart__naam">Ontbijt</h3>
            <p class="rb-dkaart__tekst">Een uitgebreid ontbijtbuffet, ook zonder overnachting: &euro;&nbsp;17,50 p.p. incl. koffie, thee, water en sap. Ma t/m vr 07:00 tot 10:00 uur, za en zo 08:00 tot 11:00 uur.</p>
            <p class="rb-dkaart__links"><a class="rb-link" href="/ontbijtbuffet/">Bekijk het ontbijtbuffet <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 met een punt Limburgse vlaai op tafel" width="800" height="533" loading="lazy" decoding="async" />
          <div class="rb-dkaart__body">
            <p class="rb-dkaart__tijd">de hele dag</p>
            <h3 class="rb-dkaart__naam">Koffie met Limburgse vlaai</h3>
            <p class="rb-dkaart__tekst">Koffie met Limburgse vlaai, binnen bij een van de zitjes of op het terras aan het water.</p>
            <p class="rb-dkaart__links"><a class="rb-link" href="/terras-bar-brasserie/">Bekijk terras, bar en 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="Maaltijdsalade met tomaat en olijven van de lunchkaart" width="800" height="533" loading="lazy" decoding="async" />
          <div class="rb-dkaart__body">
            <p class="rb-dkaart__tijd">11:00 tot 17:00 uur</p>
            <h3 class="rb-dkaart__naam">Lunch</h3>
            <p class="rb-dkaart__tekst">Lunchkaart met focaccia's, salades en flamkuchen. Of maak er een middag van met de vriendinnenlunch, elke dag tussen 12:00 en 17:00 uur, &euro;&nbsp;27,50 p.p.</p>
            <p class="rb-dkaart__links"><a class="rb-link" href="/menukaart/">Bekijk de menukaart <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="/vriendinnenlunch/">Bekijk de vriendinnenlunch <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="Twee vrouwen drinken een cocktail aan de bar van BØFF" width="800" height="533" loading="lazy" decoding="async" />
          <div class="rb-dkaart__body">
            <p class="rb-dkaart__tijd">vr en za tot 01:00 uur</p>
            <h3 class="rb-dkaart__naam">Borrel aan de bar</h3>
            <p class="rb-dkaart__tekst">Aan de bar luidt u het weekend in met een cocktail van de kaart, zoals een Moscow Mule, mojito of gin-tonic. Op vrijdag en zaterdag bent u tot 01:00 uur welkom voor een borrel na het diner.</p>
            <p class="rb-dkaart__links"><a class="rb-link" href="/drankenkaart/">Bekijk de drankenkaart <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="Ober bij vier gasten aan tafel bij het raam in restaurant BØFF" width="800" height="533" loading="lazy" decoding="async" />
          <div class="rb-dkaart__body">
            <p class="rb-dkaart__tijd">17.00 tot 21.30 uur</p>
            <h3 class="rb-dkaart__naam">Diner</h3>
            <p class="rb-dkaart__tekst">Ambachtelijke gerechten, van een kalfsribeye met dragonjus tot een pan mosselen; vegetarisch en vegan staan standaard op de kaart. Driegangen keuzemenu &euro;&nbsp;39,50.</p>
            <p class="rb-dkaart__links"><a class="rb-link" href="/dineren/">Alles over dineren <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">Reserveer een tafel</a>
        <a class="rb-knop rb-knop--ghost" href="/menukaart/">Bekijk de menukaart</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 met pesto, rucola en pijnboompitten" 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="Gerookte zalm met citroen en rucola op een blauw bord" 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="Vis met kruidenkorst, broccoli en wortel op een wit bord" 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="Gerecht met tonijn en tagliatelle op een donker bord bij 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="Dessertcoupe met passievrucht en rood fruit" 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="Foto 1" aria-current="true"></button><button type="button" class="rb-fs__bol" data-fs-naar="1" aria-label="Foto 2"></button><button type="button" class="rb-fs__bol" data-fs-naar="2" aria-label="Foto 3"></button><button type="button" class="rb-fs__bol" data-fs-naar="3" aria-label="Foto 4"></button><button type="button" class="rb-fs__bol" data-fs-naar="4" aria-label="Foto 5"></button></div>
          <div class="rb-fs__pijlen">
            <button type="button" class="rb-fs__pijl" data-fs-stap="-1" aria-label="Vorige foto"><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="Volgende foto"><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">De <span class='rb-goud'>menukaart</span></h2>
          <p class="rb-arr__tekst">Onze koks stellen de menukaart met zorg samen, vol verse en ambachtelijke gerechten: van focaccia’s, salades en flamkuchen bij de lunch tot een uitgebreid diner. Vegetarische en vegan gerechten staan standaard op de kaart.</p>
          <p class="rb-arr__tekst rb-arr__tekst--om">Heeft u allergieën of andere dieetwensen? Onze medewerkers denken graag met u mee over de mogelijkheden.</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>Driegangen keuzemenu &euro;&nbsp;39,50: stel zelf uw voor-, hoofd- en nagerecht samen</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>Vegetarisch en vegan duidelijk gelabeld op de kaart</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>Reguliere kaart tot 21:30 uur, daarna tot 22:00 uur de BØFF classics</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 kindermenu: eten, ontspannen en spelen<a class="rb-link rb-arr__kindlink" href="https://www.restaurantboff.nl/upload/files/Kindermenu%20NL.pdf" target="_blank" rel="noopener">Bekijk het kindermenu <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="/menukaart/">Bekijk de menukaart</a>
            <a class="rb-knop rb-knop--ghost-donker" href="/drankenkaart/">Bekijk de drankenkaart</a>
            <a class="rb-knop rb-knop--ghost-donker" href="#zc-action-open-widget">Reserveer een tafel</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">Binnen, aan de bar en op het <span class='rb-goud'>terras</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="Het terras van BØFF met parasols en uitzicht over het meer" width="800" height="533" loading="lazy" decoding="async" />
          <span class="rb-tegel__tekst"><span class="rb-tegel__naam">Het terras</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="Leren bankzitjes bij de groene tegelwand met de BØFF-letters" width="800" height="533" loading="lazy" decoding="async" />
          <span class="rb-tegel__tekst"><span class="rb-tegel__naam">Binnen</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="De groene bar van BØFF met barstoelen en hangende planten" width="800" height="533" loading="lazy" decoding="async" />
          <span class="rb-tegel__tekst"><span class="rb-tegel__naam">De 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">Evenementen en <span class='rb-goud'>specials</span> bij BØFF</h2>
        <a class="rb-ontdek__alle" href="/evenement/">Alle evenementen <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="Wildgerecht met een glas rode wijn op een houten plank voor het wijnrek" width="800" height="533" loading="lazy" decoding="async" />
          <div class="rb-okaart__body">
            <p class="rb-okaart__meta">za 31 oktober 2026</p>
            <h3 class="rb-okaart__titel">Wild en Wijn Festijn</h3>
            <p class="rb-okaart__tekst">Ook dit jaar vieren wij het wildseizoen weer feestelijk met heerlijke wildgerechten, live muziek en inclusief drank.</p>
            <p class="rb-okaart__prijs">vanaf &euro;&nbsp;169,50 p.p. incl. overnachting</p>
            <p class="rb-okaart__knop"><a class="rb-knop rb-knop--klein rb-knop--ghost-donker" href="/wild-en-wijn-festijn/">Bekijk het Wild en Wijn Festijn</a></p>
          </div>
        </article>
        <article class="rb-okaart">
          <img src="/assets/img/din-kerst-5dd868.webp" alt="Gedekte tafel met een gerecht en wijnglazen naast de kerstboom" width="800" height="533" loading="lazy" decoding="async" />
          <div class="rb-okaart__body">
            <p class="rb-okaart__meta">25 en 26 december 2026</p>
            <h3 class="rb-okaart__titel">Kerst bij Parkhotel Horst</h3>
            <p class="rb-okaart__tekst">Maak er dit jaar een onvergetelijke kerst van bij Parkhotel Horst en creëer samen prachtige herinneringen.</p>
            
            <p class="rb-okaart__knop"><a class="rb-knop rb-knop--klein rb-knop--ghost-donker" href="/kerst/">Bekijk kerst</a></p>
          </div>
        </article>
        <article class="rb-okaart">
          <img src="/assets/img/din-oudnieuw-12ad65.webp" alt="Vuurwerk boven Parkhotel Horst, weerspiegeld in het meer" width="800" height="533" loading="lazy" decoding="async" />
          <div class="rb-okaart__body">
            <p class="rb-okaart__meta">do 31 december 2026</p>
            <h3 class="rb-okaart__titel">Oud &amp; Nieuw</h3>
            <p class="rb-okaart__tekst">Beleef samen een unieke afsluiting van het jaar 2026 en luid het jaar 2027 feestelijk in bij 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="/oud-nieuw/">Bekijk Oud &amp; Nieuw</a></p>
          </div>
        </article>
        <article class="rb-okaart">
          <img src="/assets/img/din-vriendinnen-f3b912.webp" alt="Twee glazen rode wijn worden geheven op het terras" width="800" height="533" loading="lazy" decoding="async" />
          <div class="rb-okaart__body">
            <p class="rb-okaart__meta">elke dag 12:00 tot 17:00 uur</p>
            <h3 class="rb-okaart__titel">Vriendinnenlunch</h3>
            <p class="rb-okaart__tekst">Maak een unieke ervaring van uw lunch met onze vriendinnenlunch.</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="/vriendinnenlunch/">Ontdek de vriendinnenlunch</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="Kind aan tafel met het kindermenu van restaurant BØFF" width="800" height="533" loading="lazy" decoding="async" />
          <div class="rb-okaart__body">
            
            <h3 class="rb-okaart__titel">BØFF kindermenu</h3>
            <p class="rb-okaart__tekst">Eten, ontspannen en spelen</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">Bekijk het kindermenu</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="Vorige" 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="Volgende" 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">Zakelijk eten of met een <span class='rb-goud'>groep</span></h2>
        <p class="rb-zak__tekst">Een stijlvol restaurant, een prachtig uitzicht en multifunctionele zalen, de perfecte locatie voor uw zakelijke diner.</p>
      </div>
      <ul class="rb-zak__rij">
        <li class="rb-zkaart">
          <img src="/assets/img/rb-zak-werken-1a47a0.webp" alt="Gast werkt met een laptop aan tafel in restaurant BØFF" width="800" height="533" loading="lazy" decoding="async" />
          <div class="rb-zkaart__body">
            <h3 class="rb-zkaart__naam">Zakenlunch</h3>
            <b class="rb-zkaart__prijs">Lunchbuffet vanaf &euro;&nbsp;19,50</b>
            <p class="rb-zkaart__tekst">In ons restaurant BØFF is het heerlijk vertoeven, de diverse zitjes zijn ideaal voor een borrel of rustig overleg.</p>
          </div>
        </li>
        <li class="rb-zkaart">
          <img src="/assets/img/rb-zak-diner-fa1856.webp" alt="Zakelijke gast aan tafel in restaurant BØFF met een glas witte wijn" width="800" height="533" loading="lazy" decoding="async" />
          <div class="rb-zkaart__body">
            <h3 class="rb-zkaart__naam">Zakendiner</h3>
            <b class="rb-zkaart__prijs">Driegangendiner vanaf &euro;&nbsp;35,-</b>
            <p class="rb-zkaart__tekst">In ons restaurant BØFF is het heerlijk vertoeven, de diverse zitjes zijn ideaal voor een borrel of rustig overleg.</p>
          </div>
        </li>
        <li class="rb-zkaart">
          <img src="/assets/img/rb-plek-binnen-800-f48bf2.webp" alt="Lange eetruimte met leren bankzitjes en de groene tegelwand van BØFF" width="800" height="533" loading="lazy" decoding="async" />
          <div class="rb-zkaart__body">
            <h3 class="rb-zkaart__naam">Privé met een groep</h3>
            <b class="rb-zkaart__prijs">6 tot 130 personen in een eigen zaal</b>
            <p class="rb-zkaart__tekst">Mocht u met een groter gezelschap in een aparte ruimte willen dineren, dan hebben wij achter in ons restaurant een sfeervolle ruimte beschikbaar.</p>
          </div>
        </li>
      </ul>
      <div class="rb-knoppen rb-zak__knoppen">
        <a class="rb-knop" href="/zakelijk-dineren/">Bekijk zakelijk dineren</a>
        <a class="rb-knop rb-knop--ghost" href="mailto:info@parkhotelhorst.nl?subject=Offerteaanvraag%20zakelijke%20lunch%20of%20diner">Offerte aanvragen</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">Goed om te <span class='rb-goud'>weten</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>Openingstijden</h3><table class="rb-tijden"><tbody><tr><th scope="row">Maandag</th><td>07:00 tot 00:00</td></tr><tr><th scope="row">Dinsdag</th><td>07:00 tot 00:00</td></tr><tr><th scope="row">Woensdag</th><td>07:00 tot 00:00</td></tr><tr><th scope="row">Donderdag</th><td>07:00 tot 00:00</td></tr><tr class="rb-goud"><th scope="row">Vrijdag</th><td>07:00 tot 01:00</td></tr><tr class="rb-goud"><th scope="row">Zaterdag</th><td>07:00 tot 01:00</td></tr><tr><th scope="row">Zondag</th><td>07:00 tot 00:00</td></tr></tbody></table><p class="rb-tijden__keuken">Lunchkaart 11:00 tot 17:00 uur<br>Diner 17.00 tot 21.30 uur, daarna tot 22.00 uur de BØFF classics</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>Reserveren</h3><p>online via de knop, of bel voor groepen vanaf 12 personen</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>Dieetwensen</h3><p>onze medewerkers denken graag met u mee</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>Kinderen welkom</h3><p>eigen kindermenu: eten, ontspannen en spelen</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>Terras</h3><p>de volledige kaart wordt buiten geserveerd</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>Bereikbaar</h3><p>aan de rand van Horst bij de Kasteelse Bossen, naast de 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>Adres</h3><p>Restaurant BØFF, Parkhotel Horst, Tienrayseweg 2, 5961 NL Horst<br><a href="tel:+31773976000">+31 (0)77 397 60 00</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>Bel +31 (0)77 397 60 00</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">Veelgestelde vragen</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>Bel +31 (0)77 397 60 00</span></a>
      </div>
      <div class="rb-faq__lijst">
        <details class="rb-faq__item" open>
          <summary class="rb-faq__vraag"><h3>Moet ik reserveren bij 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">Reserveren kan direct online: u kiest datum, tijdstip en gezelschap en ontvangt meteen een bevestiging. Komt u met een groep vanaf 12 personen? Bel ons op <a href='tel:+31773976000'>+31 (0)77 397 60 00</a>.</p>
        </details>
        <details class="rb-faq__item">
          <summary class="rb-faq__vraag"><h3>Kan ik ook alleen koffie drinken of lunchen?</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">Ja. BØFF is dagelijks vanaf 07:00 uur open voor koffie met Limburgse vlaai, en de lunchkaart wordt geserveerd van 11:00 tot 17:00 uur, binnen of op het terras.</p>
        </details>
        <details class="rb-faq__item">
          <summary class="rb-faq__vraag"><h3>Tot hoe laat kan ik dineren?</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">Dineren kan tussen 17.00 en 21.30 uur. Daarna kiest u tot 22.00 uur uit de BØFF classics. Op vrijdag en zaterdag bent u tot 01:00 uur welkom voor een borrel na het diner.</p>
        </details>
        <details class="rb-faq__item">
          <summary class="rb-faq__vraag"><h3>Zijn er vegetarische en vegan gerechten?</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">Ja. Vegetarische en vegan gerechten staan standaard op de kaart, zoals de tartaar van rode biet met krokante geitenkaas, een groenterisotto of vegan kroketten. Heeft u dieetwensen of allergieën? Onze medewerkers adviseren u graag.</p>
        </details>
        <details class="rb-faq__item">
          <summary class="rb-faq__vraag"><h3>Is BØFF geschikt voor kinderen?</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">Ja, BØFF heeft een eigen kindermenu: eten, ontspannen en spelen. <a href="https://www.restaurantboff.nl/upload/files/Kindermenu%20NL.pdf" target="_blank" rel="noopener">Bekijk het kindermenu</a></p>
        </details>
        <details class="rb-faq__item">
          <summary class="rb-faq__vraag"><h3>Kan ik bij BØFF ontbijten zonder te overnachten?</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">Ja, het ontbijtbuffet is ook zonder overnachting mogelijk voor &euro;&nbsp;17,50 p.p. incl. koffie, thee, water en sap. Ma t/m vr 07:00 tot 10:00 uur, za en zo 08:00 tot 11:00 uur. <a href="/ontbijtbuffet/">Bekijk het ontbijtbuffet</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">Wat gasten zeggen op 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.nl/Hotel_Review-g3340802-d1140689-Reviews-Parkhotel_Horst-Horst_Limburg_Province.html" target="_blank" rel="noopener">530 beoordelingen</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">Goed</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.nl/Hotel_Review-g3340802-d1140689-Reviews-Parkhotel_Horst-Horst_Limburg_Province.html" target="_blank" rel="noopener">(530 beoordelingen)</a>
                </p>
              </div>
            </div>
            <p class="ta-paneel__rang">Nr. 1 van de 2 hotels in Horst</p>
            <p class="ta-bron">Beoordelingen op <b>Tripadvisor</b></p>
          </div>
          <div class="ta-deel">
            <div class="ta-deel__rij"><span class="ta-deel__naam">Locatie</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">Kamers</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">Prijs/kwaliteit</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">Hygiëne</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">Slaapkwaliteit</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">Uitstekend!!</p>
            <p class="ta-kaart__tekst">Super hotel. Alles klopte. Op donderdagochtend wel wat hinder van vuilniswagen, wasserijauto en bevoorrading. Maar verder top.</p>
            <p class="ta-bron ta-kaart__bron">Beoordeling op <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 voelde ons zeer welkom</p>
            <p class="ta-kaart__tekst">Het alles was als vanouds.!!!</p>
            <p class="ta-bron ta-kaart__bron">Beoordeling op <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">Aangenaam verblijf</p>
            <p class="ta-kaart__tekst">Prachtig hotel en magnifieke ligging aan het water. Kamer oke en relaxte sfeer in het hotel. Enige nadeel was verkeerslawaai bij geopende ramen. Omgeving met veel natuur en leuke dorpjes nodigt uit tot wandelingen of fietstochtjes. Ontbijt en diner waren oke/goed. Personeel vriendelijk en behulpzaam. Prettig is ook de aanwezigheid van zwembad en wellnessfaciliteiten.</p>
            <p class="ta-kaart__meerregel"><a class="ta-kaart__meer" href="https://www.tripadvisor.nl/Hotel_Review-g3340802-d1140689-Reviews-Parkhotel_Horst-Horst_Limburg_Province.html" target="_blank" rel="noopener">Meer lezen</a></p>
            <p class="ta-bron ta-kaart__bron">Beoordeling op <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">Super ervaring</p>
            <p class="ta-kaart__tekst">Waren terug voor de tigste keer altijd fijn en gezellig verblijf. Vriendelijk personeel uitstekend eten magnifieke ligging aan het water goed te bereiken en genoeg te doen in het hotel en de ongevibg</p>
            <p class="ta-kaart__meerregel"><a class="ta-kaart__meer" href="https://www.tripadvisor.nl/Hotel_Review-g3340802-d1140689-Reviews-Parkhotel_Horst-Horst_Limburg_Province.html" target="_blank" rel="noopener">Meer lezen</a></p>
            <p class="ta-bron ta-kaart__bron">Beoordeling op <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">Alles naar wens , een fijn verblijf</p>
            <p class="ta-kaart__tekst">Prachtig hotel aan het water, mooie kamer met balkon en airco , vriendelijk personeel heerlijk ontbijt en diner, we komen zeker nog terug. Alles was tiptop in orde een dikke 10👍</p>
            <p class="ta-bron ta-kaart__bron">Beoordeling op <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">Wat een geweldige ervaring. Super en dit hotel is een aanrader!</p>
            <p class="ta-kaart__tekst">Wat hebben wij genoten in uw fantastisch hotel! Wij hadden een comfort kamer, 27m2 en voor ons meer dan voldoende ruimte door de efficiënte indeling, superschoon, heerlijke stoeltjes en niet te vergeten de heerlijke en zeer brede bedden en niet te vergeten de ruime badkamer met gescheiden douche en bad. Ook alle lof voor het personeel, bijzonder aardig, bekwaam en behulpzaam! Ontbijt is top en zeer gevarieerd met o.a. heerlijke eiergerechten, incl een zacht gekookt eitje, zacht fruit, pancakes, diverse kwarksoorten. Overigens voor de liefhebber er zijn ook hard gekookte eieren Opvallend bij binnenkomst prachtige gedecoreerde grote en imposante ruimte, met leuke zitjes, alle collectieve voorzieningen, zoals ruimte voor ontbijt, diner, bar al met al efficiënt en functioneel ingedeeld. Tel daarbij op mooi terras met uitzicht op een meertje, het mooie zwembad (enig minpuntje, dat het zwembad pas vanaf 10.00 uur open is). Conclusie super ervaring en wij komen graag nog een keer terug.</p>
            <p class="ta-kaart__meerregel"><a class="ta-kaart__meer" href="https://www.tripadvisor.nl/Hotel_Review-g3340802-d1140689-Reviews-Parkhotel_Horst-Horst_Limburg_Province.html" target="_blank" rel="noopener">Meer lezen</a></p>
            <p class="ta-bron ta-kaart__bron">Beoordeling op <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">Prachtig!</p>
            <p class="ta-kaart__tekst">Geweldig appartement en service! Vriendelijk en gastvrij! Wij komen zeker een keer terug! Roomservice was goed geregeld en het restaurant BOFF smaakvol</p>
            <p class="ta-bron ta-kaart__bron">Beoordeling op <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">Keurig hotel</p>
            <p class="ta-kaart__tekst">Keurig hotel, lekker eten, goed schoon, vriendelijke medewerkers.</p>
            <p class="ta-bron ta-kaart__bron">Beoordeling op <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">Ik verblijf ongeveer eens per maand in dit hotel en elke keer is de service en het personeel altijd van topniveau. Ze zijn altijd erg vriendelijk en altijd bereid te helpen. Geweldig hotel en geweldig personeel.</p>
            <p class="ta-kaart__meerregel"><a class="ta-kaart__meer" href="https://www.tripadvisor.nl/Hotel_Review-g3340802-d1140689-Reviews-Parkhotel_Horst-Horst_Limburg_Province.html" target="_blank" rel="noopener">Meer lezen</a></p>
            <p class="ta-bron ta-kaart__bron">Beoordeling op <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">Wauw!!</p>
            <p class="ta-kaart__tekst">Zeker voor herhaling vatbaar. Fantastische kamer, mooie locatie en heel vriendelijk personeel</p>
            <p class="ta-bron ta-kaart__bron">Beoordeling op <b>Tripadvisor</b></p>
          </article>
        </div>
        <button type="button" class="ta-strook__pijl" data-ta-pijl aria-label="Volgende reviews">&#8250;</button>
      </div>

    </div>
  </section>

    <div class="omhulsel rb-ta__actie"><a class="rb-knop" href="#zc-action-open-widget">Reserveer een tafel</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 gezien vanaf het 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">Blijft u ook slapen?</h2>
      <p class="rb-slot__tekst">Combineer uw bezoek aan BØFF met een overnachting in een van onze kamers en een uitgebreid ontbijtbuffet.</p>
      <div class="rb-knoppen">
        <a class="rb-knop distributor-open" href="https://api.mews.com/distributor/ea3920b8-6b38-436c-ae08-af1d007c3bd6?mewsLanguageCode=nl-NL">Boek uw verblijf</a>
        <a class="rb-knop rb-knop--ghost" href="/arrangement/">Bekijk onze arrangementen</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 (0)77 397 60 00</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="Over deze plek" aria-modal="true" class="rb-pop-overlay" data-sluit-label="Sluiten" data-plekken='{"terras": {"naam": "Het terras", "foto": "/assets/img/rb-plek-terras-d43c6b.webp", "alt": "Het terras van BØFF met parasols en uitzicht over het meer", "teksten": ["Bij mooi weer strijkt u neer op het ruim opgezette terras, met uitzicht over het meer en de Kasteelse Bossen. De volledige menukaart wordt buiten geserveerd, van koffie tot diner.", "Vanaf de loungebanken geniet u met een drankje van het zicht over het water."], "cta": {"label": "Bekijk terras, bar en brasserie", "url": "/terras-bar-brasserie/"}}, "binnen": {"naam": "Binnen", "foto": "/assets/img/rb-plek-binnen-f48bf2.webp", "alt": "Leren bankzitjes bij de groene tegelwand met de BØFF-letters", "teksten": ["Binnen zorgen het eigentijdse interieur en de verschillende zitjes voor een huiselijke sfeer.", ""], "cta": {"label": "Reserveer een tafel", "url": "#zc-action-open-widget"}}, "bar": {"naam": "De bar", "foto": "/assets/img/rb-plek-bar-b47256.webp", "alt": "De groene bar van BØFF met barstoelen en hangende planten", "teksten": ["Aan de bar luidt u het weekend in met een cocktail van de kaart, zoals een Moscow Mule, mojito of gin-tonic. Op de drankenkaart vindt u daarnaast binnen- en buitenlands gedistilleerd en een ruime keuze aan koffies en frisdranken.", "Op vrijdag en zaterdag bent u tot 01:00 uur welkom voor een borrel na het diner."], "cta": {"label": "Bekijk de drankenkaart", "url": "/drankenkaart/"}}}' 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="/" 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">Boek uw verblijf</a>
      </div>
      <div>
        <div class="voet__titel">Navigatie</div>
        <ul class="voet__lijst">
          <li><a href="/hotel/">Hotel</a></li>
          <li><a href="/restaurant-boff/">Restaurant in Horst &#8211; BØFF</a></li>
          <li><a href="/wellness/">Wellness en Faciliteiten</a></li>
          <li><a href="/evenement/">Evenementen</a></li>
          <li><a href="/gebied/">Omgeving</a></li>
        </ul>
      </div>
      <div>
        <div class="voet__titel">Kamers</div>
        <ul class="voet__lijst">
          <li><a href="/kamers/comfort-kamer/">Comfort kamer</a></li>
          <li><a href="/kamers/deluxe-kamer/">Deluxe kamer</a></li>
          <li><a href="/kamers/junior-suite/">Junior Suite</a></li>
          <li><a href="/kamers/suite/">Suite</a></li>
          <li><a href="/kamers/torensuite/">Torensuite</a></li>
          <li><a href="/kamers/appartement/">Appartement</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="/contact/">Contact</a></li>
        <li><a href="/over-ons/">Over ons</a></li>
        <li><a href="/disclaimer/">Disclaimer</a></li>
        <li><a href="/privacy-policy/">Privacy Policy</a></li>
        <li><a href="/sitemap/">Sitemap</a></li>
        <li><a href="/veelgestelde-vragen/">FAQ</a></li>
        <li><a href="/werken-bij-parkhotel/">Vacatures</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.
   Zes 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;
   6  de reviewscore-knop in de bovenbalk (bureaublad): klik opent/sluit het crème
      scorevlak met Google en Tripadvisor; dicht bij klik buiten, Escape, het
      openen van een rubriek of het Menu-vlak, en zodra de kop slank wordt. */
(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);
    sluitScore();
    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);
    sluitScore();
    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 (scoreOpen()) { sluitScore(); scoreKnop.focus(); 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();
    }
  });

  /* ---- 6: de reviewscore-knop
     Het scorevlak staat los van de bovenbalk (die heeft overflow:hidden om in te
     klappen) en wordt bij het openen precies onder de knop gezet. */
  var scoreKnop = document.getElementById('scoreknop'),
      scoreVlak = document.getElementById('scorevlak');
  function scoreOpen() { return !!(scoreVlak && scoreVlak.hasAttribute('data-open')); }
  function zetScorePlek() {
    var k = kop.getBoundingClientRect(), b = scoreKnop.getBoundingClientRect();
    scoreVlak.style.right = Math.max(8, k.right - b.right) + 'px';
    scoreVlak.style.top = (b.bottom - k.top + 7) + 'px';
  }
  function openScore() {
    sluitVlak(true);
    zetScorePlek();
    scoreVlak.setAttribute('data-open', '');
    scoreKnop.setAttribute('aria-expanded', 'true');
  }
  function sluitScore() {
    if (!scoreOpen()) return;
    scoreVlak.removeAttribute('data-open');
    scoreKnop.setAttribute('aria-expanded', 'false');
  }
  if (scoreKnop && scoreVlak) {
    scoreKnop.addEventListener('click', function (e) {
      e.stopPropagation();
      if (scoreOpen()) sluitScore(); else openScore();
    });
    document.addEventListener('click', function (e) {
      if (!e.target.closest || (!e.target.closest('#scorevlak') && !e.target.closest('#scoreknop'))) sluitScore();
    });
    window.addEventListener('resize', function () {
      if (!bureau.matches) sluitScore(); else if (scoreOpen()) zetScorePlek();
    });
  }

  /* ---- 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) sluitScore();
    if (bureau.matches) {
      kop.classList.remove('kopbalk--weg');
      if (y > SLANK + 60) {
        kop.style.marginBottom = marge + 'px';
        kop.classList.add('kopbalk--slank');
        sluitScore();
      } 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="Gratis welkomstcadeau">
  <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>
  Gratis welkomstcadeau</button>

<div class="nb-overlay" id="nb-overlay" role="dialog" aria-modal="true" aria-labelledby="nb-title" aria-hidden="true" data-moment="Moment..." data-ongeldig="Vul een geldig e-mailadres in." data-fout="Het inschrijven lukte even niet. Probeer het zo nog eens of mail naar info@parkhotelhorst.nl.">
  <div class="nb-modal">
    <button class="nb-close" id="nb-close-btn" type="button" aria-label="Sluiten">&#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">Gratis welkomstcadeau bij je verblijf</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>
            Badjas &amp; badhanddoeken</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>
            Fles bubbels op de kamer</li>
        </ul>
        <div class="nb-form">
          <label for="nb-email" class="nb-label">E-mailadres</label>
          <input type="email" id="nb-email" class="nb-input" placeholder="jouw@email.nl" autocomplete="email" />
          <div class="nb-val" aria-hidden="true">
            <label>Laat dit veld leeg<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">Schrijf me in</button>
        </div>
        <p class="nb-disclaimer">Door in te schrijven ga je akkoord met ons <a href="/privacy-policy/">privacybeleid</a>. Je kunt je altijd afmelden.</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">Bedankt voor je inschrijving!</h3>
        <p class="nb-success-text">Check je inbox: we hebben je een bevestigingsmail gestuurd. Na bevestiging ontvang je bij je eerstvolgende verblijf jouw gratis welkomstcadeau.</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-->

</body>
</html>