/* Nieuwe hero voor de juni-site.
   ===========================================================================
   De juni-hero was een paginabreed beeld met een donkere sluier en witte tekst
   onderin. Deze laag zet daar de opzet voor in de plaats die we bij de strakke
   versie hebben gemaakt: het beeld staat rechts en loopt zonder naad over in
   het crème, de tekst staat links in donkere letters.

   Alleen de hero verandert. De rest van de site, alle 51 pagina's en vijf
   talen, blijft zoals hij was.
   =========================================================================== */

:root{
  --hero-creme:#F6EFE6;
  --hero-inkt:#1C1917;
  --hero-goud-tekst:#8F6526;   /* 4,8:1 op het crème; het merkgoud zelf haalt 2,9:1 */
}

/* Geen zwarte bak meer, geen negatieve bovenmarge die de hero onder de kop
   trok: die was er om de witte tekst tegen het donkere beeld te laten lopen. */
.hero-cinematic{
  min-height:min(78vh,640px);
  justify-content:center;
  color:var(--hero-inkt);
  background:var(--hero-creme);
  margin-top:0;
  /* De kopbalk staat vast bovenaan. De oude hero liep er bewust onderdoor:
     die had witte tekst op een donker beeld, dus de balk mocht eroverheen
     zweven. Nu staat er donkere tekst op crème en verdween de adresregel
     achter de balk. Deze ruimte zet hem er ruim onder.
     Sinds het logo een afbeelding is, is de balk 95px in plaats van 82px,
     vandaar dat deze waarde mee omhoog moest. */
  padding-top:clamp(8rem,15vh,10rem);
  padding-bottom:clamp(2rem,5vh,4rem);
}

/* Het beeld beslaat de rechterkant en loopt door tot de rand van het scherm.
   Op smalle schermen ligt het achter de tekst, want daar is geen ruimte om
   ze naast elkaar te zetten. */
.hero-bg{left:auto;right:0;width:100%}
@media(min-width:900px){.hero-bg{width:62%}}
.hero-bg img{
  object-position:right center;
  filter:none;
  animation:none;   /* het langzame inzoomen paste bij een filmische hero, niet hier */
}
/* ---------------------------------------------------- mobiele indeling
   De tekst staat op mobiel weer óp de foto, met een verloop naar crème van
   onderaf. Dat kon eerder niet netjes: de foto is liggend (2752x1536) en het
   telefoonvak is staand, dus cover schaalde op hoogte en sneed 1112 van de
   1502 pixels breedte weg. Er bleef een willekeurige verticale strook over, en
   omdat er verticaal niets wegviel was er ook geen ruimte om hem te verschuiven.

   Daarom laadt een smal scherm nu een eigen staande uitsnede van 760x1182,
   gemaakt rond het deeg (zie de <picture> in de HTML). Daarvan blijft ruim 80%
   staan in plaats van 26%, en past de tekst er gewoon overheen. */
@media(max-width:899px){
  .hero-cinematic{
    min-height:auto;
    justify-content:flex-start;
    padding-bottom:0;
    padding-top:calc(89px + 1.5rem);
  }

  /* De foto vult de hele hero, zodat de tekst er volledig op staat in plaats
     van eronder door te lopen. Dat kon met de liggende foto niet: in een vak
     van 390 bij ruim 900 sneed cover er driekwart van de breedte af. Een smal
     scherm laadt daarom de staande uitsnede van 760x1182 (zie de <picture> in
     de HTML), die om het deeg heen is gemaakt. */
  .hero-bg{inset:0;height:auto}
  .hero-bg img{object-position:center 40%}

  /* Een crème-waas moest tot 90% dekking om donkere tekst leesbaar te houden,
     en dan is er van de foto niets meer over. Een donker scherm haalt dezelfde
     leesbaarheid met véél minder dekking, omdat lichte tekst op donker een
     grotere sprong maakt dan donkere tekst op licht. Zo blijft het beeld
     zichtbaar. Onderin loopt het alsnog naar crème, zodat de cijferbalk er
     zonder rand op aansluit. */
  .hero-overlay{
    display:block;
    inset:0;
    height:auto;
    background:
      /* De subtekst zit rond 45-70% van de hoogte en haalde daar 2,99:1 met
         een scherm van .40. Witte tekst van 16px vraagt 4,5:1, dus daar moet
         het dieper doorlopen. Boven en onder blijft het licht, zodat de foto
         daar gewoon te zien is. */
      /* Lichter gehouden dan wat de tekst strikt nodig heeft, zodat de foto
         niet wegvalt. De subtekst haalt daarom zijn leesbaarheid niet uit dit
         brede scherm maar uit een eigen zachte plaat eronder (zie verderop).
         Zo hoeft de hele hero niet donker om één alinea leesbaar te maken. */
      linear-gradient(to bottom,
        rgba(14,11,9,.50) 0%, rgba(14,11,9,.47) 18%, rgba(14,11,9,.52) 36%,
        rgba(14,11,9,.58) 50%, rgba(14,11,9,.58) 64%, rgba(14,11,9,.42) 78%,
        rgba(14,11,9,.16) 89%, rgba(14,11,9,0) 96%),
      linear-gradient(to bottom,
        transparent 0%, transparent 72%, rgba(246,239,230,.35) 86%,
        var(--hero-creme) 100%);
  }

  .hero-meta-bar{margin-top:auto}
}
@media(max-width:720px){ .hero-cinematic{padding-top:calc(89px + 1.5rem)} }
@media(max-width:360px){ .hero-cinematic{padding-top:calc(83px + 1.25rem)} }

/* ---------------------------------------------------- de naad op desktop
   Deze regel MOET blijven staan. Zonder hem valt .hero-overlay terug op de
   basisregel in style.css, en dat is nog het oorspronkelijke filmische verloop:
   twee zwarte gradiënten over de volle breedte. Dat hoorde bij witte tekst op
   een donker beeld. Met de donkere tekst van nu wordt het een zwarte sluier
   over de hele hero.

   De overlay krijgt dezelfde plek en breedte als het beeld. Stond hij over het
   volle scherm, dan rekende 0% vanaf de linkerrand van de pagina en was het
   verloop bij de rand van de foto al half open: daar bleef een sprong van 29
   punten zitten, precies de lijn die je toen zag. Nu telt 0% vanaf de rand van
   het beeld zelf, en dekt de eerste 6% die rand volledig af. */
@media(min-width:900px){
  .hero-overlay{
    left:auto; right:0; width:62%; height:auto; inset-block:0;
    background:linear-gradient(to right,
      var(--hero-creme) 0%, var(--hero-creme) 6%,
      rgba(246,239,230,.9) 14%, rgba(246,239,230,.74) 24%,
      rgba(246,239,230,.54) 35%, rgba(246,239,230,.34) 47%,
      rgba(246,239,230,.18) 60%, rgba(246,239,230,.06) 74%,
      transparent 86%);
  }
}

/* Tekst links, op halve breedte, verticaal gecentreerd in plaats van
   onderaan geplakt.

   De ruimte onderaan is geen sier: de cijferbalk wordt met margin-top:auto
   tegen de onderrand van de hero geduwd, en zonder deze marge komt die zwarte
   balk pal tegen de knoppen aan te staan. Dat was op mobiel en desktop het
   eerste wat opviel. */
.hero-cinema-content{padding-bottom:clamp(2.25rem,5vh,3.5rem)}
@media(min-width:900px){
  .hero-cinema-content{max-width:var(--container);}
  .hero-cinema-content > *{max-width:34rem}
}

.hero-cinema-title{
  color:var(--hero-inkt);
  text-shadow:none;
  max-width:16ch}
.hero-cinema-title em{color:var(--hero-goud-tekst)}
/* De met de hand getekende onderstreping lag onder een gouden woord op zwart.
   Op crème valt hij weg, dus die gaat eruit in plaats van half zichtbaar
   te blijven hangen. */
.hero-cinema-title .underline-svg{display:none}

.hero-eyebrow-cinema{
  color:var(--hero-goud-tekst);
  background:rgba(255,255,255,.6);
  border-color:rgba(143,101,38,.35);
  backdrop-filter:none;
  -webkit-backdrop-filter:none}

.hero-cinema-sub{color:#5c5348}

/* De stempel "sinds 2012" lag als matglazen schijf over de handen van de
   bakker, precies het onderwerp van de foto. Ik heb gemeten waar het beeld
   het rustigst is, maar deze foto is over de hele breedte gevuld: elk vlak
   dekt iets af dat de moeite waard is. Op de oude hero kon het, want die had
   een donkere sluier over het hele beeld waar toch geen detail doorheen kwam.

   Daarom staat hij uit. Het jaartal staat verderop op de pagina en in het
   over-ons; als merkelement weegt hij niet op tegen het afdekken van de
   handen. Wil je hem terug, dan hoort er een foto onder met een rustige hoek. */
.hero-stamp{display:none}

/* De knoppen onder de kop stonden op een donkere ondergrond. In deze hero
   heet de tweede knop btn-cinema-ghost: wit met een vlak van 8% wit, wat op
   het crème 1,00:1 haalde en dus volledig onzichtbaar was. */
.hero-ctas .btn-ghost,.hero-ctas .btn-outline,.hero-ctas .btn-cinema-ghost{
  color:var(--hero-inkt);
  border-color:rgba(28,25,23,.3);
  background:rgba(255,255,255,.82);
  backdrop-filter:none;
  -webkit-backdrop-filter:none}
.hero-ctas .btn-ghost:hover,.hero-ctas .btn-outline:hover,
.hero-ctas .btn-cinema-ghost:hover{
  background:var(--hero-inkt);color:#fff;border-color:var(--hero-inkt)}


/* --------------------------------------------------------- cijferbalk
   In de juni-versie stond de inhoud onderaan de hero geplakt en sloot de
   cijferbalk daar netjes op aan. Door het centreren bleef er onder die balk
   een strook beeld staan. Deze duwt hem terug tegen de onderrand. */
.hero-cinematic{padding-bottom:0}
.hero-meta-bar{margin-top:auto}


/* --------------------------------------------- adresregel op smal scherm
   Deze staat helemaal achteraan met opzet. Verderop in dit bestand staat een
   .hero-eyebrow-cinema zonder media-query; die heeft dezelfde zwaarte en zou
   een eerder geplaatste mobiele regel overschrijven.

   Op mobiel staat de badge bovenin de hero, waar het verloop open is en de foto
   juist licht is. Op zijn eigen vlak van 60% wit haalde de tekst daar 2,2 tot
   3,5:1. Met een vrijwel dekkend vlak is hij leesbaar zonder dat het verloop
   verder dicht hoeft en de foto alsnog verdwijnt. */
@media(max-width:899px){
  .hero-eyebrow-cinema{
    background:rgba(255,255,255,.94);
    border-color:rgba(143,101,38,.45);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PROEF: TEKST OP DE PRODUCTFOTO

   De foto vult de hele kaart en label, naam, omschrijving en link staan
   er bovenin overheen, op een verloop naar donker dat van boven komt. Dat verloop is geen
   sier: de foto's zijn licht en zonder dekking haalt witte tekst er geen
   4,5:1 op.

   Dit is een proef om te kijken hoe het oogt. Terugdraaien kan met
   _backups/terugzetten.sh 2026-08-20_2147_voor-tekst-op-beeld
   ═══════════════════════════════════════════════════════════════════ */

.product-card {
  position: relative;
  padding: 0;
  overflow: hidden;
  min-height: clamp(380px, 52vh, 460px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;   /* tekst bovenin */
}

/* het beeld vult de kaart in plaats van er bovenin te staan */
.product-card .product-img-wrap {
  position: absolute;
  inset: 0;
  width: auto;
  aspect-ratio: auto;
  margin: 0;
  border-radius: 0;
  z-index: 0;
}
.product-card .product-img-wrap img { object-position: center 42%; }

/* het verloop waar de tekst op komt te staan */
.product-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Het verloop is meegedraaid met de tekst. Zou het van onderaf blijven
     komen, dan stond de tekst juist op het lichtste deel van de foto en
     haalde wit daar geen 4,5:1. */
  /* Het verloop moet dekken tot voorbij het tekstblok. Gemeten reikt dat tot
     53% van de kaarthoogte, en op 320px tot 65% omdat de tekst daar meer
     regels nodig heeft. Vandaar dekking tot 70% en pas daarna uitdoven; bij
     een eerdere versie tot 44% zakte de link eruit en haalde die 1,0:1. */
  background: linear-gradient(to bottom,
    rgba(10,8,6,0.93) 0%, rgba(10,8,6,0.90) 30%, rgba(10,8,6,0.84) 52%,
    rgba(10,8,6,0.72) 66%, rgba(10,8,6,0.42) 80%, rgba(10,8,6,0.14) 91%,
    transparent 100%);
  pointer-events: none;
}

.product-card .product-label,
.product-card h3,
.product-card .product-desc,
.product-card .product-link {
  position: relative;
  z-index: 2;
  margin-left: 1.375rem;
  margin-right: 1.375rem;
  color: #fff;
}
/* Het merkgoud #C4A127 haalde op het verloop maar 3,4:1. Het label is klein,
   dus daar geldt 4,5:1. Een lichtere gouden tint plus een steviger eigen vlak
   maakt hem leesbaar zonder dat het verloop nog donkerder hoeft. */
.product-card .product-label {
  margin-top: 1.5rem;          /* lucht tussen de bovenrand en het label */
  color: #E8CE73;
  border-color: rgba(232,206,115,0.55);
  background: rgba(10,8,6,0.78);
  margin-bottom: 0.625rem;
}
.product-card h3 { color: #fff; margin-bottom: 0.5rem; }
.product-card .product-desc {
  color: rgba(255,255,255,0.9);
  flex-grow: 0;
  margin-bottom: 1rem;
}
.product-card .product-link { color: var(--c-goud); margin-bottom: 0; align-self: flex-start; }

/* de middenkaart had een eigen donker vlak; dat is nu overbodig want elke
   kaart is beeld met een verloop */
.product-card:nth-child(2) { background: transparent; }
.product-card:nth-child(2) .product-desc { color: rgba(255,255,255,0.9); }

/* Op een smal scherm heeft de omschrijving meer regels nodig en reikt het
   tekstblok tot 65% van de kaart in plaats van 53%. De link zakte daardoor
   in het uitdovende deel van het verloop en haalde 4,25:1. Hier dekt het
   verloop dus dieper door. */
@media (max-width: 400px) {
  .product-card::after {
    background: linear-gradient(to bottom,
      rgba(10,8,6,0.94) 0%, rgba(10,8,6,0.92) 34%, rgba(10,8,6,0.89) 58%,
      rgba(10,8,6,0.82) 72%, rgba(10,8,6,0.52) 85%, rgba(10,8,6,0.18) 94%,
      transparent 100%);
  }
}


/* ------------------------------------------- lichte herotekst op mobiel
   Deze staat achteraan met opzet. Verderop in dit bestand staan
   .hero-cinema-title en .hero-cinema-sub zonder media-query; die hebben
   dezelfde zwaarte en overschrijven een eerder geplaatste mobiele regel.
   Dat gebeurde hier ook: de tekst bleef donkere inkt op een donker scherm
   en haalde 1,00:1 — volledig onleesbaar. Derde keer dat deze val toeslaat
   in dit bestand. */
@media(max-width:899px){
  .hero-cinema-title{color:#fff}
  .hero-cinema-title em{color:#EBD48A}
  /* Hier stond een plaat achter de alinea om hem leesbaar te maken zonder de
     hele hero donkerder te zetten. Dat las als een zwart vierkant om de tekst
     heen, dus die is eruit. De leesbaarheid komt nu weer uit het verloop, dat
     in deze zone iets dieper doorloopt, plus een schaduw op de letters zelf —
     die valt niet op als een vlak maar helpt wel tegen een lichte plek in de
     foto. */
  .hero-cinema-sub{
    color:rgba(255,255,255,.96);
    background:none;
    text-shadow:0 1px 4px rgba(0,0,0,.55);
  }
  .hero-eyebrow-cinema{
    color:#EBD48A;
    background:rgba(14,11,9,.6);
    border-color:rgba(235,212,138,.45);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   KAART IN DE VOETTEKST EN BEELD OP DE RECEPTKAARTEN

   De kaart komt van OpenStreetMap: geen sleutel nodig en geen partij die
   meekijkt met de bezoeker, anders dan bij een Google-insluiting. Het
   adres is opgezocht, niet gegokt.

   De receptkaarten waren tekst zonder beeld. Elk recept noemt zelf welk
   product je ervoor gebruikt, dus daar staat nu de foto van dát product
   bij. Er zijn geen gerechtfoto's, en die verzin ik niet.
   ═══════════════════════════════════════════════════════════════════ */

.kaart-strook {
  position: relative;
  width: 100%;
  line-height: 0;          /* anders zet de iframe een streepje eronder */
  background: #e8e0d2;     /* zichtbaar zolang de kaart nog laadt */
}
.kaart-strook iframe {
  display: block;
  width: 100%;
  height: clamp(260px, 34vh, 380px);
  border: 0;
  /* de kaart is fel; dit haalt hem in lijn met het palet zonder hem
     onleesbaar te maken */
  filter: grayscale(0.4) contrast(0.9) brightness(0.97);
}

/* Het kaartje met het adres ligt op de kaart, niet ernaast: zo blijft de
   strook op elke breedte even hoog en hoeft er niets te herschikken. */
.kaart-kaartje {
  position: absolute;
  left: clamp(1rem, 4vw, 3rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem 1.5rem 1.375rem;
  border-radius: 14px;
  background: rgba(13,13,13,0.9);
  box-shadow: 0 16px 40px rgba(28,25,23,0.22);
  line-height: 1.4;
  max-width: min(20rem, calc(100% - 2rem));
}
.kaart-kop {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  color: #fff;
}
.kaart-adres { font-size: 0.9375rem; color: rgba(255,255,255,0.82); }
.kaart-route {
  align-self: flex-start;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.5rem 0.9375rem;
  border-radius: 999px;
  background: var(--c-goud);
  color: #0d0d0d;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.kaart-route:hover { background: #d8b93a; }

@media (max-width: 720px) {
  .kaart-strook iframe { height: 300px; }
  .kaart-kaartje {
    left: 1rem;
    right: 1rem;
    top: auto;
    bottom: 1rem;
    transform: none;
    max-width: none;
    padding: 1rem 1.125rem 1.125rem;
  }
}

/* --- beeld op de receptkaarten --- */
.recipe-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: 1rem;
  background: #f1ead4;
}
.recipe-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease);
}
.recipe-card:hover .recipe-img img { transform: scale(1.04); }

/* ------------------------------------------- voettekst-kolommen op mobiel
   Producten en Bedrijf zijn korte lijstjes; die vallen onder elkaar op een
   telefoon uit elkaar en kosten onnodig veel scrollen. Naast elkaar passen
   ze prima, want de langste regel is "Alle producten". Contact heeft een
   adres, telefoonnummer en e-mail en houdt daarom de volle breedte. */
@media (max-width: 720px) {
  .site-footer .footer-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 1.25rem;
    row-gap: 2rem;
  }
  .site-footer .footer-brand { grid-column: 1 / -1; }
  .site-footer .footer-col:last-of-type { grid-column: 1 / -1; }
}
@media (max-width: 360px) {
  .site-footer .footer-grid { column-gap: 0.875rem; }
}