/* ═══════════════════════════════════════════════════════════════════════════
   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 */
  /* Wat rechtstreeks op de paginagrond staat, leest deze tokens; de
     lichte thema's (sectie 26) zetten ze om. Componenten met een eigen
     donker vlak (balken, kaarten) blijven --creme en --linnen gebruiken. */
  --grond:var(--antraciet);
  --grond-tekst:var(--linnen);
  --grond-tekst-rgb:var(--linnen-rgb);
  --grond-kop:var(--creme);
  --grond-label:var(--olijf);
  --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(--grond);
  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(--grond-tekst);
  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(--grond);
  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(--grond-label)}
.sectiekop__hand--groot{font-size:28px}
.sectiekop__titel{margin:6px 0 14px;font-size:clamp(32px,3.6vw,46px);font-weight:600;color:var(--grond-kop)}
.sectiekop__titel--strak{margin:6px 0 0}
.sectiekop__tekst{margin:0;font-size:17px;line-height:1.6;color:rgba(var(--grond-tekst-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(--grond-tekst)}
a.kop__merk:hover{color:var(--grond-tekst)}
.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(--grond-tekst-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(--grond-tekst-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%}
/* Geen filter:drop-shadow meer. Safari rendert een filter in een offscreen
   buffer van het element plus ~3x de blur-straal, maal de pixeldichtheid;
   bij 60px blur is dat 16 MB op een iPhone en bijna 80 MB op desktop. Loopt
   dat tegen de geheugengrens, dan valt WebKit terug op de schaduw van het
   omhullende vak: een zwart blok dat komt en gaat naarmate het geheugen
   wisselt. De hero heeft doorzichtige randen (de kok en de pizza steken
   buiten de lijst), dus een box-shadow kan hier niet - die zou juist wél
   een rechthoek tekenen. Daarom zonder schaduw. */
.hero__img{display:block;width:100%;height:auto}
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(--grond-kop);margin-top:4px}
.gerecht__ingredienten{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--grond-label)}
.gerecht__tekst{margin:0;font-size:15px;line-height:1.5;color:rgba(var(--grond-tekst-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'));
  /* De border-image vult het hele randvak, dus dit element is een rechthoek:
     box-shadow tekent precies dezelfde schaduw als het oude drop-shadow,
     maar zonder offscreen buffer (zie .hero__img). */
  box-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(--grond-tekst)}
.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(--grond-kop)}
.score__bron{font-size:15px;color:rgba(var(--grond-tekst-rgb),.55)}

.reviews__raster{border-top:1px solid rgba(var(--grond-tekst-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(var(--grond-tekst-rgb),.85);text-wrap:pretty}
.review__bron{font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:rgba(var(--grond-tekst-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(--grond-tekst-rgb),.12);padding:36px clamp(20px,4vw,56px) 44px;color:var(--grond-tekst)}
.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(--grond-tekst-rgb),.6)}
.voet__copy{font-size:14px;color:rgba(var(--grond-tekst-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(--grond);
}
.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(--grond-kop)}
.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(--grond-tekst-rgb),.10);color:var(--grond-kop);
  font-size:15px;letter-spacing:.06em;
}
.catbalk__chip:hover{background:rgba(var(--grond-tekst-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(--grond-kop);
}
.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(--grond-kop);
}

/* ─── 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;
}
/* De knop staat er vanaf het begin (klasse in de HTML); alleen in liggende
   telefoonstand verdwijnt hij (sectie 24). 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(--grond);
  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}
}

/* ═══════════════════════════════════════════════════════════════════════════
   25. iPhone-correcties
   ═══════════════════════════════════════════════════════════════════════════ */

/* De achtergrond "zoomde" in en uit tijdens het scrollen op iOS. Oorzaak: als
   de adresbalk van Safari in- of uitklapt verandert de vensterhoogte, dus een
   laag met inset:0 verandert mee van hoogte — en background-size:cover
   herschaalt het beeld bij elke verandering. 100lvh is de hoogte mét
   ingeklapte balk en staat dus vast. (top + height winnen van bottom, en
   browsers zonder lvh houden gewoon de inset:0 hierboven.) */
.pagina::before{height:100lvh}

@media(max-width:760px){
  /* De houten lijst hangt met margin-top:-7,5% over de kop heen. Op desktop
     valt dat in de lege ruimte naast de naam; op een telefoon staat
     "RISTORANTE · PIZZERIA · DORDRECHT" over de volle breedte en viel de
     pizza er precies overheen. De breedte (109,33% / -6,9%) blijft ongemoeid,
     anders wordt de hero smaller dan de secties eronder. */
  .hero__frame{margin-top:6px}

  /* De sfeerregel onder elke categorienaam paste niet en werd met "…"
     afgekapt. Op de telefoon zeggen de naam en de foto genoeg. */
  .cat__regel{display:none}

  /* Iets kleinere cirkel: rustiger rij, en de foto oogt scherper. */
  .cat__ring{width:80px}
  .cat__knop{padding:12px 14px}
}

/* De beschrijving bij een gerecht kapte af op "Tomatensaus, mozz…". Die heb je
   wél nodig om te kiezen, dus op de telefoon loopt hij gewoon door over zoveel
   regels als hij nodig heeft. De kaarten worden daardoor ongelijk hoog; dat is
   in een verticale lijst prima en beter dan tekst die halverwege stopt. */
@media(max-width:899px){
  .kaart__regel{
    white-space:normal;overflow:visible;text-overflow:clip;
    font-size:15px;line-height:1.35;
  }
}

/* De lege plaatshouder (Vlees, Kip, Vis, Dolci, Dranken hebben nog geen foto)
   oogde als een vergeten vlak. Het icoon iets groter en steviger. */
.foto-leeg svg{width:52%;height:52%;opacity:.85}

/* ═══════════════════════════════════════════════════════════════════════════
   26. Thema's: krijtbord of beige papier, twee logo's
   thema.js zet data-thema op <html> (en de klasse thema-licht voor het
   papier) vóór de eerste tekening, en bouwt de kleurkiezer in .thema.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─ Logo: twee bestanden, CSS kiest. Crème op het krijtbord, zwart op papier.
     Geen JS bij het wisselen, dus ook geen flits van het verkeerde logo. */
.logo--licht{display:none}
:root.thema-licht .logo--licht{display:block}
:root.thema-licht .logo--donker{display:none}

/* Het woordmerk draagt de naam al; de naam er nog eens onder stond dubbel. */
.kop__naam,.voet__naam,.visite__naam{display:none}

.kop__logo{width:min(230px,56vw);filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))}
:root.thema-licht .kop__logo{filter:none}
.voet__logo{width:auto;height:64px;border-radius:0;background:none;object-fit:contain}
.visite__logo{width:clamp(180px,18vw,240px)}
.merkknop__merk img{width:36px;height:36px;border-radius:0}

/* ─ Lichte thema's: de grond en alles wat er rechtstreeks op staat ─────── */
:root.thema-licht{
  --grond-tekst:#3a3128;
  --grond-tekst-rgb:58,49,40;
  --grond-kop:#241d16;
  --grond-label:#4a5128;
}
:root[data-thema="beige"]{--grond:#e8d7bb;--grond-tekst:#3a3128;--grond-tekst-rgb:58,49,40;--grond-kop:#241d16;--grond-label:#4a5128}

/* Twee versies van het papier, net als bij het krijtbord: liggend (2000x1131)
   voor desktop, staand (1131x2000) voor de telefoon. Allebei cover en
   gecentreerd, dus de toren links en de pizza rechts blijven in beeld. */
:root[data-thema="beige"] .pagina::before{background-image:url('assets/papier-beige-breed.webp')}
@media(max-width:760px){
  :root[data-thema="beige"] .pagina::before{background-image:url('assets/papier-beige.webp')}
}

/* Crèmekleurige vlakken verdwenen bijna in het lichte papier; een dun randje
   en een zachte schaduw houden ze als kaart leesbaar. */
:root.thema-licht .drieluik__paneel,
:root.thema-licht .categorie--creme,
:root.thema-licht .cat__knop,
:root.thema-licht .kaart,
:root.thema-licht .mandje,
:root.thema-licht .afrekenen,
:root.thema-licht .wijze,
:root.thema-licht .bestel__fout,
:root.thema-licht .catbalk__terug{
  box-shadow:0 0 0 1px rgba(60,45,25,.10),0 24px 48px -26px rgba(60,45,25,.55);
}

/* ─ Hoek rechtsonder: kleurkiezer boven de merkknop ─────────────────────── */
.hoek{
  position:fixed;right:clamp(14px,2vw,26px);bottom:24px;z-index:70;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
}
.hoek .merkknop{position:static}
@media(max-width:760px){
  .hoek{right:12px;bottom:calc(86px + env(safe-area-inset-bottom))}
}
@media(max-width:899px){
  .hoek--bestel{bottom:24px}
  body.met-mandbalk .hoek--bestel{bottom:calc(94px + env(safe-area-inset-bottom))}
}

/* De hoek is met de kiezer erbij 100px hoog. De footer eindigt daarboven,
   anders staan de links en het copyright achter de bolletjes. */
.voet{padding-bottom:132px}
@media(max-width:760px){.voet{padding-bottom:120px}}

/* Op het lichte papier staat de footer precies over de toren en de pizza van
   de tekening; de links op 60% dekking vielen daar tegen weg. Een lichte waas
   en wat meer dekking houden ze leesbaar zonder de tekening te verstoppen. */
:root.thema-licht .voet{background:rgba(255,255,255,.28)}
:root.thema-licht a.voet__link,:root.thema-licht a.voet__link:hover{color:rgba(var(--grond-tekst-rgb),.85)}
:root.thema-licht .voet__copy{color:rgba(var(--grond-tekst-rgb),.65)}

.thema{
  display:flex;gap:8px;padding:6px 8px;border-radius:999px;
  background:rgba(24,22,20,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 10px 24px -12px rgba(0,0,0,.6);
}
:root.thema-licht .thema{background:rgba(255,255,255,.6)}
.thema__bol{
  position:relative;width:26px;height:26px;padding:0;border-radius:50%;cursor:pointer;
  border:2px solid rgba(255,255,255,.75);box-shadow:0 0 0 1px rgba(0,0,0,.25);
  transition:transform .15s ease;
}
/* 26px oogt fijn, maar 44px tikt fijn: onzichtbaar groter raakvlak */
.thema__bol::after{content:"";position:absolute;inset:-9px;border-radius:50%}
.thema__bol:hover{transform:scale(1.12)}
.thema__bol[aria-pressed="true"]{border-color:var(--rood-cta);box-shadow:0 0 0 1px var(--rood-cta);transform:scale(1.12)}
.thema__bol:focus-visible{outline:2px solid var(--rood-cta);outline-offset:3px}

/* ─ Foto's in de menukaarten ─────────────────────────────────────────────── */
/* Niets achter de foto: geen vlak, geen ring, geen schaduw. Alles wat ik hier
   achter het gerecht zette werd op de iPhone zichtbaar als een venster waar
   het bord net niet in paste — eerst een radiale vulling, daarna een ronde
   schaduw. Het gerecht staat nu gewoon op de kaart, zoals bij de klassiekers.

   Ook de constructie is zo eenvoudig mogelijk: de afbeelding bepaalt zelf de
   hoogte (alle vijf de gerechten zijn 720x720, dus width:100% met height:auto
   geeft altijd een vierkant). Geen absolute positionering, geen object-fit,
   geen aspect-ratio en geen padding-truc — die gingen op Safari allemaal mis.
   Het vak zit in een flex-kolom met align-items:center, dus het staat
   vanzelf midden op de kaart. */
.categorie__cirkel{
  width:min(230px,80%);height:auto;padding-bottom:0;aspect-ratio:auto;
  margin-inline:auto;
  border-radius:0;overflow:visible;background:none;box-shadow:none;
}
.categorie--creme .categorie__cirkel{background:none;box-shadow:none}
.categorie__cirkel .foto-cirkel{
  position:static;display:block;width:100%;height:auto;
  object-fit:fill;border-radius:0;aspect-ratio:auto;
}
/* Klassiekers: dezelfde aanpak. De ronde schaduw (0 30px 50px -20px) stond
   op een cirkel die iets groter is dan het bord; op het beige papier bleef
   tussen bord en schaduw een dun reepje onbeschaduwd papier over, en dat
   las als een lichte rand. Op het krijtbord viel de schaduw sowieso weg
   (donker op donker), dus hij kan zonder verlies weg. De border-radius
   blijft op de afbeelding zelf: Pasta alla Ruota is een echte foto, geen
   uitsnede, en wordt daarmee rond geknipt. */
.gerecht__cirkel{
  width:min(240px,100%);height:auto;padding-bottom:0;aspect-ratio:auto;
  margin-inline:auto;border-radius:0;box-shadow:none;
}
.gerecht__cirkel .foto-cirkel{
  position:static;display:block;width:100%;height:auto;
  object-fit:fill;border-radius:50%;aspect-ratio:auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   27. Hero op de telefoon zonder losse knop
   De vaste balk onderaan heeft al "Bestel direct"; de knop onder de hero was
   dubbel. Zonder die knop mag de negatieve ondermarge van de lijst terug
   (die stond op 0 om de knop ruimte te geven), zodat de sectie eronder net
   als op desktop tegen de houten lijst aanschuift.
   ═══════════════════════════════════════════════════════════════════════════ */
@media(max-width:760px){
  a.hero__cta{display:none}
  .hero__frame{margin-bottom:-5.4%}
  .hero{padding-bottom:12px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   28. Kop: ondertitel alleen op de telefoon, logo daar kleiner
   ═══════════════════════════════════════════════════════════════════════════ */
@media(min-width:761px){
  .kop__sub{display:none}
}
@media(max-width:760px){
  .kop__logo{width:160px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   29. Navigatie: lucht onder het logo, leesbaar op elk papier
   Op het beige papier staan bovenin de vork en de tomaten; tekst op 80%
   dekking viel daar tegen weg. Volle dekking, iets zwaarder, en een zachte
   gloed in de grondkleur die de tekening net onder de letters wegdrukt.
   ═══════════════════════════════════════════════════════════════════════════ */
.rp-nav{margin-top:18px}
a.rp-nav__link{
  color:var(--grond-tekst);font-weight:600;
  text-shadow:0 0 10px var(--grond),0 0 3px var(--grond);
}
.kop__sub{text-shadow:0 0 8px var(--grond)}
:root.thema-licht .kop__sub{color:rgba(var(--grond-tekst-rgb),.75)}

/* ═══════════════════════════════════════════════════════════════════════════
   30. Schaduw onder de hero, zonder filter
   De houten lijst zit op een vaste plek in het beeld: gemeten in het
   alfakanaal loopt hij van 6,45% tot 97,72% breed en van 22,36% tot 92,38%
   hoog. Een laagje op precies die rechthoek geeft dezelfde schaduw als het
   oude filter:drop-shadow, maar wordt gewoon geschilderd — dus geen
   offscreen buffer die op een iPhone omvalt in een zwart blok.
   De kok en de pizza steken buiten de lijst; die werpen nu geen schaduw
   meer, en dat zie je niet omdat ze los in de lucht hangen.
   ═══════════════════════════════════════════════════════════════════════════ */
/* isolation houdt de z-index:-1 binnen de hero: de schaduw komt onder de
   afbeelding, maar niet achter de pagina-achtergrond. */
.hero__frame{isolation:isolate}
.hero__frame::before{
  content:"";
  position:absolute;z-index:-1;
  left:6.45%;right:2.28%;top:22.36%;bottom:7.62%;
  box-shadow:0 34px 60px rgba(0,0,0,.65);
}
/* Op een telefoon is de hero een derde zo breed; dezelfde 34/60px zou daar
   als een zwarte vlek onder de lijst hangen. */
@media(max-width:760px){
  .hero__frame::before{box-shadow:0 12px 24px rgba(0,0,0,.6)}
}