/* ============================================================
   DP Pâtisserie — Den Helder
   Concept "De bakplaat": alles in handgespoten rijen op een plaat,
   en elke plaat hoort bij één bakdag.
   Palet en ornament komen uit haar eigen logo (research/foto-origineel/42).
   ============================================================ */

@font-face{font-family:'Kop';src:url('fraunces.woff2') format('woff2');font-weight:500 800;font-display:swap}
@font-face{font-family:'Kop';src:url('fraunces-i.woff2') format('woff2');font-weight:500 800;font-style:italic;font-display:swap}
@font-face{font-family:'Tekst';src:url('karla.woff2') format('woff2');font-weight:300 800;font-display:swap}

:root{
  /* grond — crème papier uit het logo */
  --papier:#F5EFE2;
  --papier-2:#EFE6D5;
  --papier-3:#E7DBC4;
  --wit:#FBF8F1;

  /* inkt — het diepe bruin van het monogram */
  --inkt:#3E2717;
  --inkt-2:#6B513C;
  --inkt-3:#755B43;

  /* brons — de lijnen van het zegel.
     --brons is de SIER-kleur (lijnen, ornamenten, display-koppen: daar geldt de
     3:1-drempel voor grote tekst). Voor kleine tekst is hij te licht — 3,3:1 op
     crème — dus die gebruikt --brons-tekst: 5,1:1. Gemeten, niet geschat. */
  --brons:#A9793C;
  --brons-tekst:#875C26;
  --brons-licht:#C89B5D;
  --brons-flauw:rgba(169,121,60,.26);

  /* uit haar producten */
  --pistache:#8FA368;
  --framboos:#BE5E78;
  --karamel:#C0854A;

  --diep:#2B1B10;

  --maat:1180px;
  --rond:18px;
  --schaduw:0 18px 44px -22px rgba(62,39,23,.42);
  --schaduw-zacht:0 10px 28px -18px rgba(62,39,23,.34);
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--papier);
  color:var(--inkt);
  font-family:'Tekst',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
/* text-wrap:balance verdeelt een kop over ongeveer gelijke regels. Zonder dit
   bleef er een weesregel over ("site" alleen op regel 2) en brak "Taart & cakes"
   doormidden. Browsers die het niet kennen negeren het gewoon. */
h1,h2,h3,h4{font-family:'Kop',Georgia,serif;font-weight:700;line-height:1.06;letter-spacing:-.014em;margin:0}
/* balance alleen op de GROTE koppen. Op elke h1 t/m h4 kostte het merkbaar
   rekentijd (TBT ging van gemiddeld 34 naar 166 ms op de homepage, die
   tientallen kopjes heeft): de browser probeert per kop meerdere regelindelingen.
   De weesregels die het moest oplossen zaten in de displaykoppen en in de
   categorienaam, dus daar staat het nu — en nergens anders. */
h1,h2,.dpb-cat h3{text-wrap:balance}
/* ondergrens 2,4rem i.p.v. 2,7rem en bovengrens 4,8rem i.p.v. 5,9rem: anders
   brak "Van ingredienten tot in de doos" met het losse woordje "Van" op de
   eerste regel — op een telefoon in drieen, op een breed scherm in vieren */
h1{font-size:clamp(2.4rem,6.2vw,4.8rem)}
h2{font-size:clamp(2rem,4vw,3.3rem)}
h3{font-size:clamp(1.3rem,2vw,1.72rem);line-height:1.16}
p{margin:0 0 1.05rem}
a{color:inherit}
em{font-style:italic;color:var(--brons)}

.maat{width:min(var(--maat),calc(100% - 2.6rem));margin-inline:auto}
.mid{text-align:center}
.hoog{margin:0 auto;max-width:62ch}

/* skip-link */
.spring{position:absolute;left:-9999px;top:0;z-index:200;background:var(--diep);color:var(--papier);padding:.7rem 1.1rem;border-radius:0 0 10px 0}
.spring:focus{left:0}

/* ------------------------------------------------------------
   HET ORNAMENT — het takje-met-stippen uit haar logo.
   Terugkerend handwerk-detail: sectiescheiding, bullet, kopanker.
   ------------------------------------------------------------ */
.takje{display:block;margin:0 auto 1.15rem;color:var(--brons);opacity:.85}
.takje svg{display:block;margin:0 auto}
.blok-diep .takje{color:var(--brons-licht);opacity:1}

/* ------------------------------------------------------------
   HET RASTER — het cirkelraster van haar siliconenmat.
   Ligt letterlijk onder de macarons in foto 17 en 19.
   ------------------------------------------------------------ */
.raster{
  --r:27px; --s:76px; --lijn:rgba(169,121,60,.20);
  background-image:
    radial-gradient(circle at 50% 50%, transparent 0 calc(var(--r) - 1px), var(--lijn) calc(var(--r) - 1px) var(--r), transparent var(--r)),
    radial-gradient(circle at 50% 50%, transparent 0 calc(var(--r) - 1px), var(--lijn) calc(var(--r) - 1px) var(--r), transparent var(--r));
  background-size:var(--s) var(--s), var(--s) var(--s);
  background-position:0 0, calc(var(--s)/2) calc(var(--s)/2);
}
.raster-flauw{--lijn:rgba(169,121,60,.12)}

/* ============================================================
   KOP
   ============================================================ */
.band-usp{
  background:var(--diep);color:#E9DCC6;
  font-size:.79rem;letter-spacing:.1em;text-transform:uppercase;
}
.band-usp .maat{display:flex;gap:1.6rem;justify-content:center;align-items:center;flex-wrap:wrap;padding:.52rem 0;text-align:center}
.band-usp span{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap}
.band-usp b{color:var(--brons-licht);font-weight:500}

.kop{position:sticky;top:0;z-index:60;background:rgba(245,239,226,.94);border-bottom:1px solid var(--brons-flauw)}
@supports (backdrop-filter:blur(8px)){.kop{backdrop-filter:blur(10px)}}
.kop-rij{display:flex;align-items:center;gap:1.2rem;padding:.62rem 0;min-height:66px}

.merk{display:flex;align-items:center;gap:.68rem;text-decoration:none;flex:0 0 auto}
.merk-zegel{width:40px;height:40px;flex:0 0 auto;color:var(--brons)}
.merk-naam b{display:block;font-family:'Kop',serif;font-weight:600;font-size:1.16rem;letter-spacing:.01em;line-height:1.05}
.merk-naam span{display:block;font-size:.63rem;letter-spacing:.26em;text-transform:uppercase;color:var(--inkt-2);margin-top:.15rem}

.nav{display:flex;gap:1.35rem;margin-left:auto;align-items:center}
.nav a{text-decoration:none;font-size:.93rem;font-weight:500;color:var(--inkt-2);padding:.3rem 0;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:var(--brons);transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--inkt)}

.knop{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:999px;padding:.72rem 1.35rem;font-family:'Tekst',sans-serif;font-weight:700;font-size:.93rem;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform .2s ease,box-shadow .25s ease,background .25s ease}
.knop-vol{background:var(--inkt);color:var(--papier);box-shadow:0 10px 22px -14px rgba(62,39,23,.8)}
.knop-vol:hover{transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(62,39,23,.75)}
.knop-open{border-color:var(--brons);color:var(--inkt);background:transparent}
.knop-open:hover{background:rgba(169,121,60,.1);transform:translateY(-2px)}
.knop-licht{background:var(--brons-tekst);color:#fff}
.knop-licht:hover{transform:translateY(-2px);background:#6f4a1e}

.hamburger{display:none;margin-left:auto;width:46px;height:42px;border:1.5px solid var(--brons-flauw);border-radius:12px;background:transparent;position:relative;cursor:pointer}
.hamburger i,.hamburger::before,.hamburger::after{content:"";position:absolute;left:11px;right:11px;height:1.8px;background:var(--inkt);transition:.28s ease}
.hamburger i{top:19.5px}
.hamburger::before{top:13px}
.hamburger::after{top:26px}
.hamburger[aria-expanded="true"] i{opacity:0}
.hamburger[aria-expanded="true"]::before{top:19.5px;transform:rotate(45deg)}
.hamburger[aria-expanded="true"]::after{top:19.5px;transform:rotate(-45deg)}

/* mobiel paneel — sibling BUITEN de kop (backdrop-filter-valkuil) */
/* top wordt door dp.js op de onderkant van de kop gezet — de USP-band mag
   dus rustig over twee regels vallen zonder dat het paneel scheef hangt */
.paneel{display:none;position:fixed;inset:auto 0 0 0;top:98px;z-index:59;background:var(--papier);border-top:1px solid var(--brons-flauw);padding:1.3rem 1.3rem 2rem;overflow-y:auto;flex-direction:column;gap:.15rem}
.paneel.open{display:flex}
.paneel a{text-decoration:none;font-family:'Kop',serif;font-size:1.5rem;font-weight:600;padding:.62rem 0;border-bottom:1px solid rgba(169,121,60,.18)}
.paneel .knop{font-family:'Tekst',sans-serif;font-size:.95rem;border-bottom:0}
.paneel-voet{margin-top:1.3rem;font-size:.86rem;color:var(--inkt-2);line-height:1.6}

/* ============================================================
   HERO — de bakplaat: dingen liggen op het raster
   ============================================================ */
.hero{position:relative;overflow:hidden;padding:clamp(2.6rem,5vw,4.6rem) 0 clamp(3rem,5vw,4.8rem);
  background:
    radial-gradient(120% 80% at 78% 8%, rgba(200,155,93,.16), transparent 62%),
    radial-gradient(90% 70% at 8% 92%, rgba(143,163,104,.13), transparent 60%),
    var(--papier);
}
.hero-raster{position:absolute;inset:-80px -40px;pointer-events:none;
  -webkit-mask-image:radial-gradient(85% 75% at 62% 45%, #000 30%, transparent 78%);
  mask-image:radial-gradient(85% 75% at 62% 45%, #000 30%, transparent 78%);
  animation:raster-in 1.5s cubic-bezier(.22,.8,.28,1) both}
@keyframes raster-in{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:none}}

.hero-in{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(1.8rem,4vw,4rem);align-items:center}

.oog{display:inline-flex;align-items:center;gap:.6rem;font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--brons-tekst);font-weight:700;margin:0 0 1.05rem}
.oog::before{content:"";width:26px;height:1.5px;background:var(--brons);display:block}

.hero h1{margin-bottom:1.1rem;max-width:11ch}
.hero h1 em{display:block;color:var(--brons);font-weight:600}
.leid{font-size:clamp(1.04rem,1.25vw,1.16rem);color:var(--inkt-2);max-width:44ch;margin-bottom:1.5rem}
.knoppen{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:1.9rem}

.hero-feiten{list-style:none;display:flex;flex-wrap:wrap;gap:.55rem 1.5rem;margin:0;padding:1.15rem 0 0;border-top:1px solid var(--brons-flauw)}
.hero-feiten li{display:flex;align-items:center;gap:.5rem;font-size:.87rem;color:var(--inkt-2)}
.hero-feiten svg{flex:0 0 auto;color:var(--brons-tekst)}

/* het beeld: een tegel en een schijf op het raster */
.hero-beeld{position:relative;justify-self:center;width:100%;max-width:470px;aspect-ratio:4/4.55}
.hero-tegel{position:absolute;inset:0 0 8% 12%;width:auto;height:92%;object-fit:cover;border-radius:var(--rond);
  box-shadow:var(--schaduw);border:5px solid var(--wit);
  animation:tegel-in 1.05s cubic-bezier(.22,.8,.28,1) .12s both}
@keyframes tegel-in{from{opacity:0;transform:translateY(26px) rotate(-1.2deg)}to{opacity:1;transform:none}}

.hero-schijf{position:absolute;left:-2%;bottom:-1%;width:47%;height:auto;border-radius:50%;
  box-shadow:0 20px 40px -18px rgba(62,39,23,.55);
  animation:schijf-in 1.05s cubic-bezier(.22,.8,.28,1) .34s both, zweef 7s ease-in-out 1.6s infinite}
@keyframes schijf-in{from{opacity:0;transform:translateY(30px) scale(.9)}to{opacity:1;transform:none}}
@keyframes zweef{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* de bij ligt als sticker op de plaat — met een eigen crème schijfje,
   net als de ronde sticker op haar echte dozen */
.hero-zegel{position:absolute;right:-4%;top:-2%;width:104px;height:104px;color:var(--brons);
  background:var(--wit);border-radius:50%;padding:9px;box-shadow:var(--schaduw-zacht);
  animation:zegel-in .9s ease .6s both}
@keyframes zegel-in{from{opacity:0;transform:rotate(-14deg) scale(.85)}to{opacity:1;transform:none}}

.hero-label{position:absolute;left:52%;bottom:-3%;background:var(--wit);border:1px solid var(--brons-flauw);
  border-radius:999px;padding:.42rem .95rem;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--inkt-2);box-shadow:var(--schaduw-zacht);white-space:nowrap;
  animation:zegel-in .8s ease .8s both}

/* ============================================================
   SECTIES
   ============================================================ */
section{position:relative}
.blok{padding:clamp(3.4rem,6vw,6rem) 0}
.blok-papier{background:var(--papier-2)}
.blok-diep{background:var(--diep);color:#EFE3CE}
.blok-diep h2,.blok-diep h3{color:#F6EEDD}
.blok-diep p{color:#D8C9AF}
.blok-diep em{color:var(--brons-licht)}

.sectie-kop{max-width:60ch;margin-bottom:clamp(1.9rem,3vw,2.9rem)}
.sectie-kop.mid{margin-inline:auto;text-align:center}
.sectie-kop p{color:var(--inkt-2);margin-top:.85rem;font-size:1.06rem}
.blok-diep .sectie-kop p{color:#D0BFA2}
.label{font-size:.73rem;letter-spacing:.24em;text-transform:uppercase;color:var(--brons-tekst);font-weight:700;margin:0 0 .75rem}
.blok-diep .label{color:var(--brons-licht)}

/* ---- ZO WERKT HET: drie stappen (leert het bakdag-model) ---- */
.stappen{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.8rem);position:relative}
.stap{background:var(--wit);border:1px solid var(--brons-flauw);border-radius:var(--rond);padding:1.7rem 1.5rem 1.5rem;position:relative;box-shadow:var(--schaduw-zacht)}
/* --brons-tekst, niet --brons: wit op #A9793C haalt 3,83:1 en dat is te weinig
   voor kleine tekst. Op #875C26 is het 5,85:1, en het blijft dezelfde familie. */
/* --brons-tekst, niet --brons: wit op #A9793C haalt 3,83:1 en dat is te weinig
   voor kleine tekst. Op #875C26 is het 5,85:1, en het blijft dezelfde familie. */
.stap-nr{position:absolute;top:-17px;left:1.5rem;width:36px;height:36px;border-radius:50%;background:var(--brons-tekst);color:#fff;
  display:grid;place-items:center;font-family:'Kop',serif;font-weight:700;font-size:1.02rem}
.stap h3{margin-bottom:.5rem;font-size:1.22rem}
.stap p{color:var(--inkt-2);font-size:.97rem;margin:0}

/* ---- DE PLATEN: categoriekaarten ---- */
.platen{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,1.8vw,1.7rem)}
.plaat{position:relative;display:flex;flex-direction:column;text-decoration:none;border-radius:var(--rond);overflow:hidden;background:var(--wit);
  border:1px solid var(--brons-flauw);box-shadow:var(--schaduw-zacht);transition:transform .3s ease,box-shadow .3s ease}
.plaat:hover{transform:translateY(-5px);box-shadow:var(--schaduw)}
.plaat-beeld{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--papier-3)}
.plaat-beeld img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,.8,.28,1)}
.plaat:hover .plaat-beeld img{transform:scale(1.045)}
.plaat-tekst{padding:1.15rem 1.3rem 1.35rem;display:flex;flex-direction:column;flex:1}
.plaat-tekst h3{font-size:1.32rem;margin-bottom:.35rem}
.plaat-tekst p{font-size:.93rem;color:var(--inkt-2);margin:0}
.plaat-lees{margin-top:1rem;font-size:.83rem;font-weight:700;letter-spacing:.06em;color:var(--brons-tekst);display:inline-flex;gap:.35rem;align-items:center}
.plaat-lees span{transition:transform .25s ease}
.plaat:hover .plaat-lees span{transform:translateX(3px)}
.plaat-smaken{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.85rem}
.smaak{font-size:.72rem;letter-spacing:.06em;padding:.22rem .6rem;border-radius:999px;background:var(--papier-2);
  border:1px solid var(--brons-flauw);color:var(--inkt-2)}
.smaak-p{background:rgba(143,163,104,.16);border-color:rgba(143,163,104,.4)}
.smaak-f{background:rgba(190,94,120,.13);border-color:rgba(190,94,120,.35)}
.smaak-k{background:rgba(192,133,74,.15);border-color:rgba(192,133,74,.4)}

/* ---- SPOTLIGHT: twee kolommen beeld + tekst ---- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,3.5vw,3.6rem);align-items:center}
.duo-om{grid-template-columns:1fr 1fr}
.duo-beeld{position:relative}
.duo-beeld img{width:100%;border-radius:var(--rond);box-shadow:var(--schaduw)}
/* een zegel op een foto MET onderschrift moet aan de foto hangen, niet aan het
   hele blok — anders valt het over de tekst zodra die er staat */
.beeldvlak{position:relative;display:block}
/* het zegel krijgt een eigen crème schijf, anders verdwijnt het brons in de foto */
.duo-beeld .stempel{position:absolute;right:-16px;bottom:-16px;width:104px;height:104px;color:var(--brons);
  background:var(--wit);border-radius:50%;padding:7px;box-shadow:var(--schaduw-zacht)}
.blok-diep .duo-beeld .stempel{background:#F3E9D6}
.feitkaart{background:var(--wit);border:1px solid var(--brons-flauw);border-radius:14px;padding:1rem 1.2rem;margin-top:1.3rem;box-shadow:var(--schaduw-zacht)}
.feitkaart p{margin:0;font-size:.94rem;color:var(--inkt-2)}
.feitkaart b{color:var(--inkt)}

/* ---------- veelgestelde vragen ----------
   Een <details> zonder eigen opmaak krijgt van de browser een zwart driehoekje.
   Dat was het enige plekje op de site waar je aan het element kon zien dat het
   van de browser kwam en niet van hier. Nu een bronzen pijltje dat meedraait. */
.vraag{margin-top:0}
/* De summary is het enige wat op een tik reageert; zonder eigen padding was
   die strook bij korte vragen maar 27,7px hoog. De negatieve marge houdt de
   kaart even groot als eerst. */
.vraag summary{cursor:pointer;font-weight:700;color:var(--inkt);list-style:none;
  display:flex;align-items:flex-start;gap:.75rem;padding:.55rem 0;margin:-.55rem 0}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary::after{content:"";flex:0 0 auto;width:8px;height:8px;margin:.34em 0 0 auto;
  border-right:1.7px solid var(--brons);border-bottom:1.7px solid var(--brons);
  transform:rotate(45deg);transition:transform .18s ease}
.vraag[open] summary::after{transform:rotate(-135deg);margin-top:.62em}
.vraag summary:focus-visible{outline:2px solid var(--brons);outline-offset:4px;border-radius:6px}
.vraag > p{margin-top:.7rem}
/* De vragen stonden in één smalle kolom met het halve scherm ernaast leeg —
   hetzelfde patroon dat op de paginakoppen al fout was. Vanaf 900px twee
   kolommen; align-items:start houdt de rijen los als er één opengeklapt wordt. */
.vragen{display:grid;gap:1rem;max-width:74ch}
@media (min-width:900px){.vragen{grid-template-columns:1fr 1fr;max-width:none;align-items:start}}

.lijstje{list-style:none;padding:0;margin:1.2rem 0 1.6rem;display:grid;gap:.6rem}
.lijstje li{display:flex;gap:.7rem;align-items:flex-start;font-size:1rem;color:var(--inkt-2)}
.lijstje svg{flex:0 0 auto;margin-top:.42rem;color:var(--brons)}

/* ---- HET MAKEN: rij procesfoto's die doorschuift ---- */
.rij-wrap{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.rij{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.4rem .2rem 1.2rem;scrollbar-width:none;-ms-overflow-style:none}
.rij::-webkit-scrollbar{display:none}
.rij figure{margin:0;flex:0 0 clamp(220px,26vw,300px);scroll-snap-align:center;position:relative}
.rij img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:14px;box-shadow:var(--schaduw-zacht)}
.rij figcaption{margin-top:.7rem;font-size:.86rem;color:var(--inkt-2);display:flex;align-items:flex-start;gap:.45rem;line-height:1.45}
.rij figcaption svg{flex:0 0 auto;margin-top:.28rem;color:var(--brons-licht)}
.blok-diep .rij figcaption{color:#CDBB9D}
.rij figcaption b{color:var(--inkt);font-weight:700}
.blok-diep .rij figcaption b{color:#F2E7D3}
.rij-hint{font-size:.8rem;color:var(--inkt-3);letter-spacing:.1em;text-transform:uppercase;margin-top:.2rem}

/* ---- DE DOOS ---- */
.doos-blok{background:linear-gradient(180deg,var(--papier-2),var(--papier))}

/* ---- BESTELBAND ---- */
.bestel{position:relative;overflow:hidden}
.bestel .raster{position:absolute;inset:0;--lijn:rgba(200,155,93,.14);pointer-events:none}
.bestel-in{position:relative;text-align:center;max-width:56ch;margin-inline:auto}
.bestel .knoppen{justify-content:center;margin-top:1.6rem;margin-bottom:0}

/* ---- VOET ---- */
.voet{background:var(--diep);color:#CDBB9D;padding:clamp(2.6rem,4vw,3.6rem) 0 1.8rem;font-size:.94rem}
.voet-rij{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
.voet h3{font-family:'Kop',serif;color:#F3E9D6;font-size:1.05rem;margin-bottom:.8rem;font-weight:600}
.voet a{color:#CDBB9D;text-decoration:none}
/* De links in de voet waren 18px hoog met 14px ertussen — op een telefoon te
   klein om te raken. Eigen tikruimte, zonder dat de voet noemenswaardig groeit. */
.voet a:hover{color:var(--brons-licht);text-decoration:underline}
.voet ul{list-style:none;padding:0;margin:0;display:grid;gap:0}
.voet ul a{display:inline-block;padding:.5rem 0}
.voet-merk{display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem}
.voet-merk svg{color:var(--brons-licht);width:44px;height:44px}
.voet-merk b{font-family:'Kop',serif;font-size:1.2rem;color:#F6EEDD;font-weight:600;display:block;line-height:1.1}
.voet-merk span{font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:#A08A6B}
.voet-slot{margin-top:2.2rem;padding-top:1.2rem;border-top:1px solid rgba(200,155,93,.22);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.83rem;color:#9C8768}

/* ============================================================
   PAGINA-KOP (binnenpagina's)
   ============================================================ */
/* ---------- de ladder: de bereiding, stap voor stap ----------
   Zes stappen die om en om links/rechts staan. Bewust geen slider: er zijn
   maar zes beelden en die passen op de pagina — een slider zou een knop zijn
   waar je nergens heen kunt. De vaste 4:3 met object-fit houdt elke stap even
   hoog, ongeacht of de bronfoto staand of liggend is. */
.ladder{display:grid;gap:clamp(2.2rem,4.5vw,3.8rem);margin-top:clamp(2rem,4vw,3rem)}
.ladder-stap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3.4vw,3rem);align-items:center}
.ladder-stap:nth-child(even) .ladder-beeld{order:2}
@media (max-width:820px){
  .ladder-stap{grid-template-columns:1fr;gap:1.2rem}
  .ladder-stap:nth-child(even) .ladder-beeld{order:0}
}
.ladder-beeld img{width:100%;display:block;border-radius:var(--rond);box-shadow:var(--schaduw);
  aspect-ratio:4/3;object-fit:cover}
.ladder-woord{position:relative}
.ladder-nr{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:50%;background:var(--brons-tekst);color:#fff;font-family:'Kop',Georgia,serif;
  font-size:1.05rem;font-weight:700;margin-bottom:.8rem;box-shadow:var(--schaduw-zacht)}
.ladder-woord h3{font-size:clamp(1.35rem,2.6vw,1.85rem);margin:0 0 .7rem}
.ladder-woord p{color:var(--inkt-2);margin:0 0 .8rem;max-width:52ch}
.ladder-woord p:last-child{margin-bottom:0}

/* ---------- de werkwijze-sectie op de homepage ----------
   Drie stappen met een foto erboven: beslag, handwerk, doos. Niet dezelfde
   kaartvorm als "in drie stappen" op de bestelpagina — daar gaat het over de
   week, hier over het werk zelf, en twee gelijke buren zijn er al genoeg. */
.ww-rij{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2.4vw,2rem);margin-top:2rem}
@media (max-width:900px){.ww-rij{grid-template-columns:1fr;gap:1.6rem}}
.ww-stap{background:var(--wit);border:1px solid var(--brons-flauw);border-radius:var(--rond);
  overflow:hidden;box-shadow:var(--schaduw-zacht);display:flex;flex-direction:column}
.ww-stap img{width:100%;height:clamp(180px,20vw,240px);object-fit:cover;display:block}
.ww-stap h3{font-size:1.18rem;margin:1.1rem 1.2rem .45rem}
.ww-stap p{margin:0 1.2rem 1.3rem;color:var(--inkt-2);font-size:.96rem}

/* ---------- over mij: één kaart in plaats van los beeld naast tekst ---------- */
.over-kaart{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.6rem,3.5vw,3.4rem);
  align-items:center;background:var(--wit);border:1px solid var(--brons-flauw);
  border-radius:var(--rond);box-shadow:var(--schaduw);padding:clamp(1.4rem,3vw,2.6rem)}
@media (max-width:860px){.over-kaart{grid-template-columns:1fr}}
.over-beeld img{width:100%;border-radius:14px;display:block}
.over-feiten{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:.9rem}
@media (min-width:560px){.over-feiten{grid-template-columns:repeat(3,1fr);gap:1.1rem}}
.over-feiten li{display:flex;gap:.6rem;align-items:flex-start;color:var(--inkt-2)}
.over-feiten li svg{flex:0 0 auto;margin-top:.22rem;color:var(--brons)}
.over-feiten b{display:block;color:var(--inkt);font-size:.95rem}
.over-feiten span{font-size:.85rem;line-height:1.4}

/* vier stappen naast elkaar op de werkwijze-pagina (drie is de standaard) */
@media (min-width:1000px){.stappen-vier{grid-template-columns:repeat(4,1fr)}}

/* ---------- DE BESTELKOP: de afteller ís de kop ----------
   Op /bestellen/ is er maar één vraag: hoeveel tijd heb ik nog. Die hoort
   bovenaan en groot, niet halverwege in een alinea. De vier vakken zijn
   dezelfde crème kaartjes als de rest van de site — geen los digitaal blokje
   dat uit een ander ontwerp lijkt te komen. */
.afterkop{position:relative;overflow:hidden;display:flex;align-items:center;
  /* De afteller ís de pagina; hij hoort het eerste scherm te vullen. Met alleen
     padding bleef er onder de knoppen een strook papier over en las de kop als
     een half gevulde sectie. svh (niet vh) omdat de adresbalk op een telefoon
     anders meetelt en de kop dan te hoog wordt. */
  padding:clamp(2.4rem,5vw,4rem) 0;
  background:radial-gradient(100% 90% at 50% 0%, rgba(200,155,93,.2), transparent 64%),var(--papier)}
.afterkop .raster{position:absolute;inset:0;--lijn:rgba(169,121,60,.13);pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}
/* GEEN width:100%: .maat levert zelf width:min(--maat, 100% - 2.6rem). Met
   width:100% erbij liep de kop op een telefoon tot 8px van de schermrand,
   terwijl alles eronder 20,8px aanhield. */
.afterkop-in{position:relative;text-align:center;max-width:70ch;margin-inline:auto}
.afterkop .label{font-size:.82rem;letter-spacing:.2em}
.afterkop h1{font-size:clamp(2.4rem,6.6vw,4.6rem);margin:.5rem 0 0;line-height:1.02}
.afterkop .leid{margin:1.8rem auto 0;max-width:56ch;font-size:clamp(1rem,1.4vw,1.16rem)}
.afterkop .knoppen{justify-content:center;margin-top:2rem}
/* De minimumhoogte geldt alleen op een breed scherm. Op een telefoon vult de
   kop zichzelf al; dwing je hem daar op 74svh, dan staat er onder de knoppen
   een strook leeg papier voordat de uitleg begint. */
@media (min-width:700px){
  .afterkop{min-height:clamp(460px,74svh,820px)}
}

.afteller{display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(.5rem,1.5vw,1.1rem);margin:clamp(1.8rem,3.4vw,2.6rem) 0 0}
.afteller-vak{background:var(--wit);border:1px solid var(--brons-flauw);border-radius:20px;
  box-shadow:var(--schaduw);padding:clamp(.9rem,1.8vw,1.4rem) clamp(.7rem,2.2vw,1.7rem);
  min-width:clamp(80px,19vw,148px)}
.afteller-vak b{display:block;font-family:'Kop',Georgia,serif;font-weight:700;
  font-size:clamp(2.3rem,7vw,4.2rem);line-height:1;color:var(--inkt);
  font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.afteller-vak span{display:block;margin-top:.5rem;font-size:.76rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brons-tekst)}
/* afgelopen: de teller mag niet op 0 blijven hangen alsof er niets gebeurt */
.afteller.is-om .afteller-vak b{color:var(--brons-tekst)}

.pagkop{position:relative;overflow:hidden;padding:clamp(2.4rem,4.5vw,3.8rem) 0 clamp(2rem,3.5vw,3rem);
  background:radial-gradient(100% 90% at 20% 10%, rgba(200,155,93,.15), transparent 60%),var(--papier)}
.pagkop .raster{position:absolute;inset:0;--lijn:rgba(169,121,60,.13);pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}
.pagkop-in{position:relative;max-width:62ch}
/* Gecentreerde paginakop zonder foto. Op /assortiment/ zijn de drie
   categoriekaarten zelf het beeld; een losse foto ernaast zet iets in de
   etalage dat bij géén van de drie hoort en duwt de kaarten omlaag. */
/* Geen 64ch hier: die maat is voor leestekst, en met een kop van 70px erin
   brak "Alles wat er wordt" in drieën. De kop bepaalt zelf zijn breedte, de
   tekst eronder houdt wel een leesbare maat. */
.pagkop--mid .pagkop-in{max-width:none;margin-inline:auto;text-align:center}
/* .pagkop-woord houdt zelf ook nog een leesmaat aan (56ch ≈ 450px). Dat is
   goed voor een kop mét fotopaneel ernaast, maar hier is de titel het beeld —
   met die grens brak "Alles wat er wordt" op een breed scherm alsnog in drieën. */
.pagkop--mid .pagkop-woord{max-width:none}
.pagkop--mid .leid{max-width:60ch}
/* Twee regels, altijd: "Alles wat er wordt" / "gebakken". Als de <em> gewoon
   doorloopt breekt hij op brede schermen ergens midden in de zin af en op
   smalle in drieën — dan is de kop elke keer een andere vorm. */
.pagkop--mid h1 em{display:block}
.pagkop--mid h1{font-size:clamp(2.05rem,6vw,4.6rem);line-height:1.02}
.pagkop--mid h1 em{margin-top:.06em}
/* Een kop met inhoud eronder mag niet het hele scherm vullen: de kaarten zijn
   het antwoord op de titel en horen in hetzelfde beeld te vallen. */
/* Ruimer dan de gewone paginakop: de titel is hier het beeld, dus die mag
   groot staan met lucht eromheen. De kaarten blijven wel in hetzelfde scherm. */
.pagkop--extra{padding:clamp(2.4rem,4.6vw,4rem) 0 clamp(2.4rem,4.4vw,3.6rem)}
.pagkop--extra .kruimel{margin-bottom:1.3rem}
.pagkop--extra .label{margin-bottom:.5rem}
.pagkop-extra{margin-top:clamp(2.2rem,4.4vw,3.4rem)}
.pagkop--mid .kruimel{justify-content:center}
.pagkop--mid .leid{margin-inline:auto}
.kruimel{font-size:.8rem;color:var(--inkt-3);margin-bottom:.9rem}
.kruimel a{text-decoration:none;color:var(--inkt-2)}
.kruimel a:hover{text-decoration:underline}

/* ============================================================
   PRODUCTGRID (assortiment)
   ============================================================ */
.waren{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,1.8vw,1.6rem)}
.waar{background:var(--wit);border:1px solid var(--brons-flauw);border-radius:var(--rond);overflow:hidden;box-shadow:var(--schaduw-zacht);display:flex;flex-direction:column}
.waar img{width:100%;aspect-ratio:4/3;object-fit:cover}
.waar-tekst{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;flex:1}
.waar-tekst h3{font-size:1.18rem;margin-bottom:.4rem}
.waar-tekst p{font-size:.93rem;color:var(--inkt-2);margin:0 0 .8rem}
.waar .plaat-smaken{margin-top:auto}

/* ============================================================
   REVEALS
   ============================================================ */
html.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.8,.28,1)}
html.js [data-reveal].in{opacity:1;transform:none}
html.js [data-reveal][data-reveal="2"]{transition-delay:.1s}
html.js [data-reveal][data-reveal="3"]{transition-delay:.2s}

/* ============================================================
   MOBIEL
   ============================================================ */
@media (max-width:1000px){
  .hero-in{grid-template-columns:1fr;gap:2.4rem}
  .hero-beeld{max-width:400px;order:-1}
  .duo,.duo-om{grid-template-columns:1fr;gap:2rem}
  .platen,.waren{grid-template-columns:repeat(2,1fr)}
  .voet-rij{grid-template-columns:1fr 1fr}
}
@media (max-width:840px){
  .nav,.kop-rij>.knop{display:none}
  .hamburger{display:block}
  .stappen{grid-template-columns:1fr;gap:1.5rem}
  /* --brons-tekst, niet --brons: wit op #A9793C haalt 3,83:1 en dat is te weinig
   voor kleine tekst. Op #875C26 is het 5,85:1, en het blijft dezelfde familie. */
/* --brons-tekst, niet --brons: wit op #A9793C haalt 3,83:1 en dat is te weinig
   voor kleine tekst. Op #875C26 is het 5,85:1, en het blijft dezelfde familie. */
.stap-nr{top:-15px}
}
@media (max-width:620px){
  body{font-size:16.5px}
  .platen,.waren{grid-template-columns:1fr}
  .voet-rij{grid-template-columns:1fr;gap:1.7rem}
  .hero{padding-top:1.9rem}
  .hero-beeld{max-width:none;aspect-ratio:4/4.35}
  .hero-tegel{inset:0 0 9% 14%}
  .hero-zegel{width:78px;height:78px;right:0}
  .hero-label{left:auto;right:2%;bottom:-4%;font-size:.68rem}
  .band-usp .maat{gap:.5rem 1.1rem;font-size:.7rem}
  .duo-beeld .stempel{width:70px;height:70px;right:-6px;bottom:-10px}
  .voet-slot{flex-direction:column;gap:.5rem}
  .rij figure{flex-basis:min(74vw,290px)}
}
@media (prefers-reduced-motion:reduce){
  .hero-raster,.hero-tegel,.hero-schijf,.hero-zegel,.hero-label{animation:none!important;opacity:1!important;transform:none!important}
  .vraag summary::after{transition:none}
}

/* ------------------------------------------------------------
   Links in lopende tekst krijgen een onderstreping — kleur alleen
   is niet genoeg (axe: link-in-text-block).
   ------------------------------------------------------------ */
p a:not(.knop), li a:not(.knop), .kruimel a, .voet-slot a, summary a{
  text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px;
  text-decoration-color:rgba(135,92,38,.55)}
.voet-slot a, .voet p a{text-decoration-color:rgba(200,155,93,.6)}
p a:not(.knop):hover, li a:not(.knop):hover{text-decoration-color:currentColor}
.voet ul a{text-decoration:none}
.voet ul a:hover{text-decoration:underline}

/* ------------------------------------------------------------
   HET MATERIAAL-ANKER: de donkere bakplaat waar de foto op ligt.
   Komt uit haar eigen foto's — de macarons en bokkepoten liggen daar
   op een zwarte plaat. LAT 1 vraagt een donker of goud anker; crème
   op crème is te dun.
   ------------------------------------------------------------ */
.hero-plaat{position:absolute;left:0;right:8%;top:7%;bottom:0;border-radius:22px;
  background:linear-gradient(155deg,#3A2617 0%,#241609 58%,#2E1D11 100%);
  box-shadow:inset 0 1px 0 rgba(230,200,150,.16), 0 26px 50px -26px rgba(40,25,12,.7);
  animation:plaat-in 1.15s cubic-bezier(.22,.8,.28,1) both}
.hero-plaat::after{content:"";position:absolute;inset:10px;border-radius:14px;
  border:1px solid rgba(200,155,93,.22)}
@keyframes plaat-in{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:none}}

/* breedbeeld — de sectie die met beeld opent in plaats van met een etiket */
.breedbeeld{margin:0 0 clamp(1.8rem,3vw,2.6rem);max-width:76%}
.breedbeeld img{width:100%;border-radius:var(--rond);box-shadow:var(--schaduw)}
.breedbeeld figcaption{margin-top:.8rem;font-size:.88rem;color:var(--inkt-2);display:flex;gap:.45rem;align-items:flex-start}
.breedbeeld figcaption svg{flex:0 0 auto;margin-top:.3rem;color:var(--brons)}
@media (max-width:1000px){.breedbeeld{max-width:100%}}

/* ------------------------------------------------------------
   PAGINAKOP MET BEELD
   Zonder dit stond op elke binnenpagina een kop in een smalle kolom met een
   groot leeg vlak ernaast — het patroon dat DE-LAT afkeurt. De foto hoort bij
   de pagina waar hij op staat (foto-per-plek), niet bij "er moest iets staan".
   ------------------------------------------------------------ */
.pagkop--beeld{padding-bottom:clamp(2.4rem,4vw,3.4rem)}
.pagkop--beeld .pagkop-in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.8rem,4vw,3.6rem);
  align-items:center;max-width:none}
/* De 56ch-leesmaat is voor de ALINEA, niet voor de kop: met die grens erop
   brak "Van ingrediënten tot in de doos" met het losse woordje "Van" op de
   eerste regel. De kop mag de hele kolom gebruiken. */
.pagkop-woord{max-width:none}
.pagkop-woord > p{max-width:56ch}
.pagkop--beeld h1{font-size:clamp(2.2rem,4.6vw,4.1rem)}
.pagkop-beeld{position:relative;justify-self:center;width:100%;max-width:420px}
/* Een staande foto naast een korte kop maakte het paneel 523px hoog tegen een
   tekstkolom van 239px — 240px lege crème ernaast (gemeten op /assortiment/koek/).
   Een dak op de hoogte houdt staand en liggend dichter bij elkaar, zonder de
   verhouding van de foto zelf aan te tasten (object-fit snijdt, rekt niet). */
.pagkop-beeld img{width:100%;border-radius:var(--rond);box-shadow:var(--schaduw);border:5px solid var(--wit);
  max-height:clamp(240px,27vw,380px);object-fit:cover}
.pagkop-zegel{position:absolute;right:-18px;bottom:-18px;width:96px;height:96px;color:var(--brons);
  background:var(--wit);border-radius:50%;padding:7px;box-shadow:var(--schaduw-zacht);display:block}
.pagkop-zegel .stempel{width:100%;height:100%;position:static}
@media (max-width:1000px){
  .pagkop--beeld .pagkop-in{grid-template-columns:1fr;gap:2rem}
  .pagkop-beeld{max-width:360px;justify-self:start}
}
@media (max-width:620px){
  .pagkop-beeld{max-width:none}
  .pagkop-zegel{width:70px;height:70px;right:-8px;bottom:-12px}
}