/* ═══════════════════════════════════════════════════════════════════════════
   Resto Pronto — landingspagina
   Alle kleuren, maten en spacing komen 1-op-1 uit het Claude Design-ontwerp.
   Volgorde: tokens → basis → rasters → secties (van boven naar beneden)
             → animaties → breakpoints.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Design tokens ───────────────────────────────────────────────────── */

:root{
  /* Rood */
  --rood-cta:#b23c2a;              /* knoppen */
  --rood-cta-hover:#c94a34;
  --rood-cta-hover-diep:#a51f16;   /* afwijkende hover in "Beleven bij Pronto" */
  --rood-kop:#c0261c;              /* koppen + tricolore */
  --rood-diep:#9c3527;
  --rood-kaart:#a52b1f;            /* verloop dolci-kaart */
  --rood-dolci:#7d1c13;
  --terracotta:#e2836b;            /* links hover, cijfers, sterren */
  --terracotta-diep:#c8563f;       /* handgeschreven accenten */
  --link:#d0684f;

  /* Creme / linnen */
  --creme:#f2e9d7;                 /* lichte vlakken */
  --creme-licht:#fdfaf2;           /* panelen */
  --creme-warm:#f6efe0;
  --creme-kaart-diep:#e6dbc6;      /* verloop cremekaart */
  --creme-vlag:#f6f2e8;            /* wit in de tricolore */
  --linnen:#e9e2d1;                /* tekst op donker */
  --linnen-rgb:233,226,209;
  --perkament:#fbf6ea;             /* menukaart + visitekaart */
  --perkament-diep:#f1e6d0;
  --zand:#d9cdb2;                  /* midden in de menukaartlijn */
  --zand-licht:#f4ecdb;            /* bezorgvlak */
  --zand-diep:#eadcc0;
  --goudzand:#f7dfb4;              /* rand dolci-knop */
  --wit:#ffffff;

  /* Bruin */
  --bruin-tekst:#33281a;
  --bruin-donker:#2c2113;
  --bruin-mid:#6d5b40;
  --bruin-diep:#2c1d12;
  --bruin-zacht:#54452f;
  --bruin-grijs:#7a6849;
  --bruin-bestel:#3a2e1c;
  --bruin-bestel-hover:#8a2f20;
  --inkt:#111111;                  /* handgeschreven regel onder de koppen */

  /* Groen */
  --groen:#1d7a3a;
  --groen-kaart:#1d4a27;           /* verloop menukaart pizza & pasta */
  --groen-donker:#0f2c17;
  --groen-hand:#b9cf9a;
  --groen-mos:#5f7038;
  --olijf:#a8b378;

  /* Overig */
  --antraciet:#232527;             /* paginagrond, krijtbord */
  --bar-donker:#241d15;            /* postcodebalk */
  --whatsapp:#25d366;
  --zand-hand:#f5d9a8;
  --bruin-kaarttekst:#5c4b33;

  /* Typografie */
  --font-kop:'Playfair Display',Georgia,serif;
  --font-tekst:'Cormorant Garamond',Georgia,serif;
  --font-hand:Caveat,cursive;
  --tekst-basis:22px;              /* bodytekst in de panelen */

  /* Gedeelde kolombreedte voor de hero en de secties eronder, zodat ze
     altijd op één lijn staan.
     De hero-afbeelding steekt links 4,84% van de kolom uit — daar zweeft de
     pizza. De kolom staat gecentreerd, dus links blijft (100% - C)/2 over.
     Eis: (100% - C)/2 - 0,0484C >= 12px  ->  C <= (100% - 24px) / 1,0968.
     Er is geen box-sizing:border-box, dus max-width geldt hier voor de
     inhoudsbreedte C zelf.
     De eerste twee waarden (1600px en 85%) bepalen hoe groot de kolom mag
     ogen; de calc erachter is de harde ondergrens die de pizza in beeld
     houdt. min() pakt de kleinste, dus die veiligheid blijft altijd staan. */
  --kolombreedte:min(1600px,85%,calc((100% - 24px) / 1.0968));
}

/* ─── 2. Basis ───────────────────────────────────────────────────────────── */

body{
  margin:0;
  background-color:var(--antraciet);
  background-image:url('assets/krijtbord-nieuw2.png');
  background-image:image-set(url('assets/krijtbord-nieuw2.webp') type('image/webp'),
                             url('assets/krijtbord-nieuw2.png') type('image/png'));
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
  color:var(--linnen);
  font-family:var(--font-tekst);
  -webkit-font-smoothing:antialiased;
}

a{color:var(--link);text-decoration:none}
a:hover{color:var(--terracotta)}

/* <picture> mag de layout niet beïnvloeden: de <img> blijft het echte kind. */
picture{display:contents}

.pagina{
  background-color:var(--antraciet);
  background-image:url('assets/krijtbord-nieuw2.png');
  background-image:image-set(url('assets/krijtbord-nieuw2.webp') type('image/webp'),
                             url('assets/krijtbord-nieuw2.png') type('image/png'));
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
  overflow:hidden;
}

/* ─── 3. Herbruikbare rasters en beeldregels ─────────────────────────────── */

.rp-3col{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(32px,4vw,60px)}
.rp-5col{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2vw,34px);align-items:stretch}
.rp-menucols{display:grid;grid-template-columns:1fr 1fr;gap:44px clamp(40px,5vw,72px)}
.rp-locrow{display:grid;grid-template-columns:.85fr 1fr 1.15fr;gap:clamp(24px,3vw,48px);align-items:center}

/* fit="cover" in een gevuld vlak */
.foto-vullend{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* shape="circle" */
.foto-cirkel{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;border-radius:50%}

/* Wiegende Parmigiano */
.kaas{position:absolute;height:auto;transform-origin:50% 20%;pointer-events:none}
.kaas--onder{right:6%;bottom:0;width:clamp(150px,20%,290px);animation:rp-kaas 5.5s ease-in-out infinite}
.kaas--boven{left:5%;top:0;width:clamp(120px,15%,220px);animation:rp-kaas-top 5.5s ease-in-out infinite;z-index:2}

/* Tricolore */
.tricolore-band{height:28px;background:linear-gradient(180deg,var(--groen) 0 33.33%,var(--creme-vlag) 33.33% 66.66%,var(--rood-kop) 66.66% 100%)}
.tricolore-streep{height:7px;background:linear-gradient(90deg,var(--groen) 0 33.33%,var(--creme-vlag) 33.33% 66.66%,var(--rood-kop) 66.66% 100%)}

/* Knoppen */
a.knop{
  display:inline-block;padding:15px 32px;
  background:var(--rood-cta);color:var(--wit);
  font-size:15px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 8px 18px -6px rgba(140,40,25,.5);
}
a.knop:hover{background:var(--rood-cta-hover);color:var(--wit)}
a.knop--paneel{align-self:start;margin-top:20px}
a.knop--diep:hover{background:var(--rood-cta-hover-diep)}

/* Gedeelde sectiekop */
.sectiekop{text-align:center}
.sectiekop__hand{font-family:var(--font-hand);font-size:26px;color:var(--terracotta-diep)}
.sectiekop__hand--olijf{color:var(--olijf)}
.sectiekop__hand--groot{font-size:28px}
.sectiekop__titel{margin:6px 0 14px;font-size:clamp(32px,3.6vw,46px);font-weight:600;color:var(--creme)}
.sectiekop__titel--strak{margin:6px 0 0}
.sectiekop__tekst{margin:0;font-size:17px;line-height:1.6;color:rgba(var(--linnen-rgb),.65);text-wrap:pretty}

/* Gedeeld paneel-tekstblok (drieluik + beleven) */
.paneel__kop{margin:0;font-family:var(--font-kop);font-size:clamp(36px,4vw,58px);font-weight:700;line-height:1.02;color:var(--rood-kop);letter-spacing:-.01em}
.paneel__kop--beleven{line-height:1;letter-spacing:normal}
.paneel__hand{font-family:var(--font-hand);font-size:clamp(27px,2.8vw,38px);color:var(--inkt);margin-top:-0.34em;position:relative}
.paneel__tekst{margin:0;font-size:var(--tekst-basis);line-height:1.5;color:var(--bruin-tekst);max-width:66ch;text-wrap:pretty}

/* ─── 4. Header ──────────────────────────────────────────────────────────── */

.kop{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  max-width:1280px;margin:0 auto;
  padding:8px clamp(20px,4vw,56px) 0;
  text-align:center;
}
a.kop__merk{display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--linnen)}
a.kop__merk:hover{color:var(--linnen)}
.kop__logo{width:150px;height:auto;object-fit:contain;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5))}
.kop__namen{display:flex;flex-direction:column;line-height:1.15;align-items:center}
.kop__naam{font-size:26px;font-weight:700;letter-spacing:.08em}
.kop__sub{font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:rgba(var(--linnen-rgb),.55)}

.rp-nav{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(18px,2.5vw,34px);
  font-size:15px;letter-spacing:.16em;text-transform:uppercase;
}
a.rp-nav__link{color:rgba(var(--linnen-rgb),.8)}
a.rp-nav__link:hover{color:var(--terracotta)}

/* ─── 5. Hero ────────────────────────────────────────────────────────────── */

.hero{max-width:var(--kolombreedte);margin:0 auto;padding:0 clamp(8px,1.4vw,20px) clamp(20px,2.4vw,36px)}
/* De houten lijst zit niet tegen de randen van het bestand: hij loopt van
   6,32% tot 97,79%. De 109,33%/-6,9% uit het ontwerp compenseert dat precies,
   waardoor de lijst exact aansluit op de secties eronder. Niet aankomen. */
.hero__frame{position:relative;width:109.33%;margin-left:-6.9%;margin-top:-7.5%;margin-bottom:-5.4%}
.hero__img{display:block;width:100%;height:auto;filter:drop-shadow(0 34px 60px rgba(0,0,0,.65))}
a.hero__cta{
  position:absolute;left:73.9%;top:83.2%;
  display:inline-block;padding:1% 2.2%;
  background:var(--rood-cta);color:var(--wit);
  font-size:clamp(11px,1.05vw,16px);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 6px 14px -6px rgba(0,0,0,.5);
}
a.hero__cta:hover{background:var(--rood-cta-hover);color:var(--wit)}

/* ─── 6. Pronto in drieën ────────────────────────────────────────────────── */

.drieluik{max-width:var(--kolombreedte);margin:0 auto clamp(64px,8vw,120px);padding:0 clamp(8px,1.4vw,20px)}
.drieluik__raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
.drieluik__paneel{
  background:var(--creme-licht);
  padding:clamp(30px,4vw,64px) clamp(26px,3.4vw,56px);
  display:flex;flex-direction:column;justify-content:center;gap:10px;
}
.drieluik__beeld{position:relative;min-height:clamp(300px,36vw,500px)}
.drieluik__beeld--boven{z-index:2}

/* ─── 7. Menucategorieën ─────────────────────────────────────────────────── */

.categorieen{max-width:var(--kolombreedte);margin:0 auto;padding:0 clamp(8px,1.4vw,20px) clamp(64px,8vw,110px)}
.categorieen__raster{max-width:1720px;margin:0 auto;align-items:stretch}

.categorie{
  position:relative;
  padding:clamp(26px,2.8vw,44px) clamp(24px,2.6vw,40px) clamp(24px,2.6vw,38px);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.75);
}
.categorie--groen{background:linear-gradient(165deg,var(--groen-kaart),var(--groen-donker))}
.categorie--creme{background:linear-gradient(165deg,var(--creme-warm),var(--creme-kaart-diep))}
.categorie--rood{background:linear-gradient(165deg,var(--rood-kaart),var(--rood-dolci))}

.categorie__rand{position:absolute;inset:10px;pointer-events:none;border:1px solid rgba(255,255,255,.22)}
.categorie--creme .categorie__rand{border-color:rgba(90,74,50,.28)}
.categorie--rood .categorie__rand{border-color:rgba(255,255,255,.24)}

.categorie__cirkel{position:relative;width:min(230px,80%);aspect-ratio:1/1}

.categorie__hand{font-family:var(--font-hand);font-size:26px;line-height:1;color:var(--groen-hand)}
.categorie--creme .categorie__hand{color:var(--groen-mos)}
.categorie--rood .categorie__hand{color:var(--zand-hand)}

.categorie__kop{margin:0;font-size:clamp(23px,2.1vw,30px);font-weight:600;line-height:1.12;color:var(--wit);text-wrap:balance}
.categorie--creme .categorie__kop{color:var(--bruin-donker)}

.categorie__tekst{margin:0;font-size:16px;line-height:1.6;color:rgba(255,255,255,.72);max-width:34ch;text-wrap:pretty}
.categorie--creme .categorie__tekst{color:var(--bruin-kaarttekst)}
.categorie--rood .categorie__tekst{color:rgba(255,255,255,.75)}

.categorie__knop{
  margin-top:auto;display:inline-flex;align-items:center;gap:12px;padding:14px 26px;
  font-size:16px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
}
.categorie--groen .categorie__knop{border:2px solid var(--creme);color:var(--creme)}
.categorie--groen .categorie__knop:hover{background:var(--creme);color:var(--groen-donker)}
.categorie--creme .categorie__knop{border:2px solid var(--rood-diep);color:var(--rood-diep)}
.categorie--creme .categorie__knop:hover{background:var(--rood-diep);color:var(--creme-warm)}
.categorie--rood .categorie__knop{border:2px solid var(--goudzand);color:var(--goudzand)}
.categorie--rood .categorie__knop:hover{background:var(--goudzand);color:var(--rood-dolci)}
.categorie__pijl{font-size:19px;line-height:1}

/* ─── 8. Signature gerechten ─────────────────────────────────────────────── */

.klassiekers{max-width:var(--kolombreedte);margin:0 auto;padding:0 clamp(8px,1.4vw,20px) clamp(72px,9vw,130px)}
.klassiekers__kop{max-width:640px;margin:0 auto clamp(40px,4.6vw,64px)}
.klassiekers__raster{max-width:1720px;margin:0 auto}

.gerecht{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.gerecht__cirkel{position:relative;width:min(240px,100%);aspect-ratio:1/1;border-radius:50%;box-shadow:0 30px 50px -20px rgba(0,0,0,.8)}
.gerecht__naam{font-family:var(--font-hand);font-size:32px;line-height:1.05;color:var(--creme);margin-top:4px}
.gerecht__ingredienten{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--olijf)}
.gerecht__tekst{margin:0;font-size:15px;line-height:1.5;color:rgba(var(--linnen-rgb),.65);max-width:26ch;text-wrap:pretty}
.gerecht__prijsblok{display:inline-flex;margin-top:auto;padding-top:10px;box-shadow:0 10px 20px -8px rgba(0,0,0,.6)}
.gerecht__prijs{
  display:flex;align-items:center;padding:7px 14px;
  background:var(--rood-cta);color:var(--creme-warm);
  font-family:var(--font-hand);font-size:22px;
}
a.gerecht__bestel{
  display:flex;align-items:center;padding:7px 18px;
  background:var(--creme);color:var(--bruin-bestel);
  font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
a.gerecht__bestel:hover{background:var(--wit);color:var(--bruin-bestel-hover)}

/* ─── 9. Beleven bij Pronto ──────────────────────────────────────────────── */

.beleven{background:var(--wit);color:var(--bruin-diep)}
.beleven__raster{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:minmax(clamp(320px,36vw,500px),auto);
  gap:0;
}
.beleven__beeld{position:relative;height:100%;min-height:0}
.beleven__paneel{
  background:var(--wit);
  padding:clamp(28px,3.6vw,58px) clamp(28px,3.6vw,60px);
  display:flex;flex-direction:column;justify-content:center;gap:10px;
}

/* ─── 10. De beste ingrediënten ──────────────────────────────────────────── */

.ingredienten{max-width:1400px;margin:0 auto;padding:clamp(24px,3vw,48px) clamp(20px,4vw,56px) 0}
.ingredienten__kop{max-width:760px;margin:0 auto clamp(6px,1vw,14px)}
.ingredienten__foto{display:block;width:100%;max-width:780px;height:auto;margin:0 auto}

/* ─── 11. Menukaart ──────────────────────────────────────────────────────── */

.menukaart{max-width:1240px;margin:0 auto;padding:clamp(24px,3vw,44px) clamp(20px,4vw,56px) clamp(72px,9vw,130px)}
.menukaart__titelblok{margin-bottom:clamp(36px,4vw,56px)}

/* Houten lijst: border-image. De slice is 39.91 omdat de bron van 1824px
   naar 1400px is geschaald (52 × 1400/1824) — precies 1:1 met de breedste rand. */
.menukaart__lijst{
  max-width:1080px;margin:0 auto;
  border:clamp(22px,2.6vw,40px) solid transparent;
  border-image:url('assets/hero-lijst3.png') 39.91 round;
  border-image-source:image-set(url('assets/hero-lijst3.webp') type('image/webp'),
                                url('assets/hero-lijst3.png') type('image/png'));
  filter:drop-shadow(0 34px 60px rgba(0,0,0,.65));
}
.menukaart__blad{position:relative;background:linear-gradient(175deg,var(--perkament),var(--perkament-diep));color:var(--bruin-tekst)}
.menukaart__streep{height:4px;background:var(--rood-kop)}
.menukaart__binnen{padding:clamp(30px,4vw,56px) clamp(24px,4.5vw,64px) clamp(34px,4vw,56px)}

.menukaart__intro{text-align:center;margin-bottom:clamp(30px,3.6vw,50px)}
.menukaart__label{display:inline-flex;align-items:center;gap:14px}
.menukaart__lijntje{width:clamp(40px,6vw,90px);height:1px;background:rgba(60,45,25,.35)}
.menukaart__labeltekst{font-size:15px;letter-spacing:.3em;text-transform:uppercase;color:var(--bruin-mid)}
.menukaart__hand{font-family:var(--font-hand);font-size:clamp(30px,3vw,40px);color:var(--rood-cta);margin-top:10px;line-height:1}

.menukaart__kolommen{row-gap:clamp(34px,4vw,54px)}

.kaartgroep{display:flex;flex-direction:column;gap:22px}
.kaartgroep__kop{display:flex;align-items:flex-end;gap:14px}
.kaartgroep__titels{display:flex;flex-direction:column;line-height:1}
.kaartgroep__naam{font-size:clamp(24px,2.2vw,30px);font-weight:700;letter-spacing:.02em;color:var(--rood-kop)}
.kaartgroep__sub{font-family:var(--font-hand);font-size:22px;color:var(--bruin-diep);margin-top:-4px;margin-left:2px}
.kaartgroep__lijn{
  flex:1;height:2px;margin-bottom:10px;opacity:.75;
  background:linear-gradient(90deg,var(--groen) 0 33.33%,var(--zand) 33.33% 66.66%,var(--rood-kop) 66.66% 100%);
}
.kaartgroep__lijst{display:flex;flex-direction:column;gap:18px}

.kaartitem{display:grid;grid-template-columns:1fr auto;column-gap:14px;row-gap:3px;align-items:baseline}
.kaartitem__naam{font-size:20px;font-weight:600;color:var(--bruin-donker)}
.kaartitem__prijs{font-size:19px;font-weight:700;color:var(--rood-cta);font-variant-numeric:tabular-nums}
.kaartitem__tekst{grid-column:1/-1;font-size:16px;line-height:1.45;color:var(--bruin-mid);font-style:italic}

.menukaart__slot{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  margin-top:clamp(36px,4.4vw,60px);padding-top:clamp(26px,3vw,40px);
  border-top:1px solid rgba(60,45,25,.22);
}
.menukaart__buon{font-family:var(--font-hand);font-size:24px;color:var(--bruin-diep)}

/* ─── 12. Bezorgen ───────────────────────────────────────────────────────── */

.bezorgen{
  position:relative;
  background:linear-gradient(178deg,var(--zand-licht),var(--zand-diep));
  color:var(--bruin-tekst);
  margin-bottom:clamp(40px,5vw,72px);
  padding:clamp(78px,9vw,124px) clamp(20px,4vw,56px) clamp(78px,9vw,124px);
  clip-path:polygon(0% 2.1%, 3.2% 0.5%, 6.4% 2.6%, 9.6% 1.1%, 12.8% 3.1%, 16% 0.9%, 19.2% 2.4%, 22.4% 0.4%, 25.6% 2.9%, 28.8% 1.3%, 32% 3.2%, 35.2% 0.7%, 38.4% 2.2%, 41.6% 0.6%, 44.8% 3%, 48% 1.5%, 51.2% 2.8%, 54.4% 0.5%, 57.6% 2.5%, 60.8% 1%, 64% 3.1%, 67.2% 0.8%, 70.4% 2.3%, 73.6% 0.4%, 76.8% 2.9%, 80% 1.4%, 83.2% 3.2%, 86.4% 0.6%, 89.6% 2.4%, 92.8% 1.1%, 96% 2.8%, 100% 0.9%, 100% 98.2%, 96.8% 99.4%, 93.6% 97.6%, 90.4% 99.1%, 87.2% 97.2%, 84% 99.3%, 80.8% 97.8%, 77.6% 99.6%, 74.4% 97.4%, 71.2% 98.9%, 68% 97.1%, 64.8% 99.4%, 61.6% 97.9%, 58.4% 99.5%, 55.2% 97.3%, 52% 98.7%, 48.8% 97.5%, 45.6% 99.6%, 42.4% 97.8%, 39.2% 99.2%, 36% 97.2%, 32.8% 99.5%, 29.6% 97.9%, 26.4% 99.3%, 23.2% 97.4%, 20% 99.1%, 16.8% 97.7%, 13.6% 99.6%, 10.4% 97.5%, 7.2% 99.2%, 4% 98%, 0% 99.4%);
}
.bezorgen__binnen{max-width:1120px;margin:0 auto}

.postcodebalk{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  background:var(--bar-donker);border-radius:999px;
  padding:10px 10px 10px clamp(18px,2.4vw,30px);
  box-shadow:0 16px 34px -18px rgba(0,0,0,.6);
}
.postcodebalk__hand{font-family:var(--font-hand);font-size:26px;color:var(--creme);letter-spacing:.02em}
.postcodebalk__veld{
  flex:1;min-width:180px;
  background:transparent;border:none;outline:none;
  color:var(--creme);font-size:15px;padding:12px 4px;
}
a.postcodebalk__knop{
  background:var(--rood-cta);color:var(--wit);
  padding:13px 28px;border-radius:999px;
  font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
}
a.postcodebalk__knop:hover{background:var(--rood-cta-hover);color:var(--wit)}

.bezorgen__kop{
  margin:clamp(44px,5vw,72px) 0 0;text-align:center;
  font-size:clamp(24px,2.6vw,34px);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bruin-donker);
}
.bezorgen__tabs{
  display:flex;justify-content:center;gap:clamp(20px,4vw,56px);flex-wrap:wrap;
  margin:clamp(22px,2.6vw,34px) 0 clamp(30px,3.4vw,46px);
  border-bottom:1px solid rgba(60,48,30,.18);padding-bottom:14px;
}
a.bezorgen__tab{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--bruin-grijs)}
a.bezorgen__tab--actief{color:var(--rood-diep);border-bottom:2px solid var(--rood-diep);padding-bottom:12px;margin-bottom:-15px}
a.bezorgen__tab:hover{color:var(--rood-diep)}
a.bezorgen__tab--actief:hover{color:var(--rood-dolci)}

.bezorgen__fiets{position:relative;width:100%;height:clamp(200px,22vw,300px)}
.bezorgen__fietsfoto{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.bezorgen__info{display:flex;flex-direction:column;gap:22px}
.bezorgen__naam{
  margin:0 0 8px;font-size:clamp(20px,2vw,26px);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--bruin-donker);
}
.bezorgen__regel{margin:0;font-size:16px;line-height:1.6;color:var(--bruin-zacht)}
.bezorgen__label{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--rood-diep);margin-bottom:8px}
.bezorgen__tijden{margin:0;font-size:16px;line-height:1.7;color:var(--bruin-zacht)}

a.pilknop{
  align-self:start;display:inline-flex;align-items:center;gap:10px;
  background:var(--rood-cta);color:var(--wit);
  padding:13px 26px;border-radius:999px;
  font-size:14px;font-weight:700;letter-spacing:.06em;
}
a.pilknop:hover{background:var(--rood-cta-hover);color:var(--wit)}

.bezorgen__kaart{
  position:relative;width:100%;height:clamp(240px,26vw,340px);
  border-radius:14px;overflow:hidden;
  box-shadow:0 24px 46px -22px rgba(60,40,20,.5);
}
.bezorgen__kaart iframe{border:0;width:100%;height:100%;display:block}

/* ─── 13. Reviews ────────────────────────────────────────────────────────── */

.reviews{max-width:1180px;margin:0 auto;padding:clamp(64px,8vw,120px) clamp(20px,4vw,56px) 0}
.reviews__binnen{position:relative;color:var(--linnen)}
.reviews__kop{margin-bottom:clamp(30px,3.6vw,50px)}

.scores{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(40px,8vw,140px);margin-bottom:clamp(36px,4.4vw,64px)}
.score{display:flex;flex-direction:column;align-items:center;gap:4px}
.score__rij{display:flex;align-items:baseline;gap:14px}
.score__cijfer{font-size:clamp(60px,6.5vw,88px);font-weight:700;line-height:1;color:var(--terracotta);letter-spacing:-.02em}
.score__sterren{color:var(--terracotta);font-size:clamp(20px,2vw,28px);letter-spacing:.06em}
.score__aantal{font-size:17px;font-weight:700;color:var(--creme)}
.score__bron{font-size:15px;color:rgba(var(--linnen-rgb),.55)}

.reviews__raster{border-top:1px solid rgba(var(--linnen-rgb),.14);padding-top:clamp(30px,3.6vw,50px)}
.review{margin:0;display:flex;flex-direction:column;gap:12px;text-align:center;padding:0 8px}
.review__sterren{color:var(--terracotta);font-size:18px;letter-spacing:.3em}
.review__tekst{margin:0;font-size:19px;line-height:1.55;font-style:italic;color:rgba(240,232,215,.85);text-wrap:pretty}
.review__bron{font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:rgba(var(--linnen-rgb),.5)}

/* ─── 14. Visitekaart / reserveren ───────────────────────────────────────── */

.visite{position:relative;max-width:1400px;margin:clamp(64px,8vw,120px) auto clamp(48px,6vw,88px);padding:0 clamp(12px,2vw,32px)}
.visite__blad{
  position:relative;
  background:linear-gradient(175deg,var(--perkament),var(--perkament-diep));
  color:var(--bruin-diep);
  padding:clamp(56px,6.5vw,96px) clamp(24px,4vw,64px) clamp(48px,5.5vw,80px);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.85);
}
.visite__raster{align-items:center;gap:clamp(28px,4vw,64px)}
.visite__kolom{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.visite__kolom--contact{gap:10px}
.visite__hand{font-family:var(--font-hand);font-size:clamp(30px,2.8vw,38px);color:var(--bruin-diep);line-height:1}
.visite__hand--contact{margin-bottom:8px}
.visite__tekst{margin:6px 0 0;font-size:18px;line-height:1.6;font-style:italic;color:var(--bruin-zacht);max-width:34ch;text-wrap:pretty}

.visite__midden{display:flex;flex-direction:column;align-items:center;gap:14px}
.visite__logo{width:clamp(170px,18vw,250px);height:auto;object-fit:contain}
.visite__namen{display:flex;flex-direction:column;align-items:center;line-height:1.15}
.visite__naam{font-size:24px;font-weight:700;letter-spacing:.1em;color:var(--bruin-diep)}
.visite__sub{font-size:14px;letter-spacing:.26em;text-transform:uppercase;color:var(--bruin-grijs)}

.visite__adres{margin:0;font-size:18px;line-height:1.7;color:var(--bruin-diep)}
a.visite__link{font-size:18px;color:var(--rood-cta)}
a.visite__link:hover{color:var(--rood-cta-hover)}
a.visite__link--onderstreept{text-decoration:underline}
a.visite__whatsapp{
  margin-top:8px;display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;
  background:var(--whatsapp);color:var(--wit);
  box-shadow:0 8px 18px -6px rgba(37,211,102,.5);
}
a.visite__whatsapp:hover{filter:brightness(1.08);color:var(--wit)}
.visite__whatsapptekst{margin:4px 0 0;font-size:18px;color:var(--bruin-diep)}

/* ─── 15. Footer ─────────────────────────────────────────────────────────── */

.voet{border-top:1px solid rgba(var(--linnen-rgb),.12);padding:36px clamp(20px,4vw,56px) 44px;color:var(--linnen)}
.voet__binnen{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.voet__merk{display:flex;align-items:center;gap:12px}
.voet__logo{width:44px;height:44px;object-fit:cover;border-radius:50%;background:var(--creme)}
.voet__naam{font-size:18px;font-weight:700;letter-spacing:.08em}
.voet__links{display:flex;gap:24px;font-size:14px;letter-spacing:.16em;text-transform:uppercase}
/* Het ontwerp geeft de footerlinks geen hover-kleur; expliciet vastgezet zodat
   de generieke a:hover hem niet alsnog verkleurt. */
a.voet__link,a.voet__link:hover{color:rgba(var(--linnen-rgb),.6)}
.voet__copy{font-size:14px;color:rgba(var(--linnen-rgb),.45);letter-spacing:.08em}

/* ─── 16. Sticky mobiele CTA ─────────────────────────────────────────────── */

.rp-stickybar{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(24,22,20,.96);
  border-top:1px solid rgba(var(--linnen-rgb),.15);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
a.stickybar__knop{
  flex:1;text-align:center;padding:14px 10px;
  font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
a.stickybar__knop--vol,a.stickybar__knop--vol:hover{background:var(--rood-cta);color:var(--creme-warm)}
a.stickybar__knop--rand,a.stickybar__knop--rand:hover{border:1px solid rgba(var(--linnen-rgb),.4);color:var(--creme)}

/* ─── 17. Animaties ──────────────────────────────────────────────────────── */

@keyframes rp-kaas{
  0%,100%{transform:translateY(42%) rotate(-6deg)}
  50%{transform:translateY(42%) rotate(7deg)}
}
@keyframes rp-kaas-top{
  0%,100%{transform:translateY(-46%) rotate(-7deg)}
  50%{transform:translateY(-46%) rotate(6deg)}
}

/* ─── 18. Breakpoints (920px / 760px, zoals in het ontwerp) ──────────────── */

@media(max-width:920px){
  .drieluik__raster,.beleven__raster,.rp-locrow{grid-template-columns:minmax(0,1fr) !important}
  .rp-3col,.rp-menucols{grid-template-columns:1fr}
  .rp-5col{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  /* Vijf gerechten in twee kolommen laat er één alleen op de derde rij
     achter. Op smalle schermen tonen we er vier, netjes 2x2.
     Pasta alla Ruota valt af; die staat wel op de bestelpagina. */
  .klassiekers__raster > .gerecht:nth-child(5){display:none}
  .rp-nav{display:none}

  /* "Beleven bij Pronto": de dambordvolgorde die op desktop klopt, levert in
     één kolom foto-tekst-TEKST-FOTO-foto-tekst op. Bij Groepsmenu's staat de
     foto daardoor onder de tekst in plaats van erboven. Alleen de derde en
     vierde wisselen; de DOM blijft zoals hij is, anders breekt de desktop. */
  .beleven__raster > :nth-child(1){order:1}
  .beleven__raster > :nth-child(2){order:2}
  .beleven__raster > :nth-child(3){order:4}
  .beleven__raster > :nth-child(4){order:3}
  .beleven__raster > :nth-child(5){order:5}
  .beleven__raster > :nth-child(6){order:6}
}

@media(max-width:760px){
  .rp-stickybar{display:flex}
  body{padding-bottom:74px}

  /* De hero-CTA staat op desktop absoluut op 73,9% / 83,2% van de
     hero-afbeelding. Op smalle schermen past hij daar niet meer binnen het
     kader (de knop kan niet verder krimpen dan 11px) en valt hij buiten beeld.
     Hier zetten we hem daarom als gewone knop onder de afbeelding; de
     negatieve ondermarge van het kader vervalt zodat de volgende sectie
     er niet overheen schuift. */
  .hero__frame{margin-bottom:0}
  a.hero__cta{
    position:static;display:block;
    width:max-content;max-width:calc(100% - 28px);
    margin:14px auto 0;padding:14px 26px;
    font-size:13px;text-align:center;
  }
}

/* Beweging uitzetten voor wie daarom vraagt; de kaas houdt wel zijn plek. */
@media(prefers-reduced-motion:reduce){
  .kaas--onder{animation:none;transform:translateY(42%)}
  .kaas--boven{animation:none;transform:translateY(-46%)}
}

/* ═══════════════════════════════════════════════════════════════════════════
   19. Bestelpagina (bestellen.html)
   Toegevoegd onderaan; hierboven is niets gewijzigd. Gebruikt dezelfde
   tokens, lettertypes en knopstijl als de homepage. Alle selectors zijn
   nieuw — geen enkele regel hierboven wordt overschreven.
   ═══════════════════════════════════════════════════════════════════════════ */

/* De homepage vangt de ruimte onder de navigatie op met de hero; hier is
   niets, dus de inhoud plakte tegen het menu aan. */
.bestel{
  max-width:var(--kolombreedte);margin:0 auto;
  padding:clamp(30px,4.5vw,60px) clamp(8px,1.4vw,20px) clamp(64px,8vw,110px);
}
.bestel__kop{margin:0 auto clamp(24px,3vw,40px)}
/* Keuzebalk en categorierijen delen één breedte, anders steekt de balk
   eroverheen zoals eerder op de homepage. */
.wijze,.cats{box-sizing:border-box;max-width:1060px;margin-left:auto;margin-right:auto}
.bestel__fout{
  max-width:60ch;margin:40px auto;padding:20px 24px;
  background:var(--creme-licht);color:var(--bruin-tekst);
  font-size:18px;line-height:1.6;
}

/* Knop met dezelfde vorm als "BESTEL DIRECT", ook bruikbaar op <button> */
button.knop{
  display:inline-block;padding:15px 32px;border:0;cursor:pointer;
  background:var(--rood-cta);color:var(--wit);
  font-family:var(--font-tekst);font-size:15px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 8px 18px -6px rgba(140,40,25,.5);
}
button.knop:hover:not(:disabled){background:var(--rood-cta-hover)}
button.knop:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.knop--vol{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px}

/* ─── Afhalen / bezorgen ─────────────────────────────────────────────────── */

.wijze{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,3vw,40px);
  background:var(--creme-licht);color:var(--bruin-tekst);
  padding:clamp(18px,2.4vw,28px) clamp(18px,2.6vw,32px);
  margin-bottom:clamp(28px,4vw,52px);
  box-shadow:0 20px 44px -30px rgba(0,0,0,.8);
}
.wijze__keuze{display:flex;gap:6px;background:var(--creme-warm);padding:5px}
.wijze__keuze--form{align-self:start}
.wijze__knop{
  min-height:44px;padding:11px 24px;border:0;cursor:pointer;background:transparent;
  font-family:var(--font-tekst);font-size:15px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--bruin-mid);
}
.wijze__knop--aan{background:var(--rood-cta);color:var(--wit)}
.wijze__feiten{display:flex;flex-wrap:wrap;gap:clamp(14px,2.4vw,32px);margin:0}
.wijze__feit{display:flex;flex-direction:column;gap:2px}
.wijze__term{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--bruin-grijs)}
.wijze__waarde{margin:0;font-size:20px;font-weight:700;color:var(--rood-cta)}

/* ─── Scherm 1: categorieën ──────────────────────────────────────────────── */

/* De rijen liepen op breed scherm uit tot lege stroken van 1300px. De lijst
   heeft nu een eigen, smallere maat en een flink grotere foto, zodat elke rij
   gevuld is en het eten het werk doet. */
.cats{
  list-style:none;padding:0;
  display:flex;flex-direction:column;gap:clamp(14px,1.8vw,22px);
}
.cat__knop{
  display:flex;align-items:center;gap:clamp(18px,3vw,40px);width:100%;
  padding:clamp(14px,1.8vw,22px) clamp(16px,2.2vw,30px);
  border:0;cursor:pointer;text-align:left;
  background:var(--creme-licht);color:var(--bruin-tekst);font-family:var(--font-tekst);
  box-shadow:0 20px 44px -28px rgba(0,0,0,.8);
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
}
.cat__knop:hover{background:var(--creme-warm);transform:translateY(-2px);box-shadow:0 26px 52px -26px rgba(0,0,0,.85)}
.cat__knop:active{transform:translateY(0)}
.cat--gespiegeld .cat__knop{flex-direction:row-reverse;text-align:right}
/* Niet align-items:flex-end gebruiken: de kinderen krimpen dan naar hun
   inhoud, waardoor de nowrap-regel buiten de kaart loopt in plaats van
   af te kappen. text-align doet het werk, stretch houdt de breedte. */
.cat--gespiegeld .cat__tekst{align-items:stretch}
.cat--gespiegeld .cat__pijl{transform:scaleX(-1)}
.cat--gespiegeld .cat__knop:hover .cat__pijl{transform:scaleX(-1) translateX(3px)}

.cat__ring{
  flex:0 0 auto;position:relative;width:clamp(104px,15vw,168px);aspect-ratio:1/1;
  border-radius:50%;overflow:hidden;background:var(--creme-warm);
  box-shadow:0 14px 28px -14px rgba(0,0,0,.55);
}
.cat__tekst{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.cat__accent,.cat__naam,.cat__regel{max-width:100%}
.cat__accent{font-family:var(--font-hand);font-size:clamp(20px,2vw,25px);line-height:1.1;color:var(--terracotta-diep)}
.cat__naam{font-family:var(--font-kop);font-size:clamp(27px,3.4vw,42px);font-weight:700;line-height:1.04;color:var(--rood-kop)}
.cat__regel{
  margin-top:3px;font-size:clamp(16px,1.4vw,18px);line-height:1.4;color:var(--bruin-mid);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cat__zij{flex:0 0 auto;display:flex;align-items:center;gap:clamp(8px,1.4vw,18px)}
.cat__prijsblok{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.cat--gespiegeld .cat__prijsblok{align-items:flex-start}
.cat__vanaf{font-family:var(--font-hand);font-size:19px;color:var(--bruin-grijs)}
.cat__bedrag{font-size:clamp(20px,2vw,26px);font-weight:700;color:var(--rood-cta);font-variant-numeric:tabular-nums}
.cat__aantal{margin-top:3px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--bruin-grijs)}
.cat__pijl{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;color:var(--rood-cta);
  transition:transform .18s ease;
}
.cat__knop:hover .cat__pijl{transform:translateX(3px)}

/* ─── Foto's en plaatshouders ────────────────────────────────────────────── */

.foto-vak{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.foto-leeg{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(165deg,var(--creme-warm),var(--creme-kaart-diep));
  color:var(--rood-diep);
}
.foto-leeg svg{width:46%;height:46%;opacity:.75}

/* ─── Scherm 2: categoriebalk en gerechten ───────────────────────────────── */

.catbalk{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:10px;
  margin:0 0 clamp(20px,3vw,32px);padding:10px 0;
  background:var(--antraciet);
}
.catbalk__terug,.catbalk__chip{
  min-height:44px;border:0;cursor:pointer;font-family:var(--font-tekst);
}
.catbalk__terug{
  flex:0 0 auto;width:44px;display:flex;align-items:center;justify-content:center;
  background:var(--creme-licht);color:var(--bruin-tekst);
}
.catbalk__terug:hover{background:var(--creme-warm)}
.catbalk__titel{font-size:20px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--creme)}
.catbalk__rij{
  display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;padding-bottom:2px;
}
.catbalk__rij::-webkit-scrollbar{display:none}
.catbalk__chip{
  flex:0 0 auto;padding:11px 20px;white-space:nowrap;
  background:rgba(var(--linnen-rgb),.10);color:var(--creme);
  font-size:15px;letter-spacing:.06em;
}
.catbalk__chip:hover{background:rgba(var(--linnen-rgb),.18)}
.catbalk__chip--aan{background:var(--rood-cta);color:var(--wit);font-weight:700}

.gerechten__kop{
  margin:0 0 18px;font-family:var(--font-kop);font-size:clamp(28px,3.4vw,42px);
  font-weight:700;color:var(--creme);
}
.gerechten{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.kaart{
  display:flex;align-items:center;gap:16px;padding:14px;
  background:var(--creme-licht);color:var(--bruin-tekst);
}
.kaart__beeld{flex:0 0 auto;position:relative;width:clamp(76px,12vw,104px);aspect-ratio:1/1;overflow:hidden;background:var(--creme-warm)}
.kaart__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.kaart__naam{margin:0;font-size:21px;font-weight:600;color:var(--bruin-donker)}
.kaart__regel{margin:0;font-size:16px;line-height:1.4;color:var(--bruin-mid);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kaart__prijs{font-size:19px;font-weight:700;color:var(--rood-cta);font-variant-numeric:tabular-nums}
.plus{
  flex:0 0 auto;width:48px;height:48px;border:0;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--rood-diep);color:var(--wit);
  box-shadow:0 6px 14px -6px rgba(140,40,25,.6);
}
.plus:hover{background:var(--rood-cta-hover)}

/* ─── Twee kolommen op desktop ───────────────────────────────────────────── */

.bestel__kolommen{display:block}
.mandje-kolom{display:none}
.mandje-kolom__titel{
  margin:0 0 14px;font-family:var(--font-kop);font-size:26px;font-weight:700;color:var(--creme);
}

/* ─── Mandje ─────────────────────────────────────────────────────────────── */

.mandje{display:flex;flex-direction:column;gap:16px;background:var(--creme-licht);color:var(--bruin-tekst);padding:18px}
.mandje__leeg{margin:0;font-size:17px;color:var(--bruin-mid)}
.mandje__lijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.mandje__regel{display:grid;grid-template-columns:1fr auto auto;gap:10px 12px;align-items:center}
.mandje__tekst{display:flex;flex-direction:column;gap:2px;min-width:0}
.mandje__naam{font-size:18px;font-weight:600;color:var(--bruin-donker)}
.mandje__toppings{font-size:14px;font-style:italic;color:var(--bruin-mid)}
.mandje__prijs{font-size:17px;font-weight:700;color:var(--rood-cta);font-variant-numeric:tabular-nums}
.mandje__waarschuwing{
  margin:0;padding:10px 12px;background:var(--creme-warm);
  font-size:15px;line-height:1.45;color:var(--rood-diep);
}
.stel{display:flex;align-items:center;gap:2px}
.stel__knop{
  width:36px;height:36px;border:1px solid rgba(60,45,25,.25);background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--bruin-tekst);
}
.stel__knop:hover{background:var(--creme-warm)}
.stel__aantal{min-width:30px;text-align:center;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}

.gratis{display:flex;flex-direction:column;gap:8px;padding-top:14px;border-top:1px solid rgba(60,45,25,.18)}
.gratis__spoor{height:8px;background:var(--creme-kaart-diep);overflow:hidden}
.gratis__vul{height:100%;background:var(--groen);transition:width .25s ease}
.gratis__tekst{margin:0;font-size:16px;font-weight:600;color:var(--bruin-tekst)}
.gratis__suggestie{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--creme-warm);padding:8px 10px}
.gratis__sugnaam{font-size:15px;color:var(--bruin-tekst)}
.gratis__toe{
  min-height:36px;padding:8px 14px;border:0;cursor:pointer;
  background:var(--rood-cta);color:var(--wit);font-family:var(--font-tekst);
  font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.gratis__toe:hover{background:var(--rood-cta-hover)}

.totalen{display:flex;flex-direction:column;gap:6px;padding-top:14px;border-top:1px solid rgba(60,45,25,.18)}
.totalen__rij{display:flex;justify-content:space-between;gap:12px;font-size:17px;color:var(--bruin-mid)}
.totalen__rij--dik{font-size:22px;font-weight:700;color:var(--bruin-donker)}

/* ─── Mobiele mandjebalk ─────────────────────────────────────────────────── */

.mandbalk{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(24,22,20,.97);border-top:1px solid rgba(var(--linnen-rgb),.15);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  padding-bottom:env(safe-area-inset-bottom);
}
.mandbalk__knop{
  display:flex;align-items:center;gap:12px;width:100%;min-height:56px;
  padding:12px 16px;border:0;cursor:pointer;
  background:var(--rood-cta);color:var(--wit);font-family:var(--font-tekst);
}
.mandbalk__knop:hover{background:var(--rood-cta-hover)}
.mandbalk__aantal{
  flex:0 0 auto;min-width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--wit);color:var(--rood-cta);font-size:15px;font-weight:700;
}
.mandbalk__label{flex:1;text-align:left;font-size:15px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.mandbalk__totaal{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums}
.mandbalk__paneel{max-height:65vh;overflow-y:auto;padding:14px 14px 0}

/* ─── Toppingpaneel ──────────────────────────────────────────────────────── */

.tp{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center}
/* display:flex hierboven zou de standaard [hidden] overrulen */
.tp[hidden]{display:none}
.tp__achter{position:absolute;inset:0;background:rgba(20,18,16,.62)}
.tp__blad{
  position:relative;width:100%;max-width:560px;max-height:88vh;
  display:flex;flex-direction:column;
  background:var(--creme-licht);color:var(--bruin-tekst);
}
.tp__kop{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 18px 10px}
.tp__titel{margin:0;font-family:var(--font-kop);font-size:26px;font-weight:700;color:var(--rood-kop)}
.tp__sluit{
  width:44px;height:44px;border:0;background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--bruin-tekst);
}
.tp__sluit:hover{background:var(--creme-warm)}
.tp__inhoud{flex:1;overflow-y:auto;padding:0 18px 18px}
.tp__regel{margin:0 0 14px;font-size:16px;color:var(--bruin-mid)}
.tp__slot{padding:14px 18px calc(14px + env(safe-area-inset-bottom));border-top:1px solid rgba(60,45,25,.18)}
.toppings{display:flex;flex-direction:column}
.topping{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 4px;cursor:pointer}
.topping+.topping{border-top:1px solid rgba(60,45,25,.12)}
.topping__vink{width:22px;height:22px;accent-color:var(--rood-cta);flex:0 0 auto}
.topping__naam{flex:1;font-size:18px}
.topping__prijs{font-size:16px;font-weight:700;color:var(--rood-cta);font-variant-numeric:tabular-nums}
.meer{
  width:100%;min-height:48px;margin-top:12px;border:1px solid rgba(60,45,25,.28);
  background:transparent;cursor:pointer;color:var(--bruin-tekst);
  font-family:var(--font-tekst);font-size:15px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
}
.meer:hover{background:var(--creme-warm)}
body.vast{overflow:hidden}

/* ─── Afrekenen ──────────────────────────────────────────────────────────── */

.afrekenen{display:flex;flex-direction:column;gap:18px;background:var(--creme-licht);color:var(--bruin-tekst);padding:clamp(18px,3vw,32px)}
.veld{display:flex;flex-direction:column;gap:6px}
.veld-rij{display:grid;grid-template-columns:1.4fr 1fr;gap:14px}
.veld__label{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--bruin-grijs)}
.veld__optioneel{font-weight:400;letter-spacing:.06em;text-transform:none;color:var(--bruin-mid)}
/* Er is bewust geen globale box-sizing-reset (die zou de homepage raken),
   dus hier alleen op de formuliervelden zelf: anders telt de padding bij de
   kolombreedte op en loopt het huisnummerveld buiten beeld. */
.veld__invoer{
  box-sizing:border-box;width:100%;
  min-height:48px;padding:12px 14px;
  border:1px solid rgba(60,45,25,.28);background:var(--wit);
  font-family:var(--font-tekst);font-size:18px;color:var(--bruin-tekst);
}
.veld__invoer:focus{outline:2px solid var(--rood-cta);outline-offset:-1px}
.veld__invoer:read-only{background:var(--creme-warm);color:var(--bruin-mid)}
.veld__invoer--tekst{min-height:88px;resize:vertical}
.veld__hint{margin:0;font-size:14px;color:var(--bruin-mid)}
.veld__hint--fout{color:var(--rood-diep);font-weight:600}
.afrekenen__slot{display:flex;flex-direction:column;gap:10px;padding-top:16px;border-top:1px solid rgba(60,45,25,.18)}
.afrekenen__totaal{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.afrekenen__totaallabel{font-size:15px;color:var(--bruin-mid)}
.afrekenen__totaalbedrag{font-size:28px;font-weight:700;color:var(--bruin-donker);font-variant-numeric:tabular-nums}
.afrekenen__klein{margin:0;font-size:14px;color:var(--bruin-mid);text-align:center}
.ideal__merk{flex:0 0 auto;border-radius:3px}

/* ─── Meldingetje na toevoegen ───────────────────────────────────────────── */

.melding{
  position:fixed;left:50%;bottom:88px;transform:translate(-50%,12px);z-index:90;
  max-width:calc(100% - 32px);padding:12px 20px;
  background:var(--bruin-donker);color:var(--creme);
  font-size:16px;text-align:center;
  opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;
}
.melding--aan{opacity:1;transform:translate(-50%,0)}

/* ─── Vanaf 900px: mandje als meescrollende kolom rechts ─────────────────── */

@media(min-width:900px){
  .bestel__kolommen{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(24px,3vw,44px);align-items:start}
  .mandje-kolom{display:block;position:sticky;top:76px}
  .mandbalk{display:none}
  .melding{bottom:32px}
  .tp{align-items:center}
  .tp__blad{max-height:80vh}
}

/* Ruimte houden voor de mandjebalk onderaan zolang die in beeld staat. */
@media(max-width:899px){
  .bestel{padding-bottom:96px}
}

@media(max-width:600px){
  .cat__ring{width:92px}
  .cat__knop{gap:14px}
  .cat__prijsblok,.cat__pijl{display:none}
  .cat__regel{font-size:16px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   20. Zwevende merkknop (homepage + bestelpagina)
   Zit rechtsonder vast in beeld. Nog zonder bestemming — puur visueel.
   ═══════════════════════════════════════════════════════════════════════════ */

.merkknop{
  position:fixed;right:clamp(14px,2vw,26px);bottom:24px;z-index:70;
  align-items:center;gap:0;
  min-height:52px;padding:0;border:0;cursor:pointer;
  background:var(--rood-cta);color:var(--wit);
  font-family:var(--font-tekst);
  box-shadow:0 14px 30px -10px rgba(0,0,0,.6);
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
  display:none;
}
/* display in plaats van visibility/opacity: geen halve toestanden, en de
   knop is echt weg zolang hij niet in beeld hoort. De fade zit in de
   animatie, zonder fill-mode, zodat de hover-transform vrij blijft. */
.merkknop--zichtbaar{display:flex;animation:merk-in .25s ease}
.merkknop:hover{background:var(--rood-cta-hover);transform:translateY(-2px);box-shadow:0 20px 38px -12px rgba(0,0,0,.7)}
.merkknop:active{transform:translateY(0)}
@keyframes merk-in{from{opacity:0}to{opacity:1}}
.merkknop:focus-visible{outline:2px solid var(--creme);outline-offset:3px}

.merkknop__merk{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:52px;align-self:stretch;background:var(--creme);
}
.merkknop__merk img{width:34px;height:34px;object-fit:contain;border-radius:50%}

.merkknop__tekst{
  padding:0 4px 0 16px;
  font-size:15px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  white-space:nowrap;
}
.merkknop__pijl{
  padding:0 16px 0 8px;font-size:19px;line-height:1;
  transition:transform .18s ease;
}
.merkknop:hover .merkknop__pijl{transform:translateX(3px)}

/* Op smalle schermen staat onderaan al een vaste balk: de knop schuift
   daarboven zodat hij er niet achter verdwijnt.
   Homepage: de sticky CTA-balk verschijnt onder 760px (74px hoog).
   Bestelpagina: de mandjebalk verschijnt onder 900px (~80px hoog). */
@media(max-width:760px){
  .merkknop{bottom:calc(86px + env(safe-area-inset-bottom))}
}
@media(max-width:899px){
  .merkknop--bestel{bottom:calc(94px + env(safe-area-inset-bottom))}
}

/* Heel smal: alleen het merkje en de pijl, de tekst zou de halve breedte
   opeten naast de balk eronder. */
@media(max-width:400px){
  .merkknop__tekst{font-size:13px;letter-spacing:.08em;padding-left:12px}
  .merkknop__pijl{padding-right:12px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   21. Merkpresentatie (merk.html)
   De slides komen uit de Claude Design-export en zijn 1920x1080. Ze houden
   hun eigen inline styling; hier staat alleen wat de export uit zijn
   design-system haalde, plus de eigen presentatieschil.
   ═══════════════════════════════════════════════════════════════════════════ */

.dk-body{
  margin:0;height:100%;overflow:hidden;
  background:var(--antraciet);
  font-family:var(--font-tekst);
  -webkit-font-smoothing:antialiased;
}

/* De zeven maatvariabelen uit de helmet van het deck. De slides rekenen
   hiermee; niet aanpassen zonder de slides na te lopen. */
.dk-doek{
  --type-title:72px;--type-sub:40px;--type-body:30px;--type-small:24px;
  --pad-top:88px;--pad-bottom:96px;--pad-x:110px;
  --gap-title:36px;--gap-item:28px;

  /* tokens die de omgezette componenten nodig hebben */
  --flag-stripe-h:linear-gradient(90deg,#1d7a3a 0 33.33%,#f6f2e8 33.33% 66.66%,#c0261c 66.66% 100%);
  --flag-rule:linear-gradient(90deg,#1d7a3a 0 33.33%,#d9cdb2 33.33% 66.66%,#c0261c 66.66% 100%);
  --drop-hero:drop-shadow(0 34px 60px rgba(0,0,0,.65));
  --shadow-btn:0 8px 18px -6px rgba(140,40,25,.5);
}

/* ─── Het speelvlak ──────────────────────────────────────────────────────── */

/* De slides zijn vast 1920x1080. De schaal is de kleinste van "past in de
   breedte" en "past in de hoogte, met de balk eronder vrij". */
/* Niet centreren met grid: een item dat breder is dan het vak schuift dan
   naar de startrand in plaats van symmetrisch over te lopen. Absoluut op 50%
   met translate doet het wel goed. De onderrand stopt boven de balk, zodat
   het doek daar niet achter verdwijnt. */
.dk-viewport{
  position:fixed;left:0;right:0;top:0;bottom:var(--dk-balkh,84px);
  overflow:hidden;
}
/* De schaal wordt in merk.js gezet, niet hier: (100vw - 40px)/1920 levert een
   lengte op en scale() wil een kaal getal, dus in CSS is dit niet te rekenen.
   Tot de eerste meting blijft het doek onzichtbaar, anders zie je hem eerst
   op ware grootte staan. */
.dk-doek{
  position:absolute;left:50%;top:50%;width:1920px;height:1080px;
  transform:translate(-50%,-50%) scale(var(--dk-schaal,1));
  transform-origin:center center;
  opacity:0;
}
.dk-doek--gemeten{opacity:1;transition:opacity .2s ease}
.dk-doek > section{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .32s ease;
}
.dk-doek > section.dk-slide--aan{
  opacity:1;visibility:visible;pointer-events:auto;
}

.dk-draaihint{display:none}

/* ─── Componenten uit het design system ──────────────────────────────────── */

.dk-knop{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  font-family:var(--font-tekst);font-weight:700;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;border:none;
}
.dk-knop--solid{background:var(--rood-cta);color:var(--wit);box-shadow:var(--shadow-btn)}
.dk-knop--pill{background:var(--rood-cta);color:var(--wit);border-radius:999px}
.dk-knop--small{background:var(--creme);color:var(--bruin-bestel)}
.dk-knop--ghost{border:1px solid rgba(233,226,209,.4);color:var(--creme);background:transparent}
a.dk-knop--ghost:hover{background:rgba(233,226,209,.08);color:var(--creme)}
.dk-knop--outline-cream{border:2px solid var(--creme);color:var(--creme);background:transparent}
.dk-knop--outline-rosso{border:2px solid var(--rood-diep);color:var(--rood-diep);background:transparent}
.dk-knop--outline-gold{border:2px solid var(--goudzand);color:var(--rood-dolci);background:transparent}
.dk-knop__pijl{font-size:19px;line-height:1}

.dk-vlag{display:block;height:var(--dk-vlag-h,28px);background:var(--flag-stripe-h)}
.dk-vlag--rood{position:relative}
.dk-vlag--rood::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:4px;background:var(--rood-kop);
}
.dk-vlag--regel{display:block;flex:1;height:2px;background:var(--flag-rule);opacity:.75}

/* Houten lijst. De bron is naar 1400px geschaald, dus de slice is 39.91
   in plaats van de oorspronkelijke 52 — zelfde rekensom als de menukaart. */
.dk-hout{
  border:34px solid transparent;
  border-image:url('assets/hero-lijst3.png') 39.91 round;
  border-image-source:image-set(url('assets/hero-lijst3.webp') type('image/webp'),
                                url('assets/hero-lijst3.png') type('image/png'));
  filter:var(--drop-hero);
}

/* ─── De balk onderaan ───────────────────────────────────────────────────── */

.dk-balk{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  display:flex;align-items:center;gap:clamp(8px,1.4vw,18px);
  padding:14px clamp(14px,2.4vw,28px) calc(14px + env(safe-area-inset-bottom));
  background:rgba(24,22,20,.94);
  border-top:1px solid rgba(var(--linnen-rgb),.14);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.dk-terug,.dk-pijl,.dk-schermvullend{
  flex:0 0 auto;height:44px;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(var(--linnen-rgb),.10);color:var(--creme);
}
.dk-pijl,.dk-schermvullend{width:44px}
.dk-terug{gap:9px;padding:0 16px 0 11px;text-decoration:none}
.dk-terug__tekst{
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;
}
.dk-terug:hover,.dk-pijl:hover:not(:disabled),.dk-schermvullend:hover{background:rgba(var(--linnen-rgb),.2);color:var(--creme)}
.dk-pijl:disabled{opacity:.3;cursor:default}
.dk-terug{margin-right:auto}

.dk-midden{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:130px}
.dk-teller{font-size:13px;letter-spacing:.16em;color:rgba(var(--linnen-rgb),.55);font-variant-numeric:tabular-nums}
.dk-teller b{color:var(--creme);font-weight:700}
.dk-label{
  font-family:var(--font-hand);font-size:21px;line-height:1;color:var(--terracotta);
  white-space:nowrap;
}

.dk-bolletjes{display:flex;align-items:center;gap:7px;margin-left:auto}
.dk-bol{
  width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(var(--linnen-rgb),.28);transition:background .18s ease,transform .18s ease;
}
.dk-bol:hover{background:rgba(var(--linnen-rgb),.5)}
.dk-bol--aan{background:var(--rood-cta);transform:scale(1.35)}

/* ─── Smalle schermen ────────────────────────────────────────────────────── */

@media(max-width:900px){
  .dk-bolletjes{display:none}
  .dk-terug__tekst{display:none}
  .dk-terug{width:44px;padding:0}
  .dk-midden{min-width:0}
  .dk-label{font-size:18px}
}

/* Staand op een telefoon wordt een 16:9-slide onleesbaar klein; even melden
   dat liggend beter werkt. */
@media(max-width:760px) and (orientation:portrait){
  .dk-draaihint{
    display:block;position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
    margin:0;padding:8px 16px;white-space:nowrap;
    background:rgba(24,22,20,.9);color:rgba(var(--linnen-rgb),.75);
    font-family:var(--font-hand);font-size:18px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   22. Mobiele correcties
   ═══════════════════════════════════════════════════════════════════════════ */

@media(max-width:760px){
  /* Eigen staande versie van het krijtbord. De liggende tekening zit
     volledig aan de randen, en cover sneed op een telefoon precies het lege
     midden uit. Deze is 768x1376, dus cover werkt hier wel: je ziet ruim
     80% van de breedte, met de toren links en de pizza rechts in beeld. */
  body,.pagina{
    background-image:url('assets/krijtbord-mobiel.png');
    background-image:image-set(url('assets/krijtbord-mobiel.webp') type('image/webp'),
                               url('assets/krijtbord-mobiel.png') type('image/png'));
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center center;
  }

  /* Het drieluik toont op de telefoon alleen de tekstpanelen. De drie
     fotovlakken vallen weg (en daarmee ook de Parmigiano, die in het
     ovenvlak hangt). */
  .drieluik__beeld{display:none}


  /* De foto's stonden met object-fit:cover in een vak van minstens 320px en
     werden dus bijgesneden. Op de telefoon krijgen ze hun eigen verhouding,
     zodat de hele foto in beeld staat. */
  .beleven__raster{grid-auto-rows:auto}
  .beleven__beeld{height:auto;min-height:0}
  /* display:block haalt de 5px regelafstand onder een inline afbeelding weg */
  .beleven__beeld .foto-vullend{position:static;display:block;width:100%;height:auto}
}

/* ═══════════════════════════════════════════════════════════════════════════
   23. Achtergrond als vaste laag
   Safari op iPhone rekent bij background-attachment:fixed de cover-schaal
   tegen het élement in plaats van tegen het venster. Omdat .pagina duizenden
   pixels hoog is, werd het krijtbord daar tot in het absurde uitvergroot en
   zag je alleen vage vlekken.
   Een aparte laag met position:fixed is altijd precies venstergroot, dus
   daar klopt cover wel — op iOS en overal.
   ═══════════════════════════════════════════════════════════════════════════ */

body,.pagina{background-image:none}
.pagina{background-color:transparent}

.pagina::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-color:var(--antraciet);
  background-image:url('assets/krijtbord-nieuw2.png');
  background-image:image-set(url('assets/krijtbord-nieuw2.webp') type('image/webp'),
                             url('assets/krijtbord-nieuw2.png') type('image/png'));
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
}

@media(max-width:760px){
  .pagina::before{
    background-image:url('assets/krijtbord-mobiel.png');
    background-image:image-set(url('assets/krijtbord-mobiel.webp') type('image/webp'),
                               url('assets/krijtbord-mobiel.png') type('image/png'));
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   24. Mobiele afwerking (alle pagina's)
   Gemeten op 320, 375, 390, 430 breed en in liggende stand. Alles hieronder
   geldt alleen onder 760px, tenzij anders vermeld; de desktop blijft gelijk.
   ═══════════════════════════════════════════════════════════════════════════ */

/* [hidden] mag nooit verliezen van een display-regel op dezelfde klasse.
   Dat ging al twee keer mis: eerst bij .tp, daarna bij de uitklaplijst met
   extra toppings (.toppings{display:flex}), die daardoor altijd open stond. */
[hidden]{display:none !important}

@media(max-width:760px){
  /* ─ Zwevende merkknop: compact. Op een telefoon is de inhoud schermbreed,
       dus elke zwevende knop ligt ergens overheen; hoe kleiner, hoe beter.
       Van 231x52 naar circa 150x40. */
  .merkknop{min-height:40px;right:12px;box-shadow:0 10px 22px -8px rgba(0,0,0,.6)}
  .merkknop__merk{width:40px}
  .merkknop__merk img{width:28px;height:28px}
  .merkknop__tekst{font-size:11px;letter-spacing:.1em;padding:0 2px 0 10px}
  .merkknop__pijl{font-size:15px;padding:0 10px 0 6px}

  /* ─ Footer: de laatste regel stond achter de vaste balk en de merkknop. */
  .voet{padding-bottom:96px}
  .voet__links{gap:4px 14px}
  a.voet__link{display:inline-block;padding:14px 6px}

  /* ─ Tikdoelen van minstens 44px */
  a.pilknop{padding:14px 26px}
  a.visite__link{display:inline-block;padding:11px 6px}
  .bezorgen__tabs{gap:4px 8px;padding-bottom:6px}
  a.bezorgen__tab{
    display:inline-flex;align-items:center;min-height:44px;
    padding:0 10px;margin:0;border-bottom:2px solid transparent;
  }
  a.bezorgen__tab--actief{border-bottom-color:var(--rood-diep)}

  /* ─ Postcodebalk: veld en knop elk op een eigen regel, allebei 44px hoog.
       16px in het veld, anders zoomt iOS in zodra je erin tikt. */
  .postcodebalk{border-radius:22px;padding:12px 12px 12px 18px;gap:10px}
  .postcodebalk__veld{flex:1 1 100%;box-sizing:border-box;min-height:44px;font-size:16px;padding:10px 4px}
  a.postcodebalk__knop{flex:1 1 100%;box-sizing:border-box;text-align:center;padding:14px 20px}

  /* ─ Bestelpagina: kleinste tekst van 12 naar 13px */
  .wijze__term{font-size:13px}
}

/* Klassiekers in twee kolommen: op de smalste telefoons brak "€ 18,50" in
   tweeën en stond de naam op drie regels. */
@media(max-width:480px){
  .gerecht__naam{font-size:28px}
  .gerecht__prijsblok{flex-wrap:nowrap}
  .gerecht__prijs{padding:6px 10px;font-size:19px;white-space:nowrap}
  a.gerecht__bestel{padding:6px 12px;font-size:12px;white-space:nowrap}
}

/* Bestelpagina: de merkknop zweefde midden in beeld zolang het mandje leeg
   was, want hij hield ruimte vrij voor een balk die er nog niet stond.
   bestellen.js zet body.met-mandbalk zodra de balk zichtbaar is. */
@media(max-width:899px){
  .merkknop--bestel{bottom:24px}
  body.met-mandbalk .merkknop--bestel{bottom:calc(94px + env(safe-area-inset-bottom))}
}

/* Liggende telefoon: 375px hoog, waarvan de vaste balk al 68px neemt.
   De merkknop komt daar niet nog eens bovenop. */
@media(max-width:920px) and (max-height:450px){
  .merkknop{display:none}
}