/*
  "De kaart van de Burgemeister": de taal van hun gedrukte kaart (wit papier, roestrood, olijf, beige vlakken met
  ronde hoeken, stippellijn onder elke titel, schuine beschrijving, krabbels met een hoge hoed).
  Gevuld roestrood = "nu / jouw keuze" (status open, rij van vandaag, gekozen tabblad en knopje, hoofdknop).
  Het hoedje = "van de Burgemeister" (titel, krabbels, burgemeester-gerechten). Nooit het teken voor "nu".
*/
:root {
  --papier: #FFFFFF;
  --beige: #E2DFCB;
  --licht: #ECE5D5;
  --roest: #9B3620;
  --roest-donker: #7E2B19;
  --olijf: #8C8732;
  --olijf-diep: #6B6826;
  --inkt: #2B211C;
  --inkt-zacht: #5A4038;
  --muur: #243021;
  --muur-tekst: #F3F0E2;
  --muur-zacht: #CFCBB6;
  --lamp: #E3A54B;
  --kader: #CE9E87;
  --hout: #3A2A1E;

  /* tokens van basis.css */
  --vlak: var(--papier);
  --vlak-2: var(--licht);
  --tekst: var(--inkt);
  --zacht: var(--inkt-zacht);
  --lijn: rgba(43, 33, 28, .16);
  --accent: var(--roest);
  --op-accent: #FFFFFF;
  --link: var(--roest);
  --lavendel: var(--roest);
  --focus: var(--roest);
  --kop-vlak: rgba(255, 255, 255, .96);
  --letter-tekst: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --letter-kop: 'Rubik', system-ui, sans-serif;
  --letter-schuin: 'Crimson Pro', Georgia, serif;
  --letter-krabbel: 'Kaushan Script', 'Brush Script MT', cursive;
  --kop-gewicht: 700;
  --rond: 999px;
  --vlak-rond: 28px;
  --breed: 1200px;
  --kop-h: 64px;

  --rv-vlak: #FFFFFF;
  --rv-ster: var(--roest);
  --rv-schaduw: none;
  --ow-vlak: #1B2418;
  --ow-accent: var(--lamp);
  --ow-op-accent: #1B2418;
}
.donker {
  --vlak: var(--muur); --vlak-2: #2E3B2B; --tekst: var(--muur-tekst); --zacht: var(--muur-zacht);
  --lijn: rgba(243, 240, 226, .2); --accent: var(--lamp); --op-accent: #1B2418; --link: var(--lamp); --focus: var(--lamp);
  --kop-gewicht: 600;
  background: var(--vlak); color: var(--tekst); font-weight: 430;
}

body { font-size: 1.0625rem; line-height: 1.55; font-variant-numeric: lining-nums; }
@media (min-width: 900px) { body { font-size: 1.125rem; } }
h1, h2, h3, h4 { color: var(--roest); letter-spacing: -.005em; }
.donker h1, .donker h2, .donker h3 { color: var(--muur-tekst); }
.blok-titel { font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem); margin-bottom: .3em; }
.blok-intro { color: var(--zacht); font-size: 1.15rem; }
.klein-titel { font-size: 1.15rem; font-weight: 600; color: var(--roest); }
.foto img { border-radius: 0; background: var(--licht); }
.knop { font-weight: 600; letter-spacing: 0; }
.knop-lijn { border-color: var(--roest); color: var(--roest); border-width: 2px; }
.knop-lijn:hover { background: color-mix(in srgb, var(--roest) 8%, transparent); border-color: var(--roest); }
.donker .knop-lijn { border-color: var(--lamp); color: var(--muur-tekst); }
a { text-underline-offset: 3px; }
figure { margin: 0; }
figcaption { margin-top: .5rem; font-size: 1rem; color: var(--zacht); }

/* De stippellijn van hun kaart: alleen onder titels, als teken dat er een rubriek begint */
.streep {
  display: block; height: 2px; width: 100%; max-width: 22rem; margin: .5rem 0 1.1rem;
  background: repeating-linear-gradient(90deg, currentColor 0 7px, transparent 7px 13px); color: var(--roest);
}
.donker .streep { color: var(--lamp); }

/* Krabbels: Kaushan, licht gedraaid, met een hoge hoed. Nooit cijfers. */
.krabbel {
  font-family: var(--letter-krabbel); font-size: 1.6rem; line-height: 1.1; color: var(--roest); font-weight: 400;
  display: inline-flex; align-items: flex-end; gap: .25em; transform: rotate(-4deg); transform-origin: left bottom; margin: 0;
}
.hoedje { display: inline-block; width: 1.15em; height: auto; flex: none; vertical-align: -.1em; }
.krabbel .hoedje { width: .95em; transform: rotate(-12deg) translateY(-.15em); }

/* ---------- kop ---------- */
.kop { border-bottom: 1px solid transparent; }
html.is-gescrold .kop { box-shadow: none; border-bottom-color: var(--lijn); }
.kop-binnen { gap: 1rem; }
.kop-merk { margin-right: 0; }
.embleem {
  display: block; background: currentColor; color: var(--roest);
  -webkit-mask: url(../img/logo.svg) center / contain no-repeat; mask: url(../img/logo.svg) center / contain no-repeat;
}
.kop-logo { width: 46px; height: 46px; }
.kop-status { margin: 0 auto 0 0; opacity: 0; transform: translateY(-4px); transition: opacity .25s ease, transform .25s ease; pointer-events: none; }
html.voorbij-held .kop-status { opacity: 1; transform: none; }
.kop-nav { margin-left: auto; }
.kop-nav ul { gap: 1.4rem; }
.kop-nav a { font-weight: 500; }
.kop-knop { display: none; }
@media (min-width: 900px) {
  .kop-status { display: none; }
  .kop-knop { display: inline-flex; }
}
@media (max-width: 359px) { .kop-status { font-size: 1rem; } }

/* ---------- status (pil) ---------- */
.status {
  display: inline-flex; align-items: center; gap: .55rem; width: fit-content; margin: 0;
  padding: .4em .95em; border-radius: 999px; border: 2px solid var(--roest); color: var(--roest);
  font-weight: 600; line-height: 1.3;
}
.status .status-stip { width: 10px; height: 10px; background: currentColor; box-shadow: none; }
.status.is-open { background: var(--roest); color: #FFFFFF; }
.status.is-open .status-stip { background: #FFFFFF; box-shadow: 0 0 0 3px rgba(255, 255, 255, .3); }
.kop-status { padding: .25em .75em; font-size: 1rem; }

/* ---------- eerste scherm ---------- */
.held { padding: 0; }
.held-beeld { position: relative; }
.held-beeld .foto img {
  width: 100%; height: clamp(180px, calc(100svh - 386px), 420px); object-fit: cover; object-position: 22% 40%;
}
html[data-held="hoek"] .held-beeld .foto img { object-position: 30% 60%; }
html[data-held="bar"] .held-beeld .foto img { object-position: 70% 40%; }
.krabbel-foto {
  position: absolute; right: 18px; bottom: 14px; color: #FFFFFF; font-size: 2.2rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .65), 0 0 2px rgba(0, 0, 0, .6);
}
.held-tekst { padding: 14px var(--rand) 48px; }
.titel-hoed {
  font-size: clamp(2.35rem, 11.4vw, 3.4rem); line-height: 1; font-weight: 700; color: var(--roest);
  letter-spacing: -.015em; margin: .3em 0 .22em; text-wrap: nowrap;
}
.titel-regel { display: block; }
.titel-letters { display: inline; }
.hoed-i { position: relative; display: inline-block; }
.hoed-i::before {
  content: ''; position: absolute; left: 50%; bottom: .72em; width: .52em; height: .42em;
  background: url(../img/hoed.svg) center bottom / contain no-repeat;
  transform: translateX(-50%) rotate(-9deg); transform-origin: 50% 100%;
}
.hoed-laatste::before { transform: translateX(-46%) rotate(7deg); }
@media (prefers-reduced-motion: no-preference) {
  .hoed-laatste::before { animation: hoed-groet .9s cubic-bezier(.3, .7, .3, 1) .45s 1 both; }
}
@keyframes hoed-groet {
  0% { transform: translateX(-46%) rotate(7deg); }
  35% { transform: translateX(-46%) translateY(-.12em) rotate(-22deg); }
  70% { transform: translateX(-46%) rotate(12deg); }
  100% { transform: translateX(-46%) rotate(7deg); }
}
.held-regel { font-size: 1.125rem; line-height: 1.45; color: var(--inkt); max-width: 30em; margin-bottom: .75rem; }
.regel-lang { display: none; }
.held-status { margin-bottom: 0; }
.held-knoppen { margin-top: .75rem; gap: 10px; }
.held-status { font-size: 1rem; padding: .35em .85em; }
@media (max-width: 899px) { .held-knoppen .knop { padding-inline: .9em; } }
.held-knoppen .knop { flex: 1 1 auto; }
.held-knoppen .knop-vol { flex-grow: 2; }
.bel-nummer { display: none; }
.held-dicht { margin: .8rem 0 0; color: var(--zacht); font-size: 1rem; }
.prijsregels { margin-top: 1.6rem; max-width: 28rem; }
.prijsregel {
  display: flex; align-items: baseline; gap: .6rem; min-height: 44px; padding: .45rem 0;
  color: var(--inkt); text-decoration: none; font-weight: 500;
}
.prijsregel:hover .pr-naam { text-decoration: underline; }
.pr-naam { display: inline-flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.pr-stip { flex: 1; min-width: 1.5rem; border-bottom: 2px dotted var(--kader); transform: translateY(-.25em); }
.pr-prijs { font-weight: 600; color: var(--roest); white-space: nowrap; font-size: 1.15rem; }
.pr-krabbel { font-size: 1.5rem; }
.pr-krabbel-tekst { display: none; }
.held-naar { margin: .4rem 0 0; }
.held-dagen { margin: .8rem 0 0; font-weight: 500; }
.snel ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1rem; }
.snel a { display: inline-flex; align-items: center; min-height: 44px; padding: .4em 1em; border-radius: 999px; background: var(--licht); color: var(--inkt); font-weight: 600; text-decoration: none; }
.snel a:hover { background: var(--beige); }
@media (min-width: 900px) { .snel { display: none; } }
.pr-uitleg { margin: -.2rem 0 .3rem; font-family: var(--letter-schuin); font-style: italic; font-weight: 500; font-size: 1.15rem; color: var(--inkt); }
.held-special { margin: .5rem 0 0; font-weight: 500; }
.held-special a { display: inline-block; padding-block: 4px; font-weight: 600; }
.inline-link { display: inline-block; padding-block: 3px; font-weight: 600; }
.held-naar a { font-weight: 600; }
.held-moment {
  display: grid; gap: .3rem; margin-top: 1.4rem; padding: .9rem 1.1rem; max-width: 30rem;
  border: 2px dashed var(--kader); border-radius: 20px;
}
.held-moment p { display: flex; gap: .55rem; align-items: flex-start; margin: 0; }
.held-moment .hoedje { width: 1.5em; margin-top: .05em; }
.held-moment a { font-weight: 600; min-height: 32px; }

/* gsm laag (oudere en kleine toestellen) */
@media (max-height: 600px) and (max-width: 899px) {
  .titel-hoed { font-size: clamp(2.2rem, 10.8vw, 3rem); margin-top: .3em; }
  .held-tekst { padding-top: 14px; }
  .held-beeld .foto img { height: clamp(180px, calc(100svh - 358px), 420px); }
}

@media (min-width: 900px) {
  .held { padding: clamp(24px, 3vw, 48px) 0 clamp(56px, 6vw, 96px); }
  .held-raster {
    max-width: var(--breed); margin-inline: auto; padding-inline: var(--rand);
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(32px, 4vw, 64px); align-items: center;
  }
  .held-beeld { order: 2; }
  .held-beeld .foto img { height: auto; aspect-ratio: 4 / 3.3; border-radius: var(--vlak-rond); object-position: 20% 40%; }
  .held-tekst { padding: 0; }
  .titel-hoed { font-size: clamp(3.4rem, 5.3vw, 5.1rem); margin-top: .2em; }
  .regel-lang { display: inline; }
  .regel-kort { display: none; }
  .held-regel { font-size: 1.25rem; }
  .held-knoppen { flex-wrap: nowrap; }
  .held-knoppen .knop { flex: 0 0 auto; }
  .held-status { font-size: 1.0625rem; padding: .45em 1em; }
  .bel-nummer { display: inline; }
  .pr-krabbel-tekst { display: inline; }
  .krabbel-foto { right: 28px; bottom: 22px; font-size: 2.8rem; }
}

/* ---------- Waarom Bie de Burgemeister? ---------- */
.burgemeesters { padding-block: var(--sectie); }
.bm-kop { display: grid; gap: 28px; align-items: start; }
.bm-tekst { max-width: 40rem; }
.citaat { margin: 0 0 1.2rem; padding: 0; }
.citaat p { font-family: var(--letter-schuin); font-style: italic; font-size: 1.45rem; line-height: 1.45; font-weight: 500; }
.citaat footer { margin-top: .5rem; font-weight: 600; color: var(--lamp); }
.bm-zin { color: var(--muur-zacht); }
.burgemeesters > .wrap { display: flex; flex-direction: column; }
.bm-kop { display: contents; }
.bm-lampen { order: 3; margin-top: 2.4rem; }
.bm-lampen img { border-radius: 20px; aspect-ratio: 4 / 3; object-fit: cover; }
.donker figcaption { color: var(--muur-zacht); }

.lijsten { order: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 18px; margin-top: 2.6rem; }
.lijst-item { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lijst { background: var(--hout); padding: 8px; border-radius: 3px; box-shadow: 0 14px 24px -14px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.lijst-pp { background: var(--licht); padding: 10px; }
.lijst-pp .foto img, .lijst-pp .silhouet { aspect-ratio: 4 / 5; width: 100%; height: auto; object-fit: cover; filter: grayscale(.25) sepia(.15); }
.lijst-pp .silhouet {
  display: block; background: var(--inkt); filter: none;
  -webkit-mask: url(../img/silhouet.svg) center 60% / auto 82% no-repeat; mask: url(../img/silhouet.svg) center 60% / auto 82% no-repeat;
}
.lijst figcaption { margin: 0; padding: .45rem .3rem .2rem; background: var(--licht); color: var(--inkt-zacht); font-family: var(--letter-schuin); font-style: italic; font-size: 1.1rem; line-height: 1.3; }
.lijst-item:nth-child(3) .lijst-pp { background: var(--beige); }
.plaatje { display: flex; flex-direction: column; gap: .15rem; padding: .8rem .9rem; border: 1.5px solid color-mix(in srgb, var(--lamp) 70%, transparent); border-radius: 4px; flex: 1; }
.bm-naam { font-size: 1.2rem; font-weight: 600; }
.bm-jaren { margin: 0; font-weight: 600; color: var(--lamp); }
.bm-zin-kort { margin: .2rem 0 .6rem; color: var(--muur-zacht); font-size: 1rem; line-height: 1.45; }
.naar-gerecht {
  margin-top: auto; display: grid; gap: .1rem; padding: .6rem .7rem; border-radius: 10px; min-height: 44px;
  background: rgba(243, 240, 226, .08); color: var(--muur-tekst); text-decoration: none; font-size: 1rem; line-height: 1.35;
}
.naar-gerecht:hover { background: rgba(243, 240, 226, .16); }
.naar-label { color: var(--lamp); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.naar-wat { font-weight: 500; }
.naar-prijs { font-weight: 600; }
@media (min-width: 900px) {
  .bm-kop { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; }
  .bm-lampen { order: 0; margin-top: 0; }
  .lijsten { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 3.4rem; }
  .lijst-item:nth-child(2) { margin-top: 26px; }
  .lijst-item:nth-child(4) { margin-top: 12px; }
  .lijst-item:nth-child(3) { margin-top: -6px; }
}
@media (max-width: 380px) {
  .lijsten { gap: 28px 12px; }
  .plaatje { padding: .7rem .65rem; }
  .bm-naam { font-size: 1.1rem; }
}

/* ---------- de kaart ---------- */
.kaart { padding-block: var(--sectie); }
.kaart-kop { display: grid; gap: 24px; align-items: start; margin-bottom: 2rem; }
.kaart-uren { font-weight: 500; margin-top: .4rem; }
.kaart-brood img { border-radius: 20px; aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 899px) { .kaart-brood { display: none; } }
.legende.legende-rij { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; margin: -.4rem 0 1.6rem; color: var(--inkt); }
.legende-rij .teken { color: var(--inkt-zacht); }
@media (min-width: 900px) {
  .kaart-kop { grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; }
  .kaart-brood img { aspect-ratio: 4 / 3; }
}
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.6rem; }
.tab {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: .5em 1.2em; border-radius: 999px;
  border: 2px solid var(--roest); background: transparent; color: var(--roest); font: 600 1.05rem/1.2 var(--letter-tekst); cursor: pointer;
}
.tab:hover { background: color-mix(in srgb, var(--roest) 8%, transparent); }
.tab[aria-selected="true"] { background: var(--roest); color: #FFFFFF; }
.tab .vandaag-label { margin: 0; background: #FFFFFF; color: var(--roest); border: 1.5px solid var(--roest); }
.tab[aria-selected="true"] .vandaag-label { border-color: #FFFFFF; }
.vandaag-label { font-size: 1rem; }

.kaart-paneel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.kaart-paneel:focus-visible { outline-offset: 8px; border-radius: 12px; }
.kaart-tab {
  margin: 0; padding: .5rem 1.2rem; border-radius: 0 999px 999px 0; margin-left: calc(var(--rand) * -1); width: fit-content;
  background: #403F41; color: #FFFFFF; font-weight: 300; font-size: 1.6rem; line-height: 1.2; letter-spacing: .01em;
}
.kaart-diner .kaart-tab { background: var(--roest); }
.kaart-dranken .kaart-tab { background: var(--beige); color: var(--inkt); }
.kaart-kinder .kaart-tab { background: var(--olijf-diep); }
@media (min-width: 1100px) {
  .kaart-paneel { grid-template-columns: 92px minmax(0, 1fr); gap: 36px; align-items: start; }
  .kaart-tab {
    margin: 0; padding: 1.6rem 0 2rem; width: 92px; min-height: 380px; border-radius: 0 0 26px 26px;
    writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; justify-content: flex-start;
    font-size: 3.3rem; border-radius: 26px 26px 0 0;
  }
}

.rubrieken { columns: 1; column-gap: 28px; }
@media (min-width: 760px) { .rubrieken { columns: 2; } }
.rub {
  position: relative; break-inside: avoid; margin: 0 0 28px; padding: 26px 24px 22px; border-radius: var(--vlak-rond);
  display: flow-root;
}
.rub.met-krabbel { margin-top: 26px; }
.rubrieken > .rub:first-child.met-krabbel { margin-top: 26px; }
.rub:focus { outline: none; }
.rub-beige { background: var(--beige); }
.rub-licht { background: var(--licht); }
.rub-kader { background: var(--papier); border: 2px solid var(--kader); }
.rub-olijf { background: var(--olijf-diep); color: #FFFFFF; }
.rub-roest { background: var(--roest); color: #FFFFFF; }
.rub-titel { font-size: 1.75rem; text-align: center; font-weight: 700; }
.rub .streep { margin: .55rem auto 1rem; max-width: none; }
.rub-olijf .rub-titel, .rub-roest .rub-titel, .rub-olijf .streep, .rub-roest .streep { color: #FFFFFF; }
.rub-noot { font-family: var(--letter-schuin); font-style: italic; font-size: 1.2rem; line-height: 1.4; color: var(--inkt-zacht); margin-bottom: 1rem; }
.rub-olijf .rub-noot, .rub-roest .rub-noot, .rub-olijf p, .rub-roest p { color: #FFFFFF; }
.rub-noot-onder { margin: 1rem 0 0; }
.rub-tekst { margin-top: .4rem; }
.rub .krabbel-rub { position: absolute; z-index: 2; top: -24px; right: 18px; font-size: 1.65rem; background: var(--papier); color: var(--roest); padding: 0 .4rem; border-radius: 10px; }

.gerechten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.gerecht-tip { margin: .2rem 0 0; font-weight: 600; color: var(--roest); font-size: 1rem; }
.gerecht { position: relative; border-radius: 12px; margin-inline: -8px; padding: 4px 8px; transition: box-shadow .3s ease, background-color .3s ease; }
.gerecht:focus { outline: none; }
.gerecht.is-gewezen { box-shadow: 0 0 0 3px var(--roest); background: color-mix(in srgb, var(--roest) 7%, var(--papier)); }
.rub-olijf .gerecht.is-gewezen, .rub-roest .gerecht.is-gewezen { box-shadow: 0 0 0 3px #FFFFFF; background: transparent; }
.gerecht-kop { display: flex; justify-content: space-between; align-items: baseline; gap: .4rem 1rem; margin: 0; }
.gerecht-naam { font-weight: 600; color: var(--roest); font-size: 1.1rem; line-height: 1.3; min-width: 0; }
.gerecht-naam .hoedje { width: 1.3em; margin-right: .3em; vertical-align: -.12em; }
.gerecht-onder { font-weight: 400; font-size: 1rem; }
.rub-olijf .gerecht-naam, .rub-roest .gerecht-naam, .rub-olijf .prijs, .rub-roest .prijs { color: #FFFFFF; }
.prijs { font-weight: 600; white-space: nowrap; color: var(--inkt); font-size: 1.1rem; }
.prijs-maten { display: grid; justify-items: end; gap: 0; }
.maat { white-space: nowrap; }
.maten-rij { display: flex; flex-wrap: wrap; gap: .2rem 1.4rem; margin: .4rem 0 0; }
.maten-rij .maat { display: inline-flex; gap: .4rem; align-items: baseline; padding: .15rem .7rem; border-radius: 999px; border: 1.5px solid currentColor; }
.rub-olijf .maten-rij .maat, .rub-roest .maten-rij .maat { color: #FFFFFF; }
.kaart-paneel > *, .kaart-inhoud > *, .rub > *, .drank-groepen > *, .drank-binnen > *, .drank-rub > * { min-width: 0; }
.drank-groep { min-width: 0; max-width: 100%; }
.gerecht-tekst, .gerecht-advies, .gerecht-naam { overflow-wrap: break-word; }
.maat-naam { font-weight: 400; font-size: 1rem; color: var(--inkt-zacht); }
.rub-olijf .maat-naam, .rub-roest .maat-naam { color: #F4F1E4; }
.gerecht-tekst, .gerecht-optie, .gerecht-advies { margin: .1rem 0 0; font-family: var(--letter-schuin); font-style: italic; font-weight: 500; font-size: 1.22rem; line-height: 1.35; color: var(--inkt); }
.gerecht-advies { color: var(--olijf-diep); }
.rub-olijf .gerecht-tekst, .rub-roest .gerecht-tekst, .rub-olijf .gerecht-optie, .rub-roest .gerecht-optie { color: #F4F1E4; }
.gerecht-lijst { margin: .3rem 0 0; font-family: var(--letter-schuin); font-style: italic; font-size: 1.25rem; line-height: 1.4; }
.gerecht-lijst li::before { content: '\2022\00a0'; }
.tekens { display: inline-flex; gap: 2px; margin-left: .4rem; vertical-align: -.15em; color: var(--inkt-zacht); }
.rub-olijf .tekens, .rub-roest .tekens { color: #FFFFFF; }
.teken { width: 20px; height: 20px; }
.label { display: inline-block; margin-left: .3rem; padding: 0 .5rem; border-radius: 999px; border: 1.5px solid var(--roest); font-size: 1rem; font-weight: 600; color: var(--roest); white-space: nowrap; }
.krabbel-gerecht { display: flex; margin: .2rem 0 .1rem auto; width: fit-content; font-size: 1.5rem; transform: rotate(-3deg); }
.krabbel-vega { color: var(--olijf-diep); }
.krabbel-vega .teken { width: 1em; height: 1em; }
.alleen-breed { display: none; }
@media (min-width: 760px) { .alleen-breed { display: flex; } }

.special { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .35); }
.special-foto img { border-radius: 14px; aspect-ratio: 1; object-fit: cover; }
.special-titel { font-weight: 600; margin: 0 0 .2rem; }
.special-tekst { margin: 0; font-family: var(--letter-schuin); font-style: italic; font-size: 1.2rem; line-height: 1.35; }
.salades { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--lijn); }
.salades-foto img { border-radius: 12px; aspect-ratio: 4 / 5; object-fit: cover; }
.salades p { margin: 0; }
.salades-zin { font-weight: 600; }
.salades a { display: inline-block; padding-block: 4px; font-weight: 600; }

.legende { display: grid; gap: .3rem; margin-top: .8rem; }
.legende li { display: flex; align-items: center; gap: .6rem; }
.legende .teken { width: 22px; height: 22px; }
.kinder-zin { font-weight: 600; margin-bottom: 1.4rem; }
.kadotip { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.4rem; margin: .6rem 0 0; }
.kadotip .krabbel { font-size: 1.9rem; }
.kadotip .tekst-link { font-weight: 600; }

/* dranken: uitklappers */
.drank-groepen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.drank-groep { border-radius: 22px; background: var(--licht); }
.drank-groep summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 60px; padding: .8rem 1.4rem;
  cursor: pointer; list-style: none; border-radius: 22px;
}
.drank-groep summary::-webkit-details-marker { display: none; }
.drank-groep summary::after { content: ''; width: 12px; height: 12px; border-right: 2.5px solid var(--roest); border-bottom: 2.5px solid var(--roest); transform: rotate(45deg) translateY(-3px); flex: none; transition: transform .2s ease; }
.drank-groep[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.drank-titel { font-size: 1.4rem; font-weight: 700; color: var(--roest); }
.drank-aantal { margin-left: auto; color: var(--inkt-zacht); font-size: 1rem; }
.drank-binnen { padding: .2rem 1.4rem 1.6rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.drank-kolommen { columns: 1; column-gap: 36px; }
@media (min-width: 760px) { .drank-kolommen { columns: 2; } }
@media (min-width: 900px) { .drank-binnen.met-foto { grid-template-columns: minmax(0, 1fr) 240px; align-items: start; } }
.drank-foto img { border-radius: 16px; max-width: 280px; }
.drank-rub { break-inside: avoid; margin-bottom: 1.6rem; }
.drank-rub-titel { font-size: 1.2rem; font-weight: 700; margin-bottom: .6rem; padding-bottom: .4rem; border-bottom: 2px dashed var(--kader); }
.drank-rub .gerechten { gap: .55rem; }
.drank-rub .gerecht-naam { font-size: 1.05rem; }
.drank-rub .gerecht-tekst, .drank-rub .gerecht-advies { font-size: 1.15rem; }

/* ---------- Maak plezeer in Awt Gelaen ---------- */
.vieren { background: var(--licht); }
.vieren-raster { display: grid; gap: 28px; }
.vieren-foto img { border-radius: 20px; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 45%; }
.vier-rijen { display: grid; }
.vier-rij { padding: 1.6rem 0; border-top: 1.5px solid var(--kader); }
.vier-rij:first-child { border-top: 0; padding-top: 0; }
.vier-titel { font-size: 1.5rem; margin-bottom: .5rem; display: flex; align-items: flex-end; gap: .45rem; }
.vier-titel .hoedje { width: 1.4em; }
.vier-rij > p { max-width: 38rem; }
.vier-prijs { font-weight: 600; font-size: 1.2rem; }
.vier-stand { font-weight: 600; color: var(--roest); }
.vier-moment { padding-left: 1.1rem; border-left: 4px solid var(--roest); border-top: 0; margin-bottom: 1rem; }
.citaat-klein p { font-size: 1.3rem; color: var(--inkt); }
.groep-form { max-width: 38rem; }
.groep-velden { display: grid; gap: 1.1rem; }
@media (min-width: 560px) { .groep-velden { grid-template-columns: minmax(0, 1fr) minmax(0, 12rem); } }
.res-veld { background: #FFFFFF; }
.res-fout { color: var(--roest); }
.groep-klaar { margin: 0; padding: .8rem 1rem; border-radius: 12px; background: #FFFFFF; }
.groep-klaar a { display: inline-block; padding-block: 3px; }
@media (min-width: 900px) {
  .vieren-raster { grid-template-columns: minmax(0, 1fr) 400px; column-gap: 64px; align-items: start; }
  .vieren-kop { grid-column: 1; }
  .vieren-foto { grid-column: 2; grid-row: 1 / span 2; }
  .vieren-foto img { aspect-ratio: 4 / 5; }
  .vier-rijen { grid-column: 1; }
}

/* ---------- reviews ---------- */
.reviews { background: var(--papier); }
.rv-kaart { border: 2px solid var(--beige); border-radius: 22px; }
.rv-tekst p { font-family: var(--letter-schuin); font-style: italic; font-size: 1.3rem; line-height: 1.45; }
.rv-tekst strong { font-weight: 700; color: var(--roest); }
.rv-score-getal { color: var(--roest); }
.rv-voet .tekst-link { font-weight: 600; }
@media (min-width: 1100px) {
  .rv-boven { grid-template-columns: minmax(0, 1fr) auto; }
  .rv-lijst { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .rv-kaart:first-child { grid-row: span 2; padding: 2.2rem 2rem; background: var(--licht); border-color: var(--licht); }
  .rv-kaart:first-child .rv-tekst { flex: 0; }
  .rv-kaart:first-child .rv-tekst p { font-size: 1.75rem; line-height: 1.35; }
}

/* ---------- bezoek ---------- */
.bezoek { background: var(--beige); }
.bezoek-raster { display: grid; gap: 36px; margin-top: 1.6rem; }
.bezoek-raster > * { min-width: 0; }
.bezoek-status { margin: .4rem 0 1rem; font-size: 1rem; }
.uren-tabel th, .uren-tabel td { border-bottom-color: rgba(43, 33, 28, .14); }
.uren-tabel th { font-weight: 600; }
.uren-tijd { display: block; font-weight: 600; }
.uren-keuken { display: block; font-size: 1rem; color: var(--inkt); }
.uren-anders { display: block; font-size: 1rem; font-weight: 600; color: var(--roest); }
.uren-tabel tr.vandaag .uren-keuken, .uren-tabel tr.vandaag .uren-anders { color: #FFFFFF; }
.uren-tabel tr.vandaag .vandaag-label { background: #FFFFFF; color: var(--roest); }
.route-lijst { display: grid; gap: 0; margin: .4rem 0 1rem; }
.route-lijst .tekst-link, .contact-lijst a { display: inline-flex; align-items: center; gap: .55em; min-height: 44px; font-weight: 500; color: var(--roest); }
.contact-lijst { display: grid; justify-items: start; }
.bezoek-noot { color: var(--inkt); }
.bezoek-fotos { display: grid; gap: 14px; }
.bezoek-fotos img { border-radius: 20px; aspect-ratio: 16 / 10; object-fit: cover; }
.bezoek-foto-2 { display: none; }
.vacature { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1.5px solid var(--kader); }
.vacature a { display: inline-block; padding-block: 4px; font-weight: 600; white-space: nowrap; }
@media (max-width: 759px) {
  .bezoek-fotos { order: 2; }
  .bezoek-waar { order: 3; }
}
@media (min-width: 760px) {
  .bezoek-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bezoek-fotos { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .bezoek-foto-2 { display: block; }
}
@media (min-width: 1100px) {
  .bezoek-raster { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1fr); gap: 44px; }
  .bezoek-fotos { grid-column: auto; grid-template-columns: 1fr; }
  .bezoek-fotos img { aspect-ratio: 4 / 3; }
}

/* ---------- voet ---------- */
.voet { --voet-vlak: var(--muur); --voet-tekst: var(--muur-tekst); padding-block: 64px 36px; }
.voet-raster { gap: 36px; }
.voet-merk { align-items: flex-start; }
.voet-logo { width: 104px; height: 104px; color: var(--muur-tekst); }
.voet-leus { font-family: var(--letter-schuin); font-style: italic; font-size: 1.45rem; line-height: 1.35; max-width: 16em; margin-bottom: .6rem; }
.voet-groet { color: var(--lamp); font-size: 1.9rem; }
.voet-team { margin: .5rem 0 0; font-weight: 600; }
.voet-uren li { display: flex; gap: .7rem; }
.voet-uren .uren-tijd { display: inline; }
.voet-nav ul { display: flex; flex-wrap: wrap; gap: .2rem 1.4rem; }
.voet-nav a { display: inline-block; padding-block: .55rem; font-weight: 500; }
@media (min-width: 900px) {
  .voet-raster { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .voet-nav ul { flex-direction: column; gap: 0; }
}

/* ---------- onderbalk (gsm) ---------- */
.onderbalk { grid-template-columns: 1.3fr 1fr 1fr; }
.onderbalk .knop { padding-inline: .5em; gap: .4em; }
.onderbalk .knop { min-height: 50px; }

/* ---------- beweging ---------- */
@media (prefers-reduced-motion: reduce) {
  .hoed-laatste::before { animation: none; }
}