:root {
  --groen: #1B3B2E;
  --creme: #F9F7EE;
  --koper: #A1571F;
  --inkt: #2A2520;
  --zacht: #6B6155;
  --lijn: #E3DACA;
  --wit: #FFFFFF;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--creme);
  color: var(--inkt);
  font-family: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
picture { display: contents; }
a { color: var(--koper); }
.wrap { max-width: 820px; margin: 0 auto; padding-inline: 22px; }
.smal { max-width: 660px; }

h1, h2, h3 { font-family: "Fraunces", Georgia, "Times New Roman", serif; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: clamp(28px, 6.5vw, 50px); margin: 0 0 18px; }
h2 { font-size: clamp(24px, 4.2vw, 34px); margin: 52px 0 14px; }
h3 { font-size: 21px; margin: 34px 0 8px; }
p { margin: 0 0 18px; }
ul, ol { margin: 0 0 18px; padding-left: 24px; }
li { margin-bottom: 10px; }

/* ---------- kop van de site ---------- */
.balk { background: var(--groen); color: var(--creme); position: sticky; top: 0; z-index: 30; }
.balk .wrap { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; justify-content: space-between; padding-block: 14px; }
.balk a { color: var(--creme); text-decoration: none; }
.merk { font-family: "Fraunces", Georgia, serif; font-size: 19px; letter-spacing: .22em; text-transform: uppercase; }
/* De bestelknop in de kop: op elke bladzijde blijft er één plek waar je
   koopt, ook als iemand halverwege een lange verkooppagina twijfelt. */
.balk .bestelknop { background: #A1571F; color: #fff; border-radius: 7px; padding: 9px 18px;
  font-weight: 700; font-size: 16px; white-space: nowrap; }
.balk .bestelknop:hover { background: #8C4A18; text-decoration: none; }

/* ---------- prijs en knop ---------- */
.prijsregel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.prijs-nu { font-family: "Fraunces", Georgia, serif; font-size: 42px; font-weight: 600; }
.prijs-was { font-size: 20px; text-decoration: line-through; opacity: .72; }
.knop {
  display: inline-block; background: var(--koper); color: #fff; text-decoration: none;
  font-size: 20px; font-weight: 500; padding: 17px 34px; border-radius: 4px;
  border-bottom: 3px solid rgba(0,0,0,.22);
}
.knop:hover { background: #8C4A18; }
.knop.groot { display: block; text-align: center; }
.gerust { font-size: 16px; color: #D9D1C0; margin-top: 14px; }
.hero .gerust { margin-bottom: 44px; }
body:not(.donker) .gerust { color: var(--zacht); }

/* ---------- blokken ---------- */
.kader { background: var(--wit); border: 1px solid var(--lijn); padding: 26px 28px; margin: 0 0 22px; }
.kader h3 { margin-top: 0; }
.kader p:last-child, .kader ul:last-child { margin-bottom: 0; }
.zand { background: #F1E7D3; border-color: #E0D2B6; }

.vinkjes { list-style: none; padding: 0; }
.vinkjes li { padding-left: 34px; position: relative; margin-bottom: 14px; }
.vinkjes li::before { content: "\2713"; position: absolute; left: 0; top: -1px; color: var(--groen); font-size: 22px; font-weight: 700; }

/* ---------- galerij ---------- */
.galerij { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 0 0 22px; }
.galerij figure { margin: 0; }
.galerij img { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; }
.galerij figcaption { font-size: 15px; color: var(--zacht); padding-top: 7px; line-height: 1.45; }

/* ---------- tabel ---------- */
.tabelrol { overflow-x: auto; margin: 0 0 22px; border: 1px solid var(--lijn); background: var(--wit); }
table { border-collapse: collapse; width: 100%; min-width: 380px; }
th, td { text-align: left; padding: 12px 18px; border-bottom: 1px solid var(--lijn); }
thead th { background: #F4EEE1; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--zacht); font-weight: 600; }
tbody tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
tr.som td { font-weight: 700; background: #F4EEE1; }

/* ---------- boekenkaarten ---------- */
.kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; margin: 0 0 22px; }
.kaart { background: var(--wit); border: 1px solid var(--lijn); display: flex; flex-direction: column; }
.kaart img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
.kaart .body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.kaart h3 { margin: 0 0 8px; font-size: 20px; }
.kaart p { font-size: 16px; color: var(--zacht); flex: 1; }
.kaart .prijs { font-family: "Fraunces", Georgia, serif; font-size: 26px; margin-bottom: 6px; }
.kaart .actieregel { margin: 0 0 14px; font-size: 16px; color: #1B3B2E; }
.kaart .actieregel b { font-family: "Fraunces", Georgia, serif; font-size: 21px; }
.kaart .prijs:last-of-type { margin-bottom: 14px; }
.merkje { display: inline-block; align-self: flex-start; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--zacht); border: 1px solid var(--lijn); padding: 3px 10px; margin-bottom: 12px; }

/* ---------- vragen ---------- */
details { background: var(--wit); border: 1px solid var(--lijn); margin-bottom: 10px; }
summary { cursor: pointer; padding: 17px 22px; font-weight: 600; font-size: 18px; }
details[open] summary { border-bottom: 1px solid var(--lijn); }
details .inhoud { padding: 18px 22px 4px; }

/* ---------- voettekst ---------- */
footer { background: var(--groen); color: #D9D1C0; margin-top: 72px; padding-block: 40px 34px; font-size: 16px; }
footer a { color: var(--creme); }
footer .kolommen { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 26px 40px; margin-bottom: 28px; }
footer .voetkop { font-family: "Fraunces", Georgia, serif; color: var(--wit); font-size: 18px; margin: 0 0 10px; font-weight: 600; }
footer ul { list-style: none; padding: 0; margin: 0; }
footer li { margin-bottom: 7px; }
footer .fijn { border-top: 1px solid rgba(255,255,255,.18); padding-top: 20px; font-size: 15px; line-height: 1.65; }

.terug { display: inline-block; margin-bottom: 24px; font-size: 16px; }

/* ---------- afrekenpagina ----------
   Opgezet naar het voorbeeld van de kassapagina's die Leon aanwees
   (vip.piercingsworks.com, plugandpay): links een smalle kolom met een groot
   productbeeld en groene vinkjes, rechts één witte kaart met schaduw waarin
   alles staat wat de koper moet doen. Op een telefoon wordt dat één kolom met
   een vaste balk onderin. */
.kassapagina { background: #F1EEE6; }
.kassabreed { max-width: 1080px; }
.kassa { display: grid; gap: 26px; align-items: start; padding-block: 30px 40px; }
@media (min-width: 980px) {
  .kassa { grid-template-columns: 330px minmax(0, 1fr); gap: 44px; padding-block: 40px 60px; }
  .kassa .etalage { grid-column: 1; grid-row: 1; position: sticky; top: 26px; }
  .kassa .kassakaart { grid-column: 2; grid-row: 1; }
}

/* ---- linkerkolom ---- */
.etalage .plaat { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover;
  border-radius: 12px; box-shadow: 0 6px 28px rgba(42,37,32,.14); }
.etalage .pluspunten { margin: 22px 0 0; }
.etalage .waarom { margin-top: 22px; padding-top: 20px; border-top: 1px solid #DDD5C6; }
.etalage .waarom h3 { font-family: inherit; font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.etalage .waarom p { font-size: 15px; color: var(--zacht); line-height: 1.6; margin: 0; }
@media (max-width: 979px) {
  /* Op een telefoon eerst het formulier: het boek staat als klein beeld
     bovenin de kaart, de pluspunten komen onder het formulier. */
  .kassa .kassakaart { order: 1; }
  .kassa .etalage { order: 2; }
  .etalage .plaat { display: none; }
  .etalage .pluspunten { margin-top: 0; }
  .kassa { padding-block: 14px 30px; gap: 22px; }
}
/* Weinig afleiding bij het afrekenen: geen menu, wel het merk en een slotje. */
body:has(.kassapagina) .balk nav,
body:has(.kassapagina) .balk .bestelknop { display: none; }
body:has(.kassapagina) .balk .wrap::after { content: "Veilig afrekenen"; font-size: 15px; color: #D9D1C0; padding-left: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23D9D1C0' d='M4.5 7V5a3.5 3.5 0 0 1 7 0v2H12a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h.5Zm1.5 0h4V5a2 2 0 1 0-4 0v2Z'/%3E%3C/svg%3E") left center / 16px 16px no-repeat; }
.kassastappen { list-style: none; display: flex; gap: 10px; padding: 0; margin: 0 0 18px; width: 100%;
  font-size: 14px; color: var(--zacht); counter-reset: stap; }
.kassastappen li { margin: 0; counter-increment: stap; display: flex; align-items: center; gap: 6px;
  flex: 1 1 auto; white-space: nowrap; }
.kassastappen li:last-child { flex: 0 0 auto; }
.kassastappen li:not(:last-child)::after { content: ""; flex: 1 1 auto; height: 1px; min-width: 12px;
  background: #E2D8C3; margin-left: 4px; }
.kassastappen li::before { content: counter(stap); display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; background: #EDE4D2; color: var(--inkt); font-weight: 700; font-size: 13px; }
.kassastappen li.nu { color: var(--inkt); font-weight: 700; }
.kassastappen li.nu::before { background: #1B3B2E; color: var(--wit); }
.kassaproduct { display: flex; gap: 14px; align-items: center; margin-bottom: 4px; }
.kassaproduct img, .kassaproduct picture { display: none; }
.kassaproduct > div { min-width: 0; }
@media (max-width: 979px) {
  .kassaproduct img { display: block; width: 76px; height: 76px; flex: none; object-fit: cover; border-radius: 6px;
    box-shadow: 0 2px 10px rgba(42,37,32,.15); }
  .kassakaart .kassaproduct h1 { font-size: clamp(20px, 5.4vw, 26px); margin-bottom: 4px; }
  .kassakaart .kassaproduct .inleiding { font-size: 15px; line-height: 1.45; margin: 0; }
}

/* groene vinkjes, het handelsmerk van dit soort pagina's */
.pluspunten { list-style: none; padding: 0; margin: 0; }
.pluspunten li { position: relative; padding-left: 30px; margin-bottom: 11px;
  font-size: 16px; line-height: 1.45; }
.pluspunten li:last-child { margin-bottom: 0; }
.pluspunten li::before { content: ""; position: absolute; left: 0; top: 3px;
  width: 19px; height: 19px; border-radius: 50%; background: #E2EFE2; }
.pluspunten li::after { content: ""; position: absolute; left: 5.5px; top: 8px;
  width: 8px; height: 4px; border-left: 2px solid #1B3B2E; border-bottom: 2px solid #1B3B2E;
  transform: rotate(-45deg); }

/* ---- rechterkolom: alles in één kaart ---- */
.kassakaart { background: var(--wit); border-radius: 14px; padding: 34px 38px 32px;
  box-shadow: 0 4px 34px rgba(42,37,32,.09); }
@media (max-width: 560px) {
  .kassakaart { padding: 20px 16px 24px; border-radius: 12px; }
  .kassapagina .kassabreed { padding-inline: 12px; }
  .kassakaart .prijsregel { margin-bottom: 8px; padding-bottom: 18px; }
  .kassakaart .sectie { margin-top: 24px; }
}
.kassakaart h1 { font-size: clamp(25px, 3.4vw, 33px); margin: 0 0 12px; }
.kassakaart .inleiding { font-size: 17px; color: #554E44; margin: 0 0 6px; }

/* de prijsregel bovenin: wat het kost en wat je bespaart */
.prijsregel { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 0 0 22px; padding-bottom: 22px; border-bottom: 1px solid var(--lijn); }
.prijsregel .nu { font-family: "Fraunces", Georgia, serif; font-size: 38px; line-height: 1; }
.prijsregel .was { font-size: 18px; text-decoration: line-through; color: var(--zacht); }
.prijsregel .van { font-size: 18px; color: var(--zacht); }
.prijsregel .bespaar { background: #E2EFE2; color: #1B3B2E; font-size: 14px; font-weight: 700;
  border-radius: 20px; padding: 4px 12px; }

.sectie { font-family: "Karla", system-ui, sans-serif; font-size: 19px; font-weight: 700;
  letter-spacing: -.01em; margin: 30px 0 14px; line-height: 1.25; }
.kassakaart > .sectie:first-of-type { margin-top: 26px; }

/* ---- velden ---- */
.veld { margin: 0 0 14px; }
.veld label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.veld input { width: 100%; font-family: inherit; font-size: 17px; padding: 14px 16px;
  border: 1px solid #D5CCBB; border-radius: 8px; background: var(--wit); color: var(--inkt); }
.veld input::placeholder { color: #A49B8C; }
.veld input:focus-visible { outline: none; border-color: #1B3B2E;
  box-shadow: 0 0 0 3px rgba(46,90,62,.16); }
.veldfout { display: block; color: #A0451B; font-size: 15px; margin-top: 6px; }
.veldenrij { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
/* Lokaas voor botjes: een veld dat een mens nooit ziet en dus nooit invult. */
.honingpot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 540px) { .veldenrij { grid-template-columns: 1fr; } }

/* ---- betaalmethode ---- */
.methoden { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.methode { display: flex; align-items: center; gap: 12px; cursor: pointer;
  border: 1px solid #D5CCBB; border-radius: 8px; padding: 14px 16px; background: var(--wit); }
.methode input { width: 20px; height: 20px; flex: none; margin: 0; accent-color: #1B3B2E; }
.methode .naam { font-weight: 600; font-size: 16px; }
.methode svg { flex: none; color: var(--zacht); }
.betaallogo { flex: none; display: block; width: 44px; height: 33px; border-radius: 5px; box-shadow: 0 0 0 1px rgba(42,37,32,.08); }
.betaallogos { display: flex; justify-content: center; gap: 10px; margin: 12px 0 0; }
.methode:has(input:checked) { border-color: #1B3B2E; box-shadow: 0 0 0 1px #1B3B2E; background: #F6FAF5; }
.methode:has(input:checked) svg { color: #1B3B2E; }

/* ---- kassakoopjes ---- */
.koopje { position: relative; background: #F6FAF4; border: 2px dashed #8DB392; border-radius: 12px;
  margin-bottom: 14px; transition: background .15s, border-color .15s; }
.koopje:last-of-type { margin-bottom: 0; }
/* Het hele blok is het label van één echte checkbox. Die is onzichtbaar maar
   blijft focusbaar en bruikbaar met toetsenbord en schermlezer; de knop
   rechts is alleen de weergave van zijn toestand. */
.koopje-rij { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto;
  grid-template-areas: "beeld tekst tekst" "prijs prijs knop"; gap: 8px 14px; align-items: center;
  padding: 16px; cursor: pointer; }
.koopvink { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.koopje-rij img { grid-area: beeld; width: 84px; height: 84px; object-fit: cover; border-radius: 8px;
  box-shadow: 0 3px 10px rgba(42,37,32,.18); align-self: start; }
.koopje .tekst { grid-area: tekst; min-width: 0; }
.koopje b { display: block; font-family: "Fraunces", Georgia, serif; font-size: 19px; font-weight: 600;
  line-height: 1.2; color: var(--inkt); margin-bottom: 4px; }
.koopje .uitleg { display: block; font-size: 15px; color: #4A433A; line-height: 1.45; }
.koopje .koopprijs { grid-area: prijs; font-size: 16px; color: var(--zacht); white-space: nowrap; }
.koopje .koopprijs strong { color: var(--groen); font-size: 19px; }
.koopje .doeknop { grid-area: knop; justify-self: end; display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 16px; border-radius: 8px; border: 2px solid #1B3B2E; color: #1B3B2E;
  background: var(--wit); font-weight: 700; font-size: 16px; white-space: nowrap; }
.koopje .doeknop::after { content: "+ Toevoegen"; }
.koopje:hover .doeknop { background: #EAF3E8; }
.koopje:has(.koopvink:checked) { border-style: solid; border-color: #1B3B2E; background: #EAF3E8; }
.koopje:has(.koopvink:checked) .doeknop { background: #1B3B2E; color: var(--wit); }
.koopje:has(.koopvink:checked) .doeknop::after { content: "\2713  Toegevoegd"; }
.koopje:has(.koopvink:focus-visible) { outline: 3px solid #A1571F; outline-offset: 3px; }
.koopje:has(.koopvink:disabled) { opacity: .66; }
@media (max-width: 560px) {
  .koopje-rij { grid-template-columns: 72px minmax(0, 1fr) auto; padding: 14px; gap: 10px 12px; }
  .koopje-rij img { width: 72px; height: 72px; }
  .koopje b { font-size: 18px; }
  .koopje .uitleg { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .koopje .koopprijs { font-size: 15px; }
}
@media (max-width: 400px) {
  .koopje .koopprijs { white-space: normal; font-size: 14px; line-height: 1.3; min-width: 0; }
  .koopje .koopprijs s { white-space: nowrap; }
  .koopje .koopprijs strong { font-size: 17px; white-space: nowrap; }
  .koopje .doeknop { padding: 0 12px; font-size: 15px; }
}

/* ---- besteloverzicht ---- */
.bon { width: 100%; min-width: 0; border-collapse: collapse; }
.bon td { padding: 10px 0; border: none; font-size: 17px; border-bottom: 1px solid var(--lijn); }
.bon td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bon .totaalregel td { border-bottom: none; padding-top: 16px; font-weight: 700; }
.bon .totaalregel .num { font-family: "Fraunces", Georgia, serif; font-size: 30px;
  color: #1B3B2E; font-weight: 600; }
.bon .btwregel td { border-bottom: none; padding-top: 0; text-align: right; font-size: 13px; }
.bon .verzendregel td { font-size: 15px; color: var(--zacht); }
.bon .verzendregel .num { color: #1B3B2E; font-weight: 600; }

.akkoord { display: flex; gap: 13px; align-items: flex-start; cursor: pointer;
  margin: 20px 0 0; font-size: 15px; line-height: 1.5; }
.akkoord input { width: 24px; height: 24px; margin: 1px 0 0; flex: none; accent-color: #1B3B2E; }

.afrekenknop { display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin-top: 18px; border: none; border-radius: 9px; cursor: pointer;
  background: #A1571F; color: var(--wit); font-family: inherit; font-weight: 700;
  font-size: 20px; padding: 18px 22px; box-shadow: 0 3px 0 rgba(0,0,0,.16); }
.afrekenknop:hover { background: #8C4A18; }
.afrekenknop.knop-groen { background: #1B3B2E; }
.afrekenknop.knop-groen:hover { background: #12291F; }
.afrekenknop:disabled { background: #B3A796; cursor: not-allowed; box-shadow: none; }

.zekerheden { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; margin-top: 20px; }
@media (max-width: 560px) { .zekerheden { grid-template-columns: 1fr; } }
.zekerheden div { display: flex; gap: 11px; align-items: flex-start;
  font-size: 14px; color: var(--zacht); line-height: 1.45; }
.zekerheden svg { flex: none; margin-top: 1px; color: #1B3B2E; }
.zekerheden b { display: block; color: var(--inkt); font-size: 15px; }
.kleine-lettertjes { font-size: 14px; color: var(--zacht); text-align: center;
  margin: 18px 0 0; line-height: 1.5; }

/* ---- vaste balk onderin op een telefoon ---- */
.onderbalk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--wit); border-top: 1px solid var(--lijn);
  box-shadow: 0 -6px 22px rgba(42,37,32,.14);
  padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 14px; }
.onderbalk .bedrag { flex: none; }
.onderbalk .bedrag span { display: block; font-size: 14px; color: var(--zacht); line-height: 1.2; }
.onderbalk .bedrag b { font-family: "Fraunces", Georgia, serif; font-size: 24px; color: #1B3B2E; }
.onderbalk button { flex: 1; font-size: 18px; padding: 15px 18px; margin: 0; }
@media (min-width: 980px) { .onderbalk { display: none; } }
@media (max-width: 979px) {
  body.heeft-balk { padding-bottom: 88px; }
}

/* ==========================================================================
   Verkooppagina's: startpagina, boekenoverzicht, boekpagina's en recepten.
   Eigen klassenamen, zodat de afrekenpagina er niets van merkt.
   Ritme: secties 72px (telefoon 48px), rasters 16 tot 28px, beelden altijd
   met een vaste verhouding en object-fit: cover.
   ========================================================================== */
:root { --zand: #F1ECDD; --diepgroen: #142D23; --koperlicht: #C9B37A; --goud: #C9B37A; --donkergoud: #765A22; }
.breed { max-width: 1160px; margin: 0 auto; padding-inline: 22px; }
.blok { padding-block: 76px; }
.zandvlak { background: var(--zand); }
.witvlak { background: var(--wit); }
.groenvlak { background: var(--groen); color: #E6DFCE; }
.groenvlak h2, .groenvlak h3 { color: var(--wit); }
@media (max-width: 700px) {
  .breed { padding-inline: 18px; }
  .blok { padding-block: 50px; }
}
.blokkop { max-width: 700px; margin: 0 0 34px; }
.blokkop.midden { margin-inline: auto; text-align: center; }
.blokkop h2 { margin: 0 0 12px; }
.blokkop p { color: var(--zacht); margin: 0; font-size: 19px; }
.groenvlak .blokkop p { color: #D9D1C0; }
.bovenregel { display: block; font-size: 14px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--donkergoud); margin-bottom: 10px; }
.groenvlak .bovenregel { color: var(--koperlicht); }
.blok + footer, .slot + footer, .plakbalk + footer { margin-top: 0; }
footer .wrap { max-width: 1160px; }
h2 { text-wrap: balance; }
.stil { color: var(--zacht); }

/* ---- kop van de site met hamburgermenu ---- */
.balk .wrap { max-width: 1160px; flex-wrap: nowrap; }
.merk { display: inline-flex; align-items: center; line-height: 0; }
.merk img { height: 44px; width: auto; display: block; }
.voetlogo img { height: 56px; width: auto; }
footer .voetkop { color: var(--goud); }
@media (max-width: 899px) { .merk img { height: 36px; } }
@media (max-width: 370px) { .merk img { height: 30px; } }
.menu { display: flex; align-items: center; gap: 6px 24px; font-size: 16px; }
.menu a { color: var(--creme); text-decoration: none; }
.menu a:hover, .menu a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
.menu .menubestel { display: none; }
.menuknop { display: none; align-items: center; gap: 8px; background: transparent; color: var(--creme);
  border: 1px solid rgba(255,255,255,.35); border-radius: 8px; min-height: 44px; padding: 0 12px;
  font: 600 16px/1 "Karla", system-ui, sans-serif; cursor: pointer; }
.menuknop:focus-visible, .menu a:focus-visible, .knop:focus-visible, .bestelknop:focus-visible {
  outline: 3px solid var(--koperlicht); outline-offset: 2px; }
.streepjes, .streepjes::before, .streepjes::after { display: block; width: 20px; height: 2px;
  background: currentColor; border-radius: 2px; position: relative; transition: transform .2s, background .2s; }
.streepjes::before, .streepjes::after { content: ""; position: absolute; left: 0; }
.streepjes::before { top: -6px; }
.streepjes::after { top: 6px; }
.menuknop[aria-expanded="true"] .streepjes { background: transparent; }
.menuknop[aria-expanded="true"] .streepjes::before { transform: translateY(6px) rotate(45deg); }
.menuknop[aria-expanded="true"] .streepjes::after { transform: translateY(-6px) rotate(-45deg); }
.balk .bestelknop .lang { display: inline; }
@media (max-width: 899px) {
  .balk .wrap { padding-block: 8px; gap: 10px; }
  .merk { margin-right: auto; }
  .balk .bestelknop { order: 2; padding: 10px 12px; font-size: 15px; min-height: 44px; display: inline-flex; align-items: center; }
  .balk .bestelknop .lang { display: none; }
  html.js .menuknop { display: inline-flex; order: 3; }
  html.js .menu { display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0; background: var(--diepgroen);
    padding: 6px 18px 20px; box-shadow: 0 16px 30px rgba(0,0,0,.25); }
  html.js .balk.open .menu { display: flex; }
  html.js .menu a { font-size: 20px; padding: 14px 4px; border-bottom: 1px solid rgba(255,255,255,.12); }
  html.js .menu .menubestel { display: block; margin-top: 16px; text-align: center; border: 0;
    background: var(--koper); border-radius: 8px; font-weight: 700; }
  html:not(.js) .balk .wrap { flex-wrap: wrap; }
  html:not(.js) .menu { order: 3; width: 100%; flex-wrap: wrap; gap: 4px 18px; font-size: 15px; }
}
@media (max-width: 480px) {
  .menuknop .label { display: none; }
  .menuknop { padding: 0 11px; }
}
@media (max-width: 370px) {
  .balk .wrap { gap: 8px; }
  .balk .bestelknop { padding: 10px 10px; font-size: 14px; }
}
body:has(.kassapagina) .menu, body:has(.kassapagina) .menuknop,
body:has(.kassapagina) .balk .bestelknop { display: none !important; }

/* ---- prijs en knoppen ---- */
.prijsblok { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 0 18px; }
.prijsblok .nu { font-family: "Fraunces", Georgia, serif; font-size: 48px; font-weight: 600; line-height: 1; }
.prijsblok .was { font-size: 18px; }
.prijsblok .was s { opacity: .85; }
.prijsblok .bespaar { background: #E2EFE2; color: var(--groen); font-size: 15px; font-weight: 700;
  border-radius: 20px; padding: 3px 12px; white-space: nowrap; }
.knop.vol { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 58px;
  max-width: 440px; font-weight: 700; border-radius: 8px; text-align: center; padding: 14px 20px; line-height: 1.25;
  box-shadow: 0 6px 18px rgba(181,100,47,.28); }
.knop.licht { background: transparent; color: inherit; border: 2px solid currentColor; box-shadow: none; }
.geruststelling { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; }
.geruststelling li { margin: 0; padding-left: 22px; position: relative; }
.geruststelling li::before { content: "\2713"; position: absolute; left: 0; font-weight: 700; color: var(--groen); }
.feitjes { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.feitjes li { margin: 0; font-size: 15px; padding: 5px 12px; border-radius: 30px; background: #EDE4D2; color: var(--inkt); }

/* ---- hero: groot beeld, tekst ernaast of eroverheen ---- */
.hero { background: var(--groen); color: #E6DFCE; position: relative; overflow: hidden; }
.hero h1 { color: var(--wit); font-size: clamp(30px, 4.1vw, 52px); margin: 0 0 14px; }
.hero .belofte { font-size: clamp(18px, 2.2vw, 22px); color: #EDE6D6; max-width: 36ch; margin: 0 0 18px; line-height: 1.5; }
.hero .bovenregel { color: var(--koperlicht); }
.hero .prijsblok .nu { color: var(--wit); }
.hero .prijsblok .was { color: #D9D1C0; }
.hero .geruststelling { color: #D9D1C0; }
.hero .geruststelling li::before { color: #9CC5A1; }
.hero .feitjes li { background: rgba(255,255,255,.12); color: #EDE6D6; }
.hero-beeld { position: relative; }
.hero-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-tekst { position: relative; z-index: 1; }
.hero .knop.vol { max-width: 420px; }
@media (max-width: 899px) {
  .hero-beeld { height: min(44vh, 400px); min-height: 230px; }
  .hero-beeld img { object-position: 50% 62%; }
  .hero-beeld::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(27,59,46,0) 45%, rgba(27,59,46,.85) 85%, var(--groen) 100%); }
  .hero-tekst { margin-top: -64px; padding: 0 18px 34px; }
  .hero .bovenregel { display: none; }
  .hero .prijsblok .nu { font-size: 38px; }
  .hero .prijsblok { gap: 4px 10px; margin-bottom: 14px; }
  .hero .prijsblok .was { font-size: 16px; }
  .hero .feitjes { display: none; }
  .hero .knop.vol { font-size: 18px; }
  .hero .geruststelling { font-size: 14px; gap: 4px 14px; }
  .boekhero .hero-beeld { height: clamp(180px, 34vh, 330px); min-height: 0; }
  .boekhero .hero-beeld img { object-position: 50% 62%; }
  .boekhero .hero-beeld::after { background: linear-gradient(180deg, rgba(27,59,46,0) 30%, rgba(27,59,46,.9) 78%, var(--groen) 100%); }
  .boekhero .kruimel { display: none; }
  .boekhero .belofte { font-size: 17px; margin-bottom: 14px; }
  .boekhero h1 { font-size: clamp(28px, 7.4vw, 40px); }
}
@media (min-width: 900px) {
  .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(76vh, 700px); }
  .hero-beeld { order: 2; min-height: 100%; }
  .boekhero .hero-beeld img { position: absolute; inset: 0; }
  .hero-beeld::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, var(--groen) 0%, rgba(27,59,46,0) 22%); }
  .hero-tekst { align-self: center; padding: 64px 48px 64px max(22px, calc((100vw - 1160px) / 2 + 22px)); }
}

/* ---- kerncijfers ---- */
.cijfers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.cijfers li { margin: 0; text-align: center; padding: 26px 12px; border-radius: 12px; background: rgba(255,255,255,.07); }
.cijfers b { display: block; font-family: "Fraunces", Georgia, serif; font-size: clamp(40px, 6vw, 60px);
  line-height: 1; color: var(--wit); font-weight: 600; margin-bottom: 8px; }
.cijfers span { font-size: 16px; color: #D9D1C0; }
@media (max-width: 700px) { .cijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* ---- beeld en tekst om en om ---- */
.duo { display: grid; gap: 30px; align-items: center; }
.duo > * { min-width: 0; }
.duo h2 { margin-top: 0; }
.duo-beeld img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; border-radius: 14px;
  box-shadow: 0 18px 44px rgba(42,37,32,.16); }
.duo-beeld.liggend img { aspect-ratio: 16/10; }
@media (min-width: 900px) {
  .duo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; }
  .duo.omgekeerd .duo-beeld { order: 2; }
  .duo.omgekeerd { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}
@media (max-width: 899px) { .duo-beeld img { aspect-ratio: 4/3; } }
.pijnpunten { list-style: none; padding: 0; margin: 0 0 24px; }
.pijnpunten li { position: relative; padding: 14px 0 14px 44px; margin: 0; border-bottom: 1px solid var(--lijn); font-size: 18px; }
.pijnpunten li::before { content: "\00D7"; position: absolute; left: 0; top: 12px; width: 30px; height: 30px;
  border-radius: 50%; background: #F6E1D3; color: #9C4A1C; font-weight: 700; text-align: center; line-height: 30px; font-size: 20px; }
.vinklijst { list-style: none; padding: 0; margin: 0 0 8px; }
.vinklijst li { position: relative; padding: 10px 0 10px 44px; margin: 0; font-size: 18px; }
.vinklijst li::before { content: "\2713"; position: absolute; left: 0; top: 8px; width: 30px; height: 30px;
  border-radius: 50%; background: #E2EFE2; color: var(--groen); font-weight: 700; text-align: center; line-height: 30px; }
.groenvlak .vinklijst li::before { background: rgba(255,255,255,.14); color: #CFE6D2; }

/* ---- bladzijden uit het boek ---- */
.bladzijdenmock { margin: 0; }
.bladzijdenmock img { width: 100%; height: auto; aspect-ratio: 2/1; object-fit: cover; border-radius: 4px;
  box-shadow: 0 30px 60px rgba(0,0,0,.35), 0 2px 0 rgba(0,0,0,.08); background: #fff; }
.bladzijdenmock figcaption, .naslagmock figcaption { font-size: 15px; margin-top: 14px; color: inherit; opacity: .85; }
.naslagmock { margin: 0; }
.naslagmock img { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; border-radius: 4px;
  box-shadow: 0 24px 50px rgba(0,0,0,.25); transform: rotate(-1.5deg); background: #fff; }
.bladraster { display: grid; gap: 34px; align-items: center; }
@media (min-width: 900px) { .bladraster { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: 48px; } }

/* ---- tijdschema ---- */
.schema { list-style: none; margin: 0; padding: 0; position: relative; }
.schema li { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 16px; margin: 0; padding: 14px 0;
  border-bottom: 1px solid var(--lijn); }
.schema li:last-child { border-bottom: 0; }
.schema b { font-family: "Fraunces", Georgia, serif; font-size: 19px; color: var(--koper); font-weight: 600; }
.schema span { font-size: 17px; }
.schema li.hoogtepunt { background: #FBF3E8; border-radius: 8px; padding-inline: 12px; margin-inline: -12px; }
@media (max-width: 480px) { .schema li { grid-template-columns: 1fr; gap: 2px; } }

/* ---- receptfoto's ---- */
.uitgelicht-recept { display: grid; gap: 0; background: var(--wit); border-radius: 16px; overflow: hidden;
  box-shadow: 0 18px 48px rgba(42,37,32,.10); margin-bottom: 28px; }
.uitgelicht-recept img { width: 100%; height: 100%; aspect-ratio: 1/1; object-fit: cover; }
.uitgelicht-recept .tekst { padding: 28px 24px 30px; align-self: center; min-width: 0; }
.uitgelicht-recept h3 { font-size: clamp(26px, 3.2vw, 36px); margin: 0 0 12px; }
.uitgelicht-recept p { font-size: 18px; color: #4A433A; }
@media (min-width: 800px) {
  .uitgelicht-recept { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .uitgelicht-recept .tekst { padding: 48px 56px; }
}
.fotoraster { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.fotoraster.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .fotoraster, .fotoraster.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.fotoraster figure { margin: 0; min-width: 0; }
.fotoraster img { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; border-radius: 10px; background: #E9E0CF; }
.fotoraster figcaption { font-size: 16px; line-height: 1.35; padding-top: 10px; color: var(--inkt); font-weight: 500;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }

/* ---- wat erin staat ---- */
.hoofdstukken { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); list-style: none; padding: 0; margin: 0; }
.hoofdstukken li { margin: 0; background: var(--wit); border-radius: 12px; padding: 20px 20px 18px; border-top: 4px solid var(--groen);
  display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hoofdstukken .nr { font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--koper); }
.hoofdstukken .naam { font-family: "Fraunces", Georgia, serif; font-size: 21px; line-height: 1.2; }
.hoofdstukken .aantal { font-size: 15px; color: var(--zacht); margin-top: auto; padding-top: 6px; }
.hoofdstukken li.extra { border-top-color: var(--koper); background: #FBF3E8; }
@media (max-width: 560px) {
  .hoofdstukken { gap: 10px; }
  .hoofdstukken li { padding: 14px 16px; }
  .hoofdstukken .naam { font-size: 19px; }
}
.inhoudlijst { list-style: none; padding: 0; margin: 0; background: var(--wit); border: 1px solid var(--lijn); border-radius: 10px; }
.inhoudlijst li { display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding: 13px 20px; margin: 0; border-bottom: 1px solid var(--lijn); }
.inhoudlijst li:last-child { border-bottom: none; }
.inhoudlijst .aantal { flex: none; font-size: 15px; color: var(--zacht); }

/* ---- tegels ---- */
.tegels { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.tegel { background: var(--wit); border: 1px solid var(--lijn); border-radius: 12px; padding: 24px; min-width: 0; }
.tegel h3 { margin: 0 0 8px; font-size: 20px; }
.tegel p { margin: 0; font-size: 17px; color: var(--zacht); }
.tegel .nummer { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--groen); color: var(--wit); font-weight: 700; margin-bottom: 14px; }

/* ---- bonussen bij het afrekenen ---- */
.bonussen { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .bonussen { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
.bonus { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; background: var(--wit);
  border: 2px dashed #9DBBA0; border-radius: 14px; padding: 14px; color: inherit; text-decoration: none; }
.bonus > * { min-width: 0; }
.bonus b, .boekkaart .tekst { hyphens: manual; overflow-wrap: break-word; }
.bonus img { width: 112px; height: 112px; object-fit: cover; border-radius: 8px; }
.bonus b { display: block; font-family: "Fraunces", Georgia, serif; font-size: 19px; line-height: 1.2; font-weight: 600; margin-bottom: 6px; color: var(--inkt); }
.bonus .bonusprijs { font-size: 16px; color: var(--zacht); }
.bonus .bonusprijs strong { color: var(--groen); font-size: 19px; }
.bonusnoot { font-size: 16px; color: var(--zacht); margin: 18px 0 0; }

/* ---- prijsanker en actie ---- */
.aanbod { max-width: 760px; margin: 0 auto; background: var(--wit); border-radius: 18px; padding: 34px 26px;
  box-shadow: 0 24px 60px rgba(0,0,0,.22); color: var(--inkt); text-align: center; }
.aanbod h2 { color: var(--inkt); margin: 0 0 8px; }
.aanbod .prijsblok { justify-content: center; margin: 18px 0 20px; }
.aanbod .prijsblok .nu { color: var(--groen); font-size: 60px; }
.aanbod .prijsblok .was { color: var(--zacht); }
.aanbod .knop.vol { margin-inline: auto; }
.aanbod .geruststelling { justify-content: center; }
.zekerrij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 26px 0 0; text-align: left; }
.zekerrij div { background: #F6F1E7; border-radius: 10px; padding: 14px 14px 12px; font-size: 15px; color: var(--zacht); line-height: 1.45; }
.zekerrij b { display: block; color: var(--inkt); font-size: 16px; margin-bottom: 2px; }
@media (max-width: 700px) { .zekerrij { grid-template-columns: minmax(0, 1fr); } .aanbod { padding: 28px 18px; } .aanbod .prijsblok .nu { font-size: 48px; } }

/* ---- boekkaarten ---- */
.boekkaarten { display: grid; gap: 22px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .boekkaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.boekkaart { background: var(--wit); border: 1px solid var(--lijn); border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column; min-width: 0; color: inherit; text-decoration: none; transition: box-shadow .2s, transform .2s; }
.boekkaart:hover { box-shadow: 0 12px 30px rgba(42,37,32,.12); transform: translateY(-2px); }
.boekkaart img { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; }
.boekkaart .tekst { min-width: 0; padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.boekkaart h3 { font-size: 20px; margin: 0 0 8px; }
.boekkaart p { font-size: 16px; color: var(--zacht); margin: 0 0 14px; line-height: 1.5; }
.boekkaart .onderaan { margin-top: auto; font-size: 16px; }
.boekkaart .onderaan b { font-family: "Fraunces", Georgia, serif; font-size: 22px; color: var(--groen); font-weight: 600; }
.boekkaart .onderaan s { color: var(--zacht); margin-right: 4px; }
.boekkaart .onderaan .soort { display: block; font-size: 14px; color: var(--zacht); }
.boekkaart .meer { display: block; margin-top: 10px; color: var(--koper); font-weight: 700; }
@media (max-width: 560px) {
  .boekkaarten { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .boekkaart { flex-direction: row; align-items: center; }
  .boekkaart img { width: 104px; height: 104px; flex: none; aspect-ratio: 1/1; margin-left: 12px; border-radius: 8px; }
  .boekkaart .tekst { padding: 14px 16px; }
  .boekkaart h3 { font-size: 18px; }
  .boekkaart p { display: none; }
}
.uitgelicht { display: grid; background: var(--wit); border: 1px solid var(--lijn); border-radius: 14px; overflow: hidden; margin-bottom: 22px; }
.uitgelicht img { width: 100%; height: 100%; aspect-ratio: 1/1; object-fit: cover; }
.uitgelicht .tekst { padding: 26px 22px 28px; align-self: center; min-width: 0; }
.uitgelicht h2 { margin: 0 0 10px; }
.uitgelicht p { color: var(--zacht); }
@media (min-width: 760px) { .uitgelicht { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } .uitgelicht .tekst { padding: 40px 48px; } }

/* ---- breed sfeerbeeld als adempauze ---- */
.sfeerband { position: relative; min-height: 360px; display: grid; align-items: end; color: var(--wit); overflow: hidden; }
.sfeerband img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sfeerband::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(23,53,42,.85) 0%, rgba(23,53,42,0) 60%); }
.sfeerband .breed { position: relative; z-index: 1; padding-block: 40px; width: 100%; }
.sfeerband p { font-family: "Fraunces", Georgia, serif; font-size: clamp(24px, 3.4vw, 38px); line-height: 1.2; max-width: 24ch; margin: 0; text-wrap: balance; }
@media (min-width: 900px) { .sfeerband { min-height: 460px; } }

/* ---- vragen ---- */
.vragen { max-width: 800px; }
.vragen details { border-radius: 10px; overflow: hidden; }
.vragen summary { min-height: 56px; display: flex; align-items: center; }

/* ---- slotblok ---- */
.slot { background: var(--groen); color: var(--creme); }
.slot .breed { display: grid; gap: 28px; align-items: center; padding-block: 60px; }
.slot h2 { color: var(--wit); margin: 0 0 10px; }
.slot p { color: #D9D1C0; }
.slot img { width: 100%; max-width: 300px; height: auto; aspect-ratio: 1/1; object-fit: cover; border-radius: 10px; box-shadow: 0 16px 40px rgba(0,0,0,.3); }
.slot .prijsblok .nu { color: var(--wit); }
.slot .prijsblok .was { color: #D9D1C0; }
@media (min-width: 800px) { .slot .breed { grid-template-columns: 300px minmax(0, 1fr); gap: 60px; } }

/* ---- kruimelpad ---- */
.kruimel { font-size: 15px; margin: 0 0 14px; }
.kruimel a { color: #D9D1C0; }

/* ---- meelopende bestelbalk op een telefoon ---- */
.plakbalk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--wit);
  border-top: 1px solid var(--lijn); box-shadow: 0 -8px 24px rgba(42,37,32,.16);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); display: none; align-items: center; gap: 14px;
  transform: translateY(110%); transition: transform .25s ease; }
.plakbalk .bedrag { flex: none; line-height: 1.1; }
.plakbalk .bedrag s { display: block; font-size: 13px; color: var(--zacht); }
.plakbalk .bedrag b { font-family: "Fraunces", Georgia, serif; font-size: 26px; color: var(--groen); font-weight: 600; }
.plakbalk .knop { flex: 1; text-align: center; font-weight: 700; font-size: 18px; padding: 14px 12px; border-radius: 8px; min-height: 52px; }
@media (max-width: 899px) {
  html.js .plakbalk { display: flex; }
  html.js .plakbalk.zichtbaar { transform: translateY(0); }
  html.js body:has(.plakbalk) footer { padding-bottom: 110px; }
}

/* ---- ronde 3: merkpagina ---- */
.hero .bovenregel, .groenvlak .bovenregel, .aanbod .bovenregel { color: var(--goud); }
.aanbod .bovenregel { color: var(--donkergoud); }
.merkhero .hero-beeld picture { display: block; width: 100%; }
@media (max-width: 899px) {
  .merkhero .hero-beeld { height: auto; min-height: 0; }
  .merkhero .hero-beeld img { aspect-ratio: 900/660; height: auto; }
  .merkhero .hero-beeld::after { content: none; }
  .merkhero .hero-beeld { padding: 10px 8px 0; }
  .merkhero .hero-tekst { margin-top: -6px; }
  .merkhero .feitjes { display: flex; }
  .merkhero .feitjes li:nth-child(3) { display: none; }
  .merkhero h1 { font-size: clamp(28px, 7.6vw, 40px); }
  .merkhero .belofte { font-size: 17px; }
}
@media (min-width: 900px) {
  .merkhero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .merkhero .hero-beeld { display: flex; align-items: center; }
  .merkhero .hero-beeld img { object-fit: contain; height: auto; max-height: 600px; }
  .merkhero .hero-beeld { padding: 30px 22px 30px 0; }
  .merkhero .hero-beeld::after { content: none; }
}
.tegels.donker .tegel { background: rgba(255,255,255,.06); border-color: rgba(201,179,122,.35); }
.tegels.donker .tegel h3 { color: var(--wit); }
.tegels.donker .tegel p { color: #D9D1C0; }
.boekkaarten.reeks { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.boekkaarten.reeks h3 { font-size: 19px; }
.boekkaart .onderaan { color: var(--zacht); font-size: 15px; }
.boekkaart .onderaan b { font-size: 24px; }
.kaartknop { display: flex; justify-content: center; margin-top: 14px; padding: 12px 10px; font-size: 17px;
  font-weight: 700; border-radius: 8px; min-height: 48px; align-items: center; }
@media (max-width: 1100px) { .boekkaarten.reeks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .boekkaarten.reeks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .boekkaarten.reeks { grid-template-columns: minmax(0, 1fr); }
  .boekkaarten.reeks .boekkaart { flex-direction: row; align-items: stretch; }
  .boekkaarten.reeks .boekkaart img { width: 118px; height: 118px; margin: 14px 0 14px 14px; }
  .kaartknop { margin-top: 10px; min-height: 44px; padding: 8px 10px; font-size: 16px; }
}
.spreads { display: grid; gap: 28px; }
@media (min-width: 900px) { .spreads { grid-template-columns: 1fr 1fr; gap: 36px; } }
.mensenrij { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mensenrij figure { margin: 0; min-width: 0; }
.mensenrij img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; border-radius: 12px; }
.mensenrij figcaption { font-size: 15px; color: var(--zacht); padding-top: 8px; }
@media (max-width: 760px) {
  .mensenrij { grid-template-columns: repeat(3, 72%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .mensenrij figure { scroll-snap-align: start; }
}
.bonus .bonusprijs s { color: var(--zacht); }
.pijnpunten li::before { background: #F3E3D5; color: #8E4518; }

/* ---- receptvoorbeelden ---- */
.receptblad { display: grid; gap: 28px; background: var(--wit); border-radius: 16px; overflow: hidden; margin-bottom: 34px;
  box-shadow: 0 10px 30px rgba(42,37,32,.07); }
.receptblad > * { min-width: 0; }
.receptblad .foto img { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; }
.receptblad .recept { padding: 0 22px 28px; }
.receptblad h2 { margin: 0 0 8px; }
.receptblad .uitboek { font-size: 15px; color: var(--zacht); margin-bottom: 16px; }
.receptblad .recept ul { background: #F6F1E7; border-radius: 10px; padding: 16px 16px 8px 36px; }
.receptblad .recept ol li { margin-bottom: 10px; }
@media (min-width: 900px) {
  .receptblad { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 0; }
  .receptblad .recept { padding: 40px 48px; }
  .receptblad .foto img { height: 100%; position: sticky; top: 70px; }
}


.cookiebanner { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 60; max-width: 620px;
  margin: 0 auto; background: var(--wit); color: var(--inkt); border: 1px solid var(--lijn);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.16); padding: 10px 12px; font-size: 14px; line-height: 1.4;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cookiebanner p { margin: 0; flex: 1 1 220px; }
/* 13-09-2026: de banner lag op een telefoon over de vaste betaalbalk, waardoor een tik
   op Betalen in de banner viel en er niets gebeurde. Boven een vaste balk schuift hij omhoog. */
@media (max-width: 979px) {
  body.heeft-balk .cookiebanner, body:has(.onderbalk) .cookiebanner, body:has(.plakbalk.zichtbaar) .cookiebanner { bottom: 86px; }
}
.cookieknoppen { display: flex; gap: 10px; flex-wrap: wrap; }
.cookieknoppen .knop { padding: 8px 14px; font-size: 15px; min-height: 44px; border-bottom-width: 0; border-radius: 8px; }
.cookieknoppen .knop.licht { background: transparent; color: var(--groen); border: 1px solid var(--groen); box-shadow: none; }
body:has(.balk.open) .cookiebanner { display: none; }
.wachtwoordveld { position: relative; display: block; }
.wachtwoordveld input { padding-right: 78px; }
.toonknop { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 40px; padding: 0 12px;
  background: transparent; border: 0; color: var(--groen); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
footer .linkknop { min-height: 44px; }
.linkknop { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

/* ---------- codeveld op de kassa ---------- */
.standaardknop { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.codeblok { margin: 26px 0 0; border: 1px solid var(--lijn); border-radius: 10px; background: #FBF8F0; }
.codeblok summary { cursor: pointer; padding: 14px 16px; font-weight: 600; font-size: 16px; color: var(--groen); list-style: none; }
.codeblok summary::-webkit-details-marker { display: none; }
.codeblok summary::before { content: "+"; display: inline-block; width: 1.2em; font-weight: 700; color: var(--koper); }
.codeblok[open] summary::before { content: "\2212"; }
.coderij { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; padding: 0 16px; }
.coderij .veld { margin: 0; }
.coderij input { text-transform: uppercase; letter-spacing: .06em; }
.codeknop { min-height: 52px; padding: 0 18px; border-radius: 8px; border: 2px solid var(--groen); background: var(--groen);
  color: #fff; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.codeknop.licht { background: var(--wit); color: var(--groen); }
.codemelding { margin: 10px 16px 14px; font-size: 15px; line-height: 1.5; color: #A0451B; }
.codemelding.goed { color: #2F6B45; font-weight: 600; }
.codemelding.zacht { color: var(--zacht); }
.codeblok > .coderij:last-child { padding-bottom: 16px; }
.bon .kortingregel td { color: #2F6B45; }

/* ---------- Mijn boeken ---------- */
.mijnkop { background: var(--groen); color: var(--creme); border-bottom: 3px solid #C9B37A; }
.mijnkop .wrap { max-width: 1060px; padding-block: 34px 30px; display: flex; flex-wrap: wrap; gap: 14px 24px;
  align-items: end; justify-content: space-between; }
.mijnkop h1 { margin: 0; font-size: clamp(30px, 6vw, 46px); color: var(--creme); }
.mijnkop .ondertitel { margin: 6px 0 0; color: #D9D1C0; font-size: 17px; }
.mijnkop .uitlog { background: transparent; border: 1px solid rgba(249,247,238,.45); color: var(--creme); border-radius: 8px;
  padding: 9px 16px; font: inherit; font-size: 15px; cursor: pointer; }
.mijnkop .uitlog:hover { background: rgba(249,247,238,.1); }
.mijn { max-width: 1060px; padding-block: 8px 70px; }
.mijn h2 { font-size: clamp(24px, 4vw, 30px); margin: 46px 0 6px; }
.mijn .onderkop { color: var(--zacht); margin: 0 0 20px; font-size: 16px; }
.kast { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 22px; list-style: none; padding: 0; margin: 0; }
.kast li { margin: 0; background: var(--wit); border: 1px solid var(--lijn); border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: 0 10px 26px -18px rgba(42,37,32,.5); }
.kast img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.kast .boekinfo { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.kast .boektitel { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 18px; line-height: 1.25; margin: 0; }
.kast .boekmeta { font-size: 14px; color: var(--zacht); margin: -6px 0 0; line-height: 1.4; }
.kast .downloadknop { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
  background: var(--koper); color: #fff; border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 16px; }
.kast .downloadknop:hover { background: #8C4A18; }
.kast.nogniet li { box-shadow: none; background: #FBF8F0; }
.kast.nogniet img { filter: saturate(.8); }
.kast .bekijkknop { margin-top: auto; display: flex; align-items: center; justify-content: center; min-height: 46px;
  border: 2px solid var(--groen); color: var(--groen); border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 15px; }
.kast .bekijkknop:hover { background: #EAF3E8; }
.kast .prijsje { font-size: 15px; color: var(--zacht); margin: -4px 0 0; }
.kast .prijsje strong { color: var(--groen); }

.bon-kaart { background: #FBF3DF; border: 2px dashed #C9B37A; border-radius: 16px; padding: 26px clamp(18px, 4vw, 34px);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px 34px; align-items: center; margin-top: 18px; }
@media (max-width: 760px) { .bon-kaart { grid-template-columns: 1fr; } }
.bon-kaart h3 { margin: 0 0 8px; font-size: clamp(22px, 4vw, 28px); }
.bon-kaart p { margin: 0 0 12px; font-size: 16px; line-height: 1.6; }
.bon-kaart .spelregels { font-size: 14px; color: var(--zacht); margin: 0; }
.mijncode { background: var(--wit); border-radius: 12px; padding: 18px; text-align: center; box-shadow: 0 10px 26px -18px rgba(42,37,32,.5); }
.mijncode .label { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--zacht); margin: 0; }
.mijncode .code { font-family: "Karla", system-ui, sans-serif; font-weight: 700; font-size: clamp(26px, 6vw, 34px); letter-spacing: .1em;
  color: var(--groen); margin: 4px 0 12px; overflow-wrap: anywhere; }
.deelknoppen { display: grid; gap: 8px; }
.deelknoppen a, .deelknoppen button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px;
  border-radius: 8px; font: inherit; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; border: 2px solid var(--groen); }
.deelknoppen .hoofd { background: var(--groen); color: #fff; }
.deelknoppen .bij { background: var(--wit); color: var(--groen); }
.deelknoppen .rij { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mijncode .gekopieerd { font-size: 14px; color: #2F6B45; margin: 8px 0 0; min-height: 1.4em; }

.telling { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 20px 0 0; font-size: 16px; color: #4A433A; }
.telling strong { color: var(--inkt); font-size: 20px; font-variant-numeric: tabular-nums; margin-right: 4px; }
.lijstje { list-style: none; padding: 0; margin: 14px 0 0; border-top: 1px solid var(--lijn); }
.lijstje li { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--lijn); display: grid;
  grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; font-size: 16px; }
.lijstje .klein { font-size: 14px; color: var(--zacht); }
.lijstje .bedrag { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.lijstje .tegoedcode { font-weight: 700; letter-spacing: .06em; color: var(--groen); }
.pil { display: inline-block; font-size: 13px; font-weight: 700; padding: 2px 9px; border-radius: 99px; white-space: nowrap; }
.pil.geldig { background: #E3F0E4; color: #2F6B45; }
.pil.op { background: #EFE9DC; color: var(--zacht); }
.pil.verlopen { background: #F6E3D6; color: #A0451B; }

.inlogkaart { max-width: 520px; margin: 44px auto 70px; background: var(--wit); border: 1px solid var(--lijn); border-radius: 16px;
  padding: clamp(22px, 5vw, 38px); box-shadow: 0 18px 50px -30px rgba(27,59,46,.5); }
.inlogkaart h1 { font-size: clamp(28px, 6vw, 38px); margin-bottom: 10px; }
.inlogkaart .knop { width: 100%; border: 0; cursor: pointer; font-family: inherit; font-weight: 700; border-radius: 8px; text-align: center; }
.inlogkaart .voordelen { list-style: none; padding: 0; margin: 22px 0 0; font-size: 16px; color: var(--zacht); }
.inlogkaart .voordelen li { padding-left: 26px; position: relative; margin-bottom: 6px; }
.inlogkaart .voordelen li::before { content: "\2713"; position: absolute; left: 0; color: #2F6B45; font-weight: 700; }
.melding { border-radius: 10px; padding: 14px 16px; font-size: 16px; line-height: 1.55; margin: 0 0 18px; }
.melding.goed { background: #E8F0EA; border: 1px solid #BFD3C5; }
.melding.fout { background: #FBF0E7; border: 1px solid #E3B48F; }

.welkomkop { background: var(--groen); color: var(--creme); text-align: center; }
.welkomkop .wrap { padding-block: 44px 40px; }
.welkomkop h1 { color: var(--creme); margin-bottom: 10px; }
.welkomkop p { color: #D9D1C0; font-size: 19px; margin: 0 auto; max-width: 560px; }
.welkomkop .codekaartje { display: inline-block; margin-top: 20px; background: #FBF3DF; color: var(--groen); border: 2px dashed #C9B37A;
  border-radius: 10px; padding: 8px 18px; font-weight: 700; letter-spacing: .1em; font-size: 20px; }
.balk .mijnlink { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; white-space: nowrap; }
.balk .mijnlink svg { flex: none; }
@media (max-width: 899px) {
  .balk .mijnlink { order: 2; min-width: 44px; min-height: 44px; justify-content: center; border: 1px solid rgba(255,255,255,.35); border-radius: 8px; }
  .balk .mijnlink .tekst { position: absolute; left: -9999px; }
}
.balk .uitloglink { font-size: 15px; white-space: nowrap; color: #D9D1C0; }
@media (min-width: 900px) {
  .balk .wrap:has(.uitloglink) { justify-content: flex-start; }
  .balk .wrap:has(.uitloglink) .menu { margin-inline: auto; }
}
.balk .menuuitlog { display: none; }
@media (max-width: 899px) {
  .balk .uitloglink { display: none; }
  .balk.open .menuuitlog { display: block; }
}
body:has(.kassapagina) .balk .mijnlink, body:has(.kassapagina) .balk .uitloglink { display: none; }

.netverschenen { margin: 0 0 40px; }
.nieuwkaarten { display: grid; gap: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nieuwrij { display: grid; gap: 22px; }
.nieuwkaart { display: flex; flex-direction: column; background: var(--wit); border: 1px solid var(--lijn); border-radius: 14px;
  overflow: hidden; color: var(--inkt); text-decoration: none; transition: box-shadow .2s, transform .2s; }
.nieuwkaart:hover { box-shadow: 0 10px 28px rgba(42,37,32,.12); transform: translateY(-2px); }
.nieuwkaart:focus-visible { outline: 3px solid var(--koper); outline-offset: 3px; }
.nieuwbeeld { display: block; background: #E9E1D2; }
.nieuwbeeld img { display: block; width: 100%; height: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 18% 55%; }
.nieuwkaart.groot { flex-direction: row; }
.nieuwkaart.groot .nieuwbeeld { flex: 0 0 50%; }
.nieuwkaart.groot .nieuwtekst { padding: 28px 28px 28px; gap: 12px; justify-content: center; }
.nieuwkaart.groot p { font-size: 17px; }
.nieuwtekst { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.nieuwlabel { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--wit); background: var(--koper); border-radius: 999px; padding: 4px 10px; }
.nieuwkaart h3 { margin: 0; font-size: 21px; text-wrap: balance; }
.nieuwkaart.groot h3 { font-size: 25px; }
.nieuwkaart p { margin: 0; color: var(--zacht); font-size: 16px; line-height: 1.5; }
.nieuwkaart:not(.groot) p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nieuwkaart .onderaan { margin-top: auto; font-size: 16px; }
.nieuwkaart .onderaan b { font-family: "Fraunces", Georgia, serif; font-size: 22px; color: var(--groen); font-weight: 600; }
.nieuwkaart .onderaan s { color: var(--zacht); margin-right: 2px; }
.nieuwkaart .kaartknop { align-self: flex-start; }
.nieuwrij .nieuwkaart { flex-direction: row; }
.nieuwrij .nieuwbeeld { flex: 0 0 40%; }
.nieuwrij .nieuwbeeld img { aspect-ratio: auto; }
.boekthema { margin: 0 0 44px; scroll-margin-top: 90px; }
@media (max-width: 1180px) {
  .nieuwkaart.groot { flex-direction: column; }
  .nieuwkaart.groot .nieuwbeeld img { aspect-ratio: 4/3; height: auto; }
  .nieuwkaart.groot .nieuwtekst { padding: 18px 20px 20px; }
}
@media (max-width: 700px) {
  .nieuwkaarten { grid-template-columns: minmax(0, 1fr); }
  .nieuwkaart.groot h3 { font-size: 24px; }
}
@media (max-width: 620px) {
  .nieuwkaart.groot, .nieuwrij .nieuwkaart { flex-direction: column; }
  .nieuwkaart.groot .nieuwtekst { padding: 18px 20px 20px; }
  .nieuwbeeld img, .nieuwrij .nieuwbeeld img { aspect-ratio: 1/1; height: auto; }
}
.rubriekknoppen ul { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.rubriekknoppen a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 999px;
  background: var(--wit); border: 1px solid var(--lijn); color: var(--inkt); font-weight: 600; font-size: 16px; text-decoration: none; }
.rubriekknoppen a span { font-weight: 400; color: var(--zacht); font-size: 14px; }
.rubriekknoppen a:hover, .rubriekknoppen a[aria-current] { background: var(--groen); border-color: var(--groen); color: var(--wit); }
.rubriekknoppen a:hover span, .rubriekknoppen a[aria-current] span { color: var(--wit); }
.rubriekrij { margin: 0 0 44px; }
.rubriekkop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 6px 20px; margin: 0 0 16px; }
.rubriekkop h2 { margin: 0 0 4px; }
.rubriekkop p { margin: 0; color: var(--zacht); }
.rubriekmeer { font-weight: 700; white-space: nowrap; }
.receptkaarten.rij4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .receptkaarten.rij4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rubriekstand { border-top: 0; padding-top: 0; margin: 0 0 18px; }
.azlijst { margin: 50px 0 0; padding-top: 24px; border-top: 1px solid var(--lijn); }
.azlijst summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.azlijst summary::-webkit-details-marker { display: none; }
.azlijst summary::after { content: "+"; font-size: 28px; line-height: 1; color: var(--groen); }
.azlijst[open] summary::after { content: "‘2"; }
.azlijst summary h2 { margin: 0; font-size: 24px; }
.azlijst[open] ul { margin-top: 18px; }
.azlijst ul { list-style: none; margin: 0; padding: 0; columns: 3 260px; column-gap: 28px; }
.azlijst li { break-inside: avoid; padding: 4px 0; font-size: 16px; }
.receptenkop .bovenregel a { color: inherit; }
/* ---------- receptendatabase ---------- */
.receptenkop h1 { color: var(--wit); margin: 0 0 12px; }
.receptfilters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px 16px;
  align-items: end; background: var(--wit); border: 1px solid var(--lijn); border-radius: 14px; padding: 18px; margin: 0 0 26px; }
.receptfilters .zoekveld { grid-column: 1 / -1; }
.filterveld { margin: 0; }
.filterveld label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.filterveld input, .filterveld select { width: 100%; font: inherit; font-size: 17px; min-height: 50px; padding: 10px 14px;
  border: 1px solid #D5CCBB; border-radius: 8px; background: var(--wit); color: var(--inkt); }
.filterveld input:focus-visible, .filterveld select:focus-visible { outline: none; border-color: var(--groen); box-shadow: 0 0 0 3px rgba(46,90,62,.16); }
.filtervink { display: flex; align-items: center; gap: 10px; min-height: 50px; font-size: 16px; font-weight: 600; cursor: pointer; }
.filtervink input { width: 22px; height: 22px; accent-color: var(--groen); margin: 0; }
.filterstand { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 0;
  font-size: 16px; color: var(--zacht); border-top: 1px solid var(--lijn); padding-top: 12px; }
.filterstand #aantal-recepten { font-weight: 700; color: var(--inkt); }
.receptkaarten { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.receptkaart { margin: 0; min-width: 0; }
.receptkaart[hidden] { display: none; }
.receptkaart a { display: flex; flex-direction: column; height: 100%; background: var(--wit); border-radius: 14px; overflow: hidden;
  text-decoration: none; color: var(--inkt); box-shadow: 0 10px 26px -18px rgba(42,37,32,.55); transition: transform .15s; }
.receptkaart a:hover { transform: translateY(-2px); }
.receptkaart a:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.receptkaart a:focus-visible { outline: 3px solid var(--koper); outline-offset: 3px; }
.kaartbeeld { position: relative; display: block; background: #E9E1D2; }
.receptkaart img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.tijdlabel { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 8px; background: rgba(30,26,22,.72); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.2; }
.kaarttekst { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 16px 16px; flex: 1; min-width: 0; }
.receptkaart h3 { font-family: inherit; font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: 0; margin: 0;
  hyphens: manual; overflow-wrap: break-word; text-wrap: pretty;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.receptmeta { font-size: 15px; color: var(--zacht); }
.vegalabel { font-size: 13px; font-weight: 700; color: var(--groen); background: #E6EFE8; border-radius: 999px; padding: 2px 10px; }
.filterknop { display: none; }
.filterextra { display: contents; }
@media (max-width: 600px) {
  /* een recept per regel: foto links, titel rechts (zoals bij Jumbo) */
  .receptkaarten, .receptkaarten.rij4, .boekrecepten .receptkaarten { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .receptkaart a { flex-direction: row; border-radius: 12px; box-shadow: 0 6px 18px -14px rgba(42,37,32,.6); }
  .kaartbeeld { flex: 0 0 38%; max-width: 160px; }
  .receptkaart img { height: 100%; }
  .tijdlabel { left: 6px; bottom: 6px; padding: 3px 7px; font-size: 13px; }
  .kaarttekst { justify-content: center; padding: 12px 14px; gap: 5px; }
  .receptkaart h3, .boekrecepten .receptkaart h3 { font-size: 17px; }
  .receptmeta { font-size: 14px; }
  .vegalabel { font-size: 12px; }
  /* filters: zoekveld en een knop, de rest klapt uit */
  .receptfilters { grid-template-columns: minmax(0, 1fr) auto; padding: 12px; gap: 10px; }
  .receptfilters .zoekveld { grid-column: 1 / 2; }
  .receptfilters .zoekveld label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .filterknop:not([hidden]) { display: inline-flex; align-items: center; gap: 8px; align-self: end; min-height: 46px; padding: 0 16px;
    border: 0; border-radius: 8px; background: var(--groen); color: var(--wit); font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; }
  .filterknop[aria-expanded="true"] { background: var(--inkt); }
  .filterextra { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .receptfilters.ingeklapt .filterextra { display: none; }
  .filterextra .filterveld:first-child { grid-column: 1 / -1; }
  .filtervink { grid-column: 1 / -1; min-height: 40px; }
  .filterveld select, .filterveld input { font-size: 16px; min-height: 46px; padding: 8px 10px; }
  .filterveld label { font-size: 14px; }
  /* rubrieken als een rij om opzij te vegen, niet vier regels knoppen */
  .rubriekknoppen { margin: 0 -16px; }
  .rubriekknoppen ul { flex-wrap: nowrap; overflow-x: auto; padding: 2px 16px 6px; margin-bottom: 22px; scrollbar-width: none; }
  .rubriekknoppen ul::-webkit-scrollbar { display: none; }
  .rubriekknoppen li { flex: 0 0 auto; }
  .rubriekknoppen a { min-height: 40px; padding: 6px 14px; font-size: 15px; }
  .rubriekrij { margin-bottom: 32px; }
  .rubriekkop { margin-bottom: 12px; }
  .receptenkop p { font-size: 17px; }
}
.geenrecepten { background: var(--wit); border-radius: 12px; padding: 18px; }
.receptenuitleg { max-width: 720px; margin-top: 60px; }
.receptenuitleg h2 { margin-top: 0; }
.boekrecepten { margin-top: 44px; }
.boekrecepten h3 { font-size: 26px; margin: 0 0 16px; }
.boekrecepten > p { margin-top: 18px; }

.receptpagina { padding-block: 18px 40px; }
.kruimels { font-size: 15px; color: var(--zacht); margin: 0 0 18px; overflow-wrap: anywhere; }
.kruimels a { color: var(--zacht); }
.receptkop { display: grid; gap: 22px; align-items: center; }
@media (min-width: 900px) { .receptkop { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; } }
.receptfoto img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 16px; }
.receptvideo { margin: 36px 0 8px; }
.receptvideo video { display: block; width: 100%; max-width: 340px; height: auto; aspect-ratio: 9 / 16; border-radius: 14px; background: #142D23; }
@media print { .receptvideo { display: none; } }
.receptintro h1 { font-size: clamp(30px, 5.4vw, 48px); margin: 6px 0 12px;  hyphens: auto; overflow-wrap: break-word; }
.samenvatting { font-size: 20px; color: #4A433A; }
.receptfeiten { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.receptfeiten li { margin: 0; background: var(--wit); border: 1px solid var(--lijn); border-radius: 10px; padding: 8px 14px; line-height: 1.3; }
.receptfeiten span { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--zacht); }
.receptfeiten strong { font-size: 17px; }
.receptacties { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 14px; }
.receptacties .knop { font-size: 18px; padding: 13px 24px; border-radius: 8px; }
/* Leon 11-10-2026: print en favoriet kleiner dan de hoofdknop. */
.receptacties .knop.licht { font-size: 15px; padding: 8px 14px; min-height: 40px; border-width: 1px; }
.receptacties .favorietknop .hartje { font-size: 17px; }
.knop.licht { background: var(--wit); color: var(--groen); border: 2px solid var(--groen); cursor: pointer; font-family: inherit; }
.receptintro .uitboek { font-size: 16px; color: var(--zacht); margin: 0; }
.receptverhaal { max-width: 720px; margin: 40px auto 0; font-size: 19px; }
.receptkern { display: grid; gap: 22px; margin: 40px 0; scroll-margin-top: 80px; }
@media (min-width: 900px) { .receptkern { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px; align-items: start; }
  .ingredienten { position: sticky; top: 84px; } }
.ingredienten { background: #F6F1E7; border-radius: 16px; padding: 22px 24px; }
.ingredienten h2, .bereiding h2 { margin: 0 0 8px; }
.opbrengst { font-weight: 600; color: var(--zacht); margin-bottom: 12px; }
.ingredienten ul { padding-left: 20px; margin: 0; }
.ingredienten li { margin-bottom: 8px; }
.bereiding ol { counter-reset: stap; list-style: none; padding: 0; }
.bereiding ol li { counter-increment: stap; position: relative; padding: 0 0 18px 52px; margin: 0; scroll-margin-top: 90px; }
.bereiding ol li::before { content: counter(stap); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%;
  background: var(--groen); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 17px; }
.boekintro p { font-style: italic; color: #4A433A; }
.receptnotitie { background: var(--wit); border-left: 4px solid var(--goud); padding: 12px 16px; border-radius: 0 10px 10px 0; }
.receptcta { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 18px; align-items: center; background: var(--groen); color: #E6DFCE;
  border-radius: 18px; padding: 22px; margin: 50px 0; }
@media (min-width: 700px) { .receptcta { grid-template-columns: 180px minmax(0, 1fr); gap: 32px; padding: 30px 36px; } }
.receptcta img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 8px; box-shadow: 0 14px 30px rgba(0,0,0,.35); }
.receptcta h2 { margin: 2px 0 10px; font-size: clamp(22px, 3.6vw, 30px); }
.receptcta h2 a { color: var(--wit); text-decoration: none; }
.receptcta .bovenregel { color: var(--goud); margin-bottom: 4px; }
.receptcta p { margin: 0 0 14px; }
.ctaknoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 0 !important; }
.ctaprijs { font-family: "Fraunces", Georgia, serif; font-size: 28px; color: var(--wit); }
.ctaprijs s { font-size: 17px; color: #D9D1C0; font-family: "Karla", system-ui, sans-serif; }
@media (max-width: 520px) { .receptcta { grid-template-columns: 1fr; } .ctaomslag { max-width: 150px; } }
.tabelvak { max-width: 100%; overflow-x: auto; }
.recepttabel { min-width: 0; width: 100%; border-collapse: collapse; background: var(--wit); border-radius: 10px; margin: 0 0 18px; font-size: 17px; }
.recepttabel th, .recepttabel td { text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--lijn); }
.recepttabel td:first-child { white-space: nowrap; }
@media (max-width: 600px) { .recepttabel { font-size: 15px; } .recepttabel th, .recepttabel td { padding: 8px 9px; } }
.recepttabel th { background: #F4EEE1; font-size: 14px; text-transform: uppercase; letter-spacing: .05em; }
.receptextra { display: grid; gap: 10px 40px; }
@media (min-width: 900px) { .receptextra { grid-template-columns: 1fr 1fr; } }
.receptextra h2, .receptvariaties h2, .receptvragen h2 { font-size: clamp(24px, 3.6vw, 30px); margin: 30px 0 12px; }
.variaties { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.variatie { background: var(--wit); border: 1px solid var(--lijn); border-radius: 12px; padding: 16px 18px; }
.variatie h3 { margin: 0 0 6px; font-size: 19px; }
.variatie p { margin: 0; font-size: 17px; }
.receptvariaties, .receptvragen { max-width: 820px; }
.vraag { background: var(--wit); border: 1px solid var(--lijn); border-radius: 12px; margin-bottom: 10px; }
.vraag summary { cursor: pointer; padding: 14px 18px; font-weight: 700; font-size: 18px; }
.vraag p { padding: 0 18px 14px; margin: 0; }
/* ---------- beoordelingen en favorieten (11-10-2026) ---------- */
.onzichtbaar { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.receptscore { margin: -4px 0 12px; font-size: 17px; font-weight: 600; }
.receptscore a { color: var(--inkt); text-decoration: none; }
.receptscore a:hover { text-decoration: underline; }
.receptscore span, .beoordelingstand span { color: var(--koper); }
.favorietknop { display: inline-flex; align-items: center; gap: 8px; }
.favorietknop[hidden] { display: none; }
.favorietknop .hartje { font-size: 22px; line-height: 1; color: var(--koper); }
.favorietknop.aan { background: #F6EBE0; border-color: var(--koper); color: var(--koper); }
.receptacties button:focus-visible, .beheerknop:focus-visible, .beoordeelformulier .knop:focus-visible { outline: 3px solid var(--koper); outline-offset: 3px; }
.favorietmelding { margin: 0 0 12px; font-size: 16px; color: var(--zacht); min-height: 0; }
.favorietmelding:empty { display: none; }
.receptbeoordelingen { max-width: 820px; margin-top: 10px; }
.receptbeoordelingen h2 { font-size: clamp(24px, 3.6vw, 30px); margin: 30px 0 8px; }
.beoordelingstand { font-size: 18px; font-weight: 600; margin: 0 0 16px; }
.beoordelingenlijst { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 12px; }
.beoordeling { margin: 0; background: var(--wit); border: 1px solid var(--lijn); border-radius: 12px; padding: 14px 18px; min-width: 0; }
.beoordeling.verborgen { background: #F4EFE6; border-style: dashed; opacity: .85; }
.beoordelingkop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.beoordelingkop .sterren, .beheerbeoordelingen .sterren { color: var(--koper); letter-spacing: .08em; font-size: 18px; }
.beoordelingkop .datum { font-size: 14px; color: var(--zacht); }
.verborgenlabel { font-size: 13px; font-weight: 700; padding: 1px 9px; border-radius: 99px; background: #F6E3D6; color: #A0451B; }
.beoordeling p { margin: 6px 0 0; white-space: pre-line; overflow-wrap: anywhere; font-size: 17px; }
.beheerknop { margin-top: 10px; font: inherit; font-size: 15px; padding: 7px 14px; min-height: 40px; border-radius: 8px;
  border: 1px solid var(--groen); background: var(--wit); color: var(--groen); cursor: pointer; }
.beheerknop:hover { background: var(--groen); color: var(--wit); }
.beoordeeluitnodiging { background: #F6F1E7; border-radius: 12px; padding: 14px 18px; font-size: 17px; }
.beoordeeluitnodiging[hidden] { display: none; }
.beoordeelformulier { background: var(--wit); border: 1px solid var(--lijn); border-radius: 14px; padding: 18px 20px 20px; margin: 0 0 18px; }
.beoordeelformulier h3 { margin: 0 0 10px; }
.sterkeuze { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.sterkeuze legend { padding: 0; font-weight: 600; font-size: 16px; margin-bottom: 4px; }
.sterrenrij { display: flex; flex-wrap: wrap; gap: 2px; }
.sterlabel { position: relative; display: inline-grid; place-items: center; width: 48px; height: 48px; cursor: pointer; }
.sterlabel input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sterlabel span[aria-hidden] { font-size: 36px; line-height: 1; color: #D5CCBB; transition: color .1s; }
.sterlabel.aan span[aria-hidden] { color: var(--koper); }
.sterlabel input:focus-visible + span { outline: 3px solid var(--koper); outline-offset: 2px; border-radius: 6px; }
.veldlabel { display: block; font-weight: 600; font-size: 16px; margin-bottom: 6px; }
.beoordeelformulier textarea { display: block; width: 100%; max-width: 100%; font: inherit; font-size: 17px; line-height: 1.5; padding: 10px 14px;
  border: 1px solid #D5CCBB; border-radius: 8px; background: var(--wit); color: var(--inkt); resize: vertical; }
.beoordeelformulier textarea:focus-visible { outline: none; border-color: var(--groen); box-shadow: 0 0 0 3px rgba(46,90,62,.16); }
.beoordeelhulp { font-size: 14px; color: var(--zacht); margin: 6px 0 14px; }
.beoordeelhulp .teller { white-space: nowrap; font-variant-numeric: tabular-nums; }
.beoordeelformulier .knop { font-size: 18px; padding: 12px 24px; border-radius: 8px; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; font-family: inherit; }
.beoordeelformulier .knop:disabled { opacity: .6; cursor: wait; }
.beoordeelmelding { margin: 12px 0 0; font-size: 16px; }
.beoordeelmelding:empty { display: none; }
.beoordeelmelding.fout { color: #A0451B; font-weight: 600; }
.beoordeelmelding.goed { color: #2F6B45; font-weight: 600; }
/* Mijn boeken: favorieten, en voor het beheer de nieuwste beoordelingen */
.favorietenlijst { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.favorietenlijst li { margin: 0; min-width: 0; }
.favorietenlijst a { display: flex; align-items: center; gap: 14px; background: var(--wit); border: 1px solid var(--lijn); border-radius: 12px;
  padding: 8px 14px 8px 8px; color: var(--inkt); text-decoration: none; font-weight: 600; line-height: 1.3; min-height: 88px; }
.favorietenlijst a:hover { border-color: var(--groen); }
.favorietenlijst a:focus-visible { outline: 3px solid var(--koper); outline-offset: 2px; }
.favorietenlijst img { width: 72px; height: 72px; flex: none; object-fit: cover; border-radius: 8px; }
.favorietenlijst span { min-width: 0; overflow-wrap: anywhere; }
.beheerbeoordelingen { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.beheerbeoordelingen li { margin: 0; background: var(--wit); border: 1px solid var(--lijn); border-radius: 12px; padding: 12px 16px; min-width: 0; }
.beheerbeoordelingen li.verborgen { background: #F4EFE6; border-style: dashed; }
.beheerbeoordelingkop { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-weight: 700; overflow-wrap: anywhere; }
.beheerbeoordelingen .klein { font-size: 14px; color: var(--zacht); }
.beheerbeoordelingen p { margin: 6px 0 0; font-size: 16px; overflow-wrap: anywhere; }
.beheerbeoordelingen form { margin: 0; }
/* Leon 11-10-2026: logo op elke geprinte bladzijde. Een thead en tfoot herhaalt de
   browser op elke bladzijde; op het scherm is de tabel gewoon een blok. */
.printvel, .printvel > tbody, .printvel > tbody > tr, .printvel > tbody > tr > td { display: block; width: 100%; padding: 0; border: 0; min-width: 0; }
/* de algemene table-regel geeft min-width 380px; daardoor liep elke receptpagina op 360px uit beeld (12-10-2026) */
.printkop, .printvoet { display: none; }
@media print {
  @page { margin: 12mm 14mm; }
  .printvel { display: table; width: 100%; border-collapse: collapse; }
  .printvel > tbody { display: table-row-group; }
  .printvel > tbody > tr { display: table-row; }
  .printvel > tbody > tr > td { display: table-cell; }
  .printkop { display: table-header-group; }
  .printvoet { display: table-footer-group; }
  .printkop td, .printvoet td { padding: 0; }
  .printkop div { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 3mm;
    margin-bottom: 6mm; border-bottom: 1px solid #c9d3c9; font-size: 10pt; color: #2e5a3e; }
  .printkop img { height: 10mm; width: auto; }
  .printvoet div { margin-top: 6mm; padding-top: 2mm; border-top: 1px solid #c9d3c9; font-size: 9pt; color: #555; }
  .balk, footer, .receptcta, .receptacties, .kruimels, .receptvariaties, .receptvragen, .receptextra, .zandvlak, .cookiebanner, .receptverhaal,
  .receptbeoordelingen, .receptscore, .favorietmelding { display: none !important; }
  .receptkop { grid-template-columns: 180px 1fr; }
  body { background: #fff; font-size: 13pt; }
  .ingredienten { position: static; background: #fff; border: 1px solid #ccc; }
}

/* picture staat op display: contents; zonder dit telt <source> als vak in een
   raster en schuiven slotblok en bonuskaartjes een kolom op. */
source { display: none; }

/* ---- bestellen tussendoor ---- */
.tussencta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 28px; }
.tussencta .knop.vol { width: auto; flex: none; min-height: 52px; padding: 12px 28px; }
.tussencta .tekstlink { font-weight: 700; font-size: 17px; }
.ctaband { display: grid; gap: 16px 28px; align-items: center; margin-top: 48px; padding: 22px 26px;
  background: var(--creme); border: 1px solid var(--lijn); border-radius: 16px; }
.ctaband img { width: 88px; height: 88px; object-fit: cover; border-radius: 8px; box-shadow: 0 6px 16px rgba(42,37,32,.15); }
.ctaband .kop { display: block; font-family: "Fraunces", Georgia, serif; font-size: 23px; line-height: 1.2; font-weight: 600; color: var(--inkt); text-wrap: balance; }
.ctaband p { margin: 6px 0 0; font-size: 16px; line-height: 1.5; color: var(--zacht); }
.ctaband .rechts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.ctaband .prijs { font-family: "Fraunces", Georgia, serif; font-size: 32px; line-height: 1; font-weight: 600; color: var(--groen); white-space: nowrap; }
.ctaband .prijs s { font-family: "Karla", system-ui, sans-serif; font-size: 16px; font-weight: 400; color: var(--zacht); margin-right: 6px; }
.ctaband .knop.vol { width: auto; min-height: 52px; padding: 12px 28px; }
.zandvlak .ctaband { background: var(--wit); }
@media (min-width: 860px) { .ctaband { grid-template-columns: auto minmax(0, 1fr) auto; } }
@media (max-width: 859px) {
  .ctaband { padding: 20px 18px; }
  .ctaband img { display: none; }
  .ctaband .rechts .knop.vol { flex: 1 1 100%; }
}

/* ---- vragen naast een vaste kolom ---- */
.vragenduo { display: grid; gap: 22px; }
.vragenduo .blokkop { margin-bottom: 0; }
.vragenduo .blokkop p + p { margin-top: 14px; }
.vragenduo .vragen { max-width: none; }
@media (min-width: 900px) {
  .vragenduo { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; align-items: start; }
  .vragenduo .blokkop { position: sticky; top: 96px; }
}

/* ---- reeks onder de boekpagina ---- */
.reeksvoet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 28px; }
.reeksvoet p { margin: 0; color: var(--zacht); font-size: 17px; }
.reeksvoet .knop.licht { color: var(--groen); background: transparent; border: 2px solid var(--groen); min-height: 50px;
  display: inline-flex; align-items: center; padding: 10px 24px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.reeksvoet .knop.licht:hover { background: var(--groen); color: var(--wit); }

/* ---- broodkruimel in de boekhero ---- */
.boekhero .kruimel a { text-decoration: none; }
.boekhero .kruimel a:hover { text-decoration: underline; }
.boekhero .kruimel span { color: #D9D1C0; opacity: .8; }

/* geen crème streep tussen het groene slotblok en de groene voettekst */
main:has(> .slot) ~ footer { margin-top: 0; }

/* recepten onder de foto's: alle recepten van het boek op een rij */
.boekrecepten .receptkaarten { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 18px; }
.boekrecepten .receptkaart h3 { font-size: 16px; overflow-wrap: anywhere; }
@media (max-width: 600px) { .boekrecepten .receptkaarten { grid-template-columns: minmax(0, 1fr); gap: 12px; } }

.bladerboek { position: relative; outline: none; }
.bladerboek:focus-visible { outline: 3px solid #C9B37A; outline-offset: 6px; border-radius: 6px; }
.bb-podium { perspective: 2600px; display: flex; justify-content: center; padding: 8px 0 4px; overflow: hidden; }
.bb-boek { position: relative; width: min(100%, 980px); aspect-ratio: 2 / 1; transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.35,.1,.25,1); }
.bb-boek[data-stand="0"] { transform: translateX(-25%); }
.bb-boek[data-stand="4"] { transform: translateX(25%); }
.bb-blad { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; transform-origin: left center;
  transform-style: preserve-3d; transition: transform .95s cubic-bezier(.35,.1,.25,1); cursor: pointer; }
.bb-blad.bb-om { transform: rotateY(-180deg); }
.bb-kant { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: #fff; overflow: hidden; box-shadow: 0 22px 44px rgba(27,59,46,.20); }
.bb-kant img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.bb-achter { transform: rotateY(180deg); }
.bb-kant::after { content: ""; position: absolute; top: 0; bottom: 0; width: 12%; pointer-events: none; }
.bb-voor::after { left: 0; background: linear-gradient(90deg, rgba(0,0,0,.16), rgba(0,0,0,0)); }
.bb-achter::after { right: 0; background: linear-gradient(270deg, rgba(0,0,0,.16), rgba(0,0,0,0)); }
.bb-blad:first-child .bb-voor::after { display: none; }
.bb-knoppen { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 22px; }
.bb-knoppen button { width: 52px; height: 52px; border-radius: 999px; border: 1.5px solid #1B3B2E; background: #fff;
  color: #1B3B2E; font-size: 26px; line-height: 1; cursor: pointer; }
.bb-knoppen button:hover:not(:disabled) { background: #1B3B2E; color: #fff; }
.bb-knoppen button:disabled { opacity: .3; cursor: default; }
.bb-knoppen button:focus-visible { outline: 3px solid #C9B37A; outline-offset: 3px; }
.bb-teller { min-width: 210px; text-align: center; font-size: 16px; }
.bb-hint { text-align: center; font-size: 15px; opacity: .75; margin: 8px 0 0; }
.bladerboek.bb-enkel .bb-boek { width: min(100%, 520px); aspect-ratio: 1 / 1; transform: none; }
.bladerboek.bb-enkel .bb-blad { left: 0; width: 100%; transition: transform .8s cubic-bezier(.35,.1,.25,1), opacity 0s; }
.bladerboek.bb-enkel .bb-blad.bb-om { opacity: 0; transition: transform .8s cubic-bezier(.35,.1,.25,1), opacity .15s linear .65s; }
.bladerboek.bb-enkel .bb-voor::after { display: none; }
@media (prefers-reduced-motion: reduce) { .bb-boek, .bb-blad { transition: none !important; } }

.gratisband { background: #F1E6CF; border-block: 1px solid #E3D3B0; padding-block: 34px; }
.gratisband-binnen { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 40px; align-items: center; }
.gratisband-beeld img { width: 100%; height: auto; border-radius: 12px; }
.gratisband .bovenregel { color: var(--koper); }
.gratisband h2 { color: var(--groen); margin: 6px 0 10px; font-size: clamp(26px, 3.6vw, 38px); line-height: 1.12; text-wrap: balance; }
.gratisband p { margin: 0 0 20px; font-size: 19px; max-width: 34em; }
@media (max-width: 760px) {
  .gratisband-binnen { grid-template-columns: minmax(0, 1fr); gap: 16px; text-align: center; }
  .gratisband-beeld { max-width: 240px; margin-inline: auto; }
  .gratisband p { margin-inline: auto; }
}