/* Mej. Janssen — conceptontwerp.
   Palet is gemeten uit hun eigen zaal en logo: lambriseringsgroen #2b3827, het
   kaarslichtgoud #be823e uit de lijsten, en de bone wand daarboven. Dat goud is op
   18-09-2026 op verzoek van Tim vervangen door een tweede groen (#7f9b63); de meting
   hierboven blijft staan omdat ze beschrijft waar het palet vandaan komt.

   Het rood is er op 17-09-2026 uit. Eerst was het bordeaux, op 14-09 op verzoek van Tim
   ossenbloed geworden, en drie dagen later vroeg hij om "een kleur groen om zo een geheel te
   krijgen met iets meer goud tinten, geen rood meer".

   Om te voorkomen dat de pagina daarmee één lange groene strook wordt, staan er nu drie
   lichte vlakken tegenover twee donkere: bone, warme bone en het nieuwe bleke blad #e4e9dd,
   met lambrisering en inkt als de donkere. Mosgroen #44573c neemt de rol van het ossenbloed
   over in koppen, links en knoppen (6,9:1 op het vel). Goud is de enige warme kleur die
   overblijft en draagt daarom het reserveerblok: één warm hoogtepunt, precies op de plek waar
   de bezoeker iets moet doen. */

/* Lettertypen staan op de eigen server (sinds 23-09-2026), niet meer bij Google Fonts:
   geen IP-adres naar Google, geen extra verbinding voor het eerste beeld. Alleen de subsets
   latin en latin-ext; Nederlands, Engels en Duits hebben niet meer nodig. */
@font-face{font-family:'Caveat';font-style:normal;font-weight:500 600;font-display:swap;src:url("fonts/caveat-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Caveat';font-style:normal;font-weight:500 600;font-display:swap;src:url("fonts/caveat-normal-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Serif Text';font-style:italic;font-weight:400;font-display:swap;src:url("fonts/dm-serif-text-italic-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Serif Text';font-style:italic;font-weight:400;font-display:swap;src:url("fonts/dm-serif-text-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Serif Text';font-style:normal;font-weight:400;font-display:swap;src:url("fonts/dm-serif-text-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Serif Text';font-style:normal;font-weight:400;font-display:swap;src:url("fonts/dm-serif-text-normal-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:300 600;font-display:swap;src:url("fonts/manrope-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:300 600;font-display:swap;src:url("fonts/manrope-normal-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}


:root{
  --vel:      #f4efe4;   /* bone, de warme wand boven de lambrisering */
  --vel-diep: #ebe3d3;
  --inkt:     #1f2a22;   /* donkergroen-zwart, de lambrisering */
  --groen:    #2b3827;
  --mos:      #44573c;   /* mosgroen — neemt sinds 17-09 de rol van het ossenbloed over in
                            koppen, links en knoppen. 6,9:1 op het vel. */
  --blad:     #e4e9dd;   /* bleek blad — de derde lichte band, zodat licht niet altijd beige is */
  /* Tim, 17-09 20:51 per WhatsApp: "Kan je de kleur goud aanpassen naar een andere
     groen." Het goud is dus een tweede groen geworden. Dat is geen tegenspraak met
     zijn mail van diezelfde middag: daar vroeg hij groen mét goudtinten in plaats van
     het rood, en dat was al doorgevoerd; dit is de stap daarna.
     De namen zijn meeveranderd. Een variabele die --olijf heet en groen bevat is een
     val voor wie hier later iets aanpast.
     Elke tint is gekozen op het contrast dat het goud had, niet op het oog:
       olijf        4,79:1 op inkt  (goud had 4,57) — versiering, geen letters
       olijf-licht  6,66:1 op inkt, 5,54:1 op groen (goud had 6,00 / 4,99)
       olijf-diep   5,72:1 op vel,  5,14:1 op vel-diep (goud had 5,14 / 4,62) */
  --olijf:     #7f9b63;
  --olijf-licht:#9bb681;
  --olijf-diep: #456634;
  --zacht:    #5c5446;   /* 6,5:1 op het vel — was #6d6455 en dat zakte op vel-diep onder de norm */
  --lijn:     #d9d0bd;
  --rond:     12px;   /* subtiele afronding op beeld */
  --display:  "DM Serif Text", Georgia, "Times New Roman", serif;
  --tekst:    "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand:     "Caveat", cursive;   /* de eyebrows — zelfde letter als bij Queen Tarzi */
  --kop-h:    132px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--kop-h)}
body{
  margin:0;background:var(--vel);color:var(--inkt);
  font:300 17px/1.7 var(--tekst);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:.005em}
h2{font-size:clamp(28px,3.4vw,44px);line-height:1.2;margin:0 0 22px}
h3{font-size:20px;margin:0 0 10px}
p{margin:0 0 18px}

.overslaan{position:absolute;left:-9999px;top:0;background:var(--inkt);color:var(--vel);padding:10px 16px;z-index:99}
.overslaan:focus{left:8px;top:8px}

/* Een kapitalenlabel boven elke sectie is het duidelijkste teken dat een pagina uit een
   sjabloon komt. Een geschreven regel past bovendien bij het handschrift in hun logo.
   Zelfde aanpak als bij Queen Tarzi en Prevail. */
.kopje{
  font-family:var(--hand);font-size:22px;line-height:1;letter-spacing:0;
  text-transform:none;color:var(--mos);font-weight:500;margin:0 0 8px;
}
.kopje.licht{color:var(--olijf-licht)}

/* ---------- OMROEPBALK ----------
   Boven de kop, en scrollt gewoon mee weg: wat er deze week te doen is. Goud, omdat dat
   op de rest van de site al de kleur is van kleine aandachtsdingen. Het spoor bevat twee
   identieke sets en schuift precies de helft op; daarna begint hij weer bij de eerste,
   dus er is nergens een sprong te zien. */
/* Tim, 24-09: het lichte olijfgroen in de omroepbalk, het reserveerblok en de golf ervoor
   wordt beige. */
.omroep{background:var(--vel-diep);color:#2e2109;overflow:hidden;position:relative;
  font-size:13px;letter-spacing:.02em}
.omroep-spoor{display:flex;width:max-content;animation:omroepen 48s linear infinite}
.omroep-set{display:flex;align-items:center;flex:0 0 auto;padding:9px 0}
.omroep-set b{font-weight:600}
.omroep-set span{padding:0 clamp(16px,2.6vw,30px);white-space:nowrap;
  display:inline-flex;align-items:center;gap:clamp(16px,2.6vw,30px)}
.omroep-set span::after{content:"";width:4px;height:4px;border-radius:50%;
  background:rgba(46,33,9,.4);flex:0 0 auto}
.omroep:hover .omroep-spoor{animation-play-state:paused}
@keyframes omroepen{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .omroep-spoor{animation:none}
}

/* ---------- KOP: logo bovenin het midden, menu eronder ---------- */
/* De kop staat in het donkere roze, de bordeaux uit hun eigen handschrift. Het logo is
   een zwart silhouet met bordeaux schrift — dat schrift valt weg op deze ondergrond,
   dus staat het logo hier wit, net als in de voet. Zo geldt op de hele site één regel:
   lichte ondergrond = het zwarte logo, donkere ondergrond = het witte. */
.kop{
  position:sticky;top:0;z-index:50;background:var(--groen);
  border-bottom:1px solid rgba(248,244,236,.16);
  transition:box-shadow .3s, transform .35s cubic-bezier(.22,.61,.36,1);
}
/* Naar beneden scrollen = kop weg, naar boven = kop terug (Louie 27-09). Alleen transform:
   de kop houdt zijn plek in de pagina, dus er schuift niets mee. Het krimpen van het logo is
   daarom ook weg: dat veranderde de hoogte van een sticky element en duwde bij elke scroll
   voorbij 40px de hele pagina op — het haperen dat Louie zag. */
.kop.weg{transform:translateY(-100%);box-shadow:none}
.kop .merk img{filter:brightness(0) invert(1)}
.kop .menu a{color:#f1ece0}
.kop .menu a:not(.knop-klein)::after{background:var(--olijf)}
.kop.gezakt{box-shadow:0 2px 24px rgba(48,14,22,.28)}
/* Drie kolommen: knoppen links, logo in het midden, knoppen rechts. Het menu zelf is
   display:contents zodat zijn twee helften rechtstreeks in dit raster meedoen — en het
   logo staat buiten het menu, want op mobiel klapt dat menu dicht. */
.kop-binnen{max-width:1180px;margin:0 auto;padding:16px 28px;position:relative;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(16px,3vw,42px)}
.merk{display:block;line-height:0;justify-self:center;grid-column:2;grid-row:1}
.merk img{height:76px;width:auto;margin:0 auto}

.menu{display:contents;font-size:13px;letter-spacing:.01em;text-transform:none}
.menu-zij{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);
  font-size:13px;letter-spacing:.01em;text-transform:none}
.menu-links{grid-column:1;grid-row:1;justify-content:flex-end}
.merk{grid-column:2;grid-row:1}
.menu-rechts{grid-column:3;grid-row:1;justify-content:flex-start}
.menu-zij{display:flex;align-items:center;gap:clamp(14px,2.4vw,32px)}
.menu-links{justify-content:flex-end}
.menu-rechts{justify-content:flex-start}
.menu a{text-decoration:none;color:var(--inkt);padding:6px 0;position:relative;opacity:.85;white-space:nowrap}
.menu a:hover{opacity:1}
.menu a:not(.knop-klein)::after{
  content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;background:var(--olijf);
  transition:right .35s ease;
}
.menu a:not(.knop-klein):hover::after{right:0}
/* Gevulde pil, geen vierkant lijntje: dat kader vocht met het logo om aandacht. */
/* .menu a wint qua specificiteit van .knop-klein, vandaar de a erbij: anders erft de
   pil de donkere menukleur en staat er grijze tekst op bordeaux. */
.menu a.knop-klein{
  white-space:nowrap;flex:0 0 auto;background:var(--vel);border:1px solid var(--vel);color:var(--mos);
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 28px;border-radius:999px;opacity:1;letter-spacing:.01em;
  transition:background .25s,border-color .25s,transform .25s;
}
.menu a.knop-klein:hover{background:#fff;border-color:#fff;transform:translateY(-1px);opacity:1}

/* Taalkeuze: drie korte codes achter een dun streepje. Bewust kleiner dan de menu-items —
   het is een schakelaar, geen bestemming, en mag de kop niet zwaarder maken. */
.taal{display:flex;align-items:center;flex:0 0 auto;
  margin-left:clamp(10px,1.4vw,18px);padding-left:clamp(10px,1.4vw,18px);
  border-left:1px solid rgba(248,244,236,.26)}
/* ---------- TAALKEUZE ALS UITKLAPMENU ----------
   Was een rij van drie codes. Op verzoek van Louie (17-09) een uitklapper met echte vlaggen
   als svg. De knop toont de taal van de pagina waar je op staat; welke dat is weet site.js uit
   het item met aria-current, want de vertaalslag zet dat merk op de juiste taal. Zonder
   JavaScript blijft de lijst gewoon staan als rij — dan is er niets om uit te klappen. */
.taal-knop{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 10px;
  background:0;border:1px solid transparent;border-radius:999px;cursor:pointer;
  color:#f1ece0;font:inherit;font-size:12.5px;letter-spacing:.06em;
  transition:border-color .25s,background .25s}
/* Geen zichtbare rand meer om de taalkeuze (Louie, 23-09): de rand blijft transparant, zodat
   de knop niet verspringt. Hover houdt een zachte achtergrond als klik-signaal; wie met het
   toetsenbord komt, krijgt de gewone focusring uit het blok TOETSENBORD verderop. */
.taal-knop:hover{border-color:transparent;background:rgba(248,244,236,.08)}
.taal-vlag,.taal-lijst img{width:26px;height:18px;border-radius:3px;display:block;
  box-shadow:0 0 0 1px rgba(0,0,0,.18)}
.taal-code{font-weight:500}
.taal-pijl{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.taal-knop[aria-expanded="true"] .taal-pijl{transform:rotate(180deg)}
.taal-lijst{list-style:none;margin:0;padding:6px}
.js-aan .taal-lijst{position:absolute;right:0;top:calc(100% + 10px);min-width:196px;z-index:60;
  background:var(--vel);border:1px solid var(--lijn);border-radius:14px;
  box-shadow:0 18px 44px -18px rgba(31,42,34,.55)}
/* De kopbalk zet '.kop .menu a' op een lichte kleur, en die selector is zwaarder dan
   '.taal-lijst a'. Zonder '.kop' ervoor kregen de twee niet-gekozen talen dus de lichte
   menukleur op een licht kaartje en waren ze bijna onzichtbaar; alleen het gekozen item had
   genoeg gewicht via zijn attribuutselector. Daarom hier dezelfde zwaarte. */
.kop .taal-lijst a{display:flex;align-items:center;gap:11px;min-height:44px;padding:8px 12px;
  border-radius:9px;text-decoration:none;color:var(--inkt);font-size:14.5px;letter-spacing:0;
  opacity:1}
.kop .taal-lijst a:hover{background:var(--vel-diep);color:var(--inkt);opacity:1}
.kop .taal-lijst a[aria-current]{color:var(--mos);font-weight:600}
.kop .taal-lijst a::after{display:none}
/* Zonder JavaScript is er geen knop en staat de lijst als rij in de balk. */
.geen-js .taal-knop{display:none}
.geen-js .taal-lijst{display:flex;gap:4px;padding:0}
.geen-js .kop .taal-lijst a{color:#f1ece0;padding:6px 8px;min-height:44px}
.geen-js .taal-lijst span{display:none}

.hamburger{display:none;position:absolute;right:24px;top:50%;transform:translateY(-50%);
  background:0;border:0;padding:10px;cursor:pointer}
.hamburger span{display:block;width:24px;height:1.5px;background:#f1ece0;margin:5px 0;transition:.3s}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:clamp(560px,86vh,880px);display:grid;align-items:end;overflow:hidden}
/* Slider: alle beelden liggen op elkaar, alleen de actieve is zichtbaar. Overvloeien
   in plaats van schuiven — schuiven trekt de aandacht weg van de kop die eroverheen ligt. */
.hero-beelden{position:absolute;inset:0}
.hero-dia{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.045);
  transition:opacity 1.5s ease,transform 7s linear}
.hero-dia.in{opacity:1;transform:scale(1)}
/* Zelfde container en marge als het tekstblok, zodat de eerste streep precies onder
   de linkerrand van de knoppen begint. */
.hero-stippen{position:absolute;left:50%;transform:translateX(-50%);bottom:26px;z-index:3;
  width:100%;max-width:1180px;padding:0 28px;display:flex;justify-content:flex-start;gap:10px}
.hero-stippen button{width:34px;height:3px;border:0;padding:0;border-radius:999px;cursor:pointer;
  background:rgba(246,242,233,.34);transition:background .3s,width .3s}
.hero-stippen button[aria-selected="true"]{background:#f0e2c8;width:52px}
.hero-stippen button:focus-visible{outline:2px solid #f0e2c8;outline-offset:3px}
/* Twee lagen: een verloop van onderaf voor de leesbaarheid van het tekstblok, en een
   zachte verdonkering vanaf links. De gevelfoto is druk (ramen, lampen, stoelen) —
   met alleen een bodemverloop viel de aanhef weg tegen de raamlijsten. */
.hero::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(18,24,19,.44) 0%,rgba(18,24,19,.10) 22%,rgba(18,24,19,.50) 52%,rgba(18,24,19,.86) 78%,rgba(18,24,19,.96) 100%),
    linear-gradient(90deg,rgba(18,24,19,.70) 0%,rgba(18,24,19,.34) 40%,rgba(18,24,19,0) 74%);
}
.hero-tekst{position:relative;z-index:2;max-width:1180px;width:100%;margin:0 auto;padding:0 28px 74px;color:#f6f2e9}
.hero .aanhef{
  display:block;font-family:var(--hand);font-size:26px;line-height:1;letter-spacing:0;text-transform:none;
  color:#f2e4c9;margin:0 0 12px;font-weight:500;
  text-shadow:0 1px 3px rgba(0,0,0,.85),0 2px 18px rgba(0,0,0,.75);
}
/* Bovengrens 64px i.p.v. 74: bij 74 loopt de tweede regel tot onder het Instagram-kaartje
   dat rechtsonder in de hoek staat. */
.hero h1{
  font-size:clamp(34px,4.6vw,64px);line-height:1.08;margin:0 0 20px;color:#faf7f0;
  text-shadow:0 2px 30px rgba(0,0,0,.35);
}
.hero-onder{
  max-width:44ch;font-size:clamp(16px,1.5vw,19px);color:#f0eae0;margin-bottom:30px;
  text-shadow:0 1px 14px rgba(0,0,0,.6);
}
.hero-knoppen{display:flex;flex-wrap:wrap;gap:14px}

/* Eén knopvorm op de hele site: dezelfde pil als Reserveren in het menu. */
/* Elke knop draagt een klein pictogram dat zegt waar hij heen gaat: een kaart, een glas,
   een agenda, een hoorn. Het staat op alle knoppen of op geen enkele — half doorgevoerd
   leest als een vergissing. De lijnen zijn dezelfde dikte als de haarlijnen in de rest
   van de pagina, zodat ze niet als losse iconenset aanvoelen. */
.knop,.knop-lijn,.knop-olijf{
  display:inline-flex;align-items:center;gap:10px;
  text-decoration:none;font-size:13px;letter-spacing:.01em;
  text-transform:none;padding:15px 28px;border-radius:999px;transition:.25s;
}
.knop svg,.knop-lijn svg,.knop-olijf svg,.knop-klein svg,.koek-ja svg,.koek-nee svg{
  width:16px;height:16px;flex:0 0 auto;stroke:currentColor;fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.knop{background:var(--groen);color:#f7f3ec;border:1px solid var(--groen)}
.knop:hover{background:#1f2a22;border-color:#1f2a22}
.knop-lijn{border:1px solid rgba(246,242,233,.5);color:#f6f2e9}
.knop-lijn:hover{border-color:#f6f2e9;background:rgba(246,242,233,.10)}
/* Gevuld in plaats van een dun lijntje: op het donkergroen viel de omtrek weg. */
/* Tim, 23-09: "de kopjes bekijk met menu en bierkaart een andere kleur, die kleur groen komt
   niet zo mooi uit." Geen goud (dat wilde hij op 17-09 juist weg), dus de lichte wandkleur:
   bone op het donkergroen, inkt erop (13:1). */
.knop-olijf{background:var(--vel);border:1px solid var(--vel);color:var(--inkt)}
.knop-olijf:hover{background:var(--vel-diep);border-color:var(--vel-diep);color:var(--inkt)}


/* ---------- INSTAGRAM-KAARTJE IN DE HERO ----------
   4:5, afgeronde hoeken, komt na een tel omhoog. Verdwijnt op smalle schermen:
   daar zou het bovenop de kop en de knoppen vallen. */
.insta-kaart{
  /* Rechts uitgelijnd op dezelfde container als de sliderstippen (max 1180px, 28px marge),
     en met de onderkant op dezelfde hoogte als die stippen. */
  --scheef:-3.5deg;
  position:absolute;right:max(28px, calc(50% - 562px));bottom:26px;z-index:4;
  width:clamp(178px,15vw,214px);aspect-ratio:4/5;display:flex;flex-direction:column;
  background:rgba(244,239,228,.94);backdrop-filter:blur(10px);
  border:1px solid rgba(244,239,228,.5);border-radius:16px;overflow:hidden;text-decoration:none;
  box-shadow:0 26px 60px -22px rgba(12,18,13,.85);
  transform-origin:100% 100%;
  opacity:0;transform:translateY(18px) scale(.97) rotate(var(--scheef));
  transition:transform .5s cubic-bezier(.22,.61,.36,1),opacity .5s ease,box-shadow .35s ease}
.js-aan .insta-kaart.op-scherm{opacity:1;transform:rotate(var(--scheef))}
.geen-js .insta-kaart{opacity:1;transform:rotate(var(--scheef))}
.insta-kaart:hover{transform:translateY(-4px) rotate(calc(var(--scheef) + .8deg));box-shadow:0 32px 70px -22px rgba(12,18,13,.9)}
.insta-kop{display:flex;align-items:center;gap:9px;padding:10px 12px 8px}
.insta-avatar{width:30px;height:30px;border-radius:50%;flex:0 0 auto;
  box-shadow:0 0 0 1.5px var(--mos),0 0 0 3px rgba(244,239,228,.9)}
.insta-naam{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.insta-naam b{font-size:12px;font-weight:600;color:var(--inkt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.insta-naam span{font-size:11px;color:var(--zacht)}
/* min-height:0 is nodig: zonder dat rekt height:100% het raster tot de volle
   kaarthoogte en duwt het de voetregel buiten beeld. */
.insta-grid{flex:1 1 auto;min-height:0;width:100%;object-fit:cover;display:block}
.insta-voet{display:block;padding:9px 12px 11px;font-size:11.5px;color:var(--mos);
  background:rgba(244,239,228,.96)}
/* Zolang de cookiebalk onderin staat, schuift het kaartje omhoog: anders valt de balk
   er bij een eerste bezoek precies overheen. */
body.koek-open .insta-kaart{bottom:calc(clamp(20px,4vw,52px) + 108px)}
@media (max-width:900px){ .insta-kaart{display:none} }
/* Zelfde probleem met de zwevende reserveerknop van GoTable: die zit op z-index 2147483647 en
   viel op een telefoon over 'Accepteren' heen (Louie, 27-09). Zolang de cookiebalk staat is hij
   weg; reserveren kan dan via de knop in de kopbalk. Na de keuze komt hij terug. */
.reservation-widget-wrapper-floating{transition:opacity .3s,visibility .3s}
body.koek-open .reservation-widget-wrapper-floating{opacity:0;visibility:hidden;pointer-events:none}

/* ---------- OVER ---------- */
/* Bleek blad. Dit was een vol ossenbloed vlak; het verhaal over 1976 en het familiebedrijf
   leest op een lichte ondergrond beter dan op een kleurvlak, en het breekt de rij donkere
   secties open. */
.over{background:var(--blad);padding:clamp(70px,9vw,120px) 28px}
.over-binnen{
  max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:0.85fr 1fr;gap:clamp(38px,6vw,84px);align-items:center;
}
/* Dit blok stond op een vol ossenbloed vlak en had daarom lichte letters. Nu het op bleek
   blad staat, moet alles mee terug naar donker — anders staat het verhaal over 1976 in het
   wit op een lichte ondergrond en leest niemand het. */
.over .kopje{color:var(--olijf-diep)}
.over h2{color:var(--mos)}
.over-tekst p{color:#3c4439}
.over .ondertekening{color:var(--mos)}
.over .eer{border-top-color:rgba(68,87,60,.25)}
.over .eer strong{color:var(--mos)}
.over .eer span{color:var(--zacht)}
.over-beeld img{box-shadow:0 20px 46px -20px rgba(31,42,34,.45)}
.over-beeld img{border-radius:var(--rond);aspect-ratio:4/5;object-fit:cover;width:100%;height:auto}
.ondertekening{font-family:var(--display);font-size:19px;color:var(--mos);margin-top:26px}
.eer{
  list-style:none;padding:26px 0 0;margin:26px 0 0;border-top:1px solid var(--lijn);
  display:flex;gap:38px;flex-wrap:wrap;
}
.eer li{display:flex;flex-direction:column;gap:3px}
/* De officiele beeldmerken van Gault&Millau en Euro-Toques: die herkent een gast, een
   woord niet. Het jaartal blijft tekst — daar is geen merk van. */
/* Het ronde Euro-Toques-zegel moet hoger staan dan het Gault&Millau-woordmerk om even
   zwaar te wegen; een cirkel oogt bij gelijke hoogte altijd kleiner dan een woord. */
.eer-merk{height:46px;display:flex;align-items:center;margin-bottom:5px}
.eer-merk svg{height:32px;width:auto;display:block}
.eer-merk img{height:46px;width:auto;display:block}
.over .eer-merk{color:var(--mos)}
.eer strong{font-family:var(--display);font-weight:400;font-size:19px}
.eer span{font-size:13px;letter-spacing:.01em;text-transform:none;color:var(--zacht)}


/* ---------- GOLFSCHEIDINGEN ----------
   De golf is een som van vier sinussen met verschillende golflengtes en fases, dus geen
   kam is gelijk — maar wel exact periodiek over 1200px, waardoor de band naadloos
   doorloopt. Twee lagen op verschillende snelheid geven diepte: het loopt als vloeistof,
   niet als een sjabloonrand. */
/* De band krijgt de kleur van de sectie erboven; zonder dat schijnt de pagina-achtergrond
   als een crèmestrook tussen de twee vlakken door. */
.golfrand{position:relative;height:clamp(54px,6.5vw,96px);overflow:hidden;line-height:0;
  margin-bottom:-1px;pointer-events:none}
.golf-groen{background:var(--blad)}
.golf-olijf{background:var(--groen)}
.golfrand::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2}
.golf-groen::after{background:var(--groen)}
.golf-olijf::after{background:var(--vel)}
.golf-laag{position:absolute;inset:0;width:200%}
.golf-laag svg{width:100%;height:100%;display:block}
/* De achterste laag had 42% dekking. Zijn vulkleur is al een lichtere tint van de golf,
   dus die doorzichtigheid liet de bandkleur eronder doorschijnen: lichtgroen over bordeaux
   werd een roze streep langs de onderkant. Vol doorgekleurd blijft het een tweede golf. */
.golf-achter{animation:vloeien 26s linear infinite}
.golf-voor{animation:vloeien 17s linear infinite}
@keyframes vloeien{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .golf-achter,.golf-voor{animation:none}
}

/* ---------- KAART ---------- */
.kaart{background:var(--groen);color:#efe9dc;padding:clamp(46px,6vw,80px) 28px clamp(70px,9vw,110px)}
.kaart-kop{max-width:660px;margin:0 auto 56px;text-align:center}
.kaart-kop h2{color:#f6f1e6}
.inleiding{color:#bdb4a2;margin:0}
.kaart-vel{
  max-width:1020px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(34px,6vw,80px);
}
.gang h3{
  font-size:14px;letter-spacing:.02em;text-transform:none;color:var(--olijf-licht);
  font-family:var(--tekst);font-weight:400;padding-bottom:14px;margin-bottom:8px;
  border-bottom:1px solid rgba(190,130,62,.32);
}
.gerechten{list-style:none;margin:0;padding:0}
.gerechten li{padding:15px 0;border-bottom:1px solid rgba(239,233,220,.10)}
.gerechten .g{display:block;font-family:var(--display);font-size:19px;color:#f4efe4;margin-bottom:3px}
.gerechten .o{display:block;font-size:14px;color:#a9a190;line-height:1.55}
.kaart-knoppen{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin:52px 0 0}
/* Binnen de marge i.p.v. van rand tot rand, anders valt de afronding tegen de
   schermrand weg. */
.kaart-beeld{margin:clamp(56px,8vw,96px) auto 0;max-width:1020px}
.kaart-beeld img{width:100%;height:clamp(280px,42vw,520px);object-fit:cover;border-radius:var(--rond)}


/* ---------- GERECHTEN-SLIDER ----------
   Scroll-snap met pijlen: dat blijft werken met een veeg op de telefoon en met het
   toetsenbord, zonder dat er een transform-berekening onder ligt die kan scheefzitten. */
.gerechten-slider{position:relative;margin:clamp(56px,8vw,96px) auto 0;max-width:1180px}
.gerechten-spoor{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding-bottom:6px;
  scrollbar-width:none;-ms-overflow-style:none}
.gerechten-spoor::-webkit-scrollbar{display:none}
.gerecht{flex:0 0 clamp(240px,32%,380px);margin:0;scroll-snap-align:start;
  border-radius:var(--rond);overflow:hidden;background:rgba(244,239,228,.06);
  transform:translateZ(0)}
/* translateZ geeft elke kaart een eigen laag. Zonder die laag vergeet Safari op iOS een
   afgeronde kaart met overflow:hidden in een horizontale scroller soms opnieuw te tekenen
   na het terugvegen: dan staat er een leeg vlak waar de eerste foto hoort (Louie 27-09). */
.gerechten-spoor,.salon{overscroll-behavior-x:contain}
.gerecht img{width:100%;height:clamp(200px,24vw,300px);object-fit:cover;display:block}
.pijl{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  background:rgba(244,239,228,.94);border:0;color:var(--inkt);
  display:grid;place-items:center;box-shadow:0 10px 26px -10px rgba(12,18,13,.8);
  transition:background .25s,transform .25s,opacity .25s}
.pijl:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.pijl:disabled{opacity:.3;cursor:default;transform:translateY(-50%)}
.pijl-links{left:-14px}
.pijl-rechts{right:-14px}
.salon-slider{position:relative}
.salon-slider .pijl{display:none}
@media (max-width:820px){
  .pijl-links{left:6px} .pijl-rechts{right:6px}
  .gerecht{flex:0 0 78%}
}

/* ---------- DRANKEN ---------- */
.dranken{background:var(--inkt);color:#efe9dc;padding:clamp(66px,8vw,104px) 28px}
.dranken-binnen{max-width:1080px;margin:0 auto;text-align:center}
.dranken h2{color:#f6f1e6;margin-bottom:14px}
.dranken-lead{color:#9d968a;max-width:46ch;margin:0 auto clamp(44px,5vw,64px);font-size:15.5px}
.dranken-binnen > .drank-rij{padding-top:clamp(34px,4vw,48px);border-top:1px solid rgba(190,130,62,.26)}
/* Geen kaders: vier kolommen gescheiden door een haarlijn, zoals de kolommen op een
   gedrukte kaart. Kaders maakten er vier app-tegels van. */
.drank-rij{display:grid;grid-template-columns:repeat(4,1fr);gap:0;text-align:left}
.drank-rij article{padding:6px clamp(20px,2.4vw,34px);border-left:1px solid rgba(190,130,62,.26)}
.drank-rij article:first-child{border-left:0;padding-left:0}
.drank-rij article:last-child{padding-right:0}
.drank-rij h3{color:#f4efe4;font-family:var(--display);font-size:23px;letter-spacing:0;
  text-transform:none;font-weight:400;margin:0 0 12px}
.drank-rij p{color:#aaa294;font-size:14.5px;line-height:1.75;margin:0}

/* ---------- SFEER: salonwand, ongelijk gehangen zoals hun schilderijenmuur ---------- */
.sfeer{padding:clamp(70px,9vw,120px) 28px;max-width:1180px;margin:0 auto}
.sfeer-kop{max-width:620px;margin-bottom:46px}
.salon{
  display:grid;grid-template-columns:repeat(6,1fr);
  grid-auto-rows:132px;gap:14px;
}
.salon figure{margin:0;overflow:hidden;border-radius:var(--rond)}
.salon img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.salon figure:hover img{transform:scale(1.04)}
.s1{grid-column:span 4;grid-row:span 3}
.s2{grid-column:span 2;grid-row:span 2}
.s3{grid-column:span 2;grid-row:span 1}
.s4{grid-column:span 2;grid-row:span 2}
.s5{grid-column:span 4;grid-row:span 2}
/* Twee beelden erbij op verzoek van Tim: "iets meer foto's ook van binnen op de hoofd pagina".
   Ze delen de onderste rij, elk een halve breedte. */
.s6{grid-column:span 3;grid-row:span 2}
.s7{grid-column:span 3;grid-row:span 2}


/* ---------- WAARDERING ----------
   Eén cijfer en één citaat dat woord voor woord klopt. Liever dat dan vijf citaten
   waarvan de bewoording niet vaststaat: je legt echte mensen niets in de mond. */
.oordeel{background:var(--vel);padding:clamp(56px,7vw,88px) 28px}
.oordeel-binnen{max-width:960px;margin:0 auto;display:grid;grid-template-columns:auto 1fr;
  gap:clamp(32px,5vw,64px);align-items:center}
.oordeel-cijfer{text-align:center;padding-right:clamp(32px,5vw,64px);
  border-right:1px solid var(--lijn)}
.sterren{display:inline-flex;gap:3px;margin-bottom:8px}
.sterren .ster{fill:var(--olijf)}
.sterren.klein{margin-bottom:12px}
.sterren.klein .ster{width:15px;height:15px}
.cijfer{font-family:var(--display);font-size:46px;line-height:1;margin:0 0 8px}
.cijfer span{font-size:19px;color:var(--zacht)}
.cijfer-bij{margin:0;font-size:13.5px;color:var(--zacht);line-height:1.5}
.cijfer-bij a{color:var(--mos)}
.cijfer-bij a:hover{border-bottom:1px solid currentColor}
.oordeel-slider{position:relative;min-width:0}
/* Alle citaten liggen in dezelfde rastercel. Het blok is daardoor altijd zo hoog als het
   langste citaat en verspringt niet meer bij elke wissel. Eerder stond alleen het actieve
   citaat in de stroom; een langer citaat duwde dan alles eronder 28px omlaag, de
   layout shift die op de homepage overbleef (27-09). */
.oordeel-spoor{position:relative;display:grid}
/* Eigen klasse voor de actieve slide: .in is al in gebruik door de scroll-ins, en met
   dezelfde naam werden bij het langsscrollen alle citaten tegelijk zichtbaar. */
.oordeel-citaat{margin:0;opacity:0;visibility:hidden;grid-area:1/1;align-self:start;
  transition:opacity .5s ease,visibility .5s}
.oordeel-citaat.tonen{opacity:1;visibility:visible}
.oordeel-sterren{display:flex;gap:9px;margin-top:22px}
.oordeel-sterren button{width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--lijn);transition:background .3s,transform .3s}
.oordeel-sterren button[aria-selected="true"]{background:var(--olijf);transform:scale(1.25)}
.oordeel-sterren:empty{display:none}
.oordeel-citaat p{font-family:var(--display);font-size:clamp(20px,2.4vw,27px);line-height:1.4;
  margin:0 0 14px;color:var(--inkt)}
.oordeel-citaat footer{font-size:13.5px;color:var(--zacht)}
@media (max-width:760px){
  .oordeel-binnen{grid-template-columns:1fr;gap:26px}
  /* De kop boven dit blok staat gecentreerd. Op een telefoon vallen de twee kolommen onder
     elkaar, en dan stonden het cijfer, het citaat en de stipjes links uitgelijnd onder een
     gecentreerde kop. Dat leest als scheef, ook al klopt elke regel op zichzelf. */
  .oordeel-cijfer{border-right:0;border-bottom:1px solid var(--lijn);padding:0 0 24px;text-align:center}
  .oordeel-citaat{text-align:center}
  .oordeel-sterren{justify-content:center}
}

/* ---------- CONTACT ---------- */
.contact{background:var(--vel-diep);padding:clamp(60px,7vw,92px) 28px}
.contact-binnen{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
.blok .kopje.licht{color:var(--mos)}
.groot{font-family:var(--display);font-size:22px;line-height:1.45;margin:0 0 10px}
.groot a{text-decoration:none}
.groot a:hover{border-bottom:1px solid var(--olijf)}
.klein{font-size:14px;color:var(--zacht);margin:0}
.klein a{color:var(--zacht);text-decoration:none;border-bottom:1px solid transparent}
.socials-icoon{display:flex;gap:12px;margin:0}
.socials-icoon a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border:1px solid var(--lijn);border-radius:50%;color:var(--inkt);
  transition:border-color .25s,color .25s,background .25s}
.socials-icoon a:hover{border-color:var(--mos);color:var(--mos);background:rgba(68,87,60,.08)}
.klein a:hover{color:var(--mos);border-color:var(--mos)}

/* ---------- RESERVEREN ---------- */
.reserveren{background:var(--vel);color:#241a08;padding:clamp(44px,6vw,76px) 28px clamp(66px,8vw,104px);text-align:center}
.res-binnen{max-width:620px;margin:0 auto}
.reserveren h2{color:#1f2a22}
.reserveren p{color:#241a08}
.res-knoppen{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.reserveren .knop{background:#1f2a22;color:#f4efe4;border-color:#1f2a22}
/* De omlijnde knop was voor een donkere ondergrond gemaakt; op goud moet hij omkeren. */
.reserveren .knop-lijn{border-color:rgba(31,42,34,.45);color:#1f2a22}
.reserveren .knop-lijn:hover{border-color:#1f2a22;background:rgba(31,42,34,.08)}
.reserveren .knop:hover{background:#2b3827;border-color:#2b3827}

/* ---------- ROUTE & PARKEREN ----------
   Kaart = OSM-tegels, ontkleurd en daarna met mix-blend-mode in hun groen gezet.
   Zo blijven wegen en water leesbaar en klopt de kleur met de rest van de pagina. */
.route{background:var(--vel-diep);padding:clamp(70px,9vw,120px) 28px}
.route-binnen{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(38px,6vw,76px);align-items:center}
.route-kaartbak{position:relative;aspect-ratio:1/1;border-radius:var(--rond);overflow:hidden;
  border:1px solid var(--lijn);background:#e9e4d8}
.route-map{position:absolute;inset:0;overflow:hidden}
.route-map img{position:absolute;width:256px;height:256px;display:block;
  filter:grayscale(1) brightness(1.06) contrast(.9)}
.route-kaartbak::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:#35543a;mix-blend-mode:color;opacity:.85}
.route-kaartbak::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(244,239,228,.6),transparent 40%)}
.route-speld{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;background:var(--groen);color:#f8f4ec;
  display:grid;place-items:center;
  box-shadow:0 14px 30px -12px rgba(31,42,34,.85),0 0 0 6px rgba(244,239,228,.65)}
.route-chip{position:absolute;left:16px;bottom:16px;z-index:3;background:var(--vel);
  border-radius:2px;padding:9px 16px;font-size:13px;letter-spacing:.04em;color:var(--inkt);
  box-shadow:0 6px 18px -8px rgba(31,42,34,.4)}
.route-bron{position:absolute;right:12px;bottom:12px;z-index:3;font-size:10.5px;
  color:#465546;background:rgba(244,239,228,.82);padding:3px 7px;border-radius:2px}
.route-tekst p{color:#3c4439}
.garages{list-style:none;margin:22px 0 30px;padding:0;border-top:1px solid var(--lijn)}
/* Was een flexregel die afbrak zodra de naam lang werd: bij Blauwe Golven stond de
   toevoeging naast de naam en bij de twee langere eronder. Een raster met twee vaste
   kolommen houdt alle drie de regels gelijk. */
.garages li{padding:14px 0;border-bottom:1px solid var(--lijn);
  display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:4px 18px}
.garages .g-bij{text-align:right}
.g-naam{font-family:var(--display);font-size:18px}
.g-bij{font-size:13.5px;color:var(--zacht);letter-spacing:.02em}
.route-knoppen{display:flex;gap:14px;flex-wrap:wrap}
.knop-lijn.donker{border-color:rgba(31,42,34,.35);color:var(--inkt)}
.knop-lijn.donker:hover{border-color:var(--inkt);background:rgba(31,42,34,.06)}

/* ---------- VEELGESTELDE VRAGEN ---------- */
/* Groen vlak: alle tekst, lijnen en het plusje moeten mee naar licht. */
.vragen{background:var(--groen);color:#e8e2d4;padding:clamp(70px,9vw,120px) 28px}
.vragen-binnen{max-width:900px;margin:0 auto}
.vragen h2{color:#f4efe4}
.vragen .kopje{color:var(--olijf-licht)}
.vragen .vragenlijst{border-top-color:rgba(232,226,212,.20)}
.vragen .vragenlijst details{border-bottom-color:rgba(232,226,212,.20)}
.vragen .vragenlijst summary{color:#f0ebdd}
.vragen .vragenlijst summary:hover{color:var(--olijf-licht)}
.vragen .vragenlijst summary::after{
  background:
    linear-gradient(var(--olijf),var(--olijf)) center/14px 1.5px no-repeat,
    linear-gradient(var(--olijf),var(--olijf)) center/1.5px 14px no-repeat}
.vragen .vragenlijst details[open] summary::after{
  background:linear-gradient(var(--olijf),var(--olijf)) center/14px 1.5px no-repeat}
.vragen .antwoord p{color:#bdb6a6}
.vragen .antwoord a{color:var(--olijf-licht)}
/* Louie, 23-09: de scheidingslijn en het ronde beeld bij de afsluitende regel mogen weg. */
.vragen .vraag-rest{border-top:0;padding-top:0}
.vragen .vraag-rest p{color:#bdb6a6}
.vragen .vraag-rest a{color:var(--olijf-licht);border-bottom-color:transparent}
.vragen .vraag-rest img{box-shadow:0 0 0 3px var(--groen),0 0 0 4px rgba(232,226,212,.28)}
.vragen-kop{margin-bottom:40px}
.vragenlijst{border-top:1px solid var(--lijn)}
.vragenlijst details{border-bottom:1px solid var(--lijn)}
.vragenlijst summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:var(--display);font-size:clamp(18px,2vw,21px);line-height:1.35;
}
.vragenlijst summary::-webkit-details-marker{display:none}
.vragenlijst summary::after{
  content:"";position:absolute;right:8px;top:50%;width:14px;height:14px;
  background:
    linear-gradient(var(--mos),var(--mos)) center/14px 1.5px no-repeat,
    linear-gradient(var(--mos),var(--mos)) center/1.5px 14px no-repeat;
  transform:translateY(-50%);transition:transform .3s
}
.vragenlijst details[open] summary::after{
  background:linear-gradient(var(--mos),var(--mos)) center/14px 1.5px no-repeat;
  transform:translateY(-50%) rotate(180deg)
}
.vragenlijst summary:hover{color:var(--mos)}
.antwoord{padding:0 44px 24px 0}
.antwoord p{margin:0;color:#3c4439;font-size:16px}
.antwoord a{color:var(--mos)}
.antwoord a:hover{border-bottom:1px solid currentColor}


/* ---------- KAARTPAGINA ----------
   Een gedrukte brasseriekaart: twee kolommen, gerecht links, prijs rechts, een fijne
   goudlijn ertussen. Geen puntjeslijn — die leest rommelig zodra de omschrijving
   over twee regels loopt. */
.kaartpagina{background:var(--vel)}
.kaartkop{padding:clamp(56px,7vw,90px) 28px 0;text-align:center}
.kaartkop-binnen{max-width:640px;margin:0 auto}
.kaartkop h1{font-size:clamp(30px,4vw,50px);line-height:1.15;margin:0 0 20px}
.kaartkop-lead{color:#3c4439;max-width:52ch;margin:0 auto 14px}
.kaartkop-noot{font-size:13px;color:var(--zacht);letter-spacing:.08em;margin:0}

.blad{padding:clamp(46px,6vw,78px) 28px clamp(60px,8vw,100px)}
.blad-binnen{max-width:1020px;margin:0 auto;columns:2;column-gap:clamp(38px,6vw,84px)}
.blok-gang{break-inside:avoid;margin:0 0 clamp(34px,4vw,52px)}
.blok-gang h2{
  font-family:var(--tekst);font-size:13.5px;letter-spacing:.02em;text-transform:none;
  color:var(--olijf-diep);font-weight:400;margin:0 0 4px;padding-bottom:12px;
  border-bottom:1px solid rgba(190,130,62,.4);
}
.lijst{list-style:none;margin:0;padding:0}
.lijst li{
  display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:13px 0;border-bottom:1px solid var(--lijn);
}
.lijst .n{font-family:var(--display);font-size:17.5px;line-height:1.3}
.lijst .n em{
  display:block;font-family:var(--tekst);font-style:normal;font-size:13.5px;
  color:var(--zacht);line-height:1.5;margin-top:3px;
}
.lijst .p{font-size:15px;color:var(--inkt);white-space:nowrap;flex:0 0 auto}
.lijst .p small{font-size:11.5px;color:var(--zacht)}
/* Een toevoeging hoort visueel bij het gerecht erboven, niet als los gerecht. */
.lijst li.bij{padding-left:18px;border-bottom-style:dotted}
.lijst li.bij .n{font-family:var(--tekst);font-size:14px;color:var(--zacht)}
.lijst li.bij .p{font-size:13.5px;color:var(--zacht)}
.gangnoot{font-size:13px;color:var(--zacht);margin:14px 0 0;line-height:1.55}
.voet-merk a{color:#c3bdb0}

@media (max-width:820px){
  .blad-binnen{columns:1}
}

/* ---------- SCROLL-INS ----------
   Alles komt van onderen omhoog binnen zodra het in beeld schuift. Alleen actief
   als JS draait (html.js-aan); zonder JS staat alles gewoon zichtbaar. Wie
   bewegingsreductie aan heeft ziet de eindtoestand meteen — zie het blok onderaan. */
.js-aan .op{opacity:0;transform:translateY(26px);
  transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1)}
.js-aan .op.in{opacity:1;transform:none}
/* getrapt: kinderen volgen elkaar op */
.js-aan .op[data-vertraag="1"]{transition-delay:.09s}
.js-aan .op[data-vertraag="2"]{transition-delay:.18s}
.js-aan .op[data-vertraag="3"]{transition-delay:.27s}
.js-aan .op[data-vertraag="4"]{transition-delay:.36s}
.js-aan .op[data-vertraag="5"]{transition-delay:.45s}
.js-aan .op[data-vertraag="6"]{transition-delay:.54s}
.js-aan .op[data-vertraag="7"]{transition-delay:.63s}
/* de hero staat er al bij het laden: die animeert vanzelf, niet op scroll */
.js-aan .hero-tekst > *{opacity:0;transform:translateY(22px);
  animation:opkomen .95s cubic-bezier(.22,.61,.36,1) forwards}
.js-aan .hero-tekst > *:nth-child(1){animation-delay:.15s}
.js-aan .hero-tekst > *:nth-child(2){animation-delay:.28s}
.js-aan .hero-tekst > *:nth-child(3){animation-delay:.41s}
.js-aan .hero-tekst > *:nth-child(4){animation-delay:.54s}
@keyframes opkomen{to{opacity:1;transform:none}}
/* beeld dat binnenschuift krijgt een subtiele schaal mee */
.js-aan .salon figure.op,.js-aan .over-beeld.op,.js-aan .kaart-beeld.op{overflow:hidden}
.js-aan .salon figure.op img,.js-aan .over-beeld.op img,.js-aan .kaart-beeld.op img{
  transform:scale(1.06);transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
.js-aan .salon figure.op.in img,.js-aan .over-beeld.op.in img,.js-aan .kaart-beeld.op.in img{transform:none}

/* ---------- SMALLER ---------- */
@media (max-width:1000px){
  :root{--kop-h:104px}
  .over-binnen{grid-template-columns:1fr;gap:38px}
  .over-beeld img{aspect-ratio:16/10}
  .drank-rij{grid-template-columns:repeat(2,1fr)}
  .contact-binnen{grid-template-columns:1fr;gap:34px}
  .route-binnen{grid-template-columns:1fr;gap:34px}
  .route-kaartbak{aspect-ratio:4/3}
  .salon{grid-template-columns:repeat(4,1fr);grid-auto-rows:118px}
  .s1{grid-column:span 4;grid-row:span 3}
  .s2,.s3,.s4{grid-column:span 2;grid-row:span 2}
  .s5{grid-column:span 4;grid-row:span 2}
  .s6,.s7{grid-column:span 2;grid-row:span 2}
}
@media (max-width:700px){
  .kop-binnen{padding:12px 20px 10px}
  .merk img{height:58px}
  /* De knop hing op 50% van de kop; zodra het menu uitklapt groeit die kop mee en zweefde
     het kruisje midden in de lijst. Nu haakt hij vast aan de logoregel bovenin. */
  .hamburger{display:flex;flex-direction:column;justify-content:center;gap:5px;
    right:14px;top:12px;bottom:auto;transform:none;height:58px;padding:0 10px}
  /* In flexbox vallen de marges van de drie streepjes niet meer samen; met gap blijft de
     hart-op-hart-afstand 6,5px en sluit het kruisje van het open menu weer netjes. */
  .hamburger span{margin:0}
  .kop-binnen{grid-template-columns:1fr;justify-items:center}
  /* Zonder deze regel houdt .merk zijn grid-column:2 van de desktopkop vast; het raster
     heeft hier maar één kolom, dus de browser maakt een impliciete tweede kolom en het
     logo landt bovenop de hamburger. */
  .merk{grid-column:1;grid-row:1;justify-self:center}
  .menu{
    display:none;grid-column:1;width:100%;margin-top:12px;
    border-top:1px solid rgba(248,244,236,.22);padding-top:8px;
  }
  .menu.open{display:block}
  .menu-zij{display:flex;flex-direction:column;align-items:stretch;gap:0;grid-column:1}

  /* Het logo staat gecentreerd, dus de items eronder ook; links uitgelijnd naast een
     gecentreerd logo trok het uitklapmenu scheef. */
  .menu a{padding:13px 0;width:100%;text-align:center}
  .taal{justify-content:center}
  .menu a:not(.knop-klein)::after{display:none}
  .knop-klein{margin:10px auto 6px;display:inline-block}
  /* In het uitklapmenu staat alles onder elkaar; de taalkeuze wordt daar een eigen regel
     onderaan in plaats van een staartje achter de reserveerknop. */
  .taal{margin:6px 0 0;padding:14px 0 0;border-left:0;
    border-top:1px solid rgba(248,244,236,.22);justify-content:flex-start;gap:4px}
  /* In het uitklapmenu op een telefoon hangt de lijst niet als zwevend kaartje maar staat
     hij gewoon onder de knop; er is daar geen ruimte voor een tweede laag. */
  .taal{width:100%;display:flex;flex-direction:column;align-items:center;gap:10px}
  .js-aan .taal-lijst{position:static;width:100%;max-width:280px;top:auto;right:auto}
  .geen-js .taal-lijst{justify-content:center}
  .hero{min-height:76vh}
  .hero-tekst{padding-bottom:52px}
  .kaart-vel{grid-template-columns:1fr;gap:34px}
  .drank-rij{grid-template-columns:1fr;gap:26px}
  .drank-rij article:first-child{border-left:1px solid rgba(190,130,62,.26);padding-left:clamp(20px,2.4vw,34px)}
  /* De collage werd op een telefoon een lijst van vijf beelden onder elkaar, goed voor
     bijna twee schermen scrollen. Hier wordt het een veegbare rij: het volgende beeld
     steekt er half in, dus je ziet dat er meer is. Op desktop blijft het de collage. */
  .salon{display:flex;grid-auto-rows:initial;gap:12px;overflow-x:auto;
    scroll-snap-type:x mandatory;scroll-behavior:smooth;
    margin:0 -28px;padding:0 28px 4px;
    scrollbar-width:none;-ms-overflow-style:none}
  .salon::-webkit-scrollbar{display:none}
  .salon figure{flex:0 0 82%;scroll-snap-align:center;height:250px;transform:translateZ(0)}
  .salon-slider .pijl{display:grid}
  .salon-slider .pijl-links{left:-8px} .salon-slider .pijl-rechts{right:-8px}
  .s1,.s2,.s3,.s4,.s5,.s6,.s7{grid-column:auto;grid-row:auto}

  /* Naam boven, plek eronder — naast elkaar past het hier niet meer. */
  .garages li{grid-template-columns:1fr;gap:2px}
  .garages .g-bij{text-align:left}
  .eer{gap:24px}
  .voet-binnen{flex-direction:column;gap:14px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-dia{transform:none!important}
  *{transition:none!important;animation:none!important}
  /* eindtoestand meteen tonen, anders blijft de pagina leeg staan */
  .js-aan .op,.js-aan .hero-tekst > *{opacity:1!important;transform:none!important}
  .js-aan .salon figure.op img,.js-aan .over-beeld.op img,.js-aan .kaart-beeld.op img{transform:none!important}
}


/* ---------- PORTRET bij FAQ en reserveerblok ---------- */
.vraag-rest{display:flex;align-items:center;gap:20px;margin-top:34px;padding-top:26px;
  border-top:1px solid var(--lijn)}
.vraag-rest img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  box-shadow:0 0 0 3px var(--vel),0 0 0 4px var(--lijn)}
.vraag-rest p{margin:0;font-size:15.5px;color:#3c4439}
.vraag-rest a{color:var(--mos);border-bottom:1px solid transparent}
.vraag-rest a:hover{border-bottom-color:currentColor}

/* ---------- VOET ---------- */
.voet{background:var(--inkt);color:#a8a49a;padding:clamp(56px,7vw,84px) 28px 34px;font-size:14.5px}
.voet-boven{max-width:1180px;margin:0 auto;display:grid;
  grid-template-columns:1.5fr .8fr .8fr 1.3fr;gap:clamp(28px,4vw,56px)}
.voet-logo{width:210px;height:auto;margin:0 0 18px}
.voet-regel{margin:0 0 20px;color:#bdb8ac;line-height:1.7}
.socials{display:flex;gap:10px;flex-wrap:wrap}
.socials a{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:#e6e1d6;
  border:1px solid rgba(230,225,214,.24);border-radius:999px;padding:8px 16px;font-size:13px;
  transition:border-color .25s,background .25s}
.socials a:hover{border-color:rgba(230,225,214,.6);background:rgba(230,225,214,.08)}
.voet-kolom h3,.voet-opt h3{font-family:var(--tekst);font-size:13px;letter-spacing:.02em;
  text-transform:none;color:var(--olijf-licht);font-weight:400;margin:0 0 14px}
.voet-kolom p{margin:0 0 9px;line-height:1.65}
/* Let op de :not(). Deze regel geeft elke voetlink een doorzichtige onderlijn die bij hover
   oplicht. De reserveerknop in de laatste kolom is ook een <a>, en die regel won van
   .knop-lijn: zijn onderrand werd doorzichtig en de knop zag eruit alsof hij half was
   afgesneden. Zo gemeld door Louie, 17-09. */
.voet-kolom a,.voet-opt a:not(.knop-lijn){color:#d7d2c6;text-decoration:none;
  border-bottom:1px solid transparent}
.voet-kolom a:hover,.voet-opt a:not(.knop-lijn):hover{color:#fff;border-color:#fff}
/* Reserveerknop in de voet: beige, zoals de knoppen in de kop en bij de kaart (Louie 27-09). */
.voet-opt .knop-lijn{background:var(--vel);border-color:var(--vel);color:var(--inkt)}
.voet-opt .knop-lijn:hover{background:var(--vel-diep);border-color:var(--vel-diep);color:var(--inkt)}
.voet-opt .knop-lijn:hover{color:#fff;border-color:#f6f2e9;background:rgba(246,242,233,.10)}
.voet-opt p{margin:0 0 14px;line-height:1.65;max-width:36ch}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.voet-onder{max-width:1180px;margin:clamp(36px,5vw,52px) auto 0;padding-top:22px;
  border-top:1px solid rgba(230,225,214,.14);display:flex;justify-content:space-between;
  align-items:center;gap:18px;flex-wrap:wrap;font-size:13px}
.voet-rechten{margin:0;color:#a5a197}
.voet-links{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.voet-links a{color:#a8a49a;text-decoration:none;border-bottom:1px solid transparent}
.voet-links a:hover{color:#e6e1d6;border-color:rgba(230,225,214,.5)}
.voet-knopje{background:0;border:0;padding:0;color:#a8a49a;font:inherit;font-size:13px;
  cursor:pointer;border-bottom:1px solid transparent}
.voet-knopje:hover{color:#e6e1d6;border-color:rgba(230,225,214,.5)}
.voet-concept{max-width:1180px;margin:22px auto 0;font-size:11.5px;line-height:1.65;color:#6f6c64}

/* ---------- COOKIEMELDING ----------
   Onderin, breed, met beide keuzes even zichtbaar. Weigeren mag geen verstopte tekstlink
   zijn: dan is de keuze niet vrij. */
.koekbalk{position:fixed;left:0;right:0;bottom:0;z-index:120;background:var(--vel);
  border-top:1px solid var(--lijn);box-shadow:0 -10px 40px -18px rgba(31,42,34,.5);
  padding:20px 28px;transform:translateY(102%);transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.koekbalk.zichtbaar{transform:none}
.koek-binnen{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.koek-tekst{flex:1 1 380px}
.koek-tekst h2{font-family:var(--display);font-size:19px;margin:0 0 6px}
.koek-tekst p{margin:0;font-size:14px;line-height:1.6;color:#3c4439;max-width:70ch}
.koek-tekst a{color:var(--mos)}
.koek-tekst a:hover{border-bottom:1px solid currentColor}
.koek-knoppen{display:flex;gap:10px;flex-wrap:wrap;flex:0 0 auto}
.koek-ja,.koek-nee{display:inline-flex;align-items:center;gap:8px;
  font:inherit;font-size:12.5px;letter-spacing:.01em;text-transform:none;
  border-radius:999px;padding:13px 26px;cursor:pointer;transition:.25s}
.koek-ja{background:var(--groen);color:#f8f4ec;border:1px solid var(--groen)}
.koek-ja:hover{background:#1f2a22;border-color:#1f2a22}
.koek-nee{background:transparent;color:var(--inkt);border:1px solid rgba(31,42,34,.35)}
.koek-nee:hover{border-color:var(--inkt);background:rgba(31,42,34,.06)}

/* ---------- CONTACTPAGINA ---------- */
.contactblad{padding:clamp(40px,5vw,64px) 28px clamp(60px,8vw,100px)}
.contactblad-binnen{max-width:1080px;margin:0 auto;display:grid;
  grid-template-columns:1.35fr .8fr;gap:clamp(34px,5vw,64px);align-items:start}
.cform{display:flex;flex-direction:column;gap:20px}
.veld{display:flex;flex-direction:column;gap:7px}
.veld-rij{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.veld label{font-size:13px;letter-spacing:.06em;color:var(--zacht)}
.optioneel{color:var(--zacht);font-size:12px}
.cform input,.cform textarea,.cform select{font:inherit;font-size:16px;color:var(--inkt);
  background:#fff;border:1px solid var(--lijn);border-radius:12px;padding:13px 16px;width:100%;
  transition:border-color .2s,box-shadow .2s}
.cform textarea{resize:vertical;min-height:130px;line-height:1.6}
.cform input:focus,.cform textarea:focus,.cform select:focus{outline:none;border-color:var(--mos);
  box-shadow:0 0 0 3px rgba(68,87,60,.16)}
.cform .fout{border-color:#a33;box-shadow:0 0 0 3px rgba(163,51,51,.12)}
.keuzebak{position:relative}
.keuzebak::after{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;
  border-right:1.6px solid var(--mos);border-bottom:1.6px solid var(--mos);
  transform:translateY(-70%) rotate(45deg);pointer-events:none}
.cform select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer}
.hint{margin:0;font-size:13.5px;color:var(--mos);line-height:1.5}
.cform-klein{margin:0;font-size:13px;color:var(--zacht)}
.cform-klein a{color:var(--mos)}
.cform-klein a:hover{border-bottom:1px solid currentColor}
.cform-onder{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cform-bericht{margin:0;font-size:14.5px;color:var(--inkt);max-width:52ch;line-height:1.55}
.cform-bericht.mis{color:#a33}
.czij{display:flex;flex-direction:column;gap:26px;background:var(--vel-diep);
  border-radius:var(--rond);padding:28px}
.czij-blok h2{font-family:var(--tekst);font-size:13px;letter-spacing:.02em;text-transform:none;
  color:var(--mos);font-weight:400;margin:0 0 10px}
.czij-blok p{margin:0 0 7px;line-height:1.65;font-size:15.5px}
.czij-groot{font-family:var(--display);font-size:21px}
.czij-blok a{color:var(--inkt);text-decoration:none;border-bottom:1px solid transparent}
.czij-blok a:hover{color:var(--mos);border-color:var(--mos)}
.czij-klein{font-size:13.5px;color:var(--zacht)}
.czij-tim{display:flex;gap:16px;align-items:center;border-top:1px solid var(--lijn);padding-top:22px}
.czij-tim img{width:62px;height:62px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.czij-tim p{font-size:14.5px;color:#3c4439;margin:0}

@media (max-width:860px){
  .contactblad-binnen{grid-template-columns:1fr}
  .veld-rij{grid-template-columns:1fr}
}
@media (max-width:1000px){
  .voet-boven{grid-template-columns:1fr 1fr;gap:34px}
}
@media (max-width:700px){
  .voet-boven{grid-template-columns:1fr;gap:32px}
  /* Op een telefoon zijn de voetlinks 20px hoog: te klein om met een duim te raken.
     De regelafstand blijft gelijk — de ruimte verhuist alleen van de marge naar het
     aanraakvlak zelf. */
  .voet-kolom p{margin-bottom:0}
  .voet-kolom p a,.voet-links a{display:inline-block;padding:7px 0}
  .voet-onder{flex-direction:column;align-items:flex-start}
  .voet-links{gap:6px 20px}
  .vraag-rest{flex-direction:column;text-align:center;gap:14px}
  .koek-binnen{gap:16px}
  .koek-knoppen{width:100%}
  .koek-ja,.koek-nee{flex:1 1 auto;text-align:center}
}

/* ══ schenken ══
   De bisque die aan tafel wordt opgeschonken, als video van zes seconden (sinds 27-09; daarvoor
   vier foto's met een voortgangsbalkje). Zelfde zijmarge als de kaart erboven (28px), en op een
   telefoon even breed als de gerechtenrij daarboven — Louie vond het smalle beeld verloren staan. */
.schenk{background:var(--groen);color:var(--vel);
  padding:clamp(56px,7vw,96px) 28px}
.schenk-vast{max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;gap:clamp(24px,4vw,64px)}
.schenk-kolom{justify-self:stretch;width:100%}
.schenk-beeld{position:relative;margin:0;width:100%;aspect-ratio:810/1080;
  border-radius:var(--rond);overflow:hidden;background:#11150f;
  box-shadow:0 30px 60px -40px rgba(0,0,0,.8);transform:translateZ(0)}
.schenk-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.schenk-tekst{max-width:34ch}
.schenk-tekst h2{color:var(--vel);margin:.2em 0 .6em}
.schenk-tekst p{color:rgba(244,239,228,.86)}
@media(max-width:860px){
  .schenk-vast{grid-template-columns:1fr;gap:clamp(22px,4vw,32px)}
  .schenk-tekst{max-width:none;text-align:center;justify-self:center}
  .schenk-tekst h2{font-size:clamp(21px,5.4vw,28px)}
}


/* ---------- RESERVEERPAGINA ----------
   Het reserveerscherm komt van GoTable, het systeem dat het restaurant zelf al gebruikt.
   Dat script bouwt een iframe in .go-table en regelt de hoogte zelf, dus wij zetten er
   alleen een leesbare breedte omheen en zorgen dat het op een telefoon niet klem komt. */
.reserveerblad{padding:clamp(28px,5vw,64px) 0 clamp(40px,7vw,90px)}
.reserveerblad-binnen{max-width:1180px;margin:0 auto;padding:0 28px;
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(min(300px,100%),1fr);
  gap:clamp(24px,4vw,54px);align-items:start}
.reserveer-widget{background:var(--vel-diep);border:1px solid var(--lijn);
  border-radius:var(--rond);padding:clamp(14px,2.2vw,26px);min-height:420px}
.reserveer-widget .go-table{width:100%}
.reserveer-widget iframe{width:100%;border:0;display:block}
/* De 'Next'-inlinewidget van GoTable (sinds 18-09, de versie die het eigen thema
   draagt) zet zelf een max-breedte van 420px op zijn omhulsel. Forceren naar de
   volle breedte breekt zijn interne indeling, dus hij wordt gecentreerd in het
   blad in plaats van uitgerekt. */
.reserveer-widget .reservation-widget-wrapper{margin-left:auto;margin-right:auto}
.reserveer-geenjs{margin:0;font-size:15px;color:var(--groen)}

.reserveer-naast{display:grid;gap:clamp(16px,2.4vw,26px)}
.reserveer-blok{border:1px solid var(--lijn);border-radius:var(--rond);
  padding:clamp(18px,2.4vw,26px);background:var(--vel)}
.reserveer-blok h2{font-size:clamp(19px,2.1vw,23px);margin:0 0 10px}
.reserveer-blok p{font-size:15.5px;margin:0 0 12px}
.reserveer-blok p:last-child{margin-bottom:0}
.reserveer-blok a{color:var(--mos);text-decoration:underline;text-underline-offset:3px}

.reserveer-tel a{font-family:var(--display);font-size:clamp(22px,2.6vw,28px);
  text-decoration:none;color:var(--mos)}
.reserveer-tel a:hover{text-decoration:underline}

.reserveer-tijden{list-style:none;padding:0;margin:0;font-size:15.5px}
.reserveer-tijden li{display:flex;justify-content:space-between;gap:16px;
  padding:7px 0;border-bottom:1px solid var(--lijn)}
.reserveer-tijden li:last-child{border-bottom:none}
.reserveer-tijden li span:last-child{color:var(--zacht);white-space:nowrap}

@media (max-width:900px){
  .reserveerblad-binnen{grid-template-columns:1fr}
  .reserveer-widget{padding:10px;min-height:380px}
}

/* De bouwregel onderaan: twee losse links, naar het persoonlijke merk en naar het bureau. */
.voet-bouwer{max-width:1180px;margin:14px auto 0;font-size:13px;
  color:rgba(244,239,228,.75);text-align:center}
.voet-bouwer a{color:rgba(244,239,228,.85);text-decoration:underline;text-underline-offset:3px}
.voet-bouwer a:hover{color:var(--olijf-licht)}

/* Kop boven het waarderingsblok. Zonder kop staat er een cijfer en twee citaten
   zonder dat iemand weet waar hij naar kijkt. */
.oordeel-kop{max-width:1180px;margin:0 auto clamp(18px,3vw,34px);padding:0 28px;text-align:center}
.oordeel-kop h2{margin:0;max-width:24ch;margin-inline:auto}

/* Tussenkop binnen een kaartlijst, bijvoorbeeld Wit of Rood binnen de wijnen. */
.lijst li.tussenkop{font-family:var(--display);font-size:17px;color:var(--mos);
  border-bottom:none;padding:18px 0 4px;letter-spacing:.01em}
.lijst li.tussenkop:first-child{padding-top:0}
.lijst .n small{font-family:var(--tekst);font-weight:400;font-size:13px;color:var(--zacht);margin-left:4px}
.lijst .smaak{display:block;font-size:13px;color:var(--mos);margin-top:3px;font-style:normal}

/* Honingpot: staat buiten beeld en buiten de tabvolgorde. Een bezoeker komt er nooit,
   een invulbot wel — die vult hem en het bericht wordt weggegooid. */
.pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Juridische pagina's (privacy, cookies) ----------
   Eén leeskolom, geen versiering. De tabel schuift op een telefoon binnen zijn eigen
   kader in plaats van de pagina breder te maken — een juridische tabel is het enige
   brede element op deze site. */
.juridisch{padding:clamp(34px,5vw,56px) 28px clamp(60px,8vw,96px)}
.juridisch-binnen{max-width:70ch;margin:0 auto}
.juridisch-datum{font-size:13.5px;color:var(--zacht);letter-spacing:.02em;margin:0 0 30px;
  padding-bottom:16px;border-bottom:1px solid var(--lijn)}
.juridisch h2{font-family:var(--display);font-size:clamp(21px,2.4vw,26px);line-height:1.25;
  margin:38px 0 12px;color:var(--mos)}
.juridisch h2:first-of-type{margin-top:0}
.juridisch p{margin:0 0 14px}
.juridisch a{color:var(--mos);text-decoration:underline;text-underline-offset:3px}
.juridisch a:hover{color:var(--inkt)}
.juridisch-tabel-bak{overflow-x:auto;margin:0 0 20px;-webkit-overflow-scrolling:touch}
.juridisch-tabel{width:100%;min-width:520px;border-collapse:collapse;font-size:15px;
  background:rgba(255,255,255,.4);border:1px solid var(--lijn)}
.juridisch-tabel th,.juridisch-tabel td{text-align:left;padding:12px 14px;
  border-bottom:1px solid var(--lijn);vertical-align:top}
.juridisch-tabel thead th{font-family:var(--tekst);font-weight:600;font-size:13px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--mos);background:var(--vel-diep)}
.juridisch-tabel tbody tr:last-child td{border-bottom:none}
.juridisch-tabel td:first-child{font-family:var(--tekst);font-weight:500;white-space:nowrap}
.juridisch-gegevens{display:flex;flex-wrap:wrap;gap:4px 28px;margin:0 0 14px}

/* ---------- TOETSENBORD: ZICHTBARE FOCUS ----------
   Er was op vrijwel niets een eigen focusstijl, dus wie met Tab door de site loopt zag
   de standaard blauwe ring van de browser of, op de knoppen met een eigen achtergrond,
   helemaal niets. Eén ring voor de hele site: donkergoud op licht, licht op donker.
   :focus-visible en niet :focus — een muisklik hoort geen ring te geven. */
:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--olijf-diep);outline-offset:3px;border-radius:3px}
.kop :focus-visible,.voet :focus-visible,.vragen :focus-visible,.kaart :focus-visible,
.over :focus-visible,.reserveren :focus-visible,.schenk :focus-visible{
  outline-color:#f0e2c8}
.cform input:focus-visible,.cform textarea:focus-visible,.cform select:focus-visible{
  outline:2px solid var(--mos);outline-offset:2px}

/* ---------- AANRAAKVLAKKEN ----------
   Alles wat je met een duim moet raken is minstens 44 bij 44 pixels. Dat was het niet bij
   de taalkeuze, de sociale knoppen, het cookieknopje in de voet en de cookieknoppen zelf. */
.voet-knopje{min-height:44px;display:inline-flex;align-items:center}
.socials a{min-height:44px}
.koek-ja,.koek-nee{min-height:44px}
@media (max-width:700px){
  .menu .taal a{padding:12px 14px;min-height:44px;display:inline-flex;align-items:center}
  .voet-links a,.voet-knopje{min-height:44px;display:inline-flex;align-items:center}
  .socials-icoon a{width:44px;height:44px}
}

/* ---------- RESERVEERKNOP IN DE MOBIELE KOPBALK ----------
   Op een telefoon zit de reserveerknop weggeklapt in het menu, en de cookiemelding legde
   zich over het onderste deel van het eerste scherm. Daardoor was er op dat eerste scherm
   geen enkele zichtbare manier om te reserveren. Deze knop staat naast het logo, links van
   de hamburger, en verdwijnt weer zodra het menu zelf ruimte heeft. */
.kop-reserveer{display:none}
@media (max-width:700px){
  .kop-reserveer{
    display:inline-flex;align-items:center;gap:7px;position:absolute;left:24px;top:19px;
    height:44px;padding:0 15px;border-radius:999px;background:var(--vel);color:var(--mos);
    border:1px solid var(--vel);text-decoration:none;font-size:12.5px;letter-spacing:.01em;
    font-family:var(--tekst);z-index:2}
  .kop-reserveer svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round}
  /* Op één middellijn met logo en hamburger (Louie, 23-09): die staan allebei 58px hoog vanaf
     12px, dus hun midden ligt op 41px; de knop is 44px hoog en begint daarom op 19px. De kop
     krimpt sinds 27-09 niet meer mee tijdens het scrollen, dus deze maten gelden altijd. De
     linkerafstand is 24px, gelijk aan die van de hamburgerstreepjes tot de rechterrand. */
}
@media (max-width:360px){
  /* Op de smalste toestellen past het woord er niet naast het logo; dan blijft het icoon. */
  .kop-reserveer span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .kop-reserveer{padding:0 13px}
}

/* ---------- COOKIEMELDING OP EEN TELEFOON ----------
   De melding besloeg bijna een derde van het scherm. Kleinere letters, minder lucht en de
   twee knoppen naast elkaar; de tekst blijft volledig, alleen compacter gezet. */
@media (max-width:700px){
  .koekbalk{padding:14px 18px calc(14px + env(safe-area-inset-bottom))}
  .koek-tekst h2{font-size:16px;margin:0 0 4px}
  .koek-tekst p{font-size:12.5px;line-height:1.5}
  .koek-binnen{gap:12px}
  .koek-knoppen{flex-wrap:nowrap}
  .koek-ja,.koek-nee{padding:11px 14px;font-size:13px;justify-content:center}
}

/* ---------- AANRAAKVLAKKEN, VERVOLG ----------
   De sliderstipjes zijn met opzet dunne streepjes en kleine bolletjes; die mogen niet groter
   worden, maar het vlak waar een duim op mag landen wel. Een onzichtbaar vlak eromheen maakt
   er 44 pixels van zonder dat er iets aan het ontwerp verandert. */
.hero-stippen button,.oordeel-sterren button{position:relative}
.hero-stippen button::after,.oordeel-sterren button::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:44px}
/* De breedte van dat vlak mag niet over de buurman heen vallen, anders tik je op stip 1 en
   springt de slider naar stip 2. Vandaar: in de breedte niet verder dan de stip zelf plus de
   helft van de tussenruimte, en de hoogte doet het werk. De bolletjes van de beoordelingen
   stonden 9 pixels uit elkaar; dat is 14 geworden, zodat er 23 pixels per stip overblijft. */
.hero-stippen button::after{width:calc(100% + 10px)}
.oordeel-sterren{gap:14px}
.oordeel-sterren button::after{width:23px}

/* Het logo in de kopbalk is een smalle staande afbeelding: 22 pixels breed om aan te tikken. */
.merk{display:inline-flex;justify-content:center;padding:0 12px}

/* Groot telefoonnummer naast het reserveerscherm, en de linkjes in de voetkolommen. */
.reserveer-tel a{display:inline-block;padding:7px 0}
@media (max-width:700px){
  .voet-kolom p a,.voet-links a{padding:10px 0}
}

/* De knop naar Tripadvisor onder het cijfer. Stond er eerst als los woord in een zin; een
   knop laat zien dat het cijfer ergens vandaan komt en na te lopen is. */
.oordeel-knop{margin-top:16px;display:inline-flex;align-items:center;gap:9px;
  border-radius:999px;padding:11px 20px;font-size:13.5px;text-decoration:none;min-height:44px}
.oordeel-knop svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- KOPBALK TUSSEN 701 EN 1060 PIXELS ----------
   In die band staat nog de brede kopbalk, maar er is te weinig ruimte voor de menu-items,
   de reserveerknop en de taalkeuze naast elkaar. De taalkeuze schoof daardoor tot 2 pixels
   van de schermrand, en het uitklapmenu eronder dus ook. Dit was al zo vóór de uitklapper;
   het viel alleen niet op omdat er drie korte codes stonden. Iets kleinere tussenruimtes en
   een iets smallere reserveerknop lossen het op zonder aan de opbouw te komen. */
@media (min-width:701px) and (max-width:1060px){
  .menu-zij{gap:clamp(10px,1.4vw,20px)}
  .menu a.knop-klein{padding:10px 18px}
  .taal{margin-left:10px;padding-left:10px}
  .taal-knop{padding:6px 8px;gap:6px}
}
/* Tot 1240 pixels staat de taalkeuze tegen de rand van de kopbalk aan: tot die breedte is de
   balk vol en loopt de rij menu-items tot in de binnenmarge. Het uitklapmenu mag daar niet aan vastzitten. In die band hangt het daarom niet aan de
   knop maar aan de kopbalk: die heeft 28 pixels binnenmarge, dus het menu komt netjes binnen
   de rand te staan en nog steeds direct onder de balk. */
@media (min-width:701px) and (max-width:1240px){
  .kop-binnen{position:relative}
  .taal{position:static}
  .js-aan .taal-lijst{right:28px;top:calc(100% + 6px)}
}

/* ── SCHERMVULLENDE INTERIEURBAND ───────────────────────────────────────────
   Toegevoegd 18-09-2026 op verzoek van Tim: meer restaurant, minder bord.
   Geen <img> maar een achtergrond, omdat het beeld hier decoratief is en moet
   kunnen bijsnijden met de schermbreedte mee; de beschrijving zit op het
   element zelf via role="img" en aria-label, zodat een schermlezer hem toch
   benoemt.

   background-attachment:fixed alleen boven 900px en alleen bij een aanwijzer:
   Safari op iOS rekent die stand fout uit en rekt het beeld dan op tot een
   veelvoud van de schermhoogte. Op een telefoon staat hij dus gewoon vast.
   ──────────────────────────────────────────────────────────────────────────── */
.band{height:clamp(240px,42vw,520px);background:var(--inkt) center/cover no-repeat;
  background-image:image-set(url("img/band-tafel-1600w.jpg") 1x, url("img/band-tafel.jpg") 2x);
  position:relative}
.band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(31,42,34,.34) 0%,rgba(31,42,34,0) 35%,rgba(31,42,34,0) 65%,rgba(31,42,34,.34) 100%)}
@media(max-width:900px){
  .band{background-image:image-set(url("img/band-tafel-768w.jpg") 1x, url("img/band-tafel-1200w.jpg") 2x)}
}
@media(min-width:901px) and (hover:hover){
  .band{background-attachment:fixed}
}
@media(prefers-reduced-motion:reduce){
  .band{background-attachment:scroll}
}

/* ── LANDINGSPAGINA'S ─────────────────────────────────────────────────────────
   24-09-2026: romantisch dineren, wijnbar, glutenvrij en vegetarisch. Drie oude adressen
   die in Google ranken (Lam, Content Plan) krijgen een eigen pagina in plaats van een
   omleiding naar een pagina waar hun zoekwoord niet op staat. Louie: "dan moeten die ook
   vormgegeven worden en net zo mooi zijn als de homepagina". Daarom zijn het dezelfde
   bouwstenen als de homepage (hero, over, kaart, schenken, band, vragen, reserveren);
   hieronder staat alleen wat er nieuw bij moest.
   ──────────────────────────────────────────────────────────────────────────── */
.hero-lp{min-height:clamp(520px,78vh,780px)}
/* Kruimelpad boven de kop: laat zien waar je bent als je via Google binnenkomt, en is
   de weg terug naar de homepage. Zelfde leesbaarheidsschaduw als de aanhef. */
.kruimel{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0 0 14px;
  font-size:13px;letter-spacing:.02em;color:#ece4d2;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.kruimel a{color:#f2e4c9;border-bottom:1px solid rgba(242,228,201,.45);
  display:inline-flex;align-items:center;min-height:44px}
.kruimel a:hover{border-bottom-color:#f2e4c9}
.kruimel .streep{opacity:.6}

/* Het over-blok in spiegelbeeld, op het vel, voor een tweede verhaal op dezelfde pagina. */
.over.spiegel{background:var(--vel)}
@media (min-width:1001px){
  .over.spiegel .over-binnen{grid-template-columns:1fr 0.85fr}
  .over.spiegel .over-beeld{order:2}
}
.over-tekst a:not(.knop):not(.knop-lijn){color:var(--mos);border-bottom:1px solid rgba(68,87,60,.4)}
.over-tekst a:not(.knop):not(.knop-lijn):hover{border-bottom-color:var(--mos)}
.over-knoppen{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.over-knoppen .knop-lijn{border-color:rgba(31,42,34,.35);color:var(--inkt)}
.over-knoppen .knop-lijn:hover{border-color:var(--inkt);background:rgba(31,42,34,.06)}

/* Drie kolommen in plaats van vier, voor een korte uitleg in stappen. */
.drank-rij.drie{grid-template-columns:repeat(3,1fr)}
.kaart .drank-rij{max-width:1020px;margin:0 auto}
.kaart .drank-rij p{color:#bdb4a2}
.drank-link{margin-top:14px!important}
.drank-link a,.dranken-binnen .drank-link a{color:var(--olijf-licht);border-bottom:1px solid rgba(155,182,129,.45)}
.drank-link a:hover{border-bottom-color:var(--olijf-licht)}
.antwoord a{border-bottom:1px solid currentColor}

/* Verder kijken: de andere pagina's als kaartjes met hun eigen beeld. */
.verder{background:var(--vel-diep);padding:clamp(70px,9vw,120px) 28px}
.verder-binnen{max-width:1180px;margin:0 auto}
.verder-kop{max-width:620px;margin-bottom:clamp(30px,4vw,46px)}
.verder-kop h2{color:var(--inkt)}
.verder-rij{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px)}
.verder-kaart{display:flex;flex-direction:column;background:var(--vel);border-radius:var(--rond);
  overflow:hidden;text-decoration:none;color:var(--inkt);
  box-shadow:0 18px 40px -30px rgba(31,42,34,.55);transition:transform .35s ease,box-shadow .35s ease}
.verder-kaart:hover{transform:translateY(-4px);box-shadow:0 26px 50px -28px rgba(31,42,34,.6)}
.verder-kaart img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform .7s ease}
.verder-kaart:hover img{transform:scale(1.04)}
.verder-beeld{overflow:hidden}
.verder-tekst{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1 1 auto}
.verder-kaart h3{font-size:23px;color:var(--mos);margin:0 0 8px}
.verder-kaart p{font-size:15px;line-height:1.65;color:#3c4439;margin:0 0 16px}
.verder-pijl{margin-top:auto;font-size:13px;color:var(--mos);display:inline-flex;align-items:center;gap:8px}
.verder-pijl svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.verder-kaart:hover .verder-pijl svg{transform:translateX(4px)}
.verder .kopje{color:var(--olijf-diep)}
.verder-kaart:focus-visible{outline:2px solid var(--olijf-diep);outline-offset:4px}

@media (max-width:1000px){
  .verder-rij{grid-template-columns:1fr 1fr}
  .verder-rij .verder-kaart:nth-child(3){grid-column:1 / -1;flex-direction:row}
  .verder-rij .verder-kaart:nth-child(3) .verder-beeld{flex:0 0 46%}
  .verder-rij .verder-kaart:nth-child(3) img{height:100%;aspect-ratio:auto}
}
@media (max-width:760px){
  .drank-rij.drie{grid-template-columns:1fr;gap:26px}
  .verder-rij{grid-template-columns:1fr;gap:16px}
  .verder-rij .verder-kaart,.verder-rij .verder-kaart:nth-child(3){flex-direction:row;grid-column:auto}
  .verder-beeld,.verder-rij .verder-kaart:nth-child(3) .verder-beeld{flex:0 0 38%}
  .verder-kaart img,.verder-rij .verder-kaart:nth-child(3) img{height:100%;aspect-ratio:auto;min-height:150px}
  .verder-tekst{padding:16px 16px 18px}
  .verder-kaart h3{font-size:19px;margin-bottom:6px}
  .verder-kaart p{font-size:14px;line-height:1.55;margin-bottom:10px}
}
@media (max-width:700px){
  .hero-lp{min-height:72vh}
}
.sfeer-kop .drank-link{margin:-6px 0 0!important}
.sfeer-kop .drank-link a{color:var(--mos);border-bottom-color:rgba(68,87,60,.4)}
.sfeer-kop .drank-link a:hover{border-bottom-color:var(--mos)}