/* Kookgeheimen.com
   Kleuren en letters komen uit de app (lisa-kookapp, tak ai-sterretje, theme/tokens.ts,
   huid "dag" plus de donkere "nacht"-tinten voor de donkere vlakken) en sluiten aan op
   vidaconlisa.nl: Fraunces voor koppen, Karla voor leestekst.
   Geen randen als kader om een blok: diepte komt uit ondergrond, verloop en schaduw
   (zelfde regel als in de app). */

@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 600;font-display:swap;src:url(/assets/fonts/fraunces.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 500;font-display:swap;src:url(/assets/fonts/fraunces-italic.woff2) format('woff2')}
@font-face{font-family:'Karla';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/karla.woff2) format('woff2')}

:root{
  /* dag */
  --grond:#F4EADC;
  --vlak:#FBF6EE;
  --verhoogd:#FFFDF9;
  --wit:#FFFFFF;
  --tekst:#2A1D17;
  --tekst-zacht:#5C5148;
  --gedempt:#74675A;
  --terra:#AE4D2E;
  --terra-licht:#C75B39;
  --op-terra:#FFF8F1;
  --terra-vlak:#FBEFE9;
  --olijf:#6E7B53;
  --olijf-vlak:#EDF0E6;
  --goud:#C99A5B;
  --goud-diep:#86652A;
  --lak:#B8261F;
  --lak-vlak:#FBEAE8;
  --scheiding:rgba(36,30,26,.08);
  --schaduw:58,42,28;
  /* nacht, voor de donkere vlakken */
  --n-grond:#211612;
  --n-vlak:#2A1E19;
  --n-verhoogd:#332721;
  --n-tekst:#F6EEE4;
  --n-zacht:#C3B2A2;
  --n-gedempt:#A89786;
  --n-terra:#E07A52;
  --n-goud:#D6A868;

  --kop:'Fraunces',Georgia,'Times New Roman',serif;
  --lees:'Karla',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --rand:16px;
  --breed:1160px;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--lees);font-size:17px;line-height:1.55;color:var(--tekst);
  background:var(--vlak);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--terra);outline-offset:3px;border-radius:6px}
.kop{font-family:var(--kop);font-optical-sizing:auto;font-weight:600;letter-spacing:-.015em;line-height:1.05}
.binnen{width:100%;max-width:var(--breed);margin:0 auto;padding:0 var(--rand)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Kopbalk ---------- */
.balk{position:relative;z-index:5}
.balk.zwevend{position:absolute;top:0;left:0;right:0}
.balk.zwevend + main .held-raster{padding-top:84px}
.balk .binnen{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;padding-bottom:14px}
.merk{display:flex;align-items:center;gap:10px;text-decoration:none}
.merk img{width:40px;height:40px;border-radius:50%;box-shadow:0 4px 12px -4px rgba(var(--schaduw),.45)}
.merk span{font-family:var(--kop);font-weight:600;font-size:20px;letter-spacing:-.01em}
.balk nav a{font-size:15px;font-weight:600;color:var(--terra);text-decoration:none;padding:10px 0}
.balk nav a:hover{text-decoration:underline;text-underline-offset:4px}

/* ---------- Knoppen naar de winkels ---------- */
.winkels{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
/* De officiele badges van Apple en Google, ongewijzigd, even hoog (48px). */
.winkel{display:inline-block;line-height:0;border-radius:9px;transition:transform .18s ease, opacity .2s ease}
.winkel img{height:48px;width:auto;display:block}
.winkel:hover{transform:translateY(-2px)}
.winkel:active{transform:translateY(0)}
.binnenkort{
  display:none;align-items:center;gap:10px;order:-1;flex-basis:100%;
  font-weight:600;font-size:15px;line-height:1.3;color:var(--terra);
}
.binnenkort::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--terra);animation:puls 2.4s ease-out infinite}
.op-donker .binnenkort{color:var(--n-terra)}
.op-donker .binnenkort::before{background:var(--n-terra)}
/* Zolang de app niet live is: badges in beeld, gedempt en niet klikbaar. */
.is-binnenkort .winkel{opacity:.5;pointer-events:none}
.is-binnenkort .binnenkort{display:flex}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(174,77,46,.45)}70%{box-shadow:0 0 0 8px rgba(174,77,46,0)}100%{box-shadow:0 0 0 0 rgba(174,77,46,0)}}

.knop-zacht{
  display:inline-flex;align-items:center;gap:8px;min-height:48px;
  font-weight:600;color:var(--terra);text-decoration:none;font-size:16px;
}
.knop-zacht::after{content:"\2192";transition:transform .18s ease}
.knop-zacht:hover::after{transform:translateX(3px)}

/* ---------- Held ---------- */
.held{
  position:relative;overflow:hidden;
  background:
    radial-gradient(90% 55% at 85% 8%, rgba(199,91,57,.20) 0%, rgba(199,91,57,0) 60%),
    radial-gradient(70% 40% at 0% 100%, rgba(110,123,83,.12) 0%, rgba(110,123,83,0) 60%),
    linear-gradient(180deg,var(--grond) 0%,var(--vlak) 100%);
}
.held-raster{display:grid;gap:28px;padding-top:18px;padding-bottom:0}
.oog{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--terra);
}
.held h1{font-size:clamp(44px,12.4vw,84px);font-weight:500;line-height:.98;margin-top:14px;letter-spacing:-.025em}
.held h1 em{font-style:italic;font-weight:400;color:var(--terra)}
.held .lead{margin-top:18px;font-size:18px;line-height:1.5;color:var(--tekst-zacht);max-width:34ch}
.held .winkels{margin-top:26px}
.feitjes{margin-top:16px;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px;color:var(--gedempt)}
.feitjes li{list-style:none;display:flex;align-items:center;gap:7px}
.feitjes li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--olijf)}

.telefoon-plek{position:relative;display:flex;justify-content:center;height:430px;margin-top:6px}
.telefoon{
  position:relative;width:250px;flex:none;align-self:flex-start;
  padding:9px;border-radius:44px;background:#17100D;
  box-shadow:0 40px 70px -30px rgba(var(--schaduw),.75),0 0 0 1px rgba(255,255,255,.06) inset;
}
.telefoon img{border-radius:36px;width:100%;aspect-ratio:1320/2868;object-fit:cover}
.telefoon::before{content:"";position:absolute;top:19px;left:50%;transform:translateX(-50%);width:74px;height:20px;border-radius:12px;background:#17100D;z-index:2}
.held .bord{
  position:absolute;width:160px;aspect-ratio:4/5;border-radius:22px;overflow:hidden;
  right:calc(50% - 180px);top:236px;transform:rotate(6deg);
  box-shadow:0 28px 50px -22px rgba(var(--schaduw),.8);
  border:5px solid var(--verhoogd);
}
.held .bord img{width:100%;height:100%;object-fit:cover}
.held-voet{position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(180deg,rgba(251,246,238,0),var(--vlak))}

/* ---------- Secties ---------- */
.sectie{padding:64px 0}
.sectie-kop{max-width:620px}
.sectie-kop h2{font-size:clamp(32px,8.4vw,52px);font-weight:500;letter-spacing:-.022em}
.sectie-kop h2 em{font-style:italic;font-weight:400;color:var(--terra)}
.sectie-kop p{margin-top:12px;color:var(--tekst-zacht);font-size:17px;max-width:46ch}

/* Schermen-strip */
.strip-wrap{position:relative;margin-top:28px}
.strip{
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px var(--rand) 26px;scroll-padding:0 var(--rand);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.strip::-webkit-scrollbar{display:none}
.strip li{list-style:none;flex:none;width:min(62vw,250px);scroll-snap-align:start}
.strip img{width:100%;aspect-ratio:1320/2868;object-fit:cover;border-radius:24px;box-shadow:0 22px 40px -24px rgba(var(--schaduw),.75);background:var(--grond)}
.strip-pijlen{display:none;gap:8px}
.strip-pijlen button{
  width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:var(--verhoogd);color:var(--tekst);font-size:20px;
  box-shadow:0 8px 20px -10px rgba(var(--schaduw),.6);
}
.strip-pijlen button:hover{background:var(--wit)}

/* Wat erin zit */
.inhoud{margin-top:34px;display:grid;gap:0}
.inhoud li{
  list-style:none;display:grid;grid-template-columns:44px 1fr;gap:4px 12px;align-items:baseline;
  padding:16px 0;border-top:1px solid var(--scheiding);
}
.inhoud li:last-child{border-bottom:1px solid var(--scheiding)}
.inhoud .nr{font-family:var(--kop);font-style:italic;font-weight:400;font-size:22px;color:var(--terra-licht)}
.inhoud b{grid-column:2;font-family:var(--kop);font-weight:600;font-size:21px;line-height:1.2;letter-spacing:-.01em}
.inhoud .nr{grid-row:1 / span 2;padding-top:2px}
.inhoud .uitleg{grid-column:2;color:var(--tekst-zacht);font-size:16px}

/* Receptkaarten */
.kaarten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:28px}
.kaart{
  position:relative;display:block;border-radius:20px;overflow:hidden;text-decoration:none;
  aspect-ratio:4/5;background:var(--grond);
  box-shadow:0 18px 34px -22px rgba(var(--schaduw),.8);
  isolation:isolate;
}
.kaart img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.kaart::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,12,10,0) 30%,rgba(16,12,10,.5) 58%,rgba(16,12,10,.88) 100%);z-index:1}
.kaart-tekst{position:absolute;left:0;right:0;bottom:0;padding:12px 13px 13px;z-index:2;color:#FFF6EC}
.kaart-tekst b{display:block;hyphens:manual;-webkit-hyphens:manual;overflow-wrap:break-word;font-family:var(--kop);font-weight:600;font-size:18px;line-height:1.1;letter-spacing:-.01em}
.kaart-tekst small{display:block;margin-top:5px;font-size:13px;color:rgba(255,246,236,.82)}
.kaart:hover img{transform:scale(1.04)}

/* Prijs, donker vlak */
.donker{
  background:
    radial-gradient(100% 60% at 10% 0%, rgba(224,122,82,.18) 0%, rgba(224,122,82,0) 60%),
    linear-gradient(170deg,var(--n-vlak) 0%,var(--n-grond) 100%);
  color:var(--n-tekst);
}
.donker .oog{color:var(--n-terra)}
.donker .sectie-kop p{color:var(--n-zacht)}
.donker .sectie-kop h2 em{color:var(--n-terra)}
.prijzen{margin-top:30px;display:grid;gap:12px}
.prijs{border-radius:22px;padding:20px 20px 22px;background:rgba(246,238,228,.05)}
.prijs.uitgelicht{background:rgba(224,122,82,.13)}
.prijs h3{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--n-gedempt)}
.prijs.uitgelicht h3{color:var(--n-terra)}
.prijs p.bedrag{color:var(--n-tekst);font-family:var(--kop);font-weight:500;font-size:34px;line-height:1.1;margin-top:8px;letter-spacing:-.02em}
.prijs .bedrag small{font-family:var(--lees);font-size:16px;font-weight:400;color:var(--n-zacht);letter-spacing:0}
.prijs .of{display:block;font-family:var(--lees);font-size:15px;color:var(--n-zacht);margin:2px 0}
.prijs p{margin-top:10px;color:var(--n-zacht);font-size:16px}
.prijs-noot{margin-top:18px;font-size:14px;color:var(--n-gedempt);max-width:60ch}

/* Over Lisa */
.lisa{display:grid;gap:18px;align-items:start}
.lisa .groot{font-family:var(--kop);font-weight:400;font-style:italic;font-size:clamp(26px,6.6vw,40px);line-height:1.18;letter-spacing:-.015em}
.lisa p{color:var(--tekst-zacht);max-width:52ch}
.lisa p.groot{color:var(--tekst);max-width:none}
.lisa .links{display:flex;flex-wrap:wrap;gap:4px 22px}

/* Slotband */
.slot{padding:24px 0 64px;text-align:left}
.slot-kaart{
  border-radius:28px;padding:30px 22px 28px;
  background:
    radial-gradient(90% 80% at 100% 0%, rgba(199,91,57,.18) 0%, rgba(199,91,57,0) 60%),
    var(--grond);
}
.slot-kaart h2{font-size:clamp(30px,8vw,46px);font-weight:500;letter-spacing:-.02em}
.slot-kaart h2 em{font-style:italic;font-weight:400;color:var(--terra)}
.slot-kaart p{margin-top:10px;color:var(--tekst-zacht)}
.slot-kaart .winkels{margin-top:22px}
.slot-kaart .knop-zacht{margin-top:12px}

/* Voet */
.voet{background:var(--n-grond);color:var(--n-zacht);padding:40px 0 48px;font-size:15px}
.voet .binnen{display:grid;gap:22px}
.voet .merk span{color:var(--n-tekst)}
.voet ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 20px}
.voet a{color:var(--n-tekst);text-decoration:none}
.voet a:hover{text-decoration:underline;text-underline-offset:4px}
.voet .klein{font-size:13px;color:var(--n-gedempt);line-height:1.6}

/* ---------- Receptpagina ---------- */
.recept-raster{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.recept-ingr,.recept-stappen{margin-top:44px}
.recept-ingr h2,.recept-stappen h2{font-size:30px;font-weight:500;letter-spacing:-.02em}
.recept-ingr h2 small{font-family:var(--lees);font-size:15px;font-weight:600;color:var(--gedempt);margin-left:8px;letter-spacing:0}
.recept-foto{position:relative;margin:0 calc(var(--rand) * -1);aspect-ratio:4/5;max-height:76vh;overflow:hidden;background:var(--grond)}
.recept-foto img{width:100%;height:100%;object-fit:cover}
.recept-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,12,10,0) 38%,rgba(16,12,10,.5) 62%,rgba(16,12,10,.9) 100%)}
.recept-titel{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 var(--rand) 22px;color:#FFF6EC;text-shadow:0 1px 18px rgba(16,12,10,.35)}
.recept-titel .oog{color:#F6D2BE}
.recept-titel h1{font-size:clamp(38px,10.5vw,64px);font-weight:500;line-height:1;margin-top:8px;letter-spacing:-.025em}
.recept-titel p{margin-top:8px;font-size:16px;color:rgba(255,246,236,.85)}
.meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.meta li{list-style:none;padding:8px 14px;border-radius:999px;background:var(--grond);font-size:15px;font-weight:600;color:var(--tekst-zacht)}
.geheim{
  margin-top:18px;border-radius:20px;padding:18px 18px 18px 18px;background:var(--lak-vlak);
  display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start;
}
.zegel{width:40px;height:40px;border-radius:50%;background:var(--lak);color:#FFF6EC;display:grid;place-items:center;font-family:var(--kop);font-style:italic;font-size:20px;box-shadow:0 6px 14px -6px rgba(184,38,31,.7)}
.geheim b{display:block;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--lak)}
.geheim p{font-family:var(--kop);font-size:19px;line-height:1.35;margin-top:4px}
.recept-acties{margin-top:16px;display:flex;flex-wrap:wrap;gap:4px 22px}

.ingredienten{margin-top:14px}
.ingredienten li{list-style:none;padding:12px 0;border-bottom:1px solid var(--scheiding);display:flex;gap:12px;align-items:baseline}
.ingredienten li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--goud);transform:translateY(-2px)}
.ingredienten span::first-letter{text-transform:uppercase}
.allergenen{margin-top:16px;font-size:14px;color:var(--tekst-zacht);background:var(--goud-vlak,#F7EDDD);border-radius:14px;padding:12px 14px}
.allergenen b{color:var(--goud-diep)}
.stappen{margin-top:16px;counter-reset:stap}
.stappen > li{list-style:none;position:relative;padding:0 0 26px 52px;counter-increment:stap}
.stappen > li::before{
  content:counter(stap);position:absolute;left:0;top:-2px;width:36px;height:36px;border-radius:50%;
  background:var(--terra-vlak);color:var(--terra);display:grid;place-items:center;
  font-family:var(--kop);font-weight:600;font-size:18px;
}
.stappen > li::after{content:"";position:absolute;left:17.5px;top:40px;bottom:6px;width:1px;background:var(--scheiding)}
.stappen > li:last-child::after{display:none}
.stappen p{font-size:17.5px;line-height:1.6}
.stappen strong{font-weight:700;color:var(--tekst)}
.hierna{margin-top:10px;padding-left:14px;border-left:2px solid var(--terra-licht);font-family:var(--kop);font-style:italic;font-size:17px;line-height:1.45;color:var(--tekst-zacht)}
.aanname{margin-top:10px;font-size:14px;color:var(--gedempt);background:var(--grond);border-radius:12px;padding:10px 12px}
.aanname b{color:var(--tekst-zacht)}
.bron{margin-top:8px;font-size:14px;color:var(--gedempt)}

.meer{margin-top:8px}
.meer .kaarten{scroll-padding-left:var(--rand);grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(42vw,190px);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;margin:22px calc(var(--rand) * -1) 0;padding-left:var(--rand);padding-right:var(--rand);scrollbar-width:none}
.meer .kaarten::-webkit-scrollbar{display:none}
.meer .kaart{scroll-snap-align:start}

/* ---------- Slimme link /app ---------- */
.app-pagina{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.app-pagina main{flex:1;display:flex;align-items:center}
.app-kaart{width:100%;max-width:440px;margin:0 auto;padding:28px var(--rand) 40px;text-align:center}
.app-kaart .icoon{width:112px;height:112px;border-radius:28px;margin:0 auto;box-shadow:0 24px 44px -18px rgba(var(--schaduw),.75)}
.app-kaart h1{font-size:44px;font-weight:500;margin-top:22px;letter-spacing:-.025em}
.app-kaart .van{margin-top:6px;color:var(--gedempt);font-size:15px}
.app-kaart .bericht{margin-top:22px;font-size:18px;color:var(--tekst-zacht)}
.app-kaart .winkels{justify-content:center;margin-top:24px}
.app-kaart .binnenkort-blok h2{font-family:var(--kop);font-weight:500;font-size:30px;line-height:1.1;margin-top:26px;letter-spacing:-.02em}
.app-kaart .binnenkort-blok h2 em{font-style:italic;font-weight:400;color:var(--terra)}
.app-kaart .knop-vol{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:24px;
  min-height:54px;padding:0 26px;border-radius:999px;background:var(--terra);color:var(--op-terra);
  font-weight:700;font-size:17px;text-decoration:none;box-shadow:0 14px 26px -14px rgba(174,77,46,.9);
}
.app-kaart .knop-vol:hover{background:#9E4429}
.mini-gerechten{display:flex;justify-content:center;margin-top:26px}
.mini-gerechten img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:3px solid var(--vlak);margin-left:-12px;box-shadow:0 8px 16px -8px rgba(var(--schaduw),.7)}
.mini-gerechten img:first-child{margin-left:0}

/* ---------- Groter scherm ---------- */
@media (min-width:760px){
  :root{--rand:32px}
  .balk .binnen{padding-top:22px;padding-bottom:22px}
  .balk.zwevend + main .held-raster{padding-top:120px}
  .held-raster{grid-template-columns:1.1fr .9fr;align-items:center;padding-top:30px;gap:40px}
  .held .lead{font-size:20px}
  .telefoon-plek{height:600px;margin-top:0}
  .telefoon{width:300px;align-self:flex-start;margin-top:30px}
  .held .bord{width:230px;right:auto;left:calc(50% + 70px);top:250px}
  .sectie{padding:96px 0}
  .strip li{width:250px}
  .strip{padding-left:max(var(--rand),calc((100vw - var(--breed)) / 2 + var(--rand)));scroll-padding-left:max(var(--rand),calc((100vw - var(--breed)) / 2 + var(--rand)))}
  .strip-kop{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
  .strip-pijlen{display:flex}
  .inhoud{grid-template-columns:1fr 1fr;column-gap:48px}
  .inhoud li:nth-last-child(2){border-bottom:1px solid var(--scheiding)}
  .kaarten{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
  .kaart-tekst{padding:16px}
  .kaart-tekst b{font-size:21px}
  .prijzen{grid-template-columns:repeat(2,1fr);gap:16px}
  .prijs{padding:26px 24px 28px}
  .lisa{grid-template-columns:1.2fr 1fr;gap:56px;align-items:end}
  .slot-kaart{padding:48px 48px 44px;display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center}
  .slot-kaart > div:last-child{display:flex;flex-direction:column;align-items:flex-end}
  .slot-kaart .winkels{margin-top:0;justify-content:flex-end}
  .voet .binnen{grid-template-columns:1fr auto;align-items:start}

  .recept-raster{
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:64px;padding-top:8px;
    grid-template-areas:"foto info" "foto stappen" "ingr stappen";grid-template-rows:auto 1fr auto;
  }
  .recept-foto{grid-area:foto;align-self:start;margin:0;border-radius:28px;box-shadow:0 34px 60px -32px rgba(var(--schaduw),.8)}
  .recept-info{grid-area:info;padding-top:6px}
  .recept-info .meta{margin-top:0}
  .recept-ingr{grid-area:ingr;align-self:start}
  .recept-stappen{grid-area:stappen;align-self:start;margin-top:40px}
  .recept-titel{padding:0 28px 28px}
  .ingredienten li{padding:9px 0}
  .recept-titel h1{font-size:clamp(40px,4.4vw,56px)}
  .slot{padding-top:40px}
  .meer .kaarten{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-columns:auto;overflow:visible;margin:28px 0 0;padding:0}
}
@media (min-width:760px) and (max-width:1023px){
  .held-raster{grid-template-columns:1fr}
  .telefoon-plek{height:520px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}
/* Badges: op een smalle telefoon iets lager, zodat ze ook in een kaart naast elkaar passen. */
@media (max-width:420px){.winkel img{height:44px}}
/* Op /app zegt de kop al "Binnenkort": daar geen tweede label. */
.app-kaart .is-binnenkort .binnenkort{display:none}
/* Badges prominenter (22 okt 2026, Axel op de telefoon): groter, volle kleur, in de held gecentreerd. */
.winkel img{height:56px}
@media (max-width:420px){.winkel img{height:52px}}
.is-binnenkort .winkel{opacity:1}
.held .winkels{margin-top:30px}
@media (max-width:760px){.held .winkels{justify-content:center}.held .binnenkort{justify-content:center}}
@media (max-width:420px){.slot-kaart .winkel img{height:44px}}

/* ==========================================================================
   Ronde 2 (22 okt 2026): teaserpagina's, keukenpagina's, fakeaway-blok, pers.
   Zelfde tokens, geen randen als kader: diepte uit ondergrond en schaduw.
   ========================================================================== */

/* Slotje op een kaart van een recept dat in de app staat */
.slot-icoon{flex:none;display:block}
.kaart-slot{
  position:absolute;top:10px;left:10px;z-index:2;display:inline-flex;align-items:center;gap:5px;
  padding:5px 10px 5px 8px;border-radius:999px;background:rgba(16,12,10,.62);color:#FFF6EC;
  font-size:12px;font-weight:700;letter-spacing:.02em;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}

/* Kopjes boven een rij kaarten */
.lijst-kop{font-family:var(--kop);font-weight:500;font-size:26px;line-height:1.15;letter-spacing:-.015em;margin-top:44px}
.lijst-kop small{font-family:var(--lees);font-size:15px;font-weight:600;color:var(--gedempt);margin-left:6px;letter-spacing:0}
.lijst-kop + .kaarten{margin-top:16px}
.pagina-kop .sectie-kop h1{font-size:clamp(40px,11vw,72px);font-weight:500;letter-spacing:-.025em;margin-top:12px;line-height:1.02}
.pagina-kop .sectie-kop h1 em{font-style:italic;font-weight:400;color:var(--terra)}
.pagina-kop .sectie-kop p{max-width:58ch}

/* Pilletjes naar andere pagina's */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chips a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;
  background:var(--grond);color:var(--tekst);font-weight:600;font-size:15px;text-decoration:none;
  transition:background .18s ease,color .18s ease;
}
.chips a:hover{background:var(--terra-vlak);color:var(--terra)}

/* Teaserpagina */
.omschrijving{margin-top:16px;color:var(--tekst-zacht);max-width:52ch}
.in-app{
  margin-top:22px;border-radius:24px;padding:22px 20px 18px;
  background:
    radial-gradient(90% 80% at 100% 0%, rgba(199,91,57,.18) 0%, rgba(199,91,57,0) 60%),
    var(--grond);
}
.in-app .slotje{width:42px;height:42px;border-radius:50%;background:var(--terra);color:var(--op-terra);display:grid;place-items:center;box-shadow:0 10px 20px -10px rgba(174,77,46,.9)}
.in-app .slotje .slot-icoon{width:18px;height:18px}
.in-app h2{font-size:clamp(28px,7.4vw,36px);font-weight:500;letter-spacing:-.02em;margin-top:14px}
.in-app h2 em{font-style:italic;font-weight:400;color:var(--terra)}
.in-app > p{margin-top:10px;color:var(--tekst-zacht)}
.in-app .winkels{margin-top:18px}
.in-app .prijsregel{margin-top:14px;font-size:14px;color:var(--gedempt)}
.in-app .knop-zacht{margin-top:4px}
.teaser .chips{margin-top:18px}

/* Prijsvergelijking: homepage-blok en los blok op de teaser */
.bespaar-lijst{display:grid;gap:12px;margin-top:28px;list-style:none}
.bespaar-rij{list-style:none;background:var(--verhoogd);border-radius:22px;padding:14px 14px 16px;box-shadow:0 16px 32px -24px rgba(var(--schaduw),.75)}
.bespaar-gerecht{display:flex;gap:12px;align-items:center;text-decoration:none}
.bespaar-gerecht img{flex:none;width:58px;height:58px;border-radius:16px;object-fit:cover;background:var(--grond)}
.bespaar-gerecht b{display:block;font-family:var(--kop);font-weight:600;font-size:19px;line-height:1.15;letter-spacing:-.01em}
.bespaar-gerecht small{display:block;margin-top:2px;color:var(--gedempt);font-size:14px}
.bespaar-gerecht:hover b{color:var(--terra)}
.mini-slot{display:inline-flex;align-items:center;gap:4px;margin-top:4px;font-size:12px;font-weight:700;color:var(--terra)}
.bespaar-cijfers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:12px;background:var(--vlak);border-radius:14px;padding:10px 12px}
.bespaar-cijfers dt{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gedempt)}
.bespaar-cijfers dd{font-family:var(--kop);font-size:20px;font-weight:500;line-height:1.2;margin-top:2px;white-space:nowrap}
.bespaar-cijfers .weg dd{color:var(--tekst-zacht);text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:rgba(92,81,72,.55)}
.bespaar-cijfers .winst dd{color:var(--olijf);font-weight:600}
.bespaar-bron{margin-top:10px;font-size:13px;line-height:1.5;color:var(--gedempt)}
.bespaar-bron a{color:var(--terra)}
.bespaar-noot{margin-top:20px;font-size:14px;line-height:1.55;color:var(--gedempt);max-width:72ch}
.bespaar-noot b{color:var(--tekst-zacht)}
.bespaar-los{margin-top:18px;background:var(--verhoogd);border-radius:20px;padding:14px 14px 16px;box-shadow:0 16px 32px -24px rgba(var(--schaduw),.75)}
.bespaar-los-kop{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--olijf)}
.bespaar-los .bespaar-cijfers{margin-top:10px}

/* Overzicht: alle recepten in de app, per keuken */
.in-app-lijst{display:grid;gap:24px;margin-top:26px}
.in-app-groep h3{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gedempt)}
.in-app-groep ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.slot-link{
  display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 15px 0 13px;border-radius:999px;
  background:var(--verhoogd);color:var(--tekst);font-size:15px;font-weight:600;text-decoration:none;
  box-shadow:0 8px 18px -14px rgba(var(--schaduw),.8);
}
.slot-link .slot-icoon{color:var(--terra)}
.slot-link:hover{color:var(--terra)}

/* Pers */
.feiten{margin-top:14px}
.feiten div{display:grid;gap:3px;padding:14px 0;border-top:1px solid var(--scheiding)}
.feiten div:last-child{border-bottom:1px solid var(--scheiding)}
.feiten dt{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gedempt)}
.feiten dd{font-size:17px;line-height:1.5}
.pers-tekst{margin-top:12px;color:var(--tekst-zacht);max-width:60ch}
.pers-tekst.klein{font-size:14px;color:var(--gedempt)}
.pers-tekst a{color:var(--terra);font-weight:600}
.knop-vol{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;
  min-height:54px;padding:0 24px;border-radius:999px;background:var(--terra);color:var(--op-terra);
  font-weight:700;font-size:16px;text-decoration:none;text-align:center;box-shadow:0 14px 26px -14px rgba(174,77,46,.9);
}
.knop-vol:hover{background:#9E4429}
.pers-schermen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:22px}
.pers-schermen img{width:100%;aspect-ratio:1320/2868;object-fit:cover;border-radius:12px;box-shadow:0 12px 24px -18px rgba(var(--schaduw),.8);background:var(--grond)}
.pers-gerechten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:8px}
.pers-gerechten img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:12px;background:var(--grond)}

/* Voet met drie kolommen */
.voet-kop{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--n-gedempt);margin-bottom:8px}
.voet ul li{line-height:1.5}

@media (min-width:760px){
  .teaser{grid-template-areas:"foto info";grid-template-rows:auto;align-items:start}
  .teaser .recept-foto{position:sticky;top:24px}
  .teaser .recept-info{padding-top:6px}
  .in-app{padding:28px 28px 22px}
  .bespaar-lijst{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .bespaar-rij{padding:16px 16px 18px}
  .in-app-lijst{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}
  .lijst-kop{font-size:30px;margin-top:56px}
  .feiten div{grid-template-columns:200px 1fr;gap:24px;padding:16px 0}
  .pers-schermen{grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}
  .pers-gerechten{grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}
  .voet .binnen{grid-template-columns:1.3fr 1fr 1fr}
  .voet ul{flex-direction:column;gap:6px}
}
@media (min-width:760px) and (max-width:1023px){
  .bespaar-lijst{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:420px){.in-app .winkel img{height:44px}}