/* Cafetaria de Kapteyn
   Canvas licht koelblauw, inkt navy, accent kobalt (uit logo).
   Vormregel: media en kaarten 16px radius, interactieve elementen pill. */

:root {
  --canvas: #f5f8fb;
  --wit: #fdfeff;
  --inkt: #14273f;
  --inkt-zacht: #51617c;
  --navy: #122a4d;
  --kobalt: #1f4fd8;
  --kobalt-diep: #1a43b5;
  --lijn: #dde5ee;
  --radius: 16px;
  --schaduw: 0 18px 44px -18px rgba(18, 42, 77, .28);
  --serif: "DM Serif Display", serif;
  --sans: "Hanken Grotesk", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--canvas);
  color: var(--inkt);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* height: auto is nodig omdat elke img een width- en height-attribuut heeft (tegen verspringen).
   Zonder deze regel wint dat height-attribuut van de CSS-verhouding en worden beelden uitgerekt. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* Typografie */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.08; }
.sectiekop { max-width: 640px; }
.sectiekop h2 { font-size: clamp(34px, 4.2vw, 52px); margin: 10px 0 14px; }
.sectiekop p { color: var(--inkt-zacht); max-width: 58ch; }

/* Knoppen: pill */
.knop {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px; border-radius: 999px;
  font-weight: 700; font-size: 16px; letter-spacing: .01em;
  transition: transform .18s cubic-bezier(.22, 1, .36, 1), box-shadow .18s;
}
.knop:active { transform: scale(.98); }
.knop-vol { background: var(--kobalt); color: #fff; box-shadow: 0 10px 26px -10px rgba(31, 79, 216, .55); }
.knop-vol:hover { background: var(--kobalt-diep); transform: translateY(-2px); }
.knop-lijn { border: 1.5px solid rgba(255, 255, 255, .65); color: #fff; backdrop-filter: blur(8px); background: rgba(255, 255, 255, .12); }
.knop-lijn:hover { background: rgba(255, 255, 255, .22); transform: translateY(-2px); }
.knop-inkt { border: 1.5px solid var(--inkt); color: var(--inkt); }
.knop-inkt:hover { background: var(--inkt); color: #fff; transform: translateY(-2px); }

/* Navigatie */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background .25s, box-shadow .25s, backdrop-filter .25s;
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.nav.vast, .nav.effen {
  background: #fdfeff;
  box-shadow: 0 1px 0 rgba(18, 42, 77, .08);
}
.nav-logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav-cta .cta-kort { display: none; }
.nav-logo img { height: 44px; width: auto; }
.nav-links { display: flex; gap: 34px; align-items: center; font-weight: 700; font-size: 15.5px; }
.nav-links a { color: #fff; opacity: .92; transition: opacity .15s; padding: 12px 4px; }
.nav-links a:hover { opacity: 1; }
.nav.vast .nav-links a, .nav.effen .nav-links a { color: var(--inkt); }
.nav-links a.actief { color: var(--kobalt) !important; }
.nav-links .nav-cta {
  padding: 10px 22px; border-radius: 999px; background: var(--kobalt); color: #fff !important;
}
.nav.donkertekst .nav-links a { color: var(--inkt); }

/* Hero */
.hero { position: relative; min-height: 92vh; display: flex; align-items: flex-end; overflow: hidden; }
.hero-foto { position: absolute; inset: 0; }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 45%; }
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(78deg, rgba(10, 24, 46, .78) 0%, rgba(10, 24, 46, .45) 42%, rgba(10, 24, 46, .06) 70%),
    linear-gradient(0deg, rgba(10, 24, 46, .55) 0%, rgba(10, 24, 46, 0) 34%);
}
.hero-inhoud { position: relative; z-index: 2; color: #fff; padding: 0 0 9vh; max-width: 660px; }
.hero-inhoud h1 { font-size: clamp(46px, 6.6vw, 88px); margin: 14px 0 18px; text-wrap: balance; }
.hero-inhoud p { font-size: 19px; max-width: 46ch; color: rgba(255, 255, 255, .88); }
.hero-acties { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }

/* Glass reviewbadge */
.scorebadge {
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: 34px; padding: 13px 22px; border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .32);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.scorebadge .cijfer { font-family: var(--serif); font-size: 26px; line-height: 1; }
.sterren { display: inline-flex; gap: 2px; }
.sterren svg { width: 16px; height: 16px; fill: #ffc73d; }
.scorebadge small { font-size: 13.5px; color: rgba(255, 255, 255, .85); line-height: 1.35; }

/* Secties */
section { padding: 96px 0; }
.sectie-wit { background: var(--wit); }
.sectie-navy { background: var(--navy); color: #fff; }

/* Toppers */
.toppers-grid {
  display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 22px; margin-top: 48px;
}
.topper {
  background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius);
  padding: 26px; display: flex; flex-direction: column;
  transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s;
}
.topper:hover { transform: translateY(-4px); box-shadow: var(--schaduw); }
.topper.groot { grid-row: 1 / 3; padding: 36px; }
.topper img { width: 100%; height: 200px; object-fit: contain; margin: 0 auto; }
.topper.groot img { height: 380px; flex: 1; }
.topper img.foto-cover, .bestseller img.foto-cover { object-fit: cover; width: 100%; border-radius: 12px; }
.topper-regel { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-top: 18px; }
.topper-regel h3 { font-size: 24px; }
.topper.groot .topper-regel h3 { font-size: 32px; }
.topper-regel .prijs { font-weight: 800; color: var(--kobalt); font-size: 19px; white-space: nowrap; }
.topper p { color: var(--inkt-zacht); font-size: 15.5px; margin-top: 6px; }

/* Videosectie */
.video-split { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: center; }
.videokader { position: relative; border-radius: 20px; overflow: hidden; box-shadow: var(--schaduw); }
.videokader video, .videokader img { width: 100%; display: block; }
/* De Kapteyn burger is dezelfde uitsnede als op de menukaart: een product op een doorzichtige
   achtergrond. Die kan niet tot de rand van het kader lopen, dus hij krijgt een eigen vlak.
   De schaal houdt het product net onder zijn echte pixelgrootte (237 bij 209), anders wordt hij
   zichtbaar zacht. */
.burgerkader { background: var(--canvas); aspect-ratio: 1 / 1; max-width: 440px; margin-inline: auto;
  display: grid; place-items: center; }
.burgerkader img { width: 100%; height: 100%; object-fit: contain;
  /* De burger staat 2,5 procent rechts en 2,1 procent boven het midden van zijn eigen beeld
     (product 237 bij 209 op een vlak van 500). Deze verschuiving zet hem in het midden van het
     vak; in procenten, zodat het op elk schermformaat klopt. */
  transform: translate(-3.25%, 2.73%) scale(1.3); }

.videokader .chip {
  position: absolute; left: 18px; top: 18px; padding: 8px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 700; letter-spacing: .06em; color: #fff;
  background: rgba(18, 42, 77, .45); border: 1px solid rgba(255, 255, 255, .3);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.video-tekst h2 { font-size: clamp(34px, 4vw, 50px); margin: 10px 0 16px; }
.video-tekst .samenstelling { color: var(--inkt-zacht); font-size: 16.5px; }
.video-tekst .prijsregel { font-family: var(--serif); font-size: 30px; margin: 22px 0 26px; }
.video-tekst .prijsregel span { color: var(--kobalt); }

/* Over ons */
.over-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
.over-split figure { border-radius: var(--radius); overflow: hidden; box-shadow: var(--schaduw); }
.over-split figure img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.over-tekst h2 { font-size: clamp(34px, 4vw, 50px); margin: 10px 0 18px; }
.over-tekst p { color: var(--inkt-zacht); margin-bottom: 14px; max-width: 56ch; }

/* Reviews */
.review-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.review-score { text-align: right; }
.review-score .cijfer { font-family: var(--serif); font-size: 64px; line-height: 1; }
.review-score small { color: #9db8f5; font-size: 14px; }
.review-rij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 48px; }
.review {
  border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius);
  padding: 28px; background: rgba(255, 255, 255, .05);
}
.review p { font-size: 16px; color: rgba(255, 255, 255, .88); font-style: italic; }
.review footer { margin-top: 16px; font-size: 13.5px; color: #9db8f5; font-weight: 700; }

/* Praktisch */
.praktisch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-top: 48px; }
.tijden { width: 100%; border-collapse: collapse; }
.tijden td { padding: 13px 0; border-bottom: 1px solid var(--lijn); font-size: 16.5px; }
.tijden td:last-child { text-align: right; font-weight: 700; }
.tijden .dicht td:last-child { color: var(--inkt-zacht); font-weight: 400; }
.tijden .vandaag td { color: var(--kobalt); }
.praktisch-adres p { color: var(--inkt-zacht); margin-bottom: 6px; }
.praktisch-adres .groot { font-size: 22px; color: var(--inkt); font-weight: 700; margin: 14px 0 2px; }
.praktisch-adres .knop { margin-top: 24px; }

/* Footer */
.voet { background: var(--wit); border-top: 1px solid var(--lijn); padding: 56px 0 40px; }
.voet .wrap { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.voet img { height: 52px; width: auto; }
.voet h4 { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--inkt-zacht); margin-bottom: 12px; }
.voet p, .voet a { font-size: 15.5px; color: var(--inkt); line-height: 1.9; display: block; }
/* Ruimte om de link zelf, zodat hij op een telefoon te raken is. Zonder dit is een regel
   in de voet ongeveer 29 px hoog en mist een duim hem makkelijk. */
.voet a { padding: 5px 0; }
.voet a:hover { color: var(--kobalt); }
.voet-onder { border-top: 1px solid var(--lijn); margin-top: 44px; padding-top: 22px; font-size: 13.5px; color: var(--inkt-zacht); }

/* Menupagina */
.paginakop { padding: 150px 0 56px; }
.paginakop h1 { font-size: clamp(42px, 5.5vw, 70px); margin: 12px 0 14px; }
.paginakop p { color: var(--inkt-zacht); max-width: 58ch; }

.bestsellers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
.bestseller {
  background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius);
  padding: 20px; transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s;
}
.bestseller:hover { transform: translateY(-4px); box-shadow: var(--schaduw); }
/* Fotovak: vaste hoogte, foto altijd 150 px hoog getoond. Daardoor klopt de schaal uit
   foto-vulling.json op elk schermformaat, en valt de doorzichtige rand onzichtbaar buiten beeld. */
.fotovak { height: 150px; width: 100%; min-width: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; margin: 0 auto 14px; }
.fotovak img { height: 150px; width: auto; max-width: none; margin: 0; object-fit: contain;
  transform: translate(var(--dx, 0), var(--dy, 0)) scale(var(--v, 1)); }
.bestseller img { height: 150px; object-fit: contain; margin: 0 auto 14px; }
.bestseller h3 { font-family: var(--sans); font-weight: 800; font-size: 16.5px; line-height: 1.3; }
.bestseller .prijs { color: var(--kobalt); font-weight: 800; margin-top: 4px; }

.kaartnav {
  position: sticky; top: 76px; z-index: 40; padding: 14px 0;
  background: rgba(245, 248, 251, .88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--lijn);
}
.kaartnav .wrap { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.kaartnav a {
  padding: 9px 18px; border-radius: 999px; font-size: 14.5px; font-weight: 700;
  border: 1px solid var(--lijn); background: var(--wit); white-space: nowrap;
}
.kaartnav a:hover { border-color: var(--kobalt); color: var(--kobalt); }

.kaart-categorie { padding: 64px 0 8px; }
.kaart-categorie h2 { font-size: clamp(30px, 3.4vw, 42px); margin-bottom: 6px; }
.kaart-categorie .cat-noot { color: var(--inkt-zacht); font-size: 15.5px; margin-bottom: 8px; }
.kaartlijst { columns: 2; column-gap: 64px; margin-top: 26px; }
.kaartlijst .item {
  display: flex; align-items: baseline; gap: 10px;
  padding: 11px 0; break-inside: avoid; font-size: 16.5px;
}
.kaartlijst .item img, .kaartlijst .geen-foto { width: 56px; height: 44px; object-fit: contain; flex-shrink: 0; align-self: center; }
/* Zelfde correctie als bij de favorieten: het product even groot in elke miniatuur. */
.kaartlijst .item img { transform: translate(var(--dx, 0), var(--dy, 0)) scale(var(--v, 1)); }
.kaartlijst .item img.foto-kaart { transform: none; }
.kaartlijst .naam { flex-shrink: 0; }
/* afgesneden bronfoto's tonen als fotokaart: uitsnede van het middenstuk, kaartrand is fotorand */
.bestseller img.foto-kaart { width: 100%; height: 150px; object-fit: cover; border-radius: 12px; }
.bento img.foto-kaart { object-fit: cover; border-radius: 12px; }
.kaartlijst .stip { flex: 1; border-bottom: 2px dotted #c3cfdd; transform: translateY(-4px); }
.kaartlijst .tekst { display: flex; flex-direction: column; flex-shrink: 0; max-width: 62%; }
.kaartlijst .omschrijving { color: var(--inkt-zacht); font-size: 14px; line-height: 1.35; margin-top: 2px; }
.kaartlijst .item img.foto-kaart { object-fit: cover; border-radius: 6px; }
.kaartlijst .prijs { font-weight: 700; white-space: nowrap; }

/* Contactpagina */
.contact-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: start; }
.contact-kaart { border-radius: var(--radius); overflow: hidden; box-shadow: var(--schaduw); }
.contact-kaart iframe { width: 100%; height: 460px; border: 0; display: block; }
.contact-kaart.breed { margin-top: 56px; }
.contact-foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--schaduw); }
.praktisch-adres .mailregel { margin-top: 20px; color: var(--inkt-zacht); font-size: 15px; }
.praktisch-adres .mailregel a { color: var(--kobalt); font-weight: 700; }
.contact-grid .tijden { margin-top: 36px; }
.faq { max-width: 720px; margin-right: auto; padding-top: 72px; }
.faq h2 { font-size: clamp(30px, 3.4vw, 42px); margin-bottom: 18px; }
.faq dt { font-weight: 800; font-size: 17px; margin-top: 22px; }
.faq dd { color: var(--inkt-zacht); margin: 6px 0 0; }
.faq dd a { color: var(--kobalt); font-weight: 700; }
.bento-cta { margin-top: 32px; text-align: center; }

/* Reveal-animatie */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1); }
.reveal.zichtbaar { opacity: 1; transform: none; }
.reveal:nth-child(2) { transition-delay: .08s; }
.reveal:nth-child(3) { transition-delay: .16s; }
.reveal:nth-child(4) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* V2: naar de imagegen-comps */
.hero2 { padding: 108px 24px 0; }
.hero2-kader {
  position: relative; max-width: 1400px; margin: 0 auto;
  border-radius: 24px; overflow: hidden; box-shadow: var(--schaduw);
  display: grid; grid-template-columns: 1.05fr .95fr;
}
.hero2-kader > img { width: 100%; height: 100%; min-height: min(78vh, 720px); object-fit: cover; object-position: 50% 45%; display: block; }
.hero2-paneel {
  background: #122a4d; color: #fff;
  padding: 56px 56px 60px;
  display: flex; flex-direction: column; justify-content: center;
}
.hero2-paneel h1 { font-size: clamp(40px, 4.6vw, 66px); margin: 12px 0 14px; }
.hero2-paneel > p { color: rgba(255, 255, 255, .85); max-width: 44ch; }
.hero2-paneel .hero-acties { margin-top: 26px; }
.hero2-paneel .scorebadge { margin: 0; }

.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; margin-top: 48px; }
.bento a { background: var(--wit); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; box-shadow: 0 10px 30px -22px rgba(18, 42, 77, .35); transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s; }
.bento a:hover { transform: translateY(-4px); box-shadow: var(--schaduw); }
.bento .groot { grid-column: span 7; grid-row: span 2; padding: 34px; }
.bento .klein { grid-column: span 5; }
.bento img { width: 100%; height: 170px; object-fit: contain; margin: auto; }
.bento .groot img { height: 400px; flex: 1; }

/* Vier favorieten naast elkaar, zonder kaartjes. Vier witte vlakken van 380 pixels hoog maakten
   het blok zwaarder dan de rest van de pagina; de foto's staan nu vrij op het doek. */
.favorieten-rij { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 44px; }
.favoriet { display: block; text-align: center; }
.favoriet .fotovak { transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
/* Het optillen bij hover zit op het vak, niet op de foto: die heeft zijn eigen transform
   voor de schaalcorrectie en die zou hier anders overschreven worden. */
.favoriet:hover .fotovak { transform: translateY(-6px) scale(1.03); }
.favoriet .regel { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.favoriet .naam { font-family: var(--serif); font-size: 19px; color: var(--inkt); }
.favoriet .prijs { font-weight: 800; color: var(--kobalt); font-size: 16px; white-space: nowrap; }
.favoriet-oms { display: block; color: var(--inkt-zacht); font-size: 14.5px; line-height: 1.4; margin-top: 6px; }
.bento img.foto-cover { object-fit: cover; border-radius: 12px; }
.bento .regel { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-top: 16px; }
.bento .regel h3 { font-size: 22px; }
.bento .groot .regel h3 { font-size: 30px; }
.bento .regel .prijs { font-weight: 800; color: var(--kobalt); font-size: 18px; white-space: nowrap; }
.bento .groot p, .bento .klein p { color: var(--inkt-zacht); font-size: 15.5px; margin-top: 6px; }

.fotostapel { position: relative; padding: 0 0 44px 44px; }
.fotostapel .groot-beeld { border-radius: var(--radius); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--schaduw); }
.fotostapel .oud-beeld {
  position: absolute; left: 0; bottom: 0; width: 46%;
  border: 8px solid #fff; border-radius: 6px; transform: rotate(-4deg);
  box-shadow: 0 18px 40px -18px rgba(18, 42, 77, .4);
}
.kom-langs { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-weight: 700; color: var(--inkt); border-bottom: 2px solid var(--inkt); padding-bottom: 3px; }
.kom-langs:hover { color: var(--kobalt); border-color: var(--kobalt); }

.reviews2 { margin: 0 24px; }
.reviews2 .paneel { max-width: 1400px; margin: 0 auto; background: #e4ecf6; border-radius: 24px; padding: 72px 64px; }
.reviews2 .binnen { display: grid; grid-template-columns: 1fr 1.8fr; gap: 56px; align-items: center; }
.reviews2 .cijfer-groot { font-family: var(--serif); font-size: clamp(110px, 12vw, 170px); line-height: .9; color: var(--kobalt); font-variant-numeric: tabular-nums; }
.reviews2 .sterren svg { width: 22px; height: 22px; }
.reviews2 .cijfer-onder { color: var(--inkt-zacht); margin-top: 10px; }
.reviews2 .review { background: var(--wit); box-shadow: 0 14px 34px -20px rgba(18, 42, 77, .3); border: none; }
.reviews2 .review p { color: var(--inkt-zacht); }
.reviews2 .review footer { color: var(--kobalt); }
.reviews2 .review-rij { margin-top: 26px; }
.reviews2 .review-rij .review:nth-child(2) { transform: translateY(16px); }

.afhalen2 { margin: 96px 24px; }
.afhalen2 .kader { position: relative; max-width: 1400px; margin: 0 auto; border-radius: 24px; overflow: hidden; box-shadow: var(--schaduw); }
.afhalen2 .kader > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.afhalen2 .laag { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(247, 250, 253, .97) 0%, rgba(247, 250, 253, .9) 42%, rgba(247, 250, 253, .2) 78%); }
.afhalen2 .inhoud { position: relative; padding: 84px 64px; max-width: 560px; }
.afhalen2 .inhoud h2 { font-size: clamp(34px, 4vw, 54px); margin: 10px 0 12px; }
.afhalen2 .inhoud > p { color: var(--inkt-zacht); }
.afhalen2 .knop { margin: 26px 0 30px; }
.afhalen2 .uren { display: grid; grid-template-columns: auto auto; gap: 7px 28px; font-size: 15.5px; width: max-content; }
.afhalen2 .uren dt { color: var(--inkt-zacht); }
.afhalen2 .uren dd { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }

/* Responsief */
@media (max-width: 960px) {
  section { padding: 68px 0; }
  .hero2 { padding: 92px 14px 0; }
  .hero2-kader { grid-template-columns: 1fr; }
  .hero2-paneel { padding: 30px 26px 34px; }
  .hero2-kader > img { height: 46vh; min-height: 0; order: -1; }
  .bento { grid-template-columns: 1fr; }
  .bento .groot, .bento .klein { grid-column: auto; grid-row: auto; }
  .bento .groot img { height: 250px; }
  /* twee naast elkaar op de telefoon: vier past niet en een kolom maakt het blok eindeloos lang */
  .favorieten-rij { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
  .favoriet .naam { font-size: 16px; }
  .favoriet .regel { margin-top: 12px; gap: 6px; }
  .reviews2, .afhalen2 { margin-left: 14px; margin-right: 14px; }
  .reviews2 .paneel { padding: 44px 26px; }
  .reviews2 .binnen { grid-template-columns: 1fr; gap: 32px; }
  .afhalen2 .laag { background: rgba(247, 250, 253, .93); }
  .afhalen2 .inhoud { padding: 44px 26px; }
  .toppers-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .topper.groot { grid-row: auto; }
  .topper.groot img { height: 260px; }
  .video-split, .over-split, .praktisch-grid, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .review-rij { grid-template-columns: 1fr; }
  .bestsellers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Op een kaartje van ongeveer 140 px past een breed gerecht niet op volle hoogte. Vandaar een
     tweede maat uit foto-vulling.json, waar de breedte de grens is. */
  .fotovak { height: 130px; }
  .fotovak img { height: 130px;
    transform: translate(var(--dxm, var(--dx, 0)), var(--dym, var(--dy, 0))) scale(var(--vm, var(--v, 1))); }
  .kaartlijst { columns: 1; }
  /* vier links plus logo passen alleen op 390px als alles krimpt en de knop niet afbreekt */
  .nav .wrap { height: 64px; gap: 10px; }
  .nav-logo img { height: 30px; }
  .nav-links { gap: 14px; font-size: 13.5px; }
  .nav-links .nav-cta { padding: 9px 14px; font-size: 13.5px; white-space: nowrap; }
  .nav-cta .cta-lang { display: none; }
  .nav-cta .cta-kort { display: inline; }
  .hero-inhoud h1 { font-size: clamp(40px, 10vw, 56px); }
}