/* Restaurant Hilderwin — gsm eerst. Ontwerp 8/10/2026: warm donkerbruin en crème van hun eigen site, bordeaux voor de acties, goud voor accenten.
   Titels in Cormorant Garamond (sluit aan bij het sierlijke logo), lezen en bedienen in Manrope. De boog uit het logo komt terug rond de zaalfoto. */
/* E1 (expertaudit 16/10/2026): de lettertypes staan op onze eigen server (vroeger Google Fonts: 2 extra verbindingen vóór de tekst
   in de juiste letter stond, en het IP-adres van elke bezoeker ging naar Google). Zelfde bestanden als Google ze gaf (variabel, latin +
   latin-ext; latin-ext laadt enkel als er zo'n letter op de pagina staat). Licentie: assets/lettertypes-OFL.txt.
   Nieuwe versie van een lettertype? Nieuwe bestandsnaam (…-v22-…): de .woff2 worden 1 jaar bewaard in de browser. */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500 700;font-display:swap;src:url(/assets/cormorant-v21-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500 700;font-display:swap;src:url(/assets/cormorant-v21-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:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url(/assets/cormorant-cursief-v21-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url(/assets/cormorant-cursief-v21-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:400 800;font-display:swap;src:url(/assets/manrope-v20-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/manrope-v20-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{--kleur:#8a1c2b;--kleur-donker:#711623;--bruin:#3b332d;--bruin-diep:#231d19;--donker:#231d19;--creme:#fdf6dc;--creme2:#f6edd3;--ivoor:#fffaf0;--goud:#c9b88a;--goud-licht:#e6d9b3;--ink:#3b332d;--stil:#6b6057;--lijn:#d9ccb4;--wit:#fff;--fout:#b42318;--fout-vlak:#fde8e6;--ok-vlak:#e8f3e8;--radius:8px;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;--sans:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--kop-h:64px}
@media (min-width:1000px){:root{--kop-h:84px}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--kop-h) + 64px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--creme);color:var(--ink);font:16px/1.65 var(--sans);overflow-x:clip;-webkit-font-smoothing:antialiased}
body.beheer{line-height:1.55}
img{max-width:100%}
/* E1: beelden in <picture> (WebP + JPEG): het picture-element zelf telt niet mee in de opmaak, de img gedraagt zich zoals vroeger */
picture.pic{display:contents}
picture>source{display:none} /* anders telt <source> als flex-item mee (gap in .merk: logo 10 px opgeschoven, gezien 16/10) */
.site img{height:auto}
a{color:var(--kleur);text-underline-offset:3px;text-decoration-thickness:1px}
h1,h2,h3{line-height:1.2;margin:0 0 .5rem;font-weight:800;letter-spacing:-.01em}
h1{font-size:1.7rem}h2{font-size:1.3rem}h3{font-size:1.05rem}
p{margin:0 0 .85rem}
main{max-width:860px;margin:0 auto;padding:12px 16px 72px}
main.smal,.smal{max-width:560px}
.stil{color:var(--stil);font-weight:400}
.hp{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden}
.klein{font-size:.9rem}
.nw{white-space:nowrap}
.verborgen{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kaart{background:var(--wit);border-radius:var(--radius);padding:18px;margin:0 0 14px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.blok{margin:26px 0}
.kop-rij{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.rij2{display:grid;grid-template-columns:1fr;gap:0 16px;align-items:end}
@media (min-width:600px){.rij2{grid-template-columns:1fr 1fr}}
.inline{display:inline}

/* ---------- publieke site: typografie ---------- */
.site h1,.site h2{font-family:var(--serif);font-weight:600;letter-spacing:-.015em;color:var(--bruin)}
.site h1{font-size:clamp(2.6rem,7vw,3.6rem);line-height:1.02;margin-bottom:.4em}
.site h2{font-size:clamp(2rem,4.6vw,2.9rem);line-height:1.08;margin-bottom:.45em;text-wrap:balance}
.site h1{text-wrap:balance}
.site h3{font-family:var(--sans);font-weight:700;font-size:1.05rem;letter-spacing:0}
.kicker,.held-kicker{display:flex;align-items:center;gap:12px;font:700 .75rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--kleur);margin:0 0 14px}
.kicker:before,.held-kicker:before{content:"";width:24px;height:1px;background:currentColor;opacity:.7;flex:none}
.kicker.midden{justify-content:center}
.kicker.midden:after{content:"";width:28px;height:1px;background:currentColor;opacity:.7;flex:none}
.op-donker .kicker{color:var(--goud)}
.ornament{display:block;width:46px;height:auto;margin:0 auto 16px;color:var(--goud)}
.site main{padding:0 20px 80px}
.site main.start{max-width:none;padding:0}
.site main.start>.melding{margin:16px 20px}
@media (max-width:999px){.start-pagina:not(.met-mededeling) main.start>.melding{margin-top:calc(var(--kop-h) + 12px)}}
.site main.breed{max-width:1120px}
.binnen{max-width:1160px;margin:0 auto;padding:0 24px}
.leestekst{max-width:58ch}

/* kop: basis (ook voor het beheer) */
.top{position:sticky;top:0;z-index:5;background:var(--donker);color:var(--creme);display:flex;align-items:center;justify-content:space-between;padding:8px 16px;gap:10px}
.merk{display:flex;align-items:center;gap:10px;color:var(--creme);text-decoration:none;font-weight:800;letter-spacing:.02em}
.merk img{height:44px;width:auto}
.top nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.top nav a{text-decoration:none;color:var(--creme);padding:7px 11px;border-radius:999px;font-weight:700;font-size:.9rem;white-space:nowrap;border:1px solid transparent}
.top nav a:hover{border-color:var(--goud)}
.menuknop{display:none}
/* ---------- kop ---------- */
.site .top{position:sticky;top:0;z-index:30;background:var(--bruin-diep);color:var(--creme);display:flex;align-items:center;justify-content:space-between;padding:0 16px 0 20px;height:var(--kop-h);gap:12px;transition:background-color .2s ease,box-shadow .2s ease}
.site .merk{display:flex;align-items:center;gap:10px;color:var(--creme);text-decoration:none;font-weight:800;letter-spacing:.02em;flex:none}
.site .merk img{height:48px;width:auto;display:block}
@media (min-width:1000px){.site .merk img{height:62px}.site .top{padding:0 32px}}
.site .top nav{display:flex;gap:4px;align-items:center;justify-content:flex-end}
.site .top nav a{text-decoration:none;color:var(--creme);padding:8px 12px;font:600 .8rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;border-bottom:1px solid transparent}
.site .top nav a:hover{color:var(--goud)}
.site .top nav a[aria-current=page]{color:var(--goud)}
.site .top nav a.bel{letter-spacing:.04em;text-transform:none;font-size:.9rem;color:var(--goud);display:inline-flex;align-items:center;gap:7px;margin-left:8px}
.site .top nav a.bel svg{width:15px;height:15px}
.site .top nav a.cta{background:var(--kleur);color:#fff;border-radius:4px;padding:13px 20px;margin-left:10px;letter-spacing:.1em}
.site .top nav a.cta:hover{background:var(--kleur-donker);color:#fff}
/* D4 (audit 16/10/2026): belknop in de kop op gsm/tablet (tot 1199 px, zolang het menu dichtgeklapt is) — bellen staat zo in het
   eerste scherm, ook boven de foto op de startpagina. Goud zoals "Bel" in het menu; 44 × 44 (iPhone-norm). */
.site .kop-bel{display:none}
.site .menuknop{display:none;align-items:center;gap:10px;background:none;border:0;color:var(--creme);min-height:44px;min-width:44px;padding:8px 6px 8px 10px;font:700 .8rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.site .menuknop i{display:block;width:22px;height:2px;background:currentColor;position:relative;border-radius:2px;transition:background-color .2s}
.site .menuknop i:before,.site .menuknop i:after{content:"";position:absolute;left:0;width:22px;height:2px;background:currentColor;border-radius:2px;transition:transform .2s ease}
.site .menuknop i:before{top:-7px}.menuknop i:after{top:7px}
.site .menuknop[aria-expanded=true] i{background:transparent}
.site .menuknop[aria-expanded=true] i:before{transform:translateY(7px) rotate(45deg)}
.site .menuknop[aria-expanded=true] i:after{transform:translateY(-7px) rotate(-45deg)}
.site .menuknop .dicht{display:none}
.site .menuknop[aria-expanded=true] .open{display:none}
.site .menuknop[aria-expanded=true] .dicht{display:inline}
@media (max-width:1199px){
.site .menuknop{display:inline-flex;position:relative;z-index:32}
.site .kop-bel{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin-left:auto;border:1px solid rgba(201,184,138,.6);border-radius:50%;color:var(--goud);text-decoration:none}
.site .kop-bel svg{width:19px;height:19px}
.site .kop-bel:hover{background:rgba(201,184,138,.14)}
html.menu-open .site .kop-bel{visibility:hidden}
.site .merk{position:relative;z-index:32}
.site .top nav{display:none;position:fixed;inset:0;z-index:31;background:var(--bruin-diep);flex-direction:column;align-items:stretch;justify-content:center;padding:calc(var(--kop-h) + 12px) 32px 40px;gap:0;overflow-y:auto}
.site .top nav.open{display:flex}
.site .top nav a{font:600 1.85rem/1.2 var(--serif);letter-spacing:0;text-transform:none;text-align:center;padding:12px;color:var(--creme)}
.site .top nav a[aria-current=page]{color:var(--goud)}
.site .top nav a.bel{justify-content:center;font:600 1rem/1.2 var(--sans);margin:22px 0 0;padding:14px;border:1px solid rgba(201,184,138,.55);border-radius:4px}
.site .top nav a.cta{font:700 1rem/1.2 var(--sans);letter-spacing:.04em;margin:10px 0 0;padding:16px;text-align:center}
.site .top nav a{width:100%;max-width:420px;align-self:center}
html.menu-open{overflow:hidden}
}
/* startpagina op gsm: de kop ligt doorzichtig over de foto zolang je bovenaan staat (klasse via een paar regels JS; zonder JS blijft hij gewoon donker) */
@media (max-width:999px){
.start-pagina:not(.met-mededeling) .top{position:fixed;left:0;right:0}
.start-pagina.kop-doorzichtig:not(.met-mededeling) .top{background:transparent;box-shadow:none}
.start-pagina.kop-vast .top{box-shadow:0 1px 0 rgba(201,184,138,.18)}
}
.mededeling{background:#fff3cd;color:#6b4e00;padding:10px 16px;text-align:center;font-weight:700;position:relative;z-index:31}

/* ---------- knoppen ---------- */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--kleur);color:#fff;border:1px solid transparent;border-radius:4px;padding:12px 22px;font:700 .95rem/1.25 var(--sans);letter-spacing:.02em;text-decoration:none;cursor:pointer;text-align:center;transition:background-color .18s ease,color .18s ease,border-color .18s ease}
.knop:hover{background:var(--kleur-donker)}
.site .knop{min-height:48px}
.knop.groot{display:flex;width:100%;min-height:56px;padding:16px;font-size:1.05rem;margin:12px 0}
.knop.klein{min-height:40px;padding:8px 14px;font-size:.88rem}
.knop.stil{background:transparent;color:var(--ink);border-color:#b9ab92}
.knop.stil:hover{border-color:var(--bruin);background:rgba(59,51,45,.04)}
.knop.gevaar{background:transparent;color:var(--fout);border-color:var(--fout)}
.knop.licht{background:transparent;color:#fffaf0;border-color:rgba(255,250,240,.75)}
.knop.licht:hover{background:rgba(255,250,240,.12)}
.knop.goud{background:var(--goud);color:var(--bruin-diep)}
.knop.goud:hover{background:var(--goud-licht)}
.knop.lijn-goud{background:transparent;color:var(--goud);border-color:rgba(201,184,138,.7)}
.knop.lijn-goud:hover{background:rgba(201,184,138,.12)}
.pijl{display:inline-flex;align-items:center;gap:8px;font:700 .82rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--kleur);padding:8px 0;border-bottom:1px solid currentColor}
.pijl:after{content:"→";letter-spacing:0;transition:transform .18s ease}
.pijl:hover:after{transform:translateX(4px)}
.op-donker .pijl{color:var(--goud)}
.stilknop{background:none;border:0;color:var(--stil);text-decoration:underline;font:inherit;cursor:pointer;padding:6px 0}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--kleur);outline-offset:3px}
.op-donker a:focus-visible,.op-donker button:focus-visible,.top a:focus-visible,.top button:focus-visible,.held a:focus-visible,.voet a:focus-visible{outline-color:var(--goud)}

/* ---------- held (startpagina) ---------- */
.held{position:relative;min-height:clamp(600px,100svh,860px);display:flex;align-items:flex-end;color:#fffaf0;overflow:hidden;background:var(--bruin-diep)}
.held-beeld{position:absolute;inset:0;margin:0;display:block}
.held-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 28%;display:block}
.held-beeld:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(35,29,25,.62) 0%,rgba(35,29,25,0) 20%,rgba(35,29,25,0) 36%,rgba(35,29,25,.55) 58%,rgba(35,29,25,.94) 82%,#231d19 100%)}
.held-tekst{position:relative;z-index:1;width:100%;padding:0 24px 34px}
.held .held-kicker{letter-spacing:.16em;white-space:nowrap}
@media (max-width:359px){.held .hero-knoppen{grid-template-columns:minmax(0,1fr)}.held .hero-knoppen .knop,.held .hero-knoppen .knop:nth-child(3){grid-column:auto;justify-self:stretch;width:100%}}
@media (max-width:420px){.held .held-kicker{font-size:.68rem;letter-spacing:.13em;gap:10px}.held .held-kicker:before{width:18px}.hero-knoppen .knop{font-size:.9rem}}
.held .held-kicker{color:var(--goud)}
.held h1{color:#fffaf0;font-size:clamp(2.75rem,11.5vw,3.4rem);max-width:12ch;margin-bottom:.35em}
.held-tekst>p{max-width:34ch;font-size:1.06rem;line-height:1.6;color:rgba(255,250,240,.88)}
.hero-knoppen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-top:22px}
.hero-knoppen .knop{padding-left:8px;padding-right:8px;white-space:nowrap;min-height:52px}
.hero-knoppen .knop:nth-child(3){grid-column:1/-1;justify-self:center;padding-left:26px;padding-right:26px}
.held-uren{margin:18px 0 0;font-size:.85rem;color:rgba(255,250,240,.72);text-align:center}
@media (max-width:999px){
  .held{display:block;min-height:0}
  .held-beeld{position:relative;inset:auto;aspect-ratio:1/1.02;max-height:72svh;width:100%}
  .held-beeld img{object-position:50% 50%}
  .held-beeld:after{bottom:-2px;background:linear-gradient(180deg,rgba(35,29,25,.93) 0%,rgba(35,29,25,.66) 11%,rgba(35,29,25,0) 28%,rgba(35,29,25,0) 46%,rgba(35,29,25,.88) 80%,#231d19 96%)}
  .held-tekst{margin-top:-84px;padding:0 24px 44px}
  .held h1{font-size:clamp(2.4rem,10.4vw,3.2rem);max-width:none}
}
@media (min-width:600px) and (max-width:999px){
  .held-tekst{padding:0 40px 48px}
  .hero-knoppen{max-width:460px}
  .hero-knoppen .knop:nth-child(3){padding-left:22px;padding-right:22px}
  .held-uren{text-align:left}
}
@media (min-width:1000px){
  .held{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);min-height:clamp(620px,calc(100vh - var(--kop-h)),740px);align-items:stretch}
  .held-beeld{position:relative;grid-column:2;grid-row:1}
  .held-beeld:after{background:linear-gradient(90deg,#231d19 0%,rgba(35,29,25,0) 18%)}
  .held-beeld img{object-position:50% 50%}
  .held-tekst{grid-column:1;grid-row:1;align-self:center;padding:64px 56px 64px max(32px,calc((100vw - 1160px)/2 + 24px))}
  .held-tekst>*{max-width:480px}
  .held h1{font-size:clamp(54px,4.45vw,64px);line-height:1.04;max-width:480px}
  .held-tekst>p{font-size:1.12rem}
  .hero-knoppen{gap:12px;margin-top:30px;max-width:440px}
  .hero-knoppen .knop{padding-left:16px;padding-right:16px}
  .hero-knoppen .knop:nth-child(3){padding-left:28px;padding-right:28px}
  .held-uren{text-align:left;margin-top:26px}
}
@media (min-width:1200px){
  .held{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .held-tekst{padding-right:48px}
  .held-tekst>*,.held h1{max-width:520px}
}

/* ---------- secties startpagina ---------- */
.sectie{padding:56px 0}
@media (min-width:1000px){.sectie{padding:88px 0}}
.op-donker{background:var(--bruin-diep);color:rgba(255,250,240,.86)}
.op-donker h2,.op-donker h3{color:#fffaf0}
.sectie-kop{margin:0 0 28px;max-width:640px}
.sectie-kop.midden{text-align:center;margin-left:auto;margin-right:auto}
.sectie-kop p:not(.kicker){color:var(--stil);font-size:1.05rem}
.op-donker .sectie-kop p:not(.kicker){color:rgba(255,250,240,.75)}

/* welkom met de boog uit het logo */
.welkom{display:grid;gap:32px;align-items:center}
.boog{position:relative;margin:14px 14px 0 0;max-width:460px;justify-self:center;width:calc(100% - 14px)}
.boog img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:999px 999px 4px 4px;position:relative;z-index:1}
.boog:before{content:"";position:absolute;inset:-14px -14px 22px 14px;border:1px solid var(--goud);border-bottom:0;border-radius:999px 999px 0 0;z-index:0}
.welkom-tekst p:not(.kicker){font-size:1.06rem}
.ondertekening{margin-top:26px;font-family:var(--serif);color:var(--bruin)}
.ondertekening span{display:block;font-style:italic;font-size:1.25rem;color:var(--stil)}
.ondertekening b{display:block;font-weight:600;font-size:1.6rem;line-height:1.2}
@media (min-width:800px){
  .welkom{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px}
  .boog{margin:14px 14px 0 0}
}

/* uit onze keuken */
.keuken-fotos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0}
.keuken-fotos figure{margin:0;overflow:hidden;border-radius:2px;background:#2e2622}
.keuken-fotos img{display:block;width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .6s ease}
@media (hover:hover){.keuken-fotos figure:hover img{transform:scale(1.03)}}
@media (min-width:600px){
  .keuken-fotos{grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
}
.keuken-onder{display:flex;flex-direction:column;gap:0;margin-top:28px}
.keuken-onder .pijl{justify-content:space-between;min-height:48px;font-size:.75rem;letter-spacing:.12em;border-bottom:1px solid rgba(201,184,138,.4)}
@media (min-width:700px){.keuken-onder{flex-direction:row;gap:24px;margin-top:40px}.keuken-onder .pijl{min-height:0;border-bottom-color:currentColor}}

/* menu's & kaart als gedrukte kaartjes */
.kaartjes{display:grid;gap:18px}
@media (min-width:800px){.kaartjes{grid-template-columns:1fr 1fr;gap:28px}}
.kaartje{position:relative;display:flex;flex-direction:column;align-items:center;background:var(--ivoor);color:var(--ink);text-decoration:none;padding:40px 28px 34px;text-align:center;border:1px solid var(--lijn);border-radius:2px;transition:border-color .2s ease,transform .2s ease}
.kaartje:before{content:"";position:absolute;inset:7px;border:1px solid rgba(201,184,138,.55);pointer-events:none}
.kaartje:hover{border-color:var(--goud)}
.kaartje h3{font:600 2rem/1.1 var(--serif);color:var(--bruin);margin:0 0 14px}
.kaartje .menulijn{font:600 1.3rem/1.45 var(--serif);color:var(--kleur);margin:0 auto 12px;max-width:24ch}
.kaartje p{max-width:36ch;margin-left:auto;margin-right:auto}
.kaartje .stil{font-size:.95rem}
.kaartje .pijl{margin-top:auto;padding-top:20px}
.kaartje>p:last-of-type{margin-bottom:0}
@media (min-width:800px){.kaartje{min-height:320px;padding:40px 32px 34px}}

/* reserveren-band met de uren */
.reserveer-band{background:var(--creme2);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.reserveer-band .binnen{display:grid;gap:36px;align-items:center}
.uren-lijst{display:grid;grid-template-columns:1fr;gap:0;margin:0;padding:0;list-style:none}
.uren-lijst li{display:grid;grid-template-columns:8.5em 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--lijn);font-variant-numeric:tabular-nums}
.uren-lijst li.dicht{display:block}
.uren-lijst li b{font-weight:700;text-transform:capitalize}
.uren-lijst .dicht{color:var(--kleur);font-weight:700;border-bottom:0}
.band-knoppen{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
@media (min-width:900px){.reserveer-band .binnen{grid-template-columns:1fr 1fr;gap:96px}}

/* cadeaubon */
.bon-sectie{background:linear-gradient(140deg,#6e1723 0%,#4a1a1d 55%,#2c1d1a 100%);color:rgba(255,250,240,.88)}
.bon-sectie h2{color:#fffaf0}
.bon-sectie .kicker{color:var(--goud)}
.bon-sectie .binnen{display:grid;gap:40px;align-items:center}
.bon-beeld{margin:0}
.bon-beeld img{display:block;width:100%;max-width:520px;margin:0 auto;border-radius:3px;box-shadow:0 22px 50px rgba(0,0,0,.42)}
.bon-stappen{list-style:none;margin:22px 0 22px;padding:0;counter-reset:st}
.bon-stappen li{counter-increment:st;display:flex;gap:14px;align-items:baseline;padding:10px 0;border-top:1px solid rgba(201,184,138,.28)}
.bon-stappen li:last-child{border-bottom:1px solid rgba(201,184,138,.28)}
.bon-stappen li:before{content:counter(st);font:600 1.5rem/1 var(--serif);color:var(--goud);min-width:20px}
.bon-sectie .klein{color:rgba(255,250,240,.72)}
@media (min-width:900px){
  .bon-sectie .bon-raster{grid-template-columns:1fr 1.05fr;grid-template-areas:"beeld kop" "beeld rest";gap:0 88px;align-items:center}
  .bon-kop{grid-area:kop;align-self:end}.bon-rest{grid-area:rest;align-self:start}.bon-beeld{grid-area:beeld}
  .bon-beeld img{transform:rotate(-2deg)}
}

/* praktisch */
.praktisch{display:grid;gap:36px;align-items:center}
.praktisch-foto{margin:0}
.praktisch-foto img{display:block;width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:2px;max-width:560px}
.adres{font:600 1.5rem/1.35 var(--serif);color:var(--bruin);white-space:pre-line;margin-bottom:12px}
@media (min-width:800px){.praktisch{grid-template-columns:1.1fr 1fr;gap:80px}}

/* vaste balk onderaan op de gsm (reserveren / bellen) */
.gsm-balk{display:none}
@media (max-width:999px){
  .gsm-balk{display:grid;grid-template-columns:1.5fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:25;padding:12px 12px max(12px,env(safe-area-inset-bottom));background:#231d19;border-top:1px solid rgba(201,184,138,.25);box-shadow:0 -8px 24px rgba(35,29,25,.18);transition:transform .25s ease}
  .gsm-balk .knop{min-height:48px;padding:10px 8px}
  .met-balk .voet{padding-bottom:110px}
  .met-balk .pagina-actie{display:none}
  .start-pagina .gsm-balk{transform:translateY(110%)}
  .start-pagina.balk-zichtbaar .gsm-balk{transform:none}
  html.menu-open .gsm-balk{display:none}
}

/* ---------- paginakop (andere pagina's) ---------- */
.pagina-kop{background:var(--bruin-diep);color:rgba(255,250,240,.8);margin:0 calc(50% - 50vw) 24px;padding:20px 20px 28px;text-align:center;position:relative}
.pagina-kop:after{content:"";position:absolute;left:50%;bottom:-1px;width:60px;height:1px;background:var(--goud);transform:translateX(-50%)}
.site .pagina-kop h1{color:#fffaf0;margin:0 auto .1em;max-width:16ch;font-size:clamp(2.375rem,6vw,3.6rem);line-height:1.05}
.pagina-kop .kicker{justify-content:center;color:var(--goud);margin-bottom:12px}
.pagina-kop .kicker:after{content:"";width:28px;height:1px;background:currentColor;opacity:.7;flex:none}
.pagina-kop p:not(.kicker){margin:10px auto 0;max-width:46ch;color:rgba(255,250,240,.78)}
@media (min-width:1000px){.pagina-kop{padding:72px 24px 64px;margin-bottom:48px}.site .pagina-kop h1{max-width:22ch}}
.pagina-kop .kicker{text-wrap:balance;text-align:center}
@media (max-width:480px){.pagina-kop .kicker:before,.pagina-kop .kicker:after{display:none}}

/* ---------- formulieren ---------- */
.formulier label{display:block;font-weight:600;font-size:.95rem;margin:16px 0 6px}
.formulier input[type=text],.formulier input[type=email],.formulier input[type=tel],.formulier input[type=number],.formulier input[type=date],.formulier input[type=time],.formulier input[type=url],.formulier input[type=password],.formulier select,.formulier textarea{display:block;width:100%;font:inherit;font-size:16px;padding:11px 12px;border:1px solid #8c7d68;border-radius:4px;background:#fff;color:var(--ink);margin-top:6px;transition:border-color .15s ease,box-shadow .15s ease}
/* E6 (audit 16/10/2026, WCAG 2.2 SC 1.4.11 ≥ 3:1): rand #8c7d68 = 4,0:1 op wit, 3,85 op ivoor, 3,42 op crème (was #a89884: 2,8:1);
   focus = een echte ring in bordeaux (9,2:1 op wit) i.p.v. de lichte schaduw (#efdfe1 = 1,29:1). */
.formulier input:focus,.formulier select:focus,.formulier textarea:focus{border-color:var(--kleur);outline:2px solid var(--kleur);outline-offset:2px;box-shadow:none}
.formulier textarea{min-height:80px}
.site .formulier input[type=text],.site .formulier input[type=email],.site .formulier input[type=tel],.site .formulier input[type=number],.site .formulier select{min-height:50px;padding:12px 14px}
.formulier .keuze{font-weight:500;display:flex;gap:12px;align-items:flex-start;margin:14px 0;cursor:pointer}
.formulier .keuze input{margin-top:3px;width:20px;height:20px;flex:none;accent-color:var(--kleur)}
.keuzeknoppen{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 6px}
.keuzeknoppen label{margin:0;font-weight:700}
.keuzeknoppen input{position:absolute;opacity:0;width:0;height:0}
.keuzeknoppen span{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 16px;border:1px solid #8c7d68;border-radius:4px;background:#fff;cursor:pointer;min-width:58px;text-align:center;transition:background-color .15s,border-color .15s,color .15s}
.keuzeknoppen span:hover{border-color:var(--bruin)}
.keuzeknoppen input:checked+span{background:var(--kleur);color:#fff;border-color:var(--kleur);box-shadow:inset 0 0 0 2px rgba(255,255,255,.22)}
.keuzeknoppen input:focus-visible+span{outline:3px solid var(--kleur);outline-offset:2px}
.keuzeknoppen span.vol{opacity:.45;text-decoration:line-through;cursor:not-allowed;background:transparent}
.aantal{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.aantal{align-items:stretch}
.aantal label{display:flex}
.aantal span{min-width:0;width:100%;height:100%;line-height:1.2;padding-left:4px;padding-right:4px}
.aantal.bedragen{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr}
@media (max-width:340px){.aantal{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* panelen op de publieke formulierpagina's */
.site .kaart{background:var(--ivoor);border:1px solid var(--lijn);border-radius:var(--radius);box-shadow:none;padding:24px 20px;margin:0 0 18px}
@media (min-width:700px){.site .kaart{padding:32px 36px}}
.site .kaart h2{font-size:1.9rem}
.formulier .stap-titel{display:flex;align-items:center;gap:12px;font:600 1.7rem/1.15 var(--serif);color:var(--bruin);margin:32px 0 8px}
.formulier .stap-titel:first-of-type{margin-top:0}
.stap-titel .nr{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--goud);font:700 .85rem/1 var(--sans);color:var(--kleur);flex:none}

/* meldingen */
.melding{border-radius:6px;padding:12px 16px;margin:0 0 14px;background:var(--ok-vlak);border-left:3px solid #2d8a4e}
.melding.fout{background:var(--fout-vlak);color:var(--fout);border-left-color:var(--fout)}
.site main>.melding{margin-top:20px}
.label{display:inline-block;font-size:.8rem;padding:2px 9px;border-radius:999px;background:#ece3cf;color:var(--ink);font-weight:700;vertical-align:middle}
.label.bevestigd,.label.betaald,.label.gekomen{background:var(--ok-vlak);color:#0a5a2a}
.label.aanvraag,.label.wacht_betaling{background:#fff3cd;color:#7a5a00}
.label.geannuleerd,.label.geweigerd,.label.verlopen,.label.opgebruikt{background:#ece3cf;color:#5a5048}
.label.no_show{background:var(--fout-vlak);color:var(--fout)}

/* ---------- de kaart ---------- */
.kaart-tabs{display:flex;gap:4px;margin:0 -20px 8px;padding:0 20px;border-bottom:1px solid var(--lijn);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.kaart-tabs::-webkit-scrollbar{display:none}
@media (max-width:699px){.kaart-tabs,.site .cat-balk .kaart-nav{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 82%,transparent)}}
.kaart-tabs.met-ruimte{margin-bottom:28px}
.kaart-tabs a{display:flex;align-items:center;justify-content:center;text-align:center;min-height:48px;padding:8px 8px;text-decoration:none;color:var(--stil);font:700 .74rem/1.25 var(--sans);letter-spacing:.1em;text-transform:uppercase;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;flex:none}
.kaart-tabs a:hover{color:var(--bruin)}
.kaart-tabs a.actief{color:var(--kleur);border-bottom-color:var(--kleur)}
@media (min-width:700px){.kaart-tabs{justify-content:center;gap:12px;margin-left:0;margin-right:0;padding:0}.kaart-tabs a{padding:10px 18px}}
.kaart-nav{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}
.kaart-nav a{white-space:nowrap;text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--lijn);border-radius:999px;padding:7px 13px;font-size:.9rem;font-weight:700}
.kaart-nav a.actief{background:var(--donker);color:var(--creme);border-color:var(--donker)}
.site .kaart-nav{display:flex;flex-wrap:nowrap;gap:8px;padding:10px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -20px;padding-left:20px;padding-right:20px}
.site .kaart-nav::-webkit-scrollbar{display:none}
.site .kaart-nav a{white-space:nowrap;text-decoration:none;color:var(--ink);background:var(--ivoor);border:1px solid var(--lijn);border-radius:999px;padding:0 16px;min-height:40px;display:inline-flex;align-items:center;font-size:.88rem;font-weight:600;flex:none}
.site .kaart-nav a:hover{border-color:var(--goud)}
.site .kaart-nav a.actief{background:var(--bruin-diep);color:var(--creme);border-color:var(--bruin-diep)}
.cat-balk{position:sticky;top:var(--kop-h);z-index:10;background:rgba(253,246,220,.96);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);margin:0 -20px 18px;padding:0 20px;border-bottom:1px solid var(--lijn)}
.site .cat-balk .kaart-nav{margin:0 -20px}
@media (min-width:1000px){.site .cat-balk .kaart-nav{justify-content:center;flex-wrap:wrap}}
.cat{background:transparent;padding:14px 0 8px;margin:0 0 18px}
.site .cat h2{font-size:2.1rem;color:var(--bruin);margin-bottom:2px}
.cat h2 small{display:block;font:italic 500 1.15rem/1.3 var(--serif);color:var(--stil);letter-spacing:0;margin-top:2px}
.cat-kop{border-bottom:1px solid var(--goud);padding-bottom:12px;margin-bottom:6px}
.gerecht{display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:16px;padding:14px 0;border-bottom:1px solid rgba(217,204,180,.7)}
.gerecht:last-of-type{border-bottom:0}
.gerecht .naam{font-weight:700;font-size:1rem;line-height:1.45}
.gerecht .fr,.gerecht .oms{display:block;color:var(--stil);font-weight:400;font-size:.9rem;line-height:1.5}
.gerecht .fr{font-style:italic}
.gerecht .prijs{white-space:nowrap;font:600 1.3rem/1.2 var(--serif);color:var(--kleur);font-variant-numeric:lining-nums tabular-nums}
.gerecht .prijs.dagprijs{font:700 .7rem/1.8 var(--sans);color:var(--stil);text-transform:uppercase;letter-spacing:.12em}
.cat-opm{font-size:.9rem;color:var(--stil);margin:12px 0 0;font-style:italic}
.kaart-opm{font-size:.9rem;color:var(--stil);white-space:pre-line;text-align:center;max-width:60ch;margin:24px auto}
@media (min-width:1000px){
  .kaart-kolommen{column-count:2;column-gap:72px}
  .kaart-kolommen .cat{break-inside:avoid;display:inline-block;width:100%}
}
.pagina-actie{text-align:center;margin:40px 0 0}

/* menu's */
.menus-raster{display:grid;gap:22px}
@media (min-width:900px){.menus-raster{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}}
.menu{position:relative;background:var(--ivoor);border:1px solid var(--lijn);border-radius:2px;padding:40px 26px 32px;margin:0;text-align:center;display:flex;flex-direction:column}
.menu:before{content:"";position:absolute;inset:7px;border:1px solid rgba(201,184,138,.6);pointer-events:none}
.site .menu h2{font-size:2rem;color:var(--bruin);margin-bottom:4px}
.menu .prijs{font:600 2.6rem/1.1 var(--serif);color:var(--kleur);margin-bottom:18px}
.menu .prijs .stil{font:500 .9rem/1 var(--sans);color:var(--stil)}
.menu .gang{padding:2px 0;line-height:1.55}
.menu .scheiding{width:32px;height:1px;background:var(--goud);margin:14px auto;font-size:0;color:transparent;overflow:hidden}
.menu .opm{font-size:.86rem;color:var(--stil);margin-top:18px;font-style:italic}
.menu .menu-onder{margin-top:auto;padding-top:14px}
.suggesties{position:relative;background:var(--bruin-diep);color:rgba(255,250,240,.86);border-radius:2px;padding:34px 26px;margin:0 0 28px;text-align:center}
.site .suggesties h2{color:#fffaf0;font-size:2rem}
.suggesties .kicker{justify-content:center;color:var(--goud)}
.suggesties .kicker:after{content:"";width:28px;height:1px;background:currentColor;opacity:.7;flex:none}
.suggesties p:not(.kicker){font:500 1.25rem/1.55 var(--serif);max-width:44ch;margin:0 auto}

/* ---------- reserveren ---------- */
.stappen{display:flex;gap:10px;margin:0 0 20px;font-size:.85rem;color:var(--stil);counter-reset:st}
.stappen span{flex:1;border-top:3px solid var(--lijn);padding-top:8px;font-weight:600}
.stappen span.actief{border-color:var(--kleur);color:var(--kleur);font-weight:700}
.stap-dicht{background:var(--ivoor);border:1px solid var(--lijn);border-radius:var(--radius);margin:0 0 18px}
.stap-dicht>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;font-weight:700}
.stap-dicht>summary::-webkit-details-marker{display:none}
.stap-dicht>summary small{display:block;font-weight:500;color:var(--stil);font-size:.85rem}
.stap-dicht>summary .wijzig{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--kleur);border-bottom:1px solid currentColor;white-space:nowrap}
.stap-dicht[open]>summary .wijzig{visibility:hidden}
.stap-dicht>.kaart{border:0;border-top:1px solid var(--lijn);border-radius:0 0 var(--radius) var(--radius);margin:0}
.dienst{margin:18px 0}
.dienst h3{margin-bottom:4px}
.dienst .opm{font-size:.9rem;color:var(--stil);margin:0 0 8px}
.dienst .keuzeknoppen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.dienst .keuzeknoppen span{width:100%;min-width:0;padding-left:4px;padding-right:4px}
.ernaast .keuzeknoppen{display:flex}
.samenvatting{background:var(--creme2);border-radius:6px;padding:14px 16px;margin:0 0 14px;font-weight:700;border-left:3px solid var(--goud)}
.samenvatting small{display:block;font-weight:400;color:var(--stil)}
.formulier-kolom{max-width:680px;margin:0 auto}
#uur{scroll-margin-top:84px}
.onder-tekst{text-align:center;color:var(--stil);margin-top:28px}

/* bevestiging */
.bevestiging{text-align:center}
.bevestiging .vink{display:flex;align-items:center;justify-content:center;width:64px;height:64px;margin:4px auto 18px;border-radius:50%;border:1px solid var(--goud);color:var(--kleur)}
.bevestiging .vink svg{width:28px;height:28px}
.bevestiging .samenvatting{text-align:left;font-size:1.05rem}
.bevestiging form,.bevestiging .knoppen-rij{margin-top:20px}
.annuleer-link{background:none;border:0;padding:10px 4px;min-height:44px;font:600 .95rem/1.2 var(--sans);color:var(--fout);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.bevestiging .knoppen-rij+form{margin-top:8px}
.knoppen-rij{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.site .bevestiging h1{font-size:clamp(2.2rem,8vw,2.9rem)}

/* ---------- cadeaubon ---------- */
.bon-pagina{display:grid;gap:28px}
.bon-zij{order:2}
.bon-voorbeeld{margin:0 0 4px}
.bon-voorbeeld img{display:block;width:100%;max-width:440px;margin:0 auto;border-radius:3px;box-shadow:0 16px 40px rgba(59,51,45,.22)}
.bon-voorbeeld figcaption{text-align:center;color:var(--stil);font-size:.85rem;margin:12px 0 20px}
.bon-intro p{max-width:60ch}
@media (min-width:1000px){
  .bon-pagina{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;align-items:start;max-width:1040px;margin:0 auto}
  .bon-zij{position:sticky;top:calc(var(--kop-h) + 24px)}
}
.soortkeuze{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.soortkeuze span{min-height:58px;font-size:1rem;width:100%}
.anders-veld[hidden]{display:none}
.bon-preview{background:var(--bruin-diep);color:var(--creme);border-radius:4px;padding:28px 24px;margin:0 0 18px;border:1px solid var(--goud);box-shadow:inset 0 0 0 6px var(--bruin-diep),inset 0 0 0 7px rgba(201,184,138,.5);text-align:center}
.bon-preview .code{font-family:ui-monospace,Consolas,monospace;font-size:1.3rem;letter-spacing:.08em;background:#fff;color:var(--bruin-diep);display:inline-block;padding:8px 14px;border-radius:4px;margin:12px 0}
.bon-preview .waarde{font:600 2.2rem/1.15 var(--serif);color:#fff}

/* ---------- voet ---------- */
.voet{background:var(--bruin-diep);color:#d9cfc2;padding:56px 24px 36px;margin-top:0;border-top:1px solid rgba(201,184,138,.2)}
.site main:not(.start){margin-bottom:0}
.voet-logo{display:block;width:120px;height:auto;margin:0 auto 40px}
.voet-in{max-width:1112px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:32px;font-size:15px;line-height:1.65}
@media (min-width:700px){.voet-in{grid-template-columns:1fr 1fr 1fr;gap:48px}}
.voet a{color:var(--goud)}
.voet h3{color:var(--goud);font:700 .75rem/1.3 var(--sans);text-transform:uppercase;letter-spacing:.2em;margin-bottom:14px}
.voet .uren-voet div{display:grid;grid-template-columns:2.6em 1fr;gap:12px;font-variant-numeric:tabular-nums}
.voet .uren-voet div.uren-dicht{display:block}
.voet .uren-voet b{text-transform:capitalize;font-weight:600}
.voet .uren-dicht{color:var(--goud);font-weight:700;margin-top:6px}
.voet-onder{max-width:1112px;margin:48px auto 0;padding-top:22px;border-top:1px solid rgba(201,184,138,.18);font-size:12px;line-height:1.6;color:#bdb2a5;text-align:center}
.uren-dicht{color:var(--kleur);font-weight:700}

/* oude klassen die het beheer of andere schermen nog gebruiken */
.tegel{background:var(--wit);border-radius:var(--radius);padding:18px;text-decoration:none;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.05);border:1px solid var(--lijn);display:block}
.tegel:hover{border-color:var(--goud)}
.tegel h2{color:var(--kleur);margin-bottom:.3rem}
.tegel .meer{font-weight:700;color:var(--kleur)}
.uren{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius);padding:14px 18px;margin:0 0 18px;display:grid;grid-template-columns:1fr;gap:6px}
@media (min-width:600px){.uren{grid-template-columns:1fr 1fr}}
.uren b{display:inline-block;min-width:3.2em}
.tegels{display:grid;grid-template-columns:1fr;gap:16px;margin:0 0 20px}
@media (min-width:700px){.tegels{grid-template-columns:1fr 1fr}}
.tegels>.kaart{margin:0}

/* beleving: zachte intrede van de heldfoto en van de blokken bij het scrollen (enkel met JS; zonder JS staat alles er gewoon) */
@keyframes held-in{from{transform:scale(1.06);opacity:.4}to{transform:none;opacity:1}}
.held-beeld img{animation:held-in 1.6s cubic-bezier(.2,.7,.2,1) both}
.js-intrede .intrede{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.js-intrede .intrede.zichtbaar{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.held-beeld img{animation:none}.js-intrede .intrede{opacity:1;transform:none;transition:none}}
@supports not (aspect-ratio:1/1){@media (max-width:999px){.held-beeld{height:100vw;max-height:72vh}}}

/* beheer */
.beheer{background:#f3f1ea}
.beheer .top{background:var(--donker)}
.beheer .top{position:static}
.beheer .top nav.beheer-nav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;justify-content:flex-start;display:flex;position:static;flex-direction:row;align-items:center;padding:0 0 2px;border:0;gap:2px}
.beheer .top nav.beheer-nav a{padding:6px 9px;font-size:.85rem;text-align:left;white-space:nowrap}
.beheer-nav::-webkit-scrollbar{display:none}
.beheer-nav a{font-size:.85rem;padding:5px 8px}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.scroll table{min-width:0}
@media (max-width:640px){.kol-breed{display:none}}
.gerechtrij .vink span{font-size:.85rem}
.gerechtrij .wis span{color:var(--fout)}
.mlab{display:none}
@media (max-width:640px){.gerechtrij.koprij{display:none}.gerechtrij{grid-template-columns:1fr 1fr;gap:8px 12px}.gerechtrij>div{grid-column:1/-1}.gerechtrij .vink{display:flex;align-items:center}.mlab{display:block;font-size:.8rem;color:var(--stil);font-weight:700;margin:2px 0}}
.beheer .top .merk{flex:none}
.beheer .top nav{flex:1;min-width:0}
.beheer main{max-width:960px}
table.lijst{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;font-size:.95rem}
table.lijst th,table.lijst td{padding:9px 10px;border-bottom:1px solid var(--lijn);text-align:left;vertical-align:top}
table.lijst th{background:var(--creme2);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--stil)}
table.lijst tr:last-child td{border-bottom:0}
table.lijst td.r,table.lijst th.r{text-align:right;white-space:nowrap}
/* slotcontrole 16/10/2026: lange e-mailadressen/onderwerpen maakten de tabel breder dan de gsm (390 px) → in de cel afbreken; elke tabel staat bovendien in een eigen .scroll-vak binnen de kaart */
table.lijst td{overflow-wrap:break-word}
/* slotcontrole 16/10/2026: ook buiten tabellen (opmerking zonder spaties, lang e-mailadres in een melding of kaart) duwde lange tekst het beheer breder dan 390 px → overal in het beheer mag een te lang woord afbreken */
.beheer main{overflow-wrap:break-word}
/* slotcontrole 16/10/2026: de mailtabellen (SOORT · AAN · GEPLAND · VERZONDEN) op de gsm als gestapelde rijen met een label per cel */
@media (max-width:640px){
  table.lijst.stapel,table.lijst.stapel tbody,table.lijst.stapel tr,table.lijst.stapel td{display:block;width:auto}
  table.lijst.stapel tr.kop,table.lijst.stapel td.kol-breed{display:none}
  table.lijst.stapel tr{padding:8px 0;border-bottom:1px solid var(--lijn)}
  table.lijst.stapel tr:last-child{border-bottom:0}
  table.lijst.stapel td{border:0;padding:2px 12px;overflow-wrap:anywhere}
  table.lijst.stapel td:not([data-label]){font-weight:700}
  table.lijst.stapel td[data-label]:before{content:attr(data-label);display:inline-block;min-width:5.6em;margin-right:6px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--stil)}
}
.bezetting{height:10px;background:var(--lijn);border-radius:999px;overflow:hidden;margin:4px 0 8px}
.bezetting i{display:block;height:100%;background:#2d8a4e}
.bezetting i.vol{background:var(--fout)}
.dagnav{display:flex;gap:6px;overflow-x:auto;padding:4px 0 12px}
.dagnav a{white-space:nowrap;text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--lijn);border-radius:10px;padding:6px 10px;font-size:.85rem;text-align:center;line-height:1.2}
.dagnav a b{display:block;font-size:1rem}
.dagnav a.actief{background:var(--donker);color:var(--creme);border-color:var(--donker)}
.dagnav a .n{display:block;font-size:.75rem;color:var(--stil)}
.dagnav a.actief .n{color:var(--goud)}
.dagnav a.is-vandaag{border:2px solid var(--kleur)}
.dagnav a.naar-vandaag{align-self:center;background:var(--kleur);color:#fff;border-color:var(--kleur);font-weight:700}
.res-rij{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--lijn);text-decoration:none;color:var(--ink)}
.res-rij:last-child{border-bottom:0}
.res-rij .uur{font-weight:800;font-size:1.05rem}
.res-rij .p{font-weight:800;font-size:1.2rem;text-align:right}
.res-rij .opm{display:block;font-size:.85rem;color:var(--stil)}
.statusknoppen{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.gerechtrij{display:grid;grid-template-columns:1fr 1fr 90px 60px 40px;gap:6px;align-items:center;margin:6px 0}
.gerechtrij input{margin:0!important}
.gerechtrij .nr{text-align:center;color:var(--stil);font-size:.85rem}
@media (max-width:640px){.gerechtrij{grid-template-columns:1fr 1fr;padding:8px 0;border-bottom:1px dotted var(--lijn)}.gerechtrij .nr{text-align:left}}
.dienstrij{background:var(--creme2);border-radius:10px;padding:10px 12px;margin:0 0 10px}
.dagvinkjes{display:flex;gap:4px;flex-wrap:wrap}
.dagvinkjes label{margin:0;font-weight:700}
.dagvinkjes input{position:absolute;opacity:0;width:0;height:0}
.dagvinkjes span{display:inline-block;width:40px;text-align:center;padding:6px 0;border:1px solid #cfc6ad;border-radius:8px;background:#fff;font-size:.85rem;cursor:pointer}
.dagvinkjes input:checked+span{background:var(--donker);color:var(--creme);border-color:var(--donker)}
.kpi{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px}
@media (min-width:600px){.kpi{grid-template-columns:repeat(4,1fr)}}
.kpi a,.kpi div{background:#fff;border-radius:12px;padding:12px 14px;text-decoration:none;color:var(--ink);border:1px solid var(--lijn)}
.kpi b{display:block;font-size:1.5rem;font-weight:800}
.kpi .let{border-color:#e0b000;background:#fff8dc}

@media print{
  .top,.voet,.dagnav,.knop,.statusknoppen,.beheer-nav,.geen-print,.gsm-balk,.cat-balk,.kaart-tabs{display:none!important}
  body,.beheer{background:#fff}
  main{padding:0;max-width:none}
  .kaart{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
  .pagina-kop{background:none;color:#000;margin:0;padding:0 0 12px}
  .site .pagina-kop h1{color:#000}
  .intrede{opacity:1!important;transform:none!important}
  .held{min-height:0!important;display:block!important;background:none!important;color:#000!important}
  .held-beeld{display:none!important}
  .op-donker,.suggesties,.bon-sectie,.held{background:none!important;color:#000!important}
  .op-donker h2,.suggesties h2,.bon-sectie h2,.held h1,.suggesties p,.bon-sectie p,.held p{color:#000!important}
  .menu,.cat{break-inside:avoid}
  .held{overflow:visible!important}
  .held-tekst{margin-top:0!important;padding:0 0 12px!important}
  .kicker,.held-kicker,.pijl,.sectie-kop p,.pagina-kop .kicker,.pagina-kop p{color:#000!important}
}

/* 9/10/2026: dagoverzicht — ✓ binnen, dag-instellingen per dienst, gesloten dienst */
.res-rij-knop{grid-template-columns:44px 1fr;padding:0}
.res-rij-knop .res-link{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:center;padding:10px 0;text-decoration:none;color:var(--ink);min-width:0}
.res-rij-knop form.binnen{margin:0;padding:0;max-width:none} /* 13/10: "binnen" is ook de containerklasse (padding 0 24px) → vinkje schoof over het uur */
.vink{width:36px;height:36px;border-radius:10px;border:2px solid var(--lijn);background:#fff;font-size:1.2rem;font-weight:800;color:#0a5a2a;cursor:pointer;line-height:1}
.vink.aan{background:var(--ok-vlak);border-color:#0a5a2a}
.dienst-dicht{opacity:.75;background:#f6f1e4}
.dag-instel{margin-top:8px}
.dag-instel-form{margin-top:8px}
.dag-instel-form .keuzeknoppen{margin-bottom:8px}
.uren-lijst .vakantie{font-style:italic}
/* 18/10/2026: echte openingsuren (links) naast de reservatie-uren (rechts, met kop) */
.open-uren{margin:14px 0 0;font-variant-numeric:tabular-nums;line-height:1.7}
.open-uren b{display:inline-block;min-width:5.5em;font-weight:700}
.uren-kop{margin-bottom:6px}
@media print{.vink{display:inline-block}.res-rij-knop{grid-template-columns:28px 1fr}.vink{width:22px;height:22px;border:1.5px solid #000;border-radius:4px;background:#fff!important;color:#000}}

/* 9/10/2026: inwisselscherm na het scannen — naam en saldo groot, leesbaar aan de toog */
.bon-groot{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin:6px 0 12px;padding:12px 14px;background:#f6f1e4;border-radius:12px}
.bon-groot-naam{font-size:1.5rem;font-weight:800;line-height:1.1}.bon-groot-naam small,.bon-groot-saldo small{display:block;font-size:.75rem;font-weight:500;color:var(--stil);margin-top:2px}
.bon-groot-saldo{font-size:1.9rem;font-weight:800;text-align:right;white-space:nowrap}

/* 9/10/2026: suggestie delen — op de site en het deelpaneel in het beheer */
.suggestie-sectie{background:#f6f1e4}
.suggestie-raster{display:grid;gap:22px;align-items:center}
@media (min-width:820px){.suggestie-raster{grid-template-columns:1.1fr 1fr;gap:40px}}
.suggestie-foto{margin:0;border-radius:18px;overflow:hidden;aspect-ratio:4/3;background:#ddd}.suggestie-foto img{width:100%;height:100%;object-fit:cover;display:block}
.suggestie-prijs{font-weight:800;font-size:1.4rem;margin:0 0 10px}
.suggestie-menu{display:grid;gap:14px;align-items:center}
@media (min-width:700px){.suggestie-menu{grid-template-columns:220px 1fr}}
.suggestie-menu figure{margin:0;border-radius:12px;overflow:hidden;aspect-ratio:4/3}.suggestie-menu img{width:100%;height:100%;object-fit:cover;display:block}
.suggestie-menu .prijs{font-size:1rem;color:var(--stil);font-weight:600}
.deel-raster{display:grid;gap:16px}
@media (min-width:760px){.deel-raster{grid-template-columns:320px 1fr;align-items:start}}
#deelbeeld{width:100%;max-width:320px;height:auto;border-radius:12px;border:1px solid var(--lijn);background:#1d1d1b;display:block}

/* 9/10/2026: oefenomgeving */
.oefen-balk{background:#ffd54a;color:#1d1d1b;font-weight:700;text-align:center;padding:8px 14px;font-size:.9rem;position:relative;z-index:30}

/* 9/10/2026: talen */
.taalkeuze{display:inline-flex;gap:2px;align-items:center;margin:0 4px}
.taalkeuze a{padding:5px 7px!important;font-size:.72rem!important;letter-spacing:.06em;opacity:.75}
.taalkeuze a.actief{opacity:1;border-color:var(--goud)!important}
.taalkeuze-voet a{margin-right:10px}.taalkeuze-voet a.actief{font-weight:800;text-decoration:none}
@media (max-width:999px){.taalkeuze{display:flex;justify-content:center;padding:6px 0}}
/* 15/10/2026: oogje bij wachtwoordvelden (beheer) */
.ww-veld{position:relative;display:block}.ww-veld input{padding-right:52px!important}.ww-oog{position:absolute;right:4px;top:calc(50% + 3px);transform:translateY(-50%);width:44px;height:40px;border:0;background:none;font-size:1.2rem;cursor:pointer;opacity:.55;line-height:1}.ww-oog.aan{opacity:1}

/* Expertaudit 16/10/2026, pakket reserveren — C1: knop "niet gekomen" in het dagoverzicht (derde kolom, enkel waar hij staat) */
.res-rij-knop.met-niet{grid-template-columns:44px 1fr 44px}
.res-rij-knop form.niet-gekomen{margin:0;padding:0;max-width:none;justify-self:end}
.vink.niet{color:var(--fout);font-size:1.05rem}
@media print{.res-rij-knop.met-niet{grid-template-columns:28px 1fr}}
/* D3: knoppen op de bevestigingspagina (agenda, route) */
.bevestiging .praktisch{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}
.bevestiging .annuleer-knop{color:var(--fout);border-color:var(--fout)}

/* Expertaudit 16/10/2026, pakket beheer op de iPhone (C2, C3, C4, C6) */
/* C2: op de gsm een vaste tabbalk onderaan (4 dagelijkse taken + Meer) i.p.v. de schuifrij bovenaan; de computer houdt de balk bovenaan */
.tabbalk{display:none}
@media (max-width:759px){
  .beheer .top nav.beheer-nav{display:none}
  body.beheer{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .tabbalk{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--donker);padding:0 2px env(safe-area-inset-bottom);border-top:1px solid rgba(201,184,138,.3)}
  .tabbalk>a,.tab-meer>summary{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:60px;padding:6px 2px;color:var(--creme);text-decoration:none;font:700 .72rem/1.1 var(--sans);position:relative;list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .tab-meer>summary::-webkit-details-marker{display:none}
  .tabbalk svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .tab-meer>summary svg circle{fill:currentColor;stroke:none}
  .tabbalk [aria-current=page]{color:var(--goud)}
  .tabbalk>a[aria-current=page]:before,.tab-meer>summary[aria-current=page]:before{content:"";position:absolute;top:0;left:22%;right:22%;height:3px;border-radius:0 0 3px 3px;background:var(--goud)}
  .tab-meer[open]>summary{color:var(--goud)}
  .tab-teller{position:absolute;top:5px;left:calc(50% + 5px);min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:#e0b000;color:#1d1d1b;font-size:.7rem;display:flex;align-items:center;justify-content:center}
  .tab-teller.spam{left:auto;right:calc(50% + 5px);background:var(--fout);color:#fff} /* herstel 2 (16/10/2026): spam-teller links van het icoon */
  .meer-paneel{position:fixed;left:8px;right:8px;bottom:calc(68px + env(safe-area-inset-bottom));background:#fff;border-radius:14px;box-shadow:0 10px 34px rgba(0,0,0,.28);padding:6px;display:flex;flex-direction:column}
  .meer-paneel a,.meer-paneel button{display:flex;align-items:center;min-height:50px;padding:0 14px;color:var(--ink);text-decoration:none;font:700 1rem/1.2 var(--sans);border:0;background:none;width:100%;text-align:left;border-radius:10px;cursor:pointer}
  .meer-paneel a[aria-current=page]{background:var(--creme2)}
  .meer-paneel form{margin:0;border-top:1px solid var(--lijn)}
  .meer-paneel button{color:var(--fout)}
  .beheer .top{padding:10px 16px}
}
@media print{.tabbalk{display:none!important}body.beheer{padding-bottom:0}}

/* C3: kaart — per gerecht één compacte rij (naam · prijs · op kaart), de rest onder "meer"; Bewaren blijft onderaan in beeld */
.cat-instel{border:1px solid var(--lijn);border-radius:10px;padding:0 12px;margin:0 0 6px}
.cat-instel>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px;font-weight:700;font-size:.92rem}
.cat-instel[open]{padding-bottom:12px}
.bgerecht{border-bottom:1px solid var(--lijn);padding:8px 0 4px}
.bgerecht .g-hoofd{display:grid;grid-template-columns:minmax(0,1fr) 104px 58px;gap:8px;align-items:center}
.cat-form .bgerecht label{margin:0;font-weight:500}
.cat-form .bgerecht input[type=text]{margin:0;padding:10px}
.bgerecht .g-prijs{position:relative}
.bgerecht .g-prijs .euro{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--stil);font-weight:700;pointer-events:none}
.cat-form .bgerecht .g-prijs input{padding-left:24px;text-align:right;font-weight:700}
.bgerecht .g-kaart{display:flex;flex-direction:column;align-items:center;gap:1px;font-size:.72rem;line-height:1.1;color:var(--stil);text-align:center;cursor:pointer;min-height:44px;justify-content:center}
.bgerecht .g-kaart input{width:22px;height:22px;margin:0;accent-color:var(--kleur)}
.g-meer>summary{cursor:pointer;font-size:.8rem;font-weight:700;color:var(--kleur);min-height:32px;display:flex;align-items:center;list-style:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-meer>summary::-webkit-details-marker{display:none}
.g-meer>summary:before{content:"▸";margin-right:6px}
.g-meer[open]>summary:before{content:"▾"}
.g-meer>summary .stil{font-weight:500;overflow:hidden;text-overflow:ellipsis}
.g-meer-velden{display:grid;grid-template-columns:1fr;gap:6px 12px;padding:2px 0 10px}
@media (min-width:600px){.g-meer-velden{grid-template-columns:1fr 1fr}}
.cat-form .g-meer-velden label{font-size:.8rem;color:var(--stil);font-weight:700}
.cat-form .g-meer-velden input[type=text]{margin-top:3px}
.cat-form .g-meer-velden .keuze.wis{color:var(--fout);font-size:.9rem;margin:6px 0 0;align-items:center}
.bgerecht:has(.wis input:checked){background:var(--fout-vlak)}
.bgerecht:has(.g-kaart input:not(:checked)) .g-naam input{color:var(--stil);text-decoration:line-through}
.bewaarbalk{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;gap:12px;margin:8px -18px -18px;padding:10px 18px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--lijn);border-radius:0 0 var(--radius) var(--radius);box-shadow:0 -6px 16px rgba(0,0,0,.06)}
/* beslist 16/10/2026: spam-aanvraag in het dagoverzicht grijs (telt niet mee); in Open aanvragen een eigen blok bovenaan */
.res-rij.spam-rij{background:#efede8}
/* herstel 2 (16/10/2026): niet meer de hele rij grijs (filter:grayscale maakte ook het rode spamlabel grijs) — enkel tekst en de andere labels */
.res-rij.spam-rij .res-link{color:#7d776f}
.res-rij.spam-rij .label:not(.no_show){filter:grayscale(1);opacity:.7}
.spam-blok,.spam-aanvraag{border-left:4px solid var(--fout)}
.bewaarbalk .knop.groot{margin:0;flex:1;min-height:50px}
.bewaar-stand{font-size:.8rem;color:var(--stil);flex:0 1 auto;max-width:42%;line-height:1.2}
.cat-form.gewijzigd .bewaar-stand{color:var(--kleur);font-weight:700}
@media (max-width:759px){.bewaarbalk{bottom:calc(60px + env(safe-area-inset-bottom));padding-bottom:10px;border-radius:0}}
@media print{.bewaarbalk{display:none}}

/* C4: telefonische reservatie — begintijden als knoppen (vol = doorstreept, mag wel) */
.uurknoppen{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.uurknop{min-height:44px;min-width:64px;padding:8px 12px;border:1px solid #8c7d68;border-radius:6px;background:#fff;font:700 1rem/1.1 var(--sans);color:var(--ink);cursor:pointer}
.uurknop small{font-weight:600;font-size:.7rem;color:var(--fout)}
.uurknop.vol{background:#f6f1e4;color:var(--stil)}
.uurknop.aan{background:var(--kleur);border-color:var(--kleur);color:#fff}
.uurknop.aan small{color:#fff}

/* C6: dagoverzicht — vinkje, ✗ en belknop 44 × 44 (iPhone-norm), samenvatting op de gsm in één rij */
.vink{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0}
.vink.bel{color:#0a5a2a;text-decoration:none}
.vink.bel svg{width:20px;height:20px;fill:currentColor}
.res-acties{display:flex;flex-direction:column;gap:6px;align-items:flex-end;justify-self:end}
.res-acties form{margin:0;padding:0;max-width:none}
.res-rij-knop.los{grid-template-columns:1fr}
.res-rij-knop.los.met-tel{grid-template-columns:1fr 44px}
@media print{.vink{display:inline-block;width:22px;height:22px}}
.kpi .kpi-tekst{font-size:1.05rem}
@media (max-width:599px){
  .kpi{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:10px}
  .kpi a{padding:7px 6px;border-radius:10px;text-align:center;line-height:1.15;min-height:44px}
  .kpi a .klein{font-size:.68rem;display:block}
  .kpi b{font-size:1.05rem;margin-top:2px}
  .kpi b .klein{display:inline;font-size:.68rem}
  .kpi .kpi-tekst{font-size:.78rem}
  .kpi .kpi-wijzig{display:none!important}
}
.gsm-enkel{display:none}
.dienst-leeg .kop-rij{margin-bottom:0}
.dienst-leeg>p.stil{margin:0 0 2px;font-size:.9rem}
@media (max-width:599px){
  .gsm-weg{display:none}.gsm-enkel{display:inline}
  .dag-kop{flex-wrap:nowrap;gap:8px;margin-bottom:10px}
  .dag-kop h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* de tab "Reservaties" en de datumtitel zeggen het al */
  .dag-knoppen{width:100%}.dag-knoppen .knop.klein:first-child{flex:1}
  .dag-knoppen{display:flex;gap:6px;flex-wrap:nowrap}
  .dag-knoppen .knop.klein{padding:8px 10px;font-size:.82rem;white-space:nowrap}
  .dienst-leeg{padding:12px 18px}
  .res-rij-knop{gap:8px}
  .res-rij-knop .res-link{grid-template-columns:42px minmax(0,1fr) auto;gap:8px}
  .kpi .kpi-tekst{font-size:.72rem}
}
/* Slotcontrole 16/10: lange woorden (url's, lange e-mailadressen, namen zonder spatie) breken af, ook publiek en in flex-items */
main{overflow-wrap:anywhere}.kpi,.kpi *,.bon-groot-saldo{overflow-wrap:normal}.kop-rij>*,.bon-groot-naam{min-width:0}.bon-groot-saldo{flex-shrink:0}.bon-groot-naam{overflow-wrap:anywhere}