/* Snackbar & Lunchroom Pico-Bello
   Basis uit de Winkelierweb-template: alleen reset en toegankelijkheid.
   Al het andere (fonts, kleuren, layout, menu, open/gesloten-status, animaties) is per winkel uniek
   en schrijf je hieronder bij "Design". De class-afspraken met js/main.js staan in index.html. */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; line-height: 1.5; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
address { font-style: normal; }

/* ---------- Toegankelijkheid ---------- */
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .75rem 1rem; }
.skip-link:focus { top: 1rem; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Design ---------- */
/* Concept: de groen-wit gestreepte luifel van de pui aan de Bloemendaalseweg, de boogramen van het
   pand en de krijtborden achter de toonbank. Groen van de luifel, crème van de gevel, mayogeel als accent. */

@font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/bricolage-grotesque-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/fonts/figtree-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/fonts/figtree-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("/fonts/caveat-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --groen: #1e4a36;
  --groen-donker: #143325;
  --groen-licht: #e3ece5;
  --creme: #f8f4ea;
  --papier: #fffdf7;
  --mayo: #f3bb2e;
  --mayo-licht: #fde7a8;
  --krijtbord: #1d211f;
  --hout: #8a5a34;
  --inkt: #1b1f1c;
  --grijs: #4f5751;
  --kop: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --tekst: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand: "Caveat", "Comic Sans MS", cursive;
  --max: 1200px;
  --pad: clamp(1.1rem, 4vw, 2.5rem);
  --r: 14px;
}

body { font-family: var(--tekst); font-size: 1.0625rem; color: var(--inkt); background: var(--creme); }
a { color: var(--groen); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--kop); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: var(--groen-donker); text-wrap: balance; }
h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); }
h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; }
p + p { margin-top: .9em; }
.skip-link { background: var(--mayo); color: var(--inkt); font-weight: 700; border-radius: 8px; }

/* krijt-accent (handschrift zoals op de menuborden) */
.krijt { font-family: var(--hand); font-weight: 700; font-size: clamp(1.5rem, 3vw, 1.9rem); line-height: 1; color: var(--hout); transform: rotate(-2deg); display: inline-block; margin-bottom: .35rem; }
.krijt--licht { color: var(--mayo); }
.eyebrow { font-weight: 700; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--groen); }

/* ---------- Knoppen ---------- */
.btn { display: inline-flex; align-items: center; gap: .55rem; min-height: 48px; padding: .7rem 1.35rem; border-radius: 999px; font-weight: 700; text-decoration: none; line-height: 1.1; border: 2px solid transparent; transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn--mayo { background: var(--mayo); color: var(--inkt); box-shadow: 0 4px 0 #c48d0e; }
.btn--mayo:hover { box-shadow: 0 6px 0 #c48d0e; }
.btn--groen { background: var(--groen); color: #fff; box-shadow: 0 4px 0 var(--groen-donker); }
.btn--line { border-color: var(--groen); color: var(--groen); background: transparent; }
.btn--line:hover { background: var(--groen); color: #fff; }
.btn--wit { background: #fff; color: var(--groen-donker); }
.btn--tel { background: var(--groen); color: #fff; min-height: 44px; padding: .55rem 1.1rem; }

/* ---------- Header + luifel ---------- */
.site-header { position: sticky; top: 0; z-index: 50; }
.site-header__bar { background: var(--papier); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem var(--pad); position: relative; }
.brand img { width: clamp(140px, 16vw, 188px); height: auto; }
.luifel { height: 24px; filter: drop-shadow(0 5px 4px rgba(20, 51, 37, .22)); position: relative; z-index: 1; }
.luifel::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, var(--groen) 0 26px, #fff 26px 52px);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% 11px no-repeat, radial-gradient(circle 13px at 13px 11px, #000 97%, transparent 100%) 0 0 / 26px 24px repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% 11px no-repeat, radial-gradient(circle 13px at 13px 11px, #000 97%, transparent 100%) 0 0 / 26px 24px repeat-x;
}
.site-header .luifel { margin-bottom: -24px; }

.nav-toggle { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; padding: .5rem 1rem; border: 2px solid var(--groen); border-radius: 999px; background: none; color: var(--groen); font-weight: 700; cursor: pointer; }
.nav-toggle__lines, .nav-toggle__lines::before, .nav-toggle__lines::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: transform .25s ease; }
.nav-toggle__lines::before, .nav-toggle__lines::after { content: ""; position: absolute; left: 0; }
.nav-toggle__lines::before { top: -6px; }
.nav-toggle__lines::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__lines { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__lines::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__lines::after { transform: translateY(-6px) rotate(-45deg); }

.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav a:not(.btn) { display: block; padding: .65rem 0; font-family: var(--kop); font-weight: 600; font-size: 1.35rem; color: var(--groen-donker); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--groen); text-decoration: underline; text-decoration-color: var(--mayo); text-decoration-thickness: 4px; text-underline-offset: 6px; }
.js .site-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--papier); padding: 1.8rem var(--pad) 1.5rem; box-shadow: 0 18px 30px rgba(20, 51, 37, .15); }
.js .site-nav:not(.is-open) { display: none; }
.no-js .site-nav { width: 100%; }
.no-js .site-header__bar { flex-wrap: wrap; }
.no-js .nav-toggle { display: none; }
.site-nav .btn--tel { margin-top: .8rem; }

@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .js .site-nav, .site-nav { position: static; display: flex !important; align-items: center; gap: 1.8rem; padding: 0; box-shadow: none; background: none; width: auto; }
  .site-nav ul { display: flex; gap: 1.6rem; }
  .site-nav a:not(.btn) { font-size: 1.05rem; padding: .4rem 0; }
  .site-nav a:not(.btn):hover { color: var(--groen); }
  .site-nav .btn--tel { margin-top: 0; }
}

/* ---------- open/gesloten ---------- */
.dot { width: .7rem; height: .7rem; border-radius: 50%; background: #9aa39c; flex: none; }
.open-status[data-open="true"] .dot { background: #2fa35a; box-shadow: 0 0 0 0 rgba(47, 163, 90, .6); animation: puls 2.2s infinite; }
.open-status[data-open="false"] .dot { background: #c9412f; }
@keyframes puls { 70% { box-shadow: 0 0 0 9px rgba(47, 163, 90, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 163, 90, 0); } }

/* hangend winkelbordje in de hero */
.bordje { display: inline-flex; flex-direction: column; align-items: center; margin-top: 1.9rem; transform-origin: 50% 0; }
.bordje__touw { position: relative; width: 64%; height: 22px; background: linear-gradient(to top left, transparent calc(50% - 1.2px), var(--hout) calc(50% - 1.2px) calc(50% + 1.2px), transparent calc(50% + 1.2px)) left / 50% 100% no-repeat, linear-gradient(to top right, transparent calc(50% - 1.2px), var(--hout) calc(50% - 1.2px) calc(50% + 1.2px), transparent calc(50% + 1.2px)) right / 50% 100% no-repeat; }
.bordje__touw::before { content: ""; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--hout); }
.bordje__plaat { display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1.1rem; background: var(--papier); border: 2px solid var(--groen); border-radius: 10px; font-weight: 700; color: var(--groen-donker); box-shadow: 0 6px 14px rgba(20, 51, 37, .12); }
.js .bordje { animation: slinger 2.6s ease-out .4s both; }
@keyframes slinger { 0% { transform: rotate(7deg); } 25% { transform: rotate(-5deg); } 50% { transform: rotate(3deg); } 75% { transform: rotate(-1.5deg); } 100% { transform: rotate(0); } }

/* ---------- Hero ---------- */
.hero { max-width: var(--max); margin: 0 auto; padding: calc(24px + clamp(1.8rem, 5vw, 3.4rem)) var(--pad) clamp(2.5rem, 6vw, 4.5rem); display: grid; gap: 2.4rem; align-items: center; }
.hero h1 { font-size: clamp(2.5rem, 8.4vw, 4.6rem); margin: .8rem 0 1.1rem; }
.hero h1 .amp { font-family: var(--hand); color: var(--mayo); font-size: 1.15em; font-weight: 700; display: inline-block; transform: rotate(-6deg); -webkit-text-stroke: 1px #c48d0e; }
.hero__lead { font-size: clamp(1.1rem, 2vw, 1.25rem); color: var(--grijs); max-width: 34em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.hero__beeld { position: relative; }
.boog { border-radius: 999px 999px var(--r) var(--r); overflow: hidden; border: 6px solid var(--papier); box-shadow: 0 0 0 2px var(--groen), 0 24px 50px rgba(20, 51, 37, .2); aspect-ratio: 1 / 1.02; max-width: 520px; margin: 0 auto; }
.boog img { width: 100%; height: 100%; object-fit: cover; }
.stempel { position: absolute; left: 0; bottom: 6%; width: 8.3rem; height: 8.3rem; border-radius: 50%; background: var(--mayo); color: var(--inkt); text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transform: rotate(-10deg); box-shadow: 0 0 0 5px var(--creme), 0 0 0 7px var(--mayo), 0 14px 24px rgba(0, 0, 0, .18); transition: transform .3s ease; }
.stempel:hover { transform: rotate(0) scale(1.04); }
.stempel__score { font-family: var(--kop); font-weight: 800; font-size: 2.3rem; line-height: 1; }
.stempel__stars { font-size: .85rem; letter-spacing: 1px; color: var(--groen-donker); }
.stempel__txt { font-size: .72rem; font-weight: 700; line-height: 1.15; max-width: 6.5rem; margin-top: .15rem; }

@media (min-width: 900px) {
  .hero { grid-template-columns: 1.08fr .92fr; gap: 3rem; }
  .hero h1 { font-size: clamp(3.2rem, 5.4vw, 4.8rem); }
  .stempel { left: -1.5rem; width: 9rem; height: 9rem; }
}

/* ---------- Kopjes ---------- */
.kop { text-align: center; max-width: 46rem; margin: 0 auto 2.6rem; }
.kop__sub { color: var(--grijs); margin-top: .6rem; }

/* ---------- Troeven ---------- */
.bijzonder { max-width: var(--max); margin: 0 auto; padding: clamp(3rem, 7vw, 5.5rem) var(--pad); }
.troeven { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; }
.troef { background: var(--papier); border-radius: var(--r); padding: .8rem .8rem 1.4rem; box-shadow: 0 1px 0 rgba(20, 51, 37, .08), 0 10px 26px rgba(20, 51, 37, .07); }
.troef figure { border-radius: 999px 999px 8px 8px; overflow: hidden; aspect-ratio: 4 / 4.2; margin-bottom: 1.1rem; }
.troef img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.troef:hover img { transform: scale(1.05); }
.troef h3, .troef p { padding: 0 .6rem; }
.troef p { color: var(--grijs); margin-top: .45rem; font-size: 1rem; }
@media (min-width: 640px) { .troeven { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .troeven { grid-template-columns: repeat(4, 1fr); } .troef:nth-child(even) { transform: translateY(1.6rem); } .js .troef.reveal:nth-child(even):not(.is-visible) { transform: translateY(3.6rem); } }

/* ---------- Verhaal (groen vlak met luifelrand) ---------- */
.verhaal { background: var(--groen); color: #eef4ef; position: relative; padding: clamp(3.5rem, 8vw, 6rem) var(--pad); }
.verhaal::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 24px; background: repeating-linear-gradient(90deg, var(--groen-donker) 0 26px, #fff 26px 52px); -webkit-mask: linear-gradient(#000 0 0) top / 100% 11px no-repeat, radial-gradient(circle 13px at 13px 11px, #000 97%, transparent 100%) 0 0 / 26px 24px repeat-x; mask: linear-gradient(#000 0 0) top / 100% 11px no-repeat, radial-gradient(circle 13px at 13px 11px, #000 97%, transparent 100%) 0 0 / 26px 24px repeat-x; }
.verhaal__inner { max-width: var(--max); margin: 0 auto; display: grid; gap: 2.5rem; align-items: center; }
.verhaal h2 { color: #fff; margin-bottom: 1.2rem; }
.verhaal p { max-width: 36em; }
.verhaal .btn { margin-top: 1.8rem; }
.verhaal__foto { border-radius: var(--r); overflow: hidden; transform: rotate(-1.5deg); border: 8px solid #fff; box-shadow: 0 24px 40px rgba(0, 0, 0, .3); }
.verhaal__foto img { width: 100%; }
@media (min-width: 900px) { .verhaal__inner { grid-template-columns: 1fr 1fr; gap: 4rem; } }

/* ---------- Krijtbord ---------- */
.bord { background: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .06), transparent 60%), radial-gradient(ellipse at 80% 90%, rgba(255, 255, 255, .04), transparent 55%), var(--krijtbord); color: #f1efe8; border: 12px solid var(--hout); border-radius: 10px; box-shadow: inset 0 0 0 2px #6b4325, inset 0 0 40px rgba(0, 0, 0, .5), 0 20px 40px rgba(0, 0, 0, .2); padding: clamp(1.6rem, 4vw, 2.6rem); }
.bord h2 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 1.4rem; }
.bord .krijt { color: var(--mayo); }
.prijslijst { list-style: none; margin: 0; padding: 0; }
.prijslijst li { display: flex; align-items: baseline; gap: .5rem; padding: .42rem 0; }
.prijslijst .prijs { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.prijslijst li { background: radial-gradient(circle, rgba(241, 239, 232, .4) 1px, transparent 1.5px) 0 calc(100% - .55em) / 7px 7px repeat-x; }
.prijslijst li > span { background: var(--krijtbord); }
.prijslijst li > span:first-child { padding-right: .4rem; }
.prijslijst .prijs { margin-left: auto; padding-left: .4rem; }
.bord .btn { margin-top: 1.8rem; }
.bord-teaser { max-width: 1040px; margin: 0 auto; padding: clamp(1rem, 4vw, 2rem) var(--pad) clamp(3.5rem, 8vw, 6rem); display: grid; gap: 2rem; align-items: center; }
.bord-teaser__foto { max-width: 300px; margin: 0 auto; border-radius: 999px 999px var(--r) var(--r); overflow: hidden; border: 6px solid var(--papier); box-shadow: 0 0 0 2px var(--groen), 0 20px 36px rgba(20, 51, 37, .18); transform: rotate(3deg); }
@media (min-width: 900px) { .bord-teaser { grid-template-columns: 1.6fr 1fr; gap: 3.5rem; } .bord-teaser__foto { max-width: none; } }

/* ---------- Reviews ---------- */
.reviews { background: var(--groen-licht); padding: clamp(3.5rem, 8vw, 6rem) var(--pad); }
.reviews h2 { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .3rem .7rem; }
.reviews .score { font-size: 1.5em; color: var(--groen); }
.stars { color: #d99a06; letter-spacing: 2px; font-size: .75em; }
.reviews__grid { max-width: var(--max); margin: 0 auto; display: grid; gap: 1.4rem; }
.review { background: var(--papier); border-radius: var(--r); padding: 1.7rem 1.6rem 1.4rem; position: relative; box-shadow: 0 10px 24px rgba(20, 51, 37, .08); }
.review::after { content: ""; position: absolute; left: 2rem; bottom: -14px; border: 14px solid transparent; border-top-color: var(--papier); border-bottom: 0; }
.review .stars { font-size: 1rem; }
.review p { margin: .7rem 0 1.1rem; font-size: 1.05rem; }
.review footer { font-weight: 700; color: var(--groen-donker); }
.review footer span { font-weight: 400; color: var(--grijs); }
.reviews__more { text-align: center; margin-top: 2.6rem; }
@media (min-width: 820px) { .reviews__grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Bezoek ---------- */
.bezoek { display: grid; background: var(--papier); }
.bezoek__foto { min-height: 280px; }
.bezoek__foto img { width: 100%; height: 100%; object-fit: cover; }
.bezoek__kaart { padding: clamp(2.5rem, 6vw, 4.5rem) var(--pad); max-width: 40rem; }
.bezoek__kaart h2 { margin-bottom: 1.2rem; }
.bezoek__adres { font-family: var(--kop); font-weight: 600; font-size: 1.4rem; line-height: 1.3; color: var(--groen); margin-bottom: 1rem; }
.parkeren { margin-top: 1rem; padding: .8rem 1rem; border-left: 4px solid var(--mayo); background: var(--creme); border-radius: 0 8px 8px 0; font-size: .98rem; }
@media (min-width: 900px) { .bezoek { grid-template-columns: 1fr 1fr; } .bezoek__kaart { align-self: center; } }

/* ---------- Social ---------- */
.social { text-align: center; padding: clamp(3rem, 7vw, 4.5rem) var(--pad); background: var(--mayo); }
.social h2 { color: var(--inkt); }
.social p { margin-top: .6rem; }
.social__links { display: flex; justify-content: center; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem !important; }

/* ---------- Footer ---------- */
.site-footer { background: var(--groen-donker); color: #dfe9e2; position: relative; padding-top: 24px; }
.site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 24px; background: repeating-linear-gradient(90deg, var(--groen) 0 26px, #fff 26px 52px); -webkit-mask: linear-gradient(#000 0 0) top / 100% 11px no-repeat, radial-gradient(circle 13px at 13px 11px, #000 97%, transparent 100%) 0 0 / 26px 24px repeat-x; mask: linear-gradient(#000 0 0) top / 100% 11px no-repeat, radial-gradient(circle 13px at 13px 11px, #000 97%, transparent 100%) 0 0 / 26px 24px repeat-x; }
.site-footer a { color: #fff; }
.site-footer__inner { max-width: var(--max); margin: 0 auto; padding: 3.2rem var(--pad) 2rem; display: grid; gap: 2.6rem; }
.site-footer h2 { font-size: 1.3rem; color: #fff; margin-bottom: 1rem; }
.site-footer__brand img { width: 190px; margin-bottom: 1rem; }
.site-footer__brand p { max-width: 26rem; font-size: .98rem; }
.socials { display: flex; gap: 1.2rem; margin-top: 1.2rem !important; }
.socials a { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; font-weight: 700; min-height: 44px; }
.site-footer address a { display: flex; gap: .6rem; align-items: flex-start; padding: .35rem 0; text-decoration: none; }
.site-footer address svg { margin-top: .2rem; flex: none; color: var(--mayo); }
.footer-nav { list-style: none; padding: 0; margin: 1.2rem 0 0; display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; }
.footer-nav a { display: inline-block; padding: .35rem 0; }
.open-status--footer { display: flex; align-items: center; gap: .55rem; font-weight: 700; color: #fff; margin-bottom: .8rem; }
.hours { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours th { text-align: left; font-weight: 400; }
.hours td { text-align: right; }
.hours th, .hours td { padding: .38rem 0; border-bottom: 1px dashed rgba(255, 255, 255, .18); }
.hours .is-closed td { opacity: .75; }
.hours .is-today th, .hours .is-today td { font-weight: 700; color: var(--mayo); }
.hours .is-today th::after { content: " · vandaag"; font-weight: 400; font-size: .85em; }
.site-footer__legal { max-width: var(--max); margin: 0 auto; padding: 1.2rem var(--pad) 2rem; font-size: .85rem; border-top: 1px solid rgba(255, 255, 255, .12); color: #b9cbbf; }
@media (min-width: 820px) { .site-footer__inner { grid-template-columns: 1.2fr 1fr 1fr; } }

/* ---------- Subpagina's ---------- */
.pagekop { max-width: 58rem; margin: 0 auto; padding: calc(24px + clamp(2.4rem, 6vw, 4.5rem)) var(--pad) clamp(1.5rem, 4vw, 2.5rem); text-align: center; }
.pagekop h1 { font-size: clamp(2.2rem, 6vw, 3.8rem); }
.pagekop__sub { color: var(--grijs); margin-top: 1rem; font-size: 1.15rem; }
.pagekop--404 { padding-bottom: 5rem; }
.pagekop--404 .hero__actions { justify-content: center; }

.story { max-width: var(--max); margin: 0 auto; padding: 2rem var(--pad) 3rem; display: grid; gap: 2.5rem; align-items: start; }
.intro { font-size: clamp(1.15rem, 2.2vw, 1.35rem); line-height: 1.55; color: var(--groen-donker); }
.tijdlijn { list-style: none; margin: 2.2rem 0 0; padding: 0 0 0 1.4rem; border-left: 3px dotted var(--groen); }
.tijdlijn li { position: relative; padding: 0 0 1.8rem 1rem; }
.tijdlijn li::before { content: ""; position: absolute; left: calc(-1.4rem - 9px); top: .35rem; width: 15px; height: 15px; border-radius: 50%; background: var(--mayo); border: 3px solid var(--creme); box-shadow: 0 0 0 2px var(--groen); }
.jaar { font-family: var(--kop); font-weight: 800; font-size: 1.7rem; color: var(--groen); display: block; line-height: 1; margin-bottom: .4rem; }
.story__foto { border-radius: 999px 999px var(--r) var(--r); overflow: hidden; border: 6px solid var(--papier); box-shadow: 0 0 0 2px var(--groen), 0 20px 40px rgba(20, 51, 37, .16); position: relative; }
.story__foto img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; object-position: 30% 50%; }
.story__foto figcaption { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%) rotate(-2deg); background: var(--mayo); padding: .2rem .9rem; border-radius: 6px; font-family: var(--hand); font-weight: 700; font-size: 1.5rem; white-space: nowrap; }
@media (min-width: 900px) { .story { grid-template-columns: 1.2fr .8fr; gap: 4rem; } .story__foto { position: sticky; top: 7rem; } }

.citaat { background: var(--groen); padding: clamp(3rem, 8vw, 5rem) var(--pad); text-align: center; }
.citaat p { font-family: var(--kop); font-weight: 800; font-size: clamp(1.8rem, 4.6vw, 3.2rem); line-height: 1.12; color: #fff; max-width: 22em; margin: 0 auto; text-wrap: balance; }

.kwaliteit { max-width: var(--max); margin: 0 auto; padding: clamp(3rem, 7vw, 5rem) var(--pad); display: grid; gap: 2.5rem; align-items: center; }
.kwaliteit__foto { border-radius: var(--r); overflow: hidden; transform: rotate(1.5deg); border: 8px solid #fff; box-shadow: 0 20px 36px rgba(20, 51, 37, .16); }
.kwaliteit__tekst h2 { margin-bottom: 1.1rem; }
.kwaliteit__tekst .btn { margin-top: 1.6rem; }
@media (min-width: 900px) { .kwaliteit { grid-template-columns: 1fr 1fr; gap: 4rem; } }

.strook { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad) clamp(3rem, 7vw, 5rem); }
.strook figure { border-radius: var(--r); overflow: hidden; aspect-ratio: 1; }
.strook figure:last-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.strook img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .strook { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; } .strook figure:last-child { grid-column: auto; aspect-ratio: 1; } }

/* menu: krijtborden */
.page-menu main { background: var(--creme); }
.legenda { margin-top: 1rem; color: var(--grijs); }
.gv { display: inline-block; font-size: .68rem; font-weight: 700; text-decoration: none; letter-spacing: .04em; padding: .08rem .35rem; border-radius: 4px; background: var(--mayo); color: var(--inkt); vertical-align: middle; }
.menuborden { max-width: var(--max); margin: 0 auto; padding: 1rem var(--pad) 1rem; columns: 1; column-gap: 1.6rem; }
.menubord { break-inside: avoid; margin-bottom: 1.6rem; background: radial-gradient(ellipse at 30% 15%, rgba(255, 255, 255, .06), transparent 60%), var(--krijtbord); color: #f1efe8; border: 10px solid var(--hout); border-radius: 8px; box-shadow: inset 0 0 0 2px #6b4325, inset 0 0 30px rgba(0, 0, 0, .45), 0 12px 24px rgba(0, 0, 0, .15); padding: 1.4rem 1.4rem 1.2rem; }
.menubord h2 { font-family: var(--hand); font-weight: 700; font-size: 2.2rem; color: var(--mayo); letter-spacing: 0; margin-bottom: .6rem; transform: rotate(-1.5deg); transform-origin: left; }
.menubord__note { font-style: italic; opacity: .85; margin-bottom: .4rem; }
.menubord .prijslijst li { padding: .32rem 0; font-size: 1rem; }
.menu-voet { text-align: center; padding: 0 var(--pad) 4rem; font-family: var(--hand); font-weight: 700; font-size: 1.7rem; color: var(--hout); }
@media (min-width: 700px) { .menuborden { columns: 2; } }
@media (min-width: 1100px) { .menuborden { columns: 3; } }

/* contact */
.contact { max-width: var(--max); margin: 0 auto; padding: 1rem var(--pad) clamp(3.5rem, 8vw, 5.5rem); display: grid; gap: 1.6rem; }
.contact__kaarten { display: grid; gap: 1rem; align-content: start; }
.ckaart { display: grid; gap: .15rem; padding: 1.3rem 1.4rem; background: var(--papier); border-radius: var(--r); text-decoration: none; color: var(--inkt); box-shadow: 0 8px 20px rgba(20, 51, 37, .07); border: 2px solid transparent; transition: border-color .2s ease, transform .2s ease; }
.ckaart:hover { border-color: var(--groen); transform: translateY(-2px); }
.ckaart svg { color: var(--groen); width: 24px; height: 24px; margin-bottom: .4rem; }
.ckaart__label { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--grijs); }
.ckaart__waarde { font-family: var(--kop); font-weight: 600; font-size: 1.2rem; color: var(--groen-donker); overflow-wrap: anywhere; }
.ckaart__link { color: var(--groen); font-weight: 700; margin-top: .3rem; }
.contact__tijden { background: var(--groen); color: #eef4ef; border-radius: var(--r); padding: 1.8rem 1.6rem; }
.contact__tijden h2 { color: #fff; font-size: 1.9rem; margin-bottom: 1rem; }
.contact__tijden h3 { color: #fff; margin: 1.8rem 0 .6rem; }
.open-status--groot { display: flex; align-items: center; gap: .6rem; font-weight: 700; background: rgba(255, 255, 255, .1); padding: .6rem .9rem; border-radius: 999px; margin-bottom: 1rem; color: #fff; }
.speciaal { list-style: none; margin: 0; padding: 0; }
.speciaal li { display: flex; justify-content: space-between; padding: .38rem 0; border-bottom: 1px dashed rgba(255, 255, 255, .18); }
.contact__foto img { border-radius: 999px 999px var(--r) var(--r); border: 6px solid var(--papier); box-shadow: 0 0 0 2px var(--groen); width: 100%; }
@media (min-width: 900px) { .contact { grid-template-columns: 1fr 1.1fr .9fr; align-items: start; } }

/* ---------- Animaties ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .verhaal__foto.reveal.is-visible { transform: rotate(-1.5deg); }
.js .kwaliteit__foto.reveal.is-visible { transform: rotate(1.5deg); }
.js .bord-teaser__foto.reveal.is-visible { transform: rotate(3deg); }
@media (min-width: 1100px) { .js .troef.reveal.is-visible:nth-child(even) { transform: translateY(1.6rem); } }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } .js .bordje { animation: none; } }
@media (max-width: 639px) { .troef figure { aspect-ratio: 4 / 3; } }