/* Mat Saleh dekt alleen ASCII — accenttekens vallen per glyph terug op Poppins */
@font-face{font-family:'Mat Saleh';src:url('/fonts/mat-saleh.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
/* Poppins staat hier zelf op de server in plaats van bij Google. Dat stylesheet
   hield het tekenen van de pagina bijna een seconde tegen: de browser moest eerst
   twee vreemde domeinen opzoeken en daar een tweede stylesheet ophalen voordat er
   iets in beeld kwam. Vier gewichten, latijns bereik, samen 30 KB. */
@font-face{font-family:'Poppins';src:url('/fonts/poppins-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('/fonts/poppins-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('/fonts/poppins-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('/fonts/poppins-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}
:root{
  --display:'Mat Saleh','Poppins',system-ui,sans-serif;
  /* Brandbook v1.0 — uitsluitend deze zeven kleuren */
  --goud:#EACF78;    /* Gouden pannenkoek */
  --karamel:#BA8C57; /* Karamelstroop */
  --paper:#F8F5ED;   /* Pannenkoekenbeslag */
  --creme:#F1E1C9;   /* Vanillebeslag */
  --ink:#000000;     /* Pannetjes-Zwart */
  --wit:#FCFCFC;     /* Poedersuiker */
  --grijs:#F3F3F4;   /* Wolkensuiker */
  --ink-zacht:rgba(0,0,0,.66); --lijn:rgba(0,0,0,.12);
  --radius:26px; --radius-s:16px; --pill:100px;
  --schaduw:0 24px 60px -30px rgba(0,0,0,.28);
  --schaduw-s:0 12px 30px -18px rgba(0,0,0,.25);
  --maxw:1180px; --sp:108px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden}
body{font-family:'Poppins',system-ui,sans-serif;color:var(--ink);background:var(--paper);
  line-height:1.68;-webkit-font-smoothing:antialiased;font-size:16.5px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.16;letter-spacing:.01em}
a{text-decoration:none;color:inherit}
/* height:auto hoort hierbij zodra de afmetingen in de HTML staan: anders houdt
   een beeld zijn bestandshoogte aan en rekt het uit */
img{display:block;max-width:100%;height:auto}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 34px}
section.block{padding:var(--sp) 0}
/* sectielabel — zelfde gouden markeerstreep als het accentwoord in de hero,
   zodat het bij het merk hoort in plaats van een los tagje te zijn */
.eyebrow{position:relative;display:inline-block;font-weight:600;font-size:15px;
  color:var(--ink);margin-bottom:22px;line-height:1.4;transform:rotate(-1deg);
  padding:0 3px;z-index:0}
.eyebrow::before{content:"";position:absolute;left:-4px;right:-4px;bottom:-.08em;height:1.18em;
  background:var(--goud);border-radius:5px;z-index:-1;transform:rotate(.6deg)}
.head{max-width:680px;margin-bottom:52px}
.head h2{font-size:clamp(30px,4.4vw,46px);margin-bottom:14px}
.head p{font-size:17.5px;color:var(--ink-zacht)}
.center{margin-left:auto;margin-right:auto;text-align:center}

/* knoppen — karamel vulling, zwarte rand, pill, pijl (voorbeeld Louie) */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:11px;
  font-weight:600;font-size:16px;padding:15px 32px;border-radius:var(--pill);
  border:1.5px solid var(--ink);cursor:pointer;overflow:hidden;isolation:isolate;
  transition:color .3s ease,transform .3s cubic-bezier(.34,1.4,.64,1)}
/* Zelfde opzet als de knop op hun huidige site: een ronde vorm die van onderen
   opkomt en de knop volloopt. Bij ons stroomt er goud doorheen, als beslag. */
.btn::before{content:"";position:absolute;left:-50%;top:100%;width:200%;height:200%;z-index:-1;
  border-radius:50%;transform:translateY(0);
  background:linear-gradient(115deg,#BA8C57 0%,#EACF78 20%,#F1E1C9 36%,#EACF78 54%,
    #BA8C57 72%,#EACF78 90%,#F1E1C9 100%);
  background-size:260% 260%;background-position:0% 50%;
  transition:transform .5s cubic-bezier(.32,.72,.25,1)}
.btn:hover::before{transform:translateY(-64%);animation:beslag 3.2s ease-in-out infinite}
@keyframes beslag{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
/* knoplabels hebben een lange en een korte variant; op de telefoon wisselt hij om
   zodat twee knoppen naast elkaar passen in plaats van onder elkaar */
.btn .kort{display:none}
.btn svg{flex:none;transition:transform .35s cubic-bezier(.34,1.4,.64,1)}
.btn:hover svg{transform:translateX(5px)}

/* primair — reserveren */
.btn-primair{background:var(--karamel);color:var(--wit)}

.btn-primair:hover{color:var(--ink)}
/* tweede variant — menukaart */
.btn-menu{background:var(--goud);color:var(--ink)}

.btn-menu:hover{color:var(--ink)}
/* rustig — secundaire links */
.btn-lijn{background:transparent;color:var(--ink)}



/* nav */
/* de balk schuift weg zodra je naar beneden leest en komt terug zodra je omhoog
   scrollt, zodat je niet helemaal naar boven hoeft voor het menu */
header{position:sticky;top:0;z-index:60;background:rgba(248,245,237,.86);
  backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--lijn);
  transition:transform .32s cubic-bezier(.4,0,.2,1)}
header.weggeschoven{transform:translateY(-104%)}
@media(prefers-reduced-motion:reduce){header{transition:none}}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-top:14px;padding-bottom:14px}
.nav img{height:58px;width:auto}
.nav-links{display:flex;gap:28px;font-size:15px;font-weight:500}
.nav-links a{position:relative;padding:4px 0;color:var(--ink-zacht)}
.nav-links a:hover{color:var(--ink)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--karamel);border-radius:2px;transition:width .25s}
.nav-links a:hover::after{width:100%}
.nav-links .btn{display:none}
.nav .btn{padding:11px 24px;font-size:14.5px}
.nav-toggle{display:none;background:var(--wit);border:1px solid var(--lijn);border-radius:14px;
  width:46px;height:46px;place-items:center;cursor:pointer;color:var(--karamel)}
.nav-toggle span{display:block;width:20px;height:2.2px;border-radius:2px;background:currentColor;
  position:relative;transition:transform .25s,background .2s}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:20px;
  height:2.2px;border-radius:2px;background:currentColor;transition:transform .25s,top .25s}
.nav-toggle span::before{top:-6.5px}
.nav-toggle span::after{top:6.5px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
/* waas achter het opengeklapte menu: de pagina zakt weg zodat het menu vooraan ligt.
   Ligt onder de header (z-index 60), dus de balk en het menu zelf blijven helder. */
.nav-waas{position:fixed;inset:0;z-index:50;background:rgba(16,9,2,.46);
  backdrop-filter:blur(2px) saturate(.92);opacity:0;pointer-events:none;
  transition:opacity .42s ease}
.nav-waas.open{opacity:1;pointer-events:auto}
/* het uitklapmenu bestaat alleen op smallere schermen, de waas dus ook */
@media(min-width:1001px){.nav-waas{display:none}}
/* de reserveermodule van Tebi hangt boven alles heen; die schuift mee weg zodat er
   geen los lichtpunt op de gedimde pagina blijft staan */
/* Tebi zet zijn eigen opacity in de tag zelf, dus hier is voorrang nodig */
body.menu-uit [id^="tebi_rs_"]{opacity:0!important;pointer-events:none!important}

/* reserveerknop in het uitklapmenu: zelfde vorm, kleur en maat als het balkje van
   Tebi rechtsonder (48 hoog, hoekstraal 10), want het opent dezelfde module.
   flex:none omdat het menu een flex-kolom is: zonder dat wordt de knop platgedrukt. */
.nav-links .btn-tebi{background:#FFCC00;color:#000;border:0;border-radius:10px;
  width:100%;height:48px;flex:none;padding:0 18px;font-size:15px;font-weight:600;gap:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.15)}
.btn-tebi::before{display:none}
.btn-tebi:hover{transform:translateY(-1px);color:#000}
.btn-tebi .tebi-merk{font-weight:700;letter-spacing:-.02em;padding-right:12px;
  border-right:1px solid rgba(0,0,0,.22);line-height:1}
.btn-tebi svg{margin-left:auto}

/* rustige opkomst — elk blok schuift een klein stukje omhoog zodra het in beeld komt.
   Bewust klein gehouden: het mag opvallen als beweging, niet als effect. Alleen actief
   als site.js draait (html.js), anders staat alles gewoon zichtbaar. */
.js .opkomt{opacity:0;transform:translateY(14px);
  transition:opacity .72s cubic-bezier(.22,.62,.24,1) var(--vertraging,0s),
             transform .72s cubic-bezier(.22,.62,.24,1) var(--vertraging,0s)}
.js .opkomt.erin{opacity:1;transform:rotate(var(--kantel,0deg))}
@media(prefers-reduced-motion:reduce){.js .opkomt{opacity:1;transform:rotate(var(--kantel,0deg))}}

/* hero */
.hero{position:relative;padding:78px 0 92px;overflow:hidden}
/* zachte wash die naar onderen volledig oplost, zodat de hero naadloos
   overgaat in de rest van de pagina in plaats van hard af te breken */
.hero::before{content:"";position:absolute;inset:-1px 0 0;z-index:-1;
  background:
    radial-gradient(1250px 640px at 80% -5%,rgba(234,207,120,.55),transparent 68%),
    linear-gradient(180deg,rgba(241,225,201,.70) 0%,rgba(241,225,201,.34) 46%,
      rgba(241,225,201,.10) 76%,rgba(241,225,201,0) 100%)}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(40px,5.8vw,66px);margin-bottom:22px}
/* accentwoord alleen door kleur — de markeerstreep is nu voorbehouden aan de sectielabels */
.hero h1 em{font-style:normal;color:var(--karamel);white-space:nowrap}
.hero p.lead{font-size:18.5px;color:var(--ink-zacht);max-width:520px;margin-bottom:32px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px}
.hero-facts{display:flex;gap:26px;flex-wrap:wrap;font-size:14.5px;color:var(--ink-zacht)}
.hero-facts span{display:inline-flex;align-items:center;gap:8px}
.hero-facts svg{flex:none}

.hero-beeld{position:relative}
/* fotostapel — bovenste kaart draait weg, de rest schuift een plek op */
.stapel{position:relative;height:520px}
.kaartje{position:absolute;inset:0;border-radius:34px;overflow:hidden;background:var(--wit);
  border:9px solid var(--wit);box-shadow:var(--schaduw);transform-origin:50% 90%;
  transition:transform .55s cubic-bezier(.4,0,.2,1),opacity .45s ease}
.kaartje img{width:100%;height:100%;object-fit:cover}
.kaartje.p0{transform:rotate(1.6deg);z-index:4}
.kaartje.p1{transform:rotate(-3.4deg) scale(.965);z-index:3}
.kaartje.p2{transform:rotate(4.6deg) scale(.935);z-index:2}
.kaartje.p3{transform:rotate(4.6deg) scale(.935);z-index:1;opacity:0}
.kaartje.weg{transform:translate(-46%,-8%) rotate(-17deg) scale(.92);opacity:0;z-index:5}
/* rechtsboven: linksboven zit de Pluisjes-badge en rechtsonder staat de muis, dus
   dit is de enige hoek waar de knoppen niet achter iets anders verdwijnen */
.blader{position:absolute;right:-16px;top:18px;z-index:8;display:flex;align-items:center;gap:10px}
/* de staafjes hangen onder de knoppen in plaats van ernaast: naast de knoppen liepen
   ze dwars over de Pluisjes-badge aan de andere kant van de kaart heen */
.blader .voortgang{position:absolute;top:calc(100% + 10px);right:0}
.blader button{position:relative;width:48px;height:48px;border-radius:50%;border:1.5px solid var(--ink);
  background:var(--goud);color:var(--ink);display:grid;place-items:center;cursor:pointer;
  box-shadow:var(--schaduw-s);transition:background .25s,color .25s,transform .25s}
.blader button:hover{background:var(--karamel);color:var(--wit);transform:translateY(-2px)}
/* voortgangsstaafjes naast de bladerknoppen: laten zien bij welke foto je bent en
   hoe lang het duurt tot de volgende. Het staafje van nu loopt in vier seconden vol. */
/* het pilletje staat vóór de knoppen, anders loopt het op desktop achter de muis */
.voortgang{order:-1;display:flex;align-items:center;gap:6px;
  background:var(--wit);border:1.5px solid var(--ink);border-radius:var(--pill);
  padding:9px 12px;box-shadow:var(--schaduw-s)}
.voortgang span{position:relative;width:20px;height:4px;border-radius:99px;
  background:rgba(0,0,0,.16);overflow:hidden}
.voortgang span::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;
  background:var(--ink);border-radius:99px}
.voortgang span.klaar::after{width:100%}
.voortgang span.nu::after{width:100%;transition:width var(--wachttijd,4s) linear}
@media(prefers-reduced-motion:reduce){.voortgang{display:none}}
@media(max-width:620px){.voortgang span{width:17px}}
.hero-beeld .muis{position:absolute;right:-26px;bottom:-46px;width:210px;z-index:7;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.25));animation:zwaai 5.5s ease-in-out infinite}
@keyframes zwaai{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(2deg)}}
.badge{position:absolute;left:-22px;top:34px;z-index:7;background:var(--wit);border:1.5px solid var(--ink);border-radius:var(--radius-s);
  padding:13px 19px;box-shadow:var(--schaduw-s);transform:rotate(-3deg);font-size:13.5px;font-weight:600}
.badge b{display:block;font-family:var(--display);font-weight:400;font-size:25px;
  color:var(--karamel);line-height:1.15}

/* marquee — schuine goudband, naadloos doorlopend */
.band-wrap{position:relative;overflow:hidden;padding:44px 0}
.band{background:var(--goud);padding:18px 0;overflow:hidden;white-space:nowrap;
  width:116%;margin-left:-8%;transform:rotate(-2.6deg)}
/* geen gap tussen de twee helften: beide identiek breed, dus -50% loopt naadloos rond */
.band-inner{display:inline-flex;gap:0;align-items:center;animation:schuif 34s linear infinite;
  font-family:var(--display);font-weight:400;font-size:clamp(26px,3.4vw,40px);
  letter-spacing:.03em;text-transform:uppercase;color:var(--wit);line-height:1.25}
.band-inner span{display:inline-flex;align-items:center;gap:40px;padding-right:40px}
.band-inner i{font-family:'Poppins',sans-serif;font-style:normal;font-size:.5em;color:var(--karamel)}
@keyframes schuif{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* beleving-kaarten */
.kaarten{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius);
  overflow:hidden;transition:transform .25s,box-shadow .25s}
.kaart:hover{transform:translateY(-6px);box-shadow:var(--schaduw)}
.kaart img{width:100%;height:230px;object-fit:cover}
.kaart .inhoud{padding:26px 26px 30px}
.kaart h3{font-size:21px;margin-bottom:9px}
.kaart p{font-size:15.5px;color:var(--ink-zacht)}
.kaart .meer{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-weight:600;
  font-size:14.5px;color:var(--karamel)}
.kaart:hover .meer svg{transform:translateX(4px)}
.kaart .meer svg{transition:transform .2s}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split.omgekeerd .beeld{order:-1}
.split h2{font-size:clamp(28px,4vw,42px);margin-bottom:18px}
.split p{color:var(--ink-zacht);margin-bottom:16px}
.split .beeld{position:relative}
.split .beeld img{border-radius:var(--radius);box-shadow:var(--schaduw);width:100%;
  height:470px;object-fit:cover}
/* het spelletje op de homepage: uitgelicht op een eigen gekleurd vlak met een
   lichte helling, zoals de andere vlakken op de site. Links een stil loopje uit
   een echte pot, midden de uitleg, rechts de lijst van deze maand. */
.spelvlak{position:relative;padding:52px 46px;display:grid;
  grid-template-columns:minmax(0,250px) minmax(0,1fr) minmax(0,244px);
  gap:42px;align-items:center;isolation:isolate}
.spelvlak::before{content:"";position:absolute;inset:-10px -6px;z-index:-1;
  background:var(--goud);border-radius:var(--vlak-vorm,44px 84px 30px 66px);
  transform:rotate(var(--vlak-draai,-1.05deg))}
.spelvlak>*{position:relative;z-index:1}
/* Pluis leunt in de hoek van het vlak, half buiten de rand, zoals bij de andere
   gekleurde vlakken op de site */
/* Pluis leunt linksboven op de rand van het vlak, half erboven (Louie 26-07).
   Achter de inhoud, dus hij loopt nooit dwars over de kaarten heen. */
.spelvlak-muis{position:absolute;z-index:0;width:186px;left:-14px;top:-112px;
  pointer-events:none;transform-origin:50% 100%;animation:wiebel 6.4s ease-in-out infinite}
.spelvlak-lijst{align-self:center}
.spelvlak h2{font-size:clamp(26px,2.7vw,36px);margin-bottom:14px}
.spelvlak p{color:rgba(0,0,0,.72);margin-bottom:14px}
.spelvlak .btn-primair{background:var(--ink);color:var(--goud)}
.spelvlak .btn-primair:hover{color:var(--ink)}
/* de markeerstreep achter het labeltje is zelf goud: op een goud vlak wordt dat wit */
.spelvlak .eyebrow::before{background:var(--wit)}
.spelfilm{max-width:250px;margin:0 auto;border-radius:var(--radius);overflow:hidden;
  border:6px solid var(--wit);background:var(--creme);box-shadow:var(--schaduw)}
.spelfilm video{display:block;width:100%;aspect-ratio:560/644;object-fit:cover;background:var(--creme)}
@media(max-width:1040px){
  .spelvlak{grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:34px}
  /* over de volle breedte rekken de regels te ver uit, dus de lijst houdt maat */
  .spelvlak-lijst{grid-column:1 / -1}
  .spelvlak-lijst .scorebord{max-width:430px}
  .spelvlak-muis{width:156px;left:-8px;top:-94px}
}
@media(max-width:720px){
  /* op een telefoon staat alles onder elkaar en is er boven het vlak weinig lucht,
     dus Pluis komt lager en kleiner op de rand te staan */
  .spelvlak{grid-template-columns:1fr;padding:52px 24px 40px;gap:28px;text-align:center}
  .spelvlak-lijst{grid-column:auto}
  .spelvlak .scorebord{text-align:left}
  .spelvlak-muis{width:118px;left:4px;top:-62px}
}

/* scorebord — dezelfde lijst op de homepage en op de spelpagina */
.scorebord{background:var(--wit);border:2px solid var(--ink);border-radius:var(--radius-s);
  padding:17px 19px;box-shadow:var(--schaduw-s)}
/* de kop erft de displayletter van de site; dat font is ASCII-only, dus de maand
   en het apparaat staan op een eigen regel in de gewone letter */
.scorebord h3{font-size:21px;margin-bottom:3px}
.scorebord .waarop{font-size:13.5px;color:var(--ink-zacht);margin:0 0 13px}
.ranglijst{list-style:none;counter-reset:plek;display:flex;flex-direction:column;gap:6px;
  margin:0;padding:0;text-align:left}
.ranglijst li{counter-increment:plek;display:flex;align-items:center;gap:11px;
  background:var(--paper);border:1.5px solid var(--lijn);border-radius:var(--pill);
  padding:6px 15px 6px 7px;font-size:15px}
/* de eerste drie plekken krijgen een medaille: goud, zilver (Wolkensuiker) en
   brons (Karamelstroop). Het lichte ringetje binnenin maakt er een muntje van. */
.ranglijst li::before{content:counter(plek);flex:none;display:grid;place-items:center;
  width:27px;height:27px;border-radius:50%;border:1.5px solid var(--ink);
  background:var(--wit);color:var(--ink);font-size:12.5px;font-weight:700;
  box-shadow:inset 0 0 0 2px rgba(252,252,252,.7)}
.ranglijst li:nth-child(1)::before{background:var(--goud)}
.ranglijst li:nth-child(2)::before{background:var(--grijs)}
.ranglijst li:nth-child(3)::before{background:var(--karamel);color:var(--wit)}
.ranglijst li:nth-child(n+4)::before{border-color:var(--lijn);color:var(--ink-zacht);
  font-weight:600;box-shadow:none}
.ranglijst li:nth-child(1){background:var(--creme);border-color:var(--ink)}
.ranglijst li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:500}
.ranglijst li b{font-weight:700;font-variant-numeric:tabular-nums}
.scorebord .leeg{font-size:13.5px;color:var(--ink-zacht);margin:0}
.scorebord .heen{display:inline-block;margin-top:13px;font-size:14px;font-weight:600;
  color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;
  text-underline-offset:3px}
/* het apparaat als gekleurd labeltje boven de lijst: goud voor de telefoon,
   karamel voor de computer. Zo zie je in een oogopslag dat het twee lijsten zijn
   en niet een lijst die twee keer staat. */
.soortchip{display:inline-flex;align-items:center;gap:7px;margin-bottom:9px;
  padding:5px 13px 5px 10px;border:1.5px solid var(--ink);border-radius:var(--pill);
  font-size:13px;font-weight:600;line-height:1.3}
.soortchip svg{flex:none}
.soort-telefoon{background:var(--goud);color:var(--ink)}
.soort-computer{background:var(--karamel);color:var(--wit)}
.scorebord.op-telefoon{border-color:var(--ink);box-shadow:0 12px 30px -18px rgba(186,140,87,.5)}

/* op de spelpagina staan de twee lijsten naast elkaar. Geen tekst ertussen: de
   gekleurde labeltjes zeggen al welke lijst welke is. */
.scorebord-duo{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:660px;
  margin:26px auto 0;align-items:start}
@media(max-width:620px){.scorebord-duo{grid-template-columns:1fr;gap:14px}}

.lijst{list-style:none;margin:22px 0 30px}
.lijst li{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px;font-size:16px}
.lijst svg{flex:none;margin-top:5px}

/* menu */
/* speelse blokvorm, overgenomen van de gedrukte menukaart van Pluis: de hoeken zijn
   per hoek anders afgerond, waardoor een blok met de hand getekend oogt in plaats
   van als een net vierkant */

/* Het gekleurde vlak achter een sectie staat een tikje scheef, de inhoud niet.
   Zo krijg je de speelse, met de hand geplakte vorm van de gedrukte menukaart
   zonder dat de tekst meekantelt en slechter leesbaar wordt. Het vlak is een
   los laagje achter de inhoud, vandaar het pseudo-element. */
.menu-blok{position:relative;padding:56px;display:grid;
  grid-template-columns:1fr 1.05fr;gap:52px;align-items:center;isolation:isolate}
.menu-blok::before{content:"";position:absolute;inset:-10px -6px;z-index:-1;
  background:var(--creme);border-radius:var(--vlak-vorm,84px 22px 48px 62px);
  transform:rotate(var(--vlak-draai,-1.15deg))}
.menu-blok img{border-radius:var(--radius-s);box-shadow:var(--schaduw);width:100%}

/* sfeerfilm — breedte op 848px begrensd, want dat is de bronresolutie */
.film{position:relative;max-width:848px;margin:0 auto 60px;border-radius:var(--radius);
  overflow:hidden;border:6px solid var(--wit);background:var(--ink);box-shadow:var(--schaduw)}
.film video{display:block;width:100%;aspect-ratio:848/480;object-fit:cover;background:var(--ink)}
/* de stille lus staat bovenop tot iemand op afspelen tikt; dan neemt de hele film
   het over. Twee losse elementen, want de lus mag niet met geluid verder lopen. */
.film .film-vol{display:none}
.film.speelt .film-lus{display:none}
.film.speelt .film-vol{display:block}
/* de knop ligt linksonder, zodat het beeld zelf vrij blijft; het hele vlak is klikbaar */
.film-knop{position:absolute;inset:0;width:100%;border:0;cursor:pointer;color:var(--wit);
  font-family:inherit;display:flex;align-items:flex-end;justify-content:flex-start;gap:16px;
  padding:26px;background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,0) 46%);transition:opacity .3s}
.film-cirkel{flex:none;width:62px;height:62px;border-radius:50%;background:var(--goud);display:grid;
  place-items:center;padding-left:4px;box-shadow:0 14px 34px -12px rgba(0,0,0,.7);transition:transform .22s}
.film-knop:hover .film-cirkel{transform:scale(1.09)}
.film-label{font-size:16px;font-weight:600;text-shadow:0 2px 12px rgba(0,0,0,.6);padding-bottom:16px}
.film-label b{font-weight:600;opacity:.72}
.film.speelt .film-knop{opacity:0;pointer-events:none}

/* boog van beelden — kaartjes langs een cirkelboog, schuift mee met het scrollen */
/* De kaarten liggen op één punt en worden alleen door de rotatie langs de boog verdeeld.
   Straal R bepaalt de tussenruimte: afstand = R * sin(hoek). */
.boog{position:relative;overflow:hidden;padding:26px 0 0;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;
  --R:1875px; --hoek:6deg; --kaartb:186px; --kaarth:252px}
.boog-rij{position:relative;height:calc(var(--kaarth) + var(--zakruimte,265px));will-change:transform;
  /* draait om hetzelfde middelpunt als de kaarten: samen vormen ze een echt wiel */
  transform-origin:50% var(--R);transform:rotate(var(--draai,0deg))}
.boog-kaart{position:absolute;top:0;left:50%;margin-left:calc(var(--kaartb) / -2);
  width:var(--kaartb);height:var(--kaarth);
  border-radius:24px;overflow:hidden;background:var(--wit);border:6px solid var(--wit);
  box-shadow:var(--schaduw);transform-origin:50% var(--R);
  transform:rotate(calc(var(--i) * var(--hoek)));transition:filter .3s}
.boog-kaart img{width:100%;height:100%;object-fit:cover}
.boog-kaart:hover{filter:saturate(1.08)}
.boog-onder{position:relative;z-index:2;max-width:640px;margin:-165px auto 0;text-align:center}
.boog-onder p{font-size:18px;color:var(--ink-zacht)}

/* cijfers onder de boog */
.cijfers{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:820px;
  margin:56px auto 0;text-align:center}
.cijfer b{display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(34px,4.6vw,52px);line-height:1.1;color:var(--karamel)}
.cijfer span{display:block;margin-top:6px;font-size:14.5px;color:var(--ink-zacht)}
.cijfer .sterren{display:inline-flex;gap:3px;margin-top:8px}

/* gastenboek */
.score{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:18px}
.score b{font-family:var(--display);font-weight:400;font-size:clamp(52px,6.4vw,78px);
  line-height:1;color:var(--karamel)}
.sterren{display:inline-flex;gap:5px;align-items:center}
.score .uit{display:block;font-size:15px;color:var(--ink-zacht);text-align:center}
.score-rechts{display:flex;flex-direction:column;gap:8px;align-items:center}
.briefjes{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:48px}
.briefje{background:var(--wit);border:2.5px solid var(--ink);border-radius:46px 12px 20px 34px;padding:26px 24px 22px;
  display:flex;flex-direction:column;gap:14px;transition:transform .3s cubic-bezier(.34,1.4,.64,1)}
.briefje:nth-child(4n+1){--kantel:-1.2deg;transform:rotate(var(--kantel))}
.briefje:nth-child(4n+3){--kantel:-1.2deg;transform:rotate(var(--kantel))}
.briefje:nth-child(4n+2){--kantel:1.1deg;transform:rotate(var(--kantel))}
.briefje:nth-child(4n){--kantel:1.1deg;transform:rotate(var(--kantel))}
.briefje:hover,.js .briefje.opkomt.erin:hover{transform:rotate(0) translateY(-6px)}
/* elke review-kaart een eigen hoekritme, anders ogen vier identieke blokken alsnog machinaal */
.briefje:nth-child(4n+2){border-radius:14px 44px 30px 16px}
.briefje:nth-child(4n+3){border-radius:30px 18px 48px 14px}
.briefje:nth-child(4n){border-radius:16px 32px 12px 46px}

.briefje blockquote{font-size:15.5px;line-height:1.6}
.briefje footer{margin-top:auto;display:flex;align-items:center;justify-content:space-between;
  gap:10px;font-size:13px;color:var(--ink-zacht);background:none;border:0;padding:0}
.briefje footer b{font-weight:600;color:var(--ink)}
.briefje .bron{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}

/* genoemd in — perslogo's in grijstint, zodat ze bewijs leveren zonder het merk te overstemmen */
.pers{padding-top:0}
.pers-label{text-align:center;font-size:12.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-zacht);margin-bottom:26px}
.pers-rij{display:flex;align-items:center;justify-content:center;
  gap:clamp(30px,6vw,72px);flex-wrap:wrap}
.pers-rij a{display:inline-flex;align-items:center;filter:grayscale(1);opacity:.48;
  transition:filter .3s ease,opacity .3s ease,transform .3s cubic-bezier(.34,1.4,.64,1)}
.pers-rij a:hover{filter:grayscale(0);opacity:1;transform:translateY(-2px)}
.pers-rij img{height:36px;width:auto}
/* het ED-merk is een vierkant, dat oogt bij gelijke hoogte zwaarder dan een woordmerk */
.pers-rij img[src$="eindhovens-dagblad.svg"]{height:42px}

/* socials */
.socials{background:var(--ink);color:var(--paper);border-radius:38px;padding:62px 0 66px;overflow:hidden}
.socials .wrap{position:relative}
.socials h2{color:var(--wit);font-size:clamp(28px,4vw,42px)}
.socials .head p{color:rgba(252,252,252,.72)}

.ig-rij{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.ig{position:relative;border-radius:22px;overflow:hidden;background:#000000;aspect-ratio:4/5;
  transition:transform .25s}
.ig:hover{transform:translateY(-6px)}
.ig img{width:100%;height:100%;object-fit:cover;opacity:.94}
.ig .play{position:absolute;inset:0;display:grid;place-items:center}
.ig .play span{width:56px;height:56px;border-radius:50%;background:rgba(252,252,252,.92);
  display:grid;place-items:center;box-shadow:0 10px 24px -10px rgba(0,0,0,.6);transition:transform .2s}
.ig:hover .play span{transform:scale(1.1)}
.ig .stats{position:absolute;left:0;right:0;bottom:0;padding:16px;display:flex;gap:16px;
  font-size:13.5px;font-weight:600;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.86),transparent)}
.ig .stats span{display:inline-flex;align-items:center;gap:6px}
.socials-cta{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:40px}
/* deze sectie is bewust zwart-wit; alleen de beelden houden hun kleur */
.socials .btn-primair{background:transparent;border-color:var(--wit);color:var(--wit);min-width:184px}
.socials .btn-primair::before{background:var(--wit);background-size:auto}
.socials .btn-primair:hover::before{animation:none}
.socials .btn-primair:hover{color:var(--ink)}
.socials .btn-primair:hover svg{transform:none}
/* hier past een omlijnd labeltje beter dan de markeerstreep */
.socials .eyebrow{color:var(--wit);font-size:13.5px;transform:none;
  border:2px solid rgba(252,252,252,.5);border-radius:var(--pill);padding:6px 16px}
.socials .eyebrow::before{display:none}

/* praktisch */
.praktisch{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.info{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius);padding:38px 36px}
.info h3{font-size:20px;margin-bottom:20px;display:flex;align-items:center;gap:10px}
.tijden{list-style:none}
.tijden li{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px dashed var(--lijn);
  font-size:15.5px}
.tijden li:last-child{border-bottom:0}
.tijden li b{font-weight:600}
.contactrij{display:flex;flex-direction:column;gap:14px;font-size:16px}
.contactrij a{display:inline-flex;align-items:center;gap:11px;color:var(--ink)}
.contactrij a:hover{color:var(--karamel)}

/* kaartje boven de adresgegevens — Leaflet in de huisstijl.
   De tegels krijgen een warm filter zodat de kaart in de creme-lijn past
   in plaats van als een vreemd blauwgroen vlak in het blok te hangen. */
.kaart-doos{position:relative;height:230px;margin-bottom:26px;border-radius:var(--radius-s);
  overflow:hidden;border:1px solid var(--lijn);background:var(--creme)}
.kaart-doos .leaflet-container{height:100%;width:100%;background:var(--creme);
  font-family:'Poppins',system-ui,sans-serif}
.kaart-doos .leaflet-tile-pane{filter:sepia(.34) saturate(.82) hue-rotate(-8deg) brightness(1.04)}
.kaart-doos .leaflet-control-container .leaflet-top,
.kaart-doos .leaflet-control-container .leaflet-bottom.leaflet-left{display:none}
.kaart-doos .leaflet-control-attribution{background:rgba(252,252,252,.82);
  font-size:10.5px;padding:1px 7px;border-radius:8px 0 0 0}
.kaart-doos .leaflet-control-attribution a{color:var(--karamel)}
.kaart-zoom{position:absolute;top:12px;right:12px;z-index:500;display:flex;flex-direction:column;gap:7px}
.kaart-zoom button{width:38px;height:38px;border:2px solid var(--ink);border-radius:12px;
  background:var(--wit);color:var(--ink);font:600 21px/1 'Poppins',system-ui,sans-serif;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--schaduw-s);transition:background .16s ease,color .16s ease}
.kaart-zoom button:hover{background:var(--goud)}
.kaart-zoom button:focus-visible{outline:3px solid var(--karamel);outline-offset:2px}
.kaart-zoom button[disabled]{opacity:.42;cursor:default;background:var(--wit)}
.kaart-speld{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--goud);border:2.5px solid var(--ink);box-shadow:var(--schaduw-s)}
.kaart-speld img{width:30px;height:30px}
.kaart-uit{display:grid;place-items:center;height:100%;padding:22px;text-align:center;
  font-size:14.5px;color:var(--ink-zacht)}

/* slot-cta */
.slot{position:relative;text-align:center;padding:96px 0 104px;isolation:isolate}
.slot::before{content:"";position:absolute;inset:-8px 0;z-index:-1;
  background:var(--goud);border-radius:var(--vlak-vorm,34px 92px 26px 70px);
  transform:rotate(var(--vlak-draai,-.95deg))}
.slot h2{font-family:var(--display);font-weight:400;font-size:clamp(34px,5.2vw,56px);
  letter-spacing:.01em;margin-bottom:16px;max-width:720px;margin-left:auto;margin-right:auto}
.slot p{max-width:540px;margin:0 auto 32px;color:rgba(0,0,0,.7);font-size:17.5px}
/* twee keer Pluis, links en rechts half buiten het blok, allebei in beweging */
.slot .slot-muis{position:absolute;width:270px;pointer-events:none}
.slot .slot-muis.links{left:-64px;bottom:-46px;transform-origin:50% 92%;
  animation:bak 5.2s ease-in-out infinite}
.slot .slot-muis.rechts{right:-52px;top:-78px;width:250px;transform-origin:50% 8%;
  animation:wiebel 6.4s ease-in-out infinite}
@keyframes bak{
  0%,100%{transform:rotate(-5deg) translateY(0)}
  38%{transform:rotate(3deg) translateY(-16px)}
  62%{transform:rotate(-2deg) translateY(-6px)}}
@keyframes wiebel{
  0%,100%{transform:rotate(4deg) translateY(0)}
  45%{transform:rotate(-3deg) translateY(-13px)}
  70%{transform:rotate(1deg) translateY(-4px)}}
.slot .btn-primair{background:var(--ink);color:var(--goud)}

.slot .btn-primair:hover{color:var(--ink)}

/* mail-opt-in */
.optin{position:relative;padding:56px 46px;
  display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;isolation:isolate}
.optin::before{content:"";position:absolute;inset:-10px -6px;z-index:-1;
  background:var(--creme);border-radius:var(--vlak-vorm,90px 24px 70px 30px);
  transform:rotate(var(--vlak-draai,1.25deg))}


.optin h2{font-size:clamp(28px,3.8vw,42px);margin-bottom:12px}
.optin p{color:var(--ink-zacht);max-width:430px}
.optin>div:first-child{position:relative;z-index:1;align-self:center}
.optin form{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.optin input{flex:1 1 240px;min-width:0;background:var(--wit);border:2.5px solid var(--ink);
  border-radius:var(--pill);padding:15px 26px;font:inherit;font-size:16px;color:var(--ink)}
.optin input::placeholder{color:rgba(0,0,0,.42)}
.optin input:focus{outline:3px solid var(--goud);outline-offset:2px}
.optin .klein{margin-top:14px;font-size:13.5px;color:var(--ink-zacht)}
/* Pluis vult de rechterkolom en staat op de bodem — groot, maar heel in beeld */
.optin{align-items:end}
.optin-beeld{position:relative;justify-self:center;align-self:end;margin-bottom:-26px;
  pointer-events:none}
.optin-beeld img{width:min(400px,100%);animation:deinen 7s ease-in-out infinite;
  transform-origin:50% 100%}
@keyframes deinen{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(1.5deg)}}
.optin h2{font-size:clamp(26px,3.6vw,40px)}

/* footer */
footer{background:var(--wit);border-top:1px solid var(--lijn);padding:64px 0 30px;margin-top:var(--sp)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:36px;margin-bottom:44px}
.foot-grid img{height:52px;width:auto;margin-bottom:16px}
/* het merkteken is vierkant, dus op dezelfde hoogte oogt het kleiner dan het
   woordmerk dat hier eerst stond — vandaar iets ruimer */
.foot-grid img.foot-merk{height:76px}
.foot-grid h3{font-family:var(--display);font-weight:400;font-size:21px;letter-spacing:.01em;
  color:var(--karamel);margin-bottom:14px}
.foot-grid ul{list-style:none}
.foot-grid li{margin-bottom:9px;font-size:15px;color:var(--ink-zacht)}
.foot-grid a:hover{color:var(--karamel)}
/* contactregels in de voet krijgen hetzelfde icoon als op de contactpagina */
.foot-contact a{display:inline-flex;align-items:center;gap:9px}
.foot-contact svg{flex:none;color:var(--karamel)}
.foot-onder{border-top:1px solid var(--lijn);padding-top:22px;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-zacht)}


@media(max-width:1000px){
  :root{--sp:74px}
  .hero-grid,.split,.menu-blok,.praktisch,.optin{grid-template-columns:1fr;gap:40px}
  .split.omgekeerd .beeld{order:0}
  .kaarten{grid-template-columns:1fr;gap:20px}
  .briefjes{grid-template-columns:repeat(2,1fr)}
  .ig-rij{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:repeat(2,1fr);gap:30px}
  .nav-toggle{display:grid}
  .nav .btn{display:none}
  /* iets meer lucht rond het logo op smallere schermen */
  .nav{padding-top:12px;padding-bottom:12px}
  .nav img{height:50px}
  /* het menu vouwt open in plaats van te verspringen: de hoogte komt uit --menuh,
     die site.js meet, zodat de beweging bij elke pagina precies uitkomt */
  .nav-links{position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;
    background:var(--paper);border-bottom:1px solid transparent;padding:0 34px;
    display:flex;overflow:hidden;max-height:0;opacity:0;pointer-events:none;
    transition:max-height .52s cubic-bezier(.33,.55,.25,1),padding .52s cubic-bezier(.33,.55,.25,1),
      opacity .4s ease,border-color .3s ease}
  .nav-links.open{max-height:var(--menuh,540px);opacity:1;pointer-events:auto;
    padding:8px 34px 22px;border-bottom-color:var(--lijn);box-shadow:var(--schaduw-s)}
  /* de regels komen er één voor één achteraan in, dat leest rustiger dan alles tegelijk */
  .nav-links>*{opacity:0;transform:translateY(-9px);
    transition:opacity .32s ease,transform .44s cubic-bezier(.33,.55,.25,1)}
  .nav-links.open>*{opacity:1;transform:none}
  .nav-links.open>*:nth-child(1){transition-delay:.06s}
  .nav-links.open>*:nth-child(2){transition-delay:.10s}
  .nav-links.open>*:nth-child(3){transition-delay:.14s}
  .nav-links.open>*:nth-child(4){transition-delay:.18s}
  .nav-links.open>*:nth-child(5){transition-delay:.22s}
  .nav-links.open>*:nth-child(6){transition-delay:.26s}
  .nav-links.open>*:nth-child(7){transition-delay:.30s}
  .nav-links.open>*:nth-child(8){transition-delay:.34s}
  .nav-links a{padding:14px 0;border-bottom:1px solid var(--lijn);font-size:17px;color:var(--ink)}
  .nav-links a::after{display:none}
  .nav-links .btn{display:inline-flex;margin-top:18px;border-bottom:0}
  .stapel{height:400px}
  .split .beeld img{height:340px}
  .menu-blok{padding:36px 26px}
  .optin{padding:44px 30px}
  /* Pluis hangt op de hoek van het vlak, net als bij het slot-blok: geen eigen
     kolom, de tekst loopt gewoon door tot de rand. */
  .optin>div:first-child{padding-right:0}
  .optin-beeld{position:absolute;top:-34px;right:-16px;z-index:2;
    justify-self:auto;align-self:auto;margin-bottom:0}
  .optin-beeld img{width:118px}
  .hero-beeld .muis{width:150px;right:-8px;bottom:-34px}
  .slot .slot-muis.links{width:180px;left:-30px}
  .slot .slot-muis.rechts{width:165px;right:-24px;top:-56px}
  .boog{--R:1450px; --kaartb:150px; --kaarth:206px; --zakruimte:210px}
  .boog-onder{margin-top:-130px}
}

/* vaste reserveerknop op telefoon — altijd binnen bereik.
   Staat uit zolang de Tebi-module rechtsonder hangt: twee zwevende knoppen
   op dezelfde plek is er een te veel. */

/* telefoon — knoppen en lange woorden netjes houden */
@media(max-width:620px){
  /* alleen de zijkanten smaller — de verkorte padding-notatie wiste hier de
     verticale ruimte van de navigatiebalk, waardoor het logo de randen raakte */
  .wrap{padding-left:20px;padding-right:20px}
  /* Tebi zet een vaste balk van 48px onderaan het scherm. Met de oude ruimte
     landden Reserveren en Menukaart er precies achter bij binnenkomst op een
     telefoon. Iets strakker boven de knoppen houdt ze vrij. */
  .hero{padding:26px 0 60px}
  .hero p.lead{margin-bottom:22px}
  .optin{padding:34px 22px;gap:26px}
  .optin>div:first-child{padding-right:0}
  .optin-beeld{top:-26px;right:-10px}
  .optin-beeld img{width:96px}
  .optin .klein{font-size:12.5px}
  .score{gap:12px}
  .score b{font-size:56px}
  .score-rechts{align-items:center}
  .score .uit{text-align:center;font-size:14px}
  :root{--sp:60px}
  .briefjes,.cijfers{grid-template-columns:1fr}
  .ig-rij{gap:12px}
  .ig{border-radius:16px}
  .foot-grid{grid-template-columns:1fr;gap:26px}
  .socials-cta,.optin form{display:flex;flex-direction:column;align-items:stretch}
  .socials-cta .btn,.optin form .btn,.optin input{width:100%}
  /* reserveren en menukaart naast elkaar, elk de helft van de breedte */
  .hero-cta{display:flex;flex-direction:row;gap:10px;align-items:stretch}
  .hero-cta .btn{flex:1 1 0;min-width:0;width:auto;padding:14px 12px;gap:7px}
  .btn .lang{display:none}
  .btn .kort{display:inline}
  /* in een kolom wordt flex-basis de HOOGTE — vandaar een veel te hoog invoerveld */
  .optin input{flex:none}
  /* op desktop houdt nowrap "onvergetelijke beleving" op één regel en mag de kolom
     daarvoor meegroeien; op een telefoon is dat woordpaar breder dan het scherm en
     duwde het de hele hero voorbij de rand. Hier dus wél afbreken, plus min-width:0
     zodat een lang woord de kolom nooit meer kan oprekken */
  .hero h1 em{white-space:normal}
  .hero-grid>*{min-width:0}
  .btn{font-size:15px;padding:14px 22px}
  .socials{border-radius:26px;padding:46px 0 50px}
  .socials .head p{max-width:26ch;margin-left:auto;margin-right:auto}
  .ig .stats{display:none}          /* handle past niet in een smalle tegel */
  .slot{border-radius:26px;padding:64px 0 72px}
  .slot .slot-muis.links{width:132px;left:-22px;bottom:-22px}
  .slot .slot-muis.rechts{width:120px;right:-16px;top:-40px}
  .optin{border-radius:26px}
  .stapel{height:330px}
  .kaartje{border-width:7px;border-radius:26px}
  .blader{right:0;top:-12px}
  .boog{padding-top:14px}
  .boog{--R:1190px; --kaartb:118px; --kaarth:162px; --zakruimte:150px}
  .boog-onder{margin-top:-88px}
  .boog-kaart{border-width:5px;border-radius:18px}
  .film{border-width:5px;border-radius:18px;margin-bottom:40px}
  .film-knop{padding:16px;gap:12px}
  .film-cirkel{width:52px;height:52px}
  .film-label{font-size:14.5px;padding-bottom:12px}
  .band-inner{font-size:24px}
  .praktisch .info{padding:30px 24px}
  .menu-blok{padding:30px 22px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ── bouwstenen voor de subpagina's ────────────────────────────── */

/* paginakop — vaste opening van elke subpagina */
.paginakop{position:relative;padding:70px 0 58px;overflow:hidden;text-align:center}
.paginakop::before{content:"";position:absolute;inset:-1px 0 0;z-index:-1;
  background:
    radial-gradient(1000px 480px at 50% -10%,rgba(234,207,120,.5),transparent 70%),
    linear-gradient(180deg,rgba(241,225,201,.66) 0%,rgba(241,225,201,.30) 50%,
      rgba(241,225,201,0) 100%)}
.paginakop h1{font-size:clamp(36px,5.2vw,60px);margin-bottom:16px}
.paginakop p{font-size:18px;color:var(--ink-zacht);max-width:600px;margin:0 auto}
.paginakop .btn{margin-top:30px}
.paginakop .muisje{position:absolute;right:4%;bottom:-18px;width:150px;opacity:.95;
  animation:zwaai 6s ease-in-out infinite}

/* lopende tekst (privacy, lange uitleg) */
.tekst{max-width:760px;margin:0 auto}
.tekst h2{font-size:clamp(24px,3.2vw,34px);margin:44px 0 14px}
.tekst h3{font-size:21px;margin:30px 0 10px}
.tekst p,.tekst li{color:var(--ink-zacht);margin-bottom:14px}
.tekst ul,.tekst ol{margin:0 0 18px 22px}
.tekst a{color:var(--karamel);text-decoration:underline;text-underline-offset:3px}

/* vragenlijst */
.vragen{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.vraag{background:var(--wit);border:2.5px solid var(--ink);border-radius:22px;overflow:hidden}
.vraag summary{list-style:none;cursor:pointer;padding:20px 26px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;font-weight:600;font-size:17px}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary::after{content:"";flex:none;width:13px;height:13px;border-right:2.6px solid var(--karamel);
  border-bottom:2.6px solid var(--karamel);transform:rotate(45deg) translate(-3px,-3px);
  transition:transform .25s}
.vraag[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.vraag .antwoord{padding:0 26px 22px;color:var(--ink-zacht)}
.vraag .antwoord p{margin-bottom:12px}
.vraag .antwoord p:last-child{margin-bottom:0}

/* fotomuur */
.muur{column-count:3;column-gap:16px}
.muur figure{break-inside:avoid;margin-bottom:16px;border-radius:var(--radius-s);overflow:hidden;
  background:var(--wit)}
.muur img{width:100%;height:auto;transition:transform .4s}
.muur figure:hover img{transform:scale(1.04)}

/* eenvoudige informatiekaarten */
.blokken{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.blok{background:var(--wit);border:2.5px solid var(--ink);border-radius:24px;padding:28px 26px}
.blok h3{font-size:21px;margin-bottom:10px}
.blok p{font-size:15.5px;color:var(--ink-zacht)}
.blok .prijs{display:block;margin-top:14px;font-family:var(--display);font-size:26px;
  color:var(--karamel)}

/* agenda-items */
.agenda-lijst{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.agenda-item{display:flex;gap:22px;align-items:flex-start;background:var(--wit);
  border:2.5px solid var(--ink);border-radius:22px;padding:22px 26px}
.agenda-item .wanneer{flex:none;width:96px;text-align:center;font-family:var(--display);
  color:var(--karamel);line-height:1.1}
.agenda-item .wanneer b{display:block;font-size:30px;font-weight:400}
.agenda-item .wanneer span{font-size:14px}
.agenda-item h3{font-size:19px;margin-bottom:6px}
.agenda-item p{font-size:15.5px;color:var(--ink-zacht)}

/* formulier */
.formulier{display:grid;gap:16px;max-width:620px}
.formulier label{display:block;font-size:14.5px;font-weight:600;margin-bottom:7px}
.formulier input,.formulier select,.formulier textarea{width:100%;background:var(--wit);
  border:2.5px solid var(--ink);border-radius:20px;padding:14px 20px;font:inherit;font-size:16px;
  color:var(--ink)}
.formulier textarea{min-height:130px;resize:vertical}
.formulier input:focus,.formulier select:focus,.formulier textarea:focus{outline:3px solid var(--goud);
  outline-offset:2px}
.formulier .rij{display:grid;grid-template-columns:1fr 1fr;gap:16px}

@media(max-width:1000px){
  .muur{column-count:2}
  .paginakop .muisje{width:110px;right:2%}
}
@media(max-width:620px){
  .muur{column-count:1}
  .formulier .rij{grid-template-columns:1fr}
  .agenda-item{flex-direction:column;gap:12px}
  .agenda-item .wanneer{width:auto;text-align:left;display:flex;align-items:baseline;gap:8px}
  .paginakop{padding:52px 0 44px}
  .paginakop .muisje{display:none}
}

.blok .prijs small{display:block;margin-top:2px;font-family:'Poppins',sans-serif;font-size:14px;
  font-weight:500;color:var(--ink-zacht)}

.foot-onder a{color:var(--karamel);text-decoration:underline;text-underline-offset:3px}
.foot-onder a:hover{color:var(--ink)}

.boog-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:28px}

/* menukaart als klikbaar beeld */
/* Winkeltje: vrijstaande productfoto's op een zachte kaart. De beelden hebben
   allemaal een andere hoogte, dus een vaste vakhoogte houdt de rij rustig. */
.winkel-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.winkel-item{margin:0;background:#fbf7f1;border-radius:var(--radius-s);
  padding:22px 18px 16px;text-align:center;box-shadow:var(--schaduw)}
.winkel-item img{width:100%;height:210px;object-fit:contain;display:block}
.winkel-item figcaption{margin-top:12px;font-weight:600;font-size:15.5px}
.winkel-noot{margin-top:22px;text-align:center;color:var(--ink-zacht);font-size:15px}
@media(max-width:900px){.winkel-raster{grid-template-columns:repeat(2,1fr);gap:14px}
  .winkel-item img{height:170px}}
@media(max-width:520px){.winkel-item{padding:16px 12px 12px}.winkel-item img{height:140px}}
/* De losse tafelkaartjes van Pluis: twaalf A6-kaartjes liggend. Drie naast
   elkaar leest prettig, op een telefoon twee zodat je ze nog kunt lezen. */
.kaartjes-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.kaartjes-raster{grid-template-columns:repeat(2,1fr);gap:14px}}
/* Twaalf kaartjes onder elkaar maakt hiervan op een telefoon een eindeloze rol.
   Ze blijven dus ook op klein scherm twee naast elkaar: je overziet in een
   oogopslag wat er is, en tikken vergroot het kaartje toch. */
@media(max-width:520px){
  .kaartjes-raster{grid-template-columns:repeat(2,1fr);gap:10px}
  .kaartjes-raster .kaart-beeld{border-width:3px}
  .kaartjes-raster .kaart-beeld span{font-size:10px;padding:5px 9px;bottom:8px;gap:4px}
  .kaartjes-raster .kaart-beeld span svg{width:11px;height:11px}
}
.kaart-beeld{position:relative;display:block;border-radius:var(--radius-s);overflow:hidden;
  box-shadow:var(--schaduw);border:5px solid var(--wit);background:var(--wit)}
.kaart-beeld img{width:100%;transition:transform .4s}
.kaart-beeld:hover img{transform:scale(1.03)}
.kaart-beeld span{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:7px;
  background:var(--ink);color:var(--goud);font-size:12.5px;font-weight:600;
  padding:8px 16px;border-radius:var(--pill);white-space:nowrap;opacity:0;transition:opacity .25s}
.kaart-beeld span svg{flex:none}
.kaart-beeld:hover span{opacity:1}
@media(max-width:620px){
  .kaart-beeld span{opacity:1;font-size:11.5px;padding:7px 13px}
  .boog-cta{flex-direction:column;align-items:stretch}
}

/* lightbox — kaarten bekijken zonder de pagina te verlaten */
/* De kaart opent gecentreerd en past eerst helemaal in beeld; knijpen zoomt
   alleen de kaart, niet de pagina eronder. Vandaar touch-action:none — de
   gebaren worden in site.js zelf afgehandeld. */
.lichtbak{position:fixed;inset:0;z-index:200;display:none;background:rgba(0,0,0,.9);
  overflow:hidden;touch-action:none;overscroll-behavior:contain}
.lichtbak.open{display:block}
.lichtbak-doek{position:absolute;inset:0;overflow:hidden}
/* max-width:none is nodig: de globale img-regel kromp de kaart al vóór de
   schaalberekening, waardoor hij dubbel verkleind werd. De opmaakmaat moet
   hier de echte pixelmaat zijn, zodat het rekenwerk in site.js klopt. */
.lichtbak img{position:absolute;left:0;top:0;transform-origin:0 0;max-width:none;
  border-radius:12px;background:var(--wit);will-change:transform;
  -webkit-user-select:none;user-select:none;-webkit-user-drag:none;
  -webkit-touch-callout:none}
.lichtbak-sluit,.lichtbak-zoom{position:fixed;top:14px;z-index:201;height:44px;padding:0 18px;
  display:inline-flex;align-items:center;gap:8px;border:2.5px solid var(--goud);border-radius:var(--pill);
  background:var(--ink);color:var(--goud);font:inherit;font-size:14.5px;font-weight:600;cursor:pointer}
.lichtbak-sluit{right:14px}
.lichtbak-zoom{right:118px}
.lichtbak-hint{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:201;
  background:var(--ink);color:var(--goud);font-size:12.5px;font-weight:600;padding:8px 15px;
  border-radius:var(--pill)}
body.vast{overflow:hidden}
@media(max-width:620px){
  .lichtbak-zoom{right:auto;left:14px}
  .lichtbak-sluit,.lichtbak-zoom{height:40px;padding:0 15px;font-size:13.5px}
}

.tijden-noot{margin-top:18px;padding-top:16px;border-top:1px dashed var(--lijn);
  font-size:14px;color:var(--ink-zacht)}
.tijden-noot a{color:var(--karamel);text-decoration:underline;text-underline-offset:3px}
.tijden-noot a:hover{color:var(--ink)}
/* De keuken sluit een uur eerder dan het restaurant. Gasten liepen na achten nog
   binnen voor een pannenkoek, dus dit moet opvallen en niet wegzakken in de noot. */
.keuken-noot{display:flex;gap:10px;align-items:flex-start;margin-top:18px;
  padding:13px 15px;border-radius:14px;background:rgba(234,207,120,.30);
  border:1px solid rgba(186,140,87,.30);font-size:15px;color:var(--ink)}
.keuken-noot svg{flex:none;margin-top:2px}
.keuken-noot b{white-space:nowrap}

/* telefoonknop naast de reserveerknop */
.nav-acties{display:flex;align-items:center;gap:10px}
.btn-telefoon{aspect-ratio:1/1;width:47px;height:47px;padding:0;flex:none}
.btn-telefoon svg{margin:0}
.btn-telefoon:hover svg{transform:none}
/* Op de telefoon blijft bellen zichtbaar naast het menu-knopje; de reserveerknop
   gaat weg omdat de Tebi-balk rechtsonder die rol al heeft. */
@media(max-width:1000px){
  .nav-acties{margin-left:auto;gap:8px}
  .nav-acties .btn-primair{display:none}
  /* heft de algemene regel .nav .btn{display:none} op, die alle knoppen in de
     balk wegzet zodra het hamburgermenu verschijnt */
  .nav .nav-acties .btn-telefoon{display:inline-flex;width:44px;height:44px}
}

/* cijfers in de social-sectie */
.social-cijfers{margin-top:44px}
.socials .cijfer b{color:var(--goud)}
.socials .cijfer span{color:rgba(252,252,252,.72)}
.ig .stats{justify-content:space-between}
.ig .stats .bron{opacity:.85}

/* ── kinderfeestjes: de arrangementkaarten ──────────────────────────────
   Elke kaart is zelf een gekleurd vlak met handgeplakte hoeken en een lichte
   helling, dezelfde taal als de vlakken op de homepage. De prijs zit in een wit
   kaartje middenin en niet onderaan: dat is waar een ouder als eerste naar zoekt. */
.feestjes{display:grid;grid-template-columns:repeat(auto-fit,minmax(292px,1fr));
  gap:74px 26px;align-items:stretch;margin-top:84px}
.feestje{position:relative;display:flex;flex-direction:column;padding:30px 28px;
  border:2.5px solid var(--ink);background:var(--wit);
  border-radius:46px 14px 32px 20px;--kantel:-1.1deg;transform:rotate(var(--kantel));
  transition:transform .3s cubic-bezier(.34,1.4,.64,1)}
.feestje:nth-child(2){--kantel:1deg;border-radius:16px 44px 18px 36px}
.feestje:nth-child(3){--kantel:-.75deg;border-radius:32px 20px 48px 14px}
.feestje:hover,.js .feestje.opkomt.erin:hover{transform:rotate(0) translateY(-6px)}
.feestje.goud{background:var(--goud)}
.feestje.creme{background:var(--creme)}
/* De kaarten delen de rijen van het raster, zodat titel, prijs en lijst bij alle
   drie op dezelfde hoogte beginnen. Naast elkaar zijn ze dan te vergelijken;
   zonder dit zakt de prijs per kaart een stukje verder weg. */
/* Alleen zodra de kaarten naast elkaar staan (vanaf twee kolommen, 678px). Onder
   elkaar zou het gedeelde raster juist gaten trekken in de kortere kaarten. */
@supports (grid-template-rows:subgrid){
  @media(min-width:678px){
    .feestjes{grid-template-rows:repeat(6,auto)}
    /* row-gap terug naar nul: een subgrid erft anders de 74px van het raster */
    .feestje{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:0}
    /* kaarten zonder prijskaartje hebben een rij minder te verdelen */
    .feestjes.zonder-prijs{grid-template-rows:repeat(5,auto)}
    .feestjes.zonder-prijs .feestje{grid-row:span 5}
  }
}

/* Pluis leunt over de bovenrand van de kaart, per kaart een andere pose */
.feestje-muis{position:absolute;z-index:2;width:132px;right:-14px;top:-70px;
  pointer-events:none;transform-origin:50% 100%;animation:wiebel 6.4s ease-in-out infinite}

.feestje .soort{display:inline-block;align-self:flex-start;font-size:13px;font-weight:600;
  background:var(--wit);border:1.5px solid var(--ink);border-radius:var(--pill);
  padding:5px 14px;margin-bottom:15px;transform:rotate(-1.4deg)}
.feestje.wit .soort{background:var(--creme)}
.feestje h3{font-size:23px;margin-bottom:10px;padding-right:88px}
.feestje>p{font-size:15.5px;color:var(--ink-zacht)}

/* prijskaartje — wit vlak met zwarte rand, zoals het badgetje in de hero */
.prijsvak{margin:22px 0 24px;background:var(--wit);border:2.5px solid var(--ink);
  border-radius:28px 12px 24px 12px;padding:16px 20px 15px;
  display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;box-shadow:var(--schaduw-s)}
.prijsvak .bedrag{font-family:var(--display);font-weight:400;line-height:1;
  font-size:clamp(34px,4vw,42px);letter-spacing:.01em}
/* de euro zit niet in Mat Saleh, dus die zetten we bewust in Poppins ernaast */
.prijsvak .munt{font-family:'Poppins',sans-serif;font-size:21px;font-weight:600;
  color:var(--karamel);margin-right:3px}
.prijsvak .per{font-size:14.5px;font-weight:600;color:var(--ink-zacht)}
.prijsvak .duur{flex-basis:100%;display:inline-flex;align-items:center;gap:8px;
  margin-top:11px;padding-top:11px;border-top:1px dashed var(--lijn);
  font-size:14px;color:var(--ink-zacht)}

.feestje .inbegrepen{display:block;font-size:12.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;margin-bottom:12px}
.feestje .lijst{margin:0 0 26px}
.feestje .lijst li{font-size:15.5px;margin-bottom:10px}
/* op goud en creme is een karamel vinkje te zacht — daar wint zwart */
.feestje .lijst svg{stroke:var(--ink)}
.feestje .btn{margin-top:auto;align-self:flex-start}
.feestje .btn-primair{background:var(--ink);color:var(--goud)}
.feestje .btn-primair:hover{color:var(--ink)}

@media(max-width:900px){
  .feestjes{gap:66px 22px;margin-top:76px}
  .feestje h3{padding-right:76px}
  .feestje-muis{width:112px;top:-58px}
}
@media(max-width:620px){
  .feestje{padding:26px 22px}
  .feestje h3{font-size:21px;padding-right:70px}
  .feestje-muis{width:98px;top:-50px;right:-8px}
  .prijsvak{padding:14px 17px 13px}
}

/* ── agenda: de rijen die er altijd staan ───────────────────────────────
   Dezelfde handgeplakte vlakken als de feestjes-kaarten. Het moment staat
   als los kaartje voorop, zodat je de rij scant op "wanneer" en pas daarna
   leest wat het is. */
.agenda-lijst{max-width:900px;gap:24px}
.agenda-item{align-items:flex-start;gap:26px;padding:26px 30px;
  border-radius:46px 16px 34px 20px;--kantel:-.7deg;transform:rotate(var(--kantel));
  transition:transform .3s cubic-bezier(.34,1.4,.64,1)}
.agenda-item:nth-child(2n){--kantel:.7deg;border-radius:16px 44px 20px 36px}
.agenda-item:nth-child(3n){border-radius:34px 20px 48px 14px}
.agenda-item:hover,.js .agenda-item.opkomt.erin:hover{transform:rotate(0) translateY(-5px)}
.agenda-item.goud{background:var(--goud)}
.agenda-item.creme{background:var(--creme)}
.agenda-item .wanneer{width:auto;min-width:114px;padding:13px 15px;
  background:var(--wit);border:2.5px solid var(--ink);border-radius:26px 10px 20px 12px;
  box-shadow:var(--schaduw-s);transform:rotate(-2.2deg)}
.agenda-item .wanneer b{font-size:31px}
.agenda-item .wanneer span{display:block;margin-top:3px;font-family:'Poppins',sans-serif;
  font-size:12.5px;font-weight:600;line-height:1.3;color:var(--ink-zacht)}
.agenda-tekst{flex:1 1 auto;min-width:0}
.agenda-item .meer{display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-weight:600;font-size:15px;color:var(--ink)}
.agenda-item:hover .meer svg{transform:translateX(4px)}
.agenda-item .meer svg{transition:transform .2s}
/* Pluis staat binnen het vlak, niet eroverheen: de rijen liggen te dicht op
   elkaar om hem te laten overhangen */
.agenda-muis{flex:none;width:96px;align-self:center;transform-origin:50% 100%;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.2));animation:wiebel 6.4s ease-in-out infinite}
@media(max-width:760px){
  .agenda-muis{width:76px}
  .agenda-item{padding:24px 24px;gap:18px}
}
@media(max-width:620px){
  .agenda-muis{display:none}
  .agenda-item .wanneer{display:inline-flex;align-items:baseline;gap:9px;width:auto;
    min-width:0;text-align:left}
  .agenda-item .wanneer span{margin-top:0}
}

/* ── contact: het berichtenblok ─────────────────────────────────────────
   Zonder foto ernaast, maar op een eigen scheef vlak met handgeplakte
   hoeken. De witte velden komen daar vanzelf op uit. */
.bericht-vlak{position:relative;padding:56px 50px;display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:48px;
  align-items:start;isolation:isolate}
.bericht-vlak::before{content:"";position:absolute;inset:-10px -6px;z-index:-1;
  background:var(--creme);border-radius:var(--vlak-vorm,86px 26px 58px 34px);
  transform:rotate(var(--vlak-draai,-1.1deg))}
.bericht-vlak>*{position:relative;z-index:1}
.bericht-tekst h2{font-size:clamp(30px,4.2vw,44px);margin-bottom:14px}
.bericht-tekst p{color:var(--ink-zacht);margin-bottom:16px}
.bericht-let-op{font-size:15px;padding:16px 18px;background:var(--wit);
  border:2.5px solid var(--ink);border-radius:24px 10px 20px 12px}
.bericht-let-op a{color:var(--karamel);text-decoration:underline;text-underline-offset:3px}
.bericht-let-op a:hover{color:var(--ink)}
.bericht-muis{width:158px;margin-top:30px;transform-origin:50% 100%;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.2));animation:wiebel 6.4s ease-in-out infinite}
.bericht-vlak .formulier{max-width:none}

@media(max-width:900px){
  .bericht-vlak{grid-template-columns:1fr;gap:34px;padding:44px 34px}
  .bericht-muis{position:absolute;right:8px;top:-6px;width:104px;margin:0}
  /* alleen de kop wijkt voor de muis; de tekst eronder mag de volle breedte */
  .bericht-tekst h2{padding-right:112px}
}
@media(max-width:620px){
  .bericht-vlak{padding:36px 24px}
  .bericht-muis{width:84px;right:0}
  .bericht-tekst h2{padding-right:90px}
}

/* de cadeaubon zelf is een liggend ontwerp: niet bijsnijden zoals een sfeerfoto */
.split .beeld img.bon-beeld{height:auto;object-fit:contain;border-radius:var(--radius-s)}
/* op de bonpagina staan de spelregels naast de tekst in plaats van een formulier */
.bericht-vlak>.lijst{margin:0;align-self:center}

/* bevestiging op de plek van een verzonden formulier */
.formulier-dank{display:grid;gap:6px;background:var(--wit);border:2.5px solid var(--ink);
  border-radius:var(--radius-s);padding:22px 26px;margin-top:26px}
.formulier-dank strong{font-family:var(--display);font-weight:400;font-size:21px}
.formulier-dank span{font-size:15px;color:var(--ink-zacht)}

/* zichtbare focus voor wie met het toetsenbord door de site gaat */
a:focus-visible,button:focus-visible,.btn:focus-visible{outline:3px solid var(--karamel);
  outline-offset:3px;border-radius:inherit}

/* de balk is plakkerig: zonder deze regel landt een anker onder de balk */
html{scroll-padding-top:100px}

/* ---------------------------------------------------------------- cookies
   Een crememkaartje op een cremekleurige pagina zie je niet: de melding viel
   letterlijk weg tegen de achtergrond. Daarom is hij nu donker. Hij blokkeert
   de site niet, maar hij is wel het eerste waar je oog naartoe gaat. Beide
   knoppen zijn even groot, want weigeren moet net zo makkelijk zijn als ja. */
.cookiebalk{position:fixed;left:22px;bottom:22px;z-index:80;max-width:440px;
  background:var(--ink);color:var(--paper);border-radius:var(--radius);
  box-shadow:0 30px 70px -24px rgba(0,0,0,.6);padding:26px 28px 24px;
  transform:translateY(16px) scale(.985);opacity:0;
  transition:opacity .42s ease,transform .55s cubic-bezier(.33,.55,.25,1)}
.cookiebalk[hidden]{display:none}
.cookiebalk.zichtbaar{transform:none;opacity:1}
.cookiebalk p{font-size:14.5px;line-height:1.62;margin:0 0 20px;
  color:rgba(248,245,237,.78)}
.cookiebalk p strong{color:var(--paper);display:block;margin-bottom:6px;
  font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:.01em}
.cookiebalk p a{color:var(--goud);text-decoration:underline;text-underline-offset:3px}
.cookiebalk-knoppen{display:flex;gap:10px;flex-wrap:wrap}
.cookiebalk .btn{flex:1 1 0;font-size:15px;padding:13px 20px;min-width:132px;
  border-color:transparent}
.cookiebalk .btn-primair{background:var(--goud);color:var(--ink)}
/* de tweede knop is even groot en even leesbaar, alleen rustiger van kleur */
.cookiebalk .btn:not(.btn-primair){background:transparent;color:var(--paper);
  border-color:rgba(248,245,237,.42)}
.cookiebalk .btn:not(.btn-primair):hover{color:var(--ink)}

@media (max-width:640px){
  .cookiebalk{left:12px;right:12px;bottom:12px;max-width:none;padding:22px 22px 20px}
  .cookiebalk .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .cookiebalk{transition:none}
}

/* ---- De kaart als tekst (prijslijst naast de gefotografeerde kaarten) ----
   Staat er voor gasten die op een telefoon geen zin hebben om op een foto in te
   zoomen, en zorgt er meteen voor dat zoekmachines en AI kunnen lezen wat we
   verkopen en voor hoeveel. Bewust zichtbaar, niet verstopt. */
.prijs-raster{display:grid;grid-template-columns:repeat(2,1fr);gap:34px 48px}
@media(max-width:820px){.prijs-raster{grid-template-columns:1fr;gap:28px}}
.prijs-sectie h3{font-family:var(--display);font-size:clamp(21px,2.4vw,26px);
  margin:0 0 4px;padding-bottom:10px;border-bottom:2px solid var(--goud)}
.prijs-intro{color:var(--ink-zacht);font-size:14px;margin:8px 0 0}
.prijslijst{list-style:none;margin:14px 0 0;padding:0}
.prijslijst li{display:flex;justify-content:space-between;align-items:baseline;
  gap:18px;padding:9px 0;border-bottom:1px dashed var(--lijn)}
.prijslijst li:last-child{border-bottom:0}
.prijs-naam{display:block;font-weight:600;line-height:1.35}
.prijs-toelichting{display:block;color:var(--ink-zacht);font-size:13.5px;
  line-height:1.5;margin-top:2px}
.prijs-bedrag{flex:none;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--karamel);white-space:nowrap}
.kaart-voetnoten{list-style:none;margin:36px 0 0;padding:20px 24px;
  background:var(--creme);border-radius:var(--radius-s);color:var(--ink-zacht);
  font-size:14px;line-height:1.6}
.kaart-voetnoten li+li{margin-top:6px}
/* Springmenu: 145 regels is op een telefoon ruim dertig schermen scrollen. */
.kaart-spring{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 34px}
.kaart-spring a{display:inline-block;padding:7px 14px;border-radius:var(--pill);
  background:var(--grijs);border:1px solid var(--lijn);font-size:13.5px;
  font-weight:600;text-decoration:none;color:var(--ink);line-height:1.2}
.kaart-spring a:hover{background:var(--goud);border-color:var(--goud)}
.prijs-sectie{scroll-margin-top:96px}

/* ── Taalkiezer ────────────────────────────────────────────────────────────
   Staat naast de telefoon- en reserveerknop. Bewust een lijstje echte links:
   zoekmachines moeten de andere taalversies kunnen volgen en zonder
   JavaScript blijft hij bruikbaar (dan staat de lijst gewoon open). */
.taalkiezer{position:relative;display:flex;align-items:center}
.taalknop{display:inline-flex;align-items:center;gap:7px;height:47px;padding:0 15px;
  border:1.5px solid var(--lijn);border-radius:999px;background:transparent;
  font-family:inherit;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer;
  line-height:1;transition:border-color .18s,background .18s}
.taalknop:hover{border-color:var(--karamel);background:rgba(186,140,87,.08)}
.taalknop svg{opacity:.75}
.taallijst{position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:172px;
  padding:7px;border-radius:16px;background:var(--wit,#FCFCFC);
  border:1px solid var(--lijn);box-shadow:0 18px 40px rgba(0,0,0,.13)}
.taallijst[hidden]{display:none}
.taallijst a{display:block;padding:10px 13px;border-radius:10px;font-size:15px;
  color:var(--ink);text-decoration:none}
.taallijst a:hover{background:rgba(234,207,120,.30)}
.taallijst a[aria-current]{font-weight:700;background:rgba(234,207,120,.45)}
.js .taalkiezer .taallijst{display:none}
.js .taalkiezer .taallijst:not([hidden]){display:block}

@media (max-width:620px){
  /* op een telefoon alleen de wereldbol; de taalcode past er niet naast */
  .taalknop span{display:none}
  .taalknop{padding:0;width:47px;justify-content:center}
}

/* --- Uitgelicht evenement -------------------------------------------------
   Eén vaste plek op de homepage voor de eerstvolgende actie, direct onder het
   menublok. Bewust een omlijnde kaart en geen gekleurd vlak: het moet los van de
   pagina staan, als een aanplakbiljet, en niet de menusectie erboven herhalen.
   De zegel draagt de datum, zodat het blok bij een volgend evenement alleen
   andere tekst hoeft te krijgen en niet een andere vorm. */
.uitgelicht{position:relative;display:grid;grid-template-columns:1fr 1.04fr;gap:46px;
  align-items:stretch;padding:30px;background:var(--wit);border:2.5px solid var(--ink);
  border-radius:var(--radius);box-shadow:var(--schaduw)}
/* de foto loopt van boven tot onder mee met de kaart: dat maakt er een affiche
   van in plaats van een plaatje met tekst ernaast */
.uitgelicht-beeld{position:relative;display:block;height:100%;min-height:340px;
  border-radius:var(--radius-s);overflow:hidden}
.uitgelicht-tekst{align-self:center}
.uitgelicht-beeld img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.22,.62,.24,1)}
.uitgelicht-beeld:hover img{transform:scale(1.035)}
@media(prefers-reduced-motion:reduce){.uitgelicht-beeld img{transition:none}
  .uitgelicht-beeld:hover img{transform:none}}
.datumzegel{position:absolute;left:18px;top:18px;width:84px;height:84px;display:grid;
  place-content:center;text-align:center;border-radius:50%;background:var(--goud);
  border:2.5px solid var(--ink);font-family:var(--display);line-height:1;
  transform:rotate(-7deg);box-shadow:0 10px 20px -10px rgba(0,0,0,.5)}
.datumzegel b{display:block;font-size:32px;font-weight:400}
.datumzegel span{font-size:15px}
.uitgelicht-tekst h2{font-size:clamp(26px,3.4vw,38px);margin:10px 0 14px}
.uitgelicht-tekst p{color:var(--ink-zacht);margin-bottom:20px}
.uitgelicht-feiten{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.uitgelicht-feiten li{display:inline-flex;align-items:center;gap:9px;padding:8px 15px;
  font-size:15px;font-weight:500;background:var(--creme);border-radius:var(--pill)}
.uitgelicht-feiten svg{flex:none}
.uitgelicht-knoppen{display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:1000px){
  .uitgelicht{grid-template-columns:1fr;gap:26px;padding:20px}
  .uitgelicht-beeld{min-height:0}
  .uitgelicht-beeld img{height:auto;aspect-ratio:16/10}
}
@media(max-width:620px){
  .uitgelicht{padding:15px;border-radius:var(--radius-s)}
  .datumzegel{width:70px;height:70px;left:12px;top:12px}
  .datumzegel b{font-size:27px}
  .datumzegel span{font-size:13.5px}
  .uitgelicht-knoppen{width:100%}
  .uitgelicht-knoppen .btn{flex:1 1 100%}
}