/* Deli MeGusto, Gouda. Opzet door Andor Manu.

   Dit is hun huisstijl, niet een nieuwe. Het geel is hun geel (#F5CD6F), het
   woordmerk is hun woordmerk, de getekende groenten en het gouden merkje zijn
   van hen. Hun kopletter is Nexa Light, die is niet vrij te gebruiken; Jost op
   300 komt er het dichtst bij. Hun tekstletter, Fira Sans, kan wel gewoon.

   Wat deze opzet wint, wint hij niet op uiterlijk maar op inhoud: de acht
   broodjes als kaart in plaats van een alinea, de vier open dagen bovenaan,
   de cadeauprijzen in een raster, en gegevens die Google kan uitlezen. */

:root {
  --geel:  #F5CD6F;  /* hun geel */
  --geel-diep: #E9B94A;
  --inkt:  #5C7186;  /* de blauwgrijze inkt van hun tekeningen */
  --rood:  #E8502A;  /* hun accent, zoals het op hun site staat */
  /* Datzelfde rood haalt op wit maar 3,7 tegen 1 en dat is te weinig voor
     kleine letters. Voor tekst een tint dieper, voor vlakken en stippen
     blijft hun eigen rood staan. */
  --rood-lees: #C4381B;
  --zwart: #111111;
  --tekst: #333333;
  --grijs: #F2F2F0;
  --lijn:  #E2E1DC;
  --wit:   #FFFFFF;

  --kop:   'Jost', 'Century Gothic', 'Helvetica Neue', Arial, sans-serif;
  --lees:  'Fira Sans', 'Helvetica Neue', Arial, sans-serif;

  --regel: 34rem;
  --breed: 78rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--wit);
  color: var(--tekst);
  font-family: var(--lees);
  font-size: 1.02rem;
  line-height: 1.66;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--rood); outline-offset: 3px; }

.overslaan { position: absolute; left: -9999px; background: var(--zwart); color: var(--wit); padding: .7rem 1rem; z-index: 30; }
.overslaan:focus { left: 1rem; top: 1rem; }

.binnen { width: 100%; max-width: var(--breed); margin: 0 auto; padding: 0 1.5rem; }

/* Hun koppen zijn licht, breed en in kapitalen. Dat is het kenmerkende aan
   hun pagina en dat houden we vast. */
h1, h2, h3 {
  font-family: var(--kop);
  font-weight: 300;
  color: var(--zwart);
  letter-spacing: .02em;
  margin: 0;
  text-wrap: balance;
}
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); text-transform: uppercase; display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
h3 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .12em; }

/* Het gouden merkje dat zij naast hun koppen zetten. */
.merkje { width: 1.6rem; height: auto; flex: none; }

.bovenregel {
  font-family: var(--kop); font-weight: 500;
  font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--rood-lees); margin: 0 0 .5rem;
}

.lead { font-size: 1.08rem; max-width: var(--regel); }
.smal { max-width: var(--regel); }
.klein { font-size: .88rem; color: #6B6B66; }
.let-op { color: var(--zwart); }
.ondertekend { font-family: var(--kop); font-weight: 400; font-size: 1.1rem; color: var(--zwart); margin-top: 1.2rem; }

/* ---------- bovenbalk en merkbalk ---------- */

.bovenbalk { background: var(--wit); border-bottom: 1px solid var(--lijn); font-size: .84rem; }
.bovenbalk .binnen { display: flex; gap: 0 1.4rem; align-items: center; padding-block: .5rem; flex-wrap: wrap; }
.bovenbalk a { color: var(--zwart); text-decoration: none; font-weight: 500; }
.bovenbalk a:hover { color: var(--rood); }
.sociaal { margin-left: auto; display: flex; gap: 0 1rem; }

.merkbalk { background: var(--geel); position: sticky; top: 0; z-index: 20; }
.merkbalk .binnen { display: flex; align-items: center; gap: 1rem 1.6rem; padding-block: 1rem; }
.merk { flex: none; }
.merk img { width: 165px; height: auto; }
.merkbalk nav { margin-left: auto; display: flex; align-items: center; gap: 0 1.35rem; overflow-x: auto; scrollbar-width: none; }
.merkbalk nav::-webkit-scrollbar { display: none; }
.merkbalk nav a {
  font-family: var(--lees); font-weight: 600; font-size: .95rem;
  color: var(--zwart); text-decoration: none; white-space: nowrap;
  padding: .25rem 0; border-bottom: 2px solid transparent;
}
.merkbalk nav a:hover { border-bottom-color: var(--zwart); }
.merkbalk nav a[aria-current="page"] { border-bottom-color: var(--rood); }
/* Op een telefoon past de balk niet naast het logo. Dan zakt hij naar een
   eigen regel over de volle breedte, in plaats van halverwege een woord af te
   breken. */
@media (max-width: 47rem) {
  .merkbalk .binnen { flex-wrap: wrap; row-gap: .35rem; padding-block: .8rem; }
  .merkbalk nav { margin-left: 0; width: 100%; gap: 0 1.1rem; padding-bottom: .15rem; }
  .merkbalk nav a { font-size: .92rem; white-space: nowrap; }
  .merk img { width: 140px; height: auto; }
}
 /* Rood op geel haalt maar 3,5 tegen 1. Als knopje in hun zwart is het
    leesbaar en meteen duidelijk dat dit de hoofdactie is. */
.nav-bestel {
  color: #fff !important; background: var(--zwart);
  padding: .4rem .85rem; border-bottom: 0 !important;
}
.nav-bestel:hover { background: var(--rood); }

/* ---------- de hero ---------- */

.held { display: grid; }
.held-foto img { width: 100%; height: 100%; object-fit: cover; }
.held-tekst { position: relative; background: var(--wit); display: flex; align-items: center; overflow: hidden; }
.held-binnen { position: relative; z-index: 1; padding: 3rem 1.5rem; max-width: 38rem; }

/* Hun getekende groenten, rechtsboven, precies zoals zij ze gebruiken. */
/* De tekeningen staan rechts in een verder leeg bestand van 2560 breed. Om ze
   groot genoeg in beeld te krijgen moet de afbeelding breder zijn dan zijn
   kolom, dus max-width moet hier uit. De kolom snijdt de rest weg. */
.tekening {
  position: absolute; right: 3%; top: 50%; transform: translateY(-50%);
  width: 108%; max-width: none; height: auto;
  opacity: .9; pointer-events: none; z-index: 0;
}

.held h1 {
  font-size: clamp(3rem, 8vw, 5.6rem);
  line-height: .98; letter-spacing: .01em; text-transform: uppercase;
  margin-bottom: 1.2rem;
}

.nu { margin: 1.6rem 0 0; padding: .85rem 1.1rem; border-left: 4px solid var(--geel); background: var(--grijs); max-width: 27rem; }
.nu p { margin: 0; }
.nu-stand { font-family: var(--kop); font-weight: 400; font-size: 1.05rem; color: var(--zwart); display: flex; align-items: flex-start; gap: .55rem; }
.stip { width: .6rem; height: .6rem; border-radius: 50%; background: #9A9A93; flex: none; margin-top: .55em; }
.nu.open .stip { background: #4E9A5B; }
.nu.dicht .stip { background: var(--rood); }
.nu-extra { font-size: .92rem; color: #6B6B66; margin-top: .2rem; }

.knoppen { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.7rem 0 0; }
.knop {
  font-family: var(--lees); font-weight: 600; font-size: .98rem;
  background: var(--zwart); color: var(--wit); border: 2px solid var(--zwart);
  padding: .7rem 1.4rem; text-decoration: none;
}
.knop:hover { background: transparent; color: var(--zwart); }
.knop--lijn { background: transparent; color: var(--zwart); }
.knop--lijn:hover { background: var(--zwart); color: var(--wit); }
.geel .knop { border-color: var(--zwart); }

/* ---------- de gele infostrook ---------- */

.strook { background: var(--grijs); }
.strookgrid { display: grid; gap: 0; }
.strookgrid > div { padding: 1.8rem 1.6rem; }
.strook-geel { background: var(--geel); }
.strookgrid h2 { font-size: .8rem; letter-spacing: .2em; margin-bottom: .7rem; }
.strookgrid p { margin: 0 0 .4rem; }
.strookgrid a { color: var(--zwart); font-weight: 500; }

/* ---------- blokken ---------- */

.blok { padding: 3.6rem 0; }
.blok.geel { background: var(--geel); }
.blok.geel .bovenregel { color: var(--zwart); }
.kaartblok { background: var(--grijs); }

/* ---------- de broodjeskaart ---------- */

.kaart-lijst { list-style: none; margin: 1.8rem 0 0; padding: 0; max-width: 48rem; }
.kaart-lijst li {
  display: grid; grid-template-columns: minmax(0, auto) 1fr; gap: 0 .8rem;
  align-items: baseline; padding: .78rem 0; border-bottom: 1px solid var(--lijn);
}
.kaart-naam { font-family: var(--kop); font-weight: 400; font-size: 1.22rem; text-transform: uppercase; letter-spacing: .04em; color: var(--zwart); white-space: nowrap; }
.kaart-beleg { font-size: .96rem; color: #6B6B66; }

/* ---------- duo-blokken ---------- */

.duo { display: grid; gap: 2rem; align-items: center; }
.duo-tekst p { max-width: var(--regel); }
.duo-foto { position: relative; }
/* Zij zetten een verschoven grijs vlak achter hun foto's. */
.duo-foto::after { content: ''; position: absolute; right: -1.1rem; bottom: -1.1rem; width: 62%; height: 62%; background: var(--grijs); z-index: -1; }
.blok.geel .duo-foto::after { background: var(--geel-diep); }
.duo-foto img { position: relative; z-index: 1; width: 100%; }
/* Portretfoto's van 600x800 werden anders manshoog naast een korte alinea. */
@media (min-width: 60rem) { .duo-foto img { max-height: 30rem; object-fit: cover; } }

/* ---------- rasters en tegels ---------- */

.raster { display: grid; gap: 1.6rem; margin-top: 2rem; }
.raster.drie { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.raster.twee { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.raster.vier { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.1rem; }
.raster.vier .tegel img { aspect-ratio: 1/1; }
.tegel { margin: 0; }
.tegel img { aspect-ratio: 4/3; object-fit: cover; }
.tegel figcaption { margin-top: .7rem; font-size: .95rem; color: #6B6B66; }
.tegel figcaption strong { display: block; font-family: var(--kop); font-weight: 400; font-size: 1.12rem; text-transform: uppercase; letter-spacing: .04em; color: var(--zwart); margin-bottom: .15rem; }

/* ---------- tabellen ---------- */

.tijden { border-collapse: collapse; width: 100%; max-width: 20rem; }
.tijden th, .tijden td { text-align: left; padding: .26rem 0; font-weight: 400; font-size: .95rem; }
.tijden td { text-align: right; }
.tijden tr.dicht th, .tijden tr.dicht td { color: #75756E; }
.tijden tr.vandaag th, .tijden tr.vandaag td { color: var(--rood-lees); font-weight: 600; }
.tijden--voet th, .tijden--voet td { color: #4A4A46; }

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

footer { background: var(--wit); border-top: 1px solid var(--lijn); margin-top: 0; }
.voetgrid { display: grid; gap: 0; padding: 0; }
.voetgrid > div { padding: 2rem 1.6rem; }
.voet-geel { background: var(--geel); }
footer h3 { font-size: .78rem; letter-spacing: .2em; margin-bottom: .7rem; }
footer p { margin: 0 0 .4rem; }
footer a { color: var(--zwart); font-weight: 500; }
.voetregel { border-top: 1px solid var(--lijn); padding-block: 1.2rem; }
.voetregel p { font-size: .86rem; color: #6B6B66; }

/* ---------- binnenpagina's ---------- */

.paginakop { background: var(--geel); padding: 2.6rem 0; position: relative; overflow: hidden; }
.paginakop h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); text-transform: uppercase; line-height: 1.02; }
.paginakop .bovenregel { color: var(--zwart); }
.kruimel { font-size: .84rem; color: #6B6B66; margin: 0 0 .6rem; }
.kruimel a { color: #6B6B66; }
.lijst { margin: 1.2rem 0 0; padding-left: 1.15rem; max-width: 44rem; }
.lijst li { margin-bottom: .55rem; }
@media (min-width: 42rem) { .lijst.twee { columns: 2; column-gap: 2.4rem; } .lijst.twee li { break-inside: avoid; } }
.tweekolom { display: grid; gap: 2.2rem; }

/* ---------- cadeaupakketten ---------- */

.pakketten { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); margin-top: 2rem; }
.pakket { border: 1px solid var(--lijn); background: var(--wit); display: grid; grid-template-rows: auto 1fr; align-content: start; }
.pakket img { aspect-ratio: 3/4; object-fit: cover; }
.pakket-tekst { padding: 1rem 1.1rem 1.3rem; }
.pakket h2 { font-size: 1.15rem; display: block; margin-bottom: .1rem; }
.pakket-prijs { font-family: var(--kop); font-weight: 400; font-size: 1.7rem; color: var(--zwart); margin: 0 0 .5rem; }
.pakket-inhoud { margin: 0; font-size: .93rem; color: #6B6B66; }
.pakket--fav { border-color: var(--geel-diep); border-width: 2px; }
.lint { display: inline-block; font-family: var(--lees); font-weight: 600; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; background: var(--geel); color: var(--zwart); padding: .18rem .5rem; margin-bottom: .5rem; }

/* ---------- gangen ---------- */

.gang { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: 1.5rem; max-width: 46rem; }
.gang li { border-left: 4px solid var(--geel); padding-left: 1.2rem; }
.gangnaam { display: block; font-family: var(--kop); font-weight: 400; font-size: 1.25rem; text-transform: uppercase; letter-spacing: .05em; color: var(--zwart); margin-bottom: .2rem; }
.gang p { margin: 0; }

/* ---------- groter scherm ---------- */

@media (min-width: 52rem) {
  .held { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 78vh; }
  .held-binnen { padding: 4rem 3rem 4rem 3.5rem; }
  .strookgrid { grid-template-columns: repeat(3, 1fr); }
  .voetgrid { grid-template-columns: repeat(3, 1fr); }
  .blok { padding: 4.6rem 0; }
  .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.4rem; }
  .duo.omgekeerd .duo-foto { order: 1; }
  .duo.omgekeerd .duo-tekst { order: 2; }
  .tweekolom { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.4rem; }
  .paginakop { padding: 3.4rem 0; }
}

@media (max-width: 52rem) {
  .tekening { width: 78%; right: -14%; top: auto; bottom: -6%; transform: none; opacity: .5; }
  .held-foto img { max-height: 48vh; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ======================================================================
   Tweede laag: de onderdelen die de opzet moeten verkopen.
   Hierboven staat het merk van Deli MeGusto. Hieronder staat wat hun
   huidige site niet heeft: hun eigen film groot in beeld, een kaart die
   meebeweegt, en de keuken die zijwaarts langsloopt.
   ====================================================================== */

/* Wat met data-op is gemarkeerd staat verborgen tot het script het opzet.
   Draait het script niet, dan zet het bestand zelf alles alsnog aan. */
html.beweegt [data-op] { visibility: hidden; }
html.stil [data-op] { visibility: visible; }

/* ---------- de kop met hun eigen film ---------- */

.filmkop {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: #111;
  color: var(--wit);
}
.kop-film {
  position: absolute; inset: -8% 0 -8% 0;
  width: 100%; height: 116%;
  object-fit: cover;
  will-change: transform;
}
.kop-donker {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, #11111159 0%, #11111100 26%, #1111118c 68%, #111111e6 100%),
    linear-gradient(96deg, #111111a6 0%, #11111133 52%, #11111100 78%);
}
.kop-waas { position: absolute; inset: 0; background: #111111; opacity: 0; }

.kop-inhoud {
  position: relative; z-index: 2;
  width: 100%;
  padding: 0 0 clamp(3rem, 7vh, 5.5rem);
}
.kop-inhoud .binnen { display: grid; gap: 1.5rem; }

.kop-merkje { width: 46px; height: 53px; }
.filmkop .bovenregel { color: var(--geel); margin: 0; }
.filmkop h1 {
  font-family: var(--kop); font-weight: 300;
  font-size: clamp(3.2rem, 11vw, 8.5rem);
  line-height: .88; letter-spacing: -.005em;
  text-transform: uppercase; color: #fff;
  margin: 0;
}
.filmkop .lead {
  color: #ffffffe0; max-width: 34rem; font-size: clamp(1.02rem, 1.6vw, 1.22rem);
  margin: 0;
}
.kop-onder {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem;
  margin-top: .6rem;
}
.filmkop .knop { border: 0; background: var(--geel); color: var(--zwart); }
.filmkop .knop:hover { background: #fff; }
.filmkop .knop--lijn { background: transparent; color: #fff; border: 1px solid #ffffff66; }
.filmkop .knop--lijn:hover { background: #fff; color: var(--zwart); }

/* De stand van nu, hier op de film. Staat er alleen als het script draait,
   anders zou er een bewering staan die niemand gecontroleerd heeft. */
.kop-nu {
  display: inline-flex; align-items: center; gap: .6rem;
  background: #ffffff1a; border: 1px solid #ffffff2e;
  backdrop-filter: blur(6px);
  padding: .5rem .9rem; font-size: .95rem; color: #fff;
}
.kop-nu .stip { width: .55rem; height: .55rem; border-radius: 50%; background: var(--geel); }
.kop-nu.dicht .stip { background: var(--rood); }

.kop-tel {
  position: absolute; right: 0; bottom: clamp(3rem, 7vh, 5.5rem);
  writing-mode: vertical-rl;
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  color: #ffffffb3; padding-right: 1.4rem;
}
.kop-wijzer {
  position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  width: 1px; height: 3.2rem; background: linear-gradient(#ffffff00, #ffffffa6);
  z-index: 2;
}
html.beweegt .kop-wijzer { animation: zak 2.2s ease-in-out infinite; }
@keyframes zak { 0%, 100% { opacity: .3; transform: translateX(-50%) scaleY(.5); transform-origin: top } 50% { opacity: 1; transform: translateX(-50%) scaleY(1); transform-origin: top } }

@media (max-width: 46rem) {
  .kop-tel { display: none; }
  .filmkop { min-height: 88svh; }
}

/* ---------- lopende regel ---------- */

.lintbalk { background: var(--geel); overflow: hidden; padding: .62rem 0; }
.lintspoor { display: flex; width: max-content; }
.lintspoor span {
  font-family: var(--kop); font-weight: 400; font-size: clamp(.85rem, 1.15vw, 1.02rem);
  text-transform: uppercase; letter-spacing: .16em; color: var(--zwart);
  padding: 0 1.3rem; white-space: nowrap; display: inline-flex; align-items: center; gap: 1.3rem;
}
.lintspoor span::after { content: ''; width: 5px; height: 5px; background: var(--rood); border-radius: 50%; }

/* ---------- de broodjeskaart die meebeweegt ---------- */

.kaartblad { background: var(--zwart); color: #fff; padding: clamp(3.5rem, 8vw, 6rem) 0; }
.kaartblad .bovenregel { color: var(--geel); }
.kaartblad h2 { color: #fff; }
.kaartblad h2 .merkje { filter: none; }
.kaartblad .lead { color: #ffffffb8; }

.kaartraam { display: grid; gap: 2rem; margin-top: 2.6rem; }
@media (min-width: 62rem) {
  .kaartraam { grid-template-columns: minmax(0, 1fr) 26rem; gap: 4rem; align-items: start; }
}

.kaartlijst { list-style: none; margin: 0; padding: 0; border-top: 1px solid #ffffff21; }
.kaartregel {
  border-bottom: 1px solid #ffffff21;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline;
  gap: 0 1rem;
  padding: 1.05rem .4rem;
  transition: background .35s ease, padding-left .35s ease;
  cursor: default;
}
.kaartregel .nr {
  font-family: var(--lees); font-size: .74rem; color: #ffffff59;
  font-variant-numeric: tabular-nums;
}
.kaartregel .naam {
  font-family: var(--kop); font-weight: 300;
  font-size: clamp(1.5rem, 3.6vw, 2.5rem); line-height: 1;
  text-transform: uppercase; letter-spacing: .01em;
  color: #ffffffab; transition: color .35s ease;
}
.kaartregel .beleg {
  grid-column: 2; font-size: .92rem; color: #ffffff70;
  margin-top: .35rem;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .4s ease, opacity .35s ease;
}
.kaartregel.aan { background: #ffffff0a; padding-left: 1rem; }
.kaartregel.aan .naam { color: #fff; }
.kaartregel.aan .beleg { max-height: 4rem; opacity: 1; }

/* Zonder muis heeft opengaan bij hover geen zin, dan staat het beleg er
   gewoon altijd. */
@media (hover: none) {
  .kaartregel .beleg { max-height: none; opacity: 1; }
}

.kaartraam-foto { display: none; }
@media (min-width: 62rem) {
  .kaartraam-foto {
    display: block; position: sticky; top: 7.5rem;
    aspect-ratio: 4/5; overflow: hidden; background: #1b1b1b;
  }
  .kaartplaat {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0; visibility: hidden;
  }
  .kaartplaat.aan { opacity: 1; visibility: visible; }
}
.kaart-onder { margin-top: 1.4rem; color: #ffffff70; font-size: .88rem; }

/* ---------- de keuken, zijwaarts ---------- */

.spoor { overflow: hidden; padding: clamp(3.5rem, 8vw, 6rem) 0; }
/* Blijft het blok staan terwijl de rij langsschuift, dan moet de inhoud
   verticaal in het midden hangen, anders valt er onderaan een gat. */
@media (min-width: 62rem) {
  .spoor { display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - 6rem); padding: 6.5rem 0 2rem; }
  .spoorkop { margin-bottom: 1.6rem; }
  .spoorkop .lead { max-width: 30rem; }
}
.spoorkop { margin-bottom: 2.2rem; }
.spoorrij { display: flex; gap: 1.4rem; padding-left: max(1.4rem, calc((100vw - 74rem) / 2)); }
.spoorkaart {
  flex: 0 0 clamp(15rem, 24vw, 20rem);
  background: var(--wit); border: 1px solid var(--lijn);
}
.spoorkaart img { aspect-ratio: 1/1; object-fit: cover; width: 100%; }
.spoorkaart .tekst { padding: 1.1rem 1.2rem 1.4rem; }
.spoorkaart h3 {
  font-family: var(--kop); font-weight: 400; font-size: 1.16rem;
  text-transform: uppercase; letter-spacing: .04em; margin: 0 0 .3rem;
}
.spoorkaart p { margin: 0; font-size: .93rem; color: #6B6B66; }
@media (max-width: 61.99rem) {
  .spoorrij { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; padding-right: 1.4rem; scrollbar-width: none; }
  .spoorrij::-webkit-scrollbar { display: none; }
  .spoorkaart { scroll-snap-align: start; flex-basis: 17rem; }
}

/* ---------- groot beeld dat meebeweegt ---------- */

.breedbeeld { position: relative; overflow: hidden; min-height: clamp(22rem, 52vh, 34rem); display: flex; align-items: center; }
.breedbeeld img {
  position: absolute; inset: -20% 0; width: 100%; height: 140%;
  object-fit: cover; will-change: transform;
}
.breedbeeld .laag { position: absolute; inset: 0; background: linear-gradient(90deg, #111111d9 0%, #11111199 45%, #11111126 100%); }
.breedbeeld .binnen { position: relative; z-index: 2; color: #fff; padding: 3.5rem 1.4rem; }
.breedbeeld .knop { background: var(--geel); color: var(--zwart); border: 0; }
.breedbeeld .knop:hover { background: #fff; }
.breedbeeld h2 { color: #fff; }
.breedbeeld .bovenregel { color: var(--geel); }
.breedbeeld p { color: #ffffffd6; max-width: 32rem; }

/* ---------- de pakketten ---------- */

.prijsraster { display: grid; gap: 1.2rem; margin-top: 2.4rem; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); }
.prijskaart { border: 1px solid var(--lijn); background: var(--wit); display: grid; grid-template-rows: auto 1fr; transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease; }
.prijskaart:hover { transform: translateY(-6px); box-shadow: 0 14px 34px #11111114; }
.prijskaart img { aspect-ratio: 3/4; object-fit: cover; }
.prijskaart .tekst { padding: 1rem 1.1rem 1.3rem; }
.prijskaart h3 { font-family: var(--kop); font-weight: 400; font-size: 1.08rem; text-transform: uppercase; letter-spacing: .04em; margin: 0; }
.prijskaart .bedrag { font-family: var(--kop); font-weight: 300; font-size: 1.7rem; margin: .2rem 0 .5rem; }
.prijskaart .inhoud { font-size: .88rem; color: #6B6B66; margin: 0; }
.prijskaart.fav { border-color: var(--geel-diep); border-width: 2px; }
.prijskaart .vlag { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--rood-lees); font-weight: 600; }

/* ---------- muisgedrag ---------- */

a, button, summary, [role="button"] { cursor: pointer; }
.tegel img, .spoorkaart img { transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.tegel:hover img, .spoorkaart:hover img { transform: scale(1.045); }
.tegel, .spoorkaart { overflow: hidden; }

/* ---------- de balk die over de film ligt ----------
   Op de startpagina hoort de kop van de pagina niet als een gele streep boven
   de film te staan, maar erover te liggen. Zodra je voorbij de film scrolt
   wordt hij alsnog de gewone gele balk, zodat je onderweg altijd bij het menu
   kunt. */

body.overfilm { --balkhoogte: 0px; }
body.overfilm .bovenbalk,
body.overfilm .merkbalk {
  position: fixed; left: 0; right: 0; z-index: 40;
  transition: background .45s ease, transform .45s ease, border-color .45s ease;
}
body.overfilm .bovenbalk { top: 0; background: transparent; border-bottom-color: transparent; }
body.overfilm .bovenbalk a { color: #ffffffd1; }
body.overfilm .bovenbalk a:hover { color: #fff; }
body.overfilm .merkbalk { top: 42px; background: transparent; }
body.overfilm .merkbalk nav a { color: #fff; }
body.overfilm .merkbalk .nav-bestel { color: var(--zwart) !important; background: var(--geel); }
/* Hun woordmerk is zwart. Boven de donkere film wordt het wit gezet, zodat het
   leesbaar blijft zonder een tweede logobestand. */
body.overfilm .merk img { filter: brightness(0) invert(1); transition: filter .45s ease; }

body.overfilm.gescrold .bovenbalk { transform: translateY(-100%); }
body.overfilm.gescrold .merkbalk { top: 0; background: var(--geel); box-shadow: 0 2px 18px #1111111a; }
body.overfilm.gescrold .merkbalk nav a { color: var(--zwart); }
body.overfilm.gescrold .merkbalk .nav-bestel { color: #fff !important; background: var(--zwart); }
body.overfilm.gescrold .merk img { filter: none; }

/* De film begint bovenaan het scherm, want de balk ligt erover. */
body.overfilm .filmkop { margin-top: 0; }
body.overfilm .kop-inhoud { padding-top: 8rem; }

/* Het adres rechtop naast de film moet binnen de bladspiegel blijven. */
.kop-tel { right: max(1.4rem, calc((100vw - 74rem) / 2 - 1.6rem)); padding-right: 0; }
@media (max-width: 78rem) { .kop-tel { display: none; } }

/* Springt iemand naar een anker, dan moet de kop van dat blok niet onder de
   vaste balk verdwijnen. */
[id] { scroll-margin-top: 6.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---------- de film op een telefoon ----------
   Daar is de balk twee regels hoog en staat de tekst dus lager. Het merkje
   kan weg, want het logo staat al in de balk erboven. */
@media (max-width: 46rem) {
  body.overfilm .bovenbalk { display: none; }
  body.overfilm .merkbalk { top: 0; }
  .filmkop { min-height: 100svh; }
  .kop-merkje { display: none; }
  body.overfilm .kop-inhoud { padding-top: 9.5rem; padding-bottom: 2.6rem; }
  .filmkop h1 { font-size: clamp(2.9rem, 15vw, 4.4rem); }
  .filmkop .lead { font-size: 1rem; }
  .kop-onder { gap: .7rem; }
  .kop-onder .knop { flex: 1 1 100%; text-align: center; }
  .kop-nu { flex: 1 1 100%; justify-content: center; }
}
.kaartblad .bovenregel, .filmkop .bovenregel, .breedbeeld .bovenregel { color: var(--geel); }

/* ---------- de kop van een binnenpagina ----------
   Was een geel vlak met een gat ernaast. Nu staat de tekst links op hun geel
   en loopt een foto rechts tot de rand door. */

.paginakop { display: grid; align-items: stretch; background: var(--geel); padding: 0; overflow: hidden; }
.paginakop-tekst { padding: clamp(2.6rem, 6vw, 4.6rem) 0; display: flex; align-items: center; }
.paginakop-tekst .binnen { padding-right: 1.4rem; }
.paginakop .lead { max-width: 30rem; }
.paginakop-foto { display: none; }
@media (min-width: 56rem) {
  .paginakop { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .paginakop-tekst { justify-content: flex-end; }
  .paginakop-tekst .binnen {
    margin: 0; width: 100%;
    max-width: calc(74rem / 2 + 1.4rem);
    padding-left: max(1.4rem, calc((100vw - 74rem) / 2));
  }
  .paginakop-foto { display: block; position: relative; min-height: 21rem; }
  .paginakop-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}
.kruimel { background: var(--wit); border-bottom: 1px solid var(--lijn); }
.kruimel .binnen { padding-block: .55rem; }

/* ---------- de bestelknop ----------
   Stond er als een zwarte blok in de gele balk. Nu een lijnknop die vult als
   je erop staat: rustiger in de balk en nog steeds meteen de hoofdactie. */
.nav-bestel {
  color: var(--zwart) !important;
  background: transparent;
  border: 1.5px solid var(--zwart) !important;
  padding: .42rem .95rem .38rem;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  line-height: 1; align-self: center;
  transition: background .28s ease, color .28s ease;
}
.nav-bestel:hover, .nav-bestel:focus-visible { background: var(--zwart); color: var(--geel) !important; }

body.overfilm .merkbalk .nav-bestel {
  color: #fff !important; background: transparent; border-color: #ffffff8a !important;
}
body.overfilm .merkbalk .nav-bestel:hover { background: #fff; color: var(--zwart) !important; }
body.overfilm.gescrold .merkbalk .nav-bestel {
  color: var(--zwart) !important; background: transparent; border-color: var(--zwart) !important;
}
body.overfilm.gescrold .merkbalk .nav-bestel:hover { background: var(--zwart); color: var(--geel) !important; }

/* ---------- de onderregel ---------- */
.omhoog {
  display: inline-block; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  color: inherit; text-decoration: none; border-bottom: 1px solid currentColor;
  padding-bottom: .12rem; opacity: .75;
}
.omhoog:hover { opacity: 1; }
.voetregel { display: grid; gap: .9rem; justify-items: start; }

/* Woorden in een kop komen achter een masker vandaan. Het masker is de span,
   het woord de i erin. Zonder script staat alles gewoon op zijn plek. */
.wrd { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; }
.wrd i { display: inline-block; font-style: inherit; will-change: transform; }