/*
 * Fifty/Fifty — opmaak.
 *
 * Nagebouwd naar het Squarespace-sjabloon "Brine" zoals de site daar stond
 * (kleuren, maten en breekpunten gemeten op 15-10-2026). De HTML komt uit
 * migratie/omzetten.mjs en houdt de opbouw van Squarespace aan: rijen (.row)
 * met kolommen van 12 (.col.span-N) en daarin blokken (.block-*).
 *
 * Kopletter: het origineel gebruikte Rosewood Std Fill (Adobe, alleen via
 * Squarespace). Roboto Serif op de smalste breedte komt er het dichtst bij;
 * die heet hier 'Fifty Kop' (zie lettertypen.css). Op 85% van de oorspronkelijke
 * korpsgrootte en met 0,075em letterafstand is hij even breed; de regelhoogtes
 * zijn die van het origineel, zodat alles even hoog blijft.
 */

:root {
  /* Het roze van de gedrukte menukaart, overal op de site (sinds 15-10-2026;
     Squarespace gebruikte #facbbd). */
  --roze: #e9c5b8;
  --groen: #334d37;
  --oranje: #fa850f;
  --mosterd: #f4b942;
  --papier: #fcfcfc;
  --tekst: rgba(29, 29, 29, 0.7);
  --donker: #1d1d1d;
  --lijn: #ddd;
  --rand: 15px;
  --kop: 'Fifty Kop', Georgia, 'Times New Roman', serif;
  --kop-smal: 50%;
  --kop-gewicht: 700;
  --body: Raleway, 'Helvetica Neue', Arial, sans-serif;
  --sans: Rubik, 'Helvetica Neue', Arial, sans-serif;
  --tekstbreedte: 36.654%;
  /* Kleuren van de gedrukte menukaart. */
  --navy: #283388;
  --tan: var(--roze);
  --menugroen: #354b38;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--roze);
  color: var(--tekst);
  font: 300 16px/1.8 var(--body);
  letter-spacing: 0.06em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

.naar-inhoud {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 16px;
  background: var(--groen);
  color: var(--roze);
}

.naar-inhoud:focus {
  left: 16px;
  top: 16px;
}

:focus-visible {
  outline: 2px solid var(--oranje);
  outline-offset: 2px;
}

/* ------------------------------------------------------------- lijst om de site */

.site {
  border: var(--rand) solid var(--roze);
  /* De kop loopt over de volle breedte (zoals op mobiel): geen lijst erboven. */
  border-top-width: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ------------------------------------------------------------- kop */

.kop {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 155px;
  margin: 0 calc(-1 * var(--rand));
  padding: 20px 4px 0;
  background: var(--groen);
}

.kop-logo {
  justify-self: start;
  padding: 11.5px 13px;
  margin-top: -20px;
}

.kop-logo img {
  width: 108px;
}

.kop-midden {
  display: flex;
  align-items: center;
  margin-top: -20px;
}

.kop-nav {
  padding: 11.5px 13px;
  text-align: center;
}

.nav-item {
  display: inline-block;
  margin: 0 12.8px;
  padding: 12.36px 0;
  color: var(--roze);
  font-family: var(--kop);
  font-stretch: var(--kop-smal);
  font-weight: var(--kop-gewicht);
  font-size: 17px;
  line-height: 20px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}

.nav-item:hover {
  opacity: 0.7;
}

.kop-sociaal {
  display: flex;
  margin-left: 22px;
}

.sociaal-link {
  display: block;
  margin: 5.9px;
  color: var(--roze);
  line-height: 0;
}

.sociaal-link:hover {
  opacity: 0.7;
}

.menu-knop {
  display: none;
}

/* Voor schermlezers, onzichtbaar op het scherm. */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------- mobiel menu */

.mobiel-menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--roze);
  overflow-y: auto;
}

.mobiel-menu[hidden] {
  display: none;
}

.mobiel-sluit {
  position: absolute;
  left: 0;
  top: 0;
  width: 60px;
  height: 60px;
  border: 0;
  padding: 0;
  background: var(--groen);
  color: #fff;
  cursor: pointer;
}

.mobiel-sluit svg {
  display: block;
  margin: auto;
}

.mobiel-paneel {
  min-height: 100%;
  margin-left: 60px;
  padding: 36px;
  background: var(--groen);
}

.mobiel-bestel {
  margin-top: 12px;
}

/* ------------------------------------------------------------- hoofdinhoud */

.hoofd {
  flex: 1;
  background: var(--papier);
}

.hoofd-inhoud {
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 17px;
}

/* Raster van 12 kolommen, zoals Squarespace. */
.row {
  display: flex;
  margin: 0 -17px;
}

.col {
  min-width: 0;
}

/* Een rij binnen een kolom loopt niet buiten die kolom. */
.col > .row {
  margin: 0;
}

.span-1 { width: 8.3333%; }
.span-2 { width: 16.6667%; }
.span-3 { width: 25%; }
.span-4 { width: 33.3333%; }
.span-5 { width: 41.6667%; }
.span-6 { width: 50%; }
.span-7 { width: 58.3333%; }
.span-8 { width: 66.6667%; }
.span-9 { width: 75%; }
.span-10 { width: 83.3333%; }
.span-11 { width: 91.6667%; }
.span-12 { width: 100%; }

/* Afstanden tussen blokken (regels van de Squarespace-layout). */
.block {
  position: relative;
  padding: 17px;
}

.row .block:first-child {
  padding-top: 0;
}

.row .block:first-child:last-child {
  padding-bottom: 0;
}

.block + .row .block:first-child:not(.block-spacer),
.row + .row .block:first-child {
  padding-top: 17px;
}

.block + .row .block:first-child:last-child,
.row + .row .block:first-child:last-child {
  padding-bottom: 17px;
}

/* Tekst, knoppen en lijnen in een volle kolom blijven smal en gecentreerd. */
.span-12 > .block:not(.block-image):not(.block-gallery):not(.block-map):not(.block-instagram):not(.block-stretch) {
  width: var(--tekstbreedte);
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------------------------------------- tekstblokken */

.block-html > :first-child {
  margin-top: 0;
}

.block-html > :last-child {
  margin-bottom: 0;
}

.block-html p {
  margin: 16px 0;
}

/* Een lege alinea is in Squarespace een witregel. */
.block-html p:empty::before {
  content: '\00a0';
}

.block-html h1,
.block-html h2,
.block-html h3,
.block-html h4 {
  margin: 0 0 40px;
  color: var(--donker);
  font-family: var(--kop);
  font-stretch: var(--kop-smal);
  font-weight: var(--kop-gewicht);
  font-size: 34px;
  line-height: 48px;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.block-html h1 { font-size: 41px; line-height: 57.6px; }
.block-html h4 { font-size: 20.4px; line-height: 28.8px; }

.block-html * + h1,
.block-html * + h2,
.block-html * + h3,
.block-html * + h4 {
  margin-top: 40px;
}

.block-html strong {
  font-weight: 700;
}

.block-html a {
  color: var(--groen);
  text-decoration: none;
  border-bottom: 1px solid rgba(51, 77, 55, 0.3);
  padding-bottom: 0.05em;
}

.block-html a:hover {
  color: rgba(51, 77, 55, 0.5);
}

/* Squarespace zet de opsommingstekens vóór de (gecentreerde) tekst. */
.block-html ul,
.block-html ol {
  margin: 16px 0;
  padding-left: 40px;
}

.block-html ul {
  list-style: none;
}

.block-html li > p {
  margin: 0 0 8px;
}

.block-html ul li > p::before {
  content: '•';
  margin-right: 0.7em;
}

/* ------------------------------------------------------------- afstandhouder en lijn */

.block-spacer::before {
  content: '';
  display: block;
  box-sizing: content-box;
  height: 28.8px;
  padding-bottom: calc(var(--r) * 1%);
}

/* Zonder ingestelde verhouding is een Squarespace-afstandhouder 34 px. */
.block-spacer-vast::before {
  height: 34px;
  padding-bottom: 0;
}

.block-hr {
  padding-top: 0;
}

.block-hr hr {
  height: 1px;
  margin: 8px 0;
  border: 0;
  background: var(--lijn);
}

/* ------------------------------------------------------------- knop */

.block-button {
  text-align: center;
}

.knop-left { text-align: left; }
.knop-right { text-align: right; }

/* Knoppen als sticker: dikke ronde knop met een witte snijrand, een beetje
   scheef geplakt en een harde navy schaduw. Hover: recht en omhoog; klikken:
   indrukken. Geldt voor elke knop op de site en voor de items in het mobiele
   menu (kleur en volgorde daarvan: zie "Mobiel menu als stickers" hieronder). */
.knop,
.mobiel-paneel .nav-item {
  display: inline-block;
  padding: 14px 26px 12px;
  background: var(--oranje);
  color: #130101;
  font: 400 20px/1.1 'Fifty Menu Titel', var(--sans);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  border: 4px solid var(--papier);
  border-radius: 999px;
  box-shadow: 4px 5px 0 var(--navy);
  rotate: -2.5deg;
  transition: rotate 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), translate 0.2s ease-out, box-shadow 0.2s ease-out;
}

.knop:hover,
.knop:focus-visible,
.mobiel-paneel .nav-item:hover,
.mobiel-paneel .nav-item:focus-visible {
  opacity: 1;
  rotate: 0deg;
  translate: -2px -3px;
  box-shadow: 7px 9px 0 var(--navy);
}

.knop:active,
.mobiel-paneel .nav-item:active {
  translate: 3px 4px;
  box-shadow: 0 0 0 var(--navy);
  transition-duration: 0.08s;
}

.knop:focus-visible,
.mobiel-paneel .nav-item:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 4px;
}

/* De belangrijkste knop (bestellen): groter. */
.knop-groot {
  padding: 18px 34px 15px;
  font-size: 26px;
}

/* Tweede knop naast "Bestel online" (naar het menu): groen met roze, als de
   kop, en de andere kant op scheef. */
.knop-groen {
  background: var(--groen);
  color: var(--roze);
  rotate: 2.5deg;
}

/* Een knop binnen een tekstblok krijgt niet de opmaak van een tekstlink. */
.block-html a.knop {
  border-bottom: 4px solid var(--papier);
  color: #130101;
}

.block-html a.knop-groen {
  color: var(--roze);
}

/* Mobiel menu als stickers: onder elkaar, om en om scheef en elk een eigen
   kleur (roze, navy, mosterd, groen). Oranje blijft voor "Bestel online". De
   pagina waar je bent is een ingedrukte sticker: plat, zonder schaduw. */
.mobiel-paneel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.mobiel-paneel .nav-item {
  margin: 0;
  padding: 12px 24px 10px;
  background: var(--roze);
  color: var(--groen);
  font-size: 22px;
}

.mobiel-paneel .nav-item:nth-child(even) {
  rotate: 2deg;
}

.mobiel-paneel .nav-item:nth-child(4n + 2) {
  background: var(--navy);
  color: var(--roze);
}

.mobiel-paneel .nav-item:nth-child(4n + 3) {
  background: var(--mosterd);
  color: var(--groen);
}

.mobiel-paneel .nav-item:nth-child(4n + 4) {
  background: var(--groen);
  color: var(--roze);
}

.mobiel-paneel .nav-item.actief {
  rotate: 0deg;
  translate: 3px 4px;
  box-shadow: 0 0 0 var(--navy);
}

/* Knoppen over een foto (kopfoto homepage, fotostrook menupagina). */
.hero-knoppen {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 22px;
  padding: 90px 24px 40px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.hero-knoppen .knop {
  pointer-events: auto;
}

/* Desktop: de kopfoto is nooit hoger dan het scherm toelaat, zodat de knoppen
   erin meteen te zien zijn. Op een hoog scherm blijft de originele uitsnede. */
@media (min-width: 768px) {
  .block-image.block-hero .crop {
    height: max(360px, min(calc(100vw * 0.438457), 789px, calc(100vh - 195px)));
    padding-bottom: 0 !important;
  }

  .block-image.block-hero .crop img {
    object-position: 50% 40% !important;
  }
}

/* In de fotostrook staat de knop binnen de rand van het blok. */
.galerij-schuif .hero-knoppen {
  left: 17px;
  right: 17px;
  bottom: 17px;
  padding: 60px 16px 24px;
}

/* Twee knoppen naast elkaar (homepage, alleen mobiel: onder de introtekst). */
.knoppen-paar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 14px;
}

.vel-inhoud .knoppen-paar {
  margin-top: 28px;
}

.knoppen-paar .knop {
  padding: 12px 20px 10px;
  font-size: 18px;
}

.alleen-smal {
  display: none !important;
}

/* ------------------------------------------------------------- afbeeldingen */

.block-image figure {
  margin: 0 auto;
}

.block-image img {
  width: 100%;
}

/* "Stretch": de foto vult de hele breedte, zonder ruimte eromheen. */
.block-stretch {
  padding: 0 !important;
}

.crop {
  position: relative;
  height: 0;
  overflow: hidden;
}

.crop img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.block-image figcaption {
  padding-top: 18px;
  text-align: center;
  font-size: 14px;
}

.onderschrift-ruimte {
  display: block;
  padding-top: 18px;
}

/* Kaart: foto naast een wit vlak met titel en ondertitel, twee gelijke helften. */
.image-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 2%;
}

.image-card-rechts .image-card-foto {
  order: 2;
}

.image-card-foto {
  position: relative;
}

.image-card-foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Squarespace legt over de foto van een kaart een waas van 10% zwart. */
.image-card-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

.image-card-tekst {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10%;
  background: #fff;
  color: #000;
  font-family: var(--sans);
  font-weight: 300;
  letter-spacing: 0;
}

.image-card-titel p,
.image-card-onder p {
  margin: 0;
}

/* Squarespace schaalt de tekst mee met de breedte van het vlak. */
.image-card-titel {
  font-size: 10.4cqw;
  line-height: 1.1;
}

.image-card-onder {
  margin-top: 6cqw;
  font-size: max(12px, 4cqw);
  line-height: 1.6;
}

/* ------------------------------------------------------------- galerijen */

/* Schuifgalerij: foto's naast elkaar op één hoogte, schuift vanzelf door. */
.schuif {
  display: flex;
  height: 0;
  padding-bottom: calc(var(--h) * 1%);
  position: relative;
  overflow: hidden;
}

.schuif-baan {
  position: absolute;
  inset: 0;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.schuif-baan::-webkit-scrollbar {
  display: none;
}

.schuif img {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  height: 100%;
  scroll-snap-align: start;
}

/* Raster (contact) en Instagram: vaste verhouding, bijgesneden. */
.galerij-raster {
  display: grid;
  grid-template-columns: repeat(var(--per-rij), minmax(0, 1fr));
  gap: var(--ruimte);
  /* Squarespace laat onder de laatste rij dezelfde ruimte als ertussen. */
  margin-bottom: var(--ruimte);
}

.galerij-raster .cel {
  position: relative;
  display: block;
  aspect-ratio: var(--verhouding);
  overflow: hidden;
  border: 0;
}

.galerij-raster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.block-instagram .cel:hover img {
  opacity: 0.85;
}

.block-instagram .video::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  margin: -16px 0 0 -10px;
  border-style: solid;
  border-width: 16px 0 16px 26px;
  border-color: transparent transparent transparent #fff;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.35));
}

/* ------------------------------------------------------------- stroken in menukaartstijl (home + /menu) */

/* Pagina's met body.pagina-vol (home en /menu) bestaan uit stroken over de
   volle breedte: geen maximale breedte, roze in plaats van wit, en blokken met
   block-stretch lopen over de roze lijst door tot de rand van het scherm. */
.pagina-vol .hoofd {
  background: var(--roze);
}

.pagina-vol .hoofd-inhoud {
  max-width: none;
}

.pagina-vol .block-stretch {
  margin-left: calc(-1 * var(--rand));
  margin-right: calc(-1 * var(--rand));
}

/* Roze vel zoals de gedrukte menukaart, met navy tekst. */
.vel {
  position: relative;
  background: var(--tan);
  color: var(--navy);
}

.vel-inhoud {
  max-width: 980px;
  margin: 0 auto;
  padding: 72px 24px 64px;
  text-align: center;
}

.vel-met-stempel .vel-inhoud {
  /* Ruimte voor de bovenste helft van de stempel (zie .stempel). */
  padding-bottom: 104px;
}

.vel-titel {
  margin: 0 0 28px;
  color: var(--navy);
  font: 400 60px/1 'Fifty Menu Titel', var(--sans);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.vel-inhoud p {
  max-width: 640px;
  margin: 0 auto 16px;
  font-weight: 400;
  letter-spacing: 0.03em;
}

.vel-inhoud p:last-child {
  margin-bottom: 0;
}

.vel-inhoud a:not(.knop) {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid rgba(40, 51, 136, 0.35);
}

.vel-fotos {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 24px 84px;
}

.vel-fotos-onder .vel-inhoud {
  padding-bottom: 40px;
}

/* Brede kaart onderaan (contact). */
.kaart-breed {
  position: relative;
  height: 440px;
  background: #e5e3df;
}

.kaart-breed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.vel-insta {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px 52px;
}

/* ------------------------------------------------------------- menukaart (/menu) */

/* In de stijl van de gedrukte menukaart: twee afgeronde kaders met de titel
   over de lijn, prijzen in twee kolommen. */

.ruit {
  height: 40px;
  background: repeating-conic-gradient(var(--navy) 0 25%, var(--tan) 0 50%) 0 0 / 40px 40px;
}

.menukaart-kaders {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px;
  padding: 88px 48px 24px;
}

.menu-kader {
  position: relative;
  padding: 44px 28px 12px;
  border: 4px solid var(--navy);
  border-radius: 18px;
}

.menu-titel {
  position: absolute;
  top: 0;
  left: 50%;
  margin: 0;
  padding: 0 0.3em;
  transform: translate(-50%, -56%);
  background: var(--tan);
  color: var(--navy);
  font: 400 60px/1 'Fifty Menu Titel', var(--sans);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}

.menu-kolommen,
.gerecht {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px 108px;
  column-gap: 14px;
}

.menu-kolommen {
  margin-bottom: 18px;
  color: var(--menugroen);
  font: 400 13px/1.2 var(--body);
  letter-spacing: 0;
}

.menu-kolom {
  display: flex;
  white-space: nowrap;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.menu-kolom:first-child {
  grid-column: 2;
}

.menu-kolom img {
  width: auto;
  height: 34px;
}

.menu-iconen {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

.gerechten {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gerecht {
  padding: 14px 0;
}

.gerecht-naam {
  margin: 0 0 4px;
  font: 900 26px/1.05 'Fifty Menu', var(--sans);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.gerecht-omschrijving,
.gerecht-extra {
  margin: 0;
  font: 400 15px/1.45 var(--body);
  letter-spacing: 0;
}

.gerecht-extra {
  margin-top: 2px;
  font-size: 13px;
  font-style: italic;
}

.prijs {
  margin: 0;
  font: 900 26px/1.05 'Fifty Menu', var(--sans);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* De stempel ligt met zijn middelpunt op de onderrand: half op de kaart,
   half eronder. De roze cirkel dekt de geblokte rand erachter af. */
.stempel {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 1;
  width: 190px;
  padding: 10px;
  /* translate in plaats van transform: dan draait rotate (homepage) om het
     midden van de stempel. */
  translate: -50% 50%;
  border-radius: 50%;
  background: var(--tan);
}

/* Homepage: de stempel onder "Healthy of guilty?" draait langzaam rond. */
.pagina-home .stempel {
  animation: stempel-draaien 24s linear infinite;
}

@keyframes stempel-draaien {
  to { rotate: 360deg; }
}

/* Bestelknop in de kaart, boven de stempel. Onderruimte: de bovenste helft van
   de stempel (95 px) steekt 55 px boven de geblokte rand uit, plus marge. */
.menukaart-bestel {
  padding: 16px 24px 96px;
  text-align: center;
}

.menukaart-bestel p {
  max-width: 520px;
  margin: 20px auto 0;
  color: var(--navy);
  font-size: 15px;
  letter-spacing: 0.02em;
}

.menukaart-bestel p a {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid rgba(40, 51, 136, 0.35);
}

/* Tussenbalk direct onder de menukaart: de uitleg op groen, zoals de kop. De
   stempel ligt half op de kaart en half op deze balk; bovenin is daar ruimte voor. */
.tussenbalk {
  padding: 151px 24px 64px;
  background: var(--groen);
  color: rgba(233, 197, 184, 0.88);
  text-align: center;
}

.tussenbalk-kop {
  margin: 0 0 28px;
  color: var(--roze);
  font-family: var(--kop);
  font-stretch: var(--kop-smal);
  font-weight: var(--kop-gewicht);
  font-size: 34px;
  line-height: 48px;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.tussenbalk p {
  max-width: 640px;
  margin: 0 auto 16px;
}

.tussenbalk p:last-child {
  margin-bottom: 0;
}

.tussenbalk .tussenbalk-knop {
  margin-bottom: 28px;
}

.tussenbalk .tussenbalk-knop-onder {
  margin: 32px auto 0;
}

.tussenbalk a:not(.knop) {
  color: var(--roze);
  text-decoration: none;
  border-bottom: 1px solid rgba(233, 197, 184, 0.45);
}

.tussenbalk strong {
  color: var(--roze);
  font-weight: 700;
}

.tussenbalk-vraag {
  font-size: 18px;
}

/* Korte opsomming (vacatures) als labels naast elkaar. */
.tussenbalk-lijst {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 640px;
  margin: 8px auto 28px;
  padding: 0;
  list-style: none;
}

.tussenbalk-lijst li {
  padding: 8px 18px;
  border: 1px solid rgba(233, 197, 184, 0.5);
  border-radius: 999px;
  color: var(--roze);
}

/* Twee kolommen op de groene balk (contact: openingstijden en gegevens). */
.tussenbalk-kolommen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  max-width: 880px;
  margin: 0 auto;
}

.tussenbalk-kolommen p {
  max-width: none;
}

.tijden {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  column-gap: 32px;
  row-gap: 4px;
  margin: 0;
  text-align: left;
}

.tijden div {
  display: contents;
}

.tijden dt {
  color: var(--roze);
}

.tijden dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* Foto's onderaan de menupagina: een strook over de volle breedte (block-stretch). */
@media (min-width: 768px) {
  /* De vijf foto's zijn samen 3,85 keer zo breed als hoog: ze vullen de
     breedte precies, dus geen schuiven nodig. */
  .menu-fotos .schuif {
    height: auto;
    padding-bottom: 0;
    aspect-ratio: 3.854 / 1;
  }
}

/* ------------------------------------------------------------- kaart (Google Maps) */

.kaart {
  position: relative;
  height: 0;
  overflow: hidden;
  background: #e5e3df;
}

.kaart iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ------------------------------------------------------------- blog */

.blog-meta {
  margin-bottom: 30px;
  color: var(--donker);
  font-family: var(--kop);
  font-stretch: var(--kop-smal);
  font-weight: var(--kop-gewicht);
  font-size: 9px;
  line-height: 28.8px;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
}

.bloglijst {
  padding: 59px 0 17px;
}

.bloglijst-item {
  display: flex;
  flex-direction: column;
  margin-top: 40px;
  margin-bottom: -30px;
  text-align: center;
}

.bloglijst-item:last-child {
  margin-bottom: 0;
}

.bloglijst-item:first-child {
  margin-top: 0;
}

.bloglijst-item + .bloglijst-item::before {
  content: '';
  display: block;
  width: 50%;
  min-width: 240px;
  height: 1px;
  margin: 0 auto 40px;
  background: #ccc;
}

.bloglijst-foto {
  position: relative;
  display: block;
  width: 100%;
  max-width: 900px;
  margin: 0 auto 48.54px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.bloglijst-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bloglijst-titel {
  margin-bottom: 30px;
  color: var(--donker);
  font-family: var(--kop);
  font-stretch: var(--kop-smal);
  font-weight: var(--kop-gewicht);
  font-size: 17px;
  line-height: 26px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}

.bloglijst-uittreksel {
  width: var(--tekstbreedte);
  max-width: 100%;
  margin: 0 auto 30px;
  color: var(--donker);
  font-size: 14px;
  line-height: 22.4px;
}

.bloglijst-uittreksel p {
  display: inline;
  margin: 0;
}

.bloglijst-uittreksel a {
  color: var(--groen);
  font-size: 12px;
  letter-spacing: 0.1em;
  font-family: var(--kop);
  font-stretch: var(--kop-smal);
  font-weight: var(--kop-gewicht);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.bloglijst-uittreksel a span::after {
  content: '\2192';
  padding-left: 0.7em;
}

.bloglijst-uittreksel a:hover {
  color: rgba(51, 77, 55, 0.5);
}

.blogpost {
  display: flex;
  flex-direction: column;
}

.blogpost-titel {
  margin: 0 0 32px;
  color: var(--donker);
  font: 300 60px/1.5 var(--sans);
  letter-spacing: 0;
  text-align: center;
}

.blogpost-inhoud {
  margin-bottom: 32px;
}

/* De ruimte boven de bladerlinks is die van de oude deelknoppen (weggelaten). */
.blog-bladeren {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 49px 0 40px;
}

.blog-blader {
  max-width: 50%;
  color: var(--donker);
  text-decoration: none;
}

.blog-blader-volgende {
  margin-left: auto;
  text-align: right;
}

.blog-blader-label,
.blog-blader-titel {
  display: block;
  padding: 4px 0;
  font-family: var(--kop);
  font-stretch: var(--kop-smal);
  font-weight: var(--kop-gewicht);
  text-transform: uppercase;
}

.blog-blader-label {
  font-size: 9px;
  line-height: 16px;
  letter-spacing: 0.15em;
}

.blog-blader-titel {
  font-size: 17px;
  line-height: 26px;
  letter-spacing: 0.1em;
}

.blog-blader:hover {
  opacity: 0.6;
}

/* ------------------------------------------------------------- voet */

.voet {
  padding: 41px 17px;
  background: var(--roze);
  color: rgba(28, 28, 28, 0.69);
}

/* Elk deel van de voet (foto-rand, menu, copyright) heeft 20 px boven en onder. */
.voet > .row {
  margin: 0 -17px;
  padding: 20px 0;
}

.voet > .row:last-child {
  padding-bottom: 0;
}

/* Op desktop staan de blokken in de voet strak in hun deel. */
.voet .block {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.voet .col-leeg {
  display: none;
}

.voet-nav {
  padding: 20px 0;
  text-align: center;
  line-height: 24px;
}

.voet-nav a {
  display: inline-block;
  padding-right: 12px;
  color: #000;
  font: 400 12px/24px var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
}

.voet-nav a:last-child {
  padding-right: 0;
}

.voet-nav a:hover {
  opacity: 0.6;
}

/* ------------------------------------------------------------- breekpunten */

@media (max-width: 1200px) {
  :root {
    --tekstbreedte: 66.6667%;
  }
}

@media (max-width: 900px) {
  :root {
    --tekstbreedte: 83.3333%;
  }
}

@media (max-width: 960px) {
  .menukaart-kaders {
    grid-template-columns: minmax(0, 1fr);
    gap: 72px;
    padding: 80px 40px 16px;
  }
}

@media (max-width: 767px) {
  .kop {
    display: flex;
    justify-content: space-between;
    min-height: 83px;
    margin: 0 calc(-1 * var(--rand)) var(--rand);
    padding: 8px 17px;
  }

  .kop-logo {
    margin: 0;
    padding: 0 0 0 8px;
  }

  .kop-logo img {
    width: 60px;
  }

  .kop-midden {
    display: none;
  }

  /* Mobiel: geen knoppen in de kopfoto, wel onder de introtekst. */
  .hero-knoppen:not(.hero-knoppen-altijd) {
    display: none;
  }

  .alleen-breed {
    display: none;
  }

  .alleen-smal {
    display: flex !important;
  }

  .menu-knop {
    display: block;
    width: 40px;
    height: 34px;
    padding: 8px;
    border: 0;
    background: none;
    cursor: pointer;
  }

  .menu-knop-tekst {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .menu-knop-streep,
  .menu-knop-streep::before,
  .menu-knop-streep::after {
    display: block;
    width: 24px;
    height: 1px;
    background: var(--roze);
  }

  .menu-knop-streep {
    position: relative;
  }

  .menu-knop-streep::before,
  .menu-knop-streep::after {
    content: '';
    position: absolute;
    left: 0;
  }

  .menu-knop-streep::before {
    top: -7px;
  }

  .menu-knop-streep::after {
    top: 7px;
  }

  .site {
    border-top-width: 0;
  }

  .pagina-vol .kop {
    margin-bottom: 0;
  }

  .voet {
    padding-top: 36px;
    padding-bottom: 36px;
  }
}

@media (max-width: 640px) {
  .row {
    flex-direction: column;
  }

  .row > .col {
    width: 100%;
  }

  .row > .col-leeg {
    display: none;
  }

  /* Afstandhouders naast andere kolommen verdwijnen op mobiel (zoals in Squarespace). */
  .col:not(.span-12) > .block-spacer {
    display: none;
  }

  .voet {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .voet .block {
    padding-top: 17px !important;
    padding-bottom: 17px !important;
  }

  /* Op mobiel krijgt ook het eerste blok van een kolom weer ruimte erboven. */
  .row .block:first-child:not(.block-stretch) {
    padding-top: 17px !important;
  }

  .block-html h1,
  .block-html h2,
  .block-html h3 {
    margin-bottom: 24px;
    font-size: 20.4px;
    line-height: 28.8px;
  }

  .block-html * + h1,
  .block-html * + h2,
  .block-html * + h3 {
    margin-top: 24px;
  }

  .image-card {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 6.5px;
  }

  .tussenbalk-kolommen {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .image-card-rechts .image-card-foto {
    order: 0;
  }


  .galerij-raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 600px) {
  :root {
    --tekstbreedte: 100%;
  }
}

@media (max-width: 480px) {
  .blog-bladeren {
    flex-direction: column;
  }

  /* De fotostrook is op mobiel laag: een kleinere knop dekt minder af. */
  .galerij-schuif .hero-knoppen {
    padding: 40px 12px 14px;
  }

  .galerij-schuif .hero-knoppen .knop {
    padding: 13px 20px;
    font-size: 13px;
  }

  .ruit {
    height: 28px;
    background-size: 28px 28px;
  }

  .tussenbalk {
    padding: 48px 20px 44px;
  }

  .tussenbalk-kop {
    font-size: 20.4px;
    line-height: 28.8px;
    margin-bottom: 20px;
  }

  .menukaart-kaders {
    gap: 64px;
    padding: 64px 14px 8px;
  }

  .menu-kader {
    padding: 34px 14px 6px;
    border-width: 3px;
    border-radius: 14px;
  }

  .menu-titel {
    font-size: 42px;
  }

  .menu-kolommen,
  .gerecht {
    grid-template-columns: minmax(0, 1fr) 44px 58px;
    column-gap: 8px;
  }

  .menu-kolommen {
    font-size: 11px;
  }

  .menu-kolom {
    white-space: normal;
  }

  .menu-kolom img {
    height: 24px;
  }

  .menu-iconen {
    gap: 3px;
  }

  .gerecht-naam {
    font-size: 21px;
  }

  .gerecht-omschrijving {
    font-size: 14px;
  }

  .prijs {
    font-size: 20px;
  }

  .stempel {
    width: 150px;
  }

  .menukaart-bestel {
    padding: 12px 16px 72px;
  }

  .menukaart-bestel p {
    font-size: 14px;
  }

  .tussenbalk {
    padding-top: 111px;
  }

  .vel-inhoud {
    padding: 48px 20px 44px;
  }

  .vel-met-stempel .vel-inhoud {
    padding-bottom: 84px;
  }

  .vel-titel {
    font-size: 40px;
    margin-bottom: 20px;
  }

  .vel-insta {
    padding: 0 14px 36px;
  }

  .vel-fotos {
    padding: 0 14px 64px;
  }

  .vel-fotos-onder .vel-inhoud {
    padding-bottom: 28px;
  }

  .kaart-breed {
    height: 320px;
  }

  .blog-blader,
  .blog-blader-volgende {
    max-width: none;
    margin-left: 0;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}